@invoicebox/ui 0.1.0-alpha.75 → 0.1.0-alpha.77

package/README.md

@@ -15,3 +15,14 @@ npm i @invoicebox/ui
 ```bash
 yarn add @invoicebox/ui
 ```
+
+# Пример использования
+
+```ts
+import React, { FC } from 'react';
+import { Arrow } from '@invoicebox/ui';
+
+export const SomeComponent: FC = () => {
+    return <Arrow isOpen={false} />;
+};
+```

package/dist/components/common/Dropdown/index.js

@@ -8,6 +8,8 @@ exports.Dropdown = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var S = _interopRequireWildcard(require("./styles"));
 var _palette = require("../../../palette");
+var _styledComponents = require("styled-components");
+var _excluded = ["children"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -16,23 +18,32 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var Dropdown = exports.Dropdown = function Dropdown(_ref) {
   var children = _ref.children,
-    isOpen = _ref.isOpen,
-    _ref$isAutoPosition = _ref.isAutoPosition,
-    isAutoPosition = _ref$isAutoPosition === void 0 ? false : _ref$isAutoPosition,
-    _ref$positionVertical = _ref.positionVertical,
-    positionVertical = _ref$positionVertical === void 0 ? 5 : _ref$positionVertical,
-    _ref$positionLeft = _ref.positionLeft,
-    positionLeft = _ref$positionLeft === void 0 ? '0px' : _ref$positionLeft,
-    _ref$positionRight = _ref.positionRight,
-    positionRight = _ref$positionRight === void 0 ? 'auto' : _ref$positionRight,
-    _ref$minWidth = _ref.minWidth,
-    minWidth = _ref$minWidth === void 0 ? 'auto' : _ref$minWidth,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 'auto' : _ref$width,
-    zIndex = _ref.zIndex,
-    onCloseTransitionEnd = _ref.onCloseTransitionEnd;
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_styledComponents.StyleSheetManager, {
+    disableCSSOMInjection: true
+  }, /*#__PURE__*/_react["default"].createElement(DropdownInner, props, children));
+};
+var DropdownInner = function DropdownInner(_ref2) {
+  var children = _ref2.children,
+    isOpen = _ref2.isOpen,
+    _ref2$isAutoPosition = _ref2.isAutoPosition,
+    isAutoPosition = _ref2$isAutoPosition === void 0 ? false : _ref2$isAutoPosition,
+    _ref2$positionVertica = _ref2.positionVertical,
+    positionVertical = _ref2$positionVertica === void 0 ? 5 : _ref2$positionVertica,
+    _ref2$positionLeft = _ref2.positionLeft,
+    positionLeft = _ref2$positionLeft === void 0 ? '0px' : _ref2$positionLeft,
+    _ref2$positionRight = _ref2.positionRight,
+    positionRight = _ref2$positionRight === void 0 ? 'auto' : _ref2$positionRight,
+    _ref2$minWidth = _ref2.minWidth,
+    minWidth = _ref2$minWidth === void 0 ? 'auto' : _ref2$minWidth,
+    _ref2$width = _ref2.width,
+    width = _ref2$width === void 0 ? 'auto' : _ref2$width,
+    zIndex = _ref2.zIndex,
+    onCloseTransitionEnd = _ref2.onCloseTransitionEnd;
   var palette = (0, _palette.useComponentPalette)('dropdown');
   var position = (0, _react.useRef)({
     isAbove: true,
@@ -47,11 +58,11 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
     if (isOpen) return;
     if (onCloseTransitionEnd) onCloseTransitionEnd();
   }, [isOpen, onCloseTransitionEnd]);
-  var getPosition = (0, _react.useCallback)(function (_ref2) {
-    var dropdownHeight = _ref2.dropdownHeight,
-      belowHeight = _ref2.belowHeight,
-      aboveHeight = _ref2.aboveHeight,
-      dropdownIndent = _ref2.dropdownIndent;
+  var getPosition = (0, _react.useCallback)(function (_ref3) {
+    var dropdownHeight = _ref3.dropdownHeight,
+      belowHeight = _ref3.belowHeight,
+      aboveHeight = _ref3.aboveHeight,
+      dropdownIndent = _ref3.dropdownIndent;
     var isEnoughSpaceBelow = belowHeight >= dropdownHeight + dropdownIndent;
     if (isEnoughSpaceBelow) return {
       isAbove: false,

package/dist/components/common/Flag/components/ArmFlag/index.js

@@ -8,8 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var ArmFlag = exports.ArmFlag = function ArmFlag() {
   return /*#__PURE__*/_react["default"].createElement("svg", {
-    width: "100%",
-    height: "100%",
+    width: "22",
+    height: "16",
     viewBox: "0 0 22 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"

package/dist/components/common/Flag/components/AzeFlag/index.js

@@ -8,8 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var AzeFlag = exports.AzeFlag = function AzeFlag() {
   return /*#__PURE__*/_react["default"].createElement("svg", {
-    width: "100%",
-    height: "100%",
+    width: "22",
+    height: "16",
     viewBox: "0 0 22 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"

package/dist/components/common/Flag/components/BlrFlag/index.js

@@ -8,8 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var BlrFlag = exports.BlrFlag = function BlrFlag() {
   return /*#__PURE__*/_react["default"].createElement("svg", {
-    width: "100%",
-    height: "100%",
+    width: "22",
+    height: "16",
     viewBox: "0 0 22 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"

package/dist/components/common/Flag/components/ChnFlag/index.js

@@ -8,8 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var ChnFlag = exports.ChnFlag = function ChnFlag() {
   return /*#__PURE__*/_react["default"].createElement("svg", {
-    width: "100%",
-    height: "100%",
+    width: "22",
+    height: "16",
     viewBox: "0 0 22 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"

package/dist/components/common/Flag/components/EngFlag/index.js

@@ -8,8 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var EngFlag = exports.EngFlag = function EngFlag() {
   return /*#__PURE__*/_react["default"].createElement("svg", {
-    width: "100%",
-    height: "100%",
+    width: "22",
+    height: "16",
     viewBox: "0 0 22 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"

package/dist/components/common/Flag/components/EspFlag/index.js

@@ -8,8 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var EspFlag = exports.EspFlag = function EspFlag() {
   return /*#__PURE__*/_react["default"].createElement("svg", {
-    width: "100%",
-    height: "100%",
+    width: "22",
+    height: "16",
     viewBox: "0 0 22 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"

package/dist/components/common/Flag/components/KazFlag/index.js

@@ -8,8 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var KazFlag = exports.KazFlag = function KazFlag() {
   return /*#__PURE__*/_react["default"].createElement("svg", {
-    width: "100%",
-    height: "100%",
+    width: "22",
+    height: "16",
     viewBox: "0 0 22 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"

package/dist/components/common/Flag/components/KgzFlag/index.js

@@ -8,8 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var KgzFlag = exports.KgzFlag = function KgzFlag() {
   return /*#__PURE__*/_react["default"].createElement("svg", {
-    width: "100%",
-    height: "100%",
+    width: "22",
+    height: "16",
     viewBox: "0 0 22 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"

package/dist/components/common/Flag/components/MdaFlag/index.js

@@ -8,8 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var MdaFlag = exports.MdaFlag = function MdaFlag() {
   return /*#__PURE__*/_react["default"].createElement("svg", {
-    width: "100%",
-    height: "100%",
+    width: "22",
+    height: "16",
     viewBox: "0 0 22 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"

package/dist/components/common/Flag/components/RusFlag/index.js

@@ -8,8 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var RusFlag = exports.RusFlag = function RusFlag() {
   return /*#__PURE__*/_react["default"].createElement("svg", {
-    width: "100%",
-    height: "100%",
+    width: "22",
+    height: "16",
     viewBox: "0 0 22 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"

package/dist/components/common/Flag/components/TjkFlag/index.js

@@ -8,8 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var TjkFlag = exports.TjkFlag = function TjkFlag() {
   return /*#__PURE__*/_react["default"].createElement("svg", {
-    width: "100%",
-    height: "100%",
+    width: "22",
+    height: "16",
     viewBox: "0 0 22 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"

package/dist/components/common/Flag/components/UnknownFlag/index.js

@@ -8,8 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var UnknownFlag = exports.UnknownFlag = function UnknownFlag() {
   return /*#__PURE__*/_react["default"].createElement("svg", {
-    width: "100%",
-    height: "100%",
+    width: "22",
+    height: "16",
     viewBox: "0 0 22 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"

package/dist/components/common/Flag/components/UzbFlag/index.js

@@ -8,8 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var UzbFlag = exports.UzbFlag = function UzbFlag() {
   return /*#__PURE__*/_react["default"].createElement("svg", {
-    width: "100%",
-    height: "100%",
+    width: "22",
+    height: "16",
     viewBox: "0 0 22 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"

package/dist/components/common/Flag/index.d.ts

@@ -2,11 +2,10 @@ declare const flagKeys: readonly ["RUS", "BLR", "KAZ", "AZE", "ARM", "KGZ", "MDA
 export type TFlagKey = (typeof flagKeys)[number];
 export type TProps = {
     flag: TFlagKey;
-    width: number;
-    height: number;
+    isSmall: boolean;
 };
 export declare const Flag: {
-    ({ flag, width, height }: TProps): import("react/jsx-runtime").JSX.Element;
+    ({ flag, isSmall }: TProps): import("react/jsx-runtime").JSX.Element;
     flags: readonly ["RUS", "BLR", "KAZ", "AZE", "ARM", "KGZ", "MDA", "TJK", "UZB", "CHN", "ENG", "ESP", "UNKNOWN"];
 };
 export {};

package/dist/components/common/Flag/index.js

@@ -41,11 +41,9 @@ var map = {
 };
 var Flag = exports.Flag = function Flag(_ref) {
   var flag = _ref.flag,
-    width = _ref.width,
-    height = _ref.height;
+    isSmall = _ref.isSmall;
   return /*#__PURE__*/_react["default"].createElement(S.FlagWrapper, {
-    $width: width,
-    $height: height
+    $isSmall: isSmall
   }, map[flag]);
 };
 Flag.flags = flagKeys;

package/dist/components/common/Flag/index.stories.js

@@ -17,7 +17,6 @@ var _default = exports["default"] = meta;
 var Default = exports.Default = {
   args: {
     flag: 'RUS',
-    width: 44,
-    height: 32
+    isSmall: false
   }
 };

package/dist/components/common/Flag/styles.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
 export declare const FlagWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $width: number;
-    $height: number;
+    $isSmall: boolean;
 }>>;

package/dist/components/common/Flag/styles.js

@@ -1,18 +1,19 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FlagWrapper = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var selectedFlagStyles = (0, _styledComponents.css)(["height:16px;width:22px;border-radius:3px;"]);
+var listFlagStyles = (0, _styledComponents.css)(["height:12px;width:17px;border-radius:2px;img{transform:scale(0.8);transform-origin:left top;}"]);
 var FlagWrapper = exports.FlagWrapper = _styledComponents["default"].div.withConfig({
   displayName: "styles__FlagWrapper",
   componentId: "sc-1te2h7u-0"
-})(["box-shadow:0 1px 5px rgba(53,63,71,0.2);width:", "px;height:", "px;display:flex;justify-content:center;align-items:center;border-radius:2px;overflow:hidden;"], function (_ref) {
-  var $width = _ref.$width;
-  return $width;
-}, function (_ref2) {
-  var $height = _ref2.$height;
-  return $height;
+})(["box-shadow:0 1px 5px rgba(53,63,71,0.2);display:flex;justify-content:center;align-items:center;overflow:hidden;", ";"], function (_ref) {
+  var $isSmall = _ref.$isSmall;
+  return $isSmall ? listFlagStyles : selectedFlagStyles;
 });

package/dist/components/form/CountrySelect/components/CountryItem/index.js

@@ -32,8 +32,7 @@ var CountryItem = exports.CountryItem = function CountryItem(_ref) {
     $palette: palette
   }, flag && /*#__PURE__*/_react["default"].createElement(_Flag.Flag, {
     flag: flag,
-    width: 17,
-    height: 12
+    isSmall: true
   }), /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
     variant: 'captionRegular'
   }, countryLabel, " ", isSelected && selectedLabel)), /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {

package/dist/components/form/CountrySelect/index.js

@@ -88,8 +88,7 @@ var CountrySelect = exports.CountrySelect = function CountrySelect(_ref) {
     onClick: handleDropdownTrigger,
     disabled: disabled
   }, selectedOption.flag && /*#__PURE__*/_react["default"].createElement(_Flag.Flag, {
-    height: 16,
-    width: 22,
+    isSmall: false,
     flag: selectedOption.flag
   }), /*#__PURE__*/_react["default"].createElement(_Arrow.Arrow, {
     isOpen: isOpen

package/dist/index.d.ts

@@ -30,7 +30,6 @@ export type { TProps as TCountrySelectProps } from './components/form/CountrySel
 export { PhoneInput } from './components/form/PhoneInput';
 export type { TProps as TPhoneInputProps } from './components/form/PhoneInput';
 export { phoneLogic } from './components/form/PhoneInput/externalPhoneLogic';
-export type { TSupportedCountries as TSupportedCountriesPhoneInput } from './components/form/PhoneInput/types';
 export { PaletteProvider } from './palette';
 export type { TAbstractPalette } from './palette';
 export { useOutsideClick } from './hooks/useOutsideClick';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@invoicebox/ui",
-    "version": "0.1.0-alpha.75",
+    "version": "0.1.0-alpha.77",
     "description": "Invoicebox UI",
     "license": "Apache License 2.0",
     "scripts": {