@atlaskit/react-select 1.4.0 → 1.4.2

package/dist/types/components/control.d.ts

@@ -23,11 +23,20 @@ export interface ControlProps<Option = unknown, IsMulti extends boolean = boolea
      * Whether the select is focused.
      */
     isFocused: boolean;
+    /**
+     * Whether the select is invalid.
+     */
+    isInvalid: boolean | undefined;
+    /**
+     * Whether the select is compact.
+     */
+    isCompact?: boolean;
+    appearance?: 'default' | 'subtle' | 'none';
     /**
      * Whether the select is expanded.
      */
     menuIsOpen: boolean;
 }
-export declare const css: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, isFocused, theme: { colors, borderRadius, spacing }, }: ControlProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
+export declare const css: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, isFocused, isInvalid, isCompact, appearance, }: ControlProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 declare const Control: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ControlProps<Option, IsMulti, Group>) => jsx.JSX.Element;
 export default Control;

package/dist/types/components/group.d.ts

@@ -37,7 +37,7 @@ export interface GroupProps<Option = unknown, IsMulti extends boolean = boolean,
     data: Group;
     options: Options<Option>;
 }
-export declare const groupCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { spacing }, }: GroupProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
+export declare const groupCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({}: GroupProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 declare const Group: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: GroupProps<Option, IsMulti, Group>) => jsx.JSX.Element;
 interface GroupHeadingPropsDefinedProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> extends ForwardedHeadingProps<Option, Group> {
     className?: string | undefined;
@@ -48,6 +48,6 @@ interface GroupHeadingPropsDefinedProps<Option, IsMulti extends boolean, Group e
     cx: CX;
 }
 export type GroupHeadingProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> = GroupHeadingPropsDefinedProps<Option, IsMulti, Group> & JSX.IntrinsicElements['div'];
-export declare const groupHeadingCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { colors, spacing }, }: GroupHeadingProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
+export declare const groupHeadingCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({}: GroupHeadingProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 export declare const GroupHeading: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: GroupHeadingProps<Option, IsMulti, Group>) => jsx.JSX.Element;
 export default Group;

package/dist/types/components/indicators.d.ts

@@ -27,8 +27,12 @@ export interface DropdownIndicatorProps<Option = unknown, IsMulti extends boolea
      */
     isFocused: boolean;
     isDisabled: boolean;
+    /**
+     * Whether the select is compact.
+     */
+    isCompact?: boolean;
 }
-export declare const dropdownIndicatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isFocused, theme: { spacing: { baseUnit }, colors, }, }: DropdownIndicatorProps<Option, IsMulti, Group> | ClearIndicatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
+export declare const dropdownIndicatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isCompact, isDisabled, }: DropdownIndicatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 export declare const DropdownIndicator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: DropdownIndicatorProps<Option, IsMulti, Group>) => jsx.JSX.Element;
 export interface ClearIndicatorProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
     /**
@@ -47,17 +51,21 @@ export interface ClearIndicatorProps<Option = unknown, IsMulti extends boolean =
      * The focused state of the select.
      */
     isFocused: boolean;
+    /**
+     * Whether the select is compact.
+     */
+    isCompact?: boolean;
 }
-export declare const clearIndicatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isFocused, theme: { spacing: { baseUnit }, colors, }, }: DropdownIndicatorProps<Option, IsMulti, Group> | ClearIndicatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
+export declare const clearIndicatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isCompact, }: ClearIndicatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 export declare const ClearIndicator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ClearIndicatorProps<Option, IsMulti, Group>) => jsx.JSX.Element;
 export interface IndicatorSeparatorProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
     isDisabled: boolean;
     isFocused: boolean;
     innerProps?: JSX.IntrinsicElements['span'];
 }
-export declare const indicatorSeparatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, theme: { spacing: { baseUnit }, colors, }, }: IndicatorSeparatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
+export declare const indicatorSeparatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, }: IndicatorSeparatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 export declare const IndicatorSeparator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: IndicatorSeparatorProps<Option, IsMulti, Group>) => jsx.JSX.Element;
-export declare const loadingIndicatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isFocused, size, theme: { colors, spacing: { baseUnit }, }, }: LoadingIndicatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
+export declare const loadingIndicatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isFocused, size, isCompact, theme: { colors }, }: LoadingIndicatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 export interface LoadingIndicatorProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
     /**
      * Props that will be passed on to the children.
@@ -72,5 +80,9 @@ export interface LoadingIndicatorProps<Option = unknown, IsMulti extends boolean
      * Set size of the container.
      */
     size: number;
