@kineticdata/react 6.0.0 → 6.0.2

package/lib/components/common/TableInput.js

@@ -1,19 +1,28 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TableLayout = exports.TableInput = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _immutable = require("immutable");
 var _reactBeautifulDnd = require("react-beautiful-dnd");
+var _excluded = ["newRow"],
+  _excluded2 = ["name", "type", "options", "component"];
+var TextDisplay = function TextDisplay(props) {
+  return /*#__PURE__*/_react["default"].createElement("span", {
+    id: props.id
+  }, props.value || '');
+};
 var TextInput = function TextInput(props) {
   return /*#__PURE__*/_react["default"].createElement("input", {
     type: "text",
-    id: props.id || props.name,
+    id: props.id,
     name: props.name,
     value: props.value || '',
     onBlur: props.onBlur,
@@ -22,10 +31,28 @@ var TextInput = function TextInput(props) {
     form: props.form
   });
 };
+var SelectInput = function SelectInput(props) {
+  return /*#__PURE__*/_react["default"].createElement("select", {
+    id: props.id,
+    name: props.name,
+    value: props.value || '',
+    onBlur: props.onBlur,
+    onChange: props.onChange,
+    onFocus: props.onFocus,
+    form: props.form
+  }, /*#__PURE__*/_react["default"].createElement("option", {
+    value: ""
+  }), props.options.map(function (option) {
+    return /*#__PURE__*/_react["default"].createElement("option", {
+      value: option.get('value'),
+      key: option.get('value')
+    }, option.get('label'));
+  }));
+};
 var CheckboxInput = function CheckboxInput(props) {
   return /*#__PURE__*/_react["default"].createElement("input", {
     type: "checkbox",
-    id: props.id || props.name,
+    id: props.id,
     name: props.name,
     checked: props.value || false,
     onBlur: props.onBlur,
@@ -34,123 +61,309 @@ var CheckboxInput = function CheckboxInput(props) {
     form: props.form
   });
 };
-var DragHandle = function DragHandle(props) {
-  return /*#__PURE__*/_react["default"].createElement("span", props, "\u2195");
+var DragHandle = function DragHandle(_ref) {
+  var newRow = _ref.newRow,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return !newRow && /*#__PURE__*/_react["default"].createElement("span", props, "\u2195");
 };
-var TableLayout = function TableLayout(_ref) {
-  var rows = _ref.rows,
-    onAdd = _ref.onAdd,
-    options = _ref.options;
-  return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("table", null, /*#__PURE__*/_react["default"].createElement("thead", null, /*#__PURE__*/_react["default"].createElement("tr", null, options.toIndexedSeq().toList().map(function (config) {
+var TableLayout = exports.TableLayout = function TableLayout(_ref2) {
+  var droppableRef = _ref2.droppableRef,
+    focusRef = _ref2.focusRef,
+    rows = _ref2.rows,
+    onAdd = _ref2.onAdd,
+    options = _ref2.options;
+  return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "table-responsive",
+    ref: focusRef,
+    tabIndex: "-1"
+  }, /*#__PURE__*/_react["default"].createElement("table", null, /*#__PURE__*/_react["default"].createElement("thead", null, /*#__PURE__*/_react["default"].createElement("tr", null, options.toIndexedSeq().toList().filter(function (config) {
+    return config.get('visible') !== false;
+  }).map(function (config) {
     return /*#__PURE__*/_react["default"].createElement("th", {
       key: config.get('name')
     }, config.get('label'));
-  }), /*#__PURE__*/_react["default"].createElement("th", null, "\xA0"))), /*#__PURE__*/_react["default"].createElement("tbody", null, rows)), /*#__PURE__*/_react["default"].createElement("button", {
+  }), /*#__PURE__*/_react["default"].createElement("th", null, "\xA0"))), /*#__PURE__*/_react["default"].createElement("tbody", {
+    ref: droppableRef
+  }, rows))), onAdd && /*#__PURE__*/_react["default"].createElement("button", {
     type: "button",
     onClick: onAdd
   }, "Add"));
 };
-exports.TableLayout = TableLayout;
-var RowLayout = function RowLayout(_ref2) {
-  var fields = _ref2.fields,
-    onDelete = _ref2.onDelete;
-  return /*#__PURE__*/_react["default"].createElement("tr", null, fields.map(function (field, name) {
+var RowLayout = function RowLayout(_ref3) {
+  var rowProps = _ref3.rowProps,
+    dragging = _ref3.dragging,
+    draggableRef = _ref3.draggableRef,
+    draggableProps = _ref3.draggableProps,
+    fields = _ref3.fields,
+    onDelete = _ref3.onDelete,
+    onEdit = _ref3.onEdit;
+  return /*#__PURE__*/_react["default"].createElement("tr", Object.assign({}, rowProps, {
+    ref: draggableRef
+  }, draggableProps, {
+    className: dragging ? 'dragging' : ''
+  }), fields.map(function (field, name) {
     return /*#__PURE__*/_react["default"].createElement("td", {
       key: name
     }, field);
-  }).toList(), /*#__PURE__*/_react["default"].createElement("td", null, /*#__PURE__*/_react["default"].createElement("button", {
+  }).toList(), /*#__PURE__*/_react["default"].createElement("td", null, onEdit && /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    onClick: onEdit
+  }, "Edit"), onDelete && /*#__PURE__*/_react["default"].createElement("button", {
     type: "button",
     onClick: onDelete
   }, "Delete")));
 };
 var typeToComponent = {
   drag: 'DragHandle',
-  text: 'TextInput',
-  checkbox: 'CheckboxInput'
+  display: 'TextDisplay',
+  checkbox: 'CheckboxInput',
+  select: 'SelectInput',
+  text: 'TextInput'
 };
 var defaultComponents = {
   TableLayout: TableLayout,
   RowLayout: RowLayout,
-  TextInput: TextInput,
+  DragHandle: DragHandle,
+  TextDisplay: TextDisplay,
   CheckboxInput: CheckboxInput,
-  DragHandle: DragHandle
+  SelectInput: SelectInput,
+  TextInput: TextInput
 };
 var fieldFromConfig = function fieldFromConfig(config) {
   var components = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return components[typeToComponent[config.get('type')]] || components['TextInput'];
+  return config.get('component') || components[typeToComponent[config.get('type')]] || components['TextDisplay'];
+};
+var getEmptyRowValues = function getEmptyRowValues(options) {
+  return options
+  // Exclude drag columns from data object and any transient columns
+  .filter(function (config) {
+    return config.get('type') !== 'drag' && !config.get('transient');
+  })
+  // Reduce list of options to a map of values
+  .reduce(function (row, config) {
+    return row.set(config.get('name'), typeof config.get('initialValue') !== 'undefined' ? config.get('initialValue') : config.get('type') === 'checkbox' ? false : '');
+  }, (0, _immutable.Map)());
 };
-var TableInput = function TableInput(props) {
+var TableInput = exports.TableInput = function TableInput(props) {
   var _props$components = props.components,
     components = _props$components === void 0 ? {} : _props$components,
     options = props.options,
     rows = props.rows,
     onChange = props.onChange,
-    onBlur = props.onBlur,
-    onFocus = props.onFocus,
-    form = props.form;
+    onAdd = props.onAdd,
+    omitAdd = props.omitAdd,
+    autoAdd = props.autoAdd,
+    onDelete = props.onDelete,
+    omitDelete = props.omitDelete,
+    onEdit = props.onEdit,
+    disabled = props.disabled,
+    form = props.form,
+    focusRef = props.focusRef;
+  // State for new order row
+  var _useState = (0, _react.useState)(getEmptyRowValues(options)),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    newRow = _useState2[0],
+    setNewRow = _useState2[1];
+  // Change event for new row
+  var newFieldChangeHandler = !disabled && autoAdd ? function (name, type) {
+    return function (e) {
+      // Update the new row value
+      var updatedValues = newRow.set(name, e && e.target ? type === 'checkbox' ? e.target.checked : e.target.value : e);
+      // Check if all required values in the new row have data, and if they
+      // do, add that row and reset the newRow to initial values
+      if (options.filter(function (option) {
+        return option.get('required');
+      }).every(function (option) {
+        return !!updatedValues.get(option.get('name'));
+      })) {
+        onChange(rows.push(updatedValues));
+        setNewRow(getEmptyRowValues(options));
+      } else {
+        // Otherwise just update the current field in the new row
+        setNewRow(updatedValues);
+      }
+    };
+  } : undefined;
+  // State to track if we need to focus one of the new row fields, This is used
+  // when mirroring is used to focus the next row on press of enter.
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    mirrorFocusField = _useState4[0],
+    setMirrorFocusField = _useState4[1];
+  var mirrorFocusRef = function mirrorFocusRef(node) {
+    if (node) node.focus();
+    setMirrorFocusField(null);
+  };
+
+  // Create a list of components, overriding any defualts by those provided
   var appliedComponents = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, defaultComponents), components);
   var RowLayout = appliedComponents.RowLayout,
     TableLayout = appliedComponents.TableLayout;
-  var handleAddRow = function handleAddRow(e) {
-    e.preventDefault();
-    var newRow = options.filter(function (config) {
-      return config.get('type') !== 'drag';
-    }).reduce(function (row, config) {
-      return row.set(config.get('name'), config.get('type') === 'checkbox' ? false : '');
-    }, (0, _immutable.Map)());
-    onChange(rows.push(newRow));
-  };
+
+  // Disable drag if there are no columns of type drag
+  var isDragDisabled = !options.some(function (option) {
+    return option.get('type') === 'drag';
+  });
+  // Handler for moving rows via dragging
   var onDragEnd = function onDragEnd(e) {
     if (e.source && e.destination) {
       onChange(rows["delete"](e.source.index).insert(e.destination.index, rows.get(e.source.index)));
     }
   };
-  var isDragDisabled = !options.some(function (option) {
-    return option.get('type') === 'drag';
-  });
-  var fieldRows = props.rows.map(function (row, index) {
-    var handleDeleteRow = function handleDeleteRow(e) {
-      e.preventDefault();
-      onChange(rows["delete"](index));
-    };
+
+  // Create add handler for adding new rows to the table
+  var handleAddRow = !disabled && !omitAdd && !autoAdd ? typeof onAdd === 'function' ?
+  // If onAdd is provided, us it as the handler, and pass the data it
+  // may need and the onChange function
+  function (event) {
+    return onAdd(event, {
+      rows: rows,
+      options: options,
+      onChange: onChange
+    });
+  } :
+  // Otherwise, add a blank row
+  function () {
+    return onChange(rows.push(getEmptyRowValues(options)));
+  } : undefined;
+  var rowCount = rows.size;
+  var fieldRows = rows
+  // Add new row if autoAdd is enabled
+  .push(!disabled && autoAdd && newRow).filter(Boolean).map(function (row, index) {
+    // Create delete handler for a row
+    var handleDeleteRow = !disabled && !omitDelete ? typeof onDelete === 'function' ?
+    // If onDelete is provided, us it as the handler, and pass the data
+    // it may need and the onChange function
+    function (event) {
+      return onDelete(event, {
+        index: index,
+        rows: rows,
+        options: options,
+        onChange: onChange
+      });
+    } :
+    // Otherwise, delete the row
+    function () {
+      return onChange(rows["delete"](index));
+    } : undefined;
+
+    // Create edit handler for a row, but only if onEdit was provided
+    var handleEditRow = !disabled && typeof onEdit === 'function' ? function (event) {
+      return onEdit(event, {
+        index: index,
+        rows: rows,
+        options: options,
+        onChange: onChange
+      });
+    } : undefined;
+    // Check if we're on a new row (not one that's saved in the table)
+    var isNewRow = autoAdd && index >= rowCount;
+    // Filter the options to the fields that are visible
+    var fieldOptions = options.toOrderedMap().mapKeys(function (_, config) {
+      return config.get('name');
+    }).filter(function (config) {
+      return config.get('visible') !== false;
+    });
+    // Check if any of the fields have the mirror property, which specifies
+    // that the field should mirror (copy) the value of the configured field
+    var hasMirroring = !!fieldOptions.find(function (c) {
+      return !!c.get('mirror');
+    });
     return /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Draggable, {
       draggableId: "draggable".concat(index),
       index: index,
       key: index,
-      isDragDisabled: isDragDisabled
+      isDragDisabled: !isNewRow ? isDragDisabled : true
     }, function (provided, snapshot) {
       // For each of the options specified for the field, we render a table
       // cell with a field in it. The field type is determined by the type
       // of the option.
-      var fields = options.toOrderedMap().mapKeys(function (_, config) {
-        return config.get('name');
-      }).map(function (config) {
+      var fields = fieldOptions.map(function (config) {
         var Field = fieldFromConfig(config, appliedComponents);
         var _config$toObject = config.toObject(),
-          label = _config$toObject.label,
           name = _config$toObject.name,
-          type = _config$toObject.type;
-        var fieldOnChange = function fieldOnChange(e) {
-          return onChange(rows.setIn([index, name], type === 'checkbox' ? e.target.checked : e.target.value));
-        };
-        var value = row.get(name);
-        var props = type === 'drag' ? provided.dragHandleProps : {
-          label: label,
-          onBlur: onBlur,
-          onChange: fieldOnChange,
-          onFocus: onFocus,
-          value: value,
-          form: form
+          type = _config$toObject.type,
+          optionsOrig = _config$toObject.options,
+          component = _config$toObject.component,
+          fieldProps = (0, _objectWithoutProperties2["default"])(_config$toObject, _excluded2);
+        var fieldChangeHandler = function fieldChangeHandler(e) {
+          return onChange(rows.setIn([index, name], e && e.target ? type === 'checkbox' ? e.target.checked : e.target.value : e));
         };
+        var props = type === 'drag' ? (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, provided.dragHandleProps), {}, {
+          newRow: isNewRow
+        }) : (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+          visible: true
+        }, fieldProps), {}, {
+          name: name,
+          // If this field is mirroring another field, show the
+          // mirrored value when there is no value
+          value: row.get(name) || (isNewRow && config.has('mirror') ? row.get(config.get('mirror')) : row.get(name)),
+          onChange: !isNewRow ? fieldChangeHandler : newFieldChangeHandler(name, type),
+          // If this field is being mirrored, set the value of the
+          // mirroring field on blur of this field
+          onBlur: isNewRow && !!fieldOptions.find(function (c) {
+            return c.get('mirror') === name;
+          }) ? function (e) {
+            // Find the mirroring field (there should only be one)
+            var mirroringConfig = fieldOptions.find(function (c) {
+              return c.get('mirror') === name;
+            });
+            // If the mirroring field's value is empty,
+            // update its value to match this field's value
+            if (!row.get(mirroringConfig.get('name'))) {
+              newFieldChangeHandler(mirroringConfig.get('name'), type)(row.get(name));
+            }
+            // Trigger the original onBlur event if any
+            if (typeof fieldProps.onBlur === 'function') fieldProps.onBlur(e);
+          } : fieldProps.onFocus,
+          // If options is a function, pass it the current value
+          // so we can do things like only allow each value to be
+          // selected once
+          options: typeof optionsOrig === 'function' ? optionsOrig({
+            value: row.get(name)
+          }) : optionsOrig,
+          enabled: !disabled,
+          form: form,
+          row: row,
+          newRow: isNewRow,
+          focusRef: isNewRow && mirrorFocusField === name ? mirrorFocusRef : fieldProps.focusRef
+        });
         return /*#__PURE__*/_react["default"].createElement(Field, props);
       });
       return /*#__PURE__*/_react["default"].createElement(RowLayout, {
         draggableRef: provided.innerRef,
         draggableProps: provided.draggableProps,
         dragging: snapshot.isDragging,
+        index: index,
+        rowCount: rowCount,
         fields: fields,
         options: options,
-        onDelete: handleDeleteRow
+        onDelete: !isNewRow ? handleDeleteRow : undefined,
+        onEdit: !isNewRow ? handleEditRow : undefined,
+        rowProps: {
+          // If mirroring is used, add a keyDown event to the new row
+          // to capture a press of Enter in the mirrored field that
+          // should trigger the update of the mirroring field's value
+          onKeyDown: isNewRow && hasMirroring ? function (e) {
+            if (e.key === 'Enter') {
+              // Find the mirroring field and mirrored field
+              var mirroringConfig = fieldOptions.find(function (c) {
+                return !!c.get('mirror');
+              });
+              var mirroredConfig = fieldOptions.find(function (c) {
+                return mirroringConfig.get('mirror') === c.get('name');
+              });
+
+              // If we're in the mirrored field, the mirroring
+              // field is empty, and the mirrored field is not
+              // empty, set the mirroring field's value
+              if (mirroredConfig.get('name') === e.target.name && !!newRow.get(mirroredConfig.get('name')) && !newRow.get(mirroringConfig.get('name'))) {
+                newFieldChangeHandler(mirroringConfig.get('name'))(newRow.get(mirroredConfig.get('name')));
+                setMirrorFocusField(e.target.name);
+              }
+            }
+          } : undefined
+        }
       });
     });
   });
@@ -161,11 +374,11 @@ var TableInput = function TableInput(props) {
   }, function (provided) {
     return /*#__PURE__*/_react["default"].createElement(TableLayout, {
       droppableRef: provided.innerRef,
+      focusRef: focusRef,
       rows: fieldRows,
       onAdd: handleAddRow,
       options: options,
       placeholder: provided.placeholder
     });
   }));
-};
-exports.TableInput = TableInput;
+};

package/lib/components/common/TeamSelect.js

@@ -56,20 +56,20 @@ var valueToCustomTeam = function valueToCustomTeam(_ref3) {
 var getStatusProps = function getStatusProps(_ref4) {
   var _ref4$search = _ref4.search,
     search = _ref4$search === void 0 ? (0, _immutable.Map)() : _ref4$search,
-    _ref4$messages = _ref4.messages;
-  _ref4$messages = _ref4$messages === void 0 ? {} : _ref4$messages;
-  var _ref4$messages$short = _ref4$messages["short"],
-    _short = _ref4$messages$short === void 0 ? 'Type to find a team.' : _ref4$messages$short,
-    _ref4$messages$empty = _ref4$messages.empty,
-    empty = _ref4$messages$empty === void 0 ? 'No matching teams.' : _ref4$messages$empty,
-    _ref4$messages$custom = _ref4$messages.custom,
-    custom = _ref4$messages$custom === void 0 ? 'No matching teams. Type to enter a custom option.' : _ref4$messages$custom,
-    _ref4$messages$pendin = _ref4$messages.pending,
-    pending = _ref4$messages$pendin === void 0 ? 'Searching...' : _ref4$messages$pendin,
-    _ref4$messages$more = _ref4$messages.more,
-    more = _ref4$messages$more === void 0 ? "Too many teams, first ".concat(search.get('limit') || 25, " shown. Please refine your search.") : _ref4$messages$more,
-    _ref4$messages$error = _ref4$messages.error,
-    error = _ref4$messages$error === void 0 ? 'There was an error fetching teams.' : _ref4$messages$error;
+    _ref4$messages = _ref4.messages,
+    _ref4$messages2 = _ref4$messages === void 0 ? {} : _ref4$messages,
+    _ref4$messages2$short = _ref4$messages2["short"],
+    _short = _ref4$messages2$short === void 0 ? 'Type to find a team.' : _ref4$messages2$short,
+    _ref4$messages2$empty = _ref4$messages2.empty,
+    empty = _ref4$messages2$empty === void 0 ? 'No matching teams.' : _ref4$messages2$empty,
+    _ref4$messages2$custo = _ref4$messages2.custom,
+    custom = _ref4$messages2$custo === void 0 ? 'No matching teams. Type to enter a custom option.' : _ref4$messages2$custo,
+    _ref4$messages2$pendi = _ref4$messages2.pending,
+    pending = _ref4$messages2$pendi === void 0 ? 'Searching...' : _ref4$messages2$pendi,
+    _ref4$messages2$more = _ref4$messages2.more,
+    more = _ref4$messages2$more === void 0 ? "Too many teams, first ".concat(search.get('limit') || 25, " shown. Please refine your search.") : _ref4$messages2$more,
+    _ref4$messages2$error = _ref4$messages2.error,
+    error = _ref4$messages2$error === void 0 ? 'There was an error fetching teams.' : _ref4$messages2$error;
   return function (props) {
     return {
       meta: props.searchField ? "Find Teams by ".concat(fields[props.searchField]) : null,
@@ -91,7 +91,7 @@ var getStatusProps = function getStatusProps(_ref4) {
     };
   };
 };
-var TeamSelect = function TeamSelect(props) {
+var TeamSelect = exports.TeamSelect = function TeamSelect(props) {
   return /*#__PURE__*/_react["default"].createElement(_Typeahead.Typeahead, {
     components: props.components || {},
     disabled: props.disabled,
@@ -109,5 +109,4 @@ var TeamSelect = function TeamSelect(props) {
     id: props.id,
     form: props.form
   });
-};
-exports.TeamSelect = TeamSelect;
+};

package/lib/components/common/ToastContainer.js

@@ -0,0 +1,165 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.showToast = exports.hideToast = exports.clearToasts = exports.ToastState = exports.ToastContainer = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _store = require("../../store");
+var _react2 = require("@kineticdata/react");
+var _immutable = require("immutable");
+var _ComponentConfigContext = require("./ComponentConfigContext");
+var _excluded = ["autoHide", "content"];
+var ToastState = exports.ToastState = (0, _immutable.Record)({
+  title: null,
+  content: null,
+  icon: null,
+  color: null,
+  className: '',
+  autoHide: true,
+  duration: null
+});
+(0, _store.regHandlers)({
+  // Initialize state for toasts as an OrderedMap so the order doesn't change
+  INIT_TOASTS: function INIT_TOASTS(state) {
+    return state.update('toasts', function (toasts) {
+      return _immutable.OrderedMap.isOrderedMap(toasts) ? toasts : (0, _immutable.OrderedMap)(toasts || {});
+    });
+  },
+  ADD_TOAST: function ADD_TOAST(state, action) {
+    return state.setIn(['toasts', action.payload.toastKey], action.payload);
+  },
+  SHOW_TOAST: function SHOW_TOAST(state, action) {
+    return state.hasIn(['toasts', action.payload]) ? state.setIn(['toasts', action.payload, 'show'], true) : state;
+  },
+  HIDE_TOAST: function HIDE_TOAST(state, action) {
+    return state.hasIn(['toasts', action.payload]) ? state.setIn(['toasts', action.payload, 'show'], false) : state;
+  },
+  REMOVE_TOAST: function REMOVE_TOAST(state, action) {
+    return state.removeIn(['toasts', action.payload]);
+  },
+  CLEAR_TOASTS: function CLEAR_TOASTS(state, action) {
+    return state.update('toasts', function (toasts) {
+      return action.payload ? toasts.filter(function (toast) {
+        return toast.containerKey !== action.payload;
+      }) : (0, _immutable.OrderedMap)();
+    });
+  }
+});
+
+// Adds toast to state and shows it after 100ms delay to trigger animation
+var showToast = exports.showToast = function showToast(toast) {
+  var toastKey = (0, _react2.generateKey)();
+  (0, _store.dispatch)('ADD_TOAST', {
+    containerKey: toast.containerKey,
+    toast: ToastState(toast).update(
+    // Make sure duration is a number, or set to a default numeric value
+    'duration', function (duration) {
+      return typeof duration === 'number' ? Math.max(duration, 4000) : toast.content ? 7000 : 4000;
+    }),
+    toastKey: toastKey,
+    show: false
+  });
+  setTimeout(function () {
+    (0, _store.dispatch)('SHOW_TOAST', toastKey);
+  }, 100);
+  return toastKey;
+};
+
+// Hides the toast and removes it from state after animation ends
+var hideToast = exports.hideToast = function hideToast(toastKey) {
+  (0, _store.dispatch)('HIDE_TOAST', toastKey);
+  setTimeout(function () {
+    (0, _store.dispatch)('REMOVE_TOAST', toastKey);
+  }, 300);
+};
+
+// Clears all toasts, or if containerKey is provided, only the matching ones
+var clearToasts = exports.clearToasts = function clearToasts(containerKey) {
+  (0, _store.dispatch)('CLEAR_TOASTS', containerKey);
+};
+var ToastWrapper = function ToastWrapper(_ref) {
+  var Toast = _ref.component,
+    show = _ref.show,
+    toastKey = _ref.toastKey,
+    toast = _ref.toast;
+  var _toast$toJS = toast.toJS(),
+    autoHide = _toast$toJS.autoHide,
+    content = _toast$toJS.content,
+    toastProps = (0, _objectWithoutProperties2["default"])(_toast$toJS, _excluded);
+  var toggle = (0, _react.useCallback)(function () {
+    return hideToast(toastKey);
+  }, [toastKey]);
+  return /*#__PURE__*/_react["default"].createElement(Toast, Object.assign({
+    key: toastKey
+  }, toastProps, {
+    show: show,
+    toggle: toggle,
+    autoHide: autoHide
+  }), content);
+};
+var ToastContainerComponent = function ToastContainerComponent(_ref2) {
+  var components = _ref2.components,
+    toasts = _ref2.toasts,
+    persistentToasts = _ref2.persistentToasts;
+  (0, _react.useEffect)(function () {
+    (0, _store.dispatch)('INIT_TOASTS');
+    return function () {};
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(_ComponentConfigContext.ComponentConfigContext.Consumer, null, function (componentConfig) {
+    var component = (0, _immutable.get)(components, 'Toast', componentConfig.get('Toast'));
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "toast-container",
+      "aria-live": "polite",
+      "aria-atomic": "true"
+    }, toasts.map(function (props) {
+      return /*#__PURE__*/_react["default"].createElement(ToastWrapper, Object.assign({
+        key: props.toastKey
+      }, props, {
+        component: component
+      }));
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "toast-container-persistent",
+      "aria-live": "polite",
+      "aria-atomic": "true"
+    }, persistentToasts.map(function (props) {
+      return /*#__PURE__*/_react["default"].createElement(ToastWrapper, Object.assign({
+        key: props.toastKey
+      }, props, {
+        component: component
+      }));
+    })));
+  });
+};
+var mapStateToProps = function mapStateToProps(state, props) {
+  // Get the toasts for this container
+  var containerToasts = state.get('toasts', (0, _immutable.List)()).filter(function (_ref3) {
+    var containerKey = _ref3.containerKey;
+    return props.containerKey ? containerKey === props.containerKey : !containerKey;
+  }).toList().reverse();
+  return {
+    // Get all toasts that hide automatically
+    toasts: containerToasts.filter(function (_ref4) {
+      var toast = _ref4.toast;
+      return !!toast.autoHide;
+    }),
+    // Get all toasts that require a user to close
+    persistentToasts: containerToasts.filter(function (_ref5) {
+      var toast = _ref5.toast;
+      return !toast.autoHide;
+    })
+  };
+};
+var ToastContainer = exports.ToastContainer = (0, _store.connect)(mapStateToProps)(ToastContainerComponent);
+ToastContainer.propTypes = {
+  /** A key used to scope toasts to this container */
+  containerKey: _propTypes["default"].string,
+  components: _propTypes["default"].shape({
+    /** Override the default Toast component */
+    Toast: _propTypes["default"].func
+  })
+};