@oracle/oraclejet-preact 20.0.3 → 20.1.0

package/es/LayerManager-e30fbfd6.js

@@ -0,0 +1,34 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, jsxs } from 'preact/jsx-runtime';
+import { useState, useCallback } from 'preact/compat';
+import { L as LayerContext, a as LayerHost } from './LayerHost-3cf255a6.js';
+
+function LayerManager({ children }) {
+    const [defaultHost, setDefaultHost] = useState();
+    //const context = useContext(LayerContext);
+    const defaultHostRef = useCallback((el) => {
+        // ref callbacks fire after the component has been unnmounted so we do not
+        // want to set state in this use-case
+        if (el !== null) {
+            setDefaultHost(el);
+        }
+    }, []);
+    return (jsx(LayerContext.Consumer, { children: (value) => {
+            let defaultHostContext = {};
+            if (defaultHost) {
+                defaultHostContext = {
+                    getRootLayerHost: () => {
+                        return defaultHost;
+                    },
+                    getLayerHost: () => {
+                        return defaultHost;
+                    }
+                };
+            }
+            const layerContext = value.getLayerHost ? value : defaultHostContext;
+            return (jsxs(LayerContext.Provider, { value: layerContext, children: [children, !value.getLayerHost && jsx(LayerHost, { ref: defaultHostRef })] }));
+        } }));
+}
+
+export { LayerManager as L };
+//# sourceMappingURL=LayerManager-e30fbfd6.js.map

