@prom-ui/core 0.1.2 → 0.3.0

package/useKeyPress/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@prom-ui/core/useKeyPress",
+  "version": "0.3.0",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "sideEffects": [
+    "*.css"
+  ]
+}

package/useMedia/cjs/index.development.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactResponsive = require('react-responsive');
+
+var SCREEN_BREAKPOINTS = {
+  small: 480,
+  medium: 768,
+  large: 960,
+  wide: 1200,
+  huge: 1400
+};
+/**
+ * Хук позволяет определять текущее состояние медиа-запроса и обновлять его при изменении размера окна браузера.
+ */
+var useMedia = function (_a) {
+  var minWidth = _a.minWidth,
+    maxWidth = _a.maxWidth;
+  return reactResponsive.useMediaQuery({
+    minWidth: minWidth ? SCREEN_BREAKPOINTS[minWidth] : 1,
+    maxWidth: maxWidth ? SCREEN_BREAKPOINTS[maxWidth] - 1 : undefined
+  });
+};
+
+exports.SCREEN_BREAKPOINTS = SCREEN_BREAKPOINTS;
+exports.useMedia = useMedia;

package/useMedia/cjs/index.development.v2.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactResponsive = require('react-responsive');
+
+var SCREEN_BREAKPOINTS = {
+  small: 480,
+  medium: 768,
+  large: 960,
+  wide: 1200,
+  huge: 1400
+};
+/**
+ * Хук позволяет определять текущее состояние медиа-запроса и обновлять его при изменении размера окна браузера.
+ */
+var useMedia = function (_a) {
+  var minWidth = _a.minWidth,
+    maxWidth = _a.maxWidth;
+  return reactResponsive.useMediaQuery({
+    minWidth: minWidth ? SCREEN_BREAKPOINTS[minWidth] : 1,
+    maxWidth: maxWidth ? SCREEN_BREAKPOINTS[maxWidth] - 1 : undefined
+  });
+};
+
+exports.SCREEN_BREAKPOINTS = SCREEN_BREAKPOINTS;
+exports.useMedia = useMedia;

package/useMedia/cjs/index.production.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react-responsive"),i={small:480,medium:768,large:960,wide:1200,huge:1400};exports.SCREEN_BREAKPOINTS=i,exports.useMedia=function(r){var t=r.minWidth,d=r.maxWidth;return e.useMediaQuery({minWidth:t?i[t]:1,maxWidth:d?i[d]-1:void 0})};

package/useMedia/cjs/index.production.v2.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react-responsive"),i={small:480,medium:768,large:960,wide:1200,huge:1400};exports.SCREEN_BREAKPOINTS=i,exports.useMedia=function(r){var t=r.minWidth,d=r.maxWidth;return e.useMediaQuery({minWidth:t?i[t]:1,maxWidth:d?i[d]-1:void 0})};

package/useMedia/index.d.ts

@@ -0,0 +1,21 @@
+export declare const SCREEN_BREAKPOINTS: {
+    readonly small: 480;
+    readonly medium: 768;
+    readonly large: 960;
+    readonly wide: 1200;
+    readonly huge: 1400;
+};
+export type useMedia = (arg: {
+    /**
+     * Аналог CSS медиа правила `@media (min-width: ...)`
+     */
+    minWidth?: keyof typeof SCREEN_BREAKPOINTS;
+    /**
+     * Аналог CSS медиа правила `@media (max-width: ...)`
+     */
+    maxWidth?: keyof typeof SCREEN_BREAKPOINTS;
+}) => boolean;
+/**
+ * Хук позволяет определять текущее состояние медиа-запроса и обновлять его при изменении размера окна браузера.
+ */
+export declare const useMedia: useMedia;

package/useMedia/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+    module.exports = require('./cjs/index.production.js');
+} else {
+    module.exports = require('./cjs/index.development.js');
+}

package/useMedia/index.v2.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+    module.exports = require('./cjs/index.production.v2.js');
+} else {
+    module.exports = require('./cjs/index.development.v2.js');
+}

package/useMedia/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@prom-ui/core/useMedia",
+  "version": "0.3.0",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "sideEffects": [
+    "*.css"
+  ],
+  "dependencies": {
+    "react-responsive": "^9.0.2"
+  }
+}

