demio-ui 2.5.56 → 2.5.58

package/dist/esm/types/src/components/Toast/Toast.d.ts

@@ -0,0 +1,39 @@
+import { FC, ReactNode } from 'react';
+declare global {
+    interface Window {
+        showToast: (options?: IToast) => void;
+    }
+}
+export interface IToast {
+    attempts?: number;
+    className?: string;
+    duration?: number;
+    id?: number;
+    isClosable?: boolean;
+    isInfo?: boolean;
+    isError?: boolean;
+    isSuccess?: boolean;
+    message?: ReactNode;
+    onClose?: (id: number) => void;
+    timeout?: number;
+}
+/**
+ ### Example of usage
+
+ ```
+import { toast } from 'demio-ui';
+  ...
+try {
+  ...
+} catch(error) {
+  toast({
+    message: error?.message || 'Some custom message',
+    isError: true,
+    onClose: (id) => console.log(`Close toast[${id}]`),
+ });
+}
+   ```
+ ##### PS: Toast disappears on pressing the "Escape" button
+ **/
+declare const Toast: FC;
+export default Toast;

package/dist/esm/types/src/components/Toast/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Toast';

package/dist/esm/types/src/components/Upload/Upload.d.ts

@@ -44,5 +44,29 @@ export interface UploadProps {
     previewImageTitle?: string;
     uploadPercent?: number;
 }
+/**
+ The component has 3 states: **default**, **progress** and **preview** states.
+
+ - **Default** state is visible when **uploadPercent** prop is **undefined**.
+ - When the **uploadPercent** prop becomes a **number** and it is **less than 100** the **Upload** automatically switches to a **progress** state.
+ - When the **uploadPercent** prop is **equal to 100** the **Upload** automatically switches to a **preview** mode.
+
+One more useful thing is related to a **UploadRef** interface. It consists of all the methods that need to be accessed through the **ref**. For example:
+
+````
+const uploadRef = useRef<UploadRef>(null);
+
+const handleReset = () => {
+  uploadRef.current?.cancelUpload();
+};
+
+return (
+  <>
+    <Upload ref={uploadRef} />
+    <button onClick={handleReset}>Reset Upload</button>
+  </>
+);
+````
+ **/
 declare const Upload: FC<UploadProps>;
 export default Upload;

package/dist/esm/types/src/components/UploadPreview/UploadPreview.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { UploadMenuItem } from '../UploadMenu/UploadMenu';
+export interface UploadPreviewProps {
+    className?: string;
+    fileName?: string;
+    fileInfo?: string;
+    imageSrc?: string;
+    imageTitle?: string;
+    menu?: UploadMenuItem[];
+}
+declare const UploadPreview: FC<UploadPreviewProps>;
+export default UploadPreview;

package/dist/esm/types/src/components/UploadPreview/index.d.ts

@@ -0,0 +1 @@
+export { default } from './UploadPreview';

package/dist/esm/types/src/components/index.d.ts

@@ -27,6 +27,7 @@ export { default as Slider } from './Slider';
 export { default as Switch } from './Switch';
 export { Tab, TabsContent, TabsList, TabsRoot } from './Tabs';
 export { Tag } from './Tag';
+export { default as Toast } from './Toast';
 export { PopoverTooltip, Tooltip } from './Tooltip';
 export { Typography } from './Typography';
 export { default as Upload } from './Upload';

package/dist/esm/types/src/utils/index.d.ts

@@ -1,2 +1,3 @@
 export { getFileExtension, getFileMimeType, isExtensionMatchingMimeType, isImage, isValidFileDimension, isValidFileSize, isValidFileType, isVideo, mimeTypeMap, } from './file';
 export { createImage, getCroppedImageURL, getRadianAngle, rotateSize } from './image';
+export { toast } from './toast';

package/dist/esm/types/src/utils/toast/index.d.ts

@@ -0,0 +1 @@
+export { toast } from './toast';

package/dist/esm/types/src/utils/toast/toast.d.ts

@@ -0,0 +1,2 @@
+import { IToast } from '../../components/Toast/Toast';
+export declare const toast: (options?: IToast) => void;

package/dist/types.d.ts

