@hh.ru/magritte-ui-chips-trigger 4.0.11 → 4.1.1

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 (8) hide show
  1. package/ChipsTrigger.js +13 -8
  2. package/ChipsTrigger.js.map +1 -1
  3. package/UncontrolledChipsTrigger.js +1 -0
  4. package/UncontrolledChipsTrigger.js.map +1 -1
  5. package/index.css +154 -181
  6. package/index.js +1 -0
  7. package/index.js.map +1 -1
  8. package/package.json +9 -8
package/ChipsTrigger.js CHANGED
@@ -9,8 +9,9 @@ import { CustomChip } from '@hh.ru/magritte-ui-chips';
9
9
  import { FormHelper } from '@hh.ru/magritte-ui-form-helper';
10
10
  import { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
11
11
  import { useFocus } from '@hh.ru/magritte-ui-input/useFocus';
12
+ import { useScrollbar, Scrollbar } from '@hh.ru/magritte-ui-scrollbar';
12
13
 
13
- var styles = {"root":"magritte-root___-zVdz_4-0-11","focused":"magritte-focused___0Uzyu_4-0-11","invalid":"magritte-invalid___tVzQV_4-0-11","disabled":"magritte-disabled___UeqcV_4-0-11","label":"magritte-label___j7Trt_4-0-11","focus-visible":"magritte-focus-visible___ifvAP_4-0-11","focusVisible":"magritte-focus-visible___ifvAP_4-0-11","large":"magritte-large___JIrIy_4-0-11","field":"magritte-field___rlEmn_4-0-11","icon":"magritte-icon___fDMiz_4-0-11","scrollable-area":"magritte-scrollable-area___-xMF2_4-0-11","scrollableArea":"magritte-scrollable-area___-xMF2_4-0-11","medium":"magritte-medium___Xk-XB_4-0-11","chips-and-input":"magritte-chips-and-input___qg-Ba_4-0-11","chipsAndInput":"magritte-chips-and-input___qg-Ba_4-0-11","field-input":"magritte-field-input___04Cag_4-0-11","fieldInput":"magritte-field-input___04Cag_4-0-11","label-wrapper":"magritte-label-wrapper___De7Bm_4-0-11","labelWrapper":"magritte-label-wrapper___De7Bm_4-0-11","icon_expanded":"magritte-icon_expanded___RaOT-_4-0-11","iconExpanded":"magritte-icon_expanded___RaOT-_4-0-11","custom-chip-wrapper":"magritte-custom-chip-wrapper___a9kJ6_4-0-11","customChipWrapper":"magritte-custom-chip-wrapper___a9kJ6_4-0-11"};
14
+ var styles = {"root":"magritte-root___-zVdz_4-1-1","focused":"magritte-focused___0Uzyu_4-1-1","invalid":"magritte-invalid___tVzQV_4-1-1","disabled":"magritte-disabled___UeqcV_4-1-1","label":"magritte-label___j7Trt_4-1-1","scrollable-area":"magritte-scrollable-area___-xMF2_4-1-1","scrollableArea":"magritte-scrollable-area___-xMF2_4-1-1","focus-visible":"magritte-focus-visible___ifvAP_4-1-1","focusVisible":"magritte-focus-visible___ifvAP_4-1-1","large":"magritte-large___JIrIy_4-1-1","field":"magritte-field___rlEmn_4-1-1","icon":"magritte-icon___fDMiz_4-1-1","scrollable-area-wrapper":"magritte-scrollable-area-wrapper___hZNQd_4-1-1","scrollableAreaWrapper":"magritte-scrollable-area-wrapper___hZNQd_4-1-1","medium":"magritte-medium___Xk-XB_4-1-1","chips-and-input":"magritte-chips-and-input___qg-Ba_4-1-1","chipsAndInput":"magritte-chips-and-input___qg-Ba_4-1-1","field-input":"magritte-field-input___04Cag_4-1-1","fieldInput":"magritte-field-input___04Cag_4-1-1","label-wrapper":"magritte-label-wrapper___De7Bm_4-1-1","labelWrapper":"magritte-label-wrapper___De7Bm_4-1-1","icon_expanded":"magritte-icon_expanded___RaOT-_4-1-1","iconExpanded":"magritte-icon_expanded___RaOT-_4-1-1","custom-chip-wrapper":"magritte-custom-chip-wrapper___a9kJ6_4-1-1","customChipWrapper":"magritte-custom-chip-wrapper___a9kJ6_4-1-1"};
14
15
 
15
16
  const focusOnLastChip = (event, chipsContainer, input) => {
16
17
  if (!chipsContainer || !input) {
@@ -27,9 +28,13 @@ const ChipsTrigger = forwardRef(({ size = 'large', placeholder, disabled, expand
27
28
  const [expanded, setExpanded] = useState(false);
28
29
  const [isFocusVisible, setFocusVisible] = useState(false);
29
30
  const stateRef = useRef({ hadFocusWhenClicked: false, wasExpandedWhenClicked: false });
31
+ const { hasVerticalScroll, verticalScrollbarProps, ...scrollbar } = useScrollbar({
32
+ axis: disabled ? 'none' : 'vertical',
33
+ });
30
34
  const chipsRootRef = useRef(null);
31
35
  const chipsRootRefCallback = useMultipleRefs(wrapperRef, chipsRootRef);
32
36
  const chipsContainerRef = useRef(null);
37
+ const chipsContainerRefCallback = useMultipleRefs(chipsContainerRef, scrollbar.contentWrapperRef);
33
38
  const inputRef = useRef(null);
34
39
  const inputRefCallback = useMultipleRefs(ref, inputRef);
35
40
  const showLabel = state.value === '' && state.chips.length === 0 && placeholder !== '';
@@ -90,7 +95,7 @@ const ChipsTrigger = forwardRef(({ size = 'large', placeholder, disabled, expand
90
95
  const scrollableAreaStyle = maxHeight
91
96
  ? { maxHeight: `${maxHeight - (size === 'medium' ? 16 : 24)}px` }
92
97
  : undefined;
93
- return (jsxs("div", { children: [jsxs("div", { ref: chipsRootRefCallback, className: classnames(styles.root, styles[size], {
98
+ return (jsxs("div", { children: [jsxs("div", { ref: chipsRootRefCallback, className: classnames(styles.root, styles[size], scrollbar.hoverContainerCssClass, {
94
99
  [styles.focused]: isFocused,
95
100
  [styles.focusVisible]: isFocusVisible,
96
101
  [styles.disabled]: !!disabled,
@@ -127,13 +132,13 @@ const ChipsTrigger = forwardRef(({ size = 'large', placeholder, disabled, expand
127
132
  }
128
133
  stateRef.current.hadFocusWhenClicked = false;
129
134
  stateRef.current.wasExpandedWhenClicked = false;
130
- }, tabIndex: disabled ? -1 : 0, "data-qa": dataQa, children: [jsx("div", { style: scrollableAreaStyle, className: styles.scrollableArea, children: jsxs("div", { ref: chipsContainerRef, className: styles.chipsAndInput, children: [state.chips.map((chip, index) => {
131
- return (jsx("div", { className: styles.customChipWrapper, onMouseDown: (event) => event.preventDefault(), children: jsx(CustomChip, { Element: "button", size: "small", disabled: disabled, onDelete: () => {
132
- deleteHandler(index);
133
- }, dataQaWrapper: `chips-trigger-chip-${chip.value}`, deleteOnly: true, children: chip.label ?? chip.value }) }, `${chip.value}-${index}`));
134
- }), 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 }), showLabel && (jsx("div", { className: styles.labelWrapper, children: jsx("label", { className: styles.label, children: placeholder }) }))] })] }) }), jsx("div", { className: classnames(styles.icon, {
135
+ }, tabIndex: disabled ? -1 : 0, "data-qa": dataQa, 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) => {
136
+ return (jsx("div", { className: styles.customChipWrapper, onMouseDown: (event) => event.preventDefault(), children: jsx(CustomChip, { Element: "button", size: "small", disabled: disabled, onDelete: () => {
137
+ deleteHandler(index);
138
+ }, dataQaWrapper: `chips-trigger-chip-${chip.value}`, deleteOnly: true, children: chip.label ?? chip.value }) }, `${chip.value}-${index}`));
139
+ }), 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 }), showLabel && (jsx("div", { className: styles.labelWrapper, children: jsx("label", { className: styles.label, children: placeholder }) }))] })] }) }) }), jsx("div", { className: classnames(styles.icon, {
135
140
  [styles.iconExpanded]: expanded || externalExpanded,
136
- }), children: jsx(ChevronDownOutlinedSize24, {}) })] }), jsx(FormHelper, { description: description, errorMessage: errorMessage, disabled: disabled, invalid: invalid })] }));
141
+ }), children: jsx(ChevronDownOutlinedSize24, {}) }), hasVerticalScroll && jsx(Scrollbar, { ...verticalScrollbarProps })] }), jsx(FormHelper, { description: description, errorMessage: errorMessage, disabled: disabled, invalid: invalid })] }));
137
142
  });
