Switch Library Type from CommonJs2 => UMD (#134)

CHANGELOG.md

@@ -5,27 +5,6 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [[7.2.0]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.2.0)
-
-- Added `onOverlayClick` which allows you to react to a click on the overlay
-- Added `acceptOnOverlayClick` which accepts the cookies when the overlay is clicked and runs `onOverlayClick`
-
-## [[7.1.1]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.1.1)
-
-- `customContentAttributes` and `customContainerAttributes` are now optional in the typing file as they should be
-
-## [[7.1.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.1.0)]
-
-- Added custom attribute props for content and container
-
-## [[7.0.1](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.0.1)]
-
-- Configured webpack to remove self from build artefact. Should now work in Nextjs and Gatsby (only tested those..)
-
-## [[7.0.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.0.0)]
-
-- Switched from CommonJS to UMD module
-
 ## [[6.4.1](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.4.1))]
 
 - Added missing typing

README.md

@@ -138,7 +138,7 @@ That option would be interesting if you want to allow user to change their conse
 ## Props
 
 | Prop                     |               Type                | Default value                        | Description                                                                                                                             |
-| ------------------------- | :-----------------------------------------: | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
+| ------------------------ | :-----------------------------------------: | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
 | location                 |      string, "top", "bottom" or "none"      | "bottom"                             | Syntactic sugar to easily enable you to place the bar at the top or the bottom of the browser window. Use "none" to disable.            |
 | visible                  | string, "show", "hidden" or "byCookieValue" | "byCookieValue"                      | Force the consent bar visibility. If "byCookieValue", visibility are defined by cookie consent existence.                            |
 | children                 |          string or React component          |                                      | Content to appear inside the bar                                                                                                        |
@@ -174,15 +174,11 @@ That option would be interesting if you want to allow user to change their conse
 | flipButtons              |                   boolean                   | false                                | If enabled the accept and decline buttons will be flipped                                                                               |
 | ButtonComponent          |               React component               | button                               | React Component to render as a button.                                                                                                  |
 | sameSite                 | string, "strict", "lax" or "none" | none                                 | Cookies sameSite attribute value                                                                                                        |
-| cookieSecurity            |                  boolean ¡                  | undefined                            | Cookie security level. Defaults to true unless running on http.                                                                         |
+| cookieSecurity           |                   boolean                    ¡| undefined                            | Cookie security level. Defaults to true unless running on http.                                                                         |
 | ariaAcceptLabel          |                   string                    | Accept cookies                       | Aria label to set on the accept button                                                                                                  |
 | ariaDeclineLabel         |                   string                    | Decline cookies                      | Aria label to set on the decline button                                                                                                 |
 | acceptOnScroll           |                   boolean                   | false                                | Defines whether "accept" should be fired after the user scrolls a certain distance (see acceptOnScrollPercentage)                       |
 | acceptOnScrollPercentage |                   number                    | 25                                   | Percentage of the page height the user has to scroll to trigger the accept function if acceptOnScroll is enabled                        |
-| customContentAttributes   |                   object                    | `{}`                                 | Allows you to set custom (data) attributes on the content div                                                                           |
-| customContainerAttributes |                   object                    | `{}`                                 | Allows you to set custom (data) attributes on the container div                                                                         |
-| onOverlayClick            |                  function                   | `() => {}`                           | allows you to react to a click on the overlay                                                                                           |
-| acceptOnOverlayClick      |                   boolean                   | false                                | Determines whether the cookies should be accepted after clicking on the overlay                                                         |
 
 ## Debugging it
 

build/index.d.ts

@@ -38,14 +38,10 @@ export interface CookieConsentProps {
   overlay?: boolean;
   overlayClasses?: string;
   overlayStyle?: object;
-  onOverlayClick?: () => void;
-  acceptOnOverlayClick?: boolean;
   ariaAcceptLabel?: string;
   ariaDeclineLabel?: string;
   acceptOnScroll?: boolean;
   acceptOnScrollPercentage?: number;
-  customContentAttributes?: object;
-  customContainerAttributes?: object;
 }
 
 export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}

