Merge pull request #200 from Enterwell/stage

fix: MUI lab no longer used

apps/docs/components/ExampleSplitButtonLoading.tsx

@@ -0,0 +1,17 @@
+import { SplitButton } from '@enterwell/react-ui';
+
+export function ExampleSplitButtonLoading() {
+    return (
+        // @highlight-start
+        <SplitButton
+            loading={true}
+            options={[
+                { key: '1', value: 'Option 1' },
+                { key: '2', value: 'Option 2' },
+                { key: '3', value: 'Option 3' },
+            ]}>
+            Choose option
+        </SplitButton>
+        // @highlight-end
+    )
+}

apps/docs/pages/react-ui/components/split-button.mdx

@@ -2,9 +2,9 @@
 title: SplitButton
 ---
 
-import { SplitButton } from '@enterwell/react-ui';
 import { ComponentWithSource } from '../../../components/docs/ComponentWithSource.tsx';
 import { ExampleSplitButton } from '../../../components/ExampleSplitButton.tsx';
+import { ExampleSplitButtonLoading } from '../../../components/ExampleSplitButtonLoading.tsx';
 import { ComponentDescription, ComponentParameters, ComponentSource } from '../../../components/docs/ComponentDocs';
 
 # SplitButton
@@ -21,6 +21,10 @@ import { ComponentDescription, ComponentParameters, ComponentSource } from '../.
 
 <ComponentWithSource component={ ExampleSplitButton } centered />
 
+### With loading
+
+<ComponentWithSource component={ ExampleSplitButtonLoading } centered />
+
 ## Inspect
 
 <details>

packages/react-ui/SplitButton/SplitButton.tsx

@@ -6,9 +6,9 @@ import {
   Paper,
   MenuItem,
   MenuList,
-  ClickAwayListener
+  ClickAwayListener,
+  CircularProgress
 } from '@mui/material';
-import LoadingButton from '@mui/lab/LoadingButton';
 import { ArrowDropDown } from '@mui/icons-material';
 import {
   useState, useEffect, useRef, forwardRef, MouseEvent
@@ -93,17 +93,24 @@ const SplitButton = forwardRef<HTMLButtonElement, SplitButtonProps>((props, ref)
   return (
     <>
       <ButtonGroup disabled={disabled} variant={variant} {...rest}>
-        <LoadingButton
+        <Button
           ref={ref}
-          loading={loading}
+          disabled={loading}
           onClick={handleClick}
           variant={variant}
           sx={{
+            position: 'relative',
             '&.Mui-disabled': { pointerEvents: 'auto' },
+            color: loading ? 'transparent !important' : undefined,
           }}
         >
+          {loading && <CircularProgress size={16} sx={{
+            position: 'absolute',
+            left: '50%',
+            transform: 'translateX(-50%)',
+          }} />}
           {children}
-        </LoadingButton>
+        </Button>
         <Button onClick={handleToggle} ref={anchorRef}>
           <ArrowDropDown />
         </Button>

packages/react-ui/package.json

@@ -31,7 +31,6 @@
     "@mui/icons-material": "5.14.18",
     "@mui/material": "5.14.18",
     "@mui/system": "5.14.18",
-    "@mui/lab": "5.0.0-alpha.153",
     "@mui/x-date-pickers-pro": "5.0.20",
     "@mui/x-date-pickers": "5.0.20",
     "@types/node": "18.18.13",
@@ -50,7 +49,6 @@
     "@emotion/styled": "^11",
     "@mui/material": "^5",
     "@mui/system": "^5",
-    "@mui/lab": "^5",
     "@mui/x-date-pickers-pro": "^5",
     "@mui/x-date-pickers": "^5",
     "react": "^18",