138
143
  ChipsTrigger.displayName = 'ChipsTrigger';
139
144
 
package/ChipsTrigger.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ChipsTrigger.js","sources":["../src/ChipsTrigger.tsx"],"sourcesContent":["import {\n forwardRef,\n InputHTMLAttributes,\n useState,\n useCallback,\n KeyboardEventHandler,\n useRef,\n SyntheticEvent,\n useEffect,\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 { 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';\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 },\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 chipsRootRef = useRef<HTMLDivElement>(null);\n const chipsRootRefCallback = useMultipleRefs(wrapperRef, chipsRootRef);\n const chipsContainerRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const inputRefCallback = useMultipleRefs(ref, inputRef);\n const showLabel = state.value === '' && state.chips.length === 0 && placeholder !== '';\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], {\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 ? -1 : 0}\n data-qa={dataQa}\n >\n <div style={scrollableAreaStyle} className={styles.scrollableArea}>\n <div ref={chipsContainerRef} 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=\"small\"\n disabled={disabled}\n onDelete={() => {\n deleteHandler(index);\n }}\n dataQaWrapper={`chips-trigger-chip-${chip.value}`}\n deleteOnly\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 />\n {showLabel && (\n <div className={styles.labelWrapper}>\n <label className={styles.label}>{placeholder}</label>\n </div>\n )}\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 </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 forwardRef,\n InputHTMLAttributes,\n useState,\n useCallback,\n KeyboardEventHandler,\n useRef,\n SyntheticEvent,\n useEffect,\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 { 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 },\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(ref, inputRef);\n const showLabel = state.value === '' && state.chips.length === 0 && placeholder !== '';\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 ? -1 : 0}\n data-qa={dataQa}\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=\"small\"\n disabled={disabled}\n onDelete={() => {\n deleteHandler(index);\n }}\n dataQaWrapper={`chips-trigger-chip-${chip.value}`}\n deleteOnly\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 />\n {showLabel && (\n <div className={styles.labelWrapper}>\n <label className={styles.label}>{placeholder}</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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"}
package/UncontrolledChipsTrigger.js CHANGED
@@ -10,6 +10,7 @@ import '@hh.ru/magritte-ui-chips';
10
10
  import '@hh.ru/magritte-ui-form-helper';
11
11
  import '@hh.ru/magritte-ui-icon/icon';
12
12
  import '@hh.ru/magritte-ui-input/useFocus';
13
+ import '@hh.ru/magritte-ui-scrollbar';
13
14
 
14
15
  const DEFAULT_STATE = {
15
16
  value: '',
package/UncontrolledChipsTrigger.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"UncontrolledChipsTrigger.js","sources":["../src/UncontrolledChipsTrigger.tsx"],"sourcesContent":["import { forwardRef, InputHTMLAttributes, useState } from 'react';\n\nimport { ChipsTrigger } from '@hh.ru/magritte-ui-chips-trigger/ChipsTrigger';\nimport { UncontrolledChipsTriggerProps, ChipsTriggerState } from '@hh.ru/magritte-ui-chips-trigger/types';\n\nconst DEFAULT_STATE = {\n value: '',\n chips: [],\n};\n\nexport const UncontrolledChipsTrigger = forwardRef<\n HTMLInputElement,\n UncontrolledChipsTriggerProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof UncontrolledChipsTriggerProps>\n>(({ state: defaultState = DEFAULT_STATE, onChange, name, ...restProps }, ref) => {\n const [state, setState] = useState<ChipsTriggerState>({ ...defaultState });\n return (\n <>\n <ChipsTrigger\n {...restProps}\n state={state}\n onChange={(newState) => {\n setState(newState);\n onChange?.(newState);\n }}\n ref={ref}\n />\n {state.chips.map((chip) => (\n <input type=\"hidden\" name={name} value={chip.value} key={chip.value} />\n ))}\n </>\n );\n});\n\nUncontrolledChipsTrigger.displayName = 'UncontrolledChipsTrigger';\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;;;AAKA,MAAM,aAAa,GAAG;AAClB,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,KAAK,EAAE,EAAE;CACZ,CAAC;AAEW,MAAA,wBAAwB,GAAG,UAAU,CAGhD,CAAC,EAAE,KAAK,EAAE,YAAY,GAAG,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG,KAAI;AAC7E,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAoB,EAAE,GAAG,YAAY,EAAE,CAAC,CAAC;AAC3E,IAAA,QACIA,IACI,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAAAC,GAAA,CAAC,YAAY,EAAA,EAAA,GACL,SAAS,EACb,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,QAAQ,KAAI;oBACnB,QAAQ,CAAC,QAAQ,CAAC,CAAC;AACnB,oBAAA,QAAQ,GAAG,QAAQ,CAAC,CAAC;AACzB,iBAAC,EACD,GAAG,EAAE,GAAG,EACV,CAAA,EACD,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MAClBA,GAAO,CAAA,OAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAO,EAAA,IAAI,CAAC,KAAK,CAAI,CAC1E,CAAC,CAAA,EAAA,CACH,EACL;AACN,CAAC,EAAE;AAEH,wBAAwB,CAAC,WAAW,GAAG,0BAA0B;;;;"}
1
+ {"version":3,"file":"UncontrolledChipsTrigger.js","sources":["../src/UncontrolledChipsTrigger.tsx"],"sourcesContent":["import { forwardRef, InputHTMLAttributes, useState } from 'react';\n\nimport { ChipsTrigger } from '@hh.ru/magritte-ui-chips-trigger/ChipsTrigger';\nimport { UncontrolledChipsTriggerProps, ChipsTriggerState } from '@hh.ru/magritte-ui-chips-trigger/types';\n\nconst DEFAULT_STATE = {\n value: '',\n chips: [],\n};\n\nexport const UncontrolledChipsTrigger = forwardRef<\n HTMLInputElement,\n UncontrolledChipsTriggerProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof UncontrolledChipsTriggerProps>\n>(({ state: defaultState = DEFAULT_STATE, onChange, name, ...restProps }, ref) => {\n const [state, setState] = useState<ChipsTriggerState>({ ...defaultState });\n return (\n <>\n <ChipsTrigger\n {...restProps}\n state={state}\n onChange={(newState) => {\n setState(newState);\n onChange?.(newState);\n }}\n ref={ref}\n />\n {state.chips.map((chip) => (\n <input type=\"hidden\" name={name} value={chip.value} key={chip.value} />\n ))}\n </>\n );\n});\n\nUncontrolledChipsTrigger.displayName = 'UncontrolledChipsTrigger';\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;;;;AAKA,MAAM,aAAa,GAAG;AAClB,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,KAAK,EAAE,EAAE;CACZ,CAAC;AAEW,MAAA,wBAAwB,GAAG,UAAU,CAGhD,CAAC,EAAE,KAAK,EAAE,YAAY,GAAG,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG,KAAI;AAC7E,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAoB,EAAE,GAAG,YAAY,EAAE,CAAC,CAAC;AAC3E,IAAA,QACIA,IACI,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAAAC,GAAA,CAAC,YAAY,EAAA,EAAA,GACL,SAAS,EACb,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,QAAQ,KAAI;oBACnB,QAAQ,CAAC,QAAQ,CAAC,CAAC;AACnB,oBAAA,QAAQ,GAAG,QAAQ,CAAC,CAAC;AACzB,iBAAC,EACD,GAAG,EAAE,GAAG,EACV,CAAA,EACD,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MAClBA,GAAO,CAAA,OAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAO,EAAA,IAAI,CAAC,KAAK,CAAI,CAC1E,CAAC,CAAA,EAAA,CACH,EACL;AACN,CAAC,EAAE;AAEH,wBAAwB,CAAC,WAAW,GAAG,0BAA0B;;;;"}
package/index.css CHANGED
@@ -1,105 +1,64 @@
1
1
  :root{
2
- --magritte-color-component-input-stroke-state-field-hovered-v23-2-1:#CCD5DF;
3
- --magritte-color-component-input-stroke-state-field-focused-v23-2-1:#0070ff;
4
- --magritte-color-component-input-stroke-state-accent-focused-accessible-v23-2-1:#0070ff7a;
5
- --magritte-color-component-input-stroke-state-field-invalid-v23-2-1:#ff4d3a;
6
- --magritte-color-component-input-stroke-state-negative-focused-accessible-v23-2-1:#ff4d3a7a;
7
- --magritte-color-component-input-stroke-state-field-disabled-v23-2-1:#EEF1F7;
8
- --magritte-color-component-input-background-field-v23-2-1:#ffffff;
9
- --magritte-color-component-input-background-state-field-hovered-v23-2-1:#ffffff;
10
- --magritte-color-component-input-background-state-field-focused-v23-2-1:#ffffff;
11
- --magritte-color-component-input-background-state-field-invalid-v23-2-1:#ffffff;
12
- --magritte-color-component-input-background-state-field-disabled-v23-2-1:#F4F6FB;
13
- --magritte-color-component-input-stroke-field-v23-2-1:#DCE3EB;
14
- --magritte-color-component-input-text-state-placeholder-disabled-v23-2-1:#AABBCA;
15
- --magritte-color-component-input-text-state-placeholder-hovered-v23-2-1:#768694;
16
- --magritte-color-component-input-text-state-placeholder-focused-v23-2-1:#AABBCA;
17
- --magritte-color-component-input-text-state-placeholder-invalid-v23-2-1:#AABBCA;
18
- --magritte-color-component-input-icon-chevron-v23-2-1:#AABBCA;
19
- --magritte-color-component-input-icon-state-chevron-focused-v23-2-1:#000000;
20
- --magritte-color-component-input-icon-state-chevron-hovered-v23-2-1:#6a7885;
21
- --magritte-color-component-input-icon-state-chevron-disabled-v23-2-1:#AABBCA;
22
- --magritte-color-component-input-icon-state-chevron-invalid-v23-2-1:#AABBCA;
23
- --magritte-color-component-input-text-placeholder-v23-2-1:#AABBCA;
24
- --magritte-color-component-input-chips-background-state-neutral-disable-v23-2-1:#DCE3EB;
25
- --magritte-color-component-input-chips-text-state-neutral-disable-v23-2-1:#96aabb;
2
+ --magritte-color-component-input-stroke-state-field-hovered-v23-2-2:#CCD5DF;
3
+ --magritte-color-component-input-stroke-state-field-focused-v23-2-2:#0070ff;
4
+ --magritte-color-component-input-stroke-state-accent-focused-accessible-v23-2-2:#0070ff7a;
5
+ --magritte-color-component-input-stroke-state-field-invalid-v23-2-2:#ff4d3a;
6
+ --magritte-color-component-input-stroke-state-negative-focused-accessible-v23-2-2:#ff4d3a7a;
7
+ --magritte-color-component-input-stroke-state-field-disabled-v23-2-2:#EEF1F7;
8
+ --magritte-color-component-input-background-field-v23-2-2:#ffffff;
9
+ --magritte-color-component-input-background-state-field-hovered-v23-2-2:#ffffff;
10
+ --magritte-color-component-input-background-state-field-focused-v23-2-2:#ffffff;
11
+ --magritte-color-component-input-background-state-field-invalid-v23-2-2:#ffffff;
12
+ --magritte-color-component-input-background-state-field-disabled-v23-2-2:#F4F6FB;
13
+ --magritte-color-component-input-stroke-field-v23-2-2:#DCE3EB;
14
+ --magritte-color-component-input-text-state-placeholder-disabled-v23-2-2:#AABBCA;
15
+ --magritte-color-component-input-text-state-placeholder-hovered-v23-2-2:#768694;
16
+ --magritte-color-component-input-text-state-placeholder-focused-v23-2-2:#AABBCA;
17
+ --magritte-color-component-input-text-state-placeholder-invalid-v23-2-2:#AABBCA;
18
+ --magritte-color-component-input-icon-chevron-v23-2-2:#AABBCA;
19
+ --magritte-color-component-input-icon-state-chevron-focused-v23-2-2:#000000;
20
+ --magritte-color-component-input-icon-state-chevron-hovered-v23-2-2:#6a7885;
21
+ --magritte-color-component-input-icon-state-chevron-disabled-v23-2-2:#AABBCA;
22
+ --magritte-color-component-input-icon-state-chevron-invalid-v23-2-2:#AABBCA;
23
+ --magritte-color-component-input-text-placeholder-v23-2-2:#AABBCA;
24
+ --magritte-color-component-input-chips-background-state-neutral-disable-v23-2-2:#DCE3EB;
25
+ --magritte-color-component-input-chips-text-state-neutral-disable-v23-2-2:#96aabb;
26
26
  }
27
27
 
28
28
  :root{
29
- --magritte-typography-label-2-regular-font-family-v23-2-1:"hh sans";
30
- --magritte-typography-label-2-regular-font-weight-v23-2-1:400;
31
- --magritte-typography-label-2-regular-line-height-v23-2-1:22px;
32
- --magritte-typography-label-2-regular-font-size-v23-2-1:16px;
33
- --magritte-typography-label-2-regular-letter-spacing-v23-2-1:0em;
34
- --magritte-typography-label-2-regular-text-indent-v23-2-1:0px;
35
- --magritte-typography-label-2-regular-text-transform-v23-2-1:none;
36
- --magritte-typography-label-2-regular-text-decoration-v23-2-1:none;
37
- --magritte-semantic-animation-ease-in-out-100-timing-function-v23-2-1:cubic-bezier(0.25, 0.1, 0.25, 1);
38
- --magritte-semantic-animation-ease-in-out-100-duration-v23-2-1:100ms;
39
- --magritte-static-space-50-v23-2-1:2px;
40
- --magritte-static-space-100-v23-2-1:4px;
41
- --magritte-static-space-150-v23-2-1:6px;
42
- --magritte-static-space-200-v23-2-1:8px;
43
- --magritte-static-space-250-v23-2-1:10px;
44
- --magritte-static-space-300-v23-2-1:12px;
45
- --magritte-static-space-400-v23-2-1:16px;
46
- --magritte-core-border-radius-3-x-v23-2-1:12px;
29
+ --magritte-semantic-animation-ease-in-out-100-timing-function-v23-2-2:cubic-bezier(0.25, 0.1, 0.25, 1);
30
+ --magritte-semantic-animation-ease-in-out-100-duration-v23-2-2:100ms;
47
31
  }
48
32
 
49
33
  .magritte-night-theme{
50
- --magritte-color-component-input-stroke-state-field-hovered-v23-2-1:#3B3B3B;
51
- --magritte-color-component-input-stroke-state-field-focused-v23-2-1:#0070ff;
52
- --magritte-color-component-input-stroke-state-accent-focused-accessible-v23-2-1:#0070ff7a;
53
- --magritte-color-component-input-stroke-state-field-invalid-v23-2-1:#ff4d3a;
54
- --magritte-color-component-input-stroke-state-negative-focused-accessible-v23-2-1:#ff4d3a7a;
55
- --magritte-color-component-input-stroke-state-field-disabled-v23-2-1:#111;
56
- --magritte-color-component-input-background-field-v23-2-1:#111;
57
- --magritte-color-component-input-background-state-field-hovered-v23-2-1:#111;
58
- --magritte-color-component-input-background-state-field-focused-v23-2-1:#111;
59
- --magritte-color-component-input-background-state-field-invalid-v23-2-1:#111;
60
- --magritte-color-component-input-background-state-field-disabled-v23-2-1:#111;
61
- --magritte-color-component-input-stroke-field-v23-2-1:#303030;
62
- --magritte-color-component-input-text-placeholder-v23-2-1:#535353;
63
- --magritte-color-component-input-text-state-placeholder-disabled-v23-2-1:#474747;
64
- --magritte-color-component-input-text-state-placeholder-hovered-v23-2-1:#5E5E5E;
65
- --magritte-color-component-input-text-state-placeholder-focused-v23-2-1:#535353;
66
- --magritte-color-component-input-text-state-placeholder-invalid-v23-2-1:#535353;
67
- --magritte-color-component-input-icon-state-chevron-disabled-v23-2-1:#474747;
68
- --magritte-color-component-input-icon-state-chevron-hovered-v23-2-1:#848484;
69
- --magritte-color-component-input-icon-state-chevron-focused-v23-2-1:#ffffff;
70
- --magritte-color-component-input-icon-state-chevron-invalid-v23-2-1:#474747;
71
- --magritte-color-component-input-icon-chevron-v23-2-1:#5E5E5E;
72
- --magritte-color-component-input-chips-background-state-neutral-disable-v23-2-1:#1B1B1B;
73
- --magritte-color-component-input-chips-text-state-neutral-disable-v23-2-1:#474747;
34
+ --magritte-color-component-input-stroke-state-field-hovered-v23-2-2:#3B3B3B;
35
+ --magritte-color-component-input-stroke-state-field-disabled-v23-2-2:#111;
36
+ --magritte-color-component-input-background-field-v23-2-2:#111;
37
+ --magritte-color-component-input-background-state-field-hovered-v23-2-2:#111;
38
+ --magritte-color-component-input-background-state-field-focused-v23-2-2:#111;
39
+ --magritte-color-component-input-background-state-field-invalid-v23-2-2:#111;
40
+ --magritte-color-component-input-background-state-field-disabled-v23-2-2:#111;
41
+ --magritte-color-component-input-stroke-field-v23-2-2:#303030;
42
+ --magritte-color-component-input-text-placeholder-v23-2-2:#535353;
43
+ --magritte-color-component-input-text-state-placeholder-disabled-v23-2-2:#474747;
44
+ --magritte-color-component-input-text-state-placeholder-hovered-v23-2-2:#5E5E5E;
45
+ --magritte-color-component-input-text-state-placeholder-focused-v23-2-2:#535353;
46
+ --magritte-color-component-input-text-state-placeholder-invalid-v23-2-2:#535353;
47
+ --magritte-color-component-input-icon-state-chevron-disabled-v23-2-2:#474747;
48
+ --magritte-color-component-input-icon-state-chevron-hovered-v23-2-2:#848484;
49
+ --magritte-color-component-input-icon-state-chevron-focused-v23-2-2:#ffffff;
50
+ --magritte-color-component-input-icon-state-chevron-invalid-v23-2-2:#474747;
51
+ --magritte-color-component-input-icon-chevron-v23-2-2:#5E5E5E;
52
+ --magritte-color-component-input-chips-background-state-neutral-disable-v23-2-2:#1B1B1B;
53
+ --magritte-color-component-input-chips-text-state-neutral-disable-v23-2-2:#474747;
74
54
  }
75
55
 
76
56
  .magritte-zp-day-theme{
77
- --magritte-color-component-input-stroke-state-accent-focused-accessible-v23-2-1:#0070ff7a;
78
- --magritte-color-component-input-stroke-state-negative-focused-accessible-v23-2-1:#ff4d3a7a;
79
- --magritte-color-component-input-stroke-state-field-hovered-v23-2-1:#CCD5DF;
80
- --magritte-color-component-input-stroke-state-field-focused-v23-2-1:#7195AF;
81
- --magritte-color-component-input-stroke-state-field-invalid-v23-2-1:#ff4d3a;
82
- --magritte-color-component-input-stroke-state-field-disabled-v23-2-1:#EEF1F7;
83
- --magritte-color-component-input-background-field-v23-2-1:#ffffff;
84
- --magritte-color-component-input-background-state-field-hovered-v23-2-1:#ffffff;
85
- --magritte-color-component-input-background-state-field-focused-v23-2-1:#ffffff;
86
- --magritte-color-component-input-background-state-field-invalid-v23-2-1:#ffffff;
87
- --magritte-color-component-input-background-state-field-disabled-v23-2-1:#F4F6FB;
88
- --magritte-color-component-input-stroke-field-v23-2-1:#DCE3EB;
89
- --magritte-color-component-input-text-placeholder-v23-2-1:#AABBCA;
90
- --magritte-color-component-input-text-state-placeholder-disabled-v23-2-1:#AABBCA;
91
- --magritte-color-component-input-text-state-placeholder-hovered-v23-2-1:#768694;
92
- --magritte-color-component-input-text-state-placeholder-focused-v23-2-1:#AABBCA;
93
- --magritte-color-component-input-text-state-placeholder-invalid-v23-2-1:#AABBCA;
94
- --magritte-color-component-input-icon-chevron-v23-2-1:#AABBCA;
95
- --magritte-color-component-input-icon-state-chevron-hovered-v23-2-1:#8293a2;
96
- --magritte-color-component-input-icon-state-chevron-disabled-v23-2-1:#96aabb;
97
- --magritte-color-component-input-icon-state-chevron-focused-v23-2-1:#000000;
98
- --magritte-color-component-input-icon-state-chevron-invalid-v23-2-1:#AABBCA;
99
- --magritte-color-component-input-chips-background-state-neutral-disable-v23-2-1:#DCE3EB;
100
- --magritte-color-component-input-chips-text-state-neutral-disable-v23-2-1:#96aabb;
101
- }
102
- .magritte-root___-zVdz_4-0-11{
57
+ --magritte-color-component-input-stroke-state-field-focused-v23-2-2:#7195AF;
58
+ --magritte-color-component-input-icon-state-chevron-hovered-v23-2-2:#8293a2;
59
+ --magritte-color-component-input-icon-state-chevron-disabled-v23-2-2:#96aabb;
60
+ }
61
+ .magritte-root___-zVdz_4-1-1{
103
62
  display:inline-flex;
104
63
  position:relative;
105
64
  width:100%;
@@ -108,128 +67,142 @@
108
67
  white-space:nowrap;
109
68
  appearance:none;
110
69
  overflow-y:auto;
111
- background-color:var(--magritte-color-component-input-background-field-v23-2-1);
112
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v23-2-1);
113
- border-radius:var(--magritte-core-border-radius-3-x-v23-2-1);
114
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-chevron-v23-2-1);
70
+ background-color:var(--magritte-color-component-input-background-field-v23-2-2);
71
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v23-2-2);
72
+ border-radius:12px;
73
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-chevron-v23-2-2);
74
+ --magritte-ui-scrollbar-border-radius:12px;
115
75
  }
