@oracle/oraclejet-preact 15.0.6 → 15.0.8

package/cjs/ComponentMessage-6e2aa0e0.js

@@ -0,0 +1,33 @@
+/* @oracle/oraclejet-preact: 15.0.8 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var hooks_UNSAFE_useComponentTheme = require('./hooks/UNSAFE_useComponentTheme.js');
+var hooks_UNSAFE_useTranslationBundle = require('./hooks/UNSAFE_useTranslationBundle.js');
+require('./PRIVATE_Message.js');
+require('./UNSAFE_HiddenAccessible.js');
+var UNSAFE_ComponentMessage_themes_redwood_ComponentMessageTheme = require('./UNSAFE_ComponentMessage/themes/redwood/ComponentMessageTheme.js');
+var HiddenAccessible = require('./HiddenAccessible-13fc40df.js');
+var MessageUtils = require('./MessageUtils-bbc9238f.js');
+var MessageStartIcon = require('./MessageStartIcon-cd1f6787.js');
+var MessageSummary = require('./MessageSummary-81c86d1c.js');
+
+/**
+ * The component that renders an individual message for inline component messaging.
+ */
+function ComponentMessage({ detail, fieldLabel, severity = 'error' }) {
+    const { classes } = hooks_UNSAFE_useComponentTheme.useComponentTheme(UNSAFE_ComponentMessage_themes_redwood_ComponentMessageTheme.ComponentMessageRedwoodTheme, {
+        severity: severity ?? 'none'
+    });
+    const translations = hooks_UNSAFE_useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+    const severityTranslations = {
+        confirmation: translations.confirmation(),
+        error: translations.error(),
+        info: translations.info(),
+        warning: translations.warn()
+    };
+    return (jsxRuntime.jsxs("div", { class: classes, role: "alert", "aria-atomic": "true", children: [fieldLabel && jsxRuntime.jsx(HiddenAccessible.HiddenAccessible, { children: fieldLabel }), MessageUtils.isSeverityIconNeeded(severity) && (jsxRuntime.jsx(MessageStartIcon.MessageStartIcon, { variant: "inline", severity: severity, translations: severityTranslations })), jsxRuntime.jsx(MessageSummary.MessageSummary, { variant: "inline", text: detail })] }));
+}
+
+exports.ComponentMessage = ComponentMessage;
+//# sourceMappingURL=ComponentMessage-6e2aa0e0.js.map

