@oracle/oraclejet-preact 14.0.0

package/es/UNSAFE_FilePicker.js

@@ -0,0 +1,609 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+import { _ as __rest } from './tslib.es6-8b94ba02.js';
+import { jsx } from 'preact/jsx-runtime';
+import { mergeProps } from './utils/UNSAFE_mergeProps.js';
+import { classNames } from './utils/UNSAFE_classNames.js';
+import { useTranslationBundle } from './hooks/UNSAFE_useTranslationBundle.js';
+import "./UNSAFE_FilePicker.css";
+import { Text } from './UNSAFE_Text.js';
+import { Spacer } from './UNSAFE_Spacer.js';
+import { sizeToCSS } from './utils/UNSAFE_size.js';
+import { trim } from './utils/UNSAFE_stringUtils.js';
+import { pickFiles } from './utils/UNSAFE_filePickerUtils.js';
+import { getClientHints } from './utils/PRIVATE_clientHints.js';
+import { usePress } from './hooks/UNSAFE_usePress.js';
+import { useHover } from './hooks/UNSAFE_useHover.js';
+import { useRef, useState, useImperativeHandle } from 'preact/hooks';
+import { useTabbableMode } from './hooks/UNSAFE_useTabbableMode.js';
+import './UNSAFE_Environment.js';
+import 'preact';
+import './UNSAFE_Layer.js';
+import 'preact/compat';
+import './utils/UNSAFE_mergeInterpolations.js';
+import './_curry1-d822c6e1.js';
+import './_curry3-ddab9fe1.js';
+import './_curry2-50442f66.js';
+import './_has-c4aaaf43.js';
+import './utils/UNSAFE_interpolations/dimensions.js';
+import './utils/UNSAFE_arrayUtils.js';
+import './utils/UNSAFE_interpolations/flexitem.js';
+import './keys-fed67954.js';
+import './hooks/UNSAFE_useToggle.js';
+
+/**
+ * Gets the default content of the file picker
+ */
+const getDefaultTriggerContent = (isDisabled, primaryText, secondaryText, translations, selectionMode) => {
+    return [
+        jsx(Text, Object.assign({ variant: isDisabled ? 'disabled' : 'primary', weight: "bold", size: "xl" }, { children: getPrimaryText(primaryText, translations) })),
+        jsx(Spacer, { height: "1.5x" }),
+        jsx(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 ? 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 === 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 } = usePress(callback);
+    const dragAndDropProps = useDragAndDropEvents(props.accept, props.selectionMode, fireRejectAction, handleFilesAdded, rootRef, props.translations, props.onCommit, props.onReject, setValidity);
+    const { hoverProps, isHover } = 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();
+            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 = 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 === 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 = __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 = useTranslationBundle('@oracle/oraclejet-preact');
+  const props = Object.assign({
+    capture,
+    selectionMode,
+    translations
+  }, otherProps);
+
+  if (isDisabled) {
+    return jsx(DisabledFilePicker, Object.assign({}, props, {
+      children: children
+    }));
+  }
+
+  return children ? jsx(CustomFilePicker, Object.assign({
+    testHandlersRef: testHandlersRef
+  }, props, {
+    children: children
+  })) : jsx(DefaultFilePicker, Object.assign({
+    testHandlersRef: testHandlersRef
+  }, props));
+}
+/**
+ * The default file picker element.
+ */
+
+const DefaultFilePicker = props => {
+  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' ? 'oj-c-valid-drop' : validity === 'invalid' ? 'oj-c-invalid-drop' : '';
+  const rootRef = useRef(null);
+  const {
+    validation,
+    dragAndDropProps,
+    pressProps,
+    isHover,
+    hoverProps
+  } = useFilepickerElementHelper(props, rootRef, setValidity);
+  const mergedEventProps = mergeProps(pressProps, hoverProps); // These are backdoor handles that are used for testing purposes only
+
+  useSetupTestRef(dragAndDropProps, validation, props.testHandlersRef || null);
+  const classes = classNames([styles.base, props.width === undefined && styles.maxWidth, isHover && styles.hover]);
+  const {
+    isTabbable
+  } = useTabbableMode();
+  const {
+    accessibleLabel,
+    primaryText,
+    secondaryText,
+    translations,
+    selectionMode,
+    width,
+    height
+  } = props;
+  return 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: jsx("div", Object.assign({
+      class: classNames([styles.inner, validityClass])
+    }, dragAndDropProps, {
+      children: getDefaultTriggerContent(false, primaryText, secondaryText, translations, selectionMode)
+    }))
+  }));
+};
+
+const childrenContainer = children => {
+  return jsx("div", Object.assign({
+    className: childrenStyles
+  }, {
+    children: children
+  }));
+};
+/**
+ * The disabled file picker element.
+ */
+
+
+const DisabledFilePicker = ({
+  children,
+  accessibleLabel,
+  primaryText,
+  secondaryText,
+  translations,
+  selectionMode,
+  width,
+  height
+}) => {
+  return jsx("div", Object.assign({
+    class: 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 = useRef(null);
+  const {
+    validation,
+    dragAndDropProps,
+    pressProps,
+    isHover,
+    hoverProps
+  } = useFilepickerElementHelper(props, rootRef);
+  const mergedEventProps = mergeProps(pressProps, dragAndDropProps, hoverProps); // These are backdoor handles that are used for testing purposes only
+
+  useSetupTestRef(dragAndDropProps, validation, props.testHandlersRef || null);
+  const classes = classNames([styles.base, props.width === undefined && styles.maxWidth, isHover && styles.hover]);
+  const {
+    accessibleLabel,
+    translations,
+    selectionMode
+  } = props;
+  const {
+    isTabbable
+  } = useTabbableMode();
+  return 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) => {
+  useImperativeHandle(testHandlersRef, () => ({
+    onDragEnter: dragAndDropProps.onDragEnter,
+    onDragOver: dragAndDropProps.onDragOver,
+    onDrop: dragAndDropProps.onDrop,
+    onDragLeave: dragAndDropProps.onDragLeave,
+    onClickSelected: validation
+  }));
+};
+
+const styles = {
+  base: "_1se59pf",
+  maxWidth: "_5aps6r",
+  inner: "eymx28",
+  hover: "_9ek423",
+  pseudohover: "_1fp36um"
+};
+const childrenStyles = "_16bemnh";
+
+export { FilePicker };
+/*  */
+//# sourceMappingURL=UNSAFE_FilePicker.js.map