@hh.ru/magritte-ui-select 8.2.2 → 8.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -18,7 +18,7 @@ import '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
18
18
  import '@hh.ru/magritte-ui-checkbox-radio';
19
19
  import '@hh.ru/magritte-ui-typography';
20
20
 
21
- var styles = {"select-bottom-sheet":"magritte-select-bottom-sheet___1RZDJ_8-2-2","selectBottomSheet":"magritte-select-bottom-sheet___1RZDJ_8-2-2","select-bottom-sheet_checkbox":"magritte-select-bottom-sheet_checkbox___hwTgo_8-2-2","selectBottomSheetCheckbox":"magritte-select-bottom-sheet_checkbox___hwTgo_8-2-2","select-bottom-sheet_radio":"magritte-select-bottom-sheet_radio___qvFFV_8-2-2","selectBottomSheetRadio":"magritte-select-bottom-sheet_radio___qvFFV_8-2-2","loading":"magritte-loading___VpU1J_8-2-2","error-wrapper":"magritte-error-wrapper___P7jYg_8-2-2","errorWrapper":"magritte-error-wrapper___P7jYg_8-2-2"};
21
+ var styles = {"select-bottom-sheet":"magritte-select-bottom-sheet___1RZDJ_8-3-0","selectBottomSheet":"magritte-select-bottom-sheet___1RZDJ_8-3-0","select-bottom-sheet_checkbox":"magritte-select-bottom-sheet_checkbox___hwTgo_8-3-0","selectBottomSheetCheckbox":"magritte-select-bottom-sheet_checkbox___hwTgo_8-3-0","select-bottom-sheet_radio":"magritte-select-bottom-sheet_radio___qvFFV_8-3-0","selectBottomSheetRadio":"magritte-select-bottom-sheet_radio___qvFFV_8-3-0","loading":"magritte-loading___VpU1J_8-3-0","error-wrapper":"magritte-error-wrapper___P7jYg_8-3-0","errorWrapper":"magritte-error-wrapper___P7jYg_8-3-0"};
22
22
 
