@opengovsg/confetti 0.1.2 → 0.1.4

package/build/confetti.css

@@ -36,6 +36,7 @@
   --confetti-disabled-button-opacity: 0.6;
 }
 
+/* Popover Confetti CSS classes */
 .confetti-dialog {
   width: var(--confetti-max-width);
   max-height: 95dvh;
@@ -84,6 +85,72 @@
   }
 }
 
+/* Modal Confetti CSS classes */
+.confetti-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--confetti-z-index);
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  justify-content: center;
+  overflow-y: auto;
+  overscroll-behavior: none;
+  padding: 10vh 0;
+}
+
+.confetti-modal {
+  margin: auto;
+
+  .confetti-modal-dialog {
+    width: var(--confetti-max-width);
+    max-width: 100%;
+    position: relative;
+    box-shadow: var(--confetti-box-shadow);
+    border: 1px solid var(--confetti-border-color);
+    border-radius: var(--confetti-border-radius);
+    background: var(--confetti-background-color);
+    padding: var(--confetti-box-padding);
+
+    &:focus-visible {
+      outline: none;
+    }
+
+    .confetti-modal-dialog-close {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      padding: 8px;
+      border-radius: 8px;
+      transition: background 200ms;
+
+      & svg {
+        width: 16px;
+        height: 16px;
+        color: var(--confetti-text-subtle-color);
+      }
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.05);
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--confetti-outline-color);
+        outline-offset: 2px;
+      }
+    }
+
+    /* Adjust title padding to accommodate close button */
+    .cf-header {
+      .cf-title {
+        padding-right: 20px;
+      }
+    }
+  }
+}
+
 .confetti {
   font-family: var(--confetti-font-family);
   display: flex;

package/build/index.d.ts

@@ -1,7 +1,7 @@
 import { a as MultiSelectQuestionProperties, c as StatementQuestionProperties, i as PublicGetSurveyOutput, l as TextQuestionProperties, n as ConfettiState, o as RatingQuestionProperties, r as Question, s as SingleSelectQuestionProperties, t as Answer } from "./types-BnnL5f51.js";
 import * as react0 from "react";
 import { HTMLAttributes, PropsWithChildren } from "react";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 
 //#region src/core/ConfettiController.d.ts
 interface ConfettiControllerProps {
@@ -19,7 +19,7 @@ declare const ConfettiController: ({
   shouldAutoSubmit,
   onFinished,
   children
-}: ConfettiControllerProps) => react_jsx_runtime3.JSX.Element;
+}: ConfettiControllerProps) => react_jsx_runtime4.JSX.Element;
 //#endregion
 //#region src/core/ConfettiProvider.d.ts
 interface ConfettiContextValue {
@@ -54,7 +54,7 @@ declare const ConfettiProvider: ({
   metadata,
   isSurveyVisible: isSurveyVisibleInput,
   apiBaseUrl
-}: ConfettiProviderProps) => react_jsx_runtime3.JSX.Element | null;
+}: ConfettiProviderProps) => react_jsx_runtime4.JSX.Element | null;
 declare const useConfetti: () => ConfettiContextValue;
 //#endregion
 //#region src/components/Confetti.d.ts