package/es/LayerManager-e30fbfd6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayerManager-e30fbfd6.js","sources":["../../src/UNSAFE_Layer/LayerManager.tsx"],"sourcesContent":["/**\n * The LayerManager wraps your application and creates two adjacent divs for\n * rendering your application and housing Layers.\n */\nimport { ComponentChildren } from 'preact';\nimport { useCallback, useState } from 'preact/compat';\nimport { LayerContext, LayerContextProps } from './LayerContext';\nimport LayerHost from './LayerHost';\n\ntype LayerManagerProps = {\n  children?: ComponentChildren;\n};\n\nexport function LayerManager({ children }: LayerManagerProps) {\n  const [defaultHost, setDefaultHost] = useState<Element>();\n  //const context = useContext(LayerContext);\n  const defaultHostRef = useCallback((el: Element | null) => {\n    // ref callbacks fire after the component has been unnmounted so we do not\n    // want to set state in this use-case\n    if (el !== null) {\n      setDefaultHost(el);\n    }\n  }, []);\n\n  return (\n    <LayerContext.Consumer>\n      {(value: LayerContextProps) => {\n        let defaultHostContext = {};\n        if (defaultHost) {\n          defaultHostContext = {\n            getRootLayerHost: () => {\n              return defaultHost;\n            },\n            getLayerHost: () => {\n              return defaultHost;\n            }\n          };\n        }\n        const layerContext = value.getLayerHost ? value : defaultHostContext;\n        return (\n          <LayerContext.Provider value={layerContext}>\n            {children}\n            {!value.getLayerHost && <LayerHost ref={defaultHostRef} />}\n          </LayerContext.Provider>\n        );\n      }}\n    </LayerContext.Consumer>\n  );\n}\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;AAagB,SAAA,YAAY,CAAC,EAAE,QAAQ,EAAqB,EAAA;IAC1D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,EAAW,CAAC;;AAE1D,IAAA,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,EAAkB,KAAI;;;AAGxD,QAAA,IAAI,EAAE,KAAK,IAAI,EAAE;YACf,cAAc,CAAC,EAAE,CAAC,CAAC;SACpB;KACF,EAAE,EAAE,CAAC,CAAC;IAEP,QACEA,IAAC,YAAY,CAAC,QAAQ,EACnB,EAAA,QAAA,EAAA,CAAC,KAAwB,KAAI;YAC5B,IAAI,kBAAkB,GAAG,EAAE,CAAC;YAC5B,IAAI,WAAW,EAAE;AACf,gBAAA,kBAAkB,GAAG;oBACnB,gBAAgB,EAAE,MAAK;AACrB,wBAAA,OAAO,WAAW,CAAC;qBACpB;oBACD,YAAY,EAAE,MAAK;AACjB,wBAAA,OAAO,WAAW,CAAC;qBACpB;iBACF,CAAC;aACH;AACD,YAAA,MAAM,YAAY,GAAG,KAAK,CAAC,YAAY,GAAG,KAAK,GAAG,kBAAkB,CAAC;YACrE,QACEC,IAAC,CAAA,YAAY,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,YAAY,EACvC,QAAA,EAAA,CAAA,QAAQ,EACR,CAAC,KAAK,CAAC,YAAY,IAAID,GAAA,CAAC,SAAS,EAAA,EAAC,GAAG,EAAE,cAAc,EAAA,CAAI,CACpC,EAAA,CAAA,EACxB;SACH,EAAA,CACqB,EACxB;AACJ;;;;"}

package/es/Link-db2fdeab.js

@@ -0,0 +1,33 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx } from 'preact/jsx-runtime';
+import { c as classNames } from './classNames-4e12b00d.js';
+import { u as usePressClick } from './usePressClick-945cc43b.js';
+import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
+import { u as useInteractionStyle } from './useInteractionStyle-99e32c23.js';
+import { LinkRedwoodTheme } from './UNSAFE_Link/themes/redwood/LinkTheme.js';
+import './TabbableModeContext-7d8ad946.js';
+import { u as useTabbableMode } from './useTabbableMode-090ed4b5.js';
+import { u as useTestId } from './useTestId-ab1bede6.js';
+
+const noop = () => { };
+/**
+ * Link component creates a hyperlink.
+ */
+function Link({ href, variant, placement = 'standalone', target, testId, 'aria-describedby': ariaDescribedBy, 'aria-label': accessibleLabel, 'aria-labelledby': ariaLabelledBy, children, onClick, isDisabled }) {
+    const { interactionProps, applyPseudoHoverStyle, applyHoverStyle } = useInteractionStyle();
+    const { classes } = useComponentTheme(LinkRedwoodTheme, {
+        needsEventsHover: applyHoverStyle ? 'isNeedsEventsHover' : 'notNeedsEventsHover',
+        pseudoHover: applyPseudoHoverStyle ? 'isPseudoHover' : 'notPseudoHover',
+        variant,
+        placement,
+        disabled: isDisabled ? 'isDisabled' : 'notDisabled'
+    });
+    const { isTabbable } = useTabbableMode();
+    const linkClasses = classNames([classes]);
+    const { pressProps } = usePressClick(onClick ?? noop);
+    const testIdProps = useTestId(testId);
+    return (jsx("a", { tabIndex: isTabbable && !isDisabled ? 0 : -1, href: !isDisabled ? href : undefined, "aria-describedby": ariaDescribedBy, "aria-label": accessibleLabel, "aria-labelledby": ariaLabelledBy, target: target, ...(!isDisabled && pressProps), ...interactionProps, ...testIdProps, class: linkClasses, children: children }));
+}
+
+export { Link as L };
+//# sourceMappingURL=Link-db2fdeab.js.map

