@tecsinapse/react-web-kit 1.5.0 → 1.6.3

package/src/components/molecules/Menubar/MostUsed/MostUsed.tsx

@@ -6,9 +6,10 @@ import { MostUsedType } from '../types';
 interface MostUsedProps {
   data: MostUsedType[];
   label: string;
+  toggle: () => void;
 }
 
-const MostUsed: React.FC<MostUsedProps> = ({ data, label }) => {
+const MostUsed: React.FC<MostUsedProps> = ({ data, label, toggle }) => {
   const noTextDecoration = { textDecoration: 'none' };
 
   return (
@@ -28,6 +29,7 @@ const MostUsed: React.FC<MostUsedProps> = ({ data, label }) => {
                 {...props}
                 style={noTextDecoration}
                 key={`${title}-${category}`}
+                onClick={toggle}
               >
                 <StyledCard elevated key={`${title}-${category}`}>
                   <Text fontWeight="bold" colorVariant="primary">
@@ -49,4 +51,4 @@ const MostUsed: React.FC<MostUsedProps> = ({ data, label }) => {
   );
 };
 
-export default MostUsed;
+export default React.memo(MostUsed);

package/src/components/molecules/Menubar/SearchResultItem/SearchResultItem.tsx

@@ -7,16 +7,21 @@ import { highlight } from './utils';
 interface SearchResultItem {
   data: MostUsedType;
   searchTerm: string;
+  toggle: () => void;
 }
 
-const SearchResultItem: React.FC<SearchResultItem> = ({ data, searchTerm }) => {
+const SearchResultItem: React.FC<SearchResultItem> = ({
+  data,
+  searchTerm,
+  toggle,
+}) => {
   const { title, category, Component, props } = data;
   const noTextDecoration = { textDecoration: 'none' };
 
   const textProps: TextProps = { fontColor: 'orange', fontWeight: 'bold' };
 
   return (
-    <Component {...props} style={noTextDecoration}>
+    <Component {...props} style={noTextDecoration} onClick={toggle}>
       <StyledSearchItemContainer>
         <Text typography="base" colorVariant="secondary" colorTone="dark">
           {highlight(searchTerm, title, HighlightText, textProps)}

package/src/components/molecules/Menubar/animations.ts

@@ -1,24 +1,19 @@
 import { CSSProperties } from 'react';
 import { TransitionStatus } from 'react-transition-group';
-import { ThemeProp } from '@tecsinapse/react-core';
 
-const getDefaultInputContainerStyles = (theme: ThemeProp) => ({
-  display: 'flex',
-  flex: 1,
+const getDefaultInputContainerStyles = {
   transitionDuration: '250ms',
   transitionProperty: 'opacity scale transform',
   transitionTimingFunction: 'ease-in-out',
-  zIndex: theme.zIndex.default,
-});
+};
 
-const getDefaultContainerOpenMenuStyles = (theme: ThemeProp) => ({
+const getDefaultContainerOpenMenuStyles = {
   transitionDuration: '250ms',
   transitionProperty: 'opacity scale transform',
   transitionTimingFunction: 'ease-in-out',
-  zIndex: theme.zIndex.default,
-});
+};
 
-const getInputContainerTransform = () => ({
+const getInputContainerTransform = {
   entered: {
     transform: 'scale(1, 1) translateY(0px)',
   },
@@ -34,9 +29,9 @@ const getInputContainerTransform = () => ({
     opacity: 0.5,
     transform: 'scale(0.99, 0.99) translateY(-5px)',
   },
-});
+};
 
-const getContainerOpenMenuTransform = () => ({
+const getContainerOpenMenuTransform = {
   entered: {
     transform: 'scale(1, 1) translateY(0px) ',
   },
@@ -52,20 +47,18 @@ const getContainerOpenMenuTransform = () => ({
     opacity: 0.95,
     transform: 'scale(0.99, 0.99) translateY(0px)',
   },
-});
+};
 
 export const getInputContainerStyles = (
-  state: TransitionStatus,
-  theme: ThemeProp
+  state: TransitionStatus
 ): CSSProperties => ({
-  ...getDefaultInputContainerStyles(theme),
-  ...getInputContainerTransform()[state],
+  ...getDefaultInputContainerStyles,
+  ...getInputContainerTransform[state],
 });
 
 export const getContainerOpenMenuStyles = (
-  state: TransitionStatus,
-  theme: ThemeProp
+  state: TransitionStatus
 ): CSSProperties => ({
-  ...getDefaultContainerOpenMenuStyles(theme),
-  ...getContainerOpenMenuTransform()[state],
+  ...getDefaultContainerOpenMenuStyles,
+  ...getContainerOpenMenuTransform[state],
 });

package/src/components/molecules/Menubar/index.ts

@@ -1,2 +1,7 @@
 export { default as Menubar } from './Menubar';
+export {
+  OptionsType as MenubarOptionsType,
+  MostUsedType as MenubarMostUsedType,
+  ItemsOptions as MenubarItemsOptions,
+} from './types';
 export * from './Menubar';

package/src/components/molecules/Menubar/styled.ts

@@ -13,7 +13,7 @@ export const StyledIconInput = webStyled('div')<Partial<StyleProps>>`
 
 export const StyledMenuBar = webStyled('div')<Partial<StyleProps>>`
     position: relative;
-    z-index: ${({ theme }) => theme.zIndex.absolute};
+    z-index: ${({ theme }) => theme.zIndex.header};
     background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
     display: flex;
     flex-direction: row;
@@ -50,6 +50,7 @@ export const StyledContainerOpenMenu = webStyled('div')<Partial<StyleProps>>`
     padding-top: ${({ theme }) => theme.spacing.kilo};
     padding-bottom: ${({ theme }) => theme.spacing.mega};
     position: absolute;
+    z-index: ${({ theme }) => theme.zIndex.header - 1};
     width: -webkit-fill-available;
     width: -moz-available;
 `;
@@ -60,7 +61,7 @@ export const StyledInput = nativeStyled(Input)<Partial<StyleProps>>`
 
 export const StyledInputContainer = webStyled('div')`
     display: flex;
-    flex: 1
+    flex: 1;
 `;
 
 export const StyledSearchResultsContainer = webStyled('div')`

package/src/index.ts

@@ -14,13 +14,27 @@ export {
   InputPassword,
   InputPasswordWebProps,
 } from './components/molecules/InputPassword';
-export { Menubar, MenubarProps } from './components/molecules/Menubar';
+export {
+  Menubar,
+  MenubarProps,
+  MenubarOptionsType,
+  MenubarItemsOptions,
+  MenubarMostUsedType,
+} from './components/molecules/Menubar';
 export { Drawer, DrawerProps } from './components/molecules/Drawer';
 export { Select, SelectProps } from './components/molecules/Select';
 export { Snackbar, SnackbarWebProps } from './components/molecules/Snackbar';
 export {
   Breadcrumbs,
   BreadcrumbsProps,
+  BreadcrumbType,
 } from './components/molecules/Breadcrumbs';
-export * from './components/organisms/DataGrid';
+export { Skeleton, SkeletonProps } from './components/atoms/Skeleton';
+export { Accordion, AccordionProps } from './components/atoms/Accordion';
+export {
+  DataGrid,
+  DataGridProps,
+  HeadersType,
+} from './components/organisms/DataGrid';
+export { Modal, ModalProps } from './components/atoms/Modal';
 export * from './hooks';