@atlaskit/select 18.6.0 → 18.6.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 (16) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/PopupSelect/PopupSelect.js +2 -3
  3. package/dist/cjs/Select.js +1 -1
  4. package/dist/cjs/createSelect.js +3 -18
  5. package/dist/es2019/PopupSelect/PopupSelect.js +2 -3
  6. package/dist/es2019/Select.js +1 -1
  7. package/dist/es2019/createSelect.js +1 -14
  8. package/dist/esm/PopupSelect/PopupSelect.js +2 -3
  9. package/dist/esm/Select.js +1 -1
  10. package/dist/esm/createSelect.js +3 -18
  11. package/package.json +2 -2
  12. package/dist/cjs/styles.js +0 -311
  13. package/dist/es2019/styles.js +0 -303
  14. package/dist/esm/styles.js +0 -304
  15. package/dist/types/styles.d.ts +0 -2
  16. package/dist/types-ts4.5/styles.d.ts +0 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/select
2
2
 
3
+ ## 18.6.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#167336](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/167336)
8
+ [`ddb0846c39a88`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ddb0846c39a88) -
9
+ Integrate styles of select and react-select in a single place
10
+
3
11
  ## 18.6.0
4
12
 
5
13
  ### Minor Changes
package/dist/cjs/PopupSelect/PopupSelect.js CHANGED
@@ -25,7 +25,6 @@ var _useId = require("@atlaskit/ds-lib/use-id");
25
25
  var _reactSelect = require("@atlaskit/react-select");
26
26
  var _colors = require("@atlaskit/theme/colors");
27
27
  var _Select = _interopRequireDefault(require("../Select"));
28
- var _styles = _interopRequireDefault(require("../styles"));
29
28
  var _groupedOptionsAnnouncement = require("../utils/grouped-options-announcement");
30
29
  var _components = require("./components");
31
30
  var _excluded = ["footer", "label", "maxMenuWidth", "minMenuWidth", "placeholder", "target", "testId", "onMenuOpen", "onMenuClose"];
@@ -90,13 +89,13 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
90
89
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "targetRef", null);
91
90
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unbindWindowClick", null);
92
91
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unbindWindowKeydown", null);
93
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "defaultStyles", (0, _reactSelect.mergeStyles)((0, _styles.default)(_this.props.validationState || (_this.props.isInvalid ? 'error' : 'default'), _this.props.spacing === 'compact', 'default'), {
92
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "defaultStyles", {
94
93
  groupHeading: function groupHeading(provided) {
95
94
  return _objectSpread(_objectSpread({}, provided), {}, {
96
95
  color: "var(--ds-text-subtlest, ".concat(_colors.N80, ")")
97
96
  });
98
97
  }
99
- }));
98
+ });
100
99
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isOpenControlled", _this.props.isOpen !== undefined);
101
100
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "defaultOpenState", _this.isOpenControlled ? _this.props.isOpen : _this.props.defaultIsOpen);
102
101
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
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 = "18.6.0";
14
+ var packageVersion = "18.6.1";
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/cjs/createSelect.js CHANGED
@@ -10,29 +10,22 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
10
10
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
11
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
12
12
  var _react = _interopRequireWildcard(require("react"));
13
- var _reactSelect = require("@atlaskit/react-select");
14
13
  var _components = require("./components");
15
14
  var _inputAriaDescribedby = require("./components/input-aria-describedby");
16
15
  var _noOptions = require("./components/no-options");
17
- var _styles = _interopRequireDefault(require("./styles"));
18
16
  var _groupedOptionsAnnouncement = require("./utils/grouped-options-announcement");
19
- var _excluded = ["appearance", "ariaLiveMessages", "components", "isInvalid", "onClickPreventDefault", "spacing", "styles", "tabSelectsValue", "validationState"]; // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
17
+ var _excluded = ["ariaLiveMessages", "components", "isInvalid", "onClickPreventDefault", "tabSelectsValue", "validationState"]; // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
20
18
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
21
19
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
22
20
  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; }
