@vchasno/ui-kit 0.3.15 → 0.3.16

package/CHANGELOG.md

@@ -7,6 +7,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.3.16] - 2024-08-08
+
+## Added
+
+-   TextInput - add hideEmptyMeta prop
+
+## Fixed
+
+-   Button - fix outline styles
+-   TextInput - not show LabelText if label is empty
+
 ## [0.3.12] - 2024-08-07
 
 ## Added

package/dist/Datepicker/index.cjs.js

@@ -15639,7 +15639,7 @@ var InputMeta = function (_a) {
         error && React.createElement("span", { className: "vchasno-ui-meta__error" }, error)));
 };
 
-var css_248z$2 = ".vchasno-ui-label-text {\n    position: absolute;\n    z-index: 2;\n    top: 50%;\n    left: 12px;\n    display: inline-flex;\n    max-width: calc(100% - 20px);\n    align-self: flex-start;\n    padding: 4px;\n    background-color: #fff;\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";
+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";
 styleInject(css_248z$2);
 
 var LabelText = function (_a) {

package/dist/Datepicker/index.js

@@ -15619,7 +15619,7 @@ var InputMeta = function (_a) {
         error && React__default.createElement("span", { className: "vchasno-ui-meta__error" }, error)));
 };
 
-var css_248z$2 = ".vchasno-ui-label-text {\n    position: absolute;\n    z-index: 2;\n    top: 50%;\n    left: 12px;\n    display: inline-flex;\n    max-width: calc(100% - 20px);\n    align-self: flex-start;\n    padding: 4px;\n    background-color: #fff;\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";
+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";
 styleInject(css_248z$2);
 
 var LabelText = function (_a) {

package/dist/Datepicker/types/components/Input/Input.d.ts

@@ -9,6 +9,7 @@ export interface InputProps extends Partial<WithLabel & WithHint & LoadingFeedba
     startElement?: string | React.ReactElement;
     endElement?: string | React.ReactElement;
     labelProps?: InputHTMLAttributes<HTMLLabelElement>;
+    hideEmptyMeta?: boolean;
     children: React.ReactHTMLElement<HTMLInputElement> | React.ReactElement | JSX.Element[];
 }
 export declare const Input: React.FC<InputProps>;

package/dist/Menu/types/components/Input/Input.d.ts

@@ -9,6 +9,7 @@ export interface InputProps extends Partial<WithLabel & WithHint & LoadingFeedba
     startElement?: string | React.ReactElement;
     endElement?: string | React.ReactElement;
     labelProps?: InputHTMLAttributes<HTMLLabelElement>;
+    hideEmptyMeta?: boolean;
     children: React.ReactHTMLElement<HTMLInputElement> | React.ReactElement | JSX.Element[];
 }
 export declare const Input: React.FC<InputProps>;

package/dist/ProjectsPopover/types/components/Input/Input.d.ts

@@ -9,6 +9,7 @@ export interface InputProps extends Partial<WithLabel & WithHint & LoadingFeedba
     startElement?: string | React.ReactElement;
     endElement?: string | React.ReactElement;
     labelProps?: InputHTMLAttributes<HTMLLabelElement>;
+    hideEmptyMeta?: boolean;
     children: React.ReactHTMLElement<HTMLInputElement> | React.ReactElement | JSX.Element[];
 }
 export declare const Input: React.FC<InputProps>;

package/dist/Select/index.cjs.js