+    /**
+     * Whether the select is compact.
+     */
+    isCompact?: boolean;
 }
 export declare const LoadingIndicator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ innerProps, isRtl, size, ...restProps }: LoadingIndicatorProps<Option, IsMulti, Group>) => jsx.JSX.Element;

package/dist/types/components/menu.d.ts

@@ -94,7 +94,7 @@ export interface MenuListProps<Option = unknown, IsMulti extends boolean = boole
      */
     innerProps: JSX.IntrinsicElements['div'];
 }
-export declare const menuListCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ maxHeight, theme: { spacing: { baseUnit }, }, }: MenuListProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
+export declare const menuListCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ maxHeight, }: MenuListProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 export declare const MenuList: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MenuListProps<Option, IsMulti, Group>) => jsx.JSX.Element;
 export declare const noOptionsMessageCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { spacing: { baseUnit }, colors, }, }: NoticeProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 export declare const loadingMessageCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { spacing: { baseUnit }, colors, }, }: NoticeProps<Option, IsMulti, Group>) => CSSObjectWithLabel;

package/dist/types/components/multi-value.d.ts

@@ -22,9 +22,9 @@ export interface MultiValueProps<Option = unknown, IsMulti extends boolean = boo
     removeProps: JSX.IntrinsicElements['div'];
     index: number;
 }
-export declare const multiValueCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { spacing, borderRadius, colors }, }: MultiValueProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
-export declare const multiValueLabelCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { borderRadius, colors }, cropWithEllipsis, }: MultiValueProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
-export declare const multiValueRemoveCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { spacing, borderRadius, colors }, isFocused, }: MultiValueProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
+export declare const multiValueCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, isFocused, theme: { spacing, borderRadius, colors }, }: MultiValueProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
+export declare const multiValueLabelCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ cropWithEllipsis, isDisabled, }: MultiValueProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
+export declare const multiValueRemoveCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isFocused, }: MultiValueProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 export interface MultiValueGenericProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> {
     children: ReactNode;
     data: any;

package/dist/types/components/option.d.ts

@@ -44,6 +44,6 @@ export interface OptionProps<Option = unknown, IsMulti extends boolean = boolean
      */
     isSelected: boolean;
 }
-export declare const optionCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, isFocused, isSelected, theme: { spacing, colors }, }: OptionProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
+export declare const optionCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, isFocused, isSelected, }: OptionProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 declare const Option: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: OptionProps<Option, IsMulti, Group>) => jsx.JSX.Element;
 export default Option;

package/dist/types/components/placeholder.d.ts

@@ -17,6 +17,6 @@ export interface PlaceholderProps<Option = unknown, IsMulti extends boolean = bo
     isDisabled: boolean;
     isFocused: boolean;
 }
-export declare const placeholderCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { spacing, colors }, }: PlaceholderProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
+export declare const placeholderCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, }: PlaceholderProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 declare const Placeholder: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: PlaceholderProps<Option, IsMulti, Group>) => jsx.JSX.Element;
 export default Placeholder;

package/dist/types/components/single-value.d.ts

@@ -23,6 +23,6 @@ export interface SingleValueProps<Option = unknown, IsMulti extends boolean = bo
      */
     isDisabled: boolean;
 }
-export declare const css: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, theme: { spacing, colors }, }: SingleValueProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
+export declare const css: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, theme: { spacing }, }: SingleValueProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 declare const SingleValue: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: SingleValueProps<Option, IsMulti, Group>) => jsx.JSX.Element;
 export default SingleValue;

package/dist/types/select.d.ts

@@ -405,10 +405,15 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
      * Use `isRequired` instead.
      */
     required?: boolean;