package/useOutsideClick/cjs/index.development.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var useOutsideClickRef = require('@rooks/use-outside-click-ref');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var useOutsideClickRef__default = /*#__PURE__*/_interopDefaultCompat(useOutsideClickRef);
+
+/**
+ * Reack hook
+ */
+var useOutsideClick = useOutsideClickRef__default.default;
+
+exports.useOutsideClick = useOutsideClick;

package/useOutsideClick/cjs/index.development.v2.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var useOutsideClickRef = require('@rooks/use-outside-click-ref');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var useOutsideClickRef__default = /*#__PURE__*/_interopDefaultCompat(useOutsideClickRef);
+
+/**
+ * Reack hook
+ */
+var useOutsideClick = useOutsideClickRef__default.default;
+
+exports.useOutsideClick = useOutsideClick;

package/useOutsideClick/cjs/index.production.js

@@ -0,0 +1 @@
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("@rooks/use-outside-click-ref")).default;exports.useOutsideClick=t;

package/useOutsideClick/cjs/index.production.v2.js

@@ -0,0 +1 @@
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("@rooks/use-outside-click-ref")).default;exports.useOutsideClick=t;

package/useOutsideClick/index.d.ts

@@ -0,0 +1,5 @@
+import useOutsideClickRef from '@rooks/use-outside-click-ref';
+/**
+ * Reack hook
+ */
+export declare const useOutsideClick: typeof useOutsideClickRef;

package/useOutsideClick/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+    module.exports = require('./cjs/index.production.js');
+} else {
+    module.exports = require('./cjs/index.development.js');
+}

package/useOutsideClick/index.v2.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+    module.exports = require('./cjs/index.production.v2.js');
+} else {
+    module.exports = require('./cjs/index.development.v2.js');
+}

package/useOutsideClick/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@prom-ui/core/useOutsideClick",
+  "version": "0.3.0",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "sideEffects": [
+    "*.css"
+  ],
+  "dependencies": {
+    "@rooks/use-outside-click-ref": "^3.6.0"
+  }
+}

package/usePortal/cjs/index.development.js

@@ -0,0 +1,85 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+/**
+ * Creates DOM element to be used as React root.
+ * @returns {HTMLElement}
+ */
+function createRootElement(id) {
+  var rootContainer = document.createElement('div');
+  rootContainer.setAttribute('id', id);
+  return rootContainer;
+}
+/**
+ * Appends element as last child of body.
+ * @param {HTMLElement} rootElem
+ */
+function addRootElement(rootElem) {
+  try {
+    if (document.body.lastElementChild) {
+      document.body.insertBefore(rootElem, document.body.lastElementChild.nextElementSibling);
+    } else {
+      console.warn('Failed to add root element, document.body is empty');
+    }
+  } catch (err) {
+    console.warn('Failed to add root element');
+  }
+}
+/**
+ * Hook to create a React Portal.
+ * Automatically handles creating and tearing-down the root elements (no SRR
+ * makes this trivial), so there is no need to ensure the parent target already
+ * exists.
+ * @example
+ * const target = usePortal(id, [id]);
+ * return createPortal(children, target);
+ * @param {String} id The id of the target container, e.g 'modal' or 'spotlight'
+ * @returns {HTMLElement} The DOM node to use as the Portal target.
+ */
+var usePortal = function (id) {
+  var rootElemRef = react.useRef(null);
+  react.useEffect(function () {
+    // Look for existing target dom element to append to
+    var existingParent = document.querySelector("#".concat(id));
+    // Parent is either a new root or the existing dom element
+    var parentElem = existingParent || createRootElement(id);
+    // If there is no existing DOM element, add a new one.
+    if (!existingParent) {
+      addRootElement(parentElem);
+    }
+    // Add the detached element to the parent
+    if (rootElemRef.current) {
+      parentElem.appendChild(rootElemRef.current);
+    }
+    return function () {
+      if (rootElemRef.current) {
+        rootElemRef.current.remove();
+      }
+      if (parentElem.childNodes.length === -1) {
+        parentElem.remove();
+      }
+    };
+  }, []);
+  /**
+   * It's important we evaluate this lazily:
+   * - We need first render to contain the DOM element, so it shouldn't happen
+   *     in useEffect. We would normally put this in the constructor().
+   * - We can't do 'const rootElemRef = useRef(document.createElement('div))',
+   *     since this will run every single render (that's a lot).
+   * - We want the ref to consistently point to the same DOM element and only
+   *     ever run once.
+   * @link https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily
+   */
+  var getRootElem = function () {
+    if (!rootElemRef.current && typeof document !== 'undefined') {
+      rootElemRef.current = document.createElement('div');
+    }
+    return rootElemRef.current;
+  };
+  return getRootElem();
+};
+
+exports.usePortal = usePortal;