package/es/Link-db2fdeab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link-db2fdeab.js","sources":["../../src/UNSAFE_Link/Link.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ComponentChildren } from 'preact';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { usePressClick } from '#hooks/UNSAFE_usePressClick';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { LinkVariantOptions } from './themes/LinkStyles.css';\nimport { useInteractionStyle } from '../hooks/UNSAFE_useInteractionStyle';\nimport { LinkRedwoodTheme } from './themes/redwood/LinkTheme';\nimport { useTabbableMode } from '../hooks/UNSAFE_useTabbableMode';\nimport { useTestId, TestIdProps } from '../hooks/UNSAFE_useTestId';\ntype Props = {\n  /**\n   * Sets the URL that the hyperlink points to.\n   */\n  href: string;\n\n  /**\n   * Sets the variant. The default value of this property is theme driven.\n   */\n  variant?: 'standard' | 'primary' | 'secondary';\n\n  /**\n   * Sets the placement.\n   */\n  placement?: 'standalone' | 'embedded';\n\n  /**\n   * Sets the target.\n   */\n  target?: string;\n\n  /**\n   * Specifies id for element (or elements) that describes the object.\n   */\n  'aria-describedby'?: string;\n\n  /**\n   * A label to be used for accessibility purposes.\n   */\n  'aria-label'?: string;\n\n  /**\n   * One or more ids (separated by spaces) of elements that label the Link.\n   */\n  'aria-labelledby'?: string;\n\n  /**\n   * Triggered when a link is clicked, whether by keyboard, mouse, or touch events.\n   */\n  onClick?: (event: Event) => void;\n\n  /**\n   * Specifies the children\n   */\n  children?: ComponentChildren;\n\n  /**\n   * Specifies that the link element should be disabled.\n   */\n  isDisabled?: boolean;\n} & TestIdProps;\n\nconst noop = () => {};\n/**\n * Link component creates a hyperlink.\n */\nexport function Link({\n  href,\n  variant,\n  placement = 'standalone',\n  target,\n  testId,\n  'aria-describedby': ariaDescribedBy,\n  'aria-label': accessibleLabel,\n  'aria-labelledby': ariaLabelledBy,\n  children,\n  onClick,\n  isDisabled\n}: Props) {\n  const { interactionProps, applyPseudoHoverStyle, applyHoverStyle } = useInteractionStyle();\n  const { classes } = useComponentTheme<LinkVariantOptions>(LinkRedwoodTheme, {\n    needsEventsHover: applyHoverStyle ? 'isNeedsEventsHover' : 'notNeedsEventsHover',\n    pseudoHover: applyPseudoHoverStyle ? 'isPseudoHover' : 'notPseudoHover',\n    variant,\n    placement,\n    disabled: isDisabled ? 'isDisabled' : 'notDisabled'\n  });\n  const { isTabbable } = useTabbableMode();\n  const linkClasses = classNames([classes]);\n  const { pressProps } = usePressClick(onClick ?? noop);\n  const testIdProps = useTestId(testId);\n  return (\n    <a\n      tabIndex={isTabbable && !isDisabled ? 0 : -1}\n      href={!isDisabled ? href : undefined}\n      aria-describedby={ariaDescribedBy}\n      aria-label={accessibleLabel}\n      aria-labelledby={ariaLabelledBy}\n      target={target}\n      {...(!isDisabled && pressProps)}\n      {...interactionProps}\n      {...testIdProps}\n      class={linkClasses}>\n      {children}\n    </a>\n  );\n}\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;AAoEA,MAAM,IAAI,GAAG,MAAK,GAAG,CAAC;AACtB;;AAEG;AACa,SAAA,IAAI,CAAC,EACnB,IAAI,EACJ,OAAO,EACP,SAAS,GAAG,YAAY,EACxB,MAAM,EACN,MAAM,EACN,kBAAkB,EAAE,eAAe,EACnC,YAAY,EAAE,eAAe,EAC7B,iBAAiB,EAAE,cAAc,EACjC,QAAQ,EACR,OAAO,EACP,UAAU,EACJ,EAAA;IACN,MAAM,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,eAAe,EAAE,GAAG,mBAAmB,EAAE,CAAC;AAC3F,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,iBAAiB,CAAqB,gBAAgB,EAAE;QAC1E,gBAAgB,EAAE,eAAe,GAAG,oBAAoB,GAAG,qBAAqB;QAChF,WAAW,EAAE,qBAAqB,GAAG,eAAe,GAAG,gBAAgB;QACvE,OAAO;QACP,SAAS;QACT,QAAQ,EAAE,UAAU,GAAG,YAAY,GAAG,aAAa;AACpD,KAAA,CAAC,CAAC;AACH,IAAA,MAAM,EAAE,UAAU,EAAE,GAAG,eAAe,EAAE,CAAC;IACzC,MAAM,WAAW,GAAG,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;IAC1C,MAAM,EAAE,UAAU,EAAE,GAAG,aAAa,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC;AACtD,IAAA,MAAM,WAAW,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;IACtC,QACEA,GACE,CAAA,GAAA,EAAA,EAAA,QAAQ,EAAE,UAAU,IAAI,CAAC,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC,EAC5C,IAAI,EAAE,CAAC,UAAU,GAAG,IAAI,GAAG,SAAS,EAAA,kBAAA,EAClB,eAAe,EAAA,YAAA,EACrB,eAAe,EAAA,iBAAA,EACV,cAAc,EAC/B,MAAM,EAAE,MAAM,EAAA,IACT,CAAC,UAAU,IAAI,UAAU,CAAC,EAC3B,GAAA,gBAAgB,EAChB,GAAA,WAAW,EACf,KAAK,EAAE,WAAW,EACjB,QAAA,EAAA,QAAQ,EACP,CAAA,EACJ;AACJ;;;;"}