+    /**
+     * This prop affects the height of the select control. Compact is gridSize() * 4, default is gridSize * 5
+     */
+    spacing?: 'compact' | 'default';
+    appearance: 'default' | 'subtle' | 'none';
     [key: string]: any;
 }
 export declare const defaultProps: {
-    'aria-live': string;
+    'aria-live': string | undefined;
     backspaceRemovesValue: boolean;
     blurInputOnSelect: boolean;
     captureMenuScroll: boolean;
@@ -486,7 +491,7 @@ interface CategorizedGroup<Option, Group extends GroupBase<Option>> {
 type CategorizedGroupOrOption<Option, Group extends GroupBase<Option>> = CategorizedGroup<Option, Group> | CategorizedOption<Option>;
 export default class Select<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> extends Component<SelectProps<Option, IsMulti, Group>, State<Option, IsMulti, Group>> {
     static defaultProps: {
-        'aria-live': string;
+        'aria-live': string | undefined;
         backspaceRemovesValue: boolean;
         blurInputOnSelect: boolean;
         captureMenuScroll: boolean;
@@ -536,7 +541,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
     openAfterFocus: boolean;
     scrollToFocusedOptionOnUpdate: boolean;
     userIsDragging?: boolean;
-    isAppleDevice: boolean;
+    isVoiceOver: boolean;
     controlRef: HTMLDivElement | null;
     getControlRef: RefCallback<HTMLDivElement>;
     focusedOptionRef: HTMLDivElement | null;
@@ -604,7 +609,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
     getOptionValue: (data: Option) => string;
     getStyles: <Key extends keyof StylesProps<Option, IsMulti, Group>>(key: Key, props: StylesProps<Option, IsMulti, Group>[Key]) => import("./types").CSSObjectWithLabel;
     getClassNames: <Key extends keyof StylesProps<Option, IsMulti, Group>>(key: Key, props: StylesProps<Option, IsMulti, Group>[Key]) => string | undefined;
-    getElementId: (element: 'group' | 'input' | 'listbox' | 'option' | 'placeholder' | 'live-region') => string;
+    getElementId: (element: 'group' | 'input' | 'listbox' | 'option' | 'placeholder' | 'live-region' | 'multi-message') => string;
     getComponents: () => {
         ClearIndicator: <Option_1, IsMulti_1 extends boolean, Group_1 extends GroupBase<Option_1>>(props: import(".").ClearIndicatorProps<Option_1, IsMulti_1, Group_1>) => import("@emotion/react").jsx.JSX.Element;
         Control: <Option_2, IsMulti_2 extends boolean, Group_2 extends GroupBase<Option_2>>(props: import(".").ControlProps<Option_2, IsMulti_2, Group_2>) => import("@emotion/react").jsx.JSX.Element;
@@ -645,6 +650,9 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
     filterOption(option: FilterOptionOption<Option>, inputValue: string): boolean;
     formatOptionLabel(data: Option, context: FormatOptionLabelContext): ReactNode;
     formatGroupLabel(data: Group): React.ReactNode;
+    calculateDescription(action?: String): {
+        'aria-describedby': string;
+    } | undefined;
     onMenuMouseDown: MouseEventHandler<HTMLDivElement>;
     onMenuMouseMove: MouseEventHandler<HTMLDivElement>;
     onControlMouseDown: (event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => void;
@@ -679,6 +687,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
     renderMenu(): JSX.Element | null;
     renderFormField(): JSX.Element | undefined;
     renderLiveRegion(): JSX.Element;
+    renderMultiselectMessage(): JSX.Element;
     render(): JSX.Element;
 }
 export type PublicBaseSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = JSX.LibraryManagedAttributes<typeof Select, SelectProps<Option, IsMulti, Group>>;

package/dist/types-ts4.5/components/containers.d.ts

@@ -32,8 +32,12 @@ export interface ValueContainerProps<Option = unknown, IsMulti extends boolean =
      */
     children: ReactNode;
     isDisabled: boolean;
+    /**
+     * Whether the select is compact.
+     */
+    isCompact?: boolean;
 }
-export declare const valueContainerCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { spacing }, isMulti, hasValue, selectProps: { controlShouldRenderValue }, }: ValueContainerProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
+export declare const valueContainerCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isMulti, hasValue, isCompact, selectProps: { controlShouldRenderValue }, }: ValueContainerProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 export declare const ValueContainer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ValueContainerProps<Option, IsMulti, Group>) => jsx.JSX.Element;
 export interface IndicatorsContainerProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
     isDisabled: boolean;

package/dist/types-ts4.5/components/control.d.ts

@@ -23,11 +23,20 @@ export interface ControlProps<Option = unknown, IsMulti extends boolean = boolea
      * Whether the select is focused.
      */
     isFocused: boolean;
+    /**
+     * Whether the select is invalid.
+     */
+    isInvalid: boolean | undefined;
+    /**
+     * Whether the select is compact.
+     */
+    isCompact?: boolean;
+    appearance?: 'default' | 'subtle' | 'none';
     /**
      * Whether the select is expanded.
      */
     menuIsOpen: boolean;
 }