23
21
  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) { (0, _defineProperty2.default)(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; }
24
22
  function createSelect(WrappedComponent) {
25
23
  var AtlaskitSelect = /*#__PURE__*/(0, _react.forwardRef)(function AtlaskitSelect(props, forwardedRef) {
26
- var appearance = props.appearance,
27
- ariaLiveMessages = props.ariaLiveMessages,
24
+ var ariaLiveMessages = props.ariaLiveMessages,
28
25
  componentsProp = props.components,
29
26
  isInvalid = props.isInvalid,
30
27
  _props$onClickPrevent = props.onClickPreventDefault,
31
28
  onClickPreventDefault = _props$onClickPrevent === void 0 ? true : _props$onClickPrevent,
32
- _props$spacing = props.spacing,
33
- spacing = _props$spacing === void 0 ? 'default' : _props$spacing,
34
- _props$styles = props.styles,
35
- styles = _props$styles === void 0 ? {} : _props$styles,
36
29
  _props$tabSelectsValu = props.tabSelectsValue,
37
30
  tabSelectsValue = _props$tabSelectsValu === void 0 ? false : _props$tabSelectsValu,
38
31
  _props$validationStat = props.validationState,
@@ -64,7 +57,6 @@ function createSelect(WrappedComponent) {
64
57
  }
65
58
  }
66
59
  }, [descriptionId, isSearchable]);
67
- var isCompact = spacing === 'compact';
68
60
 
69
61
  /**
70
62
  * The following `useImperativeHandle` hook exists for the sake of backwards compatibility.
@@ -96,16 +88,9 @@ function createSelect(WrappedComponent) {
96
88
  }, ariaLiveMessages) : _objectSpread({}, ariaLiveMessages),
97
89
  tabSelectsValue: tabSelectsValue,
98
90
  onClickPreventDefault: onClickPreventDefault,
99
- isInvalid: isInvalid
91
+ isInvalid: isInvalid || validationState === 'error'
100
92
  }, restProps, {
101
93
  components: components
102
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
103
- ,
104
- styles: (0, _reactSelect.mergeStyles)(
105
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
106
- (0, _styles.default)(
107
- // This will cover both props for invalid state while giving priority to isInvalid. When cleaning up validationState, we can just keep the inner condition.
108
- typeof isInvalid !== 'undefined' ? isInvalid ? 'error' : 'default' : validationState, isCompact, appearance || 'default'), styles)
109
94
  // indicates react-select to be async by default using the base Select component
110
95
  // so that makers can pass all async props on the base select to async load options.
111
96
  ,
package/dist/es2019/PopupSelect/PopupSelect.js CHANGED
@@ -11,7 +11,6 @@ import { IdProvider } from '@atlaskit/ds-lib/use-id';
11
11
  import { mergeStyles } from '@atlaskit/react-select';
12
12
  import { N80 } from '@atlaskit/theme/colors';
13
13
  import Select from '../Select';
14
- import baseStyles from '../styles';
15
14
  import { countAllOptions, isOptionsGrouped, onFocus } from '../utils/grouped-options-announcement';
16
15
  import { defaultComponents, DummyControl, MenuDialog } from './components';
17
16
  /**
@@ -58,12 +57,12 @@ export default class PopupSelect extends PureComponent {
58
57
  _defineProperty(this, "targetRef", null);
59
58
  _defineProperty(this, "unbindWindowClick", null);
60
59
  _defineProperty(this, "unbindWindowKeydown", null);
61
- _defineProperty(this, "defaultStyles", mergeStyles(baseStyles(this.props.validationState || (this.props.isInvalid ? 'error' : 'default'), this.props.spacing === 'compact', 'default'), {
60
+ _defineProperty(this, "defaultStyles", {
62
61
  groupHeading: provided => ({
63
62
  ...provided,
64
63
  color: `var(--ds-text-subtlest, ${N80})`
65
64
  })
66
- }));
65
+ });
67
66
  _defineProperty(this, "isOpenControlled", this.props.isOpen !== undefined);
68
67
  _defineProperty(this, "defaultOpenState", this.isOpenControlled ? this.props.isOpen : this.props.defaultIsOpen);
69
68
  _defineProperty(this, "state", {
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 = "18.6.0";
6
+ const packageVersion = "18.6.1";
7
7
  export const SelectWithoutAnalytics = createSelect(AsyncSelect);
8
8
  const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
9
9
  const Select = withAnalyticsContext({
package/dist/es2019/createSelect.js CHANGED
@@ -1,23 +1,18 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
3
3
  import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
4
- import { mergeStyles } from '@atlaskit/react-select';
5
4
  import { ClearIndicator, DropdownIndicator, IndicatorSeparator, LoadingIndicator, MultiValueRemove } from './components';
6
5
  import { Input } from './components/input-aria-describedby';
7
6
  import { NoOptionsMessage } from './components/no-options';
8
- import baseStyles from './styles';
9
7
  import { isOptionsGrouped, onFocus } from './utils/grouped-options-announcement';
10
8
  export default function createSelect(WrappedComponent) {
11
9
  const AtlaskitSelect = /*#__PURE__*/forwardRef(function AtlaskitSelect(props, forwardedRef) {
12
10
  const {
13
- appearance,
14
11
  ariaLiveMessages,
15
12
  components: componentsProp,
16
13
  isInvalid,
17
14
  // TODO: set to true when cleaning up validationState prop so it has a default value
18
15
  onClickPreventDefault = true,
19
- spacing = 'default',
20
- styles = {},
21
16
  tabSelectsValue = false,
22
17
  validationState = 'default',
23
18
  ...restProps
@@ -47,7 +42,6 @@ export default function createSelect(WrappedComponent) {
47
42
  }
48
43
  }
49
44
  }, [descriptionId, isSearchable]);
50
- const isCompact = spacing === 'compact';
51
45
 
52
46
  /**
53
47
  * The following `useImperativeHandle` hook exists for the sake of backwards compatibility.
@@ -78,16 +72,9 @@ export default function createSelect(WrappedComponent) {
78
72
  },
79
73
  tabSelectsValue: tabSelectsValue,
80
74
  onClickPreventDefault: onClickPreventDefault,
81
- isInvalid: isInvalid
75
+ isInvalid: isInvalid || validationState === 'error'
82
76
  }, restProps, {
83
77
  components: components
84
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
85
- ,
86
- styles: mergeStyles(
87
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
88
- baseStyles(
89
- // This will cover both props for invalid state while giving priority to isInvalid. When cleaning up validationState, we can just keep the inner condition.
90
- typeof isInvalid !== 'undefined' ? isInvalid ? 'error' : 'default' : validationState, isCompact, appearance || 'default'), styles)
91
78
  // indicates react-select to be async by default using the base Select component
92
79
  // so that makers can pass all async props on the base select to async load options.
93
80
  ,
package/dist/esm/PopupSelect/PopupSelect.js CHANGED
@@ -23,7 +23,6 @@ import { IdProvider } from '@atlaskit/ds-lib/use-id';
23
23
  import { mergeStyles } from '@atlaskit/react-select';
24
24
  import { N80 } from '@atlaskit/theme/colors';
25
25
  import Select from '../Select';
26
- import baseStyles from '../styles';
27
26
  import { countAllOptions, isOptionsGrouped, onFocus } from '../utils/grouped-options-announcement';
28
27
  import { defaultComponents, DummyControl, MenuDialog } from './components';
29
28
  /**
@@ -81,13 +80,13 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
81
80
  _defineProperty(_assertThisInitialized(_this), "targetRef", null);
82
81
  _defineProperty(_assertThisInitialized(_this), "unbindWindowClick", null);
83
82
  _defineProperty(_assertThisInitialized(_this), "unbindWindowKeydown", null);
84
- _defineProperty(_assertThisInitialized(_this), "defaultStyles", mergeStyles(baseStyles(_this.props.validationState || (_this.props.isInvalid ? 'error' : 'default'), _this.props.spacing === 'compact', 'default'), {
83
+ _defineProperty(_assertThisInitialized(_this), "defaultStyles", {
85
84
  groupHeading: function groupHeading(provided) {
86
85
  return _objectSpread(_objectSpread({}, provided), {}, {
87
86
  color: "var(--ds-text-subtlest, ".concat(N80, ")")
88
87
  });
89
88
  }
90
- }));
89
+ });
91
90
  _defineProperty(_assertThisInitialized(_this), "isOpenControlled", _this.props.isOpen !== undefined);
92
91
  _defineProperty(_assertThisInitialized(_this), "defaultOpenState", _this.isOpenControlled ? _this.props.isOpen : _this.props.defaultIsOpen);
93
92
  _defineProperty(_assertThisInitialized(_this), "state", {
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 = "18.6.0";
6
+ var packageVersion = "18.6.1";
7
7
  export var SelectWithoutAnalytics = createSelect(AsyncSelect);
8
8
  var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
9
9
  var Select = withAnalyticsContext({
package/dist/esm/createSelect.js CHANGED
@@ -1,29 +1,22 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
- var _excluded = ["appearance", "ariaLiveMessages", "components", "isInvalid", "onClickPreventDefault", "spacing", "styles", "tabSelectsValue", "validationState"];
4
+ var _excluded = ["ariaLiveMessages", "components", "isInvalid", "onClickPreventDefault", "tabSelectsValue", "validationState"];
5
5
  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; }
6
6
  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; }
7
7
  // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
8
8
  import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
9
- import { mergeStyles } from '@atlaskit/react-select';
10
9
  import { ClearIndicator, DropdownIndicator, IndicatorSeparator, LoadingIndicator, MultiValueRemove } from './components';
11
10
  import { Input } from './components/input-aria-describedby';
12
11
  import { NoOptionsMessage } from './components/no-options';
13
- import baseStyles from './styles';
14
12
  import { isOptionsGrouped, onFocus as _onFocus } from './utils/grouped-options-announcement';
15
13
  export default function createSelect(WrappedComponent) {
16
14
  var AtlaskitSelect = /*#__PURE__*/forwardRef(function AtlaskitSelect(props, forwardedRef) {
17
- var appearance = props.appearance,
18
- ariaLiveMessages = props.ariaLiveMessages,
15
+ var ariaLiveMessages = props.ariaLiveMessages,
19
16
  componentsProp = props.components,
20
17
  isInvalid = props.isInvalid,
21
18
  _props$onClickPrevent = props.onClickPreventDefault,
22
19
  onClickPreventDefault = _props$onClickPrevent === void 0 ? true : _props$onClickPrevent,
23
- _props$spacing = props.spacing,
24
- spacing = _props$spacing === void 0 ? 'default' : _props$spacing,
25
- _props$styles = props.styles,
26
- styles = _props$styles === void 0 ? {} : _props$styles,
27
20
  _props$tabSelectsValu = props.tabSelectsValue,
28
21
  tabSelectsValue = _props$tabSelectsValu === void 0 ? false : _props$tabSelectsValu,
29
22
  _props$validationStat = props.validationState,
@@ -55,7 +48,6 @@ export default function createSelect(WrappedComponent) {
55
48
  }
56
49
  }
57
50
  }, [descriptionId, isSearchable]);
58
- var isCompact = spacing === 'compact';
59
51
 