@@ -5073,14 +5073,14 @@ var defaultAriaLiveMessages = {
   guidance: function guidance(props) {
     var isSearchable = props.isSearchable,
       isMulti = props.isMulti,
+      isDisabled = props.isDisabled,
       tabSelectsValue = props.tabSelectsValue,
-      context = props.context,
-      isInitialFocus = props.isInitialFocus;
+      context = props.context;
     switch (context) {
       case 'menu':
-        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' : '', ".");
+        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' : '', ".");
       case 'input':
-        return isInitialFocus ? "".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' : '') : '';
+        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' : '');
       case 'value':
         return 'Use left and right to toggle between focused values, press Backspace to remove the currently focused value';
       default:
@@ -5116,18 +5116,17 @@ var defaultAriaLiveMessages = {
       label = _props$label2 === void 0 ? '' : _props$label2,
       selectValue = props.selectValue,
       isDisabled = props.isDisabled,
-      isSelected = props.isSelected,
-      isAppleDevice = props.isAppleDevice;
+      isSelected = props.isSelected;
     var getArrayIndex = function getArrayIndex(arr, item) {
       return arr && arr.length ? "".concat(arr.indexOf(item) + 1, " of ").concat(arr.length) : '';
     };
     if (context === 'value' && selectValue) {
       return "value ".concat(label, " focused, ").concat(getArrayIndex(selectValue, focused), ".");
     }
-    if (context === 'menu' && isAppleDevice) {
+    if (context === 'menu') {
       var disabled = isDisabled ? ' disabled' : '';
-      var status = "".concat(isSelected ? ' selected' : '').concat(disabled);
-      return "".concat(label).concat(status, ", ").concat(getArrayIndex(options, focused), ".");
+      var status = "".concat(isSelected ? 'selected' : 'focused').concat(disabled);
+      return "option ".concat(label, " ").concat(status, ", ").concat(getArrayIndex(options, focused), ".");
     }
     return '';
   },
@@ -5146,8 +5145,7 @@ var LiveRegion = function LiveRegion(props) {
     isFocused = props.isFocused,
     selectValue = props.selectValue,
     selectProps = props.selectProps,
-    id = props.id,
-    isAppleDevice = props.isAppleDevice;
+    id = props.id;
   var ariaLiveMessages = selectProps.ariaLiveMessages,
     getOptionLabel = selectProps.getOptionLabel,
     inputValue = selectProps.inputValue,
@@ -5157,8 +5155,7 @@ var LiveRegion = function LiveRegion(props) {
     menuIsOpen = selectProps.menuIsOpen,
     options = selectProps.options,
     screenReaderStatus = selectProps.screenReaderStatus,
-    tabSelectsValue = selectProps.tabSelectsValue,
-    isLoading = selectProps.isLoading;
+    tabSelectsValue = selectProps.tabSelectsValue;
   var ariaLabel = selectProps['aria-label'];
   var ariaLive = selectProps['aria-live'];
 
@@ -5211,16 +5208,15 @@ var LiveRegion = function LiveRegion(props) {
         isSelected: isSelected,
         options: focusableOptions,
         context: focused === focusedOption ? 'menu' : 'value',
-        selectValue: selectValue,
-        isAppleDevice: isAppleDevice
+        selectValue: selectValue
       };
       focusMsg = messages.onFocus(onFocusProps);
     }
     return focusMsg;
-  }, [focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isAppleDevice]);
+  }, [focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue]);
   var ariaResults = React.useMemo(function () {
     var resultsMsg = '';
-    if (menuIsOpen && options.length && !isLoading && messages.onFilter) {
+    if (menuIsOpen && options.length && messages.onFilter) {
       var resultsMessage = screenReaderStatus({
         count: focusableOptions.length
       });
@@ -5230,8 +5226,7 @@ var LiveRegion = function LiveRegion(props) {
       });
     }
     return resultsMsg;
-  }, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus, isLoading]);
-  var isInitialFocus = (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus';
+  }, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus]);
   var ariaGuidance = React.useMemo(function () {
     var guidanceMsg = '';
     if (messages.guidance) {
@@ -5242,28 +5237,24 @@ var LiveRegion = function LiveRegion(props) {
         isDisabled: focusedOption && isOptionDisabled(focusedOption, selectValue),
         isMulti: isMulti,
         isSearchable: isSearchable,
-        tabSelectsValue: tabSelectsValue,
-        isInitialFocus: isInitialFocus
+        tabSelectsValue: tabSelectsValue
       });
     }
     return guidanceMsg;
-  }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
+  }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue]);
+  var ariaContext = "".concat(ariaFocused, " ").concat(ariaResults, " ").concat(ariaGuidance);
   var ScreenReaderText = jsx(React.Fragment, null, jsx("span", {
     id: "aria-selection"
   }, ariaSelected), jsx("span", {
-    id: "aria-focused"
-  }, ariaFocused), jsx("span", {
-    id: "aria-results"
-  }, ariaResults), jsx("span", {
-    id: "aria-guidance"
-  }, ariaGuidance));
+    id: "aria-context"
+  }, ariaContext));
+  var isInitialFocus = (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus';
   return jsx(React.Fragment, null, jsx(A11yText$1, {
     id: id
   }, isInitialFocus && ScreenReaderText), jsx(A11yText$1, {
     "aria-live": ariaLive,
     "aria-atomic": "false",
-    "aria-relevant": "additions text",
-    role: "log"
+    "aria-relevant": "additions text"
   }, isFocused && !isInitialFocus && ScreenReaderText));
 };
 var LiveRegion$1 = LiveRegion;