-export declare const css: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, isFocused, theme: { colors, borderRadius, spacing }, }: ControlProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
+export declare const css: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, isFocused, isInvalid, isCompact, appearance, }: ControlProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 declare const Control: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ControlProps<Option, IsMulti, Group>) => jsx.JSX.Element;
 export default Control;

package/dist/types-ts4.5/components/group.d.ts

@@ -37,7 +37,7 @@ export interface GroupProps<Option = unknown, IsMulti extends boolean = boolean,
     data: Group;
     options: Options<Option>;
 }
-export declare const groupCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { spacing }, }: GroupProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
+export declare const groupCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({}: GroupProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 declare const Group: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: GroupProps<Option, IsMulti, Group>) => jsx.JSX.Element;
 interface GroupHeadingPropsDefinedProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> extends ForwardedHeadingProps<Option, Group> {
     className?: string | undefined;
@@ -48,6 +48,6 @@ interface GroupHeadingPropsDefinedProps<Option, IsMulti extends boolean, Group e
     cx: CX;
 }
 export type GroupHeadingProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> = GroupHeadingPropsDefinedProps<Option, IsMulti, Group> & JSX.IntrinsicElements['div'];
-export declare const groupHeadingCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { colors, spacing }, }: GroupHeadingProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
+export declare const groupHeadingCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({}: GroupHeadingProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 export declare const GroupHeading: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: GroupHeadingProps<Option, IsMulti, Group>) => jsx.JSX.Element;
 export default Group;

package/dist/types-ts4.5/components/indicators.d.ts

@@ -27,8 +27,12 @@ export interface DropdownIndicatorProps<Option = unknown, IsMulti extends boolea
      */
     isFocused: boolean;
     isDisabled: boolean;
+    /**
+     * Whether the select is compact.
+     */
+    isCompact?: boolean;
 }
-export declare const dropdownIndicatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isFocused, theme: { spacing: { baseUnit }, colors, }, }: DropdownIndicatorProps<Option, IsMulti, Group> | ClearIndicatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
+export declare const dropdownIndicatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isCompact, isDisabled, }: DropdownIndicatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 export declare const DropdownIndicator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: DropdownIndicatorProps<Option, IsMulti, Group>) => jsx.JSX.Element;
 export interface ClearIndicatorProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
     /**
@@ -47,17 +51,21 @@ export interface ClearIndicatorProps<Option = unknown, IsMulti extends boolean =
      * The focused state of the select.
      */
     isFocused: boolean;
+    /**
+     * Whether the select is compact.
+     */
+    isCompact?: boolean;
 }
-export declare const clearIndicatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isFocused, theme: { spacing: { baseUnit }, colors, }, }: DropdownIndicatorProps<Option, IsMulti, Group> | ClearIndicatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
+export declare const clearIndicatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isCompact, }: ClearIndicatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 export declare const ClearIndicator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ClearIndicatorProps<Option, IsMulti, Group>) => jsx.JSX.Element;
 export interface IndicatorSeparatorProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
     isDisabled: boolean;
     isFocused: boolean;
     innerProps?: JSX.IntrinsicElements['span'];
 }
-export declare const indicatorSeparatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, theme: { spacing: { baseUnit }, colors, }, }: IndicatorSeparatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
+export declare const indicatorSeparatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, }: IndicatorSeparatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 export declare const IndicatorSeparator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: IndicatorSeparatorProps<Option, IsMulti, Group>) => jsx.JSX.Element;
-export declare const loadingIndicatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isFocused, size, theme: { colors, spacing: { baseUnit }, }, }: LoadingIndicatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
+export declare const loadingIndicatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isFocused, size, isCompact, theme: { colors }, }: LoadingIndicatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 export interface LoadingIndicatorProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
     /**
      * Props that will be passed on to the children.
@@ -72,5 +80,9 @@ export interface LoadingIndicatorProps<Option = unknown, IsMulti extends boolean
      * Set size of the container.
      */
     size: number;