@@ -64,7 +64,7 @@ declare const Confetti: ({
   onFinished,
   shouldAutoSubmit,
   ...props
-}: ConfettiProps & Pick<ConfettiControllerProps, "children" | "shouldAutoSubmit">) => react_jsx_runtime3.JSX.Element;
+}: ConfettiProps & Pick<ConfettiControllerProps, "children" | "shouldAutoSubmit">) => react_jsx_runtime4.JSX.Element;
 //#endregion
 //#region src/components/ThankYouMessage.d.ts
 interface ThankYouMessageProps {
@@ -81,7 +81,31 @@ declare const ThankYouMessage: ({
   title,
   description,
   classNames
-}: ThankYouMessageProps) => react_jsx_runtime3.JSX.Element | null;
+}: ThankYouMessageProps) => react_jsx_runtime4.JSX.Element | null;
+//#endregion
+//#region src/components/container/ModalContainer.d.ts
+interface ModalContainerProps {
+  closeOnFinishMs?: number | null;
+  isDismissable?: boolean;
+  classNames?: {
+    overlay?: string;
+    modal?: string;
+    dialog?: string;
+    closeButton?: string;
+    icon?: string;
+  };
+  onDismiss?: () => void;
+  children: React.ReactNode | ((props: {
+    setIsFinished: () => void;
+  }) => React.ReactNode);
+}
+declare const ModalContainer: ({
+  children,
+  classNames,
+  onDismiss,
+  isDismissable,
+  closeOnFinishMs
+}: ModalContainerProps) => react_jsx_runtime4.JSX.Element;
 //#endregion
 //#region src/components/container/PopoverContainer.d.ts
 interface PopoverContainerProps {
@@ -103,7 +127,7 @@ declare const PopoverContainer: ({
   containerProps,
   onDismiss,
   closeOnFinishMs
-}: PopoverContainerProps) => react_jsx_runtime3.JSX.Element;
+}: PopoverContainerProps) => react_jsx_runtime4.JSX.Element;
 //#endregion
 //#region src/components/questions/types.d.ts
 type Question$1 = PublicGetSurveyOutput['questions'][number];
@@ -126,7 +150,7 @@ declare const SurveyQuestionFactory: ({
   question,
   onChange,
   error
-}: SurveyQuestionFactoryProps) => react_jsx_runtime3.JSX.Element;
+}: SurveyQuestionFactoryProps) => react_jsx_runtime4.JSX.Element;
 //#endregion
 //#region src/components/questions/Rating.d.ts
 interface RatingProps extends BaseFieldProps {
@@ -161,7 +185,7 @@ declare const Rating: ({
   id,
   error,
   required
-}: RatingProps) => react_jsx_runtime3.JSX.Element;
+}: RatingProps) => react_jsx_runtime4.JSX.Element;
 //#endregion
 //#region src/components/questions/FreeText.d.ts
 interface FreeTextProps extends BaseFieldProps {
@@ -185,7 +209,7 @@ declare const FreeText: ({
   classNames,
   required,
   error
-}: FreeTextProps) => react_jsx_runtime3.JSX.Element;
+}: FreeTextProps) => react_jsx_runtime4.JSX.Element;
 //#endregion
 //#region src/components/questions/SingleChoice.d.ts
 interface SingleChoiceProps extends BaseFieldProps {
@@ -215,7 +239,7 @@ declare const SingleChoice: ({
   id,
   required,
   error
-}: SingleChoiceProps) => react_jsx_runtime3.JSX.Element;
+}: SingleChoiceProps) => react_jsx_runtime4.JSX.Element;
 //#endregion
 //#region src/components/questions/MultiChoice.d.ts
 interface MultiChoiceProps extends BaseFieldProps {
@@ -248,7 +272,7 @@ declare const MultiChoice: ({
   id,
   required,
   error
-}: MultiChoiceProps) => react_jsx_runtime3.JSX.Element;
+}: MultiChoiceProps) => react_jsx_runtime4.JSX.Element;
 //#endregion
 //#region src/components/questions/Statement.d.ts
 interface StatementProps extends BaseFieldProps {
@@ -266,7 +290,7 @@ declare const Statement: ({
   title,
   description,
   classNames
-}: StatementProps) => react_jsx_runtime3.JSX.Element;
+}: StatementProps) => react_jsx_runtime4.JSX.Element;
 //#endregion
 //#region src/components/presentation/Flow.d.ts
 type ChildField = (_: {
@@ -285,7 +309,7 @@ declare const Flow: ({
   children,
   question,
   isLastQuestion
-}: FlowProps) => react_jsx_runtime3.JSX.Element;
+}: FlowProps) => react_jsx_runtime4.JSX.Element;
 //#endregion
 //#region src/components/presentation/Embed.d.ts
 declare const Embed: ({
@@ -295,10 +319,23 @@ declare const Embed: ({
 }: PropsWithChildren<{
   isCompleted: boolean;
   onSubmit: () => void;
-}>) => react_jsx_runtime3.JSX.Element;
+}>) => react_jsx_runtime4.JSX.Element;
 //#endregion
 //#region src/templates/EmbeddedConfetti.d.ts
