@oracle/oraclejet-preact 19.0.0 → 19.0.2

package/es/ListItemLayoutStyles.styles.css

@@ -9,59 +9,54 @@
   align-self: center;
   min-width: 0;
 }
-.ListItemLayoutStyles_minimumHeight__1b15h5i3 {
-  min-height: 24px;
-  display: flex;
-  align-items: center;
-}
-.ListItemLayoutStyles_topRowStyles__1b15h5i4 {
+.ListItemLayoutStyles_topRowStyles__1b15h5i3 {
   vertical-align: bottom;
 }
-.ListItemLayoutStyles_topAlignStyles__1b15h5i5 {
+.ListItemLayoutStyles_topAlignStyles__1b15h5i4 {
   align-self: top;
   height: -moz-min-content;
   height: min-content;
 }
-.ListItemLayoutStyles_leftPaddingStyles__1b15h5i6 {
+.ListItemLayoutStyles_leftPaddingStyles__1b15h5i5 {
   padding-inline-start: calc(4 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, 0.25rem));
 }
-.ListItemLayoutStyles_optInRightPaddingStyles__1b15h5i7 {
+.ListItemLayoutStyles_optInRightPaddingStyles__1b15h5i6 {
   padding-inline-end: calc(4 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, 0.25rem));
 }
-.ListItemLayoutStyles_optInTopPaddingStyles__1b15h5i8 {
+.ListItemLayoutStyles_optInTopPaddingStyles__1b15h5i7 {
   padding-block-start: calc(4 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, 0.25rem));
 }
-.ListItemLayoutStyles_actionStyles__1b15h5i9 {
+.ListItemLayoutStyles_actionStyles__1b15h5i8 {
   padding-inline-start: calc(4 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, 0.25rem));
   margin-top: calc(-1 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-list-item-padding-vertical));
   margin-bottom: calc(-1 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-list-item-padding-vertical));
 }
