mui-dialog 1.0.8 → 1.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +15 -13
  2. package/dist/index.d.ts +3 -2
  3. package/dist/mui-dialog.es.js +17 -14
  4. package/package.json +7 -13
package/README.md CHANGED
@@ -114,19 +114,21 @@ const MyComponent = () => {
114
114
 
115
115
  ### Action Props
116
116
 
117
- | Prop | Type | Required | Default | Description |
118
- | ------------------------ | ----------------- | -------- | ------- | ------------------------------------- |
119
- | `primaryCtaTitle` | `string` | No | - | Primary button text |
120
- | `secondaryCtaTitle` | `string` | No | - | Secondary button text |
121
- | `tertiaryCtaTitle` | `string` | No | - | Tertiary button text |
122
- | `isPrimaryCtaLoading` | `boolean` | No | `false` | Show loading state for primary button |
123
- | `isPrimaryCtaDisabled` | `boolean` | No | `false` | Disable primary button |
124
- | `isSecondaryCtaDisabled` | `boolean` | No | `false` | Disable secondary button |
125
- | `isTertiaryCtaDisabled` | `boolean` | No | `false` | Disable tertiary button |
126
- | `onPrimaryCtaClick` | `() => void` | No | - | Primary button click handler |
127
- | `onSecondaryCtaClick` | `() => void` | No | - | Secondary button click handler |
128
- | `onTertiaryCtaClick` | `() => void` | No | - | Tertiary button click handler |
129
- | `tertiaryCtaStartIcon` | `React.ReactNode` | No | - | Icon for tertiary button |
117
+ | Prop | Type | Required | Default | Description |
118
+ | ------------------------ | ----------------- | -------- | ----------------------------------------------- | --------------------------------------- |
119
+ | `primaryCtaTitle` | `string` | No | - | Primary button text |
120
+ | `secondaryCtaTitle` | `string` | No | - | Secondary button text |
121
+ | `tertiaryCtaTitle` | `string` | No | - | Tertiary button text |
122
+ | `isPrimaryCtaLoading` | `boolean` | No | `false` | Show loading state for primary button |
123
+ | `isSecondaryCtaLoading` | `boolean` | No | `false` | Show loading state for secondary button |
124
+ | `isTertiaryCtaLoading` | `boolean` | No | `false` | Show loading state for tertiary button |
125
+ | `isPrimaryCtaDisabled` | `boolean` | No | `isSecondaryCtaLoading or isTertiaryCtaLoading` | Disable primary button |
126
+ | `isSecondaryCtaDisabled` | `boolean` | No | `isPrimaryCtaLoading or isTertiaryCtaLoading` | Disable secondary button |
127
+ | `isTertiaryCtaDisabled` | `boolean` | No | `isPrimaryCtaLoading or isSecondaryCtaLoading` | Disable tertiary button |
128
+ | `onPrimaryCtaClick` | `() => void` | No | - | Primary button click handler |
129
+ | `onSecondaryCtaClick` | `() => void` | No | - | Secondary button click handler |
130
+ | `onTertiaryCtaClick` | `() => void` | No | - | Tertiary button click handler |
131
+ | `tertiaryCtaStartIcon` | `React.ReactNode` | No | - | Icon for tertiary button |
130
132
 
131
133
  ## Size Breakpoints
132
134
 
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Breakpoint } from '@mui/material';
2
- import { JSX as JSX_2 } from 'react/jsx-runtime';
2
+ import { JSX } from 'react/jsx-runtime';
3
3
 
