@activecollab/components 2.0.241 → 2.0.242
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.
- package/dist/cjs/components/ConfirmDialog/ConfirmDialog.js +5 -2
- package/dist/cjs/components/ConfirmDialog/ConfirmDialog.js.map +1 -1
- package/dist/cjs/components/Dialog/Styles.js +1 -1
- package/dist/cjs/components/Dialog/Styles.js.map +1 -1
- package/dist/esm/components/ConfirmDialog/ConfirmDialog.d.ts +1 -0
- package/dist/esm/components/ConfirmDialog/ConfirmDialog.d.ts.map +1 -1
- package/dist/esm/components/ConfirmDialog/ConfirmDialog.js +4 -2
- package/dist/esm/components/ConfirmDialog/ConfirmDialog.js.map +1 -1
- package/dist/esm/components/Dialog/Styles.d.ts.map +1 -1
- package/dist/esm/components/Dialog/Styles.js +1 -1
- package/dist/esm/components/Dialog/Styles.js.map +1 -1
- package/dist/index.js +6 -3
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -29,7 +29,9 @@ var ConfirmDialog = exports.ConfirmDialog = /*#__PURE__*/(0, _react.forwardRef)(
|
|
|
29
29
|
_ref$shouldShowCancel = _ref.shouldShowCancelButton,
|
|
30
30
|
shouldShowCancelButton = _ref$shouldShowCancel === void 0 ? true : _ref$shouldShowCancel,
|
|
31
31
|
_ref$isLoading = _ref.isLoading,
|
|
32
|
-
isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading
|
|
32
|
+
isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
|
|
33
|
+
_ref$fullWidth = _ref.fullWidth,
|
|
34
|
+
fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth;
|
|
33
35
|
(0, _react.useEffect)(function () {
|
|
34
36
|
var handleKeyDown = function handleKeyDown(event) {
|
|
35
37
|
if (event.key === "Enter" && onConfirm) {
|
|
@@ -49,7 +51,8 @@ var ConfirmDialog = exports.ConfirmDialog = /*#__PURE__*/(0, _react.forwardRef)(
|
|
|
49
51
|
open: open,
|
|
50
52
|
onClose: onCancel,
|
|
51
53
|
className: (0, _classnames.default)("c-confirm-dialog", className),
|
|
52
|
-
disableCloseOnEsc: isLoading
|
|
54
|
+
disableCloseOnEsc: isLoading,
|
|
55
|
+
fullWidth: fullWidth
|
|
53
56
|
}, /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.Title, null, dialogTitle), /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.ContentDivider, null), /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.Content, null, /*#__PURE__*/_react.default.createElement(_Body.Body2, {
|
|
54
57
|
lineHeight: "loose",
|
|
55
58
|
color: "secondary",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfirmDialog.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Button","_Dialog","_Body","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ConfirmDialog","exports","forwardRef","_ref","ref","_ref$open","open","onCancel","onConfirm","className","_ref$dialogTitle","dialogTitle","_ref$dialogContent","dialogContent","_ref$confirmBtnText","confirmBtnText","_ref$cancelBtnText","cancelBtnText","_ref$shouldShowCancel","shouldShowCancelButton","_ref$isLoading","isLoading","useEffect","handleKeyDown","event","key","preventDefault","window","addEventListener","removeEventListener","createElement","Dialog","onClose","classnames","disableCloseOnEsc","Title","ContentDivider","Content","Body2","lineHeight","color","whitespace","Actions","Button","variant","style","marginRight","onClick","disabled","type","displayName"],"sources":["../../../../src/components/ConfirmDialog/ConfirmDialog.tsx"],"sourcesContent":["import React, { forwardRef, useEffect } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { Button } from \"../Button/Button\";\nimport { Dialog } from \"../Dialog\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\n\nexport interface ConfirmDialogProps {\n open?: boolean;\n onCancel?: () => void;\n onConfirm?: () => void;\n className?: string;\n dialogTitle?: string;\n dialogContent?: string;\n confirmBtnText?: string;\n cancelBtnText?: string;\n shouldShowCancelButton?: boolean;\n isLoading?: boolean;\n}\n\nexport const ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(\n (\n {\n open = false,\n onCancel,\n onConfirm,\n className,\n dialogTitle = \"Discard changes?\",\n dialogContent = \"All unsaved changes will be lost.\",\n confirmBtnText = \"OK\",\n cancelBtnText = \"Cancel\",\n shouldShowCancelButton = true,\n isLoading = false,\n },\n ref\n ) => {\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Enter\" && onConfirm) {\n event.preventDefault();\n onConfirm();\n }\n };\n\n if (open) {\n window.addEventListener(\"keydown\", handleKeyDown);\n }\n\n return () => {\n window.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [open, onConfirm]);\n\n return (\n <Dialog\n ref={ref}\n open={open}\n onClose={onCancel}\n className={classnames(\"c-confirm-dialog\", className)}\n disableCloseOnEsc={isLoading}\n >\n <Dialog.Title>{dialogTitle}</Dialog.Title>\n <Dialog.ContentDivider />\n <Dialog.Content>\n <Body2 lineHeight=\"loose\" color=\"secondary\" whitespace=\"pre-line\">\n {dialogContent}\n </Body2>\n </Dialog.Content>\n <Dialog.ContentDivider />\n <Dialog.Actions>\n <Button\n variant=\"primary\"\n style={{ marginRight: \"12px\" }}\n onClick={onConfirm}\n disabled={isLoading}\n >\n {confirmBtnText}\n </Button>\n {shouldShowCancelButton ? (\n <Button\n variant=\"secondary\"\n data-action=\"cancel\"\n onClick={onCancel}\n type=\"button\"\n disabled={isLoading}\n >\n {cancelBtnText}\n </Button>\n ) : null}\n </Dialog.Actions>\n </Dialog>\n );\n }\n);\n\nConfirmDialog.displayName = \"ConfirmDialog\";\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AAAqD,SAAAE,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAX,wBAAAW,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAH,UAAA,SAAAG,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAF,OAAA,EAAAE,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAJ,CAAA,UAAAG,CAAA,CAAAE,GAAA,CAAAL,CAAA,OAAAM,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAZ,CAAA,oBAAAY,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAY,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAX,CAAA,EAAAY,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAZ,CAAA,CAAAY,CAAA,YAAAN,CAAA,CAAAR,OAAA,GAAAE,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAc,GAAA,CAAAjB,CAAA,EAAAM,CAAA,GAAAA,CAAA;
|
|
1
|
+
{"version":3,"file":"ConfirmDialog.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Button","_Dialog","_Body","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ConfirmDialog","exports","forwardRef","_ref","ref","_ref$open","open","onCancel","onConfirm","className","_ref$dialogTitle","dialogTitle","_ref$dialogContent","dialogContent","_ref$confirmBtnText","confirmBtnText","_ref$cancelBtnText","cancelBtnText","_ref$shouldShowCancel","shouldShowCancelButton","_ref$isLoading","isLoading","_ref$fullWidth","fullWidth","useEffect","handleKeyDown","event","key","preventDefault","window","addEventListener","removeEventListener","createElement","Dialog","onClose","classnames","disableCloseOnEsc","Title","ContentDivider","Content","Body2","lineHeight","color","whitespace","Actions","Button","variant","style","marginRight","onClick","disabled","type","displayName"],"sources":["../../../../src/components/ConfirmDialog/ConfirmDialog.tsx"],"sourcesContent":["import React, { forwardRef, useEffect } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { Button } from \"../Button/Button\";\nimport { Dialog } from \"../Dialog\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\n\nexport interface ConfirmDialogProps {\n open?: boolean;\n onCancel?: () => void;\n onConfirm?: () => void;\n className?: string;\n dialogTitle?: string;\n dialogContent?: string;\n confirmBtnText?: string;\n cancelBtnText?: string;\n shouldShowCancelButton?: boolean;\n isLoading?: boolean;\n fullWidth?: boolean;\n}\n\nexport const ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(\n (\n {\n open = false,\n onCancel,\n onConfirm,\n className,\n dialogTitle = \"Discard changes?\",\n dialogContent = \"All unsaved changes will be lost.\",\n confirmBtnText = \"OK\",\n cancelBtnText = \"Cancel\",\n shouldShowCancelButton = true,\n isLoading = false,\n fullWidth = false,\n },\n ref\n ) => {\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Enter\" && onConfirm) {\n event.preventDefault();\n onConfirm();\n }\n };\n\n if (open) {\n window.addEventListener(\"keydown\", handleKeyDown);\n }\n\n return () => {\n window.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [open, onConfirm]);\n\n return (\n <Dialog\n ref={ref}\n open={open}\n onClose={onCancel}\n className={classnames(\"c-confirm-dialog\", className)}\n disableCloseOnEsc={isLoading}\n fullWidth={fullWidth}\n >\n <Dialog.Title>{dialogTitle}</Dialog.Title>\n <Dialog.ContentDivider />\n <Dialog.Content>\n <Body2 lineHeight=\"loose\" color=\"secondary\" whitespace=\"pre-line\">\n {dialogContent}\n </Body2>\n </Dialog.Content>\n <Dialog.ContentDivider />\n <Dialog.Actions>\n <Button\n variant=\"primary\"\n style={{ marginRight: \"12px\" }}\n onClick={onConfirm}\n disabled={isLoading}\n >\n {confirmBtnText}\n </Button>\n {shouldShowCancelButton ? (\n <Button\n variant=\"secondary\"\n data-action=\"cancel\"\n onClick={onCancel}\n type=\"button\"\n disabled={isLoading}\n >\n {cancelBtnText}\n </Button>\n ) : null}\n </Dialog.Actions>\n </Dialog>\n );\n }\n);\n\nConfirmDialog.displayName = \"ConfirmDialog\";\n"],"mappings":"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"}
|
|
@@ -14,7 +14,7 @@ var StyledDialog = exports.StyledDialog = _styledComponents.default.div.withConf
|
|
|
14
14
|
displayName: "Styles__StyledDialog",
|
|
15
15
|
componentId: "sc-jwpvgm-0"
|
|
16
16
|
})(["display:flex;flex-direction:column;flex:1 1 auto;max-height:calc(100vh - 156px);background-color:var(--page-paper-main);color:var(--color-theme-900);box-shadow:var(--shadow-primary);border-radius:8px;width:310px;margin:60px auto 30px auto;position:relative;", " ", " ", " ", "{width:540px;margin:126px auto 30px auto;}"], function (props) {
|
|
17
|
-
return props.$fullWidth && (0, _styledComponents.css)(["width:calc(100% - 32px);max-width:640px;margin-left:16px;margin-right:16px;"]);
|
|
17
|
+
return props.$fullWidth && (0, _styledComponents.css)(["@media (max-width:640px){width:calc(100% - 32px);max-width:640px;margin-left:16px;margin-right:16px;}"]);
|
|
18
18
|
}, _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, _BreakPoints.screen.sm);
|
|
19
19
|
StyledDialog.displayName = "StyledDialog";
|
|
20
20
|
var StyledDialogTitle = exports.StyledDialogTitle = _styledComponents.default.div.withConfig({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_BreakPoints","_FontStyle","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledDialog","exports","styled","div","withConfig","displayName","componentId","props","$fullWidth","css","FontStyle","BoxSizingStyle","screen","sm","StyledDialogTitle","StyledDialogContent","StyledDialogContentDivider","StyledDialogActions"],"sources":["../../../../src/components/Dialog/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { screen } from \"../BreakPoints\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledDialog = styled.div<{ $fullWidth?: boolean }>`\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n max-height: calc(100vh - 156px);\n background-color: var(--page-paper-main);\n color: var(--color-theme-900);\n box-shadow: var(--shadow-primary);\n border-radius: 8px;\n width: 310px;\n margin: 60px auto 30px auto;\n position: relative;\n\n ${(props) =>\n props.$fullWidth &&\n css`\n width: calc(100% - 32px);\n
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_BreakPoints","_FontStyle","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledDialog","exports","styled","div","withConfig","displayName","componentId","props","$fullWidth","css","FontStyle","BoxSizingStyle","screen","sm","StyledDialogTitle","StyledDialogContent","StyledDialogContentDivider","StyledDialogActions"],"sources":["../../../../src/components/Dialog/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { screen } from \"../BreakPoints\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledDialog = styled.div<{ $fullWidth?: boolean }>`\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n max-height: calc(100vh - 156px);\n background-color: var(--page-paper-main);\n color: var(--color-theme-900);\n box-shadow: var(--shadow-primary);\n border-radius: 8px;\n width: 310px;\n margin: 60px auto 30px auto;\n position: relative;\n\n ${(props) =>\n props.$fullWidth &&\n css`\n @media (max-width: 640px) {\n width: calc(100% - 32px);\n max-width: 640px;\n margin-left: 16px;\n margin-right: 16px;\n }\n `}\n\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${screen.sm} {\n width: 540px;\n margin: 126px auto 30px auto;\n }\n`;\n\nStyledDialog.displayName = \"StyledDialog\";\n\nexport const StyledDialogTitle = styled.div`\n padding: 20px 30px;\n\n ${FontStyle}\n ${BoxSizingStyle}\n`;\nStyledDialogTitle.displayName = \"StyledDialogTitle\";\n\nexport const StyledDialogContent = styled.div`\n padding: 20px 30px;\n max-height: 580px;\n overflow-y: auto;\n flex: 1 1 auto;\n\n ${FontStyle}\n ${BoxSizingStyle}\n`;\nStyledDialogContent.displayName = \"StyledDialogContent\";\n\nexport const StyledDialogContentDivider = styled.div`\n border-top: 1px solid var(--border-primary);\n height: 1px;\n`;\nStyledDialogContentDivider.displayName = \"StyledDialogContentDivider\";\n\nexport const StyledDialogActions = styled.div`\n padding: 20px 30px;\n\n ${FontStyle}\n ${BoxSizingStyle}\n`;\nStyledDialogActions.displayName = \"StyledDialogActions\";\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AAAyC,SAAAI,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAElC,IAAMY,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAGE,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uUAalC,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,UAAU,QAChBC,qBAAG,4GAOF;AAAA,GAEDC,oBAAS,EACTC,8BAAc,EAEdC,mBAAM,CAACC,EAAE,CAIZ;AAEDb,YAAY,CAACK,WAAW,GAAG,cAAc;AAElC,IAAMS,iBAAiB,GAAAb,OAAA,CAAAa,iBAAA,GAAGZ,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oCAGvCI,oBAAS,EACTC,8BAAc,CACjB;AACDG,iBAAiB,CAACT,WAAW,GAAG,mBAAmB;AAE5C,IAAMU,mBAAmB,GAAAd,OAAA,CAAAc,mBAAA,GAAGb,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mFAMzCI,oBAAS,EACTC,8BAAc,CACjB;AACDI,mBAAmB,CAACV,WAAW,GAAG,qBAAqB;AAEhD,IAAMW,0BAA0B,GAAAf,OAAA,CAAAe,0BAAA,GAAGd,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8DAGnD;AACDU,0BAA0B,CAACX,WAAW,GAAG,4BAA4B;AAE9D,IAAMY,mBAAmB,GAAAhB,OAAA,CAAAgB,mBAAA,GAAGf,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oCAGzCI,oBAAS,EACTC,8BAAc,CACjB;AACDM,mBAAmB,CAACZ,WAAW,GAAG,qBAAqB"}
|
|
@@ -10,6 +10,7 @@ export interface ConfirmDialogProps {
|
|
|
10
10
|
cancelBtnText?: string;
|
|
11
11
|
shouldShowCancelButton?: boolean;
|
|
12
12
|
isLoading?: boolean;
|
|
13
|
+
fullWidth?: boolean;
|
|
13
14
|
}
|
|
14
15
|
export declare const ConfirmDialog: React.ForwardRefExoticComponent<ConfirmDialogProps & React.RefAttributes<HTMLDivElement>>;
|
|
15
16
|
//# sourceMappingURL=ConfirmDialog.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/ConfirmDialog/ConfirmDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAQrD,MAAM,WAAW,kBAAkB;IACjC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/ConfirmDialog/ConfirmDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAQrD,MAAM,WAAW,kBAAkB;IACjC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,aAAa,2FA2EzB,CAAC"}
|
|
@@ -14,7 +14,8 @@ export const ConfirmDialog = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
14
14
|
confirmBtnText = "OK",
|
|
15
15
|
cancelBtnText = "Cancel",
|
|
16
16
|
shouldShowCancelButton = true,
|
|
17
|
-
isLoading = false
|
|
17
|
+
isLoading = false,
|
|
18
|
+
fullWidth = false
|
|
18
19
|
} = _ref;
|
|
19
20
|
useEffect(() => {
|
|
20
21
|
const handleKeyDown = event => {
|
|
@@ -35,7 +36,8 @@ export const ConfirmDialog = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
35
36
|
open: open,
|
|
36
37
|
onClose: onCancel,
|
|
37
38
|
className: classnames("c-confirm-dialog", className),
|
|
38
|
-
disableCloseOnEsc: isLoading
|
|
39
|
+
disableCloseOnEsc: isLoading,
|
|
40
|
+
fullWidth: fullWidth
|
|
39
41
|
}, /*#__PURE__*/React.createElement(Dialog.Title, null, dialogTitle), /*#__PURE__*/React.createElement(Dialog.ContentDivider, null), /*#__PURE__*/React.createElement(Dialog.Content, null, /*#__PURE__*/React.createElement(Body2, {
|
|
40
42
|
lineHeight: "loose",
|
|
41
43
|
color: "secondary",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfirmDialog.js","names":["React","forwardRef","useEffect","classnames","Button","Dialog","Body2","ConfirmDialog","_ref","ref","open","onCancel","onConfirm","className","dialogTitle","dialogContent","confirmBtnText","cancelBtnText","shouldShowCancelButton","isLoading","handleKeyDown","event","key","preventDefault","window","addEventListener","removeEventListener","createElement","onClose","disableCloseOnEsc","Title","ContentDivider","Content","lineHeight","color","whitespace","Actions","variant","style","marginRight","onClick","disabled","type","displayName"],"sources":["../../../../src/components/ConfirmDialog/ConfirmDialog.tsx"],"sourcesContent":["import React, { forwardRef, useEffect } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { Button } from \"../Button/Button\";\nimport { Dialog } from \"../Dialog\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\n\nexport interface ConfirmDialogProps {\n open?: boolean;\n onCancel?: () => void;\n onConfirm?: () => void;\n className?: string;\n dialogTitle?: string;\n dialogContent?: string;\n confirmBtnText?: string;\n cancelBtnText?: string;\n shouldShowCancelButton?: boolean;\n isLoading?: boolean;\n}\n\nexport const ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(\n (\n {\n open = false,\n onCancel,\n onConfirm,\n className,\n dialogTitle = \"Discard changes?\",\n dialogContent = \"All unsaved changes will be lost.\",\n confirmBtnText = \"OK\",\n cancelBtnText = \"Cancel\",\n shouldShowCancelButton = true,\n isLoading = false,\n },\n ref\n ) => {\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Enter\" && onConfirm) {\n event.preventDefault();\n onConfirm();\n }\n };\n\n if (open) {\n window.addEventListener(\"keydown\", handleKeyDown);\n }\n\n return () => {\n window.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [open, onConfirm]);\n\n return (\n <Dialog\n ref={ref}\n open={open}\n onClose={onCancel}\n className={classnames(\"c-confirm-dialog\", className)}\n disableCloseOnEsc={isLoading}\n >\n <Dialog.Title>{dialogTitle}</Dialog.Title>\n <Dialog.ContentDivider />\n <Dialog.Content>\n <Body2 lineHeight=\"loose\" color=\"secondary\" whitespace=\"pre-line\">\n {dialogContent}\n </Body2>\n </Dialog.Content>\n <Dialog.ContentDivider />\n <Dialog.Actions>\n <Button\n variant=\"primary\"\n style={{ marginRight: \"12px\" }}\n onClick={onConfirm}\n disabled={isLoading}\n >\n {confirmBtnText}\n </Button>\n {shouldShowCancelButton ? (\n <Button\n variant=\"secondary\"\n data-action=\"cancel\"\n onClick={onCancel}\n type=\"button\"\n disabled={isLoading}\n >\n {cancelBtnText}\n </Button>\n ) : null}\n </Dialog.Actions>\n </Dialog>\n );\n }\n);\n\nConfirmDialog.displayName = \"ConfirmDialog\";\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,SAAS,QAAQ,OAAO;AAEpD,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,KAAK,QAAQ,8BAA8B;
|
|
1
|
+
{"version":3,"file":"ConfirmDialog.js","names":["React","forwardRef","useEffect","classnames","Button","Dialog","Body2","ConfirmDialog","_ref","ref","open","onCancel","onConfirm","className","dialogTitle","dialogContent","confirmBtnText","cancelBtnText","shouldShowCancelButton","isLoading","fullWidth","handleKeyDown","event","key","preventDefault","window","addEventListener","removeEventListener","createElement","onClose","disableCloseOnEsc","Title","ContentDivider","Content","lineHeight","color","whitespace","Actions","variant","style","marginRight","onClick","disabled","type","displayName"],"sources":["../../../../src/components/ConfirmDialog/ConfirmDialog.tsx"],"sourcesContent":["import React, { forwardRef, useEffect } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { Button } from \"../Button/Button\";\nimport { Dialog } from \"../Dialog\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\n\nexport interface ConfirmDialogProps {\n open?: boolean;\n onCancel?: () => void;\n onConfirm?: () => void;\n className?: string;\n dialogTitle?: string;\n dialogContent?: string;\n confirmBtnText?: string;\n cancelBtnText?: string;\n shouldShowCancelButton?: boolean;\n isLoading?: boolean;\n fullWidth?: boolean;\n}\n\nexport const ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(\n (\n {\n open = false,\n onCancel,\n onConfirm,\n className,\n dialogTitle = \"Discard changes?\",\n dialogContent = \"All unsaved changes will be lost.\",\n confirmBtnText = \"OK\",\n cancelBtnText = \"Cancel\",\n shouldShowCancelButton = true,\n isLoading = false,\n fullWidth = false,\n },\n ref\n ) => {\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Enter\" && onConfirm) {\n event.preventDefault();\n onConfirm();\n }\n };\n\n if (open) {\n window.addEventListener(\"keydown\", handleKeyDown);\n }\n\n return () => {\n window.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [open, onConfirm]);\n\n return (\n <Dialog\n ref={ref}\n open={open}\n onClose={onCancel}\n className={classnames(\"c-confirm-dialog\", className)}\n disableCloseOnEsc={isLoading}\n fullWidth={fullWidth}\n >\n <Dialog.Title>{dialogTitle}</Dialog.Title>\n <Dialog.ContentDivider />\n <Dialog.Content>\n <Body2 lineHeight=\"loose\" color=\"secondary\" whitespace=\"pre-line\">\n {dialogContent}\n </Body2>\n </Dialog.Content>\n <Dialog.ContentDivider />\n <Dialog.Actions>\n <Button\n variant=\"primary\"\n style={{ marginRight: \"12px\" }}\n onClick={onConfirm}\n disabled={isLoading}\n >\n {confirmBtnText}\n </Button>\n {shouldShowCancelButton ? (\n <Button\n variant=\"secondary\"\n data-action=\"cancel\"\n onClick={onCancel}\n type=\"button\"\n disabled={isLoading}\n >\n {cancelBtnText}\n </Button>\n ) : null}\n </Dialog.Actions>\n </Dialog>\n );\n }\n);\n\nConfirmDialog.displayName = \"ConfirmDialog\";\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,SAAS,QAAQ,OAAO;AAEpD,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,KAAK,QAAQ,8BAA8B;AAgBpD,OAAO,MAAMC,aAAa,gBAAGN,UAAU,CACrC,CAAAO,IAAA,EAcEC,GAAG,KACA;EAAA,IAdH;IACEC,IAAI,GAAG,KAAK;IACZC,QAAQ;IACRC,SAAS;IACTC,SAAS;IACTC,WAAW,GAAG,kBAAkB;IAChCC,aAAa,GAAG,mCAAmC;IACnDC,cAAc,GAAG,IAAI;IACrBC,aAAa,GAAG,QAAQ;IACxBC,sBAAsB,GAAG,IAAI;IAC7BC,SAAS,GAAG,KAAK;IACjBC,SAAS,GAAG;EACd,CAAC,GAAAZ,IAAA;EAGDN,SAAS,CAAC,MAAM;IACd,MAAMmB,aAAa,GAAIC,KAAoB,IAAK;MAC9C,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAIX,SAAS,EAAE;QACtCU,KAAK,CAACE,cAAc,CAAC,CAAC;QACtBZ,SAAS,CAAC,CAAC;MACb;IACF,CAAC;IAED,IAAIF,IAAI,EAAE;MACRe,MAAM,CAACC,gBAAgB,CAAC,SAAS,EAAEL,aAAa,CAAC;IACnD;IAEA,OAAO,MAAM;MACXI,MAAM,CAACE,mBAAmB,CAAC,SAAS,EAAEN,aAAa,CAAC;IACtD,CAAC;EACH,CAAC,EAAE,CAACX,IAAI,EAAEE,SAAS,CAAC,CAAC;EAErB,oBACEZ,KAAA,CAAA4B,aAAA,CAACvB,MAAM;IACLI,GAAG,EAAEA,GAAI;IACTC,IAAI,EAAEA,IAAK;IACXmB,OAAO,EAAElB,QAAS;IAClBE,SAAS,EAAEV,UAAU,CAAC,kBAAkB,EAAEU,SAAS,CAAE;IACrDiB,iBAAiB,EAAEX,SAAU;IAC7BC,SAAS,EAAEA;EAAU,gBAErBpB,KAAA,CAAA4B,aAAA,CAACvB,MAAM,CAAC0B,KAAK,QAAEjB,WAA0B,CAAC,eAC1Cd,KAAA,CAAA4B,aAAA,CAACvB,MAAM,CAAC2B,cAAc,MAAE,CAAC,eACzBhC,KAAA,CAAA4B,aAAA,CAACvB,MAAM,CAAC4B,OAAO,qBACbjC,KAAA,CAAA4B,aAAA,CAACtB,KAAK;IAAC4B,UAAU,EAAC,OAAO;IAACC,KAAK,EAAC,WAAW;IAACC,UAAU,EAAC;EAAU,GAC9DrB,aACI,CACO,CAAC,eACjBf,KAAA,CAAA4B,aAAA,CAACvB,MAAM,CAAC2B,cAAc,MAAE,CAAC,eACzBhC,KAAA,CAAA4B,aAAA,CAACvB,MAAM,CAACgC,OAAO,qBACbrC,KAAA,CAAA4B,aAAA,CAACxB,MAAM;IACLkC,OAAO,EAAC,SAAS;IACjBC,KAAK,EAAE;MAAEC,WAAW,EAAE;IAAO,CAAE;IAC/BC,OAAO,EAAE7B,SAAU;IACnB8B,QAAQ,EAAEvB;EAAU,GAEnBH,cACK,CAAC,EACRE,sBAAsB,gBACrBlB,KAAA,CAAA4B,aAAA,CAACxB,MAAM;IACLkC,OAAO,EAAC,WAAW;IACnB,eAAY,QAAQ;IACpBG,OAAO,EAAE9B,QAAS;IAClBgC,IAAI,EAAC,QAAQ;IACbD,QAAQ,EAAEvB;EAAU,GAEnBF,aACK,CAAC,GACP,IACU,CACV,CAAC;AAEb,CACF,CAAC;AAEDV,aAAa,CAACqC,WAAW,GAAG,eAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Dialog/Styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY;;
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Dialog/Styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY;;SA+BxB,CAAC;AAIF,eAAO,MAAM,iBAAiB,oEAK7B,CAAC;AAGF,eAAO,MAAM,mBAAmB,oEAQ/B,CAAC;AAGF,eAAO,MAAM,0BAA0B,oEAGtC,CAAC;AAGF,eAAO,MAAM,mBAAmB,oEAK/B,CAAC"}
|
|
@@ -5,7 +5,7 @@ import { FontStyle } from "../FontStyle";
|
|
|
5
5
|
export const StyledDialog = styled.div.withConfig({
|
|
6
6
|
displayName: "Styles__StyledDialog",
|
|
7
7
|
componentId: "sc-jwpvgm-0"
|
|
8
|
-
})(["display:flex;flex-direction:column;flex:1 1 auto;max-height:calc(100vh - 156px);background-color:var(--page-paper-main);color:var(--color-theme-900);box-shadow:var(--shadow-primary);border-radius:8px;width:310px;margin:60px auto 30px auto;position:relative;", " ", " ", " ", "{width:540px;margin:126px auto 30px auto;}"], props => props.$fullWidth && css(["width:calc(100% - 32px);max-width:640px;margin-left:16px;margin-right:16px;"]), FontStyle, BoxSizingStyle, screen.sm);
|
|
8
|
+
})(["display:flex;flex-direction:column;flex:1 1 auto;max-height:calc(100vh - 156px);background-color:var(--page-paper-main);color:var(--color-theme-900);box-shadow:var(--shadow-primary);border-radius:8px;width:310px;margin:60px auto 30px auto;position:relative;", " ", " ", " ", "{width:540px;margin:126px auto 30px auto;}"], props => props.$fullWidth && css(["@media (max-width:640px){width:calc(100% - 32px);max-width:640px;margin-left:16px;margin-right:16px;}"]), FontStyle, BoxSizingStyle, screen.sm);
|
|
9
9
|
StyledDialog.displayName = "StyledDialog";
|
|
10
10
|
export const StyledDialogTitle = styled.div.withConfig({
|
|
11
11
|
displayName: "Styles__StyledDialogTitle",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","screen","FontStyle","StyledDialog","div","withConfig","displayName","componentId","props","$fullWidth","sm","StyledDialogTitle","StyledDialogContent","StyledDialogContentDivider","StyledDialogActions"],"sources":["../../../../src/components/Dialog/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { screen } from \"../BreakPoints\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledDialog = styled.div<{ $fullWidth?: boolean }>`\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n max-height: calc(100vh - 156px);\n background-color: var(--page-paper-main);\n color: var(--color-theme-900);\n box-shadow: var(--shadow-primary);\n border-radius: 8px;\n width: 310px;\n margin: 60px auto 30px auto;\n position: relative;\n\n ${(props) =>\n props.$fullWidth &&\n css`\n width: calc(100% - 32px);\n
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","screen","FontStyle","StyledDialog","div","withConfig","displayName","componentId","props","$fullWidth","sm","StyledDialogTitle","StyledDialogContent","StyledDialogContentDivider","StyledDialogActions"],"sources":["../../../../src/components/Dialog/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { screen } from \"../BreakPoints\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledDialog = styled.div<{ $fullWidth?: boolean }>`\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n max-height: calc(100vh - 156px);\n background-color: var(--page-paper-main);\n color: var(--color-theme-900);\n box-shadow: var(--shadow-primary);\n border-radius: 8px;\n width: 310px;\n margin: 60px auto 30px auto;\n position: relative;\n\n ${(props) =>\n props.$fullWidth &&\n css`\n @media (max-width: 640px) {\n width: calc(100% - 32px);\n max-width: 640px;\n margin-left: 16px;\n margin-right: 16px;\n }\n `}\n\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${screen.sm} {\n width: 540px;\n margin: 126px auto 30px auto;\n }\n`;\n\nStyledDialog.displayName = \"StyledDialog\";\n\nexport const StyledDialogTitle = styled.div`\n padding: 20px 30px;\n\n ${FontStyle}\n ${BoxSizingStyle}\n`;\nStyledDialogTitle.displayName = \"StyledDialogTitle\";\n\nexport const StyledDialogContent = styled.div`\n padding: 20px 30px;\n max-height: 580px;\n overflow-y: auto;\n flex: 1 1 auto;\n\n ${FontStyle}\n ${BoxSizingStyle}\n`;\nStyledDialogContent.displayName = \"StyledDialogContent\";\n\nexport const StyledDialogContentDivider = styled.div`\n border-top: 1px solid var(--border-primary);\n height: 1px;\n`;\nStyledDialogContentDivider.displayName = \"StyledDialogContentDivider\";\n\nexport const StyledDialogActions = styled.div`\n padding: 20px 30px;\n\n ${FontStyle}\n ${BoxSizingStyle}\n`;\nStyledDialogActions.displayName = \"StyledDialogActions\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,MAAMC,YAAY,GAAGL,MAAM,CAACM,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uUAajCC,KAAK,IACNA,KAAK,CAACC,UAAU,IAChBV,GAAG,2GAOF,EAEDG,SAAS,EACTF,cAAc,EAEdC,MAAM,CAACS,EAAE,CAIZ;AAEDP,YAAY,CAACG,WAAW,GAAG,cAAc;AAEzC,OAAO,MAAMK,iBAAiB,GAAGb,MAAM,CAACM,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oCAGvCL,SAAS,EACTF,cAAc,CACjB;AACDW,iBAAiB,CAACL,WAAW,GAAG,mBAAmB;AAEnD,OAAO,MAAMM,mBAAmB,GAAGd,MAAM,CAACM,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mFAMzCL,SAAS,EACTF,cAAc,CACjB;AACDY,mBAAmB,CAACN,WAAW,GAAG,qBAAqB;AAEvD,OAAO,MAAMO,0BAA0B,GAAGf,MAAM,CAACM,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8DAGnD;AACDM,0BAA0B,CAACP,WAAW,GAAG,4BAA4B;AAErE,OAAO,MAAMQ,mBAAmB,GAAGhB,MAAM,CAACM,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oCAGzCL,SAAS,EACTF,cAAc,CACjB;AACDc,mBAAmB,CAACR,WAAW,GAAG,qBAAqB"}
|
package/dist/index.js
CHANGED
|
@@ -12560,7 +12560,7 @@
|
|
|
12560
12560
|
displayName: "Styles__StyledDialog",
|
|
12561
12561
|
componentId: "sc-jwpvgm-0"
|
|
12562
12562
|
})(["display:flex;flex-direction:column;flex:1 1 auto;max-height:calc(100vh - 156px);background-color:var(--page-paper-main);color:var(--color-theme-900);box-shadow:var(--shadow-primary);border-radius:8px;width:310px;margin:60px auto 30px auto;position:relative;", " ", " ", " ", "{width:540px;margin:126px auto 30px auto;}"], function (props) {
|
|
12563
|
-
return props.$fullWidth && styled.css(["width:calc(100% - 32px);max-width:640px;margin-left:16px;margin-right:16px;"]);
|
|
12563
|
+
return props.$fullWidth && styled.css(["@media (max-width:640px){width:calc(100% - 32px);max-width:640px;margin-left:16px;margin-right:16px;}"]);
|
|
12564
12564
|
}, FontStyle, BoxSizingStyle, screen.sm);
|
|
12565
12565
|
StyledDialog.displayName = "StyledDialog";
|
|
12566
12566
|
var StyledDialogTitle = styled__default["default"].div.withConfig({
|
|
@@ -13130,7 +13130,9 @@
|
|
|
13130
13130
|
_ref$shouldShowCancel = _ref.shouldShowCancelButton,
|
|
13131
13131
|
shouldShowCancelButton = _ref$shouldShowCancel === void 0 ? true : _ref$shouldShowCancel,
|
|
13132
13132
|
_ref$isLoading = _ref.isLoading,
|
|
13133
|
-
isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading
|
|
13133
|
+
isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
|
|
13134
|
+
_ref$fullWidth = _ref.fullWidth,
|
|
13135
|
+
fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth;
|
|
13134
13136
|
React.useEffect(function () {
|
|
13135
13137
|
var handleKeyDown = function handleKeyDown(event) {
|
|
13136
13138
|
if (event.key === "Enter" && onConfirm) {
|
|
@@ -13150,7 +13152,8 @@
|
|
|
13150
13152
|
open: open,
|
|
13151
13153
|
onClose: onCancel,
|
|
13152
13154
|
className: classNames__default["default"]("c-confirm-dialog", className),
|
|
13153
|
-
disableCloseOnEsc: isLoading
|
|
13155
|
+
disableCloseOnEsc: isLoading,
|
|
13156
|
+
fullWidth: fullWidth
|
|
13154
13157
|
}, /*#__PURE__*/React__default["default"].createElement(Dialog.Title, null, dialogTitle), /*#__PURE__*/React__default["default"].createElement(Dialog.ContentDivider, null), /*#__PURE__*/React__default["default"].createElement(Dialog.Content, null, /*#__PURE__*/React__default["default"].createElement(Body2, {
|
|
13155
13158
|
lineHeight: "loose",
|
|
13156
13159
|
color: "secondary",
|