@itcase/ui 1.0.78 → 1.0.80

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.
@@ -4870,14 +4870,14 @@ var defaultAriaLiveMessages = {
4870
4870
  guidance: function guidance(props) {
4871
4871
  var isSearchable = props.isSearchable,
4872
4872
  isMulti = props.isMulti,
4873
- isDisabled = props.isDisabled,
4874
4873
  tabSelectsValue = props.tabSelectsValue,
4875
- context = props.context;
4874
+ context = props.context,
4875
+ isInitialFocus = props.isInitialFocus;
4876
4876
  switch (context) {
4877
4877
  case 'menu':
4878
- 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' : '', ".");
4878
+ 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' : '', ".");
4879
4879
  case 'input':
4880
- 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' : '');
4880
+ 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' : '') : '';
4881
4881
  case 'value':
4882
4882
  return 'Use left and right to toggle between focused values, press Backspace to remove the currently focused value';
4883
4883
  default:
@@ -4913,17 +4913,18 @@ var defaultAriaLiveMessages = {
4913
4913
  label = _props$label2 === void 0 ? '' : _props$label2,
4914
4914
  selectValue = props.selectValue,
4915
4915
  isDisabled = props.isDisabled,
4916
- isSelected = props.isSelected;
4916
+ isSelected = props.isSelected,
4917
+ isAppleDevice = props.isAppleDevice;
4917
4918
  var getArrayIndex = function getArrayIndex(arr, item) {
4918
4919
  return arr && arr.length ? "".concat(arr.indexOf(item) + 1, " of ").concat(arr.length) : '';
4919
4920
  };
4920
4921
  if (context === 'value' && selectValue) {
4921
4922
  return "value ".concat(label, " focused, ").concat(getArrayIndex(selectValue, focused), ".");
4922
4923
  }
4923
- if (context === 'menu') {
4924
+ if (context === 'menu' && isAppleDevice) {
4924
4925
  var disabled = isDisabled ? ' disabled' : '';
4925
- var status = "".concat(isSelected ? 'selected' : 'focused').concat(disabled);
4926
- return "option ".concat(label, " ").concat(status, ", ").concat(getArrayIndex(options, focused), ".");
4926
+ var status = "".concat(isSelected ? ' selected' : '').concat(disabled);
4927
+ return "".concat(label).concat(status, ", ").concat(getArrayIndex(options, focused), ".");
4927
4928
  }
4928
4929
  return '';
4929
4930
  },
@@ -4942,7 +4943,8 @@ var LiveRegion = function LiveRegion(props) {
4942
4943
  isFocused = props.isFocused,
4943
4944
  selectValue = props.selectValue,
4944
4945
  selectProps = props.selectProps,
4945
- id = props.id;
4946
+ id = props.id,
4947
+ isAppleDevice = props.isAppleDevice;
4946
4948
  var ariaLiveMessages = selectProps.ariaLiveMessages,
4947
4949
  getOptionLabel = selectProps.getOptionLabel,
4948
4950
  inputValue = selectProps.inputValue,
@@ -4952,7 +4954,8 @@ var LiveRegion = function LiveRegion(props) {
4952
4954
  menuIsOpen = selectProps.menuIsOpen,
4953
4955
  options = selectProps.options,
4954
4956
  screenReaderStatus = selectProps.screenReaderStatus,
4955
- tabSelectsValue = selectProps.tabSelectsValue;
4957
+ tabSelectsValue = selectProps.tabSelectsValue,
4958
+ isLoading = selectProps.isLoading;
4956
4959
  var ariaLabel = selectProps['aria-label'];
4957
4960
  var ariaLive = selectProps['aria-live'];
4958
4961
 
@@ -5005,15 +5008,16 @@ var LiveRegion = function LiveRegion(props) {
5005
5008
  isSelected: isSelected,
5006
5009
  options: focusableOptions,
5007
5010
  context: focused === focusedOption ? 'menu' : 'value',
5008
- selectValue: selectValue
5011
+ selectValue: selectValue,
5012
+ isAppleDevice: isAppleDevice
5009
5013
  };
5010
5014
  focusMsg = messages.onFocus(onFocusProps);
5011
5015
  }
5012
5016
  return focusMsg;
5013
- }, [focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue]);
5017
+ }, [focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isAppleDevice]);
5014
5018
  var ariaResults = React.useMemo(function () {
5015
5019
  var resultsMsg = '';
5016
- if (menuIsOpen && options.length && messages.onFilter) {
5020
+ if (menuIsOpen && options.length && !isLoading && messages.onFilter) {
5017
5021
  var resultsMessage = screenReaderStatus({
5018
5022
  count: focusableOptions.length
5019
5023
  });
@@ -5023,7 +5027,8 @@ var LiveRegion = function LiveRegion(props) {
5023
5027
  });
5024
5028
  }
5025
5029
  return resultsMsg;
5026
- }, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus]);
5030
+ }, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus, isLoading]);
5031
+ var isInitialFocus = (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus';
5027
5032
  var ariaGuidance = React.useMemo(function () {
5028
5033
  var guidanceMsg = '';
5029
5034
  if (messages.guidance) {
@@ -5034,24 +5039,28 @@ var LiveRegion = function LiveRegion(props) {
5034
5039
  isDisabled: focusedOption && isOptionDisabled(focusedOption, selectValue),
5035
5040
  isMulti: isMulti,
5036
5041
  isSearchable: isSearchable,
5037
- tabSelectsValue: tabSelectsValue
5042
+ tabSelectsValue: tabSelectsValue,
5043
+ isInitialFocus: isInitialFocus
5038
5044
  });
5039
5045
  }
5040
5046
  return guidanceMsg;
5041
- }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue]);
5042
- var ariaContext = "".concat(ariaFocused, " ").concat(ariaResults, " ").concat(ariaGuidance);
5047
+ }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
5043
5048
  var ScreenReaderText = jsx(React.Fragment, null, jsx("span", {
5044
5049
  id: "aria-selection"
5045
5050
  }, ariaSelected), jsx("span", {
5046
- id: "aria-context"
5047
- }, ariaContext));
5048
- var isInitialFocus = (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus';
5051
+ id: "aria-focused"
5052
+ }, ariaFocused), jsx("span", {
5053
+ id: "aria-results"
5054
+ }, ariaResults), jsx("span", {
5055
+ id: "aria-guidance"
5056
+ }, ariaGuidance));
5049
5057
  return jsx(React.Fragment, null, jsx(A11yText$1, {
5050
5058
  id: id
5051
5059
  }, isInitialFocus && ScreenReaderText), jsx(A11yText$1, {
5052
5060
  "aria-live": ariaLive,
5053
5061
  "aria-atomic": "false",
5054
- "aria-relevant": "additions text"
5062
+ "aria-relevant": "additions text",
5063
+ role: "log"
5055
5064
  }, isFocused && !isInitialFocus && ScreenReaderText));
