@prom-ui/core 0.0.11 → 0.0.14

package/ButtonPageUp/index.d.ts

@@ -1,2 +1,11 @@
 import React from 'react';
-export declare const ButtonPageUp: React.NamedExoticComponent<object>;
+export declare type Props = {
+    scrollDelay?: number;
+    scrollOffset?: number;
+    scrollRef?: React.RefObject<HTMLElement>;
+    onClick?: (e: MouseEvent) => void;
+    margin?: number | string;
+    zIndex?: number;
+    children?: React.ReactNode;
+};
+export declare const ButtonPageUp: React.FC<Props>;

package/ButtonPageUp/index.js

@@ -0,0 +1,172 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var ttag = require('ttag');
+var tsDebounce = require('ts-debounce');
+var Portal = require('@prom-ui/core/Portal');
+var Button = require('@prom-ui/core/Button');
+var Icon = require('@prom-ui/core/Icon');
+var ArrowUp = require('@prom-ui/icons/ArrowUp');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __makeTemplateObject(cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+}
+
+var POSITION_FIXED = {
+  position: 'fixed',
+  right: 0,
+  bottom: 0,
+  width: '100%'
+};
+var POSITION_STICKY = {
+  position: 'sticky',
+  bottom: 0,
+  height: 0,
+  width: '100%'
+};
+var ButtonPageUp = React.memo(function (_a) {
+  var _b = _a.children,
+      children = _b === void 0 ? null : _b,
+      _c = _a.scrollDelay,
+      scrollDelay = _c === void 0 ? 100 : _c,
+      _d = _a.scrollOffset,
+      scrollOffset = _d === void 0 ? 100 : _d,
+      _e = _a.scrollRef,
+      scrollRef = _e === void 0 ? null : _e,
+      _f = _a.onClick,
+      onClick = _f === void 0 ? function () {} : _f,
+      _g = _a.margin,
+      margin = _g === void 0 ? '0 18px 18px 0' : _g,
+      _h = _a.zIndex,
+      zIndex = _h === void 0 ? 10 : _h,
+      props = __rest(_a, ["children", "scrollDelay", "scrollOffset", "scrollRef", "onClick", "margin", "zIndex"]);
+
+  var _j = React.useState(false),
+      visible = _j[0],
+      setVisible = _j[1];
+
+  var getRootElement = function () {
+    return (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) || document.documentElement;
+  };
+
+  var handleScrollToTop = function (e) {
+    if (typeof onClick === 'function') {
+      onClick(e);
+    }
+
+    getRootElement().scroll({
+      top: 0,
+      behavior: 'smooth'
+    });
+  };
+
+  var handleSetVisible = tsDebounce.debounce(function () {
+    var rootElement = getRootElement();
+    var isScrollAllow = rootElement.scrollHeight - rootElement.clientHeight > 0;
+    var isScrollСorrect = rootElement.scrollTop >= scrollOffset;
+    setVisible(isScrollAllow && isScrollСorrect);
+  }, scrollDelay);
+  React.useEffect(function () {
+    var rootElement = (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) || document;
+    rootElement.addEventListener('resize', handleSetVisible);
+    rootElement.addEventListener('scroll', handleSetVisible);
+    handleSetVisible();
+    return function () {
+      rootElement.removeEventListener('resize', handleSetVisible);
+      rootElement.removeEventListener('scroll', handleSetVisible);
+    };
+  }, []);
+  if (!visible) return null;
+  var Parent = (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) ? React.Fragment : Portal.Portal;
+  var positionStyle = (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) ? POSITION_STICKY : POSITION_FIXED;
+  return React__default["default"].createElement(Parent, null, React__default["default"].createElement("div", {
+    style: __assign(__assign({}, positionStyle), {
+      zIndex: zIndex
+    })
+  }, React__default["default"].createElement(Button.Button, __assign({
+    "button-padding": 'xs',
+    "button-theme": 'white',
+    "button-round": 'full',
+    "aria-label": ttag.t(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\u041D\u0430\u0432\u0435\u0440\u0445"], ["\u041D\u0430\u0432\u0435\u0440\u0445"])))
+  }, props, {
+    style: {
+      position: 'absolute',
+      right: 0,
+      bottom: 0,
+      margin: margin
+    },
+    onClick: handleScrollToTop
+  }), children || React__default["default"].createElement(Icon.Icon, {
+    "icon-as": ArrowUp.ArrowUp,
+    style: {
+      width: 24,
+      height: 24
+    }
+  }))));
+});
+ButtonPageUp.propTypes = {
+  /** Задержка в `ms` */
+  scrollDelay: PropTypes__default["default"].number,
+
+  /** Смещение скрола для отображения в `px` */
+  scrollOffset: PropTypes__default["default"].number,
+
+  /** Для аналитики */
+  onClick: PropTypes__default["default"].func,
+
+  /** Внешние отступы */
+  margin: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /** CSS z-index */
+  zIndex: PropTypes__default["default"].number
+};
+var templateObject_1;
+
+exports.ButtonPageUp = ButtonPageUp;

package/ButtonPageUp/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@prom-ui/core/ButtonPageUp",
+  "version": "0.0.14",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "dependencies": {
+    "@prom-ui/icons": "^0.0.5",
+    "ts-debounce": "4.0.0",
+    "ttag": "1.7.24"
+  }
+}

