@vchasno/ui-kit 0.3.15 → 0.3.17
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 +17 -0
- package/dist/Datepicker/index.cjs.js +1 -1
- package/dist/Datepicker/index.js +1 -1
- package/dist/Datepicker/types/components/Alert/Alert.d.ts +4 -3
- package/dist/Datepicker/types/components/Input/Input.d.ts +1 -0
- package/dist/Menu/types/components/Alert/Alert.d.ts +4 -3
- package/dist/Menu/types/components/Input/Input.d.ts +1 -0
- package/dist/ProjectsPopover/types/components/Alert/Alert.d.ts +4 -3
- package/dist/ProjectsPopover/types/components/Input/Input.d.ts +1 -0
- package/dist/Select/index.cjs.js +38 -125
- package/dist/Select/index.cjs.js.map +1 -1
- package/dist/Select/index.js +38 -125
- package/dist/Select/index.js.map +1 -1
- package/dist/Select/types/components/Alert/Alert.d.ts +4 -3
- package/dist/Select/types/components/Input/Input.d.ts +1 -0
- package/dist/SelectCreatable/index.cjs.js +38 -125
- package/dist/SelectCreatable/index.cjs.js.map +1 -1
- package/dist/SelectCreatable/index.js +38 -125
- package/dist/SelectCreatable/index.js.map +1 -1
- package/dist/SelectCreatable/types/components/Alert/Alert.d.ts +4 -3
- package/dist/SelectCreatable/types/components/Input/Input.d.ts +1 -0
- package/dist/Snackbar/index.cjs.js +8 -8
- package/dist/Snackbar/index.cjs.js.map +1 -1
- package/dist/Snackbar/index.js +8 -8
- package/dist/Snackbar/index.js.map +1 -1
- package/dist/Snackbar/types/components/Alert/Alert.d.ts +4 -3
- package/dist/Snackbar/types/components/Input/Input.d.ts +1 -0
- package/dist/css/_theme.css +9 -7
- package/dist/index.d.ts +5 -3
- package/dist/index.js +22 -26
- package/dist/index.js.map +1 -1
- package/dist/types/components/Alert/Alert.d.ts +4 -3
- package/dist/types/components/Input/Input.d.ts +1 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.3.17] - 2024-08-12
|
|
11
|
+
|
|
12
|
+
## Added
|
|
13
|
+
|
|
14
|
+
- Alert - redesign component, add config type
|
|
15
|
+
|
|
16
|
+
## [0.3.16] - 2024-08-08
|
|
17
|
+
|
|
18
|
+
## Added
|
|
19
|
+
|
|
20
|
+
- TextInput - add hideEmptyMeta prop
|
|
21
|
+
|
|
22
|
+
## Fixed
|
|
23
|
+
|
|
24
|
+
- Button - fix outline styles
|
|
25
|
+
- TextInput - not show LabelText if label is empty
|
|
26
|
+
|
|
10
27
|
## [0.3.12] - 2024-08-07
|
|
11
28
|
|
|
12
29
|
## Added
|
|
@@ -15639,7 +15639,7 @@ var InputMeta = function (_a) {
|
|
|
15639
15639
|
error && React.createElement("span", { className: "vchasno-ui-meta__error" }, error)));
|
|
15640
15640
|
};
|
|
15641
15641
|
|
|
15642
|
-
var css_248z$2 = ".vchasno-ui-label-text {\n position: absolute;\n z-index:
|
|
15642
|
+
var css_248z$2 = ".vchasno-ui-label-text {\n position: absolute;\n z-index: 1;\n top: 50%;\n left: 12px;\n display: inline-flex;\n max-width: calc(100% - 20px);\n align-self: flex-start;\n padding: 0 4px;\n background-color: var(--vchasno-ui-input-bg-color);\n color: var(--vchasno-ui-label-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n gap: 3px;\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n pointer-events: none;\n text-overflow: ellipsis;\n transform: translate(0, -50%);\n transition:\n color var(--vchasno-ui-transition-duration-sec, 0.3s),\n top 0.3s,\n font-size 0.3s;\n white-space: nowrap;\n}\n\n.vchasno-ui-select .vchasno-ui-label-text {\n max-width: calc(100% - 40px);\n}\n\n.vchasno-ui-select__floating-label,\n[class^='vchasno-ui-']:not(:placeholder-shown) + .vchasno-ui-label-text,\n[class^='vchasno-ui-']:focus:not(.--disabled) + .vchasno-ui-label-text {\n top: 0;\n font-size: 12px;\n}\n\nlabel[class^='vchasno-ui-']:not(.--error):focus-within .vchasno-ui-label-text {\n color: var(--vchasno-ui-label-color-focused);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--error .vchasno-ui-label-text {\n color: var(--vchasno-ui-input-color-error);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--required .vchasno-ui-label-text:hover {\n cursor: text;\n}\n\n.vchasno-ui-label-text sup {\n position: relative;\n top: -0.2em;\n display: none;\n color: var(--vchasno-ui-input-color-error);\n font-size: calc(var(--vchasno-ui-input-font-size) * 1.4);\n vertical-align: top;\n}\n\nlabel[class^='vchasno-ui-'].--required .vchasno-ui-label-text sup {\n display: inline-block;\n}\n\n.vchasno-ui-label-text__title-icon {\n display: none;\n color: var(--vchasno-ui-label-color-default);\n transform: scale(0.8);\n}\n\n.vchasno-ui-input[title] .vchasno-ui-label-text__title-icon {\n display: block;\n}\n\n.vchasno-ui-label-text__content {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n";
|
|
15643
15643
|
styleInject(css_248z$2);
|
|
15644
15644
|
|
|
15645
15645
|
var LabelText = function (_a) {
|
package/dist/Datepicker/index.js
CHANGED
|
@@ -15619,7 +15619,7 @@ var InputMeta = function (_a) {
|
|
|
15619
15619
|
error && React__default.createElement("span", { className: "vchasno-ui-meta__error" }, error)));
|
|
15620
15620
|
};
|
|
15621
15621
|
|
|
15622
|
-
var css_248z$2 = ".vchasno-ui-label-text {\n position: absolute;\n z-index:
|
|
15622
|
+
var css_248z$2 = ".vchasno-ui-label-text {\n position: absolute;\n z-index: 1;\n top: 50%;\n left: 12px;\n display: inline-flex;\n max-width: calc(100% - 20px);\n align-self: flex-start;\n padding: 0 4px;\n background-color: var(--vchasno-ui-input-bg-color);\n color: var(--vchasno-ui-label-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n gap: 3px;\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n pointer-events: none;\n text-overflow: ellipsis;\n transform: translate(0, -50%);\n transition:\n color var(--vchasno-ui-transition-duration-sec, 0.3s),\n top 0.3s,\n font-size 0.3s;\n white-space: nowrap;\n}\n\n.vchasno-ui-select .vchasno-ui-label-text {\n max-width: calc(100% - 40px);\n}\n\n.vchasno-ui-select__floating-label,\n[class^='vchasno-ui-']:not(:placeholder-shown) + .vchasno-ui-label-text,\n[class^='vchasno-ui-']:focus:not(.--disabled) + .vchasno-ui-label-text {\n top: 0;\n font-size: 12px;\n}\n\nlabel[class^='vchasno-ui-']:not(.--error):focus-within .vchasno-ui-label-text {\n color: var(--vchasno-ui-label-color-focused);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--error .vchasno-ui-label-text {\n color: var(--vchasno-ui-input-color-error);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--required .vchasno-ui-label-text:hover {\n cursor: text;\n}\n\n.vchasno-ui-label-text sup {\n position: relative;\n top: -0.2em;\n display: none;\n color: var(--vchasno-ui-input-color-error);\n font-size: calc(var(--vchasno-ui-input-font-size) * 1.4);\n vertical-align: top;\n}\n\nlabel[class^='vchasno-ui-'].--required .vchasno-ui-label-text sup {\n display: inline-block;\n}\n\n.vchasno-ui-label-text__title-icon {\n display: none;\n color: var(--vchasno-ui-label-color-default);\n transform: scale(0.8);\n}\n\n.vchasno-ui-input[title] .vchasno-ui-label-text__title-icon {\n display: block;\n}\n\n.vchasno-ui-label-text__content {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n";
|
|
15623
15623
|
styleInject(css_248z$2);
|
|
15624
15624
|
|
|
15625
15625
|
var LabelText = function (_a) {
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import './Alert.global.css';
|
|
3
|
-
type AlertType = 'error' | 'warning' | 'success' | 'info';
|
|
4
|
-
type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success';
|
|
3
|
+
type AlertType = 'error' | 'warning' | 'success' | 'info' | 'config';
|
|
4
|
+
type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success' | 'config';
|
|
5
5
|
export interface AlertProps {
|
|
6
6
|
type?: AlertType;
|
|
7
|
-
icon?: IconType
|
|
7
|
+
icon?: IconType;
|
|
8
|
+
customIcon?: React.ReactNode;
|
|
8
9
|
leftBorder?: boolean;
|
|
9
10
|
className?: string;
|
|
10
11
|
onClose?: VoidFunction;
|
|
@@ -9,6 +9,7 @@ export interface InputProps extends Partial<WithLabel & WithHint & LoadingFeedba
|
|
|
9
9
|
startElement?: string | React.ReactElement;
|
|
10
10
|
endElement?: string | React.ReactElement;
|
|
11
11
|
labelProps?: InputHTMLAttributes<HTMLLabelElement>;
|
|
12
|
+
hideEmptyMeta?: boolean;
|
|
12
13
|
children: React.ReactHTMLElement<HTMLInputElement> | React.ReactElement | JSX.Element[];
|
|
13
14
|
}
|
|
14
15
|
export declare const Input: React.FC<InputProps>;
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import './Alert.global.css';
|
|
3
|
-
type AlertType = 'error' | 'warning' | 'success' | 'info';
|
|
4
|
-
type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success';
|
|
3
|
+
type AlertType = 'error' | 'warning' | 'success' | 'info' | 'config';
|
|
4
|
+
type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success' | 'config';
|
|
5
5
|
export interface AlertProps {
|
|
6
6
|
type?: AlertType;
|
|
7
|
-
icon?: IconType
|
|
7
|
+
icon?: IconType;
|
|
8
|
+
customIcon?: React.ReactNode;
|
|
8
9
|
leftBorder?: boolean;
|
|
9
10
|
className?: string;
|
|
10
11
|
onClose?: VoidFunction;
|
|
@@ -9,6 +9,7 @@ export interface InputProps extends Partial<WithLabel & WithHint & LoadingFeedba
|
|
|
9
9
|
startElement?: string | React.ReactElement;
|
|
10
10
|
endElement?: string | React.ReactElement;
|
|
11
11
|
labelProps?: InputHTMLAttributes<HTMLLabelElement>;
|
|
12
|
+
hideEmptyMeta?: boolean;
|
|
12
13
|
children: React.ReactHTMLElement<HTMLInputElement> | React.ReactElement | JSX.Element[];
|
|
13
14
|
}
|
|
14
15
|
export declare const Input: React.FC<InputProps>;
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import './Alert.global.css';
|
|
3
|
-
type AlertType = 'error' | 'warning' | 'success' | 'info';
|
|
4
|
-
type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success';
|
|
3
|
+
type AlertType = 'error' | 'warning' | 'success' | 'info' | 'config';
|
|
4
|
+
type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success' | 'config';
|
|
5
5
|
export interface AlertProps {
|
|
6
6
|
type?: AlertType;
|
|
7
|
-
icon?: IconType
|
|
7
|
+
icon?: IconType;
|
|
8
|
+
customIcon?: React.ReactNode;
|
|
8
9
|
leftBorder?: boolean;
|
|
9
10
|
className?: string;
|
|
10
11
|
onClose?: VoidFunction;
|
|
@@ -9,6 +9,7 @@ export interface InputProps extends Partial<WithLabel & WithHint & LoadingFeedba
|
|
|
9
9
|
startElement?: string | React.ReactElement;
|
|
10
10
|
endElement?: string | React.ReactElement;
|
|
11
11
|
labelProps?: InputHTMLAttributes<HTMLLabelElement>;
|
|
12
|
+
hideEmptyMeta?: boolean;
|
|
12
13
|
children: React.ReactHTMLElement<HTMLInputElement> | React.ReactElement | JSX.Element[];
|
|
13
14
|
}
|
|
14
15
|
export declare const Input: React.FC<InputProps>;
|
package/dist/Select/index.cjs.js
CHANGED
|
@@ -5073,14 +5073,14 @@ var defaultAriaLiveMessages = {
|
|
|
5073
5073
|
guidance: function guidance(props) {
|
|
5074
5074
|
var isSearchable = props.isSearchable,
|
|
5075
5075
|
isMulti = props.isMulti,
|
|
5076
|
+
isDisabled = props.isDisabled,
|
|
5076
5077
|
tabSelectsValue = props.tabSelectsValue,
|
|
5077
|
-
context = props.context
|
|
5078
|
-
isInitialFocus = props.isInitialFocus;
|
|
5078
|
+
context = props.context;
|
|
5079
5079
|
switch (context) {
|
|
5080
5080
|
case 'menu':
|
|
5081
|
-
return "Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu".concat(tabSelectsValue ? ', press Tab to select the option and exit the menu' : '', ".");
|
|
5081
|
+
return "Use Up and Down to choose options".concat(isDisabled ? '' : ', press Enter to select the currently focused option', ", press Escape to exit the menu").concat(tabSelectsValue ? ', press Tab to select the option and exit the menu' : '', ".");
|
|
5082
5082
|
case 'input':
|
|
5083
|
-
return
|
|
5083
|
+
return "".concat(props['aria-label'] || 'Select', " is focused ").concat(isSearchable ? ',type to refine list' : '', ", press Down to open the menu, ").concat(isMulti ? ' press left to focus selected values' : '');
|
|
5084
5084
|
case 'value':
|
|
5085
5085
|
return 'Use left and right to toggle between focused values, press Backspace to remove the currently focused value';
|
|
5086
5086
|
default:
|
|
@@ -5116,18 +5116,17 @@ var defaultAriaLiveMessages = {
|
|
|
5116
5116
|
label = _props$label2 === void 0 ? '' : _props$label2,
|
|
5117
5117
|
selectValue = props.selectValue,
|
|
5118
5118
|
isDisabled = props.isDisabled,
|
|
5119
|
-
isSelected = props.isSelected
|
|
5120
|
-
isAppleDevice = props.isAppleDevice;
|
|
5119
|
+
isSelected = props.isSelected;
|
|
5121
5120
|
var getArrayIndex = function getArrayIndex(arr, item) {
|
|
5122
5121
|
return arr && arr.length ? "".concat(arr.indexOf(item) + 1, " of ").concat(arr.length) : '';
|
|
5123
5122
|
};
|
|
5124
5123
|
if (context === 'value' && selectValue) {
|
|
5125
5124
|
return "value ".concat(label, " focused, ").concat(getArrayIndex(selectValue, focused), ".");
|
|
5126
5125
|
}
|
|
5127
|
-
if (context === 'menu'
|
|
5126
|
+
if (context === 'menu') {
|
|
5128
5127
|
var disabled = isDisabled ? ' disabled' : '';
|
|
5129
|
-
var status = "".concat(isSelected ? '
|
|
5130
|
-
return "".concat(label).concat(status, ", ").concat(getArrayIndex(options, focused), ".");
|
|
5128
|
+
var status = "".concat(isSelected ? 'selected' : 'focused').concat(disabled);
|
|
5129
|
+
return "option ".concat(label, " ").concat(status, ", ").concat(getArrayIndex(options, focused), ".");
|
|
5131
5130
|
}
|
|
5132
5131
|
return '';
|
|
5133
5132
|
},
|
|
@@ -5146,8 +5145,7 @@ var LiveRegion = function LiveRegion(props) {
|
|
|
5146
5145
|
isFocused = props.isFocused,
|
|
5147
5146
|
selectValue = props.selectValue,
|
|
5148
5147
|
selectProps = props.selectProps,
|
|
5149
|
-
id = props.id
|
|
5150
|
-
isAppleDevice = props.isAppleDevice;
|
|
5148
|
+
id = props.id;
|
|
5151
5149
|
var ariaLiveMessages = selectProps.ariaLiveMessages,
|
|
5152
5150
|
getOptionLabel = selectProps.getOptionLabel,
|
|
5153
5151
|
inputValue = selectProps.inputValue,
|
|
@@ -5157,8 +5155,7 @@ var LiveRegion = function LiveRegion(props) {
|
|
|
5157
5155
|
menuIsOpen = selectProps.menuIsOpen,
|
|
5158
5156
|
options = selectProps.options,
|
|
5159
5157
|
screenReaderStatus = selectProps.screenReaderStatus,
|
|
5160
|
-
tabSelectsValue = selectProps.tabSelectsValue
|
|
5161
|
-
isLoading = selectProps.isLoading;
|
|
5158
|
+
tabSelectsValue = selectProps.tabSelectsValue;
|
|
5162
5159
|
var ariaLabel = selectProps['aria-label'];
|
|
5163
5160
|
var ariaLive = selectProps['aria-live'];
|
|
5164
5161
|
|
|
@@ -5211,16 +5208,15 @@ var LiveRegion = function LiveRegion(props) {
|
|
|
5211
5208
|
isSelected: isSelected,
|
|
5212
5209
|
options: focusableOptions,
|
|
5213
5210
|
context: focused === focusedOption ? 'menu' : 'value',
|
|
5214
|
-
selectValue: selectValue
|
|
5215
|
-
isAppleDevice: isAppleDevice
|
|
5211
|
+
selectValue: selectValue
|
|
5216
5212
|
};
|
|
5217
5213
|
focusMsg = messages.onFocus(onFocusProps);
|
|
5218
5214
|
}
|
|
5219
5215
|
return focusMsg;
|
|
5220
|
-
}, [focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue
|
|
5216
|
+
}, [focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue]);
|
|
5221
5217
|
var ariaResults = React.useMemo(function () {
|
|
5222
5218
|
var resultsMsg = '';
|
|
5223
|
-
if (menuIsOpen && options.length &&
|
|
5219
|
+
if (menuIsOpen && options.length && messages.onFilter) {
|
|
5224
5220
|
var resultsMessage = screenReaderStatus({
|
|
5225
5221
|
count: focusableOptions.length
|
|
5226
5222
|
});
|
|
@@ -5230,8 +5226,7 @@ var LiveRegion = function LiveRegion(props) {
|
|
|
5230
5226
|
});
|
|
5231
5227
|
}
|
|
5232
5228
|
return resultsMsg;
|
|
5233
|
-
}, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus
|
|
5234
|
-
var isInitialFocus = (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus';
|
|
5229
|
+
}, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus]);
|
|
5235
5230
|
var ariaGuidance = React.useMemo(function () {
|
|
5236
5231
|
var guidanceMsg = '';
|
|
5237
5232
|
if (messages.guidance) {
|
|
@@ -5242,28 +5237,24 @@ var LiveRegion = function LiveRegion(props) {
|
|
|
5242
5237
|
isDisabled: focusedOption && isOptionDisabled(focusedOption, selectValue),
|
|
5243
5238
|
isMulti: isMulti,
|
|
5244
5239
|
isSearchable: isSearchable,
|
|
5245
|
-
tabSelectsValue: tabSelectsValue
|
|
5246
|
-
isInitialFocus: isInitialFocus
|
|
5240
|
+
tabSelectsValue: tabSelectsValue
|
|
5247
5241
|
});
|
|
5248
5242
|
}
|
|
5249
5243
|
return guidanceMsg;
|
|
5250
|
-
}, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue
|
|
5244
|
+
}, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue]);
|
|
5245
|
+
var ariaContext = "".concat(ariaFocused, " ").concat(ariaResults, " ").concat(ariaGuidance);
|
|
5251
5246
|
var ScreenReaderText = jsx(React.Fragment, null, jsx("span", {
|
|
5252
5247
|
id: "aria-selection"
|
|
5253
5248
|
}, ariaSelected), jsx("span", {
|
|
5254
|
-
id: "aria-
|
|
5255
|
-
},
|
|
5256
|
-
|
|
5257
|
-
}, ariaResults), jsx("span", {
|
|
5258
|
-
id: "aria-guidance"
|
|
5259
|
-
}, ariaGuidance));
|
|
5249
|
+
id: "aria-context"
|
|
5250
|
+
}, ariaContext));
|
|
5251
|
+
var isInitialFocus = (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus';
|
|
5260
5252
|
return jsx(React.Fragment, null, jsx(A11yText$1, {
|
|
5261
5253
|
id: id
|
|
5262
5254
|
}, isInitialFocus && ScreenReaderText), jsx(A11yText$1, {
|
|
5263
5255
|
"aria-live": ariaLive,
|
|
5264
5256
|
"aria-atomic": "false",
|
|
5265
|
-
"aria-relevant": "additions text"
|
|
5266
|
-
role: "log"
|
|
5257
|
+
"aria-relevant": "additions text"
|
|
5267
5258
|
}, isFocused && !isInitialFocus && ScreenReaderText));
|
|
5268
5259
|
};
|
|
5269
5260
|
var LiveRegion$1 = LiveRegion;
|
|
@@ -5903,30 +5894,6 @@ var RequiredInput = function RequiredInput(_ref) {
|
|
|
5903
5894
|
};
|
|
5904
5895
|
var RequiredInput$1 = RequiredInput;
|
|
5905
5896
|
|
|
5906
|
-
/// <reference types="user-agent-data-types" />
|
|
5907
|
-
|
|
5908
|
-
function testPlatform(re) {
|
|
5909
|
-
var _window$navigator$use;
|
|
5910
|
-
return typeof window !== 'undefined' && window.navigator != null ? re.test(((_window$navigator$use = window.navigator['userAgentData']) === null || _window$navigator$use === void 0 ? void 0 : _window$navigator$use.platform) || window.navigator.platform) : false;
|
|
5911
|
-
}
|
|
5912
|
-
function isIPhone() {
|
|
5913
|
-
return testPlatform(/^iPhone/i);
|
|
5914
|
-
}
|
|
5915
|
-
function isMac() {
|
|
5916
|
-
return testPlatform(/^Mac/i);
|
|
5917
|
-
}
|
|
5918
|
-
function isIPad() {
|
|
5919
|
-
return testPlatform(/^iPad/i) ||
|
|
5920
|
-
// iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
|
|
5921
|
-
isMac() && navigator.maxTouchPoints > 1;
|
|
5922
|
-
}
|
|
5923
|
-
function isIOS() {
|
|
5924
|
-
return isIPhone() || isIPad();
|
|
5925
|
-
}
|
|
5926
|
-
function isAppleDevice() {
|
|
5927
|
-
return isMac() || isIOS();
|
|
5928
|
-
}
|
|
5929
|
-
|
|
5930
5897
|
var formatGroupLabel = function formatGroupLabel(group) {
|
|
5931
5898
|
return group.label;
|
|
5932
5899
|
};
|
|
@@ -6096,24 +6063,6 @@ function buildFocusableOptionsFromCategorizedOptions(categorizedOptions) {
|
|
|
6096
6063
|
return optionsAccumulator;
|
|
6097
6064
|
}, []);
|
|
6098
6065
|
}
|
|
6099
|
-
function buildFocusableOptionsWithIds(categorizedOptions, optionId) {
|
|
6100
|
-
return categorizedOptions.reduce(function (optionsAccumulator, categorizedOption) {
|
|
6101
|
-
if (categorizedOption.type === 'group') {
|
|
6102
|
-
optionsAccumulator.push.apply(optionsAccumulator, _toConsumableArray(categorizedOption.options.map(function (option) {
|
|
6103
|
-
return {
|
|
6104
|
-
data: option.data,
|
|
6105
|
-
id: "".concat(optionId, "-").concat(categorizedOption.index, "-").concat(option.index)
|
|
6106
|
-
};
|
|
6107
|
-
})));
|
|
6108
|
-
} else {
|
|
6109
|
-
optionsAccumulator.push({
|
|
6110
|
-
data: categorizedOption.data,
|
|
6111
|
-
id: "".concat(optionId, "-").concat(categorizedOption.index)
|
|
6112
|
-
});
|
|
6113
|
-
}
|
|
6114
|
-
return optionsAccumulator;
|
|
6115
|
-
}, []);
|
|
6116
|
-
}
|
|
6117
6066
|
function buildFocusableOptions(props, selectValue) {
|
|
6118
6067
|
return buildFocusableOptionsFromCategorizedOptions(buildCategorizedOptions(props, selectValue));
|
|
6119
6068
|
}
|
|
@@ -6151,13 +6100,6 @@ function getNextFocusedOption(state, options) {
|
|
|
6151
6100
|
var lastFocusedOption = state.focusedOption;
|
|
6152
6101
|
return lastFocusedOption && options.indexOf(lastFocusedOption) > -1 ? lastFocusedOption : options[0];
|
|
6153
6102
|
}
|
|
6154
|
-
var getFocusedOptionId = function getFocusedOptionId(focusableOptionsWithIds, focusedOption) {
|
|
6155
|
-
var _focusableOptionsWith;
|
|
6156
|
-
var focusedOptionId = (_focusableOptionsWith = focusableOptionsWithIds.find(function (option) {
|
|
6157
|
-
return option.data === focusedOption;
|
|
6158
|
-
})) === null || _focusableOptionsWith === void 0 ? void 0 : _focusableOptionsWith.id;
|
|
6159
|
-
return focusedOptionId || null;
|
|
6160
|
-
};
|
|
6161
6103
|
var getOptionLabel = function getOptionLabel(props, data) {
|
|
6162
6104
|
return props.getOptionLabel(data);
|
|
6163
6105
|
};
|
|
@@ -6208,8 +6150,6 @@ var Select$1 = /*#__PURE__*/function (_Component) {
|
|
|
6208
6150
|
_this.state = {
|
|
6209
6151
|
ariaSelection: null,
|
|
6210
6152
|
focusedOption: null,
|
|
6211
|
-
focusedOptionId: null,
|
|
6212
|
-
focusableOptionsWithIds: [],
|
|
6213
6153
|
focusedValue: null,
|
|
6214
6154
|
inputIsHidden: false,
|
|
6215
6155
|
isFocused: false,
|
|
@@ -6217,18 +6157,17 @@ var Select$1 = /*#__PURE__*/function (_Component) {
|
|
|
6217
6157
|
clearFocusValueOnUpdate: false,
|
|
6218
6158
|
prevWasFocused: false,
|
|
6219
6159
|
inputIsHiddenAfterUpdate: undefined,
|
|
6220
|
-
prevProps: undefined
|
|
6221
|
-
instancePrefix: ''
|
|
6160
|
+
prevProps: undefined
|
|
6222
6161
|
};
|
|
6223
6162
|
_this.blockOptionHover = false;
|
|
6224
6163
|
_this.isComposing = false;
|
|
6225
6164
|
_this.commonProps = void 0;
|
|
6226
6165
|
_this.initialTouchX = 0;
|
|
6227
6166
|
_this.initialTouchY = 0;
|
|
6167
|
+
_this.instancePrefix = '';
|
|
6228
6168
|
_this.openAfterFocus = false;
|
|
6229
6169
|
_this.scrollToFocusedOptionOnUpdate = false;
|
|
6230
6170
|
_this.userIsDragging = void 0;
|
|
6231
|
-
_this.isAppleDevice = isAppleDevice();
|
|
6232
6171
|
_this.controlRef = null;
|
|
6233
6172
|
_this.getControlRef = function (ref) {
|
|
6234
6173
|
_this.controlRef = ref;
|
|
@@ -6343,12 +6282,6 @@ var Select$1 = /*#__PURE__*/function (_Component) {
|
|
|
6343
6282
|
removedValue: lastSelectedValue
|
|
6344
6283
|
});
|
|
6345
6284
|
};
|
|
6346
|
-
_this.getFocusedOptionId = function (focusedOption) {
|
|
6347
|
-
return getFocusedOptionId(_this.state.focusableOptionsWithIds, focusedOption);
|
|
6348
|
-
};
|
|
6349
|
-
_this.getFocusableOptionsWithIds = function () {
|
|
6350
|
-
return buildFocusableOptionsWithIds(buildCategorizedOptions(_this.props, _this.state.selectValue), _this.getElementId('option'));
|
|
6351
|
-
};
|
|
6352
6285
|
_this.getValue = function () {
|
|
6353
6286
|
return _this.state.selectValue;
|
|
6354
6287
|
};
|
|
@@ -6376,7 +6309,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
|
|
|
6376
6309
|
return (_this$props$className = (_this$props$className2 = _this.props.classNames)[key]) === null || _this$props$className === void 0 ? void 0 : _this$props$className.call(_this$props$className2, props);
|
|
6377
6310
|
};
|
|
6378
6311
|
_this.getElementId = function (element) {
|
|
6379
|
-
return "".concat(_this.
|
|
6312
|
+
return "".concat(_this.instancePrefix, "-").concat(element);
|
|
6380
6313
|
};
|
|
6381
6314
|
_this.getComponents = function () {
|
|
6382
6315
|
return defaultComponents(_this.props);
|
|
@@ -6585,11 +6518,8 @@ var Select$1 = /*#__PURE__*/function (_Component) {
|
|
|
6585
6518
|
if (_this.blockOptionHover || _this.state.focusedOption === focusedOption) {
|
|
6586
6519
|
return;
|
|
6587
6520
|
}
|
|
6588
|
-
var options = _this.getFocusableOptions();
|
|
6589
|
-
var focusedOptionIndex = options.indexOf(focusedOption);
|
|
6590
6521
|
_this.setState({
|
|
6591
|
-
focusedOption: focusedOption
|
|
6592
|
-
focusedOptionId: focusedOptionIndex > -1 ? _this.getFocusedOptionId(focusedOption) : null
|
|
6522
|
+
focusedOption: focusedOption
|
|
6593
6523
|
});
|
|
6594
6524
|
};
|
|
6595
6525
|
_this.shouldHideSelectedOptions = function () {
|
|
@@ -6733,16 +6663,14 @@ var Select$1 = /*#__PURE__*/function (_Component) {
|
|
|
6733
6663
|
}
|
|
6734
6664
|
event.preventDefault();
|
|
6735
6665
|
};
|
|
6736
|
-
_this.
|
|
6666
|
+
_this.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId);
|
|
6737
6667
|
_this.state.selectValue = cleanValue(_props.value);
|
|
6668
|
+
|
|
6738
6669
|
// Set focusedOption if menuIsOpen is set on init (e.g. defaultMenuIsOpen)
|
|
6739
6670
|
if (_props.menuIsOpen && _this.state.selectValue.length) {
|
|
6740
|
-
var focusableOptionsWithIds = _this.getFocusableOptionsWithIds();
|
|
6741
6671
|
var focusableOptions = _this.buildFocusableOptions();
|
|
6742
6672
|
var optionIndex = focusableOptions.indexOf(_this.state.selectValue[0]);
|
|
6743
|
-
_this.state.focusableOptionsWithIds = focusableOptionsWithIds;
|
|
6744
6673
|
_this.state.focusedOption = focusableOptions[optionIndex];
|
|
6745
|
-
_this.state.focusedOptionId = getFocusedOptionId(focusableOptionsWithIds, focusableOptions[optionIndex]);
|
|
6746
6674
|
}
|
|
6747
6675
|
return _this;
|
|
6748
6676
|
}
|
|
@@ -6867,8 +6795,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
|
|
|
6867
6795
|
this.setState({
|
|
6868
6796
|
inputIsHiddenAfterUpdate: false,
|
|
6869
6797
|
focusedValue: null,
|
|
6870
|
-
focusedOption: focusableOptions[openAtIndex]
|
|
6871
|
-
focusedOptionId: this.getFocusedOptionId(focusableOptions[openAtIndex])
|
|
6798
|
+
focusedOption: focusableOptions[openAtIndex]
|
|
6872
6799
|
}, function () {
|
|
6873
6800
|
return _this2.onMenuOpen();
|
|
6874
6801
|
});
|
|
@@ -6944,8 +6871,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
|
|
|
6944
6871
|
this.scrollToFocusedOptionOnUpdate = true;
|
|
6945
6872
|
this.setState({
|
|
6946
6873
|
focusedOption: options[nextFocus],
|
|
6947
|
-
focusedValue: null
|
|
6948
|
-
focusedOptionId: this.getFocusedOptionId(options[nextFocus])
|
|
6874
|
+
focusedValue: null
|
|
6949
6875
|
});
|
|
6950
6876
|
}
|
|
6951
6877
|
}, {
|
|
@@ -7141,10 +7067,10 @@ var Select$1 = /*#__PURE__*/function (_Component) {
|
|
|
7141
7067
|
'aria-label': this.props['aria-label'],
|
|
7142
7068
|
'aria-labelledby': this.props['aria-labelledby'],
|
|
7143
7069
|
'aria-required': required,
|
|
7144
|
-
role: 'combobox'
|
|
7145
|
-
'aria-activedescendant': this.isAppleDevice ? undefined : this.state.focusedOptionId || ''
|
|
7070
|
+
role: 'combobox'
|
|
7146
7071
|
}, menuIsOpen && {
|
|
7147
|
-
'aria-controls': this.getElementId('listbox')
|
|
7072
|
+
'aria-controls': this.getElementId('listbox'),
|
|
7073
|
+
'aria-owns': this.getElementId('listbox')
|
|
7148
7074
|
}), !isSearchable && {
|
|
7149
7075
|
'aria-readonly': true
|
|
7150
7076
|
}), this.hasValue() ? (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus' && {
|
|
@@ -7389,11 +7315,8 @@ var Select$1 = /*#__PURE__*/function (_Component) {
|
|
|
7389
7315
|
onClick: onSelect,
|
|
7390
7316
|
onMouseMove: onHover,
|
|
7391
7317
|
onMouseOver: onHover,
|
|
7392
|
-
tabIndex: -1
|
|
7393
|
-
role: 'option',
|
|
7394
|
-
'aria-selected': _this4.isAppleDevice ? undefined : isSelected // is not supported on Apple devices
|
|
7318
|
+
tabIndex: -1
|
|
7395
7319
|
};
|
|
7396
|
-
|
|
7397
7320
|
return /*#__PURE__*/React__namespace.createElement(Option, _extends({}, commonProps, {
|
|
7398
7321
|
innerProps: innerProps,
|
|
7399
7322
|
data: data,
|
|
@@ -7462,7 +7385,8 @@ var Select$1 = /*#__PURE__*/function (_Component) {
|
|
|
7462
7385
|
innerRef: ref,
|
|
7463
7386
|
innerProps: {
|
|
7464
7387
|
onMouseDown: _this4.onMenuMouseDown,
|
|
7465
|
-
onMouseMove: _this4.onMenuMouseMove
|
|
7388
|
+
onMouseMove: _this4.onMenuMouseMove,
|
|
7389
|
+
id: _this4.getElementId('listbox')
|
|
7466
7390
|
},
|
|
7467
7391
|
isLoading: isLoading,
|
|
7468
7392
|
placement: placement
|
|
@@ -7477,11 +7401,6 @@ var Select$1 = /*#__PURE__*/function (_Component) {
|
|
|
7477
7401
|
_this4.getMenuListRef(instance);
|
|
7478
7402
|
scrollTargetRef(instance);
|
|
7479
7403
|
},
|
|
7480
|
-
innerProps: {
|
|
7481
|
-
role: 'listbox',
|
|
7482
|
-
'aria-multiselectable': commonProps.isMulti,
|
|
7483
|
-
id: _this4.getElementId('listbox')
|
|
7484
|
-
},
|
|
7485
7404
|
isLoading: isLoading,
|
|
7486
7405
|
maxHeight: maxHeight,
|
|
7487
7406
|
focusedOption: focusedOption
|
|
@@ -7569,8 +7488,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
|
|
|
7569
7488
|
focusedValue: focusedValue,
|
|
7570
7489
|
isFocused: isFocused,
|
|
7571
7490
|
selectValue: selectValue,
|
|
7572
|
-
focusableOptions: focusableOptions
|
|
7573
|
-
isAppleDevice: this.isAppleDevice
|
|
7491
|
+
focusableOptions: focusableOptions
|
|
7574
7492
|
}));
|
|
7575
7493
|
}
|
|
7576
7494
|
}, {
|
|
@@ -7619,8 +7537,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
|
|
|
7619
7537
|
inputIsHiddenAfterUpdate = state.inputIsHiddenAfterUpdate,
|
|
7620
7538
|
ariaSelection = state.ariaSelection,
|
|
7621
7539
|
isFocused = state.isFocused,
|
|
7622
|
-
prevWasFocused = state.prevWasFocused
|
|
7623
|
-
instancePrefix = state.instancePrefix;
|
|
7540
|
+
prevWasFocused = state.prevWasFocused;
|
|
7624
7541
|
var options = props.options,
|
|
7625
7542
|
value = props.value,
|
|
7626
7543
|
menuIsOpen = props.menuIsOpen,
|
|
@@ -7630,15 +7547,11 @@ var Select$1 = /*#__PURE__*/function (_Component) {
|
|
|
7630
7547
|
var newMenuOptionsState = {};
|
|
7631
7548
|
if (prevProps && (value !== prevProps.value || options !== prevProps.options || menuIsOpen !== prevProps.menuIsOpen || inputValue !== prevProps.inputValue)) {
|
|
7632
7549
|
var focusableOptions = menuIsOpen ? buildFocusableOptions(props, selectValue) : [];
|
|
7633
|
-
var focusableOptionsWithIds = menuIsOpen ? buildFocusableOptionsWithIds(buildCategorizedOptions(props, selectValue), "".concat(instancePrefix, "-option")) : [];
|
|
7634
7550
|
var focusedValue = clearFocusValueOnUpdate ? getNextFocusedValue(state, selectValue) : null;
|
|
7635
7551
|
var focusedOption = getNextFocusedOption(state, focusableOptions);
|
|
7636
|
-
var focusedOptionId = getFocusedOptionId(focusableOptionsWithIds, focusedOption);
|
|
7637
7552
|
newMenuOptionsState = {
|
|
7638
7553
|
selectValue: selectValue,
|
|
7639
7554
|
focusedOption: focusedOption,
|
|
7640
|
-
focusedOptionId: focusedOptionId,
|
|
7641
|
-
focusableOptionsWithIds: focusableOptionsWithIds,
|
|
7642
7555
|
focusedValue: focusedValue,
|
|
7643
7556
|
clearFocusValueOnUpdate: false
|
|
7644
7557
|
};
|
|
@@ -7812,7 +7725,7 @@ var Spinner = function (_a) {
|
|
|
7812
7725
|
React.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
|
|
7813
7726
|
};
|
|
7814
7727
|
|
|
7815
|
-
var css_248z$1 = ".vchasno-ui-label-text {\n position: absolute;\n z-index:
|
|
7728
|
+
var css_248z$1 = ".vchasno-ui-label-text {\n position: absolute;\n z-index: 1;\n top: 50%;\n left: 12px;\n display: inline-flex;\n max-width: calc(100% - 20px);\n align-self: flex-start;\n padding: 0 4px;\n background-color: var(--vchasno-ui-input-bg-color);\n color: var(--vchasno-ui-label-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n gap: 3px;\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n pointer-events: none;\n text-overflow: ellipsis;\n transform: translate(0, -50%);\n transition:\n color var(--vchasno-ui-transition-duration-sec, 0.3s),\n top 0.3s,\n font-size 0.3s;\n white-space: nowrap;\n}\n\n.vchasno-ui-select .vchasno-ui-label-text {\n max-width: calc(100% - 40px);\n}\n\n.vchasno-ui-select__floating-label,\n[class^='vchasno-ui-']:not(:placeholder-shown) + .vchasno-ui-label-text,\n[class^='vchasno-ui-']:focus:not(.--disabled) + .vchasno-ui-label-text {\n top: 0;\n font-size: 12px;\n}\n\nlabel[class^='vchasno-ui-']:not(.--error):focus-within .vchasno-ui-label-text {\n color: var(--vchasno-ui-label-color-focused);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--error .vchasno-ui-label-text {\n color: var(--vchasno-ui-input-color-error);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--required .vchasno-ui-label-text:hover {\n cursor: text;\n}\n\n.vchasno-ui-label-text sup {\n position: relative;\n top: -0.2em;\n display: none;\n color: var(--vchasno-ui-input-color-error);\n font-size: calc(var(--vchasno-ui-input-font-size) * 1.4);\n vertical-align: top;\n}\n\nlabel[class^='vchasno-ui-'].--required .vchasno-ui-label-text sup {\n display: inline-block;\n}\n\n.vchasno-ui-label-text__title-icon {\n display: none;\n color: var(--vchasno-ui-label-color-default);\n transform: scale(0.8);\n}\n\n.vchasno-ui-input[title] .vchasno-ui-label-text__title-icon {\n display: block;\n}\n\n.vchasno-ui-label-text__content {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n";
|
|
7816
7729
|
styleInject(css_248z$1);
|
|
7817
7730
|
|
|
7818
7731
|
var LabelText = function (_a) {
|