@ssa-ui-kit/core 3.15.0 → 3.15.1

package/dist/components/index.d.ts

@@ -40,6 +40,9 @@ export * from './DateRangePicker';
 export * from './ColorPicker';
 export * from './SearchBox';
 export type * from './SearchBox/types';
+export { default as FileUpload } from './FileUpload';
+export { FileUploadItem } from './FileUpload';
+export type * from './FileUpload/types';
 export * from './Field';
 export { default as Form } from './Form';
 export { default as FormAction } from './FormAction';

package/dist/index.js

@@ -7999,6 +7999,8 @@ __webpack_require__.d(__webpack_exports__, {
   DropdownOptions: () => (/* reexport */ DropdownOptions_DropdownOptions),
   DropdownToggle: () => (/* reexport */ DropdownToggle_DropdownToggle),
   Field: () => (/* reexport */ index_parts_namespaceObject),
+  FileUpload: () => (/* reexport */ FileUpload_FileUpload),
+  FileUploadItem: () => (/* reexport */ FileUpload_FileUploadItem),
   Filters: () => (/* reexport */ Filters),
   FiltersMultiSelect: () => (/* reexport */ FiltersMultiSelect),
   FiltersMultiSelectEmpty: () => (/* reexport */ FiltersMultiSelectEmpty),
@@ -28718,6 +28720,338 @@ const SearchBox = ({
 
 
 
+;// ./src/components/FileUpload/styles.ts
+function FileUpload_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+const wrapper =  true ? {
+  name: "b6wrti",
+  styles: "display:flex;flex-direction:column;width:100%"
+} : 0;
+const hiddenInput =  true ? {
+  name: "eivff4",
+  styles: "display:none"
+} : 0;
+
+// ─── Input row (button + filename) ───────────────────────────────────────────
+
+const inputRow = theme => /*#__PURE__*/(0,react_namespaceObject.css)("display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:4px 14px 4px 4px;background:", theme.colors.white, ";border:1px solid ", theme.colors.grey, ";border-radius:12px;cursor:default;&:hover{border-color:", theme.colors.greyDarker80, ";}" + ( true ? "" : 0),  true ? "" : 0);
+const inputRowError = theme => /*#__PURE__*/(0,react_namespaceObject.css)("border-color:", theme.palette.error.light, ";&:hover{border-color:", theme.palette.error.main, ";}" + ( true ? "" : 0),  true ? "" : 0);
+const inputRowDisabled = theme => /*#__PURE__*/(0,react_namespaceObject.css)("background:", theme.colors.greyLighter, ";border-color:", theme.colors.grey, ";pointer-events:none;&:hover{border-color:", theme.colors.grey, ";}" + ( true ? "" : 0),  true ? "" : 0);
+const fileNameText = theme => /*#__PURE__*/(0,react_namespaceObject.css)("flex:1;font-size:0.875rem;font-weight:400;line-height:1rem;color:", theme.colors.greyDarker, ";overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" + ( true ? "" : 0),  true ? "" : 0);
+const placeholderText = theme => /*#__PURE__*/(0,react_namespaceObject.css)("color:", theme.colors.greyDarker60, ";" + ( true ? "" : 0),  true ? "" : 0);
+
+// ─── Drop area ────────────────────────────────────────────────────────────────
+
+const dropArea = theme => /*#__PURE__*/(0,react_namespaceObject.css)("display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;min-height:160px;padding:32px 24px;background:", theme.palette.secondary.light, ";border:2px solid ", theme.colors.grey, ";border-radius:16px;cursor:pointer;transition:all 0.15s ease;&:hover{border:2px dashed ", theme.palette.primary.main, ";background:", theme.colors.blueRoyal6, ";}&:focus{outline:none;border:2px dashed ", theme.palette.primary.main, ";background:", theme.colors.blueRoyal6, ";}" + ( true ? "" : 0),  true ? "" : 0);
+const dropAreaActive = theme => /*#__PURE__*/(0,react_namespaceObject.css)("border:2px dashed ", theme.palette.primary.main, ";background:", theme.colors.blueRoyal6, ";" + ( true ? "" : 0),  true ? "" : 0);
+const dropAreaError = theme => /*#__PURE__*/(0,react_namespaceObject.css)("border-color:", theme.palette.error.light, ";background:", theme.colors.redLighter6, ";&:hover{border-color:", theme.palette.error.main, ";background:", theme.colors.redLighter6, ";}" + ( true ? "" : 0),  true ? "" : 0);
+const dropAreaDisabled = theme => /*#__PURE__*/(0,react_namespaceObject.css)("background:", theme.colors.greyLighter, ";border-color:", theme.colors.grey, ";cursor:not-allowed;pointer-events:none;opacity:0.6;" + ( true ? "" : 0),  true ? "" : 0);
+const dropAreaTitle = theme => /*#__PURE__*/(0,react_namespaceObject.css)("font-size:0.9375rem;font-weight:600;color:", theme.colors.greyDarker, ";text-align:center;margin-top:4px;" + ( true ? "" : 0),  true ? "" : 0);
+const dropAreaHint = theme => /*#__PURE__*/(0,react_namespaceObject.css)("font-size:0.8125rem;font-weight:400;color:", theme.colors.greyDarker60, ";text-align:center;" + ( true ? "" : 0),  true ? "" : 0);
+const dropAreaAction = theme => /*#__PURE__*/(0,react_namespaceObject.css)("font-size:0.875rem;font-weight:400;color:", theme.colors.greyDarker, ";text-align:center;margin-top:4px;" + ( true ? "" : 0),  true ? "" : 0);
+const dropAreaClearButton = theme => /*#__PURE__*/(0,react_namespaceObject.css)("display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:4px 10px;font-size:0.8125rem;font-weight:400;color:", theme.colors.greyDarker60, ";background:transparent;border:1px solid ", theme.colors.grey, ";border-radius:8px;cursor:pointer;transition:all 0.15s ease;&:hover{color:", theme.palette.error.main, ";border-color:", theme.palette.error.light, ";& svg{stroke:", theme.palette.error.main, ";}}&:disabled{opacity:0.5;cursor:not-allowed;}" + ( true ? "" : 0),  true ? "" : 0);
+
+// ─── Uploaded files list ──────────────────────────────────────────────────────
+
+const filesList =  true ? {
+  name: "pm5s94",
+  styles: "display:flex;flex-direction:column;gap:8px;margin-top:12px"
+} : 0;
+const filesListTitle = theme => /*#__PURE__*/(0,react_namespaceObject.css)("font-size:0.875rem;font-weight:500;color:", theme.colors.greyDarker, ";margin-bottom:4px;" + ( true ? "" : 0),  true ? "" : 0);
+
+// ─── File item ────────────────────────────────────────────────────────────────
+
+const fileItem = theme => /*#__PURE__*/(0,react_namespaceObject.css)("display:flex;align-items:center;gap:12px;padding:12px 16px;background:", theme.colors.white, ";border:1px solid ", theme.colors.grey, ";border-radius:12px;" + ( true ? "" : 0),  true ? "" : 0);
+const fileIconWrapper =  true ? {
+  name: "1xuq60z",
+  styles: "flex-shrink:0;display:flex;align-items:center;justify-content:center"
+} : 0;
+const fileInfo =  true ? {
+  name: "1k33dov",
+  styles: "flex:1;display:flex;flex-direction:column;gap:2px;min-width:0"
+} : 0;
+const fileName = theme => /*#__PURE__*/(0,react_namespaceObject.css)("font-size:0.875rem;font-weight:600;color:", theme.colors.greyDarker, ";overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" + ( true ? "" : 0),  true ? "" : 0);
+const fileSize = theme => /*#__PURE__*/(0,react_namespaceObject.css)("font-size:0.75rem;font-weight:400;color:", theme.colors.greyDarker60, ";" + ( true ? "" : 0),  true ? "" : 0);
+const deleteButton = theme => /*#__PURE__*/(0,react_namespaceObject.css)("flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:transparent;border:none;border-radius:8px;cursor:pointer;color:", theme.colors.greyDarker60, ";transition:color 0.15s ease,background 0.15s ease;&:hover{color:", theme.palette.error.main, ";background:", theme.colors.greyLighter, ";}&:disabled{cursor:not-allowed;opacity:0.5;}" + ( true ? "" : 0),  true ? "" : 0);
+;// ./src/components/FileUpload/FileUploadItem.tsx
+
+
+
+
+const formatFileSize = bytes => {
+  if (bytes === 0) return '0 B';
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+const FileUploadItem = ({
+  file,
+  onRemove,
+  disabled
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  return (0,jsx_runtime_namespaceObject.jsxs)("div", {
+    css: fileItem(theme),
+    children: [(0,jsx_runtime_namespaceObject.jsx)("div", {
+      css: fileIconWrapper,
+      children: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+        name: "file-pdf",
+        size: 32,
+        color: theme.colors.greyDarker60
+      })
+    }), (0,jsx_runtime_namespaceObject.jsxs)("div", {
+      css: fileInfo,
+      children: [(0,jsx_runtime_namespaceObject.jsx)("span", {
+        css: fileName(theme),
+        children: file.name
+      }), (0,jsx_runtime_namespaceObject.jsx)("span", {
+        css: fileSize(theme),
+        children: formatFileSize(file.size)
+      })]
+    }), (0,jsx_runtime_namespaceObject.jsx)("button", {
+      css: deleteButton(theme),
+      type: "button",
+      disabled: disabled,
+      onClick: () => onRemove(file),
+      "aria-label": `Remove ${file.name}`,
+      children: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+        name: "bin",
+        size: 16,
+        color: "currentColor"
+      })
+    })]
+  });
+};
+/* harmony default export */ const FileUpload_FileUploadItem = (FileUploadItem);
+;// ./src/components/FileUpload/FileUpload.tsx
+
+
+
+
+
+
+
+
+
+const normalizeValue = value => {
+  if (!value) return [];
+  return Array.isArray(value) ? value : [value];
+};
+const formatBytes = bytes => {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${Math.round(bytes / (1024 * 1024))} MB`;
+};
+
+/**
+ * FileUpload - File input component with optional drag-and-drop support
+ *
+ * Supports single and multi-file selection with built-in validation for
+ * file formats and size. In multi-file mode, selected files are listed
+ * below the input with individual remove controls.
+ *
+ * @example
+ * ```tsx
+ * // Single file
+ * <FileUpload
+ *   label="Attachment"
+ *   placeholder="No file selected"
+ *   actionText="Choose File"
+ *   allowedFormats={['pdf', 'doc']}
+ *   maxFileSize={5 * 1024 * 1024}
+ *   onChange={(files) => console.log(files)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Multi-file with drop area
+ * <FileUpload
+ *   label="Documents"
+ *   isMultiFile
+ *   maxFiles={5}
+ *   withDropArea
+ *   uploadedSectionTitle="Uploaded files"
+ *   value={files}
+ *   onChange={setFiles}
+ * />
+ * ```
+ */
+const FileUpload = ({
+  label,
+  placeholder = 'No file selected',
+  helperText,
+  actionText = 'Choose File',
+  error,
+  disabled = false,
+  css,
+  className,
+  allowedFormats,
+  maxFileSize,
+  isMultiFile = false,
+  maxFiles,
+  withDropArea = false,
+  uploadedSectionTitle,
+  value,
+  onChange,
+  onFileRejected
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  const inputRef = (0,external_react_namespaceObject.useRef)(null);
+  const [files, setFiles] = (0,external_react_namespaceObject.useState)(normalizeValue(value));
+  const [isDragOver, setIsDragOver] = (0,external_react_namespaceObject.useState)(false);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    setFiles(normalizeValue(value));
+  }, [value]);
+  const applyValidation = (0,external_react_namespaceObject.useCallback)(incoming => {
+    const notify = (file, reason) => onFileRejected?.(file, reason);
+    return incoming.filter(file => {
+      if (allowedFormats?.length && !allowedFormats.some(item => file.name.toLowerCase().endsWith(`.${item.toLowerCase()}`) || file.type.toLowerCase().includes(item.toLowerCase()))) {
+        notify(file, 'format');
+        return false;
+      }
+      if (maxFileSize && file.size > maxFileSize) {
+        notify(file, 'size');
+        return false;
+      }
+      return true;
+    });
+  }, [allowedFormats, maxFileSize, onFileRejected]);
+  const mergeFiles = (0,external_react_namespaceObject.useCallback)((current, incoming) => {
+    if (!isMultiFile) return incoming.slice(0, 1);
+    const combined = [...current, ...incoming];
+    return maxFiles ? combined.slice(0, maxFiles) : combined;
+  }, [isMultiFile, maxFiles]);
+  const handleFilesChange = (0,external_react_namespaceObject.useCallback)(incoming => {
+    const validated = applyValidation(incoming);
+    const merged = mergeFiles(files, validated);
+    setFiles(merged);
+    onChange?.(merged);
+  }, [files, applyValidation, mergeFiles, onChange]);
+  const handleInputChange = e => {
+    const selected = Array.from(e.target.files ?? []);
+    handleFilesChange(selected);
+    e.target.value = '';
+  };
+  const handleRemove = file => {
+    const updated = files.filter(f => f !== file);
+    setFiles(updated);
+    onChange?.(updated);
+  };
+  const handleChooseClick = () => {
+    if (!disabled) inputRef.current?.click();
+  };
+  const handleDragOver = e => {
+    e.preventDefault();
+    if (!disabled) setIsDragOver(true);
+  };
+  const handleDragLeave = () => setIsDragOver(false);
+  const handleDrop = e => {
+    e.preventDefault();
+    setIsDragOver(false);
+    if (disabled) return;
+    handleFilesChange(Array.from(e.dataTransfer.files));
+  };
+  const acceptAttr = allowedFormats?.map(f => `.${f}`).join(',');
+  const hasError = !!error;
+  const inlineFileName = !isMultiFile && files[0]?.name;
+  const showUploadedFiles = isMultiFile && files.length > 0;
+  return (0,jsx_runtime_namespaceObject.jsxs)("div", {
+    css: [wrapper, css,  true ? "" : 0,  true ? "" : 0],
+    className: className,
+    children: [label && (0,jsx_runtime_namespaceObject.jsx)(Label_Label, {
+      isDisabled: disabled,
+      children: label
+    }), (0,jsx_runtime_namespaceObject.jsx)("input", {
+      ref: inputRef,
+      type: "file",
+      css: hiddenInput,
+      multiple: isMultiFile,
+      accept: acceptAttr,
+      onChange: handleInputChange,
+      disabled: disabled
+    }), withDropArea ? (0,jsx_runtime_namespaceObject.jsx)("div", {
+      css: [dropArea(theme), isDragOver && dropAreaActive(theme), hasError && dropAreaError(theme), disabled && dropAreaDisabled(theme),  true ? "" : 0,  true ? "" : 0],
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      onClick: !isMultiFile && files[0] ? undefined : handleChooseClick,
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      onKeyDown: e => e.key === 'Enter' && !files[0] && handleChooseClick(),
+      children: !isMultiFile && files[0] ? (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        children: [(0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+          name: "file-pdf",
+          size: 36,
+          color: theme.colors.greyDarker60
+        }), (0,jsx_runtime_namespaceObject.jsx)("span", {
+          css: dropAreaTitle(theme),
+          children: files[0].name
+        }), (0,jsx_runtime_namespaceObject.jsx)("span", {
+          css: dropAreaHint(theme),
+          children: formatBytes(files[0].size)
+        }), (0,jsx_runtime_namespaceObject.jsxs)("button", {
+          css: dropAreaClearButton(theme),
+          type: "button",
+          disabled: disabled,
+          onClick: e => {
+            e.stopPropagation();
+            handleRemove(files[0]);
+          },
+          "aria-label": "Remove file",
+          children: [(0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+            name: "delete",
+            size: 14,
+            color: theme.colors.greyDarker60
+          }), "Remove"]
+        })]
+      }) : (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        children: [(0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+          name: "export",
+          size: 28,
+          color: isDragOver ? theme.palette.primary.main : theme.colors.greyDarker60
+        }), (0,jsx_runtime_namespaceObject.jsx)("span", {
+          css: dropAreaTitle(theme),
+          children: placeholder || 'Drag and drop your files'
+        }), helperText, (0,jsx_runtime_namespaceObject.jsx)("span", {
+          css: dropAreaAction(theme),
+          children: actionText
+        })]
+      })
+    }) : (0,jsx_runtime_namespaceObject.jsxs)("div", {
+      css: [inputRow(theme), hasError && inputRowError(theme), disabled && inputRowDisabled(theme),  true ? "" : 0,  true ? "" : 0],
+      children: [(0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
+        variant: "primary",
+        size: "small",
+        text: actionText,
+        isDisabled: disabled,
+        onClick: handleChooseClick,
+        type: "button"
+      }), (0,jsx_runtime_namespaceObject.jsx)("span", {
+        css: [fileNameText(theme), !inlineFileName && placeholderText(theme),  true ? "" : 0,  true ? "" : 0],
+        children: inlineFileName || placeholder
+      })]
+    }), (error || helperText && !withDropArea) && (0,jsx_runtime_namespaceObject.jsx)(FormHelperText_FormHelperText, {
+      status: error ? 'error' : 'basic',
+      disabled: disabled,
+      css: withDropArea ? {
+        marginTop: 12
+      } : undefined,
+      children: error || helperText
+    }), showUploadedFiles && (0,jsx_runtime_namespaceObject.jsxs)("div", {
+      css: filesList,
+      children: [uploadedSectionTitle && (0,jsx_runtime_namespaceObject.jsx)("span", {
+        css: filesListTitle(theme),
+        children: uploadedSectionTitle
+      }), files.map((file, index) => (0,jsx_runtime_namespaceObject.jsx)(FileUpload_FileUploadItem, {
+        file: file,
+        onRemove: handleRemove,
+        disabled: disabled
+      }, `${file.name}-${index}`))]
+    })]
+  });
+};
+/* harmony default export */ const FileUpload_FileUpload = (FileUpload);
 ;// ./src/components/Field/index.parts.ts
 
 
@@ -33630,7 +33964,7 @@ const Progress = ({
 ;// ./src/components/ProgressBar/styles.ts
 function ProgressBar_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
-const wrapper = theme => /*#__PURE__*/(0,react_namespaceObject.css)("position:relative;background-color:", theme.colors.greyLighter, ";border-radius:12px;box-shadow:inset 0 -1px 1px ", theme.colors.white30, ";" + ( true ? "" : 0),  true ? "" : 0);
+const styles_wrapper = theme => /*#__PURE__*/(0,react_namespaceObject.css)("position:relative;background-color:", theme.colors.greyLighter, ";border-radius:12px;box-shadow:inset 0 -1px 1px ", theme.colors.white30, ";" + ( true ? "" : 0),  true ? "" : 0);
 var ProgressBar_styles_ref =  true ? {
   name: "14rz325",
   styles: "position:absolute;display:block;bottom:0;border-radius:12px"
@@ -33680,7 +34014,7 @@ const ProgressBar = /*#__PURE__*/(0,external_react_namespaceObject.forwardRef)(f
   };
   return (0,jsx_runtime_namespaceObject.jsx)("div", {
     ref: ref,
-    css: [wrapper, {
+    css: [styles_wrapper, {
       backgroundColor: bgColor
     },  true ? "" : 0,  true ? "" : 0],
     style: {
@@ -58365,6 +58699,8 @@ const UserProfile = ({
 
 
 
+
+
 
 
 
@@ -58560,5 +58896,4 @@ const useTranslation = () => (0,external_react_namespaceObject.useContext)(Trans
 /******/ 	return __webpack_exports__;
 /******/ })()
 ;
-});
-//# sourceMappingURL=index.js.map
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "3.15.0",
+  "version": "3.15.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -39,8 +39,8 @@
     "luxon": "3.5.0",
     "plotly.js": "3.0.0",
     "react-plotly.js": "2.6.0",
-    "@ssa-ui-kit/hooks": "^3.15.0",
-    "@ssa-ui-kit/utils": "^3.15.0"
+    "@ssa-ui-kit/hooks": "^3.15.1",
+    "@ssa-ui-kit/utils": "^3.15.1"
   },
   "devDependencies": {
     "@emotion/css": "11.13.5",
@@ -88,8 +88,8 @@
   },
   "scripts": {
     "test": "jest -i --no-cache",
-    "build": "webpack --mode=production --node-env=production && tsc --build --force ./tsconfig.build.json && resolve-tspaths -p ./tsconfig.build.json",
-    "build:watch": "webpack --mode=production --node-env=production --watch && tsc --build --force ./tsconfig.build.json && resolve-tspaths -p ./tsconfig.build.json",
+    "build": "webpack --mode=production --node-env=production && tsc --build ./tsconfig.build.json && resolve-tspaths -p ./tsconfig.build.json",
+    "build:watch": "webpack --mode=production --node-env=production --watch && tsc --build ./tsconfig.build.json && resolve-tspaths -p ./tsconfig.build.json",
     "sb:dev": "env storybook dev -p 6006",
     "sb:build": "env storybook build",
     "test:e2e": "pnpm exec playwright test --project=chromium",