+    /**
+     * Whether the select is compact.
+     */
+    isCompact?: boolean;
 }
 export declare const LoadingIndicator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ innerProps, isRtl, size, ...restProps }: LoadingIndicatorProps<Option, IsMulti, Group>) => jsx.JSX.Element;

package/dist/types-ts4.5/components/menu.d.ts

@@ -94,7 +94,7 @@ export interface MenuListProps<Option = unknown, IsMulti extends boolean = boole
      */
     innerProps: JSX.IntrinsicElements['div'];
 }
-export declare const menuListCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ maxHeight, theme: { spacing: { baseUnit }, }, }: MenuListProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
+export declare const menuListCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ maxHeight, }: MenuListProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 export declare const MenuList: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MenuListProps<Option, IsMulti, Group>) => jsx.JSX.Element;
 export declare const noOptionsMessageCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { spacing: { baseUnit }, colors, }, }: NoticeProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 export declare const loadingMessageCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { spacing: { baseUnit }, colors, }, }: NoticeProps<Option, IsMulti, Group>) => CSSObjectWithLabel;

package/dist/types-ts4.5/components/multi-value.d.ts

@@ -22,9 +22,9 @@ export interface MultiValueProps<Option = unknown, IsMulti extends boolean = boo
     removeProps: JSX.IntrinsicElements['div'];
     index: number;
 }
-export declare const multiValueCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { spacing, borderRadius, colors }, }: MultiValueProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
-export declare const multiValueLabelCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { borderRadius, colors }, cropWithEllipsis, }: MultiValueProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
-export declare const multiValueRemoveCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { spacing, borderRadius, colors }, isFocused, }: MultiValueProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
+export declare const multiValueCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, isFocused, theme: { spacing, borderRadius, colors }, }: MultiValueProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
+export declare const multiValueLabelCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ cropWithEllipsis, isDisabled, }: MultiValueProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
+export declare const multiValueRemoveCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isFocused, }: MultiValueProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 export interface MultiValueGenericProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> {
     children: ReactNode;
     data: any;

package/dist/types-ts4.5/components/option.d.ts

@@ -44,6 +44,6 @@ export interface OptionProps<Option = unknown, IsMulti extends boolean = boolean
      */
     isSelected: boolean;
 }
-export declare const optionCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, isFocused, isSelected, theme: { spacing, colors }, }: OptionProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
+export declare const optionCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, isFocused, isSelected, }: OptionProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 declare const Option: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: OptionProps<Option, IsMulti, Group>) => jsx.JSX.Element;
 export default Option;

package/dist/types-ts4.5/components/placeholder.d.ts

@@ -17,6 +17,6 @@ export interface PlaceholderProps<Option = unknown, IsMulti extends boolean = bo
     isDisabled: boolean;
     isFocused: boolean;
 }
-export declare const placeholderCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { spacing, colors }, }: PlaceholderProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
+export declare const placeholderCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, }: PlaceholderProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 declare const Placeholder: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: PlaceholderProps<Option, IsMulti, Group>) => jsx.JSX.Element;
 export default Placeholder;

package/dist/types-ts4.5/components/single-value.d.ts

@@ -23,6 +23,6 @@ export interface SingleValueProps<Option = unknown, IsMulti extends boolean = bo
      */
     isDisabled: boolean;
 }
-export declare const css: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, theme: { spacing, colors }, }: SingleValueProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
+export declare const css: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, theme: { spacing }, }: SingleValueProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
 declare const SingleValue: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: SingleValueProps<Option, IsMulti, Group>) => jsx.JSX.Element;
 export default SingleValue;

package/dist/types-ts4.5/select.d.ts

@@ -405,10 +405,15 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
      * Use `isRequired` instead.
      */
     required?: boolean;