@@ -454,6 +454,44 @@ interface TagProps extends PropsWithChildren {
 }
 declare function Tag({ children, onDelete, className }: TagProps): React__default.JSX.Element;
 
+declare global {
+    interface Window {
+        showToast: (options?: IToast) => void;
+    }
+}
+interface IToast {
+    attempts?: number;
+    className?: string;
+    duration?: number;
+    id?: number;
+    isClosable?: boolean;
+    isInfo?: boolean;
+    isError?: boolean;
+    isSuccess?: boolean;
+    message?: ReactNode;
+    onClose?: (id: number) => void;
+    timeout?: number;
+}
+/**
+ ### Example of usage
+
+ ```
+import { toast } from 'demio-ui';
+  ...
+try {
+  ...
+} catch(error) {
+  toast({
+    message: error?.message || 'Some custom message',
+    isError: true,
+    onClose: (id) => console.log(`Close toast[${id}]`),
+ });
+}
+   ```
+ ##### PS: Toast disappears on pressing the "Escape" button
+ **/
+declare const Toast: FC;
+
 type Props = {
     align?: 'start' | 'center' | 'end';
     alignOffset?: number;
@@ -562,6 +600,30 @@ interface UploadProps {
     previewImageTitle?: string;
     uploadPercent?: number;
 }
+/**
+ The component has 3 states: **default**, **progress** and **preview** states.
+
+ - **Default** state is visible when **uploadPercent** prop is **undefined**.
+ - When the **uploadPercent** prop becomes a **number** and it is **less than 100** the **Upload** automatically switches to a **progress** state.
+ - When the **uploadPercent** prop is **equal to 100** the **Upload** automatically switches to a **preview** mode.
+
+One more useful thing is related to a **UploadRef** interface. It consists of all the methods that need to be accessed through the **ref**. For example:
+
+````
+const uploadRef = useRef<UploadRef>(null);
+
+const handleReset = () => {
+  uploadRef.current?.cancelUpload();
+};
+
+return (
+  <>
+    <Upload ref={uploadRef} />
+    <button onClick={handleReset}>Reset Upload</button>
+  </>
+);
+````
+ **/
 declare const Upload: FC<UploadProps>;
 
 interface UploadErrorProps {
@@ -610,7 +672,7 @@ declare const useFileValidation: ({ acceptableFileTypes, fileSizeMbLimit, isVali
     isFileValid: boolean;
 };
 
-var _path$1u, _g$u;
+var _path$1u, _g$t;
 function _extends$1v() { return _extends$1v = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1v.apply(null, arguments); }
 var SvgAdd = function SvgAdd(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1v({
@@ -631,7 +693,7 @@ var SvgAdd = function SvgAdd(props) {
   }, _path$1u || (_path$1u = /*#__PURE__*/React.createElement("path", {
     fill: "#D9D9D9",
     d: "M0 0h24v24H0z"
-  }))), _g$u || (_g$u = /*#__PURE__*/React.createElement("g", {
+  }))), _g$t || (_g$t = /*#__PURE__*/React.createElement("g", {
     mask: "url(#add_svg__a)"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "#2C3336",
@@ -718,7 +780,7 @@ var SvgBarChart = function SvgBarChart(props) {
   })));
 };
 
-var _path$1n, _g$t;
+var _path$1n, _g$s;
 function _extends$1o() { return _extends$1o = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1o.apply(null, arguments); }
 var SvgBlock = function SvgBlock(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1o({
@@ -734,7 +796,7 @@ var SvgBlock = function SvgBlock(props) {
   }, _path$1n || (_path$1n = /*#__PURE__*/React.createElement("path", {
     fill: "#D9D9D9",
     d: "M0 0h24v24H0z"
-  }))), _g$t || (_g$t = /*#__PURE__*/React.createElement("g", {
+  }))), _g$s || (_g$s = /*#__PURE__*/React.createElement("g", {
     mask: "url(#block_svg__a)"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "#42454B",
@@ -742,7 +804,7 @@ var SvgBlock = function SvgBlock(props) {
   }))));
 };
 
-var _path$1m, _g$s;
+var _path$1m, _g$r;
 function _extends$1n() { return _extends$1n = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1n.apply(null, arguments); }
 var SvgBlurOn = function SvgBlurOn(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1n({
@@ -763,7 +825,7 @@ var SvgBlurOn = function SvgBlurOn(props) {
   }, _path$1m || (_path$1m = /*#__PURE__*/React.createElement("path", {
     fill: "#D9D9D9",
     d: "M0 0h24v24H0z"
-  }))), _g$s || (_g$s = /*#__PURE__*/React.createElement("g", {
+  }))), _g$r || (_g$r = /*#__PURE__*/React.createElement("g", {
     mask: "url(#blur_on_svg__a)"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "#2C3336",
@@ -771,7 +833,7 @@ var SvgBlurOn = function SvgBlurOn(props) {
   }))));
 };
 
-var _path$1l, _g$r;
+var _path$1l, _g$q;
 function _extends$1m() { return _extends$1m = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1m.apply(null, arguments); }
 var SvgCached = function SvgCached(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1m({
@@ -789,7 +851,7 @@ var SvgCached = function SvgCached(props) {
   }, _path$1l || (_path$1l = /*#__PURE__*/React.createElement("path", {
     fill: "#D9D9D9",
     d: "M0 0h24v24H0z"
-  }))), _g$r || (_g$r = /*#__PURE__*/React.createElement("g", {
+  }))), _g$q || (_g$q = /*#__PURE__*/React.createElement("g", {
     mask: "url(#cached_svg__a)"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "#2C3336",
@@ -797,7 +859,7 @@ var SvgCached = function SvgCached(props) {
   }))));
 };
 
