forstok-ui-lib 3.0.0 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",
@@ -34,11 +34,14 @@
     "@rollup/plugin-typescript": "^12.1.2",
     "@rollup/plugin-url": "^8.0.2",
     "@svgr/rollup": "^8.1.0",
+    "@types/html-to-text": "^9.0.4",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",
+    "html-to-text": "^9.0.5",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.1.1",
+    "react-tooltip": "^4.5.1",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
@@ -46,6 +49,7 @@
     "styled-components": "^6.1.15",
     "tslib": "^2.8.1",
     "typescript": "^5.7.2",
-    "typescript-plugin-styled-components": "^3.0.0"
+    "typescript-plugin-styled-components": "^3.0.0",
+    "use-state-with-callback": "^3.0.2"
   }
 }

package/src/assets/stylesheets/shares.styles.ts

@@ -154,7 +154,7 @@ export const InfoGroup = styled.div`
   width: 100%;
   justify-content: left;
   margin-bottom: 14px;
-  span {
+  span:first-child {
     position: relative;
     &:after {
       position: absolute;

package/src/components/dropdown/dropdown.styles.ts

@@ -0,0 +1,325 @@
+import styled from 'styled-components';
+import { dropBase } from '../../assets/stylesheets/bases.styles';
+import type { TDropdown } from './dropdown.typed';
+
+type TDropdownChild = Pick<TDropdown, '$internalWidth' | '$openPosition' | '$placement' | '$bottom' | '$top'>
+type TDropdownParent = Pick<TDropdown, '$openPosition' | '$placement' | '$bottom' | '$top' | '$alias' | '$externalWidth' | '$externalMinWidth' | '$area'>
+
+const getDropDownContainerModifiedStyled = ({ $top, $bottom, $placement, $alias, $openPosition, $externalWidth, $externalMinWidth, $area }: TDropdownParent) => {
+  const axTop = $top ? (parseInt($top) + 5)+'px' : '40px'
+  let style = `
+    @keyframes droptodown {
+      90% {
+        top: ${axTop}; 
+      }
+      100% { 
+        top: ${$top || '35px'}; 
+      }
+    }
+    @keyframes droptoup {
+      50% { 
+        bottom: -100px; 
+      }
+      50% { 
+        bottom: -50px; 
+      }
+      100% { 
+        bottom: 0px; 
+      }
+    }
+    @keyframes dropgodown {
+      90% { 
+        bottom: ${axTop}; 
+      }
+      100% {
+        bottom: ${$bottom || '35px'}; 
+      }
+    }
+    @keyframse dropgoup {
+      50% { 
+        top: -100px; 
+      }
+      50% { 
+        top: -50px; 
+      }
+      100% { 
+        top: 0px; 
+      }
+    }
+    & ${DropDownWrapper} { 
+      display: none;
+    }
+    &.is-shown {
+      & ${DropDownControl} button { 
+        box-shadow: var(--act-shd-bx);
+      }
+      @media only screen and (max-width: 767px) {
+        & ${DropDownWrapper} { 
+          display: grid; 
+          left: 0; 
+          bottom:0; 
+          ${$placement === 'top' ? 'animation: dropgoup .075s;' : 'animation: droptoup .075s;'}
+          overflow-x: hidden; 
+        }
+        & ${DropDownBody} {
+          ._refFilterDropdown a { 
+            text-align: left !important; 
+          }
+        }
+      }
+      @media only screen and (min-width: 768px) {
+        & ${DropDownWrapper} { 
+          display: grid; 
+          ${$placement === 'top' ? `animation: dropgodown .075s linear; bottom: ${$bottom || '35px'};` : `animation: droptodown .075s linear; top: ${$top || '35px'};`}
+          left: ${($alias === "_dropdownFilterContainer" && $openPosition !== 'left') ? '100%': $openPosition === 'left' ? '0' : 'auto'};
+        }
+      }
+      @media only screen and (min-width: 1024px) {
+        & ${DropDownWrapper} { 
+          left: ${($alias === "_dropdownFilterContainer" && $openPosition !== 'left') ? '30%': $openPosition === 'left' ? '0' : 'auto'}; 
+        }
+      }
+      @media only screen and (min-width: 1280px) {
+        & ${DropDownWrapper} { 
+          left: ${($alias === "_dropdownFilterContainer" && $openPosition !== 'left') ? '0': $openPosition === 'left' ? '0' : 'auto'}; 
+        }
+      }
+    }
+  `
+  if ($alias === '_dropdownFilterContainer') {
+    style += `
+      margin-top: 4px;
+      ${DropDownControl} {
+        margin-top: -4px;
+      }
+    `
+  }
+  if ($externalWidth) {
+    style += `
+      width: ${$externalWidth}
+    `
+  }
+  if ($externalMinWidth) {
+    style += `
+      min-width: ${$externalMinWidth}
+    `
+  }
+  if ($area === 'mobile') {
+    style += `
+      @media (min-width: 320px) and (max-width: 480px) {
+        ${DropDownWrapper} { 
+          width: 100%;
+          align-content: start;
+          z-index: 88;
+        }
+      }
+    `
+  }
+  return style
+}
+
+const getDropDownWrapperModifiedStyled = ({ $internalWidth, $openPosition, $placement, $bottom, $top }: TDropdownChild) => {
+  let style = ''
+  if ($internalWidth) {
+    style += `
+      width: ${$internalWidth};
+    `
+  } else {
+    style +=`
+      width: auto;
+      white-space: nowrap;
+      ${DropDownBody} {
+        overflow: unset;
+      }
+    `
+  }
+  if ($openPosition === 'left') {
+    style += `
+      left: 0;
+      right: auto;
+    `
+  } else if ($openPosition === 'center') { 
+    style += `
+      left: 50%;
+      right: auto;
+      transform: translateX(-50%);
+    `
+  }
+  if ($placement === 'top' && $bottom) {
+    style += `
+      top: unset; bottom: ${$bottom}
+    `
+  } else if ($top) {
+    style += `
+      top: ${$top};
+    `
+  }
+  return style
+}
+
+const getDropDownBodyModifiedStyled = ({ $area }:{ $area?: string }) => {
+  let style = ''
+  if ($area === 'promotion') {
+    style += `
+      max-height: 347px;
+      overflow-y: auto;
+    `
+  }
+  return style
+}
+
+const getDropDownActionModifiedStyled = ({ $position }:{ $position?: string }) => {
+  let style = `
+    justify-self: end;
+  `
+  if ($position === 'middle') {
+    style += `
+      width: 100%; 
+      text-align: center;
+    `
+  } else if ($position === 'left') {
+    style += `  
+      width: 100%;
+    `
+  } else if ($position === 'end') {
+    style += `
+      width: 100%; 
+      text-align: end
+    `
+  }
+  return style
+}
+
+export const DropDownWrapper = styled.section<TDropdownChild>`
+  ${dropBase}
+  position: fixed;
+  width: 100vw; 
+  z-index: 102;
+  display: none;
+  border-radius: 10px 10px 0px 0px;
+  > div, 
+  > section {
+    padding: 1em;
+  }
+  @media only screen and (min-width: 768px) {
+    position: absolute; 
+    min-width: 110px;
+    width: 100vw;
+    top: 40px;
+    right: 0;
+    z-index: 10;
+    border-radius: var(--sec-rd);
+    > div, 
+    > section {
+      padding: 1em;
+      ._refFilterDropdown {
+        > * {
+          margin-left: -1em;
+          margin-right: -1em;
+          &:first-child {
+            margin-top: -1em;
+          }
+          &:last-child {
+            margin-bottom: -1em;
+          }
+        }
+        > article {
+          padding: 1em;
+          width: calc(100% + 2em);
+        }
+      }
+    }
+    ${getDropDownWrapperModifiedStyled}
+  }
+`
+
+export const DropDownOverlayWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  background-color: rgba(0, 0, 0, .1);
+  display: none;
+  @media only screen and (min-width: 768px) {
+    display: none !important;
+  }
+`
+
+export const DropDownControl = styled.section`
+  display: block;
+`
+
+export const DropdownControlWrapper = styled.div`
+  ._refDropdownControl {
+    display: none;
+  }
+  ._refDropdownControlMobile {
+    display: block;
+  }
+  @media only screen and (min-width: 1024px) {
+    ._refDropdownControl {
+      display: block;
+    }
+    ._refDropdownControlMobile {
+      display: none;
+    }
+  }
+`
+
+export const DropDownContainer = styled.section<{ $area?: string }>`
+  position: relative;
+  ${getDropDownContainerModifiedStyled}
+  @media only screen and (min-width: 1024px) {
+    &._refContainerhover:hover {
+      ${DropDownWrapper} {
+        display: grid;
+        animation: droptodown .075s linear;
+        top: '35px';
+      }
+    }
+  }
+`
+
+export const DropDownTitle = styled.div`
+  font-weight: 600;
+  border-bottom: 1px solid var(--sec-clr-ln);
+`
+
+export const DropDownSubTitle = styled.p`
+  color: var(--mt-clr);
+  margin-top: 4px;
+  margin-bottom: 0;
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: normal;
+`
+
+export const DropDownBody = styled.section<{ $area?: string }>`
+  overflow-y: auto;
+  max-height: 75vh;
+  overflow-x: hidden;
+  @media (max-width: 767px) {
+    max-height: 65vh;
+  }
+  ${getDropDownBodyModifiedStyled}
+`
+
+export const DropDownAction = styled.section<{ $position?: string }>`
+  border-top: 1px solid var(--sec-clr-ln);
+  ${getDropDownActionModifiedStyled}
+`
+
+export const DropdownPortalContainer = styled.div`
+  display: inline-block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  &.is-shown {
+    & ${DropDownWrapper} {
+      display: block;
+    }
+  }
+`

