@justeattakeaway/pie-modal 0.43.3 → 0.43.4

package/custom-elements.json

@@ -87,7 +87,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    headingLevel: 'h2',\n    hasBackButton: false,\n    hasStackedActions: false,\n    isDismissible: false,\n    isFooterPinned: true,\n    isFullWidthBelowMid: false,\n    isLoading: false,\n    isOpen: false,\n    position: 'center',\n    size: 'medium',\n}"
+          "default": "{\n    hasBackButton: false,\n    hasStackedActions: false,\n    headingLevel: 'h2',\n    isOpen: false,\n    isDismissible: false,\n    isFooterPinned: true,\n    isFullWidthBelowMid: false,\n    isLoading: false,\n    position: 'center',\n    size: 'medium',\n}"
         }
       ],
       "exports": [

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
@@ -28,7 +28,7 @@ export declare type AriaProps = {
     loading?: string;
 };
 
-export declare type DefaultProps = ComponentDefaultPropsGeneric<ModalProps, 'headingLevel' | 'hasBackButton' | 'hasStackedActions' | 'isDismissible' | 'isFooterPinned' | 'isFullWidthBelowMid' | 'isLoading' | 'isOpen' | 'position' | 'size'>;
+export declare type DefaultProps = ComponentDefaultProps<ModalProps, keyof Omit<ModalProps, 'aria' | 'heading' | 'leadingAction' | 'supportingAction' | 'returnFocusAfterCloseSelector'>>;
 
 export declare const defaultProps: DefaultProps;
 
@@ -93,6 +93,10 @@ export declare type ModalProps = {
      * The leading action configuration for the modal.
      */
     leadingAction?: ActionProps;
+    /**
+     * The supporting action configuration for the modal.
+     */
+    supportingAction?: ActionProps;
     position?: typeof positions[number];
     /**
      * The selector for the element that you would like focus to be returned to when the modal is closed, e.g., #skipToMain
@@ -102,10 +106,6 @@ export declare type ModalProps = {
      * The size of the modal; this controls how wide it will appear on the page.
      */
     size?: typeof sizes[number];
-    /**
-     * The supporting action configuration for the modal.
-     */
-    supportingAction?: ActionProps;
 };
 
 /**

package/dist/index.js

@@ -74,14 +74,14 @@ var S = typeof window < "u" && window.navigator && window.navigator.platform &&
 };
 const J = `*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:white;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.1)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-l-family);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-04);border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);background-color:var(--modal-bg-color);padding:0;--modal-margin-none: var(--dt-spacing-none);--modal-margin-small: var(--dt-spacing-g);--modal-margin-large: var(--dt-spacing-j);--modal-margin-block: var(--modal-margin-small);--modal-block-size: fit-content;--modal-inline-size: 75%;--modal-max-block-size: calc(100vh - calc(var(--modal-margin-block) * 2));--modal-max-inline-size: var(--modal-size-m);block-size:var(--modal-block-size);inline-size:var(--modal-inline-size);max-block-size:var(--modal-max-block-size);max-inline-size:var(--modal-max-inline-size)}.c-modal:focus-visible{outline:none}@media (width < 768px){.c-modal pie-icon-button{--btn-dimension: 40px}}.c-modal[open]{display:flex;flex-direction:column}@media (min-width: 768px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal[size=small]{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 768px){.c-modal[size=small]{--modal-margin-block: var(--modal-margin-large)}}.c-modal[size=large]{--modal-inline-size: 75%;--modal-max-inline-size: var(--modal-size-l);--modal-margin-block: var(--modal-margin-large)}@media (width < 768px){.c-modal[size=large],.c-modal[size=medium][isfullwidthbelowmid]{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%;--modal-max-inline-size: 100%}.c-modal[size=large]>.c-modal-scrollContainer,.c-modal[size=medium][isfullwidthbelowmid]>.c-modal-scrollContainer{block-size:100%}}.c-modal[position=top]{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (width < 768px){.c-modal[position=top][size=large],.c-modal[position=top][isfullwidthbelowmid][size=medium]{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:rgba(0,0,0,.55)}.c-modal .c-modal-footer{--modal-button-spacing: var(--dt-spacing-d);--modal-footer-padding: var(--dt-spacing-d);display:flex;flex-flow:row-reverse;flex-wrap:wrap;gap:var(--modal-button-spacing);padding:var(--modal-footer-padding)}@media (min-width: 768px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (width < 768px){.c-modal[hasstackedactions] .c-modal-footer{flex-direction:column}}.c-modal .c-modal-header{display:grid;grid-template-areas:"back heading close";grid-template-columns:minmax(0,max-content) minmax(0,1fr) minmax(0,max-content);align-items:start}.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--narrow) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--narrow) * 1px);--modal-header-font-weight: var(--dt-font-heading-m-weight);font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);margin:0;grid-area:heading;margin-inline-start:var(--dt-spacing-d);margin-inline-end:var(--dt-spacing-d);margin-block:14px}@media (min-width: 768px){.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);margin-inline-start:var(--dt-spacing-e);margin-inline-end:var(--dt-spacing-e);margin-block:20px}}.c-modal[hasbackbutton] .c-modal-heading{margin-inline-start:var(--dt-spacing-b)}@media (min-width: 768px){.c-modal[hasbackbutton] .c-modal-heading{margin-inline-start:var(--dt-spacing-c)}}.c-modal[isdismissible] .c-modal-heading{margin-inline-end:var(--dt-spacing-d)}@media (min-width: 768px){.c-modal[isdismissible] .c-modal-heading{margin-inline-end:var(--dt-spacing-e)}}.c-modal .c-modal-backBtn{grid-area:back;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-b);margin-inline-end:var(--dt-spacing-none)}@media (min-width: 768px){.c-modal .c-modal-backBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-c);margin-inline-end:var(--dt-spacing-none)}}.c-modal .c-modal-closeBtn{grid-area:close;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-b)}@media (min-width: 768px){.c-modal .c-modal-closeBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-c)}}.c-modal .c-modal-content{--modal-content-font-size: calc(var(--dt-font-size-16) * 1px);--modal-content-font-weight: var(--dt-font-weight-regular);--modal-content-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--modal-content-padding-block: var(--dt-spacing-a);--modal-content-padding-inline: var(--dt-spacing-d);position:relative;min-block-size:var(--dt-spacing-j);font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-inline-start:var(--modal-content-padding-inline);padding-inline-end:var(--modal-content-padding-inline);padding-block-start:var(--modal-content-padding-block);padding-block-end:var(--modal-content-padding-block-end);flex-grow:1}@media (min-width: 768px){.c-modal .c-modal-content{--modal-content-padding-inline: var(--dt-spacing-e)}}.c-modal .c-modal-content.c-modal-hasFooterActions{padding-block-end:var(--modal-content-padding-block)}.c-modal .c-modal-content--scrollable{background:linear-gradient(to bottom,transparent,var(--dt-color-container-default) 75%) center bottom,linear-gradient(transparent,var(--dt-color-border-strong)) center bottom;background-repeat:no-repeat;background-size:100% 48px,100% 12px;background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer{display:flex;flex-direction:column;overflow-y:auto;--bg-scroll-end: linear-gradient(rgba(255, 255, 255, 0), var(--dt-color-container-default) 70%) 0 100%;--bg-scroll-bottom: radial-gradient(farthest-corner at 50% 100%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)) 0 100%;--bg-size-scroll-end: 100% 40px;--bg-size-scroll-bottom: 100% 8px;background:var(--bg-scroll-end),var(--bg-scroll-bottom);background-repeat:no-repeat;background-size:var(--bg-size-scroll-end),var(--bg-size-scroll-bottom);background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer .c-modal-content{flex-shrink:0}.c-modal[isfooterpinned] .c-modal-content{overflow-y:auto}.c-modal[isLoading] .c-modal-content pie-spinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.c-modal[isLoading] .c-modal-content .c-modal-contentInner{display:none}@supports not (aspect-ratio: 1/1){.c-modal .c-modal-scrollContainer{background:none}}
 `, Q = ["h1", "h2", "h3", "h4", "h5", "h6"], Z = ["small", "medium", "large"], ee = ["top", "center"], _ = "pie-modal-close", w = "pie-modal-open", C = "pie-modal-back", ie = "pie-modal-leading-action-click", oe = "pie-modal-supporting-action-click", d = {
-  headingLevel: "h2",
   hasBackButton: !1,
   hasStackedActions: !1,
+  headingLevel: "h2",
+  isOpen: !1,
   isDismissible: !1,
   isFooterPinned: !0,
   isFullWidthBelowMid: !1,
   isLoading: !1,
-  isOpen: !1,
   position: "center",
   size: "medium"
 };

package/dist/react.d.ts

@@ -1,4 +1,4 @@
-import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
@@ -29,7 +29,7 @@ export declare type AriaProps = {
     loading?: string;
 };
 
-export declare type DefaultProps = ComponentDefaultPropsGeneric<ModalProps, 'headingLevel' | 'hasBackButton' | 'hasStackedActions' | 'isDismissible' | 'isFooterPinned' | 'isFullWidthBelowMid' | 'isLoading' | 'isOpen' | 'position' | 'size'>;
+export declare type DefaultProps = ComponentDefaultProps<ModalProps, keyof Omit<ModalProps, 'aria' | 'heading' | 'leadingAction' | 'supportingAction' | 'returnFocusAfterCloseSelector'>>;
 
 export declare const defaultProps: DefaultProps;
 
@@ -90,6 +90,10 @@ export declare type ModalProps = {
      * The leading action configuration for the modal.
      */
     leadingAction?: ActionProps;
+    /**
+     * The supporting action configuration for the modal.
+     */
+    supportingAction?: ActionProps;
     position?: typeof positions[number];
     /**
      * The selector for the element that you would like focus to be returned to when the modal is closed, e.g., #skipToMain
@@ -99,10 +103,6 @@ export declare type ModalProps = {
      * The size of the modal; this controls how wide it will appear on the page.
      */
     size?: typeof sizes[number];
-    /**
-     * The supporting action configuration for the modal.
-     */
-    supportingAction?: ActionProps;
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-modal",
-  "version": "0.43.3",
+  "version": "0.43.4",
   "description": "PIE design system modal built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -46,11 +46,11 @@
     "extends": "../../../package.json"
   },
   "dependencies": {
-    "@justeattakeaway/pie-button": "0.47.7",
-    "@justeattakeaway/pie-icon-button": "0.28.8",
-    "@justeattakeaway/pie-icons-webc": "0.24.1",
-    "@justeattakeaway/pie-spinner": "0.6.5",
-    "@justeattakeaway/pie-webc-core": "0.23.0",
+    "@justeattakeaway/pie-button": "0.47.8",
+    "@justeattakeaway/pie-icon-button": "0.28.9",
+    "@justeattakeaway/pie-icons-webc": "0.24.2",
+    "@justeattakeaway/pie-spinner": "0.6.6",
+    "@justeattakeaway/pie-webc-core": "0.24.0",
     "body-scroll-lock": "3.1.5",
     "dialog-polyfill": "0.5.6"
   },

