@oracle/oraclejet-preact 19.0.0 → 19.0.1

package/es/MessageLayer-99583d35.js

@@ -0,0 +1,58 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx } from 'preact/jsx-runtime';
+import { F as Flex } from './Flex-5befe411.js';
+import { W as WindowOverlay } from './WindowOverlay-b380ce51.js';
+import { u as useUser } from './useUser-df8ae011.js';
+import { L as Layer } from './Layer-7d3dc8c7.js';
+import 'preact/compat';
+import './LayerHost-12489cef.js';
+
+const positions = [
+    'top',
+    'top-left',
+    'top-right',
+    'top-start',
+    'top-end',
+    'bottom',
+    'bottom-left',
+    'bottom-right',
+    'bottom-start',
+    'bottom-end'
+];
+const MessageLayer = ({ children, offset, testId, position = 'bottom' }) => {
+    const side = position.split('-')[0];
+    let windowOverlayOffset;
+    if (typeof offset === 'number') {
+        windowOverlayOffset = { mainAxis: offset, crossAxis: offset };
+    }
+    else if (side == 'top' || side == 'bottom') {
+        windowOverlayOffset = { mainAxis: offset?.vertical, crossAxis: offset?.horizontal };
+    }
+    else {
+        windowOverlayOffset = { mainAxis: offset?.horizontal, crossAxis: offset?.vertical };
+    }
+    const { direction } = useUser();
+    const isLtr = direction === 'ltr';
+    let windowOverlayPlacement;
+    switch (position) {
+        case 'top-left':
+            windowOverlayPlacement = isLtr ? 'top-start' : 'top-end';
+            break;
+        case 'top-right':
+            windowOverlayPlacement = isLtr ? 'top-end' : 'top-start';
+            break;
+        case 'bottom-left':
+            windowOverlayPlacement = isLtr ? 'bottom-start' : 'bottom-end';
+            break;
+        case 'bottom-right':
+            windowOverlayPlacement = isLtr ? 'bottom-end' : 'bottom-start';
+            break;
+        default:
+            windowOverlayPlacement = position;
+            break;
+    }
+    return (jsx(Layer, { priority: "messages", level: "topLevel", children: jsx(WindowOverlay, { placement: windowOverlayPlacement, offset: windowOverlayOffset, children: jsx("div", { "data-testid": testId, children: jsx(Flex, { direction: "column", gap: "2x", children: children }) }) }) }));
+};
+
+export { MessageLayer as M, positions as p };
+//# sourceMappingURL=MessageLayer-99583d35.js.map

package/es/MessageLayer-99583d35.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageLayer-99583d35.js","sources":["../../src/PRIVATE_MessageLayer/MessageLayer.tsx"],"sourcesContent":["import { ComponentChildren } from 'preact';\nimport { Flex } from '../UNSAFE_Flex';\nimport { WindowOverlay, WindowOverlayPlacement } from '../UNSAFE_WindowOverlay';\nimport { useUser } from '../hooks/UNSAFE_useUser';\nimport { Layer } from '../UNSAFE_Layer';\n\nconst positions = [\n  'top',\n  'top-left',\n  'top-right',\n  'top-start',\n  'top-end',\n  'bottom',\n  'bottom-left',\n  'bottom-right',\n  'bottom-start',\n  'bottom-end'\n] as const;\n\ntype Position = (typeof positions)[number];\n\ntype Offset =\n  | number\n  | {\n      horizontal?: number;\n      vertical?: number;\n    };\n\ntype Props = {\n  children: ComponentChildren;\n\n  /**\n   * Defines the fixed position where the notifications will to be placed on the screen.\n   * - top-start resolves to top-left in LTR (top-right in RTL)\n   * - top-end resolves to top-right in LTR (top-left in RTL)\n   * - bottom-start resolves to bottom-left in LTR (bottom-right in RTL)\n   * - bottom-end resolves to bottom-right in LTR (bottom-left in RTL)\n   *\n   * default bottom\n   */\n  position?: Position;\n\n  /**\n   * Defines an offset (in pixels) in the placement. Value can be supplied as a number or\n   * an object with horizontal and vertical values.\n   *\n   * default 0\n   */\n  offset?: Offset;\n\n  /**\n   * The test id which is assigned to the \"data-testid\" for the component's element.\n   * Used for test automation, it is assigned to the wrapper element rendered by the component.\n   */\n  testId?: string;\n};\n\nconst MessageLayer = ({ children, offset, testId, position = 'bottom' }: Props) => {\n  const side = position.split('-')[0];\n  let windowOverlayOffset;\n  if (typeof offset === 'number') {\n    windowOverlayOffset = { mainAxis: offset, crossAxis: offset };\n  } else if (side == 'top' || side == 'bottom') {\n    windowOverlayOffset = { mainAxis: offset?.vertical, crossAxis: offset?.horizontal };\n  } else {\n    windowOverlayOffset = { mainAxis: offset?.horizontal, crossAxis: offset?.vertical };\n  }\n\n  const { direction } = useUser();\n  const isLtr = direction === 'ltr';\n  let windowOverlayPlacement: WindowOverlayPlacement | undefined;\n  switch (position) {\n    case 'top-left':\n      windowOverlayPlacement = isLtr ? 'top-start' : 'top-end';\n      break;\n    case 'top-right':\n      windowOverlayPlacement = isLtr ? 'top-end' : 'top-start';\n      break;\n    case 'bottom-left':\n      windowOverlayPlacement = isLtr ? 'bottom-start' : 'bottom-end';\n      break;\n    case 'bottom-right':\n      windowOverlayPlacement = isLtr ? 'bottom-end' : 'bottom-start';\n      break;\n    default:\n      windowOverlayPlacement = position;\n      break;\n  }\n  return (\n    <Layer priority=\"messages\" level=\"topLevel\">\n      <WindowOverlay placement={windowOverlayPlacement} offset={windowOverlayOffset}>\n        <div data-testid={testId}>\n          <Flex direction=\"column\" gap=\"2x\">\n            {children}\n          </Flex>\n        </div>\n      </WindowOverlay>\n    </Layer>\n  );\n};\n\nexport type { Position, Offset };\nexport { MessageLayer, positions };\n"],"names":["_jsx"],"mappings":";;;;;;;;;AAMA,MAAM,SAAS,GAAG;IAChB,KAAK;IACL,UAAU;IACV,WAAW;IACX,WAAW;IACX,SAAS;IACT,QAAQ;IACR,aAAa;IACb,cAAc;IACd,cAAc;IACd,YAAY;EACH;AAwCX,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,GAAG,QAAQ,EAAS,KAAI;IAChF,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AACpC,IAAA,IAAI,mBAAmB,CAAC;AACxB,IAAA,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;QAC9B,mBAAmB,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;KAC/D;SAAM,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,QAAQ,EAAE;AAC5C,QAAA,mBAAmB,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC;KACrF;SAAM;AACL,QAAA,mBAAmB,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;KACrF;AAED,IAAA,MAAM,EAAE,SAAS,EAAE,GAAG,OAAO,EAAE,CAAC;AAChC,IAAA,MAAM,KAAK,GAAG,SAAS,KAAK,KAAK,CAAC;AAClC,IAAA,IAAI,sBAA0D,CAAC;IAC/D,QAAQ,QAAQ;AACd,QAAA,KAAK,UAAU;YACb,sBAAsB,GAAG,KAAK,GAAG,WAAW,GAAG,SAAS,CAAC;YACzD,MAAM;AACR,QAAA,KAAK,WAAW;YACd,sBAAsB,GAAG,KAAK,GAAG,SAAS,GAAG,WAAW,CAAC;YACzD,MAAM;AACR,QAAA,KAAK,aAAa;YAChB,sBAAsB,GAAG,KAAK,GAAG,cAAc,GAAG,YAAY,CAAC;YAC/D,MAAM;AACR,QAAA,KAAK,cAAc;YACjB,sBAAsB,GAAG,KAAK,GAAG,YAAY,GAAG,cAAc,CAAC;YAC/D,MAAM;AACR,QAAA;YACE,sBAAsB,GAAG,QAAQ,CAAC;YAClC,MAAM;KACT;AACD,IAAA,QACEA,GAAC,CAAA,KAAK,IAAC,QAAQ,EAAC,UAAU,EAAC,KAAK,EAAC,UAAU,EAAA,QAAA,EACzCA,IAAC,aAAa,EAAA,EAAC,SAAS,EAAE,sBAAsB,EAAE,MAAM,EAAE,mBAAmB,EAC3E,QAAA,EAAAA,GAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAkB,MAAM,EACtB,QAAA,EAAAA,GAAA,CAAC,IAAI,EAAC,EAAA,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,YAC9B,QAAQ,EAAA,CACJ,GACH,EACQ,CAAA,EAAA,CACV,EACR;AACJ;;;;"}

