@jobber/components 6.41.0 → 6.42.0

package/dist/ConfirmationModal/index.cjs

@@ -3,7 +3,7 @@
 var ConfirmationModal = require('../ConfirmationModal-cjs.js');
 require('react');
 require('../useOnKeyDown-cjs.js');
-require('../Modal-cjs.js');
+require('../Modal/index.cjs');
 require('react-dom');
 require('classnames');
 require('framer-motion');
@@ -17,12 +17,24 @@ require('../tslib.es6-cjs.js');
 require('../Icon-cjs.js');
 require('@jobber/design');
 require('../ButtonDismiss-cjs.js');
+require('../AtlantisPortalContent-cjs.js');
+require('../AtlantisThemeContext-cjs.js');
+require('../_commonjsHelpers-cjs.js');
+require('../identity-cjs.js');
+require('../isTypedArray-cjs.js');
+require('../isObjectLike-cjs.js');
+require('../_baseAssignValue-cjs.js');
+require('../_baseFor-cjs.js');
+require('../keysIn-cjs.js');
+require('../_isIterateeCall-cjs.js');
+require('../_setToString-cjs.js');
+require('../noop-cjs.js');
+require('../floating-ui.react-cjs.js');
 require('../Content-cjs.js');
 require('../Markdown-cjs.js');
 require('../Text-cjs.js');
 require('../Emphasis-cjs.js');
 require('../index-cjs.js');
-require('../_commonjsHelpers-cjs.js');
 
 
 

package/dist/ConfirmationModal/index.mjs

@@ -1,7 +1,7 @@
 export { C as ConfirmationModal } from '../ConfirmationModal-es.js';
 import 'react';
 import '../useOnKeyDown-es.js';
-import '../Modal-es.js';
+import '../Modal/index.mjs';
 import 'react-dom';
 import 'classnames';
 import 'framer-motion';
@@ -15,9 +15,21 @@ import '../tslib.es6-es.js';
 import '../Icon-es.js';
 import '@jobber/design';
 import '../ButtonDismiss-es.js';
+import '../AtlantisPortalContent-es.js';
+import '../AtlantisThemeContext-es.js';
+import '../_commonjsHelpers-es.js';
+import '../identity-es.js';
+import '../isTypedArray-es.js';
+import '../isObjectLike-es.js';
+import '../_baseAssignValue-es.js';
+import '../_baseFor-es.js';
+import '../keysIn-es.js';
+import '../_isIterateeCall-es.js';
+import '../_setToString-es.js';
+import '../noop-es.js';
+import '../floating-ui.react-es.js';
 import '../Content-es.js';
 import '../Markdown-es.js';
 import '../Text-es.js';
 import '../Emphasis-es.js';
 import '../index-es.js';
-import '../_commonjsHelpers-es.js';

package/dist/ConfirmationModal-cjs.js

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var useOnKeyDown = require('./useOnKeyDown-cjs.js');
-var Modal = require('./Modal-cjs.js');
+var Modal_index = require('./Modal/index.cjs');
 var Content = require('./Content-cjs.js');
 var Markdown = require('./Markdown-cjs.js');
 
@@ -54,7 +54,7 @@ const ConfirmationModal = React.forwardRef(function ConfirmationModalInternal({
         });
     }, [title, message, confirmLabel, cancelLabel, onConfirm, onCancel]);
     useOnKeyDown.useOnKeyDown_2(handleKeyboardShortcut, ["Escape", "Enter"]);
