forstok-ui-lib 5.8.8 → 5.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "5.8.8",
+  "version": "5.9.0",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",

package/src/components/dropdown/index.tsx

@@ -14,7 +14,8 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
       const portalContainerRef = document.querySelector(`#${portalId} ._refDropdownPortal`) as HTMLElement;
       if (portalContainerRef) {
         const wrapperRef = portalContainerRef.querySelector('._refDropdownWrapper') as HTMLElement;
-        portalContainerRef.style.left = offsetPos.left + offsetPos.width - wrapperRef.getBoundingClientRect().width + 'px';
+        const value = offsetPos.left + offsetPos.width - wrapperRef.getBoundingClientRect().width;
+        portalContainerRef.style.left = (value > 0 ? value : offsetPos.left) + 'px';
         portalContainerRef.style.top = offsetPos.top + parseInt($top || '0') - 32 + 'px';
       }
     }
@@ -22,8 +23,12 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
 
   const evResetDropdown = () => {
     const containerRef = document.getElementsByClassName('_refContainer is-shown') as HTMLCollectionOf<HTMLElement>;
+    const bodyEl = document.getElementsByTagName('BODY')[0] as HTMLBodyElement;
     if (containerRef.length) {
+      bodyEl.classList.remove('is-immuned');
       for (let i = 0; i < containerRef.length; i++) {
+        const overlayEl = containerRef[i].querySelector(`._refDropdownOverlay`) as HTMLDivElement;
+        overlayEl.style.display = 'none';
         containerRef[i].classList.remove('is-shown');
       }
     } 
@@ -51,7 +56,7 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
         return;
       }
       const containerEl = buttonEl.closest('._refContainer') as HTMLElement;
-      const bodyEl = document.getElementsByTagName("BODY")[0] as HTMLBodyElement;
+      const bodyEl = document.getElementsByTagName('BODY')[0] as HTMLBodyElement;
       if (containerEl) {
         const overlayEl = containerEl.querySelector(`._refDropdownOverlay`) as HTMLDivElement;
         const isCurOpen = containerEl.classList.contains('is-shown');
@@ -60,7 +65,7 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
         if (!isCurOpen) {
           evResetDropdown();  
           overlayEl.style.display = 'block';
-          bodyEl.classList.add("is-immuned")
+          bodyEl.classList.add('is-immuned');
           containerEl.classList.add('is-shown');
           setTimeout(() => {
             if (portalId) {
@@ -72,7 +77,8 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
                   if (wrapperRef) {
                     setTimeout(() => {
                       wrapperRef.style.right = 'auto';
-                      portalContainerRef.style.left = offsetPos.left + offsetPos.width - wrapperRef.getBoundingClientRect().width + 'px';
+                      const value = offsetPos.left + offsetPos.width - wrapperRef.getBoundingClientRect().width;
+                      portalContainerRef.style.left = (value > 0 ? value : offsetPos.left) + 'px';
                       portalContainerRef.style.top = offsetPos.top + parseInt($top || '0') - 32 + 'px';
                       portalContainerRef.style.zIndex = '8';
                       refScrollContainerEl && refScrollContainerEl.addEventListener('scroll', evScrollDropdown, true);
@@ -89,7 +95,7 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
           onClick && onClick(e);
         } else {
           overlayEl.style.display = 'none';
-          bodyEl.classList.remove("is-immuned");
+          bodyEl.classList.remove('is-immuned');
           containerEl.classList.remove('is-shown');
           setTimeout(() => {
             if (portalId) {

package/src/components/index.ts

@@ -7,11 +7,10 @@ export { default as ButtonComponent } from './button';
 export { default as LabelComponent } from './label';
 export { default as IconComponent } from './icon';
 export { default as LoadingComponent } from './loading';
-export { default as DropdownComponent } from './dropdown';
+export { default as DropDownComponent } from './dropdown';
 export { default as MessageComponent } from './message';
 export { default as MessageQuestionComponent } from './message/question'; 
 export { default as PopupComponent } from './popup';
-export { default as ReactPortalComponent } from './portal';
 export { default as ImageComponent } from './image';
 export { default as SelectComponent } from './select';
 export { default as MenuList } from './select/menulist';