@true-engineering/true-react-common-ui-kit 4.0.0-alpha75 → 4.0.0-alpha76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "4.0.0-alpha75",
+  "version": "4.0.0-alpha76",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/ScrollIntoViewIfNeeded/ScrollIntoViewIfNeeded.ts

@@ -28,7 +28,8 @@ export class ScrollIntoViewIfNeeded extends PureComponent<IScrollIntoViewIfNeede
   componentDidMount(): void {
     const { active } = this.props;
     if (active) {
-      this.handleScrollIntoViewIfNeeded();
+      // requestAnimationFrame нужен для скролла элемента, который отрендерен в document.body через портал
+      requestAnimationFrame(this.handleScrollIntoViewIfNeeded);
     }
   }
 

package/src/components/Select/CustomSelect.stories.tsx

@@ -8,11 +8,9 @@ import { TextButton } from '../TextButton';
 import { type ISelectProps, Select } from './Select';
 
 interface ISelectCustomProps<Option> extends ISelectProps<Option> {
-  shouldUsePopper?: boolean;
   shouldRenderInBody?: boolean;
   shouldHideOnScroll?: boolean;
   canBeFlipped?: boolean;
-  scrollParent?: 'document' | 'auto';
 }
 
 const useSelectStyles = createUseStyles({
@@ -138,11 +136,9 @@ function CustomListFooter({ onReset, onClear }: ICustomListFooterProps) {
 
 const Story: FC<ISelectCustomProps<string>> = ({
   noMatchesLabel,
-  shouldUsePopper,
   shouldRenderInBody,
   shouldHideOnScroll,
   canBeFlipped,
-  scrollParent,
   ...args
 }) => {
   const classes = useSelectStyles();
@@ -206,11 +202,9 @@ const Story: FC<ISelectCustomProps<string>> = ({
         },
       }}
       dropdownOptions={{
-        shouldUsePopper,
         shouldRenderInBody,
         shouldHideOnScroll,
         canBeFlipped,
-        scrollParent,
       }}
     />
   );
@@ -227,20 +221,12 @@ const meta: Meta<typeof Story> = {
     isDisabled: false,
     isRequired: false,
     isClearable: false,
-    shouldUsePopper: false,
     shouldRenderInBody: false,
     shouldHideOnScroll: false,
     shouldScrollToList: true,
     canBeFlipped: false,
-    scrollParent: 'document',
     size: undefined,
   },
-  argTypes: {
-    scrollParent: {
-      options: ['document', 'auto'],
-      control: { type: 'select' },
-    },
-  },
 };
 
 export default meta;

package/src/components/Select/MultiSelect.stories.tsx

@@ -60,29 +60,29 @@ const icons = [undefined, ...Object.keys(iconsMap)];
 const getRandomInt = (min: number, max: number) =>
   Math.floor(Math.random() * (Math.floor(max) - Math.ceil(min))) + Math.ceil(min);
 
+const handleOpen = () => console.log('isOpen');
+const handleClose = () => console.log('isClose');
+const handleBlur = () => console.log('blur');
+
 interface ISelectCustomProps<T> extends IMultipleSelectProps<T> {
   valuesType: 'strings' | 'objects';
   shouldUseReactNodes?: boolean;
-  shouldUsePopper?: boolean;
   shouldRenderInBody?: boolean;
   shouldHideOnScroll?: boolean;
   shouldUseCustomIsDisabledFunction?: boolean;
   shouldRenderSearchInputInList?: boolean;
   canBeFlipped?: boolean;
-  scrollParent?: 'document' | 'auto';
 }
 
 function Story<T>({
   valuesType,
   optionsMode,
   shouldUseReactNodes,
-  shouldUsePopper,
   shouldRenderInBody,
   shouldHideOnScroll,
   shouldUseCustomIsDisabledFunction,
   shouldRenderSearchInputInList,
   canBeFlipped,
-  scrollParent,
   noMatchesLabel,
   ...args
 }: ISelectCustomProps<T>): ReactElement {
@@ -122,14 +122,6 @@ function Story<T>({
 
   const [dynamicOptions, setDynamicOptions] = useState<Array<string | ObjectValue>>([]);
 
-  const handleOpen = () => {
-    console.log('isOpen');
-  };
-
-  const handleBlur = () => {
-    console.log('blur');
-  };
-
   useEffect(() => {
     const api = async () => {
       setDynamicOptions(await getOptions());
@@ -169,13 +161,12 @@ function Story<T>({
       optionsMode={optionsMode}
       onType={async () => setDynamicOptions(await getOptions())}
       onOpen={handleOpen}
+      onClose={handleClose}
       onBlur={handleBlur}
       dropdownOptions={{
-        shouldUsePopper,
         shouldRenderInBody,
         shouldHideOnScroll,
         canBeFlipped,
-        scrollParent,
       }}
     />
   );
@@ -201,14 +192,12 @@ const meta: Meta<typeof Story> = {
     shouldUseReactNodes: false,
     valuesType: 'strings',
     optionsMode: 'normal',
-    shouldUsePopper: false,
     shouldRenderInBody: false,
     shouldHideOnScroll: false,
     shouldUseCustomIsDisabledFunction: false,
     shouldRenderSearchInputInList: false,
     shouldScrollToList: true,
     canBeFlipped: false,
-    scrollParent: 'document',
     size: undefined,
   },
   argTypes: {

package/src/components/Select/Select.stories.tsx

@@ -60,29 +60,29 @@ const icons = [undefined, ...Object.keys(iconsMap)];
 const getRandomInt = (min: number, max: number) =>
   Math.floor(Math.random() * (Math.floor(max) - Math.ceil(min))) + Math.ceil(min);
 
+const handleOpen = () => console.log('isOpen');
+const handleClose = () => console.log('isClose');
+const handleBlur = () => console.log('blur');
+
 interface ISelectCustomProps<T> extends ISelectProps<T> {
   valuesType: 'strings' | 'objects';
   shouldUseReactNodes?: boolean;
-  shouldUsePopper?: boolean;
   shouldRenderInBody?: boolean;
   shouldHideOnScroll?: boolean;
   shouldUseCustomIsDisabledFunction?: boolean;
   shouldRenderSearchInputInList?: boolean;
   canBeFlipped?: boolean;
-  scrollParent?: 'document' | 'auto';
 }
 
 function Story<T>({
   valuesType,
   optionsMode,
   shouldUseReactNodes,
-  shouldUsePopper,
   shouldRenderInBody,
   shouldHideOnScroll,
   shouldUseCustomIsDisabledFunction,
   shouldRenderSearchInputInList,
   canBeFlipped,
-  scrollParent,
   noMatchesLabel,
   ...args
 }: ISelectCustomProps<T>): ReactElement {
@@ -120,14 +120,6 @@ function Story<T>({
 
   const [dynamicOptions, setDynamicOptions] = useState<Array<string | ObjectValue>>([]);
 
-  const handleOpen = () => {
-    console.log('isOpen');
-  };
-
-  const handleBlur = () => {
-    console.log('blur');
-  };
-
   useEffect(() => {
     const api = async () => {
       setDynamicOptions(await getOptions());
@@ -166,13 +158,12 @@ function Story<T>({
       optionsMode={optionsMode}
       onType={async () => setDynamicOptions(await getOptions())}
       onOpen={handleOpen}
+      onClose={handleClose}
       onBlur={handleBlur}
       dropdownOptions={{
-        shouldUsePopper,
         shouldRenderInBody,
         shouldHideOnScroll,
         canBeFlipped,
-        scrollParent,
       }}
     />
   );
@@ -199,14 +190,12 @@ const meta: Meta<typeof Story> = {
     shouldUseReactNodes: false,
     valuesType: 'strings',
     optionsMode: 'normal',
-    shouldUsePopper: false,
     shouldRenderInBody: false,
     shouldHideOnScroll: false,
     shouldUseCustomIsDisabledFunction: false,
     shouldRenderSearchInputInList: false,
     shouldScrollToList: true,
     canBeFlipped: false,
-    scrollParent: 'document',
     size: undefined,
   },
   argTypes: {

package/src/components/Select/Select.styles.ts

@@ -3,6 +3,7 @@ import { animations, createThemedStyles, dimensions, type ITweakStyles } from '.
 import { type IInputStyles } from '../Input';
 import { type ISearchInputStyles } from '../SearchInput';
 import { IWithMessagesStyles } from '../WithMessages';
+import { IWithPopupStyles } from '../WithPopup';
 import { type ISelectListStyles } from './components';
 
 const { Z_INDEX } = dimensions;
@@ -19,25 +20,6 @@ export const useStyles = createThemedStyles('Select', {
     cursor: 'text',
   },
 
-  listWrapper: {
-    left: -1,
-    zIndex: 3,
-    width: 'fit-content',
-    minWidth: 'calc(100% + 1px)',
-  },
-
-  withoutPopper: {
-    position: 'absolute',
-    top: '100%',
-    paddingTop: 4,
-  },
-
-  listWrapperInBody: {
-    minWidth: 'auto',
-    width: 'auto',
-    maxWidth: 'min-content',
-  },
-
   arrow: {
     width: 'var(--icon-inner-size, 20px)',
     height: 'var(--icon-inner-size, 20px)',
@@ -93,6 +75,12 @@ export const getInputStyles = ({
   return baseInputStyles;
 };
 
+export const withPopupStyles: IWithPopupStyles = {
+  popup: {
+    maxWidth: 'min-content',
+  },
+};
+
 export type ISelectStyles = ITweakStyles<
   typeof useStyles,
   {
@@ -100,5 +88,6 @@ export type ISelectStyles = ITweakStyles<
     tweakInput: IInputStyles;
     tweakSelectList: ISelectListStyles;
     tweakSearchInput: ISearchInputStyles;
+    tweakWithPopup?: IWithPopupStyles;
   }
 >;