116
76
  @media (min-width: 1020px){
117
- body.magritte-old-layout .magritte-root___-zVdz_4-0-11:not(.magritte-focused___0Uzyu_4-0-11):not(.magritte-invalid___tVzQV_4-0-11):not(.magritte-disabled___UeqcV_4-0-11):hover{
118
- background-color:var(--magritte-color-component-input-background-state-field-hovered-v23-2-1);
119
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v23-2-1);
120
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-hovered-v23-2-1);
77
+ body.magritte-old-layout .magritte-root___-zVdz_4-1-1:not(.magritte-focused___0Uzyu_4-1-1):not(.magritte-invalid___tVzQV_4-1-1):not(.magritte-disabled___UeqcV_4-1-1):hover{
78
+ background-color:var(--magritte-color-component-input-background-state-field-hovered-v23-2-2);
79
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v23-2-2);
80
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-hovered-v23-2-2);
121
81
  }
122
- body.magritte-old-layout .magritte-root___-zVdz_4-0-11:not(.magritte-focused___0Uzyu_4-0-11):not(.magritte-invalid___tVzQV_4-0-11):not(.magritte-disabled___UeqcV_4-0-11):hover .magritte-label___j7Trt_4-0-11{
123
- color:var(--magritte-color-component-input-text-state-placeholder-hovered-v23-2-1);
82
+ body.magritte-old-layout .magritte-root___-zVdz_4-1-1:not(.magritte-focused___0Uzyu_4-1-1):not(.magritte-invalid___tVzQV_4-1-1):not(.magritte-disabled___UeqcV_4-1-1):hover .magritte-label___j7Trt_4-1-1{
83
+ color:var(--magritte-color-component-input-text-state-placeholder-hovered-v23-2-2);
124
84
  }
125
85
  }
