@atlaskit/select 21.8.3 → 21.8.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/select
 
+## 21.8.4
+
+### Patch Changes
+
+- [`7aef1e49e90ea`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7aef1e49e90ea) -
+  Removes redundant fallback color values via @atlaskit/theme
+- Updated dependencies
+
 ## 21.8.3
 
 ### Patch Changes

package/dist/cjs/popup-select/components.compiled.css

@@ -1,7 +1,7 @@
 
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._2rko1mok{border-radius:var(--ds-radius-large,8px)}._12l2v77o{margin-inline-end:var(--ds-space-025,2px)}
-._16qsu838{box-shadow:var(--_z6sjud)}
+._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._1bsbzwfg{width:2pc}
 ._1pby16oo{z-index:510}
 ._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}

package/dist/cjs/popup-select/components.js

@@ -13,17 +13,13 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _search = _interopRequireDefault(require("@atlaskit/icon/core/search"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _reactSelect = require("@atlaskit/react-select");
-var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _excluded = ["innerRef", "innerProps"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-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; }
-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; }
 // ==============================
 // Styled Components
 // ==============================
@@ -42,12 +38,10 @@ var MenuDialog = exports.MenuDialog = /*#__PURE__*/(0, _react.forwardRef)(functi
     testId = _ref.testId;
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
+    style: style,
     id: id,
     "data-testid": testId && "".concat(testId, "--menu"),
-    className: (0, _runtime.ax)(["_2rko12b0 _1pby16oo _bfhk1bhr _16qsu838", (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && "_2rko1mok"]),
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      "--_z6sjud": (0, _runtime.ix)("var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_colors.N40A, ", 0 4px 11px ").concat(_colors.N40A), ")"))
-    })
+    className: (0, _runtime.ax)(["_2rko12b0 _1pby16oo _bfhk1bhr _16qs130s", (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && "_2rko1mok"])
   }, children);
 });
 

package/dist/cjs/popup-select/popup-select.js

@@ -23,7 +23,6 @@ var _shallowEqual = require("shallow-equal");
 var _useId = require("@atlaskit/ds-lib/use-id");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _reactSelect = require("@atlaskit/react-select");
-var _colors = require("@atlaskit/theme/colors");
 var _select = _interopRequireDefault(require("../select"));
 var _components = require("./components");
 var _notifyOpenLayerObserver = require("./notify-open-layer-observer");
@@ -89,7 +88,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)(_this, "defaultStyles", {
       groupHeading: function groupHeading(provided) {
         return _objectSpread(_objectSpread({}, provided), {}, {
-          color: "var(--ds-text-subtlest, ".concat(_colors.N80, ")")
+          color: "var(--ds-text-subtlest, #6B6E76)"
         });
       }
     });

package/dist/cjs/select.js

@@ -11,7 +11,7 @@ var _createSelect = _interopRequireDefault(require("./create-select"));
 /* eslint-disable @repo/internal/react/require-jsdoc */
 
 var packageName = "@atlaskit/select";