package/es/MessagesManager-c46786cb.js

@@ -5,10 +5,10 @@ import { S as SvgSuccessS } from './SuccessS-49782304.js';
 import { S as SvgErrorS } from './ErrorS-60a975db.js';
 import { S as SvgInformationS } from './InformationS-daba658e.js';
 import { S as SvgWarningS } from './WarningS-7c6d2d0e.js';
-import { F as Flex } from './Flex-97b023db.js';
+import { F as Flex } from './Flex-5befe411.js';
 import { startIconContainerStyles, messageStartIconStyles, severityIconStyles, messageSummaryStyles } from './PRIVATE_Message/themes/MessageStyles.css.js';
-import { u as useTranslationBundle } from './useTranslationBundle-38db1e3c.js';
-import { u as useTestId } from './useTestId-7f8e69e7.js';
+import { u as useTranslationBundle } from './useTranslationBundle-25469f1c.js';
+import { u as useTestId } from './useTestId-e5d44ab1.js';
 import { w as warn, e as error, i as info, l as log } from './logger-c92f309c.js';
 import { p as playDefaultNotificationSound, a as playAudioFromURL } from './soundUtils-88264cb5.js';
 import { i as isValidValueForProp } from './MessageFormattingUtils-cdb25115.js';

package/es/Modal-678575d5.js