126
86
  @media (min-width: 1024px){
127
- body:not(.magritte-old-layout) .magritte-root___-zVdz_4-0-11:not(.magritte-focused___0Uzyu_4-0-11):not(.magritte-invalid___tVzQV_4-0-11):not(.magritte-disabled___UeqcV_4-0-11):hover{
128
- background-color:var(--magritte-color-component-input-background-state-field-hovered-v23-2-1);
129
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v23-2-1);
130
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-hovered-v23-2-1);
87
+ body:not(.magritte-old-layout) .magritte-root___-zVdz_4-1-1:not(.magritte-focused___0Uzyu_4-1-1):not(.magritte-invalid___tVzQV_4-1-1):not(.magritte-disabled___UeqcV_4-1-1):hover{
88
+ background-color:var(--magritte-color-component-input-background-state-field-hovered-v23-2-2);
89
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v23-2-2);
90
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-hovered-v23-2-2);
131
91
  }
132
- body:not(.magritte-old-layout) .magritte-root___-zVdz_4-0-11:not(.magritte-focused___0Uzyu_4-0-11):not(.magritte-invalid___tVzQV_4-0-11):not(.magritte-disabled___UeqcV_4-0-11):hover .magritte-label___j7Trt_4-0-11{
133
- color:var(--magritte-color-component-input-text-state-placeholder-hovered-v23-2-1);
92
+ body:not(.magritte-old-layout) .magritte-root___-zVdz_4-1-1:not(.magritte-focused___0Uzyu_4-1-1):not(.magritte-invalid___tVzQV_4-1-1):not(.magritte-disabled___UeqcV_4-1-1):hover .magritte-label___j7Trt_4-1-1{
93
+ color:var(--magritte-color-component-input-text-state-placeholder-hovered-v23-2-2);
134
94
  }
135
95
  }
