@uncinc/uncinc-react-kitchen-sink 2.15.2 → 2.16.1

package/dist/components/GoogleConsentCookieBanner/index.js

@@ -11,7 +11,6 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { useEffect, useState } from 'react';
-import useCookie from 'react-use-cookie';
 import Cookies from 'js-cookie';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
@@ -22,6 +21,7 @@ import Container from '../Layout/Container';
 import Checkbox from './Checkbox';
 import './style.scss';
 import { LocalConsentStatus, AvailableConsentPermissions } from './types';
+import useCookieStore from '../../hooks/useCookieStore';
 export var COOKIE_CONSENT_CATEGORIES = 'cookie_consent_categories';
 export var COOKIE_CONSENT_STATE = 'cookie_consent_state';
 export var DEFAULT_COOKIE_EXPIRATION_DAYS = 365;
@@ -125,15 +125,21 @@ var CookieCompliancePopup = function CookieCompliancePopup(props) {
   // STATUS DECLINED (0 as cookie value)
   // STATUS NOT YET ANSWERED (1 as cookie value)
   // STATUS ACCEPTED_ALL (2 as cookie value)
-  var _useCookie = useCookie(COOKIE_CONSENT_STATE, LocalConsentStatus.STATUS_DEFAULT),
-    _useCookie2 = _slicedToArray(_useCookie, 2),
-    didConsent = _useCookie2[0],
-    setDidConsent = _useCookie2[1];
+  var _useCookieStore = useCookieStore(COOKIE_CONSENT_STATE, JSON.stringify({
+      status: LocalConsentStatus.STATUS_DEFAULT,
+      version: version
+    })),
+    _useCookieStore2 = _slicedToArray(_useCookieStore, 2),
+    didConsent = _useCookieStore2[0],
+    setDidConsent = _useCookieStore2[1];
   var categories = cookieLevels.map(function (item) {
     return item.value;
   });
   var defaultState = categories.reduce(function (prev, category) {
-    // eslint-disable-next-line valid-typeof
+    var existingConsent = getPreviouslyAcceptedCookieLevels(defaultValues);
+    if (existingConsent) {
+      return existingConsent;
+    }
     var newPartialState = prev;
     if (defaultValues[category] !== undefined) {
       newPartialState[category] = defaultValues[category];
@@ -148,20 +154,28 @@ var CookieCompliancePopup = function CookieCompliancePopup(props) {
     _useState6 = _slicedToArray(_useState5, 2),
     choicesSelected = _useState6[0],
     setChoicesSelected = _useState6[1];
+  var isLoading = didConsent === undefined;
+  var didConsentContent = typeof didConsent === 'string' && didConsent.length > 0 ? JSON.parse(didConsent) : null;
   useEffect(function () {
     // We now know the value of the cookie. If there is no cookie set,
     // immediately set the didConsent state to STATUS_NOT_YET_ANSWERED.
-    if (didConsent === LocalConsentStatus.STATUS_DEFAULT) {
+    if ((didConsentContent === null || didConsentContent === void 0 ? void 0 : didConsentContent.status) === LocalConsentStatus.STATUS_DEFAULT
+    // For backwards compatibility
+    || didConsent === LocalConsentStatus.STATUS_DEFAULT) {
       setDidConsent(JSON.stringify({
         status: LocalConsentStatus.STATUS_NOT_YET_ANSWERED,
         version: version
       }), cookieOptions);
     }
-  }, [didConsent, cookieOptions, setDidConsent]);
-  var isLoading = didConsent === undefined;
-  var didConsentContent = typeof didConsent === 'string' && didConsent.length > 0 ? JSON.parse(didConsent) : null;
+  }, [didConsentContent, cookieOptions, setDidConsent, version]);
   var isPrompting = (didConsentContent === null || didConsentContent === void 0 ? void 0 : didConsentContent.status) === LocalConsentStatus.STATUS_NOT_YET_ANSWERED;
   var isAnswered = (didConsentContent === null || didConsentContent === void 0 ? void 0 : didConsentContent.status) === LocalConsentStatus.STATUS_ACCEPTED || (didConsentContent === null || didConsentContent === void 0 ? void 0 : didConsentContent.status) === LocalConsentStatus.STATUS_ONLY_NECESSARY;
+  var isEditing = (didConsentContent === null || didConsentContent === void 0 ? void 0 : didConsentContent.status) === LocalConsentStatus.STATUS_EDITING;
+  useEffect(function () {
+    if (isEditing) {
+      setManualChoiceVisible(true);
+    }
+  }, [didConsent, setManualChoiceVisible, isEditing]);
 
   // This function expands the notification to show the options.
   var displayConsentChoices = function displayConsentChoices(e) {
@@ -220,6 +234,7 @@ var CookieCompliancePopup = function CookieCompliancePopup(props) {
       newPartialState[category] = true;
       return newPartialState;
     }, {});
+    setChoicesSelected(allCategoriesSelected);
     onInternalAgree(allCategoriesSelected);
   };
 
@@ -248,7 +263,8 @@ var CookieCompliancePopup = function CookieCompliancePopup(props) {
     'GoogleConsentCookieBanner--answered': isAnswered,
     // answering refers to the fact that the user has answered in the current session.
     'GoogleConsentCookieBanner--answering': answeredInCurrentSession,
-    'GoogleConsentCookieBanner--hidden': isAnswered
+    'GoogleConsentCookieBanner--hidden': isAnswered,
+    'GoogleConsentCookieBanner--editing': isEditing
   });
 
   // if it is answered in the current session
@@ -340,4 +356,33 @@ var CookieCompliancePopup = function CookieCompliancePopup(props) {
     onClick: onConsentAll
   }, acceptAllText))))));
 };
