Merge branch 'release/1.5.0-pre-alpha.5'

example/web/webpack.config.js

@@ -77,7 +77,14 @@ let config = {
             logging: "none",
             overlay: {
                 warnings: false,
-                errors: true
+                errors: true,
+                runtimeErrors: (error) => {
+                    if (error.message === "ResizeObserver loop completed with undelivered notifications." || error.message === "ResizeObserver loop limit exceeded") {
+                        return false;
+                    }
+
+                    return true;
+                }
             }
         }
     },

package.json

@@ -1,6 +1,6 @@
 {
     "name": "ncore-ui-kit",
-    "version": "1.5.0-pre-alpha.4",
+    "version": "1.5.0-pre-alpha.5",
     "description": "NİBGAT® | NCore - UI Kit for React-Native Mobile Apps.",
     "main": "./lib/module/index.js",
     "types": "./lib/typescript/src/index.d.ts",

src/components/embeddedMenu/components/menuButton/index.tsx

@@ -253,29 +253,34 @@ const EmbeddedMenuButton: FC<IEmbeddedMenuButton> = ({
                             overflow: "hidden"
                         }
                     ]}
-                    onLayout={buttonItem.isCollapsible ? (event) => {
-                        const height = event.nativeEvent.layout.height;
-
-                        if(height !== 0 && measure === null) setMeasure(height);
-                    } : undefined}
                 >
-                    {buttonItem.subButtons.map((subButtonItem, subButtonIndex) => {
-                        return <EmbeddedMenuButton
-                            key={`embedded-menu-sub-button-${id}-${subButtonIndex}`}
-                            updateMenuButtonCollabs={updateMenuButtonCollabs}
-                            isMenuCollabs={isMenuCollabs}
-                            buttonIndex={subButtonIndex}
-                            buttonItem={subButtonItem}
-                            closeAction={closeAction}
-                            navigation={navigation}
-                            openMenu={openMenu}
-                            depthMap={[
-                                ...depthMap,
-                                subButtonIndex
-                            ]}
-                            id={id}
-                        />;
-                    })}
+                    <View
+                        onLayout={buttonItem.isCollapsible ? (event) => {
+                            const height = event.nativeEvent.layout.height;
+
+                            if(height !== 0 && measure !== height) {
+                                setMeasure(height);
+                            }
+                        } : undefined}
+                    >
+                        {buttonItem.subButtons.map((subButtonItem, subButtonIndex) => {
+                            return <EmbeddedMenuButton
+                                key={`embedded-menu-sub-button-${id}-${subButtonIndex}`}
+                                updateMenuButtonCollabs={updateMenuButtonCollabs}
+                                isMenuCollabs={isMenuCollabs}
+                                buttonIndex={subButtonIndex}
+                                buttonItem={subButtonItem}
+                                closeAction={closeAction}
+                                navigation={navigation}
+                                openMenu={openMenu}
+                                depthMap={[
+                                    ...depthMap,
+                                    subButtonIndex
+                                ]}
+                                id={id}
+                            />;
+                        })}
+                    </View>
                 </Animated.View>
             :
                 null

src/components/menu/components/menuButton/index.tsx