136
- .magritte-root___-zVdz_4-0-11:not(.magritte-disabled___UeqcV_4-0-11){
96
+ .magritte-root___-zVdz_4-1-1:not(.magritte-disabled___UeqcV_4-1-1){
137
97
  cursor:text;
138
98
  }
139
- .magritte-root___-zVdz_4-0-11.magritte-focused___0Uzyu_4-0-11{
140
- background-color:var(--magritte-color-component-input-background-state-field-focused-v23-2-1);
141
- box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v23-2-1);
142
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v23-2-1);
99
+ .magritte-root___-zVdz_4-1-1.magritte-focused___0Uzyu_4-1-1{
100
+ background-color:var(--magritte-color-component-input-background-state-field-focused-v23-2-2);
101
+ box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v23-2-2);
102
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v23-2-2);
103
+ }
104
+ .magritte-root___-zVdz_4-1-1.magritte-focused___0Uzyu_4-1-1 .magritte-label___j7Trt_4-1-1{
105
+ color:var(--magritte-color-component-input-text-state-placeholder-focused-v23-2-2);
143
106
  }
144
- .magritte-root___-zVdz_4-0-11.magritte-focused___0Uzyu_4-0-11 .magritte-label___j7Trt_4-0-11{
145
- color:var(--magritte-color-component-input-text-state-placeholder-focused-v23-2-1);
107
+ .magritte-root___-zVdz_4-1-1.magritte-invalid___tVzQV_4-1-1{
108
+ background-color:var(--magritte-color-component-input-background-state-field-invalid-v23-2-2);
109
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v23-2-2);
110
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-invalid-v23-2-2);
146
111
  }