@@ -0,0 +1,288 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, jsxs } from 'preact/jsx-runtime';
+import { forwardRef, useRef, useEffect } from 'preact/compat';
+import { u as useModal } from './useModal-953082f2.js';
+import { L as Layer } from './Layer-7d3dc8c7.js';
+import './LayerHost-12489cef.js';
+import { multiVariantStyles, baseStyle } from './UNSAFE_Modal/themes/ModalStyles.css.js';
+import { a as allTabbableElements, f as focusWithin } from './tabbableUtils-ce19b388.js';
+import { i as isLogicalAncestor } from './popupUtils-4edf62b5.js';
+
+const ModalBackdrop = forwardRef(({ variant = 'scrim' }, ref) => {
+    const variantClasses = multiVariantStyles({
+        backdrop: variant === 'transparent' ? 'transparent' : 'scrim'
+    });
+    return jsx("div", { ref: ref, class: variantClasses });
+});
+
+class ModalManager {
+    constructor() {
+        /**
+         * A flag indicating that the ModalManager's focus handler is installed
+         */
+        this.isFocusHandlerActive = false;
+        /**
+         * A focus handler to keep focus in the top-most modal.
+         */
+        this.focusHandler = (event) => {
+            const topModal = this.getTopModal();
+            const target = event.target;
+            // if there is an open modal and valid focus event target...
+            if (topModal && target) {
+                const modalElement = topModal.modalRef;
+                if (modalElement &&
+                    !modalElement.contains(target) &&
+                    !isLogicalAncestor(modalElement, target) &&
+                    !this._parentLayerContainsNode(modalElement, target)) {
+                    // Focus is outside of the top modal container, let's try to fix it
+                    const tabbableElements = allTabbableElements(modalElement);
+                    if (tabbableElements.length > 0) {
+                        // re-directing focus to the element inside top modal
+                        focusWithin(modalElement);
+                        event.preventDefault();
+                        event.stopPropagation();
+                    }
+                }
+            }
+        };
+        this.getTopModal = () => {
+            return this.modals.length > 0 ? this.modals[this.modals.length - 1] : null;
+        };
+        // TODO: replace with a proper API
+        /**
+         * Checks if the legacy popup service is available
+         */
+        this.islegacyLayerSupportAvailable = () => {
+            return document.getElementById('__oj_zorder_container') !== null;
+        };
+        this.modals = [];
+        this.styleBackup = [];
+    }
+    /**
+     * Registers a modal with ModalManager
+     *
+     * @param modal
+     * @returns
+     */
+    push(modal) {
+        const modalIndex = this._findModalIndex(modal);
+        if (modalIndex !== -1) {
+            // Do not try to register the same modal multiple times
+            return;
+        }
+        this.modals.push(modal);
+        // if this is the first modal in the container, block container scrolling
+        if (this.modals.length === 1) {
+            const ownerDocument = this._getOwnerDocument(modal.modalRef);
+            const scrollContainer = ownerDocument.body;
+            const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+            if (scrollBarWidth > 1) {
+                // in RTL, scrollbar is on the left
+                const scrollBarLeft = Math.round(document.documentElement.getBoundingClientRect().left) +
+                    document.documentElement.scrollLeft;
+                if (scrollBarLeft) {
+                    this.styleBackup.push({
+                        property: 'padding-left',
+                        value: scrollContainer.style.paddingLeft
+                    });
+                    scrollContainer.style.paddingLeft = `${scrollBarWidth}px`;
+                }
+                else {
+                    this.styleBackup.push({
+                        property: 'padding-right',
+                        value: scrollContainer.style.paddingRight
+                    });
+                    scrollContainer.style.paddingRight = `${scrollBarWidth}px`;
+                }
+            }
+            this.styleBackup.push({ property: 'overflow', value: scrollContainer.style.overflow });
+            this.styleBackup.push({ property: 'overflow-x', value: scrollContainer.style.overflowX });
+            this.styleBackup.push({ property: 'overflow-y', value: scrollContainer.style.overflowY });
+            scrollContainer.style.overflow = 'hidden';
+        }
+        // also install the focus handler when the first modal becomes active
+        if (this.modals.length === 1 && !this.islegacyLayerSupportAvailable()) {
+            document.addEventListener('focus', this.focusHandler, true);
+            this.isFocusHandlerActive = true;
+        }
+    }
+    /**
+     * Unegisters a modal from ModalManager
+     *
+     * @param modal
+     * @returns
+     */
+    pop(modal) {
+        const modalIndex = this._findModalIndex(modal);
+        if (modalIndex === -1) {
+            // modal to be removed not found!'
+            return;
+        }
+        if (modalIndex !== this.modals.length - 1) {
+            // trying to remove modal out of order!
+            return;
+        }
+        // remove the focus handler when the last modal is about to be removed
+        if (this.isFocusHandlerActive && this.modals.length === 1) {
+            document.removeEventListener('focus', this.focusHandler, true);
+        }
+        this.modals.pop();
+        // if this was the last modal in the container, restore its overflow props
+        if (this.modals.length === 0) {
+            const ownerDocument = this._getOwnerDocument(modal.modalRef);
+            const scrollContainer = ownerDocument.body;
+            this.styleBackup.forEach(({ property, value }) => {
+                scrollContainer.style.setProperty(property, value);
+            });
+        }
+    }
+    isTopModal(modal) {
+        return this.modals.length > 0 && this.modals[this.modals.length - 1] === modal;
+    }
+    _findModalIndex(modal) {
+        let index = -1;
+        this.modals.forEach((elem, idx) => {
+            if (elem === modal) {
+                index = idx;
+                return;
+            }
+        });
+        return index;
+    }
+    _getOwnerDocument(node) {
+        return (node && node.ownerDocument) || document;
+    }
+    /**
+     * Checks of the modal's layer contains the target node
+     * @param modalElement modal element
+     * @param node target node
+     * @returns true, if the modal layer contains the node
+     */
+    _parentLayerContainsNode(modalElement, node) {
+        const parentLayer = modalElement.closest('[data-oj-layer]');
+        if (parentLayer && parentLayer.contains(node)) {
+            return true;
+        }
+        return false;
+    }
+}
+
+// Global ModalManager singleton instance
+const globalModalManager = new ModalManager();
+/**
+ * Returns an array of element's siblings.
+ *
+ * @param elem
+ * @returns
+ */
+function getSiblings(elem) {
+    const siblings = [];
+    let sibling = elem.previousSibling;
+    while (sibling != null) {
+        if (sibling.nodeType === 1) {
+            siblings.push(sibling);
+        }
+        sibling = sibling.previousSibling;
+    }
+    sibling = elem.nextSibling;
+    while (sibling != null) {
+        if (sibling.nodeType === 1) {
+            siblings.push(sibling);
+        }
+        sibling = sibling.nextSibling;
+    }
+    return siblings;
+}
+/**
+ * Sets aria-hidden=true on Modal ancestors and siblings.
+ *
+ * @param modal
+ * @returns An array of modified elements.
+ */
+function setAriaHiddenOnBackgroundElements(modal) {
+    if (!modal) {
+        return [];
+    }
+    const ariaHiddenElements = [];
+    let node = modal.parentElement;
+    do {
+        if (!node) {
+            break;
+        }
+        const siblings = getSiblings(node);
+        siblings.forEach((elem) => {
+            if (elem.tagName.toLowerCase() !== 'script' && elem.getAttribute('aria-hidden') !== 'true') {
+                ariaHiddenElements.push(elem);
+                elem.setAttribute('aria-hidden', 'true');
+            }
+        });
+        node = node.parentElement;
+    } while (node && node.tagName.toLowerCase() !== 'body');
+    return ariaHiddenElements;
+}
+/**
+ * Resets the aria-hidden state on previously aria-hidden elements.
+ *
+ * @param elements
+ */
+function resetAriaHiddenOnBackgroundElements(elements) {
+    elements.forEach((elem) => {
+        elem.removeAttribute('aria-hidden');
+    });
+}
+/**
+ * Modal is a low-level component that provides the 'modality' feature with built-in overlay (scrim).
+ * It is typically used for building higher-level components (such as 'Dialog' or 'Popup') that need
+ * to support modal behavior preventing interaction with the rest of the page while the modal is open.
+ */
+const Modal = ({ children, isOpen, onBackdropClick, backdropVariant }) => {
+    // get the global ModalContext instance
+    const modalManager = globalModalManager;
+    const { backdropRef } = useModal({ isOpen, onBackdropClick });
+    // main modal element ref
+    const modalRef = useRef(null);
+    const ariaHiddenCache = useRef(null);
+    // modal ref cache, required to lookup the item in modal manager when the actual ref is unmounted
+    const modal = useRef({});
+    // populates and returns the modal ref cache
+    const getModal = () => {
+        modal.current.modalRef = modalRef.current;
+        return modal.current;
+    };
+    useEffect(() => {
+        if (isOpen && modalRef.current) {
+            modalManager?.push(getModal());
+        }
+        else {
+            if (modal.current.modalRef) {
+                if (ariaHiddenCache.current !== null) {
+                    resetAriaHiddenOnBackgroundElements(ariaHiddenCache.current);
+                    ariaHiddenCache.current = null;
+                }
+                modalManager?.pop(getModal());
+            }
+        }
+    }, [isOpen, modalManager]);
+    useEffect(() => {
+        const modalRef = modal.current.modalRef;
+        return () => {
+            if (ariaHiddenCache.current !== null) {
+                resetAriaHiddenOnBackgroundElements(ariaHiddenCache.current);
+                ariaHiddenCache.current = null;
+            }
+            if (modalRef) {
+                modalManager?.pop(getModal());
+            }
+        };
+    }, [modalManager]);
+    const handleFocusIn = () => {
+        // on first focusin, set aria-hidden on modal ancestor's siblings and remember the modified elements
+        if (modalRef.current && ariaHiddenCache.current === null) {
+            ariaHiddenCache.current = setAriaHiddenOnBackgroundElements(modalRef.current);
+        }
+    };
+    return isOpen ? (jsx(Layer, { isModal: true, children: jsxs("div", { ref: modalRef, class: baseStyle, onFocus: handleFocusIn, children: [jsx(ModalBackdrop, { ref: backdropRef, variant: backdropVariant }), children] }) })) : null;
+};
+
+export { Modal as M };
+//# sourceMappingURL=Modal-678575d5.js.map