-var _path$1k, _g$q;
+var _path$1k, _g$p;
 function _extends$1l() { return _extends$1l = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1l.apply(null, arguments); }
 var SvgCalendar = function SvgCalendar(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1l({
@@ -819,7 +881,7 @@ var SvgCalendar = function SvgCalendar(props) {
   }, _path$1k || (_path$1k = /*#__PURE__*/React.createElement("path", {
     fill: "#D9D9D9",
     d: "M0 0h32v32H0z"
-  }))), _g$q || (_g$q = /*#__PURE__*/React.createElement("g", {
+  }))), _g$p || (_g$p = /*#__PURE__*/React.createElement("g", {
     mask: "url(#calendar_svg__a)"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "#11B06E",
@@ -899,32 +961,17 @@ var SvgChatDisabled = function SvgChatDisabled(props) {
   })));
 };
 
-var _path$1f, _g$p;
+var _path$1f;
 function _extends$1g() { return _extends$1g = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1g.apply(null, arguments); }
 var SvgCheckCircle = function SvgCheckCircle(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1g({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24"
-  }, props), /*#__PURE__*/React.createElement("mask", {
-    id: "check_circle_svg__a",
-    width: 24,
-    height: 24,
-    x: 0,
-    y: 0,
-    maskUnits: "userSpaceOnUse",
-    style: {
-      maskType: "alpha"
-    }
-  }, _path$1f || (_path$1f = /*#__PURE__*/React.createElement("path", {
-    fill: "#D9D9D9",
-    d: "M0 0h24v24H0z"
-  }))), _g$p || (_g$p = /*#__PURE__*/React.createElement("g", {
-    mask: "url(#check_circle_svg__a)"
-  }, /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1f || (_path$1f = /*#__PURE__*/React.createElement("path", {
     fill: "#2C3336",
     d: "m10.58 14.146-2.322-2.323a.72.72 0 0 0-.522-.212.7.7 0 0 0-.532.212.72.72 0 0 0-.217.527q0 .31.217.527l2.744 2.744a.87.87 0 0 0 .633.271q.361 0 .632-.27l5.564-5.564a.73.73 0 0 0 .212-.522.7.7 0 0 0-.212-.532.72.72 0 0 0-.527-.217.72.72 0 0 0-.527.217zm1.422 7.354a9.3 9.3 0 0 1-3.705-.748 9.6 9.6 0 0 1-3.018-2.03 9.6 9.6 0 0 1-2.03-3.016 9.2 9.2 0 0 1-.749-3.704q0-1.972.748-3.705a9.6 9.6 0 0 1 2.03-3.018 9.6 9.6 0 0 1 3.016-2.03 9.2 9.2 0 0 1 3.704-.749q1.972 0 3.705.748a9.6 9.6 0 0 1 3.018 2.03 9.6 9.6 0 0 1 2.03 3.016 9.2 9.2 0 0 1 .749 3.704q0 1.972-.748 3.705a9.6 9.6 0 0 1-2.03 3.018 9.6 9.6 0 0 1-3.016 2.03 9.2 9.2 0 0 1-3.704.749"
-  }))));
+  })));
 };
 
 var _path$1e;