@@ -5903,30 +5894,6 @@ var RequiredInput = function RequiredInput(_ref) {
 };
 var RequiredInput$1 = RequiredInput;
 
-/// <reference types="user-agent-data-types" />
-
-function testPlatform(re) {
-  var _window$navigator$use;
-  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;
-}
-function isIPhone() {
-  return testPlatform(/^iPhone/i);
-}
-function isMac() {
-  return testPlatform(/^Mac/i);
-}
-function isIPad() {
-  return testPlatform(/^iPad/i) ||
-  // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
-  isMac() && navigator.maxTouchPoints > 1;
-}
-function isIOS() {
-  return isIPhone() || isIPad();
-}
-function isAppleDevice() {
-  return isMac() || isIOS();
-}
-
 var formatGroupLabel = function formatGroupLabel(group) {
   return group.label;
 };
@@ -6096,24 +6063,6 @@ function buildFocusableOptionsFromCategorizedOptions(categorizedOptions) {
     return optionsAccumulator;
   }, []);
 }
-function buildFocusableOptionsWithIds(categorizedOptions, optionId) {
-  return categorizedOptions.reduce(function (optionsAccumulator, categorizedOption) {
-    if (categorizedOption.type === 'group') {
-      optionsAccumulator.push.apply(optionsAccumulator, _toConsumableArray(categorizedOption.options.map(function (option) {
-        return {
-          data: option.data,
-          id: "".concat(optionId, "-").concat(categorizedOption.index, "-").concat(option.index)
-        };
-      })));
-    } else {
-      optionsAccumulator.push({
-        data: categorizedOption.data,
-        id: "".concat(optionId, "-").concat(categorizedOption.index)
-      });
-    }
-    return optionsAccumulator;
-  }, []);
-}
 function buildFocusableOptions(props, selectValue) {
   return buildFocusableOptionsFromCategorizedOptions(buildCategorizedOptions(props, selectValue));
 }
@@ -6151,13 +6100,6 @@ function getNextFocusedOption(state, options) {
   var lastFocusedOption = state.focusedOption;
   return lastFocusedOption && options.indexOf(lastFocusedOption) > -1 ? lastFocusedOption : options[0];
 }
-var getFocusedOptionId = function getFocusedOptionId(focusableOptionsWithIds, focusedOption) {
-  var _focusableOptionsWith;
-  var focusedOptionId = (_focusableOptionsWith = focusableOptionsWithIds.find(function (option) {
-    return option.data === focusedOption;
-  })) === null || _focusableOptionsWith === void 0 ? void 0 : _focusableOptionsWith.id;
-  return focusedOptionId || null;
-};
 var getOptionLabel = function getOptionLabel(props, data) {
   return props.getOptionLabel(data);
 };