@@ -223,11 +223,6 @@ const MenuButton: FC<IMenuButton> = ({
         {
             buttonItem.subButtons && buttonItem.subButtons.length ?
                 <Animated.View
-                    onLayout={buttonItem.isCollapsible ? (event) => {
-                        const height = event.nativeEvent.layout.height;
-
-                        if(height !== 0 && measure === null) setMeasure(height);
-                    } : undefined}
                     style={[
                         Platform.OS === "web" ? {
                             height: measure === null ? "auto" : animatedCollabs,
@@ -244,21 +239,31 @@ const MenuButton: FC<IMenuButton> = ({
                         }
                     ]}
                 >
-                    {buttonItem.subButtons.map((subButtonItem, subButtonIndex) => {
-                        return <MenuButton
-                            updateMenuButtonCollabs={updateMenuButtonCollabs}
-                            key={`menu-sub-button-${id}-${subButtonIndex}`}
-                            buttonIndex={subButtonIndex}
-                            buttonItem={subButtonItem}
-                            closeAction={closeAction}
-                            navigation={navigation}
-                            depthMap={[
-                                ...depthMap,
-                                subButtonIndex
-                            ]}
-                            id={id}
-                        />;
-                    })}
+                    <View
+                        onLayout={buttonItem.isCollapsible ? (event) => {
+                            const height = event.nativeEvent.layout.height;
+
+                            if(height !== 0 && measure !== height) {
+                                setMeasure(height);
+                            }
+                        } : undefined}
+                    >
+                        {buttonItem.subButtons.map((subButtonItem, subButtonIndex) => {
+                            return <MenuButton
+                                updateMenuButtonCollabs={updateMenuButtonCollabs}
+                                key={`menu-sub-button-${id}-${subButtonIndex}`}
+                                buttonIndex={subButtonIndex}
+                                buttonItem={subButtonItem}
+                                closeAction={closeAction}
+                                navigation={navigation}
+                                depthMap={[
+                                    ...depthMap,
+                                    subButtonIndex
+                                ]}
+                                id={id}
+                            />;
+                        })}
+                    </View>
                 </Animated.View>
             :
                 null

src/components/webScrollbar/index.tsx

@@ -35,47 +35,49 @@ const WebScrollbar = () => {
         }
 
         styleEl.innerHTML = `
-            #root *::-webkit-scrollbar,
-            body *::-webkit-scrollbar,
-            html *::-webkit-scrollbar {
-                height: ${shapeConfigs.scrollBarHeight}px !important;
-                width: ${shapeConfigs.scrollBarWidth}px !important;
-            }
+            @media (hover: hover) and (pointer: fine) {
+                #root *::-webkit-scrollbar,
+                body *::-webkit-scrollbar,
+                html *::-webkit-scrollbar {
+                    height: ${shapeConfigs.scrollBarHeight}px !important;
+                    width: ${shapeConfigs.scrollBarWidth}px !important;
+                }
 
-            #root *::-webkit-scrollbar-track,
-            body *::-webkit-scrollbar-track,
-            html *::-webkit-scrollbar-track {
-                border: ${borders.scrollBarTrack}px solid transparent !important;
-                border-radius: ${radiuses.scrollBarTrack}px !important;
-                background: ${colors.content.container.mid} !important;
-                background-clip: padding-box !important;
-            }
+                #root *::-webkit-scrollbar-track,
+                body *::-webkit-scrollbar-track,
+                html *::-webkit-scrollbar-track {
+                    border: ${borders.scrollBarTrack}px solid transparent !important;
+                    border-radius: ${radiuses.scrollBarTrack}px !important;
+                    background: ${colors.content.container.mid} !important;
+                    background-clip: padding-box !important;
+                }
 
-            #root *::-webkit-scrollbar-thumb,
-            body *::-webkit-scrollbar-thumb,
-            html *::-webkit-scrollbar-thumb {
-                border: ${borders.scrollBarThumb}px solid transparent !important;
-                background: ${colors.content.container.primary} !important;
-                border-radius: ${radiuses.scrollBarThumb}px !important;
-                background-clip: padding-box !important;
-            }
+                #root *::-webkit-scrollbar-thumb,
+                body *::-webkit-scrollbar-thumb,
+                html *::-webkit-scrollbar-thumb {
+                    border: ${borders.scrollBarThumb}px solid transparent !important;
+                    background: ${colors.content.container.primary} !important;
+                    border-radius: ${radiuses.scrollBarThumb}px !important;
+                    background-clip: padding-box !important;
+                }
 
-            #root *::-webkit-scrollbar-thumb:hover,
-            body *::-webkit-scrollbar-thumb:hover,
-            html *::-webkit-scrollbar-thumb:hover {
-                border: ${borders.scrollBarThumbHover}px solid transparent !important;
-                border-radius: ${radiuses.scrollBarThumbHover}px !important;
-                background: ${colors.content.container.primary} !important;
-                background-clip: padding-box !important;
-            }
+                #root *::-webkit-scrollbar-thumb:hover,
+                body *::-webkit-scrollbar-thumb:hover,
+                html *::-webkit-scrollbar-thumb:hover {
+                    border: ${borders.scrollBarThumbHover}px solid transparent !important;
+                    border-radius: ${radiuses.scrollBarThumbHover}px !important;
+                    background: ${colors.content.container.primary} !important;
+                    background-clip: padding-box !important;
+                }
 
-            #root *::-webkit-scrollbar-thumb:active,
-            body *::-webkit-scrollbar-thumb:active,
-            html *::-webkit-scrollbar-thumb:active {
-                border: ${borders.scrollBarThumbActive}px solid transparent !important;
-                background: ${colors.content.container.emphasized} !important;
-                border-radius: ${radiuses.scrollBarThumbActive}px !important;
-                background-clip: padding-box !important;
+                #root *::-webkit-scrollbar-thumb:active,
+                body *::-webkit-scrollbar-thumb:active,
+                html *::-webkit-scrollbar-thumb:active {
+                    border: ${borders.scrollBarThumbActive}px solid transparent !important;
+                    background: ${colors.content.container.emphasized} !important;
+                    border-radius: ${radiuses.scrollBarThumbActive}px !important;
+                    background-clip: padding-box !important;
+                }
             }
         `;