+
+/**
+ * Get the previously accepted cookie levels from the cookie if the user has previously
+ * given consent to the use of cookies.
+ *
+ * @param defaultValues The default values for the cookie categories. Keys that are
+ * retrieved from the cookie that are not present in defaultValues will be omitted.
+ */
+function getPreviouslyAcceptedCookieLevels(defaultValues) {
+  var cookies = Cookies.get(COOKIE_CONSENT_CATEGORIES);
+  if (!cookies) {
+    return null;
+  }
+  try {
+    var parsedCookies = JSON.parse(cookies);
+    if (!('categories' in parsedCookies)) {
+      return null;
+    }
+    var result = _objectSpread({}, defaultValues);
+    parsedCookies.categories.forEach(function (category) {
+      if (defaultValues[category] !== undefined) {
+        result[category] = true;
+      }
+    });
+    return result;
+  } catch (error) {
+    return null;
+  }
+}
 export default CookieCompliancePopup;

package/dist/components/GoogleConsentCookieBanner/style.scss

@@ -94,7 +94,8 @@
     }
   }
 
-  &--prompting {
+  &--prompting,
+  &--editing {
     transform: translateX(-50%) translateY(0);
     animation: slide 1s forwards;
   }

package/dist/components/GoogleConsentCookieBanner/types.d.ts

@@ -2,7 +2,8 @@ export declare enum LocalConsentStatus {
     STATUS_DEFAULT = "-1",
     STATUS_ONLY_NECESSARY = "0",
     STATUS_NOT_YET_ANSWERED = "1",
-    STATUS_ACCEPTED = "2"
+    STATUS_ACCEPTED = "2",
+    STATUS_EDITING = "3"
 }
 export declare enum AvailableConsentPermissions {
     SECURITY_STORAGE = "security_storage",

package/dist/components/GoogleConsentCookieBanner/types.js

@@ -3,6 +3,7 @@ export var LocalConsentStatus = /*#__PURE__*/function (LocalConsentStatus) {
   LocalConsentStatus["STATUS_ONLY_NECESSARY"] = "0";
   LocalConsentStatus["STATUS_NOT_YET_ANSWERED"] = "1";
   LocalConsentStatus["STATUS_ACCEPTED"] = "2";
+  LocalConsentStatus["STATUS_EDITING"] = "3";
   return LocalConsentStatus;
 }({});
 export var AvailableConsentPermissions = /*#__PURE__*/function (AvailableConsentPermissions) {

package/dist/components/MediaPlayer/types.d.ts

@@ -1,24 +1,25 @@
-import VideoJsTypes from 'video.js';
+import type { VideoJsPlayer as NativeVideoJsPlayer, VideoJsPlayerOptions } from 'video.js';
 export type MimeType = 'audio/3gpp' | 'audio/aac' | 'audio/flac' | 'audio/mpeg' | 'audio/mp3' | 'audio/mp4' | 'audio/ogg' | 'audio/wav' | 'audio/webm' | 'video/3gpp' | 'video/mpeg' | 'video/mpeg' | 'video/mp4' | 'video/ogg' | 'video/quicktime' | 'video/webm' | 'video/youtube' | 'video/vimeo';
 export type Control = 'play' | 'currentTime' | 'timeDivider' | 'duration' | 'seekbar' | 'captions' | 'volume' | 'fullscreen';
 export type VideoJSControls = {
     [K in Control]: string;
 };
+export type VideoJsPlayer = NativeVideoJsPlayer;
 export type MediaPlayerProps = {
     src: string;
     type: MimeType;
     controls?: Control[] | false;
     posterUrl?: string;
-    options?: VideoJsTypes.PlayerOptions;
-    captions?: VideoJsTypes.TextTrackOptions[];
+    options?: VideoJsPlayerOptions;
+    captions?: VideoJsPlayerOptions['tracks'];
     audioOnly?: boolean;
     notSupportedMessage?: string;
     className?: string;
-    onPlay?: (player: VideoJsTypes.Player, event: VideoJsTypes.EventTarget) => void;
-    onPause?: (player: VideoJsTypes.Player, event: VideoJsTypes.EventTarget) => void;
-    onEnded?: (player: VideoJsTypes.Player, event: VideoJsTypes.EventTarget) => void;
-    onSeeking?: (player: VideoJsTypes.Player, event: VideoJsTypes.EventTarget) => void;
-    onVolumeChange?: (player: VideoJsTypes.Player, event: VideoJsTypes.EventTarget) => void;
-    onFullscreenChange?: (player: VideoJsTypes.Player, event: VideoJsTypes.EventTarget) => void;
-    onError?: (player: VideoJsTypes.Player, event: VideoJsTypes.EventTarget) => void;
+    onPlay?: (player: NativeVideoJsPlayer, event: EventTarget) => void;
+    onPause?: (player: NativeVideoJsPlayer, event: EventTarget) => void;
+    onEnded?: (player: NativeVideoJsPlayer, event: EventTarget) => void;
+    onSeeking?: (player: NativeVideoJsPlayer, event: EventTarget) => void;
+    onVolumeChange?: (player: NativeVideoJsPlayer, event: EventTarget) => void;
+    onFullscreenChange?: (player: NativeVideoJsPlayer, event: EventTarget) => void;
+    onError?: (player: NativeVideoJsPlayer, event: EventTarget) => void;
 };

package/dist/hooks/useCookieStore.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react-use-cookie" />
+interface UseCookieStoreOptions {
+    polling?: boolean;
+}
+/**
+ * A wrapper around 'react-use-cookie', but optionally uses a polling mechanism to
+ * keep the cookie (as read from the browser) in sync with the state.
+ *
+ * This is necessary when the same cookie key is used in multiple places -- react-use-cookie
+ * makes use of an in-memory React state to store the cookie value, which is not
+ * synchronized with the actual cookie value in the browser.
+ *
+ * @see https://github.com/tylerwolff/useCookie/blob/master/index.js#L60
+ */
+export default function useCookieStore(key: string, initialValue?: string, options?: UseCookieStoreOptions): readonly [string, import("react-use-cookie").updateItem, import("react-use-cookie").removeItem];
+export {};

package/dist/hooks/useCookieStore.js

@@ -0,0 +1,38 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import useCookie, { getCookie } from 'react-use-cookie';
+import { useEffect } from 'react';
+var POLLING_INTERVAL = 500;
+
+/**
+ * A wrapper around 'react-use-cookie', but optionally uses a polling mechanism to
+ * keep the cookie (as read from the browser) in sync with the state.
+ *
+ * This is necessary when the same cookie key is used in multiple places -- react-use-cookie
+ * makes use of an in-memory React state to store the cookie value, which is not
+ * synchronized with the actual cookie value in the browser.
+ *
+ * @see https://github.com/tylerwolff/useCookie/blob/master/index.js#L60
+ */
+export default function useCookieStore(key, initialValue) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
+    polling: true
+  };
+  var _useCookie = useCookie(key, initialValue),
+    _useCookie2 = _slicedToArray(_useCookie, 3),
+    item = _useCookie2[0],
+    setItem = _useCookie2[1],
+    removeItem = _useCookie2[2];
+  useEffect(function () {
+    if (options.polling) {
+      setInterval(function () {
+        setItem(getCookie(key, item));
+      }, POLLING_INTERVAL);
+    }
+  }, [key, setItem, item, options.polling]);
+  return [item, setItem, removeItem];
+}

package/dist/index.d.ts

@@ -77,6 +77,7 @@ export { default as useOnScreen } from "./hooks/useOnScreen";
 export { default as usePrevious } from "./hooks/usePrevious";
 export { default as useScrollPosition } from "./hooks/useScrollPosition";
 export { default as useWindowDimensions } from "./hooks/useWindowDimensions";
+export { default as useCookieStore } from "./hooks/useCookieStore";
 export { default as gtm } from "./helpers/gtm";
 export { default as useValueForCurrentViewPort } from "./helpers/useValueForCurrentViewPort";
 export { default as getApiAutoCompleteSuggestions } from "./helpers/apiAutoComplete";

package/dist/index.js

@@ -90,6 +90,7 @@ export { default as useOnScreen } from './hooks/useOnScreen';
 export { default as usePrevious } from './hooks/usePrevious';
 export { default as useScrollPosition } from './hooks/useScrollPosition';
 export { default as useWindowDimensions } from './hooks/useWindowDimensions';
+export { default as useCookieStore } from './hooks/useCookieStore';
 
 // Helpers
 export { default as gtm } from './helpers/gtm';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.15.2",
+  "version": "2.16.1",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",
@@ -89,7 +89,7 @@
     "react-select": "^3.1.0",
     "react-share": "^4.3.1",
     "react-slick": "^0.27.14",
-    "react-use-cookie": "^1.3.0",
+    "react-use-cookie": "^1.6.1",
     "redux": "^4.0.5",
     "sass": "^1.55.0",
     "sass-loader": "^8.0.2",
@@ -124,6 +124,7 @@
     "@storybook/theming": "^7.0.18",
     "@testing-library/jest-dom": "^5.11.2",
     "@testing-library/react": "^14.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^7.1.2",
     "@types/jest": "^29.5.1",
     "@types/js-cookie": "^3.0.6",