package/es/LinkVariants.styles.css

@@ -42,7 +42,6 @@
 }
 .LinkVariants_multiVariantStyles_truncatingLinkStyles_styles__18dr6fkd {
   overflow: hidden;
-  text-overflow: ellipsis;
   vertical-align: middle;
 }
 .LinkVariants_multiVariantStyles_truncatingLinkWhiteSpace_nowrap__18dr6fkf {

package/es/LinkVariants.styles2.css

@@ -42,7 +42,6 @@
 }
 .LinkVariants_multiVariantStyles_truncatingLinkStyles_styles__1gbyfwid {
   overflow: hidden;
-  text-overflow: ellipsis;
   vertical-align: middle;
 }
 .LinkVariants_multiVariantStyles_truncatingLinkWhiteSpace_nowrap__1gbyfwif {

package/es/List-4636ba9b.js

@@ -17,16 +17,16 @@ import { m as mergeInterpolations } from './mergeInterpolations-30cd9a69.js';
 import { f as flexitemInterpolations } from './flexitem-7b7f7920.js';
 import { listItemMultiVariantStyles, paddingStyles, listItemStyles, skeletonStyles, sparkleStyles, listStyles } from './PRIVATE_List/themes/ListStyles.css.js';
 import { S as Skeleton } from './Skeleton-d6f0969e.js';
-import { F as Flex } from './Flex-03129963.js';
+import { F as Flex } from './Flex-fc483125.js';
 import { g as globalImages } from './ImageVars.css-7b3180c8.js';
-import { u as useTheme } from './useTheme-0e7497db.js';
-import { u as useTestId } from './useTestId-f24ac480.js';
+import { u as useTheme } from './useTheme-c2cfbc29.js';
+import { u as useTestId } from './useTestId-ab1bede6.js';
 import './ReorderableContext-0daeea89.js';
-import './LayerHost-7931b424.js';
+import './LayerHost-3cf255a6.js';
 import './CollectionInteractionContext-7cf19abc.js';
 import { u as useCollectionInteractionContext } from './useCollectionInteractionContext-3895c632.js';
 import 'preact';
-import { u as useSelection } from './useSelection-65134722.js';
+import { u as useSelection } from './useSelection-d6fefa3d.js';
 import { u as useAdditiveSelection } from './useAdditiveSelection-3ba8e3e3.js';
 import { u as useItemAction } from './useItemAction-27b29f5c.js';
 import { I as Inset } from './Inset-8afb9876.js';

package/es/LiveRegion-2e8830ae.js

@@ -0,0 +1,39 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx } from 'preact/jsx-runtime';
+import { useState, useCallback, useEffect } from 'preact/hooks';
+import './LiveRegionStyles.styles.css';
+import { u as useTestId } from './useTestId-ab1bede6.js';
+
+var offScreenStyle = 'LiveRegionStyles_offScreenStyle__1uvpdtw0';
+
+/**
+ * A helper component that renders an aria-live region
+ *
+ * TODO: Create a more centralized component that can handle aria-live region for
+ * the whole application and use context api to communicate
+ */
+function LiveRegion({ testId, atomic = 'false', children = '', timeout = 100, type = 'polite' }) {
+    const ariaLiveText = useLiveText(children, timeout);
+    const testIdProps = useTestId(testId);
+    return (jsx("span", { "aria-live": type, "aria-atomic": atomic, class: offScreenStyle, ...testIdProps, children: ariaLiveText }));
+}
+/**
+ * A custom hook for handling the aria-live region
+ *
+ * @param text The aria-live text to use
+ * @param timeout The timeout for setting the aria-live text async
+ * @returns The aria-live text
+ */
+function useLiveText(text, timeout) {
+    const [liveText, setLiveText] = useState('');
+    const updateText = useCallback(() => setLiveText(text), [text]);
+    const updateTextAsync = useCallback(() => setTimeout(updateText, timeout), [updateText, timeout]);
+    useEffect(() => {
+        const timeoutId = updateTextAsync();
+        return () => clearTimeout(timeoutId);
+    }, [updateTextAsync]);
+    return liveText;
+}
+
+export { LiveRegion as L };
+//# sourceMappingURL=LiveRegion-2e8830ae.js.map

