@hh.ru/magritte-ui-suggest 11.2.26 → 11.2.27
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.
- package/Suggest.js +1 -1
- package/SuggestPicker.js +2 -2
- package/SuggestPicker.js.map +1 -1
- package/index.css +23 -23
- package/index.js +1 -1
- package/package.json +6 -6
- package/sectionRenderers.js +1 -1
- package/suggest-DbaS9o7t.js +5 -0
- package/suggest-DbaS9o7t.js.map +1 -0
- package/suggest-C5Th9IqC.js +0 -5
- package/suggest-C5Th9IqC.js.map +0 -1
package/Suggest.js
CHANGED
|
@@ -7,7 +7,7 @@ import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
|
|
|
7
7
|
import { getSearchResultCount, SuggestPicker } from './SuggestPicker.js';
|
|
8
8
|
import { renderSection, renderUserInput } from './sectionRenderers.js';
|
|
9
9
|
import { useSuggestKeyboardNav } from './useSuggestKeyboardNav.js';
|
|
10
|
-
import { s as styles } from './suggest-
|
|
10
|
+
import { s as styles } from './suggest-DbaS9o7t.js';
|
|
11
11
|
import 'classnames';
|
|
12
12
|
import '@hh.ru/magritte-common-keyboard';
|
|
13
13
|
import '@hh.ru/magritte-ui-bottom-sheet';
|
package/SuggestPicker.js
CHANGED
|
@@ -9,7 +9,7 @@ import { Button } from '@hh.ru/magritte-ui-button';
|
|
|
9
9
|
import { Drop } from '@hh.ru/magritte-ui-drop';
|
|
10
10
|
import { ArrowPathOutlinedSize24, CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
|
|
11
11
|
import { NavigationBar } from '@hh.ru/magritte-ui-navigation-bar';
|
|
12
|
-
import { s as styles } from './suggest-
|
|
12
|
+
import { s as styles } from './suggest-DbaS9o7t.js';
|
|
13
13
|
|
|
14
14
|
const RenderHeaderDefault = ({ onCloseBottomSheet, headerTitle, onChange, options, initialValueOnOpening, }) => {
|
|
15
15
|
return (jsx(NavigationBar, { title: headerTitle, showDivider: "always", right: jsx(CrossOutlinedSize24, { onClick: () => {
|
|
@@ -18,7 +18,7 @@ const RenderHeaderDefault = ({ onCloseBottomSheet, headerTitle, onChange, option
|
|
|
18
18
|
} }), options: options }));
|
|
19
19
|
};
|
|
20
20
|
const getSearchResultCount = (options) => options?.filter(({ type, searchable = true }) => type !== 'delimiter' && searchable).length || 0;
|
|
21
|
-
const dropPlacement = ['bottom-left', 'top-left'];
|
|
21
|
+
const dropPlacement = ['bottom-left', 'top-left', 'bottom-right', 'top-right'];
|
|
22
22
|
const SuggestPicker = function ({ data, activatorRef, inputRef, maxHeight, input, inputFocused, currentInputValueSelectedFromSuggest, suggestContainerRef, itemsGap, onBottomSheetClose, onBottomSheetOpen, inputValue, topContent, bottomContent, dropWidth, isError, trls, errorPlaceholder, onClickReload, onDropOpen, onDropClose, onSearchSubmit, headerTitle, renderHeader = RenderHeaderDefault, pickerId, dropVisible, setShowDrop, showBottomSheet, setShowBottomSheet, suggestContent, userInputInResults, }) {
|
|
23
23
|
const { isMobile } = useBreakpoint();
|
|
24
24
|
const bottomSheetInputRef = useRef(null);
|
package/SuggestPicker.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SuggestPicker.js","sources":["src/SuggestPicker.tsx"],"sourcesContent":["import {\n RefObject,\n useEffect,\n useRef,\n useState,\n ReactElement,\n KeyboardEventHandler,\n ReactNode,\n useCallback,\n Dispatch,\n SetStateAction,\n useId,\n} from 'react';\nimport classnames from 'classnames';\n\nimport { DataProviderResult } from '@hh.ru/magritte-common-data-provider';\nimport { keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { type TokenBaseStaticSpace } from '@hh.ru/magritte-design-tokens/types';\nimport { BottomSheet, BottomSheetFooter } from '@hh.ru/magritte-ui-bottom-sheet';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { Button } from '@hh.ru/magritte-ui-button';\nimport { Drop } from '@hh.ru/magritte-ui-drop';\nimport { ArrowPathOutlinedSize24, CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { ControlledInputProps } from '@hh.ru/magritte-ui-input';\nimport { NavigationBar } from '@hh.ru/magritte-ui-navigation-bar';\nimport {\n SuggestInputComponent,\n InputProp,\n SearchSubmitType,\n SuggestTrls,\n RenderHeader,\n RenderHeaderProps,\n} from '@hh.ru/magritte-ui-suggest/types';\n\nimport styles from './suggest.less';\n\ninterface SuggestPickerProps<DataType, InputType extends SuggestInputComponent> {\n data: DataProviderResult<DataType> | null | undefined;\n activatorRef: RefObject<HTMLElement>;\n inputRef: RefObject<HTMLElement>;\n maxHeight: number;\n input: InputProp<InputType>;\n inputFocused: boolean;\n renderHeader?: RenderHeader;\n headerTitle?: ReactNode;\n currentInputValueSelectedFromSuggest: boolean;\n suggestContainerRef: RefObject<HTMLElement>;\n itemsGap: TokenBaseStaticSpace;\n onBottomSheetClose: VoidFunction;\n inputValue: string;\n topContent?: ReactNode;\n bottomContent?: ReactNode;\n dropWidth?: number;\n isError: boolean;\n trls: SuggestTrls;\n errorPlaceholder: ReactNode;\n onClickReload: VoidFunction;\n onBottomSheetOpen?: VoidFunction;\n onDropOpen?: VoidFunction;\n onDropClose?: VoidFunction;\n onSearchSubmit?: SearchSubmitType;\n pickerId: string;\n dropVisible: boolean;\n setShowDrop: Dispatch<SetStateAction<boolean>>;\n showBottomSheet: boolean;\n setShowBottomSheet: Dispatch<SetStateAction<boolean>>;\n suggestContent: JSX.Element[] | null;\n userInputInResults: JSX.Element[] | null;\n}\n\nconst RenderHeaderDefault = ({\n onCloseBottomSheet,\n headerTitle,\n onChange,\n options,\n initialValueOnOpening,\n}: RenderHeaderProps): ReactNode => {\n return (\n <NavigationBar\n title={headerTitle}\n showDivider=\"always\"\n right={\n <CrossOutlinedSize24\n onClick={() => {\n onCloseBottomSheet();\n onChange?.(initialValueOnOpening.current);\n }}\n />\n }\n options={options}\n />\n );\n};\n\nexport const getSearchResultCount = <K,>(options: DataProviderResult<K> | null | undefined): number =>\n options?.filter(({ type, searchable = true }) => type !== 'delimiter' && searchable).length || 0;\n\nconst dropPlacement = ['bottom-left', 'top-left'];\n\nexport const SuggestPicker = function <DataType, InputType extends SuggestInputComponent>({\n data,\n activatorRef,\n inputRef,\n maxHeight,\n input,\n inputFocused,\n currentInputValueSelectedFromSuggest,\n suggestContainerRef,\n itemsGap,\n onBottomSheetClose,\n onBottomSheetOpen,\n inputValue,\n topContent,\n bottomContent,\n dropWidth,\n isError,\n trls,\n errorPlaceholder,\n onClickReload,\n onDropOpen,\n onDropClose,\n onSearchSubmit,\n headerTitle,\n renderHeader = RenderHeaderDefault,\n pickerId,\n dropVisible,\n setShowDrop,\n showBottomSheet,\n setShowBottomSheet,\n suggestContent,\n userInputInResults,\n}: SuggestPickerProps<DataType, InputType>): ReactElement | null {\n const { isMobile } = useBreakpoint();\n const bottomSheetInputRef = useRef<HTMLInputElement>(null);\n const [caretVisible, setCaretVisible] = useState(false);\n const initialValueOnOpening = useRef(inputValue);\n const listId = useId();\n\n useEffect(() => {\n if (inputFocused) {\n setShowBottomSheet(true);\n initialValueOnOpening.current = inputValue;\n } else if (!isMobile) {\n setShowBottomSheet(false);\n }\n // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n }, [inputFocused, setShowBottomSheet]);\n\n useEffect(() => {\n if (currentInputValueSelectedFromSuggest) {\n setShowBottomSheet(false);\n }\n }, [currentInputValueSelectedFromSuggest, isMobile, setShowBottomSheet]);\n\n // если скрыли дроп из-за скрытия активатора под скроллом, то при следующем изменении данных нужно его показать\n useEffect(() => {\n setShowDrop(true);\n }, [inputValue, inputFocused, setShowDrop]);\n\n const onKeyDownHandler = useCallback<KeyboardEventHandler<HTMLInputElement>>(\n (event) => {\n input.props.onKeyDown?.(event);\n if (keyboardMatch(event, keyboardKeys.Enter)) {\n // onSearchSubmit использует зависимые компоненты\n // чтобы контролировать поведение при сабмите\n if (onSearchSubmit) {\n const onCloseBottomSheet = () => {\n setShowBottomSheet(false);\n };\n // в onSearchSubmit нужно вернуть количество результатов поиска\n onSearchSubmit(event, onCloseBottomSheet, getSearchResultCount(data));\n return;\n }\n setShowBottomSheet(false);\n }\n if (keyboardMatch(event, keyboardKeys.Escape)) {\n input.props.onChange?.(initialValueOnOpening.current);\n }\n },\n [input.props, onSearchSubmit, data, setShowBottomSheet]\n );\n\n const InputComponent = input.component;\n const processInput =\n (ref: RefObject<HTMLElement>): KeyboardEventHandler<HTMLElement> =>\n (event) => {\n const hasPrintableRepresentation = event.key.replace(/\\s/g, '').length === 1;\n if (!hasPrintableRepresentation) {\n return;\n }\n ref.current?.focus();\n const newEvent = new KeyboardEvent('keydown', event.nativeEvent);\n ref.current?.dispatchEvent(newEvent);\n };\n\n const options = (\n <div\n className={classnames({\n [styles.bottomSheetInputHideCaret]: !caretVisible,\n })}\n >\n <InputComponent\n {...({\n ...input.props,\n invalid: false,\n ref: bottomSheetInputRef,\n autoComplete: 'off',\n onKeyDown: onKeyDownHandler,\n } as unknown as JSX.IntrinsicAttributes &\n JSX.LibraryManagedAttributes<InputType, ControlledInputProps>)}\n />\n </div>\n );\n\n return (\n <>\n <BottomSheet\n id={pickerId}\n visible={showBottomSheet}\n height=\"full-screen\"\n onAfterExit={onBottomSheetClose}\n keyboardOverlaysFooter={false}\n header={renderHeader({\n onCloseBottomSheet: () => setShowBottomSheet(false),\n headerTitle,\n onChange: input.props.onChange,\n options,\n initialValueOnOpening,\n })}\n onAppear={() => {\n bottomSheetInputRef?.current?.focus();\n setCaretVisible(true);\n onBottomSheetOpen?.();\n }}\n onBeforeExit={() => {\n bottomSheetInputRef?.current?.blur();\n setCaretVisible(false);\n }}\n onClose={() => {\n setShowBottomSheet(false);\n }}\n footer={\n isError && (\n <BottomSheetFooter>\n <Button\n mode=\"secondary\"\n style=\"negative\"\n icon={<ArrowPathOutlinedSize24 />}\n onClick={onClickReload}\n data-qa=\"suggest-reload-button\"\n stretched\n >\n {trls.resetButton}\n </Button>\n </BottomSheetFooter>\n )\n }\n ref={suggestContainerRef}\n allowScrollWhileFocused\n withContentPaddings={false}\n >\n {!isError && (\n <div\n onKeyDown={processInput(bottomSheetInputRef)}\n className={styles.suggestItemsContainer}\n style={{ gap: itemsGap }}\n role=\"listbox\"\n >\n {topContent}\n {userInputInResults}\n {suggestContent}\n {bottomContent}\n </div>\n )}\n {isError && <div className={styles.errorWrapper}>{errorPlaceholder}</div>}\n </BottomSheet>\n <Drop\n id={pickerId}\n autoFocusWhenOpened={false}\n placement={dropPlacement}\n lockPlacement\n visible={dropVisible}\n onClose={() => setShowDrop(false)}\n activatorRef={activatorRef}\n role=\"listbox\"\n padding={16}\n widthEqualToActivator={!dropWidth}\n width={dropWidth}\n forcePlacement\n keyboardNavigationMode=\"list\"\n data-qa=\"suggest-drop\"\n ref={suggestContainerRef}\n onAppear={onDropOpen}\n onAfterExit={onDropClose}\n returnFocusOnClose={false}\n aria-owns={listId}\n >\n <div\n onKeyDown={processInput(inputRef)}\n className={classnames(styles.suggestItemsContainer, styles.suggestItemsContainerDesktop)}\n style={{ maxHeight }}\n >\n <div id={listId} className={styles.suggestItemsContainerWrapper} style={{ gap: itemsGap }}>\n {topContent}\n {userInputInResults}\n {suggestContent}\n {bottomContent}\n </div>\n </div>\n </Drop>\n </>\n );\n};\n\nSuggestPicker.displayName = 'SuggestPicker';\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SuggestPicker.js","sources":["src/SuggestPicker.tsx"],"sourcesContent":["import {\n RefObject,\n useEffect,\n useRef,\n useState,\n ReactElement,\n KeyboardEventHandler,\n ReactNode,\n useCallback,\n Dispatch,\n SetStateAction,\n useId,\n} from 'react';\nimport classnames from 'classnames';\n\nimport { DataProviderResult } from '@hh.ru/magritte-common-data-provider';\nimport { keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { type TokenBaseStaticSpace } from '@hh.ru/magritte-design-tokens/types';\nimport { BottomSheet, BottomSheetFooter } from '@hh.ru/magritte-ui-bottom-sheet';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { Button } from '@hh.ru/magritte-ui-button';\nimport { Drop } from '@hh.ru/magritte-ui-drop';\nimport { ArrowPathOutlinedSize24, CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { ControlledInputProps } from '@hh.ru/magritte-ui-input';\nimport { NavigationBar } from '@hh.ru/magritte-ui-navigation-bar';\nimport {\n SuggestInputComponent,\n InputProp,\n SearchSubmitType,\n SuggestTrls,\n RenderHeader,\n RenderHeaderProps,\n} from '@hh.ru/magritte-ui-suggest/types';\n\nimport styles from './suggest.less';\n\ninterface SuggestPickerProps<DataType, InputType extends SuggestInputComponent> {\n data: DataProviderResult<DataType> | null | undefined;\n activatorRef: RefObject<HTMLElement>;\n inputRef: RefObject<HTMLElement>;\n maxHeight: number;\n input: InputProp<InputType>;\n inputFocused: boolean;\n renderHeader?: RenderHeader;\n headerTitle?: ReactNode;\n currentInputValueSelectedFromSuggest: boolean;\n suggestContainerRef: RefObject<HTMLElement>;\n itemsGap: TokenBaseStaticSpace;\n onBottomSheetClose: VoidFunction;\n inputValue: string;\n topContent?: ReactNode;\n bottomContent?: ReactNode;\n dropWidth?: number;\n isError: boolean;\n trls: SuggestTrls;\n errorPlaceholder: ReactNode;\n onClickReload: VoidFunction;\n onBottomSheetOpen?: VoidFunction;\n onDropOpen?: VoidFunction;\n onDropClose?: VoidFunction;\n onSearchSubmit?: SearchSubmitType;\n pickerId: string;\n dropVisible: boolean;\n setShowDrop: Dispatch<SetStateAction<boolean>>;\n showBottomSheet: boolean;\n setShowBottomSheet: Dispatch<SetStateAction<boolean>>;\n suggestContent: JSX.Element[] | null;\n userInputInResults: JSX.Element[] | null;\n}\n\nconst RenderHeaderDefault = ({\n onCloseBottomSheet,\n headerTitle,\n onChange,\n options,\n initialValueOnOpening,\n}: RenderHeaderProps): ReactNode => {\n return (\n <NavigationBar\n title={headerTitle}\n showDivider=\"always\"\n right={\n <CrossOutlinedSize24\n onClick={() => {\n onCloseBottomSheet();\n onChange?.(initialValueOnOpening.current);\n }}\n />\n }\n options={options}\n />\n );\n};\n\nexport const getSearchResultCount = <K,>(options: DataProviderResult<K> | null | undefined): number =>\n options?.filter(({ type, searchable = true }) => type !== 'delimiter' && searchable).length || 0;\n\nconst dropPlacement = ['bottom-left', 'top-left', 'bottom-right', 'top-right'];\n\nexport const SuggestPicker = function <DataType, InputType extends SuggestInputComponent>({\n data,\n activatorRef,\n inputRef,\n maxHeight,\n input,\n inputFocused,\n currentInputValueSelectedFromSuggest,\n suggestContainerRef,\n itemsGap,\n onBottomSheetClose,\n onBottomSheetOpen,\n inputValue,\n topContent,\n bottomContent,\n dropWidth,\n isError,\n trls,\n errorPlaceholder,\n onClickReload,\n onDropOpen,\n onDropClose,\n onSearchSubmit,\n headerTitle,\n renderHeader = RenderHeaderDefault,\n pickerId,\n dropVisible,\n setShowDrop,\n showBottomSheet,\n setShowBottomSheet,\n suggestContent,\n userInputInResults,\n}: SuggestPickerProps<DataType, InputType>): ReactElement | null {\n const { isMobile } = useBreakpoint();\n const bottomSheetInputRef = useRef<HTMLInputElement>(null);\n const [caretVisible, setCaretVisible] = useState(false);\n const initialValueOnOpening = useRef(inputValue);\n const listId = useId();\n\n useEffect(() => {\n if (inputFocused) {\n setShowBottomSheet(true);\n initialValueOnOpening.current = inputValue;\n } else if (!isMobile) {\n setShowBottomSheet(false);\n }\n // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n }, [inputFocused, setShowBottomSheet]);\n\n useEffect(() => {\n if (currentInputValueSelectedFromSuggest) {\n setShowBottomSheet(false);\n }\n }, [currentInputValueSelectedFromSuggest, isMobile, setShowBottomSheet]);\n\n // если скрыли дроп из-за скрытия активатора под скроллом, то при следующем изменении данных нужно его показать\n useEffect(() => {\n setShowDrop(true);\n }, [inputValue, inputFocused, setShowDrop]);\n\n const onKeyDownHandler = useCallback<KeyboardEventHandler<HTMLInputElement>>(\n (event) => {\n input.props.onKeyDown?.(event);\n if (keyboardMatch(event, keyboardKeys.Enter)) {\n // onSearchSubmit использует зависимые компоненты\n // чтобы контролировать поведение при сабмите\n if (onSearchSubmit) {\n const onCloseBottomSheet = () => {\n setShowBottomSheet(false);\n };\n // в onSearchSubmit нужно вернуть количество результатов поиска\n onSearchSubmit(event, onCloseBottomSheet, getSearchResultCount(data));\n return;\n }\n setShowBottomSheet(false);\n }\n if (keyboardMatch(event, keyboardKeys.Escape)) {\n input.props.onChange?.(initialValueOnOpening.current);\n }\n },\n [input.props, onSearchSubmit, data, setShowBottomSheet]\n );\n\n const InputComponent = input.component;\n const processInput =\n (ref: RefObject<HTMLElement>): KeyboardEventHandler<HTMLElement> =>\n (event) => {\n const hasPrintableRepresentation = event.key.replace(/\\s/g, '').length === 1;\n if (!hasPrintableRepresentation) {\n return;\n }\n ref.current?.focus();\n const newEvent = new KeyboardEvent('keydown', event.nativeEvent);\n ref.current?.dispatchEvent(newEvent);\n };\n\n const options = (\n <div\n className={classnames({\n [styles.bottomSheetInputHideCaret]: !caretVisible,\n })}\n >\n <InputComponent\n {...({\n ...input.props,\n invalid: false,\n ref: bottomSheetInputRef,\n autoComplete: 'off',\n onKeyDown: onKeyDownHandler,\n } as unknown as JSX.IntrinsicAttributes &\n JSX.LibraryManagedAttributes<InputType, ControlledInputProps>)}\n />\n </div>\n );\n\n return (\n <>\n <BottomSheet\n id={pickerId}\n visible={showBottomSheet}\n height=\"full-screen\"\n onAfterExit={onBottomSheetClose}\n keyboardOverlaysFooter={false}\n header={renderHeader({\n onCloseBottomSheet: () => setShowBottomSheet(false),\n headerTitle,\n onChange: input.props.onChange,\n options,\n initialValueOnOpening,\n })}\n onAppear={() => {\n bottomSheetInputRef?.current?.focus();\n setCaretVisible(true);\n onBottomSheetOpen?.();\n }}\n onBeforeExit={() => {\n bottomSheetInputRef?.current?.blur();\n setCaretVisible(false);\n }}\n onClose={() => {\n setShowBottomSheet(false);\n }}\n footer={\n isError && (\n <BottomSheetFooter>\n <Button\n mode=\"secondary\"\n style=\"negative\"\n icon={<ArrowPathOutlinedSize24 />}\n onClick={onClickReload}\n data-qa=\"suggest-reload-button\"\n stretched\n >\n {trls.resetButton}\n </Button>\n </BottomSheetFooter>\n )\n }\n ref={suggestContainerRef}\n allowScrollWhileFocused\n withContentPaddings={false}\n >\n {!isError && (\n <div\n onKeyDown={processInput(bottomSheetInputRef)}\n className={styles.suggestItemsContainer}\n style={{ gap: itemsGap }}\n role=\"listbox\"\n >\n {topContent}\n {userInputInResults}\n {suggestContent}\n {bottomContent}\n </div>\n )}\n {isError && <div className={styles.errorWrapper}>{errorPlaceholder}</div>}\n </BottomSheet>\n <Drop\n id={pickerId}\n autoFocusWhenOpened={false}\n placement={dropPlacement}\n lockPlacement\n visible={dropVisible}\n onClose={() => setShowDrop(false)}\n activatorRef={activatorRef}\n role=\"listbox\"\n padding={16}\n widthEqualToActivator={!dropWidth}\n width={dropWidth}\n forcePlacement\n keyboardNavigationMode=\"list\"\n data-qa=\"suggest-drop\"\n ref={suggestContainerRef}\n onAppear={onDropOpen}\n onAfterExit={onDropClose}\n returnFocusOnClose={false}\n aria-owns={listId}\n >\n <div\n onKeyDown={processInput(inputRef)}\n className={classnames(styles.suggestItemsContainer, styles.suggestItemsContainerDesktop)}\n style={{ maxHeight }}\n >\n <div id={listId} className={styles.suggestItemsContainerWrapper} style={{ gap: itemsGap }}>\n {topContent}\n {userInputInResults}\n {suggestContent}\n {bottomContent}\n </div>\n </div>\n </Drop>\n </>\n );\n};\n\nSuggestPicker.displayName = 'SuggestPicker';\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
|
package/index.css
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
.magritte-night-theme{
|
|
7
7
|
--magritte-color-text-primary-v24-6-0:#ffffff;
|
|
8
8
|
}
|
|
9
|
-
.magritte-chips-section-container___Z7N-E_11-2-
|
|
9
|
+
.magritte-chips-section-container___Z7N-E_11-2-27{
|
|
10
10
|
display:flex;
|
|
11
11
|
gap:12px;
|
|
12
12
|
flex:1 1;
|
|
@@ -15,93 +15,93 @@
|
|
|
15
15
|
padding-right:16px;
|
|
16
16
|
}
|
|
17
17
|
@media (min-width: 1020px){
|
|
18
|
-
body.magritte-old-layout .magritte-chips-section-container___Z7N-E_11-2-
|
|
18
|
+
body.magritte-old-layout .magritte-chips-section-container___Z7N-E_11-2-27{
|
|
19
19
|
padding-left:0;
|
|
20
20
|
padding-right:0;
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
@media (min-width: 1024px){
|
|
24
|
-
body:not(.magritte-old-layout) .magritte-chips-section-container___Z7N-E_11-2-
|
|
24
|
+
body:not(.magritte-old-layout) .magritte-chips-section-container___Z7N-E_11-2-27{
|
|
25
25
|
padding-left:0;
|
|
26
26
|
padding-right:0;
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
|
-
.magritte-chips-section-container_with-other-items___eJZAr_11-2-
|
|
29
|
+
.magritte-chips-section-container_with-other-items___eJZAr_11-2-27{
|
|
30
30
|
padding-bottom:16px;
|
|
31
31
|
}
|
|
32
|
-
.magritte-suggest-items-container___SKj-g_11-2-
|
|
32
|
+
.magritte-suggest-items-container___SKj-g_11-2-27{
|
|
33
33
|
display:flex;
|
|
34
34
|
flex-direction:column;
|
|
35
35
|
padding-top:16px;
|
|
36
36
|
}
|
|
37
|
-
.magritte-suggest-items-container___SKj-g_11-2-
|
|
37
|
+
.magritte-suggest-items-container___SKj-g_11-2-27 .focus-visible{
|
|
38
38
|
z-index:1;
|
|
39
39
|
position:relative;
|
|
40
40
|
}
|
|
41
|
-
.magritte-suggest-items-container_desktop___nKhfi_11-2-
|
|
41
|
+
.magritte-suggest-items-container_desktop___nKhfi_11-2-27{
|
|
42
42
|
padding-top:0;
|
|
43
43
|
}
|
|
44
|
-
.magritte-suggest-items-container-wrapper___T2L5U_11-2-
|
|
44
|
+
.magritte-suggest-items-container-wrapper___T2L5U_11-2-27{
|
|
45
45
|
padding:16px;
|
|
46
46
|
margin:calc(-1 * 16px);
|
|
47
47
|
display:flex;
|
|
48
48
|
flex-direction:column;
|
|
49
49
|
}
|
|
50
50
|
@media (min-width: 1020px){
|
|
51
|
-
body.magritte-old-layout .magritte-suggest-items-container-wrapper___T2L5U_11-2-
|
|
51
|
+
body.magritte-old-layout .magritte-suggest-items-container-wrapper___T2L5U_11-2-27{
|
|
52
52
|
padding:12px;
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
@media (min-width: 1024px){
|
|
56
|
-
body:not(.magritte-old-layout) .magritte-suggest-items-container-wrapper___T2L5U_11-2-
|
|
56
|
+
body:not(.magritte-old-layout) .magritte-suggest-items-container-wrapper___T2L5U_11-2-27{
|
|
57
57
|
padding:12px;
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
|
-
.magritte-suggest-input-container___l3OkM_11-2-
|
|
60
|
+
.magritte-suggest-input-container___l3OkM_11-2-27{
|
|
61
61
|
--magritte-ui-input-caret-color-override:transparent;
|
|
62
62
|
display:inline-block;
|
|
63
63
|
width:100%;
|
|
64
64
|
}
|
|
65
65
|
@media (min-width: 700px){
|
|
66
|
-
body.magritte-old-layout .magritte-suggest-input-container___l3OkM_11-2-
|
|
66
|
+
body.magritte-old-layout .magritte-suggest-input-container___l3OkM_11-2-27{
|
|
67
67
|
--magritte-ui-input-caret-color-override:var(--magritte-color-text-primary-v24-6-0);
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
70
|
@media (min-width: 600px){
|
|
71
|
-
body:not(.magritte-old-layout) .magritte-suggest-input-container___l3OkM_11-2-
|
|
71
|
+
body:not(.magritte-old-layout) .magritte-suggest-input-container___l3OkM_11-2-27{
|
|
72
72
|
--magritte-ui-input-caret-color-override:var(--magritte-color-text-primary-v24-6-0);
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
|
-
.magritte-bottom-sheet-input-hide-caret___ikoig_11-2-
|
|
75
|
+
.magritte-bottom-sheet-input-hide-caret___ikoig_11-2-27{
|
|
76
76
|
--magritte-ui-input-caret-color-override:transparent;
|
|
77
77
|
}
|
|
78
|
-
.magritte-error-wrapper___Ui4xt_11-2-
|
|
78
|
+
.magritte-error-wrapper___Ui4xt_11-2-27{
|
|
79
79
|
height:100%;
|
|
80
80
|
}
|
|
81
|
-
.magritte-delimiter___bh1bC_11-2-
|
|
81
|
+
.magritte-delimiter___bh1bC_11-2-27{
|
|
82
82
|
display:flex;
|
|
83
83
|
padding:8px 0;
|
|
84
84
|
}
|
|
85
|
-
.magritte-delimiter_with-padding___BGNUr_11-2-
|
|
85
|
+
.magritte-delimiter_with-padding___BGNUr_11-2-27{
|
|
86
86
|
padding:8px 16px;
|
|
87
87
|
}
|
|
88
88
|
@media (min-width: 1020px){
|
|
89
|
-
body.magritte-old-layout .magritte-delimiter_with-padding___BGNUr_11-2-
|
|
89
|
+
body.magritte-old-layout .magritte-delimiter_with-padding___BGNUr_11-2-27{
|
|
90
90
|
padding:8px 12px;
|
|
91
91
|
}
|
|
92
92
|
}
|
|
93
93
|
@media (min-width: 1024px){
|
|
94
|
-
body:not(.magritte-old-layout) .magritte-delimiter_with-padding___BGNUr_11-2-
|
|
94
|
+
body:not(.magritte-old-layout) .magritte-delimiter_with-padding___BGNUr_11-2-27{
|
|
95
95
|
padding:8px 12px;
|
|
96
96
|
}
|
|
97
97
|
}
|
|
98
|
-
.magritte-delimiter-link___pBTjW_11-2-
|
|
98
|
+
.magritte-delimiter-link___pBTjW_11-2-27{
|
|
99
99
|
margin-left:auto;
|
|
100
100
|
}
|
|
101
|
-
.magritte-suggest-item___jzPcw_11-2-
|
|
102
|
-
.magritte-suggest-item___jzPcw_11-2-
|
|
101
|
+
.magritte-suggest-item___jzPcw_11-2-27:hover,
|
|
102
|
+
.magritte-suggest-item___jzPcw_11-2-27:active{
|
|
103
103
|
cursor:pointer;
|
|
104
104
|
}
|
|
105
|
-
.magritte-suggest-item___jzPcw_11-2-
|
|
105
|
+
.magritte-suggest-item___jzPcw_11-2-27.focus-visible{
|
|
106
106
|
outline:var(--magritte-color-stroke-state-focused-accessible-v24-6-0) solid 4px;
|
|
107
107
|
}
|
package/index.js
CHANGED
|
@@ -14,7 +14,7 @@ import '@hh.ru/magritte-ui-button';
|
|
|
14
14
|
import '@hh.ru/magritte-ui-drop';
|
|
15
15
|
import '@hh.ru/magritte-ui-icon/icon';
|
|
16
16
|
import '@hh.ru/magritte-ui-navigation-bar';
|
|
17
|
-
import './suggest-
|
|
17
|
+
import './suggest-DbaS9o7t.js';
|
|
18
18
|
import './useSuggestKeyboardNav.js';
|
|
19
19
|
import '@hh.ru/magritte-ui-card';
|
|
20
20
|
import '@hh.ru/magritte-ui-cell';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hh.ru/magritte-ui-suggest",
|
|
3
|
-
"version": "11.2.
|
|
3
|
+
"version": "11.2.27",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"sideEffects": [
|
|
@@ -25,18 +25,18 @@
|
|
|
25
25
|
"@hh.ru/magritte-common-keyboard": "4.3.3",
|
|
26
26
|
"@hh.ru/magritte-common-use-multiple-refs": "1.1.11",
|
|
27
27
|
"@hh.ru/magritte-design-tokens": "24.6.0",
|
|
28
|
-
"@hh.ru/magritte-ui-bottom-sheet": "9.3.
|
|
28
|
+
"@hh.ru/magritte-ui-bottom-sheet": "9.3.26",
|
|
29
29
|
"@hh.ru/magritte-ui-breakpoint": "6.0.8",
|
|
30
30
|
"@hh.ru/magritte-ui-button": "7.2.2",
|
|
31
|
-
"@hh.ru/magritte-ui-card": "8.5.
|
|
31
|
+
"@hh.ru/magritte-ui-card": "8.5.4",
|
|
32
32
|
"@hh.ru/magritte-ui-cell": "7.2.15",
|
|
33
33
|
"@hh.ru/magritte-ui-chips": "7.0.9",
|
|
34
|
-
"@hh.ru/magritte-ui-drop": "12.3.
|
|
34
|
+
"@hh.ru/magritte-ui-drop": "12.3.15",
|
|
35
35
|
"@hh.ru/magritte-ui-icon": "14.2.1",
|
|
36
36
|
"@hh.ru/magritte-ui-input": "9.4.17",
|
|
37
37
|
"@hh.ru/magritte-ui-link": "7.1.18",
|
|
38
38
|
"@hh.ru/magritte-ui-mock-component": "1.1.7",
|
|
39
|
-
"@hh.ru/magritte-ui-navigation-bar": "10.1.
|
|
39
|
+
"@hh.ru/magritte-ui-navigation-bar": "10.1.22",
|
|
40
40
|
"@hh.ru/magritte-ui-trigger": "4.3.10",
|
|
41
41
|
"@hh.ru/magritte-ui-typography": "5.2.0"
|
|
42
42
|
},
|
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
"publishConfig": {
|
|
48
48
|
"access": "public"
|
|
49
49
|
},
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "cadaa9dd9ed52159fedbaf7e7111b70cdf6bb05c"
|
|
51
51
|
}
|
package/sectionRenderers.js
CHANGED
|
@@ -9,7 +9,7 @@ import { Cell, CellText } from '@hh.ru/magritte-ui-cell';
|
|
|
9
9
|
import { CustomChip } from '@hh.ru/magritte-ui-chips';
|
|
10
10
|
import { Link } from '@hh.ru/magritte-ui-link';
|
|
11
11
|
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
12
|
-
import { s as styles } from './suggest-
|
|
12
|
+
import { s as styles } from './suggest-DbaS9o7t.js';
|
|
13
13
|
|
|
14
14
|
const Delimiter = ({ children, enablePadding }) => {
|
|
15
15
|
return (jsx("div", { className: classnames(styles.delimiter, {
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import './index.css';
|
|
2
|
+
var styles = {"chips-section-container":"magritte-chips-section-container___Z7N-E_11-2-27","chipsSectionContainer":"magritte-chips-section-container___Z7N-E_11-2-27","chips-section-container_with-other-items":"magritte-chips-section-container_with-other-items___eJZAr_11-2-27","chipsSectionContainerWithOtherItems":"magritte-chips-section-container_with-other-items___eJZAr_11-2-27","suggest-items-container":"magritte-suggest-items-container___SKj-g_11-2-27","suggestItemsContainer":"magritte-suggest-items-container___SKj-g_11-2-27","suggest-items-container_desktop":"magritte-suggest-items-container_desktop___nKhfi_11-2-27","suggestItemsContainerDesktop":"magritte-suggest-items-container_desktop___nKhfi_11-2-27","suggest-items-container-wrapper":"magritte-suggest-items-container-wrapper___T2L5U_11-2-27","suggestItemsContainerWrapper":"magritte-suggest-items-container-wrapper___T2L5U_11-2-27","suggest-input-container":"magritte-suggest-input-container___l3OkM_11-2-27","suggestInputContainer":"magritte-suggest-input-container___l3OkM_11-2-27","bottom-sheet-input-hide-caret":"magritte-bottom-sheet-input-hide-caret___ikoig_11-2-27","bottomSheetInputHideCaret":"magritte-bottom-sheet-input-hide-caret___ikoig_11-2-27","error-wrapper":"magritte-error-wrapper___Ui4xt_11-2-27","errorWrapper":"magritte-error-wrapper___Ui4xt_11-2-27","delimiter":"magritte-delimiter___bh1bC_11-2-27","delimiter_with-padding":"magritte-delimiter_with-padding___BGNUr_11-2-27","delimiterWithPadding":"magritte-delimiter_with-padding___BGNUr_11-2-27","delimiter-link":"magritte-delimiter-link___pBTjW_11-2-27","delimiterLink":"magritte-delimiter-link___pBTjW_11-2-27","suggest-item":"magritte-suggest-item___jzPcw_11-2-27","suggestItem":"magritte-suggest-item___jzPcw_11-2-27"};
|
|
3
|
+
|
|
4
|
+
export { styles as s };
|
|
5
|
+
//# sourceMappingURL=suggest-DbaS9o7t.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"suggest-DbaS9o7t.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
package/suggest-C5Th9IqC.js
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import './index.css';
|
|
2
|
-
var styles = {"chips-section-container":"magritte-chips-section-container___Z7N-E_11-2-26","chipsSectionContainer":"magritte-chips-section-container___Z7N-E_11-2-26","chips-section-container_with-other-items":"magritte-chips-section-container_with-other-items___eJZAr_11-2-26","chipsSectionContainerWithOtherItems":"magritte-chips-section-container_with-other-items___eJZAr_11-2-26","suggest-items-container":"magritte-suggest-items-container___SKj-g_11-2-26","suggestItemsContainer":"magritte-suggest-items-container___SKj-g_11-2-26","suggest-items-container_desktop":"magritte-suggest-items-container_desktop___nKhfi_11-2-26","suggestItemsContainerDesktop":"magritte-suggest-items-container_desktop___nKhfi_11-2-26","suggest-items-container-wrapper":"magritte-suggest-items-container-wrapper___T2L5U_11-2-26","suggestItemsContainerWrapper":"magritte-suggest-items-container-wrapper___T2L5U_11-2-26","suggest-input-container":"magritte-suggest-input-container___l3OkM_11-2-26","suggestInputContainer":"magritte-suggest-input-container___l3OkM_11-2-26","bottom-sheet-input-hide-caret":"magritte-bottom-sheet-input-hide-caret___ikoig_11-2-26","bottomSheetInputHideCaret":"magritte-bottom-sheet-input-hide-caret___ikoig_11-2-26","error-wrapper":"magritte-error-wrapper___Ui4xt_11-2-26","errorWrapper":"magritte-error-wrapper___Ui4xt_11-2-26","delimiter":"magritte-delimiter___bh1bC_11-2-26","delimiter_with-padding":"magritte-delimiter_with-padding___BGNUr_11-2-26","delimiterWithPadding":"magritte-delimiter_with-padding___BGNUr_11-2-26","delimiter-link":"magritte-delimiter-link___pBTjW_11-2-26","delimiterLink":"magritte-delimiter-link___pBTjW_11-2-26","suggest-item":"magritte-suggest-item___jzPcw_11-2-26","suggestItem":"magritte-suggest-item___jzPcw_11-2-26"};
|
|
3
|
-
|
|
4
|
-
export { styles as s };
|
|
5
|
-
//# sourceMappingURL=suggest-C5Th9IqC.js.map
|
package/suggest-C5Th9IqC.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"suggest-C5Th9IqC.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|