147
- .magritte-root___-zVdz_4-0-11.magritte-invalid___tVzQV_4-0-11{
148
- background-color:var(--magritte-color-component-input-background-state-field-invalid-v23-2-1);
149
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v23-2-1);
150
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-invalid-v23-2-1);
112
+ .magritte-root___-zVdz_4-1-1.magritte-invalid___tVzQV_4-1-1 .magritte-label___j7Trt_4-1-1{
113
+ color:var(--magritte-color-component-input-text-state-placeholder-invalid-v23-2-2);
151
114
  }
152
- .magritte-root___-zVdz_4-0-11.magritte-invalid___tVzQV_4-0-11 .magritte-label___j7Trt_4-0-11{
153
- color:var(--magritte-color-component-input-text-state-placeholder-invalid-v23-2-1);
115
+ .magritte-root___-zVdz_4-1-1.magritte-disabled___UeqcV_4-1-1{
116
+ background-color:var(--magritte-color-component-input-background-state-field-disabled-v23-2-2);
117
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-disabled-v23-2-2);
118
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-disabled-v23-2-2);
119
+ --magritte-ui-chip-text-color-override:var(--magritte-color-component-input-chips-text-state-neutral-disable-v23-2-2);
120
+ --magritte-ui-chip-background-color-override:var(--magritte-color-component-input-chips-background-state-neutral-disable-v23-2-2);
154
121
  }
