@decisiv/ui-components 2.0.0 → 2.0.1-alpha.100

package/lib/providers/NotificationsProvider/index.js

@@ -7,9 +7,13 @@ exports.default = exports.transitions = exports.NotificationsContext = void 0;
 
 var _compact = _interopRequireDefault(require("lodash/compact"));
 
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+
 var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _noop = _interopRequireDefault(require("lodash/noop"));
+
+var React = _interopRequireWildcard(require("react"));
 
 var _types = require("./types");
 
@@ -45,13 +49,11 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var NotificationsContext = (0, _react.createContext)({
-  /* istanbul ignore next */
-  dismissAll: function dismissAll() {},
+var NotificationsContext = React.createContext({
+  dismissAll: _noop.default,
+  isDismissingAll: false,
   notifications: [],
-
-  /* istanbul ignore next */
-  notify: function notify(options, body) {}
+  notify: _noop.default
 });
 exports.NotificationsContext = NotificationsContext;
 var transitions = (_transitions = {}, _defineProperty(_transitions, _types.NotificationState.ENTERING, {
@@ -72,10 +74,10 @@ exports.transitions = transitions;
 function NotificationsProvider(_ref) {
   var children = _ref.children;
 
-  var _useState = (0, _react.useState)([]),
-      _useState2 = _slicedToArray(_useState, 2),
-      notifications = _useState2[0],
-      setNotifications = _useState2[1];
+  var _React$useState = React.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      notifications = _React$useState2[0],
+      setNotifications = _React$useState2[1];
   /**
    * Advances a notification to either the specified state or the next state for the current state
    */
@@ -108,6 +110,16 @@ function NotificationsProvider(_ref) {
             })];
           }
 
+          if (meta.state === _types.NotificationState.COLLAPSING_ALL && props.onClose) {
+            try {
+              props.onClose(new MouseEvent('click'));
+            } catch (_unused) {
+              // IE doesn't support MouseEvent. If you support IE, you must verify or mock
+              // attributes required by this event handler.
+              props.onClose({});
+            }
+          }
+
           return undefined;
         }
 
@@ -130,13 +142,47 @@ function NotificationsProvider(_ref) {
     });
   };
 
