@decisiv/ui-components 2.0.1-alpha.17 → 2.0.1-alpha.174

package/lib/providers/NotificationsProvider/index.js

@@ -11,7 +11,9 @@ 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");
 
@@ -47,15 +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 notifyCB;
-var notifyHandler;
-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() {}
+  notify: _noop.default
 });
 exports.NotificationsContext = NotificationsContext;
 var transitions = (_transitions = {}, _defineProperty(_transitions, _types.NotificationState.ENTERING, {
@@ -76,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
    */
@@ -112,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;
         }
 
@@ -134,7 +142,7 @@ function NotificationsProvider(_ref) {
     });
   };
 
-  var notify = (0, _react.useCallback)(function () {
+  var notify = React.useCallback(function () {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
@@ -148,25 +156,23 @@ function NotificationsProvider(_ref) {
         // notification dispatched.
         var newNotificationParams = args[0](oldNotifications);
 
-        if ((0, _isEmpty.default)(newNotificationParams)) {
+        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 _ref6 = newNotificationParams;
+        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];
-      } else {
-        var _ref8 = args;
-
-        var _ref9 = _slicedToArray(_ref8, 2);
-
-        options = _ref9[0];
-        body = _ref9[1];
       }
 
       var notificationID = (0, _uniqueId.default)("notification-".concat(options.id, "-"));
@@ -174,6 +180,9 @@ function NotificationsProvider(_ref) {
       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) {
@@ -185,9 +194,13 @@ function NotificationsProvider(_ref) {
         };
       };
 
-      var actions = options.actions && options.actions.map(function (_ref10) {
-        var onClick = _ref10.onClick,
-            rest = _objectWithoutProperties(_ref10, ["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)
@@ -196,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
@@ -204,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/commonUIColors.d.ts

@@ -11,11 +11,359 @@ export declare type CommonUIColorKeys = StatusColorsKeys | VIColorsKeys;
 export declare type CommonUIColors = {
     [K in CommonUIColorKeys]: Color;
 };
-export declare const viColorKeys: import("@decisiv/design-tokens/lib/color/visual-interest").VisualInterestColorName[];
+export declare const viColorKeys: ("berryCrisp" | "koolaidCake" | "cookieMonster" | "cottonCandy" | "fizzyLime" | "mamboMango" | "carrotCake" | "roseGummy" | "licoriceMousse")[];
 export declare const statusColorKeys: ("information" | "success" | "warning" | "danger")[];
 export declare const viColors: VIColors;
 export declare const statusColors: StatusColors;
 export declare const commonUIColorKeys: CommonUIColorKeys[];
 export declare const commonUIColors: CommonUIColors;
+export declare const commonUIThreeShadeColors: {
+    readonly berryCrisp: {
+        light: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        medium: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        dark: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+    };
+    readonly koolaidCake: {
+        light: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        medium: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        dark: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+    };
+    readonly cookieMonster: {
+        light: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        medium: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        dark: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+    };
+    readonly cottonCandy: {
+        light: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        medium: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        dark: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+    };
+    readonly fizzyLime: {
+        light: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        medium: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        dark: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+    };
+    readonly mamboMango: {
+        light: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        medium: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        dark: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+    };
+    readonly carrotCake: {
+        light: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        medium: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        dark: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+    };
+    readonly roseGummy: {
+        light: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        medium: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        dark: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+    };
+    readonly licoriceMousse: {
+        dark: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        medium: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        light: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+    };
+    readonly information: import("@decisiv/design-tokens/lib/color").ThreeShadeColor;
+    readonly success: import("@decisiv/design-tokens/lib/color").ThreeShadeColor;
+    readonly warning: import("@decisiv/design-tokens/lib/color").ThreeShadeColor;
+    readonly danger: import("@decisiv/design-tokens/lib/color").ThreeShadeColor;
+};
 export {};
 //# sourceMappingURL=commonUIColors.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"commonUIColors.d.ts","sourceRoot":"","sources":["../../src/utils/commonUIColors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAIhE,oBAAY,YAAY,GAAG,MAAM,OAAO,KAAK,CAAC,cAAc,CAAC;AAC7D,oBAAY,gBAAgB,GAAG,MAAM,OAAO,KAAK,CAAC,MAAM,CAAC;AAEzD,aAAK,QAAQ,GAAG;KAAG,CAAC,IAAI,YAAY,GAAG,KAAK;CAAE,CAAC;AAC/C,aAAK,YAAY,GAAG;KAAG,CAAC,IAAI,gBAAgB,GAAG,KAAK;CAAE,CAAC;AAEvD,oBAAY,iBAAiB,GAAG,gBAAgB,GAAG,YAAY,CAAC;AAChE,oBAAY,cAAc,GAAG;KAAG,CAAC,IAAI,iBAAiB,GAAG,KAAK;CAAE,CAAC;AAEjE,eAAO,MAAM,WAAW,sFAAgD,CAAC;AACzE,eAAO,MAAM,eAAe,sDAA4C,CAAC;AAEzE,eAAO,MAAM,QAAQ,UAMR,CAAC;AAEd,eAAO,MAAM,YAAY,cAGR,CAAC;AAElB,eAAO,MAAM,iBAAiB,qBAAuC,CAAC;AAEtE,eAAO,MAAM,cAAc,EAAE,cAG5B,CAAC"}
+{"version":3,"file":"commonUIColors.d.ts","sourceRoot":"","sources":["../../src/utils/commonUIColors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAIhE,oBAAY,YAAY,GAAG,MAAM,OAAO,KAAK,CAAC,cAAc,CAAC;AAC7D,oBAAY,gBAAgB,GAAG,MAAM,OAAO,KAAK,CAAC,MAAM,CAAC;AAEzD,aAAK,QAAQ,GAAG;KAAG,CAAC,IAAI,YAAY,GAAG,KAAK;CAAE,CAAC;AAC/C,aAAK,YAAY,GAAG;KAAG,CAAC,IAAI,gBAAgB,GAAG,KAAK;CAAE,CAAC;AAEvD,oBAAY,iBAAiB,GAAG,gBAAgB,GAAG,YAAY,CAAC;AAChE,oBAAY,cAAc,GAAG;KAAG,CAAC,IAAI,iBAAiB,GAAG,KAAK;CAAE,CAAC;AAEjE,eAAO,MAAM,WAAW,iJAAgD,CAAC;AACzE,eAAO,MAAM,eAAe,sDAA4C,CAAC;AAEzE,eAAO,MAAM,QAAQ,UAMR,CAAC;AAEd,eAAO,MAAM,YAAY,cAGR,CAAC;AAElB,eAAO,MAAM,iBAAiB,qBAAuC,CAAC;AAEtE,eAAO,MAAM,cAAc,EAAE,cAG5B,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAG3B,CAAC"}

package/lib/utils/commonUIColors.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.commonUIColors = exports.commonUIColorKeys = exports.statusColors = exports.viColors = exports.statusColorKeys = exports.viColorKeys = void 0;
+exports.commonUIThreeShadeColors = exports.commonUIColors = exports.commonUIColorKeys = exports.statusColors = exports.viColors = exports.statusColorKeys = exports.viColorKeys = void 0;
 
 var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
 
@@ -42,4 +42,8 @@ exports.commonUIColorKeys = commonUIColorKeys;
 
 var commonUIColors = _objectSpread({}, statusColors, {}, viColors);
 
-exports.commonUIColors = commonUIColors;
+exports.commonUIColors = commonUIColors;
+
+var commonUIThreeShadeColors = _objectSpread({}, status, {}, visualInterest);
+
+exports.commonUIThreeShadeColors = commonUIThreeShadeColors;

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.1-alpha.17+ce12c75",
+  "version": "2.0.1-alpha.174+aa22194",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -71,5 +71,5 @@
     "access": "public"
   },
   "private": false,
-  "gitHead": "ce12c75e38e982778def970cff6202a76874ac1c"
+  "gitHead": "aa221943bbad57cc97bd8f05e44089e31baf4805"
 }