+    /**
+     * This prop affects the height of the select control. Compact is gridSize() * 4, default is gridSize * 5
+     */
+    spacing?: 'compact' | 'default';
+    appearance: 'default' | 'subtle' | 'none';
     [key: string]: any;
 }
 export declare const defaultProps: {
-    'aria-live': string;
+    'aria-live': string | undefined;
     backspaceRemovesValue: boolean;
     blurInputOnSelect: boolean;
     captureMenuScroll: boolean;
@@ -486,7 +491,7 @@ interface CategorizedGroup<Option, Group extends GroupBase<Option>> {
 type CategorizedGroupOrOption<Option, Group extends GroupBase<Option>> = CategorizedGroup<Option, Group> | CategorizedOption<Option>;
 export default class Select<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> extends Component<SelectProps<Option, IsMulti, Group>, State<Option, IsMulti, Group>> {
     static defaultProps: {
-        'aria-live': string;
+        'aria-live': string | undefined;
         backspaceRemovesValue: boolean;
         blurInputOnSelect: boolean;
         captureMenuScroll: boolean;
@@ -536,7 +541,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
     openAfterFocus: boolean;
     scrollToFocusedOptionOnUpdate: boolean;
     userIsDragging?: boolean;
-    isAppleDevice: boolean;
+    isVoiceOver: boolean;
     controlRef: HTMLDivElement | null;
     getControlRef: RefCallback<HTMLDivElement>;
     focusedOptionRef: HTMLDivElement | null;
@@ -604,7 +609,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
     getOptionValue: (data: Option) => string;
     getStyles: <Key extends keyof StylesProps<Option, IsMulti, Group>>(key: Key, props: StylesProps<Option, IsMulti, Group>[Key]) => import("./types").CSSObjectWithLabel;
     getClassNames: <Key extends keyof StylesProps<Option, IsMulti, Group>>(key: Key, props: StylesProps<Option, IsMulti, Group>[Key]) => string | undefined;
-    getElementId: (element: 'group' | 'input' | 'listbox' | 'option' | 'placeholder' | 'live-region') => string;
+    getElementId: (element: 'group' | 'input' | 'listbox' | 'option' | 'placeholder' | 'live-region' | 'multi-message') => string;
     getComponents: () => {
         ClearIndicator: <Option_1, IsMulti_1 extends boolean, Group_1 extends GroupBase<Option_1>>(props: import(".").ClearIndicatorProps<Option_1, IsMulti_1, Group_1>) => import("@emotion/react").jsx.JSX.Element;
         Control: <Option_2, IsMulti_2 extends boolean, Group_2 extends GroupBase<Option_2>>(props: import(".").ControlProps<Option_2, IsMulti_2, Group_2>) => import("@emotion/react").jsx.JSX.Element;
@@ -645,6 +650,9 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
     filterOption(option: FilterOptionOption<Option>, inputValue: string): boolean;
     formatOptionLabel(data: Option, context: FormatOptionLabelContext): ReactNode;
     formatGroupLabel(data: Group): React.ReactNode;
+    calculateDescription(action?: String): {
+        'aria-describedby': string;
+    } | undefined;
     onMenuMouseDown: MouseEventHandler<HTMLDivElement>;
     onMenuMouseMove: MouseEventHandler<HTMLDivElement>;
     onControlMouseDown: (event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => void;
@@ -679,6 +687,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
     renderMenu(): JSX.Element | null;
     renderFormField(): JSX.Element | undefined;
     renderLiveRegion(): JSX.Element;
+    renderMultiselectMessage(): JSX.Element;
     render(): JSX.Element;
 }
 export type PublicBaseSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = JSX.LibraryManagedAttributes<typeof Select, SelectProps<Option, IsMulti, Group>>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "1.4.0",
+	"version": "1.4.2",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,8 +28,9 @@
 		"./async-creatable": "./src/async-creatable.tsx"
 	},
 	"dependencies": {
-		"@atlaskit/ds-lib": "^3.2.0",
+		"@atlaskit/ds-lib": "^3.3.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
+		"@atlaskit/tokens": "^2.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"@floating-ui/dom": "^1.0.1",
@@ -55,6 +56,9 @@
 	"platform-feature-flags": {
 		"design_system_select-a11y-improvement": {
 			"type": "boolean"
+		},
+		"platform-component-visual-refresh": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {