@czi-sds/components 15.1.1 → 15.3.0

package/dist/src/core/Dialog/__snapshots__/index.test.js.snap

@@ -0,0 +1,382 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Dialog /> Default story renders snapshot 1`] = `
+<button
+  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-gsef57-MuiButtonBase-root-MuiButton-root"
+  tabindex="0"
+  type="button"
+>
+  Open 
+  m
+  <span
+    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+  />
+</button>
+`;
+
+exports[`<Dialog /> Dialog all sizes match the snapshots 1`] = `
+<h2
+  class="MuiTypography-root MuiTypography-h6 MuiDialogTitle-root css-uq0kkp-MuiTypography-root-MuiDialogTitle-root"
+  data-testid="dialog-title"
+  id="mui-2"
+>
+  <button
+    aria-label="Close"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-zrciyy-MuiButtonBase-root-MuiIconButton-root"
+    tabindex="0"
+    type="button"
+  >
+    <div
+      class="css-1ft6wgl"
+    >
+      <svg
+        aria-hidden="true"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
+        data-jest-file-name="IconXMarkLarge.svg"
+        data-jest-svg-name="IconXMarkLarge"
+        data-testid="IconXMarkLarge"
+        fillcontrast="white"
+        focusable="false"
+        viewBox="0 0 22 22"
+      />
+    </div>
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
+  </button>
+  <p
+    class="MuiTypography-root MuiTypography-body1 css-1c15p3u-MuiTypography-root"
+  >
+    Title
+  </p>
+  <p
+    class="MuiTypography-root MuiTypography-body1 css-l7o1a2-MuiTypography-root"
+  >
+    Optional subtitle
+  </p>
+</h2>
+`;
+
+exports[`<Dialog /> Dialog all sizes match the snapshots 2`] = `
+<div
+  class="MuiDialogContent-root css-1sec6bs-MuiDialogContent-root"
+  data-testid="dialog-content"
+>
+  Content Module
+</div>
+`;
+
+exports[`<Dialog /> Dialog all sizes match the snapshots 3`] = `
+<div
+  class="MuiDialogActions-root MuiDialogActions-spacing css-z3x4od-MuiDialogActions-root"
+  data-testid="dialog-actions"
+>
+  <button
+    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-39o5u-MuiButtonBase-root-MuiButton-root"
+    tabindex="0"
+    type="button"
+  >
+    Secondary Action
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
+  </button>
+  <button
+    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-4j8oia-MuiButtonBase-root-MuiButton-root"
+    tabindex="0"
+    type="button"
+  >
+    Primary Action
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
+  </button>
+</div>
+`;
+
+exports[`<Dialog /> Dialog all sizes match the snapshots 4`] = `
+<h2
+  class="MuiTypography-root MuiTypography-h6 MuiDialogTitle-root css-uq0kkp-MuiTypography-root-MuiDialogTitle-root"
+  data-testid="dialog-title"
+  id="mui-3"
+>
+  <button
+    aria-label="Close"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-zrciyy-MuiButtonBase-root-MuiIconButton-root"
+    tabindex="0"
+    type="button"
+  >
+    <div
+      class="css-1ft6wgl"
+    >
+      <svg
+        aria-hidden="true"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
+        data-jest-file-name="IconXMarkLarge.svg"
+        data-jest-svg-name="IconXMarkLarge"
+        data-testid="IconXMarkLarge"
+        fillcontrast="white"
+        focusable="false"
+        viewBox="0 0 22 22"
+      />
+    </div>
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
+  </button>
+  <p
+    class="MuiTypography-root MuiTypography-body1 css-1c15p3u-MuiTypography-root"
+  >
+    Title
+  </p>
+  <p
+    class="MuiTypography-root MuiTypography-body1 css-l7o1a2-MuiTypography-root"
+  >
+    Optional subtitle
+  </p>
+</h2>
+`;
+
+exports[`<Dialog /> Dialog all sizes match the snapshots 5`] = `
+<div
+  class="MuiDialogContent-root css-1sec6bs-MuiDialogContent-root"
+  data-testid="dialog-content"
+>
+  Content Module
+</div>
+`;
+
+exports[`<Dialog /> Dialog all sizes match the snapshots 6`] = `
+<div
+  class="MuiDialogActions-root MuiDialogActions-spacing css-z3x4od-MuiDialogActions-root"
+  data-testid="dialog-actions"
+>
+  <button
+    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-39o5u-MuiButtonBase-root-MuiButton-root"
+    tabindex="0"
+    type="button"
+  >
+    Secondary Action
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
+  </button>
+  <button
+    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-4j8oia-MuiButtonBase-root-MuiButton-root"
+    tabindex="0"
+    type="button"
+  >
+    Primary Action
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
+  </button>
+</div>
+`;
+
+exports[`<Dialog /> Dialog all sizes match the snapshots 7`] = `
+<h2
+  class="MuiTypography-root MuiTypography-h6 MuiDialogTitle-root css-uq0kkp-MuiTypography-root-MuiDialogTitle-root"
+  data-testid="dialog-title"
+  id="mui-4"
+>
+  <button
+    aria-label="Close"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-zrciyy-MuiButtonBase-root-MuiIconButton-root"
+    tabindex="0"
+    type="button"
+  >
+    <div
+      class="css-1ft6wgl"
+    >
+      <svg
+        aria-hidden="true"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
+        data-jest-file-name="IconXMarkLarge.svg"
+        data-jest-svg-name="IconXMarkLarge"
+        data-testid="IconXMarkLarge"
+        fillcontrast="white"
+        focusable="false"
+        viewBox="0 0 22 22"
+      />
+    </div>
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
+  </button>
+  <p
+    class="MuiTypography-root MuiTypography-body1 css-1c15p3u-MuiTypography-root"
+  >
+    Title
+  </p>
+  <p
+    class="MuiTypography-root MuiTypography-body1 css-l7o1a2-MuiTypography-root"
+  >
+    Optional subtitle
+  </p>
+</h2>
+`;
+
+exports[`<Dialog /> Dialog all sizes match the snapshots 8`] = `
+<div
+  class="MuiDialogContent-root css-1sec6bs-MuiDialogContent-root"
+  data-testid="dialog-content"
+>
+  Content Module
+</div>
+`;
+
+exports[`<Dialog /> Dialog all sizes match the snapshots 9`] = `
+<div
+  class="MuiDialogActions-root MuiDialogActions-spacing css-z3x4od-MuiDialogActions-root"
+  data-testid="dialog-actions"
+>
+  <button
+    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-39o5u-MuiButtonBase-root-MuiButton-root"
+    tabindex="0"
+    type="button"
+  >
+    Secondary Action
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
+  </button>
+  <button
+    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-4j8oia-MuiButtonBase-root-MuiButton-root"
+    tabindex="0"
+    type="button"
+  >
+    Primary Action
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
+  </button>
+</div>
+`;
+
+exports[`<Dialog /> Dialog all sizes match the snapshots 10`] = `
+<h2
+  class="MuiTypography-root MuiTypography-h6 MuiDialogTitle-root css-uq0kkp-MuiTypography-root-MuiDialogTitle-root"
+  data-testid="dialog-title"
+  id="mui-5"
+>
+  <button
+    aria-label="Close"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-zrciyy-MuiButtonBase-root-MuiIconButton-root"
+    tabindex="0"
+    type="button"
+  >
+    <div
+      class="css-1ft6wgl"
+    >
+      <svg
+        aria-hidden="true"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
+        data-jest-file-name="IconXMarkLarge.svg"
+        data-jest-svg-name="IconXMarkLarge"
+        data-testid="IconXMarkLarge"
+        fillcontrast="white"
+        focusable="false"
+        viewBox="0 0 22 22"
+      />
+    </div>
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
+  </button>
+  <p
+    class="MuiTypography-root MuiTypography-body1 css-1c15p3u-MuiTypography-root"
+  >
+    Title
+  </p>
+  <p
+    class="MuiTypography-root MuiTypography-body1 css-l7o1a2-MuiTypography-root"
+  >
+    Optional subtitle
+  </p>
+</h2>
+`;
+
+exports[`<Dialog /> Dialog all sizes match the snapshots 11`] = `
+<div
+  class="MuiDialogContent-root css-1sec6bs-MuiDialogContent-root"
+  data-testid="dialog-content"
+>
+  Content Module
+</div>
+`;
+
+exports[`<Dialog /> Dialog all sizes match the snapshots 12`] = `
+<div
+  class="MuiDialogActions-root MuiDialogActions-spacing css-z3x4od-MuiDialogActions-root"
+  data-testid="dialog-actions"
+>
+  <button
+    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-39o5u-MuiButtonBase-root-MuiButton-root"
+    tabindex="0"
+    type="button"
+  >
+    Secondary Action
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
+  </button>
+  <button
+    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-4j8oia-MuiButtonBase-root-MuiButton-root"
+    tabindex="0"
+    type="button"
+  >
+    Primary Action
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
+  </button>
+</div>
+`;
+
+exports[`<Dialog /> renders Dialog left positioned buttons 1`] = `
+<div
+  class="MuiDialogActions-root MuiDialogActions-spacing css-1ordac3-MuiDialogActions-root"
+  data-testid="dialog-actions"
+>
+  <button
+    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-4j8oia-MuiButtonBase-root-MuiButton-root"
+    tabindex="0"
+    type="button"
+  >
+    Primary Action
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
+  </button>
+  <button
+    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-39o5u-MuiButtonBase-root-MuiButton-root"
+    tabindex="0"
+    type="button"
+  >
+    Secondary Action
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
+  </button>
+</div>
+`;
+
+exports[`<Dialog /> renders Dialog without title X button 1`] = `
+<h2
+  class="MuiTypography-root MuiTypography-h6 MuiDialogTitle-root css-uq0kkp-MuiTypography-root-MuiDialogTitle-root"
+  data-testid="dialog-title"
+  id="mui-6"
+>
+  <p
+    class="MuiTypography-root MuiTypography-body1 css-1c15p3u-MuiTypography-root"
+  >
+    Title
+  </p>
+  <p
+    class="MuiTypography-root MuiTypography-body1 css-l7o1a2-MuiTypography-root"
+  >
+    Optional subtitle
+  </p>
+</h2>
+`;

package/dist/src/core/Dialog/components/common.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type SdsSize = "xs" | "s" | "m" | "l";
+export declare const DialogContext: import("react").Context<{
+    sdsSize: SdsSize;
+}>;
+export {};

package/dist/src/core/Dialog/components/common.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogContext = void 0;
+var react_1 = require("react");
+exports.DialogContext = (0, react_1.createContext)({ sdsSize: "m" });

package/dist/src/core/Dialog/index.d.ts

@@ -0,0 +1,18 @@
+import { DialogProps as RawDialogProps } from "@mui/material";
+import React, { ComponentType } from "react";
+import { DialogPaperProps } from "../DialogPaper";
+import { DialogContext } from "./components/common";
+export { DialogContext };
+interface DialogExtraProps {
+    canClickOutsideClose?: boolean;
+    onClose?: (event: object, reason: string) => void;
+    sdsSize?: "xs" | "s" | "m" | "l";
+    PaperComponent?: ComponentType<DialogPaperProps>;
+    DialogComponent?: ComponentType<RawDialogProps>;
+}
+export type DialogProps = Omit<RawDialogProps, "nonce" | "rev" | "rel" | "autoFocus" | "content"> & DialogExtraProps;
+/**
+ * @see https://mui.com/material-ui/react-dialog/
+ */
+declare const Dialog: React.ForwardRefExoticComponent<Pick<DialogProps, "className" | "style" | "classes" | "onChange" | "children" | "sx" | "color" | "maxWidth" | "transitionDuration" | "translate" | "container" | "TransitionComponent" | "TransitionProps" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "fullWidth" | "open" | "components" | "componentsProps" | "slotProps" | "slots" | "closeAfterTransition" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "onBackdropClick" | "BackdropComponent" | "BackdropProps" | "fullScreen" | "PaperProps" | "scroll" | keyof DialogExtraProps> & React.RefAttributes<HTMLDivElement>>;
+export default Dialog;

package/dist/src/core/Dialog/index.js

@@ -0,0 +1,50 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogContext = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var react_1 = require("react");
+var DialogPaper_1 = __importDefault(require("../DialogPaper"));
+var common_1 = require("./components/common");
+Object.defineProperty(exports, "DialogContext", { enumerable: true, get: function () { return common_1.DialogContext; } });
+/**
+ * @see https://mui.com/material-ui/react-dialog/
+ */
+var Dialog = (0, react_1.forwardRef)(function Dialog(props, ref) {
+    var _a = props.canClickOutsideClose, canClickOutsideClose = _a === void 0 ? true : _a, onClose = props.onClose, _b = props.sdsSize, sdsSize = _b === void 0 ? "m" : _b, _c = props.PaperComponent, PaperComponent = _c === void 0 ? DialogPaper_1.default : _c, rest = __rest(props, ["canClickOutsideClose", "onClose", "sdsSize", "PaperComponent"]);
+    var contextValue = (0, react_1.useMemo)(function () { return ({ sdsSize: sdsSize }); }, [sdsSize]);
+    return ((0, jsx_runtime_1.jsx)(common_1.DialogContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(material_1.Dialog, __assign({ ref: ref, PaperComponent: PaperComponent }, rest, { onClose: function (event, reason) {
+                if (!canClickOutsideClose &&
+                    reason &&
+                    (reason === "backdropClick" || reason === "escapeKeyDown"))
+                    return;
+                if (onClose)
+                    onClose(event, reason);
+            } })) }));
+});
+exports.default = Dialog;

package/dist/src/core/Dialog/index.stories.d.ts

@@ -0,0 +1,46 @@
+import { Args } from "@storybook/react";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, Args>;
+export default _default;
+export declare const Default: {
+    args: {
+        buttonPosition: string;
+        longContent: boolean;
+        sdsSize: string;
+        titleOnClose: boolean;
+    };
+};
+export declare const LivePreview: {
+    args: {
+        titleOnClose: boolean;
+    };
+    parameters: {
+        snapshot: {
+            skip: boolean;
+        };
+    };
+    render: (args: Args) => JSX.Element;
+};
+export declare const Test: {
+    parameters: {
+        snapshot: {
+            skip: boolean;
+        };
+    };
+    render: (args: Args) => JSX.Element;
+};
+export declare const TestNoTitleOnClose: {
+    parameters: {
+        snapshot: {
+            skip: boolean;
+        };
+    };
+    render: (args: Args) => JSX.Element;
+};
+export declare const TestButtonPositionLeft: {
+    parameters: {
+        snapshot: {
+            skip: boolean;
+        };
+    };
+    render: (args: Args) => JSX.Element;
+};

package/dist/src/core/Dialog/index.stories.js

@@ -0,0 +1,147 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TestButtonPositionLeft = exports.TestNoTitleOnClose = exports.Test = exports.LivePreview = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Button_1 = __importDefault(require("../Button"));
+var DialogActions_1 = __importDefault(require("../DialogActions"));
+var DialogContent_1 = __importDefault(require("../DialogContent"));
+var DialogTitle_1 = __importDefault(require("../DialogTitle"));
+var index_1 = __importDefault(require("./index"));
+var LONG_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus feugiat turpis vitae odio posuere mattis. Duis tincidunt felis nibh, eget posuere diam sagittis ut. Mauris eleifend neque nec lacinia efficitur. Donec vitae diam ac massa tempus facilisis nec in mauris. Etiam id dignissim odio. Nam risus nibh, tempor ut sem quis, consequat condimentum diam. In risus leo, lacinia eget porttitor eget, viverra vel nulla. Vivamus et nibh sit amet tellus pharetra dictum ut nec ante. Nunc malesuada consequat quam, non fringilla nunc convallis et. Curabitur facilisis tristique est. Curabitur auctor pulvinar diam, ut pretium ante. Etiam a finibus elit. Cras in augue malesuada, cursus turpis posuere, volutpat ex. Sed sagittis suscipit congue. Aliquam et erat nec lacus vulputate mattis. Sed commodo purus ac dignissim sagittis. Donec nisi erat, gravida eget malesuada non, gravida quis nisl. In iaculis ipsum et varius finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar enim a eros condimentum, ac viverra magna volutpat. Proin sed cursus mauris. Curabitur condimentum lobortis placerat. Proin semper mauris id velit elementum, sed pellentesque arcu pulvinar. Curabitur hendrerit enim sit amet ante imperdiet porta. Ut semper neque et faucibus lacinia. Sed auctor ut ex ut ullamcorper. Integer nunc eros, efficitur vitae sapien at, imperdiet dictum magna. Mauris eget bibendum libero, in bibendum sem. Nulla convallis eu eros ac efficitur. Fusce porttitor, ante scelerisque dignissim sollicitudin, tortor lectus volutpat sapien, nec viverra lectus ipsum non libero. Donec aliquet quam sit amet turpis sodales condimentum. Nunc vehicula iaculis nulla. Etiam tempor dui non ullamcorper facilisis. Nam ut fermentum arcu. Etiam porttitor elementum leo a tempus. Sed posuere feugiat est sollicitudin lacinia. Vivamus vel lectus laoreet, rutrum sem sed, blandit libero. Sed pulvinar urna consectetur risus eleifend, in iaculis purus eleifend. Donec quis maximus dui. Suspendisse sit amet ultricies mi. Etiam malesuada odio eget felis posuere pulvinar. Aliquam nec pellentesque risus, in scelerisque sapien. Vivamus vel lobortis mi, id consequat diam. Quisque aliquam dignissim sem.";
+var Dialog = function (props) {
+    var buttonPosition = props.buttonPosition, _a = props.longContent, longContent = _a === void 0 ? false : _a, _b = props.isOpen, propsIsOpen = _b === void 0 ? false : _b, titleOnClose = props.titleOnClose, rest = __rest(props, ["buttonPosition", "longContent", "isOpen", "titleOnClose"]);
+    var _c = (0, react_1.useState)(propsIsOpen), isOpen = _c[0], setIsOpen = _c[1];
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button_1.default, { sdsStyle: "minimal", sdsType: "primary", onClick: handleClick, children: ["Open ", rest.sdsSize] }), (0, jsx_runtime_1.jsxs)(index_1.default, __assign({ onClose: handleClose, open: isOpen }, rest, { children: [(0, jsx_runtime_1.jsx)(DialogTitle_1.default, { title: "Title", subtitle: "Optional subtitle", onClose: titleOnClose ? handleClose : undefined, "data-testid": "dialog-title" }), (0, jsx_runtime_1.jsx)(DialogContent_1.default, { "data-testid": "dialog-content", children: longContent ? LONG_TEXT : "Content Module" }), (0, jsx_runtime_1.jsx)(DialogActions_1.default, { "data-testid": "dialog-actions", buttonPosition: buttonPosition, children: (0, jsx_runtime_1.jsx)(Buttons, {}) })] }))] }));
+    function Buttons() {
+        if (buttonPosition === "left") {
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, { sdsStyle: "square", sdsType: "primary", onClick: handleClose, children: "Primary Action" }), (0, jsx_runtime_1.jsx)(Button_1.default, { sdsStyle: "square", sdsType: "secondary", onClick: handleClose, children: "Secondary Action" })] }));
+        }
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, { sdsStyle: "square", sdsType: "secondary", onClick: handleClose, children: "Secondary Action" }), (0, jsx_runtime_1.jsx)(Button_1.default, { sdsStyle: "square", sdsType: "primary", onClick: handleClose, children: "Primary Action" })] }));
+    }
+    function handleClick() {
+        setIsOpen(true);
+    }
+    function handleClose() {
+        setIsOpen(false);
+    }
+};
+exports.default = {
+    argTypes: {
+        buttonPosition: {
+            control: {
+                type: "radio",
+            },
+            options: ["left", "right"],
+        },
+        canClickOutsideClose: {
+            control: {
+                type: "boolean",
+            },
+        },
+        longContent: {
+            control: {
+                type: "boolean",
+            },
+        },
+        sdsSize: {
+            control: {
+                type: "radio",
+            },
+            options: ["xs", "s", "m", "l"],
+        },
+        titleOnClose: {
+            control: {
+                type: "boolean",
+            },
+        },
+    },
+    component: Dialog,
+    title: "Dialog",
+};
+// Default
+exports.Default = {
+    args: {
+        buttonPosition: "right",
+        longContent: true,
+        sdsSize: "m",
+        titleOnClose: false,
+    },
+};
+// LivePreview
+function LivePreviewDemo(props) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Dialog, __assign({ sdsSize: "xs" }, props)), (0, jsx_runtime_1.jsx)(Dialog, __assign({ sdsSize: "s" }, props)), (0, jsx_runtime_1.jsx)(Dialog, __assign({ sdsSize: "m" }, props)), (0, jsx_runtime_1.jsx)(Dialog, __assign({ sdsSize: "l" }, props))] }));
+}
+exports.LivePreview = {
+    args: {
+        titleOnClose: false,
+    },
+    parameters: {
+        snapshot: {
+            skip: true,
+        },
+    },
+    render: function (args) { return (0, jsx_runtime_1.jsx)(LivePreviewDemo, __assign({}, args)); },
+};
+// Test
+function TestDemo(props) {
+    var defaultProps = __assign(__assign({}, props), { isOpen: true, titleOnClose: true });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Dialog, __assign({ sdsSize: "xs" }, defaultProps)), (0, jsx_runtime_1.jsx)(Dialog, __assign({ sdsSize: "s" }, defaultProps)), (0, jsx_runtime_1.jsx)(Dialog, __assign({ sdsSize: "m" }, defaultProps)), (0, jsx_runtime_1.jsx)(Dialog, __assign({ sdsSize: "l" }, defaultProps))] }));
+}
+exports.Test = {
+    parameters: {
+        snapshot: {
+            skip: true,
+        },
+    },
+    render: function (args) { return (0, jsx_runtime_1.jsx)(TestDemo, __assign({}, args)); },
+};
+// Test No Title On Close
+function TestNoTitleOnCloseDemo(props) {
+    return (0, jsx_runtime_1.jsx)(Dialog, __assign({ sdsSize: "xs" }, props, { isOpen: true }));
+}
+exports.TestNoTitleOnClose = {
+    parameters: {
+        snapshot: {
+            skip: true,
+        },
+    },
+    render: function (args) { return (0, jsx_runtime_1.jsx)(TestNoTitleOnCloseDemo, __assign({}, args)); },
+};
+// Test Button Position Left
+function TestButtonPositionLeftDemo(props) {
+    return (0, jsx_runtime_1.jsx)(Dialog, __assign({ sdsSize: "xs" }, props, { isOpen: true, buttonPosition: "left" }));
+}
+exports.TestButtonPositionLeft = {
+    parameters: {
+        snapshot: {
+            skip: true,
+        },
+    },
+    render: function (args) { return (0, jsx_runtime_1.jsx)(TestButtonPositionLeftDemo, __assign({}, args)); },
+};

package/dist/src/core/Dialog/index.test.d.ts

@@ -0,0 +1 @@
+export {};