Pull request #2342: feat(TEAMMSBMOB-20914): show drawer for tablet fix

Merge in MCB_FE/mcb-platform-monorepo from feat/TEAMMSBMOB-20914-show-drawer-for-tablet to develop

* commit '7fc78df76f88faf8503897acfc3ff785e04c7771':
  feat(TEAMMSBMOB-20914): show drawer for tablet fix

packages/fractal-ui-composites/src/hoc/with-options/index.tsx

@@ -83,7 +83,7 @@ const withOptions = <T extends BaseWithOptionsProps>(WrappedComponent: React.For
         onBeforeClose,
         onBeforeOpen,
         notFoundButtonVariant = 'primary',
-        showBottomSheetForTablet = false,
+        showDrawerForBreakPoint = false,
         ...rest
       },
       ref
@@ -342,7 +342,7 @@ const withOptions = <T extends BaseWithOptionsProps>(WrappedComponent: React.For
           innerButtonIcon={innerButtonIcon}
           innerButtonPosition={innerButtonPosition}
           innerButtonText={innerButtonText}
-          isEmbedded={showBottomSheetForTablet ? S : XS}
+          isEmbedded={showDrawerForBreakPoint ? S : XS}
           isInnerButtonFixed={isInnerButtonFixed}
           notFoundButtonText={notFoundButtonText}
           notFoundButtonVariant={notFoundButtonVariant}
@@ -408,21 +408,7 @@ const withOptions = <T extends BaseWithOptionsProps>(WrappedComponent: React.For
           <WrappedComponent {...(wrappedProps as T)} ref={mergeRefs(ref, inputRef)} />
           <Responsive>
             <BreakPoint>
-              <PopupContainer
-                closeOnEscape
-                anchorEl={containerRef}
-                isOpen={isOpened}
-                onAfterClose={onAfterCloseDropdown}
-                onBeforeClose={onBeforeClose}
-                onBeforeOpen={onBeforeOpen}
-                onClose={handleClose}
-              >
-                {dropdown}
-              </PopupContainer>
-            </BreakPoint>
-            <BreakPoint at={showBottomSheetForTablet ? 'S' : "XS"}>
-            {showBottomSheetForTablet ?
-            (
+              {showDrawerForBreakPoint ? (
                 <Drawer
                   alwaysMaxHeight={alwaysMaxHeight}
                   // bottomSheetRef={bottomSheetRef}
@@ -438,22 +424,36 @@ const withOptions = <T extends BaseWithOptionsProps>(WrappedComponent: React.For
                 >
                   {dropdown}
                 </Drawer>
-              ) :
-                <BottomSheet
-                  alwaysMaxHeight={alwaysMaxHeight}
-                  bottomSheetRef={bottomSheetRef}
-                  disableFooterPadding={isShowButtonPositionBottom}
-                  footer={footer}
-                  header={header || rest.label}
+              ) : (
+                <PopupContainer
+                  closeOnEscape
+                  anchorEl={containerRef}
                   isOpen={isOpened}
-                  unscrollableContent={unscrollableContent}
                   onAfterClose={onAfterCloseDropdown}
                   onBeforeClose={onBeforeClose}
                   onBeforeOpen={onBeforeOpen}
                   onClose={handleClose}
+                >
+                  {dropdown}
+                </PopupContainer>
+              )}
+            </BreakPoint>
+            <BreakPoint at="XS">
+              <BottomSheet
+                alwaysMaxHeight={alwaysMaxHeight}
+                bottomSheetRef={bottomSheetRef}
+                disableFooterPadding={isShowButtonPositionBottom}
+                footer={footer}
+                header={header || rest.label}
+                isOpen={isOpened}
+                unscrollableContent={unscrollableContent}
+                onAfterClose={onAfterCloseDropdown}
+                onBeforeClose={onBeforeClose}
+                onBeforeOpen={onBeforeOpen}
+                onClose={handleClose}
               >
                 {dropdown}
-              </BottomSheet>}
+              </BottomSheet>
             </BreakPoint>
           </Responsive>
         </WithOptionsContext.Provider>

packages/fractal-ui-composites/src/hoc/with-options/types.ts

@@ -161,10 +161,12 @@ export interface WithOptionsProps<T = Record<string, unknown>>
    */
   hasFocusOnBottomSheetSearch?: boolean;
   /**
-   * Свойство отвечающее, чтобы селект на формате экрана планшета вел себя так же, как на мобильном экране.
+   * Параметр отвечающий за то, какой вид выбора опций будет у селектора в дефолтном BreakPoint.
+   * Необходим, т.к. сетка брекпоинтов фрактала отличается от наших размеров.
+   *
    * @default false
    */
-  showBottomSheetForTablet?: boolean;
+  showDrawerForBreakPoint?: boolean;
 }
 
 /** Контекст хока withOptions. */

packages/shared/ui/form/Select/index.ts

@@ -0,0 +1 @@
+export { Select } from './ui';

packages/shared/ui/form/Select/ui/Select.tsx

@@ -0,0 +1,17 @@
+import { Select as FractalSelect } from '@msb/fractal-ui-composites';
+import type { BaseSelectProps } from '@msb/fractal-ui-composites';
+import { MEDIA, useMediaQuery } from '@msb/shared';
+
+/**
+ * Обёртка над компонентом Select фрактала, необходимая для кастомизации функциональности под наши решения.
+ *
+ * ShowDrawerForBreakPoint нужен для отображения Drawer в размере Tablet.
+ * Отображаем разные FractalSelect, т.к. Брекпоинты фрактала отличаются от наших.
+ */
+const Select = (props: BaseSelectProps) => {
+  const isTablet = useMediaQuery(MEDIA.tablet);
+
+  return isTablet ? <FractalSelect showDrawerForBreakPoint {...(props as any)} /> : <FractalSelect {...(props as any)} />;
+};
+
+export { Select };

packages/shared/ui/form/Select/ui/index.ts

@@ -0,0 +1 @@
+export { Select } from './Select';

packages/shared/ui/form/index.ts

@@ -2,4 +2,5 @@ export { MultiSelect } from './MultiSelect';
 export { MultiSelectButton } from './MultiSelectButton';
 export { SelectButton } from './SelectButton';
 export { SingleSelectButton } from './SingleSelectButton';
+export { Select } from './Select';
 export * from './DateFieldWithCalendar';

services/msb-partner-check/src/features/FreeCheck/ui/Organizations/ui/Organizations.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from 'react';
 import { createField } from '@fractal-ui/form';
-import { Select, type OptionProps } from '@msb/fractal-ui-composites';
-import { useAppContext } from '@msb/shared';
+import type { OptionProps } from '@msb/fractal-ui-composites';
+import { useAppContext, Select } from '@msb/shared';
 import { useForm } from 'react-final-form';
 import { LOCALIZATION } from '../constants';
 import { getReportIsFreeCheckNotFinished } from '@/entities/report';
@@ -71,15 +71,7 @@ const Organizations = ({ onChange, additionalName, ...props }: OrganizationsProp
   }, [isLoading]);
 
   return options.length > 1 ? (
-    <SelectField
-      readOnly
-      showBottomSheetForTablet
-      header={LOCALIZATION.ORGANIZATION}
-      options={options}
-      type={selectType}
-      onChange={changing}
-      {...props}
-    />
+    <SelectField readOnly header={LOCALIZATION.ORGANIZATION} options={options} type={selectType} onChange={changing} {...props} />
   ) : null;
 };
 

services/msb-partner-check/src/widgets/ActivateService/ui/OrganizationsSelect/OrganizationsSelect.tsx

@@ -1,5 +1,6 @@
-import { Fields } from '@fractal-ui/form';
+import { createField } from '@fractal-ui/form';
 import { SearchIcon } from '@fractal-ui/library';
+import { Select } from '@msb/shared';
 import type { chooseSelectType } from '../../lib';
 import { FIELDS } from '../../lib';
 import { LOCALIZATION } from './lib';
@@ -16,8 +17,10 @@ interface OrganizationsSelectProps {
   selectType: ReturnType<typeof chooseSelectType>;
 }
 
+const SelectField = createField(Select);
+
 const OrganizationsSelect = ({ orgOptions, initialValue, selectType }: OrganizationsSelectProps) => (
-  <Fields.Select
+  <SelectField
     initialValue={initialValue}
     label={LOCALIZATION.ORGANIZATION_TITLE}
     labelPosition="top"