@os-design/upload 1.0.138 → 1.0.141

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -35,7 +35,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
35
35
 
36
36
  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; }
37
37
 
38
- function _extends() { _extends = Object.assign || 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); }
38
+ 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); }
39
39
 
40
40
  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); }
41
41
 
@@ -116,7 +116,9 @@ var Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('isD
116
116
  var ImageUpload = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
117
117
  var url = _ref.url,
118
118
  _ref$accept = _ref.accept,
119
- accept = _ref$accept === void 0 ? ['image/jpeg', 'image/png', 'image/webp'] : _ref$accept,
119
+ accept = _ref$accept === void 0 ? {
120
+ 'image/*': ['.jpeg', '.png', '.webp']
121
+ } : _ref$accept,
120
122
  _ref$locale = _ref.locale,
121
123
  locale = _ref$locale === void 0 ? _defaultLocale["default"] : _ref$locale,
122
124
  value = _ref.value,
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/ImageUpload/index.tsx"],"names":["overlayHasImageStyles","p","hasImage","css","theme","imageUploadOverlayOpacity","overlayHasImageHoverStyles","isDragActive","Overlay","resetFocusStyles","imageUploadOverlayPadding","contentIsDragActiveStyles","Content","PictureIcon","Picture","Title","styled","div","DeleteButtonContainer","hoverStyles","imageUploadNoImageHoverColorBorder","notHasImageStyles","imageUploadNoImageColorBg","imageUploadNoImageColorBorder","focusStyles","isDragActiveStyles","LocalImage","img","RemoteImage","Image","Container","imageUploadMaxWidth","imageUploadMinHeight","borderRadius","colorText","sizeStyles","ImageUpload","ref","url","accept","locale","defaultLocale","value","defaultValue","onChange","size","rest","touchDevice","forwardedValue","setForwardedValue","multiple","onDrop","file","getRootProps","getInputProps","source","URL","createObjectURL","renderImage","e","preventDefault","onKeyDown","key","touchTitle","dropTitle","buttonGhostColorText","buttonGhostColorBgHover","stopPropagation","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport { useDropzone } 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?: string | string[];\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', 'image/png', 'image/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"],"file":"index.js"}
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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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/ImageUpload/utils/defaultLocale.ts"],"names":["defaultLocale","touchTitle","dropTitle"],"mappings":";;;;;;AAKA,IAAMA,aAAgC,GAAG;AACvCC,EAAAA,UAAU,EAAE,+BAD2B;AAEvCC,EAAAA,SAAS,EAAE;AAF4B,CAAzC;eAKeF,a","sourcesContent":["export interface ImageUploadLocale {\n touchTitle: string;\n dropTitle: string;\n}\n\nconst defaultLocale: ImageUploadLocale = {\n touchTitle: 'Click here to choose an image',\n dropTitle: 'Drop an image here or click to choose it',\n};\n\nexport default defaultLocale;\n"],"file":"defaultLocale.js"}
1
+ {"version":3,"file":"defaultLocale.js","names":["defaultLocale","touchTitle","dropTitle"],"sources":["../../../../src/ImageUpload/utils/defaultLocale.ts"],"sourcesContent":["export interface ImageUploadLocale {\n touchTitle: string;\n dropTitle: string;\n}\n\nconst defaultLocale: ImageUploadLocale = {\n touchTitle: 'Click here to choose an image',\n dropTitle: 'Drop an image here or click to choose it',\n};\n\nexport default defaultLocale;\n"],"mappings":";;;;;;AAKA,IAAMA,aAAgC,GAAG;EACvCC,UAAU,EAAE,+BAD2B;EAEvCC,SAAS,EAAE;AAF4B,CAAzC;eAKeF,a"}
@@ -25,7 +25,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
25
25
 
26
26
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
27
27
 
28
- function _extends() { _extends = Object.assign || 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); }
28
+ 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); }
29
29
 
