@oracle/oraclejet-preact 14.0.6 → 14.1.0

package/cjs/FilePicker-cbd0e4cc.js

@@ -1,602 +0,0 @@
-/* @oracle/oraclejet-preact: 14.0.6 */
-'use strict';
-
-var tslib_es6 = require('./tslib.es6-d16792a7.js');
-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');
-
-require('./UNSAFE_Text.js');
-require('./UNSAFE_Spacer.js');
-var utils_UNSAFE_size = require('./utils/UNSAFE_size.js');
-require('./utils/UNSAFE_stringUtils.js');
-var Text = require('./Text-ec8edbaf.js');
-var Spacer = require('./Spacer-c769293a.js');
-var stringUtils = require('./stringUtils-2df763ee.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_UNSAFE_useHover = require('./hooks/UNSAFE_useHover.js');
-var hooks = require('preact/hooks');
-var clientHints = require('./clientHints-1a5d69e6.js');
-var hooks_UNSAFE_useTabbableMode = require('./hooks/UNSAFE_useTabbableMode.js');
-var classNames = require('./classNames-7f10ee6a.js');
-
-/**
- * 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: "_1hx7mch",
-  maxWidth: "_1fm0bgf",
-  inner: "qin7ge",
-  hover: "c4s6lu",
-  pseudohover: "lnafia"
-};
-const childrenStyles = "_16u1zj";
-
-exports.FilePicker = FilePicker;
-/*  */
-//# sourceMappingURL=FilePicker-cbd0e4cc.js.map