package/cjs/ComponentMessage-6e2aa0e0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentMessage-6e2aa0e0.js","sources":["../../src/UNSAFE_ComponentMessage/ComponentMessage.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 { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport { isSeverityIconNeeded, MessageStartIcon, MessageSummary } from '../PRIVATE_Message';\nimport { BundleType } from '../resources/nls/bundle';\nimport { HiddenAccessible } from '../UNSAFE_HiddenAccessible';\nimport { ComponentMessageVariantOptions } from './themes/ComponentMessageStyles.css';\nimport { ComponentMessageRedwoodTheme } from './themes/redwood/ComponentMessageTheme';\n\n/**\n * A type for a single component message\n */\nexport type ComponentMessageItem = {\n  summary?: string;\n  detail?: string;\n  severity?: 'confirmation' | 'error' | 'info' | 'warning';\n};\n\n/**\n * Props for the Message Component\n */\ntype Props = {\n  /**\n   * The error detail text for the component message\n   */\n  detail?: ComponentMessageItem['detail'];\n\n  /**\n   * The label of the field which is showing this error\n   */\n  fieldLabel?: string;\n\n  /**\n   * The severity of the component message\n   */\n  severity?: ComponentMessageItem['severity'];\n};\n\n/**\n * The component that renders an individual message for inline component messaging.\n */\nexport function ComponentMessage({ detail, fieldLabel, severity = 'error' }: Props) {\n  const { classes } = useComponentTheme<ComponentMessageVariantOptions>(\n    ComponentMessageRedwoodTheme,\n    {\n      severity: severity ?? 'none'\n    }\n  );\n\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const severityTranslations = {\n    confirmation: translations.confirmation(),\n    error: translations.error(),\n    info: translations.info(),\n    warning: translations.warn()\n  };\n\n  return (\n    <div class={classes} role=\"alert\" aria-atomic=\"true\">\n      {fieldLabel && <HiddenAccessible>{fieldLabel}</HiddenAccessible>}\n      {isSeverityIconNeeded(severity) && (\n        <MessageStartIcon\n          variant=\"inline\"\n          severity={severity}\n          translations={severityTranslations}\n        />\n      )}\n      {/* We will be using the MessageSummary component, as this aligns with the style required */}\n      <MessageSummary variant=\"inline\" text={detail} />\n    </div>\n  );\n}\n"],"names":["useComponentTheme","ComponentMessageRedwoodTheme","useTranslationBundle","_jsxs","_jsx","HiddenAccessible","isSeverityIconNeeded","MessageStartIcon","MessageSummary"],"mappings":";;;;;;;;;;;;;;AA6CA;;AAEG;AACG,SAAU,gBAAgB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,GAAG,OAAO,EAAS,EAAA;AAChF,IAAA,MAAM,EAAE,OAAO,EAAE,GAAGA,gDAAiB,CACnCC,yFAA4B,EAC5B;QACE,QAAQ,EAAE,QAAQ,IAAI,MAAM;AAC7B,KAAA,CACF,CAAC;AAEF,IAAA,MAAM,YAAY,GAAGC,sDAAoB,CAAa,0BAA0B,CAAC,CAAC;AAClF,IAAA,MAAM,oBAAoB,GAAG;AAC3B,QAAA,YAAY,EAAE,YAAY,CAAC,YAAY,EAAE;AACzC,QAAA,KAAK,EAAE,YAAY,CAAC,KAAK,EAAE;AAC3B,QAAA,IAAI,EAAE,YAAY,CAAC,IAAI,EAAE;AACzB,QAAA,OAAO,EAAE,YAAY,CAAC,IAAI,EAAE;KAC7B,CAAC;IAEF,QACEC,eAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,EAAa,aAAA,EAAA,MAAM,EACjD,QAAA,EAAA,CAAA,UAAU,IAAIC,cAAC,CAAAC,iCAAgB,EAAE,EAAA,QAAA,EAAA,UAAU,EAAoB,CAAA,EAC/DC,iCAAoB,CAAC,QAAQ,CAAC,KAC7BF,cAAC,CAAAG,iCAAgB,IACf,OAAO,EAAC,QAAQ,EAChB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,oBAAoB,EAAA,CAClC,CACH,EAEDH,eAACI,6BAAc,EAAA,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAE,MAAM,EAAA,CAAI,CAC7C,EAAA,CAAA,EACN;AACJ;;;;"}

package/cjs/ComponentMessageContainer-8564fd08.js

@@ -0,0 +1,33 @@
+/* @oracle/oraclejet-preact: 15.0.8 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+require('./PRIVATE_Message.js');
+var ComponentMessage = require('./ComponentMessage-6e2aa0e0.js');
+var UNSAFE_ComponentMessage_themes_ComponentMessageStyles_css = require('./UNSAFE_ComponentMessage/themes/ComponentMessageStyles.css.js');
+var MessagesManager = require('./MessagesManager-62f4c52b.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 (jsxRuntime.jsx("div", { class: UNSAFE_ComponentMessage_themes_ComponentMessageStyles_css.componentMessageContainerBase, children: jsxRuntime.jsx(MessagesManager.MessagesManager, { data: generateMessagesData(messages), children: ({ item }) => (jsxRuntime.jsx(ComponentMessage.ComponentMessage, { detail: item.data.detail, fieldLabel: fieldLabel, severity: item.data.severity }, item.key)) }) }));
+}
+
+exports.ComponentMessageContainer = ComponentMessageContainer;
+//# sourceMappingURL=ComponentMessageContainer-8564fd08.js.map

package/cjs/ComponentMessageContainer-8564fd08.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentMessageContainer-8564fd08.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","componentMessageContainerBase","MessagesManager","ComponentMessage"],"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,cAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAEC,uFAA6B,YACvCD,cAAC,CAAAE,+BAAe,EAAC,EAAA,IAAI,EAAE,oBAAoB,CAAC,QAAQ,CAAC,EAClD,QAAA,EAAA,CAAC,EAAE,IAAI,EAAE,MACRF,cAAA,CAACG,iCAAgB,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/cjs/Divider-91f0ab90.js

@@ -0,0 +1,20 @@
+/* @oracle/oraclejet-preact: 15.0.8 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+require('./utils/UNSAFE_classNames.js');
+var UNSAFE_Divider_themes_DividerStyles_css = require('./UNSAFE_Divider/themes/DividerStyles.css.js');
+var classNames = require('./classNames-7b5d0acc.js');
+
+// TODO - Support vertical orientation
+function Divider({ orientation = 'horizontal' }) {
+    const variantClasses = UNSAFE_Divider_themes_DividerStyles_css.multiVariantStyles({
+        orientation: orientation
+    });
+    const classes = classNames.classNames([variantClasses, UNSAFE_Divider_themes_DividerStyles_css.styles.dividerBase]);
+    // TODO - Check  with archs if this should be a polymorphic component and if the answer is yes, implement it
+    return jsxRuntime.jsx("span", { class: classes, role: "separator", "aria-orientation": orientation });
+}
+
+exports.Divider = Divider;
+//# sourceMappingURL=Divider-91f0ab90.js.map

package/cjs/Divider-91f0ab90.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider-91f0ab90.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":["multiVariantStyles","classNames","styles","_jsx"],"mappings":";;;;;;;;AAkBA;SACgB,OAAO,CAAC,EAAE,WAAW,GAAG,YAAY,EAAgB,EAAA;IAClE,MAAM,cAAc,GAAGA,0DAAkB,CAAC;AACxC,QAAA,WAAW,EAAE,WAAW;AACzB,KAAA,CAAC,CAAC;AACH,IAAA,MAAM,OAAO,GAAGC,qBAAU,CAAC,CAAC,cAAc,EAAEC,8CAAM,CAAC,WAAW,CAAC,CAAC,CAAC;;IAEjE,OAAOC,cAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,WAAW,EAAA,kBAAA,EAAmB,WAAW,EAAA,CAAS,CAAC;AACvF;;;;"}

package/cjs/FilePicker-8cf3cdcc.js

@@ -0,0 +1,505 @@
+/* @oracle/oraclejet-preact: 15.0.8 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var utils_UNSAFE_mergeProps = require('./utils/UNSAFE_mergeProps.js');
+require('./utils/UNSAFE_classNames.js');
+var hooks_UNSAFE_useTranslationBundle = require('./hooks/UNSAFE_useTranslationBundle.js');
+var utils_UNSAFE_size = require('./utils/UNSAFE_size.js');
+require('./utils/UNSAFE_stringUtils.js');
+var hooks_UNSAFE_useComponentTheme = require('./hooks/UNSAFE_useComponentTheme.js');
+var UNSAFE_FilePicker_themes_redwood_FilePickerTheme = require('./UNSAFE_FilePicker/themes/redwood/FilePickerTheme.js');
+var stringUtils = require('./stringUtils-20ea11b9.js');
+var utils_UNSAFE_filePickerUtils = require('./utils/UNSAFE_filePickerUtils.js');
+require('./utils/PRIVATE_clientHints.js');
+var hooks_UNSAFE_usePress = require('./hooks/UNSAFE_usePress.js');
+var hooks = require('preact/hooks');
+var clientHints = require('./clientHints-30cd6ae2.js');
+var hooks_UNSAFE_useTabbableMode = require('./hooks/UNSAFE_useTabbableMode.js');
+var hooks_UNSAFE_useInteractionStyle = require('./hooks/UNSAFE_useInteractionStyle.js');
+var classNames = require('./classNames-7b5d0acc.js');
+
+/**
+ * Gets the default content of the file picker
+ */
+const getDefaultTriggerContent = (isDisabled, primaryText, secondaryText, translations, selectionMode) => {
+    const { styles: { disabledPrimaryTextStyle, primaryTextStyle, disabledSecondaryTextStyle, secondaryTextStyle } } = hooks_UNSAFE_useComponentTheme.useComponentTheme(UNSAFE_FilePicker_themes_redwood_FilePickerTheme.FilePickerRedwoodTheme);
+    return [
+        jsxRuntime.jsx("div", { class: isDisabled ? disabledPrimaryTextStyle : primaryTextStyle, children: getPrimaryText(primaryText, translations) }),
+        jsxRuntime.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 ? utils_UNSAFE_size.sizeToCSS(width) : undefined,
+        height: height ? utils_UNSAFE_size.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 = stringUtils.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 } = hooks_UNSAFE_usePress.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();
+            utils_UNSAFE_filePickerUtils.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 = hooks.useRef(false);
+    const isDroppable = hooks.useRef(false);
+    const dragPromiseResolver = hooks.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 = clientHints.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 = hooks_UNSAFE_useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+    const props = { capture, selectionMode, translations, ...otherProps };
+    if (isDisabled) {
+        return jsxRuntime.jsx(DisabledFilePicker, { ...props, children: children });
+    }
+    return children ? (jsxRuntime.jsx(CustomFilePicker, { testHandlersRef: testHandlersRef, ...props, children: children })) : (jsxRuntime.jsx(DefaultFilePicker, { testHandlersRef: testHandlersRef, ...props }));
+}
+/**
+ * The default file picker element.
+ */
+const DefaultFilePicker = (props) => {
+    const { interactionProps, applyActiveStyle, applyHoverStyle, applyPseudoHoverStyle } = hooks_UNSAFE_useInteractionStyle.useInteractionStyle(false);
+    const { classes, styles: { maxWidth, inner, activeStyle, innerNeedsEventsHoverStyle, innerPseudoHoverStyle, invalidDrop, validDrop } } = hooks_UNSAFE_useComponentTheme.useComponentTheme(UNSAFE_FilePicker_themes_redwood_FilePickerTheme.FilePickerRedwoodTheme, {
+        disabledState: 'notDisabled',
+        hoveredState: applyHoverStyle ? 'isHover' : 'notHover',
+        pseudoHoveredState: applyPseudoHoverStyle ? 'isPseudoHover' : 'notPseudoHover'
+    });
+    const innerInteractiveClasses = [
+        applyActiveStyle ? activeStyle : '',
+        applyHoverStyle ? innerNeedsEventsHoverStyle : '',
+        applyPseudoHoverStyle ? innerPseudoHoverStyle : ''
+    ];
+    const [validity, setValidity] = hooks.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 = hooks.useRef(null);
+    const { validation, dragAndDropProps, pressProps } = useFilepickerElementHelper(props, rootRef, setValidity);
+    const mergedEventProps = utils_UNSAFE_mergeProps.mergeProps(pressProps, interactionProps);
+    // These are backdoor handles that are used for testing purposes only
+    useSetupTestRef(dragAndDropProps, validation, props.testHandlersRef || null);
+    const wrapperClasses = classNames.classNames([classes, props.width === undefined && maxWidth]);
+    const { isTabbable } = hooks_UNSAFE_useTabbableMode.useTabbableMode();
+    const { primaryText, secondaryText, translations, selectionMode, width, height } = props;
+    return (jsxRuntime.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: jsxRuntime.jsx("div", { class: classNames.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 } } = hooks_UNSAFE_useComponentTheme.useComponentTheme(UNSAFE_FilePicker_themes_redwood_FilePickerTheme.FilePickerRedwoodTheme, {
+        disabledState: 'isDisabled',
+        hoveredState: 'notHover',
+        pseudoHoveredState: 'notPseudoHover'
+    });
+    return (jsxRuntime.jsx("div", { class: classNames.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 } = hooks_UNSAFE_useInteractionStyle.useInteractionStyle(false);
+    const { classes, styles: { maxWidth, noChildrenMargin } } = hooks_UNSAFE_useComponentTheme.useComponentTheme(UNSAFE_FilePicker_themes_redwood_FilePickerTheme.FilePickerRedwoodTheme, {
+        disabledState: 'notDisabled',
+        hoveredState: applyHoverStyle ? 'isHover' : 'notHover',
+        pseudoHoveredState: applyPseudoHoverStyle ? 'isPseudoHover' : 'notPseudoHover'
+    });
+    const rootRef = hooks.useRef(null);
+    const { validation, dragAndDropProps, pressProps } = useFilepickerElementHelper(props, rootRef);
+    const mergedEventProps = utils_UNSAFE_mergeProps.mergeProps(pressProps, dragAndDropProps, interactionProps);
+    // These are backdoor handles that are used for testing purposes only
+    useSetupTestRef(dragAndDropProps, validation, props.testHandlersRef || null);
+    const wrapperClasses = classNames.classNames([
+        classes,
+        noChildrenMargin,
+        props.width === undefined && maxWidth
+    ]);
+    const { translations, selectionMode } = props;
+    const { isTabbable } = hooks_UNSAFE_useTabbableMode.useTabbableMode();
+    return (jsxRuntime.jsx("div", { class: classNames.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) => {
+    hooks.useImperativeHandle(testHandlersRef, () => ({
+        onDragEnter: dragAndDropProps.onDragEnter,
+        onDragOver: dragAndDropProps.onDragOver,
+        onDrop: dragAndDropProps.onDrop,
+        onDragLeave: dragAndDropProps.onDragLeave,
+        onClickSelected: validation
+    }));
+};
+
+exports.FilePicker = FilePicker;
+//# sourceMappingURL=FilePicker-8cf3cdcc.js.map