4
4
  export declare interface BaseModalProps {
5
5
  wrapperClassName?: string;
@@ -36,6 +36,7 @@ declare interface IActions {
36
36
  isPrimaryCtaLoading?: boolean;
37
37
  isPrimaryCtaDisabled?: boolean;
38
38
  isSecondaryCtaDisabled?: boolean;
39
+ isSecondaryCtaLoading?: boolean;
39
40
  onPrimaryCtaClick?: () => void;
40
41
  onSecondaryCtaClick?: () => void;
41
42
  tertiaryCtaTitle?: string;
@@ -111,7 +112,7 @@ declare type ModalTypeConfig = {
111
112
  [subtype: string]: ModalConfig;
112
113
  };
113
114
 
114
- export declare const MuiDialog: (props: ModalProps) => JSX_2.Element;
115
+ export declare const MuiDialog: (props: ModalProps) => JSX.Element;
115
116
 
116
117
  export declare const SIZE_TO_MAX_WIDTH: Record<ModalSize, Breakpoint>;
117
118
 
package/dist/mui-dialog.es.js CHANGED
@@ -1,15 +1,15 @@
1
- !function(){"use strict";try{if("undefined"!=typeof document){var i=document.createElement("style");i.appendChild(document.createTextNode(".vi-dialog .close-icon{cursor:pointer;color:#717371}.vi-dialog .MuiPaper-root{border-radius:12px}.vi-dialog .divider{margin-top:28px;margin-bottom:-4px}.vi-dialog .vi-dialog-actions-wrapper{margin-top:28px;display:flex;justify-content:space-between;align-items:center}.vi-dialog .vi-dialog-actions-wrapper .tertiary-cta.destructive{color:#ed1d31;justify-self:flex-start}.vi-dialog .vi-dialog-actions-wrapper .vi-dialog-actions.medium{width:50%}.vi-dialog .vi-dialog-actions-wrapper .vi-dialog-actions.large{width:33%}.vi-dialog .vi-dialog-actions-wrapper .vi-dialog-actions.extra-large{width:25%}.vi-dialog .vi-dialog-actions{display:flex;align-items:center;justify-content:flex-end;gap:16px}.vi-dialog .vi-dialog-actions .vi-dialog-cta{width:-webkit-fill-available}.vi-dialog .vi-dialog-actions .tertiary-cta{padding:0}.vi-dialog .vi-dialog-actions .vi-dialog-cta.destructive{background-color:#ed1d31}.vi-dialog .vi-dialog-actions.without-tertiary{margin-top:28px}.vi-dialog .vi-dialog-actions.small{justify-content:center}.vi-dialog .vi-dialog-actions.without-tertiary.medium{max-width:50%;margin-left:50%}.vi-dialog .vi-dialog-actions.without-tertiary.large{max-width:33%;margin-left:67%}.vi-dialog .vi-dialog-actions.without-tertiary.extra-large{max-width:25%;margin-left:75%}.vi-dialog .vi-dialog-actions.with-tertiary-cta{max-width:100%;margin-left:0}.vi-dialog .vi-dialog-title{margin-bottom:28px}.vi-dialog .vi-dialog-title .description{margin-top:16px!important}.vi-dialog .vi-dialog-title.small{margin-bottom:16px}.vi-dialog .divider{margin-left:-24px;margin-right:-24px}@media only screen and (max-width: 600px){.vi-dialog .MuiPaper-root{margin:16px;width:calc(100% - 32px)}.vi-dialog .vi-dialog-actions-wrapper{flex-direction:column-reverse;gap:12px}.vi-dialog .vi-dialog-actions{flex-direction:column-reverse;width:100%!important;gap:12px}.vi-dialog .vi-dialog-actions.medium,.vi-dialog .vi-dialog-actions.large,.vi-dialog .vi-dialog-actions.extra-large{max-width:100%;margin-left:0}.vi-dialog.medium .MuiPaper-root,.vi-dialog.large .MuiPaper-root{margin:0;width:100%;height:100%;max-height:none;border-radius:0}}")),document.head.appendChild(i)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}}();
1
+ !function(){"use strict";try{if("undefined"!=typeof document){var i=document.createElement("style");i.appendChild(document.createTextNode(".vi-dialog .close-icon{cursor:pointer;color:#717371}.vi-dialog .p-24{padding:24px}.vi-dialog .h-fill{height:-webkit-fill-available}.vi-dialog .d-f{display:flex}.vi-dialog .ai-c{align-items:center}.vi-dialog .jc-sb{justify-content:space-between}.vi-dialog .flex-dir-col{flex-direction:column}.vi-dialog .gap-8{gap:8px}.vi-dialog .MuiPaper-root{border-radius:12px}.vi-dialog .divider{margin-top:28px;margin-bottom:-4px}.vi-dialog .vi-dialog-actions-wrapper{margin-top:28px;display:flex;justify-content:space-between;align-items:center}.vi-dialog .vi-dialog-actions-wrapper .tertiary-cta.destructive{color:#ed1d31;justify-self:flex-start}.vi-dialog .vi-dialog-actions-wrapper .vi-dialog-actions.medium{width:50%}.vi-dialog .vi-dialog-actions-wrapper .vi-dialog-actions.large{width:33%}.vi-dialog .vi-dialog-actions-wrapper .vi-dialog-actions.extra-large{width:25%}.vi-dialog .vi-dialog-actions{display:flex;align-items:center;justify-content:flex-end;gap:16px}.vi-dialog .vi-dialog-actions .vi-dialog-cta{width:-webkit-fill-available}.vi-dialog .vi-dialog-actions .tertiary-cta{padding:0}.vi-dialog .vi-dialog-actions .vi-dialog-cta.destructive{background-color:#ed1d31}.vi-dialog .vi-dialog-actions.without-tertiary{margin-top:28px}.vi-dialog .vi-dialog-actions.small{justify-content:center}.vi-dialog .vi-dialog-actions.without-tertiary.medium{max-width:50%;margin-left:50%}.vi-dialog .vi-dialog-actions.without-tertiary.large{max-width:33%;margin-left:67%}.vi-dialog .vi-dialog-actions.without-tertiary.extra-large{max-width:25%;margin-left:75%}.vi-dialog .vi-dialog-actions.with-tertiary-cta{max-width:100%;margin-left:0}.vi-dialog .vi-dialog-title{margin-bottom:28px}.vi-dialog .vi-dialog-title .description{margin-top:16px!important}.vi-dialog .vi-dialog-title.small{margin-bottom:16px}.vi-dialog .divider{margin-left:-24px;margin-right:-24px}@media only screen and (max-width: 600px){.vi-dialog .MuiPaper-root{margin:16px;width:calc(100% - 32px)}.vi-dialog .vi-dialog-actions-wrapper{flex-direction:column-reverse;gap:12px}.vi-dialog .vi-dialog-actions{flex-direction:column-reverse;width:100%!important;gap:12px}.vi-dialog .vi-dialog-actions.medium,.vi-dialog .vi-dialog-actions.large,.vi-dialog .vi-dialog-actions.extra-large{max-width:100%;margin-left:0}.vi-dialog.medium .MuiPaper-root,.vi-dialog.large .MuiPaper-root{margin:0;width:100%;height:100%;max-height:none;border-radius:0}}")),document.head.appendChild(i)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}}();
2
2
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
3
3
  import * as React from 'react';
4
4
  import { forwardRef } from 'react';
5
5
  import Dialog from '@mui/material/Dialog';
6
- import Button from '@mui/material/Button';
7
6
  import Typography from '@mui/material/Typography';
8
7
  import { createSvgIcon } from '@mui/material/utils';
9
8
  import Slide from '@mui/material/Slide';
10
9
  import useMediaQuery from '@mui/material/useMediaQuery';
11
10
  import { useTheme, ThemeProvider } from '@mui/material/styles';
12
11
  import { createTheme, Divider } from '@mui/material';
12
+ import Button from '@mui/material/Button';
13
13
 
14
14
  const CloseIcon = createSvgIcon(/*#__PURE__*/jsx("path", {
15
15
  d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
@@ -598,14 +598,15 @@ const MuiDialog = (props) => {
598
598
  const {
599
599
  primaryCtaTitle,
600
600
  secondaryCtaTitle,
601
- isPrimaryCtaLoading = false,
601
+ isPrimaryCtaLoading,
602
+ isSecondaryCtaLoading,
602
603
  isPrimaryCtaDisabled = false,
603
604
  isSecondaryCtaDisabled = false,
604
605
  onPrimaryCtaClick = _noop,
605
606
  onSecondaryCtaClick = _noop,
606
607
  tertiaryCtaTitle,
607
608
  tertiaryCtaStartIcon,
608
- isTertiaryCtaLoading = false,
609
+ isTertiaryCtaLoading,
609
610
  isTertiaryCtaDisabled = false,
610
611
  onTertiaryCtaClick = _noop
611
612
  } = actions || {};
@@ -678,8 +679,8 @@ const MuiDialog = (props) => {
678
679
  className: `tertiary-cta ${tertiaryCtaType === TERTIARY_CTA_TYPES.DESTRUCTIVE ? "destructive" : ""}`,
679
680
  variant: "text",
680
681
  onClick: onTertiaryCtaClick,
681
- loading: isTertiaryCtaLoading,
682
- disabled: isTertiaryCtaDisabled,
682
+ loading: !!isTertiaryCtaLoading,
683
+ disabled: isTertiaryCtaDisabled !== void 0 ? isTertiaryCtaDisabled : !!(isPrimaryCtaLoading || isSecondaryCtaLoading),
683
684
  startIcon: tertiaryCtaStartIcon,
684
685
  children: tertiaryCtaTitle
685
686
  }
@@ -690,12 +691,13 @@ const MuiDialog = (props) => {
690
691
  className: `vi-dialog-actions ${MODAL_SIZE_VS_CLASS_NAMES[selectedSize]}`,
691
692
  children: [
692
693
  secondaryCtaTitle && /* @__PURE__ */ jsx(
693
- Button,
694
+ LoadingButton,
694
695
  {
695
696
  className: "vi-dialog-cta",
696
697
  variant: "outlined",
697
698
  onClick: onSecondaryCtaClick,
698
- disabled: isSecondaryCtaDisabled,
699
+ disabled: isSecondaryCtaDisabled !== void 0 ? isSecondaryCtaDisabled : !!(isPrimaryCtaLoading || isTertiaryCtaLoading),
700
+ loading: !!isSecondaryCtaLoading,
699
701
  children: secondaryCtaTitle
700
702
  }
701
703
  ),
@@ -705,8 +707,8 @@ const MuiDialog = (props) => {
705
707
  className: `vi-dialog-cta ${subtype === "destructive" ? "destructive" : ""}`,
706
708
  variant: "contained",
707
709
  onClick: onPrimaryCtaClick,
708
- loading: isPrimaryCtaLoading,
709
- disabled: isPrimaryCtaDisabled,
710
+ loading: !!isPrimaryCtaLoading,
711
+ disabled: isPrimaryCtaDisabled !== void 0 ? isPrimaryCtaDisabled : !!(isSecondaryCtaLoading || isTertiaryCtaLoading),
710
712
  children: primaryCtaTitle
711
713
  }
712
714
  )
@@ -719,12 +721,13 @@ const MuiDialog = (props) => {
719
721
  className: `vi-dialog-actions without-tertiary ${MODAL_SIZE_VS_CLASS_NAMES[selectedSize]}`,
720
722
  children: [
721
723
  secondaryCtaTitle && /* @__PURE__ */ jsx(
722
- Button,
724
+ LoadingButton,
723
725
  {
724
726
  className: "vi-dialog-cta",
725
727
  variant: "outlined",
726
728
  onClick: onSecondaryCtaClick,
727
- disabled: isSecondaryCtaDisabled,
729
+ disabled: isSecondaryCtaDisabled !== void 0 ? isSecondaryCtaDisabled : !!(isPrimaryCtaLoading || isTertiaryCtaLoading),
730
+ loading: !!isSecondaryCtaLoading,
728
731
  children: secondaryCtaTitle
729
732
  }
730
733
  ),
@@ -734,8 +737,8 @@ const MuiDialog = (props) => {
734
737
  className: `vi-dialog-cta ${subtype === "destructive" ? "destructive" : ""}`,
735
738
  variant: "contained",
736
739
  onClick: onPrimaryCtaClick,
737
- loading: isPrimaryCtaLoading,
738
- disabled: isPrimaryCtaDisabled,
740
+ loading: !!isPrimaryCtaLoading,
741
+ disabled: isPrimaryCtaDisabled !== void 0 ? isPrimaryCtaDisabled : !!(isSecondaryCtaLoading || isTertiaryCtaLoading),
739
742
  children: primaryCtaTitle
740
743
  }
741
744
  )
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "url": "https://github.com/viplatform/mui-dialog/issues"
8
8
  },
9
9
  "homepage": "https://github.com/viplatform/mui-dialog#readme",
10
- "version": "1.0.8",
10
+ "version": "1.0.9",
11
11
  "files": [
12
12
  "dist"
13
13
  ],
@@ -32,20 +32,20 @@
32
32
  "material"
33
33
  ],
34
34
  "scripts": {
35
- "build": "npm run lint && vite build",
36
- "lint": "npx tsc --noEmit && eslint",
37
- "lint:fix": "npm run lint --fix",
35
+ "build": "yarn lint && vite build",
36
+ "lint": "tsc --noEmit && eslint",
37
+ "lint:fix": "yarn lint --fix",
38
38
  "storybook": "storybook dev -p 6006",
39
39
  "build-storybook": "storybook build",
40
40
  "test": "vitest",
41
41
  "release": "standard-version",
42
42
  "coverage": "vitest run --coverage",
43
43
  "prepare": "husky",
44
- "prepublishOnly": "npm run build"
44
+ "prepublishOnly": "yarn build"
45
45
  },
46
46
  "standard-version": {
47
47
  "scripts": {
48
- "prerelease": "npm run build"
48
+ "prerelease": "yarn build"
49
49
  },
50
50
  "skip": {
51
51
  "changelog": true
@@ -65,14 +65,8 @@
65
65
  }
66
66
  },
67
67
  "dependencies": {
68
- "@emotion/react": "^11.13.0",
69
- "@emotion/styled": "^11.13.0",
70
68
  "@mui/icons-material": "^7.1.0",
71
- "@mui/lab": "^7.0.0-beta.12",
72
- "@mui/material": "^7.0.0",
73
- "@types/react": "^18.0.0 || ^19.0.0",
74
- "react": "^18.0.0 || ^19.0.0",
75
- "react-dom": "^18.0.0 || ^19.0.0"
69
+ "@mui/lab": "^7.0.0-beta.12"
76
70
  },
77
71
  "devDependencies": {
78
72
  "@emotion/react": "^11.14.0",