package/es/LiveRegion-2e8830ae.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveRegion-2e8830ae.js","sources":["../../src/UNSAFE_LiveRegion/LiveRegion.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'preact/hooks';\nimport { offScreenStyle } from './LiveRegionStyles.css';\nimport { TestIdProps, useTestId } from '#hooks/UNSAFE_useTestId';\n\ntype Props = TestIdProps & {\n  /**\n   * Whether this live region is atomic\n   */\n  atomic?: 'true' | 'false';\n\n  /**\n   * The text to be read out in the live region\n   */\n  children?: string;\n\n  /**\n   * Timeout for updating the text\n   */\n  timeout?: number;\n\n  /**\n   * The value for the aria-live attribute\n   */\n  type?: 'assertive' | 'polite' | 'off';\n};\n\n/**\n * A helper component that renders an aria-live region\n *\n * TODO: Create a more centralized component that can handle aria-live region for\n * the whole application and use context api to communicate\n */\nfunction LiveRegion({\n  testId,\n  atomic = 'false',\n  children = '',\n  timeout = 100,\n  type = 'polite'\n}: Props) {\n  const ariaLiveText = useLiveText(children, timeout);\n  const testIdProps = useTestId(testId);\n\n  return (\n    <span aria-live={type} aria-atomic={atomic} class={offScreenStyle} {...testIdProps}>\n      {ariaLiveText}\n    </span>\n  );\n}\n\n/**\n * A custom hook for handling the aria-live region\n *\n * @param text The aria-live text to use\n * @param timeout The timeout for setting the aria-live text async\n * @returns The aria-live text\n */\nfunction useLiveText(text: string, timeout: number) {\n  const [liveText, setLiveText] = useState('');\n  const updateText = useCallback(() => setLiveText(text), [text]);\n  const updateTextAsync = useCallback(() => setTimeout(updateText, timeout), [updateText, timeout]);\n\n  useEffect(() => {\n    const timeoutId = updateTextAsync();\n\n    return () => clearTimeout(timeoutId);\n  }, [updateTextAsync]);\n\n  return liveText;\n}\n\nexport { LiveRegion };\n"],"names":["_jsx"],"mappings":";;;;;;;;AA0BA;;;;;AAKG;AACH,SAAS,UAAU,CAAC,EAClB,MAAM,EACN,MAAM,GAAG,OAAO,EAChB,QAAQ,GAAG,EAAE,EACb,OAAO,GAAG,GAAG,EACb,IAAI,GAAG,QAAQ,EACT,EAAA;IACN,MAAM,YAAY,GAAG,WAAW,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;AACpD,IAAA,MAAM,WAAW,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;AAEtC,IAAA,QACEA,GAAA,CAAA,MAAA,EAAA,EAAA,WAAA,EAAiB,IAAI,EAAA,aAAA,EAAe,MAAM,EAAE,KAAK,EAAE,cAAc,KAAM,WAAW,EAAA,QAAA,EAC/E,YAAY,EAAA,CACR,EACP;AACJ,CAAC;AAED;;;;;;AAMG;AACH,SAAS,WAAW,CAAC,IAAY,EAAE,OAAe,EAAA;IAChD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AAC7C,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAChE,MAAM,eAAe,GAAG,WAAW,CAAC,MAAM,UAAU,CAAC,UAAU,EAAE,OAAO,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAElG,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;AAEpC,QAAA,OAAO,MAAM,YAAY,CAAC,SAAS,CAAC,CAAC;AACvC,KAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;AAEtB,IAAA,OAAO,QAAQ,CAAC;AAClB;;;;"}

package/es/MaxLengthLiveRegion-8f552ae2.js

@@ -0,0 +1,26 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsxs, Fragment, jsx } from 'preact/jsx-runtime';
+import { u as useDebounce } from './useDebounce-fa5a80e9.js';
+import { u as useTranslationBundle } from './useTranslationBundle-bc6e0896.js';
+import { L as LiveRegion } from './LiveRegion-2e8830ae.js';
+
+const MAX_LENGTH_UPDATE_DELAY = 500;
+function MaxLengthLiveRegion({ isMaxLengthExceeded, maxLength, testId, valueLength = 0 }) {
+    // Comment copied from InputBase.js in Big JET:
+    // Only update the aria-live div when the user has paused for more than
+    // 500 milliseconds. That way, we avoid queued up aria-live messages which
+    // would be annoying and not helpful. The 500ms was agreed upon in the
+    // accessibility review meeting.
+    const debouncedRemainingChars = useDebounce(maxLength - valueLength, MAX_LENGTH_UPDATE_DELAY);
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const maxLengthExceededTranslatedString = translations.formControl_maxLengthExceeded({
+        MAX_LENGTH: `${maxLength}`
+    });
+    const remainingCharsTranslatedString = translations.formControl_maxLengthRemaining({
+        CHARACTER_COUNT: `${debouncedRemainingChars}`
+    });
+    return (jsxs(Fragment, { children: [jsx(LiveRegion, { testId: testId ? testId + '_remainingChars' : undefined, children: remainingCharsTranslatedString }), isMaxLengthExceeded && (jsx(LiveRegion, { testId: testId ? testId + '_exceeded' : undefined, type: "assertive", children: maxLengthExceededTranslatedString }))] }));
+}
+
+export { MaxLengthLiveRegion as M };
+//# sourceMappingURL=MaxLengthLiveRegion-8f552ae2.js.map

