@atlaskit/react-select 2.2.0 → 2.3.0
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 +23 -0
- package/dist/cjs/compiled/components/containers.compiled.css +26 -0
- package/dist/cjs/compiled/components/containers.js +119 -0
- package/dist/cjs/compiled/components/control.compiled.css +51 -0
- package/dist/cjs/compiled/components/control.js +66 -0
- package/dist/cjs/compiled/components/group.compiled.css +12 -0
- package/dist/cjs/compiled/components/group.js +81 -0
- package/dist/cjs/compiled/components/indicators.compiled.css +24 -0
- package/dist/cjs/compiled/components/indicators.js +157 -0
- package/dist/cjs/compiled/components/input.compiled.css +49 -0
- package/dist/cjs/compiled/components/input.js +69 -0
- package/dist/cjs/compiled/components/internal/a11y-text.compiled.css +15 -0
- package/dist/cjs/compiled/components/internal/a11y-text.js +23 -0
- package/dist/cjs/compiled/components/internal/dummy-input.compiled.css +17 -0
- package/dist/cjs/compiled/components/internal/dummy-input.js +30 -0
- package/dist/cjs/compiled/components/internal/required-input.compiled.css +8 -0
- package/dist/cjs/compiled/components/internal/required-input.js +34 -0
- package/dist/cjs/compiled/components/live-region.js +177 -0
- package/dist/cjs/compiled/components/menu.compiled.css +19 -0
- package/dist/cjs/compiled/components/menu.js +491 -0
- package/dist/cjs/compiled/components/multi-value.compiled.css +56 -0
- package/dist/cjs/compiled/components/multi-value.js +199 -0
- package/dist/cjs/compiled/components/option.compiled.css +22 -0
- package/dist/cjs/compiled/components/option.js +57 -0
- package/dist/cjs/compiled/components/placeholder.compiled.css +7 -0
- package/dist/cjs/compiled/components/placeholder.js +45 -0
- package/dist/cjs/compiled/components/single-value.compiled.css +13 -0
- package/dist/cjs/compiled/components/single-value.js +46 -0
- package/dist/cjs/components/containers.js +12 -72
- package/dist/cjs/components/control.js +11 -96
- package/dist/cjs/components/group.js +15 -53
- package/dist/cjs/components/indicators.js +15 -107
- package/dist/cjs/components/input.js +12 -81
- package/dist/cjs/components/internal/a11y-text.js +6 -25
- package/dist/cjs/components/internal/dummy-input.js +8 -36
- package/dist/cjs/components/internal/notify-open-layer-observer.js +1 -0
- package/dist/cjs/components/internal/required-input.js +7 -31
- package/dist/cjs/components/internal/scroll-manager.js +19 -17
- package/dist/cjs/components/live-region.js +6 -164
- package/dist/cjs/components/menu.js +26 -181
- package/dist/cjs/components/multi-value.js +21 -197
- package/dist/cjs/components/option.js +11 -68
- package/dist/cjs/components/placeholder.js +11 -20
- package/dist/cjs/components/single-value.js +11 -26
- package/dist/cjs/emotion/components/containers.js +113 -0
- package/dist/cjs/emotion/components/control.js +112 -0
- package/dist/cjs/emotion/components/group.js +72 -0
- package/dist/cjs/emotion/components/indicators.js +138 -0
- package/dist/cjs/emotion/components/input.js +94 -0
- package/dist/cjs/emotion/components/internal/a11y-text.js +37 -0
- package/dist/cjs/emotion/components/internal/dummy-input.js +45 -0
- package/dist/cjs/emotion/components/internal/required-input.js +45 -0
- package/dist/cjs/emotion/components/live-region.js +182 -0
- package/dist/cjs/emotion/components/menu.js +456 -0
- package/dist/cjs/emotion/components/multi-value.js +224 -0
- package/dist/cjs/emotion/components/option.js +84 -0
- package/dist/cjs/emotion/components/placeholder.js +36 -0
- package/dist/cjs/emotion/components/single-value.js +42 -0
- package/dist/cjs/utils.js +2 -1
- package/dist/es2019/compiled/components/containers.compiled.css +26 -0
- package/dist/es2019/compiled/components/containers.js +115 -0
- package/dist/es2019/compiled/components/control.compiled.css +51 -0
- package/dist/es2019/compiled/components/control.js +58 -0
- package/dist/es2019/compiled/components/group.compiled.css +12 -0
- package/dist/es2019/compiled/components/group.js +72 -0
- package/dist/es2019/compiled/components/indicators.compiled.css +24 -0
- package/dist/es2019/compiled/components/indicators.js +144 -0
- package/dist/es2019/compiled/components/input.compiled.css +49 -0
- package/dist/es2019/compiled/components/input.js +59 -0
- package/dist/es2019/compiled/components/internal/a11y-text.compiled.css +15 -0
- package/dist/es2019/compiled/components/internal/a11y-text.js +11 -0
- package/dist/es2019/compiled/components/internal/dummy-input.compiled.css +17 -0
- package/dist/es2019/compiled/components/internal/dummy-input.js +19 -0
- package/dist/es2019/compiled/components/internal/required-input.compiled.css +8 -0
- package/dist/es2019/compiled/components/internal/required-input.js +23 -0
- package/dist/es2019/compiled/components/live-region.js +171 -0
- package/dist/es2019/compiled/components/menu.compiled.css +19 -0
- package/dist/es2019/compiled/components/menu.js +478 -0
- package/dist/es2019/compiled/components/multi-value.compiled.css +56 -0
- package/dist/es2019/compiled/components/multi-value.js +190 -0
- package/dist/es2019/compiled/components/option.compiled.css +22 -0
- package/dist/es2019/compiled/components/option.js +48 -0
- package/dist/es2019/compiled/components/placeholder.compiled.css +7 -0
- package/dist/es2019/compiled/components/placeholder.js +36 -0
- package/dist/es2019/compiled/components/single-value.compiled.css +13 -0
- package/dist/es2019/compiled/components/single-value.js +37 -0
- package/dist/es2019/components/containers.js +10 -87
- package/dist/es2019/components/control.js +8 -103
- package/dist/es2019/components/group.js +9 -54
- package/dist/es2019/components/indicators.js +11 -113
- package/dist/es2019/components/input.js +7 -83
- package/dist/es2019/components/internal/a11y-text.js +6 -26
- package/dist/es2019/components/internal/dummy-input.js +7 -36
- package/dist/es2019/components/internal/notify-open-layer-observer.js +1 -0
- package/dist/es2019/components/internal/required-input.js +6 -32
- package/dist/es2019/components/internal/scroll-manager.js +16 -16
- package/dist/es2019/components/live-region.js +5 -168
- package/dist/es2019/components/menu.js +14 -192
- package/dist/es2019/components/multi-value.js +12 -216
- package/dist/es2019/components/option.js +7 -75
- package/dist/es2019/components/placeholder.js +7 -25
- package/dist/es2019/components/single-value.js +7 -31
- package/dist/es2019/emotion/components/containers.js +110 -0
- package/dist/es2019/emotion/components/control.js +108 -0
- package/dist/es2019/emotion/components/group.js +60 -0
- package/dist/es2019/emotion/components/indicators.js +129 -0
- package/dist/es2019/emotion/components/input.js +87 -0
- package/dist/es2019/emotion/components/internal/a11y-text.js +28 -0
- package/dist/es2019/emotion/components/internal/dummy-input.js +38 -0
- package/dist/es2019/emotion/components/internal/required-input.js +36 -0
- package/dist/es2019/emotion/components/live-region.js +180 -0
- package/dist/es2019/emotion/components/menu.js +452 -0
- package/dist/es2019/emotion/components/multi-value.js +228 -0
- package/dist/es2019/emotion/components/option.js +79 -0
- package/dist/es2019/emotion/components/placeholder.js +29 -0
- package/dist/es2019/emotion/components/single-value.js +35 -0
- package/dist/es2019/utils.js +1 -0
- package/dist/esm/compiled/components/containers.compiled.css +26 -0
- package/dist/esm/compiled/components/containers.js +110 -0
- package/dist/esm/compiled/components/control.compiled.css +51 -0
- package/dist/esm/compiled/components/control.js +57 -0
- package/dist/esm/compiled/components/group.compiled.css +12 -0
- package/dist/esm/compiled/components/group.js +71 -0
- package/dist/esm/compiled/components/indicators.compiled.css +24 -0
- package/dist/esm/compiled/components/indicators.js +148 -0
- package/dist/esm/compiled/components/input.compiled.css +49 -0
- package/dist/esm/compiled/components/input.js +59 -0
- package/dist/esm/compiled/components/internal/a11y-text.compiled.css +15 -0
- package/dist/esm/compiled/components/internal/a11y-text.js +13 -0
- package/dist/esm/compiled/components/internal/dummy-input.compiled.css +17 -0
- package/dist/esm/compiled/components/internal/dummy-input.js +20 -0
- package/dist/esm/compiled/components/internal/required-input.compiled.css +8 -0
- package/dist/esm/compiled/components/internal/required-input.js +24 -0
- package/dist/esm/compiled/components/live-region.js +168 -0
- package/dist/esm/compiled/components/menu.compiled.css +19 -0
- package/dist/esm/compiled/components/menu.js +485 -0
- package/dist/esm/compiled/components/multi-value.compiled.css +56 -0
- package/dist/esm/compiled/components/multi-value.js +187 -0
- package/dist/esm/compiled/components/option.compiled.css +22 -0
- package/dist/esm/compiled/components/option.js +47 -0
- package/dist/esm/compiled/components/placeholder.compiled.css +7 -0
- package/dist/esm/compiled/components/placeholder.js +35 -0
- package/dist/esm/compiled/components/single-value.compiled.css +13 -0
- package/dist/esm/compiled/components/single-value.js +36 -0
- package/dist/esm/components/containers.js +12 -73
- package/dist/esm/components/control.js +8 -97
- package/dist/esm/components/group.js +11 -54
- package/dist/esm/components/indicators.js +15 -109
- package/dist/esm/components/input.js +8 -83
- package/dist/esm/components/internal/a11y-text.js +6 -26
- package/dist/esm/components/internal/dummy-input.js +7 -37
- package/dist/esm/components/internal/notify-open-layer-observer.js +1 -0
- package/dist/esm/components/internal/required-input.js +7 -32
- package/dist/esm/components/internal/scroll-manager.js +16 -16
- package/dist/esm/components/live-region.js +5 -163
- package/dist/esm/components/menu.js +24 -182
- package/dist/esm/components/multi-value.js +17 -199
- package/dist/esm/components/option.js +8 -69
- package/dist/esm/components/placeholder.js +8 -21
- package/dist/esm/components/single-value.js +8 -27
- package/dist/esm/emotion/components/containers.js +106 -0
- package/dist/esm/emotion/components/control.js +104 -0
- package/dist/esm/emotion/components/group.js +66 -0
- package/dist/esm/emotion/components/indicators.js +133 -0
- package/dist/esm/emotion/components/input.js +90 -0
- package/dist/esm/emotion/components/internal/a11y-text.js +30 -0
- package/dist/esm/emotion/components/internal/dummy-input.js +39 -0
- package/dist/esm/emotion/components/internal/required-input.js +37 -0
- package/dist/esm/emotion/components/live-region.js +177 -0
- package/dist/esm/emotion/components/menu.js +456 -0
- package/dist/esm/emotion/components/multi-value.js +218 -0
- package/dist/esm/emotion/components/option.js +76 -0
- package/dist/esm/emotion/components/placeholder.js +28 -0
- package/dist/esm/emotion/components/single-value.js +34 -0
- package/dist/esm/utils.js +2 -1
- package/dist/types/compiled/components/containers.d.ts +53 -0
- package/dist/types/compiled/components/control.d.ts +41 -0
- package/dist/types/compiled/components/group.d.ts +54 -0
- package/dist/types/compiled/components/indicators.d.ts +72 -0
- package/dist/types/compiled/components/input.d.ts +36 -0
- package/dist/types/compiled/components/internal/a11y-text.d.ts +3 -0
- package/dist/types/compiled/components/internal/dummy-input.d.ts +8 -0
- package/dist/types/compiled/components/internal/required-input.d.ts +10 -0
- package/dist/types/compiled/components/live-region.d.ts +19 -0
- package/dist/types/compiled/components/menu.d.ts +115 -0
- package/dist/types/compiled/components/multi-value.d.ts +57 -0
- package/dist/types/compiled/components/option.d.ts +48 -0
- package/dist/types/compiled/components/placeholder.d.ts +21 -0
- package/dist/types/compiled/components/single-value.d.ts +27 -0
- package/dist/types/components/containers.d.ts +6 -11
- package/dist/types/components/control.d.ts +4 -9
- package/dist/types/components/group.d.ts +8 -10
- package/dist/types/components/index.d.ts +21 -21
- package/dist/types/components/indicators.d.ts +7 -12
- package/dist/types/components/input.d.ts +3 -8
- package/dist/types/components/internal/a11y-text.d.ts +2 -7
- package/dist/types/components/internal/dummy-input.d.ts +3 -8
- package/dist/types/components/internal/required-input.d.ts +0 -4
- package/dist/types/components/internal/scroll-manager.d.ts +2 -7
- package/dist/types/components/live-region.d.ts +2 -8
- package/dist/types/components/menu.d.ts +10 -15
- package/dist/types/components/multi-value.d.ts +19 -13
- package/dist/types/components/option.d.ts +3 -8
- package/dist/types/components/placeholder.d.ts +3 -8
- package/dist/types/components/single-value.d.ts +3 -8
- package/dist/types/emotion/components/containers.d.ts +54 -0
- package/dist/types/emotion/components/control.d.ts +42 -0
- package/dist/types/emotion/components/group.d.ts +52 -0
- package/dist/types/emotion/components/indicators.d.ts +73 -0
- package/dist/types/emotion/components/input.d.ts +37 -0
- package/dist/types/emotion/components/internal/a11y-text.d.ts +8 -0
- package/dist/types/emotion/components/internal/dummy-input.d.ts +9 -0
- package/dist/types/emotion/components/internal/required-input.d.ts +10 -0
- package/dist/types/emotion/components/live-region.d.ts +25 -0
- package/dist/types/emotion/components/menu.d.ts +116 -0
- package/dist/types/emotion/components/multi-value.d.ts +47 -0
- package/dist/types/emotion/components/option.d.ts +49 -0
- package/dist/types/emotion/components/placeholder.d.ts +22 -0
- package/dist/types/emotion/components/single-value.d.ts +28 -0
- package/dist/types/select.d.ts +21 -21
- package/dist/types/types.d.ts +3 -0
- package/dist/types-ts4.5/compiled/components/containers.d.ts +53 -0
- package/dist/types-ts4.5/compiled/components/control.d.ts +41 -0
- package/dist/types-ts4.5/compiled/components/group.d.ts +54 -0
- package/dist/types-ts4.5/compiled/components/indicators.d.ts +72 -0
- package/dist/types-ts4.5/compiled/components/input.d.ts +36 -0
- package/dist/types-ts4.5/compiled/components/internal/a11y-text.d.ts +3 -0
- package/dist/types-ts4.5/compiled/components/internal/dummy-input.d.ts +8 -0
- package/dist/types-ts4.5/compiled/components/internal/required-input.d.ts +10 -0
- package/dist/types-ts4.5/compiled/components/live-region.d.ts +19 -0
- package/dist/types-ts4.5/compiled/components/menu.d.ts +115 -0
- package/dist/types-ts4.5/compiled/components/multi-value.d.ts +57 -0
- package/dist/types-ts4.5/compiled/components/option.d.ts +48 -0
- package/dist/types-ts4.5/compiled/components/placeholder.d.ts +21 -0
- package/dist/types-ts4.5/compiled/components/single-value.d.ts +27 -0
- package/dist/types-ts4.5/components/containers.d.ts +6 -11
- package/dist/types-ts4.5/components/control.d.ts +4 -9
- package/dist/types-ts4.5/components/group.d.ts +8 -10
- package/dist/types-ts4.5/components/index.d.ts +21 -21
- package/dist/types-ts4.5/components/indicators.d.ts +7 -12
- package/dist/types-ts4.5/components/input.d.ts +3 -8
- package/dist/types-ts4.5/components/internal/a11y-text.d.ts +2 -7
- package/dist/types-ts4.5/components/internal/dummy-input.d.ts +3 -8
- package/dist/types-ts4.5/components/internal/required-input.d.ts +0 -4
- package/dist/types-ts4.5/components/internal/scroll-manager.d.ts +2 -7
- package/dist/types-ts4.5/components/live-region.d.ts +2 -8
- package/dist/types-ts4.5/components/menu.d.ts +10 -15
- package/dist/types-ts4.5/components/multi-value.d.ts +19 -13
- package/dist/types-ts4.5/components/option.d.ts +3 -8
- package/dist/types-ts4.5/components/placeholder.d.ts +3 -8
- package/dist/types-ts4.5/components/single-value.d.ts +3 -8
- package/dist/types-ts4.5/emotion/components/containers.d.ts +54 -0
- package/dist/types-ts4.5/emotion/components/control.d.ts +42 -0
- package/dist/types-ts4.5/emotion/components/group.d.ts +52 -0
- package/dist/types-ts4.5/emotion/components/indicators.d.ts +73 -0
- package/dist/types-ts4.5/emotion/components/input.d.ts +37 -0
- package/dist/types-ts4.5/emotion/components/internal/a11y-text.d.ts +8 -0
- package/dist/types-ts4.5/emotion/components/internal/dummy-input.d.ts +9 -0
- package/dist/types-ts4.5/emotion/components/internal/required-input.d.ts +10 -0
- package/dist/types-ts4.5/emotion/components/live-region.d.ts +25 -0
- package/dist/types-ts4.5/emotion/components/menu.d.ts +116 -0
- package/dist/types-ts4.5/emotion/components/multi-value.d.ts +47 -0
- package/dist/types-ts4.5/emotion/components/option.d.ts +49 -0
- package/dist/types-ts4.5/emotion/components/placeholder.d.ts +22 -0
- package/dist/types-ts4.5/emotion/components/single-value.d.ts +28 -0
- package/dist/types-ts4.5/select.d.ts +21 -21
- package/dist/types-ts4.5/types.d.ts +3 -0
- package/package.json +10 -2
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
/* group.tsx generated by @compiled/babel-plugin v0.36.1 */
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
4
|
+
var _excluded = ["data"];
|
|
5
|
+
import "./group.compiled.css";
|
|
6
|
+
import * as React from 'react';
|
|
7
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
8
|
+
import { cx } from '@compiled/react';
|
|
9
|
+
import { cleanCommonProps, getStyleProps } from '../../utils';
|
|
10
|
+
var styles = {
|
|
11
|
+
root: "_n3tdu2gc _ca0qu2gc"
|
|
12
|
+
};
|
|
13
|
+
export var groupCSS = function groupCSS() {
|
|
14
|
+
return {};
|
|
15
|
+
};
|
|
16
|
+
var Group = function Group(props) {
|
|
17
|
+
var children = props.children,
|
|
18
|
+
builtinCX = props.cx,
|
|
19
|
+
getStyles = props.getStyles,
|
|
20
|
+
getClassNames = props.getClassNames,
|
|
21
|
+
Heading = props.Heading,
|
|
22
|
+
headingProps = props.headingProps,
|
|
23
|
+
innerProps = props.innerProps,
|
|
24
|
+
label = props.label,
|
|
25
|
+
selectProps = props.selectProps,
|
|
26
|
+
xcss = props.xcss;
|
|
27
|
+
var _getStyleProps = getStyleProps(props, 'group', {
|
|
28
|
+
group: true
|
|
29
|
+
}),
|
|
30
|
+
css = _getStyleProps.css,
|
|
31
|
+
className = _getStyleProps.className;
|
|
32
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
33
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
34
|
+
style: css
|
|
35
|
+
}, innerProps, {
|
|
36
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
|
|
37
|
+
className: ax([styles.root, cx(className, xcss, innerProps === null || innerProps === void 0 ? void 0 : innerProps.className)])
|
|
38
|
+
}), /*#__PURE__*/React.createElement(Heading, _extends({}, headingProps, {
|
|
39
|
+
selectProps: selectProps,
|
|
40
|
+
getStyles: getStyles,
|
|
41
|
+
getClassNames: getClassNames,
|
|
42
|
+
cx: builtinCX
|
|
43
|
+
}), label), /*#__PURE__*/React.createElement("div", null, children));
|
|
44
|
+
};
|
|
45
|
+
var headingStyles = null;
|
|
46
|
+
export var groupHeadingCSS = function groupHeadingCSS() {
|
|
47
|
+
return {};
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
51
|
+
export var GroupHeading = function GroupHeading(props) {
|
|
52
|
+
var xcss = props.xcss;
|
|
53
|
+
var _cleanCommonProps = cleanCommonProps(props),
|
|
54
|
+
data = _cleanCommonProps.data,
|
|
55
|
+
innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded);
|
|
56
|
+
var _getStyleProps2 = getStyleProps(props, 'groupHeading', {
|
|
57
|
+
'group-heading': true
|
|
58
|
+
}),
|
|
59
|
+
css = _getStyleProps2.css,
|
|
60
|
+
className = _getStyleProps2.className;
|
|
61
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
62
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
|
|
63
|
+
className: ax(["_11c81o8v _1e0c1ule _syaz1gjq _80om73ad _k48pmoej _jqf6dpkn _6rthpd1z _y4tiutpp _bozgutpp _1p1dglyw", cx(className, xcss)])
|
|
64
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
65
|
+
,
|
|
66
|
+
style: css
|
|
67
|
+
}, innerProps));
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
71
|
+
export default Group;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
|
|
2
|
+
._kkk2n7od{all:unset}
|
|
3
|
+
._v564vrg3{transition:color .15s}._12ji1r31{outline-color:currentColor}
|
|
4
|
+
._12y31o36{outline-width:medium}
|
|
5
|
+
._19bv12x7{padding-left:var(--ds-space-075,6px)}
|
|
6
|
+
._19bvu2gc{padding-left:var(--ds-space-100,8px)}
|
|
7
|
+
._19bvv77o{padding-left:var(--ds-space-025,2px)}
|
|
8
|
+
._1bah1h6o{justify-content:center}
|
|
9
|
+
._1e0c1txw{display:flex}
|
|
10
|
+
._1qu219ly{outline-style:revert}
|
|
11
|
+
._4cvr1h6o{align-items:center}
|
|
12
|
+
._ca0q12x7{padding-top:var(--ds-space-075,6px)}
|
|
13
|
+
._ca0qidpf{padding-top:0}
|
|
14
|
+
._ca0qv77o{padding-top:var(--ds-space-025,2px)}
|
|
15
|
+
._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
|
|
16
|
+
._n3tdidpf{padding-bottom:0}
|
|
17
|
+
._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
|
|
18
|
+
._syaz131l{color:var(--ds-text-subtlest,#626f86)}
|
|
19
|
+
._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
|
|
20
|
+
._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
|
|
21
|
+
._u5f312x7{padding-right:var(--ds-space-075,6px)}
|
|
22
|
+
._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
|
|
23
|
+
._u5f3v77o{padding-right:var(--ds-space-025,2px)}
|
|
24
|
+
._30l31gjq:hover{color:var(--ds-text-subtle,#44546f)}
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
/* indicators.tsx generated by @compiled/babel-plugin v0.36.1 */
|
|
2
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
5
|
+
var _excluded = ["innerProps", "isRtl", "size", "isCompact", "xcss"];
|
|
6
|
+
import "./indicators.compiled.css";
|
|
7
|
+
import * as React from 'react';
|
|
8
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
9
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
10
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
11
|
+
import { cx } from '@compiled/react';
|
|
12
|
+
import DownIcon from '@atlaskit/icon/utility/migration/chevron-down';
|
|
13
|
+
import CrossIcon from '@atlaskit/icon/utility/migration/cross-circle--select-clear';
|
|
14
|
+
import { Inline, Pressable } from '@atlaskit/primitives/compiled';
|
|
15
|
+
import Spinner from '@atlaskit/spinner';
|
|
16
|
+
import { getStyleProps } from '../../utils';
|
|
17
|
+
|
|
18
|
+
// ==============================
|
|
19
|
+
// Dropdown & Clear Icons
|
|
20
|
+
// ==============================
|
|
21
|
+
|
|
22
|
+
var iconContainerStyles = {
|
|
23
|
+
root: "_kkk2n7od _12ji1r31 _1qu219ly _12y31o36 _1e0c1txw _4cvr1h6o _1bah1h6o _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o"
|
|
24
|
+
};
|
|
25
|
+
var dropdownWrapperStyles = {
|
|
26
|
+
root: "_ca0q12x7 _u5f312x7 _n3td12x7 _19bv12x7"
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
// ==============================
|
|
30
|
+
// Dropdown & Clear Buttons
|
|
31
|
+
// ==============================
|
|
32
|
+
|
|
33
|
+
var dropdownStyles = {
|
|
34
|
+
default: "_v564vrg3 _1e0c1txw _syaz1gjq _ca0q12x7 _u5f3v77o _n3td12x7 _19bvv77o _30l31gjq",
|
|
35
|
+
compact: "_ca0qidpf _n3tdidpf",
|
|
36
|
+
disabled: "_syaz1lh4"
|
|
37
|
+
};
|
|
38
|
+
export var dropdownIndicatorCSS = function dropdownIndicatorCSS() {
|
|
39
|
+
return {};
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
43
|
+
export var DropdownIndicator = function DropdownIndicator(props) {
|
|
44
|
+
var innerProps = props.innerProps,
|
|
45
|
+
children = props.children,
|
|
46
|
+
isDisabled = props.isDisabled,
|
|
47
|
+
isCompact = props.isCompact,
|
|
48
|
+
xcss = props.xcss;
|
|
49
|
+
var _getStyleProps = getStyleProps(props, 'dropdownIndicator', {
|
|
50
|
+
indicator: true,
|
|
51
|
+
'dropdown-indicator': true
|
|
52
|
+
}),
|
|
53
|
+
css = _getStyleProps.css,
|
|
54
|
+
className = _getStyleProps.className;
|
|
55
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
56
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
57
|
+
style: css
|
|
58
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
|
|
59
|
+
,
|
|
60
|
+
className: ax([dropdownStyles.default, isDisabled && dropdownStyles.disabled, isCompact && dropdownStyles.compact, cx(className, xcss)])
|
|
61
|
+
}, innerProps), children ? children : /*#__PURE__*/React.createElement(Inline, {
|
|
62
|
+
as: "span",
|
|
63
|
+
xcss: dropdownWrapperStyles.root
|
|
64
|
+
}, /*#__PURE__*/React.createElement(DownIcon, {
|
|
65
|
+
color: "currentColor",
|
|
66
|
+
label: "open",
|
|
67
|
+
LEGACY_margin: "var(--ds-space-negative-075, -0.375rem)"
|
|
68
|
+
})));
|
|
69
|
+
};
|
|
70
|
+
export var clearIndicatorCSS = function clearIndicatorCSS() {
|
|
71
|
+
return {};
|
|
72
|
+
};
|
|
73
|
+
var clearIndicatorStyles = {
|
|
74
|
+
default: "_v564vrg3 _1e0c1txw _syaz131l _ca0q12x7 _u5f3v77o _n3td12x7 _19bvv77o _30l31gjq",
|
|
75
|
+
compact: "_ca0qidpf _n3tdidpf"
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
79
|
+
export var ClearIndicator = function ClearIndicator(props) {
|
|
80
|
+
var innerProps = props.innerProps,
|
|
81
|
+
_props$clearControlLa = props.clearControlLabel,
|
|
82
|
+
clearControlLabel = _props$clearControlLa === void 0 ? 'clear' : _props$clearControlLa,
|
|
83
|
+
isCompact = props.isCompact,
|
|
84
|
+
xcss = props.xcss;
|
|
85
|
+
var _getStyleProps2 = getStyleProps(props, 'clearIndicator', {
|
|
86
|
+
indicator: true,
|
|
87
|
+
'clear-indicator': true
|
|
88
|
+
}),
|
|
89
|
+
css = _getStyleProps2.css,
|
|
90
|
+
className = _getStyleProps2.className;
|
|
91
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
92
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
93
|
+
style: css
|
|
94
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
|
|
95
|
+
,
|
|
96
|
+
className: ax([clearIndicatorStyles.default, isCompact && clearIndicatorStyles.compact, cx(className, xcss)])
|
|
97
|
+
}, innerProps), /*#__PURE__*/React.createElement(Pressable, {
|
|
98
|
+
xcss: iconContainerStyles.root,
|
|
99
|
+
tabIndex: -1,
|
|
100
|
+
"aria-label": clearControlLabel
|
|
101
|
+
}, /*#__PURE__*/React.createElement(CrossIcon, {
|
|
102
|
+
label: "",
|
|
103
|
+
color: "currentColor",
|
|
104
|
+
LEGACY_size: "small",
|
|
105
|
+
LEGACY_margin: "var(--ds-space-negative-025, -0.125rem)"
|
|
106
|
+
})));
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
// ==============================
|
|
110
|
+
// Loading
|
|
111
|
+
// ==============================
|
|
112
|
+
|
|
113
|
+
export var loadingIndicatorCSS = function loadingIndicatorCSS() {
|
|
114
|
+
return {};
|
|
115
|
+
};
|
|
116
|
+
var loadingIndicatorStyles = {
|
|
117
|
+
default: "_ca0q12x7 _u5f3u2gc _n3td12x7 _19bvu2gc",
|
|
118
|
+
compact: "_ca0qidpf _n3tdidpf"
|
|
119
|
+
};
|
|
120
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
121
|
+
export var LoadingIndicator = function LoadingIndicator(_ref) {
|
|
122
|
+
var innerProps = _ref.innerProps,
|
|
123
|
+
isRtl = _ref.isRtl,
|
|
124
|
+
_ref$size = _ref.size,
|
|
125
|
+
size = _ref$size === void 0 ? 4 : _ref$size,
|
|
126
|
+
isCompact = _ref.isCompact,
|
|
127
|
+
xcss = _ref.xcss,
|
|
128
|
+
restProps = _objectWithoutProperties(_ref, _excluded);
|
|
129
|
+
var _getStyleProps3 = getStyleProps(_objectSpread(_objectSpread({}, restProps), {}, {
|
|
130
|
+
innerProps: innerProps,
|
|
131
|
+
isRtl: isRtl,
|
|
132
|
+
size: size
|
|
133
|
+
}), 'loadingIndicator', {
|
|
134
|
+
indicator: true,
|
|
135
|
+
'loading-indicator': true
|
|
136
|
+
}),
|
|
137
|
+
css = _getStyleProps3.css,
|
|
138
|
+
className = _getStyleProps3.className;
|
|
139
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
140
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
141
|
+
style: css
|
|
142
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
|
|
143
|
+
,
|
|
144
|
+
className: ax([loadingIndicatorStyles.default, isCompact && loadingIndicatorStyles.compact, cx(className, xcss)])
|
|
145
|
+
}, innerProps), /*#__PURE__*/React.createElement(Spinner, {
|
|
146
|
+
size: "small"
|
|
147
|
+
}));
|
|
148
|
+
};
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
._11c81kw7{font:inherit}
|
|
2
|
+
._11q7idpf{background:0}
|
|
3
|
+
._19itidpf{border:0}
|
|
4
|
+
._1h9u1kw7:after{font:inherit}
|
|
5
|
+
._ckog1yjy:after{grid-area:1/2}
|
|
6
|
+
._eq43idpf:after{border:0}
|
|
7
|
+
._nd5l1sux{grid-area:1/1/2/3}
|
|
8
|
+
._nd5l1yjy{grid-area:1/2}
|
|
9
|
+
._195gv77o{margin-inline:var(--ds-space-025,2px)}
|
|
10
|
+
._1mouv77o{margin-block:var(--ds-space-025,2px)}
|
|
11
|
+
._1rjcv77o{padding-block:var(--ds-space-025,2px)}
|
|
12
|
+
._12ji1r31{outline-color:currentColor}
|
|
13
|
+
._12y3idpf{outline-width:0}
|
|
14
|
+
._16jlkb7n{flex-grow:1}
|
|
15
|
+
._18u0idpf{margin-left:0}
|
|
16
|
+
._19bvidpf{padding-left:0}
|
|
17
|
+
._19pkidpf{margin-top:0}
|
|
18
|
+
._1av2idpf:after{margin-right:0}
|
|
19
|
+
._1bsb1osq{width:100%}
|
|
20
|
+
._1doyidpf:after{margin-bottom:0}
|
|
21
|
+
._1e0c1n7u{display:inline-grid}
|
|
22
|
+
._1k96idpf:after{padding-left:0}
|
|
23
|
+
._1nn4glyw:after{outline-style:none}
|
|
24
|
+
._1o9zkb7n{flex-shrink:1}
|
|
25
|
+
._1qjlqvpr:after{white-space:pre}
|
|
26
|
+
._1qu2glyw{outline-style:none}
|
|
27
|
+
._1recidpf:after{padding-right:0}
|
|
28
|
+
._1rzeidpf:after{outline-width:0}
|
|
29
|
+
._1ul9yh40{min-width:2px}
|
|
30
|
+
._1x651r31:after{outline-color:currentColor}
|
|
31
|
+
._1yd8yh40:after{min-width:2px}
|
|
32
|
+
._2hwxidpf{margin-right:0}
|
|
33
|
+
._3um015vq{visibility:hidden}
|
|
34
|
+
._70xridpf:after{padding-bottom:0}
|
|
35
|
+
._aetr11ps:after{content:attr(data-value) " "}
|
|
36
|
+
._ca0qidpf{padding-top:0}
|
|
37
|
+
._i0dl1wug{flex-basis:auto}
|
|
38
|
+
._j8d6idpf:after{margin-top:0}
|
|
39
|
+
._n3tdidpf{padding-bottom:0}
|
|
40
|
+
._otyridpf{margin-bottom:0}
|
|
41
|
+
._pfztidpf:after{margin-left:0}
|
|
42
|
+
._syaz1fxt{color:var(--ds-text,#172b4d)}
|
|
43
|
+
._syaz1kw7{color:inherit}
|
|
44
|
+
._tzy4idpf{opacity:0}
|
|
45
|
+
._tzy4kb7n{opacity:1}
|
|
46
|
+
._u5f3idpf{padding-right:0}
|
|
47
|
+
._uoe3idpf:after{padding-top:0}
|
|
48
|
+
._uy7x15vq:after{visibility:hidden}
|
|
49
|
+
._yv0e12qd{grid-template-columns:0 min-content}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
/* input.tsx generated by @compiled/babel-plugin v0.36.1 */
|
|
2
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
3
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
|
+
var _excluded = ["innerRef", "isDisabled", "isHidden", "inputClassName", "testId"];
|
|
5
|
+
import "./input.compiled.css";
|
|
6
|
+
import * as React from 'react';
|
|
7
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
8
|
+
import { cx } from '@compiled/react';
|
|
9
|
+
import { cleanCommonProps, getStyleProps } from '../../utils';
|
|
10
|
+
export var inputCSS = function inputCSS() {
|
|
11
|
+
return {};
|
|
12
|
+
};
|
|
13
|
+
var inputStyles = {
|
|
14
|
+
root: "_16jlkb7n _1o9zkb7n _i0dl1wug _nd5l1sux _1mouv77o _195gv77o _1rjcv77o _1e0c1n7u _yv0e12qd _syaz1fxt _j8d6idpf _1av2idpf _1doyidpf _pfztidpf _uoe3idpf _1recidpf _70xridpf _1k96idpf _eq43idpf _1h9u1kw7 _ckog1yjy _1x651r31 _1nn4glyw _1rzeidpf _1yd8yh40 _aetr11ps _uy7x15vq _1qjlqvpr",
|
|
15
|
+
disabled: "_3um015vq"
|
|
16
|
+
};
|
|
17
|
+
var nativeInnputStyles = null;
|
|
18
|
+
var hidden = null;
|
|
19
|
+
var Input = function Input(props) {
|
|
20
|
+
var builtinCX = props.cx,
|
|
21
|
+
value = props.value,
|
|
22
|
+
xcss = props.xcss;
|
|
23
|
+
var _cleanCommonProps = cleanCommonProps(props),
|
|
24
|
+
innerRef = _cleanCommonProps.innerRef,
|
|
25
|
+
isDisabled = _cleanCommonProps.isDisabled,
|
|
26
|
+
isHidden = _cleanCommonProps.isHidden,
|
|
27
|
+
inputClassName = _cleanCommonProps.inputClassName,
|
|
28
|
+
testId = _cleanCommonProps.testId,
|
|
29
|
+
innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded);
|
|
30
|
+
var dataId = testId ? "".concat(testId, "-select--input") : null;
|
|
31
|
+
var _getStyleProps = getStyleProps(props, 'input', {
|
|
32
|
+
'input-container': true
|
|
33
|
+
}),
|
|
34
|
+
css = _getStyleProps.css,
|
|
35
|
+
className = _getStyleProps.className;
|
|
36
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
37
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
38
|
+
style: css
|
|
39
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
|
|
40
|
+
,
|
|
41
|
+
className: ax([inputStyles.root, isDisabled && inputStyles.disabled, cx(className, xcss)]),
|
|
42
|
+
"data-value": value || '',
|
|
43
|
+
"data-testid": dataId && "".concat(dataId, "-container")
|
|
44
|
+
}, /*#__PURE__*/React.createElement("input", _extends({
|
|
45
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
|
|
46
|
+
className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _11q7idpf _19itidpf _11c81kw7 _nd5l1yjy _12ji1r31 _1qu2glyw _12y3idpf _1bsb1osq _1ul9yh40 _syaz1kw7 _tzy4kb7n", isHidden && "_tzy4idpf", builtinCX({
|
|
47
|
+
input: true
|
|
48
|
+
}, inputClassName)]),
|
|
49
|
+
ref: innerRef
|
|
50
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
51
|
+
,
|
|
52
|
+
|
|
53
|
+
disabled: isDisabled,
|
|
54
|
+
"data-testid": dataId
|
|
55
|
+
}, innerProps)));
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
59
|
+
export default Input;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
|
|
2
|
+
._19itidpf{border:0}._18m915vq{overflow-y:hidden}
|
|
3
|
+
._19bvidpf{padding-left:0}
|
|
4
|
+
._1bsbt94y{width:1px}
|
|
5
|
+
._1pbydx66{z-index:9999}
|
|
6
|
+
._1reo15vq{overflow-x:hidden}
|
|
7
|
+
._4t3it94y{height:1px}
|
|
8
|
+
._ca0qidpf{padding-top:0}
|
|
9
|
+
._jqf6ydhy{label:a11yText}
|
|
10
|
+
._kqswstnw{position:absolute}
|
|
11
|
+
._n3tdidpf{padding-bottom:0}
|
|
12
|
+
._o5721q9c{white-space:nowrap}
|
|
13
|
+
._ogto7mnp{clip:rect(1px,1px,1px,1px)}
|
|
14
|
+
._u5f3idpf{padding-right:0}
|
|
15
|
+
._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/* a11y-text.tsx generated by @compiled/babel-plugin v0.36.1 */
|
|
2
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
3
|
+
import "./a11y-text.compiled.css";
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
6
|
+
// Assistive text to describe visual elements. Hidden for sighted users.
|
|
7
|
+
var styles = null;
|
|
8
|
+
var A11yText = function A11yText(props) {
|
|
9
|
+
return /*#__PURE__*/React.createElement("span", _extends({}, props, {
|
|
10
|
+
className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19itidpf _1reo15vq _18m915vq _1bsbt94y _4t3it94y _kqswstnw _1pbydx66 _ogto7mnp _jqf6ydhy _uiztglyw _o5721q9c"])
|
|
11
|
+
}));
|
|
12
|
+
};
|
|
13
|
+
export default A11yText;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
._11q7idpf{background:0}
|
|
2
|
+
._19itidpf{border:0}
|
|
3
|
+
._nd5l1sux{grid-area:1/1/2/3}
|
|
4
|
+
._12ji1r31{outline-color:currentColor}
|
|
5
|
+
._12y3idpf{outline-width:0}
|
|
6
|
+
._19bvidpf{padding-left:0}
|
|
7
|
+
._1bsbt94y{width:1px}
|
|
8
|
+
._1e02p1rm{inset-inline-start:-75pt}
|
|
9
|
+
._1n5d1j28{caret-color:transparent}
|
|
10
|
+
._1qu2glyw{outline-style:none}
|
|
11
|
+
._ca0qidpf{padding-top:0}
|
|
12
|
+
._kqswh2mm{position:relative}
|
|
13
|
+
._n3tdidpf{padding-bottom:0}
|
|
14
|
+
._syaz1j28{color:transparent}
|
|
15
|
+
._t9ec1kuz{transform:scale(.01)}
|
|
16
|
+
._tzy4idpf{opacity:0}
|
|
17
|
+
._u5f3idpf{padding-right:0}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/* dummy-input.tsx generated by @compiled/babel-plugin v0.36.1 */
|
|
2
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
3
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
|
+
var _excluded = ["innerRef"];
|
|
5
|
+
import "./dummy-input.compiled.css";
|
|
6
|
+
import * as React from 'react';
|
|
7
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
8
|
+
import { removeProps } from '../../../utils';
|
|
9
|
+
var dummyInputStyles = null;
|
|
10
|
+
export default function DummyInput(_ref) {
|
|
11
|
+
var innerRef = _ref.innerRef,
|
|
12
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
13
|
+
// Remove animation props not meant for HTML elements
|
|
14
|
+
var filteredProps = removeProps(props, 'onExited', 'in', 'enter', 'exit', 'appear');
|
|
15
|
+
return /*#__PURE__*/React.createElement("input", _extends({
|
|
16
|
+
ref: innerRef
|
|
17
|
+
}, filteredProps, {
|
|
18
|
+
className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _11q7idpf _19itidpf _nd5l1sux _12ji1r31 _1qu2glyw _12y3idpf _1bsbt94y _kqswh2mm _1n5d1j28 _syaz1j28 _1e02p1rm _tzy4idpf _t9ec1kuz"])
|
|
19
|
+
}));
|
|
20
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/* required-input.tsx generated by @compiled/babel-plugin v0.36.1 */
|
|
2
|
+
import "./required-input.compiled.css";
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
5
|
+
import __noop from '@atlaskit/ds-lib/noop';
|
|
6
|
+
var styles = null;
|
|
7
|
+
var RequiredInput = function RequiredInput(_ref) {
|
|
8
|
+
var name = _ref.name,
|
|
9
|
+
onFocus = _ref.onFocus;
|
|
10
|
+
return /*#__PURE__*/React.createElement("input", {
|
|
11
|
+
required: true,
|
|
12
|
+
name: name,
|
|
13
|
+
tabIndex: -1,
|
|
14
|
+
"aria-hidden": "true",
|
|
15
|
+
onFocus: onFocus,
|
|
16
|
+
// Prevent `Switching from uncontrolled to controlled` error
|
|
17
|
+
value: "",
|
|
18
|
+
onChange: __noop,
|
|
19
|
+
className: ax(["_1bsb1osq _kqswstnw _u7coidpf _rjxpidpf _1e02idpf _jqf61a21 _tzy4idpf _lcxvglyw"])
|
|
20
|
+
});
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
24
|
+
export default RequiredInput;
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
+
import React, { Fragment, useMemo, useRef } from 'react';
|
|
5
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
|
+
import { defaultAriaLiveMessages } from '../../accessibility';
|
|
7
|
+
import A11yText from './internal/a11y-text';
|
|
8
|
+
|
|
9
|
+
// ==============================
|
|
10
|
+
// Root Container
|
|
11
|
+
// ==============================
|
|
12
|
+
|
|
13
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
14
|
+
var LiveRegion = function LiveRegion(props) {
|
|
15
|
+
var ariaSelection = props.ariaSelection,
|
|
16
|
+
focusedOption = props.focusedOption,
|
|
17
|
+
focusedValue = props.focusedValue,
|
|
18
|
+
focusableOptions = props.focusableOptions,
|
|
19
|
+
isFocused = props.isFocused,
|
|
20
|
+
selectValue = props.selectValue,
|
|
21
|
+
selectProps = props.selectProps,
|
|
22
|
+
id = props.id,
|
|
23
|
+
isAppleDevice = props.isAppleDevice;
|
|
24
|
+
var ariaLiveMessages = selectProps.ariaLiveMessages,
|
|
25
|
+
getOptionLabel = selectProps.getOptionLabel,
|
|
26
|
+
inputValue = selectProps.inputValue,
|
|
27
|
+
isMulti = selectProps.isMulti,
|
|
28
|
+
isOptionDisabled = selectProps.isOptionDisabled,
|
|
29
|
+
isSearchable = selectProps.isSearchable,
|
|
30
|
+
label = selectProps.label,
|
|
31
|
+
menuIsOpen = selectProps.menuIsOpen,
|
|
32
|
+
options = selectProps.options,
|
|
33
|
+
screenReaderStatus = selectProps.screenReaderStatus,
|
|
34
|
+
tabSelectsValue = selectProps.tabSelectsValue,
|
|
35
|
+
isLoading = selectProps.isLoading;
|
|
36
|
+
var ariaLabel = selectProps['aria-label'] || label;
|
|
37
|
+
var ariaLive = selectProps['aria-live'];
|
|
38
|
+
|
|
39
|
+
// for safari, we will use minimum support from aria-live region
|
|
40
|
+
var isA11yImprovementEnabled = fg('design_system_select-a11y-improvement') && !isAppleDevice;
|
|
41
|
+
|
|
42
|
+
// Update aria live message configuration when prop changes
|
|
43
|
+
var messages = useMemo(function () {
|
|
44
|
+
return _objectSpread(_objectSpread({}, defaultAriaLiveMessages), ariaLiveMessages || {});
|
|
45
|
+
}, [ariaLiveMessages]);
|
|
46
|
+
|
|
47
|
+
// Update aria live selected option when prop changes
|
|
48
|
+
var ariaSelected = useMemo(function () {
|
|
49
|
+
var message = '';
|
|
50
|
+
if (isA11yImprovementEnabled && menuIsOpen) {
|
|
51
|
+
// we don't need to have selected message when the menu is open
|
|
52
|
+
return '';
|
|
53
|
+
}
|
|
54
|
+
if (ariaSelection && messages.onChange) {
|
|
55
|
+
var option = ariaSelection.option,
|
|
56
|
+
selectedOptions = ariaSelection.options,
|
|
57
|
+
removedValue = ariaSelection.removedValue,
|
|
58
|
+
removedValues = ariaSelection.removedValues,
|
|
59
|
+
value = ariaSelection.value;
|
|
60
|
+
// select-option when !isMulti does not return option so we assume selected option is value
|
|
61
|
+
var asOption = function asOption(val) {
|
|
62
|
+
return !Array.isArray(val) ? val : null;
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
// If there is just one item from the action then get its label
|
|
66
|
+
var selected = removedValue || option || asOption(value);
|
|
67
|
+
var _label = selected ? getOptionLabel(selected) : '';
|
|
68
|
+
|
|
69
|
+
// If there are multiple items from the action then return an array of labels
|
|
70
|
+
var multiSelected = selectedOptions || removedValues || undefined;
|
|
71
|
+
var labels = multiSelected ? multiSelected.map(getOptionLabel) : [];
|
|
72
|
+
if (isA11yImprovementEnabled && !_label && !labels.length) {
|
|
73
|
+
// return empty string if no labels provided
|
|
74
|
+
return '';
|
|
75
|
+
}
|
|
76
|
+
var onChangeProps = _objectSpread({
|
|
77
|
+
// multiSelected items are usually items that have already been selected
|
|
78
|
+
// or set by the user as a default value so we assume they are not disabled
|
|
79
|
+
isDisabled: selected && isOptionDisabled(selected, selectValue),
|
|
80
|
+
label: _label,
|
|
81
|
+
labels: labels
|
|
82
|
+
}, ariaSelection);
|
|
83
|
+
message = messages.onChange(onChangeProps);
|
|
84
|
+
}
|
|
85
|
+
return message;
|
|
86
|
+
}, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel, isA11yImprovementEnabled, menuIsOpen]);
|
|
87
|
+
var prevInputValue = useRef('');
|
|
88
|
+
var ariaFocused = useMemo(function () {
|
|
89
|
+
var focusMsg = '';
|
|
90
|
+
var focused = focusedOption || focusedValue;
|
|
91
|
+
var isSelected = !!(focusedOption && selectValue && selectValue.includes(focusedOption));
|
|
92
|
+
if (inputValue === prevInputValue.current && isA11yImprovementEnabled) {
|
|
93
|
+
// only announce focus option when searching when ff is on and the input value changed
|
|
94
|
+
// for safari, we will announce for all
|
|
95
|
+
return '';
|
|
96
|
+
}
|
|
97
|
+
if (focused && messages.onFocus) {
|
|
98
|
+
var onFocusProps = {
|
|
99
|
+
focused: focused,
|
|
100
|
+
label: getOptionLabel(focused),
|
|
101
|
+
isDisabled: isOptionDisabled(focused, selectValue),
|
|
102
|
+
isSelected: isSelected,
|
|
103
|
+
options: focusableOptions,
|
|
104
|
+
context: focused === focusedOption ? 'menu' : 'value',
|
|
105
|
+
selectValue: selectValue,
|
|
106
|
+
isMulti: isMulti
|
|
107
|
+
};
|
|
108
|
+
focusMsg = messages.onFocus(onFocusProps);
|
|
109
|
+
}
|
|
110
|
+
prevInputValue.current = inputValue;
|
|
111
|
+
return focusMsg;
|
|
112
|
+
}, [inputValue, focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isA11yImprovementEnabled, isMulti]);
|
|
113
|
+
var ariaResults = useMemo(function () {
|
|
114
|
+
var resultsMsg = '';
|
|
115
|
+
if (menuIsOpen && options.length && !isLoading && messages.onFilter) {
|
|
116
|
+
var resultsMessage = screenReaderStatus({
|
|
117
|
+
count: focusableOptions.length
|
|
118
|
+
});
|
|
119
|
+
resultsMsg = messages.onFilter({
|
|
120
|
+
inputValue: inputValue,
|
|
121
|
+
resultsMessage: resultsMessage
|
|
122
|
+
});
|
|
123
|
+
}
|
|
124
|
+
return resultsMsg;
|
|
125
|
+
}, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus, isLoading]);
|
|
126
|
+
var isInitialFocus = (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus';
|
|
127
|
+
var ariaGuidance = useMemo(function () {
|
|
128
|
+
if (fg('design_system_select-a11y-improvement')) {
|
|
129
|
+
// don't announce guidance at all when ff is on
|
|
130
|
+
return '';
|
|
131
|
+
}
|
|
132
|
+
var guidanceMsg = '';
|
|
133
|
+
if (messages.guidance) {
|
|
134
|
+
var context = focusedValue ? 'value' : menuIsOpen ? 'menu' : 'input';
|
|
135
|
+
guidanceMsg = messages.guidance({
|
|
136
|
+
'aria-label': ariaLabel,
|
|
137
|
+
context: context,
|
|
138
|
+
isDisabled: focusedOption && isOptionDisabled(focusedOption, selectValue),
|
|
139
|
+
isMulti: isMulti,
|
|
140
|
+
isSearchable: isSearchable,
|
|
141
|
+
tabSelectsValue: tabSelectsValue,
|
|
142
|
+
isInitialFocus: isInitialFocus
|
|
143
|
+
});
|
|
144
|
+
}
|
|
145
|
+
return guidanceMsg;
|
|
146
|
+
}, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
|
|
147
|
+
var ScreenReaderText = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
|
|
148
|
+
id: "aria-selection"
|
|
149
|
+
}, ariaSelected), /*#__PURE__*/React.createElement("span", {
|
|
150
|
+
id: "aria-results"
|
|
151
|
+
}, ariaResults), !fg('design_system_select-a11y-improvement') && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
|
|
152
|
+
id: "aria-focused"
|
|
153
|
+
}, ariaFocused), /*#__PURE__*/React.createElement("span", {
|
|
154
|
+
id: "aria-guidance"
|
|
155
|
+
}, ariaGuidance)));
|
|
156
|
+
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(A11yText, {
|
|
157
|
+
id: id
|
|
158
|
+
}, isInitialFocus && ScreenReaderText), /*#__PURE__*/React.createElement(A11yText, {
|
|
159
|
+
"aria-live": ariaLive // Should be undefined by default unless a specific use case requires it
|
|
160
|
+
,
|
|
161
|
+
"aria-atomic": fg('design_system_select-a11y-improvement') ? undefined : 'false',
|
|
162
|
+
"aria-relevant": fg('design_system_select-a11y-improvement') ? undefined : 'additions text',
|
|
163
|
+
role: fg('design_system_select-a11y-improvement') ? 'status' : 'log'
|
|
164
|
+
}, isFocused && !isInitialFocus && ScreenReaderText));
|
|
165
|
+
};
|
|
166
|
+
|
|
167
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
168
|
+
export default LiveRegion;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
|
|
2
|
+
._2rkoglpi{border-radius:var(--ds-border-radius,4px)}._154i1osq{top:100%}
|
|
3
|
+
._16qsd0yg{box-shadow:var(--ds-shadow-overlay,0 0 0 1px rgba(0,0,0,.1),0 4px 11px rgba(0,0,0,.1))}
|
|
4
|
+
._18m91wug{overflow-y:auto}
|
|
5
|
+
._19pku2gc{margin-top:var(--ds-space-100,8px)}
|
|
6
|
+
._1bsb1osq{width:100%}
|
|
7
|
+
._1pbykb7n{z-index:1}
|
|
8
|
+
._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
|
|
9
|
+
._85i5u2gc{padding-block-end:var(--ds-space-100,8px)}
|
|
10
|
+
._8am5i4x0{-webkit-overflow-scrolling:touch}
|
|
11
|
+
._94n51osq{bottom:100%}
|
|
12
|
+
._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
|
|
13
|
+
._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
|
|
14
|
+
._jqf689mz{label:menu}
|
|
15
|
+
._kqswh2mm{position:relative}
|
|
16
|
+
._kqswstnw{position:absolute}
|
|
17
|
+
._otyru2gc{margin-bottom:var(--ds-space-100,8px)}
|
|
18
|
+
._y3gn1h6o{text-align:center}
|
|
19
|
+
._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
|