package/src/defs.ts

@@ -1,4 +1,4 @@
-import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
 import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
 
@@ -93,6 +93,11 @@ export type ModalProps = {
      */
     leadingAction?: ActionProps;
 
+    /**
+     * The supporting action configuration for the modal.
+     */
+    supportingAction?: ActionProps;
+
     /*
      * The position of the modal; this controls where it will appear on the page.
      */
@@ -107,11 +112,6 @@ export type ModalProps = {
      * The size of the modal; this controls how wide it will appear on the page.
      */
     size?: typeof sizes[number];
-
-    /**
-     * The supporting action configuration for the modal.
-     */
-    supportingAction?: ActionProps;
 };
 
 /**
@@ -151,17 +151,17 @@ export const ON_MODAL_SUPPORTING_ACTION_CLICK = 'pie-modal-supporting-action-cli
 
 export type ModalActionType = 'leading' | 'supporting';
 
-export type DefaultProps = ComponentDefaultPropsGeneric<ModalProps, 'headingLevel'|'hasBackButton'|'hasStackedActions'|'isDismissible'|'isFooterPinned'|'isFullWidthBelowMid'|'isLoading'|'isOpen'|'position'|'size'>;
+export type DefaultProps = ComponentDefaultProps<ModalProps, keyof Omit<ModalProps, 'aria' | 'heading' | 'leadingAction' | 'supportingAction' | 'returnFocusAfterCloseSelector'>>;
 
 export const defaultProps: DefaultProps = {
-    headingLevel: 'h2',
     hasBackButton: false,
     hasStackedActions: false,
+    headingLevel: 'h2',
+    isOpen: false,
     isDismissible: false,
     isFooterPinned: true,
     isFullWidthBelowMid: false,
     isLoading: false,
-    isOpen: false,
     position: 'center',
     size: 'medium',
 };