package/src/components/dropdown/dropdown.tsx

@@ -0,0 +1,254 @@
+import { useEffect, useRef, isValidElement } from 'react';
+import ReactTooltip from 'react-tooltip';
+import ReactPortalComponent from '../portal/react_portal';
+import { DropDownContainer, DropDownTitle, DropDownSubTitle, DropDownWrapper, DropDownOverlayWrapper, DropDownControl, DropDownBody, DropDownAction, DropdownControlWrapper, DropdownPortalContainer } from './dropdown.styles';
+import type { TMouseEvent } from '../../typeds/base.typed';
+import type { TDropdown } from './dropdown.typed';
+
+const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externalMinWidth, $internalWidth, $area, $openPosition, $placement, $top, onClick, $alias, type, portalId, $bottom, ...props }: TDropdown) => {
+  useEffect(() => { 
+    ReactTooltip.rebuild() ;
+  }, [])
+
+  const buttonRef = useRef<HTMLElement>(null);
+
+  const evScrollDropdown = () => {
+    const containerEl = document.getElementsByClassName('_refContainer is-shown')[0] as HTMLElement;
+    if (containerEl) {
+      const offsetPos = containerEl.getBoundingClientRect();
+      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';
+        portalContainerRef.style.top = offsetPos.top + parseInt($top || '0') - 32 + 'px';
+      }
+    }
+  }
+
+  const evResetDropdown = () => {
+    const containerRef = document.getElementsByClassName('_refContainer is-shown') as HTMLCollectionOf<HTMLElement>;
+    if (containerRef.length) {
+      for (let i = 0; i < containerRef.length; i++) {
+        containerRef[i].classList.remove('is-shown');
+      }
+    } 
+    const refScrollContainerEl = document.querySelector('._refScrollContainer') as HTMLElement;
+    refScrollContainerEl.removeEventListener('scroll', evScrollDropdown, true);
+    setTimeout(() => {
+      if (portalId) {
+        const portalContainerRef = document.getElementsByClassName('_refDropdownPortal is-shown') as HTMLCollectionOf<HTMLElement>;
+        if (portalContainerRef.length) {
+          for (let i = 0; i < portalContainerRef.length; i++) {
+            portalContainerRef[i].style.left = '0';
+            portalContainerRef[i].style.top = '0';
+            portalContainerRef[i].classList.remove('is-shown');
+          }
+        } 
+      }
+    },10);
+  }
+
+  const evToogleDropdown: TMouseEvent = e => {
+    const currRefEl = buttonRef.current;
+    if (currRefEl) {
+      const buttonEl = (e.target as HTMLElement).closest(`.${currRefEl.classList[0]}`); 
+      if (!buttonEl) {
+        return;
+      }
+      const containerEl = buttonEl.closest('._refContainer') as HTMLElement;
+      if (containerEl) {
+        const isCurOpen = containerEl.classList.contains('is-shown');
+        const offsetPos = containerEl.getBoundingClientRect();
+
+        if (!isCurOpen) {
+          evResetDropdown();  
+          containerEl.classList.add('is-shown');
+          setTimeout(() => {
+            if (portalId) {
+              const portalContainerRef = document.querySelector(`#${portalId} ._refDropdownPortal`) as HTMLElement;
+              const refScrollContainerEl = document.querySelector('._refScrollContainer') as HTMLElement;
+              const wrapperRef = portalContainerRef.querySelector('._refDropdownWrapper') as HTMLElement;
+              if (portalContainerRef) {
+                if (offsetPos) {
+                  if (wrapperRef) {
+                    setTimeout(() => {
+                      wrapperRef.style.right = 'auto';
+                      portalContainerRef.style.left = offsetPos.left + offsetPos.width - wrapperRef.getBoundingClientRect().width + 'px';
+                      portalContainerRef.style.top = offsetPos.top + parseInt($top || '0') - 32 + 'px';
+                      portalContainerRef.style.zIndex = '8';
+                      refScrollContainerEl.addEventListener('scroll', evScrollDropdown, true);
+                    }, 10);
+                  } else {
+                    portalContainerRef.style.left = offsetPos.left + ((parseInt($internalWidth || '0') + offsetPos.width) / 2) + 'px'; 
+                    portalContainerRef.style.top = (offsetPos.top + offsetPos.height) + 'px'; 
+                  }
+                }
+                portalContainerRef.classList.add('is-shown');
+              }
+            }
+          }, 10);
+          onClick && onClick(e);
+        } else {
+          containerEl.classList.remove('is-shown');
+          setTimeout(() => {
+            if (portalId) {
+              const portalContainerRef = document.querySelector(`#${portalId} ._refDropdownPortal`) as HTMLElement;
+              const refScrollContainerEl = document.querySelector('._refScrollContainer') as HTMLElement;
+              const wrapperRef = portalContainerRef.querySelector('._refDropdownWrapper') as HTMLElement;
+              if (portalContainerRef) {
+                portalContainerRef.classList.remove('is-shown');
+                portalContainerRef.style.left = '0px';
+                portalContainerRef.style.top = '0px';
+                if (wrapperRef) {
+                  refScrollContainerEl.removeEventListener('scroll', evScrollDropdown, true);
+                }
+              }
+            }
+          }, 10);
+        }
+      }
+    }
+  }
+
+  const evMouseEnter: TMouseEvent = e => {
+    const currRefEl = buttonRef.current;
+    if (currRefEl) {
+      const buttonEl = (e.target as HTMLElement).closest(`.${currRefEl.classList[0]}`);
+      if (!buttonEl) {
+        return;
+      }
+      const portalContainerRefs = document.querySelectorAll(`._refDropdownPortal`) as NodeListOf<HTMLElement>;
+      for (const portalContainerRef of portalContainerRefs) {
+        portalContainerRef.classList.remove('is-shown');
+        portalContainerRef.style.left = '0';
+        portalContainerRef.style.top = '0';
+      }
+      const containerEl = buttonEl.closest('._refContainer') as HTMLElement;  
+      if (containerEl) {
+        const offsetPos = containerEl.getBoundingClientRect();
+        const portalContainerRef = document.querySelector(`#${portalId} ._refDropdownPortal`) as HTMLElement;
+        if (portalContainerRef) {
+          if (offsetPos) {
+            portalContainerRef.style.left = offsetPos.left + ((parseInt($internalWidth || '0') + offsetPos.width) / 2) + 'px';
+            let currentTop = offsetPos.top + offsetPos.height;
+            const dropdownWrapperEl = portalContainerRef.querySelector('._refDropdownWrapper') as HTMLElement;
+            if (dropdownWrapperEl) {
+              dropdownWrapperEl.style.display = 'block';
+              if ((currentTop + dropdownWrapperEl.clientHeight) >= document.body.clientHeight) {
+                currentTop = offsetPos.top - dropdownWrapperEl.clientHeight - 10;
+              }
+            }
+            portalContainerRef.style.top = currentTop + 'px';
+          }
+          portalContainerRef.classList.add('is-shown'); 
+        }
+      }
+    }
+  }
+
+  useEffect(() => {
+    setTimeout(() => {
+      const portalContainerRefs = document.querySelectorAll(`._refDropdownPortal._refHover`) as NodeListOf<HTMLElement>;
+      for (let portalContainerRef of portalContainerRefs) {
+        portalContainerRef && portalContainerRef.addEventListener('mouseenter', (event) => {
+          const el = event.target as HTMLElement;
+          el.classList.add('is-shown');   
+          el.classList.add('unhiddenable');
+        })
+        portalContainerRef && portalContainerRef.addEventListener('mouseleave', (event) => {
+          const el = event.target as HTMLElement; 
+          el.classList.remove('is-shown');
+          el.classList.remove('unhiddenable');
+          el.style.left = '0';
+          el.style.top = '0';
+        })
+      }
+    }, 1);
+    return () => {
+      const portalContainerRefs = document.querySelectorAll(`._refDropdownPortal._refHover`) as NodeListOf<HTMLElement>;
+      for (let portalContainerRef of portalContainerRefs) {
+        portalContainerRef && portalContainerRef.removeEventListener('mouseenter', (event) => {
+          const el = event.target as HTMLElement;
+          el.classList.add('is-shown');
+          el.classList.add('unhiddenable');
+        }, true)
+        portalContainerRef && portalContainerRef.removeEventListener('mouseleave', (event) => {
+          const el = event.target as HTMLElement;
+          el.classList.remove('is-shown');
+          el.classList.remove('unhiddenable');
+          el.style.left = '0';
+          el.style.top = '0';
+        }, true)
+      }
+    };
+  }, [portalId])
+
+  const evMouseLeave: TMouseEvent = e => {
+    const currRefEl = buttonRef.current;
+    if (currRefEl) {
+      const buttonEl = (e.target as HTMLElement).closest(`.${currRefEl.classList[0]}`); 
+      if (!buttonEl) {
+        return;
+      }
+      setTimeout(() => {
+        const portalContainerRef = document.querySelector(`#${portalId} ._refDropdownPortal`) as HTMLElement;
+        if (portalContainerRef && !portalContainerRef.classList.contains('unhiddenable')) {
+          portalContainerRef.classList.remove('is-shown');
+          portalContainerRef.style.left = '0';
+          portalContainerRef.style.top = '0';
+        }
+      }, 150);
+    }
+  }
+
+  const evCloseDropdown = () => {
+    evResetDropdown();
+  }
+
+  const DropDownSubTitleEl = (subTitle) ? <DropDownSubTitle>{subTitle}</DropDownSubTitle> : null;
+  const DropDownTitleEl = (title) ? <DropDownTitle>{title} {DropDownSubTitleEl}</DropDownTitle> : null;
+  const ControlChildrenFilter = children.filter((child: any) => isValidElement(child) ? ((child.props as any)['aria-label'] === 'control') : null);
+  const DropDownControlEl = (ControlChildrenFilter && isValidElement(ControlChildrenFilter[0])) ? 
+    type === 'hover' ? (
+      <DropdownControlWrapper>
+        <DropDownControl className='_refDropdownControl' {...portalId && { onMouseEnter: evMouseEnter, onMouseLeave: evMouseLeave }}>{(ControlChildrenFilter[0].props as any).children}</DropDownControl>
+        <DropDownControl className='_refDropdownControlMobile' ref={buttonRef} onClick={evToogleDropdown}>{(ControlChildrenFilter[0].props as any).children}</DropDownControl>
+      </DropdownControlWrapper>
+    ) : <DropDownControl ref={buttonRef} onClick={evToogleDropdown} >{(ControlChildrenFilter[0].props as any).children}</DropDownControl>
+  : null
+  const BodyChildrenFilter = children.filter((child: any) => isValidElement(child) ? ((child.props as any)['aria-label'] === 'body') : null)
+  const DropDownBodyEl = (BodyChildrenFilter && isValidElement(BodyChildrenFilter[0])) ? <DropDownBody $area={$area}>{(BodyChildrenFilter[0].props as any).children}</DropDownBody> : null
+  const ActionChildrenFilter = children.filter((child: any) => isValidElement(child) ? ((child.props as any)['aria-label'] === 'action') : null)
+  const DropDownActionEl = (ActionChildrenFilter && isValidElement(ActionChildrenFilter[0])) ? <DropDownAction $position={(ActionChildrenFilter[0].props as any)['data-position']} className={(ActionChildrenFilter[0].props as any).className}>{(ActionChildrenFilter[0].props as any).children}</DropDownAction> : null
+
+  const dropdownWrapperEl = <DropDownWrapper 
+                              className='_refDropdownWrapper'
+                              {...$internalWidth && { $internalWidth: $internalWidth }}
+                              {...$top && { $top: $top }}
+                              {...$openPosition && { $openPosition: $openPosition }}
+                              {...$placement && { $placement: $placement }}
+                              {...$bottom && { $bottom: $bottom }}>
+                              {DropDownTitleEl}
+                              {DropDownBodyEl}
+                              {DropDownActionEl}
+                            </DropDownWrapper>  
+  return (
+    <DropDownContainer 
+      className={`_refContainer ${type ? `_refContainer${type}` : ``}`}
+      {...$externalWidth && { $externalWidth: $externalWidth }}
+      {...$externalMinWidth && { $externalMinWidth: $externalMinWidth }}
+      {...$area && { $area: $area }}
+      {...$top && { $top: $top }}
+      {...$alias && { $alias: $alias }}
+      {...$openPosition && { $openPosition: $openPosition }}
+      {...$placement && { $placement: $placement }}
+      {...$bottom && { $bottom: $bottom }}
+      {...props}>
+      {DropDownControlEl}
+      <DropDownOverlayWrapper className='_refDropdownOverlay' onClick={evCloseDropdown} />
+      { portalId ? <ReactPortalComponent wrapperId={portalId}><DropdownPortalContainer className={`_refDropdownPortal ${type === 'hover' ? '_refHover' : ''}`}>{dropdownWrapperEl}</DropdownPortalContainer></ReactPortalComponent> : dropdownWrapperEl }
+    </DropDownContainer>
+  );
+}
+
+export default DropDownComponent;

