@justeattakeaway/pie-modal 0.37.0 → 0.38.1

package/custom-elements.json

@@ -2,6 +2,12 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/defs-react.js",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/defs.js",

package/dist/index.d.ts

@@ -43,11 +43,11 @@ export declare type ModalProps = {
     /**
      * When true, the modal will have a back button. This currently behaves the same as the close button.
      */
-    hasBackButton: boolean;
+    hasBackButton?: boolean;
     /**
      * When true, the modal will have a back button. This currently behaves the same as the close button.
      */
-    hasStackedActions: boolean;
+    hasStackedActions?: boolean;
     /**
      * The text to display in the modal's heading.
      */
@@ -55,11 +55,11 @@ export declare type ModalProps = {
     /**
      * The HTML heading tag to use for the modal's heading. Can be h1-h6.
      */
-    headingLevel: typeof headingLevels[number];
+    headingLevel?: typeof headingLevels[number];
     /**
      * When true, the modal will be open.
      */
-    isOpen: boolean;
+    isOpen?: boolean;
     /**
      * When set to `true`:
      *  1. The close button within the modal will be visible.
@@ -71,24 +71,24 @@ export declare type ModalProps = {
      *  2. The user can NOT dismiss the modal via the ESCAPE key or clicking the backdrop.
      *
      */
-    isDismissible: boolean;
+    isDismissible?: boolean;
     /**
      * When false, the modal footer will scroll with the content inside the modal body.
      */
-    isFooterPinned: boolean;
+    isFooterPinned?: boolean;
     /**
      * This controls whether a *medium-sized* modal will cover the full width of the page when below the mid breakpoint.
      */
-    isFullWidthBelowMid: boolean;
+    isFullWidthBelowMid?: boolean;
     /**
      * When true, displays a loading spinner in the modal.
      */
-    isLoading: boolean;
+    isLoading?: boolean;
     /**
      * The leading action configuration for the modal.
      */
-    leadingAction: ActionProps;
-    position: typeof positions[number];
+    leadingAction?: 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
      */
@@ -96,11 +96,11 @@ export declare type ModalProps = {
     /**
      * The size of the modal; this controls how wide it will appear on the page.
      */
-    size: typeof sizes[number];
+    size?: typeof sizes[number];
     /**
      * The supporting action configuration for the modal.
      */
-    supportingAction: ActionProps;
+    supportingAction?: ActionProps;
 };
 
 /**

package/dist/index.js

@@ -285,8 +285,8 @@ class a extends I(P) {
         <dialog
             id="dialog"
             class="c-modal"
-            size="${E}"
-            position="${$}"
+            size="${E || "medium"}"
+            position="${$ || "center"}"
             ?hasActions=${M || D}
             ?hasBackButton=${o}
             ?hasStackedActions=${i}

package/dist/react.d.ts

@@ -1,9 +1,8 @@
 import type { CSSResult } from 'lit';
-import type { EventName } from '@lit/react';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
 import type { PropertyValues } from 'lit';
-import type { ReactWebComponent } from '@lit/react';
+import * as React_2 from 'react';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit';
 import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
@@ -41,11 +40,11 @@ export declare type ModalProps = {
     /**
      * When true, the modal will have a back button. This currently behaves the same as the close button.
      */
-    hasBackButton: boolean;
+    hasBackButton?: boolean;
     /**
      * When true, the modal will have a back button. This currently behaves the same as the close button.
      */
-    hasStackedActions: boolean;
+    hasStackedActions?: boolean;
     /**
      * The text to display in the modal's heading.
      */
@@ -53,11 +52,11 @@ export declare type ModalProps = {
     /**
      * The HTML heading tag to use for the modal's heading. Can be h1-h6.
      */
-    headingLevel: typeof headingLevels[number];
+    headingLevel?: typeof headingLevels[number];
     /**
      * When true, the modal will be open.
      */
-    isOpen: boolean;
+    isOpen?: boolean;
     /**
      * When set to `true`:
      *  1. The close button within the modal will be visible.
@@ -69,24 +68,24 @@ export declare type ModalProps = {
      *  2. The user can NOT dismiss the modal via the ESCAPE key or clicking the backdrop.
      *
      */
-    isDismissible: boolean;
+    isDismissible?: boolean;
     /**
      * When false, the modal footer will scroll with the content inside the modal body.
      */
-    isFooterPinned: boolean;
+    isFooterPinned?: boolean;
     /**
      * This controls whether a *medium-sized* modal will cover the full width of the page when below the mid breakpoint.
      */
-    isFullWidthBelowMid: boolean;
+    isFullWidthBelowMid?: boolean;
     /**
      * When true, displays a loading spinner in the modal.
      */
-    isLoading: boolean;
+    isLoading?: boolean;
     /**
      * The leading action configuration for the modal.
      */
-    leadingAction: ActionProps;
-    position: typeof positions[number];
+    leadingAction?: 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
      */
@@ -94,11 +93,11 @@ export declare type ModalProps = {
     /**
      * The size of the modal; this controls how wide it will appear on the page.
      */
-    size: typeof sizes[number];
+    size?: typeof sizes[number];
     /**
      * The supporting action configuration for the modal.
      */
-    supportingAction: ActionProps;
+    supportingAction?: ActionProps;
 };
 
 /**
@@ -136,13 +135,7 @@ export declare const ON_MODAL_OPEN_EVENT = "pie-modal-open";
  */
 export declare const ON_MODAL_SUPPORTING_ACTION_CLICK = "pie-modal-supporting-action-click";
 
-export declare const PieModal: ReactWebComponent<PieModal_2, {
-    onPieModalOpen: EventName<CustomEvent<any>>;
-    onPieModalClose: EventName<CustomEvent<any>>;
-    onPieModalBack: EventName<CustomEvent<any>>;
-    onPieModalLeadingActionClick: EventName<CustomEvent<any>>;
-    onPieModalSupportingActionClick: EventName<CustomEvent<any>>;
-}>;
+export declare const PieModal: React_2.ForwardRefExoticComponent<ModalProps & React_2.RefAttributes<PieModal_2> & PieModalEvents & ReactBaseType>;
 
 /**
  * @tagname pie-modal
@@ -261,8 +254,18 @@ declare class PieModal_2 extends PieModal_base implements ModalProps {
 
 declare const PieModal_base: GenericConstructor<RTLInterface> & typeof LitElement;
 
+declare type PieModalEvents = {
+    onPieModalOpen?: (event: CustomEvent) => void;
+    onPieModalClose?: (event: CustomEvent) => void;
+    onPieModalBack?: (event: CustomEvent) => void;
+    onPieModalLeadingActionClick?: (event: CustomEvent) => void;
+    onPieModalSupportingActionClick?: (event: CustomEvent) => void;
+};
+
 export declare const positions: readonly ["top", "center"];
 
+declare type ReactBaseType = React_2.DialogHTMLAttributes<HTMLDialogElement>;
+
 export declare const sizes: readonly ["small", "medium", "large"];
 
 export { }

package/dist/react.js

@@ -1,7 +1,7 @@
 import * as o from "react";
 import { createComponent as i } from "@lit/react";
 import { PieModal as e } from "./index.js";
-import { ON_MODAL_BACK_EVENT as P, ON_MODAL_CLOSE_EVENT as A, ON_MODAL_LEADING_ACTION_CLICK as L, ON_MODAL_OPEN_EVENT as E, ON_MODAL_SUPPORTING_ACTION_CLICK as g, headingLevels as k, positions as D, sizes as I } from "./index.js";
+import { ON_MODAL_BACK_EVENT as A, ON_MODAL_CLOSE_EVENT as L, ON_MODAL_LEADING_ACTION_CLICK as E, ON_MODAL_OPEN_EVENT as g, ON_MODAL_SUPPORTING_ACTION_CLICK as k, headingLevels as D, positions as I, sizes as T } from "./index.js";
 import "lit";
 import "lit/static-html.js";
 import "lit/decorators.js";
@@ -12,7 +12,7 @@ import "@justeattakeaway/pie-icons-webc/IconClose";
 import "@justeattakeaway/pie-icons-webc/IconChevronLeft";
 import "@justeattakeaway/pie-icons-webc/IconChevronRight";
 import "@justeattakeaway/pie-spinner";
-const N = i({
+const a = i({
   displayName: "PieModal",
   elementClass: e,
   react: o,
@@ -29,15 +29,15 @@ const N = i({
     onPieModalSupportingActionClick: "pie-modal-supporting-action-click"
     // when the modal supporting action is clicked.
   }
-});
+}), N = a;
 export {
-  P as ON_MODAL_BACK_EVENT,
-  A as ON_MODAL_CLOSE_EVENT,
-  L as ON_MODAL_LEADING_ACTION_CLICK,
-  E as ON_MODAL_OPEN_EVENT,
-  g as ON_MODAL_SUPPORTING_ACTION_CLICK,
+  A as ON_MODAL_BACK_EVENT,
+  L as ON_MODAL_CLOSE_EVENT,
+  E as ON_MODAL_LEADING_ACTION_CLICK,
+  g as ON_MODAL_OPEN_EVENT,
+  k as ON_MODAL_SUPPORTING_ACTION_CLICK,
   N as PieModal,
-  k as headingLevels,
-  D as positions,
-  I as sizes
+  D as headingLevels,
+  I as positions,
+  T as sizes
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-modal",
-  "version": "0.37.0",
+  "version": "0.38.1",
   "description": "PIE design system modal built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -33,8 +33,8 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeat/pie-design-tokens": "5.9.0",
-    "@justeattakeaway/pie-components-config": "0.8.0",
-    "@justeattakeaway/pie-wrapper-react": "0.12.0",
+    "@justeattakeaway/pie-components-config": "0.9.0",
+    "@justeattakeaway/pie-wrapper-react": "0.14.0",
     "@types/body-scroll-lock": "3.1.2",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
@@ -42,11 +42,11 @@
     "extends": "../../../package.json"
   },
   "dependencies": {
-    "@justeattakeaway/pie-button": "0.44.0",
-    "@justeattakeaway/pie-icon-button": "0.26.0",
-    "@justeattakeaway/pie-icons-webc": "0.17.0",
-    "@justeattakeaway/pie-spinner": "0.4.0",
-    "@justeattakeaway/pie-webc-core": "0.16.0",
+    "@justeattakeaway/pie-button": "0.45.1",
+    "@justeattakeaway/pie-icon-button": "0.27.1",
+    "@justeattakeaway/pie-icons-webc": "0.17.2",
+    "@justeattakeaway/pie-spinner": "0.5.1",
+    "@justeattakeaway/pie-webc-core": "0.17.1",
     "body-scroll-lock": "3.1.5",
     "dialog-polyfill": "0.5.6"
   },

package/src/defs-react.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export type ReactBaseType = React.DialogHTMLAttributes<HTMLDialogElement>

package/src/defs.ts

@@ -36,12 +36,12 @@ export type ModalProps = {
     /**
      * When true, the modal will have a back button. This currently behaves the same as the close button.
      */
-    hasBackButton: boolean;
+    hasBackButton?: boolean;
 
     /**
      * When true, the modal will have a back button. This currently behaves the same as the close button.
      */
-    hasStackedActions: boolean;
+    hasStackedActions?: boolean;
 
     /**
      * The text to display in the modal's heading.
@@ -51,12 +51,12 @@ export type ModalProps = {
     /**
      * The HTML heading tag to use for the modal's heading. Can be h1-h6.
      */
-    headingLevel: typeof headingLevels[number];
+    headingLevel?: typeof headingLevels[number];
 
     /**
      * When true, the modal will be open.
      */
-    isOpen: boolean;
+    isOpen?: boolean;
 
     /**
      * When set to `true`:
@@ -69,32 +69,32 @@ export type ModalProps = {
      *  2. The user can NOT dismiss the modal via the ESCAPE key or clicking the backdrop.
      *
      */
-    isDismissible: boolean;
+    isDismissible?: boolean;
 
     /**
      * When false, the modal footer will scroll with the content inside the modal body.
      */
-    isFooterPinned: boolean;
+    isFooterPinned?: boolean;
 
     /**
      * This controls whether a *medium-sized* modal will cover the full width of the page when below the mid breakpoint.
      */
-    isFullWidthBelowMid: boolean;
+    isFullWidthBelowMid?: boolean;
 
     /**
      * When true, displays a loading spinner in the modal.
      */
-    isLoading: boolean;
+    isLoading?: boolean;
 
     /**
      * The leading action configuration for the modal.
      */
-    leadingAction: ActionProps;
+    leadingAction?: ActionProps;
 
     /*
      * The position of the modal; this controls where it will appear on the page.
      */
-    position: typeof positions[number];
+    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
@@ -104,12 +104,12 @@ export type ModalProps = {
     /**
      * The size of the modal; this controls how wide it will appear on the page.
      */
-    size: typeof sizes[number];
+    size?: typeof sizes[number];
 
     /**
      * The supporting action configuration for the modal.
      */
-    supportingAction: ActionProps;
+    supportingAction?: ActionProps;
 };
 
 /**

package/src/index.ts

@@ -387,8 +387,8 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
         <dialog
             id="dialog"
             class="c-modal"
-            size="${size}"
-            position="${position}"
+            size="${size || 'medium'}"
+            position="${position || 'center'}"
             ?hasActions=${leadingAction || supportingAction}
             ?hasBackButton=${hasBackButton}
             ?hasStackedActions=${hasStackedActions}

package/src/react.ts

@@ -1,13 +1,13 @@
-
 import * as React from 'react';
 import { createComponent, EventName } from '@lit/react';
-import { PieModal as PieModalReact } from './index';
+import { PieModal as PieModalLit } from './index';
+import { ModalProps } from './defs';
 
 export * from './defs';
 
-export const PieModal = createComponent({
+const PieModalReact = createComponent({
     displayName: 'PieModal',
-    elementClass: PieModalReact,
+    elementClass: PieModalLit,
     react: React,
     tagName: 'pie-modal',
     events: {
@@ -18,3 +18,16 @@ export const PieModal = createComponent({
         onPieModalSupportingActionClick: 'pie-modal-supporting-action-click' as EventName<CustomEvent>, // when the modal supporting action is clicked.
     },
 });
+
+type ReactBaseType = React.DialogHTMLAttributes<HTMLDialogElement>
+
+type PieModalEvents = {
+    onPieModalOpen?: (event: CustomEvent) => void;
+    onPieModalClose?: (event: CustomEvent) => void;
+    onPieModalBack?: (event: CustomEvent) => void;
+    onPieModalLeadingActionClick?: (event: CustomEvent) => void;
+    onPieModalSupportingActionClick?: (event: CustomEvent) => void;
+};
+
+export const PieModal = PieModalReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<ModalProps>
+    & React.RefAttributes<PieModalLit> & PieModalEvents & ReactBaseType>;