package/usePortal/cjs/index.development.v2.js

@@ -0,0 +1,85 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+/**
+ * Creates DOM element to be used as React root.
+ * @returns {HTMLElement}
+ */
+function createRootElement(id) {
+  var rootContainer = document.createElement('div');
+  rootContainer.setAttribute('id', id);
+  return rootContainer;
+}
+/**
+ * Appends element as last child of body.
+ * @param {HTMLElement} rootElem
+ */
+function addRootElement(rootElem) {
+  try {
+    if (document.body.lastElementChild) {
+      document.body.insertBefore(rootElem, document.body.lastElementChild.nextElementSibling);
+    } else {
+      console.warn('Failed to add root element, document.body is empty');
+    }
+  } catch (err) {
+    console.warn('Failed to add root element');
+  }
+}
+/**
+ * Hook to create a React Portal.
+ * Automatically handles creating and tearing-down the root elements (no SRR
+ * makes this trivial), so there is no need to ensure the parent target already
+ * exists.
+ * @example
+ * const target = usePortal(id, [id]);
+ * return createPortal(children, target);
+ * @param {String} id The id of the target container, e.g 'modal' or 'spotlight'
+ * @returns {HTMLElement} The DOM node to use as the Portal target.
+ */
+var usePortal = function (id) {
+  var rootElemRef = react.useRef(null);
+  react.useEffect(function () {
+    // Look for existing target dom element to append to
+    var existingParent = document.querySelector("#".concat(id));
+    // Parent is either a new root or the existing dom element
+    var parentElem = existingParent || createRootElement(id);
+    // If there is no existing DOM element, add a new one.
+    if (!existingParent) {
+      addRootElement(parentElem);
+    }
+    // Add the detached element to the parent
+    if (rootElemRef.current) {
+      parentElem.appendChild(rootElemRef.current);
+    }
+    return function () {
+      if (rootElemRef.current) {
+        rootElemRef.current.remove();
+      }
+      if (parentElem.childNodes.length === -1) {
+        parentElem.remove();
+      }
+    };
+  }, []);
+  /**
+   * It's important we evaluate this lazily:
+   * - We need first render to contain the DOM element, so it shouldn't happen
+   *     in useEffect. We would normally put this in the constructor().
+   * - We can't do 'const rootElemRef = useRef(document.createElement('div))',
+   *     since this will run every single render (that's a lot).
+   * - We want the ref to consistently point to the same DOM element and only
+   *     ever run once.
+   * @link https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily
+   */
+  var getRootElem = function () {
+    if (!rootElemRef.current && typeof document !== 'undefined') {
+      rootElemRef.current = document.createElement('div');
+    }
+    return rootElemRef.current;
+  };
+  return getRootElem();
+};
+
+exports.usePortal = usePortal;

package/usePortal/cjs/index.production.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.usePortal=function(t){var n=e.useRef(null);e.useEffect((function(){var e=document.querySelector("#".concat(t)),r=e||function(e){var t=document.createElement("div");return t.setAttribute("id",e),t}(t);return e||function(e){try{document.body.lastElementChild?document.body.insertBefore(e,document.body.lastElementChild.nextElementSibling):console.warn("Failed to add root element, document.body is empty")}catch(t){console.warn("Failed to add root element")}}(r),n.current&&r.appendChild(n.current),function(){n.current&&n.current.remove(),-1===r.childNodes.length&&r.remove()}}),[]);return n.current||"undefined"==typeof document||(n.current=document.createElement("div")),n.current};

