@douyinfe/semi-ui 2.19.2-alpha.0 → 2.20.0-beta.1

package/lib/cjs/locale/source/ko_KR.js

@@ -159,6 +159,19 @@ const local = {
   },
   Form: {
     optional: '(선택 과목)'
+  },
+  Image: {
+    preview: '시사',
+    loading: '로딩 중',
+    loadError: '불러 오지 못했습니다',
+    prevTip: '이전',
+    nextTip: '다음',
+    zoomInTip: '확대',
+    zoomOutTip: '축소',
+    rotateTip: '회전',
+    downloadTip: '다운로드',
+    adaptiveTip: '페이지에 맞게 조정',
+    originTip: '원래 크기'
   }
 }; // [i18n-Korea]
 

package/lib/cjs/locale/source/ms_MY.js

@@ -158,6 +158,19 @@ const local = {
   },
   Form: {
     optional: '(pilihan)'
+  },
+  Image: {
+    preview: 'Pratonton',
+    loading: 'Memuatkan',
+    loadError: 'Gagal memuatkan',
+    prevTip: 'Sebelumnya',
+    nextTip: 'Seterusnya',
+    zoomInTip: 'Zum masuk',
+    zoomOutTip: 'zum keluar',
+    rotateTip: 'Putar',
+    downloadTip: 'muat turun',
+    adaptiveTip: 'Menyesuaikan diri dengan halaman',
+    originTip: 'Saiz asal'
   }
 }; // [i18n-Malaysia(MY)]
 

package/lib/cjs/locale/source/pt_BR.js

@@ -166,6 +166,19 @@ const local = {
   },
   Form: {
     optional: '(opcional)'
+  },
+  Image: {
+    preview: 'Visualizar',
+    loading: 'Carregando',
+    loadError: 'Falha ao carregar',
+    prevTip: 'Anterior',
+    nextTip: 'Próximo',
+    zoomInTip: 'Ampliar',
+    zoomOutTip: 'reduzir',
+    rotateTip: 'Girar',
+    downloadTip: 'baixar',
+    adaptiveTip: 'Adaptar à página',
+    originTip: 'Tamanho original'
   }
 }; // 葡萄牙语
 

package/lib/cjs/locale/source/ru_RU.js

@@ -161,6 +161,19 @@ const local = {
   },
   Form: {
     optional: '(по желанию)'
+  },
+  Image: {
+    preview: 'предварительный просмотр',
+    loading: 'Загрузка',
+    loadError: 'Ошибка загрузки',
+    prevTip: 'Предыдущий',
+    nextTip: 'Далее',
+    zoomInTip: 'Увеличить',
+    zoomOutTip: 'уменьшить масштаб',
+    rotateTip: 'Повернуть',
+    downloadTip: 'скачать',
+    adaptiveTip: 'Адаптировать к странице',
+    originTip: 'Исходный размер'
   }
 }; // [i18n-Russia] 俄罗斯语
 

package/lib/cjs/locale/source/th_TH.js

@@ -162,6 +162,19 @@ const local = {
   },
   Form: {
     optional: '(ไม่จำเป็น)'
+  },
+  Image: {
+    preview: 'ดูตัวอย่าง',
+    loading: 'กำลังโหลด',
+    loadError: 'โหลดไม่สำเร็จ',
+    prevTip: 'ก่อนหน้า',
+    nextTip: 'ถัดไป',
+    zoomInTip: 'ซูมเข้า',
+    zoomOutTip: 'ซูมออก',
+    rotateTip: 'หมุน',
+    downloadTip: 'ดาวน์โหลด',
+    adaptiveTip: 'ปรับให้เข้ากับหน้า',
+    originTip: 'ขนาดเดิม'
   }
 }; // [i18n-Thai]
 

package/lib/cjs/locale/source/tr_TR.js

@@ -161,6 +161,19 @@ const local = {
   },
   Form: {
     optional: '(isteğe bağlı)'
+  },
+  Image: {
+    preview: 'Ön izleme',
+    loading: 'Yükleniyor',
+    loadError: 'Yükleme başarısız',
+    prevTip: 'Önceki',
+    nextTip: 'Sonraki',
+    zoomInTip: 'Yakınlaştır',
+    zoomOutTip: 'uzaklaştır',
+    rotateTip: 'Döndür',
+    downloadTip: 'indir',
+    adaptiveTip: 'Sayfaya uyarla',
+    originTip: 'Orijinal boyut'
   }
 }; // [i18n-Turkish] 
 