5056
5065
  };
5057
5066
  var LiveRegion$1 = LiveRegion;
@@ -5691,6 +5700,30 @@ var RequiredInput = function RequiredInput(_ref) {
5691
5700
  };
5692
5701
  var RequiredInput$1 = RequiredInput;
5693
5702
 
5703
+ /// <reference types="user-agent-data-types" />
5704
+
5705
+ function testPlatform(re) {
5706
+ var _window$navigator$use;
5707
+ 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;
5708
+ }
5709
+ function isIPhone() {
5710
+ return testPlatform(/^iPhone/i);
5711
+ }
5712
+ function isMac() {
5713
+ return testPlatform(/^Mac/i);
5714
+ }
5715
+ function isIPad() {
5716
+ return testPlatform(/^iPad/i) ||
5717
+ // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
5718
+ isMac() && navigator.maxTouchPoints > 1;
5719
+ }
5720
+ function isIOS() {
5721
+ return isIPhone() || isIPad();
5722
+ }
5723
+ function isAppleDevice() {
5724
+ return isMac() || isIOS();
5725
+ }
5726
+
5694
5727
  var formatGroupLabel = function formatGroupLabel(group) {
5695
5728
  return group.label;
5696
5729
  };
@@ -5860,6 +5893,24 @@ function buildFocusableOptionsFromCategorizedOptions(categorizedOptions) {
5860
5893
  return optionsAccumulator;
5861
5894
  }, []);
5862
5895
  }
