@synerise/ds-file-uploader 0.8.0 → 0.8.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.8.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-file-uploader@0.8.0...@synerise/ds-file-uploader@0.8.1) (2025-02-14)
+
+
+### Bug Fixes
+
+* **file-uploader:** css rule specificity ([70334e5](https://github.com/Synerise/synerise-design/commit/70334e545c882cc2da7db39ec89178653b41e398))
+
+
+
+
+
 # [0.8.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-file-uploader@0.7.11...@synerise/ds-file-uploader@0.8.0) (2025-01-29)
 
 

package/dist/FileUploader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploader.d.ts","sourceRoot":"","sources":["../src/FileUploader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAQrD,OAAO,EAAe,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAgBtE,QAAA,MAAM,YAAY,gJAgBf,iBAAiB,sBAiInB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"FileUploader.d.ts","sourceRoot":"","sources":["../src/FileUploader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AASrD,OAAO,EAAe,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAgBtE,QAAA,MAAM,YAAY,gJAgBf,iBAAiB,sBAmInB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/FileUploader.js

@@ -4,6 +4,7 @@ import { FormattedMessage } from 'react-intl';
 import { useDropzone } from 'react-dropzone';
 import Icon, { AddM, InfoFillS, FileUploadL } from '@synerise/ds-icon';
 import Tooltip from '@synerise/ds-tooltip';
+import { useTheme } from '@synerise/ds-core';
 import FileView from './FileView/FileView';
 import * as S from './FileUploader.styles';
 function readAsText(file) {
@@ -42,6 +43,7 @@ var FileUploader = function FileUploader(_ref) {
   var _useState = useState(true),
     uploadSuccess = _useState[0],
     setUploadSuccess = _useState[1];
+  var theme = useTheme();
   var finalTexts = _extends({
     buttonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
       id: "DS.FILE-UPLOADER.BUTTON-LABEL",
@@ -132,9 +134,11 @@ var FileUploader = function FileUploader(_ref) {
     "data-testid": "droparea",
     filesLength: files.length
   }, mode === 'multi-large' && files.length === 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
+    color: theme.palette['grey-800'],
     component: /*#__PURE__*/React.createElement(FileUploadL, null),
     size: 48
   }), /*#__PURE__*/React.createElement(S.LargeDropAreaLabel, null, finalTexts.buttonLabelLarge), /*#__PURE__*/React.createElement(S.LargeDropAreaDescription, null, finalTexts.buttonDescription)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
+    color: theme.palette['grey-600'],
     component: /*#__PURE__*/React.createElement(AddM, null),
     size: 24
   }), /*#__PURE__*/React.createElement(S.DropAreaLabel, null, finalTexts.buttonLabel))))), files.length > 0 && files.map(function (file, index) {

package/dist/FileUploader.styles.d.ts

@@ -1,15 +1,30 @@
 /// <reference types="react" />
 import Button from '@synerise/ds-button';
 export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Description: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/lib/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {
+export declare const Description: import("styled-components").StyledComponent<({ size, className, children, ellipsis }: {
+    size?: import("@synerise/ds-typography").TextSize | undefined;
+    ellipsis?: import("@synerise/ds-typography/dist/Ellipsis").EllipsisProps | undefined;
+    children?: import("react").ReactNode;
+    className?: string | undefined;
+}) => import("react").JSX.Element, any, {
     hasError?: boolean | undefined;
 }, never>;
 export declare const DropAreaContainer: import("styled-components").StyledComponent<"div", any, {
     canUploadMore: boolean;
 }, never>;
-export declare const DropAreaLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/lib/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const DropAreaLabel: import("styled-components").StyledComponent<({ size, className, children, ellipsis }: {
+    size?: import("@synerise/ds-typography").TextSize | undefined;
+    ellipsis?: import("@synerise/ds-typography/dist/Ellipsis").EllipsisProps | undefined;
+    children?: import("react").ReactNode;
+    className?: string | undefined;
+}) => import("react").JSX.Element, any, {}, never>;
 export declare const LargeDropAreaLabel: import("styled-components").StyledComponent<"label", any, {}, never>;
-export declare const LargeDropAreaDescription: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/lib/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const LargeDropAreaDescription: import("styled-components").StyledComponent<({ size, className, children, ellipsis }: {
+    size?: import("@synerise/ds-typography").TextSize | undefined;
+    ellipsis?: import("@synerise/ds-typography/dist/Ellipsis").EllipsisProps | undefined;
+    children?: import("react").ReactNode;
+    className?: string | undefined;
+}) => import("react").JSX.Element, any, {}, never>;
 export declare const DropAreaButton: import("styled-components").StyledComponent<"button", any, {
     isDropping?: boolean | undefined;
     hasError?: boolean | undefined;
@@ -18,7 +33,12 @@ export declare const DropAreaButton: import("styled-components").StyledComponent
     filesLength: number;
     hidden: boolean;
 }, never>;
-export declare const ErrorMessage: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/lib/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const ErrorMessage: import("styled-components").StyledComponent<({ size, className, children, ellipsis }: {
+    size?: import("@synerise/ds-typography").TextSize | undefined;
+    ellipsis?: import("@synerise/ds-typography/dist/Ellipsis").EllipsisProps | undefined;
+    children?: import("react").ReactNode;
+    className?: string | undefined;
+}) => import("react").JSX.Element, any, {}, never>;
 export declare const Label: import("styled-components").StyledComponent<"label", any, {}, never>;
 export declare const UploadButton: import("styled-components").StyledComponent<typeof Button, any, {}, never>;
 //# sourceMappingURL=FileUploader.styles.d.ts.map

package/dist/FileUploader.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploader.styles.d.ts","sourceRoot":"","sources":["../src/FileUploader.styles.ts"],"names":[],"mappings":";AAEA,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAIzC,eAAO,MAAM,SAAS,oEAErB,CAAC;AAEF,eAAO,MAAM,WAAW;;SAMvB,CAAC;AAEF,eAAO,MAAM,iBAAiB;mBAA+B,OAAO;SAGnE,CAAC;AAEF,eAAO,MAAM,aAAa,uMAGzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,sEAO9B,CAAC;AAEF,eAAO,MAAM,wBAAwB,uMAMpC,CAAC;AAEF,eAAO,MAAM,cAAc;;;UAGnB,MAAM;aACH,OAAO;iBACH,MAAM;YACX,OAAO;SAwGhB,CAAC;AAEF,eAAO,MAAM,YAAY,uMAMxB,CAAC;AAEF,eAAO,MAAM,KAAK,sEAWjB,CAAC;AAEF,eAAO,MAAM,YAAY,4EAAmB,CAAC"}
+{"version":3,"file":"FileUploader.styles.d.ts","sourceRoot":"","sources":["../src/FileUploader.styles.ts"],"names":[],"mappings":";AAEA,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAIzC,eAAO,MAAM,SAAS,oEAErB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;SAMvB,CAAC;AAEF,eAAO,MAAM,iBAAiB;mBAA+B,OAAO;SAGnE,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;kDAKzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,sEAO9B,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;;;kDAMpC,CAAC;AAEF,eAAO,MAAM,cAAc;;;UAGnB,MAAM;aACH,OAAO;iBACH,MAAM;YACX,OAAO;SAyGhB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;kDAMxB,CAAC;AAEF,eAAO,MAAM,KAAK,sEAWjB,CAAC;AAEF,eAAO,MAAM,YAAY,4EAAmB,CAAC"}

package/dist/FileUploader.styles.js

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import Typography, { Label as TypographyLabel } from '@synerise/ds-typography';
+import { Label as TypographyLabel, Text } from '@synerise/ds-typography';
 import Button from '@synerise/ds-button';
 import { IconContainer } from '@synerise/ds-icon';
 import { hexToRgba } from '@synerise/ds-utils';
@@ -7,7 +7,7 @@ export var Container = styled.div.withConfig({
   displayName: "FileUploaderstyles__Container",
   componentId: "sc-62r2x6-0"
 })(["width:100%;"]);
-export var Description = styled(Typography.Text).withConfig({
+export var Description = styled(Text).withConfig({
   displayName: "FileUploaderstyles__Description",
   componentId: "sc-62r2x6-1"
 })(["&&{margin:", ";display:block;color:", ";}"], function (props) {
@@ -21,33 +21,35 @@ export var DropAreaContainer = styled.div.withConfig({
 })(["width:100%;margin:", ";"], function (props) {
   return props.canUploadMore ? '12px 0 8px' : '0';
 });
-export var DropAreaLabel = styled(Typography.Text).withConfig({
+export var DropAreaLabel = styled(Text).withConfig({
   displayName: "FileUploaderstyles__DropAreaLabel",
   componentId: "sc-62r2x6-3"
-})(["color:", ";font-weight:500;"], function (props) {
-  return props.theme.palette['grey-700'];
+})(["&&{color:", ";font-weight:500;}"], function (props) {
+  return props.theme.palette['grey-600'];
 });
 export var LargeDropAreaLabel = styled(TypographyLabel).withConfig({
   displayName: "FileUploaderstyles__LargeDropAreaLabel",
   componentId: "sc-62r2x6-4"
 })(["&&{font-size:14px;margin:4px 0 0;display:block;color:", ";}"], function (props) {
-  return props.theme.palette['grey-700'];
+  return props.theme.palette['grey-800'];
 });
-export var LargeDropAreaDescription = styled(Typography.Text).withConfig({
+export var LargeDropAreaDescription = styled(Text).withConfig({
   displayName: "FileUploaderstyles__LargeDropAreaDescription",
   componentId: "sc-62r2x6-5"
 })(["&&{margin:4px 0 0;display:block;color:", ";}"], function (props) {
-  return props.theme.palette['grey-700'];
+  return props.theme.palette['grey-600'];
 });
 export var DropAreaButton = styled.button.withConfig({
   displayName: "FileUploaderstyles__DropAreaButton",
   componentId: "sc-62r2x6-6"
-})(["display:", ";align-items:center;border:1px dashed ", ";padding:11px 12px;border-radius:3px;cursor:pointer;background-color:transparent;width:100%;height:48px;transition:height 0.03s;", ";", "{fill:", ";}span{display:inline-block;margin:0 0 0 12px;}", " ", " &:hover:not(:disabled){background-color:", ";border-color:", ";", ",", "{color:", ";}", "{fill:", ";color:", ";}}&:disabled{background-color:", ";", "{color:", ";}}&&:active{color:", ";border-color:", ";background-color:", ";}&:focus:not(:active):not(:disabled){border-color:", ";background-color:", ";}&:disabled{span,", "{opacity:0.4;}}", ""], function (props) {
+})(["display:", ";align-items:center;border:1px dashed ", ";padding:11px 12px;border-radius:3px;cursor:pointer;background-color:transparent;width:100%;height:48px;transition:height 0.03s;", ";", ";", "{fill:", ";}", " ", " &:hover:not(:disabled){background-color:", ";border-color:", ";", ",", "{color:", ";}", "{fill:", ";color:", ";}}&:disabled{background-color:", ";", "{color:", ";}}&&:active{color:", ";border-color:", ";background-color:", ";}&:focus:not(:active):not(:disabled){border-color:", ";background-color:", ";}&:disabled{span,", "{opacity:0.4;}}", ""], function (props) {
   return props.hidden ? 'none' : 'flex';
 }, function (props) {
   return props.theme.palette['grey-400'];
 }, function (props) {
   return props.mode === 'multi-large' && props.filesLength === 0 && "\n      height: 160px;\n      flex-direction: column;\n      text-align: center;\n      justify-content: center;\n  ";
+}, function (props) {
+  return props.mode !== 'multi-large' && "\n      gap: 12px;\n  ";
 }, IconContainer, function (props) {
   return props.theme.palette['grey-700'];
 }, function (props) {
@@ -81,7 +83,7 @@ export var DropAreaButton = styled.button.withConfig({
 }, IconContainer, function (props) {
   return props.isDropping && !props.disabled && "\n      height: " + (props.mode === 'multi-large' && props.filesLength === 0 ? '160px' : 'auto') + ";\n      background-color: " + props.theme.palette['blue-050'] + " !important;\n      border-color: " + props.theme.palette['blue-300'] + " !important;\n\n      span, " + DropAreaLabel + ", " + LargeDropAreaLabel + ", " + LargeDropAreaDescription + " {\n        color: " + props.theme.palette['blue-500'] + " !important;\n      }\n\n      " + IconContainer + " {\n        fill: " + props.theme.palette['blue-500'] + " !important;\n      }\n    ";
 });
-export var ErrorMessage = styled(Typography.Text).withConfig({
+export var ErrorMessage = styled(Text).withConfig({
   displayName: "FileUploaderstyles__ErrorMessage",
   componentId: "sc-62r2x6-7"
 })(["&&{margin:8px 0 0;display:block;color:", ";}"], function (props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-file-uploader",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "FileUploader UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,14 +34,14 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.23.0",
-    "@synerise/ds-icon": "^0.71.0",
-    "@synerise/ds-loader": "^0.4.0",
-    "@synerise/ds-popconfirm": "^0.11.0",
-    "@synerise/ds-progress-bar": "^0.10.0",
-    "@synerise/ds-tooltip": "^0.15.0",
-    "@synerise/ds-typography": "^0.17.0",
-    "@synerise/ds-utils": "^0.32.0",
+    "@synerise/ds-button": "^0.23.1",
+    "@synerise/ds-icon": "^0.71.1",
+    "@synerise/ds-loader": "^0.4.1",
+    "@synerise/ds-popconfirm": "^0.11.1",
+    "@synerise/ds-progress-bar": "^0.10.1",
+    "@synerise/ds-tooltip": "^0.15.1",
+    "@synerise/ds-typography": "^0.17.1",
+    "@synerise/ds-utils": "^0.32.1",
     "filesize.js": "^2.0.0",
     "react-dropzone": "^10.2.1"
   },
@@ -51,5 +51,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "fbde34e126b492edaf148e469ab96247a891d6df"
+  "gitHead": "38cb22e1c46d175306dd87e10649410eb93a4e44"
 }