@os-design/upload 1.0.154 → 1.0.156

package/dist/cjs/ImageUpload/index.js

@@ -5,23 +5,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.Overlay = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _reactDropzone = require("react-dropzone");
+var _react = require("@emotion/react");
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
-var _react2 = require("@emotion/react");
-
 var _core = require("@os-design/core");
 
 var _icons = require("@os-design/icons");
 
 var _styles = require("@os-design/styles");
 
+var _theming = require("@os-design/theming");
+
 var _utils = require("@os-design/utils");
 
-var _theming = require("@os-design/theming");
+var _react2 = _interopRequireWildcard(require("react"));
+
+var _reactDropzone = require("react-dropzone");
 
 var _defaultLocale = _interopRequireDefault(require("./utils/defaultLocale"));
 
@@ -29,12 +29,12 @@ var _excluded = ["url", "accept", "locale", "value", "defaultValue", "onChange",
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
@@ -58,11 +58,11 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 var overlayHasImageStyles = function overlayHasImageStyles(p) {
-  return p.hasImage && (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: hsla(0, 0%, 0%, ", ");\n    color: hsl(0, 0%, 100%);\n  "])), p.theme.imageUploadOverlayOpacity);
+  return p.hasImage && (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: hsla(0, 0%, 0%, ", ");\n    color: hsl(0, 0%, 100%);\n  "])), p.theme.imageUploadOverlayOpacity);
 };
 
 var overlayHasImageHoverStyles = function overlayHasImageHoverStyles(p) {
-  return p.hasImage && !p.isDragActive && (0, _react2.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    @media (hover: hover) {\n      opacity: 0;\n\n      &:hover {\n        opacity: 1;\n      }\n    }\n  "])));
+  return p.hasImage && !p.isDragActive && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    @media (hover: hover) {\n      opacity: 0;\n\n      &:hover {\n        opacity: 1;\n      }\n    }\n  "])));
 };
 
 var Overlay = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('isDragActive', 'hasImage'))(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  text-align: center;\n  padding: ", "em;\n\n  ", ";\n  ", "\n  ", ";\n"])), _styles.resetFocusStyles, function (p) {
@@ -71,7 +71,7 @@ var Overlay = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('isDra
 exports.Overlay = Overlay;
 
 var contentIsDragActiveStyles = function contentIsDragActiveStyles(p) {
-  return p.isDragActive && (0, _react2.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    transform: scale(0.92);\n  "])));
+  return p.isDragActive && (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    transform: scale(0.92);\n  "])));
 };
 
 var Content = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('isDragActive'))(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", ";\n  ", ";\n"])), contentIsDragActiveStyles, (0, _styles.transitionStyles)('transform'));
@@ -82,19 +82,19 @@ var Title = _styled["default"].div(_templateObject7 || (_templateObject7 = _tagg
 var DeleteButtonContainer = _styled["default"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0.5em;\n  right: 0.5em;\n"])));
 
 var hoverStyles = function hoverStyles(p) {
-  return (0, _react2.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  border-color: ", ";\n"])), (0, _theming.clr)(p.theme.imageUploadNoImageHoverColorBorder));
+  return (0, _react.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  border-color: ", ";\n"])), (0, _theming.clr)(p.theme.imageUploadNoImageHoverColorBorder));
 };
 
 var notHasImageStyles = function notHasImageStyles(p) {
-  return !p.hasImage && (0, _react2.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border: 2px dashed ", ";\n\n    @media (hover: hover) {\n      &:hover {\n        ", ";\n      }\n    }\n  "])), (0, _theming.clr)(p.theme.imageUploadNoImageColorBg), (0, _theming.clr)(p.theme.imageUploadNoImageColorBorder), hoverStyles(p));
+  return !p.hasImage && (0, _react.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border: 2px dashed ", ";\n\n    @media (hover: hover) {\n      &:hover {\n        ", ";\n      }\n    }\n  "])), (0, _theming.clr)(p.theme.imageUploadNoImageColorBg), (0, _theming.clr)(p.theme.imageUploadNoImageColorBorder), hoverStyles(p));
 };
 
 var focusStyles = function focusStyles(p) {
-  return (0, _react2.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  &:focus-within {\n    & > div {\n      opacity: 1;\n    }\n    ", ";\n  }\n"])), hoverStyles(p));
+  return (0, _react.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  &:focus-within {\n    & > div {\n      opacity: 1;\n    }\n    ", ";\n  }\n"])), hoverStyles(p));
 };
 
 var isDragActiveStyles = function isDragActiveStyles(p) {
-  return p.isDragActive && (0, _react2.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    ", ";\n  "])), hoverStyles(p));
+  return p.isDragActive && (0, _react.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    ", ";\n  "])), hoverStyles(p));
 };
 
 var LocalImage = _styled["default"].img(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  width: 100%;\n  vertical-align: top;\n"])));
@@ -113,7 +113,7 @@ var Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('isD
  * The component to upload an image.
  */
 
-var ImageUpload = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var ImageUpload = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
   var url = _ref.url,
       _ref$accept = _ref.accept,
       accept = _ref$accept === void 0 ? {
@@ -127,7 +127,7 @@ var ImageUpload = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       size = _ref.size,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var touchDevice = (0, _react.useMemo)(function () {
+  var touchDevice = (0, _react2.useMemo)(function () {
     return (0, _utils.isTouchDevice)();
   }, []);
 
@@ -154,7 +154,7 @@ var ImageUpload = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       getInputProps = _useDropzone.getInputProps,
       isDragActive = _useDropzone.isDragActive;
 
-  var source = (0, _react.useMemo)(function () {
+  var source = (0, _react2.useMemo)(function () {
     if (forwardedValue === null) return null; // If the user select an image
 
     if (forwardedValue) return URL.createObjectURL(forwardedValue); // If the image already exists
@@ -162,23 +162,23 @@ var ImageUpload = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     if (url) return url;
     return null;
   }, [forwardedValue, url]);
-  var hasImage = (0, _react.useMemo)(function () {
+  var hasImage = (0, _react2.useMemo)(function () {
     return !!source;
   }, [source]);
-  var renderImage = (0, _react.useCallback)(function () {
+  var renderImage = (0, _react2.useCallback)(function () {
     if (!source) return null;
 
     if (_typeof(forwardedValue) === 'object' && forwardedValue !== null) {
-      return /*#__PURE__*/_react["default"].createElement(LocalImage, {
+      return /*#__PURE__*/_react2["default"].createElement(LocalImage, {
         src: source
       });
     }
 
-    return /*#__PURE__*/_react["default"].createElement(RemoteImage, {
+    return /*#__PURE__*/_react2["default"].createElement(RemoteImage, {
       url: source
     });
   }, [forwardedValue, source]);
-  return /*#__PURE__*/_react["default"].createElement(Container, _extends({
+  return /*#__PURE__*/_react2["default"].createElement(Container, _extends({
     isDragActive: isDragActive,
     hasImage: hasImage,
     size: size,
@@ -187,7 +187,7 @@ var ImageUpload = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }
   }, rest, {
     ref: ref
-  }), /*#__PURE__*/_react["default"].createElement("input", getInputProps()), renderImage(), /*#__PURE__*/_react["default"].createElement(Overlay, _extends({
+  }), /*#__PURE__*/_react2["default"].createElement("input", getInputProps()), renderImage(), /*#__PURE__*/_react2["default"].createElement(Overlay, _extends({
     isDragActive: isDragActive,
     hasImage: hasImage
   }, getRootProps({
@@ -195,21 +195,21 @@ var ImageUpload = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       if (e.key === 'Backspace') setForwardedValue(null);
     }
   }) // eslint-disable-line @typescript-eslint/no-explicit-any
-  ), /*#__PURE__*/_react["default"].createElement(Content, {
+  ), /*#__PURE__*/_react2["default"].createElement(Content, {
     isDragActive: isDragActive
-  }, /*#__PURE__*/_react["default"].createElement(PictureIcon, null), /*#__PURE__*/_react["default"].createElement(Title, null, touchDevice ? locale.touchTitle : locale.dropTitle)), hasImage && /*#__PURE__*/_react["default"].createElement(_theming.ThemeOverrider, {
+  }, /*#__PURE__*/_react2["default"].createElement(PictureIcon, null), /*#__PURE__*/_react2["default"].createElement(Title, null, touchDevice ? locale.touchTitle : locale.dropTitle)), hasImage && /*#__PURE__*/_react2["default"].createElement(_theming.ThemeOverrider, {
     overrides: {
       buttonGhostColorText: [0, 0, 100],
       buttonGhostColorBgHover: [0, 0, 100, 0.1]
     }
-  }, /*#__PURE__*/_react["default"].createElement(DeleteButtonContainer, null, /*#__PURE__*/_react["default"].createElement(_core.Button, {
+  }, /*#__PURE__*/_react2["default"].createElement(DeleteButtonContainer, null, /*#__PURE__*/_react2["default"].createElement(_core.Button, {
     type: "ghost",
     wide: "never",
     onClick: function onClick(e) {
       setForwardedValue(null);
       e.stopPropagation();
     }
-  }, /*#__PURE__*/_react["default"].createElement(_icons.Delete, null))))));
+  }, /*#__PURE__*/_react2["default"].createElement(_icons.Delete, null))))));
 });
 ImageUpload.displayName = 'ImageUpload';
 var _default = ImageUpload;

package/dist/cjs/ImageUpload/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["overlayHasImageStyles","p","hasImage","css","theme","imageUploadOverlayOpacity","overlayHasImageHoverStyles","isDragActive","Overlay","styled","omitEmotionProps","resetFocusStyles","imageUploadOverlayPadding","transitionStyles","contentIsDragActiveStyles","Content","PictureIcon","Picture","Title","div","DeleteButtonContainer","hoverStyles","clr","imageUploadNoImageHoverColorBorder","notHasImageStyles","imageUploadNoImageColorBg","imageUploadNoImageColorBorder","focusStyles","isDragActiveStyles","LocalImage","img","RemoteImage","Image","Container","imageUploadMaxWidth","imageUploadMinHeight","borderRadius","colorText","sizeStyles","ImageUpload","forwardRef","ref","url","accept","locale","defaultLocale","value","defaultValue","onChange","size","rest","touchDevice","useMemo","isTouchDevice","useForwardedState","forwardedValue","setForwardedValue","useDropzone","multiple","onDrop","file","getRootProps","getInputProps","source","URL","createObjectURL","renderImage","useCallback","e","preventDefault","onKeyDown","key","touchTitle","dropTitle","buttonGhostColorText","buttonGhostColorBgHover","stopPropagation","displayName"],"sources":["../../../src/ImageUpload/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport { useDropzone, Accept } from 'react-dropzone';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\nimport { Button, Image } from '@os-design/core';\nimport { Delete, Picture } from '@os-design/icons';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport {\n  omitEmotionProps,\n  isTouchDevice,\n  useForwardedState,\n} from '@os-design/utils';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport defaultLocale, { ImageUploadLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface ImageUploadProps extends JsxDivProps, WithSize {\n  /**\n   * The url of the image.\n   * @default undefined\n   */\n  url?: string;\n  /**\n   * Allowed image formats.\n   * @default undefined\n   */\n  accept?: Accept;\n  /**\n   * The locale of the component.\n   * @default undefined\n   */\n  locale?: ImageUploadLocale;\n  /**\n   * The selected local file, or null if the image is marked as deleted.\n   * @default undefined\n   */\n  value?: File | null;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: File | null;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: File | null) => void;\n}\n\nconst overlayHasImageStyles = (p) =>\n  p.hasImage &&\n  css`\n    background-color: hsla(0, 0%, 0%, ${p.theme.imageUploadOverlayOpacity});\n    color: hsl(0, 0%, 100%);\n  `;\n\nconst overlayHasImageHoverStyles = (p) =>\n  p.hasImage &&\n  !p.isDragActive &&\n  css`\n    @media (hover: hover) {\n      opacity: 0;\n\n      &:hover {\n        opacity: 1;\n      }\n    }\n  `;\n\ninterface OverlayProps {\n  isDragActive: boolean;\n  hasImage: boolean;\n}\nexport const Overlay = styled(\n  'div',\n  omitEmotionProps('isDragActive', 'hasImage')\n)<OverlayProps>`\n  ${resetFocusStyles};\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  text-align: center;\n  padding: ${(p) => p.theme.imageUploadOverlayPadding}em;\n\n  ${overlayHasImageStyles};\n  ${overlayHasImageHoverStyles}\n  ${transitionStyles('opacity')};\n`;\n\nconst contentIsDragActiveStyles = (p) =>\n  p.isDragActive &&\n  css`\n    transform: scale(0.92);\n  `;\n\ntype ContentProps = Pick<OverlayProps, 'isDragActive'>;\nconst Content = styled('div', omitEmotionProps('isDragActive'))<ContentProps>`\n  ${contentIsDragActiveStyles};\n  ${transitionStyles('transform')};\n`;\n\nconst PictureIcon = styled(Picture)`\n  opacity: 0.8;\n  font-size: 2.5em;\n`;\n\nconst Title = styled.div`\n  opacity: 0.8;\n`;\n\nconst DeleteButtonContainer = styled.div`\n  position: absolute;\n  top: 0.5em;\n  right: 0.5em;\n`;\n\nconst hoverStyles = (p) => css`\n  border-color: ${clr(p.theme.imageUploadNoImageHoverColorBorder)};\n`;\n\nconst notHasImageStyles = (p) =>\n  !p.hasImage &&\n  css`\n    background-color: ${clr(p.theme.imageUploadNoImageColorBg)};\n    border: 2px dashed ${clr(p.theme.imageUploadNoImageColorBorder)};\n\n    @media (hover: hover) {\n      &:hover {\n        ${hoverStyles(p)};\n      }\n    }\n  `;\n\nconst focusStyles = (p) => css`\n  &:focus-within {\n    & > div {\n      opacity: 1;\n    }\n    ${hoverStyles(p)};\n  }\n`;\n\nconst isDragActiveStyles = (p) =>\n  p.isDragActive &&\n  css`\n    ${hoverStyles(p)};\n  `;\n\nconst LocalImage = styled.img`\n  width: 100%;\n  vertical-align: top;\n`;\n\nconst RemoteImage = styled(Image)`\n  vertical-align: top;\n`;\n\ninterface ContainerProps extends WithSize {\n  isDragActive: boolean;\n  hasImage: boolean;\n}\n\nconst Container = styled(\n  'div',\n  omitEmotionProps('isDragActive', 'hasImage', 'size')\n)<ContainerProps>`\n  position: relative;\n  cursor: pointer;\n  overflow: hidden;\n  box-sizing: border-box;\n\n  max-width: ${(p) => p.theme.imageUploadMaxWidth}em;\n  min-height: ${(p) => p.theme.imageUploadMinHeight}em;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  color: ${(p) => clr(p.theme.colorText)};\n\n  ${notHasImageStyles};\n  ${focusStyles};\n  ${isDragActiveStyles};\n  ${sizeStyles};\n  ${transitionStyles('border')};\n`;\n\n/**\n * The component to upload an image.\n */\nconst ImageUpload = forwardRef<HTMLDivElement, ImageUploadProps>(\n  (\n    {\n      url,\n      accept = { 'image/*': ['.jpeg', '.png', '.webp'] },\n      locale = defaultLocale,\n      value,\n      defaultValue,\n      onChange,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const touchDevice = useMemo(() => isTouchDevice(), []);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const { getRootProps, getInputProps, isDragActive } = useDropzone({\n      accept,\n      multiple: false,\n      onDrop: ([file]) => setForwardedValue(file),\n    });\n\n    const source = useMemo(() => {\n      if (forwardedValue === null) return null; // If the user select an image\n      if (forwardedValue) return URL.createObjectURL(forwardedValue); // If the image already exists\n      if (url) return url;\n      return null;\n    }, [forwardedValue, url]);\n\n    const hasImage = useMemo(() => !!source, [source]);\n\n    const renderImage = useCallback(() => {\n      if (!source) return null;\n      if (typeof forwardedValue === 'object' && forwardedValue !== null) {\n        return <LocalImage src={source} />;\n      }\n      return <RemoteImage url={source} />;\n    }, [forwardedValue, source]);\n\n    return (\n      <Container\n        isDragActive={isDragActive}\n        hasImage={hasImage}\n        size={size}\n        onMouseDown={(e) => e.preventDefault()}\n        {...rest}\n        ref={ref}\n      >\n        <input {...getInputProps()} />\n        {renderImage()}\n\n        <Overlay\n          isDragActive={isDragActive}\n          hasImage={hasImage}\n          {\n            ...getRootProps({\n              onKeyDown: (e) => {\n                if (e.key === 'Backspace') setForwardedValue(null);\n              },\n            } as any) // eslint-disable-line @typescript-eslint/no-explicit-any\n          }\n        >\n          <Content isDragActive={isDragActive}>\n            <PictureIcon />\n            <Title>{touchDevice ? locale.touchTitle : locale.dropTitle}</Title>\n          </Content>\n\n          {hasImage && (\n            <ThemeOverrider\n              overrides={{\n                buttonGhostColorText: [0, 0, 100],\n                buttonGhostColorBgHover: [0, 0, 100, 0.1],\n              }}\n            >\n              <DeleteButtonContainer>\n                <Button\n                  type='ghost'\n                  wide='never'\n                  onClick={(e) => {\n                    setForwardedValue(null);\n                    e.stopPropagation();\n                  }}\n                >\n                  <Delete />\n                </Button>\n              </DeleteButtonContainer>\n            </ThemeOverrider>\n          )}\n        </Overlay>\n      </Container>\n    );\n  }\n);\n\nImageUpload.displayName = 'ImageUpload';\n\nexport default ImageUpload;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["overlayHasImageStyles","p","hasImage","css","theme","imageUploadOverlayOpacity","overlayHasImageHoverStyles","isDragActive","Overlay","styled","omitEmotionProps","resetFocusStyles","imageUploadOverlayPadding","transitionStyles","contentIsDragActiveStyles","Content","PictureIcon","Picture","Title","div","DeleteButtonContainer","hoverStyles","clr","imageUploadNoImageHoverColorBorder","notHasImageStyles","imageUploadNoImageColorBg","imageUploadNoImageColorBorder","focusStyles","isDragActiveStyles","LocalImage","img","RemoteImage","Image","Container","imageUploadMaxWidth","imageUploadMinHeight","borderRadius","colorText","sizeStyles","ImageUpload","forwardRef","ref","url","accept","locale","defaultLocale","value","defaultValue","onChange","size","rest","touchDevice","useMemo","isTouchDevice","useForwardedState","forwardedValue","setForwardedValue","useDropzone","multiple","onDrop","file","getRootProps","getInputProps","source","URL","createObjectURL","renderImage","useCallback","e","preventDefault","onKeyDown","key","touchTitle","dropTitle","buttonGhostColorText","buttonGhostColorBgHover","stopPropagation","displayName"],"sources":["../../../src/ImageUpload/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Button, Image } from '@os-design/core';\nimport { Delete, Picture } from '@os-design/icons';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport {\n  isTouchDevice,\n  omitEmotionProps,\n  useForwardedState,\n} from '@os-design/utils';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\nimport { Accept, useDropzone } from 'react-dropzone';\nimport defaultLocale, { ImageUploadLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface ImageUploadProps extends JsxDivProps, WithSize {\n  /**\n   * The url of the image.\n   * @default undefined\n   */\n  url?: string;\n  /**\n   * Allowed image formats.\n   * @default undefined\n   */\n  accept?: Accept;\n  /**\n   * The locale of the component.\n   * @default undefined\n   */\n  locale?: ImageUploadLocale;\n  /**\n   * The selected local file, or null if the image is marked as deleted.\n   * @default undefined\n   */\n  value?: File | null;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: File | null;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: File | null) => void;\n}\n\nconst overlayHasImageStyles = (p) =>\n  p.hasImage &&\n  css`\n    background-color: hsla(0, 0%, 0%, ${p.theme.imageUploadOverlayOpacity});\n    color: hsl(0, 0%, 100%);\n  `;\n\nconst overlayHasImageHoverStyles = (p) =>\n  p.hasImage &&\n  !p.isDragActive &&\n  css`\n    @media (hover: hover) {\n      opacity: 0;\n\n      &:hover {\n        opacity: 1;\n      }\n    }\n  `;\n\ninterface OverlayProps {\n  isDragActive: boolean;\n  hasImage: boolean;\n}\nexport const Overlay = styled(\n  'div',\n  omitEmotionProps('isDragActive', 'hasImage')\n)<OverlayProps>`\n  ${resetFocusStyles};\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  text-align: center;\n  padding: ${(p) => p.theme.imageUploadOverlayPadding}em;\n\n  ${overlayHasImageStyles};\n  ${overlayHasImageHoverStyles}\n  ${transitionStyles('opacity')};\n`;\n\nconst contentIsDragActiveStyles = (p) =>\n  p.isDragActive &&\n  css`\n    transform: scale(0.92);\n  `;\n\ntype ContentProps = Pick<OverlayProps, 'isDragActive'>;\nconst Content = styled('div', omitEmotionProps('isDragActive'))<ContentProps>`\n  ${contentIsDragActiveStyles};\n  ${transitionStyles('transform')};\n`;\n\nconst PictureIcon = styled(Picture)`\n  opacity: 0.8;\n  font-size: 2.5em;\n`;\n\nconst Title = styled.div`\n  opacity: 0.8;\n`;\n\nconst DeleteButtonContainer = styled.div`\n  position: absolute;\n  top: 0.5em;\n  right: 0.5em;\n`;\n\nconst hoverStyles = (p) => css`\n  border-color: ${clr(p.theme.imageUploadNoImageHoverColorBorder)};\n`;\n\nconst notHasImageStyles = (p) =>\n  !p.hasImage &&\n  css`\n    background-color: ${clr(p.theme.imageUploadNoImageColorBg)};\n    border: 2px dashed ${clr(p.theme.imageUploadNoImageColorBorder)};\n\n    @media (hover: hover) {\n      &:hover {\n        ${hoverStyles(p)};\n      }\n    }\n  `;\n\nconst focusStyles = (p) => css`\n  &:focus-within {\n    & > div {\n      opacity: 1;\n    }\n    ${hoverStyles(p)};\n  }\n`;\n\nconst isDragActiveStyles = (p) =>\n  p.isDragActive &&\n  css`\n    ${hoverStyles(p)};\n  `;\n\nconst LocalImage = styled.img`\n  width: 100%;\n  vertical-align: top;\n`;\n\nconst RemoteImage = styled(Image)`\n  vertical-align: top;\n`;\n\ninterface ContainerProps extends WithSize {\n  isDragActive: boolean;\n  hasImage: boolean;\n}\n\nconst Container = styled(\n  'div',\n  omitEmotionProps('isDragActive', 'hasImage', 'size')\n)<ContainerProps>`\n  position: relative;\n  cursor: pointer;\n  overflow: hidden;\n  box-sizing: border-box;\n\n  max-width: ${(p) => p.theme.imageUploadMaxWidth}em;\n  min-height: ${(p) => p.theme.imageUploadMinHeight}em;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  color: ${(p) => clr(p.theme.colorText)};\n\n  ${notHasImageStyles};\n  ${focusStyles};\n  ${isDragActiveStyles};\n  ${sizeStyles};\n  ${transitionStyles('border')};\n`;\n\n/**\n * The component to upload an image.\n */\nconst ImageUpload = forwardRef<HTMLDivElement, ImageUploadProps>(\n  (\n    {\n      url,\n      accept = { 'image/*': ['.jpeg', '.png', '.webp'] },\n      locale = defaultLocale,\n      value,\n      defaultValue,\n      onChange,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const touchDevice = useMemo(() => isTouchDevice(), []);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const { getRootProps, getInputProps, isDragActive } = useDropzone({\n      accept,\n      multiple: false,\n      onDrop: ([file]) => setForwardedValue(file),\n    });\n\n    const source = useMemo(() => {\n      if (forwardedValue === null) return null; // If the user select an image\n      if (forwardedValue) return URL.createObjectURL(forwardedValue); // If the image already exists\n      if (url) return url;\n      return null;\n    }, [forwardedValue, url]);\n\n    const hasImage = useMemo(() => !!source, [source]);\n\n    const renderImage = useCallback(() => {\n      if (!source) return null;\n      if (typeof forwardedValue === 'object' && forwardedValue !== null) {\n        return <LocalImage src={source} />;\n      }\n      return <RemoteImage url={source} />;\n    }, [forwardedValue, source]);\n\n    return (\n      <Container\n        isDragActive={isDragActive}\n        hasImage={hasImage}\n        size={size}\n        onMouseDown={(e) => e.preventDefault()}\n        {...rest}\n        ref={ref}\n      >\n        <input {...getInputProps()} />\n        {renderImage()}\n\n        <Overlay\n          isDragActive={isDragActive}\n          hasImage={hasImage}\n          {\n            ...getRootProps({\n              onKeyDown: (e) => {\n                if (e.key === 'Backspace') setForwardedValue(null);\n              },\n            } as any) // eslint-disable-line @typescript-eslint/no-explicit-any\n          }\n        >\n          <Content isDragActive={isDragActive}>\n            <PictureIcon />\n            <Title>{touchDevice ? locale.touchTitle : locale.dropTitle}</Title>\n          </Content>\n\n          {hasImage && (\n            <ThemeOverrider\n              overrides={{\n                buttonGhostColorText: [0, 0, 100],\n                buttonGhostColorBgHover: [0, 0, 100, 0.1],\n              }}\n            >\n              <DeleteButtonContainer>\n                <Button\n                  type='ghost'\n                  wide='never'\n                  onClick={(e) => {\n                    setForwardedValue(null);\n                    e.stopPropagation();\n                  }}\n                >\n                  <Delete />\n                </Button>\n              </DeleteButtonContainer>\n            </ThemeOverrider>\n          )}\n        </Overlay>\n      </Container>\n    );\n  }\n);\n\nImageUpload.displayName = 'ImageUpload';\n\nexport default ImageUpload;\n"],"mappings":"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"}

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["export { default as ImageUpload } from './ImageUpload';\nexport { default as ImageUploadSkeleton } from './ImageUploadSkeleton';\n\nexport * from './ImageUpload';\nexport * from './ImageUploadSkeleton';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAGA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAFA;;AAGA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["export * from './ImageUpload';\nexport { default as ImageUpload } from './ImageUpload';\nexport * from './ImageUploadSkeleton';\nexport { default as ImageUploadSkeleton } from './ImageUploadSkeleton';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/dist/esm/ImageUpload/index.js

@@ -1,14 +1,14 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { forwardRef, useCallback, useMemo } from 'react';
-import { useDropzone } from 'react-dropzone';
-import styled from '@emotion/styled';
 import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { Button, Image } from '@os-design/core';
 import { Delete, Picture } from '@os-design/icons';
 import { resetFocusStyles, sizeStyles, transitionStyles } from '@os-design/styles';
-import { omitEmotionProps, isTouchDevice, useForwardedState } from '@os-design/utils';
 import { clr, ThemeOverrider } from '@os-design/theming';
+import { isTouchDevice, omitEmotionProps, useForwardedState } from '@os-design/utils';
+import React, { forwardRef, useCallback, useMemo } from 'react';
+import { useDropzone } from 'react-dropzone';
 import defaultLocale from './utils/defaultLocale';
 
 const overlayHasImageStyles = p => p.hasImage && css`

package/dist/esm/ImageUpload/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","useMemo","useDropzone","styled","css","Button","Image","Delete","Picture","resetFocusStyles","sizeStyles","transitionStyles","omitEmotionProps","isTouchDevice","useForwardedState","clr","ThemeOverrider","defaultLocale","overlayHasImageStyles","p","hasImage","theme","imageUploadOverlayOpacity","overlayHasImageHoverStyles","isDragActive","Overlay","imageUploadOverlayPadding","contentIsDragActiveStyles","Content","PictureIcon","Title","div","DeleteButtonContainer","hoverStyles","imageUploadNoImageHoverColorBorder","notHasImageStyles","imageUploadNoImageColorBg","imageUploadNoImageColorBorder","focusStyles","isDragActiveStyles","LocalImage","img","RemoteImage","Container","imageUploadMaxWidth","imageUploadMinHeight","borderRadius","colorText","ImageUpload","url","accept","locale","value","defaultValue","onChange","size","rest","ref","touchDevice","forwardedValue","setForwardedValue","getRootProps","getInputProps","multiple","onDrop","file","source","URL","createObjectURL","renderImage","e","preventDefault","onKeyDown","key","touchTitle","dropTitle","buttonGhostColorText","buttonGhostColorBgHover","stopPropagation","displayName"],"sources":["../../../src/ImageUpload/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport { useDropzone, Accept } from 'react-dropzone';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\nimport { Button, Image } from '@os-design/core';\nimport { Delete, Picture } from '@os-design/icons';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport {\n  omitEmotionProps,\n  isTouchDevice,\n  useForwardedState,\n} from '@os-design/utils';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport defaultLocale, { ImageUploadLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface ImageUploadProps extends JsxDivProps, WithSize {\n  /**\n   * The url of the image.\n   * @default undefined\n   */\n  url?: string;\n  /**\n   * Allowed image formats.\n   * @default undefined\n   */\n  accept?: Accept;\n  /**\n   * The locale of the component.\n   * @default undefined\n   */\n  locale?: ImageUploadLocale;\n  /**\n   * The selected local file, or null if the image is marked as deleted.\n   * @default undefined\n   */\n  value?: File | null;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: File | null;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: File | null) => void;\n}\n\nconst overlayHasImageStyles = (p) =>\n  p.hasImage &&\n  css`\n    background-color: hsla(0, 0%, 0%, ${p.theme.imageUploadOverlayOpacity});\n    color: hsl(0, 0%, 100%);\n  `;\n\nconst overlayHasImageHoverStyles = (p) =>\n  p.hasImage &&\n  !p.isDragActive &&\n  css`\n    @media (hover: hover) {\n      opacity: 0;\n\n      &:hover {\n        opacity: 1;\n      }\n    }\n  `;\n\ninterface OverlayProps {\n  isDragActive: boolean;\n  hasImage: boolean;\n}\nexport const Overlay = styled(\n  'div',\n  omitEmotionProps('isDragActive', 'hasImage')\n)<OverlayProps>`\n  ${resetFocusStyles};\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  text-align: center;\n  padding: ${(p) => p.theme.imageUploadOverlayPadding}em;\n\n  ${overlayHasImageStyles};\n  ${overlayHasImageHoverStyles}\n  ${transitionStyles('opacity')};\n`;\n\nconst contentIsDragActiveStyles = (p) =>\n  p.isDragActive &&\n  css`\n    transform: scale(0.92);\n  `;\n\ntype ContentProps = Pick<OverlayProps, 'isDragActive'>;\nconst Content = styled('div', omitEmotionProps('isDragActive'))<ContentProps>`\n  ${contentIsDragActiveStyles};\n  ${transitionStyles('transform')};\n`;\n\nconst PictureIcon = styled(Picture)`\n  opacity: 0.8;\n  font-size: 2.5em;\n`;\n\nconst Title = styled.div`\n  opacity: 0.8;\n`;\n\nconst DeleteButtonContainer = styled.div`\n  position: absolute;\n  top: 0.5em;\n  right: 0.5em;\n`;\n\nconst hoverStyles = (p) => css`\n  border-color: ${clr(p.theme.imageUploadNoImageHoverColorBorder)};\n`;\n\nconst notHasImageStyles = (p) =>\n  !p.hasImage &&\n  css`\n    background-color: ${clr(p.theme.imageUploadNoImageColorBg)};\n    border: 2px dashed ${clr(p.theme.imageUploadNoImageColorBorder)};\n\n    @media (hover: hover) {\n      &:hover {\n        ${hoverStyles(p)};\n      }\n    }\n  `;\n\nconst focusStyles = (p) => css`\n  &:focus-within {\n    & > div {\n      opacity: 1;\n    }\n    ${hoverStyles(p)};\n  }\n`;\n\nconst isDragActiveStyles = (p) =>\n  p.isDragActive &&\n  css`\n    ${hoverStyles(p)};\n  `;\n\nconst LocalImage = styled.img`\n  width: 100%;\n  vertical-align: top;\n`;\n\nconst RemoteImage = styled(Image)`\n  vertical-align: top;\n`;\n\ninterface ContainerProps extends WithSize {\n  isDragActive: boolean;\n  hasImage: boolean;\n}\n\nconst Container = styled(\n  'div',\n  omitEmotionProps('isDragActive', 'hasImage', 'size')\n)<ContainerProps>`\n  position: relative;\n  cursor: pointer;\n  overflow: hidden;\n  box-sizing: border-box;\n\n  max-width: ${(p) => p.theme.imageUploadMaxWidth}em;\n  min-height: ${(p) => p.theme.imageUploadMinHeight}em;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  color: ${(p) => clr(p.theme.colorText)};\n\n  ${notHasImageStyles};\n  ${focusStyles};\n  ${isDragActiveStyles};\n  ${sizeStyles};\n  ${transitionStyles('border')};\n`;\n\n/**\n * The component to upload an image.\n */\nconst ImageUpload = forwardRef<HTMLDivElement, ImageUploadProps>(\n  (\n    {\n      url,\n      accept = { 'image/*': ['.jpeg', '.png', '.webp'] },\n      locale = defaultLocale,\n      value,\n      defaultValue,\n      onChange,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const touchDevice = useMemo(() => isTouchDevice(), []);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const { getRootProps, getInputProps, isDragActive } = useDropzone({\n      accept,\n      multiple: false,\n      onDrop: ([file]) => setForwardedValue(file),\n    });\n\n    const source = useMemo(() => {\n      if (forwardedValue === null) return null; // If the user select an image\n      if (forwardedValue) return URL.createObjectURL(forwardedValue); // If the image already exists\n      if (url) return url;\n      return null;\n    }, [forwardedValue, url]);\n\n    const hasImage = useMemo(() => !!source, [source]);\n\n    const renderImage = useCallback(() => {\n      if (!source) return null;\n      if (typeof forwardedValue === 'object' && forwardedValue !== null) {\n        return <LocalImage src={source} />;\n      }\n      return <RemoteImage url={source} />;\n    }, [forwardedValue, source]);\n\n    return (\n      <Container\n        isDragActive={isDragActive}\n        hasImage={hasImage}\n        size={size}\n        onMouseDown={(e) => e.preventDefault()}\n        {...rest}\n        ref={ref}\n      >\n        <input {...getInputProps()} />\n        {renderImage()}\n\n        <Overlay\n          isDragActive={isDragActive}\n          hasImage={hasImage}\n          {\n            ...getRootProps({\n              onKeyDown: (e) => {\n                if (e.key === 'Backspace') setForwardedValue(null);\n              },\n            } as any) // eslint-disable-line @typescript-eslint/no-explicit-any\n          }\n        >\n          <Content isDragActive={isDragActive}>\n            <PictureIcon />\n            <Title>{touchDevice ? locale.touchTitle : locale.dropTitle}</Title>\n          </Content>\n\n          {hasImage && (\n            <ThemeOverrider\n              overrides={{\n                buttonGhostColorText: [0, 0, 100],\n                buttonGhostColorBgHover: [0, 0, 100, 0.1],\n              }}\n            >\n              <DeleteButtonContainer>\n                <Button\n                  type='ghost'\n                  wide='never'\n                  onClick={(e) => {\n                    setForwardedValue(null);\n                    e.stopPropagation();\n                  }}\n                >\n                  <Delete />\n                </Button>\n              </DeleteButtonContainer>\n            </ThemeOverrider>\n          )}\n        </Overlay>\n      </Container>\n    );\n  }\n);\n\nImageUpload.displayName = 'ImageUpload';\n\nexport default ImageUpload;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["css","styled","Button","Image","Delete","Picture","resetFocusStyles","sizeStyles","transitionStyles","clr","ThemeOverrider","isTouchDevice","omitEmotionProps","useForwardedState","React","forwardRef","useCallback","useMemo","useDropzone","defaultLocale","overlayHasImageStyles","p","hasImage","theme","imageUploadOverlayOpacity","overlayHasImageHoverStyles","isDragActive","Overlay","imageUploadOverlayPadding","contentIsDragActiveStyles","Content","PictureIcon","Title","div","DeleteButtonContainer","hoverStyles","imageUploadNoImageHoverColorBorder","notHasImageStyles","imageUploadNoImageColorBg","imageUploadNoImageColorBorder","focusStyles","isDragActiveStyles","LocalImage","img","RemoteImage","Container","imageUploadMaxWidth","imageUploadMinHeight","borderRadius","colorText","ImageUpload","url","accept","locale","value","defaultValue","onChange","size","rest","ref","touchDevice","forwardedValue","setForwardedValue","getRootProps","getInputProps","multiple","onDrop","file","source","URL","createObjectURL","renderImage","e","preventDefault","onKeyDown","key","touchTitle","dropTitle","buttonGhostColorText","buttonGhostColorBgHover","stopPropagation","displayName"],"sources":["../../../src/ImageUpload/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Button, Image } from '@os-design/core';\nimport { Delete, Picture } from '@os-design/icons';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport {\n  isTouchDevice,\n  omitEmotionProps,\n  useForwardedState,\n} from '@os-design/utils';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\nimport { Accept, useDropzone } from 'react-dropzone';\nimport defaultLocale, { ImageUploadLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface ImageUploadProps extends JsxDivProps, WithSize {\n  /**\n   * The url of the image.\n   * @default undefined\n   */\n  url?: string;\n  /**\n   * Allowed image formats.\n   * @default undefined\n   */\n  accept?: Accept;\n  /**\n   * The locale of the component.\n   * @default undefined\n   */\n  locale?: ImageUploadLocale;\n  /**\n   * The selected local file, or null if the image is marked as deleted.\n   * @default undefined\n   */\n  value?: File | null;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: File | null;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: File | null) => void;\n}\n\nconst overlayHasImageStyles = (p) =>\n  p.hasImage &&\n  css`\n    background-color: hsla(0, 0%, 0%, ${p.theme.imageUploadOverlayOpacity});\n    color: hsl(0, 0%, 100%);\n  `;\n\nconst overlayHasImageHoverStyles = (p) =>\n  p.hasImage &&\n  !p.isDragActive &&\n  css`\n    @media (hover: hover) {\n      opacity: 0;\n\n      &:hover {\n        opacity: 1;\n      }\n    }\n  `;\n\ninterface OverlayProps {\n  isDragActive: boolean;\n  hasImage: boolean;\n}\nexport const Overlay = styled(\n  'div',\n  omitEmotionProps('isDragActive', 'hasImage')\n)<OverlayProps>`\n  ${resetFocusStyles};\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  text-align: center;\n  padding: ${(p) => p.theme.imageUploadOverlayPadding}em;\n\n  ${overlayHasImageStyles};\n  ${overlayHasImageHoverStyles}\n  ${transitionStyles('opacity')};\n`;\n\nconst contentIsDragActiveStyles = (p) =>\n  p.isDragActive &&\n  css`\n    transform: scale(0.92);\n  `;\n\ntype ContentProps = Pick<OverlayProps, 'isDragActive'>;\nconst Content = styled('div', omitEmotionProps('isDragActive'))<ContentProps>`\n  ${contentIsDragActiveStyles};\n  ${transitionStyles('transform')};\n`;\n\nconst PictureIcon = styled(Picture)`\n  opacity: 0.8;\n  font-size: 2.5em;\n`;\n\nconst Title = styled.div`\n  opacity: 0.8;\n`;\n\nconst DeleteButtonContainer = styled.div`\n  position: absolute;\n  top: 0.5em;\n  right: 0.5em;\n`;\n\nconst hoverStyles = (p) => css`\n  border-color: ${clr(p.theme.imageUploadNoImageHoverColorBorder)};\n`;\n\nconst notHasImageStyles = (p) =>\n  !p.hasImage &&\n  css`\n    background-color: ${clr(p.theme.imageUploadNoImageColorBg)};\n    border: 2px dashed ${clr(p.theme.imageUploadNoImageColorBorder)};\n\n    @media (hover: hover) {\n      &:hover {\n        ${hoverStyles(p)};\n      }\n    }\n  `;\n\nconst focusStyles = (p) => css`\n  &:focus-within {\n    & > div {\n      opacity: 1;\n    }\n    ${hoverStyles(p)};\n  }\n`;\n\nconst isDragActiveStyles = (p) =>\n  p.isDragActive &&\n  css`\n    ${hoverStyles(p)};\n  `;\n\nconst LocalImage = styled.img`\n  width: 100%;\n  vertical-align: top;\n`;\n\nconst RemoteImage = styled(Image)`\n  vertical-align: top;\n`;\n\ninterface ContainerProps extends WithSize {\n  isDragActive: boolean;\n  hasImage: boolean;\n}\n\nconst Container = styled(\n  'div',\n  omitEmotionProps('isDragActive', 'hasImage', 'size')\n)<ContainerProps>`\n  position: relative;\n  cursor: pointer;\n  overflow: hidden;\n  box-sizing: border-box;\n\n  max-width: ${(p) => p.theme.imageUploadMaxWidth}em;\n  min-height: ${(p) => p.theme.imageUploadMinHeight}em;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  color: ${(p) => clr(p.theme.colorText)};\n\n  ${notHasImageStyles};\n  ${focusStyles};\n  ${isDragActiveStyles};\n  ${sizeStyles};\n  ${transitionStyles('border')};\n`;\n\n/**\n * The component to upload an image.\n */\nconst ImageUpload = forwardRef<HTMLDivElement, ImageUploadProps>(\n  (\n    {\n      url,\n      accept = { 'image/*': ['.jpeg', '.png', '.webp'] },\n      locale = defaultLocale,\n      value,\n      defaultValue,\n      onChange,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const touchDevice = useMemo(() => isTouchDevice(), []);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const { getRootProps, getInputProps, isDragActive } = useDropzone({\n      accept,\n      multiple: false,\n      onDrop: ([file]) => setForwardedValue(file),\n    });\n\n    const source = useMemo(() => {\n      if (forwardedValue === null) return null; // If the user select an image\n      if (forwardedValue) return URL.createObjectURL(forwardedValue); // If the image already exists\n      if (url) return url;\n      return null;\n    }, [forwardedValue, url]);\n\n    const hasImage = useMemo(() => !!source, [source]);\n\n    const renderImage = useCallback(() => {\n      if (!source) return null;\n      if (typeof forwardedValue === 'object' && forwardedValue !== null) {\n        return <LocalImage src={source} />;\n      }\n      return <RemoteImage url={source} />;\n    }, [forwardedValue, source]);\n\n    return (\n      <Container\n        isDragActive={isDragActive}\n        hasImage={hasImage}\n        size={size}\n        onMouseDown={(e) => e.preventDefault()}\n        {...rest}\n        ref={ref}\n      >\n        <input {...getInputProps()} />\n        {renderImage()}\n\n        <Overlay\n          isDragActive={isDragActive}\n          hasImage={hasImage}\n          {\n            ...getRootProps({\n              onKeyDown: (e) => {\n                if (e.key === 'Backspace') setForwardedValue(null);\n              },\n            } as any) // eslint-disable-line @typescript-eslint/no-explicit-any\n          }\n        >\n          <Content isDragActive={isDragActive}>\n            <PictureIcon />\n            <Title>{touchDevice ? locale.touchTitle : locale.dropTitle}</Title>\n          </Content>\n\n          {hasImage && (\n            <ThemeOverrider\n              overrides={{\n                buttonGhostColorText: [0, 0, 100],\n                buttonGhostColorBgHover: [0, 0, 100, 0.1],\n              }}\n            >\n              <DeleteButtonContainer>\n                <Button\n                  type='ghost'\n                  wide='never'\n                  onClick={(e) => {\n                    setForwardedValue(null);\n                    e.stopPropagation();\n                  }}\n                >\n                  <Delete />\n                </Button>\n              </DeleteButtonContainer>\n            </ThemeOverrider>\n          )}\n        </Overlay>\n      </Container>\n    );\n  }\n);\n\nImageUpload.displayName = 'ImageUpload';\n\nexport default ImageUpload;\n"],"mappings":"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"}

package/dist/esm/index.js

@@ -1,5 +1,5 @@
-export { default as ImageUpload } from './ImageUpload';
-export { default as ImageUploadSkeleton } from './ImageUploadSkeleton';
 export * from './ImageUpload';
+export { default as ImageUpload } from './ImageUpload';
 export * from './ImageUploadSkeleton';
+export { default as ImageUploadSkeleton } from './ImageUploadSkeleton';
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","ImageUpload","ImageUploadSkeleton"],"sources":["../../src/index.ts"],"sourcesContent":["export { default as ImageUpload } from './ImageUpload';\nexport { default as ImageUploadSkeleton } from './ImageUploadSkeleton';\n\nexport * from './ImageUpload';\nexport * from './ImageUploadSkeleton';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,WAApB,QAAuC,eAAvC;AACA,SAASD,OAAO,IAAIE,mBAApB,QAA+C,uBAA/C;AAEA,cAAc,eAAd;AACA,cAAc,uBAAd"}
+{"version":3,"file":"index.js","names":["default","ImageUpload","ImageUploadSkeleton"],"sources":["../../src/index.ts"],"sourcesContent":["export * from './ImageUpload';\nexport { default as ImageUpload } from './ImageUpload';\nexport * from './ImageUploadSkeleton';\nexport { default as ImageUploadSkeleton } from './ImageUploadSkeleton';\n"],"mappings":"AAAA,cAAc,eAAd;AACA,SAASA,OAAO,IAAIC,WAApB,QAAuC,eAAvC;AACA,cAAc,uBAAd;AACA,SAASD,OAAO,IAAIE,mBAApB,QAA+C,uBAA/C"}

package/dist/types/ImageUpload/index.d.ts

@@ -1,6 +1,6 @@
+import { WithSize } from '@os-design/styles';
 import React from 'react';
 import { Accept } from 'react-dropzone';
-import { WithSize } from '@os-design/styles';
 import { ImageUploadLocale } from './utils/defaultLocale';
 declare type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'defaultValue' | 'onChange' | 'ref'>;
 export interface ImageUploadProps extends JsxDivProps, WithSize {

package/dist/types/ImageUpload/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ImageUpload/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EAAe,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAKrD,OAAO,EAIL,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAO3B,OAAsB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAEzE,aAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,cAAc,GAAG,UAAU,GAAG,KAAK,CACpC,CAAC;AACF,MAAM,WAAW,gBAAiB,SAAQ,WAAW,EAAE,QAAQ;IAK7D,GAAG,CAAC,EAAE,MAAM,CAAC;IAKb,MAAM,CAAC,EAAE,MAAM,CAAC;IAKhB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAK3B,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAKpB,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAK3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CACzC;AAsBD,UAAU,YAAY;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;CACnB;AACD,eAAO,MAAM,OAAO;;;oGAsBnB,CAAC;AAmGF,QAAA,MAAM,WAAW,yFAiGhB,CAAC;AAIF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ImageUpload/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAIL,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAO3B,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,MAAM,EAAe,MAAM,gBAAgB,CAAC;AACrD,OAAsB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAEzE,aAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,cAAc,GAAG,UAAU,GAAG,KAAK,CACpC,CAAC;AACF,MAAM,WAAW,gBAAiB,SAAQ,WAAW,EAAE,QAAQ;IAK7D,GAAG,CAAC,EAAE,MAAM,CAAC;IAKb,MAAM,CAAC,EAAE,MAAM,CAAC;IAKhB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAK3B,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAKpB,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAK3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CACzC;AAsBD,UAAU,YAAY;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;CACnB;AACD,eAAO,MAAM,OAAO;;;oGAsBnB,CAAC;AAmGF,QAAA,MAAM,WAAW,yFAiGhB,CAAC;AAIF,eAAe,WAAW,CAAC"}

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
-export { default as ImageUpload } from './ImageUpload';
-export { default as ImageUploadSkeleton } from './ImageUploadSkeleton';
 export * from './ImageUpload';
+export { default as ImageUpload } from './ImageUpload';
 export * from './ImageUploadSkeleton';
+export { default as ImageUploadSkeleton } from './ImageUploadSkeleton';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAEvE,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/upload",
-  "version": "1.0.154",
+  "version": "1.0.156",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -29,11 +29,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@os-design/core": "^1.0.151",
+    "@os-design/core": "^1.0.153",
     "@os-design/icons": "^1.0.40",
     "@os-design/styles": "^1.0.38",
     "@os-design/theming": "^1.0.36",
-    "@os-design/utils": "^1.0.53",
+    "@os-design/utils": "^1.0.54",
     "react-dropzone": "^14.2.2"
   },
   "devDependencies": {
@@ -46,5 +46,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "7717accc62f9aeed38cd821b27a1b6fc6084a5cd"
+  "gitHead": "8d32820f40f43f64be2bf85f60973d358be83c1d"
 }