-  var notify = (0, _react.useCallback)(function (options, body) {
-    var notificationID = (0, _uniqueId.default)("notification-".concat(options.id, "-"));
+  var notify = React.useCallback(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
     setNotifications(function (oldNotifications) {
+      var options;
+      var body;
+
+      if (typeof args[0] === 'function') {
+        // A notify handler callback may return void, indicating there should be no new
+        // notification dispatched.
+        var newNotificationParams = args[0](oldNotifications);
+
+        if (!newNotificationParams) {
+          // In the scenario where a callback arg is provided but returns void,
+          // block the rest of the logic and move on. There should be no change.
+          return oldNotifications;
+        }
+
+        var _newNotificationParam = _slicedToArray(newNotificationParams, 2);
+
+        options = _newNotificationParam[0];
+        body = _newNotificationParam[1];
+      } else {
+        var _ref6 = args;
+
+        var _ref7 = _slicedToArray(_ref6, 2);
+
+        options = _ref7[0];
+        body = _ref7[1];
+      }
+
+      var notificationID = (0, _uniqueId.default)("notification-".concat(options.id, "-"));
       var duration = transitions[_types.NotificationState.ENTERING].duration;
       setTimeout(function () {
         transition(notificationID);
       }, duration);
+      var autoDismiss = options.duration && setTimeout(function () {
+        transition(notificationID, _types.NotificationState.COLLAPSING);
+      }, duration + options.duration);
 
       var closeNotificationAfter = function closeNotificationAfter(callback) {
         return function (event) {
@@ -148,9 +194,13 @@ function NotificationsProvider(_ref) {
         };
       };
 
-      var actions = options.actions && options.actions.map(function (_ref6) {
-        var onClick = _ref6.onClick,
-            rest = _objectWithoutProperties(_ref6, ["onClick"]);
+      var suspendAutoDismiss = function suspendAutoDismiss() {
+        clearTimeout(autoDismiss);
+      };
+
+      var actions = options.actions && options.actions.map(function (_ref8) {
+        var onClick = _ref8.onClick,
+            rest = _objectWithoutProperties(_ref8, ["onClick"]);
 
         return _objectSpread({
           onClick: closeNotificationAfter(onClick)
@@ -159,7 +209,9 @@ function NotificationsProvider(_ref) {
       return [[_objectSpread({}, options, {
         actions: actions,
         id: options.id || notificationID,
-        onClose: closeNotificationAfter(options.onClose)
+        onClose: options.onClose && closeNotificationAfter(options.onClose),
+        onFocus: suspendAutoDismiss,
+        onHover: suspendAutoDismiss
       }), body, {
         notificationID: notificationID,
         state: _types.NotificationState.ENTERING
@@ -167,9 +219,13 @@ function NotificationsProvider(_ref) {
     });
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
   [setNotifications]);
-  return _react.default.createElement(NotificationsContext.Provider, {
+  var isDismissingAll = React.useMemo(function () {
+    return !(0, _isEmpty.default)(notifications) && notifications[0][2].state === _types.NotificationState.COLLAPSING_ALL;
+  }, [notifications]);
+  return React.createElement(NotificationsContext.Provider, {
     value: {
       dismissAll: dismissAll,
+      isDismissingAll: isDismissingAll,
       notifications: notifications,
       notify: notify
     }

package/lib/providers/NotificationsProvider/types.d.ts

@@ -11,13 +11,16 @@ export interface TActionProps {
 }
 export interface TNotificationProps {
     actions?: [TActionProps] | [TActionProps, TActionProps];
+    duration?: number;
     children?: React.ReactNode;
     closeHint?: string;
     color?: StatusColorsKeys;
     icon?: IconComponent;
     id: string;
     intent?: keyof typeof intents;
-    onClose: React.MouseEventHandler;
+    onClose?: React.MouseEventHandler;
+    onFocus?: React.FocusEventHandler;
+    onHover?: React.MouseEventHandler;
     title: string;
 }
 export declare type TNotificationOptions = TNotificationProps;

package/lib/providers/NotificationsProvider/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/providers/NotificationsProvider/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAE9D,aAAK,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAEvD,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;IACxD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;IAC9B,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,oBAAY,oBAAoB,GAAG,kBAAkB,CAAC;AAEtD,oBAAY,iBAAiB;IAC3B,QAAQ,aAAa;IACrB,UAAU,eAAe;IACzB,UAAU,eAAe;IACzB,cAAc,mBAAmB;CAClC;AAED,MAAM,WAAW,iBAAiB;IAChC,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,iBAAiB,CAAC;CAC1B;AAED,oBAAY,aAAa,GAAG,CAC1B,oBAAoB,EACpB,GAAG,CAAC,OAAO,GAAG,SAAS,EACvB,iBAAiB,CAClB,CAAC;AACF,oBAAY,cAAc,GAAG,aAAa,EAAE,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/providers/NotificationsProvider/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAE9D,aAAK,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAEvD,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,oBAAY,oBAAoB,GAAG,kBAAkB,CAAC;AAEtD,oBAAY,iBAAiB;IAC3B,QAAQ,aAAa;IACrB,UAAU,eAAe;IACzB,UAAU,eAAe;IACzB,cAAc,mBAAmB;CAClC;AAED,MAAM,WAAW,iBAAiB;IAChC,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,iBAAiB,CAAC;CAC1B;AAED,oBAAY,aAAa,GAAG,CAC1B,oBAAoB,EACpB,GAAG,CAAC,OAAO,GAAG,SAAS,EACvB,iBAAiB,CAClB,CAAC;AACF,oBAAY,cAAc,GAAG,aAAa,EAAE,CAAC"}

package/lib/utils/joinClassnames.d.ts

@@ -0,0 +1,3 @@
+declare function joinClassNames(...classnames: (string | undefined)[]): string | undefined;
+export default joinClassNames;
+//# sourceMappingURL=joinClassnames.d.ts.map

package/lib/utils/joinClassnames.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"joinClassnames.d.ts","sourceRoot":"","sources":["../../src/utils/joinClassnames.ts"],"names":[],"mappings":"AAMA,iBAAS,cAAc,CACrB,GAAG,UAAU,EAAE,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,GACpC,MAAM,GAAG,SAAS,CAIpB;AAED,eAAe,cAAc,CAAC"}

package/lib/utils/joinClassnames.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _compact = _interopRequireDefault(require("lodash/compact"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Join multiple classnames
+ * Returns a string of joined classnames omitting falsy values, undefined when resulting string is empty
+ */
+function joinClassNames() {
+  for (var _len = arguments.length, classnames = new Array(_len), _key = 0; _key < _len; _key++) {
+    classnames[_key] = arguments[_key];
+  }
+
+  var result = (0, _compact.default)(classnames).join(' ');
+  return result || undefined;
+}
+
+var _default = joinClassNames;
+exports.default = _default;

package/lib/utils/useFirstMount.d.ts

@@ -0,0 +1,2 @@
+export default function useFirstMountState(): boolean;
+//# sourceMappingURL=useFirstMount.d.ts.map

package/lib/utils/useFirstMount.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFirstMount.d.ts","sourceRoot":"","sources":["../../src/utils/useFirstMount.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,kBAAkB,IAAI,OAAO,CAUpD"}

package/lib/utils/useFirstMount.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useFirstMountState;
+
+var _react = require("react");
+
+function useFirstMountState() {
+  var isFirst = (0, _react.useRef)(true);
+
+  if (isFirst.current) {
+    isFirst.current = false;
+    return true;
+  }
+
+  return isFirst.current;
+}

package/lib/utils/useUpdateEffect.d.ts

@@ -0,0 +1,4 @@
+import { useEffect } from 'react';
+declare const useUpdateEffect: typeof useEffect;
+export default useUpdateEffect;
+//# sourceMappingURL=useUpdateEffect.d.ts.map

package/lib/utils/useUpdateEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUpdateEffect.d.ts","sourceRoot":"","sources":["../../src/utils/useUpdateEffect.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAkC,MAAM,OAAO,CAAC;AAGlE,QAAA,MAAM,eAAe,EAAE,OAAO,SAY7B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/utils/useUpdateEffect.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _useFirstMount = _interopRequireDefault(require("./useFirstMount"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable react-hooks/exhaustive-deps */
+var useUpdateEffect = function useUpdateEffect(effect) {
+  var deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var isFirstMount = (0, _useFirstMount.default)();
+  (0, _react.useEffect)(function () {
+    if (!isFirstMount) {
+      return effect();
+    }
+
+    return undefined;
+  }, deps);
+};
+
+var _default = useUpdateEffect;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.0",
+  "version": "2.0.1-alpha.100+2ee0ae7",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -25,6 +25,7 @@
     "lodash": "^4.17.15",
     "md5": "^2.2.1",
     "polished": "^3.4.1",
+    "react-beautiful-dnd": "^13.0.0",
     "react-desc": "^4.1.2",
     "react-popper": "^1.3.3",
     "styled-components-modifiers": "^1.2.5",
@@ -48,6 +49,7 @@
     "@types/md5": "^2.1.33",
     "@types/prop-types": "^15.7.1",
     "@types/react": "^16.8.22",
+    "@types/react-beautiful-dnd": "^13.0.0",
     "@types/styled-components": "^4.1.15",
     "@types/styled-theming": "^2.2.2",
     "babel-plugin-styled-components": "^1.10.6",
@@ -69,5 +71,5 @@
     "access": "public"
   },
   "private": false,
-  "gitHead": "5dba08ac3e79b244923ba7683927210aeb5a7861"
+  "gitHead": "2ee0ae79efd64111ffae307af42f2a91c965111a"
 }

package/lib/atoms/InputField/RequiredIcon.d.ts

@@ -1,4 +0,0 @@
-import { RefForwardingComponent, RefAttributes } from 'react';
-declare const RequiredIcon: RefForwardingComponent<HTMLDivElement, RefAttributes<HTMLDivElement>>;
-export default RequiredIcon;
-//# sourceMappingURL=RequiredIcon.d.ts.map

package/lib/atoms/InputField/RequiredIcon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RequiredIcon.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/RequiredIcon.tsx"],"names":[],"mappings":"AACA,OAAc,EAEZ,sBAAsB,EAEtB,aAAa,EACd,MAAM,OAAO,CAAC;AAWf,QAAA,MAAM,YAAY,EAAE,sBAAsB,CACxC,cAAc,EACd,aAAa,CAAC,cAAc,CAAC,CAU9B,CAAC;AAEF,eAAe,YAAY,CAAC"}