@atlaskit/select 15.7.3 → 15.7.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/select
 
+## 15.7.4
+
+### Patch Changes
+
+- [`9827dcb82b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9827dcb82b8) - No-op change to introduce spacing tokens to design system components.
+
 ## 15.7.3
 
 ### Patch Changes

package/dist/cjs/CountrySelect.js

@@ -24,7 +24,8 @@ var labelStyles = (0, _react.css)({
 });
 var flagStyles = (0, _react.css)({
   fontSize: '18px',
-  marginRight: '8px'
+  // TODO Delete this comment after verifying spacing token -> previous value `'8px'`
+  marginRight: "var(--ds-scale-100, 8px)"
 });
 
 var Opt = function Opt(_ref) {

package/dist/cjs/Select.js

@@ -14,7 +14,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _createSelect = _interopRequireDefault(require("./createSelect"));
 
 var packageName = "@atlaskit/select";
-var packageVersion = "15.7.3";
+var packageVersion = "15.7.4";
 var SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 exports.SelectWithoutAnalytics = SelectWithoutAnalytics;
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/select",
-	"version": "15.7.3",
+	"version": "15.7.4",
 	"sideEffects": false
 }

package/dist/es2019/CountrySelect.js

@@ -12,7 +12,8 @@ const labelStyles = css({
 });
 const flagStyles = css({
   fontSize: '18px',
-  marginRight: '8px'
+  // TODO Delete this comment after verifying spacing token -> previous value `'8px'`
+  marginRight: "var(--ds-scale-100, 8px)"
 });
 
 const Opt = ({

package/dist/es2019/Select.js

@@ -2,7 +2,7 @@ import Select from 'react-select';
 import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
 import createSelect from './createSelect';
 const packageName = "@atlaskit/select";
-const packageVersion = "15.7.3";
+const packageVersion = "15.7.4";
 export const SelectWithoutAnalytics = createSelect(Select);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/select",
-	"version": "15.7.3",
+	"version": "15.7.4",
 	"sideEffects": false
 }

package/dist/esm/CountrySelect.js

@@ -12,7 +12,8 @@ var labelStyles = css({
 });
 var flagStyles = css({
   fontSize: '18px',
-  marginRight: '8px'
+  // TODO Delete this comment after verifying spacing token -> previous value `'8px'`
+  marginRight: "var(--ds-scale-100, 8px)"
 });
 
 var Opt = function Opt(_ref) {

package/dist/esm/Select.js

@@ -2,7 +2,7 @@ import Select from 'react-select';
 import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
 import createSelect from './createSelect';
 var packageName = "@atlaskit/select";
-var packageVersion = "15.7.3";
+var packageVersion = "15.7.4";
 export var SelectWithoutAnalytics = createSelect(Select);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/select",
-	"version": "15.7.3",
+	"version": "15.7.4",
 	"sideEffects": false
 }

package/dist/types/CountrySelect.d.ts

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { groupedCountries } from './data/countries';
 import { SelectProps } from './types';

package/dist/types-ts4.0/CountrySelect.d.ts

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { groupedCountries } from './data/countries';
 import { SelectProps } from './types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/select",
-  "version": "15.7.3",
+  "version": "15.7.4",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -15,13 +15,15 @@
   "typesVersions": {
     ">=4.0 <4.5": {
       "*": [
-        "dist/types-ts4.0/*"
+        "dist/types-ts4.0/*",
+        "dist/types-ts4.0/index.d.ts"
       ]
     }
   },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
+    "disableProductCI": true,
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
     "releaseModel": "scheduled",
@@ -32,7 +34,7 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/icon": "^21.11.0",
     "@atlaskit/spinner": "^15.0.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
@@ -57,16 +59,16 @@
   },
   "devDependencies": {
     "@atlaskit/button": "^16.3.0",
-    "@atlaskit/checkbox": "^12.2.0",
+    "@atlaskit/checkbox": "^12.4.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/drawer": "^7.2.0",
-    "@atlaskit/form": "^8.5.0",
-    "@atlaskit/logo": "^13.9.0",
-    "@atlaskit/modal-dialog": "^12.3.0",
+    "@atlaskit/drawer": "^7.3.0",
+    "@atlaskit/form": "^8.6.0",
+    "@atlaskit/logo": "^13.10.0",
+    "@atlaskit/modal-dialog": "^12.4.0",
     "@atlaskit/radio": "^5.4.0",
-    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/tooltip": "^17.5.0",
+    "@atlaskit/tooltip": "^17.6.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -84,6 +86,7 @@
   "techstack": {
     "@repo/internal": {
       "dom-events": "use-bind-event-listener",
+      "design-tokens": "spacing",
       "theming": "tokens",
       "deprecation": "no-deprecated-imports",
       "styling": [

package/report.api.md

@@ -1,6 +1,8 @@
-## API Report File for "@atlaskit/select"
+## API Report File for "@atlaskit/select".
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ```ts
 /// <reference types="react" />
@@ -14,13 +16,14 @@ import { default as default_2 } from 'react-select/src/Select';
 import { default as default_3 } from 'react-select';
 import { ErrorInfo } from 'react';
 import { FC } from 'react';
-import { FocusTrap } from 'focus-trap';
 import { FormatOptionLabelMeta as FormatOptionLabelMeta_2 } from 'react-select';
 import { GroupedOptionsType } from 'react-select';
 import { GroupTypeBase as GroupType } from 'react-select';
 import { IndicatorComponentType as IndicatorComponentType_2 } from 'react-select';
 import { IndicatorProps as IndicatorProps_2 } from 'react-select';
+import { InputActionMeta as InputActionMeta_2 } from 'react-select';
 import { InputProps } from 'react-select';
+import { jsx } from '@emotion/react';
 import { makeAsyncSelect } from 'react-select/async';
 import { makeCreatableSelect } from 'react-select/creatable';
 import { MenuListComponentProps as MenuListComponentProps_2 } from 'react-select';
@@ -130,6 +133,7 @@ export declare const AsyncCreatableSelect: {
   };
   defaultProps: {
     validationState: string;
+    isInvalid: boolean;
     spacing: string;
     onClickPreventDefault: boolean;
     tabSelectsValue: boolean;
@@ -224,6 +228,7 @@ export declare const AsyncSelect: {
   };
   defaultProps: {
     validationState: string;
+    isInvalid: boolean;
     spacing: string;
     onClickPreventDefault: boolean;
     tabSelectsValue: boolean;
@@ -247,7 +252,19 @@ export declare type ControlProps<
   IsMulti extends boolean = false
 > = ControlProps_2<OptionType, IsMulti>;
 
-export declare const CountrySelect: (props: any) => JSX.Element;
+declare type Country = typeof groupedCountries[number]['options'][number];
+
+declare interface Country_2 {
+  abbr: string;
+  code: string;
+  icon: string;
+  name: string;
+  suggested?: boolean;
+}
+
+export declare const CountrySelect: (
+  props: SelectProps<Country>,
+) => jsx.JSX.Element;
 
 export declare const CreatableSelect: {
   new <Option = OptionType, IsMulti extends boolean = false>(
@@ -334,6 +351,7 @@ export declare const CreatableSelect: {
   };
   defaultProps: {
     validationState: string;
+    isInvalid: boolean;
     spacing: string;
     onClickPreventDefault: boolean;
     tabSelectsValue: boolean;
@@ -430,6 +448,7 @@ declare const _default: {
   };
   defaultProps: {
     validationState: string;
+    isInvalid: boolean;
     spacing: string;
     onClickPreventDefault: boolean;
     tabSelectsValue: boolean;
@@ -447,6 +466,17 @@ export declare type FormatOptionLabelMeta<
   IsMulti extends boolean = false
 > = FormatOptionLabelMeta_2<OptionType, IsMulti>;
 
+declare const groupedCountries: readonly [
+  {
+    readonly label: 'Suggested';
+    readonly options: Country_2[];
+  },
+  {
+    readonly label: 'All Countries';
+    readonly options: Country_2[];
+  },
+];
+
 export { GroupedOptionsType };
 
 export { GroupType };
@@ -461,6 +491,8 @@ export declare type IndicatorProps<
   IsMulti extends boolean = false
 > = IndicatorProps_2<OptionType, IsMulti>;
 
+export declare type InputActionMeta = InputActionMeta_2;
+
 export { InputProps };
 
 export { makeAsyncSelect };
@@ -479,6 +511,17 @@ export declare type MenuProps<
 
 export { mergeStyles };
 
+declare type ModifierList =
+  | 'offset'
+  | 'computeStyles'
+  | 'preventOverflow'
+  | 'handleFlipStyle'
+  | 'flip'
+  | 'popperOffsets'
+  | 'arrow'
+  | 'hide'
+  | string;
+
 export declare interface OptionProps<
   Option = OptionType,
   IsMulti extends boolean = false
@@ -513,7 +556,6 @@ export declare class PopupSelect<
   Option = OptionType,
   IsMulti extends boolean = false
 > extends PureComponent<PopupSelectProps<Option, IsMulti>, State> {
-  focusTrap: FocusTrap | null;
   menuRef: HTMLElement | null;
   selectRef: Select<Option, IsMulti> | null;
   targetRef: HTMLElement | null;
@@ -526,12 +568,12 @@ export declare class PopupSelect<
     isOpen: boolean;
     mergedComponents: {
       Control: React_2.FC<ControlProps<OptionType, boolean>>;
-      DropdownIndicator: () => JSX.Element;
+      DropdownIndicator: () => jsx;
       Menu: ({
         children,
         innerProps,
         ...props
-      }: MenuProps<OptionType, boolean>) => JSX.Element;
+      }: MenuProps<OptionType, boolean>) => jsx;
     };
     mergedPopperProps: PopperPropsNoChildren<string>;
   };
@@ -543,6 +585,7 @@ export declare class PopupSelect<
     maxMenuWidth: number;
     minMenuWidth: number;
     popperProps: {};
+    isSearchable: boolean;
     searchThreshold: number;
     styles: {};
     options: never[];
@@ -572,7 +615,6 @@ export declare class PopupSelect<
         }
       | undefined,
   ) => void;
-  initialiseFocusTrap: () => void;
   /**
    * Closes the popup
    *
@@ -594,7 +636,7 @@ export declare class PopupSelect<
   getSelectRef: (ref: Select<Option, IsMulti>) => void;
   getItemCount: () => number;
   getMaxHeight: () => number | undefined;
-  showSearchControl: () => boolean;
+  showSearchControl: () => boolean | undefined;
   renderSelect: () => JSX.Element | null;
   render(): JSX.Element;
 }
@@ -602,7 +644,7 @@ export declare class PopupSelect<
 export declare interface PopupSelectProps<
   Option = OptionType,
   IsMulti extends boolean = false,
-  Modifiers = string
+  Modifiers = ModifierList
 > extends Props<Option, IsMulti> {
   /**
    * Defines whether the menu should close when selected. Defaults to "true"
@@ -621,9 +663,14 @@ export declare interface PopupSelectProps<
      */
   popperProps?: PopperPropsNoChildren<Modifiers>;
   /**
-   * The maximum number of options the Select can contain without rendering the search field.
+   * The maximum number of options the select can contain without rendering the search field. Defaults to 5.
    */
   searchThreshold?: number;
+  /**
+   * If false, renders a select with no search field. If true, renders a search field in the select when the
+   * number of options exceeds the `searchThreshold`. Defaults to true.
+   */
+  isSearchable?: boolean;
   /**
    * The maximum width for the popup menu. Can be a number, representing width in pixels,
    * or a string containing a CSS length datatype.
@@ -653,6 +700,9 @@ export declare interface PopupSelectProps<
   ) => ReactNode;
   isOpen?: boolean;
   defaultIsOpen?: boolean;
+  spacing?: string;
+  validationState?: ValidationState;
+  isInvalid?: boolean;
 }
 
 declare interface PopupSelectTriggerProps {
@@ -681,8 +731,105 @@ export declare interface SelectProps<
     WithAnalyticsEventsProps {
   spacing?: 'compact' | 'default';
   validationState?: ValidationState;
+  appearance?: 'default' | 'subtle' | 'none';
+  isInvalid?: boolean;
 }
 
+export declare const SelectWithoutAnalytics: {
+  new <Option = OptionType, IsMulti extends boolean = false>(
+    props: SelectProps<Option, IsMulti>,
+  ): {
+    components: Partial<SelectComponents<Option, IsMulti, GroupType<Option>>>;
+    select: Select<
+      Option,
+      false,
+      GroupType<Option>,
+      default_2<Option, false, GroupType<Option>>
+    > | null;
+    UNSAFE_componentWillReceiveProps(
+      nextProps: SelectProps<Option, IsMulti>,
+    ): void;
+    cacheComponents: (
+      components: Partial<SelectComponents<Option, IsMulti, GroupType<Option>>>,
+    ) => void;
+    focus(): void;
+    blur(): void;
+    onSelectRef: (
+      ref: Select<
+        Option,
+        false,
+        GroupType<Option>,
+        default_2<Option, false, GroupType<Option>>
+      >,
+    ) => void;
+    render(): JSX.Element;
+    context: any;
+    setState<K extends never>(
+      state:
+        | {}
+        | ((
+            prevState: Readonly<{}>,
+            props: Readonly<SelectProps<Option, IsMulti>>,
+          ) => {} | Pick<{}, K> | null)
+        | Pick<{}, K>
+        | null,
+      callback?: (() => void) | undefined,
+    ): void;
+    forceUpdate(callBack?: (() => void) | undefined): void;
+    readonly props: Readonly<SelectProps<Option, IsMulti>> &
+      Readonly<{
+        children?: ReactNode;
+      }>;
+    state: Readonly<{}>;
+    refs: {
+      [key: string]: ReactInstance;
+    };
+    componentDidMount?(): void;
+    shouldComponentUpdate?(
+      nextProps: Readonly<SelectProps<Option, IsMulti>>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): boolean;
+    componentWillUnmount?(): void;
+    componentDidCatch?(error: Error, errorInfo: ErrorInfo): void;
+    getSnapshotBeforeUpdate?(
+      prevProps: Readonly<SelectProps<Option, IsMulti>>,
+      prevState: Readonly<{}>,
+    ): any;
+    componentDidUpdate?(
+      prevProps: Readonly<SelectProps<Option, IsMulti>>,
+      prevState: Readonly<{}>,
+      snapshot?: any,
+    ): void;
+    componentWillMount?(): void;
+    UNSAFE_componentWillMount?(): void;
+    componentWillReceiveProps?(
+      nextProps: Readonly<SelectProps<Option, IsMulti>>,
+      nextContext: any,
+    ): void;
+    componentWillUpdate?(
+      nextProps: Readonly<SelectProps<Option, IsMulti>>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): void;
+    UNSAFE_componentWillUpdate?(
+      nextProps: Readonly<SelectProps<Option, IsMulti>>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): void;
+  };
+  defaultProps: {
+    validationState: string;
+    isInvalid: boolean;
+    spacing: string;
+    onClickPreventDefault: boolean;
+    tabSelectsValue: boolean;
+    components: {};
+    styles: {};
+  };
+  contextType?: Context<any> | undefined;
+};
+
 declare interface State<Modifiers = string> {
   isOpen: boolean;
   mergedComponents: Object;