package/es/MaxLengthLiveRegion-8f552ae2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaxLengthLiveRegion-8f552ae2.js","sources":["../../src/UNSAFE_TextField/MaxLengthLiveRegion.tsx"],"sourcesContent":["import { useDebounce } from '../hooks/UNSAFE_useDebounce';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '../resources/nls/bundle';\nimport { LiveRegion } from '../UNSAFE_LiveRegion';\nimport { TestIdProps } from '#hooks/UNSAFE_useTestId';\n\ntype Props = TestIdProps & {\n  isMaxLengthExceeded: boolean;\n  maxLength: number;\n  valueLength?: number;\n};\n\nconst MAX_LENGTH_UPDATE_DELAY = 500;\n\nexport function MaxLengthLiveRegion({\n  isMaxLengthExceeded,\n  maxLength,\n  testId,\n  valueLength = 0\n}: Props) {\n  // Comment copied from InputBase.js in Big JET:\n  // Only update the aria-live div when the user has paused for more than\n  // 500 milliseconds. That way, we avoid queued up aria-live messages which\n  // would be annoying and not helpful. The 500ms was agreed upon in the\n  // accessibility review meeting.\n  const debouncedRemainingChars = useDebounce(maxLength - valueLength, MAX_LENGTH_UPDATE_DELAY);\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const maxLengthExceededTranslatedString = translations.formControl_maxLengthExceeded({\n    MAX_LENGTH: `${maxLength}`\n  });\n  const remainingCharsTranslatedString = translations.formControl_maxLengthRemaining({\n    CHARACTER_COUNT: `${debouncedRemainingChars}`\n  });\n\n  return (\n    <>\n      <LiveRegion testId={testId ? testId + '_remainingChars' : undefined}>\n        {remainingCharsTranslatedString}\n      </LiveRegion>\n      {isMaxLengthExceeded && (\n        <LiveRegion testId={testId ? testId + '_exceeded' : undefined} type=\"assertive\">\n          {maxLengthExceededTranslatedString}\n        </LiveRegion>\n      )}\n    </>\n  );\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAYA,MAAM,uBAAuB,GAAG,GAAG,CAAC;AAEpB,SAAA,mBAAmB,CAAC,EAClC,mBAAmB,EACnB,SAAS,EACT,MAAM,EACN,WAAW,GAAG,CAAC,EACT,EAAA;;;;;;IAMN,MAAM,uBAAuB,GAAG,WAAW,CAAC,SAAS,GAAG,WAAW,EAAE,uBAAuB,CAAC,CAAC;AAC9F,IAAA,MAAM,YAAY,GAAG,oBAAoB,CAAa,0BAA0B,CAAC,CAAC;AAClF,IAAA,MAAM,iCAAiC,GAAG,YAAY,CAAC,6BAA6B,CAAC;QACnF,UAAU,EAAE,CAAG,EAAA,SAAS,CAAE,CAAA;AAC3B,KAAA,CAAC,CAAC;AACH,IAAA,MAAM,8BAA8B,GAAG,YAAY,CAAC,8BAA8B,CAAC;QACjF,eAAe,EAAE,CAAG,EAAA,uBAAuB,CAAE,CAAA;AAC9C,KAAA,CAAC,CAAC;IAEH,QACEA,4BACEC,GAAC,CAAA,UAAU,IAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,iBAAiB,GAAG,SAAS,YAChE,8BAA8B,EAAA,CACpB,EACZ,mBAAmB,KAClBA,IAAC,UAAU,EAAA,EAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,WAAW,GAAG,SAAS,EAAE,IAAI,EAAC,WAAW,EAAA,QAAA,EAC5E,iCAAiC,EACvB,CAAA,CACd,CACA,EAAA,CAAA,EACH;AACJ;;;;"}

package/es/Message-510c2db8.js

@@ -1,14 +1,14 @@
 /* @oracle/oraclejet-preact: undefined */
 import { jsx, jsxs, Fragment as Fragment$1 } from 'preact/jsx-runtime';
 import { useCallback, useRef, useEffect } from 'preact/hooks';
-import { F as Flex } from './Flex-03129963.js';
+import { F as Flex } from './Flex-fc483125.js';
 import { MessageBannerRedwoodTheme } from './UNSAFE_MessageBanner/themes/redwood/MessageBannerTheme.js';
 import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
 import { T as Timer } from './timer-f45a7e92.js';
 import { c as classNames } from './classNames-4e12b00d.js';
 import { S as SvgClose } from './Close-5a460764.js';
 import { I as IconButton } from './IconButton-7f91481c.js';
-import { u as useTranslationBundle } from './useTranslationBundle-4822502f.js';
+import { u as useTranslationBundle } from './useTranslationBundle-bc6e0896.js';
 import { messageCloseButtonStyles, messageStartIconStyles, messageDetailStyles, messageHeaderStyles, messageTimestampStyles, messageStyles } from './PRIVATE_Message/themes/MessageStyles.css.js';
 import { Fragment } from 'preact';
 import { i as isValidValueForProp, f as formatTimestamp } from './MessageFormattingUtils-cdb25115.js';

package/es/MessageLayer-1dbdc0b6.js

@@ -0,0 +1,58 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx } from 'preact/jsx-runtime';
+import { F as Flex } from './Flex-fc483125.js';
+import { W as WindowOverlay } from './WindowOverlay-467c2d12.js';
+import { u as useUser } from './useUser-e543b73c.js';
+import { L as Layer } from './Layer-6c27170e.js';
+import 'preact/compat';
+import './LayerHost-3cf255a6.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-1dbdc0b6.js.map

package/es/MessageLayer-1dbdc0b6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageLayer-1dbdc0b6.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-47000438.js

@@ -5,10 +5,10 @@ import { S as SvgSuccessS } from './SuccessS-b5192d40.js';
 import { S as SvgErrorS } from './ErrorS-3a890bf6.js';
 import { S as SvgInformationS } from './InformationS-d53c2a91.js';
 import { S as SvgWarningS } from './WarningS-3e53d87e.js';
-import { F as Flex } from './Flex-03129963.js';
+import { F as Flex } from './Flex-fc483125.js';
 import { startIconContainerStyles, messageStartIconStyles, severityIconStyles, messageSummaryStyles } from './PRIVATE_Message/themes/MessageStyles.css.js';
-import { u as useTranslationBundle } from './useTranslationBundle-4822502f.js';
-import { u as useTestId } from './useTestId-f24ac480.js';
+import { u as useTranslationBundle } from './useTranslationBundle-bc6e0896.js';
+import { u as useTestId } from './useTestId-ab1bede6.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-c0f730b8.js

