@tecsinapse/react-web-kit 1.18.7 → 1.20.1

package/src/components/organisms/DataGrid/DataGrid.tsx

@@ -57,7 +57,7 @@ export interface DataGridProps<Data>
 }
 
 /** Note: Consider memoizing functions for a better performance */
-const DataGrid = <Data extends unknown>({
+const DataGrid = <Data,>({
   headers,
   data,
   rowKeyExtractor,
@@ -139,25 +139,21 @@ const DataGrid = <Data extends unknown>({
         {!loading ? (
           <TBody>
             {data.length > 0 ? (
-              getData(
-                data,
-                rowsCount,
-                page,
-                rowsPerPage,
-                pagination
-              ).map(item => (
-                <Row
-                  key={rowKeyExtractor(item)}
-                  rowKeyExtractor={rowKeyExtractor}
-                  handleSelect={handleSelect}
-                  selectable={selectable}
-                  headers={headers}
-                  data={item}
-                  checked={selectedRows?.some(
-                    sel => rowKeyExtractor(sel) === rowKeyExtractor(item)
-                  )}
-                />
-              ))
+              getData(data, rowsCount, page, rowsPerPage, pagination).map(
+                item => (
+                  <Row
+                    key={rowKeyExtractor(item)}
+                    rowKeyExtractor={rowKeyExtractor}
+                    handleSelect={handleSelect}
+                    selectable={selectable}
+                    headers={headers}
+                    data={item}
+                    checked={selectedRows?.some(
+                      sel => rowKeyExtractor(sel) === rowKeyExtractor(item)
+                    )}
+                  />
+                )
+              )
             ) : (
               <tr>
                 <td colSpan={99}>{emptyPlaceholder}</td>

package/src/components/organisms/DataGrid/Header/Header.tsx

@@ -21,7 +21,7 @@ export interface DataGridHeaderProps<Data> {
   selectable?: boolean;
 }
 
-const Header = <Data extends unknown>({
+const Header = <Data,>({
   selectable,
   rowsCount,
   headers,

package/src/hooks/index.ts

@@ -1 +1,3 @@
+export { useBreakpoints } from './useBreakpoints';
 export { useClickAwayListener } from './useClickAwayListener';
+export { useWindowSize } from './useWindowSize';

package/src/hooks/useBreakpoints.ts

@@ -0,0 +1,18 @@
+import { useTheme } from '@tecsinapse/react-core';
+import { useWindowSize } from './useWindowSize';
+
+export type UseBreakpointsReturn = {
+  sm: boolean;
+  md: boolean;
+  lg: boolean;
+};
+
+export const useBreakpoints = (): UseBreakpointsReturn => {
+  const { width } = useWindowSize();
+  const { breakpoints } = useTheme();
+  return {
+    sm: Number(width) >= 0 && Number(width) <= breakpoints.sm,
+    md: Number(width) > breakpoints.sm && Number(width) <= breakpoints.md,
+    lg: Number(width) > breakpoints.md,
+  };
+};

package/src/hooks/useWindowSize.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+
+type WindowSize = {
+  width: number | undefined;
+  height: number | undefined;
+};
+
+export const useWindowSize = (): WindowSize => {
+  const [windowSize, setWindowSize] = React.useState<WindowSize>({
+    width: undefined,
+    height: undefined,
+  });
+  React.useEffect(() => {
+    const handleResize = () => {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+  return windowSize;
+};

package/src/index.ts

@@ -1,7 +1,9 @@
 export * from '@tecsinapse/react-core';
+export { Icon, Text } from '@tecsinapse/react-core';
+export { Accordion, AccordionProps } from './components/atoms/Accordion';
 export {
-  default as Badge,
   BadgeWebProps,
+  default as Badge,
 } from './components/atoms/Badge/Badge';
 export {
   Button,
@@ -9,44 +11,52 @@ export {
   WebButtonProps,
 } from './components/atoms/Button';
 export { Input, InputWebProps } from './components/atoms/Input';
+export { InputMask, InputMaskWebProps } from './components/atoms/InputMask';
+export { Modal, ModalProps } from './components/atoms/Modal';
+export { Skeleton, SkeletonProps } from './components/atoms/Skeleton';
 export { Tag, TagProps } from './components/atoms/Tag';
+export { ITooltip, Tooltip } from './components/atoms/Tooltip';
+export {
+  Breadcrumbs,
+  BreadcrumbsProps,
+  BreadcrumbType,
+} from './components/molecules/Breadcrumbs';
+export {
+  DatePicker,
+  WebDatePickerProps,
+} from './components/molecules/DatePicker';
+export {
+  DateTimePicker,
+  WebDateTimePickerProps,
+} from './components/molecules/DateTimePicker';
+export { Drawer, DrawerProps } from './components/molecules/Drawer';
+export {
+  Grid,
+  GridItem,
+  IGridWeb,
+  IGridItemWeb,
+} from './components/molecules/Grid';
 export {
   InputPassword,
   InputPasswordWebProps,
 } from './components/molecules/InputPassword';
-export { InputMask, InputMaskWebProps } from './components/atoms/InputMask';
+export {
+  LabeledSwitch,
+  LabeledSwitchWebProps,
+} from './components/molecules/LabeledSwitch';
 export {
   Menubar,
-  MenubarProps,
-  MenubarOptionsType,
   MenubarItemsOptions,
   MenubarMostUsedType,
+  MenubarOptionsType,
+  MenubarProps,
 } 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 { Skeleton, SkeletonProps } from './components/atoms/Skeleton';
-export { Accordion, AccordionProps } from './components/atoms/Accordion';
+export { TextArea, TextAreaProps } from './components/molecules/TextArea';
 export {
   DataGrid,
   DataGridProps,
   HeadersType,
 } from './components/organisms/DataGrid';
-export { Modal, ModalProps } from './components/atoms/Modal';
-export { TextArea, TextAreaProps } from './components/molecules/TextArea';
-export { Tooltip, ITooltip } from './components/atoms/Tooltip';
 export * from './hooks';
-export {
-  DatePicker,
-  WebDatePickerProps,
-} from './components/molecules/DatePicker';
-export {
-  DateTimePicker,
-  WebDateTimePickerProps,
-} from './components/molecules/DateTimePicker';
-export { Grid, GridItem, IGrid, IGridItem } from './components/molecules/Grid';

package/tsconfig.build.esm.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "skipLibCheck": true,
+    "declarationDir": "./esm",
+    "rootDir": "./src",
+    "baseUrl": "./"
+  },
+  "include": ["./src"]
+}