23
23
  const SelectOptionDefault = ({ label, input, type }) => {
24
24
  if (type === 'delimiter') {
@@ -33,11 +33,10 @@ const RenderButtonsContainerDefault = ({ clearButton, applyChangesButton }) => {
33
33
  const primaryActions = [clearButton, applyChangesButton].filter(Boolean);
34
34
  return jsx(ActionBar, { type: "mobile", primaryActions: primaryActions });
35
35
  };
36
- const RenderHeaderDefault = ({ onCloseBottomSheet, searchValue, setSearchValue, searchable, headerTitle, onSearchSubmit, }) => {
36
+ const RenderHeaderDefault = ({ onCloseBottomSheet, searchValue, setSearchValue, searchable, headerTitle, onSearchSubmit, optionsCount, }) => {
37
37
  return (jsx(NavigationBar, { title: headerTitle, right: jsx(Action, { icon: CrossOutlinedSize24, onClick: onCloseBottomSheet, "data-qa": "select-bottom-sheet-navigation-close" }), options: searchable && (jsx(SearchInput, { clearable: true, size: "medium", value: searchValue, onChange: setSearchValue, onKeyDown: (event) => {
38
38
  if (onSearchSubmit && keyboardMatch(event.nativeEvent, keyboardKeys.Enter)) {
39
- onSearchSubmit(event);
40
- onCloseBottomSheet();
39
+ onSearchSubmit(event, onCloseBottomSheet, optionsCount);
41
40
  }
42
41
  }, "data-qa": "bottom-sheet-navigation-input", autoComplete: "off" })) }));
43
42
  };
@@ -107,6 +106,7 @@ const SelectBottomSheet = ({ type, name, multiple, clearButton: _clearButton, ap
107
106
  searchable,
108
107
  headerTitle,
109
108
  onSearchSubmit,
109
+ optionsCount: optionList.length,
110
110
  }), onClose: onCloseWithAlertCheck, footer: footer, onAppear: onBottomSheetOpen, onAfterExit: onBottomSheetClose, children: [loading && !showErrorPlaceholder && (jsx("div", { className: styles.loading, children: jsx(Loader, { size: 24 }) })), showErrorPlaceholder && jsx("div", { className: styles.errorWrapper, children: error && error.placeholder }), !loading && !showErrorPlaceholder && (jsx("div", { className: classnames(styles.selectBottomSheet, styles[`select-bottom-sheet_${type}`]), "data-qa": "magritte-select-option-list-on-xs", children: optionList.map(({ disabled: _disabled, type: optionType, ...option }) => {
111
111
  const checked = getChecked(option.value, values, !!multiple);
112
112
  const disabled = !checked && (_disabled || isLimitExceeded);
@@ -1 +1 @@
1
- {"version":3,"file":"SelectBottomSheet.js","sources":["../src/SelectBottomSheet.tsx"],"sourcesContent":["import { useCallback, ReactElement, ReactNode, cloneElement, useState, ComponentProps } from 'react';\nimport classnames from 'classnames';\n\nimport { keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { Action } from '@hh.ru/magritte-ui-action';\nimport { ActionBar } from '@hh.ru/magritte-ui-action-bar';\nimport { BottomSheet, BottomSheetFooter } from '@hh.ru/magritte-ui-bottom-sheet';\nimport { Button } from '@hh.ru/magritte-ui-button';\nimport { ButtonElement } from '@hh.ru/magritte-ui-button-stack';\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { SearchInput } from '@hh.ru/magritte-ui-input';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { NavigationBar } from '@hh.ru/magritte-ui-navigation-bar';\nimport { SelectOption } from '@hh.ru/magritte-ui-select/SelectOption';\nimport { getChecked } from '@hh.ru/magritte-ui-select/getChecked';\nimport { isArraysEquals } from '@hh.ru/magritte-ui-select/isArraysEquals';\nimport {\n OnChangeAction,\n SelectButtons,\n SelectBottomSheetProps,\n RenderOptionTypeProps,\n RenderHeaderProps,\n} from '@hh.ru/magritte-ui-select/types';\n\nimport styles from './select-bottom-sheet.less';\n\nconst SelectOptionDefault = <DataType,>({ label, input, type }: RenderOptionTypeProps<DataType>): ReactElement => {\n if (type === 'delimiter') {\n return (\n <CellText maxLines={1} style=\"secondary\">\n {label}\n </CellText>\n );\n }\n if (type === 'label') {\n return <CellText maxLines={1}>{label}</CellText>;\n }\n return (\n <Cell Element=\"div\" align=\"center\" right={input}>\n <CellText maxLines={1}>{label}</CellText>\n </Cell>\n );\n};\n\nconst RenderButtonsContainerDefault = ({ clearButton, applyChangesButton }: SelectButtons): ReactNode => {\n const primaryActions = [clearButton, applyChangesButton].filter(Boolean);\n return <ActionBar type=\"mobile\" primaryActions={primaryActions as ButtonElement[]} />;\n};\n\nconst RenderHeaderDefault = ({\n onCloseBottomSheet,\n searchValue,\n setSearchValue,\n searchable,\n headerTitle,\n onSearchSubmit,\n}: RenderHeaderProps): ReactNode => {\n return (\n <NavigationBar\n title={headerTitle}\n right={\n <Action\n icon={CrossOutlinedSize24}\n onClick={onCloseBottomSheet}\n data-qa=\"select-bottom-sheet-navigation-close\"\n />\n }\n options={\n searchable && (\n <SearchInput\n clearable\n size=\"medium\"\n value={searchValue}\n onChange={setSearchValue}\n onKeyDown={(event) => {\n if (onSearchSubmit && keyboardMatch(event.nativeEvent, keyboardKeys.Enter)) {\n onSearchSubmit(event);\n onCloseBottomSheet();\n }\n }}\n data-qa=\"bottom-sheet-navigation-input\"\n autoComplete=\"off\"\n />\n )\n }\n />\n );\n};\n\nexport const SelectBottomSheet = <MultipleType extends boolean, DataType>({\n type,\n name,\n multiple,\n clearButton: _clearButton,\n applyChangesButton: _applyChangesButton,\n useInitialValuesOnClearAction,\n loading,\n error,\n renderHeader = RenderHeaderDefault,\n renderItem = SelectOptionDefault,\n renderButtonsContainer = RenderButtonsContainerDefault,\n renderAlertOnExitWithoutSaving,\n headerTitle,\n onClose,\n visible,\n optionList,\n optionsListRef,\n searchValue,\n setSearchValue,\n searchable,\n value: values,\n onChange,\n clearSelectedValues,\n setInitialValues,\n isLimitExceeded,\n initialValuesOnOpening,\n setSelectedValues,\n onBottomSheetOpen,\n onBottomSheetClose,\n onSearchSubmit,\n ...props\n}: SelectBottomSheetProps<MultipleType, DataType>): ReactElement => {\n const [alertVisible, setAlertVisible] = useState(false);\n const onCloseAlert = () => setAlertVisible(false);\n const showAlertOnExitWithoutSaving = Boolean(renderAlertOnExitWithoutSaving);\n const showErrorPlaceholder = Boolean(error);\n\n const onCloseWithAlertCheck = () => {\n if (showAlertOnExitWithoutSaving && multiple) {\n const haveUnsavingChanges = !isArraysEquals<string>(\n initialValuesOnOpening.current as string[],\n values as string[]\n );\n if (haveUnsavingChanges) {\n setAlertVisible(true);\n } else {\n onClose();\n }\n } else {\n onClose();\n }\n };\n\n const clearButton =\n _clearButton &&\n cloneElement(_clearButton, {\n key: 'clearButton',\n size: 'medium',\n 'data-qa': 'magritte-select-clear-action-on-xs',\n onClick: () => {\n if (useInitialValuesOnClearAction) {\n setInitialValues();\n } else {\n clearSelectedValues();\n }\n onClose();\n },\n } as ComponentProps<typeof Button>);\n\n const needAddChangesButton = multiple && _applyChangesButton;\n const applyChangesButton =\n (needAddChangesButton &&\n cloneElement(_applyChangesButton, {\n key: 'applyChangesButton',\n size: 'medium',\n 'data-qa': 'magritte-select-apply-on-xs',\n onClick: () => {\n setSelectedValues();\n onClose();\n },\n } as ComponentProps<typeof Button>)) ||\n undefined;\n\n const handleChange: OnChangeAction = useCallback(\n (...args) => {\n if (!multiple) {\n onClose();\n }\n onChange(...args);\n },\n [multiple, onChange, onClose]\n );\n\n const haveClearOrApplyChangesButtons = clearButton || applyChangesButton;\n const footer = !showErrorPlaceholder ? (\n !loading &&\n haveClearOrApplyChangesButtons &&\n renderButtonsContainer({\n clearButton,\n applyChangesButton,\n })\n ) : (\n <BottomSheetFooter>{error && error.resetButton}</BottomSheetFooter>\n );\n\n return (\n <>\n <BottomSheet\n {...props}\n ref={optionsListRef}\n allowScrollWhileFocused\n keyboardOverlaysContent={false}\n visible={visible}\n showDivider={false}\n withContentPaddings={showErrorPlaceholder}\n header={renderHeader({\n onCloseBottomSheet: onCloseWithAlertCheck,\n searchValue,\n setSearchValue,\n searchable,\n headerTitle,\n onSearchSubmit,\n })}\n onClose={onCloseWithAlertCheck}\n footer={footer}\n onAppear={onBottomSheetOpen}\n onAfterExit={onBottomSheetClose}\n >\n {loading && !showErrorPlaceholder && (\n <div className={styles.loading}>\n <Loader size={24} />\n </div>\n )}\n {showErrorPlaceholder && <div className={styles.errorWrapper}>{error && error.placeholder}</div>}\n {!loading && !showErrorPlaceholder && (\n <div\n className={classnames(styles.selectBottomSheet, styles[`select-bottom-sheet_${type}`])}\n data-qa=\"magritte-select-option-list-on-xs\"\n >\n {optionList.map(({ disabled: _disabled, type: optionType, ...option }) => {\n const checked = getChecked(option.value, values, !!multiple);\n const disabled = !checked && (_disabled || isLimitExceeded);\n return (\n <SelectOption\n key={option.value}\n name={name}\n checked={checked}\n onChange={handleChange}\n render={renderItem}\n disabled={disabled}\n type={optionType || type}\n plain={type === 'label'}\n multiple={multiple}\n isXS\n {...option}\n />\n );\n })}\n </div>\n )}\n </BottomSheet>\n {renderAlertOnExitWithoutSaving?.({\n alertVisible,\n onCloseAlert,\n onCloseBottomSheetAndAlert: () => {\n onCloseAlert();\n onClose();\n },\n })}\n </>\n );\n};\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
1
+ {"version":3,"file":"SelectBottomSheet.js","sources":["../src/SelectBottomSheet.tsx"],"sourcesContent":["import { useCallback, ReactElement, ReactNode, cloneElement, useState, ComponentProps } from 'react';\nimport classnames from 'classnames';\n\nimport { keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { Action } from '@hh.ru/magritte-ui-action';\nimport { ActionBar } from '@hh.ru/magritte-ui-action-bar';\nimport { BottomSheet, BottomSheetFooter } from '@hh.ru/magritte-ui-bottom-sheet';\nimport { Button } from '@hh.ru/magritte-ui-button';\nimport { ButtonElement } from '@hh.ru/magritte-ui-button-stack';\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { SearchInput } from '@hh.ru/magritte-ui-input';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { NavigationBar } from '@hh.ru/magritte-ui-navigation-bar';\nimport { SelectOption } from '@hh.ru/magritte-ui-select/SelectOption';\nimport { getChecked } from '@hh.ru/magritte-ui-select/getChecked';\nimport { isArraysEquals } from '@hh.ru/magritte-ui-select/isArraysEquals';\nimport {\n OnChangeAction,\n SelectButtons,\n SelectBottomSheetProps,\n RenderOptionTypeProps,\n RenderHeaderProps,\n} from '@hh.ru/magritte-ui-select/types';\n\nimport styles from './select-bottom-sheet.less';\n\nconst SelectOptionDefault = <DataType,>({ label, input, type }: RenderOptionTypeProps<DataType>): ReactElement => {\n if (type === 'delimiter') {\n return (\n <CellText maxLines={1} style=\"secondary\">\n {label}\n </CellText>\n );\n }\n if (type === 'label') {\n return <CellText maxLines={1}>{label}</CellText>;\n }\n return (\n <Cell Element=\"div\" align=\"center\" right={input}>\n <CellText maxLines={1}>{label}</CellText>\n </Cell>\n );\n};\n\nconst RenderButtonsContainerDefault = ({ clearButton, applyChangesButton }: SelectButtons): ReactNode => {\n const primaryActions = [clearButton, applyChangesButton].filter(Boolean);\n return <ActionBar type=\"mobile\" primaryActions={primaryActions as ButtonElement[]} />;\n};\n\nconst RenderHeaderDefault = ({\n onCloseBottomSheet,\n searchValue,\n setSearchValue,\n searchable,\n headerTitle,\n onSearchSubmit,\n optionsCount,\n}: RenderHeaderProps): ReactNode => {\n return (\n <NavigationBar\n title={headerTitle}\n right={\n <Action\n icon={CrossOutlinedSize24}\n onClick={onCloseBottomSheet}\n data-qa=\"select-bottom-sheet-navigation-close\"\n />\n }\n options={\n searchable && (\n <SearchInput\n clearable\n size=\"medium\"\n value={searchValue}\n onChange={setSearchValue}\n onKeyDown={(event) => {\n if (onSearchSubmit && keyboardMatch(event.nativeEvent, keyboardKeys.Enter)) {\n onSearchSubmit(event, onCloseBottomSheet, optionsCount);\n }\n }}\n data-qa=\"bottom-sheet-navigation-input\"\n autoComplete=\"off\"\n />\n )\n }\n />\n );\n};\n\nexport const SelectBottomSheet = <MultipleType extends boolean, DataType>({\n type,\n name,\n multiple,\n clearButton: _clearButton,\n applyChangesButton: _applyChangesButton,\n useInitialValuesOnClearAction,\n loading,\n error,\n renderHeader = RenderHeaderDefault,\n renderItem = SelectOptionDefault,\n renderButtonsContainer = RenderButtonsContainerDefault,\n renderAlertOnExitWithoutSaving,\n headerTitle,\n onClose,\n visible,\n optionList,\n optionsListRef,\n searchValue,\n setSearchValue,\n searchable,\n value: values,\n onChange,\n clearSelectedValues,\n setInitialValues,\n isLimitExceeded,\n initialValuesOnOpening,\n setSelectedValues,\n onBottomSheetOpen,\n onBottomSheetClose,\n onSearchSubmit,\n ...props\n}: SelectBottomSheetProps<MultipleType, DataType>): ReactElement => {\n const [alertVisible, setAlertVisible] = useState(false);\n const onCloseAlert = () => setAlertVisible(false);\n const showAlertOnExitWithoutSaving = Boolean(renderAlertOnExitWithoutSaving);\n const showErrorPlaceholder = Boolean(error);\n\n const onCloseWithAlertCheck = () => {\n if (showAlertOnExitWithoutSaving && multiple) {\n const haveUnsavingChanges = !isArraysEquals<string>(\n initialValuesOnOpening.current as string[],\n values as string[]\n );\n if (haveUnsavingChanges) {\n setAlertVisible(true);\n } else {\n onClose();\n }\n } else {\n onClose();\n }\n };\n\n const clearButton =\n _clearButton &&\n cloneElement(_clearButton, {\n key: 'clearButton',\n size: 'medium',\n 'data-qa': 'magritte-select-clear-action-on-xs',\n onClick: () => {\n if (useInitialValuesOnClearAction) {\n setInitialValues();\n } else {\n clearSelectedValues();\n }\n onClose();\n },\n } as ComponentProps<typeof Button>);\n\n const needAddChangesButton = multiple && _applyChangesButton;\n const applyChangesButton =\n (needAddChangesButton &&\n cloneElement(_applyChangesButton, {\n key: 'applyChangesButton',\n size: 'medium',\n 'data-qa': 'magritte-select-apply-on-xs',\n onClick: () => {\n setSelectedValues();\n onClose();\n },\n } as ComponentProps<typeof Button>)) ||\n undefined;\n\n const handleChange: OnChangeAction = useCallback(\n (...args) => {\n if (!multiple) {\n onClose();\n }\n onChange(...args);\n },\n [multiple, onChange, onClose]\n );\n\n const haveClearOrApplyChangesButtons = clearButton || applyChangesButton;\n const footer = !showErrorPlaceholder ? (\n !loading &&\n haveClearOrApplyChangesButtons &&\n renderButtonsContainer({\n clearButton,\n applyChangesButton,\n })\n ) : (\n <BottomSheetFooter>{error && error.resetButton}</BottomSheetFooter>\n );\n\n return (\n <>\n <BottomSheet\n {...props}\n ref={optionsListRef}\n allowScrollWhileFocused\n keyboardOverlaysContent={false}\n visible={visible}\n showDivider={false}\n withContentPaddings={showErrorPlaceholder}\n header={renderHeader({\n onCloseBottomSheet: onCloseWithAlertCheck,\n searchValue,\n setSearchValue,\n searchable,\n headerTitle,\n onSearchSubmit,\n optionsCount: optionList.length,\n })}\n onClose={onCloseWithAlertCheck}\n footer={footer}\n onAppear={onBottomSheetOpen}\n onAfterExit={onBottomSheetClose}\n >\n {loading && !showErrorPlaceholder && (\n <div className={styles.loading}>\n <Loader size={24} />\n </div>\n )}\n {showErrorPlaceholder && <div className={styles.errorWrapper}>{error && error.placeholder}</div>}\n {!loading && !showErrorPlaceholder && (\n <div\n className={classnames(styles.selectBottomSheet, styles[`select-bottom-sheet_${type}`])}\n data-qa=\"magritte-select-option-list-on-xs\"\n >\n {optionList.map(({ disabled: _disabled, type: optionType, ...option }) => {\n const checked = getChecked(option.value, values, !!multiple);\n const disabled = !checked && (_disabled || isLimitExceeded);\n return (\n <SelectOption\n key={option.value}\n name={name}\n checked={checked}\n onChange={handleChange}\n render={renderItem}\n disabled={disabled}\n type={optionType || type}\n plain={type === 'label'}\n multiple={multiple}\n isXS\n {...option}\n />\n );\n })}\n </div>\n )}\n </BottomSheet>\n {renderAlertOnExitWithoutSaving?.({\n alertVisible,\n onCloseAlert,\n onCloseBottomSheetAndAlert: () => {\n onCloseAlert();\n onClose();\n },\n })}\n </>\n );\n};\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
package/SelectDrop.js CHANGED
@@ -13,7 +13,7 @@ import '@hh.ru/magritte-ui-checkbox-radio';
13
13
  import '@hh.ru/magritte-ui-icon/icon';
14
14
  import '@hh.ru/magritte-ui-typography';
15
15
 
16
- var styles = {"select-drop":"magritte-select-drop___jn4O-_8-2-2","selectDrop":"magritte-select-drop___jn4O-_8-2-2","select-drop-header":"magritte-select-drop-header___fMmio_8-2-2","selectDropHeader":"magritte-select-drop-header___fMmio_8-2-2","select-drop_plain":"magritte-select-drop_plain___VL8Fz_8-2-2","selectDropPlain":"magritte-select-drop_plain___VL8Fz_8-2-2","label-option-plain":"magritte-label-option-plain___BvBH8_8-2-2","labelOptionPlain":"magritte-label-option-plain___BvBH8_8-2-2","loading":"magritte-loading___AMiuq_8-2-2"};
16
+ var styles = {"select-drop":"magritte-select-drop___jn4O-_8-3-0","selectDrop":"magritte-select-drop___jn4O-_8-3-0","select-drop-header":"magritte-select-drop-header___fMmio_8-3-0","selectDropHeader":"magritte-select-drop-header___fMmio_8-3-0","select-drop_plain":"magritte-select-drop_plain___VL8Fz_8-3-0","selectDropPlain":"magritte-select-drop_plain___VL8Fz_8-3-0","label-option-plain":"magritte-label-option-plain___BvBH8_8-3-0","labelOptionPlain":"magritte-label-option-plain___BvBH8_8-3-0","loading":"magritte-loading___AMiuq_8-3-0"};
17
17
 
18
18
  const SelectOptionDefault = ({ label, input, type, plain, }) => {
19
19
  if (type === 'delimiter') {
package/SelectOption.js CHANGED
@@ -9,7 +9,7 @@ import { Radio, Checkbox } from '@hh.ru/magritte-ui-checkbox-radio';
9
9
  import { CheckOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
10
10
  import { Text } from '@hh.ru/magritte-ui-typography';
11
11
 
12
- var styles = {"select-option-label":"magritte-select-option-label___bYo2l_8-2-2","selectOptionLabel":"magritte-select-option-label___bYo2l_8-2-2","select-option-label_desktop":"magritte-select-option-label_desktop___bceen_8-2-2","selectOptionLabelDesktop":"magritte-select-option-label_desktop___bceen_8-2-2","select-delimiter":"magritte-select-delimiter___WyeR6_8-2-2","selectDelimiter":"magritte-select-delimiter___WyeR6_8-2-2"};
12
+ var styles = {"select-option-label":"magritte-select-option-label___bYo2l_8-3-0","selectOptionLabel":"magritte-select-option-label___bYo2l_8-3-0","select-option-label_desktop":"magritte-select-option-label_desktop___bceen_8-3-0","selectOptionLabelDesktop":"magritte-select-option-label_desktop___bceen_8-3-0","select-delimiter":"magritte-select-delimiter___WyeR6_8-3-0","selectDelimiter":"magritte-select-delimiter___WyeR6_8-3-0"};
13
13
 
14
14
  const CheckableComponent = ({ type, value, checked, name, onChange }) => {
15
15
  if (type === 'label') {
package/index.css CHANGED
@@ -1,11 +1,11 @@
1
- .magritte-select-option-label___bYo2l_8-2-2{
1
+ .magritte-select-option-label___bYo2l_8-3-0{
2
2
  display:flex;
3
3
  max-height:56px;
4
4
  }
5
- .magritte-select-option-label_desktop___bceen_8-2-2{
5
+ .magritte-select-option-label_desktop___bceen_8-3-0{
6
6
  max-height:24px;
7
7
  }
8
- .magritte-select-delimiter___WyeR6_8-2-2{
8
+ .magritte-select-delimiter___WyeR6_8-3-0{
9
9
  padding-left:16px;
10
10
  padding-top:12px;
11
11
  }
@@ -13,44 +13,44 @@
13
13
  :root{
14
14
  --magritte-static-space-400-v19-1-2:16px;
15
15
  }
16
- .magritte-select-bottom-sheet___1RZDJ_8-2-2{
16
+ .magritte-select-bottom-sheet___1RZDJ_8-3-0{
17
17
  display:flex;
18
18
  flex-direction:column;
19
19
  padding:0 var(--magritte-static-space-400-v19-1-2);
20
20
  padding-bottom:16px;
21
21
  }
22
- .magritte-select-bottom-sheet_checkbox___hwTgo_8-2-2,
23
- .magritte-select-bottom-sheet_radio___qvFFV_8-2-2{
22
+ .magritte-select-bottom-sheet_checkbox___hwTgo_8-3-0,
23
+ .magritte-select-bottom-sheet_radio___qvFFV_8-3-0{
24
24
  gap:12px;
25
25
  }
26
- .magritte-loading___VpU1J_8-2-2{
26
+ .magritte-loading___VpU1J_8-3-0{
27
27
  display:flex;
28
28
  align-items:center;
29
29
  height:100%;
30
30
  justify-content:center;
31
31
  }
32
- .magritte-error-wrapper___P7jYg_8-2-2{
32
+ .magritte-error-wrapper___P7jYg_8-3-0{
33
33
  height:100%;
34
34
  }
35
35
 
36
- .magritte-select-drop___jn4O-_8-2-2{
36
+ .magritte-select-drop___jn4O-_8-3-0{
37
37
  display:flex;
38
38
  flex-direction:column;
39
39
  gap:8px;
40
40
  }
41
- .magritte-select-drop-header___fMmio_8-2-2{
41
+ .magritte-select-drop-header___fMmio_8-3-0{
42
42
  display:flex;
43
43
  flex-direction:column;
44
44
  margin-bottom:8px;
45
45
  }
46
- .magritte-select-drop_plain___VL8Fz_8-2-2{
46
+ .magritte-select-drop_plain___VL8Fz_8-3-0{
47
47
  gap:16px;
48
48
  }
49
- .magritte-label-option-plain___BvBH8_8-2-2{
49
+ .magritte-label-option-plain___BvBH8_8-3-0{
50
50
  display:flex;
51
51
  justify-content:center;
52
52
  }
53
- .magritte-loading___AMiuq_8-2-2{
53
+ .magritte-loading___AMiuq_8-3-0{
54
54
  display:flex;
55
55
  align-items:center;
56
56
  height:150px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-select",
3
- "version": "8.2.2",
3
+ "version": "8.3.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -32,20 +32,20 @@
32
32
  "@hh.ru/magritte-common-use-multiple-refs": "1.1.4",
33
33
  "@hh.ru/magritte-ui-action": "4.4.12",
34
34
  "@hh.ru/magritte-ui-action-bar": "2.2.5",
35
- "@hh.ru/magritte-ui-bottom-sheet": "5.5.6",
35
+ "@hh.ru/magritte-ui-bottom-sheet": "5.5.7",
36
36
  "@hh.ru/magritte-ui-breakpoint": "4.0.4",
37
37
  "@hh.ru/magritte-ui-button": "5.2.4",
38
38
  "@hh.ru/magritte-ui-button-stack": "2.1.23",
39
39
  "@hh.ru/magritte-ui-cell": "4.0.19",
40
- "@hh.ru/magritte-ui-checkable-card": "3.0.45",
40
+ "@hh.ru/magritte-ui-checkable-card": "3.0.46",
41
41
  "@hh.ru/magritte-ui-checkbox-radio": "3.0.24",
42
42
  "@hh.ru/magritte-ui-drop": "7.2.3",
43
43
  "@hh.ru/magritte-ui-icon": "7.9.2",
44
44
  "@hh.ru/magritte-ui-input": "7.0.2",
45
45
  "@hh.ru/magritte-ui-loader": "1.3.7",
46
- "@hh.ru/magritte-ui-navigation-bar": "6.3.2",
46
+ "@hh.ru/magritte-ui-navigation-bar": "6.3.3",
47
47
  "@hh.ru/magritte-ui-trigger": "3.0.3",
48
48
  "@hh.ru/magritte-ui-typography": "3.0.18"
49
49
  },
50
- "gitHead": "1ac30fb3b6ed8df5e0683e4551925b6ab8bf08d9"
50
+ "gitHead": "5e107905ce940656f632cf6982bedb6a7fcaf0f3"
51
51
  }
package/types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ComponentProps, ReactElement, ReactNode, Dispatch, SetStateAction, RefObject, RefCallback, KeyboardEventHandler } from 'react';
1
+ import { ComponentProps, ReactElement, ReactNode, Dispatch, SetStateAction, RefObject, RefCallback, KeyboardEvent } from 'react';
2
2
  import { BottomSheet, BottomSheetHeight } from '@hh.ru/magritte-ui-bottom-sheet';
3
3
  import { ButtonElement } from '@hh.ru/magritte-ui-button-stack';
4
4
  import { Drop } from '@hh.ru/magritte-ui-drop';
@@ -25,7 +25,7 @@ export interface SelectOption<DataType = unknown> {
25
25
  }
26
26
  export interface SelectOptionProps<DataType = unknown> extends Omit<SelectOption<DataType>, 'type'> {
27
27
  checked: boolean;
28
- name: string;
28
+ name?: string;
29
29
  type: SelectOptionType;
30
30
  render: RenderOptionType<DataType>;
31
31
  onChange: OnChangeAction;
@@ -41,7 +41,7 @@ export interface CheckableComponentProps {
41
41
  type: SelectOptionType;
42
42
  value: string;
43
43
  checked: boolean;
44
- name: string;
44
+ name?: string;
45
45
  onChange: OnChangeAction;
46
46
  }
47
47
  export interface SelectButtons {
@@ -64,13 +64,17 @@ export interface RenderAlertOnExitWithoutSaving {
64
64
  export interface SetSearchValue {
65
65
  setSearchValue: Dispatch<SetStateAction<string>>;
66
66
  }
67
+ export interface SearchSubmitType {
68
+ (event: KeyboardEvent<HTMLElement>, onCloseBottomSheet: VoidFunction, optionsCount: number): void;
69
+ }
67
70
  export interface RenderHeaderProps extends SetSearchValue {
68
71
  onCloseBottomSheet: VoidFunction;
69
72
  setSearchValue: Dispatch<SetStateAction<string>>;
70
73
  searchValue: string;
74
+ optionsCount: number;
71
75
  searchable?: boolean;
72
76
  headerTitle?: ReactNode;
73
- onSearchSubmit?: KeyboardEventHandler<HTMLElement>;
77
+ onSearchSubmit?: SearchSubmitType;
74
78
  }
75
79
  export interface RenderHeader {
76
80
  (props: RenderHeaderProps): ReactNode;
@@ -100,7 +104,7 @@ export interface SelectBaseProps<MultipleType extends boolean, ValueType = [Mult
100
104
  /** Флаг включения мультивыбора */
101
105
  multiple?: MultipleType;
102
106
  /** Name атрибут cелекта */
103
- name: string;
107
+ name?: string;
104
108
  /** Используем ли переданные values при очистке значений */
105
109
  useInitialValuesOnClearAction?: boolean;
106
110
  /** Флаг включения загрузки */
@@ -158,7 +162,7 @@ type ExternalSelectBottomSheetProps = {
158
162
  /** Заголовок Navigation Bar */
159
163
  headerTitle?: ReactNode;
160
164
  /** Обработчик события нажатия Enter в поиске */
161
- onSearchSubmit?: KeyboardEventHandler<HTMLElement>;
165
+ onSearchSubmit?: SearchSubmitType;
162
166
  };
163
167
  export interface RenderContentBeforeProps extends SetSearchValue {
164
168
  clearSelectedValuesAndClose: VoidFunction;