@@ -2,12 +2,12 @@
 import { jsx, jsxs } from 'preact/jsx-runtime';
 import { forwardRef, useRef, useEffect, useContext } from 'preact/compat';
 import { u as useModal } from './useModal-953082f2.js';
-import { L as Layer } from './Layer-535577b5.js';
-import './LayerHost-7931b424.js';
+import { L as Layer } from './Layer-6c27170e.js';
+import './LayerHost-3cf255a6.js';
 import { createContext } from 'preact';
 import { multiVariantStyles, baseStyle } from './UNSAFE_Modal/themes/ModalStyles.css.js';
 import { a as allTabbableElements, f as focusWithin } from './tabbableUtils-c8311ec6.js';
-import { i as isLogicalAncestor } from './popupUtils-51366a29.js';
+import { i as isLogicalAncestor } from './popupUtils-7774330e.js';
 import { g as getClientHints } from './clientHints-a42b510c.js';
 
 const LogicalParentRefContext = createContext(undefined);

package/es/MonthView-6628071f.js

@@ -0,0 +1,229 @@
+/* @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-cf5948ff.js';
+import { a as getFormatParse } from './getFormatParse-6d6fdd4d.js';
+import { w as warn } from './logger-c92f309c.js';
+import { d as getIsoDateStr, t as toJSDate, e as toJSDateUTC, b as checkNoCalendarExtension, f as formatFullCalendarDate, i as isDateOutOfRange } from './calendarDateUtils-30611c35.js';
+import { useMemo, useRef } from 'preact/hooks';
+import { S as StyledDatePickerButton } from './StyledDatePickerButton-a7782821.js';
+import { useCallback } from 'preact/compat';
+import { u as useTranslationBundle } from './useTranslationBundle-bc6e0896.js';
+import { u as useFocusableCell, a as useCellNavigation } from './useCellNavigation-0565b6dd.js';
+import { dayCellStyles } from './PRIVATE_MonthView/themes/DayCellStyles.css.js';
+import { u as useUser } from './useUser-e543b73c.js';
+import { u as useTestId } from './useTestId-ab1bede6.js';
+import { G as Grid } from './Grid-6f92d323.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';
+import { u as useCollectionFocusRing } from './useCollectionFocusRing-23ac7f97.js';
+import { g as getClientHints } from './clientHints-a42b510c.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, isForcedFocusRing, onAction, 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
+    });
+    // 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,
+            isForcedFocusRing,
+            label: dayOfMonth,
+            ...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 = toJSDateUTC(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, 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 testIdProps = useTestId(testId);
+    const dateFormatter = useMemo(() => {
+        checkNoCalendarExtension(locale);
+        const dateFormatOptions = {
+            locale,
+            dateStyle: 'full'
+        };
+        const { format } = getFormatParse(dateFormatOptions);
+        return format;
+    }, [locale]);
+    /**
+     * JET-77041 acc: safari: oj-c-datepicker focus ring missing after certain interactions
+     * When a day cell receives focus via arrow key navigation after a mouse click, Safari
+     * ignores `:focus-visible` even though on other browsers it matches.
+     * If you tab first, then use the arrow key, Safari does not ignore `:focus-visible`.
+     *
+     * For Safari only, during keyboard navigation, add a style class that forces the ring on the day cell.
+     */
+    const dayGridRootRef = useRef(null);
+    // This hook is used to track if the user is using the keyboard in the MonthView.
+    // We map focusRingVisible to isFocusRingShown. This is true when the user uses the keyboard,
+    // and set to false when the user uses the mouse.
+    const [isFocusRingShown, focusRingProps] = useCollectionFocusRing(dayGridRootRef, ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'], true // isVisibleFocusLostOnClick, click should hide ring
+    );
+    const isSafari = getClientHints().browser === 'safari';
+    const isForcedFocusRing = isSafari && isFocusRingShown;
+    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, isForcedFocusRing: isForcedFocusRing, isHidden: isHidden, isReadonly: isReadonly, isSelected: isSelected, isToday: isToday, onAction: onAction, 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, ref: dayGridRootRef, ...focusRingProps, ...testIdProps, children: jsxs(Grid, { gap: monthViewScaleVars.rowGap, "aria-label": monthViewAriaLabel, role: "grid", 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-6628071f.js.map