package/lib/cjs/locale/source/vi_VN.js

@@ -161,6 +161,19 @@ const local = {
   },
   Form: {
     optional: '(không bắt buộc)'
+  },
+  Image: {
+    preview: 'xem trước',
+    loading: 'Đang tải',
+    loadError: 'Không tải được',
+    prevTip: 'Trước đó',
+    nextTip: 'Next',
+    zoomInTip: 'Phóng to',
+    zoomOutTip: 'thu nhỏ',
+    rotateTip: 'Xoay',
+    downloadTip: 'download',
+    adaptiveTip: 'Thích ứng với trang',
+    originTip: 'Kích thước ban đầu'
   }
 }; // [i18n-Vietnam] 越南语
 

package/lib/cjs/locale/source/zh_CN.js

@@ -159,6 +159,19 @@ const local = {
   },
   Form: {
     optional: '（可选）'
+  },
+  Image: {
+    preview: '预览',
+    loading: '加载中',
+    loadError: '加载失败',
+    prevTip: '上一张',
+    nextTip: '下一张',
+    zoomInTip: '放大',
+    zoomOutTip: '缩小',
+    rotateTip: '旋转',
+    downloadTip: '下载',
+    adaptiveTip: '适应页面',
+    originTip: '原始尺寸'
   }
 }; // 中文
 

package/lib/cjs/locale/source/zh_TW.js

@@ -159,6 +159,19 @@ const local = {
   },
   Form: {
     optional: '（可選）'
+  },
+  Image: {
+    preview: '預覽',
+    loading: '加載中',
+    loadError: '加載失敗',
+    prevTip: '上一張',
+    nextTip: '下一張',
+    zoomInTip: '放大',
+    zoomOutTip: '縮小',
+    rotateTip: '旋轉',
+    downloadTip: '下載',
+    adaptiveTip: '適應頁面',
+    originTip: '原始尺寸'
   }
 }; // 中文
 

package/lib/cjs/progress/index.d.ts

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import '@douyinfe/semi-foundation/lib/cjs/progress/progress.css';
 import { Animation } from '@douyinfe/semi-animation';
 import { Motion } from '../_base/base';