5896
+ function buildFocusableOptionsWithIds(categorizedOptions, optionId) {
5897
+ return categorizedOptions.reduce(function (optionsAccumulator, categorizedOption) {
5898
+ if (categorizedOption.type === 'group') {
5899
+ optionsAccumulator.push.apply(optionsAccumulator, _toConsumableArray(categorizedOption.options.map(function (option) {
5900
+ return {
5901
+ data: option.data,
5902
+ id: "".concat(optionId, "-").concat(categorizedOption.index, "-").concat(option.index)
5903
+ };
5904
+ })));
5905
+ } else {
5906
+ optionsAccumulator.push({
5907
+ data: categorizedOption.data,
5908
+ id: "".concat(optionId, "-").concat(categorizedOption.index)
5909
+ });
5910
+ }
5911
+ return optionsAccumulator;
5912
+ }, []);
5913
+ }
5863
5914
  function buildFocusableOptions(props, selectValue) {
5864
5915
  return buildFocusableOptionsFromCategorizedOptions(buildCategorizedOptions(props, selectValue));
5865
5916
  }
@@ -5897,6 +5948,13 @@ function getNextFocusedOption(state, options) {
5897
5948
  var lastFocusedOption = state.focusedOption;
5898
5949
  return lastFocusedOption && options.indexOf(lastFocusedOption) > -1 ? lastFocusedOption : options[0];
5899
5950
  }
5951
+ var getFocusedOptionId = function getFocusedOptionId(focusableOptionsWithIds, focusedOption) {
5952
+ var _focusableOptionsWith;
5953
+ var focusedOptionId = (_focusableOptionsWith = focusableOptionsWithIds.find(function (option) {
5954
+ return option.data === focusedOption;
5955
+ })) === null || _focusableOptionsWith === void 0 ? void 0 : _focusableOptionsWith.id;
5956
+ return focusedOptionId || null;
5957
+ };
5900
5958
  var getOptionLabel = function getOptionLabel(props, data) {
5901
5959
  return props.getOptionLabel(data);
5902
5960
  };
@@ -5947,6 +6005,8 @@ var Select = /*#__PURE__*/function (_Component) {
5947
6005
  _this.state = {
5948
6006
  ariaSelection: null,
5949
6007
  focusedOption: null,
6008
+ focusedOptionId: null,
6009
+ focusableOptionsWithIds: [],
5950
6010
  focusedValue: null,
5951
6011
  inputIsHidden: false,
5952
6012
  isFocused: false,
@@ -5954,17 +6014,18 @@ var Select = /*#__PURE__*/function (_Component) {
5954
6014
  clearFocusValueOnUpdate: false,
5955
6015
  prevWasFocused: false,
5956
6016
  inputIsHiddenAfterUpdate: undefined,
5957
- prevProps: undefined
6017
+ prevProps: undefined,
6018
+ instancePrefix: ''
5958
6019
  };
5959
6020
  _this.blockOptionHover = false;
5960
6021
  _this.isComposing = false;
5961
6022
  _this.commonProps = void 0;
5962
6023
  _this.initialTouchX = 0;
5963
6024
  _this.initialTouchY = 0;
5964
- _this.instancePrefix = '';
5965
6025
  _this.openAfterFocus = false;
5966
6026
  _this.scrollToFocusedOptionOnUpdate = false;
5967
6027
  _this.userIsDragging = void 0;
6028
+ _this.isAppleDevice = isAppleDevice();
5968
6029
  _this.controlRef = null;
5969
6030
  _this.getControlRef = function (ref) {
5970
6031
  _this.controlRef = ref;
@@ -6079,6 +6140,12 @@ var Select = /*#__PURE__*/function (_Component) {
6079
6140
  removedValue: lastSelectedValue
6080
6141
  });
6081
6142
  };
6143
+ _this.getFocusedOptionId = function (focusedOption) {
6144
+ return getFocusedOptionId(_this.state.focusableOptionsWithIds, focusedOption);
6145
+ };
6146
+ _this.getFocusableOptionsWithIds = function () {
6147
+ return buildFocusableOptionsWithIds(buildCategorizedOptions(_this.props, _this.state.selectValue), _this.getElementId('option'));
6148
+ };
6082
6149
  _this.getValue = function () {
6083
6150
  return _this.state.selectValue;
6084
6151
  };
@@ -6106,7 +6173,7 @@ var Select = /*#__PURE__*/function (_Component) {
6106
6173
  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);
6107
6174
  };
6108
6175
  _this.getElementId = function (element) {
6109
- return "".concat(_this.instancePrefix, "-").concat(element);
6176
+ return "".concat(_this.state.instancePrefix, "-").concat(element);
6110
6177
  };
