@hh.ru/magritte-ui-select 5.2.3 → 5.2.4

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.
Files changed (10) hide show
  1. package/Select.js +1 -1
  2. package/{SelectActivator-e267c8a9.js → SelectActivator-08a9b088.js} +2 -2
  3. package/{SelectActivator-e267c8a9.js.map → SelectActivator-08a9b088.js.map} +1 -1
  4. package/SelectActivator.js +1 -1
  5. package/SelectForDesktopDevice.js +1 -1
  6. package/SelectForMobileDevice.js +1 -1
  7. package/UncontrolledSelect.js +1 -1
  8. package/index.css +44 -44
  9. package/index.js +1 -1
  10. package/package.json +10 -10
package/Select.js CHANGED
@@ -13,7 +13,7 @@ import '@hh.ru/magritte-ui-card';
13
13
  import '@hh.ru/magritte-ui-cell';
14
14
  import '@hh.ru/magritte-ui-drop';
15
15
  import '@hh.ru/magritte-ui-icon/icon';
16
- import './SelectActivator-e267c8a9.js';
16
+ import './SelectActivator-08a9b088.js';
17
17
  import 'classnames';
18
18
  import '@hh.ru/magritte-ui-counter';
19
19
  import '@hh.ru/magritte-ui-form-helper';
