@oracle/oraclejet-preact 15.0.16 → 15.0.17

package/es/FilePicker-da5b6e9c.js

@@ -0,0 +1,503 @@
+/* @oracle/oraclejet-preact: 15.0.17 */
+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-d856d5b1.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-35f004df.js';
+import { useTabbableMode } from './hooks/UNSAFE_useTabbableMode.js';
+import { useInteractionStyle } from './hooks/UNSAFE_useInteractionStyle.js';
+import { c as classNames } from './classNames-2bc0de99.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, {
+        disabledState: 'notDisabled',
+        hoveredState: applyHoverStyle ? 'isHover' : 'notHover',
+        pseudoHoveredState: applyPseudoHoverStyle ? 'isPseudoHover' : 'notPseudoHover'
+    });
+    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',
+        hoveredState: 'notHover',
+        pseudoHoveredState: 'notPseudoHover'
+    });
+    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, {
+        disabledState: 'notDisabled',
+        hoveredState: applyHoverStyle ? 'isHover' : 'notHover',
+        pseudoHoveredState: applyPseudoHoverStyle ? 'isPseudoHover' : 'notPseudoHover'
+    });
+    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-da5b6e9c.js.map

package/es/FilePicker-da5b6e9c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilePicker-da5b6e9c.js","sources":["../../src/UNSAFE_FilePicker/FilePickerUtils.tsx","../../src/UNSAFE_FilePicker/postValidationUtils.tsx","../../src/UNSAFE_FilePicker/useFilePickerElement.tsx","../../src/UNSAFE_FilePicker/FilePicker.tsx"],"sourcesContent":["import { ComponentMessageItem } from '../UNSAFE_ComponentMessage';\nimport { sizeToCSS } from '../utils/UNSAFE_size';\nimport { trim } from '../utils/UNSAFE_stringUtils';\nimport { BundleType } from '../resources/nls/bundle';\nimport { FilePicker } from './FilePicker';\nimport { JSX, ComponentProps } from 'preact';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { FilePickerStyles } from './themes/FilePickerStyles.css';\nimport { FilePickerRedwoodTheme } from './themes/redwood/FilePickerTheme';\n\ntype FilePickerProps = ComponentProps<typeof FilePicker>;\n\n/**\n * Gets the default content of the file picker\n */\nexport const getDefaultTriggerContent = (\n  isDisabled: FilePickerProps['isDisabled'],\n  primaryText: FilePickerProps['primaryText'],\n  secondaryText: FilePickerProps['secondaryText'],\n  translations: BundleType,\n  selectionMode: FilePickerProps['selectionMode']\n) => {\n  const {\n    styles: {\n      disabledPrimaryTextStyle,\n      primaryTextStyle,\n      disabledSecondaryTextStyle,\n      secondaryTextStyle\n    }\n  } = useComponentTheme<never, FilePickerStyles>(FilePickerRedwoodTheme);\n  return [\n    <div class={isDisabled ? disabledPrimaryTextStyle : primaryTextStyle}>\n      {getPrimaryText(primaryText, translations)}\n    </div>,\n    <div class={isDisabled ? disabledSecondaryTextStyle : secondaryTextStyle}>\n      {getSecondaryText(secondaryText, translations, selectionMode)}\n    </div>\n  ];\n};\n\n/**\n * Returns the aria label\n */\ntype AriaLabelProps = {\n  ariaLabel: FilePickerProps['aria-label'];\n  isDisabled: FilePickerProps['isDisabled'];\n  translations: BundleType;\n  primaryText?: FilePickerProps['primaryText'];\n  secondaryText?: FilePickerProps['secondaryText'];\n  selectionMode?: FilePickerProps['selectionMode'];\n};\nexport const getAriaLabel = ({\n  ariaLabel,\n  isDisabled,\n  translations,\n  primaryText,\n  secondaryText,\n  selectionMode\n}: AriaLabelProps) => {\n  return ariaLabel\n    ? ariaLabel\n    : `${isDisabled ? '' : translations.filePicker_addFiles() + '. '}${getPrimaryText(\n        primaryText,\n        translations\n      )}. ${getSecondaryText(secondaryText, translations, selectionMode)}`;\n};\n\n/**\n * Returns the styles of the file picker\n */\nexport const getStyles = (width: FilePickerProps['width'], height: FilePickerProps['height']) => {\n  const dimStyles: JSX.CSSProperties = {\n    width: width ? sizeToCSS(width) : undefined,\n    height: height ? sizeToCSS(height) : undefined\n  };\n  return dimStyles;\n};\n\n/**\n * Returns the primary text\n */\nconst getPrimaryText = (primaryText: FilePickerProps['primaryText'], translations: BundleType) => {\n  return primaryText ? primaryText : translations.filePicker_dropzonePrimaryText();\n};\n\n/**\n * Returns the secondary text text\n */\nconst getSecondaryText = (\n  secondaryText: FilePickerProps['secondaryText'],\n  translations: BundleType,\n  selectionMode: FilePickerProps['selectionMode']\n) => {\n  const defaultSecondaryText =\n    selectionMode === 'multiple'\n      ? translations.filePicker_dropzoneSecondaryTextMultiple()\n      : translations.filePicker_dropzoneSecondaryText();\n  return secondaryText ? secondaryText : defaultSecondaryText;\n};\n\n/**\n * Takes in a list of files and returns a list of accepted files and\n * a list of rejected files based on file type\n */\nexport const validateTypes = (\n  files: FileList,\n  accept: FilePickerProps['accept'],\n  translations: BundleType\n) => {\n  const accepted = [];\n  const rejected = [];\n  let file: File;\n  let type: string;\n  if (files) {\n    for (let i = 0; i < files.length; i++) {\n      file = files[i];\n      const name = file.name;\n      type = translations.filePicker_unknownFileTypeUploadError();\n      if (name) {\n        const nameSplit = name.split('.');\n        type = nameSplit.length > 1 ? '.' + nameSplit.pop() : type;\n      }\n      type = file.type ? file.type : type;\n      // If type isn't already in one of the lists, add it\n      if (accepted.indexOf(type) === -1 && rejected.indexOf(type) === -1) {\n        if (_acceptFile(file, accept)) {\n          accepted.push(type);\n        } else {\n          rejected.push(type);\n        }\n      }\n    }\n  }\n  return { accepted, rejected };\n};\n\n/**\n * Creates a file list\n */\nexport const createFileList = (origList: FileList | DataTransferItemList) => {\n  const descriptor: Record<string | number, PropertyDescriptor> = {\n    length: { value: origList.length },\n    item: {\n      value(index: number): File {\n        return (this as unknown as FileList)[index];\n      }\n    }\n  };\n  for (let i = 0; i < origList.length; i++) {\n    descriptor[i] = { value: origList[i], enumerable: true };\n  }\n\n  return Object.create(FileList.prototype, descriptor);\n};\n\n/**\n * Returns false if selected multiple files when in single file selection mode\n */\nexport const validateSelectionMode = (\n  files: FileList,\n  selectionMode: FilePickerProps['selectionMode']\n) => {\n  return selectionMode !== 'single' || files.length === 1;\n};\n\n/**\n * Returns the correct message if mime type validation has failed\n */\nexport const getMimeTypeValidationMessages = (\n  rejected: Array<string>,\n  translations: BundleType\n): ComponentMessageItem[] => {\n  const messages: ComponentMessageItem[] = [];\n  if (rejected.length === 1) {\n    messages.push({\n      severity: 'error',\n      summary: translations.filePicker_singleTypeUploadError({\n        fileType: rejected[0]\n      })\n    });\n  } else {\n    messages.push({\n      severity: 'error',\n      summary: translations.filePicker_multipleFileTypeUploadError({\n        fileTypes: rejected.join(translations.plural_separator())\n      })\n    });\n  }\n  return messages;\n};\n\n/**\n * Returns true if file passes mimetype validation\n */\nconst _acceptFile = (file: File, accept: FilePickerProps['accept']) => {\n  const acceptProp = accept;\n  if (!acceptProp || acceptProp.length === 0 || !file) {\n    return true;\n  }\n\n  let fileAccept;\n  for (let i = 0; i < acceptProp.length; i++) {\n    fileAccept = trim(acceptProp[i]) as string;\n    if (!fileAccept) {\n      return true;\n    } else if (fileAccept.startsWith('.', 0)) {\n      // when dragover, only MIME type is available, file name is undefined\n      // to lowerCase is to make the string comparison case insensitive\n      if (!file.name || (file.name && file.name.toLowerCase().endsWith(fileAccept.toLowerCase()))) {\n        return true;\n      }\n    } else if (!file.type) {\n      return false;\n    } else if (fileAccept === 'image/*') {\n      if (file.type.startsWith('image/', 0)) {\n        return true;\n      }\n    } else if (fileAccept === 'video/*') {\n      if (file.type.startsWith('video/', 0)) {\n        return true;\n      }\n    } else if (fileAccept === 'audio/*') {\n      if (file.type.startsWith('audio/', 0)) {\n        return true;\n      }\n    } else if (file.type === fileAccept) {\n      return true;\n    }\n  }\n  return false;\n};\n","import { ComponentMessageItem } from '../UNSAFE_ComponentMessage';\n\nimport { createFileList } from './FilePickerUtils';\nimport { RejectDetail, CommitDetail } from './FilePicker';\n\n/**\n * Calls the onReject callback when invalid files are selected.\n * For invalid dragged files, this function will return a promise resolver that\n * should be called when the invalid files are no longer dragged over the filepicker.\n */\nexport const fireRejectAction = (\n  messages: ComponentMessageItem[],\n  isDrag: boolean,\n  onReject?: (detail: RejectDetail) => void\n) => {\n  let resolver;\n  const dragPromise = isDrag\n    ? new Promise<void>((resolve) => {\n        resolver = resolve;\n      })\n    : null;\n\n  onReject?.({\n    messages,\n    until: dragPromise\n  });\n  return resolver;\n};\n\n/**\n * Calls the onCommit callback when all files are valid.\n */\nexport const handleFilesAdded = (files: FileList, onCommit?: (detail: CommitDetail) => void) => {\n  // Bug 28503874 - filepicker: filelist cleared after the handler returns\n  // Note: the parameter \"files\" is a direct reference to the embedded Input element's property\n  // which could be reset or changed.\n  // we need to return a copy of FileList just in case apps hold on to a reference to FileList\n  const list = createFileList(files);\n  onCommit?.({\n    files: list\n  });\n};\n","import { pickFiles } from '../utils/UNSAFE_filePickerUtils';\nimport { getClientHints } from '../utils/PRIVATE_clientHints';\nimport { usePress } from '../hooks/UNSAFE_usePress';\nimport { ComponentMessageItem } from '../UNSAFE_ComponentMessage';\nimport { BundleType } from '../resources/nls/bundle';\n\nimport { FilePicker, CommitDetail, RejectDetail } from './FilePicker';\nimport {\n  validateTypes,\n  getMimeTypeValidationMessages,\n  createFileList,\n  validateSelectionMode\n} from './FilePickerUtils';\nimport { fireRejectAction, handleFilesAdded } from './postValidationUtils';\n\nimport { ComponentProps } from 'preact';\nimport { useRef, Ref, StateUpdater } from 'preact/hooks';\n\ntype FilePickerProps = ComponentProps<typeof FilePicker>;\n\ntype FilePickerElementProps = FilePickerProps & {\n  translations: BundleType;\n};\n\n/**\n * The file picker helper method for non-disabled filepickers.\n */\nexport const useFilepickerElementHelper = (\n  props: FilePickerElementProps,\n  rootRef: Ref<HTMLDivElement>,\n  setValidity?: StateUpdater<'NA' | 'valid' | 'invalid'>\n) => {\n  const { callback, validation } = clickCallbackUtils(props);\n  const { pressProps } = usePress(callback);\n\n  const dragAndDropProps = useDragAndDropEvents(\n    props.accept,\n    props.selectionMode,\n    fireRejectAction,\n    handleFilesAdded,\n    rootRef,\n    props.translations,\n    props.onCommit,\n    props.onReject,\n    setValidity\n  );\n  return {\n    validation,\n    dragAndDropProps,\n    pressProps\n  };\n};\n\ntype ClickProps = {\n  accept?: FilePickerProps['accept'];\n  capture?: FilePickerProps['capture'];\n  selectionMode?: FilePickerProps['selectionMode'];\n  onCommit?: FilePickerProps['onCommit'];\n  onReject?: FilePickerProps['onReject'];\n  translations: BundleType;\n};\n\nconst clickCallbackUtils = (props: ClickProps) => {\n  /**\n   * Callback function when the filepicker is clicked.\n   */\n  const handleSelectingFiles = (event: Event) => {\n    // Bug 27775173 - within firefox browser cannot tab past filepicker without file selector\n    // window opening\n    // only launching the file picker if click or 'Enter' was pressed\n    if (\n      event.type === 'click' ||\n      (event.type === 'keyup' && (event as KeyboardEvent).code === 'Enter')\n    ) {\n      // Bug 26907138 - form submit event is triggered when the file upload button is clicked\n      event.preventDefault();\n\n      pickFiles(_handleClickValidation, {\n        accept: props.accept,\n        selectionMode: props.selectionMode ?? 'multiple',\n        capture: props.capture ?? 'none'\n      });\n    }\n  };\n\n  /**\n   * Handles file validation from selecting files through the file dialog\n   */\n  const _handleClickValidation = (files: FileList) => {\n    if (files.length > 0) {\n      const rejected = validateTypes(files, props.accept, props.translations).rejected;\n      if (rejected.length > 0) {\n        fireRejectAction(\n          getMimeTypeValidationMessages(rejected, props.translations),\n          false,\n          props.onReject\n        );\n      } else {\n        handleFilesAdded(files, props.onCommit);\n      }\n    }\n  };\n  return {\n    callback: handleSelectingFiles,\n    validation: _handleClickValidation\n  };\n};\n\nconst useDragAndDropEvents = (\n  accept: FilePickerProps['accept'],\n  selectionMode: FilePickerProps['selectionMode'],\n  fireRejectAction: (\n    messages: ComponentMessageItem[],\n    isDrag: boolean,\n    onReject?: (detail: RejectDetail) => void\n  ) => any,\n  handleFilesAdded: (files: FileList, onCommit?: (detail: CommitDetail) => void) => void,\n  rootRef: Ref<HTMLDivElement>,\n  translations: BundleType,\n  onCommit?: (detail: CommitDetail) => void,\n  onReject?: (detail: RejectDetail) => void,\n  // setValidity not set for custom filepicker\n  setValidity?: StateUpdater<'NA' | 'valid' | 'invalid'>\n) => {\n  const inDropZone = useRef<boolean>(false);\n  const isDroppable = useRef<boolean>(false);\n  const dragPromiseResolver = useRef<() => void>();\n\n  /**\n   * Drag Enter handler called when a dragged file enter the filepicker dropzone\n   */\n  const _handleDragEnter = (event: Event) => {\n    event.preventDefault();\n    event.stopPropagation();\n  };\n\n  /**\n   * Drag over handler called when a file is dragged over the filepicker\n   */\n  const _handleDragOver = (event: DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    if (inDropZone.current) {\n      return;\n    }\n\n    const browser = getClientHints().browser;\n    inDropZone.current = true;\n    isDroppable.current = true;\n    // Safari doesn't provide the data for the files on drag over so validation cannot be done until drop\n    if (browser !== 'safari') {\n      if (!event.dataTransfer) {\n        return;\n      }\n      const files = createFileList(event.dataTransfer.items);\n      let messages = [] as ComponentMessageItem[];\n      const selectionModeValid = validateSelectionMode(files, selectionMode);\n      const droppable = validateTypes(files, accept, translations);\n      if (selectionModeValid && droppable.rejected.length === 0) {\n        // validation passes\n        setValidity?.('valid');\n      } else {\n        isDroppable.current = false;\n        if (selectionModeValid) {\n          // mimetype Validation fails\n          messages = getMimeTypeValidationMessages(droppable.rejected, translations);\n        } else {\n          // selected multiple files in single selection mode\n          messages.push({\n            severity: 'error',\n            summary: translations.filePicker_singleFileUploadError()\n          });\n        }\n        setValidity?.('invalid');\n        dragPromiseResolver.current = fireRejectAction(messages, true, onReject);\n      }\n    } else {\n      setValidity?.('valid');\n    }\n  };\n\n  /**\n   * Drag leave handler is called when the dragged file leaves the filepicker dropzone\n   */\n  const _handleDragLeave = (event: DragEvent, mimeTypeDropFail = false) => {\n    if (!inDropZone.current) {\n      return;\n    }\n    event.preventDefault();\n    event.stopPropagation();\n    if (!rootRef.current?.contains(event.relatedTarget as Node)) {\n      inDropZone.current = false;\n      setValidity?.('NA');\n      // There's only a promise if validation failed on dragover\n      if (!isDroppable.current && !mimeTypeDropFail) {\n        dragPromiseResolver.current?.();\n      }\n    }\n  };\n\n  /**\n   * Drop file handler is called when a file is dropped on the filepicker dropzone\n   */\n  const _handleFileDrop = (event: DragEvent) => {\n    if (inDropZone.current) {\n      event.preventDefault();\n      event.stopPropagation();\n      if (!event.dataTransfer) {\n        inDropZone.current = false;\n        return;\n      }\n      const files = createFileList(event.dataTransfer.files);\n      let mimeTypeDropFail = false;\n      if (isDroppable.current) {\n        let messages: ComponentMessageItem[] = [];\n        if (validateSelectionMode(files, selectionMode)) {\n          const droppable = validateTypes(files, accept, translations);\n          if (droppable.rejected.length > 0) {\n            // mimetype Validation fails\n            messages = getMimeTypeValidationMessages(droppable.rejected, translations);\n            mimeTypeDropFail = true;\n          }\n        } else {\n          messages.push({\n            severity: 'error',\n            summary: translations.filePicker_singleFileUploadError()\n          });\n        }\n        if (messages.length > 0) {\n          isDroppable.current = false;\n          fireRejectAction(messages, false, onReject);\n        }\n        if (isDroppable.current) {\n          handleFilesAdded(files, onCommit);\n        }\n      }\n      _handleDragLeave(event, mimeTypeDropFail);\n    }\n  };\n\n  return {\n    onDragEnter: _handleDragEnter,\n    onDragOver: _handleDragOver,\n    onDragLeave: _handleDragLeave,\n    onDrop: _handleFileDrop\n  };\n};\n","/**\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 { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { Size } from '../utils/UNSAFE_size';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport type { BundleType } from '../resources/nls/bundle';\nimport { ComponentMessageItem } from '../UNSAFE_ComponentMessage';\n\nimport { getDefaultTriggerContent, getAriaLabel, getStyles } from './FilePickerUtils';\nimport { useFilepickerElementHelper } from './useFilePickerElement';\n\nimport { ComponentChildren } from 'preact';\nimport { useState, useRef, useImperativeHandle } from 'preact/hooks';\nimport { ForwardedRef } from 'preact/compat';\nimport { useTabbableMode } from '../hooks/UNSAFE_useTabbableMode';\n\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { FilePickerStyles, FilePickerVariantOptions } from './themes/FilePickerStyles.css';\nimport { useInteractionStyle } from '../hooks/UNSAFE_useInteractionStyle';\nimport { FilePickerRedwoodTheme } from './themes/redwood/FilePickerTheme';\n// TODO: Andy's comment below JET-53230\n// The FilePicker supports two very different use cases: default and custom file pickers. Should we consider dropping the wrapper and instead exporting the two underlying components (with the appropriate property types) directly?\n// If not, perhaps we should look into defining the Props type as a discriminated union such that primaryText/secondaryText props are only valid when children is not specified?\n\ntype Props = {\n  /**\n   * An array of strings of allowed MIME types or file extensions that can be uploaded; this is unlike the accept attribute of the html &lt;input> element that accepts a simple comma-delimited string. If not specified, all file types will be accepted.\n   * <p>Note: If accept is specified, files with empty string type will be rejected if no match found in the \"accept\" value.   */\n  accept?: string[];\n\n  /**\n   * Specifies the preferred facing mode for the device's\n   * <a href=\"https://www.w3.org/TR/html-media-capture/#dom-htmlinputelement-capture\">media capture</a> mechanism;\n   * This is most often used to provide direct camera access on mobile devices.  Note that the accept attribute must\n   * be specified and have an associated capture control type (e.g.[\"image/*\"]) for the capture attribute to take effect.  Support may vary by browser.\n   *\n   */\n  capture?: 'user' | 'environment' | 'implementation' | 'none';\n\n  /**\n   * Disables the filepicker if set to <code class=\"prettyprint\">true</code>.\n   */\n  isDisabled?: boolean;\n\n  /**\n   * The primary text for the default file picker.\n   */\n  primaryText?: string;\n\n  /**\n   * The secondary text for the default file picker.\n   */\n  secondaryText?: string;\n  /**\n   * Whether to allow single or multiple file selection.\n   */\n  selectionMode?: 'multiple' | 'single';\n\n  /**\n   * A label to be used for accessibility purposes. This will be used for the aria-label of the DOM element.\n   */\n  'aria-label'?: string;\n\n  /**\n   * Property that triggers a callback immediately when a set of files have been committed\n   */\n  onCommit?: (detail: CommitDetail) => void;\n\n  /**\n   * Property that triggers a callback immediately when a set of files have been rejected\n   */\n  onReject?: (detail: RejectDetail) => void;\n\n  /**\n   * Width of the File Picker\n   */\n  width?: Size;\n\n  /**\n   * Height of the File Picker\n   */\n  height?: Size;\n\n  /**\n   * If the children is provided, its contents replace the default filepicker.  Filepicker will still set role and aria-label, but\n   * the application is responsible for setting the tabindex.\n   */\n  children?: ComponentChildren;\n};\n\nexport type CommitDetail = {\n  files: FileList;\n};\n\nexport type RejectDetail = {\n  /**\n   * Messages that should be displayed to the user (e.g. in an oj-messages component) describing rejected files.\n   */\n  messages: ComponentMessageItem[];\n\n  /**\n   * This property may be populated with a Promise to provide short-term feedback during a user interaction (typically drag and drop); the feedback should be cleared upon the resolution of this Promise.\n   */\n  until: Promise<void> | null;\n};\n\n/**\n * A file picker displays a clickable dropzone for selecting files from the device storage.\n */\nexport function FilePicker({\n  capture = 'none',\n  isDisabled = false,\n  selectionMode = 'multiple',\n  children,\n  ...otherProps\n}: Props) {\n  // this ref is added only for testing purposes.  Allows the test to directly\n  // call certain functions that should be tested\n  const testHandlersRef = (otherProps as any).__testHandlerSymbol;\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const props = { capture, selectionMode, translations, ...otherProps };\n  if (isDisabled) {\n    return <DisabledFilePicker {...props}>{children}</DisabledFilePicker>;\n  }\n  return children ? (\n    <CustomFilePicker testHandlersRef={testHandlersRef} {...props}>\n      {children}\n    </CustomFilePicker>\n  ) : (\n    <DefaultFilePicker testHandlersRef={testHandlersRef} {...props} />\n  );\n}\n\ntype FilePickerProps = Props & {\n  translations: BundleType;\n};\n\ntype DndProps = {\n  onDragEnter: (event: Event) => void;\n  onDragOver: (event: DragEvent) => void;\n  onDragLeave: (event: DragEvent, mimeTypeDropFail: boolean) => void;\n  onDrop: (event: DragEvent) => void;\n};\n\nexport type TestHandlersRef = ForwardedRef<\n  DndProps & {\n    onClickSelected: (files: FileList) => void;\n  }\n>;\n\ntype TestHandlerProps = {\n  // this ref is populated only in tests\n  testHandlersRef?: TestHandlersRef;\n};\n\ntype DefaultProps = Omit<FilePickerProps, 'isDisabled' | 'children'> & TestHandlerProps;\n\n/**\n * The default file picker element.\n */\nconst DefaultFilePicker = (props: DefaultProps) => {\n  const { interactionProps, applyActiveStyle, applyHoverStyle, applyPseudoHoverStyle } =\n    useInteractionStyle(false);\n  const {\n    classes,\n    styles: {\n      maxWidth,\n      inner,\n      activeStyle,\n      innerNeedsEventsHoverStyle,\n      innerPseudoHoverStyle,\n      invalidDrop,\n      validDrop\n    }\n  } = useComponentTheme<FilePickerVariantOptions, FilePickerStyles>(FilePickerRedwoodTheme, {\n    disabledState: 'notDisabled',\n    hoveredState: applyHoverStyle ? 'isHover' : 'notHover',\n    pseudoHoveredState: applyPseudoHoverStyle ? 'isPseudoHover' : 'notPseudoHover'\n  });\n  const innerInteractiveClasses = [\n    applyActiveStyle ? activeStyle : '',\n    applyHoverStyle ? innerNeedsEventsHoverStyle : '',\n    applyPseudoHoverStyle ? innerPseudoHoverStyle : ''\n  ];\n  const [validity, setValidity] = useState<'NA' | 'valid' | 'invalid'>('NA');\n\n  // class added to change bg/border color based on if file is valid on drag and drop\n  const validityClass =\n    validity === 'valid' ? validDrop : validity === 'invalid' ? invalidDrop : undefined;\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  const { validation, dragAndDropProps, pressProps } = useFilepickerElementHelper(\n    props,\n    rootRef,\n    setValidity\n  );\n  const mergedEventProps = mergeProps(pressProps, interactionProps);\n\n  // These are backdoor handles that are used for testing purposes only\n  useSetupTestRef(dragAndDropProps, validation, props.testHandlersRef || null);\n  const wrapperClasses = classNames([classes, props.width === undefined && maxWidth]);\n  const { isTabbable } = useTabbableMode();\n  const { primaryText, secondaryText, translations, selectionMode, width, height } = props;\n  return (\n    <div\n      {...mergedEventProps}\n      class={wrapperClasses}\n      tabIndex={isTabbable ? 0 : -1}\n      role=\"button\"\n      aria-label={getAriaLabel({\n        ariaLabel: props['aria-label'],\n        isDisabled: false,\n        translations,\n        primaryText,\n        secondaryText,\n        selectionMode\n      })}\n      ref={rootRef}\n      style={getStyles(width, height)}>\n      <div\n        class={classNames([inner, validityClass, ...innerInteractiveClasses])}\n        {...dragAndDropProps}>\n        {getDefaultTriggerContent(false, primaryText, secondaryText, translations, selectionMode)}\n      </div>\n    </div>\n  );\n};\n\ntype DisabledProps = Omit<\n  FilePickerProps,\n  'accept' | 'capture' | 'onCommit' | 'onReject' | 'isDisabled'\n>;\n\n/**\n * The disabled file picker element.\n */\nconst DisabledFilePicker = ({\n  children,\n  primaryText,\n  secondaryText,\n  translations,\n  selectionMode,\n  width,\n  height,\n  ...props\n}: DisabledProps) => {\n  const {\n    classes,\n    styles: { maxWidth, inner, noChildrenMargin }\n  } = useComponentTheme<FilePickerVariantOptions, FilePickerStyles>(FilePickerRedwoodTheme, {\n    disabledState: 'isDisabled',\n    hoveredState: 'notHover',\n    pseudoHoveredState: 'notPseudoHover'\n  });\n  return (\n    <div\n      class={classNames([classes, inner, noChildrenMargin, width === undefined && maxWidth])}\n      role=\"button\"\n      aria-label={getAriaLabel({\n        ariaLabel: props['aria-label'],\n        isDisabled: true,\n        translations,\n        primaryText,\n        secondaryText\n      })}\n      aria-hidden=\"true\"\n      style={getStyles(width, height)}>\n      {children ||\n        getDefaultTriggerContent(true, primaryText, secondaryText, translations, selectionMode)}\n    </div>\n  );\n};\n\ntype CustomProps = Omit<FilePickerProps, 'isDisabled' | 'primaryText' | 'secondaryText'> &\n  TestHandlerProps;\n\n/**\n * The custom file picker element.\n */\nconst CustomFilePicker = (props: CustomProps) => {\n  const { interactionProps, applyHoverStyle, applyPseudoHoverStyle } = useInteractionStyle(false);\n  const {\n    classes,\n    styles: { maxWidth, noChildrenMargin }\n  } = useComponentTheme<FilePickerVariantOptions, FilePickerStyles>(FilePickerRedwoodTheme, {\n    disabledState: 'notDisabled',\n    hoveredState: applyHoverStyle ? 'isHover' : 'notHover',\n    pseudoHoveredState: applyPseudoHoverStyle ? 'isPseudoHover' : 'notPseudoHover'\n  });\n  const rootRef = useRef<HTMLDivElement>(null);\n  const { validation, dragAndDropProps, pressProps } = useFilepickerElementHelper(props, rootRef);\n  const mergedEventProps = mergeProps(pressProps, dragAndDropProps, interactionProps);\n\n  // These are backdoor handles that are used for testing purposes only\n  useSetupTestRef(dragAndDropProps, validation, props.testHandlersRef || null);\n\n  const wrapperClasses = classNames([\n    classes,\n    noChildrenMargin,\n    props.width === undefined && maxWidth\n  ]);\n  const { translations, selectionMode } = props;\n  const { isTabbable } = useTabbableMode();\n  return (\n    <div\n      class={classNames([wrapperClasses])}\n      tabIndex={isTabbable ? undefined : -1}\n      role=\"button\"\n      aria-label={getAriaLabel({\n        ariaLabel: props['aria-label'],\n        isDisabled: false,\n        translations,\n        selectionMode\n      })}\n      ref={rootRef}\n      style={getStyles(props.width, props.height)}\n      {...mergedEventProps}>\n      {props.children}\n    </div>\n  );\n};\n\n/**\n * Only called for testing purposes, sets up the test ref that\n * allows for backdoor access to certain methods\n */\nconst useSetupTestRef = (\n  dragAndDropProps: DndProps,\n  validation: (files: FileList) => void,\n  testHandlersRef: TestHandlersRef\n) => {\n  useImperativeHandle(testHandlersRef, () => ({\n    onDragEnter: dragAndDropProps.onDragEnter,\n    onDragOver: dragAndDropProps.onDragOver,\n    onDrop: dragAndDropProps.onDrop,\n    onDragLeave: dragAndDropProps.onDragLeave,\n    onClickSelected: validation\n  }));\n};\n"],"names":["_jsx"],"mappings":"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"}

package/es/Flex-d918846a.js

@@ -0,0 +1,40 @@
+/* @oracle/oraclejet-preact: 15.0.17 */
+import { jsx } from 'preact/jsx-runtime';
+import { dimensionInterpolations } from './utils/UNSAFE_interpolations/dimensions.js';
+import { mergeInterpolations } from './utils/UNSAFE_mergeInterpolations.js';
+
+import { boxAlignmentInterpolations } from './utils/UNSAFE_interpolations/boxalignment.js';
+import './utils/UNSAFE_interpolations/flexbox.js';
+import './utils/UNSAFE_interpolations/flexitem.js';
+import './utils/UNSAFE_classNames.js';
+import { f as flexboxInterpolations } from './flexbox-5e336dc3.js';
+import { f as flexitemInterpolations } from './flexitem-a9f6ac95.js';
+import { c as classNames } from './classNames-2bc0de99.js';
+
+const baseStyles = "_1aia5ot";
+// exported for testing
+// TODO: This will be removed when converting the Flex commponent to the new theming,
+// and there the marginZeroStyles class name will be exported in the FlexStyles.css.ts file
+// and can be used for testing.
+const marginZeroStyles = "lmzyqy";
+const interpolations = [...Object.values(dimensionInterpolations), ...Object.values(flexboxInterpolations), ...Object.values(flexitemInterpolations), ...Object.values(boxAlignmentInterpolations)];
+const styleInterpolations = mergeInterpolations(interpolations);
+const Flex = ({
+  children,
+  hasZeroMargins = true,
+  ...props
+}) => {
+  const flexComponentClasses = classNames([baseStyles, hasZeroMargins && marginZeroStyles]);
+  const {
+    class: cls,
+    ...styles
+  } = styleInterpolations(props);
+  return jsx("div", {
+    class: `${flexComponentClasses} ${cls}`,
+    style: styles,
+    children: children
+  });
+};
+
+export { Flex as F, marginZeroStyles as m };
+//# sourceMappingURL=Flex-d918846a.js.map

package/es/Flex-d918846a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex-d918846a.js","sources":["../../src/UNSAFE_Flex/Flex.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ComponentChildren } from 'preact';\nimport { dimensionInterpolations } from '../utils/UNSAFE_interpolations/dimensions';\nimport type { DimensionProps } from '../utils/UNSAFE_interpolations/dimensions';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { boxAlignmentInterpolations } from '../utils/UNSAFE_interpolations/boxalignment';\nimport type { BoxAlignmentProps } from '../utils/UNSAFE_interpolations/boxalignment';\nimport { flexboxInterpolations } from '../utils/UNSAFE_interpolations/flexbox';\nimport type { FlexboxProps } from '../utils/UNSAFE_interpolations/flexbox';\nimport { flexitemInterpolations } from '../utils/UNSAFE_interpolations/flexitem';\nimport type { FlexitemProps } from '../utils/UNSAFE_interpolations/flexitem';\nimport { classNames } from '../utils/UNSAFE_classNames';\n\ntype StyleProps = DimensionProps & FlexboxProps & FlexitemProps & BoxAlignmentProps;\n\ntype Props = StyleProps & {\n  children?: ComponentChildren;\n  /**\n   * @default true\n   */\n  hasZeroMargins?: boolean;\n};\n\nconst baseStyles = cssProps`${{ display: 'flex' }}`;\n// exported for testing\n// TODO: This will be removed when converting the Flex commponent to the new theming,\n// and there the marginZeroStyles class name will be exported in the FlexStyles.css.ts file\n// and can be used for testing.\nexport const marginZeroStyles = cssProps`${{\n  /* @ts-ignore */\n  '& > *': {\n    marginTop: '0 !important',\n    marginBottom: '0 !important',\n    marginLeft: '0 !important',\n    marginRight: '0 !important'\n  }\n}}`;\n\nconst interpolations = [\n  ...Object.values(dimensionInterpolations),\n  ...Object.values(flexboxInterpolations),\n  ...Object.values(flexitemInterpolations),\n  ...Object.values(boxAlignmentInterpolations)\n];\n\nconst styleInterpolations = mergeInterpolations<Props>(interpolations);\n\nexport const Flex = ({ children, hasZeroMargins = true, ...props }: Props) => {\n  const flexComponentClasses = classNames([baseStyles, hasZeroMargins && marginZeroStyles]);\n  const { class: cls, ...styles } = styleInterpolations(props);\n  return (\n    <div class={`${flexComponentClasses} ${cls}`} style={styles}>\n      {children}\n    </div>\n  );\n};\n"],"names":["baseStyles","marginZeroStyles","interpolations","Object","values","dimensionInterpolations","flexboxInterpolations","flexitemInterpolations","boxAlignmentInterpolations","styleInterpolations","mergeInterpolations","Flex","children","hasZeroMargins","props","flexComponentClasses","classNames","class","cls","styles","_jsx","style"],"mappings":";;;;;;;;;;;;;AA8BA,MAAAA,UAAA,GAA2B,UAAA,CAAA;AAC3B;AACA;AACA;AACA;AACA,MAAAC,gBAAA,GAQC,SAAA;AAED,MAAAC,cAAA,GAAA,CACE,GAAAC,MAAA,CAAAC,MAAA,CAAAC,uBAAA,CAAA,EACA,GAAAF,MAAA,CAAAC,MAAA,CAAAE,qBAAA,CAAA,EACA,GAAAH,MAAA,CAAAC,MAAA,CAAAG,sBAAA,CAAA,EACA,GAAAJ,MAAA,CAAAC,MAAA,CAAAI,0BAAA,CAAA;AAGF,MAAAC,mBAAA,GAAAC,mBAAA,CAAAR,cAAA,CAAA,CAAA;AAEA,MAAAS,IAAA,GAAAA,CAAA;EAAAC,QAAA;AAAAC,EAAAA,cAAA,GAAA,IAAA;EAAA,GAAAC,KAAAA;AAAA,CAAA,KAAA;EACE,MAAAC,oBAAA,GAAAC,UAAA,CAAA,CAAAhB,UAAA,EAAAa,cAAA,IAAAZ,gBAAA,CAAA,CAAA,CAAA;EACA,MAAA;AAAAgB,IAAAA,KAAA,EAAAC,GAAA;IAAA,GAAAC,MAAAA;AAAA,GAAA,GAAAV,mBAAA,CAAAK,KAAA,CAAA,CAAA;EACA,OAAAM,GAAA,CAAA,KAAA,EAAA;AAAAH,IAAAA,KAAA,EAAA,CAAA,EAAAF,oBAAA,CAAA,CAAA,EAAAG,GAAA,CAAA,CAAA;AAAAG,IAAAA,KAAA,EAAAF,MAAA;AAAAP,IAAAA,QAAA,EAAAA,QAAAA;AAAA,GAAA,CAAA,CAAA;AAKF;;;;"}