6111
6178
  _this.getComponents = function () {
6112
6179
  return defaultComponents(_this.props);
@@ -6315,8 +6382,11 @@ var Select = /*#__PURE__*/function (_Component) {
6315
6382
  if (_this.blockOptionHover || _this.state.focusedOption === focusedOption) {
6316
6383
  return;
6317
6384
  }
6385
+ var options = _this.getFocusableOptions();
6386
+ var focusedOptionIndex = options.indexOf(focusedOption);
6318
6387
  _this.setState({
6319
- focusedOption: focusedOption
6388
+ focusedOption: focusedOption,
6389
+ focusedOptionId: focusedOptionIndex > -1 ? _this.getFocusedOptionId(focusedOption) : null
6320
6390
  });
6321
6391
  };
6322
6392
  _this.shouldHideSelectedOptions = function () {
@@ -6460,14 +6530,16 @@ var Select = /*#__PURE__*/function (_Component) {
6460
6530
  }
6461
6531
  event.preventDefault();
6462
6532
  };
6463
- _this.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId);
6533
+ _this.state.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId);
6464
6534
  _this.state.selectValue = cleanValue(_props.value);
6465
-
6466
6535
  // Set focusedOption if menuIsOpen is set on init (e.g. defaultMenuIsOpen)
6467
6536
  if (_props.menuIsOpen && _this.state.selectValue.length) {
6537
+ var focusableOptionsWithIds = _this.getFocusableOptionsWithIds();
6468
6538
  var focusableOptions = _this.buildFocusableOptions();
6469
6539
  var optionIndex = focusableOptions.indexOf(_this.state.selectValue[0]);
6540
+ _this.state.focusableOptionsWithIds = focusableOptionsWithIds;
6470
6541
  _this.state.focusedOption = focusableOptions[optionIndex];
6542
+ _this.state.focusedOptionId = getFocusedOptionId(focusableOptionsWithIds, focusableOptions[optionIndex]);
6471
6543
  }
6472
6544
  return _this;
6473
6545
  }