-var packageVersion = "21.8.2";
+var packageVersion = "21.8.4";
 var SelectWithoutAnalytics = exports.SelectWithoutAnalytics = (0, _createSelect.default)(_async.default);
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 var Select = (0, _analyticsNext.withAnalyticsContext)({

package/dist/es2019/popup-select/components.compiled.css

@@ -1,7 +1,7 @@
 
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._2rko1mok{border-radius:var(--ds-radius-large,8px)}._12l2v77o{margin-inline-end:var(--ds-space-025,2px)}
-._16qs1s1a{box-shadow:var(--ds-shadow-overlay,0 0 0 1px rgba(9,30,66,.13),0 4px 11px rgba(9,30,66,.13))}
+._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._1bsbzwfg{width:2pc}
 ._1pby16oo{z-index:510}
 ._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}

package/dist/es2019/popup-select/components.js

@@ -7,7 +7,6 @@ import { forwardRef } from 'react';
 import SearchIcon from '@atlaskit/icon/core/search';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { components } from '@atlaskit/react-select';
-import { N40A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 
@@ -33,7 +32,7 @@ export const MenuDialog = /*#__PURE__*/forwardRef(({
     style: style,
     id: id,
     "data-testid": testId && `${testId}--menu`,
-    className: ax(["_2rko12b0 _1pby16oo _bfhk1bhr _16qs1s1a", fg('platform-dst-shape-theme-default') && "_2rko1mok"])
+    className: ax(["_2rko12b0 _1pby16oo _bfhk1bhr _16qs130s", fg('platform-dst-shape-theme-default') && "_2rko1mok"])
   }, children);
 });
 

package/dist/es2019/popup-select/popup-select.js

@@ -9,7 +9,6 @@ import { shallowEqualObjects } from 'shallow-equal';
 import { IdProvider } from '@atlaskit/ds-lib/use-id';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { mergeStyles } from '@atlaskit/react-select';
-import { N80 } from '@atlaskit/theme/colors';
 import Select from '../select';
 import { defaultComponents, DummyControl, MenuDialog } from './components';
 import { NotifyOpenLayerObserver } from './notify-open-layer-observer';
@@ -60,7 +59,7 @@ export default class PopupSelect extends PureComponent {
     _defineProperty(this, "defaultStyles", {
       groupHeading: provided => ({
         ...provided,
-        color: `var(--ds-text-subtlest, ${N80})`
+        color: "var(--ds-text-subtlest, #6B6E76)"
       })
     });
     _defineProperty(this, "isOpenControlled", this.props.isOpen !== undefined);

package/dist/es2019/select.js

@@ -3,7 +3,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import AsyncSelect from '@atlaskit/react-select/async';
 import createSelect from './create-select';
 const packageName = "@atlaskit/select";
-const packageVersion = "21.8.2";
+const packageVersion = "21.8.4";
 export const SelectWithoutAnalytics = createSelect(AsyncSelect);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 const Select = withAnalyticsContext({

package/dist/esm/popup-select/components.compiled.css

@@ -1,7 +1,7 @@
 
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._2rko1mok{border-radius:var(--ds-radius-large,8px)}._12l2v77o{margin-inline-end:var(--ds-space-025,2px)}
-._16qsu838{box-shadow:var(--_z6sjud)}
+._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._1bsbzwfg{width:2pc}
 ._1pby16oo{z-index:510}
 ._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}

package/dist/esm/popup-select/components.js

@@ -1,18 +1,14 @@
 /* components.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["innerRef", "innerProps"];
 import "./components.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-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; }
-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; }
 import { forwardRef } from 'react';
 import SearchIcon from '@atlaskit/icon/core/search';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { components } from '@atlaskit/react-select';
-import { N40A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 
@@ -34,12 +30,10 @@ export var MenuDialog = /*#__PURE__*/forwardRef(function (_ref, ref) {
     testId = _ref.testId;
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
+    style: style,
     id: id,
     "data-testid": testId && "".concat(testId, "--menu"),
-    className: ax(["_2rko12b0 _1pby16oo _bfhk1bhr _16qsu838", fg('platform-dst-shape-theme-default') && "_2rko1mok"]),
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      "--_z6sjud": ix("var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(N40A, ", 0 4px 11px ").concat(N40A), ")"))
-    })
+    className: ax(["_2rko12b0 _1pby16oo _bfhk1bhr _16qs130s", fg('platform-dst-shape-theme-default') && "_2rko1mok"])
   }, children);
 });
 

package/dist/esm/popup-select/popup-select.js

@@ -20,7 +20,6 @@ import { shallowEqualObjects } from 'shallow-equal';
 import { IdProvider } from '@atlaskit/ds-lib/use-id';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { mergeStyles } from '@atlaskit/react-select';
-import { N80 } from '@atlaskit/theme/colors';
 import Select from '../select';
 import { defaultComponents, DummyControl, MenuDialog } from './components';
 import { NotifyOpenLayerObserver } from './notify-open-layer-observer';
@@ -80,7 +79,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     _defineProperty(_this, "defaultStyles", {
       groupHeading: function groupHeading(provided) {
         return _objectSpread(_objectSpread({}, provided), {}, {
-          color: "var(--ds-text-subtlest, ".concat(N80, ")")
+          color: "var(--ds-text-subtlest, #6B6E76)"
         });
       }
     });

package/dist/esm/select.js

@@ -3,7 +3,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import AsyncSelect from '@atlaskit/react-select/async';
 import createSelect from './create-select';
 var packageName = "@atlaskit/select";