+import { StrokeArr } from '@douyinfe/semi-foundation/lib/cjs/progress/generates';
 export interface ProgressProps {
     'aria-label'?: string | undefined;
     'aria-labelledby'?: string | undefined;
@@ -16,7 +17,8 @@ export interface ProgressProps {
     percent?: number;
     showInfo?: boolean;
     size?: 'default' | 'small' | 'large';
-    stroke?: string;
+    stroke?: string | StrokeArr;
+    strokeGradient?: boolean;
     strokeLinecap?: 'round' | 'square';
     strokeWidth?: number;
     style?: React.CSSProperties;
@@ -41,7 +43,11 @@ declare class Progress extends Component<ProgressProps, ProgressState> {
         scale: PropTypes.Requireable<number>;
         showInfo: PropTypes.Requireable<boolean>;
         size: PropTypes.Requireable<string>;
-        stroke: PropTypes.Requireable<string>;
+        stroke: PropTypes.Requireable<string | PropTypes.InferProps<{
+            percent: PropTypes.Requireable<number>;
+            color: PropTypes.Requireable<string>;
+        }>[]>;
+        strokeGradient: PropTypes.Requireable<boolean>;
         strokeLinecap: PropTypes.Requireable<string>;
         strokeWidth: PropTypes.Requireable<number>;
         style: PropTypes.Requireable<object>;
@@ -58,6 +64,7 @@ declare class Progress extends Component<ProgressProps, ProgressState> {
         showInfo: boolean;
         size: string;
         stroke: string;
+        strokeGradient: boolean;
         strokeLinecap: string;
         strokeWidth: number;
         style: {};
@@ -70,6 +77,7 @@ declare class Progress extends Component<ProgressProps, ProgressState> {
     componentWillUnmount(): void;
     renderCircleProgress(): ReactNode;
     calcPercent(percent: number): number;
+    selectStroke(stroke: string | StrokeArr, percent: number, strokeGradient: any): string;
     renderLineProgress(): ReactNode;
     render(): ReactNode;
 }

package/lib/cjs/progress/index.js

@@ -17,6 +17,8 @@ require("@douyinfe/semi-foundation/lib/cjs/progress/progress.css");
 
 var _semiAnimation = require("@douyinfe/semi-animation");
 
+var _generates = require("@douyinfe/semi-foundation/lib/cjs/progress/generates");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -107,6 +109,7 @@ class Progress extends _react.Component {
       format,
       size,
       stroke,
+      strokeGradient,
       showInfo,
       percent,
       orbitStroke,
@@ -131,7 +134,10 @@ class Progress extends _react.Component {
       width = this.props.width;
     } else {
       size === _constants.strings.DEFAULT_SIZE ? width = 72 : width = 24;
-    } // cx, cy is circle center
+    } // parse stroke & generate gradients
+
+
+    const _stroke = this.selectStroke(stroke, percent, strokeGradient); // cx, cy is circle center
 
 
     const cy = width / 2;
@@ -147,7 +153,7 @@ class Progress extends _react.Component {
       id: id,
       className: classNames.wrapper,
       style: style,
-      role: 'progressbar',
+      role: "progressbar",
       "aria-valuemin": 0,
       "aria-valuemax": 100,
       "aria-valuenow": percNumber,
@@ -178,7 +184,7 @@ class Progress extends _react.Component {
       strokeDasharray: strokeDasharray,
       strokeLinecap: strokeLinecap,
       fill: "transparent",
-      stroke: stroke,
+      stroke: _stroke,
       r: radius,
       cx: cx,
       cy: cy,
@@ -202,11 +208,26 @@ class Progress extends _react.Component {
     return perc;
   }
 
+  selectStroke(stroke, percent, strokeGradient) {
+    if (typeof stroke === 'string') {
+      return stroke;
+    }
+
+    const color = (0, _generates.generateColor)(stroke, percent, strokeGradient);
+
+    if (typeof color !== 'undefined') {
+      return color;
+    }
+
+    return _constants.strings.STROKE_DEFAULT;
+  }
+
   renderLineProgress() {
     const {
       className,
       style,
       stroke,
+      strokeGradient,
       direction,
       format,
       showInfo,
@@ -231,9 +252,12 @@ class Progress extends _react.Component {
     });
     const innerCls = (0, _classnames.default)("".concat(prefixCls, "-track-inner"));
     const perc = this.calcPercent(percent);
-    const percNumber = this.calcPercent(percentNumber);
+    const percNumber = this.calcPercent(percentNumber); // parse stroke & generate gradients
+
+    const _stroke = this.selectStroke(stroke, percent, strokeGradient);
+
     const innerStyle = {
-      background: stroke
+      background: _stroke
     };
 
     if (direction === _constants.strings.DEFAULT_DIRECTION) {
@@ -247,7 +271,7 @@ class Progress extends _react.Component {
       id: id,
       className: progressWrapperCls,
       style: style,
-      role: 'progressbar',
+      role: "progressbar",
       "aria-valuemin": 0,
       "aria-valuemax": 100,
       "aria-valuenow": perc,
@@ -297,7 +321,11 @@ Progress.propTypes = {
   scale: _propTypes.default.number,
   showInfo: _propTypes.default.bool,
   size: _propTypes.default.oneOf(_constants.strings.sizes),
-  stroke: _propTypes.default.string,
+  stroke: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.shape({
+    percent: _propTypes.default.number,
+    color: _propTypes.default.string
+  }))]),
+  strokeGradient: _propTypes.default.bool,
   strokeLinecap: _propTypes.default.oneOf(_constants.strings.strokeLineCap),
   strokeWidth: _propTypes.default.number,
   style: _propTypes.default.object,
@@ -313,7 +341,8 @@ Progress.defaultProps = {
   percent: 0,
   showInfo: false,
   size: _constants.strings.DEFAULT_SIZE,
-  stroke: 'var(--semi-color-success)',
+  stroke: _constants.strings.STROKE_DEFAULT,
+  strokeGradient: false,
   strokeLinecap: _constants.strings.DEFAULT_LINECAP,
   strokeWidth: 4,
   style: {},

package/lib/cjs/radio/radio.d.ts

@@ -82,7 +82,7 @@ declare class Radio extends BaseComponent<RadioProps, RadioState> {
         prefixCls?: string;
         name?: string;
         onChange?: (e: RadioChangeEvent) => void;
-        buttonSize?: "small" | "large" | "middle";
+        buttonSize?: "small" | "middle" | "large";
         isCardRadio?: boolean;
         isPureCardRadio?: boolean;
     };

package/lib/cjs/radio/radioGroup.d.ts

@@ -48,7 +48,7 @@ declare class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState>
         disabled: PropTypes.Requireable<boolean>;
         name: PropTypes.Requireable<string>;
         options: PropTypes.Requireable<any[]>;
-        buttonSize: PropTypes.Requireable<"small" | "large" | "middle">;
+        buttonSize: PropTypes.Requireable<"small" | "middle" | "large">;
         type: PropTypes.Requireable<"default" | "button" | "card" | "pureCard">;
         value: PropTypes.Requireable<any>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/cjs/skeleton/item.d.ts

@@ -13,6 +13,7 @@ export interface ParagraphProps extends BasicProps {
 }
 export interface AvatarProps extends BasicProps {
     size?: typeof strings.SIZE[number];
+    shape?: string;
 }
 export declare type GenericProps = BasicProps & AvatarProps;
 export declare const Avatar: React.FC<AvatarProps>;

package/lib/cjs/skeleton/item.js

@@ -35,6 +35,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 };
 
 const sizeSet = _constants2.strings.SIZE;
+const shapeSet = _constants2.strings.SHAPE;
 
 const generator = type => BasicComponent => props => /*#__PURE__*/_react.default.createElement(BasicComponent, Object.assign({
   type: type
@@ -47,12 +48,15 @@ class Generic extends _react.PureComponent {
       prefixCls,
       className,
       type,
-      size
+      size,
+      shape
     } = _a,
-          others = __rest(_a, ["prefixCls", "className", "type", "size"]);
+          others = __rest(_a, ["prefixCls", "className", "type", "size", "shape"]);
 
     const classString = (0, _classnames.default)(className, "".concat(prefixCls, "-").concat(type), {
       ["".concat(prefixCls, "-").concat(type, "-").concat(size)]: type.toUpperCase() === 'AVATAR'
+    }, {
+      ["".concat(prefixCls, "-").concat(type, "-").concat(shape)]: type.toUpperCase() === 'AVATAR'
     });
     return /*#__PURE__*/_react.default.createElement('div', Object.assign({
       className: classString
@@ -66,11 +70,13 @@ Generic.propTypes = {
   prefixCls: _propTypes.default.string,
   style: _propTypes.default.object,
   className: _propTypes.default.string,
-  size: _propTypes.default.oneOf(sizeSet)
+  size: _propTypes.default.oneOf(sizeSet),
+  shape: _propTypes.default.oneOf(shapeSet)
 };
 Generic.defaultProps = {
   prefixCls: _constants.cssClasses.PREFIX,
-  size: 'medium'
+  size: 'medium',
+  shape: 'circle'
 };
 const Avatar = generator('avatar')(Generic);
 exports.Avatar = Avatar;

package/lib/cjs/tag/index.js

@@ -164,11 +164,12 @@ class Tag extends _react.Component {
       onClick,
       className,
       type,
+      shape,
       avatarSrc,
       avatarShape,
       tabIndex
     } = _a,
-          attr = __rest(_a, ["tagKey", "children", "size", "color", "closable", "visible", "onClose", "onClick", "className", "type", "avatarSrc", "avatarShape", "tabIndex"]);
+          attr = __rest(_a, ["tagKey", "children", "size", "color", "closable", "visible", "onClose", "onClick", "className", "type", "shape", "avatarSrc", "avatarShape", "tabIndex"]);
 
     const {
       visible: isVisible
@@ -186,6 +187,8 @@ class Tag extends _react.Component {
         ["".concat(prefixCls, "-default")]: size === 'default',
         ["".concat(prefixCls, "-small")]: size === 'small',
         ["".concat(prefixCls, "-large")]: size === 'large',
+        ["".concat(prefixCls, "-square")]: shape === 'square',
+        ["".concat(prefixCls, "-circle")]: shape === 'circle',
         ["".concat(prefixCls, "-").concat(type)]: type,
         ["".concat(prefixCls, "-").concat(color, "-").concat(type)]: color && type,
         ["".concat(prefixCls, "-closable")]: closable,
@@ -223,6 +226,7 @@ Tag.defaultProps = {
   onClick: () => undefined,
   style: {},
   className: '',
+  shape: 'square',
   avatarShape: 'square'
 };
 Tag.propTypes = {

package/lib/cjs/tag/interface.d.ts

@@ -4,6 +4,7 @@ export declare type TagColor = 'amber' | 'blue' | 'cyan' | 'green' | 'grey' | 'i
 export declare type TagType = 'ghost' | 'solid' | 'light';
 export declare type TagSize = 'default' | 'small' | 'large';
 export declare type AvatarShape = 'circle' | 'square';
+export declare type TagShape = 'circle' | 'square';
 export interface TagProps {
     children?: React.ReactNode;
     tagKey?: string | number;
@@ -18,6 +19,7 @@ export interface TagProps {
     className?: string;
     avatarSrc?: string;
     avatarShape?: AvatarShape;
+    shape?: TagShape;
     onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
     'aria-label'?: React.AriaAttributes['aria-label'];
     tabIndex?: number;

package/lib/cjs/timePicker/TimePicker.d.ts

@@ -99,11 +99,11 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         'aria-required': PropTypes.Requireable<boolean>;
         prefixCls: PropTypes.Requireable<string>;
         clearText: PropTypes.Requireable<string>;
-        value: PropTypes.Requireable<string | number | string[] | Date | number[] | Date[]>;
+        value: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
         inputReadOnly: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
         showClear: PropTypes.Requireable<boolean>;
-        defaultValue: PropTypes.Requireable<string | number | string[] | Date | number[] | Date[]>;
+        defaultValue: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
         open: PropTypes.Requireable<boolean>;
         defaultOpen: PropTypes.Requireable<boolean>;
         onOpenChange: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/cjs/timePicker/TimeShape.d.ts

@@ -6,5 +6,5 @@ import PropTypes from 'prop-types';
  * - \[12:00:12, 12:21:12]
  * - \[[12:00:12, 12:21:12], [12:11:12, 12:32:12]]
  */
-declare const TimeShape: PropTypes.Requireable<string | number | string[] | Date | number[] | Date[]>;
+declare const TimeShape: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
 export { TimeShape };

package/lib/cjs/timePicker/index.d.ts

@@ -19,11 +19,11 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
         'aria-required': import("prop-types").Requireable<boolean>;
         prefixCls: import("prop-types").Requireable<string>;
         clearText: import("prop-types").Requireable<string>;
-        value: import("prop-types").Requireable<string | number | string[] | Date | number[] | Date[]>;
+        value: import("prop-types").Requireable<string | number | string[] | number[] | Date | Date[]>;
         inputReadOnly: import("prop-types").Requireable<boolean>;
         disabled: import("prop-types").Requireable<boolean>;
         showClear: import("prop-types").Requireable<boolean>;
-        defaultValue: import("prop-types").Requireable<string | number | string[] | Date | number[] | Date[]>;
+        defaultValue: import("prop-types").Requireable<string | number | string[] | number[] | Date | Date[]>;
         open: import("prop-types").Requireable<boolean>;
         defaultOpen: import("prop-types").Requireable<boolean>;
         onOpenChange: import("prop-types").Requireable<(...args: any[]) => any>;

package/lib/cjs/toast/index.d.ts

@@ -7,6 +7,7 @@ import { ConfigProps, ToastInstance, ToastProps, ToastState } from '@douyinfe/se
 import { Motion } from '../_base/base';
 export { ToastTransitionProps } from './ToastTransition';
 export interface ToastReactProps extends ToastProps {
+    id?: string;
     style?: CSSProperties;
     icon?: React.ReactNode;
     content: React.ReactNode;
@@ -15,7 +16,9 @@ export { ConfigProps, ToastListProps, ToastListState, ToastState };
 declare const createBaseToast: () => {
     new (props: ToastListProps): {
         readonly adapter: ToastListAdapter;
+        has(id: string): any;
         add(opts: ToastInstance): any;
+        update(id: string, opts: ToastInstance): any;
         remove(id: string): any;
         destroyAll(): any;
         render(): JSX.Element;
@@ -46,7 +49,9 @@ declare const createBaseToast: () => {
     };
     ref: {
         readonly adapter: ToastListAdapter;
+        has(id: string): any;
         add(opts: ToastInstance): any;
+        update(id: string, opts: ToastInstance): any;
         remove(id: string): any;
         destroyAll(): any;
         render(): JSX.Element;
@@ -105,7 +110,9 @@ export declare class ToastFactory {
 declare const _default: {
     new (props: ToastListProps): {
         readonly adapter: ToastListAdapter;
+        has(id: string): any;
         add(opts: ToastInstance): any;
+        update(id: string, opts: ToastInstance): any;
         remove(id: string): any;
         destroyAll(): any;
         render(): JSX.Element;
@@ -136,7 +143,9 @@ declare const _default: {
     };
     ref: {
         readonly adapter: ToastListAdapter;
+        has(id: string): any;
         add(opts: ToastInstance): any;
+        update(id: string, opts: ToastInstance): any;
         remove(id: string): any;
         destroyAll(): any;
         render(): JSX.Element;

package/lib/cjs/toast/index.js

@@ -38,24 +38,28 @@ const createBaseToast = () => {
       super(props);
       this.state = {
         list: [],
-        removedItems: []
+        removedItems: [],
+        updatedItems: []
       };
       this.foundation = new _toastListFoundation.default(this.adapter);
     }
 
     get adapter() {
       return Object.assign(Object.assign({}, super.adapter), {
-        updateToast: (list, removedItems) => {
+        updateToast: (list, removedItems, updatedItems) => {
           this.setState({
             list,
-            removedItems
+            removedItems,
+            updatedItems
           });
         }
       });
     }
 
     static create(opts) {
-      const id = (0, _uuid.default)('toast'); // this.id = id;
+      var _a;
+
+      const id = (_a = opts.id) !== null && _a !== void 0 ? _a : (0, _uuid.default)('toast'); // this.id = id;
 
       if (!ToastList.ref) {
         const div = document.createElement('div');
@@ -95,9 +99,16 @@ const createBaseToast = () => {
             node.style[pos] = typeof opts[pos] === 'number' ? "".concat(opts[pos], "px") : opts[pos];
           }
         });
-        ToastList.ref.add(Object.assign(Object.assign({}, opts), {
-          id
-        }));
+
+        if (ToastList.ref.has(id)) {
+          ToastList.ref.update(id, Object.assign(Object.assign({}, opts), {
+            id
+          }));
+        } else {
+          ToastList.ref.add(Object.assign(Object.assign({}, opts), {
+            id
+          }));
+        }
       }
 
       return id;
@@ -194,10 +205,18 @@ const createBaseToast = () => {
       }
     }
 
+    has(id) {
+      return this.foundation.hasToast(id);
+    }
+
     add(opts) {
       return this.foundation.addToast(opts);
     }
 
+    update(id, opts) {
+      return this.foundation.updateToast(id, opts);
+    }
+
     remove(id) {
       return this.foundation.removeToast(id);
     }
@@ -211,18 +230,39 @@ const createBaseToast = () => {
         list
       } = this.state;
       const {
-        removedItems
+        removedItems,
+        updatedItems
       } = this.state;
       list = Array.from(new Set([...list, ...removedItems]));
+      const updatedIds = updatedItems.map(_ref => {
+        let {
+          id
+        } = _ref;
+        return id;
+      });
+
+      const refFn = toast => {
+        var _a;
+
+        if (((_a = toast === null || toast === void 0 ? void 0 : toast.foundation) === null || _a === void 0 ? void 0 : _a._id) && updatedIds.includes(toast.foundation._id)) {
+          toast.foundation.setState({
+            duration: toast.props.duration
+          });
+          toast.foundation.restartCloseTimer();
+        }
+      };
+
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, list.map((item, index) => item.motion ? /*#__PURE__*/_react.default.createElement(_ToastTransition.default, {
         key: item.id || index,
         motion: item.motion
       }, removedItems.find(removedItem => removedItem.id === item.id) ? null : transitionStyle => /*#__PURE__*/_react.default.createElement(_toast.default, Object.assign({}, item, {
         style: Object.assign(Object.assign({}, transitionStyle), item.style),
-        close: id => this.remove(id)
+        close: id => this.remove(id),
+        ref: refFn
       }))) : /*#__PURE__*/_react.default.createElement(_toast.default, Object.assign({}, item, {
         style: Object.assign({}, item.style),
-        close: id => this.remove(id)
+        close: id => this.remove(id),
+        ref: refFn
       }))));
     }