@entur/utils - npm Package Compare versions

Comparing version 0.4.6 to 0.5.0-RC.0

CHANGELOG.md

@@ -6,7 +6,18 @@ # Change Log
 
-## [0.4.6](https://bitbucket.org/enturas/design-system/compare/@entur/utils@0.4.5...@entur/utils@0.4.6) (2022-10-31)
+# [0.5.0-RC.0](https://bitbucket.org/enturas/design-system/compare/@entur/utils@0.5.0-alpha.0...@entur/utils@0.5.0-RC.0) (2022-11-21)
 
+**Note:** Version bump only for package @entur/utils
+
+# [0.5.0-alpha.0](https://bitbucket.org/enturas/design-system/compare/@entur/utils@0.4.6-alpha.0...@entur/utils@0.5.0-alpha.0) (2022-10-26)
+
+### Features
+
+- **datepicker:** add i18y-wrapper to components for locale ([aed14fb](https://bitbucket.org/enturas/design-system/commits/aed14fb32e789159b4021c8b740a8101b83228fa))
+- **datepicker:** add modal view for calendar when using small screen widths ([05d9325](https://bitbucket.org/enturas/design-system/commits/05d9325a83dbc8d7d2e62050e7d6bbecbe2f665e))
+
+## [0.4.6-alpha.0](https://bitbucket.org/enturas/design-system/compare/@entur/utils@0.4.5...@entur/utils@0.4.6-alpha.0) (2022-10-20)
+
 ### Bug Fixes
 
-- **style import warning:** remove ~ from import warning since it is deprecated ([c6a25fd](https://bitbucket.org/enturas/design-system/commits/c6a25fde98ec2f2821f678c6175c797ad10b7185))
+- **locale:** wip fix for locale not working ([0ff0912](https://bitbucket.org/enturas/design-system/commits/0ff0912405e015abb50c9cb6103c5f9827d8bd7b))
 
@@ -13,0 +24,0 @@ ## [0.4.5](https://bitbucket.org/enturas/design-system/compare/@entur/utils@0.4.4...@entur/utils@0.4.5) (2022-08-31)

dist/index.d.ts

@@ -6,2 +6,6 @@ export * from './debounce';
 export * from './mergeRefs';
+export * from './useOnClickOutside';
+export * from './useOnEscape';
+export * from './useWindowDimensions';
+export * from './ConditionalWrapper';
 export * from './warnAboutMissingStyles';

dist/utils.cjs.development.js

@@ -96,2 +96,103 @@ 'use strict';
 
+var useOnClickOutside = function useOnClickOutside(refs, handler) {
+  React.useEffect(function () {
+    var listener = function listener(event) {
+      // If the ref contains the clicked element, then the click is not outside
+      if (refs.some(function (ref) {
+        return elementContainsEventTarget(ref.current, event);
+      })) {
+        return;
+      }
+
+      handler();
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+    return function () {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [refs, handler]);
+};
+
+var elementContainsEventTarget = function elementContainsEventTarget(element, event) {
+  if (!element) {
+    return false;
+  }
+
+  if (element.contains(event.target)) {
+    return true;
+  } // For elements inside a Shadow DOM we need to check the composedPath
+
+
+  if (event.composed && event.composedPath) {
+    var contains = event.composedPath().find(function (target) {
+      if (target === window) {
+        return false;
+      }
+
+      return element.contains(target);
+    });
+    return contains ? true : false;
+  }
+
+  return false;
+};
+
+var useOnEscape = function useOnEscape(ref, handler) {
+  React.useEffect(function () {
+    var _ref$current;
+
+    var runIfKeyIsEscape = function runIfKeyIsEscape(event) {
+      console.log('lol');
+      if (event.key === 'Escape') handler();
+    };
+
+    (_ref$current = ref.current) == null ? void 0 : _ref$current.addEventListener('keydown', runIfKeyIsEscape);
+    return function () {
+      var _ref$current2;
+
+      return (_ref$current2 = ref.current) == null ? void 0 : _ref$current2.removeEventListener('keydown', runIfKeyIsEscape);
+    };
+  }, [ref, handler]);
+};
+
+// from https://stackoverflow.com/questions/36862334/get-viewport-window-height-in-reactjs
+
+var getWindowDimensions = function getWindowDimensions() {
+  var _window = window,
+      width = _window.innerWidth,
+      height = _window.innerHeight;
+  return {
+    width: width,
+    height: height
+  };
+};
+
+var useWindowDimensions = function useWindowDimensions() {
+  var _useState = React.useState(getWindowDimensions()),
+      windowDimensions = _useState[0],
+      setWindowDimensions = _useState[1];
+
+  React.useEffect(function () {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+
+    window.addEventListener('resize', handleResize);
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  return windowDimensions;
+};
+
+var ConditionalWrapper = function ConditionalWrapper(_ref) {
+  var condition = _ref.condition,
+      wrapper = _ref.wrapper,
+      children = _ref.children;
+  return condition ? wrapper(children) : React__default["default"].createElement(React__default["default"].Fragment, null, children);
+};
+
 var packagesToCheck = /*#__PURE__*/new Set();
@@ -107,3 +208,3 @@ var checkTimeoutId;
   warning__default["default"](missingImports.length === 0, "You are missing " + (singleMissingImport ? 'a CSS import' : missingImports.length + " CSS imports") + "!\n\nPlease add the following CSS import" + (singleMissingImport ? '' : 's') + " somewhere in your app:\n\n" + missingImports.map(function (namespace) {
-    return "\t@import '@entur/" + namespace + "/dist/styles.css';";
+    return "\t@import '~@entur/" + namespace + "/dist/styles.css';";
   }).join('\n') + "\n") ;
@@ -134,7 +235,11 @@ }
 
+exports.ConditionalWrapper = ConditionalWrapper;
 exports.debounce = debounce;
 exports.mergeRefs = mergeRefs;
+exports.useOnClickOutside = useOnClickOutside;
+exports.useOnEscape = useOnEscape;
 exports.useOnMount = useOnMount;
 exports.useRandomId = useRandomId;
+exports.useWindowDimensions = useWindowDimensions;
 exports.warnAboutMissingStyles = warnAboutMissingStyles;
 //# sourceMappingURL=utils.cjs.development.js.map

dist/utils.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("tiny-warning");var t=r(e);function n(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=new Array(r);t<r;t++)n[t]=e[t];return n}function o(e,r){var t="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(t)return(t=t.call(e)).next.bind(t);if(Array.isArray(e)||(t=function(e,r){if(e){if("string"==typeof e)return n(e,r);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?n(e,r):void 0}}(e))||r&&e&&"number"==typeof e.length){t&&(e=t);var o=0;return function(){return o>=e.length?{done:!0}:{done:!1,value:e[o++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}exports.debounce=function(e,r){var t;return function(){for(var n=arguments.length,o=new Array(n),u=0;u<n;u++)o[u]=arguments[u];clearTimeout(t),t=setTimeout((function(){return e.apply(void 0,o)}),r)}},exports.mergeRefs=function(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];return function(e){for(var t,n=o(r);!(t=n()).done;){var u=t.value;"function"==typeof u?u(e):u&&(u.current=e)}}},exports.useOnMount=function(e){var r=t.default.useRef(!1);t.default.useEffect((function(){r.current||(r.current=!0,e())}),[e])},exports.useRandomId=function(e){return e+"-"+t.default.useRef(String(Math.random()).substring(2)).current},exports.warnAboutMissingStyles=function(){};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("tiny-warning");var t=n(e);function r(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function o(e,n){var t="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(t)return(t=t.call(e)).next.bind(t);if(Array.isArray(e)||(t=function(e,n){if(e){if("string"==typeof e)return r(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?r(e,n):void 0}}(e))||n&&e&&"number"==typeof e.length){t&&(e=t);var o=0;return function(){return o>=e.length?{done:!0}:{done:!1,value:e[o++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var u=function(){var e=window;return{width:e.innerWidth,height:e.innerHeight}};exports.ConditionalWrapper=function(e){var n=e.children;return e.condition?(0,e.wrapper)(n):t.default.createElement(t.default.Fragment,null,n)},exports.debounce=function(e,n){var t;return function(){for(var r=arguments.length,o=new Array(r),u=0;u<r;u++)o[u]=arguments[u];clearTimeout(t),t=setTimeout((function(){return e.apply(void 0,o)}),n)}},exports.mergeRefs=function(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];return function(e){for(var t,r=o(n);!(t=r()).done;){var u=t.value;"function"==typeof u?u(e):u&&(u.current=e)}}},exports.useOnClickOutside=function(n,t){e.useEffect((function(){var e=function(e){n.some((function(n){return function(e,n){return!(!e||!(e.contains(n.target)||n.composed&&n.composedPath&&n.composedPath().find((function(n){return n!==window&&e.contains(n)}))))}(n.current,e)}))||t()};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),function(){document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e)}}),[n,t])},exports.useOnEscape=function(n,t){e.useEffect((function(){var e,r=function(e){console.log("lol"),"Escape"===e.key&&t()};return null==(e=n.current)||e.addEventListener("keydown",r),function(){var e;return null==(e=n.current)?void 0:e.removeEventListener("keydown",r)}}),[n,t])},exports.useOnMount=function(e){var n=t.default.useRef(!1);t.default.useEffect((function(){n.current||(n.current=!0,e())}),[e])},exports.useRandomId=function(e){return e+"-"+t.default.useRef(String(Math.random()).substring(2)).current},exports.useWindowDimensions=function(){var n=e.useState(u()),t=n[0],r=n[1];return e.useEffect((function(){function e(){r(u())}return window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}}),[]),t},exports.warnAboutMissingStyles=function(){};
 //# sourceMappingURL=utils.cjs.production.min.js.map

dist/utils.esm.js

@@ -1,2 +0,2 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import warning from 'tiny-warning';
@@ -87,2 +87,103 @@
 
+var useOnClickOutside = function useOnClickOutside(refs, handler) {
+  useEffect(function () {
+    var listener = function listener(event) {
+      // If the ref contains the clicked element, then the click is not outside
+      if (refs.some(function (ref) {
+        return elementContainsEventTarget(ref.current, event);
+      })) {
+        return;
+      }
+
+      handler();
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+    return function () {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [refs, handler]);
+};
+
+var elementContainsEventTarget = function elementContainsEventTarget(element, event) {
+  if (!element) {
+    return false;
+  }
+
+  if (element.contains(event.target)) {
+    return true;
+  } // For elements inside a Shadow DOM we need to check the composedPath
+
+
+  if (event.composed && event.composedPath) {
+    var contains = event.composedPath().find(function (target) {
+      if (target === window) {
+        return false;
+      }
+
+      return element.contains(target);
+    });
+    return contains ? true : false;
+  }
+
+  return false;
+};
+
+var useOnEscape = function useOnEscape(ref, handler) {
+  useEffect(function () {
+    var _ref$current;
+
+    var runIfKeyIsEscape = function runIfKeyIsEscape(event) {
+      console.log('lol');
+      if (event.key === 'Escape') handler();
+    };
+
+    (_ref$current = ref.current) == null ? void 0 : _ref$current.addEventListener('keydown', runIfKeyIsEscape);
+    return function () {
+      var _ref$current2;
+
+      return (_ref$current2 = ref.current) == null ? void 0 : _ref$current2.removeEventListener('keydown', runIfKeyIsEscape);
+    };
+  }, [ref, handler]);
+};
+
+// from https://stackoverflow.com/questions/36862334/get-viewport-window-height-in-reactjs
+
+var getWindowDimensions = function getWindowDimensions() {
+  var _window = window,
+      width = _window.innerWidth,
+      height = _window.innerHeight;
+  return {
+    width: width,
+    height: height
+  };
+};
+
+var useWindowDimensions = function useWindowDimensions() {
+  var _useState = useState(getWindowDimensions()),
+      windowDimensions = _useState[0],
+      setWindowDimensions = _useState[1];
+
+  useEffect(function () {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+
+    window.addEventListener('resize', handleResize);
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  return windowDimensions;
+};
+
+var ConditionalWrapper = function ConditionalWrapper(_ref) {
+  var condition = _ref.condition,
+      wrapper = _ref.wrapper,
+      children = _ref.children;
+  return condition ? wrapper(children) : React.createElement(React.Fragment, null, children);
+};
+
 var packagesToCheck = /*#__PURE__*/new Set();
@@ -98,3 +199,3 @@ var checkTimeoutId;
   process.env.NODE_ENV !== "production" ? warning(missingImports.length === 0, "You are missing " + (singleMissingImport ? 'a CSS import' : missingImports.length + " CSS imports") + "!\n\nPlease add the following CSS import" + (singleMissingImport ? '' : 's') + " somewhere in your app:\n\n" + missingImports.map(function (namespace) {
-    return "\t@import '@entur/" + namespace + "/dist/styles.css';";
+    return "\t@import '~@entur/" + namespace + "/dist/styles.css';";
   }).join('\n') + "\n") : void 0;
@@ -125,3 +226,3 @@ }
 
-export { debounce, mergeRefs, useOnMount, useRandomId, warnAboutMissingStyles };
+export { ConditionalWrapper, debounce, mergeRefs, useOnClickOutside, useOnEscape, useOnMount, useRandomId, useWindowDimensions, warnAboutMissingStyles };
 //# sourceMappingURL=utils.esm.js.map

package.json

 {
   "name": "@entur/utils",
-  "version": "0.4.6",
+  "version": "0.5.0-RC.0",
   "license": "EUPL-1.2",
@@ -33,3 +33,3 @@ "main": "dist/index.js",
   },
-  "gitHead": "11fde5ffbfd805773572c3a7d999d63f2733e0c7"
+  "gitHead": "eb50f5092d80dcdfe5c35bdcd7970e9af29e620a"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

74369

increased by48.6%

Number of package files

24

increased by20%

Lines of code

430

increased by80.67%

No dependency changes