@antscorp/antsomi-ui 1.3.5-beta.486 → 1.3.5-beta.488

package/es/components/atoms/Scrollbars/Scrollbars.js

@@ -12,16 +12,17 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { Scrollbars as CustomScrollbars, } from 'react-custom-scrollbars';
 import { cloneDeep } from 'lodash';
 // Libraries
-import React, { useRef } from 'react';
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 // Styled
 import { HorizontalTrack, ThumbBar, VerticalTrack } from './styled';
 const THUMB_SIZE = 4;
 const MARGIN = 3;
-export const Scrollbars = props => {
+export const Scrollbars = forwardRef((props, refProp) => {
     // Props
     const { autoHide = true, autoHeightMax = 0, className } = props, restProps = __rest(props, ["autoHide", "autoHeightMax", "className"]);
     // Refs
     const ref = useRef(null);
+    useImperativeHandle(refProp, () => ref.current, []);
     /**
      * Updates the size and position of the custom scrollbar thumbs based on the provided dimensions and scroll positions.
      *
@@ -57,7 +58,7 @@ export const Scrollbars = props => {
         ref.current.trackHorizontal.style.visibility =
             scrollWidth <= clientWidth ? 'hidden' : 'visible';
     };
-    return (React.createElement(CustomScrollbars, Object.assign({ className: `custom-scrollbars ${className || ''}`, ref: ref, autoHide: autoHide, autoHeightMax: autoHeightMax, renderThumbVertical: props => React.createElement(ThumbBar, Object.assign({ className: "thumb-vertical" }, props)), renderThumbHorizontal: props => React.createElement(ThumbBar, Object.assign({ className: "thumb-horizontal" }, props)), renderTrackVertical: (_a) => {
+    return (React.createElement(CustomScrollbars, Object.assign({ className: `custom-scrollbars ${className || ''}`, autoHide: autoHide, autoHeightMax: autoHeightMax, renderThumbVertical: props => React.createElement(ThumbBar, Object.assign({ className: "thumb-vertical" }, props)), renderThumbHorizontal: props => React.createElement(ThumbBar, Object.assign({ className: "thumb-horizontal" }, props)), renderTrackVertical: (_a) => {
             var { style } = _a, restOfProps = __rest(_a, ["style"]);
             return (React.createElement(VerticalTrack, Object.assign({ className: "scrollbar-track" }, restOfProps, { style: Object.assign(Object.assign({}, style), { display: 'block' }) })));
         }, renderTrackHorizontal: (_a) => {
@@ -77,5 +78,5 @@ export const Scrollbars = props => {
             // }
             // Return a div element with the adjusted styles and original props, applying a custom class for styling
             return React.createElement("div", Object.assign({ className: "scrollbar-view" }, props, { style: newStyle }));
-        }, onUpdate: onUpdate, hideTracksWhenNotNeeded: true }, restProps)));
-};
+        }, onUpdate: onUpdate, hideTracksWhenNotNeeded: true }, restProps, { ref: ref })));
+});

package/es/components/molecules/DrawerDetail/DrawerDetail.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 // Libraries
 import { ConfigProvider } from 'antd';
 import { isNil } from 'lodash';
-import React, { useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 // Components
 import { Flex, Icon, Tooltip } from '../../atoms';
 // Styled
@@ -24,9 +24,10 @@ import { ToggleDrawerSizeButton } from './components';
 import { useMediaQuery, useToggle } from '@antscorp/antsomi-ui/es/hooks';
 // Utils
 import { safeParseJson } from '@antscorp/antsomi-ui/es/utils';
+import { POST_MESSAGE_TYPES } from '@antscorp/antsomi-ui/es/constants';
 export const DrawerDetail = props => {
     // Props
-    const { width, fullScreen, children, menuProps, closeIconProps, maxWidth, minWidth, defaultSize = 'max', headerProps, name, destroyOnClose = true } = props, restProps = __rest(props, ["width", "fullScreen", "children", "menuProps", "closeIconProps", "maxWidth", "minWidth", "defaultSize", "headerProps", "name", "destroyOnClose"]);
+    const { width, fullScreen: fullScreenProp = false, children, menuProps, closeIconProps, maxWidth, minWidth, defaultSize = 'max', headerProps, name, destroyOnClose = true } = props, restProps = __rest(props, ["width", "fullScreen", "children", "menuProps", "closeIconProps", "maxWidth", "minWidth", "defaultSize", "headerProps", "name", "destroyOnClose"]);
     const { show: showMenu = true, showExpandButton = true, showClose = true, items, selectedKeys, footer, onClick = () => { }, } = menuProps || {};
     const _a = headerProps || {}, { children: headerChildren } = _a, restOfHeaderProps = __rest(_a, ["children"]);
     const { onClose = () => { } } = props;
@@ -35,7 +36,25 @@ export const DrawerDetail = props => {
     const matchesSmallScreen = useMediaQuery(`(max-width: ${BREAK_POINT})`);
     // State
     const [collapseDrawer, toggleCollapseDrawer] = useToggle(false);
+    const [fullScreen, toggleFullScreen] = useToggle(fullScreenProp);
+    // Handlers
+    const handleToggleDrawerDetailFullscreen = useCallback((event) => {
+        const { type, data } = event.data || {};
+        const { name: payloadName, value } = data || {};
+        if (type === POST_MESSAGE_TYPES.TOGGLE_DRAWER_DETAIL_FULLSCREEN && payloadName === name) {
+            toggleFullScreen(isNil(value) ? undefined : value);
+        }
+    }, [name, toggleFullScreen]);
     // Effects
+    useEffect(() => {
+        window.addEventListener('message', handleToggleDrawerDetailFullscreen);
+        return () => {
+            window.removeEventListener('message', handleToggleDrawerDetailFullscreen);
+        };
+    }, [handleToggleDrawerDetailFullscreen]);
+    useEffect(() => {
+        toggleFullScreen(fullScreenProp);
+    }, [fullScreenProp, toggleFullScreen]);
     useEffect(() => {
         if (matchesSmallScreen) {
             toggleCollapseDrawer(false);
@@ -87,7 +106,6 @@ export const DrawerDetail = props => {
             }
         }
     }, [collapseDrawer, fullScreen, matchesSmallScreen, maxWidth, minWidth, width]);
-    // Handlers
     const handleToggleDrawerSize = () => {
         const localStorageValues = safeParseJson(localStorage.getItem(DRAWER_DETAIL_LOCAL_STORAGE_KEY), {});
         toggleCollapseDrawer(!collapseDrawer);

package/es/components/organism/AccountProfile/components/AccountSetting/styles.scss

@@ -19,9 +19,6 @@
     padding: 0 !important;
 
     .antsomi-picker-cell-inner {
-      // display: flex !important;
-      // align-items: center;
-      // justify-content: center;
       width: 36px;
       height: 36px !important;
       line-height: 36px !important;
@@ -34,4 +31,4 @@
       }
     }
   }
-}
+}

package/es/constants/postMessage.d.ts

@@ -1,3 +1,4 @@
 export declare const POST_MESSAGE_TYPES: {
     REFETCH_DASHBOARD_LIST: string;
+    TOGGLE_DRAWER_DETAIL_FULLSCREEN: string;
 };

package/es/constants/postMessage.js

@@ -1,3 +1,4 @@
 export const POST_MESSAGE_TYPES = {
     REFETCH_DASHBOARD_LIST: 'REFETCH_DASHBOARD_LIST',
+    TOGGLE_DRAWER_DETAIL_FULLSCREEN: 'TOGGLE_DRAWER_DETAIL_FULLSCREEN',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.486",
+  "version": "1.3.5-beta.488",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",