@hh.ru/magritte-ui-chips-trigger 4.3.52 → 4.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/ChipsTrigger.js +11 -7
  2. package/ChipsTrigger.js.map +1 -1
  3. package/index.css +141 -135
  4. package/package.json +8 -8
  5. package/types.d.ts +8 -1
package/ChipsTrigger.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
  import { jsxs, jsx } from 'react/jsx-runtime';
3
- import { forwardRef, useState, useRef, useId, useCallback, useEffect } from 'react';
3
+ import { forwardRef, useState, useRef, useId, useCallback, useEffect, isValidElement } from 'react';
4
4
  import classnames from 'classnames';
5
5
  import { keyboardMatch, keyboardKeys, findNextFocusableElement } from '@hh.ru/magritte-common-keyboard';
6
6
  import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
@@ -12,7 +12,7 @@ import { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
12
12
  import { useFocus } from '@hh.ru/magritte-ui-input/useFocus';
13
13
  import { useScrollbar, Scrollbar } from '@hh.ru/magritte-ui-scrollbar';
14
14
 
15
- var styles = {"root":"magritte-root___-zVdz_4-3-52","focused":"magritte-focused___0Uzyu_4-3-52","invalid":"magritte-invalid___tVzQV_4-3-52","disabled":"magritte-disabled___UeqcV_4-3-52","label":"magritte-label___j7Trt_4-3-52","field-input":"magritte-field-input___04Cag_4-3-52","fieldInput":"magritte-field-input___04Cag_4-3-52","scrollable-area":"magritte-scrollable-area___-xMF2_4-3-52","scrollableArea":"magritte-scrollable-area___-xMF2_4-3-52","focus-visible":"magritte-focus-visible___ifvAP_4-3-52","focusVisible":"magritte-focus-visible___ifvAP_4-3-52","large":"magritte-large___JIrIy_4-3-52","field":"magritte-field___rlEmn_4-3-52","icon":"magritte-icon___fDMiz_4-3-52","scrollable-area-wrapper":"magritte-scrollable-area-wrapper___hZNQd_4-3-52","scrollableAreaWrapper":"magritte-scrollable-area-wrapper___hZNQd_4-3-52","medium":"magritte-medium___Xk-XB_4-3-52","chips-and-input":"magritte-chips-and-input___qg-Ba_4-3-52","chipsAndInput":"magritte-chips-and-input___qg-Ba_4-3-52","label-wrapper":"magritte-label-wrapper___De7Bm_4-3-52","labelWrapper":"magritte-label-wrapper___De7Bm_4-3-52","icon_expanded":"magritte-icon_expanded___RaOT-_4-3-52","iconExpanded":"magritte-icon_expanded___RaOT-_4-3-52","custom-chip-wrapper":"magritte-custom-chip-wrapper___a9kJ6_4-3-52","customChipWrapper":"magritte-custom-chip-wrapper___a9kJ6_4-3-52"};
15
+ var styles = {"root":"magritte-root___-zVdz_4-4-0","focused":"magritte-focused___0Uzyu_4-4-0","invalid":"magritte-invalid___tVzQV_4-4-0","disabled":"magritte-disabled___UeqcV_4-4-0","label":"magritte-label___j7Trt_4-4-0","field-input":"magritte-field-input___04Cag_4-4-0","fieldInput":"magritte-field-input___04Cag_4-4-0","scrollable-area":"magritte-scrollable-area___-xMF2_4-4-0","scrollableArea":"magritte-scrollable-area___-xMF2_4-4-0","focus-visible":"magritte-focus-visible___ifvAP_4-4-0","focusVisible":"magritte-focus-visible___ifvAP_4-4-0","large":"magritte-large___JIrIy_4-4-0","field":"magritte-field___rlEmn_4-4-0","icon":"magritte-icon___fDMiz_4-4-0","scrollable-area-wrapper":"magritte-scrollable-area-wrapper___hZNQd_4-4-0","scrollableAreaWrapper":"magritte-scrollable-area-wrapper___hZNQd_4-4-0","scrollable-area-wrapper_with-icon":"magritte-scrollable-area-wrapper_with-icon___2VoX9_4-4-0","scrollableAreaWrapperWithIcon":"magritte-scrollable-area-wrapper_with-icon___2VoX9_4-4-0","medium":"magritte-medium___Xk-XB_4-4-0","chips-and-input":"magritte-chips-and-input___qg-Ba_4-4-0","chipsAndInput":"magritte-chips-and-input___qg-Ba_4-4-0","label-wrapper":"magritte-label-wrapper___De7Bm_4-4-0","labelWrapper":"magritte-label-wrapper___De7Bm_4-4-0","icon_expanded":"magritte-icon_expanded___RaOT-_4-4-0","iconExpanded":"magritte-icon_expanded___RaOT-_4-4-0","custom-chip-wrapper":"magritte-custom-chip-wrapper___a9kJ6_4-4-0","customChipWrapper":"magritte-custom-chip-wrapper___a9kJ6_4-4-0"};
16
16
 
17
17
  const focusOnLastChip = (event, chipsContainer, input) => {
18
18
  if (!chipsContainer || !input) {
@@ -24,7 +24,7 @@ const focusOnLastChip = (event, chipsContainer, input) => {
24
24
  nextFocusableElement.focus();
25
25
  }
26
26
  };
27
- const ChipsTrigger = forwardRef(({ size = 'large', placeholder, disabled, expanded: externalExpanded, toggleExpanded: toggleExternalExpanded, state, invalid, maxHeight, description, errorMessage, wrapperRef, onChange, onFocus, onBlur, onKeyDown, onChangeInput: onChangeInputExternal, allowArbitraryValues = true, 'data-qa': dataQa = 'chips-trigger', deleteButtonAriaLabel: _deleteButtonAriaLabel, 'aria-expanded': ariaExpanded, 'aria-controls': ariaControls, }, ref) => {
27
+ const ChipsTrigger = forwardRef(({ size = 'large', placeholder, disabled, expanded: externalExpanded, toggleExpanded: toggleExternalExpanded, state, rightIcon = true, invalid, maxHeight, description, errorMessage, wrapperRef, onChange, onFocus, onBlur, onKeyDown, onChangeInput: onChangeInputExternal, allowArbitraryValues = true, 'data-qa': dataQa = 'chips-trigger', deleteButtonAriaLabel: _deleteButtonAriaLabel, 'aria-expanded': ariaExpanded, 'aria-controls': ariaControls, }, ref) => {
28
28
  const { isMobile } = useBreakpoint();
29
29
  const [expanded, setExpanded] = useState(false);
30
30
  const [isFocusVisible, setFocusVisible] = useState(false);
@@ -100,6 +100,8 @@ const ChipsTrigger = forwardRef(({ size = 'large', placeholder, disabled, expand
100
100
  const scrollableAreaStyle = maxHeight
101
101
  ? { maxHeight: `${maxHeight - (size === 'medium' ? 16 : 24)}px` }
102
102
  : undefined;
103
+ const showIcon = rightIcon !== false;
104
+ const showCustomIcon = isValidElement(rightIcon);
103
105
  return (jsxs("div", { children: [jsxs("div", { ref: chipsRootRefCallback, className: classnames(styles.root, styles[size], scrollbar.hoverContainerCssClass, {
104
106
  [styles.focused]: isFocused,
105
107
  [styles.focusVisible]: isFocusVisible,
@@ -137,13 +139,15 @@ const ChipsTrigger = forwardRef(({ size = 'large', placeholder, disabled, expand
137
139
  }
138
140
  stateRef.current.hadFocusWhenClicked = false;
139
141
  stateRef.current.wasExpandedWhenClicked = false;
140
- }, tabIndex: disabled ? undefined : 0, "data-qa": dataQa, "aria-disabled": disabled, children: [jsx("div", { style: scrollableAreaStyle, className: styles.scrollableAreaWrapper, children: jsx("div", { className: styles.scrollableArea, ref: scrollbar.scrollContainerRef, children: jsxs("div", { ref: chipsContainerRefCallback, className: styles.chipsAndInput, children: [state.chips.map((chip, index) => {
142
+ }, tabIndex: disabled ? undefined : 0, "data-qa": dataQa, "aria-disabled": disabled, children: [jsx("div", { style: scrollableAreaStyle, className: classnames(styles.scrollableAreaWrapper, {
143
+ [styles.scrollableAreaWrapperWithIcon]: showIcon,
144
+ }), children: jsx("div", { className: styles.scrollableArea, ref: scrollbar.scrollContainerRef, children: jsxs("div", { ref: chipsContainerRefCallback, className: styles.chipsAndInput, children: [state.chips.map((chip, index) => {
141
145
  return (jsx("div", { className: styles.customChipWrapper, onMouseDown: (event) => event.preventDefault(), children: jsx(CustomChip, { Element: "button", size: "extra-small", disabled: disabled, onDelete: () => {
142
146
  deleteHandler(index);
143
147
  }, dataQaWrapper: `chips-trigger-chip-${chip.value}`, deleteOnly: true, deleteButtonAriaLabel: deleteButtonAriaLabel, children: chip.label ?? chip.value }) }, `${chip.value}-${index}`));
144
- }), jsxs("div", { className: styles.field, children: [jsx("input", { ref: inputRefCallback, className: styles.fieldInput, type: "text", disabled: disabled, value: state.value, onKeyDown: keyDownHandler, onFocus: focusHandler, onBlur: blurHandler, onChange: changeHandler, "data-qa": "chips-trigger-input", readOnly: isMobile, "aria-labelledby": showLabel ? ariaLabeledBy : undefined, role: 'combobox', "aria-haspopup": 'listbox', "aria-autocomplete": 'list', "aria-expanded": ariaExpanded, "aria-controls": ariaControls }), showLabel && (jsx("div", { className: styles.labelWrapper, children: jsx("label", { className: styles.label, id: ariaLabeledBy, children: placeholder }) }))] })] }) }) }), jsx("div", { className: classnames(styles.icon, {
145
- [styles.iconExpanded]: expanded || externalExpanded,
146
- }), children: jsx(ChevronDownOutlinedSize24, {}) }), hasVerticalScroll && jsx(Scrollbar, { ...verticalScrollbarProps })] }), jsx(FormHelper, { description: description, errorMessage: errorMessage, disabled: disabled, invalid: invalid })] }));
148
+ }), jsxs("div", { className: styles.field, children: [jsx("input", { ref: inputRefCallback, className: styles.fieldInput, type: "text", disabled: disabled, value: state.value, onKeyDown: keyDownHandler, onFocus: focusHandler, onBlur: blurHandler, onChange: changeHandler, "data-qa": "chips-trigger-input", readOnly: isMobile, "aria-labelledby": showLabel ? ariaLabeledBy : undefined, role: 'combobox', "aria-haspopup": 'listbox', "aria-autocomplete": 'list', "aria-expanded": ariaExpanded, "aria-controls": ariaControls }), showLabel && (jsx("div", { className: styles.labelWrapper, children: jsx("label", { className: styles.label, id: ariaLabeledBy, children: placeholder }) }))] })] }) }) }), showIcon && (jsx("div", { className: classnames(styles.icon, {
149
+ [styles.iconExpanded]: (expanded || externalExpanded) && !showCustomIcon,
150
+ }), "data-qa": "chips-trigger-icon", children: showCustomIcon ? rightIcon : jsx(ChevronDownOutlinedSize24, {}) })), hasVerticalScroll && jsx(Scrollbar, { ...verticalScrollbarProps })] }), jsx(FormHelper, { description: description, errorMessage: errorMessage, disabled: disabled, invalid: invalid })] }));
147
151
  });
148
152
  ChipsTrigger.displayName = 'ChipsTrigger';
149
153
 
package/ChipsTrigger.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ChipsTrigger.js","sources":["src/ChipsTrigger.tsx"],"sourcesContent":["import {\n InputHTMLAttributes,\n KeyboardEventHandler,\n SyntheticEvent,\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useRef,\n useState,\n} from 'react';\nimport classnames from 'classnames';\n\nimport { findNextFocusableElement, keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { CustomChip } from '@hh.ru/magritte-ui-chips';\nimport { ChipsTriggerProps } from '@hh.ru/magritte-ui-chips-trigger/types';\nimport { FormHelper } from '@hh.ru/magritte-ui-form-helper';\nimport { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { useFocus } from '@hh.ru/magritte-ui-input/useFocus';\nimport { Scrollbar, useScrollbar } from '@hh.ru/magritte-ui-scrollbar';\n\nimport styles from './chips-trigger.less';\n\nconst focusOnLastChip = (event: SyntheticEvent, chipsContainer: HTMLElement | null, input: HTMLElement | null) => {\n if (!chipsContainer || !input) {\n return;\n }\n const nextFocusableElement = findNextFocusableElement(chipsContainer, input, 'left', 'list');\n if (nextFocusableElement !== null) {\n event.preventDefault();\n nextFocusableElement.focus();\n }\n};\n\ntype State = {\n hadFocusWhenClicked: boolean;\n wasExpandedWhenClicked: boolean;\n};\n\nexport const ChipsTrigger = forwardRef<\n HTMLInputElement,\n ChipsTriggerProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof ChipsTriggerProps>\n>(\n (\n {\n size = 'large',\n placeholder,\n disabled,\n expanded: externalExpanded,\n toggleExpanded: toggleExternalExpanded,\n state,\n invalid,\n maxHeight,\n description,\n errorMessage,\n wrapperRef,\n onChange,\n onFocus,\n onBlur,\n onKeyDown,\n onChangeInput: onChangeInputExternal,\n allowArbitraryValues = true,\n 'data-qa': dataQa = 'chips-trigger',\n deleteButtonAriaLabel: _deleteButtonAriaLabel,\n 'aria-expanded': ariaExpanded,\n 'aria-controls': ariaControls,\n },\n ref\n ) => {\n const { isMobile } = useBreakpoint();\n const [expanded, setExpanded] = useState(false);\n const [isFocusVisible, setFocusVisible] = useState(false);\n const stateRef = useRef<State>({ hadFocusWhenClicked: false, wasExpandedWhenClicked: false });\n\n const { hasVerticalScroll, verticalScrollbarProps, ...scrollbar } = useScrollbar({\n axis: disabled ? 'none' : 'vertical',\n });\n\n const chipsRootRef = useRef<HTMLDivElement>(null);\n const chipsRootRefCallback = useMultipleRefs(wrapperRef, chipsRootRef);\n const chipsContainerRef = useRef<HTMLDivElement>(null);\n const chipsContainerRefCallback = useMultipleRefs(chipsContainerRef, scrollbar.contentWrapperRef);\n const inputRef = useRef<HTMLInputElement>(null);\n const inputRefCallback = useMultipleRefs(inputRef, ref);\n const showLabel = state.value === '' && state.chips.length === 0 && placeholder !== '';\n const labelId = useId();\n const ariaLabeledBy = `chips-trigger-label-${labelId}`;\n const deleteButtonAriaTrl = useTranslation('ChipsTrigger', 'delete');\n const deleteButtonAriaLabel = _deleteButtonAriaLabel ?? deleteButtonAriaTrl;\n\n const onChangeInput = useCallback(\n (value: string) => {\n onChange({\n value,\n chips: state.chips,\n event: { type: 'change', modifier: 'keyboard' },\n });\n onChangeInputExternal?.(value);\n },\n [state.chips, onChange, onChangeInputExternal]\n );\n const { changeHandler, focusHandler, blurHandler, isFocused } = useFocus(onChangeInput, onFocus, onBlur);\n\n useEffect(() => {\n if (inputRef.current) {\n setFocusVisible(isFocused && inputRef.current.classList.contains('focus-visible'));\n }\n }, [isFocused]);\n\n const deleteHandler = useCallback(\n (index: number) => {\n const deletedChip = state.chips.splice(index, 1);\n onChange({\n value: state.value,\n chips: [...state.chips],\n event: { type: 'remove', modifier: 'cross', element: deletedChip?.[0] },\n });\n },\n [onChange, state.chips, state.value]\n );\n\n const keyDownHandler = useCallback<KeyboardEventHandler>(\n (event) => {\n // создаем новый чипс и затираем текстовый инпут\n if (allowArbitraryValues && keyboardMatch(event.nativeEvent, keyboardKeys.Enter)) {\n if (state.value.length === 0) {\n return;\n }\n onChange({\n value: '',\n chips: [...state.chips, { value: state.value, userInput: true }],\n event: { type: 'add', modifier: 'enter' },\n });\n onChangeInputExternal?.('');\n }\n // удаляем последний созданный чипс\n if (state.value === '' && keyboardMatch(event.nativeEvent, keyboardKeys.Backspace)) {\n if (state.chips.length === 0) {\n return;\n }\n const deletedChip = state.chips.pop();\n onChange({\n value: state.value,\n chips: [...state.chips],\n event: { type: 'remove', modifier: 'backspace', element: deletedChip },\n });\n }\n // пытаемся найти ближайший чипс для фокуса\n if (state.value === '' && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowLeft)) {\n focusOnLastChip(event, chipsContainerRef.current, inputRef.current);\n }\n },\n [allowArbitraryValues, onChange, onChangeInputExternal, state]\n );\n\n // при выставлении высоты учитваем падинги\n // иначе высота будет больше значения свойства\n const scrollableAreaStyle = maxHeight\n ? { maxHeight: `${maxHeight - (size === 'medium' ? 16 : 24)}px` }\n : undefined;\n\n return (\n <div>\n <div\n ref={chipsRootRefCallback}\n className={classnames(styles.root, styles[size], scrollbar.hoverContainerCssClass, {\n [styles.focused]: isFocused,\n [styles.focusVisible]: isFocusVisible,\n [styles.disabled]: !!disabled,\n [styles.invalid]: !!invalid,\n })}\n onFocus={() => {\n if (disabled) {\n return;\n }\n if (!inputRef.current) {\n return;\n }\n setExpanded(true);\n // добавляем .focus() еще и тут\n // чтобы не сбрасывать фокус во время клика по chip\n // или по клику на враппер\n if (document.activeElement === chipsRootRef.current) {\n inputRef.current.focus();\n }\n }}\n onBlur={(event) => {\n stateRef.current.hadFocusWhenClicked &&=\n event.relatedTarget === chipsRootRef.current || event.relatedTarget === inputRef.current;\n setExpanded(false);\n }}\n onKeyDown={onKeyDown}\n onMouseDown={() => {\n // при повторном клике по инпуту в фокусе нужно закрыть дроп\n // при этом клик может прийтись на обертку, из-за чего инпут поймает blur и повторный фокус\n // что усложняет проверку того, что инпут уже был в фокусе в момент клика\n // поэтому в цепочке mouseDown -> blur -> focus -> click храним флаг, что фокус не вышел за пределы компонента\n stateRef.current.hadFocusWhenClicked = document.activeElement === inputRef.current;\n stateRef.current.wasExpandedWhenClicked = !!externalExpanded;\n }}\n onClick={() => {\n if (\n stateRef.current.hadFocusWhenClicked &&\n stateRef.current.wasExpandedWhenClicked === externalExpanded\n ) {\n toggleExternalExpanded?.();\n }\n stateRef.current.hadFocusWhenClicked = false;\n stateRef.current.wasExpandedWhenClicked = false;\n }}\n tabIndex={disabled ? undefined : 0}\n data-qa={dataQa}\n aria-disabled={disabled}\n >\n <div style={scrollableAreaStyle} className={styles.scrollableAreaWrapper}>\n <div\n className={styles.scrollableArea}\n ref={scrollbar.scrollContainerRef as React.Ref<HTMLDivElement>}\n >\n <div ref={chipsContainerRefCallback} className={styles.chipsAndInput}>\n {state.chips.map((chip, index) => {\n return (\n <div\n key={`${chip.value}-${index}`}\n className={styles.customChipWrapper}\n onMouseDown={(event) => event.preventDefault()}\n >\n <CustomChip\n Element=\"button\"\n size=\"extra-small\"\n disabled={disabled}\n onDelete={() => {\n deleteHandler(index);\n }}\n dataQaWrapper={`chips-trigger-chip-${chip.value}`}\n deleteOnly\n deleteButtonAriaLabel={deleteButtonAriaLabel}\n >\n {chip.label ?? chip.value}\n </CustomChip>\n </div>\n );\n })}\n <div className={styles.field}>\n <input\n ref={inputRefCallback}\n className={styles.fieldInput}\n type=\"text\"\n disabled={disabled}\n value={state.value}\n onKeyDown={keyDownHandler}\n onFocus={focusHandler}\n onBlur={blurHandler}\n onChange={changeHandler}\n data-qa=\"chips-trigger-input\"\n readOnly={isMobile}\n aria-labelledby={showLabel ? ariaLabeledBy : undefined}\n role={'combobox'}\n aria-haspopup={'listbox'}\n aria-autocomplete={'list'}\n aria-expanded={ariaExpanded}\n aria-controls={ariaControls}\n />\n {showLabel && (\n <div className={styles.labelWrapper}>\n <label className={styles.label} id={ariaLabeledBy}>\n {placeholder}\n </label>\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n <div\n className={classnames(styles.icon, {\n [styles.iconExpanded]: expanded || externalExpanded,\n })}\n >\n <ChevronDownOutlinedSize24 />\n </div>\n {hasVerticalScroll && <Scrollbar {...verticalScrollbarProps} />}\n </div>\n <FormHelper\n description={description}\n errorMessage={errorMessage}\n disabled={disabled}\n invalid={invalid}\n />\n </div>\n );\n }\n);\n\nChipsTrigger.displayName = 'ChipsTrigger';\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
1
+ {"version":3,"file":"ChipsTrigger.js","sources":["src/ChipsTrigger.tsx"],"sourcesContent":["import {\n InputHTMLAttributes,\n KeyboardEventHandler,\n SyntheticEvent,\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useRef,\n useState,\n isValidElement,\n} from 'react';\nimport classnames from 'classnames';\n\nimport { findNextFocusableElement, keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { CustomChip } from '@hh.ru/magritte-ui-chips';\nimport { ChipsTriggerProps } from '@hh.ru/magritte-ui-chips-trigger/types';\nimport { FormHelper } from '@hh.ru/magritte-ui-form-helper';\nimport { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { useFocus } from '@hh.ru/magritte-ui-input/useFocus';\nimport { Scrollbar, useScrollbar } from '@hh.ru/magritte-ui-scrollbar';\n\nimport styles from './chips-trigger.less';\n\nconst focusOnLastChip = (event: SyntheticEvent, chipsContainer: HTMLElement | null, input: HTMLElement | null) => {\n if (!chipsContainer || !input) {\n return;\n }\n const nextFocusableElement = findNextFocusableElement(chipsContainer, input, 'left', 'list');\n if (nextFocusableElement !== null) {\n event.preventDefault();\n nextFocusableElement.focus();\n }\n};\n\ntype State = {\n hadFocusWhenClicked: boolean;\n wasExpandedWhenClicked: boolean;\n};\n\nexport const ChipsTrigger = forwardRef<\n HTMLInputElement,\n ChipsTriggerProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof ChipsTriggerProps>\n>(\n (\n {\n size = 'large',\n placeholder,\n disabled,\n expanded: externalExpanded,\n toggleExpanded: toggleExternalExpanded,\n state,\n rightIcon = true,\n invalid,\n maxHeight,\n description,\n errorMessage,\n wrapperRef,\n onChange,\n onFocus,\n onBlur,\n onKeyDown,\n onChangeInput: onChangeInputExternal,\n allowArbitraryValues = true,\n 'data-qa': dataQa = 'chips-trigger',\n deleteButtonAriaLabel: _deleteButtonAriaLabel,\n 'aria-expanded': ariaExpanded,\n 'aria-controls': ariaControls,\n },\n ref\n ) => {\n const { isMobile } = useBreakpoint();\n const [expanded, setExpanded] = useState(false);\n const [isFocusVisible, setFocusVisible] = useState(false);\n const stateRef = useRef<State>({ hadFocusWhenClicked: false, wasExpandedWhenClicked: false });\n\n const { hasVerticalScroll, verticalScrollbarProps, ...scrollbar } = useScrollbar({\n axis: disabled ? 'none' : 'vertical',\n });\n\n const chipsRootRef = useRef<HTMLDivElement>(null);\n const chipsRootRefCallback = useMultipleRefs(wrapperRef, chipsRootRef);\n const chipsContainerRef = useRef<HTMLDivElement>(null);\n const chipsContainerRefCallback = useMultipleRefs(chipsContainerRef, scrollbar.contentWrapperRef);\n const inputRef = useRef<HTMLInputElement>(null);\n const inputRefCallback = useMultipleRefs(inputRef, ref);\n const showLabel = state.value === '' && state.chips.length === 0 && placeholder !== '';\n const labelId = useId();\n const ariaLabeledBy = `chips-trigger-label-${labelId}`;\n const deleteButtonAriaTrl = useTranslation('ChipsTrigger', 'delete');\n const deleteButtonAriaLabel = _deleteButtonAriaLabel ?? deleteButtonAriaTrl;\n\n const onChangeInput = useCallback(\n (value: string) => {\n onChange({\n value,\n chips: state.chips,\n event: { type: 'change', modifier: 'keyboard' },\n });\n onChangeInputExternal?.(value);\n },\n [state.chips, onChange, onChangeInputExternal]\n );\n const { changeHandler, focusHandler, blurHandler, isFocused } = useFocus(onChangeInput, onFocus, onBlur);\n\n useEffect(() => {\n if (inputRef.current) {\n setFocusVisible(isFocused && inputRef.current.classList.contains('focus-visible'));\n }\n }, [isFocused]);\n\n const deleteHandler = useCallback(\n (index: number) => {\n const deletedChip = state.chips.splice(index, 1);\n onChange({\n value: state.value,\n chips: [...state.chips],\n event: { type: 'remove', modifier: 'cross', element: deletedChip?.[0] },\n });\n },\n [onChange, state.chips, state.value]\n );\n\n const keyDownHandler = useCallback<KeyboardEventHandler>(\n (event) => {\n // создаем новый чипс и затираем текстовый инпут\n if (allowArbitraryValues && keyboardMatch(event.nativeEvent, keyboardKeys.Enter)) {\n if (state.value.length === 0) {\n return;\n }\n onChange({\n value: '',\n chips: [...state.chips, { value: state.value, userInput: true }],\n event: { type: 'add', modifier: 'enter' },\n });\n onChangeInputExternal?.('');\n }\n // удаляем последний созданный чипс\n if (state.value === '' && keyboardMatch(event.nativeEvent, keyboardKeys.Backspace)) {\n if (state.chips.length === 0) {\n return;\n }\n const deletedChip = state.chips.pop();\n onChange({\n value: state.value,\n chips: [...state.chips],\n event: { type: 'remove', modifier: 'backspace', element: deletedChip },\n });\n }\n // пытаемся найти ближайший чипс для фокуса\n if (state.value === '' && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowLeft)) {\n focusOnLastChip(event, chipsContainerRef.current, inputRef.current);\n }\n },\n [allowArbitraryValues, onChange, onChangeInputExternal, state]\n );\n\n // при выставлении высоты учитваем падинги\n // иначе высота будет больше значения свойства\n const scrollableAreaStyle = maxHeight\n ? { maxHeight: `${maxHeight - (size === 'medium' ? 16 : 24)}px` }\n : undefined;\n\n const showIcon = rightIcon !== false;\n const showCustomIcon = isValidElement(rightIcon);\n\n return (\n <div>\n <div\n ref={chipsRootRefCallback}\n className={classnames(styles.root, styles[size], scrollbar.hoverContainerCssClass, {\n [styles.focused]: isFocused,\n [styles.focusVisible]: isFocusVisible,\n [styles.disabled]: !!disabled,\n [styles.invalid]: !!invalid,\n })}\n onFocus={() => {\n if (disabled) {\n return;\n }\n if (!inputRef.current) {\n return;\n }\n setExpanded(true);\n // добавляем .focus() еще и тут\n // чтобы не сбрасывать фокус во время клика по chip\n // или по клику на враппер\n if (document.activeElement === chipsRootRef.current) {\n inputRef.current.focus();\n }\n }}\n onBlur={(event) => {\n stateRef.current.hadFocusWhenClicked &&=\n event.relatedTarget === chipsRootRef.current || event.relatedTarget === inputRef.current;\n setExpanded(false);\n }}\n onKeyDown={onKeyDown}\n onMouseDown={() => {\n // при повторном клике по инпуту в фокусе нужно закрыть дроп\n // при этом клик может прийтись на обертку, из-за чего инпут поймает blur и повторный фокус\n // что усложняет проверку того, что инпут уже был в фокусе в момент клика\n // поэтому в цепочке mouseDown -> blur -> focus -> click храним флаг, что фокус не вышел за пределы компонента\n stateRef.current.hadFocusWhenClicked = document.activeElement === inputRef.current;\n stateRef.current.wasExpandedWhenClicked = !!externalExpanded;\n }}\n onClick={() => {\n if (\n stateRef.current.hadFocusWhenClicked &&\n stateRef.current.wasExpandedWhenClicked === externalExpanded\n ) {\n toggleExternalExpanded?.();\n }\n stateRef.current.hadFocusWhenClicked = false;\n stateRef.current.wasExpandedWhenClicked = false;\n }}\n tabIndex={disabled ? undefined : 0}\n data-qa={dataQa}\n aria-disabled={disabled}\n >\n <div\n style={scrollableAreaStyle}\n className={classnames(styles.scrollableAreaWrapper, {\n [styles.scrollableAreaWrapperWithIcon]: showIcon,\n })}\n >\n <div\n className={styles.scrollableArea}\n ref={scrollbar.scrollContainerRef as React.Ref<HTMLDivElement>}\n >\n <div ref={chipsContainerRefCallback} className={styles.chipsAndInput}>\n {state.chips.map((chip, index) => {\n return (\n <div\n key={`${chip.value}-${index}`}\n className={styles.customChipWrapper}\n onMouseDown={(event) => event.preventDefault()}\n >\n <CustomChip\n Element=\"button\"\n size=\"extra-small\"\n disabled={disabled}\n onDelete={() => {\n deleteHandler(index);\n }}\n dataQaWrapper={`chips-trigger-chip-${chip.value}`}\n deleteOnly\n deleteButtonAriaLabel={deleteButtonAriaLabel}\n >\n {chip.label ?? chip.value}\n </CustomChip>\n </div>\n );\n })}\n <div className={styles.field}>\n <input\n ref={inputRefCallback}\n className={styles.fieldInput}\n type=\"text\"\n disabled={disabled}\n value={state.value}\n onKeyDown={keyDownHandler}\n onFocus={focusHandler}\n onBlur={blurHandler}\n onChange={changeHandler}\n data-qa=\"chips-trigger-input\"\n readOnly={isMobile}\n aria-labelledby={showLabel ? ariaLabeledBy : undefined}\n role={'combobox'}\n aria-haspopup={'listbox'}\n aria-autocomplete={'list'}\n aria-expanded={ariaExpanded}\n aria-controls={ariaControls}\n />\n {showLabel && (\n <div className={styles.labelWrapper}>\n <label className={styles.label} id={ariaLabeledBy}>\n {placeholder}\n </label>\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n {showIcon && (\n <div\n className={classnames(styles.icon, {\n [styles.iconExpanded]: (expanded || externalExpanded) && !showCustomIcon,\n })}\n data-qa=\"chips-trigger-icon\"\n >\n {showCustomIcon ? rightIcon : <ChevronDownOutlinedSize24 />}\n </div>\n )}\n {hasVerticalScroll && <Scrollbar {...verticalScrollbarProps} />}\n </div>\n <FormHelper\n description={description}\n errorMessage={errorMessage}\n disabled={disabled}\n invalid={invalid}\n />\n </div>\n );\n }\n);\n\nChipsTrigger.displayName = 'ChipsTrigger';\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
package/index.css CHANGED
@@ -1,74 +1,74 @@
1
1
  :root{
2
- --magritte-color-component-input-stroke-state-field-hovered-v25-0-1:#CCD5DF;
3
- --magritte-color-component-input-stroke-state-field-focused-v25-0-1:#0070ff;
4
- --magritte-color-component-input-stroke-state-accent-focused-accessible-v25-0-1:#0070ff7a;
5
- --magritte-color-component-input-stroke-state-field-invalid-v25-0-1:#ff4d3a;
6
- --magritte-color-component-input-stroke-state-negative-focused-accessible-v25-0-1:#ff4d3a7a;
7
- --magritte-color-component-input-stroke-state-field-disabled-v25-0-1:#EEF1F7;
8
- --magritte-color-component-input-background-field-v25-0-1:#ffffff;
9
- --magritte-color-component-input-background-state-field-hovered-v25-0-1:#ffffff;
10
- --magritte-color-component-input-background-state-field-focused-v25-0-1:#ffffff;
11
- --magritte-color-component-input-background-state-field-invalid-v25-0-1:#ffffff;
12
- --magritte-color-component-input-background-state-field-disabled-v25-0-1:#F4F6FB;
13
- --magritte-color-component-input-stroke-field-v25-0-1:#DCE3EB;
14
- --magritte-color-component-input-text-state-content-disabled-v25-0-1:#AABBCA;
15
- --magritte-color-component-input-text-state-placeholder-disabled-v25-0-1:#AABBCA;
16
- --magritte-color-component-input-text-state-content-hovered-v25-0-1:#000000;
17
- --magritte-color-component-input-text-state-content-focused-v25-0-1:#000000;
18
- --magritte-color-component-input-text-state-content-invalid-v25-0-1:#000000;
19
- --magritte-color-component-input-text-state-placeholder-hovered-v25-0-1:#768694;
20
- --magritte-color-component-input-text-state-placeholder-focused-v25-0-1:#AABBCA;
21
- --magritte-color-component-input-text-state-placeholder-invalid-v25-0-1:#AABBCA;
22
- --magritte-color-component-input-icon-chevron-v25-0-1:#AABBCA;
23
- --magritte-color-component-input-icon-state-chevron-focused-v25-0-1:#000000;
24
- --magritte-color-component-input-icon-state-chevron-hovered-v25-0-1:#6a7885;
25
- --magritte-color-component-input-icon-state-chevron-disabled-v25-0-1:#AABBCA;
26
- --magritte-color-component-input-icon-state-chevron-invalid-v25-0-1:#AABBCA;
27
- --magritte-color-component-input-text-content-v25-0-1:#000000;
28
- --magritte-color-component-input-text-placeholder-v25-0-1:#AABBCA;
29
- --magritte-color-component-input-chips-background-state-neutral-disable-v25-0-1:#DCE3EB;
30
- --magritte-color-component-input-chips-text-state-neutral-disable-v25-0-1:#96aabb;
2
+ --magritte-color-component-input-stroke-state-field-hovered-v25-1-0:#CCD5DF;
3
+ --magritte-color-component-input-stroke-state-field-focused-v25-1-0:#0070ff;
4
+ --magritte-color-component-input-stroke-state-accent-focused-accessible-v25-1-0:#0070ff7a;
5
+ --magritte-color-component-input-stroke-state-field-invalid-v25-1-0:#ff4d3a;
6
+ --magritte-color-component-input-stroke-state-negative-focused-accessible-v25-1-0:#ff4d3a7a;
7
+ --magritte-color-component-input-stroke-state-field-disabled-v25-1-0:#EEF1F7;
8
+ --magritte-color-component-input-background-field-v25-1-0:#ffffff;
9
+ --magritte-color-component-input-background-state-field-hovered-v25-1-0:#ffffff;
10
+ --magritte-color-component-input-background-state-field-focused-v25-1-0:#ffffff;
11
+ --magritte-color-component-input-background-state-field-invalid-v25-1-0:#ffffff;
12
+ --magritte-color-component-input-background-state-field-disabled-v25-1-0:#F4F6FB;
13
+ --magritte-color-component-input-stroke-field-v25-1-0:#DCE3EB;
14
+ --magritte-color-component-input-text-state-content-disabled-v25-1-0:#AABBCA;
15
+ --magritte-color-component-input-text-state-placeholder-disabled-v25-1-0:#AABBCA;
16
+ --magritte-color-component-input-text-state-content-hovered-v25-1-0:#000000;
17
+ --magritte-color-component-input-text-state-content-focused-v25-1-0:#000000;
18
+ --magritte-color-component-input-text-state-content-invalid-v25-1-0:#000000;
19
+ --magritte-color-component-input-text-state-placeholder-hovered-v25-1-0:#768694;
20
+ --magritte-color-component-input-text-state-placeholder-focused-v25-1-0:#AABBCA;
21
+ --magritte-color-component-input-text-state-placeholder-invalid-v25-1-0:#AABBCA;
22
+ --magritte-color-component-input-icon-chevron-v25-1-0:#AABBCA;
23
+ --magritte-color-component-input-icon-state-chevron-focused-v25-1-0:#000000;
24
+ --magritte-color-component-input-icon-state-chevron-hovered-v25-1-0:#6a7885;
25
+ --magritte-color-component-input-icon-state-chevron-disabled-v25-1-0:#AABBCA;
26
+ --magritte-color-component-input-icon-state-chevron-invalid-v25-1-0:#AABBCA;
27
+ --magritte-color-component-input-text-content-v25-1-0:#000000;
28
+ --magritte-color-component-input-text-placeholder-v25-1-0:#AABBCA;
29
+ --magritte-color-component-input-chips-background-state-neutral-disable-v25-1-0:#DCE3EB;
30
+ --magritte-color-component-input-chips-text-state-neutral-disable-v25-1-0:#96aabb;
31
31
  }
32
32
 
33
33
  :root{
34
- --magritte-semantic-animation-ease-in-out-100-timing-function-v25-0-1:cubic-bezier(0.25, 0.1, 0.25, 1);
35
- --magritte-semantic-animation-ease-in-out-100-duration-v25-0-1:100ms;
34
+ --magritte-semantic-animation-ease-in-out-100-timing-function-v25-1-0:cubic-bezier(0.25, 0.1, 0.25, 1);
35
+ --magritte-semantic-animation-ease-in-out-100-duration-v25-1-0:100ms;
36
36
  }
37
37
 
38
38
  .magritte-night-theme{
39
- --magritte-color-component-input-stroke-state-field-hovered-v25-0-1:#3B3B3B;
40
- --magritte-color-component-input-stroke-state-field-disabled-v25-0-1:#1B1B1B;
41
- --magritte-color-component-input-background-field-v25-0-1:#111;
42
- --magritte-color-component-input-background-state-field-hovered-v25-0-1:#111;
43
- --magritte-color-component-input-background-state-field-focused-v25-0-1:#111;
44
- --magritte-color-component-input-background-state-field-invalid-v25-0-1:#111;
45
- --magritte-color-component-input-background-state-field-disabled-v25-0-1:#111;
46
- --magritte-color-component-input-stroke-field-v25-0-1:#303030;
47
- --magritte-color-component-input-text-content-v25-0-1:#ffffff;
48
- --magritte-color-component-input-text-placeholder-v25-0-1:#535353;
49
- --magritte-color-component-input-text-state-content-disabled-v25-0-1:#474747;
50
- --magritte-color-component-input-text-state-placeholder-disabled-v25-0-1:#474747;
51
- --magritte-color-component-input-text-state-content-hovered-v25-0-1:#ffffff;
52
- --magritte-color-component-input-text-state-content-focused-v25-0-1:#ffffff;
53
- --magritte-color-component-input-text-state-content-invalid-v25-0-1:#ffffff;
54
- --magritte-color-component-input-text-state-placeholder-hovered-v25-0-1:#5E5E5E;
55
- --magritte-color-component-input-text-state-placeholder-focused-v25-0-1:#535353;
56
- --magritte-color-component-input-text-state-placeholder-invalid-v25-0-1:#535353;
57
- --magritte-color-component-input-icon-state-chevron-disabled-v25-0-1:#474747;
58
- --magritte-color-component-input-icon-state-chevron-hovered-v25-0-1:#848484;
59
- --magritte-color-component-input-icon-state-chevron-focused-v25-0-1:#ffffff;
60
- --magritte-color-component-input-icon-state-chevron-invalid-v25-0-1:#474747;
61
- --magritte-color-component-input-icon-chevron-v25-0-1:#5E5E5E;
62
- --magritte-color-component-input-chips-background-state-neutral-disable-v25-0-1:#1B1B1B;
63
- --magritte-color-component-input-chips-text-state-neutral-disable-v25-0-1:#474747;
39
+ --magritte-color-component-input-stroke-state-field-hovered-v25-1-0:#3B3B3B;
40
+ --magritte-color-component-input-stroke-state-field-disabled-v25-1-0:#1B1B1B;
41
+ --magritte-color-component-input-background-field-v25-1-0:#111;
42
+ --magritte-color-component-input-background-state-field-hovered-v25-1-0:#111;
43
+ --magritte-color-component-input-background-state-field-focused-v25-1-0:#111;
44
+ --magritte-color-component-input-background-state-field-invalid-v25-1-0:#111;
45
+ --magritte-color-component-input-background-state-field-disabled-v25-1-0:#111;
46
+ --magritte-color-component-input-stroke-field-v25-1-0:#303030;
47
+ --magritte-color-component-input-text-content-v25-1-0:#ffffff;
48
+ --magritte-color-component-input-text-placeholder-v25-1-0:#535353;
49
+ --magritte-color-component-input-text-state-content-disabled-v25-1-0:#474747;
50
+ --magritte-color-component-input-text-state-placeholder-disabled-v25-1-0:#474747;
51
+ --magritte-color-component-input-text-state-content-hovered-v25-1-0:#ffffff;
52
+ --magritte-color-component-input-text-state-content-focused-v25-1-0:#ffffff;
53
+ --magritte-color-component-input-text-state-content-invalid-v25-1-0:#ffffff;
54
+ --magritte-color-component-input-text-state-placeholder-hovered-v25-1-0:#5E5E5E;
55
+ --magritte-color-component-input-text-state-placeholder-focused-v25-1-0:#535353;
56
+ --magritte-color-component-input-text-state-placeholder-invalid-v25-1-0:#535353;
57
+ --magritte-color-component-input-icon-state-chevron-disabled-v25-1-0:#474747;
58
+ --magritte-color-component-input-icon-state-chevron-hovered-v25-1-0:#848484;
59
+ --magritte-color-component-input-icon-state-chevron-focused-v25-1-0:#ffffff;
60
+ --magritte-color-component-input-icon-state-chevron-invalid-v25-1-0:#474747;
61
+ --magritte-color-component-input-icon-chevron-v25-1-0:#5E5E5E;
62
+ --magritte-color-component-input-chips-background-state-neutral-disable-v25-1-0:#1B1B1B;
63
+ --magritte-color-component-input-chips-text-state-neutral-disable-v25-1-0:#474747;
64
64
  }
65
65
 
66
66
  .magritte-zp-day-theme{
67
- --magritte-color-component-input-stroke-state-field-focused-v25-0-1:#7195AF;
68
- --magritte-color-component-input-icon-state-chevron-hovered-v25-0-1:#8293a2;
69
- --magritte-color-component-input-icon-state-chevron-disabled-v25-0-1:#96aabb;
67
+ --magritte-color-component-input-stroke-state-field-focused-v25-1-0:#7195AF;
68
+ --magritte-color-component-input-icon-state-chevron-hovered-v25-1-0:#8293a2;
69
+ --magritte-color-component-input-icon-state-chevron-disabled-v25-1-0:#96aabb;
70
70
  }
71
- .magritte-root___-zVdz_4-3-52{
71
+ .magritte-root___-zVdz_4-4-0{
72
72
  display:inline-flex;
73
73
  position:relative;
74
74
  width:100%;
@@ -77,140 +77,146 @@
77
77
  white-space:nowrap;
78
78
  appearance:none;
79
79
  overflow-y:auto;
80
- background-color:var(--magritte-color-component-input-background-field-v25-0-1);
81
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v25-0-1);
80
+ background-color:var(--magritte-color-component-input-background-field-v25-1-0);
81
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v25-1-0);
82
82
  border-radius:12px;
83
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-chevron-v25-0-1);
83
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-chevron-v25-1-0);
84
84
  --magritte-ui-scrollbar-border-radius:12px;
85
85
  }
86
86
  @media (min-width: 1020px){
87
- body.magritte-old-layout .magritte-root___-zVdz_4-3-52:not(.magritte-focused___0Uzyu_4-3-52):not(.magritte-invalid___tVzQV_4-3-52):not(.magritte-disabled___UeqcV_4-3-52):hover{
88
- background-color:var(--magritte-color-component-input-background-state-field-hovered-v25-0-1);
89
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v25-0-1);
90
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-hovered-v25-0-1);
87
+ body.magritte-old-layout .magritte-root___-zVdz_4-4-0:not(.magritte-focused___0Uzyu_4-4-0):not(.magritte-invalid___tVzQV_4-4-0):not(.magritte-disabled___UeqcV_4-4-0):hover{
88
+ background-color:var(--magritte-color-component-input-background-state-field-hovered-v25-1-0);
89
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v25-1-0);
90
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-hovered-v25-1-0);
91
91
  }
92
- body.magritte-old-layout .magritte-root___-zVdz_4-3-52:not(.magritte-focused___0Uzyu_4-3-52):not(.magritte-invalid___tVzQV_4-3-52):not(.magritte-disabled___UeqcV_4-3-52):hover .magritte-label___j7Trt_4-3-52{
93
- color:var(--magritte-color-component-input-text-state-placeholder-hovered-v25-0-1);
92
+ body.magritte-old-layout .magritte-root___-zVdz_4-4-0:not(.magritte-focused___0Uzyu_4-4-0):not(.magritte-invalid___tVzQV_4-4-0):not(.magritte-disabled___UeqcV_4-4-0):hover .magritte-label___j7Trt_4-4-0{
93
+ color:var(--magritte-color-component-input-text-state-placeholder-hovered-v25-1-0);
94
94
  }
95
- body.magritte-old-layout .magritte-root___-zVdz_4-3-52:not(.magritte-focused___0Uzyu_4-3-52):not(.magritte-invalid___tVzQV_4-3-52):not(.magritte-disabled___UeqcV_4-3-52):hover .magritte-field-input___04Cag_4-3-52{
96
- color:var(--magritte-color-component-input-text-state-content-hovered-v25-0-1);
95
+ body.magritte-old-layout .magritte-root___-zVdz_4-4-0:not(.magritte-focused___0Uzyu_4-4-0):not(.magritte-invalid___tVzQV_4-4-0):not(.magritte-disabled___UeqcV_4-4-0):hover .magritte-field-input___04Cag_4-4-0{
96
+ color:var(--magritte-color-component-input-text-state-content-hovered-v25-1-0);
97
97
  }
98
98
  }
99
99
  @media (min-width: 1024px){
100
- body:not(.magritte-old-layout) .magritte-root___-zVdz_4-3-52:not(.magritte-focused___0Uzyu_4-3-52):not(.magritte-invalid___tVzQV_4-3-52):not(.magritte-disabled___UeqcV_4-3-52):hover{
101
- background-color:var(--magritte-color-component-input-background-state-field-hovered-v25-0-1);
102
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v25-0-1);
103
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-hovered-v25-0-1);
100
+ body:not(.magritte-old-layout) .magritte-root___-zVdz_4-4-0:not(.magritte-focused___0Uzyu_4-4-0):not(.magritte-invalid___tVzQV_4-4-0):not(.magritte-disabled___UeqcV_4-4-0):hover{
101
+ background-color:var(--magritte-color-component-input-background-state-field-hovered-v25-1-0);
102
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v25-1-0);
103
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-hovered-v25-1-0);
104
104
  }
105
- body:not(.magritte-old-layout) .magritte-root___-zVdz_4-3-52:not(.magritte-focused___0Uzyu_4-3-52):not(.magritte-invalid___tVzQV_4-3-52):not(.magritte-disabled___UeqcV_4-3-52):hover .magritte-label___j7Trt_4-3-52{
106
- color:var(--magritte-color-component-input-text-state-placeholder-hovered-v25-0-1);
105
+ body:not(.magritte-old-layout) .magritte-root___-zVdz_4-4-0:not(.magritte-focused___0Uzyu_4-4-0):not(.magritte-invalid___tVzQV_4-4-0):not(.magritte-disabled___UeqcV_4-4-0):hover .magritte-label___j7Trt_4-4-0{
106
+ color:var(--magritte-color-component-input-text-state-placeholder-hovered-v25-1-0);
107
107
  }
108
- body:not(.magritte-old-layout) .magritte-root___-zVdz_4-3-52:not(.magritte-focused___0Uzyu_4-3-52):not(.magritte-invalid___tVzQV_4-3-52):not(.magritte-disabled___UeqcV_4-3-52):hover .magritte-field-input___04Cag_4-3-52{
109
- color:var(--magritte-color-component-input-text-state-content-hovered-v25-0-1);
108
+ body:not(.magritte-old-layout) .magritte-root___-zVdz_4-4-0:not(.magritte-focused___0Uzyu_4-4-0):not(.magritte-invalid___tVzQV_4-4-0):not(.magritte-disabled___UeqcV_4-4-0):hover .magritte-field-input___04Cag_4-4-0{
109
+ color:var(--magritte-color-component-input-text-state-content-hovered-v25-1-0);
110
110
  }
111
111
  }
112
- .magritte-root___-zVdz_4-3-52:not(.magritte-disabled___UeqcV_4-3-52){
112
+ .magritte-root___-zVdz_4-4-0:not(.magritte-disabled___UeqcV_4-4-0){
113
113
  cursor:text;
114
114
  }
115
- .magritte-root___-zVdz_4-3-52.magritte-focused___0Uzyu_4-3-52{
116
- background-color:var(--magritte-color-component-input-background-state-field-focused-v25-0-1);
117
- box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v25-0-1);
118
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v25-0-1);
115
+ .magritte-root___-zVdz_4-4-0.magritte-focused___0Uzyu_4-4-0{
116
+ background-color:var(--magritte-color-component-input-background-state-field-focused-v25-1-0);
117
+ box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v25-1-0);
118
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v25-1-0);
119
119
  }
120
- .magritte-root___-zVdz_4-3-52.magritte-focused___0Uzyu_4-3-52 .magritte-label___j7Trt_4-3-52{
121
- color:var(--magritte-color-component-input-text-state-placeholder-focused-v25-0-1);
120
+ .magritte-root___-zVdz_4-4-0.magritte-focused___0Uzyu_4-4-0 .magritte-label___j7Trt_4-4-0{
121
+ color:var(--magritte-color-component-input-text-state-placeholder-focused-v25-1-0);
122
122
  }
123
- .magritte-root___-zVdz_4-3-52.magritte-focused___0Uzyu_4-3-52 .magritte-field-input___04Cag_4-3-52{
124
- color:var(--magritte-color-component-input-text-state-content-focused-v25-0-1);
123
+ .magritte-root___-zVdz_4-4-0.magritte-focused___0Uzyu_4-4-0 .magritte-field-input___04Cag_4-4-0{
124
+ color:var(--magritte-color-component-input-text-state-content-focused-v25-1-0);
125
125
  }
126
- .magritte-root___-zVdz_4-3-52.magritte-invalid___tVzQV_4-3-52{
127
- background-color:var(--magritte-color-component-input-background-state-field-invalid-v25-0-1);
128
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v25-0-1);
129
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-invalid-v25-0-1);
126
+ .magritte-root___-zVdz_4-4-0.magritte-invalid___tVzQV_4-4-0{
127
+ background-color:var(--magritte-color-component-input-background-state-field-invalid-v25-1-0);
128
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v25-1-0);
129
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-invalid-v25-1-0);
130
130
  }
131
- .magritte-root___-zVdz_4-3-52.magritte-invalid___tVzQV_4-3-52 .magritte-label___j7Trt_4-3-52{
132
- color:var(--magritte-color-component-input-text-state-placeholder-invalid-v25-0-1);
131
+ .magritte-root___-zVdz_4-4-0.magritte-invalid___tVzQV_4-4-0 .magritte-label___j7Trt_4-4-0{
132
+ color:var(--magritte-color-component-input-text-state-placeholder-invalid-v25-1-0);
133
133
  }
134
- .magritte-root___-zVdz_4-3-52.magritte-invalid___tVzQV_4-3-52 .magritte-field-input___04Cag_4-3-52{
135
- color:var(--magritte-color-component-input-text-state-content-invalid-v25-0-1);
134
+ .magritte-root___-zVdz_4-4-0.magritte-invalid___tVzQV_4-4-0 .magritte-field-input___04Cag_4-4-0{
135
+ color:var(--magritte-color-component-input-text-state-content-invalid-v25-1-0);
136
136
  }
137
- .magritte-root___-zVdz_4-3-52.magritte-disabled___UeqcV_4-3-52{
138
- background-color:var(--magritte-color-component-input-background-state-field-disabled-v25-0-1);
139
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-disabled-v25-0-1);
140
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-disabled-v25-0-1);
141
- --magritte-ui-chip-text-color-override:var(--magritte-color-component-input-chips-text-state-neutral-disable-v25-0-1);
142
- --magritte-ui-chip-background-color-override:var(--magritte-color-component-input-chips-background-state-neutral-disable-v25-0-1);
137
+ .magritte-root___-zVdz_4-4-0.magritte-disabled___UeqcV_4-4-0{
138
+ background-color:var(--magritte-color-component-input-background-state-field-disabled-v25-1-0);
139
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-disabled-v25-1-0);
140
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-disabled-v25-1-0);
141
+ --magritte-ui-chip-text-color-override:var(--magritte-color-component-input-chips-text-state-neutral-disable-v25-1-0);
142
+ --magritte-ui-chip-background-color-override:var(--magritte-color-component-input-chips-background-state-neutral-disable-v25-1-0);
143
143
  }
144
- .magritte-root___-zVdz_4-3-52.magritte-disabled___UeqcV_4-3-52 .magritte-label___j7Trt_4-3-52{
145
- color:var(--magritte-color-component-input-text-state-placeholder-disabled-v25-0-1);
144
+ .magritte-root___-zVdz_4-4-0.magritte-disabled___UeqcV_4-4-0 .magritte-label___j7Trt_4-4-0{
145
+ color:var(--magritte-color-component-input-text-state-placeholder-disabled-v25-1-0);
146
146
  }
147
- .magritte-root___-zVdz_4-3-52.magritte-disabled___UeqcV_4-3-52 .magritte-field-input___04Cag_4-3-52{
148
- color:var(--magritte-color-component-input-text-state-content-disabled-v25-0-1);
147
+ .magritte-root___-zVdz_4-4-0.magritte-disabled___UeqcV_4-4-0 .magritte-field-input___04Cag_4-4-0{
148
+ color:var(--magritte-color-component-input-text-state-content-disabled-v25-1-0);
149
149
  }
150
- .magritte-root___-zVdz_4-3-52.magritte-disabled___UeqcV_4-3-52 .magritte-scrollable-area___-xMF2_4-3-52{
150
+ .magritte-root___-zVdz_4-4-0.magritte-disabled___UeqcV_4-4-0 .magritte-scrollable-area___-xMF2_4-4-0{
151
151
  overflow:hidden;
152
152
  }
153
- .magritte-root___-zVdz_4-3-52.magritte-focus-visible___ifvAP_4-3-52{
154
- outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v25-0-1) solid 4px;
153
+ .magritte-root___-zVdz_4-4-0.magritte-focus-visible___ifvAP_4-4-0{
154
+ outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v25-1-0) solid 4px;
155
155
  }
156
- .magritte-root___-zVdz_4-3-52.magritte-focus-visible___ifvAP_4-3-52.magritte-invalid___tVzQV_4-3-52{
157
- outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v25-0-1);
156
+ .magritte-root___-zVdz_4-4-0.magritte-focus-visible___ifvAP_4-4-0.magritte-invalid___tVzQV_4-4-0{
157
+ outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v25-1-0);
158
158
  }
159
- .magritte-large___JIrIy_4-3-52{
159
+ .magritte-large___JIrIy_4-4-0{
160
160
  padding-left:12px;
161
161
  padding-top:12px;
162
162
  padding-bottom:12px;
163
163
  padding-right:2px;
164
164
  }
165
- .magritte-large___JIrIy_4-3-52 .magritte-field___rlEmn_4-3-52{
165
+ .magritte-large___JIrIy_4-4-0 .magritte-field___rlEmn_4-4-0{
166
166
  margin-left:4px;
167
167
  }
168
- .magritte-large___JIrIy_4-3-52 .magritte-icon___fDMiz_4-3-52{
168
+ .magritte-large___JIrIy_4-4-0 .magritte-icon___fDMiz_4-4-0{
169
169
  top:12px;
170
170
  right:16px;
171
171
  }
172
- .magritte-large___JIrIy_4-3-52 .magritte-scrollable-area-wrapper___hZNQd_4-3-52{
172
+ .magritte-large___JIrIy_4-4-0 .magritte-scrollable-area-wrapper___hZNQd_4-4-0{
173
+ padding-right:10px;
174
+ }
175
+ .magritte-large___JIrIy_4-4-0 .magritte-scrollable-area-wrapper_with-icon___2VoX9_4-4-0{
173
176
  padding-right:calc(24px + 10px + 12px);
174
177
  }
175
- .magritte-medium___Xk-XB_4-3-52{
178
+ .magritte-medium___Xk-XB_4-4-0{
176
179
  padding-left:8px;
177
180
  padding-top:8px;
178
181
  padding-bottom:8px;
179
182
  padding-right:2px;
180
183
  }
181
- .magritte-medium___Xk-XB_4-3-52 .magritte-field___rlEmn_4-3-52{
184
+ .magritte-medium___Xk-XB_4-4-0 .magritte-field___rlEmn_4-4-0{
182
185
  margin-left:8px;
183
186
  }
184
- .magritte-medium___Xk-XB_4-3-52 .magritte-icon___fDMiz_4-3-52{
187
+ .magritte-medium___Xk-XB_4-4-0 .magritte-icon___fDMiz_4-4-0{
185
188
  top:8px;
186
189
  right:12px;
187
190
  }
188
- .magritte-medium___Xk-XB_4-3-52 .magritte-scrollable-area-wrapper___hZNQd_4-3-52{
191
+ .magritte-medium___Xk-XB_4-4-0 .magritte-scrollable-area-wrapper___hZNQd_4-4-0{
192
+ padding-right:6px;
193
+ }
194
+ .magritte-medium___Xk-XB_4-4-0 .magritte-scrollable-area-wrapper_with-icon___2VoX9_4-4-0{
189
195
  padding-right:calc(24px + 6px + 12px);
190
196
  }
191
- .magritte-scrollable-area-wrapper___hZNQd_4-3-52{
197
+ .magritte-scrollable-area-wrapper___hZNQd_4-4-0{
192
198
  width:100%;
193
199
  position:relative;
194
200
  overflow:hidden;
195
201
  }
196
- .magritte-scrollable-area___-xMF2_4-3-52{
202
+ .magritte-scrollable-area___-xMF2_4-4-0{
197
203
  height:100%;
198
204
  display:flex;
199
205
  align-items:flex-start;
200
206
  overflow-y:auto;
201
207
  scrollbar-width:none;
202
208
  }
203
- .magritte-scrollable-area___-xMF2_4-3-52::-webkit-scrollbar{
209
+ .magritte-scrollable-area___-xMF2_4-4-0::-webkit-scrollbar{
204
210
  display:none;
205
211
  }
206
- .magritte-chips-and-input___qg-Ba_4-3-52{
212
+ .magritte-chips-and-input___qg-Ba_4-4-0{
207
213
  display:flex;
208
214
  gap:6px;
209
215
  flex-wrap:wrap;
210
216
  align-items:center;
211
217
  width:100%;
212
218
  }
213
- .magritte-field___rlEmn_4-3-52{
219
+ .magritte-field___rlEmn_4-4-0{
214
220
  display:flex;
215
221
  align-items:center;
216
222
  position:relative;
@@ -226,41 +232,41 @@
226
232
  text-transform:none;
227
233
  text-decoration:none;
228
234
  }
229
- .magritte-field-input___04Cag_4-3-52{
235
+ .magritte-field-input___04Cag_4-4-0{
230
236
  border:0;
231
237
  padding:0;
232
238
  background:none;
233
239
  outline:none;
234
240
  width:100%;
235
241
  z-index:1;
236
- color:var(--magritte-color-component-input-text-content-v25-0-1);
242
+ color:var(--magritte-color-component-input-text-content-v25-1-0);
237
243
  }
238
- .magritte-label-wrapper___De7Bm_4-3-52{
244
+ .magritte-label-wrapper___De7Bm_4-4-0{
239
245
  display:flex;
240
246
  align-items:center;
241
247
  position:absolute;
242
248
  height:100%;
243
249
  inset:0;
244
250
  }
245
- .magritte-label___j7Trt_4-3-52{
246
- color:var(--magritte-color-component-input-text-placeholder-v25-0-1);
251
+ .magritte-label___j7Trt_4-4-0{
252
+ color:var(--magritte-color-component-input-text-placeholder-v25-1-0);
247
253
  overflow:hidden;
248
254
  text-overflow:ellipsis;
249
255
  }
250
- .magritte-icon___fDMiz_4-3-52{
256
+ .magritte-icon___fDMiz_4-4-0{
251
257
  display:inline-flex;
252
258
  margin-left:auto;
253
259
  padding:4px 0;
254
260
  position:absolute;
255
261
  transition-property:transform;
256
- transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v25-0-1);
257
- transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v25-0-1);
262
+ transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v25-1-0);
263
+ transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v25-1-0);
258
264
  }
259
- .magritte-icon_expanded___RaOT-_4-3-52{
265
+ .magritte-icon_expanded___RaOT-_4-4-0{
260
266
  transform:rotate(-180deg);
261
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v25-0-1);
267
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v25-1-0);
262
268
  }
263
- .magritte-custom-chip-wrapper___a9kJ6_4-3-52{
269
+ .magritte-custom-chip-wrapper___a9kJ6_4-4-0{
264
270
  display:inline-flex;
265
271
  min-width:0;
266
272
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-chips-trigger",
3
- "version": "4.3.52",
3
+ "version": "4.4.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -29,14 +29,14 @@
29
29
  "@hh.ru/magritte-common-keyboard": "4.3.5",
30
30
  "@hh.ru/magritte-common-use-multiple-refs": "1.1.11",
31
31
  "@hh.ru/magritte-common-use-translation": "3.5.0",
32
- "@hh.ru/magritte-design-tokens": "25.0.1",
32
+ "@hh.ru/magritte-design-tokens": "25.1.0",
33
33
  "@hh.ru/magritte-ui-breakpoint": "6.1.1",
34
- "@hh.ru/magritte-ui-chips": "7.0.41",
35
- "@hh.ru/magritte-ui-form-helper": "2.1.21",
36
- "@hh.ru/magritte-ui-icon": "15.1.1",
37
- "@hh.ru/magritte-ui-input": "9.4.47",
34
+ "@hh.ru/magritte-ui-chips": "7.0.42",
35
+ "@hh.ru/magritte-ui-form-helper": "2.1.22",
36
+ "@hh.ru/magritte-ui-icon": "15.1.2",
37
+ "@hh.ru/magritte-ui-input": "9.4.48",
38
38
  "@hh.ru/magritte-ui-mock-component": "1.1.7",
39
- "@hh.ru/magritte-ui-scrollbar": "1.0.35"
39
+ "@hh.ru/magritte-ui-scrollbar": "1.0.36"
40
40
  },
41
- "gitHead": "e09b73c28a17b73584ecfc0a9dc5b10141d2e305"
41
+ "gitHead": "5bddae92a50dcde0bc1a176cd2f09144312d0baf"
42
42
  }
package/types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { FocusEventHandler, ForwardedRef, ReactNode, KeyboardEventHandler } from 'react';
1
+ import type { FocusEventHandler, ForwardedRef, ReactNode, KeyboardEventHandler, ReactElement } from 'react';
2
2
  export type ChipsTriggerSize = 'medium' | 'large';
3
3
  export type ChipsTriggerEventType = 'change' | 'remove' | 'add';
4
4
  export type ChipsTriggerEventModifier = 'keyboard' | 'cross' | 'enter' | 'backspace';
@@ -36,6 +36,13 @@ export interface ChipsTriggerProps {
36
36
  onChangeInput?: (value: string) => void;
37
37
  /** Значение инпута */
38
38
  state: ChipsTriggerState;
39
+ /**
40
+ * Иконка справа
41
+ * true - показать дефолтный шеврон
42
+ * false - скрыть иконку
43
+ * ReactElement - своя иконка
44
+ */
45
+ rightIcon?: ReactElement | boolean;
39
46
  /** Обработчик события получения фокуса */
40
47
  onFocus?: FocusEventHandler<HTMLInputElement>;
41
48
  /** Обработчик события потери фокуса */