-.ListItemLayoutStyles_flexColumnStyles__1b15h5ia {
+.ListItemLayoutStyles_flexColumnStyles__1b15h5i9 {
   display: flex;
   flex-direction: column;
 }
-.ListItemLayoutStyles_flexRowStyles__1b15h5ib {
+.ListItemLayoutStyles_flexRowStyles__1b15h5ia {
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
   align-self: center;
 }
-.ListItemLayoutStyles_endJustifyStyles__1b15h5ic {
+.ListItemLayoutStyles_endJustifyStyles__1b15h5ib {
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
 }
-.ListItemLayoutStyles_optInExtraStyles__1b15h5id {
+.ListItemLayoutStyles_optInExtraStyles__1b15h5ic {
   height: -moz-fit-content;
   height: fit-content;
 }
-.ListItemLayoutStyles_rowAlignStyles__1b15h5ie {
+.ListItemLayoutStyles_rowAlignStyles__1b15h5id {
   align-self: end;
 }
-.ListItemLayoutStyles_displayFlexStyle__1b15h5if {
+.ListItemLayoutStyles_displayFlexStyle__1b15h5ie {
   display: flex;
 }
-.ListItemLayoutStyles_childrenStyles__1b15h5ig {
+.ListItemLayoutStyles_childrenStyles__1b15h5if {
   margin-top: 0 !important;
   margin-bottom: 0 !important;
   margin-left: 0 !important;

package/es/MaxLengthCounter-d622f964.js

@@ -0,0 +1,25 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, jsxs } from 'preact/jsx-runtime';
+import { useCallback } from 'preact/hooks';
+import { c as classNames } from './classNames-4e12b00d.js';
+import { u as usePress } from './usePress-051f5adb.js';
+import './FormFieldContext-47ca0c20.js';
+import { u as useFormFieldContext } from './useFormFieldContext-daf7a676.js';
+import './MaxLengthCounterStyles.styles.css';
+
+var hide = 'MaxLengthCounterStyles_hide__7dy9j71';
+var maxLengthCounterBase = 'MaxLengthCounterStyles_maxLengthCounterBase__7dy9j70';
+var spanStyles = 'MaxLengthCounterStyles_spanStyles__7dy9j72';
+
+const noop = () => { };
+function MaxLengthCounter({ maxLength, valueLength = 0, onClick }) {
+    const { isFocused } = useFormFieldContext();
+    // We don't want mousedown on this component to do anything, so prevent the default behavior.
+    const killEvent = useCallback((event) => event.preventDefault(), []);
+    const textClasses = classNames([!isFocused && hide]);
+    const { pressProps } = usePress(onClick ?? noop);
+    return (jsx("div", { class: maxLengthCounterBase, onMouseDown: killEvent, ...pressProps, children: jsxs("span", { class: textClasses, children: [jsx("span", { class: spanStyles, children: valueLength }), jsx("span", { class: spanStyles, children: "/" }), jsx("span", { class: spanStyles, children: maxLength })] }) }));
+}
+
+export { MaxLengthCounter as M };
+//# sourceMappingURL=MaxLengthCounter-d622f964.js.map

package/es/MaxLengthCounter-d622f964.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaxLengthCounter-d622f964.js","sources":["../../src/UNSAFE_TextArea/MaxLengthCounter.tsx"],"sourcesContent":["import { useCallback } from 'preact/hooks';\n\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { usePress } from '../hooks/UNSAFE_usePress';\nimport { useFormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { hide, maxLengthCounterBase, spanStyles } from './MaxLengthCounterStyles.css';\n\ntype Props = {\n  maxLength: number;\n  valueLength?: number;\n  onClick?: () => void; // the calling component should focus on the appropriate element when clicked.\n};\n\nconst noop = () => {};\n\nexport function MaxLengthCounter({ maxLength, valueLength = 0, onClick }: Props) {\n  const { isFocused } = useFormFieldContext();\n  // We don't want mousedown on this component to do anything, so prevent the default behavior.\n  const killEvent = useCallback((event: Event) => event.preventDefault(), []);\n  const textClasses = classNames([!isFocused && hide]);\n  const { pressProps } = usePress(onClick ?? noop);\n  return (\n    <div class={maxLengthCounterBase} onMouseDown={killEvent} {...pressProps}>\n      <span class={textClasses}>\n        <span class={spanStyles}>{valueLength}</span>\n        <span class={spanStyles}>/</span>\n        <span class={spanStyles}>{maxLength}</span>\n      </span>\n    </div>\n  );\n}\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,IAAI,GAAG,MAAK,GAAG,CAAC;AAEhB,SAAU,gBAAgB,CAAC,EAAE,SAAS,EAAE,WAAW,GAAG,CAAC,EAAE,OAAO,EAAS,EAAA;AAC7E,IAAA,MAAM,EAAE,SAAS,EAAE,GAAG,mBAAmB,EAAE,CAAC;;AAE5C,IAAA,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,KAAY,KAAK,KAAK,CAAC,cAAc,EAAE,EAAE,EAAE,CAAC,CAAC;IAC5E,MAAM,WAAW,GAAG,UAAU,CAAC,CAAC,CAAC,SAAS,IAAI,IAAI,CAAC,CAAC,CAAC;IACrD,MAAM,EAAE,UAAU,EAAE,GAAG,QAAQ,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC;AACjD,IAAA,QACEA,GAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,oBAAoB,EAAE,WAAW,EAAE,SAAS,EAAM,GAAA,UAAU,YACtEC,IAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAE,WAAW,EAAA,QAAA,EAAA,CACtBD,cAAM,KAAK,EAAE,UAAU,EAAA,QAAA,EAAG,WAAW,EAAQ,CAAA,EAC7CA,cAAM,KAAK,EAAE,UAAU,EAAU,QAAA,EAAA,GAAA,EAAA,CAAA,EACjCA,cAAM,KAAK,EAAE,UAAU,EAAG,QAAA,EAAA,SAAS,GAAQ,CACtC,EAAA,CAAA,EAAA,CACH,EACN;AACJ;;;;"}

package/es/Message-b2ab3a28.js

@@ -0,0 +1,203 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, jsxs } from 'preact/jsx-runtime';
+import { useCallback, useRef, useEffect } from 'preact/hooks';
+import { F as Flex } from './Flex-97b023db.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-315568df.js';
+import { I as IconButton } from './IconButton-e7787aeb.js';
+import { u as useTranslationBundle } from './useTranslationBundle-38db1e3c.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';
+import { p as playSound, s as severityBasedStyleClass, M as MessageStartIcon, a as MessageSummary } from './MessagesManager-c46786cb.js';
+import { x as xUnits } from './utils-cfef1929.js';
+
+/**
+ * A Component for rendering the message close button
+ */
+function MessageCloseButton({ onAction, variant = 'banner' }) {
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const renderedButton = (jsx(IconButton, { "aria-label": translations.message_close(), size: "sm", variant: "borderless", onAction: onAction, children: jsx(SvgClose, {}) }));
+    // TODO:  Refactor to utilize useComponentTheme and multiVariantStyles.
+    const classes = classNames([messageCloseButtonStyles.base, messageCloseButtonStyles[variant]]);
+    // Otherwise, render the close icon
+    return (jsx("div", { class: classes, "data-oj-message-close-button": "", children: renderedButton }));
+}
+
+/**
+ * Component for rendering custom icon/content for start icon in Message
+ */
+function MessageCustomStartIcon({ item, renderer }) {
+    // TODO:  Refactor to utilize useComponentTheme and multiVariantStyles.
+    const classes = classNames([
+        messageStartIconStyles.base,
+        // for now only toast has support for custom icon
+        messageStartIconStyles.toast,
+        messageStartIconStyles.customToast
+    ]);
+    return (jsx("div", { class: classes, role: "presentation", "data-oj-message-custom-icon": "", children: renderer(item) }));
+}
+
+/**
+ * Default renderer for rendering the detail content.
+ *
+ * @param item The data item object
+ * @returns Rendered detail content
+ */
+function defaultDetailRenderer(item) {
+    const { detail } = item.data;
+    // If the detail is null or an empty string, do not render the
+    // content row
+    if (!isValidValueForProp(detail)) {
+        return null;
+    }
+    return jsx(Fragment, { children: detail });
+}
+/**
+ * Detail Component for rendering the detail content of the Message
+ */
+function MessageDetail({ item, renderer, variant = 'banner' }) {
+    const isCustomRendered = renderer != null;
+    const renderedContent = (renderer ?? defaultDetailRenderer)(item);
+    if (renderedContent == null)
+        return null;
+    // If detail content is rendered, then wrap it in a div with specified style classes
+    const classes = classNames([messageDetailStyles.base, messageDetailStyles[variant]]);
+    return (jsx("div", { class: classes, ...(isCustomRendered ? { 'data-oj-message-custom-detail': '' } : {}), children: renderedContent }));
+}
+
+/**
+ * A component that styles the header for the message component
+ * @param param0 Props
+ * @returns MessageHeader component instance
+ */
+function MessageHeader({ children, variant = 'banner' }) {
+    const rootClasses = classNames([messageHeaderStyles.base, messageHeaderStyles[variant]]);
+    return (jsx("div", { role: "presentation", class: rootClasses, children: children }));
+}
+
+/**
+ * Timestamp Component for rendering timestamp in Message
+ */
+function MessageTimestamp({ value, variant = 'banner' }) {
+    // If detail content is rendered, then wrap it in a div with specified style classes
+    // TODO:  Refactor to utilize useComponentTheme and multiVariantStyles.
+    const classes = classNames([messageTimestampStyles[variant]]);
+    // Otherwise, render the timestamp
+    const formattedTimestamp = formatTimestamp(value);
+    return jsx("div", { class: classes, children: formattedTimestamp });
+}
+
+/**
+ * Determines the base variant of the message - banner or toast
+ *
+ * @param variant The message variant
+ * @returns The base variant
+ */
+function getBaseVariant(variant) {
+    if (variant === 'pageBanner' || variant === 'sectionBanner') {
+        return 'banner';
+    }
+    return 'toast';
+}
+/**
+ * Determines if a severity icon is needed based on the component severity
+ *
+ * @param severity The component severity
+ * @returns Whether or not to render the severity icon
+ */
+function isSeverityIconNeeded(severity) {
+    const isValidSeverity = isValidValueForProp(severity, 'severity');
+    return isValidSeverity && severity !== 'none';
+}
+/**
+ * Default timeout duration for autoTimeout in milliseconds
+ */
+const MIN_SECONDS = 5;
+const DEFAULT_TIMEOUT = MIN_SECONDS * 1000;
+/**
+ * Component that renders an individual message
+ */
+function Message({ detailRenderer, iconRenderer, item, onClose, messageRef = () => { }, variant = 'pageBanner' }) {
+    const { closeAffordance = 'on', severity = 'error', sound, summary, timestamp } = item.data;
+    const { autoTimeout = 'off' } = item.data;
+    const baseVariant = getBaseVariant(variant);
+    /**
+     * Handles clicking on the close icon of the message
+     */
+    const handleClose = useCallback(() => {
+        onClose?.(item);
+    }, [item, onClose]);
+    /**
+     * Handles closing the message on pressing Esc
+     */
+    const handleCloseOnEsc = useCallback((event) => {
+        // Close the message only when closeAffordance is on
+        if (event.key === 'Escape' && closeAffordance === 'on') {
+            onClose?.(item);
+        }
+    }, [closeAffordance, item, onClose]);
+    /**
+     * Set auto timeout for toast messages
+     */
+    const shouldTimeout = baseVariant === 'toast' && autoTimeout !== 'off';
+    const currentTimerRef = useRef();
+    const timeout = typeof autoTimeout === 'number' ? autoTimeout : DEFAULT_TIMEOUT;
+    const timeoutDuration = autoTimeout === 'on' ? DEFAULT_TIMEOUT : timeout;
+    const startTimer = useCallback(() => {
+        if (currentTimerRef.current)
+            return;
+        currentTimerRef.current = new Timer(handleClose, timeoutDuration);
+    }, [handleClose, timeoutDuration]);
+    const clearTimer = useCallback(() => {
+        if (!currentTimerRef.current)
+            return;
+        currentTimerRef.current.clear();
+        currentTimerRef.current = undefined;
+    }, []);
+    const pauseTimer = useCallback(() => {
+        currentTimerRef.current?.pause();
+    }, []);
+    const resumeTimer = useCallback(() => {
+        currentTimerRef.current?.resume();
+    }, []);
+    useEffect(() => {
+        if (isValidValueForProp(sound)) {
+            // It is sufficient to check for the value to be a
+            // non-empty string. The playSound method takes care of the rest.
+            playSound(sound);
+        }
+        // on mount, start timer for toast messages if needed
+        if (shouldTimeout) {
+            startTimer();
+        }
+        return () => {
+            // clear out any pending timer
+            clearTimer();
+        };
+        // eslint-disable-next-line
+    }, []); // No deps to run this only on mount
+    const { variantClasses } = useComponentTheme(MessageBannerRedwoodTheme, {
+        severity
+    });
+    // TODO:  Refactor to utilize useComponentTheme and multiVariantStyles.
+    const rootClasses = classNames([
+        baseVariant === 'banner' && variantClasses,
+        messageStyles.base[baseVariant],
+        // for now, we do not have severity based styling on toast. So, we ignore this class for toasts
+        variant !== 'toast' && severityBasedStyleClass(severity, baseVariant),
+        variant === 'sectionBanner' && messageStyles.section
+    ]);
+    const contentClasses = classNames([messageStyles.content.base, messageStyles.content[baseVariant]]);
+    // We will be animating the root div, so add padding to an inner wrapper div so that
+    // when animating height looks smooth. If padding were to be added to the root
+    // div, the animation will not be smooth as height will never reach 0 due to the
+    // padding.
+    return (jsx("div", { ref: messageRef, class: rootClasses, role: "alert", "aria-atomic": "true", "data-oj-key": `${typeof item.key}-${item.key}`, tabIndex: 0, onKeyUp: handleCloseOnEsc, onFocusIn: pauseTimer, onFocusOut: resumeTimer, children: jsxs("div", { class: contentClasses, children: [iconRenderer ? (jsx(MessageCustomStartIcon, { item: item, renderer: iconRenderer })) : isSeverityIconNeeded(severity) ? (jsx(MessageStartIcon, { severity: severity, variant: baseVariant })) : null, jsxs(Flex, { direction: "column", flex: "1", gap: xUnits(2), children: [jsxs(MessageHeader, { variant: baseVariant, children: [jsx(MessageSummary, { variant: baseVariant, text: summary, role: "heading", "aria-level": 2 }), isValidValueForProp(timestamp, 'timestamp') && variant !== 'toast' && (jsx(MessageTimestamp, { variant: baseVariant, value: timestamp }))] }), jsx(MessageDetail, { variant: baseVariant, item: item, renderer: detailRenderer })] }), closeAffordance === 'on' && (jsx(MessageCloseButton, { variant: baseVariant, onAction: handleClose }))] }) }));
+}
+
+export { Message as M, MessageCloseButton as a, MessageDetail as b, MessageTimestamp as c };
+//# sourceMappingURL=Message-b2ab3a28.js.map

package/es/Message-b2ab3a28.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Message-b2ab3a28.js","sources":["../../src/PRIVATE_Message/MessageCloseButton.tsx","../../src/PRIVATE_Message/MessageCustomStartIcon.tsx","../../src/PRIVATE_Message/MessageDetail.tsx","../../src/PRIVATE_Message/MessageHeader.tsx","../../src/PRIVATE_Message/MessageTimestamp.tsx","../../src/PRIVATE_Message/Message.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { CloseIcon } from '../PRIVATE_ThemedIcons/CloseIcon';\nimport { IconButton } from '../UNSAFE_IconButton';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '../resources/nls/bundle';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { MessageVariant } from './Message.types';\nimport { messageCloseButtonStyles } from './themes/MessageStyles.css';\n\n/**\n * Props for the MessageCloseButton component\n */\ntype Props = {\n  /**\n   * The callback function to be called when the close icon is clicked\n   */\n  onAction: (event?: Event) => void;\n\n  /**\n   * Style variant\n   */\n  variant?: MessageVariant;\n};\n\n/**\n * A Component for rendering the message close button\n */\nfunction MessageCloseButton({ onAction, variant = 'banner' }: Props) {\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const renderedButton = (\n    <IconButton\n      aria-label={translations.message_close()}\n      size=\"sm\"\n      variant=\"borderless\"\n      onAction={onAction}>\n      <CloseIcon />\n    </IconButton>\n  );\n  // TODO:  Refactor to utilize useComponentTheme and multiVariantStyles.\n  const classes = classNames([messageCloseButtonStyles.base, messageCloseButtonStyles[variant]]);\n\n  // Otherwise, render the close icon\n  return (\n    <div class={classes} data-oj-message-close-button=\"\">\n      {renderedButton}\n    </div>\n  );\n}\n\nexport { MessageCloseButton };\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { ComponentChildren } from 'preact';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { messageStartIconStyles } from './themes/MessageStyles.css';\nimport { MessageRendererDataItem } from './Message.types';\n\n/**\n * Props for the StartIcon component\n */\ntype Props<K, D> = {\n  /**\n   * The data item for rendering the start icon\n   */\n  item: MessageRendererDataItem<K, D>;\n\n  /**\n   * A custom renderer for rendering the start icon\n   */\n  renderer: (item: MessageRendererDataItem<K, D>) => ComponentChildren;\n};\n\n/**\n * Component for rendering custom icon/content for start icon in Message\n */\nfunction MessageCustomStartIcon<K, D>({ item, renderer }: Props<K, D>) {\n  // TODO:  Refactor to utilize useComponentTheme and multiVariantStyles.\n  const classes = classNames([\n    messageStartIconStyles.base,\n    // for now only toast has support for custom icon\n    messageStartIconStyles.toast,\n    messageStartIconStyles.customToast\n  ]);\n  return (\n    <div class={classes} role=\"presentation\" data-oj-message-custom-icon=\"\">\n      {renderer(item)}\n    </div>\n  );\n}\n\nexport { MessageCustomStartIcon };\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { ComponentChildren, Fragment } from 'preact';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { messageDetailStyles } from './themes/MessageStyles.css';\nimport { MessageRendererDataItem, MessageVariant } from './Message.types';\nimport { isValidValueForProp } from './MessageFormattingUtils';\n\ntype MessageWithDetailText = {\n  /**\n   * The detail text for the message\n   */\n  detail?: string;\n};\n\n/**\n * Props for the Detail component\n */\ntype Props<K, D> = {\n  /**\n   * The data item for rendering the detail content\n   */\n  item: MessageRendererDataItem<K, D>;\n\n  /**\n   * A custom renderer for rendering the detail content\n   */\n  renderer?: (item: MessageRendererDataItem<K, D>) => ComponentChildren;\n\n  /**\n   * Style variant\n   */\n  variant?: MessageVariant;\n};\n\n/**\n * Default renderer for rendering the detail content.\n *\n * @param item The data item object\n * @returns Rendered detail content\n */\nfunction defaultDetailRenderer<D extends MessageWithDetailText>(\n  item: MessageRendererDataItem<unknown, D>\n): ComponentChildren {\n  const { detail } = item.data;\n  // If the detail is null or an empty string, do not render the\n  // content row\n  if (!isValidValueForProp(detail)) {\n    return null;\n  }\n  return <Fragment>{detail}</Fragment>;\n}\n\n/**\n * Detail Component for rendering the detail content of the Message\n */\nfunction MessageDetail<K, D extends MessageWithDetailText>({\n  item,\n  renderer,\n  variant = 'banner'\n}: Props<K, D>) {\n  const isCustomRendered = renderer != null;\n  const renderedContent = (renderer ?? defaultDetailRenderer)(item);\n\n  if (renderedContent == null) return null;\n\n  // If detail content is rendered, then wrap it in a div with specified style classes\n  const classes = classNames([messageDetailStyles.base, messageDetailStyles[variant]]);\n  return (\n    <div class={classes} {...(isCustomRendered ? { 'data-oj-message-custom-detail': '' } : {})}>\n      {renderedContent}\n    </div>\n  );\n}\n\nexport { MessageDetail };\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { ComponentChildren } from 'preact';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { messageHeaderStyles } from './themes/MessageStyles.css';\nimport { MessageVariant } from './Message.types';\n\n/**\n * Props for the MessageHeader component\n */\ntype MessageHeaderProps = {\n  variant?: MessageVariant;\n  children?: ComponentChildren;\n};\n/**\n * A component that styles the header for the message component\n * @param param0 Props\n * @returns MessageHeader component instance\n */\nexport function MessageHeader({ children, variant = 'banner' }: MessageHeaderProps) {\n  const rootClasses = classNames([messageHeaderStyles.base, messageHeaderStyles[variant]]);\n  return (\n    <div role=\"presentation\" class={rootClasses}>\n      {children}\n    </div>\n  );\n}\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { messageTimestampStyles } from './themes/MessageStyles.css';\nimport { MessageVariant } from './Message.types';\nimport { formatTimestamp } from './MessageFormattingUtils';\n\n/**\n * Props for the Timestamp component\n */\ntype Props = {\n  /**\n   * The timestamp to show in ISO format\n   */\n  value: string;\n\n  /**\n   * Style variant\n   */\n  variant?: MessageVariant;\n};\n\n/**\n * Timestamp Component for rendering timestamp in Message\n */\nfunction MessageTimestamp({ value, variant = 'banner' }: Props) {\n  // If detail content is rendered, then wrap it in a div with specified style classes\n  // TODO:  Refactor to utilize useComponentTheme and multiVariantStyles.\n  const classes = classNames([messageTimestampStyles[variant]]);\n\n  // Otherwise, render the timestamp\n  const formattedTimestamp = formatTimestamp(value as string);\n  return <div class={classes}>{formattedTimestamp}</div>;\n}\n\nexport { MessageTimestamp };\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ComponentChildren, Ref } from 'preact';\nimport { useCallback, useEffect, useRef } from 'preact/hooks';\nimport { Flex } from '../UNSAFE_Flex';\nimport { MessageBannerVariantOptions } from '../UNSAFE_MessageBanner';\nimport { MessageBannerRedwoodTheme } from '../UNSAFE_MessageBanner/themes/redwood/MessageBannerTheme';\nimport { MessageToastItem } from '../UNSAFE_MessageToast';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { Timer } from '../utils/PRIVATE_timer';\nimport { classNames as cx } from '../utils/UNSAFE_classNames';\nimport { Item } from '../utils/UNSAFE_dataProvider';\nimport { MessageRendererDataItem, MessageSeverity } from './Message.types';\nimport { MessageCloseButton } from './MessageCloseButton';\nimport { MessageCustomStartIcon } from './MessageCustomStartIcon';\nimport { MessageDetail } from './MessageDetail';\nimport { isValidValueForProp } from './MessageFormattingUtils';\nimport { MessageHeader } from './MessageHeader';\nimport { MessageStartIcon } from './MessageStartIcon';\nimport { MessageSummary } from './MessageSummary';\nimport { MessageTimestamp } from './MessageTimestamp';\nimport { playSound, severityBasedStyleClass } from './MessageUtils';\nimport { messageStyles } from './themes/MessageStyles.css';\nimport { xUnits } from '#UNSAFE_Theme';\nimport { Size } from '#utils/UNSAFE_size';\n\n// TODO: Refactor Message Item types\n// \n\n/**\n * An object representing a single message in Message component.\n */\nexport type MessageItem = {\n  /**\n   * Defines whether or not to include the close icon for the message\n   *\n   * @default 'on'\n   */\n  closeAffordance?: 'on' | 'off';\n\n  /**\n   * Defines the detail text of the message\n   */\n  detail?: string;\n\n  /**\n   * Defines the severity of the message\n   */\n  severity?: MessageSeverity;\n\n  /**\n   * Defines the sound to be played when opening the message\n   */\n  sound?: 'default' | 'none' | string;\n\n  /**\n   * Defines the primary text of the message\n   */\n  summary?: string;\n\n  /**\n   * Defines the timestamp for the message in ISO format\n   */\n  timestamp?: string;\n};\n\n/**\n * Props for the Message Component\n */\ntype Props<Key, Data> = {\n  /**\n   * A ref object for holding reference to this component\n   */\n  messageRef?: Ref<HTMLDivElement>;\n\n  /**\n   * The message item with all the necessary data in it\n   */\n  item: Item<Key, Data>;\n\n  /**\n   * A custom renderer for rendering the detail content\n   */\n  detailRenderer?: (item: MessageRendererDataItem<Key, Data>) => ComponentChildren;\n\n  /**\n   * A custom renderer for rendering the start icon\n   */\n  iconRenderer?: (item: MessageRendererDataItem<Key, Data>) => ComponentChildren;\n\n  /**\n   * Triggered when a user tries to close a message through UI interaction. The parent\n   * should listen to this event and remove the corresponding message item from the data\n   * which would then result in the message to be removed from the DOM. If the parent\n   * fails to remove the message item from the data, then no change will be done in the\n   * UI by the component.\n   */\n  onClose?: (item: Item<Key, Data>) => void;\n\n  /**\n   * A message can be a Banner message or Toast message.\n   *\n   * Furthermore, a Banner message can have a different look and feel. For example, when using page-level\n   * messaging the messages need to be rendered from edge to edge without any outline. On the other\n   * hand, when they are being used in a section of a page or a dialog, they need to be rendered\n   * with an outline. This attribute can be used to specify where the component is being used so that\n   * it will render the messages accordingly.\n   */\n  variant?: 'pageBanner' | 'sectionBanner' | 'toast';\n};\n\n/**\n * Determines the base variant of the message - banner or toast\n *\n * @param variant The message variant\n * @returns The base variant\n */\nfunction getBaseVariant(variant: 'pageBanner' | 'sectionBanner' | 'toast') {\n  if (variant === 'pageBanner' || variant === 'sectionBanner') {\n    return 'banner';\n  }\n  return 'toast';\n}\n\n/**\n * Determines if a severity icon is needed based on the component severity\n *\n * @param severity The component severity\n * @returns Whether or not to render the severity icon\n */\nfunction isSeverityIconNeeded(\n  severity: MessageSeverity\n): severity is Exclude<MessageSeverity, 'none'> {\n  const isValidSeverity = isValidValueForProp(severity, 'severity');\n  return isValidSeverity && severity !== 'none';\n}\n\n/**\n * Default timeout duration for autoTimeout in milliseconds\n */\nconst MIN_SECONDS = 5;\nconst DEFAULT_TIMEOUT = MIN_SECONDS * 1000;\n\n/**\n * Component that renders an individual message\n */\nfunction Message<K extends string | number = string | number, D extends MessageItem = MessageItem>({\n  detailRenderer,\n  iconRenderer,\n  item,\n  onClose,\n  messageRef = () => {},\n  variant = 'pageBanner'\n}: Props<K, D>) {\n  const { closeAffordance = 'on', severity = 'error', sound, summary, timestamp } = item.data;\n  const { autoTimeout = 'off' } = item.data as MessageToastItem;\n  const baseVariant = getBaseVariant(variant);\n\n  /**\n   * Handles clicking on the close icon of the message\n   */\n  const handleClose = useCallback(() => {\n    onClose?.(item);\n  }, [item, onClose]);\n\n  /**\n   * Handles closing the message on pressing Esc\n   */\n  const handleCloseOnEsc = useCallback(\n    (event: KeyboardEvent) => {\n      // Close the message only when closeAffordance is on\n      if (event.key === 'Escape' && closeAffordance === 'on') {\n        onClose?.(item);\n      }\n    },\n    [closeAffordance, item, onClose]\n  );\n\n  /**\n   * Set auto timeout for toast messages\n   */\n  const shouldTimeout = baseVariant === 'toast' && autoTimeout !== 'off';\n  const currentTimerRef = useRef<Timer>();\n  const timeout = typeof autoTimeout === 'number' ? autoTimeout : DEFAULT_TIMEOUT;\n  const timeoutDuration = autoTimeout === 'on' ? DEFAULT_TIMEOUT : timeout;\n\n  const startTimer = useCallback(() => {\n    if (currentTimerRef.current) return;\n\n    currentTimerRef.current = new Timer(handleClose, timeoutDuration);\n  }, [handleClose, timeoutDuration]);\n\n  const clearTimer = useCallback(() => {\n    if (!currentTimerRef.current) return;\n\n    currentTimerRef.current.clear();\n    currentTimerRef.current = undefined;\n  }, []);\n\n  const pauseTimer = useCallback(() => {\n    currentTimerRef.current?.pause();\n  }, []);\n\n  const resumeTimer = useCallback(() => {\n    currentTimerRef.current?.resume();\n  }, []);\n\n  useEffect(() => {\n    if (isValidValueForProp(sound)) {\n      // It is sufficient to check for the value to be a\n      // non-empty string. The playSound method takes care of the rest.\n      playSound(sound);\n    }\n\n    // on mount, start timer for toast messages if needed\n    if (shouldTimeout) {\n      startTimer();\n    }\n\n    return () => {\n      // clear out any pending timer\n      clearTimer();\n    };\n    // eslint-disable-next-line\n  }, []); // No deps to run this only on mount\n\n  const { variantClasses } = useComponentTheme<MessageBannerVariantOptions>(\n    MessageBannerRedwoodTheme,\n    {\n      severity\n    }\n  );\n\n  // TODO:  Refactor to utilize useComponentTheme and multiVariantStyles.\n  const rootClasses = cx([\n    baseVariant === 'banner' && variantClasses,\n    messageStyles.base[baseVariant],\n    // for now, we do not have severity based styling on toast. So, we ignore this class for toasts\n    variant !== 'toast' && severityBasedStyleClass(severity, baseVariant),\n    variant === 'sectionBanner' && messageStyles.section\n  ]);\n\n  const contentClasses = cx([messageStyles.content.base, messageStyles.content[baseVariant]]);\n\n  // We will be animating the root div, so add padding to an inner wrapper div so that\n  // when animating height looks smooth. If padding were to be added to the root\n  // div, the animation will not be smooth as height will never reach 0 due to the\n  // padding.\n  return (\n    <div\n      ref={messageRef}\n      class={rootClasses}\n      role=\"alert\"\n      aria-atomic=\"true\"\n      data-oj-key={`${typeof item.key}-${item.key}`}\n      tabIndex={0}\n      onKeyUp={handleCloseOnEsc}\n      onFocusIn={pauseTimer}\n      onFocusOut={resumeTimer}>\n      <div class={contentClasses}>\n        {iconRenderer ? (\n          <MessageCustomStartIcon item={item} renderer={iconRenderer} />\n        ) : isSeverityIconNeeded(severity) ? (\n          <MessageStartIcon severity={severity} variant={baseVariant} />\n        ) : null}\n        <Flex direction=\"column\" flex=\"1\" gap={xUnits(2) as Size}>\n          <MessageHeader variant={baseVariant}>\n            <MessageSummary variant={baseVariant} text={summary} role=\"heading\" aria-level={2} />\n            {isValidValueForProp(timestamp, 'timestamp') && variant !== 'toast' && (\n              <MessageTimestamp variant={baseVariant} value={timestamp!} />\n            )}\n          </MessageHeader>\n          <MessageDetail variant={baseVariant} item={item} renderer={detailRenderer} />\n        </Flex>\n        {closeAffordance === 'on' && (\n          <MessageCloseButton variant={baseVariant} onAction={handleClose} />\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport { Message };\n"],"names":["_jsx","CloseIcon","cx","_jsxs"],"mappings":"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"}

package/es/MonthView-04900992.js

@@ -0,0 +1,208 @@
+/* @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-38db1e3c.js';
+import { u as useFocusableCell, a as useCellNavigation } from './useCellNavigation-260b7166.js';
+import { dayCellStyles } from './PRIVATE_MonthView/themes/DayCellStyles.css.js';
+import { u as useUser } from './useUser-2decb9ed.js';
+import { G as Grid } from './Grid-caf06064.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, 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,
+            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 = 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, 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, 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-04900992.js.map