package/Checkbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Checkbox",
-  "version": "0.0.11",
+  "version": "0.0.14",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {

package/Checkbox/style.css

@@ -1,133 +1 @@
-.Checkbox__root___JbPkR {
-    display: block;
-    box-sizing: border-box;
-    width: 18px;
-    height: 18px;
-    position: relative;
-    margin: calc((var(--pds-line-height) - 18px) / 2) 0;
-    flex-shrink: 0;
-}
-
-.Checkbox__view___Smb1v {
-    width: 100%;
-    height: 100%;
-    position: relative
-}
-
-.Checkbox__view___Smb1v::before,
-    .Checkbox__view___Smb1v::after {
-        content: "";
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-        transition: 100ms ease-in-out;
-        transition-property: border-radius, background-color, border-color, opacity;
-    }
-
-.Checkbox__view___Smb1v::before {
-        border-radius: var(--pds-round-xxs);
-        border: 2px var(--black-400) solid;
-        background: var(--white);
-    }
-
-.Checkbox__view___Smb1v::after {
-        background-repeat: no-repeat;
-        background-position: center;
-        opacity: 0;
-    }
-
-.Checkbox__input___-KDH8 {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 1;
-    -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none;
-    opacity: 0;
-    padding: 0;
-    margin: 0;
-    cursor: pointer
-}
-
-.Checkbox__input___-KDH8:disabled {
-        cursor: default;
-    }
-
-.Checkbox__input___-KDH8[type="checkbox"] + .Checkbox__view___Smb1v::after {
-            background-image: url("data:image/svg+xml,%3Csvg width='10' height='9' viewBox='0 0 10 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4.807L3.64375 7.345L8.93125 1' stroke='%2301011B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
-        }
-
-.Checkbox__input___-KDH8[type="radio"] + .Checkbox__view___Smb1v::before {
-            border-radius: 50%;
-        }
-
-.Checkbox__input___-KDH8[type="radio"] + .Checkbox__view___Smb1v::after {
-            background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='4' r='4' fill='%2301011B'/%3E%3C/svg%3E");
-        }
-
-.Checkbox__input___-KDH8:focus-visible + .Checkbox__view___Smb1v::before {
-            outline: var(--pds-round-xxs) auto Highlight;
-            outline: var(--pds-round-xxs) auto -webkit-focus-ring-color;
-        }
-
-.Checkbox__input___-KDH8:checked + .Checkbox__view___Smb1v::before {
-            background-color: var(--yellow-500);
-            border-color: var(--yellow-500);
-        }
-
-.Checkbox__input___-KDH8:checked + .Checkbox__view___Smb1v::after {
-            opacity: 1;
-        }
-
-.Checkbox__input___-KDH8:disabled + .Checkbox__view___Smb1v::before {
-            background-color: var(--black-200);
-            border-color: var(--black-200);
-            color: var(--black-700);
-        }
-
-.Checkbox__input___-KDH8.Checkbox__inputLoading___3-2zC + .Checkbox__view___Smb1v::before {
-            border-radius: 50%;
-            background-color: var(--white);
-            border-color: var(--black-400);
-        }
-
-.Checkbox__input___-KDH8:checked:disabled + .Checkbox__view___Smb1v::after {
-            opacity: .5;
-        }
-
-.Checkbox__spinner___K7NKz {
-    color: var(--violet-500);
-    opacity: 0;
-    transition: opacity 100ms ease-in-out;
-}
-
-.Checkbox__spinnerEnterActive___ASYih,
-.Checkbox__spinnerEnterDone___vsNQ- {
-    opacity: 1;
-}
-
-.Checkbox__spinnerExitActive___X-b7M,
-.Checkbox__spinnerExitDone___MP3D6 {
-    opacity: 0;
-}
-
-@media (hover) {
-            .Checkbox__input___-KDH8:hover + .Checkbox__view___Smb1v::before {
-                border-color: var(--black-500);
-            }
-            .Checkbox__input___-KDH8:checked:hover + .Checkbox__view___Smb1v::before {
-                border-color: var(--yellow-500);
-            }
-            .Checkbox__input___-KDH8:disabled:hover + .Checkbox__view___Smb1v::before {
-                border-color: var(--black-200);
-            }
-            .Checkbox__input___-KDH8.Checkbox__inputLoading___3-2zC:hover + .Checkbox__view___Smb1v::before {
-                border-color: var(--black-400);
-            }
-}
+.Checkbox__root___JbPkR{display:block;box-sizing:border-box;width:18px;height:18px;position:relative;margin:calc((var(--pds-line-height) - 18px)/2)0;flex-shrink:0}.Checkbox__view___Smb1v{width:100%;height:100%;position:relative}.Checkbox__view___Smb1v::before,.Checkbox__view___Smb1v::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;box-sizing:border-box;transition:100ms ease-in-out;transition-property:border-radius,background-color,border-color,opacity}.Checkbox__view___Smb1v::before{border-radius:var(--pds-round-xxs);border:2px var(--black-400) solid;background:var(--white)}.Checkbox__view___Smb1v::after{background-repeat:no-repeat;background-position:center;opacity:0}.Checkbox__input___-KDH8{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;opacity:0;padding:0;margin:0;cursor:pointer}.Checkbox__input___-KDH8:disabled{cursor:default}.Checkbox__input___-KDH8[type=checkbox]+.Checkbox__view___Smb1v::after{background-image:url("data:image/svg+xml,%3Csvg width='10' height='9' viewBox='0 0 10 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4.807L3.64375 7.345L8.93125 1' stroke='%2301011B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}.Checkbox__input___-KDH8[type=radio]+.Checkbox__view___Smb1v::before{border-radius:50%}.Checkbox__input___-KDH8[type=radio]+.Checkbox__view___Smb1v::after{background-image:url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='4' r='4' fill='%2301011B'/%3E%3C/svg%3E")}.Checkbox__input___-KDH8:focus-visible+.Checkbox__view___Smb1v::before{outline:var(--pds-round-xxs) auto Highlight;outline:var(--pds-round-xxs) auto -webkit-focus-ring-color}.Checkbox__input___-KDH8:checked+.Checkbox__view___Smb1v::before{background-color:var(--yellow-500);border-color:var(--yellow-500)}.Checkbox__input___-KDH8:checked+.Checkbox__view___Smb1v::after{opacity:1}.Checkbox__input___-KDH8:disabled+.Checkbox__view___Smb1v::before{background-color:var(--black-200);border-color:var(--black-200);color:var(--black-700)}.Checkbox__input___-KDH8.Checkbox__inputLoading___3-2zC+.Checkbox__view___Smb1v::before{border-radius:50%;background-color:var(--white);border-color:var(--black-400)}.Checkbox__input___-KDH8:checked:disabled+.Checkbox__view___Smb1v::after{opacity:.5}.Checkbox__spinner___K7NKz{color:var(--violet-500);opacity:0;transition:opacity 100ms ease-in-out}.Checkbox__spinnerEnterActive___ASYih,.Checkbox__spinnerEnterDone___vsNQ-{opacity:1}.Checkbox__spinnerExitActive___X-b7M,.Checkbox__spinnerExitDone___MP3D6{opacity:0}@media (hover){.Checkbox__input___-KDH8:hover+.Checkbox__view___Smb1v::before{border-color:var(--black-500)}.Checkbox__input___-KDH8:checked:hover+.Checkbox__view___Smb1v::before{border-color:var(--yellow-500)}.Checkbox__input___-KDH8:disabled:hover+.Checkbox__view___Smb1v::before{border-color:var(--black-200)}.Checkbox__input___-KDH8.Checkbox__inputLoading___3-2zC:hover+.Checkbox__view___Smb1v::before{border-color:var(--black-400)}}

package/Flex/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Flex",
-  "version": "0.0.11",
+  "version": "0.0.14",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {