@oracle/oraclejet-preact 15.1.0 → 15.1.2

package/es/ComponentMessageContainer-94ad5e1d.js

@@ -0,0 +1,31 @@
+/* @oracle/oraclejet-preact: 15.1.2 */
+import { jsx } from 'preact/jsx-runtime';
+import './PRIVATE_Message.js';
+import { C as ComponentMessage } from './ComponentMessage-a41ebbdc.js';
+import { componentMessageContainerBase } from './UNSAFE_ComponentMessage/themes/ComponentMessageStyles.css.js';
+import { M as MessagesManager } from './MessagesManager-6e35eea0.js';
+
+/**
+ * Converts the messages data into Item
+ *
+ * @param messages The messages data passed down as prop
+ * @returns The messages data as Item
+ */
+function generateMessagesData(messages) {
+    return messages.map((message, index) => {
+        return {
+            key: index,
+            data: {
+                closeAffordance: 'off',
+                severity: message.severity || 'error',
+                detail: message.detail
+            }
+        };
+    });
+}
+function ComponentMessageContainer({ fieldLabel, messages = [] }) {
+    return (jsx("div", { class: componentMessageContainerBase, children: jsx(MessagesManager, { data: generateMessagesData(messages), children: ({ item }) => (jsx(ComponentMessage, { detail: item.data.detail, fieldLabel: fieldLabel, severity: item.data.severity }, item.key)) }) }));
+}
+
+export { ComponentMessageContainer as C };
+//# sourceMappingURL=ComponentMessageContainer-94ad5e1d.js.map

package/es/ComponentMessageContainer-94ad5e1d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentMessageContainer-94ad5e1d.js","sources":["../../src/UNSAFE_ComponentMessage/ComponentMessageContainer.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 { MessagesManager } from '../PRIVATE_Message';\nimport { Item } from '../utils/UNSAFE_dataProvider';\nimport { ComponentMessage, ComponentMessageItem } from './ComponentMessage';\nimport { componentMessageContainerBase } from './themes/ComponentMessageStyles.css';\n\n/**\n * Converts the messages data into Item\n *\n * @param messages The messages data passed down as prop\n * @returns The messages data as Item\n */\nfunction generateMessagesData(messages: ComponentMessageItem[]) {\n  return messages.map<Item<number, ComponentMessageItem>>((message, index) => {\n    return {\n      key: index,\n      data: {\n        closeAffordance: 'off',\n        severity: message.severity || 'error',\n        detail: message.detail\n      }\n    };\n  });\n}\n\n/**\n * Props for the ComponentMessaging component\n */\ntype Props = {\n  /**\n   * The label of the field which is showing this error\n   */\n  fieldLabel?: string;\n\n  /**\n   * Data for the messages. This data is used for rendering each message.\n   */\n  messages?: ComponentMessageItem[];\n};\n\nexport function ComponentMessageContainer({ fieldLabel, messages = [] }: Props) {\n  return (\n    <div class={componentMessageContainerBase}>\n      <MessagesManager data={generateMessagesData(messages)}>\n        {({ item }) => (\n          <ComponentMessage\n            key={item.key}\n            detail={item.data.detail}\n            fieldLabel={fieldLabel}\n            severity={item.data.severity}\n          />\n        )}\n      </MessagesManager>\n    </div>\n  );\n}\n"],"names":["_jsx"],"mappings":";;;;;;;AAaA;;;;;AAKG;AACH,SAAS,oBAAoB,CAAC,QAAgC,EAAA;IAC5D,OAAO,QAAQ,CAAC,GAAG,CAAqC,CAAC,OAAO,EAAE,KAAK,KAAI;QACzE,OAAO;AACL,YAAA,GAAG,EAAE,KAAK;AACV,YAAA,IAAI,EAAE;AACJ,gBAAA,eAAe,EAAE,KAAK;AACtB,gBAAA,QAAQ,EAAE,OAAO,CAAC,QAAQ,IAAI,OAAO;gBACrC,MAAM,EAAE,OAAO,CAAC,MAAM;AACvB,aAAA;SACF,CAAC;AACJ,KAAC,CAAC,CAAC;AACL,CAAC;AAiBK,SAAU,yBAAyB,CAAC,EAAE,UAAU,EAAE,QAAQ,GAAG,EAAE,EAAS,EAAA;IAC5E,QACEA,GAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,6BAA6B,YACvCA,GAAC,CAAA,eAAe,EAAC,EAAA,IAAI,EAAE,oBAAoB,CAAC,QAAQ,CAAC,EAClD,QAAA,EAAA,CAAC,EAAE,IAAI,EAAE,MACRA,GAAA,CAAC,gBAAgB,EAAA,EAEf,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,EACxB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAA,EAHvB,IAAI,CAAC,GAAG,CAIb,CACH,EAAA,CACe,EACd,CAAA,EACN;AACJ;;;;"}