@@ -6208,8 +6150,6 @@ var Select$1 = /*#__PURE__*/function (_Component) {
     _this.state = {
       ariaSelection: null,
       focusedOption: null,
-      focusedOptionId: null,
-      focusableOptionsWithIds: [],
       focusedValue: null,
       inputIsHidden: false,
       isFocused: false,
@@ -6217,18 +6157,17 @@ var Select$1 = /*#__PURE__*/function (_Component) {
       clearFocusValueOnUpdate: false,
       prevWasFocused: false,
       inputIsHiddenAfterUpdate: undefined,
-      prevProps: undefined,
-      instancePrefix: ''
+      prevProps: undefined
     };
     _this.blockOptionHover = false;
     _this.isComposing = false;
     _this.commonProps = void 0;
     _this.initialTouchX = 0;
     _this.initialTouchY = 0;
+    _this.instancePrefix = '';
     _this.openAfterFocus = false;
     _this.scrollToFocusedOptionOnUpdate = false;
     _this.userIsDragging = void 0;
-    _this.isAppleDevice = isAppleDevice();
     _this.controlRef = null;
     _this.getControlRef = function (ref) {
       _this.controlRef = ref;
@@ -6343,12 +6282,6 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         removedValue: lastSelectedValue
       });
     };
-    _this.getFocusedOptionId = function (focusedOption) {
-      return getFocusedOptionId(_this.state.focusableOptionsWithIds, focusedOption);
-    };
-    _this.getFocusableOptionsWithIds = function () {
-      return buildFocusableOptionsWithIds(buildCategorizedOptions(_this.props, _this.state.selectValue), _this.getElementId('option'));
-    };
     _this.getValue = function () {
       return _this.state.selectValue;
     };
@@ -6376,7 +6309,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
       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);
     };
     _this.getElementId = function (element) {
-      return "".concat(_this.state.instancePrefix, "-").concat(element);
+      return "".concat(_this.instancePrefix, "-").concat(element);
     };
     _this.getComponents = function () {
       return defaultComponents(_this.props);
@@ -6585,11 +6518,8 @@ var Select$1 = /*#__PURE__*/function (_Component) {
       if (_this.blockOptionHover || _this.state.focusedOption === focusedOption) {
         return;
       }
-      var options = _this.getFocusableOptions();
-      var focusedOptionIndex = options.indexOf(focusedOption);
       _this.setState({
-        focusedOption: focusedOption,
-        focusedOptionId: focusedOptionIndex > -1 ? _this.getFocusedOptionId(focusedOption) : null
+        focusedOption: focusedOption
       });
     };
     _this.shouldHideSelectedOptions = function () {
@@ -6733,16 +6663,14 @@ var Select$1 = /*#__PURE__*/function (_Component) {
       }
       event.preventDefault();
     };
-    _this.state.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId);
+    _this.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId);
     _this.state.selectValue = cleanValue(_props.value);
+
     // Set focusedOption if menuIsOpen is set on init (e.g. defaultMenuIsOpen)
     if (_props.menuIsOpen && _this.state.selectValue.length) {
-      var focusableOptionsWithIds = _this.getFocusableOptionsWithIds();
       var focusableOptions = _this.buildFocusableOptions();
       var optionIndex = focusableOptions.indexOf(_this.state.selectValue[0]);
-      _this.state.focusableOptionsWithIds = focusableOptionsWithIds;
       _this.state.focusedOption = focusableOptions[optionIndex];
-      _this.state.focusedOptionId = getFocusedOptionId(focusableOptionsWithIds, focusableOptions[optionIndex]);
     }
     return _this;
   }
@@ -6867,8 +6795,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
       this.setState({
         inputIsHiddenAfterUpdate: false,
         focusedValue: null,
-        focusedOption: focusableOptions[openAtIndex],
-        focusedOptionId: this.getFocusedOptionId(focusableOptions[openAtIndex])
+        focusedOption: focusableOptions[openAtIndex]
       }, function () {
         return _this2.onMenuOpen();
       });
