@atlaskit/select 16.0.3 → 16.1.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/select
 
+## 16.1.0
+
+### Minor Changes
+
+- [`017e3dccdf3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/017e3dccdf3) - Add SelectInstance for export
+- [`2368982b4d2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2368982b4d2) - Add MultiValueRemoveProps, SelectInstance to export
+
+### Patch Changes
+
+- [`c74089f0c6d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c74089f0c6d) - Revert the onOpen and onClose logic in PopupSelect
+
 ## 16.0.3
 
 ### Patch Changes

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -199,15 +199,15 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "open", function (options) {
-      var onMenuOpen = _this.props.onMenuOpen;
+      var onOpen = _this.props.onOpen;
 
       if (!(options !== null && options !== void 0 && options.controlOverride) && _this.isOpenControlled) {
         // Prevent popup opening if it's open state is already being controlled
         return;
       }
 
-      if (onMenuOpen) {
-        onMenuOpen();
+      if (onOpen) {
+        onOpen();
       }
 
       _this.setState({

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 = "16.0.3";
+var packageVersion = "16.1.0";
 var SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 exports.SelectWithoutAnalytics = SelectWithoutAnalytics;
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');

package/dist/cjs/extract-react-types/react-popper-props.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ertHackForPopper;
+
+// this is to DOCUMENT/display the underlying react popper props, for our atlaskit/select documentation
+function ertHackForPopper(_) {}

package/dist/cjs/extract-react-types/react-select-async.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ertHackForPopper;
+
+// for documentation ONLY
+function ertHackForPopper(_) {}

package/dist/cjs/extract-react-types/react-select-creatable.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ertHackForSelect;
+
+// for documentation purposes ONLY
+function ertHackForSelect(_) {}

package/dist/cjs/extract-react-types/react-select-props.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ertHackForSelect;
+
+// this is to DOCUMENT/display the underlying react select props, for our atlaskit/select documentation
+function ertHackForSelect(_) {}

package/dist/cjs/version.json

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

package/dist/es2019/PopupSelect/PopupSelect.js

@@ -148,7 +148,7 @@ export default class PopupSelect extends PureComponent {
 
     _defineProperty(this, "open", options => {
       const {
-        onMenuOpen
+        onOpen
       } = this.props;
 
       if (!(options !== null && options !== void 0 && options.controlOverride) && this.isOpenControlled) {
@@ -156,8 +156,8 @@ export default class PopupSelect extends PureComponent {
         return;
       }
 
-      if (onMenuOpen) {
-        onMenuOpen();
+      if (onOpen) {
+        onOpen();
       }
 
       this.setState({

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 = "16.0.3";
+const packageVersion = "16.1.0";
 export const SelectWithoutAnalytics = createSelect(Select);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/es2019/extract-react-types/react-popper-props.js

@@ -0,0 +1,2 @@
+// this is to DOCUMENT/display the underlying react popper props, for our atlaskit/select documentation
+export default function ertHackForPopper(_) {}

package/dist/es2019/extract-react-types/react-select-async.js

@@ -0,0 +1,2 @@
+// for documentation ONLY
+export default function ertHackForPopper(_) {}

package/dist/es2019/extract-react-types/react-select-creatable.js

@@ -0,0 +1,2 @@
+// for documentation purposes ONLY
+export default function ertHackForSelect(_) {}

package/dist/es2019/extract-react-types/react-select-props.js

@@ -0,0 +1,2 @@
+// this is to DOCUMENT/display the underlying react select props, for our atlaskit/select documentation
+export default function ertHackForSelect(_) {}

package/dist/es2019/version.json

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

package/dist/esm/PopupSelect/PopupSelect.js

@@ -179,15 +179,15 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "open", function (options) {
-      var onMenuOpen = _this.props.onMenuOpen;
+      var onOpen = _this.props.onOpen;
 
       if (!(options !== null && options !== void 0 && options.controlOverride) && _this.isOpenControlled) {
         // Prevent popup opening if it's open state is already being controlled
         return;
       }
 
-      if (onMenuOpen) {
-        onMenuOpen();
+      if (onOpen) {
+        onOpen();
       }
 
       _this.setState({

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 = "16.0.3";
+var packageVersion = "16.1.0";
 export var SelectWithoutAnalytics = createSelect(Select);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/esm/extract-react-types/react-popper-props.js

@@ -0,0 +1,2 @@
+// this is to DOCUMENT/display the underlying react popper props, for our atlaskit/select documentation
+export default function ertHackForPopper(_) {}

package/dist/esm/extract-react-types/react-select-async.js

@@ -0,0 +1,2 @@
+// for documentation ONLY
+export default function ertHackForPopper(_) {}

package/dist/esm/extract-react-types/react-select-creatable.js

@@ -0,0 +1,2 @@
+// for documentation purposes ONLY
+export default function ertHackForSelect(_) {}

package/dist/esm/extract-react-types/react-select-props.js

@@ -0,0 +1,2 @@
+// this is to DOCUMENT/display the underlying react select props, for our atlaskit/select documentation
+export default function ertHackForSelect(_) {}

package/dist/esm/version.json

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

package/dist/types/PopupSelect/PopupSelect.d.ts

@@ -25,7 +25,7 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
       The props passed down to React Popper.
   
       Use these to override the default positioning strategy, behaviour and placement used by this library.
-      For more information, see the [React Popper documentation](https://popper.js.org/react-popper/v2/render-props).
+      For more information, see the Popper Props section below, or [React Popper documentation](https://popper.js.org/react-popper/v2/render-props).
   
      */
     popperProps?: PopperPropsNoChildren<Modifiers>;

package/dist/types/{ert.d.ts → extract-react-types/ert.d.ts}

@@ -1,2 +1,2 @@
-import { SelectProps, OptionType } from './types';
+import { SelectProps, OptionType } from '../types';
 export default function ertHackForSelect(_: SelectProps<OptionType>): void;

package/dist/types/extract-react-types/react-popper-props.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { Modifier, Options } from '@popperjs/core';
+declare type Placement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+declare type Strategy = 'absolute' | 'fixed';
+interface NativeReactPopperProps<Name = unknown> {
+    /** Function `(?HTMLElement) => void` that can be used to obtain popper reference */
+    innerRef?: React.Ref<any>;
+    /** One of the accepted placement values listed in the Popper.js documentation.
+     Your popper is going to be placed according to the value of this property.
+    Defaults to bottom.*/
+    placement?: Placement;
+    /** Describes the positioning strategy to use. By default, it is absolute, which in the simplest cases does not
+     * require repositioning of the popper. If your reference element is in a fixed container, use the fixed strategy. */
+    strategy: Strategy;
+    /** An object containing custom settings for the Popper.js modifiers.
+     You can use this property to override their settings or to inject your custom ones.
+    See [Popper Modifiers](https://popper.js.org/docs/v2/modifiers/) for full details. */
+    modifiers?: ReadonlyArray<Modifier<Name, Options>>;
+}
+export default function ertHackForPopper(_: NativeReactPopperProps): void;
+export {};

package/dist/types/extract-react-types/react-select-async.d.ts

@@ -0,0 +1,24 @@
+import { GroupBase, OptionsOrGroups } from 'react-select';
+export interface ReactSelectAsyncProps<Option = unknown, Group extends GroupBase<Option> = GroupBase<Option>> {
+    /**
+     * The default set of options to show before the user starts searching. When
+     * set to `true`, the results for loadOptions('') will be autoloaded.
+     */
+    defaultOptions?: OptionsOrGroups<Option, Group> | boolean;
+    /**
+     * If cacheOptions is truthy, then the loaded data will be cached. The cache
+     * will remain until `cacheOptions` changes value.
+     */
+    cacheOptions?: any;
+    /**
+     * Function that returns a promise, which is the set of options to be used
+     * once the promise resolves.
+     */
+    loadOptions?: (inputValue: string, callback: (options: OptionsOrGroups<Option, Group>) => void) => Promise<OptionsOrGroups<Option, Group>> | void;
+    /**
+     * Will cause the select to be displayed in the loading state, even if the
+     * Async select is not currently waiting for loadOptions to resolve
+     */
+    isLoading?: boolean;
+}
+export default function ertHackForPopper(_: ReactSelectAsyncProps): void;

package/dist/types/extract-react-types/react-select-creatable.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+import { GetOptionLabel, GetOptionValue, GroupBase, Options, OptionsOrGroups } from 'react-select';
+export interface Accessors<Option> {
+    getOptionValue: GetOptionValue<Option>;
+    getOptionLabel: GetOptionLabel<Option>;
+}
+export interface ReactSelectCreatableProps<Option = unknown, Group extends GroupBase<Option> = GroupBase<Option>> {
+    /**
+     * Allow options to be created while the `isLoading` prop is true. Useful to
+     * prevent the "create new ..." option being displayed while async results are
+     * still being loaded.
+     */
+    allowCreateWhileLoading?: boolean;
+    /** Sets the position of the createOption element in your options list. Defaults to 'last' */
+    createOptionPosition?: 'first' | 'last';
+    /**
+     * Gets the label for the "create new ..." option in the menu. Is given the
+     * current input value.
+     */
+    formatCreateLabel?: (inputValue: string) => ReactNode;
+    /**
+     * Determines whether the "create new ..." option should be displayed based on
+     * the current input value, select value and options array.
+     */
+    isValidNewOption?: (inputValue: string, value: Options<Option>, options: OptionsOrGroups<Option, Group>, accessors: Accessors<Option>) => boolean;
+    /**
+     * Returns the data for the new option when it is created. Used to display the
+     * value, and is passed to `onChange`.
+     */
+    getNewOptionData?: (inputValue: string, optionLabel: ReactNode) => Option;
+    /**
+     * If provided, this will be called with the input value when a new option is
+     * created, and `onChange` will **not** be called. Use this when you need more
+     * control over what happens when new options are created.
+     */
+    onCreateOption?: (inputValue: string) => void;
+}
+export default function ertHackForSelect(_: ReactSelectCreatableProps): void;

package/dist/types/extract-react-types/react-select-props.d.ts

@@ -0,0 +1,182 @@
+import { FocusEventHandler, KeyboardEventHandler, ReactNode } from 'react';
+interface FilterOptionOption<Option> {
+    readonly label: string;
+    readonly value: string;
+    readonly data: Option;
+}
+import { StylesConfig } from '../types';
+import { ActionMeta, AriaLiveMessages, FormatOptionLabelMeta, GetOptionLabel, GetOptionValue, GroupBase, InputActionMeta, MenuPlacement, MenuPosition, OnChangeValue, Options, OptionsOrGroups, PropsValue, SelectComponentsConfig, ThemeConfig } from 'react-select';
+interface NativeReactSelectProps<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> {
+    /** Aria label (for assistive tech) */
+    'aria-label'?: string;
+    /** HTML ID of an element that should be used as the label (for assistive tech) */
+    'aria-labelledby'?: string;
+    /** Used to set the priority with which screen reader should treat updates to live regions. The possible settings are?: off, polite (default) or assertive */
+    'aria-live'?: 'off' | 'polite' | 'assertive';
+    /** Customize the messages used by the aria-live component. See react-select v5.4.0 documentation for full details */
+    ariaLiveMessages?: AriaLiveMessages<Option, IsMulti, Group>;
+    /** Focus the control when it is mounted */
+    autoFocus?: boolean;
+    /** Remove the currently focused option when the user presses backspace when Select isClearable or isMulti */
+    backspaceRemovesValue?: boolean;
+    /** Remove focus from the input when the user selects an option (handy for dismissing the keyboard on touch devices) */
+    blurInputOnSelect?: boolean;
+    /** When the user reaches the top/bottom of the menu, prevent scroll on the scroll-parent  */
+    captureMenuScroll?: boolean;
+    /** Sets a className attribute on the outer component */
+    className?: string;
+    classNamePrefix?: string | null;
+    /** Close the select menu when the user selects an option */
+    closeMenuOnSelect?: boolean;
+    closeMenuOnScroll?: boolean | EventListener;
+    /**
+     * This complex object includes all the compositional components that are used
+     * in `react-select`. If you wish to overwrite a component, pass in an object
+     * with the appropriate namespace.
+     *
+     * If you only wish to restyle a component, we recommend using the `styles` prop
+     * instead. For a list of the components that can be passed in, and the shape
+     * that will be passed to them, see [the components docs](/components)
+     */
+    components?: SelectComponentsConfig<Option, IsMulti, Group>;
+    /** Whether the value of the select, e.g. SingleValue, should be displayed in the control. */
+    controlShouldRenderValue?: boolean;
+    /** Delimiter used to join multiple values into a single HTML Input value */
+    delimiter?: string;
+    /** Clear all values when the user presses escape AND the menu is closed */
+    escapeClearsValue?: boolean;
+    /** Custom method to filter whether an option should be displayed in the menu */
+    filterOption?: ((option?: FilterOptionOption<Option>, inputValue?: string) => boolean) | null;
+    /**
+     * Formats group labels in the menu as React components
+     *
+     * An example can be found in the [Replacing builtins](/advanced#replacing-builtins) documentation.
+     */
+    formatGroupLabel?: (group?: Group) => ReactNode;
+    /** Formats option labels in the menu and control as React components */
+    formatOptionLabel?: (data?: Option, formatOptionLabelMeta?: FormatOptionLabelMeta<Option>) => ReactNode;
+    /**
+     * Resolves option data to a string to be displayed as the label by components
+     *
+     * Note?: Failure to resolve to a string type can interfere with filtering and
+     * screen reader support.
+     */
+    getOptionLabel?: GetOptionLabel<Option>;
+    /** Resolves option data to a string to compare options and specify value attributes */
+    getOptionValue?: GetOptionValue<Option>;
+    /** Hide the selected option from the menu */
+    hideSelectedOptions?: boolean;
+    /** The id to set on the SelectContainer component. */
+    id?: string;
+    /** The value of the search input */
+    inputValue?: string;
+    /** The id of the search input */
+    inputId?: string;
+    /** Define an id prefix for the select components e.g. {your-id}-value */
+    instanceId?: number | string;
+    /** Is the select value clearable */
+    isClearable?: boolean;
+    /** Is the select disabled */
+    isDisabled?: boolean;
+    /** Is the select in a state of loading (async) */
+    isLoading?: boolean;
+    /**
+     * Override the built-in logic to detect whether an option is disabled
+     *
+     * An example can be found in the [Replacing builtins](/advanced#replacing-builtins) documentation.
+     */
+    isOptionDisabled?: (option?: Option, selectValue?: Options<Option>) => boolean;
+    /** Override the built-in logic to detect whether an option is selected */
+    isOptionSelected?: (option?: Option, selectValue?: Options<Option>) => boolean;
+    /** Support multiple selected options */
+    isMulti?: IsMulti;
+    /** Is the select direction right-to-left */
+    isRtl?: boolean;
+    /** Whether to enable search functionality */
+    isSearchable?: boolean;
+    /** Async?: Text to display when loading options */
+    loadingMessage?: (obj?: {
+        inputValue?: string;
+    }) => ReactNode;
+    /** Minimum height of the menu before flipping */
+    minMenuHeight?: number;
+    /** Maximum height of the menu before scrolling */
+    maxMenuHeight?: number;
+    /** Whether the menu is open */
+    menuIsOpen?: boolean;
+    /**
+     * Default placement of the menu in relation to the control. 'auto' will flip
+     * when there isn't enough space below the control.
+     */
+    menuPlacement?: MenuPlacement;
+    /** The CSS position value of the menu, when "fixed" extra layout management is required */
+    menuPosition?: MenuPosition;
+    /**
+     * Whether the menu should use a portal, and where it should attach
+     *
+     * An example can be found in the [Portaling](/advanced#portaling) documentation
+     */
+    menuPortalTarget?: HTMLElement | null;
+    /** Whether to block scroll events when the menu is open */
+    menuShouldBlockScroll?: boolean;
+    /** Whether the menu should be scrolled into view when it opens */
+    menuShouldScrollIntoView?: boolean;
+    /** Name of the HTML Input (optional - without this, no input will be rendered) */
+    name?: string;
+    /** Text to display when there are no options */
+    noOptionsMessage?: (obj?: {
+        inputValue?: string;
+    }) => ReactNode;
+    /** Handle blur events on the control */
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    /** Handle change events on the select */
+    onChange?: (newValue?: OnChangeValue<Option, IsMulti>, actionMeta?: ActionMeta<Option>) => void;
+    /** Handle focus events on the control */
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    /** Handle change events on the input */
+    onInputChange?: (newValue?: string, actionMeta?: InputActionMeta) => void;
+    /** Handle key down events on the select */
+    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+    /** Handle the menu opening */
+    onMenuOpen?: () => void;
+    /** Handle the menu closing */
+    onMenuClose?: () => void;
+    /** Fired when the user scrolls to the top of the menu */
+    onMenuScrollToTop?: (event?: WheelEvent | TouchEvent) => void;
+    /** Fired when the user scrolls to the bottom of the menu */
+    onMenuScrollToBottom?: (event?: WheelEvent | TouchEvent) => void;
+    /** Allows control of whether the menu is opened when the Select is focused */
+    openMenuOnFocus?: boolean;
+    /** Allows control of whether the menu is opened when the Select is clicked */
+    openMenuOnClick?: boolean;
+    /** Array of options that populate the select menu */
+    options?: OptionsOrGroups<Option, Group>;
+    /** Number of options to jump in menu when page{up|down} keys are used */
+    pageSize?: number;
+    /** Placeholder for the select value */
+    placeholder?: ReactNode;
+    /** Status to relay to screen readers */
+    screenReaderStatus?: (obj?: {
+        count?: number;
+    }) => string;
+    /**
+     * Style modifier methods
+     *
+     * A basic example can be found at the bottom of the [Replacing builtins](/advanced#replacing-builtins) documentation.
+     */
+    styles?: StylesConfig;
+    /** Theme modifier method */
+    theme?: ThemeConfig;
+    /** Sets the tabIndex attribute on the input */
+    tabIndex?: number;
+    /** Select the currently focused option when the user presses tab */
+    tabSelectsValue?: boolean;
+    /** The value of the select; reflected by the selected option */
+    value?: PropsValue<Option>;
+    /** Sets the form attribute on the input */
+    form?: string;
+    /** Marks the value-holding input as required for form validation */
+    required?: boolean;
+}
+export default function ertHackForSelect(_: NativeReactSelectProps): void;
+export {};

package/dist/types/types.d.ts

@@ -26,14 +26,14 @@ export interface OptionProps<Option = OptionType, IsMulti extends boolean = fals
 interface CustomSelectProps extends WithAnalyticsEventsProps {
     /** This prop affects the height of the select control. Compact is gridSize() * 4, default is gridSize * 5  */
     spacing?: 'compact' | 'default';
-    /** @deprecated Use isInvalid instead. The state of validation if used in a form.  */
-    validationState?: ValidationState;
     /** This prop affects the backgroundColor and border of the Select field. 'subtle' makes these transparent while 'none' removes them completely */
     appearance?: 'default' | 'subtle' | 'none';
-    /** This prop indicates if the component is in an error state */
-    isInvalid?: boolean;
     /** Prop for testing */
     testId?: string;
+    /** This prop indicates if the component is in an error state */
+    isInvalid?: boolean;
+    /** @deprecated Use isInvalid instead. The state of validation if used in a form.  */
+    validationState?: ValidationState;
 }
 export interface SelectProps<Option, IsMulti extends boolean = false> extends ReactSelectProps<Option, IsMulti>, CustomSelectProps {
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/select",
-  "version": "16.0.3",
+  "version": "16.1.0",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/report.api.md

@@ -1,4 +1,4 @@
-<!-- API Report Version: 2.2 -->
+<!-- API Report Version: 2.3 -->
 
 ## API Report File for "@atlaskit/select"
 
@@ -53,6 +53,7 @@ import { ReactNode } from 'react';
 import { Props as ReactSelectProps } from 'react-select';
 import { SelectComponents } from 'react-select/dist/declarations/src/components';
 import { SelectComponentsConfig as SelectComponentsConfig_2 } from 'react-select';
+import { SelectInstance } from 'react-select';
 import { SingleValueProps } from 'react-select';
 import { StylesConfig as StylesConfig_2 } from 'react-select';
 import { UnbindFn } from 'bind-event-listener';
@@ -868,6 +869,8 @@ export type SelectComponentsConfig<
   IsMulti extends boolean = false,
 > = SelectComponentsConfig_2<Option, IsMulti, GroupType<Option>>;
 
+export { SelectInstance };
+
 // @public (undocumented)
 export interface SelectProps<Option, IsMulti extends boolean = false>
   extends ReactSelectProps<Option, IsMulti>,