-declare const EmbeddedConfetti: (props: ConfettiProps) => react_jsx_runtime3.JSX.Element;
+declare const EmbeddedConfetti: (props: ConfettiProps) => react_jsx_runtime4.JSX.Element;
+//#endregion
+//#region src/templates/ModalConfetti.d.ts
+interface ModalConfettiProps extends ConfettiProps {
+  closeOnFinishMs?: number | null;
+  onDismiss?: () => void;
+  isDismissable?: boolean;
+}
+declare const ModalConfetti: ({
+  onDismiss,
+  closeOnFinishMs,
+  isDismissable,
+  ...props
+}: ModalConfettiProps) => react_jsx_runtime4.JSX.Element;
 //#endregion
 //#region src/templates/PopoverConfetti.d.ts
 interface PopoverConfettiProps extends ConfettiProps {
@@ -318,10 +355,10 @@ declare const PopoverConfetti: ({
   onDismiss,
   closeOnFinishMs,
   ...props
-}: PopoverConfettiProps) => react_jsx_runtime3.JSX.Element;
+}: PopoverConfettiProps) => react_jsx_runtime4.JSX.Element;
 //#endregion
 //#region src/templates/StepperConfetti.d.ts
-declare const StepperConfetti: (props: ConfettiProps) => react_jsx_runtime3.JSX.Element;
+declare const StepperConfetti: (props: ConfettiProps) => react_jsx_runtime4.JSX.Element;
 //#endregion
 //#region src/hooks/useVisibleAfterDelay.d.ts
 interface UseVisibleAfterDelayOptions {
@@ -363,5 +400,4 @@ declare const useVisibleAfterScroll: ({
   isVisible: boolean;
 };
 //#endregion
-export { type Answer, Confetti, ConfettiContext, ConfettiController, type ConfettiControllerProps, type ConfettiProps, ConfettiProvider, type ConfettiProviderProps, type ConfettiState, Embed, EmbeddedConfetti, Flow, FreeText, type FreeTextProps, MultiChoice, type MultiChoiceProps, PopoverConfetti, PopoverContainer, type PopoverContainerProps, type Question, Rating, type RatingProps, SingleChoice, type SingleChoiceProps, Statement, type StatementProps, StepperConfetti, SurveyQuestionFactory, type SurveyQuestionFactoryProps, ThankYouMessage, useConfetti, useVisibleAfterDelay, useVisibleAfterPageVisits, useVisibleAfterScroll, useVisibleAfterSessionPageVisits };
-//# sourceMappingURL=index.d.ts.map
+export { type Answer, Confetti, ConfettiContext, ConfettiController, type ConfettiControllerProps, type ConfettiProps, ConfettiProvider, type ConfettiProviderProps, type ConfettiState, Embed, EmbeddedConfetti, Flow, FreeText, type FreeTextProps, ModalConfetti, ModalContainer, type ModalContainerProps, MultiChoice, type MultiChoiceProps, PopoverConfetti, PopoverContainer, type PopoverContainerProps, type Question, Rating, type RatingProps, SingleChoice, type SingleChoiceProps, Statement, type StatementProps, StepperConfetti, SurveyQuestionFactory, type SurveyQuestionFactoryProps, ThankYouMessage, useConfetti, useVisibleAfterDelay, useVisibleAfterPageVisits, useVisibleAfterScroll, useVisibleAfterSessionPageVisits };