@@ -6944,8 +6871,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
       this.scrollToFocusedOptionOnUpdate = true;
       this.setState({
         focusedOption: options[nextFocus],
-        focusedValue: null,
-        focusedOptionId: this.getFocusedOptionId(options[nextFocus])
+        focusedValue: null
       });
     }
   }, {
@@ -7141,10 +7067,10 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         'aria-label': this.props['aria-label'],
         'aria-labelledby': this.props['aria-labelledby'],
         'aria-required': required,
-        role: 'combobox',
-        'aria-activedescendant': this.isAppleDevice ? undefined : this.state.focusedOptionId || ''
+        role: 'combobox'
       }, menuIsOpen && {
-        'aria-controls': this.getElementId('listbox')
+        'aria-controls': this.getElementId('listbox'),
+        'aria-owns': this.getElementId('listbox')
       }), !isSearchable && {
         'aria-readonly': true
       }), this.hasValue() ? (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus' && {
@@ -7389,11 +7315,8 @@ var Select$1 = /*#__PURE__*/function (_Component) {
           onClick: onSelect,
           onMouseMove: onHover,
           onMouseOver: onHover,
-          tabIndex: -1,
-          role: 'option',
-          'aria-selected': _this4.isAppleDevice ? undefined : isSelected // is not supported on Apple devices
+          tabIndex: -1
         };
-
         return /*#__PURE__*/React__namespace.createElement(Option, _extends({}, commonProps, {
           innerProps: innerProps,
           data: data,
@@ -7462,7 +7385,8 @@ var Select$1 = /*#__PURE__*/function (_Component) {
           innerRef: ref,
           innerProps: {
             onMouseDown: _this4.onMenuMouseDown,
-            onMouseMove: _this4.onMenuMouseMove
+            onMouseMove: _this4.onMenuMouseMove,
+            id: _this4.getElementId('listbox')
           },
           isLoading: isLoading,
           placement: placement
@@ -7477,11 +7401,6 @@ var Select$1 = /*#__PURE__*/function (_Component) {
               _this4.getMenuListRef(instance);
               scrollTargetRef(instance);
             },
-            innerProps: {
-              role: 'listbox',
-              'aria-multiselectable': commonProps.isMulti,
-              id: _this4.getElementId('listbox')
-            },
             isLoading: isLoading,
             maxHeight: maxHeight,
             focusedOption: focusedOption
@@ -7569,8 +7488,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         focusedValue: focusedValue,
         isFocused: isFocused,
         selectValue: selectValue,
-        focusableOptions: focusableOptions,
-        isAppleDevice: this.isAppleDevice
+        focusableOptions: focusableOptions
       }));
     }
   }, {
@@ -7619,8 +7537,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
         inputIsHiddenAfterUpdate = state.inputIsHiddenAfterUpdate,
         ariaSelection = state.ariaSelection,
         isFocused = state.isFocused,
-        prevWasFocused = state.prevWasFocused,
-        instancePrefix = state.instancePrefix;
+        prevWasFocused = state.prevWasFocused;
       var options = props.options,
         value = props.value,
         menuIsOpen = props.menuIsOpen,
@@ -7630,15 +7547,11 @@ var Select$1 = /*#__PURE__*/function (_Component) {
       var newMenuOptionsState = {};
       if (prevProps && (value !== prevProps.value || options !== prevProps.options || menuIsOpen !== prevProps.menuIsOpen || inputValue !== prevProps.inputValue)) {
         var focusableOptions = menuIsOpen ? buildFocusableOptions(props, selectValue) : [];
-        var focusableOptionsWithIds = menuIsOpen ? buildFocusableOptionsWithIds(buildCategorizedOptions(props, selectValue), "".concat(instancePrefix, "-option")) : [];
         var focusedValue = clearFocusValueOnUpdate ? getNextFocusedValue(state, selectValue) : null;
         var focusedOption = getNextFocusedOption(state, focusableOptions);
-        var focusedOptionId = getFocusedOptionId(focusableOptionsWithIds, focusedOption);
         newMenuOptionsState = {
           selectValue: selectValue,
           focusedOption: focusedOption,
-          focusedOptionId: focusedOptionId,
-          focusableOptionsWithIds: focusableOptionsWithIds,
           focusedValue: focusedValue,
           clearFocusValueOnUpdate: false
         };
@@ -7812,7 +7725,7 @@ var Spinner = function (_a) {
             React.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
 };
 
-var css_248z$1 = ".vchasno-ui-label-text {\n    position: absolute;\n    z-index: 2;\n    top: 50%;\n    left: 12px;\n    display: inline-flex;\n    max-width: calc(100% - 20px);\n    align-self: flex-start;\n    padding: 4px;\n    background-color: #fff;\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";
+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";
 styleInject(css_248z$1);
 
 var LabelText = function (_a) {