@atlaskit/react-select 3.16.0 → 3.16.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/cjs/async.js +1 -6
- package/dist/cjs/compiled/components/indicators-container.compiled.css +5 -0
- package/dist/cjs/compiled/components/indicators-container.js +40 -0
- package/dist/cjs/compiled/components/select-container.compiled.css +6 -0
- package/dist/cjs/compiled/components/select-container.js +52 -0
- package/dist/cjs/compiled/components/value-container.compiled.css +20 -0
- package/dist/cjs/compiled/components/{containers.js → value-container.js} +7 -69
- package/dist/cjs/creatable.js +1 -6
- package/dist/cjs/entry-points/async.js +4 -4
- package/dist/cjs/entry-points/creatable.js +4 -4
- package/dist/cjs/theme.js +1 -7
- package/dist/es2019/async.js +0 -1
- package/dist/es2019/compiled/components/indicators-container.compiled.css +5 -0
- package/dist/es2019/compiled/components/indicators-container.js +35 -0
- package/dist/es2019/compiled/components/select-container.compiled.css +6 -0
- package/dist/es2019/compiled/components/select-container.js +47 -0
- package/dist/es2019/compiled/components/value-container.compiled.css +20 -0
- package/dist/es2019/compiled/components/{containers.js → value-container.js} +2 -70
- package/dist/es2019/creatable.js +1 -1
- package/dist/es2019/entry-points/async.js +1 -1
- package/dist/es2019/entry-points/creatable.js +1 -1
- package/dist/es2019/theme.js +0 -7
- package/dist/esm/async.js +0 -1
- package/dist/esm/compiled/components/indicators-container.compiled.css +5 -0
- package/dist/esm/compiled/components/indicators-container.js +32 -0
- package/dist/esm/compiled/components/select-container.compiled.css +6 -0
- package/dist/esm/compiled/components/select-container.js +44 -0
- package/dist/esm/compiled/components/value-container.compiled.css +20 -0
- package/dist/esm/compiled/components/value-container.js +50 -0
- package/dist/esm/creatable.js +1 -1
- package/dist/esm/entry-points/async.js +1 -1
- package/dist/esm/entry-points/creatable.js +1 -1
- package/dist/esm/theme.js +0 -7
- package/dist/types/async.d.ts +1 -2
- package/dist/types/compiled/components/indicators-container.d.ts +18 -0
- package/dist/types/compiled/components/select-container.d.ts +22 -0
- package/dist/types/compiled/components/value-container.d.ts +22 -0
- package/dist/types/creatable.d.ts +1 -2
- package/dist/types/entry-points/async.d.ts +1 -1
- package/dist/types/entry-points/creatable.d.ts +1 -1
- package/dist/types/theme.d.ts +0 -2
- package/dist/types-ts4.5/async.d.ts +1 -2
- package/dist/types-ts4.5/compiled/components/indicators-container.d.ts +18 -0
- package/dist/types-ts4.5/compiled/components/select-container.d.ts +22 -0
- package/dist/types-ts4.5/compiled/components/value-container.d.ts +22 -0
- package/dist/types-ts4.5/creatable.d.ts +1 -2
- package/dist/types-ts4.5/entry-points/async.d.ts +1 -1
- package/dist/types-ts4.5/entry-points/creatable.d.ts +1 -1
- package/dist/types-ts4.5/theme.d.ts +0 -2
- package/package.json +3 -3
- package/dist/cjs/compiled/components/containers.compiled.css +0 -28
- package/dist/es2019/compiled/components/containers.compiled.css +0 -28
- package/dist/esm/compiled/components/containers.compiled.css +0 -28
- package/dist/esm/compiled/components/containers.js +0 -112
- package/dist/types/compiled/components/containers.d.ts +0 -50
- package/dist/types-ts4.5/compiled/components/containers.d.ts +0 -50
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/* indicators-container.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
3
|
+
import "./indicators-container.compiled.css";
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
6
|
+
import { cx } from '@compiled/react';
|
|
7
|
+
import { getStyleProps } from '../../get-style-props';
|
|
8
|
+
|
|
9
|
+
// ==============================
|
|
10
|
+
// Indicator Container
|
|
11
|
+
// ==============================
|
|
12
|
+
|
|
13
|
+
var indicatorContainerStyles = null;
|
|
14
|
+
|
|
15
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
16
|
+
export var IndicatorsContainer = function IndicatorsContainer(props) {
|
|
17
|
+
var children = props.children,
|
|
18
|
+
innerProps = props.innerProps,
|
|
19
|
+
xcss = props.xcss;
|
|
20
|
+
var _getStyleProps = getStyleProps(props, 'indicatorsContainer', {
|
|
21
|
+
indicators: true
|
|
22
|
+
}),
|
|
23
|
+
css = _getStyleProps.css,
|
|
24
|
+
className = _getStyleProps.className;
|
|
25
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
26
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
27
|
+
style: css
|
|
28
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
|
|
29
|
+
,
|
|
30
|
+
className: ax(["_1e0c1txw _4cvr1h6o _1o9zidpf _1wpz1fhb _y4ti1b66", cx(className, xcss, '-IndicatorsContainer')])
|
|
31
|
+
}, innerProps), children);
|
|
32
|
+
};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
._11c81d4k{font:var(--ds-font-body-large,normal 400 1pc/24px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
2
|
+
._1eim1xrj{direction:rtl}
|
|
3
|
+
._80om13gf{cursor:not-allowed}
|
|
4
|
+
._kqswh2mm{position:relative}
|
|
5
|
+
._lcxv1rj4{pointer-events:all}
|
|
6
|
+
@media (min-width:30rem){._1tn2fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
/* select-container.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
3
|
+
import "./select-container.compiled.css";
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
6
|
+
import { cx } from '@compiled/react';
|
|
7
|
+
import { getStyleProps } from '../../get-style-props';
|
|
8
|
+
|
|
9
|
+
// ==============================
|
|
10
|
+
// Root Container
|
|
11
|
+
// ==============================
|
|
12
|
+
|
|
13
|
+
// iOS Safari automatically zooms into form inputs on focus when the font size is less than 16px.
|
|
14
|
+
// To prevent this zoom behaviour on mobile devices, the select container uses font.body.large (16px) by default,
|
|
15
|
+
// then switches to the smaller font.body on screens wider than 30rem (desktop).
|
|
16
|
+
// @see: https://medium.com/@rares.popescu/2-ways-to-avoid-the-automatic-zoom-in-on-input-fields-8a71479e542e
|
|
17
|
+
|
|
18
|
+
var containerStyles = {
|
|
19
|
+
default: "_11c81d4k _kqswh2mm _lcxv1rj4 _1tn2fhey",
|
|
20
|
+
rtl: "_1eim1xrj",
|
|
21
|
+
disabled: "_80om13gf"
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
25
|
+
export var SelectContainer = function SelectContainer(props) {
|
|
26
|
+
var children = props.children,
|
|
27
|
+
innerProps = props.innerProps,
|
|
28
|
+
isDisabled = props.isDisabled,
|
|
29
|
+
isRtl = props.isRtl,
|
|
30
|
+
xcss = props.xcss;
|
|
31
|
+
var _getStyleProps = getStyleProps(props, 'container', {
|
|
32
|
+
'--is-disabled': isDisabled,
|
|
33
|
+
'--is-rtl': isRtl
|
|
34
|
+
}),
|
|
35
|
+
className = _getStyleProps.className,
|
|
36
|
+
css = _getStyleProps.css;
|
|
37
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
38
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
|
|
39
|
+
className: ax([containerStyles.default, isRtl && containerStyles.rtl, isDisabled && containerStyles.disabled, cx(className, xcss, '-container')])
|
|
40
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
41
|
+
,
|
|
42
|
+
style: css
|
|
43
|
+
}, innerProps), children);
|
|
44
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
|
|
2
|
+
._zulp1b66{gap:var(--ds-space-050,4px)}._16jlkb7n{flex-grow:1}
|
|
3
|
+
._18m915vq{overflow-y:hidden}
|
|
4
|
+
._1e0c11p5{display:grid}
|
|
5
|
+
._1e0c1txw{display:flex}
|
|
6
|
+
._1n261g80{flex-wrap:wrap}
|
|
7
|
+
._1o9zkb7n{flex-shrink:1}
|
|
8
|
+
._1q511b66{padding-block-start:var(--ds-space-050,4px)}
|
|
9
|
+
._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
|
|
10
|
+
._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
|
|
11
|
+
._1reo15vq{overflow-x:hidden}
|
|
12
|
+
._4cvr1h6o{align-items:center}
|
|
13
|
+
._85i51b66{padding-block-end:var(--ds-space-050,4px)}
|
|
14
|
+
._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
|
|
15
|
+
._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
|
|
16
|
+
._8am5i4x0{-webkit-overflow-scrolling:touch}
|
|
17
|
+
._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
|
|
18
|
+
._i0dlf1ug{flex-basis:0%}
|
|
19
|
+
._kqswh2mm{position:relative}
|
|
20
|
+
._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
/* value-container.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
3
|
+
import "./value-container.compiled.css";
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
6
|
+
import { cx } from '@compiled/react';
|
|
7
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
|
+
import { getStyleProps } from '../../get-style-props';
|
|
9
|
+
|
|
10
|
+
// ==============================
|
|
11
|
+
// Value Container
|
|
12
|
+
// ==============================
|
|
13
|
+
|
|
14
|
+
var valueContainerStyles = {
|
|
15
|
+
default: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _4cvr1h6o _1e0c11p5 _1n261g80 _8am5i4x0 _kqswh2mm _y4ti12x7 _bozg12x7",
|
|
16
|
+
verticalPaddingStandard: "_1q51v77o _85i5v77o",
|
|
17
|
+
verticalPaddingTagUpliftMulti: "_1q511b66 _85i51b66",
|
|
18
|
+
verticalPaddingTagUpliftCompactMulti: "_1q51v77o _85i5v77o",
|
|
19
|
+
verticalPaddingCompactNonUplift: "_1q51ze3t _85i5ze3t",
|
|
20
|
+
flex: "_1e0c1txw",
|
|
21
|
+
flexWithGap: "_zulp1b66 _1e0c1txw _1n261g80"
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
25
|
+
export var ValueContainer = function ValueContainer(props) {
|
|
26
|
+
var children = props.children,
|
|
27
|
+
innerProps = props.innerProps,
|
|
28
|
+
isMulti = props.isMulti,
|
|
29
|
+
hasValue = props.hasValue,
|
|
30
|
+
isCompact = props.isCompact,
|
|
31
|
+
xcss = props.xcss,
|
|
32
|
+
controlShouldRenderValue = props.selectProps.controlShouldRenderValue;
|
|
33
|
+
var _getStyleProps = getStyleProps(props, 'valueContainer', {
|
|
34
|
+
'value-container': true,
|
|
35
|
+
'value-container--is-multi': isMulti,
|
|
36
|
+
'value-container--has-value': hasValue
|
|
37
|
+
}),
|
|
38
|
+
css = _getStyleProps.css,
|
|
39
|
+
className = _getStyleProps.className;
|
|
40
|
+
var ffTagUplifts = fg('platform-dst-lozenge-tag-badge-visual-uplifts');
|
|
41
|
+
var tagUpliftMultiVertical = ffTagUplifts && isMulti;
|
|
42
|
+
var tagUpliftChipRow = ffTagUplifts && isMulti && hasValue && controlShouldRenderValue;
|
|
43
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
44
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
|
|
45
|
+
className: ax([valueContainerStyles.default, tagUpliftMultiVertical && isCompact && valueContainerStyles.verticalPaddingTagUpliftCompactMulti, tagUpliftMultiVertical && !isCompact && valueContainerStyles.verticalPaddingTagUpliftMulti, !tagUpliftMultiVertical && !isCompact && valueContainerStyles.verticalPaddingStandard, !tagUpliftMultiVertical && isCompact && valueContainerStyles.verticalPaddingCompactNonUplift, isMulti && hasValue && controlShouldRenderValue && valueContainerStyles.flex, tagUpliftChipRow && valueContainerStyles.flexWithGap, cx(className, xcss, '-ValueContainer')])
|
|
46
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
47
|
+
,
|
|
48
|
+
style: css
|
|
49
|
+
}, innerProps), children);
|
|
50
|
+
};
|
package/dist/esm/creatable.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { useAsync } from '../async';
|
|
1
|
+
export { default as useAsync } from '../use-async';
|
|
2
2
|
export { default } from '../async';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { useCreatable } from '../creatable';
|
|
1
|
+
export { default as useCreatable } from '../use-creatable';
|
|
2
2
|
export { default } from '../creatable';
|
package/dist/esm/theme.js
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import { colors } from './colors';
|
|
2
|
-
var borderRadius = 4;
|
|
3
1
|
// Used to calculate consistent margin/padding on elements
|
|
4
2
|
var baseUnit = 4;
|
|
5
3
|
// The minimum height of the control
|
|
@@ -11,9 +9,4 @@ export var spacing = {
|
|
|
11
9
|
controlHeight: controlHeight,
|
|
12
10
|
menuGutter: menuGutter
|
|
13
11
|
};
|
|
14
|
-
export var defaultTheme = {
|
|
15
|
-
borderRadius: borderRadius,
|
|
16
|
-
colors: colors,
|
|
17
|
-
spacing: spacing
|
|
18
|
-
};
|
|
19
12
|
export { colors } from './colors';
|
package/dist/types/async.d.ts
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { type ReactElement, type RefAttributes } from 'react';
|
|
2
2
|
import Select from './select';
|
|
3
3
|
import type { GroupBase } from './types';
|
|
4
|
-
import
|
|
4
|
+
import { type AsyncProps } from './use-async';
|
|
5
5
|
export type { AsyncProps };
|
|
6
6
|
type AsyncSelect = <Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: AsyncProps<Option, IsMulti, Group> & RefAttributes<Select<Option, IsMulti, Group>>) => ReactElement;
|
|
7
7
|
declare const AsyncSelect: AsyncSelect;
|
|
8
|
-
export { useAsync };
|
|
9
8
|
export default AsyncSelect;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import { type ReactNode } from 'react';
|
|
6
|
+
import { type CommonPropsAndClassName, type GroupBase } from '../../types';
|
|
7
|
+
export interface IndicatorsContainerProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
|
|
8
|
+
isDisabled: boolean;
|
|
9
|
+
/**
|
|
10
|
+
* The children to be rendered.
|
|
11
|
+
*/
|
|
12
|
+
children: ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* Props to be passed to the indicators container element.
|
|
15
|
+
*/
|
|
16
|
+
innerProps?: {};
|
|
17
|
+
}
|
|
18
|
+
export declare const IndicatorsContainer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: IndicatorsContainerProps<Option, IsMulti, Group>) => JSX.Element;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import { type ReactNode } from 'react';
|
|
6
|
+
import { type CommonPropsAndClassName, type GroupBase } from '../../types';
|
|
7
|
+
export interface ContainerProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
|
|
8
|
+
/**
|
|
9
|
+
* Whether the select is disabled.
|
|
10
|
+
*/
|
|
11
|
+
isDisabled: boolean;
|
|
12
|
+
isFocused: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* The children to be rendered.
|
|
15
|
+
*/
|
|
16
|
+
children: ReactNode;
|
|
17
|
+
/**
|
|
18
|
+
* Inner props to be passed down to the container.
|
|
19
|
+
*/
|
|
20
|
+
innerProps: {};
|
|
21
|
+
}
|
|
22
|
+
export declare const SelectContainer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ContainerProps<Option, IsMulti, Group>) => JSX.Element;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import { type ReactNode } from 'react';
|
|
6
|
+
import { type CommonPropsAndClassName, type GroupBase } from '../../types';
|
|
7
|
+
export interface ValueContainerProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
|
|
8
|
+
/**
|
|
9
|
+
* Props to be passed to the value container element.
|
|
10
|
+
*/
|
|
11
|
+
innerProps?: {};
|
|
12
|
+
/**
|
|
13
|
+
* The children to be rendered.
|
|
14
|
+
*/
|
|
15
|
+
children: ReactNode;
|
|
16
|
+
isDisabled: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Whether the select is compact.
|
|
19
|
+
*/
|
|
20
|
+
isCompact?: boolean;
|
|
21
|
+
}
|
|
22
|
+
export declare const ValueContainer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ValueContainerProps<Option, IsMulti, Group>) => JSX.Element;
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { type ReactElement, type RefAttributes } from 'react';
|
|
2
2
|
import Select from './select';
|
|
3
3
|
import type { GroupBase } from './types';
|
|
4
|
-
import
|
|
4
|
+
import { type CreatableAdditionalProps } from './use-creatable';
|
|
5
5
|
import { type StateManagerProps } from './use-state-manager';
|
|
6
6
|
export type CreatableProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = StateManagerProps<Option, IsMulti, Group> & CreatableAdditionalProps<Option, Group>;
|
|
7
7
|
type CreatableSelect = <Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: CreatableProps<Option, IsMulti, Group> & RefAttributes<Select<Option, IsMulti, Group>>) => ReactElement;
|
|
8
8
|
declare const CreatableSelect: CreatableSelect;
|
|
9
|
-
export { useCreatable };
|
|
10
9
|
export default CreatableSelect;
|
package/dist/types/theme.d.ts
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { type ReactElement, type RefAttributes } from 'react';
|
|
2
2
|
import Select from './select';
|
|
3
3
|
import type { GroupBase } from './types';
|
|
4
|
-
import
|
|
4
|
+
import { type AsyncProps } from './use-async';
|
|
5
5
|
export type { AsyncProps };
|
|
6
6
|
type AsyncSelect = <Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: AsyncProps<Option, IsMulti, Group> & RefAttributes<Select<Option, IsMulti, Group>>) => ReactElement;
|
|
7
7
|
declare const AsyncSelect: AsyncSelect;
|
|
8
|
-
export { useAsync };
|
|
9
8
|
export default AsyncSelect;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import { type ReactNode } from 'react';
|
|
6
|
+
import { type CommonPropsAndClassName, type GroupBase } from '../../types';
|
|
7
|
+
export interface IndicatorsContainerProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
|
|
8
|
+
isDisabled: boolean;
|
|
9
|
+
/**
|
|
10
|
+
* The children to be rendered.
|
|
11
|
+
*/
|
|
12
|
+
children: ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* Props to be passed to the indicators container element.
|
|
15
|
+
*/
|
|
16
|
+
innerProps?: {};
|
|
17
|
+
}
|
|
18
|
+
export declare const IndicatorsContainer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: IndicatorsContainerProps<Option, IsMulti, Group>) => JSX.Element;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import { type ReactNode } from 'react';
|
|
6
|
+
import { type CommonPropsAndClassName, type GroupBase } from '../../types';
|
|
7
|
+
export interface ContainerProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
|
|
8
|
+
/**
|
|
9
|
+
* Whether the select is disabled.
|
|
10
|
+
*/
|
|
11
|
+
isDisabled: boolean;
|
|
12
|
+
isFocused: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* The children to be rendered.
|
|
15
|
+
*/
|
|
16
|
+
children: ReactNode;
|
|
17
|
+
/**
|
|
18
|
+
* Inner props to be passed down to the container.
|
|
19
|
+
*/
|
|
20
|
+
innerProps: {};
|
|
21
|
+
}
|
|
22
|
+
export declare const SelectContainer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ContainerProps<Option, IsMulti, Group>) => JSX.Element;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import { type ReactNode } from 'react';
|
|
6
|
+
import { type CommonPropsAndClassName, type GroupBase } from '../../types';
|
|
7
|
+
export interface ValueContainerProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
|
|
8
|
+
/**
|
|
9
|
+
* Props to be passed to the value container element.
|
|
10
|
+
*/
|
|
11
|
+
innerProps?: {};
|
|
12
|
+
/**
|
|
13
|
+
* The children to be rendered.
|
|
14
|
+
*/
|
|
15
|
+
children: ReactNode;
|
|
16
|
+
isDisabled: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Whether the select is compact.
|
|
19
|
+
*/
|
|
20
|
+
isCompact?: boolean;
|
|
21
|
+
}
|
|
22
|
+
export declare const ValueContainer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ValueContainerProps<Option, IsMulti, Group>) => JSX.Element;
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { type ReactElement, type RefAttributes } from 'react';
|
|
2
2
|
import Select from './select';
|
|
3
3
|
import type { GroupBase } from './types';
|
|
4
|
-
import
|
|
4
|
+
import { type CreatableAdditionalProps } from './use-creatable';
|
|
5
5
|
import { type StateManagerProps } from './use-state-manager';
|
|
6
6
|
export type CreatableProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = StateManagerProps<Option, IsMulti, Group> & CreatableAdditionalProps<Option, Group>;
|
|
7
7
|
type CreatableSelect = <Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: CreatableProps<Option, IsMulti, Group> & RefAttributes<Select<Option, IsMulti, Group>>) => ReactElement;
|
|
8
8
|
declare const CreatableSelect: CreatableSelect;
|
|
9
|
-
export { useCreatable };
|
|
10
9
|
export default CreatableSelect;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/react-select",
|
|
3
|
-
"version": "3.16.
|
|
3
|
+
"version": "3.16.1",
|
|
4
4
|
"description": "A forked version of react-select to only be used in atlaskit/select",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"atlaskit:src": "src/index.tsx",
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@atlaskit/ds-lib": "^7.0.0",
|
|
24
|
-
"@atlaskit/icon": "^
|
|
24
|
+
"@atlaskit/icon": "^35.0.0",
|
|
25
25
|
"@atlaskit/layering": "^3.7.0",
|
|
26
26
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
27
27
|
"@atlaskit/primitives": "^19.0.0",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"@af/accessibility-testing": "workspace:^",
|
|
43
43
|
"@atlaskit/checkbox": "^17.3.0",
|
|
44
44
|
"@atlaskit/form": "^15.5.0",
|
|
45
|
-
"@atlassian/feature-flags-test-utils": "^1.
|
|
45
|
+
"@atlassian/feature-flags-test-utils": "^1.1.0",
|
|
46
46
|
"@testing-library/react": "^16.3.0",
|
|
47
47
|
"@testing-library/user-event": "^14.4.3",
|
|
48
48
|
"jest-in-case": "^1.0.2"
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
._11c81d4k{font:var(--ds-font-body-large,normal 400 1pc/24px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
2
|
-
._zulp1b66{gap:var(--ds-space-050,4px)}
|
|
3
|
-
._16jlkb7n{flex-grow:1}
|
|
4
|
-
._18m915vq{overflow-y:hidden}
|
|
5
|
-
._1e0c11p5{display:grid}
|
|
6
|
-
._1e0c1txw{display:flex}
|
|
7
|
-
._1eim1xrj{direction:rtl}
|
|
8
|
-
._1n261g80{flex-wrap:wrap}
|
|
9
|
-
._1o9zidpf{flex-shrink:0}
|
|
10
|
-
._1o9zkb7n{flex-shrink:1}
|
|
11
|
-
._1q511b66{padding-block-start:var(--ds-space-050,4px)}
|
|
12
|
-
._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
|
|
13
|
-
._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
|
|
14
|
-
._1reo15vq{overflow-x:hidden}
|
|
15
|
-
._1wpz1fhb{align-self:stretch}
|
|
16
|
-
._4cvr1h6o{align-items:center}
|
|
17
|
-
._80om13gf{cursor:not-allowed}
|
|
18
|
-
._85i51b66{padding-block-end:var(--ds-space-050,4px)}
|
|
19
|
-
._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
|
|
20
|
-
._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
|
|
21
|
-
._8am5i4x0{-webkit-overflow-scrolling:touch}
|
|
22
|
-
._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
|
|
23
|
-
._i0dlf1ug{flex-basis:0%}
|
|
24
|
-
._kqswh2mm{position:relative}
|
|
25
|
-
._lcxv1rj4{pointer-events:all}
|
|
26
|
-
._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
|
|
27
|
-
._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
|
|
28
|
-
@media (min-width:30rem){._1tn2fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
._11c81d4k{font:var(--ds-font-body-large,normal 400 1pc/24px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
2
|
-
._zulp1b66{gap:var(--ds-space-050,4px)}
|
|
3
|
-
._16jlkb7n{flex-grow:1}
|
|
4
|
-
._18m915vq{overflow-y:hidden}
|
|
5
|
-
._1e0c11p5{display:grid}
|
|
6
|
-
._1e0c1txw{display:flex}
|
|
7
|
-
._1eim1xrj{direction:rtl}
|
|
8
|
-
._1n261g80{flex-wrap:wrap}
|
|
9
|
-
._1o9zidpf{flex-shrink:0}
|
|
10
|
-
._1o9zkb7n{flex-shrink:1}
|
|
11
|
-
._1q511b66{padding-block-start:var(--ds-space-050,4px)}
|
|
12
|
-
._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
|
|
13
|
-
._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
|
|
14
|
-
._1reo15vq{overflow-x:hidden}
|
|
15
|
-
._1wpz1fhb{align-self:stretch}
|
|
16
|
-
._4cvr1h6o{align-items:center}
|
|
17
|
-
._80om13gf{cursor:not-allowed}
|
|
18
|
-
._85i51b66{padding-block-end:var(--ds-space-050,4px)}
|
|
19
|
-
._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
|
|
20
|
-
._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
|
|
21
|
-
._8am5i4x0{-webkit-overflow-scrolling:touch}
|
|
22
|
-
._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
|
|
23
|
-
._i0dlf1ug{flex-basis:0%}
|
|
24
|
-
._kqswh2mm{position:relative}
|
|
25
|
-
._lcxv1rj4{pointer-events:all}
|
|
26
|
-
._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
|
|
27
|
-
._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
|
|
28
|
-
@media (min-width:30rem){._1tn2fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
._11c81d4k{font:var(--ds-font-body-large,normal 400 1pc/24px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
2
|
-
._zulp1b66{gap:var(--ds-space-050,4px)}
|
|
3
|
-
._16jlkb7n{flex-grow:1}
|
|
4
|
-
._18m915vq{overflow-y:hidden}
|
|
5
|
-
._1e0c11p5{display:grid}
|
|
6
|
-
._1e0c1txw{display:flex}
|
|
7
|
-
._1eim1xrj{direction:rtl}
|
|
8
|
-
._1n261g80{flex-wrap:wrap}
|
|
9
|
-
._1o9zidpf{flex-shrink:0}
|
|
10
|
-
._1o9zkb7n{flex-shrink:1}
|
|
11
|
-
._1q511b66{padding-block-start:var(--ds-space-050,4px)}
|
|
12
|
-
._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
|
|
13
|
-
._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
|
|
14
|
-
._1reo15vq{overflow-x:hidden}
|
|
15
|
-
._1wpz1fhb{align-self:stretch}
|
|
16
|
-
._4cvr1h6o{align-items:center}
|
|
17
|
-
._80om13gf{cursor:not-allowed}
|
|
18
|
-
._85i51b66{padding-block-end:var(--ds-space-050,4px)}
|
|
19
|
-
._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
|
|
20
|
-
._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
|
|
21
|
-
._8am5i4x0{-webkit-overflow-scrolling:touch}
|
|
22
|
-
._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
|
|
23
|
-
._i0dlf1ug{flex-basis:0%}
|
|
24
|
-
._kqswh2mm{position:relative}
|
|
25
|
-
._lcxv1rj4{pointer-events:all}
|
|
26
|
-
._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
|
|
27
|
-
._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
|
|
28
|
-
@media (min-width:30rem){._1tn2fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}}
|