package/es/Divider-709d2810.js

@@ -0,0 +1,18 @@
+/* @oracle/oraclejet-preact: 15.1.2 */
+import { jsx } from 'preact/jsx-runtime';
+import './utils/UNSAFE_classNames.js';
+import { multiVariantStyles, styles } from './UNSAFE_Divider/themes/DividerStyles.css.js';
+import { c as classNames } from './classNames-f414daad.js';
+
+// TODO - Support vertical orientation
+function Divider({ orientation = 'horizontal' }) {
+    const variantClasses = multiVariantStyles({
+        orientation: orientation
+    });
+    const classes = classNames([variantClasses, styles.dividerBase]);
+    // TODO - Check  with archs if this should be a polymorphic component and if the answer is yes, implement it
+    return jsx("span", { class: classes, role: "separator", "aria-orientation": orientation });
+}
+
+export { Divider as D };
+//# sourceMappingURL=Divider-709d2810.js.map

package/es/Divider-709d2810.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider-709d2810.js","sources":["../../src/UNSAFE_Divider/Divider.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 { classNames } from '../utils/UNSAFE_classNames';\nimport { multiVariantStyles, styles } from './themes/DividerStyles.css';\n\n// TODO -  Expose props once vertical orientation is supported\ntype DividerProps = {\n  /**\n   * Divider's orientation.\n   */\n  orientation?: 'horizontal';\n};\n\n// TODO - Support vertical orientation\nexport function Divider({ orientation = 'horizontal' }: DividerProps) {\n  const variantClasses = multiVariantStyles({\n    orientation: orientation\n  });\n  const classes = classNames([variantClasses, styles.dividerBase]);\n  // TODO - Check  with archs if this should be a polymorphic component and if the answer is yes, implement it\n  return <span class={classes} role=\"separator\" aria-orientation={orientation}></span>;\n}\n"],"names":["_jsx"],"mappings":";;;;;;AAkBA;SACgB,OAAO,CAAC,EAAE,WAAW,GAAG,YAAY,EAAgB,EAAA;IAClE,MAAM,cAAc,GAAG,kBAAkB,CAAC;AACxC,QAAA,WAAW,EAAE,WAAW;AACzB,KAAA,CAAC,CAAC;AACH,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,CAAC,cAAc,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;;IAEjE,OAAOA,GAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,WAAW,EAAA,kBAAA,EAAmB,WAAW,EAAA,CAAS,CAAC;AACvF;;;;"}

package/es/DrawerPopupVariants.styles.css

@@ -1,4 +1,4 @@
-.DrawerPopupVariants_multiVariantStyles_placement_left__idav9r0 {
+.DrawerPopupVariants_multiVariantStyles_placement_left__ajbar40 {
   box-shadow: 0.3rem 0 1.5rem rgba(var(--oj-c-EXPERIMENTAL-DO-NOT-USE-boxshadow-shadowcolor), 0.05);
   top: 0;
   bottom: 0;
@@ -6,7 +6,7 @@
   max-width: 90vw;
   min-width: 320px;
 }
-.DrawerPopupVariants_multiVariantStyles_placement_right__idav9r1 {
+.DrawerPopupVariants_multiVariantStyles_placement_right__ajbar41 {
   box-shadow: -0.3rem 0 1.5rem rgba(var(--oj-c-EXPERIMENTAL-DO-NOT-USE-boxshadow-shadowcolor), 0.05);
   top: 0;
   bottom: 0;
@@ -14,13 +14,13 @@
   max-width: 90vw;
   min-width: 320px;
 }
-.DrawerPopupVariants_multiVariantStyles_placement_bottom__idav9r2 {
+.DrawerPopupVariants_multiVariantStyles_placement_bottom__ajbar42 {
   box-shadow: 0 -0.3rem 0.3rem 0 rgba(var(--oj-c-EXPERIMENTAL-DO-NOT-USE-boxshadow-shadowcolor), 0.05);
   bottom: 0;
   left: 0;
   right: 0;
 }
-.DrawerPopupVariants_multiVariantStyles_displayModeHorizontal_fullOverlay__idav9r6 {
+.DrawerPopupVariants_multiVariantStyles_displayModeHorizontal_fullOverlay__ajbar46 {
   width: 100%;
   max-width: 100%;
 }

package/es/DrawerPopupVariants.styles2.css

@@ -1,4 +1,4 @@
-.DrawerPopupVariants_multiVariantStyles_placement_left__ajbar40 {
+.DrawerPopupVariants_multiVariantStyles_placement_left__idav9r0 {
   box-shadow: 0.3rem 0 1.5rem rgba(var(--oj-c-EXPERIMENTAL-DO-NOT-USE-boxshadow-shadowcolor), 0.05);
   top: 0;
   bottom: 0;
@@ -6,7 +6,7 @@
   max-width: 90vw;
   min-width: 320px;
 }
-.DrawerPopupVariants_multiVariantStyles_placement_right__ajbar41 {
+.DrawerPopupVariants_multiVariantStyles_placement_right__idav9r1 {
   box-shadow: -0.3rem 0 1.5rem rgba(var(--oj-c-EXPERIMENTAL-DO-NOT-USE-boxshadow-shadowcolor), 0.05);
   top: 0;
   bottom: 0;
@@ -14,13 +14,13 @@
   max-width: 90vw;
   min-width: 320px;
 }
-.DrawerPopupVariants_multiVariantStyles_placement_bottom__ajbar42 {
+.DrawerPopupVariants_multiVariantStyles_placement_bottom__idav9r2 {
   box-shadow: 0 -0.3rem 0.3rem 0 rgba(var(--oj-c-EXPERIMENTAL-DO-NOT-USE-boxshadow-shadowcolor), 0.05);
   bottom: 0;
   left: 0;
   right: 0;
 }
-.DrawerPopupVariants_multiVariantStyles_displayModeHorizontal_fullOverlay__ajbar46 {
+.DrawerPopupVariants_multiVariantStyles_displayModeHorizontal_fullOverlay__idav9r6 {
   width: 100%;
   max-width: 100%;
 }

package/es/FilePicker-f5f7c09b.js

@@ -0,0 +1,499 @@
+/* @oracle/oraclejet-preact: 15.1.2 */
+import { jsx } from 'preact/jsx-runtime';
+import { mergeProps } from './utils/UNSAFE_mergeProps.js';
+import './utils/UNSAFE_classNames.js';
+import { useTranslationBundle } from './hooks/UNSAFE_useTranslationBundle.js';
+import { sizeToCSS } from './utils/UNSAFE_size.js';
+import './utils/UNSAFE_stringUtils.js';
+import { useComponentTheme } from './hooks/UNSAFE_useComponentTheme.js';
+import { FilePickerRedwoodTheme } from './UNSAFE_FilePicker/themes/redwood/FilePickerTheme.js';
+import { t as trim } from './stringUtils-5f2d2e94.js';
+import { pickFiles } from './utils/UNSAFE_filePickerUtils.js';
+import './utils/PRIVATE_clientHints.js';
+import { usePress } from './hooks/UNSAFE_usePress.js';
+import { useRef, useState, useImperativeHandle } from 'preact/hooks';
+import { g as getClientHints } from './clientHints-26cce6ec.js';
+import { useTabbableMode } from './hooks/UNSAFE_useTabbableMode.js';
+import { useInteractionStyle } from './hooks/UNSAFE_useInteractionStyle.js';
+import { c as classNames } from './classNames-f414daad.js';
+
+/**
+ * Gets the default content of the file picker
+ */
+const getDefaultTriggerContent = (isDisabled, primaryText, secondaryText, translations, selectionMode) => {
+    const { styles: { disabledPrimaryTextStyle, primaryTextStyle, disabledSecondaryTextStyle, secondaryTextStyle } } = useComponentTheme(FilePickerRedwoodTheme);
+    return [
+        jsx("div", { class: isDisabled ? disabledPrimaryTextStyle : primaryTextStyle, children: getPrimaryText(primaryText, translations) }),
+        jsx("div", { class: isDisabled ? disabledSecondaryTextStyle : secondaryTextStyle, children: getSecondaryText(secondaryText, translations, selectionMode) })
+    ];
+};
+const getAriaLabel = ({ ariaLabel, isDisabled, translations, primaryText, secondaryText, selectionMode }) => {
+    return ariaLabel
+        ? ariaLabel
+        : `${isDisabled ? '' : translations.filePicker_addFiles() + '. '}${getPrimaryText(primaryText, translations)}. ${getSecondaryText(secondaryText, translations, selectionMode)}`;
+};
+/**
+ * Returns the styles of the file picker
+ */
+const getStyles = (width, height) => {
+    const dimStyles = {
+        width: width ? sizeToCSS(width) : undefined,
+        height: height ? sizeToCSS(height) : undefined
+    };
+    return dimStyles;
+};
+/**
+ * Returns the primary text
+ */
+const getPrimaryText = (primaryText, translations) => {
+    return primaryText ? primaryText : translations.filePicker_dropzonePrimaryText();
+};
+/**
+ * Returns the secondary text text
+ */
+const getSecondaryText = (secondaryText, translations, selectionMode) => {
+    const defaultSecondaryText = selectionMode === 'multiple'
+        ? translations.filePicker_dropzoneSecondaryTextMultiple()
+        : translations.filePicker_dropzoneSecondaryText();
+    return secondaryText ? secondaryText : defaultSecondaryText;
+};
+/**
+ * Takes in a list of files and returns a list of accepted files and
+ * a list of rejected files based on file type
+ */
+const validateTypes = (files, accept, translations) => {
+    const accepted = [];
+    const rejected = [];
+    let file;
+    let type;
+    if (files) {
+        for (let i = 0; i < files.length; i++) {
+            file = files[i];
+            const name = file.name;
+            type = translations.filePicker_unknownFileTypeUploadError();
+            if (name) {
+                const nameSplit = name.split('.');
+                type = nameSplit.length > 1 ? '.' + nameSplit.pop() : type;
+            }
+            type = file.type ? file.type : type;
+            // If type isn't already in one of the lists, add it
+            if (accepted.indexOf(type) === -1 && rejected.indexOf(type) === -1) {
+                if (_acceptFile(file, accept)) {
+                    accepted.push(type);
+                }
+                else {
+                    rejected.push(type);
+                }
+            }
+        }
+    }
+    return { accepted, rejected };
+};
+/**
+ * Creates a file list
+ */
+const createFileList = (origList) => {
+    const descriptor = {
+        length: { value: origList.length },
+        item: {
+            value(index) {
+                return this[index];
+            }
+        }
+    };
+    for (let i = 0; i < origList.length; i++) {
+        descriptor[i] = { value: origList[i], enumerable: true };
+    }
+    return Object.create(FileList.prototype, descriptor);
+};
+/**
+ * Returns false if selected multiple files when in single file selection mode
+ */
+const validateSelectionMode = (files, selectionMode) => {
+    return selectionMode !== 'single' || files.length === 1;
+};
+/**
+ * Returns the correct message if mime type validation has failed
+ */
+const getMimeTypeValidationMessages = (rejected, translations) => {
+    const messages = [];
+    if (rejected.length === 1) {
+        messages.push({
+            severity: 'error',
+            summary: translations.filePicker_singleTypeUploadError({
+                fileType: rejected[0]
+            })
+        });
+    }
+    else {
+        messages.push({
+            severity: 'error',
+            summary: translations.filePicker_multipleFileTypeUploadError({
+                fileTypes: rejected.join(translations.plural_separator())
+            })
+        });
+    }
+    return messages;
+};
+/**
+ * Returns true if file passes mimetype validation
+ */
+const _acceptFile = (file, accept) => {
+    const acceptProp = accept;
+    if (!acceptProp || acceptProp.length === 0 || !file) {
+        return true;
+    }
+    let fileAccept;
+    for (let i = 0; i < acceptProp.length; i++) {
+        fileAccept = trim(acceptProp[i]);
+        if (!fileAccept) {
+            return true;
+        }
+        else if (fileAccept.startsWith('.', 0)) {
+            // when dragover, only MIME type is available, file name is undefined
+            // to lowerCase is to make the string comparison case insensitive
+            if (!file.name || (file.name && file.name.toLowerCase().endsWith(fileAccept.toLowerCase()))) {
+                return true;
+            }
+        }
+        else if (!file.type) {
+            return false;
+        }
+        else if (fileAccept === 'image/*') {
+            if (file.type.startsWith('image/', 0)) {
+                return true;
+            }
+        }
+        else if (fileAccept === 'video/*') {
+            if (file.type.startsWith('video/', 0)) {
+                return true;
+            }
+        }
+        else if (fileAccept === 'audio/*') {
+            if (file.type.startsWith('audio/', 0)) {
+                return true;
+            }
+        }
+        else if (file.type === fileAccept) {
+            return true;
+        }
+    }
+    return false;
+};
+
+/**
+ * Calls the onReject callback when invalid files are selected.
+ * For invalid dragged files, this function will return a promise resolver that
+ * should be called when the invalid files are no longer dragged over the filepicker.
+ */
+const fireRejectAction = (messages, isDrag, onReject) => {
+    let resolver;
+    const dragPromise = isDrag
+        ? new Promise((resolve) => {
+            resolver = resolve;
+        })
+        : null;
+    onReject?.({
+        messages,
+        until: dragPromise
+    });
+    return resolver;
+};
+/**
+ * Calls the onCommit callback when all files are valid.
+ */
+const handleFilesAdded = (files, onCommit) => {
+    // Bug 28503874 - filepicker: filelist cleared after the handler returns
+    // Note: the parameter "files" is a direct reference to the embedded Input element's property
+    // which could be reset or changed.
+    // we need to return a copy of FileList just in case apps hold on to a reference to FileList
+    const list = createFileList(files);
+    onCommit?.({
+        files: list
+    });
+};
+
+/**
+ * The file picker helper method for non-disabled filepickers.
+ */
+const useFilepickerElementHelper = (props, rootRef, setValidity) => {
+    const { callback, validation } = clickCallbackUtils(props);
+    const { pressProps } = usePress(callback);
+    const dragAndDropProps = useDragAndDropEvents(props.accept, props.selectionMode, fireRejectAction, handleFilesAdded, rootRef, props.translations, props.onCommit, props.onReject, setValidity);
+    return {
+        validation,
+        dragAndDropProps,
+        pressProps
+    };
+};
+const clickCallbackUtils = (props) => {
+    /**
+     * Callback function when the filepicker is clicked.
+     */
+    const handleSelectingFiles = (event) => {
+        // Bug 27775173 - within firefox browser cannot tab past filepicker without file selector
+        // window opening
+        // only launching the file picker if click or 'Enter' was pressed
+        if (event.type === 'click' ||
+            (event.type === 'keyup' && event.code === 'Enter')) {
+            // Bug 26907138 - form submit event is triggered when the file upload button is clicked
+            event.preventDefault();
+            pickFiles(_handleClickValidation, {
+                accept: props.accept,
+                selectionMode: props.selectionMode ?? 'multiple',
+                capture: props.capture ?? 'none'
+            });
+        }
+    };
+    /**
+     * Handles file validation from selecting files through the file dialog
+     */
+    const _handleClickValidation = (files) => {
+        if (files.length > 0) {
+            const rejected = validateTypes(files, props.accept, props.translations).rejected;
+            if (rejected.length > 0) {
+                fireRejectAction(getMimeTypeValidationMessages(rejected, props.translations), false, props.onReject);
+            }
+            else {
+                handleFilesAdded(files, props.onCommit);
+            }
+        }
+    };
+    return {
+        callback: handleSelectingFiles,
+        validation: _handleClickValidation
+    };
+};
+const useDragAndDropEvents = (accept, selectionMode, fireRejectAction, handleFilesAdded, rootRef, translations, onCommit, onReject, 
+// setValidity not set for custom filepicker
+setValidity) => {
+    const inDropZone = useRef(false);
+    const isDroppable = useRef(false);
+    const dragPromiseResolver = useRef();
+    /**
+     * Drag Enter handler called when a dragged file enter the filepicker dropzone
+     */
+    const _handleDragEnter = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    /**
+     * Drag over handler called when a file is dragged over the filepicker
+     */
+    const _handleDragOver = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (inDropZone.current) {
+            return;
+        }
+        const browser = getClientHints().browser;
+        inDropZone.current = true;
+        isDroppable.current = true;
+        // Safari doesn't provide the data for the files on drag over so validation cannot be done until drop
+        if (browser !== 'safari') {
+            if (!event.dataTransfer) {
+                return;
+            }
+            const files = createFileList(event.dataTransfer.items);
+            let messages = [];
+            const selectionModeValid = validateSelectionMode(files, selectionMode);
+            const droppable = validateTypes(files, accept, translations);
+            if (selectionModeValid && droppable.rejected.length === 0) {
+                // validation passes
+                setValidity?.('valid');
+            }
+            else {
+                isDroppable.current = false;
+                if (selectionModeValid) {
+                    // mimetype Validation fails
+                    messages = getMimeTypeValidationMessages(droppable.rejected, translations);
+                }
+                else {
+                    // selected multiple files in single selection mode
+                    messages.push({
+                        severity: 'error',
+                        summary: translations.filePicker_singleFileUploadError()
+                    });
+                }
+                setValidity?.('invalid');
+                dragPromiseResolver.current = fireRejectAction(messages, true, onReject);
+            }
+        }
+        else {
+            setValidity?.('valid');
+        }
+    };
+    /**
+     * Drag leave handler is called when the dragged file leaves the filepicker dropzone
+     */
+    const _handleDragLeave = (event, mimeTypeDropFail = false) => {
+        if (!inDropZone.current) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        if (!rootRef.current?.contains(event.relatedTarget)) {
+            inDropZone.current = false;
+            setValidity?.('NA');
+            // There's only a promise if validation failed on dragover
+            if (!isDroppable.current && !mimeTypeDropFail) {
+                dragPromiseResolver.current?.();
+            }
+        }
+    };
+    /**
+     * Drop file handler is called when a file is dropped on the filepicker dropzone
+     */
+    const _handleFileDrop = (event) => {
+        if (inDropZone.current) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!event.dataTransfer) {
+                inDropZone.current = false;
+                return;
+            }
+            const files = createFileList(event.dataTransfer.files);
+            let mimeTypeDropFail = false;
+            if (isDroppable.current) {
+                let messages = [];
+                if (validateSelectionMode(files, selectionMode)) {
+                    const droppable = validateTypes(files, accept, translations);
+                    if (droppable.rejected.length > 0) {
+                        // mimetype Validation fails
+                        messages = getMimeTypeValidationMessages(droppable.rejected, translations);
+                        mimeTypeDropFail = true;
+                    }
+                }
+                else {
+                    messages.push({
+                        severity: 'error',
+                        summary: translations.filePicker_singleFileUploadError()
+                    });
+                }
+                if (messages.length > 0) {
+                    isDroppable.current = false;
+                    fireRejectAction(messages, false, onReject);
+                }
+                if (isDroppable.current) {
+                    handleFilesAdded(files, onCommit);
+                }
+            }
+            _handleDragLeave(event, mimeTypeDropFail);
+        }
+    };
+    return {
+        onDragEnter: _handleDragEnter,
+        onDragOver: _handleDragOver,
+        onDragLeave: _handleDragLeave,
+        onDrop: _handleFileDrop
+    };
+};
+
+/**
+ * A file picker displays a clickable dropzone for selecting files from the device storage.
+ */
+function FilePicker({ capture = 'none', isDisabled = false, selectionMode = 'multiple', children, ...otherProps }) {
+    // this ref is added only for testing purposes.  Allows the test to directly
+    // call certain functions that should be tested
+    const testHandlersRef = otherProps.__testHandlerSymbol;
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const props = { capture, selectionMode, translations, ...otherProps };
+    if (isDisabled) {
+        return jsx(DisabledFilePicker, { ...props, children: children });
+    }
+    return children ? (jsx(CustomFilePicker, { testHandlersRef: testHandlersRef, ...props, children: children })) : (jsx(DefaultFilePicker, { testHandlersRef: testHandlersRef, ...props }));
+}
+/**
+ * The default file picker element.
+ */
+const DefaultFilePicker = (props) => {
+    const { interactionProps, applyActiveStyle, applyHoverStyle, applyPseudoHoverStyle } = useInteractionStyle(false);
+    const { classes, styles: { maxWidth, inner, activeStyle, innerNeedsEventsHoverStyle, innerPseudoHoverStyle, invalidDrop, validDrop } } = useComponentTheme(FilePickerRedwoodTheme, {
+        hoveredState: applyHoverStyle ? 'isHover' : undefined,
+        pseudoHoveredState: applyPseudoHoverStyle ? 'isPseudoHover' : undefined
+    });
+    const innerInteractiveClasses = [
+        applyActiveStyle ? activeStyle : '',
+        applyHoverStyle ? innerNeedsEventsHoverStyle : '',
+        applyPseudoHoverStyle ? innerPseudoHoverStyle : ''
+    ];
+    const [validity, setValidity] = useState('NA');
+    // class added to change bg/border color based on if file is valid on drag and drop
+    const validityClass = validity === 'valid' ? validDrop : validity === 'invalid' ? invalidDrop : undefined;
+    const rootRef = useRef(null);
+    const { validation, dragAndDropProps, pressProps } = useFilepickerElementHelper(props, rootRef, setValidity);
+    const mergedEventProps = mergeProps(pressProps, interactionProps);
+    // These are backdoor handles that are used for testing purposes only
+    useSetupTestRef(dragAndDropProps, validation, props.testHandlersRef || null);
+    const wrapperClasses = classNames([classes, props.width === undefined && maxWidth]);
+    const { isTabbable } = useTabbableMode();
+    const { primaryText, secondaryText, translations, selectionMode, width, height } = props;
+    return (jsx("div", { ...mergedEventProps, class: wrapperClasses, tabIndex: isTabbable ? 0 : -1, role: "button", "aria-label": getAriaLabel({
+            ariaLabel: props['aria-label'],
+            isDisabled: false,
+            translations,
+            primaryText,
+            secondaryText,
+            selectionMode
+        }), ref: rootRef, style: getStyles(width, height), children: jsx("div", { class: classNames([inner, validityClass, ...innerInteractiveClasses]), ...dragAndDropProps, children: getDefaultTriggerContent(false, primaryText, secondaryText, translations, selectionMode) }) }));
+};
+/**
+ * The disabled file picker element.
+ */
+const DisabledFilePicker = ({ children, primaryText, secondaryText, translations, selectionMode, width, height, ...props }) => {
+    const { classes, styles: { maxWidth, inner, noChildrenMargin } } = useComponentTheme(FilePickerRedwoodTheme, {
+        disabledState: 'isDisabled'
+    });
+    return (jsx("div", { class: classNames([classes, inner, noChildrenMargin, width === undefined && maxWidth]), role: "button", "aria-label": getAriaLabel({
+            ariaLabel: props['aria-label'],
+            isDisabled: true,
+            translations,
+            primaryText,
+            secondaryText
+        }), "aria-hidden": "true", style: getStyles(width, height), children: children ||
+            getDefaultTriggerContent(true, primaryText, secondaryText, translations, selectionMode) }));
+};
+/**
+ * The custom file picker element.
+ */
+const CustomFilePicker = (props) => {
+    const { interactionProps, applyHoverStyle, applyPseudoHoverStyle } = useInteractionStyle(false);
+    const { classes, styles: { maxWidth, noChildrenMargin } } = useComponentTheme(FilePickerRedwoodTheme, {
+        hoveredState: applyHoverStyle ? 'isHover' : undefined,
+        pseudoHoveredState: applyPseudoHoverStyle ? 'isPseudoHover' : undefined
+    });
+    const rootRef = useRef(null);
+    const { validation, dragAndDropProps, pressProps } = useFilepickerElementHelper(props, rootRef);
+    const mergedEventProps = mergeProps(pressProps, dragAndDropProps, interactionProps);
+    // These are backdoor handles that are used for testing purposes only
+    useSetupTestRef(dragAndDropProps, validation, props.testHandlersRef || null);
+    const wrapperClasses = classNames([
+        classes,
+        noChildrenMargin,
+        props.width === undefined && maxWidth
+    ]);
+    const { translations, selectionMode } = props;
+    const { isTabbable } = useTabbableMode();
+    return (jsx("div", { class: classNames([wrapperClasses]), tabIndex: isTabbable ? undefined : -1, role: "button", "aria-label": getAriaLabel({
+            ariaLabel: props['aria-label'],
+            isDisabled: false,
+            translations,
+            selectionMode
+        }), ref: rootRef, style: getStyles(props.width, props.height), ...mergedEventProps, children: props.children }));
+};
+/**
+ * Only called for testing purposes, sets up the test ref that
+ * allows for backdoor access to certain methods
+ */
+const useSetupTestRef = (dragAndDropProps, validation, testHandlersRef) => {
+    useImperativeHandle(testHandlersRef, () => ({
+        onDragEnter: dragAndDropProps.onDragEnter,
+        onDragOver: dragAndDropProps.onDragOver,
+        onDrop: dragAndDropProps.onDrop,
+        onDragLeave: dragAndDropProps.onDragLeave,
+        onClickSelected: validation
+    }));
+};
+
+export { FilePicker as F };
+//# sourceMappingURL=FilePicker-f5f7c09b.js.map