@oracle/oraclejet-preact 14.0.6 → 14.0.7

package/amd/FilePicker-bb70dacb.js

@@ -0,0 +1,582 @@
+/* @oracle/oraclejet-preact: 14.0.7 */
+define(['exports', './tslib.es6-71b1ba5b', 'preact/jsx-runtime', './utils/UNSAFE_mergeProps', './utils/UNSAFE_classNames', './hooks/UNSAFE_useTranslationBundle', 'module', './UNSAFE_Text', './UNSAFE_Spacer', './utils/UNSAFE_size', './utils/UNSAFE_stringUtils', './Text-de291c3f', './Spacer-165e178f', './stringUtils-9311a716', './utils/UNSAFE_filePickerUtils', './utils/PRIVATE_clientHints', './hooks/UNSAFE_usePress', './hooks/UNSAFE_useHover', 'preact/hooks', './clientHints-361cde40', './hooks/UNSAFE_useTabbableMode', './classNames-027de734'], (function (exports, tslib_es6, jsxRuntime, utils_UNSAFE_mergeProps, utils_UNSAFE_classNames, hooks_UNSAFE_useTranslationBundle, linaria, UNSAFE_Text, UNSAFE_Spacer, utils_UNSAFE_size, utils_UNSAFE_stringUtils, Text, Spacer, stringUtils, utils_UNSAFE_filePickerUtils, utils_PRIVATE_clientHints, hooks_UNSAFE_usePress, hooks_UNSAFE_useHover, hooks, clientHints, hooks_UNSAFE_useTabbableMode, classNames) { 'use strict';
+
+    /**
+     * Gets the default content of the file picker
+     */
+    const getDefaultTriggerContent = (isDisabled, primaryText, secondaryText, translations, selectionMode) => {
+        return [
+            jsxRuntime.jsx(Text.Text, Object.assign({ variant: isDisabled ? 'disabled' : 'primary', weight: "bold", size: "xl" }, { children: getPrimaryText(primaryText, translations) })),
+            jsxRuntime.jsx(Spacer.Spacer, { height: "1.5x" }),
+            jsxRuntime.jsx(Text.Text, Object.assign({ variant: isDisabled ? 'disabled' : 'secondary', size: "sm" }, { children: getSecondaryText(secondaryText, translations, selectionMode) }))
+        ];
+    };
+    const getAriaLabel = ({ accessibleLabel, isDisabled, translations, primaryText, secondaryText, selectionMode }) => {
+        return accessibleLabel
+            ? accessibleLabel
+            : `${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 === null || onReject === void 0 ? void 0 : 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 === null || onCommit === void 0 ? void 0 : 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);
+        const { hoverProps, isHover } = hooks_UNSAFE_useHover.useHover({ isDisabled: false });
+        return {
+            validation,
+            dragAndDropProps,
+            pressProps,
+            isHover,
+            hoverProps
+        };
+    };
+    const clickCallbackUtils = (props) => {
+        /**
+         * Callback function when the filepicker is clicked.
+         */
+        const handleSelectingFiles = (event) => {
+            var _a, _b;
+            // 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: (_a = props.selectionMode) !== null && _a !== void 0 ? _a : 'multiple',
+                    capture: (_b = props.capture) !== null && _b !== void 0 ? _b : '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 === null || setValidity === void 0 ? void 0 : 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 === null || setValidity === void 0 ? void 0 : setValidity('invalid');
+                    dragPromiseResolver.current = fireRejectAction(messages, true, onReject);
+                }
+            }
+            else {
+                setValidity === null || setValidity === void 0 ? void 0 : setValidity('valid');
+            }
+        };
+        /**
+         * Drag leave handler is called when the dragged file leaves the filepicker dropzone
+         */
+        const _handleDragLeave = (event, mimeTypeDropFail = false) => {
+            var _a, _b;
+            if (!inDropZone.current) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            if (!((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget))) {
+                inDropZone.current = false;
+                setValidity === null || setValidity === void 0 ? void 0 : setValidity('NA');
+                // There's only a promise if validation failed on dragover
+                if (!isDroppable.current && !mimeTypeDropFail) {
+                    (_b = dragPromiseResolver.current) === null || _b === void 0 ? void 0 : _b.call(dragPromiseResolver);
+                }
+            }
+        };
+        /**
+         * 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(_a) {
+      var {
+        capture = 'none',
+        isDisabled = false,
+        selectionMode = 'multiple',
+        children
+      } = _a,
+          otherProps = tslib_es6.__rest(_a, ["capture", "isDisabled", "selectionMode", "children"]); // 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 = Object.assign({
+        capture,
+        selectionMode,
+        translations
+      }, otherProps);
+
+      if (isDisabled) {
+        return jsxRuntime.jsx(DisabledFilePicker, Object.assign({}, props, {
+          children: children
+        }));
+      }
+
+      return children ? jsxRuntime.jsx(CustomFilePicker, Object.assign({
+        testHandlersRef: testHandlersRef
+      }, props, {
+        children: children
+      })) : jsxRuntime.jsx(DefaultFilePicker, Object.assign({
+        testHandlersRef: testHandlersRef
+      }, props));
+    }
+    /**
+     * The default file picker element.
+     */
+
+    const DefaultFilePicker = props => {
+      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' ? 'oj-c-valid-drop' : validity === 'invalid' ? 'oj-c-invalid-drop' : '';
+      const rootRef = hooks.useRef(null);
+      const {
+        validation,
+        dragAndDropProps,
+        pressProps,
+        isHover,
+        hoverProps
+      } = useFilepickerElementHelper(props, rootRef, setValidity);
+      const mergedEventProps = utils_UNSAFE_mergeProps.mergeProps(pressProps, hoverProps); // These are backdoor handles that are used for testing purposes only
+
+      useSetupTestRef(dragAndDropProps, validation, props.testHandlersRef || null);
+      const classes = classNames.classNames([styles.base, props.width === undefined && styles.maxWidth, isHover && styles.hover]);
+      const {
+        isTabbable
+      } = hooks_UNSAFE_useTabbableMode.useTabbableMode();
+      const {
+        accessibleLabel,
+        primaryText,
+        secondaryText,
+        translations,
+        selectionMode,
+        width,
+        height
+      } = props;
+      return jsxRuntime.jsx("div", Object.assign({}, mergedEventProps, {
+        class: classes,
+        tabIndex: isTabbable ? 0 : -1,
+        role: "button",
+        "aria-label": getAriaLabel({
+          accessibleLabel,
+          isDisabled: false,
+          translations,
+          primaryText,
+          secondaryText,
+          selectionMode
+        }),
+        ref: rootRef,
+        style: getStyles(width, height)
+      }, {
+        children: jsxRuntime.jsx("div", Object.assign({
+          class: classNames.classNames([styles.inner, validityClass])
+        }, dragAndDropProps, {
+          children: getDefaultTriggerContent(false, primaryText, secondaryText, translations, selectionMode)
+        }))
+      }));
+    };
+
+    const childrenContainer = children => {
+      return jsxRuntime.jsx("div", Object.assign({
+        className: childrenStyles
+      }, {
+        children: children
+      }));
+    };
+    /**
+     * The disabled file picker element.
+     */
+
+
+    const DisabledFilePicker = ({
+      children,
+      accessibleLabel,
+      primaryText,
+      secondaryText,
+      translations,
+      selectionMode,
+      width,
+      height
+    }) => {
+      return jsxRuntime.jsx("div", Object.assign({
+        class: classNames.classNames([styles.base, styles.inner, width === undefined && styles.maxWidth, 'oj-c-filepicker-disabled']),
+        role: "button",
+        "aria-label": getAriaLabel({
+          accessibleLabel,
+          isDisabled: true,
+          translations,
+          primaryText,
+          secondaryText
+        }),
+        "aria-hidden": "true",
+        style: getStyles(width, height)
+      }, {
+        children: children && childrenContainer(children) || getDefaultTriggerContent(true, primaryText, secondaryText, translations, selectionMode)
+      }));
+    };
+    /**
+     * The custom file picker element.
+     */
+
+
+    const CustomFilePicker = props => {
+      const rootRef = hooks.useRef(null);
+      const {
+        validation,
+        dragAndDropProps,
+        pressProps,
+        isHover,
+        hoverProps
+      } = useFilepickerElementHelper(props, rootRef);
+      const mergedEventProps = utils_UNSAFE_mergeProps.mergeProps(pressProps, dragAndDropProps, hoverProps); // These are backdoor handles that are used for testing purposes only
+
+      useSetupTestRef(dragAndDropProps, validation, props.testHandlersRef || null);
+      const classes = classNames.classNames([styles.base, props.width === undefined && styles.maxWidth, isHover && styles.hover]);
+      const {
+        accessibleLabel,
+        translations,
+        selectionMode
+      } = props;
+      const {
+        isTabbable
+      } = hooks_UNSAFE_useTabbableMode.useTabbableMode();
+      return jsxRuntime.jsx("div", Object.assign({
+        class: classes,
+        tabIndex: isTabbable ? undefined : -1,
+        role: "button",
+        "aria-label": getAriaLabel({
+          accessibleLabel,
+          isDisabled: false,
+          translations,
+          selectionMode
+        }),
+        ref: rootRef,
+        style: getStyles(props.width, props.height)
+      }, mergedEventProps, {
+        children: props.children && childrenContainer(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
+      }));
+    };
+
+    const styles = {
+      base: "base-vkt7bd",
+      maxWidth: "maxWidth-kup59l",
+      inner: "inner-1nqc4vw",
+      hover: "hover-1mdff9f",
+      pseudohover: "pseudohover-rkm5qx"
+    };
+    const childrenStyles = "childrenStyles-1m0n888";
+
+    exports.FilePicker = FilePicker;
+
+}));
+/*  */
+//# sourceMappingURL=FilePicker-bb70dacb.js.map