@hh.ru/magritte-ui-suggest 4.2.5 → 4.2.7
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.d.ts +1 -1
- package/Suggest.js +1 -1
- package/SuggestPicker.d.ts +1 -1
- package/SuggestPicker.js +1 -1
- package/SuggestPicker.js.map +1 -1
- package/dataProvider.d.ts +1 -1
- package/index.css +22 -22
- package/index.d.ts +3 -3
- package/index.js +1 -1
- package/index.mock.d.ts +2 -2
- package/package.json +23 -22
- package/{sectionRenderers-dc02f5e5.js → sectionRenderers-BLrwUy5Z.js} +2 -2
- package/{sectionRenderers-dc02f5e5.js.map → sectionRenderers-BLrwUy5Z.js.map} +1 -1
- package/sectionRenderers.d.ts +1 -1
- package/sectionRenderers.js +1 -1
- package/useSuggestKeyboardNav.d.ts +1 -1
package/Suggest.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ReactElement, ForwardedRef } from 'react';
|
|
2
|
-
import { SuggestProps, SuggestInputComponent } from '
|
|
2
|
+
import { SuggestProps, SuggestInputComponent } from '@hh.ru/magritte-ui-suggest/types';
|
|
3
3
|
declare const Suggest: (<K, T extends SuggestInputComponent>(props: SuggestProps<K, T> & {
|
|
4
4
|
ref?: ForwardedRef<HTMLElement> | undefined;
|
|
5
5
|
}) => ReactElement | null) & {
|
package/Suggest.js
CHANGED
|
@@ -6,7 +6,7 @@ import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
|
|
|
6
6
|
import { SuggestPicker } from './SuggestPicker.js';
|
|
7
7
|
import { DataProviderError } from './dataProvider.js';
|
|
8
8
|
import { useSuggestKeyboardNav } from './useSuggestKeyboardNav.js';
|
|
9
|
-
import { s as styles } from './sectionRenderers-
|
|
9
|
+
import { s as styles } from './sectionRenderers-BLrwUy5Z.js';
|
|
10
10
|
import 'classnames';
|
|
11
11
|
import '@hh.ru/magritte-ui-bottom-sheet';
|
|
12
12
|
import '@hh.ru/magritte-ui-button';
|
package/SuggestPicker.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { RefObject, ReactElement, ReactNode } from 'react';
|
|
2
2
|
import { type TokenBaseCoreSpace } from '@hh.ru/magritte-design-tokens/types';
|
|
3
|
-
import { DataProviderResult, SuggestProps, SuggestInputComponent, InputProp } from '
|
|
3
|
+
import { DataProviderResult, SuggestProps, SuggestInputComponent, InputProp } from '@hh.ru/magritte-ui-suggest/types';
|
|
4
4
|
interface SuggestPickerProps<K, P extends SuggestInputComponent = SuggestInputComponent> {
|
|
5
5
|
data: DataProviderResult<K> | null | undefined;
|
|
6
6
|
activatorRef: RefObject<HTMLElement>;
|
package/SuggestPicker.js
CHANGED
|
@@ -8,7 +8,7 @@ import { Button } from '@hh.ru/magritte-ui-button';
|
|
|
8
8
|
import { Drop } from '@hh.ru/magritte-ui-drop';
|
|
9
9
|
import { ArrowPathOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
|
|
10
10
|
import { NavigationBar } from '@hh.ru/magritte-ui-navigation-bar';
|
|
11
|
-
import { r as renderSection, s as styles } from './sectionRenderers-
|
|
11
|
+
import { r as renderSection, s as styles } from './sectionRenderers-BLrwUy5Z.js';
|
|
12
12
|
import '@hh.ru/magritte-ui-card';
|
|
13
13
|
import '@hh.ru/magritte-ui-cell';
|
|
14
14
|
import '@hh.ru/magritte-ui-chips';
|
package/SuggestPicker.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SuggestPicker.js","sources":["../src/SuggestPicker.tsx"],"sourcesContent":["import { RefObject, useMemo, useEffect, useRef, useState, ReactElement, KeyboardEventHandler, ReactNode } from 'react';\nimport classnames from 'classnames';\n\nimport { type TokenBaseCoreSpace } 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 } from '@hh.ru/magritte-ui-icon/icon';\nimport { ControlledInputProps } from '@hh.ru/magritte-ui-input/src';\nimport { NavigationBar } from '@hh.ru/magritte-ui-navigation-bar';\nimport { renderSection } from '@hh.ru/magritte-ui-suggest/sectionRenderers';\nimport { DataProviderResult, SuggestProps, SuggestInputComponent, InputProp } from '@hh.ru/magritte-ui-suggest/types';\n\nimport styles from './suggest.less';\n\ninterface SuggestPickerProps<K, P extends SuggestInputComponent = SuggestInputComponent> {\n data: DataProviderResult<K> | null | undefined;\n activatorRef: RefObject<HTMLElement>;\n inputRef: RefObject<HTMLElement>;\n onValueSelect: (value: string, data: K | undefined) => void;\n maxHeight: number;\n navigationBarProps: SuggestProps<unknown, SuggestInputComponent>['navigationBarProps'];\n input: InputProp<P>;\n inputFocused: boolean;\n currentInputValueSelectedFromSuggest: boolean;\n suggestContainerRef: RefObject<HTMLElement>;\n itemsGap: TokenBaseCoreSpace;\n onBottomSheetClose: VoidFunction;\n dropHost?: RefObject<HTMLElement>;\n inputValue: string;\n topContent?: ReactNode;\n bottomContent?: ReactNode;\n maxWidth?: number;\n isError: boolean;\n trls: SuggestProps<unknown, SuggestInputComponent>['trls'];\n errorPlaceholder: ReactNode;\n onClickReload: VoidFunction;\n onBottomSheetOpen?: VoidFunction;\n onDropOpen?: VoidFunction;\n onDropClose?: VoidFunction;\n}\n\nexport const SuggestPicker = function <K, P extends SuggestInputComponent>({\n data,\n activatorRef,\n inputRef,\n onValueSelect,\n maxHeight,\n navigationBarProps,\n input,\n inputFocused,\n currentInputValueSelectedFromSuggest,\n suggestContainerRef,\n itemsGap,\n onBottomSheetClose,\n onBottomSheetOpen,\n dropHost,\n inputValue,\n topContent,\n bottomContent,\n maxWidth,\n isError,\n trls,\n errorPlaceholder,\n onClickReload,\n onDropOpen,\n onDropClose,\n}: SuggestPickerProps<K, P>): ReactElement | null {\n const { isMobile, breakpoint } = useBreakpoint();\n const [showBottomSheet, setShowBottomSheet] = useState(false);\n const [showDrop, setShowDrop] = useState(true);\n const bottomSheetInputRef = useRef<HTMLInputElement>(null);\n const [caretVisible, setCaretVisible] = useState(false);\n\n useEffect(() => {\n if (inputFocused) {\n setShowBottomSheet(true);\n } else if (!isMobile) {\n setShowBottomSheet(false);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [inputFocused, setShowBottomSheet]);\n\n useEffect(() => {\n if (currentInputValueSelectedFromSuggest) {\n setShowBottomSheet(false);\n }\n }, [currentInputValueSelectedFromSuggest, isMobile]);\n\n // если скрыли дроп из-за скрытия активатора под скроллом, то при следующем изменении данных нужно его показать\n useEffect(() => {\n setShowDrop(true);\n }, [inputValue, inputFocused]);\n\n const suggestContent = useMemo(() => {\n if (!data) {\n return null;\n }\n\n return data.reduce<Array<JSX.Element>>((result, section, index) => {\n const renderResult = renderSection(\n section,\n index,\n onValueSelect,\n breakpoint,\n data.length,\n Boolean(bottomContent)\n );\n result.push(...renderResult);\n return result;\n }, []);\n }, [data, onValueSelect, breakpoint, bottomContent]);\n\n const dropVisible =\n suggestContent !== null &&\n suggestContent.length > 0 &&\n !currentInputValueSelectedFromSuggest &&\n inputFocused &&\n showDrop;\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 return (\n <>\n <BottomSheet\n visible={showBottomSheet}\n height=\"full-screen\"\n onAfterExit={onBottomSheetClose}\n keyboardOverlaysContent={false}\n header={\n <NavigationBar\n {...navigationBarProps}\n 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 } as unknown as JSX.IntrinsicAttributes &\n JSX.LibraryManagedAttributes<P, ControlledInputProps>)}\n />\n </div>\n }\n />\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 >\n {!isError && (\n <div\n onKeyDown={processInput(bottomSheetInputRef)}\n className={styles.suggestItemsContainer}\n style={{ gap: itemsGap }}\n >\n {topContent}\n {suggestContent}\n {bottomContent}\n </div>\n )}\n {isError && <div className={styles.errorWrapper}>{errorPlaceholder}</div>}\n </BottomSheet>\n <Drop\n autoFocusWhenOpened={false}\n direction=\"bottom\"\n alignment=\"left\"\n visible={dropVisible}\n onClose={() => setShowDrop(false)}\n host={dropHost}\n activatorRef={activatorRef}\n role=\"status\"\n space={400}\n widthEqualToActivator={!maxWidth}\n maxWidth={maxWidth}\n forcePosition\n keyboardNavigationMode=\"list\"\n data-qa=\"suggest-drop\"\n ref={suggestContainerRef}\n onAppear={onDropOpen}\n onAfterExit={onDropClose}\n >\n <div onKeyDown={processInput(inputRef)} className={styles.suggestItemsContainer} style={{ maxHeight }}>\n <div className={styles.suggestItemsContainerWrapper} style={{ gap: itemsGap }}>\n {topContent}\n {suggestContent}\n {bottomContent}\n </div>\n </div>\n </Drop>\n </>\n );\n};\n\nSuggestPicker.displayName = 'SuggestPicker';\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SuggestPicker.js","sources":["../src/SuggestPicker.tsx"],"sourcesContent":["import { RefObject, useMemo, useEffect, useRef, useState, ReactElement, KeyboardEventHandler, ReactNode } from 'react';\nimport classnames from 'classnames';\n\nimport { type TokenBaseCoreSpace } 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 } 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 { renderSection } from '@hh.ru/magritte-ui-suggest/sectionRenderers';\nimport { DataProviderResult, SuggestProps, SuggestInputComponent, InputProp } from '@hh.ru/magritte-ui-suggest/types';\n\nimport styles from './suggest.less';\n\ninterface SuggestPickerProps<K, P extends SuggestInputComponent = SuggestInputComponent> {\n data: DataProviderResult<K> | null | undefined;\n activatorRef: RefObject<HTMLElement>;\n inputRef: RefObject<HTMLElement>;\n onValueSelect: (value: string, data: K | undefined) => void;\n maxHeight: number;\n navigationBarProps: SuggestProps<unknown, SuggestInputComponent>['navigationBarProps'];\n input: InputProp<P>;\n inputFocused: boolean;\n currentInputValueSelectedFromSuggest: boolean;\n suggestContainerRef: RefObject<HTMLElement>;\n itemsGap: TokenBaseCoreSpace;\n onBottomSheetClose: VoidFunction;\n dropHost?: RefObject<HTMLElement>;\n inputValue: string;\n topContent?: ReactNode;\n bottomContent?: ReactNode;\n maxWidth?: number;\n isError: boolean;\n trls: SuggestProps<unknown, SuggestInputComponent>['trls'];\n errorPlaceholder: ReactNode;\n onClickReload: VoidFunction;\n onBottomSheetOpen?: VoidFunction;\n onDropOpen?: VoidFunction;\n onDropClose?: VoidFunction;\n}\n\nexport const SuggestPicker = function <K, P extends SuggestInputComponent>({\n data,\n activatorRef,\n inputRef,\n onValueSelect,\n maxHeight,\n navigationBarProps,\n input,\n inputFocused,\n currentInputValueSelectedFromSuggest,\n suggestContainerRef,\n itemsGap,\n onBottomSheetClose,\n onBottomSheetOpen,\n dropHost,\n inputValue,\n topContent,\n bottomContent,\n maxWidth,\n isError,\n trls,\n errorPlaceholder,\n onClickReload,\n onDropOpen,\n onDropClose,\n}: SuggestPickerProps<K, P>): ReactElement | null {\n const { isMobile, breakpoint } = useBreakpoint();\n const [showBottomSheet, setShowBottomSheet] = useState(false);\n const [showDrop, setShowDrop] = useState(true);\n const bottomSheetInputRef = useRef<HTMLInputElement>(null);\n const [caretVisible, setCaretVisible] = useState(false);\n\n useEffect(() => {\n if (inputFocused) {\n setShowBottomSheet(true);\n } else if (!isMobile) {\n setShowBottomSheet(false);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [inputFocused, setShowBottomSheet]);\n\n useEffect(() => {\n if (currentInputValueSelectedFromSuggest) {\n setShowBottomSheet(false);\n }\n }, [currentInputValueSelectedFromSuggest, isMobile]);\n\n // если скрыли дроп из-за скрытия активатора под скроллом, то при следующем изменении данных нужно его показать\n useEffect(() => {\n setShowDrop(true);\n }, [inputValue, inputFocused]);\n\n const suggestContent = useMemo(() => {\n if (!data) {\n return null;\n }\n\n return data.reduce<Array<JSX.Element>>((result, section, index) => {\n const renderResult = renderSection(\n section,\n index,\n onValueSelect,\n breakpoint,\n data.length,\n Boolean(bottomContent)\n );\n result.push(...renderResult);\n return result;\n }, []);\n }, [data, onValueSelect, breakpoint, bottomContent]);\n\n const dropVisible =\n suggestContent !== null &&\n suggestContent.length > 0 &&\n !currentInputValueSelectedFromSuggest &&\n inputFocused &&\n showDrop;\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 return (\n <>\n <BottomSheet\n visible={showBottomSheet}\n height=\"full-screen\"\n onAfterExit={onBottomSheetClose}\n keyboardOverlaysContent={false}\n header={\n <NavigationBar\n {...navigationBarProps}\n 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 } as unknown as JSX.IntrinsicAttributes &\n JSX.LibraryManagedAttributes<P, ControlledInputProps>)}\n />\n </div>\n }\n />\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 >\n {!isError && (\n <div\n onKeyDown={processInput(bottomSheetInputRef)}\n className={styles.suggestItemsContainer}\n style={{ gap: itemsGap }}\n >\n {topContent}\n {suggestContent}\n {bottomContent}\n </div>\n )}\n {isError && <div className={styles.errorWrapper}>{errorPlaceholder}</div>}\n </BottomSheet>\n <Drop\n autoFocusWhenOpened={false}\n direction=\"bottom\"\n alignment=\"left\"\n visible={dropVisible}\n onClose={() => setShowDrop(false)}\n host={dropHost}\n activatorRef={activatorRef}\n role=\"status\"\n space={400}\n widthEqualToActivator={!maxWidth}\n maxWidth={maxWidth}\n forcePosition\n keyboardNavigationMode=\"list\"\n data-qa=\"suggest-drop\"\n ref={suggestContainerRef}\n onAppear={onDropOpen}\n onAfterExit={onDropClose}\n >\n <div onKeyDown={processInput(inputRef)} className={styles.suggestItemsContainer} style={{ maxHeight }}>\n <div className={styles.suggestItemsContainerWrapper} style={{ gap: itemsGap }}>\n {topContent}\n {suggestContent}\n {bottomContent}\n </div>\n </div>\n </Drop>\n </>\n );\n};\n\nSuggestPicker.displayName = 'SuggestPicker';\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
|
package/dataProvider.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { DataProvider, DataProviderResult } from '
|
|
1
|
+
import { DataProvider, DataProviderResult } from '@hh.ru/magritte-ui-suggest/types';
|
|
2
2
|
type CancelCallback = (callback: VoidFunction) => void;
|
|
3
3
|
export interface FetcherResultProducer<R = never, I = undefined> {
|
|
4
4
|
(data: I | null, query: string): DataProviderResult<R>;
|
package/index.css
CHANGED
|
@@ -1,64 +1,64 @@
|
|
|
1
1
|
:root{
|
|
2
|
-
--magritte-color-text-primary-v18-2-
|
|
2
|
+
--magritte-color-text-primary-v18-2-1:#000000;
|
|
3
3
|
}
|
|
4
4
|
:root{
|
|
5
|
-
--magritte-static-space-300-v18-2-
|
|
6
|
-
--magritte-static-space-400-v18-2-
|
|
5
|
+
--magritte-static-space-300-v18-2-1:12px;
|
|
6
|
+
--magritte-static-space-400-v18-2-1:16px;
|
|
7
7
|
}
|
|
8
8
|
.magritte-night-theme{
|
|
9
|
-
--magritte-color-text-primary-v18-2-
|
|
9
|
+
--magritte-color-text-primary-v18-2-1:#ffffff;
|
|
10
10
|
}
|
|
11
|
-
.magritte-chips-section-container___Z7N-E_4-2-
|
|
11
|
+
.magritte-chips-section-container___Z7N-E_4-2-7{
|
|
12
12
|
display:flex;
|
|
13
13
|
gap:12px;
|
|
14
14
|
flex:1 1;
|
|
15
15
|
flex-wrap:wrap;
|
|
16
16
|
}
|
|
17
|
-
.magritte-chips-section-container_with-other-items___eJZAr_4-2-
|
|
17
|
+
.magritte-chips-section-container_with-other-items___eJZAr_4-2-7{
|
|
18
18
|
padding-bottom:16px;
|
|
19
19
|
}
|
|
20
|
-
.magritte-suggest-items-container___SKj-g_4-2-
|
|
20
|
+
.magritte-suggest-items-container___SKj-g_4-2-7{
|
|
21
21
|
display:flex;
|
|
22
22
|
flex-direction:column;
|
|
23
23
|
}
|
|
24
|
-
.magritte-suggest-items-container___SKj-g_4-2-
|
|
24
|
+
.magritte-suggest-items-container___SKj-g_4-2-7 .focus-visible{
|
|
25
25
|
z-index:1;
|
|
26
26
|
position:relative;
|
|
27
27
|
}
|
|
28
|
-
.magritte-suggest-items-container-wrapper___T2L5U_4-2-
|
|
29
|
-
padding:var(--magritte-static-space-400-v18-2-
|
|
30
|
-
margin:calc(-1 * var(--magritte-static-space-400-v18-2-
|
|
28
|
+
.magritte-suggest-items-container-wrapper___T2L5U_4-2-7{
|
|
29
|
+
padding:var(--magritte-static-space-400-v18-2-1);
|
|
30
|
+
margin:calc(-1 * var(--magritte-static-space-400-v18-2-1));
|
|
31
31
|
display:flex;
|
|
32
32
|
flex-direction:column;
|
|
33
33
|
}
|
|
34
34
|
@media (min-width: 1020px){
|
|
35
|
-
body.magritte-old-layout .magritte-suggest-items-container-wrapper___T2L5U_4-2-
|
|
36
|
-
padding:var(--magritte-static-space-300-v18-2-
|
|
35
|
+
body.magritte-old-layout .magritte-suggest-items-container-wrapper___T2L5U_4-2-7{
|
|
36
|
+
padding:var(--magritte-static-space-300-v18-2-1);
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
@media (min-width: 1024px){
|
|
40
|
-
body:not(.magritte-old-layout) .magritte-suggest-items-container-wrapper___T2L5U_4-2-
|
|
41
|
-
padding:var(--magritte-static-space-300-v18-2-
|
|
40
|
+
body:not(.magritte-old-layout) .magritte-suggest-items-container-wrapper___T2L5U_4-2-7{
|
|
41
|
+
padding:var(--magritte-static-space-300-v18-2-1);
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
|
-
.magritte-suggest-input-container___l3OkM_4-2-
|
|
44
|
+
.magritte-suggest-input-container___l3OkM_4-2-7{
|
|
45
45
|
--magritte-ui-input-caret-color-override:transparent;
|
|
46
46
|
display:inline-block;
|
|
47
47
|
width:100%;
|
|
48
48
|
}
|
|
49
49
|
@media (min-width: 700px){
|
|
50
|
-
body.magritte-old-layout .magritte-suggest-input-container___l3OkM_4-2-
|
|
51
|
-
--magritte-ui-input-caret-color-override:var(--magritte-color-text-primary-v18-2-
|
|
50
|
+
body.magritte-old-layout .magritte-suggest-input-container___l3OkM_4-2-7{
|
|
51
|
+
--magritte-ui-input-caret-color-override:var(--magritte-color-text-primary-v18-2-1);
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
@media (min-width: 600px){
|
|
55
|
-
body:not(.magritte-old-layout) .magritte-suggest-input-container___l3OkM_4-2-
|
|
56
|
-
--magritte-ui-input-caret-color-override:var(--magritte-color-text-primary-v18-2-
|
|
55
|
+
body:not(.magritte-old-layout) .magritte-suggest-input-container___l3OkM_4-2-7{
|
|
56
|
+
--magritte-ui-input-caret-color-override:var(--magritte-color-text-primary-v18-2-1);
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
|
-
.magritte-bottom-sheet-input-hide-caret___ikoig_4-2-
|
|
59
|
+
.magritte-bottom-sheet-input-hide-caret___ikoig_4-2-7{
|
|
60
60
|
--magritte-ui-input-caret-color-override:transparent;
|
|
61
61
|
}
|
|
62
|
-
.magritte-error-wrapper___Ui4xt_4-2-
|
|
62
|
+
.magritte-error-wrapper___Ui4xt_4-2-7{
|
|
63
63
|
height:100%;
|
|
64
64
|
}
|
package/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export * from '@hh.ru/magritte-ui-theme-provider';
|
|
2
|
-
export * from '
|
|
3
|
-
export { createDataProvider, decorateWithQueryTransofrmer, decorateWithResponseFormatter, defaultFetcher, createStaticDataFetcher, combineProviders, type AsyncDataFetcher, } from '
|
|
4
|
-
export type { DataSection, DataSectionOfType, DataProviderResult, DataProvider, SuggestInputProps, SuggestProps, SuggestInputComponent, } from '
|
|
2
|
+
export * from '@hh.ru/magritte-ui-suggest/Suggest';
|
|
3
|
+
export { createDataProvider, decorateWithQueryTransofrmer, decorateWithResponseFormatter, defaultFetcher, createStaticDataFetcher, combineProviders, type AsyncDataFetcher, } from '@hh.ru/magritte-ui-suggest/dataProvider';
|
|
4
|
+
export type { DataSection, DataSectionOfType, DataProviderResult, DataProvider, SuggestInputProps, SuggestProps, SuggestInputComponent, } from '@hh.ru/magritte-ui-suggest/types';
|
package/index.js
CHANGED
|
@@ -13,7 +13,7 @@ import '@hh.ru/magritte-ui-button';
|
|
|
13
13
|
import '@hh.ru/magritte-ui-drop';
|
|
14
14
|
import '@hh.ru/magritte-ui-icon/icon';
|
|
15
15
|
import '@hh.ru/magritte-ui-navigation-bar';
|
|
16
|
-
import './sectionRenderers-
|
|
16
|
+
import './sectionRenderers-BLrwUy5Z.js';
|
|
17
17
|
import '@hh.ru/magritte-ui-card';
|
|
18
18
|
import '@hh.ru/magritte-ui-cell';
|
|
19
19
|
import '@hh.ru/magritte-ui-chips';
|
package/index.mock.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ForwardRefExoticComponent } from 'react';
|
|
2
|
-
export { type AsyncDataFetcher } from '
|
|
3
|
-
export type { DataSection, DataSectionOfType, DataProviderResult, DataProvider, SuggestInputProps, } from '
|
|
2
|
+
export { type AsyncDataFetcher } from '@hh.ru/magritte-ui-suggest/dataProvider';
|
|
3
|
+
export type { DataSection, DataSectionOfType, DataProviderResult, DataProvider, SuggestInputProps, } from '@hh.ru/magritte-ui-suggest/types';
|
|
4
4
|
declare const ThemeProvider: any;
|
|
5
5
|
export { ThemeProvider };
|
|
6
6
|
export declare const Input: ForwardRefExoticComponent<Record<string, unknown>>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hh.ru/magritte-ui-suggest",
|
|
3
|
-
"version": "4.2.
|
|
3
|
+
"version": "4.2.7",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"sideEffects": [
|
|
@@ -16,27 +16,28 @@
|
|
|
16
16
|
"eslint-test": "yarn root:eslint-test $(pwd)",
|
|
17
17
|
"ts-config": "yarn root:ts-config $(pwd)",
|
|
18
18
|
"ts-check": "yarn root:ts-check $(pwd)",
|
|
19
|
-
"test": "yarn root:test $(pwd)"
|
|
19
|
+
"test": "yarn root:test $(pwd)",
|
|
20
|
+
"watch": "yarn root:watch $(pwd)"
|
|
20
21
|
},
|
|
21
22
|
"dependencies": {
|
|
22
|
-
"@hh.ru/magritte-common-func-utils": "1.3.
|
|
23
|
-
"@hh.ru/magritte-common-fuzzy-search": "1.0.
|
|
24
|
-
"@hh.ru/magritte-common-keyboard": "4.0.
|
|
25
|
-
"@hh.ru/magritte-common-use-multiple-refs": "1.1.
|
|
26
|
-
"@hh.ru/magritte-design-tokens": "18.2.
|
|
27
|
-
"@hh.ru/magritte-ui-bottom-sheet": "4.1.
|
|
28
|
-
"@hh.ru/magritte-ui-breakpoint": "4.0.
|
|
29
|
-
"@hh.ru/magritte-ui-button": "5.0.
|
|
30
|
-
"@hh.ru/magritte-ui-card": "6.0.
|
|
31
|
-
"@hh.ru/magritte-ui-cell": "3.0.
|
|
32
|
-
"@hh.ru/magritte-ui-chips": "5.0.
|
|
33
|
-
"@hh.ru/magritte-ui-drop": "6.0.
|
|
34
|
-
"@hh.ru/magritte-ui-icon": "7.1.
|
|
35
|
-
"@hh.ru/magritte-ui-input": "5.0.
|
|
36
|
-
"@hh.ru/magritte-ui-mock-component": "1.0.
|
|
37
|
-
"@hh.ru/magritte-ui-navigation-bar": "4.1.
|
|
38
|
-
"@hh.ru/magritte-ui-theme-provider": "1.1.
|
|
39
|
-
"@hh.ru/magritte-ui-typography": "3.0.
|
|
23
|
+
"@hh.ru/magritte-common-func-utils": "1.3.7",
|
|
24
|
+
"@hh.ru/magritte-common-fuzzy-search": "1.0.5",
|
|
25
|
+
"@hh.ru/magritte-common-keyboard": "4.0.1",
|
|
26
|
+
"@hh.ru/magritte-common-use-multiple-refs": "1.1.3",
|
|
27
|
+
"@hh.ru/magritte-design-tokens": "18.2.1",
|
|
28
|
+
"@hh.ru/magritte-ui-bottom-sheet": "4.1.35",
|
|
29
|
+
"@hh.ru/magritte-ui-breakpoint": "4.0.3",
|
|
30
|
+
"@hh.ru/magritte-ui-button": "5.0.2",
|
|
31
|
+
"@hh.ru/magritte-ui-card": "6.0.9",
|
|
32
|
+
"@hh.ru/magritte-ui-cell": "3.0.2",
|
|
33
|
+
"@hh.ru/magritte-ui-chips": "5.0.2",
|
|
34
|
+
"@hh.ru/magritte-ui-drop": "6.0.3",
|
|
35
|
+
"@hh.ru/magritte-ui-icon": "7.1.9",
|
|
36
|
+
"@hh.ru/magritte-ui-input": "5.0.25",
|
|
37
|
+
"@hh.ru/magritte-ui-mock-component": "1.0.11",
|
|
38
|
+
"@hh.ru/magritte-ui-navigation-bar": "4.1.18",
|
|
39
|
+
"@hh.ru/magritte-ui-theme-provider": "1.1.25",
|
|
40
|
+
"@hh.ru/magritte-ui-typography": "3.0.12"
|
|
40
41
|
},
|
|
41
42
|
"peerDependencies": {
|
|
42
43
|
"axios": ">=0.26.0",
|
|
@@ -46,5 +47,5 @@
|
|
|
46
47
|
"publishConfig": {
|
|
47
48
|
"access": "public"
|
|
48
49
|
},
|
|
49
|
-
"gitHead": "
|
|
50
|
-
}
|
|
50
|
+
"gitHead": "072f997a89b2060db44c7c18f664937e4d617be3"
|
|
51
|
+
}
|
|
@@ -8,7 +8,7 @@ import { Cell } from '@hh.ru/magritte-ui-cell';
|
|
|
8
8
|
import { CustomChip } from '@hh.ru/magritte-ui-chips';
|
|
9
9
|
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
10
10
|
|
|
11
|
-
var styles = {"chips-section-container":"magritte-chips-section-container___Z7N-E_4-2-
|
|
11
|
+
var styles = {"chips-section-container":"magritte-chips-section-container___Z7N-E_4-2-7","chipsSectionContainer":"magritte-chips-section-container___Z7N-E_4-2-7","chips-section-container_with-other-items":"magritte-chips-section-container_with-other-items___eJZAr_4-2-7","chipsSectionContainerWithOtherItems":"magritte-chips-section-container_with-other-items___eJZAr_4-2-7","suggest-items-container":"magritte-suggest-items-container___SKj-g_4-2-7","suggestItemsContainer":"magritte-suggest-items-container___SKj-g_4-2-7","suggest-items-container-wrapper":"magritte-suggest-items-container-wrapper___T2L5U_4-2-7","suggestItemsContainerWrapper":"magritte-suggest-items-container-wrapper___T2L5U_4-2-7","suggest-input-container":"magritte-suggest-input-container___l3OkM_4-2-7","suggestInputContainer":"magritte-suggest-input-container___l3OkM_4-2-7","bottom-sheet-input-hide-caret":"magritte-bottom-sheet-input-hide-caret___ikoig_4-2-7","bottomSheetInputHideCaret":"magritte-bottom-sheet-input-hide-caret___ikoig_4-2-7","error-wrapper":"magritte-error-wrapper___Ui4xt_4-2-7","errorWrapper":"magritte-error-wrapper___Ui4xt_4-2-7"};
|
|
12
12
|
|
|
13
13
|
const cellSectionRenderer = (section, sectionId, onValueSelect, breakpoint) => {
|
|
14
14
|
return section.items.map((item) => {
|
|
@@ -45,4 +45,4 @@ const renderSection = (section, sectionId, onValueSelect, breakpoint, length, ha
|
|
|
45
45
|
};
|
|
46
46
|
|
|
47
47
|
export { renderSection as r, styles as s };
|
|
48
|
-
//# sourceMappingURL=sectionRenderers-
|
|
48
|
+
//# sourceMappingURL=sectionRenderers-BLrwUy5Z.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sectionRenderers-
|
|
1
|
+
{"version":3,"file":"sectionRenderers-BLrwUy5Z.js","sources":["../src/sectionRenderers.tsx"],"sourcesContent":["import classnames from 'classnames';\n\nimport { Breakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { Card } from '@hh.ru/magritte-ui-card';\nimport { Cell } from '@hh.ru/magritte-ui-cell';\nimport { CustomChip } from '@hh.ru/magritte-ui-chips';\nimport { DataSection, DataSectionOfType } from '@hh.ru/magritte-ui-suggest/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './suggest.less';\n\ninterface ValueSelectHandler<K> {\n (value: string, data: K | undefined): void;\n}\n\ninterface SectionRenderer<T extends DataSection['type'], K = unknown> {\n (\n section: DataSectionOfType<T>,\n sectionId: number,\n onValueSelect: ValueSelectHandler<K>,\n breakpoint: Breakpoint,\n length: number,\n haveBottomContent: boolean\n ): JSX.Element[] | JSX.Element;\n}\n\nconst cellSectionRenderer: SectionRenderer<'cells'> = (section, sectionId, onValueSelect, breakpoint) => {\n return section.items.map((item) => {\n return (\n <Card\n style=\"blank\"\n stretched\n hoverStyle=\"neutral\"\n onMouseDown={(event) => {\n event.preventDefault();\n }}\n onClick={(event) => {\n event.preventDefault();\n onValueSelect(item.value, item.data);\n }}\n actionCard\n padding={[Breakpoint.XS, Breakpoint.S].includes(breakpoint) ? 0 : 12}\n paddingTop={12}\n paddingBottom={12}\n borderRadius={12}\n key={`cell_${sectionId}_${item.value}`}\n data-qa=\"suggest-item-cell\"\n >\n <Cell {...item.componentProps} onClick={undefined} />\n </Card>\n );\n });\n};\n\nconst chipsSectionRenderer: SectionRenderer<'chips'> = (\n section,\n sectionId,\n onValueSelect,\n _,\n length,\n haveBottomContent\n) => {\n return (\n <div\n className={classnames(styles.chipsSectionContainer, {\n // чипсы - не последний элемент или есть нижний контент\n [styles.chipsSectionContainerWithOtherItems]: sectionId !== length - 1 || haveBottomContent,\n })}\n key={`chips_section_${sectionId}`}\n >\n {section.items.map((item) => {\n return (\n <CustomChip\n {...(item.componentProps || {})}\n key={`chips_${sectionId}_${item.value}`}\n onMouseDown={(event) => event.preventDefault()}\n onClick={() => onValueSelect(item.value, item.data)}\n data-qa=\"suggest-item-chips\"\n >\n {item.value}\n </CustomChip>\n );\n })}\n </div>\n );\n};\n\nconst delimiterSectionRenderer: SectionRenderer<'delimiter'> = (section, _, __, breakpoint) => {\n return [\n <Card\n style=\"blank\"\n stretched\n padding={[Breakpoint.XS, Breakpoint.S].includes(breakpoint) ? 0 : 12}\n paddingTop={8}\n paddingBottom={8}\n key={`delimiter_${section.text}`}\n data-qa=\"suggest-item-delimiter\"\n >\n <Text style=\"secondary\" typography=\"label-3-regular\">\n {section.text}\n </Text>\n </Card>,\n ];\n};\n\nconst SECTION_TYPE_TO_RENDERER_MAP: { [K in DataSection['type']]: SectionRenderer<K> } = {\n cells: cellSectionRenderer,\n chips: chipsSectionRenderer,\n delimiter: delimiterSectionRenderer,\n};\n\nexport const renderSection = <T, K extends DataSection['type']>(\n section: DataSectionOfType<K>,\n sectionId: number,\n onValueSelect: ValueSelectHandler<T>,\n breakpoint: Breakpoint,\n length: number,\n haveBottomContent: boolean\n): JSX.Element[] => {\n const renderer = SECTION_TYPE_TO_RENDERER_MAP[section.type];\n const result = renderer(\n section,\n sectionId,\n onValueSelect as ValueSelectHandler<unknown>,\n breakpoint,\n length,\n haveBottomContent\n );\n return Array.isArray(result) ? result : [result];\n};\n"],"names":["_jsx","_createElement"],"mappings":"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"}
|
package/sectionRenderers.d.ts
CHANGED
package/sectionRenderers.js
CHANGED
|
@@ -7,5 +7,5 @@ import '@hh.ru/magritte-ui-card';
|
|
|
7
7
|
import '@hh.ru/magritte-ui-cell';
|
|
8
8
|
import '@hh.ru/magritte-ui-chips';
|
|
9
9
|
import '@hh.ru/magritte-ui-typography';
|
|
10
|
-
export { r as renderSection } from './sectionRenderers-
|
|
10
|
+
export { r as renderSection } from './sectionRenderers-BLrwUy5Z.js';
|
|
11
11
|
//# sourceMappingURL=sectionRenderers.js.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Dispatch, FocusEventHandler, KeyboardEventHandler, SetStateAction, RefObject } from 'react';
|
|
2
|
-
import { NativeFocusEventHandler } from '
|
|
2
|
+
import { NativeFocusEventHandler } from '@hh.ru/magritte-ui-suggest/types';
|
|
3
3
|
export declare const useSuggestKeyboardNav: (suggestContainerRef: RefObject<HTMLElement>, inputContainerRef: RefObject<HTMLDivElement>, setValueSelectedFromSuggest: Dispatch<SetStateAction<string | false>>, actualInputValue: string, inputRef: RefObject<HTMLElement>, onBlur: RefObject<NativeFocusEventHandler | undefined>) => {
|
|
4
4
|
focused: boolean;
|
|
5
5
|
onFocus: FocusEventHandler<HTMLElement>;
|