package/usePortal/cjs/index.production.v2.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.usePortal=function(t){var n=e.useRef(null);e.useEffect((function(){var e=document.querySelector("#".concat(t)),r=e||function(e){var t=document.createElement("div");return t.setAttribute("id",e),t}(t);return e||function(e){try{document.body.lastElementChild?document.body.insertBefore(e,document.body.lastElementChild.nextElementSibling):console.warn("Failed to add root element, document.body is empty")}catch(t){console.warn("Failed to add root element")}}(r),n.current&&r.appendChild(n.current),function(){n.current&&n.current.remove(),-1===r.childNodes.length&&r.remove()}}),[]);return n.current||"undefined"==typeof document||(n.current=document.createElement("div")),n.current};

package/usePortal/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Hook to create a React Portal.
+ * Automatically handles creating and tearing-down the root elements (no SRR
+ * makes this trivial), so there is no need to ensure the parent target already
+ * exists.
+ * @example
+ * const target = usePortal(id, [id]);
+ * return createPortal(children, target);
+ * @param {String} id The id of the target container, e.g 'modal' or 'spotlight'
+ * @returns {HTMLElement} The DOM node to use as the Portal target.
+ */
+export declare const usePortal: (id: string) => HTMLElement | null;

package/usePortal/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+    module.exports = require('./cjs/index.production.js');
+} else {
+    module.exports = require('./cjs/index.development.js');
+}

package/usePortal/index.v2.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+    module.exports = require('./cjs/index.production.v2.js');
+} else {
+    module.exports = require('./cjs/index.development.v2.js');
+}

package/usePortal/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@prom-ui/core/usePortal",
+  "version": "0.3.0",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "sideEffects": [
+    "*.css"
+  ]
+}

package/useScrollPosition/cjs/index.development.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var useScrollPosition$1 = require('@n8tb1t/use-scroll-position');
+
+/**
+ * Reack hook
+ */
+var useScrollPosition = useScrollPosition$1.useScrollPosition;
+
+exports.useScrollPosition = useScrollPosition;

package/useScrollPosition/cjs/index.development.v2.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var useScrollPosition$1 = require('@n8tb1t/use-scroll-position');
+
+/**
+ * Reack hook
+ */
+var useScrollPosition = useScrollPosition$1.useScrollPosition;
+
+exports.useScrollPosition = useScrollPosition;

package/useScrollPosition/cjs/index.production.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@n8tb1t/use-scroll-position").useScrollPosition;exports.useScrollPosition=e;

package/useScrollPosition/cjs/index.production.v2.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@n8tb1t/use-scroll-position").useScrollPosition;exports.useScrollPosition=e;

package/useScrollPosition/index.d.ts

@@ -0,0 +1,5 @@
+import { useScrollPosition as useScrollPositionPackage } from '@n8tb1t/use-scroll-position';
+/**
+ * Reack hook
+ */
+export declare const useScrollPosition: typeof useScrollPositionPackage;

package/useScrollPosition/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+    module.exports = require('./cjs/index.production.js');
+} else {
+    module.exports = require('./cjs/index.development.js');
+}

package/useScrollPosition/index.v2.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+    module.exports = require('./cjs/index.production.v2.js');
+} else {
+    module.exports = require('./cjs/index.development.v2.js');
+}

package/useScrollPosition/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@prom-ui/core/useScrollPosition",
+  "version": "0.3.0",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "sideEffects": [
+    "*.css"
+  ],
+  "dependencies": {
+    "@n8tb1t/use-scroll-position": "^2.0.3"
+  }
+}

package/Media/breakpoints.d.ts

@@ -1,17 +0,0 @@
-export declare const MIN_SCREEN_WIDTH = 1;
-export declare const SCREEN_BREAKPOINTS: {
-    small: number;
-    medium: number;
-    large: number;
-    wide: number;
-    huge: number;
-};
-export type tSCREEN_BREAKPOINTS = keyof typeof SCREEN_BREAKPOINTS;
-export declare const SCREEN_BREAKPOINTS_PROXY: {
-    small: number;
-    medium: number;
-    large: number;
-    wide: number;
-    huge: number;
-};
-export declare const getBreakPoint: (key: tSCREEN_BREAKPOINTS) => number;

package/Media/useMedia.d.ts

@@ -1,7 +0,0 @@
-import { tSCREEN_BREAKPOINTS } from './breakpoints';
-type tUseMedia = (arg: {
-    minWidth?: tSCREEN_BREAKPOINTS;
-    maxWidth?: tSCREEN_BREAKPOINTS;
-}) => boolean;
-export declare const useMedia: tUseMedia;
-export {};