155
- .magritte-root___-zVdz_4-0-11.magritte-disabled___UeqcV_4-0-11{
156
- background-color:var(--magritte-color-component-input-background-state-field-disabled-v23-2-1);
157
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-disabled-v23-2-1);
158
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-disabled-v23-2-1);
159
- --magritte-ui-chip-text-color-override:var(--magritte-color-component-input-chips-text-state-neutral-disable-v23-2-1);
160
- --magritte-ui-chip-background-color-override:var(--magritte-color-component-input-chips-background-state-neutral-disable-v23-2-1);
122
+ .magritte-root___-zVdz_4-1-1.magritte-disabled___UeqcV_4-1-1 .magritte-label___j7Trt_4-1-1{
123
+ color:var(--magritte-color-component-input-text-state-placeholder-disabled-v23-2-2);
161
124
  }
162
- .magritte-root___-zVdz_4-0-11.magritte-disabled___UeqcV_4-0-11 .magritte-label___j7Trt_4-0-11{
163
- color:var(--magritte-color-component-input-text-state-placeholder-disabled-v23-2-1);
125
+ .magritte-root___-zVdz_4-1-1.magritte-disabled___UeqcV_4-1-1 .magritte-scrollable-area___-xMF2_4-1-1{
126
+ overflow:hidden;
164
127
  }
165
- .magritte-root___-zVdz_4-0-11.magritte-focus-visible___ifvAP_4-0-11{
166
- outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v23-2-1) solid 4px;
128
+ .magritte-root___-zVdz_4-1-1.magritte-focus-visible___ifvAP_4-1-1{
129
+ outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v23-2-2) solid 4px;
167
130
  }
168
- .magritte-root___-zVdz_4-0-11.magritte-focus-visible___ifvAP_4-0-11.magritte-invalid___tVzQV_4-0-11{
169
- outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v23-2-1);
131
+ .magritte-root___-zVdz_4-1-1.magritte-focus-visible___ifvAP_4-1-1.magritte-invalid___tVzQV_4-1-1{
132
+ outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v23-2-2);
170
133
  }