60
52
  /**
61
53
  * The following `useImperativeHandle` hook exists for the sake of backwards compatibility.
@@ -87,16 +79,9 @@ export default function createSelect(WrappedComponent) {
87
79
  }, ariaLiveMessages) : _objectSpread({}, ariaLiveMessages),
88
80
  tabSelectsValue: tabSelectsValue,
89
81
  onClickPreventDefault: onClickPreventDefault,
90
- isInvalid: isInvalid
82
+ isInvalid: isInvalid || validationState === 'error'
91
83
  }, restProps, {
92
84
  components: components
93
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
94
- ,
95
- styles: mergeStyles(
96
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
97
- baseStyles(
98
- // This will cover both props for invalid state while giving priority to isInvalid. When cleaning up validationState, we can just keep the inner condition.
99
- typeof isInvalid !== 'undefined' ? isInvalid ? 'error' : 'default' : validationState, isCompact, appearance || 'default'), styles)
100
85
  // indicates react-select to be async by default using the base Select component
101
86
  // so that makers can pass all async props on the base select to async load options.
102
87
  ,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/select",
3
- "version": "18.6.0",
3
+ "version": "18.6.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/"
@@ -67,7 +67,7 @@
67
67
  "@af/accessibility-testing": "*",
68
68
  "@af/integration-testing": "*",
69
69
  "@af/visual-regression": "*",
70
- "@atlaskit/checkbox": "^15.1.0",
70
+ "@atlaskit/checkbox": "^15.2.0",
71
71
  "@atlaskit/modal-dialog": "^12.17.0",
72
72
  "@atlaskit/radio": "^6.6.0",
73
73
  "@atlaskit/ssr": "*",
package/dist/cjs/styles.js DELETED
@@ -1,311 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.default = baseStyles;
8
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
10
- var _colors = require("@atlaskit/theme/colors");
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) { (0, _defineProperty2.default)(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
- function baseStyles(validationState) {
14
- var isCompact = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
15
- var appearance = arguments.length > 2 ? arguments[2] : undefined;
16
- return {
17
- container: function container(css, _ref) {
18
- var isDisabled = _ref.isDisabled;
19
- return _objectSpread(_objectSpread({}, css), {}, {
20
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
21
- // react-select disables pointer events when isDisabled is true.
22
- // We override this and make the inner container turn it off instead.
23
- pointerEvents: 'all',
24
- cursor: isDisabled ? 'not-allowed' : css.cursor
25
- });
26
- },
27
- input: function input(css) {
28
- return _objectSpread(_objectSpread({}, css), {}, {
29
- color: "var(--ds-text, hsl(0, 0%, 20%))"
30
- });
31
- },
32
- control: function control(css, _ref2) {
33
- var isFocused = _ref2.isFocused,
34
- isDisabled = _ref2.isDisabled;
35
- var borderColor = isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : "var(--ds-border-input, ".concat(_colors.N100, ")");
36
- var backgroundColor = isFocused ? "var(--ds-background-input-pressed, ".concat(_colors.N0, ")") : "var(--ds-background-input, ".concat(_colors.N20, ")");
37
- var backgroundColorHover = isFocused ? "var(--ds-background-input-pressed, ".concat(_colors.N0, ")") : "var(--ds-background-input-hovered, ".concat(_colors.N30, ")");
38
- if (isDisabled) {
39
- backgroundColor = "var(--ds-background-disabled, ".concat(_colors.N20, ")");
40
- borderColor = "var(--ds-background-disabled, ".concat(_colors.N20, ")");
41
- }
42
- if (validationState === 'error') {
43
- borderColor = "var(--ds-border-danger, ".concat(_colors.R400, ")");
44
- }
45
- if (validationState === 'success') {
46
- borderColor = "var(--ds-border-success, ".concat(_colors.G400, ")");
47
- }
48
- var borderColorHover = isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : "var(--ds-border-input, ".concat(_colors.N100, ")");
49
- if (validationState === 'error') {
50
- borderColorHover = "var(--ds-border-danger, ".concat(_colors.R400, ")");
51
- }
52
- if (validationState === 'success') {
53
- borderColorHover = "var(--ds-border-success, ".concat(_colors.G400, ")");
54
- }
55
- var transitionDuration = '200ms';
56
- if (appearance === 'subtle') {
57
- borderColor = isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : 'transparent';
58
- backgroundColor = isFocused ? "var(--ds-surface, ".concat(_colors.N0, ")") : 'transparent';
59
- backgroundColorHover = isFocused ? "var(--ds-background-input-pressed, ".concat(_colors.N0, ")") : "var(--ds-background-input-hovered, ".concat(_colors.N30, ")");
60
- }
61
- if (appearance === 'none') {
62
- borderColor = 'transparent';
63
- backgroundColor = 'transparent';
64
- backgroundColorHover = 'transparent';
65
- borderColorHover = 'transparent';
66
- }
67
- return _objectSpread(_objectSpread({}, css), {}, {
68
- // Turn pointer events off when disabled - this makes it so hover etc don't work.
69
- pointerEvents: isDisabled ? 'none' : undefined,
70
- backgroundColor: backgroundColor,
71
- borderColor: borderColor,
72
- borderStyle: 'solid',
73
- borderRadius: "var(--ds-border-radius-100, 3px)",
74
- borderWidth: "var(--ds-border-width, 1px)",
75
- boxShadow: validationState === 'error' ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColor) : 'none',
76
- '&:focus-within': {
77
- boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColor)
78
- },
79
- minHeight: isCompact ? 32 : 40,
80
- padding: 0,
81
- transition: "background-color ".concat(transitionDuration, " ease-in-out,\n border-color ").concat(transitionDuration, " ease-in-out"),
82
- '::-webkit-scrollbar': {
83
- height: 8,
84
- width: 8
85
- },
86
- '::-webkit-scrollbar-corner': {
87
- display: 'none'
88
- },
89
- ':hover': {
90
- '::-webkit-scrollbar-thumb': {
91
- // scrollbars occur only if the user passes in a custom component with overflow: scroll
92
- backgroundColor: 'rgba(0,0,0,0.2)'
93
- },
94
- cursor: 'pointer',
95
- backgroundColor: backgroundColorHover,
96
- borderColor: borderColorHover
97
- },
98
- '::-webkit-scrollbar-thumb:hover': {
99
- backgroundColor: 'rgba(0,0,0,0.4)'
100
- }
101
- });
102
- },
103
- valueContainer: function valueContainer(css) {
104
- return _objectSpread(_objectSpread({}, css), {}, {
105
- paddingLeft: "var(--ds-space-075, 6px)",
106
- paddingRight: "var(--ds-space-075, 6px)",
107
- paddingBottom: isCompact ? 0 : 2,
108
- paddingTop: isCompact ? 0 : 2
109
- });
110
- },
111
- clearIndicator: function clearIndicator(css) {
112
- return _objectSpread(_objectSpread({}, css), {}, {
113
- color: "var(--ds-text-subtlest, ".concat(_colors.N70, ")"),
114
- paddingLeft: "var(--ds-space-025, 2px)",
115
- paddingRight: "var(--ds-space-025, 2px)",
116
- paddingBottom: isCompact ? 0 : 6,
117
- paddingTop: isCompact ? 0 : 6,
118
- ':hover': {
119
- color: "var(--ds-text-subtle, ".concat(_colors.N500, ")")
120
- }
121
- });
122
- },
123
- loadingIndicator: function loadingIndicator(css) {
124
- return _objectSpread(_objectSpread({}, css), {}, {
125
- paddingBottom: isCompact ? 0 : 6,
126
- paddingTop: isCompact ? 0 : 6
127
- });
128
- },
129
- dropdownIndicator: function dropdownIndicator(css, _ref3) {
130
- var isDisabled = _ref3.isDisabled;
131
- var color = "var(--ds-text-subtle, ".concat(_colors.N500, ")");
132
- if (isDisabled) {
133
- color = "var(--ds-text-disabled, ".concat(_colors.N70, ")");
134
- }
135
- return _objectSpread(_objectSpread({}, css), {}, {
136
- color: color,
137
- paddingLeft: "var(--ds-space-025, 2px)",
138
- paddingRight: "var(--ds-space-025, 2px)",
139
- paddingBottom: isCompact ? 0 : 6,
140
- paddingTop: isCompact ? 0 : 6,
141
- ':hover': {
142
- color: "var(--ds-text-subtle, ".concat(_colors.N200, ")")
143
- }
144
- });
145
- },
146
- indicatorsContainer: function indicatorsContainer(css) {
147
- return _objectSpread(_objectSpread({}, css), {}, {
148
- paddingRight: "var(--ds-space-050, 4px)"
149
- });
150
- },
151
- option: function option(css, _ref4) {
152
- var isFocused = _ref4.isFocused,
153
- isSelected = _ref4.isSelected,
154
- isDisabled = _ref4.isDisabled;
155
- var color = "var(--ds-text, ".concat(_colors.N800, ")");
156
- if (isDisabled) {
157
- color = "var(--ds-text-disabled, ".concat(_colors.N70, ")");
158
- } else if (isSelected) {
159
- color = "var(--ds-text-selected, ".concat(_colors.B400, ")");
160
- }
161
- var boxShadow;
162
- var backgroundColor;
163
- if (isDisabled) {
164
- backgroundColor = undefined;
165
- } else if (isSelected && isFocused) {
166
- backgroundColor = "var(--ds-background-selected-hovered, ".concat(_colors.B50, ")");
167
- } else if (isSelected) {
168
- backgroundColor = "var(--ds-background-selected, ".concat(_colors.B50, ")");
169
- } else if (isFocused) {
170
- backgroundColor = "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")");
171
- }
172
- if (!isDisabled && (isFocused || isSelected)) {
173
- boxShadow = "inset 2px 0px 0px ".concat("var(--ds-border-selected, ".concat(_colors.B400, ")"));
174
- }
175
- var cursor = isDisabled ? 'not-allowed' : css.cursor;
176
- return _objectSpread(_objectSpread({}, css), {}, {
177
- padding: '6px 12px',
178
- backgroundColor: backgroundColor,
179
- color: color,
180
- cursor: cursor,
181
- boxShadow: boxShadow,
182
- ':active': {
183
- backgroundColor: !isDisabled ? isSelected ? "var(--ds-background-selected-pressed, ".concat(_colors.N20, ")") : "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.N30, ")") : undefined
184
- },
185
- '@media screen and (-ms-high-contrast: active)': {
186
- borderLeft: !isDisabled && (isFocused || isSelected) ? '2px solid transparent' : ''
187
- }
188
- });
189
- },
190
- placeholder: function placeholder(css, _ref5) {
191
- var isDisabled = _ref5.isDisabled;
192
- return _objectSpread(_objectSpread({}, css), {}, {
193
- color: isDisabled ? "var(--ds-text-disabled, ".concat(_colors.N300, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
194
- });
195
- },
196
- singleValue: function singleValue(css, _ref6) {
197
- var isDisabled = _ref6.isDisabled;
198
- return _objectSpread(_objectSpread({}, css), {}, {
199
- color: isDisabled ? "var(--ds-text-disabled, ".concat(_colors.N70, ")") : "var(--ds-text, ".concat(_colors.N800, ")")
200
- });
201
- },
202
- menu: function menu(css) {
203
- return _objectSpread(_objectSpread({}, css), {}, {
204
- backgroundColor: "var(--ds-surface-overlay, white)",
205
- boxShadow: "var(--ds-shadow-overlay, 0 0 0 1px hsl(0deg 0% 0% / 10%), 0 4px 11px hsl(0deg 0% 0% / 10%))"
206
- });
207
- },
208
- menuList: function menuList(css) {
209
- return _objectSpread(_objectSpread({}, css), {}, {
210
- paddingTop: "var(--ds-space-100, 8px)",
211
- paddingBottom: "var(--ds-space-100, 8px)"
212
- });
213
- },
214
- multiValue: function multiValue(css, _ref7) {
215
- var isDisabled = _ref7.isDisabled,
216
- isFocused = _ref7.isFocused;
217
- var backgroundColor;
218
- var color;
219
- if (isDisabled) {
220
- // Use the basic neutral background so it is slightly separate from the
221
- // field's background
222
- backgroundColor = "var(--ds-background-neutral, ".concat(_colors.N40, ")");
223
- color = "var(--ds-text-disabled, ".concat(_colors.N70, ")");
224
- } else if (isFocused) {
225
- backgroundColor = "var(--ds-background-selected, ".concat(_colors.N40, ")");
226
- color = "var(--ds-text-selected, hsl(0, 0%, 20%))";
227
- } else {
228
- backgroundColor = (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? "var(--ds-background-neutral-subtle-hovered, #091E420F)" : "var(--ds-background-neutral, ".concat(_colors.N40, ")");
229
- color = "var(--ds-text, hsl(0, 0%, 20%))";
230
- }
231
- return _objectSpread(_objectSpread({}, css), {}, {
232
- borderRadius: "var(--ds-border-radius-050, 2px)",
233
- backgroundColor: backgroundColor,
234
- boxShadow: isFocused ? "0 0 0 2px ".concat("var(--ds-surface, transparent)", ", 0 0 0 4px ", "var(--ds-border-focused, transparent)") : 'none',
235
- maxWidth: '100%',
236
- '@media screen and (-ms-high-contrast: active)': {
237
- border: isFocused ? '1px solid transparent' : 'none'
238
- },
239
- color: color
240
- }, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && {
241
- borderRadius: "var(--ds-border-radius-100, 4px)",
242
- // Hardcode this color for visual refresh as there is no token color yet
243
- borderColor: '#B7B9BE',
244
- borderWidth: "var(--ds-border-width, 1px)",
245
- borderStyle: 'solid',
246
- backgroundColor: "var(--ds-background-input, #FFFFFF)"
247
- });
248
- },
249
- multiValueLabel: function multiValueLabel(css, _ref8) {
250
- var isDisabled = _ref8.isDisabled;
251
- return _objectSpread(_objectSpread({}, css), {}, {
252
- font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
253
- padding: "var(--ds-space-025, 2px)",
254
- color: isDisabled ? "var(--ds-text-disabled, ".concat(_colors.N70, ")") : 'inherit',
255
- paddingRight: "var(--ds-space-025, 2px)"
256
- }, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && {
257
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
258
- paddingTop: 0,
259
- paddingBottom: 0,
260
- paddingLeft: "var(--ds-space-050, 4px)"
261
- });
262
- },
263
- multiValueRemove: function multiValueRemove(css, _ref9) {
264
- var isFocused = _ref9.isFocused;
265
- return _objectSpread(_objectSpread({}, css), {}, {
266
- backgroundColor: isFocused ? "var(--ds-UNSAFE-transparent, ".concat(_colors.R75, ")") : undefined,
267
- fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text, #000)",
268
- paddingLeft: "var(--ds-space-025, 2px)",
269
- paddingRight: "var(--ds-space-025, 2px)",
270
- borderRadius: '0px 2px 2px 0px',
271
- // DSP-6470 we should style like Tag once we have the :has selector
272
- ':hover': {
273
- backgroundColor: "var(--ds-background-danger-hovered, ".concat(_colors.R75, ")"),
274
- fill: "var(--ds-text-danger, #000)"
275
- },
276
- ':active': {
277
- backgroundColor: "var(--ds-background-danger-pressed, ".concat(_colors.R75, ")"),
278
- fill: "var(--ds-text-danger, #000)"
279
- }
280
- }, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && {
281
- backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
282
- border: 'none',
283
- alignItems: 'center',
284
- justifyContent: 'center',
285
- alignSelf: 'center',
286
- appearance: 'none',
287
- borderRadius: "var(--ds-border-radius, 4px)",
288
- color: "var(--ds-text, #172B4D)",
289
- padding: "var(--ds-space-025, 2px)",
290
- marginRight: "var(--ds-space-025, 2px)",
291
- ':focus-visible': {
292
- outlineOffset: "var(--ds-space-negative-025, -2px)"
293
- },
294
- ':hover': {
295
- backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
296
- },
297
- ':active': {
298
- backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
299
- }
300
- });
301
- },
302
- groupHeading: function groupHeading(css) {
303
- return _objectSpread(_objectSpread({}, css), {}, {
304
- font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
305
- color: "var(--ds-text-subtle, ".concat(_colors.N200, ")"),
306
- fontWeight: "var(--ds-font-weight-bold, 700)".concat(" !important"),
307
- textTransform: 'none'
308
- });
309
- }
310
- };
311
- }
package/dist/es2019/styles.js DELETED
@@ -1,303 +0,0 @@
1
- import { fg } from '@atlaskit/platform-feature-flags';
2
- import { B100, B400, B50, G400, N0, N100, N20, N200, N30, N300, N40, N500, N70, N800, R400, R75 } from '@atlaskit/theme/colors';
3
- export default function baseStyles(validationState, isCompact = false, appearance) {
4
- return {
5
- container: (css, {
6
- isDisabled
7
- }) => ({
8
- ...css,
9
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
10
- // react-select disables pointer events when isDisabled is true.
11
- // We override this and make the inner container turn it off instead.
12
- pointerEvents: 'all',
13
- cursor: isDisabled ? 'not-allowed' : css.cursor
14
- }),
15
- input: css => ({
16
- ...css,
17
- color: "var(--ds-text, hsl(0, 0%, 20%))"
18
- }),
19
- control: (css, {
20
- isFocused,
21
- isDisabled
22
- }) => {
23
- let borderColor = isFocused ? `var(--ds-border-focused, ${B100})` : `var(--ds-border-input, ${N100})`;
24
- let backgroundColor = isFocused ? `var(--ds-background-input-pressed, ${N0})` : `var(--ds-background-input, ${N20})`;
25
- let backgroundColorHover = isFocused ? `var(--ds-background-input-pressed, ${N0})` : `var(--ds-background-input-hovered, ${N30})`;
26
- if (isDisabled) {
27
- backgroundColor = `var(--ds-background-disabled, ${N20})`;
28
- borderColor = `var(--ds-background-disabled, ${N20})`;
29
- }
30
- if (validationState === 'error') {
31
- borderColor = `var(--ds-border-danger, ${R400})`;
32
- }
33
- if (validationState === 'success') {
34
- borderColor = `var(--ds-border-success, ${G400})`;
35
- }
36
- let borderColorHover = isFocused ? `var(--ds-border-focused, ${B100})` : `var(--ds-border-input, ${N100})`;
37
- if (validationState === 'error') {
38
- borderColorHover = `var(--ds-border-danger, ${R400})`;
39
- }
40
- if (validationState === 'success') {
41
- borderColorHover = `var(--ds-border-success, ${G400})`;
42
- }
43
- const transitionDuration = '200ms';
44
- if (appearance === 'subtle') {
45
- borderColor = isFocused ? `var(--ds-border-focused, ${B100})` : 'transparent';
46
- backgroundColor = isFocused ? `var(--ds-surface, ${N0})` : 'transparent';
47
- backgroundColorHover = isFocused ? `var(--ds-background-input-pressed, ${N0})` : `var(--ds-background-input-hovered, ${N30})`;
48
- }
49
- if (appearance === 'none') {
50
- borderColor = 'transparent';
51
- backgroundColor = 'transparent';
52
- backgroundColorHover = 'transparent';
53
- borderColorHover = 'transparent';
54
- }
55
- return {
56
- ...css,
57
- // Turn pointer events off when disabled - this makes it so hover etc don't work.
58
- pointerEvents: isDisabled ? 'none' : undefined,
59
- backgroundColor,
60
- borderColor,
61
- borderStyle: 'solid',
62
- borderRadius: "var(--ds-border-radius-100, 3px)",
63
- borderWidth: "var(--ds-border-width, 1px)",
64
- boxShadow: validationState === 'error' ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${borderColor}` : 'none',
65
- '&:focus-within': {
66
- boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${borderColor}`
67
- },
68
- minHeight: isCompact ? 32 : 40,
69
- padding: 0,
70
- transition: `background-color ${transitionDuration} ease-in-out,
71
- border-color ${transitionDuration} ease-in-out`,
72
- '::-webkit-scrollbar': {
73
- height: 8,
74
- width: 8
75
- },
76
- '::-webkit-scrollbar-corner': {
77
- display: 'none'
78
- },
79
- ':hover': {
80
- '::-webkit-scrollbar-thumb': {
81
- // scrollbars occur only if the user passes in a custom component with overflow: scroll
82
- backgroundColor: 'rgba(0,0,0,0.2)'
83
- },
84
- cursor: 'pointer',
85
- backgroundColor: backgroundColorHover,
86
- borderColor: borderColorHover
87
- },
88
- '::-webkit-scrollbar-thumb:hover': {
89
- backgroundColor: 'rgba(0,0,0,0.4)'
90
- }
91
- };
92
- },
93
- valueContainer: css => ({
94
- ...css,
95
- paddingLeft: "var(--ds-space-075, 6px)",
96
- paddingRight: "var(--ds-space-075, 6px)",
97
- paddingBottom: isCompact ? 0 : 2,
98
- paddingTop: isCompact ? 0 : 2
99
- }),
100
- clearIndicator: css => ({
101
- ...css,
102
- color: `var(--ds-text-subtlest, ${N70})`,
103
- paddingLeft: "var(--ds-space-025, 2px)",
104
- paddingRight: "var(--ds-space-025, 2px)",
105
- paddingBottom: isCompact ? 0 : 6,
106
- paddingTop: isCompact ? 0 : 6,
107
- ':hover': {
108
- color: `var(--ds-text-subtle, ${N500})`
109
- }
110
- }),
111
- loadingIndicator: css => ({
112
- ...css,
113
- paddingBottom: isCompact ? 0 : 6,
114
- paddingTop: isCompact ? 0 : 6
115
- }),
116
- dropdownIndicator: (css, {
117
- isDisabled
118
- }) => {
119
- let color = `var(--ds-text-subtle, ${N500})`;
120
- if (isDisabled) {
121
- color = `var(--ds-text-disabled, ${N70})`;
122
- }
123
- return {
124
- ...css,
125
- color,
126
- paddingLeft: "var(--ds-space-025, 2px)",
127
- paddingRight: "var(--ds-space-025, 2px)",
128
- paddingBottom: isCompact ? 0 : 6,
129
- paddingTop: isCompact ? 0 : 6,
130
- ':hover': {
131
- color: `var(--ds-text-subtle, ${N200})`
132
- }
133
- };
134
- },
135
- indicatorsContainer: css => ({
136
- ...css,
137
- paddingRight: "var(--ds-space-050, 4px)"
138
- }),
139
- option: (css, {
140
- isFocused,
141
- isSelected,
142
- isDisabled
143
- }) => {
144
- let color = `var(--ds-text, ${N800})`;
145
- if (isDisabled) {
146
- color = `var(--ds-text-disabled, ${N70})`;
147
- } else if (isSelected) {
148
- color = `var(--ds-text-selected, ${B400})`;
149
- }
150
- let boxShadow;
151
- let backgroundColor;
152
- if (isDisabled) {
153
- backgroundColor = undefined;
154
- } else if (isSelected && isFocused) {
155
- backgroundColor = `var(--ds-background-selected-hovered, ${B50})`;
156
- } else if (isSelected) {
157
- backgroundColor = `var(--ds-background-selected, ${B50})`;
158
- } else if (isFocused) {
159
- backgroundColor = `var(--ds-background-neutral-subtle-hovered, ${N20})`;
160
- }
161
- if (!isDisabled && (isFocused || isSelected)) {
162
- boxShadow = `inset 2px 0px 0px ${`var(--ds-border-selected, ${B400})`}`;
163
- }
164
- const cursor = isDisabled ? 'not-allowed' : css.cursor;
165
- return {
166
- ...css,
167
- padding: '6px 12px',
168
- backgroundColor,
169
- color,
170
- cursor,
171
- boxShadow,
172
- ':active': {
173
- backgroundColor: !isDisabled ? isSelected ? `var(--ds-background-selected-pressed, ${N20})` : `var(--ds-background-neutral-subtle-pressed, ${N30})` : undefined
174
- },
175
- '@media screen and (-ms-high-contrast: active)': {
176
- borderLeft: !isDisabled && (isFocused || isSelected) ? '2px solid transparent' : ''
177
- }
178
- };
179
- },
180
- placeholder: (css, {
181
- isDisabled
182
- }) => ({
183
- ...css,
184
- color: isDisabled ? `var(--ds-text-disabled, ${N300})` : `var(--ds-text-subtlest, ${N200})`
185
- }),
186
- singleValue: (css, {
187
- isDisabled
188
- }) => ({
189
- ...css,
190
- color: isDisabled ? `var(--ds-text-disabled, ${N70})` : `var(--ds-text, ${N800})`
191
- }),
192
- menu: css => ({
193
- ...css,
194
- backgroundColor: "var(--ds-surface-overlay, white)",
195
- boxShadow: "var(--ds-shadow-overlay, 0 0 0 1px hsl(0deg 0% 0% / 10%), 0 4px 11px hsl(0deg 0% 0% / 10%))"
196
- }),
197
- menuList: css => ({
198
- ...css,
199
- paddingTop: "var(--ds-space-100, 8px)",
200
- paddingBottom: "var(--ds-space-100, 8px)"
201
- }),
202
- multiValue: (css, {
203
- isDisabled,
204
- isFocused
205
- }) => {
206
- let backgroundColor;
207
- let color;
208
- if (isDisabled) {
209
- // Use the basic neutral background so it is slightly separate from the
210
- // field's background
211
- backgroundColor = `var(--ds-background-neutral, ${N40})`;
212
- color = `var(--ds-text-disabled, ${N70})`;
213
- } else if (isFocused) {
214
- backgroundColor = `var(--ds-background-selected, ${N40})`;
215
- color = "var(--ds-text-selected, hsl(0, 0%, 20%))";
216
- } else {
217
- backgroundColor = fg('platform-component-visual-refresh') ? "var(--ds-background-neutral-subtle-hovered, #091E420F)" : `var(--ds-background-neutral, ${N40})`;
218
- color = "var(--ds-text, hsl(0, 0%, 20%))";
219
- }
220
- return {
221
- ...css,
222
- borderRadius: "var(--ds-border-radius-050, 2px)",
223
- backgroundColor,
224
- boxShadow: isFocused ? `0 0 0 2px ${"var(--ds-surface, transparent)"}, 0 0 0 4px ${"var(--ds-border-focused, transparent)"}` : 'none',
225
- maxWidth: '100%',
226
- '@media screen and (-ms-high-contrast: active)': {
227
- border: isFocused ? '1px solid transparent' : 'none'
228
- },
229
- color,
230
- ...(fg('platform-component-visual-refresh') && {
231
- borderRadius: "var(--ds-border-radius-100, 4px)",
232
- // Hardcode this color for visual refresh as there is no token color yet
233
- borderColor: '#B7B9BE',
234
- borderWidth: "var(--ds-border-width, 1px)",
235
- borderStyle: 'solid',
236
- backgroundColor: "var(--ds-background-input, #FFFFFF)"
237
- })
238
- };
239
- },
240
- multiValueLabel: (css, {
241
- isDisabled
242
- }) => ({
243
- ...css,
244
- font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
245
- padding: "var(--ds-space-025, 2px)",
246
- color: isDisabled ? `var(--ds-text-disabled, ${N70})` : 'inherit',
247
- paddingRight: "var(--ds-space-025, 2px)",
248
- ...(fg('platform-component-visual-refresh') && {
249
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
250
- paddingTop: 0,
251
- paddingBottom: 0,
252
- paddingLeft: "var(--ds-space-050, 4px)"
253
- })
254
- }),
255
- multiValueRemove: (css, {
256
- isFocused
257
- }) => ({
258
- ...css,
259
- backgroundColor: isFocused ? `var(--ds-UNSAFE-transparent, ${R75})` : undefined,
260
- fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text, #000)",
261
- paddingLeft: "var(--ds-space-025, 2px)",
262
- paddingRight: "var(--ds-space-025, 2px)",
263
- borderRadius: '0px 2px 2px 0px',
264
- // DSP-6470 we should style like Tag once we have the :has selector
265
- ':hover': {
266
- backgroundColor: `var(--ds-background-danger-hovered, ${R75})`,
267
- fill: "var(--ds-text-danger, #000)"
268
- },
269
- ':active': {
270
- backgroundColor: `var(--ds-background-danger-pressed, ${R75})`,
271
- fill: "var(--ds-text-danger, #000)"
272
- },
273
- ...(fg('platform-component-visual-refresh') && {
274
- backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
275
- border: 'none',
276
- alignItems: 'center',
277
- justifyContent: 'center',
278
- alignSelf: 'center',
279
- appearance: 'none',
280
- borderRadius: "var(--ds-border-radius, 4px)",
281
- color: "var(--ds-text, #172B4D)",
282
- padding: "var(--ds-space-025, 2px)",
283
- marginRight: "var(--ds-space-025, 2px)",
284
- ':focus-visible': {
285
- outlineOffset: "var(--ds-space-negative-025, -2px)"
286
- },
287
- ':hover': {
288
- backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
289
- },
290
- ':active': {
291
- backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
292
- }
293
- })
294
- }),
295
- groupHeading: css => ({
296
- ...css,
297
- font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
298
- color: `var(--ds-text-subtle, ${N200})`,
299
- fontWeight: `${"var(--ds-font-weight-bold, 700)"} !important`,
300
- textTransform: 'none'
301
- })
302
- };
303
- }
package/dist/esm/styles.js DELETED
@@ -1,304 +0,0 @@
1
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
- 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; }
3
- 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; }
4
- import { fg } from '@atlaskit/platform-feature-flags';
5
- import { B100, B400, B50, G400, N0, N100, N20, N200, N30, N300, N40, N500, N70, N800, R400, R75 } from '@atlaskit/theme/colors';
6
- export default function baseStyles(validationState) {
7
- var isCompact = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
8
- var appearance = arguments.length > 2 ? arguments[2] : undefined;
9
- return {
10
- container: function container(css, _ref) {
11
- var isDisabled = _ref.isDisabled;
12
- return _objectSpread(_objectSpread({}, css), {}, {
13
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
14
- // react-select disables pointer events when isDisabled is true.
15
- // We override this and make the inner container turn it off instead.
16
- pointerEvents: 'all',
17
- cursor: isDisabled ? 'not-allowed' : css.cursor
18
- });
19
- },
20
- input: function input(css) {
21
- return _objectSpread(_objectSpread({}, css), {}, {
22
- color: "var(--ds-text, hsl(0, 0%, 20%))"
23
- });
24
- },
25
- control: function control(css, _ref2) {
26
- var isFocused = _ref2.isFocused,
27
- isDisabled = _ref2.isDisabled;
28
- var borderColor = isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : "var(--ds-border-input, ".concat(N100, ")");
29
- var backgroundColor = isFocused ? "var(--ds-background-input-pressed, ".concat(N0, ")") : "var(--ds-background-input, ".concat(N20, ")");
30
- var backgroundColorHover = isFocused ? "var(--ds-background-input-pressed, ".concat(N0, ")") : "var(--ds-background-input-hovered, ".concat(N30, ")");
31
- if (isDisabled) {
32
- backgroundColor = "var(--ds-background-disabled, ".concat(N20, ")");
33
- borderColor = "var(--ds-background-disabled, ".concat(N20, ")");
34
- }
35
- if (validationState === 'error') {
36
- borderColor = "var(--ds-border-danger, ".concat(R400, ")");
37
- }
38
- if (validationState === 'success') {
39
- borderColor = "var(--ds-border-success, ".concat(G400, ")");
40
- }
41
- var borderColorHover = isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : "var(--ds-border-input, ".concat(N100, ")");
42
- if (validationState === 'error') {
43
- borderColorHover = "var(--ds-border-danger, ".concat(R400, ")");
44
- }
45
- if (validationState === 'success') {
46
- borderColorHover = "var(--ds-border-success, ".concat(G400, ")");
47
- }
48
- var transitionDuration = '200ms';
49
- if (appearance === 'subtle') {
50
- borderColor = isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : 'transparent';
51
- backgroundColor = isFocused ? "var(--ds-surface, ".concat(N0, ")") : 'transparent';
52
- backgroundColorHover = isFocused ? "var(--ds-background-input-pressed, ".concat(N0, ")") : "var(--ds-background-input-hovered, ".concat(N30, ")");
53
- }
54
- if (appearance === 'none') {
55
- borderColor = 'transparent';
56
- backgroundColor = 'transparent';
57
- backgroundColorHover = 'transparent';
58
- borderColorHover = 'transparent';
59
- }
60
- return _objectSpread(_objectSpread({}, css), {}, {
61
- // Turn pointer events off when disabled - this makes it so hover etc don't work.
62
- pointerEvents: isDisabled ? 'none' : undefined,
63
- backgroundColor: backgroundColor,
64
- borderColor: borderColor,
65
- borderStyle: 'solid',
66
- borderRadius: "var(--ds-border-radius-100, 3px)",
67
- borderWidth: "var(--ds-border-width, 1px)",
68
- boxShadow: validationState === 'error' ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColor) : 'none',
69
- '&:focus-within': {
70
- boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColor)
71
- },
72
- minHeight: isCompact ? 32 : 40,
73
- padding: 0,
74
- transition: "background-color ".concat(transitionDuration, " ease-in-out,\n border-color ").concat(transitionDuration, " ease-in-out"),
75
- '::-webkit-scrollbar': {
76
- height: 8,
77
- width: 8
78
- },
79
- '::-webkit-scrollbar-corner': {
80
- display: 'none'
81
- },
82
- ':hover': {
83
- '::-webkit-scrollbar-thumb': {
84
- // scrollbars occur only if the user passes in a custom component with overflow: scroll
85
- backgroundColor: 'rgba(0,0,0,0.2)'
86
- },
87
- cursor: 'pointer',
88
- backgroundColor: backgroundColorHover,
89
- borderColor: borderColorHover
90
- },
91
- '::-webkit-scrollbar-thumb:hover': {
92
- backgroundColor: 'rgba(0,0,0,0.4)'
93
- }
94
- });
95
- },
96
- valueContainer: function valueContainer(css) {
97
- return _objectSpread(_objectSpread({}, css), {}, {
98
- paddingLeft: "var(--ds-space-075, 6px)",
99
- paddingRight: "var(--ds-space-075, 6px)",
100
- paddingBottom: isCompact ? 0 : 2,
101
- paddingTop: isCompact ? 0 : 2
102
- });
103
- },
104
- clearIndicator: function clearIndicator(css) {
105
- return _objectSpread(_objectSpread({}, css), {}, {
106
- color: "var(--ds-text-subtlest, ".concat(N70, ")"),
107
- paddingLeft: "var(--ds-space-025, 2px)",
108
- paddingRight: "var(--ds-space-025, 2px)",
109
- paddingBottom: isCompact ? 0 : 6,
110
- paddingTop: isCompact ? 0 : 6,
111
- ':hover': {
112
- color: "var(--ds-text-subtle, ".concat(N500, ")")
113
- }
114
- });
115
- },
116
- loadingIndicator: function loadingIndicator(css) {
117
- return _objectSpread(_objectSpread({}, css), {}, {
118
- paddingBottom: isCompact ? 0 : 6,
119
- paddingTop: isCompact ? 0 : 6
120
- });
121
- },
122
- dropdownIndicator: function dropdownIndicator(css, _ref3) {
123
- var isDisabled = _ref3.isDisabled;
124
- var color = "var(--ds-text-subtle, ".concat(N500, ")");
125
- if (isDisabled) {
126
- color = "var(--ds-text-disabled, ".concat(N70, ")");
127
- }
128
- return _objectSpread(_objectSpread({}, css), {}, {
129
- color: color,
130
- paddingLeft: "var(--ds-space-025, 2px)",
131
- paddingRight: "var(--ds-space-025, 2px)",
132
- paddingBottom: isCompact ? 0 : 6,
133
- paddingTop: isCompact ? 0 : 6,
134
- ':hover': {
135
- color: "var(--ds-text-subtle, ".concat(N200, ")")
136
- }
137
- });
138
- },
139
- indicatorsContainer: function indicatorsContainer(css) {
140
- return _objectSpread(_objectSpread({}, css), {}, {
141
- paddingRight: "var(--ds-space-050, 4px)"
142
- });
143
- },
144
- option: function option(css, _ref4) {
145
- var isFocused = _ref4.isFocused,
146
- isSelected = _ref4.isSelected,
147
- isDisabled = _ref4.isDisabled;
148
- var color = "var(--ds-text, ".concat(N800, ")");
149
- if (isDisabled) {
150
- color = "var(--ds-text-disabled, ".concat(N70, ")");
151
- } else if (isSelected) {
152
- color = "var(--ds-text-selected, ".concat(B400, ")");
153
- }
154
- var boxShadow;
155
- var backgroundColor;
156
- if (isDisabled) {
157
- backgroundColor = undefined;
158
- } else if (isSelected && isFocused) {
159
- backgroundColor = "var(--ds-background-selected-hovered, ".concat(B50, ")");
160
- } else if (isSelected) {
161
- backgroundColor = "var(--ds-background-selected, ".concat(B50, ")");
162
- } else if (isFocused) {
163
- backgroundColor = "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")");
164
- }
165
- if (!isDisabled && (isFocused || isSelected)) {
166
- boxShadow = "inset 2px 0px 0px ".concat("var(--ds-border-selected, ".concat(B400, ")"));
167
- }
168
- var cursor = isDisabled ? 'not-allowed' : css.cursor;
169
- return _objectSpread(_objectSpread({}, css), {}, {
170
- padding: '6px 12px',
171
- backgroundColor: backgroundColor,
172
- color: color,
173
- cursor: cursor,
174
- boxShadow: boxShadow,
175
- ':active': {
176
- backgroundColor: !isDisabled ? isSelected ? "var(--ds-background-selected-pressed, ".concat(N20, ")") : "var(--ds-background-neutral-subtle-pressed, ".concat(N30, ")") : undefined
177
- },
178
- '@media screen and (-ms-high-contrast: active)': {
179
- borderLeft: !isDisabled && (isFocused || isSelected) ? '2px solid transparent' : ''
180
- }
181
- });
182
- },
183
- placeholder: function placeholder(css, _ref5) {
184
- var isDisabled = _ref5.isDisabled;
185
- return _objectSpread(_objectSpread({}, css), {}, {
186
- color: isDisabled ? "var(--ds-text-disabled, ".concat(N300, ")") : "var(--ds-text-subtlest, ".concat(N200, ")")
187
- });
188
- },
189
- singleValue: function singleValue(css, _ref6) {
190
- var isDisabled = _ref6.isDisabled;
191
- return _objectSpread(_objectSpread({}, css), {}, {
192
- color: isDisabled ? "var(--ds-text-disabled, ".concat(N70, ")") : "var(--ds-text, ".concat(N800, ")")
193
- });
194
- },
195
- menu: function menu(css) {
196
- return _objectSpread(_objectSpread({}, css), {}, {
197
- backgroundColor: "var(--ds-surface-overlay, white)",
198
- boxShadow: "var(--ds-shadow-overlay, 0 0 0 1px hsl(0deg 0% 0% / 10%), 0 4px 11px hsl(0deg 0% 0% / 10%))"
199
- });
200
- },
201
- menuList: function menuList(css) {
202
- return _objectSpread(_objectSpread({}, css), {}, {
203
- paddingTop: "var(--ds-space-100, 8px)",
204
- paddingBottom: "var(--ds-space-100, 8px)"
205
- });
206
- },
207
- multiValue: function multiValue(css, _ref7) {
208
- var isDisabled = _ref7.isDisabled,
209
- isFocused = _ref7.isFocused;
210
- var backgroundColor;
211
- var color;
212
- if (isDisabled) {
213
- // Use the basic neutral background so it is slightly separate from the
214
- // field's background
215
- backgroundColor = "var(--ds-background-neutral, ".concat(N40, ")");
216
- color = "var(--ds-text-disabled, ".concat(N70, ")");
217
- } else if (isFocused) {
218
- backgroundColor = "var(--ds-background-selected, ".concat(N40, ")");
219
- color = "var(--ds-text-selected, hsl(0, 0%, 20%))";
220
- } else {
221
- backgroundColor = fg('platform-component-visual-refresh') ? "var(--ds-background-neutral-subtle-hovered, #091E420F)" : "var(--ds-background-neutral, ".concat(N40, ")");
222
- color = "var(--ds-text, hsl(0, 0%, 20%))";
223
- }
224
- return _objectSpread(_objectSpread({}, css), {}, {
225
- borderRadius: "var(--ds-border-radius-050, 2px)",
226
- backgroundColor: backgroundColor,
227
- boxShadow: isFocused ? "0 0 0 2px ".concat("var(--ds-surface, transparent)", ", 0 0 0 4px ", "var(--ds-border-focused, transparent)") : 'none',
228
- maxWidth: '100%',
229
- '@media screen and (-ms-high-contrast: active)': {
230
- border: isFocused ? '1px solid transparent' : 'none'
231
- },
232
- color: color
233
- }, fg('platform-component-visual-refresh') && {
234
- borderRadius: "var(--ds-border-radius-100, 4px)",
235
- // Hardcode this color for visual refresh as there is no token color yet
236
- borderColor: '#B7B9BE',
237
- borderWidth: "var(--ds-border-width, 1px)",
238
- borderStyle: 'solid',
239
- backgroundColor: "var(--ds-background-input, #FFFFFF)"
240
- });
241
- },
242
- multiValueLabel: function multiValueLabel(css, _ref8) {
243
- var isDisabled = _ref8.isDisabled;
244
- return _objectSpread(_objectSpread({}, css), {}, {
245
- font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
246
- padding: "var(--ds-space-025, 2px)",
247
- color: isDisabled ? "var(--ds-text-disabled, ".concat(N70, ")") : 'inherit',
248
- paddingRight: "var(--ds-space-025, 2px)"
249
- }, fg('platform-component-visual-refresh') && {
250
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
251
- paddingTop: 0,
252
- paddingBottom: 0,
253
- paddingLeft: "var(--ds-space-050, 4px)"
254
- });
255
- },
256
- multiValueRemove: function multiValueRemove(css, _ref9) {
257
- var isFocused = _ref9.isFocused;
258
- return _objectSpread(_objectSpread({}, css), {}, {
259
- backgroundColor: isFocused ? "var(--ds-UNSAFE-transparent, ".concat(R75, ")") : undefined,
260
- fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text, #000)",
261
- paddingLeft: "var(--ds-space-025, 2px)",
262
- paddingRight: "var(--ds-space-025, 2px)",
263
- borderRadius: '0px 2px 2px 0px',
264
- // DSP-6470 we should style like Tag once we have the :has selector
265
- ':hover': {
266
- backgroundColor: "var(--ds-background-danger-hovered, ".concat(R75, ")"),
267
- fill: "var(--ds-text-danger, #000)"
268
- },
269
- ':active': {
270
- backgroundColor: "var(--ds-background-danger-pressed, ".concat(R75, ")"),
271
- fill: "var(--ds-text-danger, #000)"
272
- }
273
- }, fg('platform-component-visual-refresh') && {
274
- backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
275
- border: 'none',
276
- alignItems: 'center',
277
- justifyContent: 'center',
278
- alignSelf: 'center',
279
- appearance: 'none',
280
- borderRadius: "var(--ds-border-radius, 4px)",
281
- color: "var(--ds-text, #172B4D)",
282
- padding: "var(--ds-space-025, 2px)",
283
- marginRight: "var(--ds-space-025, 2px)",
284
- ':focus-visible': {
285
- outlineOffset: "var(--ds-space-negative-025, -2px)"
286
- },
287
- ':hover': {
288
- backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
289
- },
290
- ':active': {
291
- backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
292
- }
293
- });
294
- },
295
- groupHeading: function groupHeading(css) {
296
- return _objectSpread(_objectSpread({}, css), {}, {
297
- font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
298
- color: "var(--ds-text-subtle, ".concat(N200, ")"),
299
- fontWeight: "var(--ds-font-weight-bold, 700)".concat(" !important"),
300
- textTransform: 'none'
301
- });
302
- }
303
- };
304
- }
package/dist/types/styles.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import { type StylesConfig, type ValidationState } from './types';
2
- export default function baseStyles<Option, IsMulti extends boolean>(validationState: ValidationState, isCompact: boolean | undefined, appearance: 'default' | 'subtle' | 'none'): StylesConfig<Option, IsMulti>;
package/dist/types-ts4.5/styles.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import { type StylesConfig, type ValidationState } from './types';
2
- export default function baseStyles<Option, IsMulti extends boolean>(validationState: ValidationState, isCompact: boolean | undefined, appearance: 'default' | 'subtle' | 'none'): StylesConfig<Option, IsMulti>;