build/index.js

@@ -1,14 +1,5 @@
 /*! For license information please see index.js.LICENSE.txt */
-!(function (e, t) {
+!(function () {
-  "object" == typeof exports && "object" == typeof module
-    ? (module.exports = t())
-    : "function" == typeof define && define.amd
-    ? define([], t)
-    : "object" == typeof exports
-    ? (exports.ReactCookieConsent = t())
-    : (e.ReactCookieConsent = t());
-})("undefined" != typeof self ? self : this, function () {
-  return (function () {
   var e = {
       808: function (e, t, n) {
         var o, r, i;
@@ -180,8 +171,7 @@
         Object.defineProperty(e, "__esModule", { value: !0 });
     });
   var o = {};
-    return (
+  !(function () {
-      (function () {
     "use strict";
     n.r(o),
       n.d(o, {
@@ -189,19 +179,19 @@
           return l();
         },
         OPTIONS: function () {
-              return h;
+          return m;
         },
         SAME_SITE_OPTIONS: function () {
-              return C;
+          return g;
         },
         VISIBLE_OPTIONS: function () {
-              return g;
+          return S;
         },
         default: function () {
           return B;
         },
         getCookieConsentValue: function () {
-              return S;
+          return C;
         },
         resetCookieConsentValue: function () {
           return k;
@@ -257,7 +247,7 @@
         var n = null != arguments[t] ? arguments[t] : {};
         t % 2
           ? p(Object(n), !0).forEach(function (t) {
-                  m(e, t, n[t]);
+              h(e, t, n[t]);
             })
           : Object.getOwnPropertyDescriptors
           ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n))
@@ -267,7 +257,7 @@
       }
       return e;
     }
-        function b(e, t) {
+    function d(e, t) {
       for (var n = 0; n < t.length; n++) {
         var o = t[n];
         (o.enumerable = o.enumerable || !1),
@@ -276,14 +266,14 @@
           Object.defineProperty(e, o.key, o);
       }
     }
-        function y(e, t) {
+    function b(e, t) {
-          return (y =
+      return (b =
         Object.setPrototypeOf ||
         function (e, t) {
           return (e.__proto__ = t), e;
         })(e, t);
     }
-        function d(e, t) {
+    function y(e, t) {
       if (t && ("object" === a(t) || "function" == typeof t)) return t;
       if (void 0 !== t)
         throw new TypeError("Derived constructors may only return object or undefined");
@@ -301,7 +291,7 @@
             return e.__proto__ || Object.getPrototypeOf(e);
           })(e);
     }
-        function m(e, t, n) {
+    function h(e, t, n) {
       return (
         t in e
           ? Object.defineProperty(e, t, {
@@ -314,23 +304,23 @@
         e
       );
     }
-        var h = { TOP: "top", BOTTOM: "bottom", NONE: "none" },
+    var m = { TOP: "top", BOTTOM: "bottom", NONE: "none" },
-          C = { STRICT: "strict", LAX: "lax", NONE: "none" },
+      g = { STRICT: "strict", LAX: "lax", NONE: "none" },
-          g = { HIDDEN: "hidden", SHOW: "show", BY_COOKIE_VALUE: "byCookieValue" },
+      S = { HIDDEN: "hidden", SHOW: "show", BY_COOKIE_VALUE: "byCookieValue" },
-          S = function () {
+      C = function () {
-            var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : j,
+        var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : w,
           t = l().get(e);
         return void 0 === t && (t = l().get(x(e))), t;
       },
       k = function () {
-            var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : j;
+        var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : w;
         l().remove(e);
       },
       x = function (e) {
         return "".concat(e, "-legacy");
       },
-          j = "CookieConsent",
+      w = "CookieConsent",
-          w = function (e) {
+      j = function (e) {
         var t = e.condition,
           n = e.wrapper,
           o = e.children;
@@ -343,7 +333,7 @@
           (e.prototype = Object.create(t && t.prototype, {
             constructor: { value: e, writable: !0, configurable: !0 },
           })),
-                t && y(e, t);
+            t && b(e, t);
         })(a, e);
         var n,
           o,
@@ -357,10 +347,7 @@
               if ("function" == typeof Proxy) return !0;
               try {
                 return (
-                      Boolean.prototype.valueOf.call(
+                  Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})), !0
-                        Reflect.construct(Boolean, [], function () {})
-                      ),
-                      !0
                 );
               } catch (e) {
                 return !1;
@@ -373,7 +360,7 @@
                 var n = O(this).constructor;
                 e = Reflect.construct(t, arguments, n);
               } else e = t.apply(this, arguments);
-                  return d(this, e);
+              return y(this, e);
             });
         function a(e) {
           var t;
@@ -381,7 +368,7 @@
             (function (e, t) {
               if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
             })(this, a),
-                m(v((t = c.call(this, e))), "handleScroll", function () {
+            h(v((t = c.call(this, e))), "handleScroll", function () {
               var e = t.props.acceptOnScrollPercentage,
                 n = document.documentElement,
                 o = document.body,
@@ -389,7 +376,7 @@
                 i = "scrollHeight";
               ((n[r] || o[r]) / ((n[i] || o[i]) - n.clientHeight)) * 100 > e && t.accept(!0);
             }),
-                m(v(t), "removeScrollListener", function () {
+            h(v(t), "removeScrollListener", function () {
               t.props.acceptOnScroll && window.removeEventListener("scroll", t.handleScroll);
             }),
             (t.state = {
@@ -475,15 +462,6 @@
                   r && (this.setState({ visible: !1 }), this.removeScrollListener());
               },
             },
-                {
-                  key: "overlayClick",
-                  value: function () {
-                    var e = this.props,
-                      t = e.acceptOnOverlayClick,
-                      n = e.onOverlayClick;
-                    t && this.accept(), n();
-                  },
-                },
             {
               key: "decline",
               value: function () {
@@ -507,14 +485,14 @@
                   c = this.props.cookieSecurity;
                 void 0 === c && (c = !location || "https:" === location.protocol);
                 var a = f(f({ expires: r }, o), {}, { sameSite: i, secure: c });
-                    i === C.NONE && l().set(x(e), t, a), l().set(e, t, a);
+                i === g.NONE && l().set(x(e), t, a), l().set(e, t, a);
               },
             },
             {
               key: "getCookieValue",
               value: function () {
                 var e = this.props.cookieName;
-                    return S(e);
+                return C(e);
               },
             },
             {
@@ -522,9 +500,9 @@
               value: function () {
                 var e = this;
                 switch (this.props.visible) {
-                      case g.HIDDEN:
+                  case S.HIDDEN:
                     return null;
-                      case g.BY_COOKIE_VALUE:
+                  case S.BY_COOKIE_VALUE:
                     if (!this.state.visible) return null;
                 }
                 var n = this.props,
@@ -536,62 +514,60 @@
                   a = n.disableStyles,
                   s = n.buttonText,
                   p = n.declineButtonText,
-                      b = n.containerClasses,
+                  d = n.containerClasses,
-                      y = n.contentClasses,
+                  b = n.contentClasses,
-                      d = n.buttonClasses,
+                  y = n.buttonClasses,
                   v = n.buttonWrapperClasses,
                   O = n.declineButtonClasses,
-                      m = n.buttonId,
+                  h = n.buttonId,
-                      C = n.declineButtonId,
+                  g = n.declineButtonId,
-                      S = n.disableButtonStyles,
+                  C = n.disableButtonStyles,
                   k = n.enableDeclineButton,
                   x = n.flipButtons,
-                      j = n.ButtonComponent,
+                  w = n.ButtonComponent,
                   T = n.overlay,
                   B = n.overlayClasses,
                   E = n.overlayStyle,
                   P = n.ariaAcceptLabel,
                   D = n.ariaDeclineLabel,
-                      I = n.customContainerAttributes,
+                  I = {},
-                      _ = n.customContentAttributes,
+                  _ = {},
-                      A = {},
                   N = {},
-                      R = {},
+                  A = {},
-                      L = {},
+                  L = {};
-                      V = {};
                 switch (
                   (a
-                        ? ((A = u({}, r)),
+                    ? ((I = u({}, r)),
-                          (N = u({}, i)),
+                      (_ = u({}, i)),
-                          (R = u({}, c)),
+                      (N = u({}, c)),
-                          (L = u({}, l)),
+                      (A = u({}, l)),
-                          (V = u({}, E)))
+                      (L = u({}, E)))
-                        : ((A = u({}, f(f({}, this.state.style), r))),
+                    : ((I = u({}, f(f({}, this.state.style), r))),
-                          (L = u({}, f(f({}, this.state.contentStyle), l))),
+                      (A = u({}, f(f({}, this.state.contentStyle), l))),
-                          (V = u({}, f(f({}, this.state.overlayStyle), E))),
+                      (L = u({}, f(f({}, this.state.overlayStyle), E))),
-                          S
+                      C
-                            ? ((N = u({}, i)), (R = u({}, c)))
+                        ? ((_ = u({}, i)), (N = u({}, c)))
-                            : ((N = u({}, f(f({}, this.state.buttonStyle), i))),
+                        : ((_ = u({}, f(f({}, this.state.buttonStyle), i))),
-                              (R = u({}, f(f({}, this.state.declineButtonStyle), c))))),
+                          (N = u({}, f(f({}, this.state.declineButtonStyle), c))))),
                   o)
                 ) {
-                      case h.TOP:
+                  case m.TOP:
-                        A.top = "0";
+                    I.top = "0";
                     break;
-                      case h.BOTTOM:
+                  case m.BOTTOM:
-                        A.bottom = "0";
+                    I.bottom = "0";
                 }
-                    var U = [];
+                var R = [];
                 return (
                   k &&
-                        U.push(
+                    R.push(
                       t().createElement(
-                            j,
+                        w,
                         {
                           key: "declineButton",
-                              style: R,
+                          style: N,
                           className: O,
-                              id: C,
+                          id: g,
                           "aria-label": D,
                           onClick: function () {
                             e.decline();
@@ -600,14 +576,14 @@
                         p
                       )
                     ),
-                      U.push(
+                  R.push(
                     t().createElement(
-                          j,
+                      w,
                       {
                         key: "acceptButton",
-                            style: N,
+                        style: _,
-                            className: d,
+                        className: y,
-                            id: m,
+                        id: h,
                         "aria-label": P,
                         onClick: function () {
                           e.accept();
@@ -616,37 +592,23 @@
                       s
                     )
                   ),
-                      x && U.reverse(),
+                  x && R.reverse(),
                   t().createElement(
-                        w,
+                    j,
                     {
                       condition: T,
-                          wrapper: function (n) {
+                      wrapper: function (e) {
-                            return t().createElement(
+                        return t().createElement("div", { style: L, className: B }, e);
-                              "div",
-                              {
-                                style: V,
-                                className: B,
-                                onClick: function () {
-                                  e.overlayClick();
-                                },
-                              },
-                              n
-                            );
                       },
                     },
                     t().createElement(
                       "div",
-                          u({ className: "".concat(b), style: A }, I),
+                      { className: "".concat(d), style: I },
-                          t().createElement(
+                      t().createElement("div", { style: A, className: b }, this.props.children),
-                            "div",
-                            u({ style: L, className: y }, _),
-                            this.props.children
-                          ),
                       t().createElement(
                         "div",
                         { className: "".concat(v) },
-                            U.map(function (e) {
+                        R.map(function (e) {
                           return e;
                         })
                       )
@@ -655,24 +617,24 @@
                 );
               },
             },
-              ]) && b(n.prototype, o),
+          ]) && d(n.prototype, o),
           a
         );
       })(e.Component);
     (T.propTypes = {
       location: i().oneOf(
-            Object.keys(h).map(function (e) {
+        Object.keys(m).map(function (e) {
-              return h[e];
+          return m[e];
         })
       ),
       visible: i().oneOf(
-            Object.keys(g).map(function (e) {
+        Object.keys(S).map(function (e) {
-              return g[e];
+          return S[e];
         })
       ),
       sameSite: i().oneOf(
-            Object.keys(C).map(function (e) {
+        Object.keys(g).map(function (e) {
-              return C[e];
+          return g[e];
         })
       ),
       style: i().object,
@@ -709,24 +671,20 @@
       overlay: i().bool,
       overlayClasses: i().string,
       overlayStyle: i().object,
-          onOverlayClick: i().func,
-          acceptOnOverlayClick: i().bool,
       ariaAcceptLabel: i().string,
       ariaDeclineLabel: i().string,
       acceptOnScroll: i().bool,
       acceptOnScrollPercentage: i().number,
-          customContentAttributes: i().object,
-          customContainerAttributes: i().object,
     }),
       (T.defaultProps = {
         disableStyles: !1,
         hideOnAccept: !0,
         hideOnDecline: !0,
-            location: h.BOTTOM,
+        location: m.BOTTOM,
-            visible: g.BY_COOKIE_VALUE,
+        visible: S.BY_COOKIE_VALUE,
         onAccept: function () {},
         onDecline: function () {},
-            cookieName: j,
+        cookieName: w,
         cookieValue: !0,
         declineCookieValue: !1,
         setDeclineCookie: !0,
@@ -745,7 +703,7 @@
         disableButtonStyles: !1,
         enableDeclineButton: !1,
         flipButtons: !1,
-            sameSite: C.LAX,
+        sameSite: g.LAX,
         ButtonComponent: function (e) {
           var n = e.children,
             o = (function (e, t) {
@@ -774,18 +732,12 @@
         },
         overlay: !1,
         overlayClasses: "",
-            onOverlayClick: function () {},
-            acceptOnOverlayClick: !1,
         ariaAcceptLabel: "Accept cookies",
         ariaDeclineLabel: "Decline cookies",
         acceptOnScroll: !1,
         acceptOnScrollPercentage: 25,
-            customContentAttributes: {},
-            customContainerAttributes: {},
       });
     const B = T;
   })(),
-      o
+    (module.exports = o);
-    );
+})();
-  })();
-});

package-lock.json

@@ -1,11 +1,11 @@
 {
   "name": "react-cookie-consent",
-  "version": "7.2.0",
+  "version": "6.4.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "7.2.0",
+      "version": "6.4.1",
       "license": "MIT",
       "dependencies": {
         "js-cookie": "^2.2.1",

package.json

@@ -4,7 +4,7 @@
     "name": "Rick van Lieshout",
     "email": "info@rickvanlieshout.com"
   },
-  "version": "7.2.0",
+  "version": "6.4.1",
   "description": "A small, simple and customizable cookie consent bar for use in React applications.",
   "main": "build/index.js",
   "types": "build/index.d.ts",

src/index.d.ts

@@ -13,7 +13,6 @@ export interface CookieConsentProps {
   children?: React.ReactNode;
   disableStyles?: boolean;
   hideOnAccept?: boolean;
-  hideOnDecline?: boolean;
   onAccept?: (acceptedByScrolling?: boolean) => void;
   onDecline?: Function;
   buttonText?: Function | React.ReactNode;
@@ -39,14 +38,10 @@ export interface CookieConsentProps {
   overlay?: boolean;
   overlayClasses?: string;
   overlayStyle?: object;
-  onOverlayClick?: () => void;
-  acceptOnOverlayClick?: boolean;
   ariaAcceptLabel?: string;
   ariaDeclineLabel?: string;
   acceptOnScroll?: boolean;
   acceptOnScrollPercentage?: number;
-  customContentAttributes?: object;
-  customContainerAttributes?: object;
 }
 
 export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}

src/index.js

@@ -15,10 +15,10 @@ export const SAME_SITE_OPTIONS = {
 };
 
 export const VISIBLE_OPTIONS = {
-  HIDDEN: "hidden",
+  HIDDEN: 'hidden',
-  SHOW: "show",
+  SHOW: 'show',
-  BY_COOKIE_VALUE: "byCookieValue",
+  BY_COOKIE_VALUE: 'byCookieValue'
-};
+}
 
 /**
  * Returns the value of the consent cookie
@@ -159,17 +159,6 @@ class CookieConsent extends Component {
     }
   }
 
-  /**
-   * Handle a click on the overlay
-   */
-  overlayClick() {
-    const { acceptOnOverlayClick, onOverlayClick } = this.props;
-    if (acceptOnOverlayClick) {
-      this.accept();
-    }
-    onOverlayClick();
-  }
-
   /**
    * Set a persistent decline cookie
    */
@@ -290,8 +279,6 @@ class CookieConsent extends Component {
       overlayStyle,
       ariaAcceptLabel,
       ariaDeclineLabel,
-      customContainerAttributes,
-      customContentAttributes,
     } = this.props;
 
     let myStyle = {};
@@ -380,19 +367,13 @@ class CookieConsent extends Component {
       <ConditionalWrapper
         condition={overlay}
         wrapper={(children) => (
-          <div
+          <div style={myOverlayStyle} className={overlayClasses}>
-            style={myOverlayStyle}
-            className={overlayClasses}
-            onClick={() => {
-              this.overlayClick();
-            }}
-          >
             {children}
           </div>
         )}
       >
-        <div className={`${containerClasses}`} style={myStyle} {...customContainerAttributes}>
+        <div className={`${containerClasses}`} style={myStyle}>
-          <div style={myContentStyle} className={contentClasses} {...customContentAttributes}>
+          <div style={myContentStyle} className={contentClasses}>
             {this.props.children}
           </div>
           <div className={`${buttonWrapperClasses}`}>
@@ -444,14 +425,10 @@ CookieConsent.propTypes = {
   overlay: PropTypes.bool,
   overlayClasses: PropTypes.string,
   overlayStyle: PropTypes.object,
-  onOverlayClick: PropTypes.func,
-  acceptOnOverlayClick: PropTypes.bool,
   ariaAcceptLabel: PropTypes.string,
   ariaDeclineLabel: PropTypes.string,
   acceptOnScroll: PropTypes.bool,
   acceptOnScrollPercentage: PropTypes.number,
-  customContentAttributes: PropTypes.object,
-  customContainerAttributes: PropTypes.object,
 };
 
 CookieConsent.defaultProps = {
@@ -485,14 +462,10 @@ CookieConsent.defaultProps = {
   ButtonComponent: ({ children, ...props }) => <button {...props}>{children}</button>,
   overlay: false,
   overlayClasses: "",
-  onOverlayClick: () => {},
-  acceptOnOverlayClick: false,
   ariaAcceptLabel: "Accept cookies",
   ariaDeclineLabel: "Decline cookies",
   acceptOnScroll: false,
   acceptOnScrollPercentage: 25,
-  customContentAttributes: {},
-  customContainerAttributes: {},
 };
 
 export default CookieConsent;

webpack.config.js

@@ -13,7 +13,6 @@ module.exports = {
     environment: {
       arrowFunction: false, // the generated runtime-code should not use arrow functions
     },
-    globalObject: `typeof self !== 'undefined' ? self : this`,
   },
   module: {
     rules: [