30
30
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
31
31
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/ImageUploadSkeleton/index.tsx"],"names":["StyledImageUploadSkeleton","Skeleton","p","theme","imageUploadMaxWidth","imageUploadMinHeight","sizeStyles","ImageUploadSkeleton","props","ref","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAIA,IAAMA,yBAAyB,GAAG,wBAChCC,cADgC,EAEhC,6BAAiB,MAAjB,CAFgC,CAAH,0HAIhB,UAACC,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQC,mBAAf;AAAA,CAJgB,EAKnB,UAACF,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQE,oBAAf;AAAA,CALmB,EAM3BC,kBAN2B,CAA/B;AASA;AACA;AACA;AACA;;AACA,IAAMC,mBAAmB,gBAAG,uBAG1B,UAACC,KAAD,EAAQC,GAAR;AAAA,sBACA,gCAAC,yBAAD;AAA2B,IAAA,KAAK,EAAC;AAAjC,KAA4CD,KAA5C;AAAmD,IAAA,GAAG,EAAEC;AAAxD,KADA;AAAA,CAH0B,CAA5B;AAOAF,mBAAmB,CAACG,WAApB,GAAkC,qBAAlC;eAEeH,mB","sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { Skeleton, SkeletonProps } from '@os-design/core';\n\nexport type ImageUploadSkeletonProps = Omit<SkeletonProps, 'width'> & WithSize;\n\nconst StyledImageUploadSkeleton = styled(\n Skeleton,\n omitEmotionProps('size')\n)<WithSize>`\n max-width: ${(p) => p.theme.imageUploadMaxWidth}em;\n height: ${(p) => p.theme.imageUploadMinHeight}em;\n ${sizeStyles};\n`;\n\n/**\n * Provides an image upload placeholder while a user waits for\n * the content to load.\n */\nconst ImageUploadSkeleton = forwardRef<\n HTMLDivElement,\n ImageUploadSkeletonProps\n>((props, ref) => (\n <StyledImageUploadSkeleton width='100%' {...props} ref={ref} />\n));\n\nImageUploadSkeleton.displayName = 'ImageUploadSkeleton';\n\nexport default ImageUploadSkeleton;\n"],"file":"index.js"}
1
+ {"version":3,"file":"index.js","names":["StyledImageUploadSkeleton","styled","Skeleton","omitEmotionProps","p","theme","imageUploadMaxWidth","imageUploadMinHeight","sizeStyles","ImageUploadSkeleton","forwardRef","props","ref","displayName"],"sources":["../../../src/ImageUploadSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { Skeleton, SkeletonProps } from '@os-design/core';\n\nexport type ImageUploadSkeletonProps = Omit<SkeletonProps, 'width'> & WithSize;\n\nconst StyledImageUploadSkeleton = styled(\n Skeleton,\n omitEmotionProps('size')\n)<WithSize>`\n max-width: ${(p) => p.theme.imageUploadMaxWidth}em;\n height: ${(p) => p.theme.imageUploadMinHeight}em;\n ${sizeStyles};\n`;\n\n/**\n * Provides an image upload placeholder while a user waits for\n * the content to load.\n */\nconst ImageUploadSkeleton = forwardRef<\n HTMLDivElement,\n ImageUploadSkeletonProps\n>((props, ref) => (\n <StyledImageUploadSkeleton width='100%' {...props} ref={ref} />\n));\n\nImageUploadSkeleton.displayName = 'ImageUploadSkeleton';\n\nexport default ImageUploadSkeleton;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAIA,IAAMA,yBAAyB,GAAG,IAAAC,kBAAA,EAChCC,cADgC,EAEhC,IAAAC,uBAAA,EAAiB,MAAjB,CAFgC,CAAH,0HAIhB,UAACC,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQC,mBAAf;AAAA,CAJgB,EAKnB,UAACF,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQE,oBAAf;AAAA,CALmB,EAM3BC,kBAN2B,CAA/B;AASA;AACA;AACA;AACA;;AACA,IAAMC,mBAAmB,gBAAG,IAAAC,iBAAA,EAG1B,UAACC,KAAD,EAAQC,GAAR;EAAA,oBACA,gCAAC,yBAAD;IAA2B,KAAK,EAAC;EAAjC,GAA4CD,KAA5C;IAAmD,GAAG,EAAEC;EAAxD,GADA;AAAA,CAH0B,CAA5B;AAOAH,mBAAmB,CAACI,WAApB,GAAkC,qBAAlC;eAEeJ,mB"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/emotion.d.ts"],"names":[],"mappings":";;AAAA","sourcesContent":["import '@emotion/react';\nimport { Theme as BaseTheme } from '@os-design/theming';\n\ndeclare module '@emotion/react' {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n export interface Theme extends BaseTheme {}\n}\n"],"file":"emotion.d.js"}
1
+ {"version":3,"file":"emotion.d.js","names":[],"sources":["../../src/emotion.d.ts"],"sourcesContent":["import '@emotion/react';\nimport { Theme as BaseTheme } from '@os-design/theming';\n\ndeclare module '@emotion/react' {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n export interface Theme extends BaseTheme {}\n}\n"],"mappings":";;AAAA"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAFA;;AAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { default as ImageUpload } from './ImageUpload';\nexport { default as ImageUploadSkeleton } from './ImageUploadSkeleton';\n\nexport * from './ImageUpload';\nexport * from './ImageUploadSkeleton';\n"],"file":"index.js"}
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"}
@@ -1,4 +1,4 @@
1
- function _extends() { _extends = Object.assign || 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); }
1
+ 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); }
2
2
 