-var packageVersion = "21.8.2";
+var packageVersion = "21.8.4";
 export var SelectWithoutAnalytics = createSelect(AsyncSelect);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 var Select = withAnalyticsContext({

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/select",
-	"version": "21.8.3",
+	"version": "21.8.4",
 	"description": "Select allows users to make a single selection or multiple selections from a list of options.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,15 +32,15 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/analytics-next": "^11.1.0",
+		"@atlaskit/analytics-next": "^11.2.0",
 		"@atlaskit/ds-lib": "^6.0.0",
-		"@atlaskit/icon": "^33.0.0",
+		"@atlaskit/icon": "^33.1.0",
 		"@atlaskit/layering": "^3.6.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^18.0.0",
+		"@atlaskit/primitives": "^18.1.0",
 		"@atlaskit/react-select": "^3.14.0",
 		"@atlaskit/theme": "^22.0.0",
-		"@atlaskit/tokens": "^11.1.0",
+		"@atlaskit/tokens": "^11.4.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
@@ -62,10 +62,10 @@
 		"@atlaskit/checkbox": "^17.3.0",
 		"@atlaskit/docs": "^11.7.0",
 		"@atlaskit/drawer": "^12.0.0",
-		"@atlaskit/form": "^15.4.0",
+		"@atlaskit/form": "^15.5.0",
 		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/logo": "^19.10.0",
-		"@atlaskit/modal-dialog": "^14.11.0",
+		"@atlaskit/modal-dialog": "^14.13.0",
 		"@atlaskit/radio": "^8.4.0",
 		"@atlaskit/section-message": "^8.12.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",

package/select.docs.tsx

@@ -5,7 +5,8 @@ import type { ComponentStructuredContentSource } from '@atlassian/structured-doc
 const documentation: ComponentStructuredContentSource[] = [
 	{
 		name: 'Select',
-		description: 'A flexible select component for single and multi-selection.',
+		description:
+			'Select allows users to make a single selection or multiple selections from a list of options.',
 		status: 'general-availability',
 		import: {
 			name: 'Select',
@@ -46,6 +47,157 @@ const documentation: ComponentStructuredContentSource[] = [
 		keywords: ['select', 'dropdown', 'form', 'input', 'options', 'choice', 'picker'],
 		categories: ['form'],
 	},
+	{
+		name: 'AsyncSelect',
+		description:
+			'A select component that loads options asynchronously. Use when options are fetched from an API or loaded on demand.',
+		status: 'general-availability',
+		import: {
+			name: 'AsyncSelect',
+			package: '@atlaskit/select',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use for options loaded from API or async data',
+			'Provide clear loading states while fetching',
+			'Cache options when users search repeatedly',
+		],
+		examples: [
+			{
+				name: 'Async select',
+				description: 'Async select with loadOptions for remote or deferred options.',
+				source: path.resolve(__dirname, './examples/constellation/select-async.tsx'),
+			},
+		],
+		keywords: ['select', 'async', 'dropdown', 'form', 'api'],
+		categories: ['form'],
+	},
+	{
+		name: 'CreatableSelect',
+		description:
+			'A select that allows users to create new options. Use when users can add custom values not in the predefined list.',
+		status: 'general-availability',
+		import: {
+			name: 'CreatableSelect',
+			package: '@atlaskit/select',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use when users need to add custom options',
+			'Validate new values before creation',
+		],
+		examples: [
+			{
+				name: 'Creatable select',
+				description: 'Creatable select for adding options not in the list.',
+				source: path.resolve(__dirname, './examples/constellation/select-creatable.tsx'),
+			},
+		],
+		keywords: ['select', 'creatable', 'dropdown', 'form', 'custom'],
+		categories: ['form'],
+	},
+	{
+		name: 'PopupSelect',
+		description:
+			'A select that opens in a popup overlay. Use when the select needs to render in a portal or overlay context.',
+		status: 'general-availability',
+		import: {
+			name: 'PopupSelect',
+			package: '@atlaskit/select',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use when select must render in overlay/portal',
+			'Consider z-index and layering with modals',
+			'Ensure proper focus management',
+		],
+		examples: [
+			{
+				name: 'Popup select',
+				description: 'Popup select with filterable options in an overlay.',
+				source: path.resolve(__dirname, './examples/constellation/select-popup.tsx'),
+			},
+		],
+		keywords: ['select', 'popup', 'dropdown', 'overlay', 'portal'],
+		categories: ['form'],
+	},
+	{
+		name: 'CheckboxSelect',
+		description:
+			'A multi-select with checkbox indicators for each option. Use when multiple selections need explicit visual confirmation.',
+		status: 'general-availability',
+		import: {
+			name: 'CheckboxSelect',
+			package: '@atlaskit/select',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: ['Use for multi-select when checkbox affordance improves clarity'],
+		examples: [
+			{
+				name: 'Checkbox select',
+				description: 'Multi-select with checkbox indicators per option.',
+				source: path.resolve(__dirname, './examples/constellation/select-checkbox.tsx'),
+			},
+		],
+		keywords: ['select', 'checkbox', 'multi', 'dropdown', 'form'],
+		categories: ['form'],
+	},
+	{
+		name: 'RadioSelect',
+		description:
+			'A single-select with radio indicators for each option. Use when radio-style selection affordance is needed.',
+		status: 'general-availability',
+		import: {
+			name: 'RadioSelect',
+			package: '@atlaskit/select',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: ['Use for single-select when radio affordance improves clarity'],
+		examples: [
+			{
+				name: 'Radio select',
+				description: 'Single-select with radio indicators per option.',
+				source: path.resolve(__dirname, './examples/constellation/select-radio.tsx'),
+			},
+		],
+		keywords: ['select', 'radio', 'single', 'dropdown', 'form'],
+		categories: ['form'],
+	},
+	{
+		name: 'CountrySelect',
+		description: 'A select pre-configured for country selection with country data.',
+		status: 'general-availability',
+		import: {
+			name: 'CountrySelect',
+			package: '@atlaskit/select',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use for country selection in forms',
+			'Provides built-in country options and search',
+		],
+		examples: [
+			{
+				name: 'Country select',
+				description: 'Country select with built-in country list and search.',
+				source: path.resolve(__dirname, './examples/constellation/select-country.tsx'),
+			},
+		],
+		keywords: ['select', 'country', 'dropdown', 'form', 'localization'],
+		categories: ['form'],
+	},
 ];
 
 export default documentation;