@@ -6592,7 +6664,8 @@ var Select = /*#__PURE__*/function (_Component) {
6592
6664
  this.setState({
6593
6665
  inputIsHiddenAfterUpdate: false,
6594
6666
  focusedValue: null,
6595
- focusedOption: focusableOptions[openAtIndex]
6667
+ focusedOption: focusableOptions[openAtIndex],
6668
+ focusedOptionId: this.getFocusedOptionId(focusableOptions[openAtIndex])
6596
6669
  }, function () {
6597
6670
  return _this2.onMenuOpen();
6598
6671
  });
@@ -6668,7 +6741,8 @@ var Select = /*#__PURE__*/function (_Component) {
6668
6741
  this.scrollToFocusedOptionOnUpdate = true;
6669
6742
  this.setState({
6670
6743
  focusedOption: options[nextFocus],
6671
- focusedValue: null
6744
+ focusedValue: null,
6745
+ focusedOptionId: this.getFocusedOptionId(options[nextFocus])
6672
6746
  });
6673
6747
  }
6674
6748
  }, {
@@ -6864,10 +6938,10 @@ var Select = /*#__PURE__*/function (_Component) {
6864
6938
  'aria-label': this.props['aria-label'],
6865
6939
  'aria-labelledby': this.props['aria-labelledby'],
6866
6940
  'aria-required': required,
6867
- role: 'combobox'
6941
+ role: 'combobox',
6942
+ 'aria-activedescendant': this.isAppleDevice ? undefined : this.state.focusedOptionId || ''
6868
6943
  }, menuIsOpen && {
6869
- 'aria-controls': this.getElementId('listbox'),
6870
- 'aria-owns': this.getElementId('listbox')
6944
+ 'aria-controls': this.getElementId('listbox')
6871
6945
  }), !isSearchable && {
6872
6946
  'aria-readonly': true
6873
6947
  }), this.hasValue() ? (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus' && {
@@ -7112,8 +7186,11 @@ var Select = /*#__PURE__*/function (_Component) {
7112
7186
  onClick: onSelect,
7113
7187
  onMouseMove: onHover,
7114
7188
  onMouseOver: onHover,
7115
- tabIndex: -1
7189
+ tabIndex: -1,
7190
+ role: 'option',
7191
+ 'aria-selected': _this4.isAppleDevice ? undefined : isSelected // is not supported on Apple devices
7116
7192
  };
7193
+
7117
7194
  return /*#__PURE__*/React__namespace.createElement(Option, _extends({}, commonProps, {
7118
7195
  innerProps: innerProps,
7119
7196
  data: data,
@@ -7182,8 +7259,7 @@ var Select = /*#__PURE__*/function (_Component) {
7182
7259
  innerRef: ref,
7183
7260
  innerProps: {
7184
7261
  onMouseDown: _this4.onMenuMouseDown,
7185
- onMouseMove: _this4.onMenuMouseMove,
7186
- id: _this4.getElementId('listbox')
7262
+ onMouseMove: _this4.onMenuMouseMove
7187
7263
  },
7188
7264
  isLoading: isLoading,
7189
7265
  placement: placement
@@ -7198,6 +7274,11 @@ var Select = /*#__PURE__*/function (_Component) {
7198
7274
  _this4.getMenuListRef(instance);
7199
7275
  scrollTargetRef(instance);
7200
7276
  },
7277
+ innerProps: {
7278
+ role: 'listbox',
7279
+ 'aria-multiselectable': commonProps.isMulti,
7280
+ id: _this4.getElementId('listbox')
7281
+ },
7201
7282
  isLoading: isLoading,
7202
7283
  maxHeight: maxHeight,
7203
7284
  focusedOption: focusedOption
@@ -7285,7 +7366,8 @@ var Select = /*#__PURE__*/function (_Component) {
7285
7366
  focusedValue: focusedValue,
7286
7367
  isFocused: isFocused,
7287
7368
  selectValue: selectValue,
7288
- focusableOptions: focusableOptions
7369
+ focusableOptions: focusableOptions,
7370
+ isAppleDevice: this.isAppleDevice
7289
7371
  }));
7290
7372
  }
7291
7373
  }, {
@@ -7334,7 +7416,8 @@ var Select = /*#__PURE__*/function (_Component) {
7334
7416
  inputIsHiddenAfterUpdate = state.inputIsHiddenAfterUpdate,
7335
7417
  ariaSelection = state.ariaSelection,
7336
7418
  isFocused = state.isFocused,
7337
- prevWasFocused = state.prevWasFocused;
7419
+ prevWasFocused = state.prevWasFocused,
7420
+ instancePrefix = state.instancePrefix;
7338
7421
  var options = props.options,
7339
7422
  value = props.value,
7340
7423
  menuIsOpen = props.menuIsOpen,
@@ -7344,11 +7427,15 @@ var Select = /*#__PURE__*/function (_Component) {
7344
7427
  var newMenuOptionsState = {};
7345
7428
  if (prevProps && (value !== prevProps.value || options !== prevProps.options || menuIsOpen !== prevProps.menuIsOpen || inputValue !== prevProps.inputValue)) {
7346
7429
  var focusableOptions = menuIsOpen ? buildFocusableOptions(props, selectValue) : [];
7430
+ var focusableOptionsWithIds = menuIsOpen ? buildFocusableOptionsWithIds(buildCategorizedOptions(props, selectValue), "".concat(instancePrefix, "-option")) : [];
7347
7431
  var focusedValue = clearFocusValueOnUpdate ? getNextFocusedValue(state, selectValue) : null;
7348
7432
  var focusedOption = getNextFocusedOption(state, focusableOptions);
7433
+ var focusedOptionId = getFocusedOptionId(focusableOptionsWithIds, focusedOption);
7349
7434
  newMenuOptionsState = {
7350
7435
  selectValue: selectValue,
7351
7436
  focusedOption: focusedOption,
7437
+ focusedOptionId: focusedOptionId,
7438
+ focusableOptionsWithIds: focusableOptionsWithIds,
7352
7439
  focusedValue: focusedValue,
7353
7440
  clearFocusValueOnUpdate: false
7354
7441
  };
@@ -7553,14 +7640,16 @@ var CreatableSelect$1 = CreatableSelect;
7553
7640
 
7554
7641
  const SelectControl = props => {
7555
7642
  const {
7643
+ before,
7644
+ after,
7556
7645
  inputFill,
7557
7646
  inputShape,
7558
7647
  inputBorderColor,
7559
7648
  inputBorderColorHover
7560
7649
  } = props.selectProps;
7561
- return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.Control, Object.assign({}, props, {
7650
+ return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, before, /*#__PURE__*/React__namespace.default.createElement(Select$1.components.Control, Object.assign({}, props, {
7562
7651
  className: clsx__default.default('select__control', inputFill, inputShape, inputBorderColor && `border-color_${inputBorderColor}`, inputBorderColorHover && `border-color_hover_${inputBorderColorHover}`)
7563
- }));
7652
+ })), after);
7564
7653
  };
7565
7654
  SelectControl.propTypes = {
7566
7655
  selectProps: PropTypes__default.default.shape({
@@ -7737,13 +7826,15 @@ SelectInput.__docgenInfo = {
7737
7826
 
7738
7827
  const SelectMenu = props => {
7739
7828
  const {
7740
- elevation
7829
+ elevation,
7830
+ menuAfter,
7831
+ menuBefore
7741
7832
  } = props.selectProps;
7742
7833
  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.Menu, Object.assign({}, props, {
7743
7834
  className: clsx__default.default(elevation && `elevation_${elevation}`)
7744
- }), props.selectProps.fetchingData ? /*#__PURE__*/React__namespace.default.createElement("span", {
7835
+ }), menuBefore, props.selectProps.fetchingData ? /*#__PURE__*/React__namespace.default.createElement("span", {
7745
7836
  className: "fetching"
7746
- }, "Fetching data...") : /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, props.children));
7837
+ }, "Fetching data...") : /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, props.children), menuAfter);
7747
7838
  };
7748
7839
  SelectMenu.propTypes = {
7749
7840
  selectProps: PropTypes__default.default.shape({
@@ -8154,7 +8245,11 @@ const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(functio
8154
8245
  }), []);
8155
8246
  const {
8156
8247
  className,
8248
+ after,
8249
+ before,
8157
8250
  hideSelectedOptions,
8251
+ menuAfter,
8252
+ menuBefore,
8158
8253
  clearIcon,
8159
8254
  clearIconFill,
8160
8255
  clearIconStroke,
@@ -8316,6 +8411,10 @@ const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(functio
8316
8411
  classNamePrefix: "select",
8317
8412
  styles: clearStyle,
8318
8413
  value: value,
8414
+ after: after,
8415
+ before: before,
8416
+ menuAfter: menuAfter,
8417
+ menuBefore: menuBefore,
8319
8418
  elevation: elevation,
8320
8419
  isClearable: isClearable,
8321
8420
  openMenuOnClick: openMenuOnClick,
@@ -2385,6 +2385,10 @@ function loopFix(_temp) {
2385
2385
  }
2386
2386
  }
2387
2387
  }
2388
+ swiper.__preventObserver__ = true;
2389
+ requestAnimationFrame(() => {
2390
+ swiper.__preventObserver__ = false;
2391
+ });
2388
2392
  if (isPrev) {
2389
2393
  prependSlidesIndexes.forEach(index => {
2390
2394
  slides[index].swiperLoopMoveDOM = true;
@@ -2782,7 +2786,7 @@ function onTouchMove(event) {
2782
2786
  data.startMoving = true;
2783
2787
  }
2784
2788
  }
2785
- if (data.isScrolling || swiper.zoom && swiper.params.zoom && swiper.params.zoom.enabled) {
2789
+ if (data.isScrolling) {
2786
2790
  data.isTouched = false;
2787
2791
  return;
2788
2792
  }
@@ -4660,7 +4664,7 @@ const updateOnVirtualData = swiper => {
4660
4664
  };
4661
4665
 
4662
4666
  /**
4663
- * Swiper React 11.0.2
4667
+ * Swiper React 11.0.3
4664
4668
  * Most modern mobile touch slider and framework with hardware accelerated transitions
4665
4669
  * https://swiperjs.com
4666
4670
  *
@@ -4668,7 +4672,7 @@ const updateOnVirtualData = swiper => {
4668
4672
  *
4669
4673
  * Released under the MIT License
4670
4674
  *
4671
- * Released on: October 25, 2023
4675
+ * Released on: October 26, 2023
4672
4676
  */
4673
4677
 
4674
4678
 
@@ -1,5 +1,5 @@
1
1
  'use strict';
2
2
 
3
- const sizeProps = [null, 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'];
3
+ const sizeProps = [null, 'normal', 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', '16', '24', '32', '40', '56', '64', '96', '144'];
4
4
 
5
5
  exports.default = sizeProps;
@@ -1,5 +1,5 @@
1
1
  'use strict';
2
2
 
3
- const textColorProps = [null, 'accentTextPrimary', 'accentTextSecondary', 'accentTextTertiary', 'primaryTextPrimary', 'primaryTextSecondary', 'primaryTextTertiary', 'secondaryTextPrimary', 'secondaryTextSecondary', 'secondaryTextTertiary', 'tertiaryTextPrimary', 'tertiaryTextSecondary', 'surfaceTextPrimary', 'surfaceTextSecondary', 'surfaceTextTertiary', 'surfaceTextQuaternary', 'surfaceTextHover', 'surfaceTextFocus', 'surfaceTextActive', 'surfaceTextDisabled', 'errorTextPrimary', 'errorTextSecondary', 'successTextPrimary', 'successTextSecondary'];
3
+ const textColorProps = [null, 'accentTextPrimary', 'accentTextSecondary', 'accentTextTertiary', 'primaryTextPrimary', 'primaryTextSecondary', 'primaryTextTertiary', 'secondaryTextPrimary', 'secondaryTextSecondary', 'secondaryTextTertiary', 'tertiaryTextPrimary', 'tertiaryTextSecondary', 'surfaceTextPrimary', 'surfaceTextSecondary', 'surfaceTextTertiary', 'surfaceTextQuaternary', 'surfaceTextAccent', 'surfaceTextHover', 'surfaceTextFocus', 'surfaceTextActive', 'surfaceTextDisabled', 'errorTextPrimary', 'errorTextSecondary', 'successTextPrimary', 'successTextSecondary'];
4
4
 
5
5
  exports.default = textColorProps;
@@ -1,5 +1,5 @@
1
1
  'use strict';
2
2
 
3
- const textColorActiveProps = [null, 'accent', 'primary', 'secondary', 'tertiary', 'surface', 'error', 'success'];
3
+ const textColorActiveProps = [null, false, 'accent', 'primary', 'secondary', 'tertiary', 'surface', 'error', 'success'];
4
4
 
5
5
  exports.default = textColorActiveProps;
@@ -1,5 +1,5 @@
1
1
  'use strict';
2
2
 
3
- const textColorHoverProps = [null, 'accent', 'primary', 'secondary', 'tertiary', 'surface', 'error', 'success'];
3
+ const textColorHoverProps = [null, 'accent', 'primary', 'secondary', 'tertiary', 'surface', 'error', 'success', 'surfaceTextAccent'];
4
4
 
5
5
  exports.default = textColorHoverProps;
@@ -31,6 +31,20 @@
31
31
  }
32
32
  }
33
33
  }
34
+ .badge {
35
+ &_type_status {
36
+ &.badge_size {
37
+ @each $size in xxs, xs, s, m, l, xl, xxl {
38
+ &_$(size) {
39
+ min-width: var(--badge-status-width-size-$(size));
40
+ min-height: var(--badge-status-height-size-$(size));
41
+ max-width: var(--badge-status-width-size-$(size));
42
+ max-height: var(--badge-status-height-size-$(size));
43
+ }
44
+ }
45
+ }
46
+ }
47
+ }
34
48
  .badge {
35
49
  &_shape {
36
50
  &_rounded {
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Swiper 11.0.2
2
+ * Swiper 11.0.3
3
3
  * Most modern mobile touch slider and framework with hardware accelerated transitions
4
4
  * https://swiperjs.com
5
5
  *
@@ -7,7 +7,7 @@
7
7
  *
8
8
  * Released under the MIT License
9
9
  *
10
- * Released on: October 25, 2023
10
+ * Released on: October 26, 2023
11
11
  */
12
12
 
13
13
  /* FONT_START */
@@ -28,7 +28,7 @@ var styleAttributes = [
28
28
  /**
29
29
  * Grid
30
30
  */
31
- 'gridTemplateColumns', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateRows',
31
+ 'gridTemplateColumns', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateRows', 'gridColumnGap', 'gridRowGap',
32
32
  /**
33
33
  * Filter
34
34
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itcase/ui",
3
- "version": "1.0.78",
3
+ "version": "1.0.80",
4
4
  "description": "UI components (Modal, Loader, Popup, etc)",
5
5
  "keywords": [
6
6
  "Modal",
@@ -40,26 +40,26 @@
40
40
  "registry": "https://registry.npmjs.org/"
41
41
  },
42
42
  "dependencies": {
43
- "@itcase/common": "^1.1.8",
43
+ "@itcase/common": "^1.1.9",
44
44
  "clsx": "^2.0.0",
45
45
  "html5-boilerplate": "^8.0.0",
46
46
  "js-cookie": "^3.0.5",
47
47
  "lodash": "^4.17.21",
48
48
  "luxon": "^3.4.3",
49
49
  "prop-types": "^15.8.1",
50
- "rc-slider": "^10.3.1",
50
+ "rc-slider": "^10.4.0",
51
51
  "react": "^18.2.0",
52
52
  "react-dadata": "^2.23.1",
53
53
  "react-date-range": "^1.4.0",
54
54
  "react-dom": "^18.2.0",
55
- "react-inlinesvg": "^4.0.6",
55
+ "react-inlinesvg": "^4.1.0",
56
56
  "react-modern-drawer": "^1.2.2",
57
57
  "react-otp-input": "^3.1.0",
58
58
  "react-paginate": "^8.2.0",
59
59
  "react-responsive": "^9.0.2",
60
60
  "react-scrollbars-custom": "^4.1.1",
61
- "react-select": "^5.7.7",
62
- "swiper": "^11.0.2",
61
+ "react-select": "^5.8.0",
62
+ "swiper": "^11.0.3",
63
63
  "uuid": "^9.0.1"
64
64
  },
65
65
  "devDependencies": {
@@ -67,7 +67,7 @@
67
67
  "@babel/eslint-parser": "^7.22.15",
68
68
  "@babel/preset-env": "^7.23.2",
69
69
  "@babel/preset-react": "^7.22.15",
70
- "@commitlint/cli": "^18.1.0",
70
+ "@commitlint/cli": "^18.2.0",
71
71
  "@commitlint/config-conventional": "^18.1.0",
72
72
  "@rollup/plugin-babel": "^6.0.4",
73
73
  "@rollup/plugin-commonjs": "^25.0.7",
@@ -76,17 +76,17 @@
76
76
  "@rollup/plugin-terser": "^0.4.4",
77
77
  "@semantic-release/changelog": "^6.0.3",
78
78
  "@semantic-release/git": "^10.0.1",
79
- "@semantic-release/release-notes-generator": "^12.0.0",
79
+ "@semantic-release/release-notes-generator": "^12.1.0",
80
80
  "babel-loader": "^9.1.3",
81
81
  "babel-plugin-inline-react-svg": "^2.0.2",
82
82
  "babel-plugin-react-docgen": "^4.2.1",
83
83
  "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
84
- "eslint": "8.52.0",
84
+ "eslint": "8.53.0",
85
85
  "eslint-config-prettier": "^9.0.0",
86
86
  "eslint-config-standard": "^17.1.0",
87
87
  "eslint-plugin-babel": "^5.3.1",
88
88
  "eslint-plugin-import": "^2.29.0",
89
- "eslint-plugin-n": "^16.2.0",
89
+ "eslint-plugin-n": "^16.3.0",
90
90
  "eslint-plugin-node": "^11.1.0",
91
91
  "eslint-plugin-prettier": "^5.0.1",
92
92
  "eslint-plugin-promise": "^6.1.1",
@@ -95,7 +95,7 @@
95
95
  "eslint-plugin-standard": "^5.0.0",
96
96
  "husky": "^8.0.3",
97
97
  "lint-staged": "^15.0.2",
98
- "npm": "^10.2.1",
98
+ "npm": "^10.2.3",
99
99
  "postcss": "^8.4.31",
100
100
  "postcss-aspect-ratio-polyfill": "^2.0.0",
101
101
  "postcss-cli": "^10.1.0",
@@ -114,15 +114,15 @@
114
114
  "postcss-nested-ancestors": "^3.0.0",
115
115
  "postcss-normalize": "^10.0.1",
116
116
  "postcss-prepend-imports": "^1.0.1",
117
- "postcss-preset-env": "^9.2.0",
117
+ "postcss-preset-env": "^9.3.0",
118
118
  "postcss-pxtorem": "^6.0.0",
119
119
  "postcss-responsive-type": "github:ITCase/postcss-responsive-type",
120
120
  "postcss-sort-media-queries": "^5.2.0",
121
121
  "prettier": "^3.0.3",
122
122
  "react-datepicker": "^4.21.0",
123
- "rollup": "^4.1.4",
123
+ "rollup": "^4.3.0",
124
124
  "rollup-plugin-peer-deps-external": "^2.2.4",
125
- "semantic-release": "^22.0.5",
125
+ "semantic-release": "^22.0.7",
126
126
  "stylelint": "^15.11.0",
127
127
  "stylelint-config-standard": "^34.0.0",
128
128
  "stylelint-no-unsupported-browser-features": "^7.0.0",