3
3
  import React, { forwardRef, useCallback, useMemo } from 'react';
4
4
  import { useDropzone } from 'react-dropzone';
@@ -126,7 +126,9 @@ const Container = styled('div', omitEmotionProps('isDragActive', 'hasImage', 'si
126
126
 
127
127
  const ImageUpload = /*#__PURE__*/forwardRef(({
128
128
  url,
129
- accept = ['image/jpeg', 'image/png', 'image/webp'],
129
+ accept = {
130
+ 'image/*': ['.jpeg', '.png', '.webp']
131
+ },
130
132
  locale = defaultLocale,
131
133
  value,
132
134
  defaultValue,
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/ImageUpload/index.tsx"],"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"],"mappings":"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","sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport { useDropzone } 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?: string | string[];\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', 'image/png', 'image/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"],"file":"index.js"}
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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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/ImageUpload/utils/defaultLocale.ts"],"names":["defaultLocale","touchTitle","dropTitle"],"mappings":"AAKA,MAAMA,aAAgC,GAAG;AACvCC,EAAAA,UAAU,EAAE,+BAD2B;AAEvCC,EAAAA,SAAS,EAAE;AAF4B,CAAzC;AAKA,eAAeF,aAAf","sourcesContent":["export interface ImageUploadLocale {\n touchTitle: string;\n dropTitle: string;\n}\n\nconst defaultLocale: ImageUploadLocale = {\n touchTitle: 'Click here to choose an image',\n dropTitle: 'Drop an image here or click to choose it',\n};\n\nexport default defaultLocale;\n"],"file":"defaultLocale.js"}
1
+ {"version":3,"file":"defaultLocale.js","names":["defaultLocale","touchTitle","dropTitle"],"sources":["../../../../src/ImageUpload/utils/defaultLocale.ts"],"sourcesContent":["export interface ImageUploadLocale {\n touchTitle: string;\n dropTitle: string;\n}\n\nconst defaultLocale: ImageUploadLocale = {\n touchTitle: 'Click here to choose an image',\n dropTitle: 'Drop an image here or click to choose it',\n};\n\nexport default defaultLocale;\n"],"mappings":"AAKA,MAAMA,aAAgC,GAAG;EACvCC,UAAU,EAAE,+BAD2B;EAEvCC,SAAS,EAAE;AAF4B,CAAzC;AAKA,eAAeF,aAAf"}
@@ -1,4 +1,4 @@
1
- function _extends() { _extends = Object.assign || 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); }
1
+ 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); }
2
2
 
3
3
  import styled from '@emotion/styled';
4
4
  import React, { forwardRef } from 'react';
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/ImageUploadSkeleton/index.tsx"],"names":["styled","React","forwardRef","sizeStyles","omitEmotionProps","Skeleton","StyledImageUploadSkeleton","p","theme","imageUploadMaxWidth","imageUploadMinHeight","ImageUploadSkeleton","props","ref","displayName"],"mappings":";;AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AACA,OAAOC,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,UAAT,QAAqC,mBAArC;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,QAAT,QAAwC,iBAAxC;AAIA,MAAMC,yBAAyB,GAAGN,MAAM,CACtCK,QADsC,EAEtCD,gBAAgB,CAAC,MAAD,CAFsB,CAG5B;AACZ,eAAgBG,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,mBAAoB;AAClD,YAAaF,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQE,oBAAqB;AAChD,IAAIP,UAAW;AACf,CAPA;AASA;AACA;AACA;AACA;;AACA,MAAMQ,mBAAmB,gBAAGT,UAAU,CAGpC,CAACU,KAAD,EAAQC,GAAR,kBACA,oBAAC,yBAAD;AAA2B,EAAA,KAAK,EAAC;AAAjC,GAA4CD,KAA5C;AAAmD,EAAA,GAAG,EAAEC;AAAxD,GAJoC,CAAtC;AAOAF,mBAAmB,CAACG,WAApB,GAAkC,qBAAlC;AAEA,eAAeH,mBAAf","sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { Skeleton, SkeletonProps } from '@os-design/core';\n\nexport type ImageUploadSkeletonProps = Omit<SkeletonProps, 'width'> & WithSize;\n\nconst StyledImageUploadSkeleton = styled(\n Skeleton,\n omitEmotionProps('size')\n)<WithSize>`\n max-width: ${(p) => p.theme.imageUploadMaxWidth}em;\n height: ${(p) => p.theme.imageUploadMinHeight}em;\n ${sizeStyles};\n`;\n\n/**\n * Provides an image upload placeholder while a user waits for\n * the content to load.\n */\nconst ImageUploadSkeleton = forwardRef<\n HTMLDivElement,\n ImageUploadSkeletonProps\n>((props, ref) => (\n <StyledImageUploadSkeleton width='100%' {...props} ref={ref} />\n));\n\nImageUploadSkeleton.displayName = 'ImageUploadSkeleton';\n\nexport default ImageUploadSkeleton;\n"],"file":"index.js"}
1
+ {"version":3,"file":"index.js","names":["styled","React","forwardRef","sizeStyles","omitEmotionProps","Skeleton","StyledImageUploadSkeleton","p","theme","imageUploadMaxWidth","imageUploadMinHeight","ImageUploadSkeleton","props","ref","displayName"],"sources":["../../../src/ImageUploadSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { Skeleton, SkeletonProps } from '@os-design/core';\n\nexport type ImageUploadSkeletonProps = Omit<SkeletonProps, 'width'> & WithSize;\n\nconst StyledImageUploadSkeleton = styled(\n Skeleton,\n omitEmotionProps('size')\n)<WithSize>`\n max-width: ${(p) => p.theme.imageUploadMaxWidth}em;\n height: ${(p) => p.theme.imageUploadMinHeight}em;\n ${sizeStyles};\n`;\n\n/**\n * Provides an image upload placeholder while a user waits for\n * the content to load.\n */\nconst ImageUploadSkeleton = forwardRef<\n HTMLDivElement,\n ImageUploadSkeletonProps\n>((props, ref) => (\n <StyledImageUploadSkeleton width='100%' {...props} ref={ref} />\n));\n\nImageUploadSkeleton.displayName = 'ImageUploadSkeleton';\n\nexport default ImageUploadSkeleton;\n"],"mappings":";;AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AACA,OAAOC,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,UAAT,QAAqC,mBAArC;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,QAAT,QAAwC,iBAAxC;AAIA,MAAMC,yBAAyB,GAAGN,MAAM,CACtCK,QADsC,EAEtCD,gBAAgB,CAAC,MAAD,CAFsB,CAG5B;AACZ,eAAgBG,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,mBAAoB;AAClD,YAAaF,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQE,oBAAqB;AAChD,IAAIP,UAAW;AACf,CAPA;AASA;AACA;AACA;AACA;;AACA,MAAMQ,mBAAmB,gBAAGT,UAAU,CAGpC,CAACU,KAAD,EAAQC,GAAR,kBACA,oBAAC,yBAAD;EAA2B,KAAK,EAAC;AAAjC,GAA4CD,KAA5C;EAAmD,GAAG,EAAEC;AAAxD,GAJoC,CAAtC;AAOAF,mBAAmB,CAACG,WAApB,GAAkC,qBAAlC;AAEA,eAAeH,mBAAf"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/emotion.d.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAP","sourcesContent":["import '@emotion/react';\nimport { Theme as BaseTheme } from '@os-design/theming';\n\ndeclare module '@emotion/react' {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n export interface Theme extends BaseTheme {}\n}\n"],"file":"emotion.d.js"}
1
+ {"version":3,"file":"emotion.d.js","names":[],"sources":["../../src/emotion.d.ts"],"sourcesContent":["import '@emotion/react';\nimport { Theme as BaseTheme } from '@os-design/theming';\n\ndeclare module '@emotion/react' {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n export interface Theme extends BaseTheme {}\n}\n"],"mappings":"AAAA,OAAO,gBAAP"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/index.ts"],"names":["default","ImageUpload","ImageUploadSkeleton"],"mappings":"AAAA,SAASA,OAAO,IAAIC,WAApB,QAAuC,eAAvC;AACA,SAASD,OAAO,IAAIE,mBAApB,QAA+C,uBAA/C;AAEA,cAAc,eAAd;AACA,cAAc,uBAAd","sourcesContent":["export { default as ImageUpload } from './ImageUpload';\nexport { default as ImageUploadSkeleton } from './ImageUploadSkeleton';\n\nexport * from './ImageUpload';\nexport * from './ImageUploadSkeleton';\n"],"file":"index.js"}
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"}
@@ -1,10 +1,11 @@
1
1
  import React from 'react';
2
+ import { Accept } from 'react-dropzone';
2
3
  import { WithSize } from '@os-design/styles';
3
4
  import { ImageUploadLocale } from './utils/defaultLocale';
4
5
  declare type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'defaultValue' | 'onChange' | 'ref'>;
5
6
  export interface ImageUploadProps extends JsxDivProps, WithSize {
6
7
  url?: string;
7
- accept?: string | string[];
8
+ accept?: Accept;
8
9
  locale?: ImageUploadLocale;
9
10
  value?: File | null;
10
11
  defaultValue?: File | null;
@@ -16,7 +17,7 @@ interface OverlayProps {
16
17
  }
17
18
  export declare const Overlay: import("@emotion/styled").StyledComponent<{
18
19
  theme?: import("@emotion/react").Theme | undefined;
19
- as?: "symbol" | "object" | "div" | "slot" | "style" | "title" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;
20
+ as?: React.ElementType<any> | undefined;
20
21
  } & OverlayProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
21
22
  declare const ImageUpload: React.ForwardRefExoticComponent<ImageUploadProps & React.RefAttributes<HTMLDivElement>>;
22
23
  export default ImageUpload;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ImageUpload/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAMhE,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,GAAG,MAAM,EAAE,CAAC;IAK3B,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"}
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"}
@@ -2,6 +2,6 @@ import React from 'react';
2
2
  import { WithSize } from '@os-design/styles';
3
3
  import { SkeletonProps } from '@os-design/core';
4
4
  export declare type ImageUploadSkeletonProps = Omit<SkeletonProps, 'width'> & WithSize;
5
- declare const ImageUploadSkeleton: React.ForwardRefExoticComponent<Pick<SkeletonProps, "defaultValue" | "onChange" | "key" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & WithSize & React.RefAttributes<HTMLDivElement>>;
5
+ declare const ImageUploadSkeleton: React.ForwardRefExoticComponent<Omit<SkeletonProps, "width"> & WithSize & React.RefAttributes<HTMLDivElement>>;
6
6
  export default ImageUploadSkeleton;
7
7
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ImageUploadSkeleton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAc,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEzD,OAAO,EAAY,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE1D,oBAAY,wBAAwB,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC;AAe/E,QAAA,MAAM,mBAAmB,6lJAKvB,CAAC;AAIH,eAAe,mBAAmB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ImageUploadSkeleton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAc,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEzD,OAAO,EAAY,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE1D,oBAAY,wBAAwB,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC;AAe/E,QAAA,MAAM,mBAAmB,gHAKvB,CAAC;AAIH,eAAe,mBAAmB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@os-design/upload",
3
- "version": "1.0.138",
3
+ "version": "1.0.141",
4
4
  "license": "UNLICENSED",
5
5
  "repository": "git@gitlab.com:os-team/libs/os-design.git",
6
6
  "main": "dist/cjs/index.js",
@@ -28,12 +28,12 @@
28
28
  "access": "public"
29
29
  },
30
30
  "dependencies": {
31
- "@os-design/core": "^1.0.135",
31
+ "@os-design/core": "^1.0.138",
32
32
  "@os-design/icons": "^1.0.34",
33
33
  "@os-design/styles": "^1.0.32",
34
34
  "@os-design/theming": "^1.0.30",
35
- "@os-design/utils": "^1.0.46",
36
- "react-dropzone": "^12.0.5"
35
+ "@os-design/utils": "^1.0.47",
36
+ "react-dropzone": "^14.2.2"
37
37
  },
38
38
  "devDependencies": {
39
39
  "@emotion/react": ">=11",
@@ -45,5 +45,5 @@
45
45
  "react": ">=18",
46
46
  "react-dom": ">=18"
47
47
  },
48
- "gitHead": "b87f75c20f48292eabf47da32d6bd6e80ce2fee5"
48
+ "gitHead": "f8ca9a29bb4131d35eff737da2c6b3bcb594c3b3"
49
49
  }