@@ -2395,4 +2442,6 @@ declare const getCroppedImageURL: (imageSrc: string, pixelCrop: Area, rotation?:
     vertical: boolean;
 }) => Promise<string | null>;
 
-export { Alert, Avatar, Badge, Button$1 as Button, Button as ButtonNew, Card, Checkbox, Crop, DnDArea, Drawer, DropdownItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuTrigger, FormGroup, InfoBanner, Input, InputHint, Label, Loader, Modal, ModalWindow, MultiSelect, Pagination, Popover, PopoverTooltip, Progress, RadioGroup, Select, SelectItem, SelectItemText, SliderDemo as Slider, Switch, Tab, TabsContent, TabsList, TabsRoot, Tag, Tooltip, Typography, Upload, UploadError, UploadMenu, UploadProgressPreview, createImage, getCroppedImageURL, getFileExtension, getFileMimeType, getRadianAngle, index as icons, isExtensionMatchingMimeType, isImage, isValidFileDimension, isValidFileSize, isValidFileType, isVideo, mimeTypeMap, rotateSize, useCroppedImage, useFileValidation };
+declare const toast: (options?: IToast) => void;
+
+export { Alert, Avatar, Badge, Button$1 as Button, Button as ButtonNew, Card, Checkbox, Crop, DnDArea, Drawer, DropdownItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuTrigger, FormGroup, InfoBanner, Input, InputHint, Label, Loader, Modal, ModalWindow, MultiSelect, Pagination, Popover, PopoverTooltip, Progress, RadioGroup, Select, SelectItem, SelectItemText, SliderDemo as Slider, Switch, Tab, TabsContent, TabsList, TabsRoot, Tag, Toast, Tooltip, Typography, Upload, UploadError, UploadMenu, UploadProgressPreview, createImage, getCroppedImageURL, getFileExtension, getFileMimeType, getRadianAngle, index as icons, isExtensionMatchingMimeType, isImage, isValidFileDimension, isValidFileSize, isValidFileType, isVideo, mimeTypeMap, rotateSize, toast, useCroppedImage, useFileValidation };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "demio-ui",
-  "version": "2.5.56",
+  "version": "2.5.58",
   "description": "",
   "repository": {
     "type": "git",
@@ -62,9 +62,9 @@
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@storybook/preset-react-webpack": "^8.4.4",
-    "@storybook/react": "^8.4.4",
-    "@storybook/react-webpack5": "^8.4.4",
+    "@storybook/preset-react-webpack": "^8.6.10",
+    "@storybook/react": "^8.6.10",
+    "@storybook/react-webpack5": "^8.6.10",
     "classnames": "^2.5.1",
     "react-easy-crop": "^5.0.8",
     "react-select": "^5.8.0"
@@ -79,18 +79,18 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.5",
-    "@storybook/addon-a11y": "^8.4.4",
-    "@storybook/addon-actions": "^8.4.4",
-    "@storybook/addon-essentials": "^8.4.4",
-    "@storybook/addon-interactions": "^8.4.4",
-    "@storybook/addon-links": "^8.4.4",
-    "@storybook/addon-mdx-gfm": "^8.4.4",
+    "@storybook/addon-a11y": "^8.6.10",
+    "@storybook/addon-actions": "^8.6.10",
+    "@storybook/addon-essentials": "^8.6.10",
+    "@storybook/addon-interactions": "^8.6.10",
+    "@storybook/addon-links": "^8.6.10",
+    "@storybook/addon-mdx-gfm": "^8.6.10",
     "@storybook/addon-styling-webpack": "^1.0.1",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/cli": "^8.4.4",
-    "@storybook/manager-api": "^8.4.4",
-    "@storybook/test": "^8.4.4",
-    "@storybook/theming": "^8.4.4",
+    "@storybook/cli": "^8.6.10",
+    "@storybook/manager-api": "^8.6.10",
+    "@storybook/test": "^8.6.10",
+    "@storybook/theming": "^8.6.10",
     "@svgr/rollup": "^8.1.0",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.1.6",
@@ -106,7 +106,7 @@
     "eslint": "^8.56.0",
     "eslint-plugin-prettier": "^5.1.2",
     "eslint-plugin-simple-import-sort": "^12.0.0",
-    "eslint-plugin-storybook": "^0.11.1",
+    "eslint-plugin-storybook": "^0.12.0",
     "file-loader": "^6.2.0",
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
@@ -124,7 +124,7 @@
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^8.4.4",
+    "storybook": "^8.6.10",
     "storybook-css-modules": "^1.0.8",
     "stylelint": "^16.1.0",
     "stylelint-config-standard": "^36.0.0",

package/dist/cjs/types/src/components/Crop/Crop.utils.d.ts

@@ -1,11 +0,0 @@
-import { Area } from 'react-easy-crop';
-export declare const createImage: (url: string) => Promise<HTMLImageElement>;
-export declare const getRadianAngle: (degreeValue?: number) => number;
-export declare const rotateSize: (width: number, height: number, rotation: number) => {
-    width: number;
-    height: number;
-};
-export declare const getCroppedImageURL: (imageSrc: string, pixelCrop: Area, rotation?: number, flip?: {
-    horizontal: boolean;
-    vertical: boolean;
-}) => Promise<string | null>;

package/dist/cjs/types/src/components/DnDArea/DnDArea.utils.d.ts

@@ -1,3 +0,0 @@
-export declare const isValidFileType: (file?: File | null, acceptableTypePattern?: string) => boolean;
-export declare const isValidFileSize: (file?: File | null, fileSizeMbLimit?: number) => boolean;
-export declare const isValidFileDimension: (file?: File | null, minWidth?: number, minHeight?: number) => Promise<boolean>;

package/dist/cjs/types/src/components/Pagination/Pagination.utils.d.ts

@@ -1,7 +0,0 @@
-export declare const getPagesData: ({ currentPage, pageCount, }: {
-    currentPage: number;
-    pageCount: number;
-}) => {
-    pages: number[];
-    latestPage: number;
-};

package/dist/cjs/types/src/hooks/useCroppedImage.d.ts

@@ -1,4 +0,0 @@
-import { Area } from 'react-easy-crop';
-export declare const useCroppedImage: (image: string, croppedArea: Area | null) => {
-    croppedImageURL: string;
-};

package/dist/esm/types/src/components/Crop/Crop.utils.d.ts

@@ -1,11 +0,0 @@
-import { Area } from 'react-easy-crop';
-export declare const createImage: (url: string) => Promise<HTMLImageElement>;
-export declare const getRadianAngle: (degreeValue?: number) => number;
-export declare const rotateSize: (width: number, height: number, rotation: number) => {
-    width: number;
-    height: number;
-};
-export declare const getCroppedImageURL: (imageSrc: string, pixelCrop: Area, rotation?: number, flip?: {
-    horizontal: boolean;
-    vertical: boolean;
-}) => Promise<string | null>;

package/dist/esm/types/src/components/DnDArea/DnDArea.utils.d.ts

@@ -1,3 +0,0 @@
-export declare const isValidFileType: (file?: File | null, acceptableTypePattern?: string) => boolean;
-export declare const isValidFileSize: (file?: File | null, fileSizeMbLimit?: number) => boolean;
-export declare const isValidFileDimension: (file?: File | null, minWidth?: number, minHeight?: number) => Promise<boolean>;

package/dist/esm/types/src/components/Pagination/Pagination.utils.d.ts

@@ -1,7 +0,0 @@
-export declare const getPagesData: ({ currentPage, pageCount, }: {
-    currentPage: number;
-    pageCount: number;
-}) => {
-    pages: number[];
-    latestPage: number;
-};

package/dist/esm/types/src/hooks/useCroppedImage.d.ts

@@ -1,4 +0,0 @@
-import { Area } from 'react-easy-crop';
-export declare const useCroppedImage: (image: string, croppedArea: Area | null) => {
-    croppedImageURL: string;
-};