-    return (React.createElement(Modal.Modal, { title: state.title, open: open || state.open, size: size, dismissible: false, primaryAction: {
+    return (React.createElement(Modal_index.Modal, { title: state.title, open: open || state.open, size: size, dismissible: false, primaryAction: {
             label: state.confirmLabel,
             onClick: handleAction("confirm"),
             variation: variation === "destructive" ? "destructive" : "work",

package/dist/ConfirmationModal-es.js

@@ -1,6 +1,6 @@
 import React__default, { forwardRef, useReducer, useImperativeHandle, useEffect } from 'react';
 import { u as useOnKeyDown_2 } from './useOnKeyDown-es.js';
-import { M as Modal } from './Modal-es.js';
+import { Modal } from './Modal/index.mjs';
 import { C as Content } from './Content-es.js';
 import { M as Markdown } from './Markdown-es.js';
 

package/dist/DataList/components/DataListFilters/components/DataListSort/index.cjs

@@ -8,6 +8,7 @@ require('../../../../../_commonjsHelpers-cjs.js');
 require('../../../../../Combobox-cjs.js');
 require('../../../../../ComboboxContent-cjs.js');
 require('classnames');
+require('../../../../../floating-ui.react-cjs.js');
 require('react-dom');
 require('../../../../../ComboboxContentSearch-cjs.js');
 require('../../../../../Icon-cjs.js');

package/dist/DataList/components/DataListFilters/components/DataListSort/index.mjs

@@ -6,6 +6,7 @@ import '../../../../../_commonjsHelpers-es.js';
 import '../../../../../Combobox-es.js';
 import '../../../../../ComboboxContent-es.js';
 import 'classnames';
+import '../../../../../floating-ui.react-es.js';
 import 'react-dom';
 import '../../../../../ComboboxContentSearch-es.js';
 import '../../../../../Icon-es.js';

package/dist/DataList/components/DataListFilters/index.cjs

@@ -9,6 +9,7 @@ require('../../../_commonjsHelpers-cjs.js');
 require('../../../Combobox-cjs.js');
 require('../../../ComboboxContent-cjs.js');
 require('classnames');
+require('../../../floating-ui.react-cjs.js');
 require('react-dom');
 require('../../../ComboboxContentSearch-cjs.js');
 require('../../../Icon-cjs.js');

package/dist/DataList/components/DataListFilters/index.mjs

@@ -7,6 +7,7 @@ import '../../../_commonjsHelpers-es.js';
 import '../../../Combobox-es.js';
 import '../../../ComboboxContent-es.js';
 import 'classnames';
+import '../../../floating-ui.react-es.js';
 import 'react-dom';
 import '../../../ComboboxContentSearch-es.js';
 import '../../../Icon-es.js';

package/dist/DataList/index.cjs

@@ -60,6 +60,7 @@ require('../DataListFilters-cjs.js');
 require('../DataListSort-cjs.js');
 require('../Combobox-cjs.js');
 require('../ComboboxContent-cjs.js');
+require('../floating-ui.react-cjs.js');
 require('../ComboboxContentSearch-cjs.js');
 require('../ComboboxContentList-cjs.js');
 require('../Spinner-cjs.js');

package/dist/DataList/index.mjs

@@ -58,6 +58,7 @@ import '../DataListFilters-es.js';
 import '../DataListSort-es.js';
 import '../Combobox-es.js';
 import '../ComboboxContent-es.js';
+import '../floating-ui.react-es.js';
 import '../ComboboxContentSearch-es.js';
 import '../ComboboxContentList-es.js';
 import '../Spinner-es.js';

package/dist/FormatFile/index.cjs

@@ -12,19 +12,31 @@ require('@jobber/design');
 require('../Typography-cjs.js');
 require('../ConfirmationModal-cjs.js');
 require('../useOnKeyDown-cjs.js');
-require('../Modal-cjs.js');
+require('../Modal/index.cjs');
 require('react-dom');
 require('framer-motion');
 require('../useRefocusOnActivator-cjs.js');
 require('../useFocusTrap-cjs.js');
 require('../Heading-cjs.js');
 require('../ButtonDismiss-cjs.js');
+require('../AtlantisPortalContent-cjs.js');
+require('../AtlantisThemeContext-cjs.js');
+require('../_commonjsHelpers-cjs.js');
+require('../identity-cjs.js');
+require('../isTypedArray-cjs.js');
+require('../isObjectLike-cjs.js');
+require('../_baseAssignValue-cjs.js');
+require('../_baseFor-cjs.js');
+require('../keysIn-cjs.js');
+require('../_isIterateeCall-cjs.js');
+require('../_setToString-cjs.js');
+require('../noop-cjs.js');
+require('../floating-ui.react-cjs.js');
 require('../Content-cjs.js');
 require('../Markdown-cjs.js');
 require('../Text-cjs.js');
 require('../Emphasis-cjs.js');
 require('../index-cjs.js');
-require('../_commonjsHelpers-cjs.js');
 require('../Glimmer-cjs.js');
 require('../ProgressBar-cjs.js');
 

package/dist/FormatFile/index.mjs

@@ -10,18 +10,30 @@ import '@jobber/design';
 import '../Typography-es.js';
 import '../ConfirmationModal-es.js';
 import '../useOnKeyDown-es.js';
-import '../Modal-es.js';
+import '../Modal/index.mjs';
 import 'react-dom';
 import 'framer-motion';
 import '../useRefocusOnActivator-es.js';
 import '../useFocusTrap-es.js';
 import '../Heading-es.js';
 import '../ButtonDismiss-es.js';
+import '../AtlantisPortalContent-es.js';
+import '../AtlantisThemeContext-es.js';
+import '../_commonjsHelpers-es.js';
+import '../identity-es.js';
+import '../isTypedArray-es.js';
+import '../isObjectLike-es.js';
+import '../_baseAssignValue-es.js';
+import '../_baseFor-es.js';
+import '../keysIn-es.js';
+import '../_isIterateeCall-es.js';
+import '../_setToString-es.js';
+import '../noop-es.js';
+import '../floating-ui.react-es.js';
 import '../Content-es.js';
 import '../Markdown-es.js';
 import '../Text-es.js';
 import '../Emphasis-es.js';
 import '../index-es.js';
-import '../_commonjsHelpers-es.js';
 import '../Glimmer-es.js';
 import '../ProgressBar-es.js';

package/dist/Gallery/index.cjs

@@ -36,7 +36,10 @@ require('../_setToString-cjs.js');
 require('../FormatFile-cjs.js');
 require('filesize');
 require('../ConfirmationModal-cjs.js');
-require('../Modal-cjs.js');
+require('../Modal/index.cjs');
+require('../AtlantisPortalContent-cjs.js');
+require('../noop-cjs.js');
+require('../floating-ui.react-cjs.js');
 require('../Content-cjs.js');
 require('../Markdown-cjs.js');
 require('../Emphasis-cjs.js');

package/dist/Gallery/index.mjs

@@ -34,7 +34,10 @@ import '../_setToString-es.js';
 import '../FormatFile-es.js';
 import 'filesize';
 import '../ConfirmationModal-es.js';
-import '../Modal-es.js';
+import '../Modal/index.mjs';
+import '../AtlantisPortalContent-es.js';
+import '../noop-es.js';
+import '../floating-ui.react-es.js';
 import '../Content-es.js';
 import '../Markdown-es.js';
 import '../Emphasis-es.js';

package/dist/Heading/Heading.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import { TypographyOptions, TypographyProps } from "../Typography";
 type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-interface HeadingProps {
+export interface HeadingProps {
     /**
      * @default 5
      */

package/dist/Heading/index.d.ts

@@ -1 +1,2 @@
 export { Heading } from "./Heading";
+export type { HeadingProps } from "./Heading";

package/dist/Modal/Modal.d.ts

@@ -1,21 +1,2 @@
-import { ReactNode } from "react";
-import sizes from "./ModalSizes.module.css";
-import { ButtonProps } from "../Button";
-export interface ModalProps {
-    /**
-     * @default false
-     */
-    readonly title?: string;
-    readonly open?: boolean;
-    readonly size?: keyof typeof sizes;
-    /**
-     * @default true
-     */
-    readonly dismissible?: boolean;
-    readonly children: ReactNode;
-    readonly primaryAction?: ButtonProps;
-    readonly secondaryAction?: ButtonProps;
-    readonly tertiaryAction?: ButtonProps;
-    onRequestClose?(): void;
-}
-export declare function Modal({ open, title, size, dismissible, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, }: ModalProps): JSX.Element;
+import { ModalLegacyProps } from "./Modal.types";
+export declare const ModalLegacy: ({ open, title, size, dismissible, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, }: ModalLegacyProps) => JSX.Element;

package/dist/Modal/Modal.rebuilt.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from "react";
+import { HeaderProps, ModalActionsProps, ModalContentProps as ModalContainerProps } from "./Modal.types";
+export declare function ModalHeader({ title, children }: HeaderProps): JSX.Element;
+export declare function ModalActions({ primary, secondary, tertiary, }: ModalActionsProps): JSX.Element;
+export declare function ModalActivator({ children }: PropsWithChildren): JSX.Element;
+/**
+ * Background overlay for the modal. Used in the ModalContent.
+ */
+export declare function ModalOverlay({ children }: PropsWithChildren): JSX.Element;
+export declare function ModalContent({ children }: ModalContainerProps): JSX.Element;

package/dist/Modal/Modal.types.d.ts

@@ -0,0 +1,118 @@
+import React, { MutableRefObject, PropsWithChildren, ReactNode } from "react";
+import { ExtendedRefs, FloatingContext, ReferenceType } from "@floating-ui/react";
+import { XOR } from "ts-xor";
+import sizes from "./ModalSizes.module.css";
+import { ButtonProps } from "../Button";
+export interface ModalProviderProps {
+    readonly children: React.ReactNode;
+    /**
+     * Size of the modal.
+     */
+    readonly size?: keyof typeof sizes;
+    /**
+     * Whether the modal is open.
+     */
+    readonly open?: boolean;
+    /**
+     * Callback executed when the user wants to close/dismiss the Modal
+     */
+    readonly onRequestClose?: () => void;
+    /**
+     * Ref to specify the activator element. Useful if the activator can unmount
+     * and focus needs to be returned to the activator element.
+     */
+    readonly activatorRef?: MutableRefObject<HTMLElement | null> | null;
+    readonly dismissible?: boolean;
+}
+export type ModalContentProps = PropsWithChildren;
+export type ModalOverlayProps = PropsWithChildren;
+export interface ModalContextType {
+    /**
+     * Whether the modal is open.
+     */
+    readonly open?: boolean;
+    /**
+     * Callback executed when the user wants to close/dismiss the Modal
+     */
+    onRequestClose?(): void;
+    /**
+     * Ref to specify the activator element. Useful if the activator can unmount
+     * and needs to be re-mounted.
+     */
+    readonly activatorRef?: MutableRefObject<HTMLElement | null> | null;
+    /**
+     * Refs used by floating-ui to position the modal.
+     */
+    readonly floatingRefs: ExtendedRefs<ReferenceType> | null;
+    /**
+     * Context used by floating-ui to position the modal.
+     */
+    readonly floatingContext: FloatingContext;
+    /**
+     * Size of the modal.
+     */
+    readonly size?: keyof typeof sizes;
+    /**
+     * Floating-ui node id for the modal. Used to ensure the modal is aware of other floating-ui elements.
+     */
+    readonly floatingNodeId?: string;
+    /**
+     * Whether the modal is dismissible.
+     */
+    readonly dismissible?: boolean;
+    /**
+     * Id to provide aria-labelledby to the modal. If you are using Modal.Header with children or another header you will need to provide this as the id of the header.
+     * @default "ATL-Modal-Header"
+     */
+    readonly modalLabelledBy?: string;
+}
+export interface ModalActionsProps {
+    /**
+     * Primary action of the modal.
+     */
+    readonly primary?: ButtonProps;
+    /**
+     * Secondary action of the modal.
+     */
+    readonly secondary?: ButtonProps;
+    /**
+     * Tertiary action of the modal. This will be rendered on the left side of the action bar.
+     * Useful for actions like "Cancel" that are not destructive.
+     */
+    readonly tertiary?: ButtonProps;
+}
+interface HeaderPropsWithoutChildren {
+    /**
+     * Title of the modal.
+     */
+    readonly title: string;
+    /**
+     * Whether the modal is dismissible.
+     */
+    readonly dismissible?: boolean;
+    /**
+     * Callback executed when the user wants to close/dismiss the Modal
+     */
+    onRequestClose?(): void;
+}
+type HeaderWithChildren = PropsWithChildren;
+export type HeaderProps = XOR<HeaderPropsWithoutChildren, HeaderWithChildren>;
+export interface ModalLegacyProps {
+    /**
+     * @default false
+     */
+    readonly title?: string;
+    readonly open?: boolean;
+    readonly size?: keyof typeof sizes;
+    /**
+     * @default true
+     */
+    readonly dismissible?: boolean;
+    readonly children: ReactNode;
+    readonly primaryAction?: ButtonProps;
+    readonly secondaryAction?: ButtonProps;
+    readonly tertiaryAction?: ButtonProps;
+    onRequestClose?(): void;
+    readonly version?: 1;
+}
+export {};

package/dist/Modal/ModalContext.rebuilt.d.ts

@@ -0,0 +1,15 @@
+import React, { MutableRefObject } from "react";
+import sizes from "./ModalSizes.module.css";
+import { ModalContextType } from "./Modal.types";
+export declare const ModalContext: React.Context<ModalContextType>;
+export interface ModalProviderProps {
+    readonly children: React.ReactNode;
+    readonly size?: keyof typeof sizes;
+    readonly open?: boolean;
+    readonly onRequestClose?: () => void;
+    readonly activatorRef?: MutableRefObject<HTMLElement | null> | null;
+    readonly dismissible?: boolean;
+    readonly modalLabelledBy?: string;
+}
+export declare function ModalProvider({ children, open, size, onRequestClose, activatorRef: refProp, dismissible, modalLabelledBy, }: ModalProviderProps): JSX.Element;
+export declare function useModalContext(): ModalContextType;