@galaxy-ds/core 2.0.9 → 2.0.11

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galaxy-ds/core",
-  "version": "2.0.9",
+  "version": "2.0.11",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galaxy-ds/core",
-  "version": "2.0.9",
+  "version": "2.0.11",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",

package/src/DateRangePicker/DateRangePicker.types.ts

@@ -8,6 +8,6 @@ import type {
   InputRange,
 } from 'react-date-range';
 
-export interface DateRangePickerProps extends ReactDateRangePickerProps {}
+export type DateRangePickerProps = ReactDateRangePickerProps;
 
 export { Range, RangeFocus, RangeKeyDict, Preview, StaticRange, InputRange };

package/src/Popover/Popover.stories.mdx

@@ -19,16 +19,25 @@ const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
 const open = Boolean(anchorEl);
 return (
   <div>
-    <Button
-      aria-describedby="popver"
-      variant="contained"
-      onClick={handleClick}
-    >
-      Open Popover
-    </Button>
-    <Popover open={open} setAnchorEl={setAnchorEl} anchorEl={anchorEl}>
-      <DateRangePickerExample months={2} />
-    </Popover>
+      <Button
+        aria-describedby="popver"
+        variant="contained"
+        onClick={handleClick}
+      >
+        Open Popover
+      </Button>
+      <Popover
+        sx={{
+          '& .MuiPopover-paper': {
+            border: '1px solid #BEBEBE',
+          },
+        }}
+        open={open}
+        setAnchorEl={setAnchorEl}
+        anchorEl={anchorEl}
+      >
+        <DateRangePickerExample months={2} />
+      </Popover>
   </div>
 );`
         }

package/src/Popover/PopoverExample.tsx

@@ -20,7 +20,16 @@ export const PopoverExample = () => {
       >
         Open Popover
       </Button>
-      <Popover open={open} setAnchorEl={setAnchorEl} anchorEl={anchorEl}>
+      <Popover
+        sx={{
+          '& .MuiPopover-paper': {
+            border: '1px solid #BEBEBE',
+          },
+        }}
+        open={open}
+        setAnchorEl={setAnchorEl}
+        anchorEl={anchorEl}
+      >
         <DateRangePickerExample months={2} />
       </Popover>
     </div>

package/src/Theme/leap/desktop/overrides/index.ts

@@ -16,6 +16,7 @@ export * from './menu';
 export * from './menuItem';
 export * from './menuHeader';
 export * from './outlinedInput';
+export * from './popover';
 export * from './radio';
 export * from './listSubHeader';
 export * from './listItem';

package/src/Theme/leap/desktop/overrides/popover.ts

@@ -0,0 +1,14 @@
+import { Components, Theme } from '@mui/material';
+
+export const popoverOverrides: Components<Theme>['MuiPopover'] = {
+  styleOverrides: {
+    root: () => ({
+      '& .MuiPopover-paper': {
+        borderRadius: '8px',
+      },
+    }),
+  },
+  defaultProps: {
+    elevation: 4,
+  },
+};

package/src/Theme/leap/desktop/theme.ts

@@ -91,6 +91,7 @@ import {
   menuItemOverrides,
   menuHeaderOverrides,
   outlinedInputOverrides,
+  popoverOverrides,
   radioOverrides,
   listItemOverrides,
   listItemAvatarOverrides,
@@ -171,11 +172,7 @@ theme = createTheme(theme, {
         elevation: 0,
       },
     },
-    MuiPopover: {
-      defaultProps: {
-        elevation: 4,
-      },
-    },
+    MuiPopover: popoverOverrides,
     MuiRadio: radioOverrides,
     MuiListSubheader: listSubheaderOverrides,
     MuiListItem: listItemOverrides,
@@ -193,6 +190,6 @@ theme = createTheme(theme, {
 });
 
 theme.shadows[3] = '2px 3px 4px 0 rgba(0,0,0,0.5)';
-theme.shadows[4] = '3px 3px 4px rgba(0, 0, 0, 0.4)';
+theme.shadows[4] = '0px 4px 20px 0px #00000036'; //Shadow / Modal Window
 
 export default theme;

package/src/Theme/leap/web/overrides/index.ts

@@ -24,6 +24,7 @@ export * from './listItemText';
 export * from './inputBase';
 export * from './inputLabel';
 export * from './outlinedInput';
+export * from './popover';
 export * from './menu';
 export * from './menuItem';
 export * from './radio';
@@ -39,4 +40,3 @@ export * from './switch';
 export * from './Table/tableCell';
 export * from './Table/tableContainer';
 export * from './Table/tableRow';
-

package/src/Theme/leap/web/overrides/popover.ts

@@ -0,0 +1,14 @@
+import { Components, Theme } from '@mui/material';
+
+export const popoverOverrides: Components<Theme>['MuiPopover'] = {
+  styleOverrides: {
+    root: () => ({
+      '& .MuiPopover-paper': {
+        borderRadius: '8px',
+      },
+    }),
+  },
+  defaultProps: {
+    elevation: 4,
+  },
+};

package/src/Theme/leap/web/theme.ts

@@ -27,6 +27,7 @@ import {
   menuOverrides,
   menuItemOverrides,
   outlinedInputOverrides,
+  popoverOverrides,
   radioOverrides,
   listItemOverrides,
   listItemAvatarOverrides,
@@ -99,11 +100,7 @@ theme = createTheme(theme, {
     MuiMenuItem: menuItemOverrides,
     MuiListSubheader: listSubheaderOverrides,
     MuiOutlinedInput: outlinedInputOverrides,
-    MuiPopover: {
-      defaultProps: {
-        elevation: 4,
-      },
-    },
+    MuiPopover: popoverOverrides,
     MuiRadio: radioOverrides,
     MuiListItem: listItemOverrides,
     MuiListItemAvatar: listItemAvatarOverrides,
@@ -121,6 +118,6 @@ theme = createTheme(theme, {
 
 // Override shadows
 theme.shadows[3] = '2px 3px 4px 0 rgba(0,0,0,0.15)';
-theme.shadows[4] = '0px 2px 8px 0px rgba(0,0,0,0.15)';
+theme.shadows[4] = '0px 4px 20px 0px #00000036'; //Shadow / Modal Window
 
 export default theme;