package/es/Modal-678575d5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal-678575d5.js","sources":["../../src/UNSAFE_Modal/ModalBackdrop.tsx","../../src/UNSAFE_Modal/ModalManager.ts","../../src/UNSAFE_Modal/Modal.tsx"],"sourcesContent":["import type { JSX } from 'preact';\nimport { forwardRef, ForwardedRef } from 'preact/compat';\nimport { multiVariantStyles } from './themes/ModalStyles.css';\nimport type { UnpackSignals } from '@oracle/oraclejet-internal-utilities/attributeUtils';\n\ntype IntrinsicProps = Pick<UnpackSignals<JSX.IntrinsicElements['div']>, 'children'>;\n\ntype Props = IntrinsicProps & {\n  /**\n   * Specifies the backdrop is visible or transparent. Default is 'scrim' (visible).\n   */\n  variant?: 'scrim' | 'transparent';\n};\n\nconst ModalBackdrop = forwardRef<HTMLDivElement, Props>(\n  ({ variant = 'scrim' }, ref: ForwardedRef<HTMLDivElement | null>) => {\n    const variantClasses = multiVariantStyles({\n      backdrop: variant === 'transparent' ? 'transparent' : 'scrim'\n    });\n\n    return <div ref={ref} class={variantClasses} />;\n  }\n);\n\nexport default ModalBackdrop;\n","import { focusWithin, allTabbableElements } from '../utils/PRIVATE_tabbableUtils';\nimport { isLogicalAncestor } from '../utils/UNSAFE_popupUtils';\n\ninterface Modal {\n  modalRef?: HTMLDivElement | null;\n}\n\n/**\n * CSS property backup type.\n */\ntype StyleBackup = Array<{\n  property: string;\n  value: string;\n}>;\n\nexport default class ModalManager {\n  /**\n   * Array of ModalDescriptors managed by ModalManager\n   */\n  private modals: Modal[];\n  /**\n   * Backup of the main container's (body) CSS props potentially altered by Modal.\n   */\n  private styleBackup: StyleBackup;\n  /**\n   * A flag indicating that the ModalManager's focus handler is installed\n   */\n  private isFocusHandlerActive = false;\n\n  constructor() {\n    this.modals = [];\n    this.styleBackup = [];\n  }\n\n  /**\n   * A focus handler to keep focus in the top-most modal.\n   */\n  private focusHandler = (event: FocusEvent) => {\n    const topModal = this.getTopModal();\n    const target = event.target as HTMLElement;\n\n    // if there is an open modal and valid focus event target...\n    if (topModal && target) {\n      const modalElement = topModal.modalRef;\n      if (\n        modalElement &&\n        !modalElement.contains(target) &&\n        !isLogicalAncestor(modalElement, target) &&\n        !this._parentLayerContainsNode(modalElement, target)\n      ) {\n        // Focus is outside of the top modal container, let's try to fix it\n        const tabbableElements = allTabbableElements(modalElement);\n        if (tabbableElements.length > 0) {\n          // re-directing focus to the element inside top modal\n          focusWithin(modalElement);\n          event.preventDefault();\n          event.stopPropagation();\n        }\n      }\n    }\n  };\n\n  /**\n   * Registers a modal with ModalManager\n   *\n   * @param modal\n   * @returns\n   */\n  push(modal: Modal) {\n    const modalIndex = this._findModalIndex(modal);\n\n    if (modalIndex !== -1) {\n      // Do not try to register the same modal multiple times\n      return;\n    }\n\n    this.modals.push(modal);\n\n    // if this is the first modal in the container, block container scrolling\n    if (this.modals.length === 1) {\n      const ownerDocument = this._getOwnerDocument(modal.modalRef);\n      const scrollContainer = ownerDocument.body;\n\n      const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;\n      if (scrollBarWidth > 1) {\n        // in RTL, scrollbar is on the left\n        const scrollBarLeft =\n          Math.round(document.documentElement.getBoundingClientRect().left) +\n          document.documentElement.scrollLeft;\n\n        if (scrollBarLeft) {\n          this.styleBackup.push({\n            property: 'padding-left',\n            value: scrollContainer.style.paddingLeft\n          });\n          scrollContainer.style.paddingLeft = `${scrollBarWidth}px`;\n        } else {\n          this.styleBackup.push({\n            property: 'padding-right',\n            value: scrollContainer.style.paddingRight\n          });\n          scrollContainer.style.paddingRight = `${scrollBarWidth}px`;\n        }\n      }\n\n      this.styleBackup.push({ property: 'overflow', value: scrollContainer.style.overflow });\n      this.styleBackup.push({ property: 'overflow-x', value: scrollContainer.style.overflowX });\n      this.styleBackup.push({ property: 'overflow-y', value: scrollContainer.style.overflowY });\n\n      scrollContainer.style.overflow = 'hidden';\n    }\n\n    // also install the focus handler when the first modal becomes active\n    if (this.modals.length === 1 && !this.islegacyLayerSupportAvailable()) {\n      document.addEventListener('focus', this.focusHandler, true);\n      this.isFocusHandlerActive = true;\n    }\n  }\n\n  /**\n   * Unegisters a modal from ModalManager\n   *\n   * @param modal\n   * @returns\n   */\n  pop(modal: Modal) {\n    const modalIndex = this._findModalIndex(modal);\n\n    if (modalIndex === -1) {\n      // modal to be removed not found!'\n      return;\n    }\n\n    if (modalIndex !== this.modals.length - 1) {\n      // trying to remove modal out of order!\n      return;\n    }\n\n    // remove the focus handler when the last modal is about to be removed\n    if (this.isFocusHandlerActive && this.modals.length === 1) {\n      document.removeEventListener('focus', this.focusHandler, true);\n    }\n\n    this.modals.pop();\n\n    // if this was the last modal in the container, restore its overflow props\n    if (this.modals.length === 0) {\n      const ownerDocument = this._getOwnerDocument(modal.modalRef);\n      const scrollContainer = ownerDocument.body;\n\n      this.styleBackup.forEach(({ property, value }) => {\n        scrollContainer.style.setProperty(property, value);\n      });\n    }\n  }\n\n  isTopModal(modal: Modal): boolean {\n    return this.modals.length > 0 && this.modals[this.modals.length - 1] === modal;\n  }\n\n  getTopModal = (): Modal | null => {\n    return this.modals.length > 0 ? this.modals[this.modals.length - 1] : null;\n  };\n\n  private _findModalIndex(modal: Modal): number {\n    let index = -1;\n    this.modals.forEach((elem, idx) => {\n      if (elem === modal) {\n        index = idx;\n        return;\n      }\n    });\n    return index;\n  }\n\n  private _getOwnerDocument(node: Node | null | undefined): Document {\n    return (node && node.ownerDocument) || document;\n  }\n\n  /**\n   * Checks of the modal's layer contains the target node\n   * @param modalElement modal element\n   * @param node target node\n   * @returns true, if the modal layer contains the node\n   */\n  private _parentLayerContainsNode(modalElement: Element, node: Node): boolean {\n    const parentLayer = modalElement.closest('[data-oj-layer]');\n    if (parentLayer && parentLayer.contains(node)) {\n      return true;\n    }\n    return false;\n  }\n\n  // TODO: replace with a proper API\n  /**\n   * Checks if the legacy popup service is available\n   */\n  private islegacyLayerSupportAvailable = () => {\n    return document.getElementById('__oj_zorder_container') !== null;\n  };\n}\n","import type { JSX } from 'preact';\nimport { useEffect, useRef } from 'preact/compat';\nimport { useModal } from './hooks/useModal';\nimport { Layer } from '../UNSAFE_Layer';\nimport ModalBackdrop from './ModalBackdrop';\nimport ModalManager from './ModalManager';\nimport { baseStyle } from './themes/ModalStyles.css';\nimport type { UnpackSignals } from '@oracle/oraclejet-internal-utilities/attributeUtils';\n\n// Global ModalManager singleton instance\nconst globalModalManager = new ModalManager();\n\n/**\n * Returns an array of element's siblings.\n *\n * @param elem\n * @returns\n */\nfunction getSiblings(elem: Element): Element[] {\n  const siblings: Element[] = [];\n  let sibling = elem.previousSibling;\n  while (sibling != null) {\n    if (sibling.nodeType === 1) {\n      siblings.push(sibling as Element);\n    }\n    sibling = sibling.previousSibling;\n  }\n  sibling = elem.nextSibling;\n  while (sibling != null) {\n    if (sibling.nodeType === 1) {\n      siblings.push(sibling as Element);\n    }\n    sibling = sibling.nextSibling;\n  }\n  return siblings;\n}\n\n/**\n * Sets aria-hidden=true on Modal ancestors and siblings.\n *\n * @param modal\n * @returns An array of modified elements.\n */\nfunction setAriaHiddenOnBackgroundElements(modal: HTMLElement) {\n  if (!modal) {\n    return [];\n  }\n  const ariaHiddenElements: Element[] = [];\n  let node: Element | null = modal.parentElement as Element;\n\n  do {\n    if (!node) {\n      break;\n    }\n    const siblings = getSiblings(node);\n    siblings.forEach((elem: Element) => {\n      if (elem.tagName.toLowerCase() !== 'script' && elem.getAttribute('aria-hidden') !== 'true') {\n        ariaHiddenElements.push(elem);\n        elem.setAttribute('aria-hidden', 'true');\n      }\n    });\n    node = node.parentElement;\n  } while (node && node.tagName.toLowerCase() !== 'body');\n\n  return ariaHiddenElements;\n}\n\n/**\n * Resets the aria-hidden state on previously aria-hidden elements.\n *\n * @param elements\n */\nfunction resetAriaHiddenOnBackgroundElements(elements: Element[]) {\n  elements.forEach((elem) => {\n    elem.removeAttribute('aria-hidden');\n  });\n}\n\ntype IntrinsicProps = Pick<UnpackSignals<JSX.IntrinsicElements['div']>, 'children'>;\ntype UseModalProps = Parameters<typeof useModal>[0];\ntype Props = UseModalProps &\n  IntrinsicProps & {\n    /**\n     * Determines if the modal is active.\n     */\n    isOpen: boolean;\n    /**\n     * Specifies if modal backdrop is visible or transparent. Default is 'scrim' (visible).\n     */\n    backdropVariant?: 'scrim' | 'transparent';\n    /**\n     * A callback to be invoked when a click on the modal backdrop occurs.\n     */\n    onBackdropClick?: (event: MouseEvent) => void;\n  };\n\n/**\n * Modal is a low-level component that provides the 'modality' feature with built-in overlay (scrim).\n * It is typically used for building higher-level components (such as 'Dialog' or 'Popup') that need\n * to support modal behavior preventing interaction with the rest of the page while the modal is open.\n */\nconst Modal = ({ children, isOpen, onBackdropClick, backdropVariant }: Props) => {\n  // get the global ModalContext instance\n  const modalManager = globalModalManager;\n\n  const { backdropRef } = useModal({ isOpen, onBackdropClick });\n  // main modal element ref\n  const modalRef = useRef<HTMLDivElement>(null);\n\n  const ariaHiddenCache = useRef<Element[] | null>(null);\n\n  // modal ref cache, required to lookup the item in modal manager when the actual ref is unmounted\n  const modal = useRef<{\n    modalRef?: typeof modalRef.current;\n  }>({});\n\n  // populates and returns the modal ref cache\n  const getModal = () => {\n    modal.current.modalRef = modalRef.current;\n    return modal.current;\n  };\n\n  useEffect(() => {\n    if (isOpen && modalRef.current) {\n      modalManager?.push(getModal());\n    } else {\n      if (modal.current.modalRef) {\n        if (ariaHiddenCache.current !== null) {\n          resetAriaHiddenOnBackgroundElements(ariaHiddenCache.current);\n          ariaHiddenCache.current = null;\n        }\n        modalManager?.pop(getModal());\n      }\n    }\n  }, [isOpen, modalManager]);\n\n  useEffect(() => {\n    const modalRef = modal.current.modalRef;\n    return () => {\n      if (ariaHiddenCache.current !== null) {\n        resetAriaHiddenOnBackgroundElements(ariaHiddenCache.current);\n        ariaHiddenCache.current = null;\n      }\n      if (modalRef) {\n        modalManager?.pop(getModal());\n      }\n    };\n  }, [modalManager]);\n\n  const handleFocusIn = () => {\n    // on first focusin, set aria-hidden on modal ancestor's siblings and remember the modified elements\n    if (modalRef.current && ariaHiddenCache.current === null) {\n      ariaHiddenCache.current = setAriaHiddenOnBackgroundElements(modalRef.current);\n    }\n  };\n\n  return isOpen ? (\n    <Layer isModal={true}>\n      <div ref={modalRef} class={baseStyle} onFocus={handleFocusIn}>\n        <ModalBackdrop ref={backdropRef} variant={backdropVariant} />\n        {children}\n      </div>\n    </Layer>\n  ) : null;\n};\n\nexport default Modal;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/es/MonthView-0420f499.js

@@ -0,0 +1,219 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, jsxs } from 'preact/jsx-runtime';
+import { g as getWeeksInMonth, a as getDaysOfWeekNames, b as getStartOfWeek, c as getDatesInWeek } from './dayUtils-c97b714c.js';
+import { a as getFormatParse } from './getFormatParse-6e71bd79.js';
+import { w as warn } from './logger-c92f309c.js';
+import { d as getIsoDateStr, t as toJSDate, b as checkNoCalendarExtension, f as formatFullCalendarDate, i as isDateOutOfRange } from './calendarDateUtils-52ee4867.js';
+import { useMemo } from 'preact/hooks';
+import { S as StyledDatePickerButton } from './StyledDatePickerButton-444aa824.js';
+import { useCallback } from 'preact/compat';
+import { u as useTranslationBundle } from './useTranslationBundle-25469f1c.js';
+import { u as useFocusableCell, a as useCellNavigation } from './useCellNavigation-aabee5c0.js';
+import { dayCellStyles } from './PRIVATE_MonthView/themes/DayCellStyles.css.js';
+import { u as useUser } from './useUser-df8ae011.js';
+import { G as Grid } from './Grid-5d56c8aa.js';
+import { MonthViewRedwoodTheme } from './PRIVATE_MonthView/themes/redwood/MonthViewTheme.js';
+import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
+import { monthViewScaleVars } from './PRIVATE_MonthView/themes/MonthViewContract.css.js';
+import { weekNumberCellStyles, weekNumberStyles } from './PRIVATE_MonthView/themes/WeekNumberCellStyle.css.js';
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+/**
+ * The useDayCell hook returns properties for an individual DayCell. The properties returned should be spread on the StyledDatePickerButton.
+ * These include the event handlers for keydown and click.
+ */
+const useDayCell = ({ date, dayFormatter = defaultDayFormatter, dateFormatter, isAdjacentMonth, isDisabled, isFocusable, isFocused, isHidden, isReadonly, isSelected, isToday, onAction, onDayFocused, onNavigation }) => {
+    // apply day formatting
+    const { state } = dayFormatter(date);
+    const isDisabledFormat = state === 'disabled';
+    const isRestrictedFormat = state === 'restricted';
+    // Focus the day cell with isFocused true when the state updates.
+    const buttonProps = useFocusableCell({ isFocusable, isFocused });
+    // Override onAction to not call it if disabled, readonly or restricted
+    const handleAction = useCallback((payload) => {
+        if (isDisabled || isReadonly || isDisabledFormat || isRestrictedFormat)
+            return;
+        onAction(payload);
+    }, [isDisabled, isDisabledFormat, isReadonly, isRestrictedFormat, onAction]);
+    const buttonEventHandlers = useCellNavigation({
+        navigationMap: {
+            ArrowLeft: { ltr: 'previousDay', rtl: 'nextDay' },
+            ArrowRight: { ltr: 'nextDay', rtl: 'previousDay' },
+            ArrowDown: 'nextWeek',
+            ArrowUp: 'previousWeek',
+            PageDown: 'nextMonth',
+            PageUp: 'previousMonth',
+            Home: 'firstDayOfMonth',
+            End: 'lastDayOfMonth',
+            ShiftPageDown: 'nextYear',
+            ShiftPageUp: 'previousYear',
+            CtrlAltT: 'today'
+        },
+        payload: { date },
+        onAction: handleAction,
+        onNavigation
+    });
+    // JET-73067 (can not set value on first click) - when the currently selected cell is not
+    // in the viewport, the first click on any other cell scrolls that selection into view
+    // instead of selecting it. To fix this, we update the focusableDate onmousedown, before
+    // focus is transferred to MonthView, so that it does not try to focus or scroll to
+    // the previously selected cell.
+    const onMouseDown = useCallback(() => {
+        if (isDisabled || isDisabledFormat || isRestrictedFormat)
+            return;
+        onDayFocused({ date });
+    }, [date, isDisabled, isDisabledFormat, isRestrictedFormat, onDayFocused]);
+    // For accessibility, we want a full date.
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const today = translations.datePicker_today();
+    const selected = translations.datePicker_selected();
+    const restricted = translations.datePicker_restricted();
+    const dateIsoStr = getIsoDateStr(date.year, date.month, date.day);
+    const formattedDate = dateFormatter(dateIsoStr);
+    let ariaLabel = isToday ? `${today}, ${formattedDate}` : formattedDate;
+    ariaLabel = isRestrictedFormat ? `${ariaLabel}, ${restricted}` : ariaLabel;
+    ariaLabel = isSelected ? `${ariaLabel}, ${selected}` : ariaLabel;
+    const dayOfMonth = toJSDate(date.year, date.month, date.day).getDate().toString();
+    return {
+        buttonProps: {
+            'aria-label': ariaLabel,
+            ...((isHidden || isDisabled || isDisabledFormat || isRestrictedFormat) && {
+                'aria-disabled': true
+            }),
+            isActivable: !(isDisabled || isReadonly || isDisabledFormat || isRestrictedFormat),
+            isAdjacentMonth,
+            isDimmed: isDisabled || isDisabledFormat,
+            isHidden,
+            isHoverable: !(isDisabled || isReadonly || isDisabledFormat || isRestrictedFormat),
+            isReadonly,
+            isSelected,
+            isRestricted: isRestrictedFormat,
+            isToday,
+            label: dayOfMonth,
+            onMouseDown,
+            ...buttonProps,
+            ...buttonEventHandlers
+        }
+    };
+};
+/**
+ * A default day formatter that always formats as enabled state.
+ */
+const defaultDayFormatter = () => ({ state: 'enabled' });
+
+/**
+ * The DayCell is the cell within the DatePicker's month view that contains the day in the month view.
+ * This component will format the date for the aria-label.
+ * The DayCell components uses the useDayCell hook to handle the user interactions with the day cell.
+ */
+const DayCell = (props) => {
+    const { buttonProps } = useDayCell(props);
+    // buttonProps, e.g., tabIndex, aria-label, onclick, onkeydown and visual states
+    return (jsx("div", { role: "gridcell", class: dayCellStyles, children: jsx(StyledDatePickerButton, { ...buttonProps }) }));
+};
+
+/**
+ * The ISO 8601 definition for week 01 is the week with the first Thursday of the Gregorian year (i.e. of January) in it.
+ * https://en.wikipedia.org/wiki/ISO_week_date
+ * @param date The first date of the week row to be used to calculate the week number.
+ * The date must be a Saturday, Sunday, or Monday. We assume this because the week for
+ * all the locales we support start on one of these days.
+ * @returns the number of week in the year
+ */
+const calculateWeekNumber = (date) => {
+    const checkDate = toJSDate(date.year, date.month, date.day);
+    const dayNumber = checkDate.getUTCDay(); // 0 for Sunday, 1 for Monday, 2 for Tuesday, etc.
+    if (dayNumber !== 0 && dayNumber !== 1 && dayNumber !== 6) {
+        // This message is for internal JET developers. We should never see this message. In all locales the day of the
+        // week starts on Sunday, Monday or Saturday.
+        warn(`calculateWeekNumber's date property's getUTCDay() is assumed to be 0 (Sunday), 1 (Monday) or 6 (Saturday)
+      since that is the first day of the week for the locale's JET supports.`);
+    }
+    // For ISO week, we set the start of the week to Monday
+    if (dayNumber !== 1) {
+        // If it is already Monday, do nothing.
+        // If it is Sunday (0), add 1 to move it up to Monday.
+        // If it is Saturday (6), move it up two days to Monday.
+        checkDate.setUTCDate(checkDate.getUTCDate() + (dayNumber === 0 ? 1 : 2));
+    }
+    // Find Thursday (day value of 4) of this week. Since we know checkDate at this point is a Monday,
+    // we move it up 3 days.
+    checkDate.setUTCDate(checkDate.getUTCDate() + 3);
+    // Create the start of the year date
+    const janFirst = toJSDate(checkDate.getUTCFullYear(), 1, 1);
+    return Math.floor(Math.round((checkDate.getTime() - janFirst.getTime()) / 86400000) / 7) + 1;
+};
+/**
+ * The WeekNumberCell is the cell at the start of a week's row within the DatePicker's
+ * month view that contains the week's number within the year. This displays when
+ * the DatePicker's 'weekDisplay' prop is set to 'number'.
+ * This component will format the week number for the aria-label.
+ */
+const WeekNumberCell = ({ startDateOfWeek }) => {
+    const weekNumber = calculateWeekNumber(startDateOfWeek);
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    return (jsx("div", { "aria-label": translations.datePicker_weekNum({ NUM: String(weekNumber) }), class: weekNumberCellStyles, role: "rowheader", children: jsx("span", { class: weekNumberStyles, children: weekNumber }) }));
+};
+
+/**
+ * A MonthView is a month interface that allows users to select a single date. The MonthView is the week day header
+ * abbreviations and the days of the month. A MonthView is used inside of a DatePicker
+ * along with the DatePickerHeader and the MonthGridView and YearGridView.
+ */
+const MonthView = ({ dayFormatter, daysOutsideMonth = 'hidden', isReadonly = false, max, min, onAction, onDayFocused, onNavigation, selectedDate, focusableDate, isFocused = false, testId, todaysDate, weekDisplay = 'none' }) => {
+    const { locale } = useUser();
+    const weeksInMonth = getWeeksInMonth(focusableDate.year, focusableDate.month, locale);
+    const { baseTheme, styles } = useComponentTheme(MonthViewRedwoodTheme, {});
+    const isWeekNumberDisplayed = weekDisplay === 'number';
+    const gridTemplateColumns = `repeat(${isWeekNumberDisplayed ? 8 : 7}, 1fr)`;
+    const dateFormatter = useMemo(() => {
+        checkNoCalendarExtension(locale);
+        const dateFormatOptions = {
+            locale,
+            dateStyle: 'full'
+        };
+        const { format } = getFormatParse(dateFormatOptions);
+        return format;
+    }, [locale]);
+    const renderMonthViewHeaderRow = () => {
+        const weekDays = getDaysOfWeekNames(locale, 'short');
+        return (jsx("div", { class: styles.sticky, children: jsxs(Grid, { role: "row", "aria-hidden": "true", gridTemplateColumns: gridTemplateColumns, gap: monthViewScaleVars.columnGap, children: [isWeekNumberDisplayed && jsx("div", { role: "presentation" }), weekDays.map((day) => (jsx("div", { role: "columnheader", class: styles.dayOfTheWeek, children: jsx("span", { children: day }) })))] }) }));
+    };
+    const renderMonthView = () => {
+        const calendarGrid = [];
+        for (let weekIndex = 0; weekIndex < weeksInMonth; weekIndex++) {
+            const startDateOfWeek = getStartOfWeek(focusableDate.year, focusableDate.month, 1, locale);
+            const weekDates = getDatesInWeek(weekIndex, startDateOfWeek.year, startDateOfWeek.month, startDateOfWeek.day);
+            const weekCells = weekDates.map((dayCellDate) => {
+                // This figures out the visual state of the DayCell.
+                const isDisabled = isDateOutOfRange(dayCellDate, min, max);
+                // Even if the selected date is out of range, the UX design shows it as selected.
+                const isSelected = selectedDate ? isSameDate(dayCellDate, selectedDate) : false;
+                const isToday = isSameDate(dayCellDate, todaysDate);
+                const isFocusable = isSameDate(dayCellDate, focusableDate);
+                const isAdjacentMonth = isOutOfMonth(dayCellDate, focusableDate);
+                const isHidden = isAdjacentMonth && daysOutsideMonth === 'hidden';
+                return (jsx(DayCell, { date: dayCellDate, dateFormatter: dateFormatter, dayFormatter: dayFormatter, isAdjacentMonth: isAdjacentMonth, isDisabled: isDisabled, isFocusable: isFocusable, isFocused: isFocusable && isFocused, isHidden: isHidden, isReadonly: isReadonly, isSelected: isSelected, isToday: isToday, onAction: onAction, onDayFocused: onDayFocused, onNavigation: onNavigation }, `${dayCellDate.year}-${dayCellDate.month}-${dayCellDate.day}`));
+            });
+            calendarGrid.push(jsxs(Grid, { role: "row", gridTemplateColumns: gridTemplateColumns, gap: monthViewScaleVars.columnGap, children: [isWeekNumberDisplayed && jsx(WeekNumberCell, { startDateOfWeek: weekDates[0] }), weekCells] }, weekIndex));
+        }
+        return calendarGrid;
+    };
+    const monthViewAriaLabel = formatFullCalendarDate(locale, focusableDate, 'month');
+    return (jsx("div", { class: baseTheme, children: jsxs(Grid, { gap: monthViewScaleVars.rowGap, "aria-label": monthViewAriaLabel, role: "grid", testId: testId, children: [renderMonthViewHeaderRow(), renderMonthView()] }) }));
+};
+function isSameDate(date1, date2) {
+    return date1.year === date2.year && date1.month === date2.month && date1.day === date2.day;
+}
+function isOutOfMonth(date1, currentMonthDate) {
+    return date1.month !== currentMonthDate.month;
+}
+
+export { MonthView as M };
+//# sourceMappingURL=MonthView-0420f499.js.map