colibri-ui 0.8.84 → 0.8.86

package/Dropdown/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 var clsx = require('clsx');
 var react = require('@floating-ui/react');
@@ -10,112 +8,101 @@ var styles = require('./Dropdown.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var _toConsumableArray__default = /*#__PURE__*/_interopDefault(_toConsumableArray);
-var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
 var React__default = /*#__PURE__*/_interopDefault(React);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var Dropdown = function Dropdown(_ref) {
-  var children = _ref.children,
-    zIndex = _ref.zIndex,
-    fontSize = _ref.fontSize,
-    disabled = _ref.disabled,
-    _ref$defaultVisible = _ref.defaultVisible,
-    defaultVisible = _ref$defaultVisible === void 0 ? false : _ref$defaultVisible,
-    onVisibleChange = _ref.onVisibleChange,
-    overlay = _ref.overlay,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? "bottom-center" : _ref$placement,
-    _ref$strategy = _ref.strategy,
-    strategy = _ref$strategy === void 0 ? "absolute" : _ref$strategy,
-    _ref$trigger = _ref.trigger,
-    trigger = _ref$trigger === void 0 ? ["hover"] : _ref$trigger,
-    visibleProp = _ref.visible,
-    _ref$preventOverflow = _ref.preventOverflow,
-    preventOverflow = _ref$preventOverflow === void 0 ? false : _ref$preventOverflow,
-    _ref$preventAutoClose = _ref.preventAutoClose,
-    preventAutoClose = _ref$preventAutoClose === void 0 ? false : _ref$preventAutoClose,
-    _ref$flip = _ref.flip,
-    flipEnabled = _ref$flip === void 0 ? true : _ref$flip,
-    _ref$samewidth = _ref.samewidth,
-    samewidth = _ref$samewidth === void 0 ? false : _ref$samewidth;
+const Dropdown = ({
+  children,
+  zIndex,
+  fontSize,
+  disabled,
+  defaultVisible = false,
+  onVisibleChange,
+  overlay,
+  placement = "bottom-center",
+  strategy = "absolute",
+  trigger = ["hover"],
+  visible: visibleProp,
+  preventOverflow = false,
+  preventAutoClose = false,
+  flip: flipEnabled = true,
+  samewidth = false
+}) => {
   var _a;
-  var _useState = React.useState(defaultVisible),
-    _useState2 = _slicedToArray__default.default(_useState, 2),
-    internalVisible = _useState2[0],
-    setInternalVisible = _useState2[1];
-  var isControlled = visibleProp !== undefined;
-  var visible = isControlled ? visibleProp : internalVisible;
-  var isVisible = visible && !disabled;
-  var setOpen = React.useCallback(function (nextVisible) {
+  const [internalVisible, setInternalVisible] = React.useState(defaultVisible);
+  const isControlled = visibleProp !== undefined;
+  const visible = isControlled ? visibleProp : internalVisible;
+  const isVisible = visible && !disabled;
+  const setOpen = React.useCallback(nextVisible => {
     if (disabled && nextVisible) return;
     if (!isControlled) {
       setInternalVisible(nextVisible);
     }
     onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(nextVisible);
   }, [disabled, isControlled, onVisibleChange]);
-  var _useFloating = react.useFloating({
-      open: isVisible,
-      onOpenChange: setOpen,
-      placement: placement,
-      strategy: strategy,
-      whileElementsMounted: react.autoUpdate,
-      middleware: [react.offset(6)].concat(_toConsumableArray__default.default(flipEnabled ? [react.flip()] : []), _toConsumableArray__default.default(preventOverflow ? [react.shift()] : []))
-    }),
-    refs = _useFloating.refs,
-    floatingStyles = _useFloating.floatingStyles,
-    context = _useFloating.context,
-    update = _useFloating.update,
-    finalPlacement = _useFloating.placement;
-  var hover = react.useHover(context, {
+  const {
+    refs,
+    floatingStyles,
+    context,
+    update,
+    placement: finalPlacement
+  } = react.useFloating({
+    open: isVisible,
+    onOpenChange: setOpen,
+    placement,
+    strategy,
+    whileElementsMounted: react.autoUpdate,
+    middleware: [react.offset(6), ...(flipEnabled ? [react.flip()] : []), ...(preventOverflow ? [react.shift()] : [])]
+  });
+  const hover = react.useHover(context, {
     enabled: !disabled && trigger.includes("hover")
   });
-  var click = react.useClick(context, {
+  const click = react.useClick(context, {
     enabled: !disabled && trigger.includes("click")
   });
-  var focus = react.useFocus(context, {
+  const focus = react.useFocus(context, {
     enabled: !disabled && trigger.includes("focus")
   });
-  var dismiss = react.useDismiss(context, {
+  const dismiss = react.useDismiss(context, {
     outsidePress: false
   });
-  var role = react.useRole(context, {
+  const role = react.useRole(context, {
     role: "menu"
   });
-  var _useInteractions = react.useInteractions([hover, click, focus, dismiss, role]),
-    getReferenceProps = _useInteractions.getReferenceProps,
-    getFloatingProps = _useInteractions.getFloatingProps;
-  var isNotComponent = typeof children === "string";
-  var reference = React.useMemo(function () {
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = react.useInteractions([hover, click, focus, dismiss, role]);
+  const isNotComponent = typeof children === "string";
+  const reference = React.useMemo(() => {
     if (!children) return null;
     return React.Children.only(isNotComponent ? /*#__PURE__*/React__default.default.createElement("button", null, children) : children);
   }, [children, isNotComponent]);
-  var onClickOverlay = React.useCallback(function (event) {
+  const onClickOverlay = React.useCallback(event => {
     event.stopPropagation();
     if (!preventAutoClose) {
       setOpen(false);
     }
   }, [preventAutoClose, setOpen]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (update) update();
   }, [update, visible]);
   return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, reference && /*#__PURE__*/React__default.default.cloneElement(reference, Object.assign({
     ref: refs.setReference,
     tabIndex: 0
   }, getReferenceProps(reference.props))), isVisible && (/*#__PURE__*/React__default.default.createElement(react.FloatingPortal, null, /*#__PURE__*/React__default.default.createElement(index.ClickOutside, {
-    onClick: function onClick() {
-      return setOpen(false);
-    }
+    onClick: () => setOpen(false)
   }, /*#__PURE__*/React__default.default.createElement("div", Object.assign({
     ref: refs.setFloating,
     "data-testid": "popper-container",
-    className: clsx__default.default(styles__default.default["popper-container"], styles__default.default["placement-".concat(finalPlacement)]),
+    className: clsx__default.default(styles__default.default["popper-container"], styles__default.default[`placement-${finalPlacement}`]),
     style: Object.assign(Object.assign({}, floatingStyles), {
-      zIndex: zIndex,
-      minWidth: samewidth ? "".concat((_a = refs.reference.current) === null || _a === void 0 ? void 0 : _a.offsetWidth, "px") : undefined,
-      fontSize: "".concat(fontSize, "px")
+      zIndex,
+      minWidth: samewidth ? `${(_a = refs.reference.current) === null || _a === void 0 ? void 0 : _a.offsetWidth}px` : undefined,
+      fontSize: `${fontSize}px`
     }),
+    role: "menu",
     tabIndex: 0
   }, getFloatingProps()), /*#__PURE__*/React__default.default.createElement("div", {
     "data-testid": "overlay-container",

package/Dropzone/Dropzone.js

@@ -1,114 +1,77 @@
 'use strict';
 
-var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var tslib = require('tslib');
 var React = require('react');
 var styles = require('./Dropzone.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var _asyncToGenerator__default = /*#__PURE__*/_interopDefault(_asyncToGenerator);
-var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
-var _regeneratorRuntime__default = /*#__PURE__*/_interopDefault(_regeneratorRuntime);
 var React__default = /*#__PURE__*/_interopDefault(React);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var cx = function cx() {
-  for (var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++) {
-    classNames[_key] = arguments[_key];
-  }
-  return classNames.filter(Boolean).join(" ");
-};
-var toCssSize = function toCssSize(value, fallback) {
+const cx = (...classNames) => classNames.filter(Boolean).join(" ");
+const toCssSize = (value, fallback) => {
   if (value === undefined) return fallback;
-  return typeof value === "number" ? "".concat(value, "px") : value;
-};
-var UploadIcon = function UploadIcon() {
-  return /*#__PURE__*/React__default.default.createElement("svg", {
-    className: styles__default.default["default-icon"],
-    viewBox: "0 0 24 24",
-    "aria-hidden": "true",
-    focusable: "false"
-  }, /*#__PURE__*/React__default.default.createElement("path", {
-    d: "M11 14.6V5.8L7.7 9.1 6.3 7.7 12 2l5.7 5.7-1.4 1.4L13 5.8v8.8h-2ZM4 22a2 2 0 0 1-2-2v-5h2v5h16v-5h2v5a2 2 0 0 1-2 2H4Z"
-  }));
+  return typeof value === "number" ? `${value}px` : value;
 };
-var Dropzone = /*#__PURE__*/React.forwardRef(function DropzoneInput(_a, forwardedRef) {
-  var files = _a.files,
-    title = _a.title,
-    description = _a.description,
-    icon = _a.icon,
-    _a$iconPlacement = _a.iconPlacement,
-    iconPlacement = _a$iconPlacement === void 0 ? "left" : _a$iconPlacement,
-    _a$size = _a.size,
-    size = _a$size === void 0 ? "m" : _a$size,
-    _a$view = _a.view,
-    view = _a$view === void 0 ? "default" : _a$view,
-    _a$stretch = _a.stretch,
-    stretch = _a$stretch === void 0 ? false : _a$stretch,
-    width = _a.width,
-    height = _a.height,
-    _a$disabled = _a.disabled,
-    disabled = _a$disabled === void 0 ? false : _a$disabled,
-    accept = _a.accept,
-    _a$multiple = _a.multiple,
-    multiple = _a$multiple === void 0 ? false : _a$multiple,
-    validator = _a.validator,
-    className = _a.className,
-    style = _a.style,
-    onDrop = _a.onDrop,
-    onChoseFiles = _a.onChoseFiles,
-    _onChange = _a.onChange,
-    _onClick = _a.onClick,
-    onDragEnter = _a.onDragEnter,
-    onDragLeave = _a.onDragLeave,
-    onDragOver = _a.onDragOver,
+const UploadIcon = () => (/*#__PURE__*/React__default.default.createElement("svg", {
+  className: styles__default.default["default-icon"],
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  focusable: "false"
+}, /*#__PURE__*/React__default.default.createElement("path", {
+  d: "M11 14.6V5.8L7.7 9.1 6.3 7.7 12 2l5.7 5.7-1.4 1.4L13 5.8v8.8h-2ZM4 22a2 2 0 0 1-2-2v-5h2v5h16v-5h2v5a2 2 0 0 1-2 2H4Z"
+})));
+const Dropzone = /*#__PURE__*/React.forwardRef(function DropzoneInput(_a, forwardedRef) {
+  var {
+      files,
+      title,
+      description,
+      icon,
+      iconPlacement = "left",
+      size = "m",
+      view = "default",
+      stretch = false,
+      width,
+      height,
+      disabled = false,
+      accept,
+      multiple = false,
+      validator,
+      className,
+      style,
+      onDrop,
+      onChoseFiles,
+      onChange,
+      onClick,
+      onDragEnter,
+      onDragLeave,
+      onDragOver
+    } = _a,
     inputProps = tslib.__rest(_a, ["files", "title", "description", "icon", "iconPlacement", "size", "view", "stretch", "width", "height", "disabled", "accept", "multiple", "validator", "className", "style", "onDrop", "onChoseFiles", "onChange", "onClick", "onDragEnter", "onDragLeave", "onDragOver"]);
-  var inputRef = React.useRef(null);
-  var dragDepth = React.useRef(0);
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray__default.default(_useState, 2),
-    isActive = _useState2[0],
-    setIsActive = _useState2[1];
-  var _useState3 = React.useState([]),
-    _useState4 = _slicedToArray__default.default(_useState3, 2),
-    internalFiles = _useState4[0],
-    setInternalFiles = _useState4[1];
-  var currentFiles = files !== null && files !== void 0 ? files : internalFiles;
-  var setInputRef = function setInputRef(element) {
+  const inputRef = React.useRef(null);
+  const dragDepth = React.useRef(0);
+  const [isActive, setIsActive] = React.useState(false);
+  const [internalFiles, setInternalFiles] = React.useState([]);
+  const currentFiles = files !== null && files !== void 0 ? files : internalFiles;
+  const setInputRef = element => {
     inputRef.current = element;
     if (typeof forwardedRef === "function") forwardedRef(element);else if (forwardedRef) forwardedRef.current = element;
   };
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (inputRef.current) inputRef.current.value = "";
   }, [currentFiles]);
-  var validateFiles = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator__default.default(/*#__PURE__*/_regeneratorRuntime__default.default.mark(function _callee(rawFiles) {
-      var selectedFiles;
-      return _regeneratorRuntime__default.default.wrap(function (_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            selectedFiles = Array.from(rawFiles);
-            return _context.abrupt("return", validator ? validator(selectedFiles) : {
-              acceptedFiles: selectedFiles
-            });
-          case 1:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function validateFiles(_x) {
-      return _ref.apply(this, arguments);
+  const validateFiles = async rawFiles => {
+    const selectedFiles = Array.from(rawFiles);
+    return validator ? validator(selectedFiles) : {
+      acceptedFiles: selectedFiles
     };
-  }();
-  var openFileDialog = function openFileDialog() {
+  };
+  const openFileDialog = () => {
     var _a;
     if (!disabled) (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
   };
-  var handleDragEnter = function handleDragEnter(event) {
+  const handleDragEnter = event => {
     if (disabled) return;
     event.preventDefault();
     event.stopPropagation();
@@ -118,7 +81,7 @@ var Dropzone = /*#__PURE__*/React.forwardRef(function DropzoneInput(_a, forwarde
       onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(event);
     }
   };
-  var handleDragLeave = function handleDragLeave(event) {
+  const handleDragLeave = event => {
     if (disabled) return;
     event.preventDefault();
     event.stopPropagation();
@@ -128,53 +91,24 @@ var Dropzone = /*#__PURE__*/React.forwardRef(function DropzoneInput(_a, forwarde
       onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(event);
     }
   };
-  var handleDragOver = function handleDragOver(event) {
+  const handleDragOver = event => {
     if (disabled) return;
     event.preventDefault();
     event.dataTransfer.dropEffect = "copy";
     onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(event);
   };
-  var handleDrop = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator__default.default(/*#__PURE__*/_regeneratorRuntime__default.default.mark(function _callee2(event) {
-      var result;
-      return _regeneratorRuntime__default.default.wrap(function (_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            if (!disabled) {
-              _context2.next = 1;
-              break;
-            }
-            return _context2.abrupt("return");
-          case 1:
-            event.preventDefault();
-            event.stopPropagation();
-            dragDepth.current = 0;
-            setIsActive(false);
-            if (event.dataTransfer.files.length) {
-              _context2.next = 2;
-              break;
-            }
-            return _context2.abrupt("return");
-          case 2:
-            _context2.next = 3;
-            return validateFiles(event.dataTransfer.files);
-          case 3:
-            result = _context2.sent;
-            _context2.next = 4;
-            return onDrop === null || onDrop === void 0 ? void 0 : onDrop(result);
-          case 4:
-            event.dataTransfer.clearData();
-          case 5:
-          case "end":
-            return _context2.stop();
-        }
-      }, _callee2);
-    }));
-    return function handleDrop(_x2) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-  var rootStyle = Object.assign(Object.assign({}, style), {
+  const handleDrop = async event => {
+    if (disabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    dragDepth.current = 0;
+    setIsActive(false);
+    if (!event.dataTransfer.files.length) return;
+    const result = await validateFiles(event.dataTransfer.files);
+    await (onDrop === null || onDrop === void 0 ? void 0 : onDrop(result));
+    event.dataTransfer.clearData();
+  };
+  const rootStyle = Object.assign(Object.assign({}, style), {
     "--dropzone-width": stretch ? "100%" : toCssSize(width, "fit-content"),
     "--dropzone-height": stretch ? "100%" : toCssSize(height, "fit-content")
   });
@@ -184,13 +118,13 @@ var Dropzone = /*#__PURE__*/React.forwardRef(function DropzoneInput(_a, forwarde
     tabIndex: disabled ? -1 : 0,
     role: "button",
     "aria-disabled": disabled || undefined,
-    onClick: function onClick(event) {
+    onClick: event => {
       // A programmatic input.click() bubbles back to the root.
       if (event.target === inputRef.current) return;
-      _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
+      onClick === null || onClick === void 0 ? void 0 : onClick(event);
       if (!event.defaultPrevented) openFileDialog();
     },
-    onKeyDown: function onKeyDown(event) {
+    onKeyDown: event => {
       if (event.key === "Enter" || event.key === " ") {
         event.preventDefault();
         openFileDialog();
@@ -218,40 +152,16 @@ var Dropzone = /*#__PURE__*/React.forwardRef(function DropzoneInput(_a, forwarde
     multiple: multiple,
     disabled: disabled,
     tabIndex: -1,
-    onChange: function () {
-      var _onChange2 = _asyncToGenerator__default.default(/*#__PURE__*/_regeneratorRuntime__default.default.mark(function _callee3(event) {
-        var _a, input, result;
-        return _regeneratorRuntime__default.default.wrap(function (_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
-            case 0:
-              input = event.currentTarget;
-              _onChange === null || _onChange === void 0 ? void 0 : _onChange(event);
-              if (!(event.defaultPrevented || disabled || !((_a = input.files) === null || _a === void 0 ? void 0 : _a.length))) {
-                _context3.next = 1;
-                break;
-              }
-              return _context3.abrupt("return");
-            case 1:
-              _context3.next = 2;
-              return validateFiles(input.files);
-            case 2:
-              result = _context3.sent;
-              if (files === undefined) setInternalFiles(result.acceptedFiles);
-              _context3.next = 3;
-              return onChoseFiles === null || onChoseFiles === void 0 ? void 0 : onChoseFiles(result);
-            case 3:
-              input.value = "";
-            case 4:
-            case "end":
-              return _context3.stop();
-          }
-        }, _callee3);
-      }));
-      function onChange(_x3) {
-        return _onChange2.apply(this, arguments);
-      }
-      return onChange;
-    }()
+    onChange: async event => {
+      var _a;
+      const input = event.currentTarget;
+      onChange === null || onChange === void 0 ? void 0 : onChange(event);
+      if (event.defaultPrevented || disabled || !((_a = input.files) === null || _a === void 0 ? void 0 : _a.length)) return;
+      const result = await validateFiles(input.files);
+      if (files === undefined) setInternalFiles(result.acceptedFiles);
+      await (onChoseFiles === null || onChoseFiles === void 0 ? void 0 : onChoseFiles(result));
+      input.value = "";
+    }
   })));
 });
 

package/Dropzone/Dropzone.module.css

@@ -57,7 +57,8 @@
   justify-content: center;
   min-width: 0;
   pointer-events: none;
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
   width: 100%;
 }