package/src/components/dropdown/dropdown.typed.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react'
+
+import type { TMouseEvent } from '../../typeds/base.typed'
+
+export type TDropdown = {
+  children: ReactNode[]
+  title?: string
+  subTitle?: string
+  $externalWidth?: string 
+  $externalMinWidth?: string
+  $internalWidth?: string
+  $area?: string
+  $openPosition?: string
+  $placement?: string
+  $top?: string
+  $bottom?: string
+  $alias?: string 
+  type?: string
+  portalId?: string
+  onClick?: TMouseEvent
+  detail?: string
+}
+
+export type TCloseDropdownFunction = (currentTarget: EventTarget & HTMLElement) => void

package/src/components/index.ts

@@ -6,3 +6,12 @@ export { default as ButtonComponent } from './button/button';
 export { default as LabelComponent } from './label/label';
 export { default as IconComponent } from './icon/icon';
 export { default as LoadingComponent } from './loading/loading';
+export { default as DropdownComponent } from './dropdown/dropdown';
+export { default as MessageComponent } from './message/message';
+export { default as MessageQuestionComponent } from './message/message_question'; 
+export { default as PopupComponent } from './popup/popup';
+export { default as ReactPortalComponent } from './portal/react_portal';
+
+export * from './dropdown/dropdown.typed';
+export * from './message/message.typed';
+export * from './popup/popup.typed';