package/{SelectActivator-e267c8a9.js → SelectActivator-08a9b088.js} RENAMED
@@ -9,7 +9,7 @@ import { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
9
9
  import { BaseInput } from '@hh.ru/magritte-ui-input/BaseInput';
10
10
  import { Text } from '@hh.ru/magritte-ui-typography';
11
11
 
12
- var styles = {"select-activator":"magritte-select-activator___9XXwA_5-2-3","selectActivator":"magritte-select-activator___9XXwA_5-2-3","select-activator-label":"magritte-select-activator-label___Mc49R_5-2-3","selectActivatorLabel":"magritte-select-activator-label___Mc49R_5-2-3","select-activator-placeholder":"magritte-select-activator-placeholder___7ODSn_5-2-3","selectActivatorPlaceholder":"magritte-select-activator-placeholder___7ODSn_5-2-3","select-activator-value":"magritte-select-activator-value___wDbVR_5-2-3","selectActivatorValue":"magritte-select-activator-value___wDbVR_5-2-3","select-activator-chevron":"magritte-select-activator-chevron___DHIUH_5-2-3","selectActivatorChevron":"magritte-select-activator-chevron___DHIUH_5-2-3","select-activator-disabled":"magritte-select-activator-disabled___mYKi2_5-2-3","selectActivatorDisabled":"magritte-select-activator-disabled___mYKi2_5-2-3","select-activator-item":"magritte-select-activator-item___JsY4v_5-2-3","selectActivatorItem":"magritte-select-activator-item___JsY4v_5-2-3","select-activator-invalid":"magritte-select-activator-invalid___IdlRp_5-2-3","selectActivatorInvalid":"magritte-select-activator-invalid___IdlRp_5-2-3","select-activator-size-large":"magritte-select-activator-size-large___MIXAH_5-2-3","selectActivatorSizeLarge":"magritte-select-activator-size-large___MIXAH_5-2-3","select-activator-with-label":"magritte-select-activator-with-label___DwcKr_5-2-3","selectActivatorWithLabel":"magritte-select-activator-with-label___DwcKr_5-2-3","select-activator-label-root":"magritte-select-activator-label-root___eYIWQ_5-2-3","selectActivatorLabelRoot":"magritte-select-activator-label-root___eYIWQ_5-2-3","select-activator-has-counter":"magritte-select-activator-has-counter___k2Kc2_5-2-3","selectActivatorHasCounter":"magritte-select-activator-has-counter___k2Kc2_5-2-3","select-activator-ellipsis":"magritte-select-activator-ellipsis___16zkC_5-2-3","selectActivatorEllipsis":"magritte-select-activator-ellipsis___16zkC_5-2-3","select-activator-chevron-animation-timeout":"magritte-select-activator-chevron-animation-timeout___y19bf_5-2-3","selectActivatorChevronAnimationTimeout":"magritte-select-activator-chevron-animation-timeout___y19bf_5-2-3","select-activator-chevron-up":"magritte-select-activator-chevron-up___gtPyi_5-2-3","selectActivatorChevronUp":"magritte-select-activator-chevron-up___gtPyi_5-2-3","select-options":"magritte-select-options___y2KYZ_5-2-3","selectOptions":"magritte-select-options___y2KYZ_5-2-3","select-options-xs":"magritte-select-options-xs___BiiPo_5-2-3","selectOptionsXs":"magritte-select-options-xs___BiiPo_5-2-3","optionDelimiter":"magritte-optionDelimiter___OaKsB_5-2-3"};
12
+ var styles = {"select-activator":"magritte-select-activator___9XXwA_5-2-4","selectActivator":"magritte-select-activator___9XXwA_5-2-4","select-activator-label":"magritte-select-activator-label___Mc49R_5-2-4","selectActivatorLabel":"magritte-select-activator-label___Mc49R_5-2-4","select-activator-placeholder":"magritte-select-activator-placeholder___7ODSn_5-2-4","selectActivatorPlaceholder":"magritte-select-activator-placeholder___7ODSn_5-2-4","select-activator-value":"magritte-select-activator-value___wDbVR_5-2-4","selectActivatorValue":"magritte-select-activator-value___wDbVR_5-2-4","select-activator-chevron":"magritte-select-activator-chevron___DHIUH_5-2-4","selectActivatorChevron":"magritte-select-activator-chevron___DHIUH_5-2-4","select-activator-disabled":"magritte-select-activator-disabled___mYKi2_5-2-4","selectActivatorDisabled":"magritte-select-activator-disabled___mYKi2_5-2-4","select-activator-item":"magritte-select-activator-item___JsY4v_5-2-4","selectActivatorItem":"magritte-select-activator-item___JsY4v_5-2-4","select-activator-invalid":"magritte-select-activator-invalid___IdlRp_5-2-4","selectActivatorInvalid":"magritte-select-activator-invalid___IdlRp_5-2-4","select-activator-size-large":"magritte-select-activator-size-large___MIXAH_5-2-4","selectActivatorSizeLarge":"magritte-select-activator-size-large___MIXAH_5-2-4","select-activator-with-label":"magritte-select-activator-with-label___DwcKr_5-2-4","selectActivatorWithLabel":"magritte-select-activator-with-label___DwcKr_5-2-4","select-activator-label-root":"magritte-select-activator-label-root___eYIWQ_5-2-4","selectActivatorLabelRoot":"magritte-select-activator-label-root___eYIWQ_5-2-4","select-activator-has-counter":"magritte-select-activator-has-counter___k2Kc2_5-2-4","selectActivatorHasCounter":"magritte-select-activator-has-counter___k2Kc2_5-2-4","select-activator-ellipsis":"magritte-select-activator-ellipsis___16zkC_5-2-4","selectActivatorEllipsis":"magritte-select-activator-ellipsis___16zkC_5-2-4","select-activator-chevron-animation-timeout":"magritte-select-activator-chevron-animation-timeout___y19bf_5-2-4","selectActivatorChevronAnimationTimeout":"magritte-select-activator-chevron-animation-timeout___y19bf_5-2-4","select-activator-chevron-up":"magritte-select-activator-chevron-up___gtPyi_5-2-4","selectActivatorChevronUp":"magritte-select-activator-chevron-up___gtPyi_5-2-4","select-options":"magritte-select-options___y2KYZ_5-2-4","selectOptions":"magritte-select-options___y2KYZ_5-2-4","select-options-xs":"magritte-select-options-xs___BiiPo_5-2-4","selectOptionsXs":"magritte-select-options-xs___BiiPo_5-2-4","optionDelimiter":"magritte-optionDelimiter___OaKsB_5-2-4"};
13
13
 
14
14
  const SelectActivator = forwardRef(({ placeholder, size = 'medium', elevatePlaceholder = false, disabled = false, multiple, invalid = false, searchable = false, selectedOptions, onClick, onFocus, onBlur, searchValue, setSearchValue, description, errorMessage, visible, dropRef, searchRef, }, ref) => {
15
15
  const prevVisibleRef = useRef(visible);
@@ -84,4 +84,4 @@ const renderSelectActivator = (props) => {
84
84
  };
85
85
 
86
86
  export { SelectActivator as S, renderSelectActivator as r, styles as s };
87
- //# sourceMappingURL=SelectActivator-e267c8a9.js.map
87
+ //# sourceMappingURL=SelectActivator-08a9b088.js.map
package/{SelectActivator-e267c8a9.js.map → SelectActivator-08a9b088.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"SelectActivator-e267c8a9.js","sources":["../src/SelectActivator.tsx"],"sourcesContent":["import { type ForwardedRef, type ReactNode, forwardRef, useEffect, Fragment, useRef, RefObject } from 'react';\nimport classnames from 'classnames';\n\nimport { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';\nimport { Counter } from '@hh.ru/magritte-ui-counter';\nimport { FormHelper } from '@hh.ru/magritte-ui-form-helper';\nimport { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { BaseInput } from '@hh.ru/magritte-ui-input/BaseInput';\nimport { type SelectActivatorProps } from '@hh.ru/magritte-ui-select/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './styles.less';\n\nconst SelectActivator = forwardRef(\n <T,>(\n {\n placeholder,\n size = 'medium',\n elevatePlaceholder = false,\n disabled = false,\n multiple,\n invalid = false,\n searchable = false,\n selectedOptions,\n onClick,\n onFocus,\n onBlur,\n searchValue,\n setSearchValue,\n description,\n errorMessage,\n visible,\n dropRef,\n searchRef,\n }: SelectActivatorProps<T>,\n ref: ForwardedRef<HTMLElement>\n ) => {\n const prevVisibleRef = useRef(visible);\n const focusedRef = useRef(false);\n const counter = multiple ? selectedOptions?.length ?? 0 : 0;\n const value = selectedOptions?.map(({ label, value }, index) => (\n <Fragment key={value}>\n {label}\n {index === selectedOptions.length - 1 ? '' : ', '}\n </Fragment>\n ));\n\n const hintContent = (\n <FormHelper\n key=\"hint\"\n description={description}\n errorMessage={errorMessage}\n disabled={disabled}\n invalid={invalid && !visible}\n />\n );\n\n useEffect(() => {\n if (prevVisibleRef.current && !visible) {\n onBlur?.();\n } else if (visible) {\n onFocus?.();\n }\n prevVisibleRef.current = visible;\n }, [visible, onBlur, onFocus]);\n\n if (searchable && visible) {\n const sizeProp = size === 'large' ? ({ size: 'large' } as const) : ({ size: 'medium' } as const);\n\n return (\n <>\n <BaseInput\n {...sizeProp}\n wrapperRef={ref as ForwardedRef<HTMLDivElement> | undefined}\n onKeyDown={(event) => {\n if (\n dropRef?.current &&\n keyboardMatches(event.nativeEvent, [keyboardKeys.ArrowDown, keyboardKeys.Tab])\n ) {\n const focusableElement = dropRef.current.querySelector(\n '[data-magritte-option-first-active-element]'\n ) as HTMLElement;\n event.preventDefault();\n event.stopPropagation();\n focusableElement?.focus();\n }\n if (visible && keyboardMatches(event.nativeEvent, [keyboardKeys.Escape])) {\n event.stopPropagation();\n const dropHost = dropRef?.current || document.body;\n dropHost?.dispatchEvent(\n new KeyboardEvent(event.type, { key: event.key, code: event.code })\n );\n }\n }}\n ref={(input) => {\n input?.focus();\n if (searchRef) {\n searchRef.current = input;\n }\n }}\n value={searchValue}\n onChange={setSearchValue}\n data-qa=\"magritte-select-activator-input\"\n placeholder={selectedOptions.length > 0 ? value : placeholder}\n counter={counter === 0 ? undefined : counter}\n autoComplete=\"off\"\n />\n {hintContent}\n </>\n );\n }\n\n const showValue = selectedOptions.length > 0;\n const showPlaceholder = !!(placeholder && !showValue);\n const isLargeSize = size === 'large';\n const showLabel = !!(isLargeSize && placeholder && elevatePlaceholder && showValue);\n\n return (\n <>\n <div\n ref={ref as RefObject<HTMLDivElement>}\n data-qa=\"magritte-select-activator\"\n className={classnames(styles.selectActivator, {\n [styles.selectActivatorSizeLarge]: isLargeSize,\n [styles.selectActivatorWithLabel]: showLabel,\n [styles.selectActivatorHasCounter]: counter > 0,\n [styles.selectActivatorDisabled]: disabled,\n [styles.selectActivatorInvalid]: invalid,\n })}\n onClick={() => {\n if (disabled) {\n return;\n }\n\n if (!focusedRef.current) {\n onClick(!visible);\n }\n focusedRef.current = false;\n }}\n onFocus={() => {\n if (disabled) {\n return;\n }\n onClick(true);\n focusedRef.current = true;\n }}\n onBlur={() => {\n focusedRef.current = false;\n }}\n tabIndex={disabled ? -1 : 0}\n >\n <div className={styles.selectActivatorLabelRoot}>\n {showPlaceholder && (\n <div className={styles.selectActivatorPlaceholder}>\n <Text typography=\"label-2-regular\">\n <div className={styles.selectActivatorEllipsis}>{placeholder}</div>\n </Text>\n </div>\n )}\n {showLabel && (\n <div className={styles.selectActivatorLabel}>\n <Text typography=\"label-4-regular\">\n <div className={styles.selectActivatorEllipsis}>{placeholder}</div>\n </Text>\n </div>\n )}\n {showValue && (\n <div className={styles.selectActivatorValue}>\n <Text typography=\"label-2-regular\">\n <div className={styles.selectActivatorEllipsis}>{value}</div>\n </Text>\n </div>\n )}\n </div>\n <div className={styles.selectActivatorItem}>\n {counter > 0 && <Counter label={counter} />}\n <div\n className={classnames(styles.selectActivatorChevron, {\n [styles.selectActivatorChevronUp]: visible,\n })}\n >\n <ChevronDownOutlinedSize24 />\n </div>\n </div>\n </div>\n {hintContent}\n </>\n );\n }\n);\n\nSelectActivator.displayName = 'SelectActivator';\n\nconst renderSelectActivator = <T,>(props: SelectActivatorProps<T>): ReactNode => {\n return <SelectActivator {...props} />;\n};\n\nexport { SelectActivator, renderSelectActivator };\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
1
+ {"version":3,"file":"SelectActivator-08a9b088.js","sources":["../src/SelectActivator.tsx"],"sourcesContent":["import { type ForwardedRef, type ReactNode, forwardRef, useEffect, Fragment, useRef, RefObject } from 'react';\nimport classnames from 'classnames';\n\nimport { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';\nimport { Counter } from '@hh.ru/magritte-ui-counter';\nimport { FormHelper } from '@hh.ru/magritte-ui-form-helper';\nimport { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { BaseInput } from '@hh.ru/magritte-ui-input/BaseInput';\nimport { type SelectActivatorProps } from '@hh.ru/magritte-ui-select/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './styles.less';\n\nconst SelectActivator = forwardRef(\n <T,>(\n {\n placeholder,\n size = 'medium',\n elevatePlaceholder = false,\n disabled = false,\n multiple,\n invalid = false,\n searchable = false,\n selectedOptions,\n onClick,\n onFocus,\n onBlur,\n searchValue,\n setSearchValue,\n description,\n errorMessage,\n visible,\n dropRef,\n searchRef,\n }: SelectActivatorProps<T>,\n ref: ForwardedRef<HTMLElement>\n ) => {\n const prevVisibleRef = useRef(visible);\n const focusedRef = useRef(false);\n const counter = multiple ? selectedOptions?.length ?? 0 : 0;\n const value = selectedOptions?.map(({ label, value }, index) => (\n <Fragment key={value}>\n {label}\n {index === selectedOptions.length - 1 ? '' : ', '}\n </Fragment>\n ));\n\n const hintContent = (\n <FormHelper\n key=\"hint\"\n description={description}\n errorMessage={errorMessage}\n disabled={disabled}\n invalid={invalid && !visible}\n />\n );\n\n useEffect(() => {\n if (prevVisibleRef.current && !visible) {\n onBlur?.();\n } else if (visible) {\n onFocus?.();\n }\n prevVisibleRef.current = visible;\n }, [visible, onBlur, onFocus]);\n\n if (searchable && visible) {\n const sizeProp = size === 'large' ? ({ size: 'large' } as const) : ({ size: 'medium' } as const);\n\n return (\n <>\n <BaseInput\n {...sizeProp}\n wrapperRef={ref as ForwardedRef<HTMLDivElement> | undefined}\n onKeyDown={(event) => {\n if (\n dropRef?.current &&\n keyboardMatches(event.nativeEvent, [keyboardKeys.ArrowDown, keyboardKeys.Tab])\n ) {\n const focusableElement = dropRef.current.querySelector(\n '[data-magritte-option-first-active-element]'\n ) as HTMLElement;\n event.preventDefault();\n event.stopPropagation();\n focusableElement?.focus();\n }\n if (visible && keyboardMatches(event.nativeEvent, [keyboardKeys.Escape])) {\n event.stopPropagation();\n const dropHost = dropRef?.current || document.body;\n dropHost?.dispatchEvent(\n new KeyboardEvent(event.type, { key: event.key, code: event.code })\n );\n }\n }}\n ref={(input) => {\n input?.focus();\n if (searchRef) {\n searchRef.current = input;\n }\n }}\n value={searchValue}\n onChange={setSearchValue}\n data-qa=\"magritte-select-activator-input\"\n placeholder={selectedOptions.length > 0 ? value : placeholder}\n counter={counter === 0 ? undefined : counter}\n autoComplete=\"off\"\n />\n {hintContent}\n </>\n );\n }\n\n const showValue = selectedOptions.length > 0;\n const showPlaceholder = !!(placeholder && !showValue);\n const isLargeSize = size === 'large';\n const showLabel = !!(isLargeSize && placeholder && elevatePlaceholder && showValue);\n\n return (\n <>\n <div\n ref={ref as RefObject<HTMLDivElement>}\n data-qa=\"magritte-select-activator\"\n className={classnames(styles.selectActivator, {\n [styles.selectActivatorSizeLarge]: isLargeSize,\n [styles.selectActivatorWithLabel]: showLabel,\n [styles.selectActivatorHasCounter]: counter > 0,\n [styles.selectActivatorDisabled]: disabled,\n [styles.selectActivatorInvalid]: invalid,\n })}\n onClick={() => {\n if (disabled) {\n return;\n }\n\n if (!focusedRef.current) {\n onClick(!visible);\n }\n focusedRef.current = false;\n }}\n onFocus={() => {\n if (disabled) {\n return;\n }\n onClick(true);\n focusedRef.current = true;\n }}\n onBlur={() => {\n focusedRef.current = false;\n }}\n tabIndex={disabled ? -1 : 0}\n >\n <div className={styles.selectActivatorLabelRoot}>\n {showPlaceholder && (\n <div className={styles.selectActivatorPlaceholder}>\n <Text typography=\"label-2-regular\">\n <div className={styles.selectActivatorEllipsis}>{placeholder}</div>\n </Text>\n </div>\n )}\n {showLabel && (\n <div className={styles.selectActivatorLabel}>\n <Text typography=\"label-4-regular\">\n <div className={styles.selectActivatorEllipsis}>{placeholder}</div>\n </Text>\n </div>\n )}\n {showValue && (\n <div className={styles.selectActivatorValue}>\n <Text typography=\"label-2-regular\">\n <div className={styles.selectActivatorEllipsis}>{value}</div>\n </Text>\n </div>\n )}\n </div>\n <div className={styles.selectActivatorItem}>\n {counter > 0 && <Counter label={counter} />}\n <div\n className={classnames(styles.selectActivatorChevron, {\n [styles.selectActivatorChevronUp]: visible,\n })}\n >\n <ChevronDownOutlinedSize24 />\n </div>\n </div>\n </div>\n {hintContent}\n </>\n );\n }\n);\n\nSelectActivator.displayName = 'SelectActivator';\n\nconst renderSelectActivator = <T,>(props: SelectActivatorProps<T>): ReactNode => {\n return <SelectActivator {...props} />;\n};\n\nexport { SelectActivator, renderSelectActivator };\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
package/SelectActivator.js CHANGED
@@ -8,5 +8,5 @@ import '@hh.ru/magritte-ui-form-helper';
8
8
  import '@hh.ru/magritte-ui-icon/icon';
9
9
  import '@hh.ru/magritte-ui-input/BaseInput';
10
10
  import '@hh.ru/magritte-ui-typography';
11
- export { S as SelectActivator, r as renderSelectActivator } from './SelectActivator-e267c8a9.js';
11
+ export { S as SelectActivator, r as renderSelectActivator } from './SelectActivator-08a9b088.js';
12
12
  //# sourceMappingURL=SelectActivator.js.map
package/SelectForDesktopDevice.js CHANGED
@@ -7,7 +7,7 @@ import { Card } from '@hh.ru/magritte-ui-card';
7
7
  import { Cell, CellText } from '@hh.ru/magritte-ui-cell';
8
8
  import { Drop } from '@hh.ru/magritte-ui-drop';
9
9
  import { CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
10
- import { S as SelectActivator, s as styles } from './SelectActivator-e267c8a9.js';
10
+ import { S as SelectActivator, s as styles } from './SelectActivator-08a9b088.js';
11
11
  import { SelectOption } from './SelectOption.js';
12
12
  import { getChecked } from './getChecked.js';
13
13
  import 'classnames';
package/SelectForMobileDevice.js CHANGED
@@ -5,7 +5,7 @@ import { BottomSheet, BottomSheetFooter } from '@hh.ru/magritte-ui-bottom-sheet'
5
5
  import { CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
6
6
  import { SearchInput } from '@hh.ru/magritte-ui-input';
7
7
  import { NavigationBar } from '@hh.ru/magritte-ui-navigation-bar';
8
- import { s as styles, r as renderSelectActivator } from './SelectActivator-e267c8a9.js';
8
+ import { s as styles, r as renderSelectActivator } from './SelectActivator-08a9b088.js';
9
9
  import { SelectOption } from './SelectOption.js';
10
10
  import { getChecked } from './getChecked.js';
11
11
  import 'classnames';
package/UncontrolledSelect.js CHANGED
@@ -11,7 +11,7 @@ import '@hh.ru/magritte-ui-card';
11
11
  import '@hh.ru/magritte-ui-cell';
12
12
  import '@hh.ru/magritte-ui-drop';
13
13
  import '@hh.ru/magritte-ui-icon/icon';
14
- import './SelectActivator-e267c8a9.js';
14
+ import './SelectActivator-08a9b088.js';
15
15
  import 'classnames';
16
16
  import '@hh.ru/magritte-ui-counter';
17
17
  import '@hh.ru/magritte-ui-form-helper';
package/index.css CHANGED
@@ -76,7 +76,7 @@
76
76
  --magritte-color-component-input-icon-state-content-disabled-v18-1-2:#474747;
77
77
  --magritte-color-component-input-icon-content-v18-1-2:#ABABAB;
78
78
  }
79
- .magritte-select-activator___9XXwA_5-2-3{
79
+ .magritte-select-activator___9XXwA_5-2-4{
80
80
  display:flex;
81
81
  flex:1 0 0;
82
82
  align-items:center;
@@ -91,152 +91,152 @@
91
91
  user-select:none;
92
92
  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-content-v18-1-2);
93
93
  }
94
- .magritte-select-activator___9XXwA_5-2-3:focus{
94
+ .magritte-select-activator___9XXwA_5-2-4:focus{
95
95
  background-color:var(--magritte-color-component-input-background-state-field-focused-v18-1-2);
96
96
  box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v18-1-2);
97
97
  }
98
- .magritte-select-activator___9XXwA_5-2-3:focus .magritte-select-activator-label___Mc49R_5-2-3{
98
+ .magritte-select-activator___9XXwA_5-2-4:focus .magritte-select-activator-label___Mc49R_5-2-4{
99
99
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-label-focused-v18-1-2);
100
100
  }
101
- .magritte-select-activator___9XXwA_5-2-3:focus .magritte-select-activator-placeholder___7ODSn_5-2-3{
101
+ .magritte-select-activator___9XXwA_5-2-4:focus .magritte-select-activator-placeholder___7ODSn_5-2-4{
102
102
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-placeholder-focused-v18-1-2);
103
103
  }
104
- .magritte-select-activator___9XXwA_5-2-3:focus .magritte-select-activator-value___wDbVR_5-2-3{
104
+ .magritte-select-activator___9XXwA_5-2-4:focus .magritte-select-activator-value___wDbVR_5-2-4{
105
105
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-focused-v18-1-2);
106
106
  }
107
- .magritte-select-activator___9XXwA_5-2-3:focus .magritte-select-activator-chevron___DHIUH_5-2-3{
107
+ .magritte-select-activator___9XXwA_5-2-4:focus .magritte-select-activator-chevron___DHIUH_5-2-4{
108
108
  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-focused-v18-1-2);
109
109
  }
110
- .magritte-select-activator___9XXwA_5-2-3.focus-visible{
110
+ .magritte-select-activator___9XXwA_5-2-4.focus-visible{
111
111
  outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v18-1-2) solid 4px;
112
112
  }
113
113
  @media (min-width: 1020px){
114
- body.magritte-old-layout .magritte-select-activator___9XXwA_5-2-3:hover{
114
+ body.magritte-old-layout .magritte-select-activator___9XXwA_5-2-4:hover{
115
115
  background-color:var(--magritte-color-component-input-background-state-field-hovered-v18-1-2);
116
116
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v18-1-2);
117
117
  cursor:pointer;
118
118
  }
119
- body.magritte-old-layout .magritte-select-activator___9XXwA_5-2-3:hover .magritte-select-activator-label___Mc49R_5-2-3{
119
+ body.magritte-old-layout .magritte-select-activator___9XXwA_5-2-4:hover .magritte-select-activator-label___Mc49R_5-2-4{
120
120
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-label-hovered-v18-1-2);
121
121
  }
122
- body.magritte-old-layout .magritte-select-activator___9XXwA_5-2-3:hover .magritte-select-activator-placeholder___7ODSn_5-2-3{
122
+ body.magritte-old-layout .magritte-select-activator___9XXwA_5-2-4:hover .magritte-select-activator-placeholder___7ODSn_5-2-4{
123
123
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-placeholder-hovered-v18-1-2);
124
124
  }
125
- body.magritte-old-layout .magritte-select-activator___9XXwA_5-2-3:hover .magritte-select-activator-value___wDbVR_5-2-3{
125
+ body.magritte-old-layout .magritte-select-activator___9XXwA_5-2-4:hover .magritte-select-activator-value___wDbVR_5-2-4{
126
126
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-hovered-v18-1-2);
127
127
  }
128
- body.magritte-old-layout .magritte-select-activator___9XXwA_5-2-3:hover .magritte-select-activator-chevron___DHIUH_5-2-3{
128
+ body.magritte-old-layout .magritte-select-activator___9XXwA_5-2-4:hover .magritte-select-activator-chevron___DHIUH_5-2-4{
129
129
  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-hovered-v18-1-2);
130
130
  }
131
131
  }
132
132
  @media (min-width: 1024px){
133
- body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-2-3:hover{
133
+ body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-2-4:hover{
134
134
  background-color:var(--magritte-color-component-input-background-state-field-hovered-v18-1-2);
135
135
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v18-1-2);
136
136
  cursor:pointer;
137
137
  }
138
- body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-2-3:hover .magritte-select-activator-label___Mc49R_5-2-3{
138
+ body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-2-4:hover .magritte-select-activator-label___Mc49R_5-2-4{
139
139
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-label-hovered-v18-1-2);
140
140
  }
141
- body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-2-3:hover .magritte-select-activator-placeholder___7ODSn_5-2-3{
141
+ body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-2-4:hover .magritte-select-activator-placeholder___7ODSn_5-2-4{
142
142
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-placeholder-hovered-v18-1-2);
143
143
  }
144
- body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-2-3:hover .magritte-select-activator-value___wDbVR_5-2-3{
144
+ body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-2-4:hover .magritte-select-activator-value___wDbVR_5-2-4{
145
145
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-hovered-v18-1-2);
146
146
  }
147
- body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-2-3:hover .magritte-select-activator-chevron___DHIUH_5-2-3{
147
+ body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-2-4:hover .magritte-select-activator-chevron___DHIUH_5-2-4{
148
148
  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-hovered-v18-1-2);
149
149
  }
150
150
  }
151
- .magritte-select-activator___9XXwA_5-2-3.magritte-select-activator-disabled___mYKi2_5-2-3{
151
+ .magritte-select-activator___9XXwA_5-2-4.magritte-select-activator-disabled___mYKi2_5-2-4{
152
152
  cursor:not-allowed;
153
153
  background-color:var(--magritte-color-component-input-background-state-field-disabled-v18-1-2);
154
154
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-disabled-v18-1-2);
155
155
  }
156
- .magritte-select-activator___9XXwA_5-2-3.magritte-select-activator-disabled___mYKi2_5-2-3 .magritte-select-activator-item___JsY4v_5-2-3{
156
+ .magritte-select-activator___9XXwA_5-2-4.magritte-select-activator-disabled___mYKi2_5-2-4 .magritte-select-activator-item___JsY4v_5-2-4{
157
157
  --magritte-counter-background-color:var(--magritte-color-component-input-counter-background-state-content-disabled-v18-1-2);
158
158
  --magritte-counter-label-color:var(--magritte-color-component-input-counter-text-state-content-disabled-v18-1-2);
159
159
  }
160
- .magritte-select-activator___9XXwA_5-2-3.magritte-select-activator-disabled___mYKi2_5-2-3 .magritte-select-activator-label___Mc49R_5-2-3{
160
+ .magritte-select-activator___9XXwA_5-2-4.magritte-select-activator-disabled___mYKi2_5-2-4 .magritte-select-activator-label___Mc49R_5-2-4{
161
161
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-label-disabled-v18-1-2);
162
162
  }
163
- .magritte-select-activator___9XXwA_5-2-3.magritte-select-activator-disabled___mYKi2_5-2-3 .magritte-select-activator-placeholder___7ODSn_5-2-3{
163
+ .magritte-select-activator___9XXwA_5-2-4.magritte-select-activator-disabled___mYKi2_5-2-4 .magritte-select-activator-placeholder___7ODSn_5-2-4{
164
164
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-placeholder-disabled-v18-1-2);
165
165
  }
166
- .magritte-select-activator___9XXwA_5-2-3.magritte-select-activator-disabled___mYKi2_5-2-3 .magritte-select-activator-value___wDbVR_5-2-3{
166
+ .magritte-select-activator___9XXwA_5-2-4.magritte-select-activator-disabled___mYKi2_5-2-4 .magritte-select-activator-value___wDbVR_5-2-4{
167
167
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-disabled-v18-1-2);
168
168
  }
169
- .magritte-select-activator___9XXwA_5-2-3.magritte-select-activator-disabled___mYKi2_5-2-3 .magritte-select-activator-chevron___DHIUH_5-2-3{
169
+ .magritte-select-activator___9XXwA_5-2-4.magritte-select-activator-disabled___mYKi2_5-2-4 .magritte-select-activator-chevron___DHIUH_5-2-4{
170
170
  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-disabled-v18-1-2);
171
171
  }
172
- .magritte-select-activator-invalid___IdlRp_5-2-3{
172
+ .magritte-select-activator-invalid___IdlRp_5-2-4{
173
173
  background-color:var(--magritte-color-component-input-background-state-field-invalid-v18-1-2);
174
174
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v18-1-2);
175
175
  }
176
- .magritte-select-activator-invalid___IdlRp_5-2-3 .magritte-select-activator-label___Mc49R_5-2-3{
176
+ .magritte-select-activator-invalid___IdlRp_5-2-4 .magritte-select-activator-label___Mc49R_5-2-4{
177
177
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-label-invalid-v18-1-2);
178
178
  }
179
- .magritte-select-activator-invalid___IdlRp_5-2-3 .magritte-select-activator-placeholder___7ODSn_5-2-3{
179
+ .magritte-select-activator-invalid___IdlRp_5-2-4 .magritte-select-activator-placeholder___7ODSn_5-2-4{
180
180
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-placeholder-invalid-v18-1-2);
181
181
  }
182
- .magritte-select-activator-invalid___IdlRp_5-2-3 .magritte-select-activator-value___wDbVR_5-2-3{
182
+ .magritte-select-activator-invalid___IdlRp_5-2-4 .magritte-select-activator-value___wDbVR_5-2-4{
183
183
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-invalid-v18-1-2);
184
184
  }
185
- .magritte-select-activator-invalid___IdlRp_5-2-3 .magritte-select-activator-chevron___DHIUH_5-2-3{
185
+ .magritte-select-activator-invalid___IdlRp_5-2-4 .magritte-select-activator-chevron___DHIUH_5-2-4{
186
186
  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-invalid-v18-1-2);
187
187
  }
188
- .magritte-select-activator-size-large___MIXAH_5-2-3{
188
+ .magritte-select-activator-size-large___MIXAH_5-2-4{
189
189
  padding:16px;
190
190
  }
191
- .magritte-select-activator-with-label___DwcKr_5-2-3{
191
+ .magritte-select-activator-with-label___DwcKr_5-2-4{
192
192
  padding:8px 16px;
193
193
  }
194
- .magritte-select-activator-label-root___eYIWQ_5-2-3{
194
+ .magritte-select-activator-label-root___eYIWQ_5-2-4{
195
195
  display:flex;
196
196
  flex-direction:column;
197
197
  overflow:hidden;
198
198
  }
199
- .magritte-select-activator-item___JsY4v_5-2-3{
199
+ .magritte-select-activator-item___JsY4v_5-2-4{
200
200
  display:flex;
201
201
  width:fit-content;
202
202
  gap:12px;
203
203
  --magritte-counter-background-color:var(--magritte-color-component-input-counter-background-content-v18-1-2);
204
204
  --magritte-counter-label-color:var(--magritte-color-component-input-counter-text-content-v18-1-2);
205
205
  }
206
- .magritte-select-activator-has-counter___k2Kc2_5-2-3{
206
+ .magritte-select-activator-has-counter___k2Kc2_5-2-4{
207
207
  min-width:96px;
208
208
  }
209
- .magritte-select-activator-ellipsis___16zkC_5-2-3{
209
+ .magritte-select-activator-ellipsis___16zkC_5-2-4{
210
210
  white-space:nowrap;
211
211
  overflow:hidden;
212
212
  text-overflow:ellipsis;
213
213
  }
214
- .magritte-select-activator-placeholder___7ODSn_5-2-3{
214
+ .magritte-select-activator-placeholder___7ODSn_5-2-4{
215
215
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-placeholder-v18-1-2);
216
216
  }
217
- .magritte-select-activator-label___Mc49R_5-2-3{
217
+ .magritte-select-activator-label___Mc49R_5-2-4{
218
218
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-label-v18-1-2);
219
219
  }
220
- .magritte-select-activator-value___wDbVR_5-2-3{
220
+ .magritte-select-activator-value___wDbVR_5-2-4{
221
221
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-content-v18-1-2);
222
222
  }
223
- .magritte-select-activator-chevron___DHIUH_5-2-3{
223
+ .magritte-select-activator-chevron___DHIUH_5-2-4{
224
224
  height:24px;
225
225
  }
226
226
  @media (prefers-reduced-motion: no-preference){
227
- .magritte-select-activator-chevron-animation-timeout___y19bf_5-2-3,
228
- .magritte-select-activator-chevron___DHIUH_5-2-3{
227
+ .magritte-select-activator-chevron-animation-timeout___y19bf_5-2-4,
228
+ .magritte-select-activator-chevron___DHIUH_5-2-4{
229
229
  transform:rotate(0);
230
230
  transition-property:transform;
231
231
  transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v18-1-2);
232
232
  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v18-1-2);
233
233
  --animation-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v18-1-2);
234
234
  }
235
- .magritte-select-activator-chevron-up___gtPyi_5-2-3{
235
+ .magritte-select-activator-chevron-up___gtPyi_5-2-4{
236
236
  transform:rotate(-180deg);
237
237
  }
238
238
  }
239
- .magritte-select-options___y2KYZ_5-2-3{
239
+ .magritte-select-options___y2KYZ_5-2-4{
240
240
  display:flex;
241
241
  width:100%;
242
242
  gap:12px;
@@ -246,9 +246,9 @@
246
246
  align-items:stretch;
247
247
  flex-direction:column;
248
248
  }
249
- .magritte-select-options-xs___BiiPo_5-2-3{
249
+ .magritte-select-options-xs___BiiPo_5-2-4{
250
250
  margin-bottom:0;
251
251
  }
252
- .magritte-optionDelimiter___OaKsB_5-2-3{
252
+ .magritte-optionDelimiter___OaKsB_5-2-4{
253
253
  padding:16px 8px 0;
254
254
  }
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import './index.css';
2
- export { S as SelectActivator } from './SelectActivator-e267c8a9.js';
2
+ export { S as SelectActivator } from './SelectActivator-08a9b088.js';
3
3
  export { UncontrolledSelect } from './UncontrolledSelect.js';
4
4
  export { Select } from './Select.js';
5
5
  import 'react/jsx-runtime';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-select",
3
- "version": "5.2.3",
3
+ "version": "5.2.4",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -23,18 +23,18 @@
23
23
  "@hh.ru/magritte-common-keyboard": "3.0.2",
24
24
  "@hh.ru/magritte-common-use-multiple-refs": "1.1.2",
25
25
  "@hh.ru/magritte-design-tokens": "18.1.2",
26
- "@hh.ru/magritte-ui-bottom-sheet": "4.1.25",
26
+ "@hh.ru/magritte-ui-bottom-sheet": "4.1.26",
27
27
  "@hh.ru/magritte-ui-breakpoint": "4.0.1",
28
- "@hh.ru/magritte-ui-card": "6.0.3",
29
- "@hh.ru/magritte-ui-cell": "2.2.8",
30
- "@hh.ru/magritte-ui-checkable-card": "3.0.5",
31
- "@hh.ru/magritte-ui-checkbox-radio": "2.2.2",
28
+ "@hh.ru/magritte-ui-card": "6.0.4",
29
+ "@hh.ru/magritte-ui-cell": "2.2.9",
30
+ "@hh.ru/magritte-ui-checkable-card": "3.0.6",
31
+ "@hh.ru/magritte-ui-checkbox-radio": "3.0.0",
32
32
  "@hh.ru/magritte-ui-counter": "4.0.9",
33
33
  "@hh.ru/magritte-ui-drop": "5.1.1",
34
34
  "@hh.ru/magritte-ui-form-helper": "1.0.1",
35
- "@hh.ru/magritte-ui-icon": "7.1.5",
36
- "@hh.ru/magritte-ui-input": "5.0.16",
37
- "@hh.ru/magritte-ui-navigation-bar": "4.1.10",
35
+ "@hh.ru/magritte-ui-icon": "7.1.6",
36
+ "@hh.ru/magritte-ui-input": "5.0.17",
37
+ "@hh.ru/magritte-ui-navigation-bar": "4.1.11",
38
38
  "@hh.ru/magritte-ui-typography": "3.0.9"
39
39
  },
40
40
  "peerDependencies": {
@@ -44,5 +44,5 @@
44
44
  "publishConfig": {
45
45
  "access": "public"
46
46
  },
47
- "gitHead": "9f09ecd7831d299cd9c5a8852bd30334245ab0e7"
47
+ "gitHead": "77a359961872f43d688f9507b225fa72ba99a3e8"
48
48
  }