171
- .magritte-large___JIrIy_4-0-11{
172
- padding-left:var(--magritte-static-space-300-v23-2-1);
173
- padding-top:var(--magritte-static-space-300-v23-2-1);
174
- padding-bottom:var(--magritte-static-space-300-v23-2-1);
175
- padding-right:var(--magritte-static-space-50-v23-2-1);
134
+ .magritte-large___JIrIy_4-1-1{
135
+ padding-left:12px;
136
+ padding-top:12px;
137
+ padding-bottom:12px;
138
+ padding-right:2px;
176
139
  }
177
- .magritte-large___JIrIy_4-0-11 .magritte-field___rlEmn_4-0-11{
178
- margin-left:var(--magritte-static-space-100-v23-2-1);
140
+ .magritte-large___JIrIy_4-1-1 .magritte-field___rlEmn_4-1-1{
141
+ margin-left:4px;
179
142
  }
180
- .magritte-large___JIrIy_4-0-11 .magritte-icon___fDMiz_4-0-11{
181
- top:var(--magritte-static-space-300-v23-2-1);
182
- right:var(--magritte-static-space-400-v23-2-1);
143
+ .magritte-large___JIrIy_4-1-1 .magritte-icon___fDMiz_4-1-1{
144
+ top:12px;
145
+ right:16px;
183
146
  }
184
- .magritte-large___JIrIy_4-0-11 .magritte-scrollable-area___-xMF2_4-0-11{
185
- padding-right:calc(24px + var(--magritte-static-space-250-v23-2-1) + var(--magritte-static-space-300-v23-2-1));
147
+ .magritte-large___JIrIy_4-1-1 .magritte-scrollable-area-wrapper___hZNQd_4-1-1{
148
+ padding-right:calc(24px + 10px + 12px);
186
149
  }
187
- .magritte-medium___Xk-XB_4-0-11{
188
- padding-left:var(--magritte-static-space-200-v23-2-1);
189
- padding-top:var(--magritte-static-space-200-v23-2-1);
190
- padding-bottom:var(--magritte-static-space-200-v23-2-1);
191
- padding-right:var(--magritte-static-space-50-v23-2-1);
150
+ .magritte-medium___Xk-XB_4-1-1{
151
+ padding-left:8px;
152
+ padding-top:8px;
153
+ padding-bottom:8px;
154
+ padding-right:2px;
192
155
  }
193
- .magritte-medium___Xk-XB_4-0-11 .magritte-field___rlEmn_4-0-11{
194
- margin-left:var(--magritte-static-space-200-v23-2-1);
156
+ .magritte-medium___Xk-XB_4-1-1 .magritte-field___rlEmn_4-1-1{
157
+ margin-left:8px;
195
158
  }
196
- .magritte-medium___Xk-XB_4-0-11 .magritte-icon___fDMiz_4-0-11{
197
- top:var(--magritte-static-space-200-v23-2-1);
198
- right:var(--magritte-static-space-300-v23-2-1);
159
+ .magritte-medium___Xk-XB_4-1-1 .magritte-icon___fDMiz_4-1-1{
160
+ top:8px;
161
+ right:12px;
199
162
  }
200
- .magritte-medium___Xk-XB_4-0-11 .magritte-scrollable-area___-xMF2_4-0-11{
201
- padding-right:calc(24px + var(--magritte-static-space-150-v23-2-1) + var(--magritte-static-space-300-v23-2-1));
163
+ .magritte-medium___Xk-XB_4-1-1 .magritte-scrollable-area-wrapper___hZNQd_4-1-1{
164
+ padding-right:calc(24px + 6px + 12px);
165
+ }
166
+ .magritte-scrollable-area-wrapper___hZNQd_4-1-1{
167
+ width:100%;
168
+ position:relative;
169
+ overflow:hidden;
202
170
  }
203
- .magritte-scrollable-area___-xMF2_4-0-11{
171
+ .magritte-scrollable-area___-xMF2_4-1-1{
172
+ height:100%;
204
173
  display:flex;
205
174
  align-items:flex-start;
206
175
  overflow-y:auto;
207
- width:100%;
176
+ overscroll-behavior:contain;
177
+ scrollbar-width:none;
178
+ }
179
+ .magritte-scrollable-area___-xMF2_4-1-1::-webkit-scrollbar{
180
+ display:none;
208
181
  }
209
- .magritte-chips-and-input___qg-Ba_4-0-11{
182
+ .magritte-chips-and-input___qg-Ba_4-1-1{
210
183
  display:flex;
211
184
  gap:6px;
212
185
  flex-wrap:wrap;
213
186
  align-items:center;
214
187
  width:100%;
215
188
  }
216
- .magritte-field___rlEmn_4-0-11{
189
+ .magritte-field___rlEmn_4-1-1{
217
190
  display:flex;
218
191
  align-items:center;
219
192
  position:relative;
220
193
  flex-grow:1;
221
194
  height:32px;
222
195
  width:50px;
223
- font-family:var(--magritte-typography-label-2-regular-font-family-v23-2-1);
224
- font-weight:var(--magritte-typography-label-2-regular-font-weight-v23-2-1);
225
- line-height:var(--magritte-typography-label-2-regular-line-height-v23-2-1);
226
- font-size:var(--magritte-typography-label-2-regular-font-size-v23-2-1);
227
- letter-spacing:var(--magritte-typography-label-2-regular-letter-spacing-v23-2-1);
228
- text-indent:var(--magritte-typography-label-2-regular-text-indent-v23-2-1);
229
- text-transform:var(--magritte-typography-label-2-regular-text-transform-v23-2-1);
230
- text-decoration:var(--magritte-typography-label-2-regular-text-decoration-v23-2-1);
231
- }
232
- .magritte-field-input___04Cag_4-0-11{
196
+ font-family:"hh sans";
197
+ font-weight:400;
198
+ line-height:22px;
199
+ font-size:16px;
200
+ letter-spacing:0em;
201
+ text-indent:0px;
202
+ text-transform:none;
203
+ text-decoration:none;
204
+ }
205
+ .magritte-field-input___04Cag_4-1-1{
233
206
  border:0;
234
207
  padding:0;
235
208
  background:none;
@@ -237,32 +210,32 @@
237
210
  width:100%;
238
211
  z-index:1;
239
212
  }
240
- .magritte-label-wrapper___De7Bm_4-0-11{
213
+ .magritte-label-wrapper___De7Bm_4-1-1{
241
214
  display:flex;
242
215
  align-items:center;
243
216
  position:absolute;
244
217
  height:100%;
245
218
  inset:0;
246
219
  }
247
- .magritte-label___j7Trt_4-0-11{
248
- color:var(--magritte-color-component-input-text-placeholder-v23-2-1);
220
+ .magritte-label___j7Trt_4-1-1{
221
+ color:var(--magritte-color-component-input-text-placeholder-v23-2-2);
249
222
  overflow:hidden;
250
223
  text-overflow:ellipsis;
251
224
  }
252
- .magritte-icon___fDMiz_4-0-11{
225
+ .magritte-icon___fDMiz_4-1-1{
253
226
  display:inline-flex;
254
227
  margin-left:auto;
255
- padding:var(--magritte-static-space-100-v23-2-1) 0;
228
+ padding:4px 0;
256
229
  position:absolute;
257
230
  transition-property:transform;
258
- transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v23-2-1);
259
- transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v23-2-1);
231
+ transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v23-2-2);
232
+ transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v23-2-2);
260
233
  }
261
- .magritte-icon_expanded___RaOT-_4-0-11{
234
+ .magritte-icon_expanded___RaOT-_4-1-1{
262
235
  transform:rotate(-180deg);
263
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v23-2-1);
236
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v23-2-2);
264
237
  }
265
- .magritte-custom-chip-wrapper___a9kJ6_4-0-11{
238
+ .magritte-custom-chip-wrapper___a9kJ6_4-1-1{
266
239
  display:inline-flex;
267
240
  min-width:0;
268
241
  }
package/index.js CHANGED
@@ -11,4 +11,5 @@ import '@hh.ru/magritte-ui-chips';
11
11
  import '@hh.ru/magritte-ui-form-helper';
12
12
  import '@hh.ru/magritte-ui-icon/icon';
13
13
  import '@hh.ru/magritte-ui-input/useFocus';
14
+ import '@hh.ru/magritte-ui-scrollbar';
14
15
  //# sourceMappingURL=index.js.map
package/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-chips-trigger",
3
- "version": "4.0.11",
3
+ "version": "4.1.1",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -28,13 +28,14 @@
28
28
  "dependencies": {
29
29
  "@hh.ru/magritte-common-keyboard": "4.1.3",
30
30
  "@hh.ru/magritte-common-use-multiple-refs": "1.1.9",
31
- "@hh.ru/magritte-design-tokens": "23.2.1",
31
+ "@hh.ru/magritte-design-tokens": "23.2.2",
32
32
  "@hh.ru/magritte-ui-breakpoint": "6.0.1",
33
- "@hh.ru/magritte-ui-chips": "6.0.10",
34
- "@hh.ru/magritte-ui-form-helper": "2.0.6",
35
- "@hh.ru/magritte-ui-icon": "12.3.2",
36
- "@hh.ru/magritte-ui-input": "9.0.10",
37
- "@hh.ru/magritte-ui-mock-component": "1.1.5"
33
+ "@hh.ru/magritte-ui-chips": "6.0.11",
34
+ "@hh.ru/magritte-ui-form-helper": "2.0.7",
35
+ "@hh.ru/magritte-ui-icon": "12.3.3",
36
+ "@hh.ru/magritte-ui-input": "9.0.11",
37
+ "@hh.ru/magritte-ui-mock-component": "1.1.5",
38
+ "@hh.ru/magritte-ui-scrollbar": "1.0.2"
38
39
  },
39
- "gitHead": "18a4c9f53b8572077ce0fba28266865c1b619cee"
40
+ "gitHead": "b2ab15b73592666625ff3b84e10f3cc1bcee9cbc"
40
41
  }