@via-profit/ui-kit 0.1.0-rc.69 → 0.1.0-rc.70

package/Autocomplete/AutocompleteContainer.js

@@ -148,11 +148,9 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
         }
         dispatch((0, context_1.actionSetPartial)({
             currentValue: value,
-            inputValue: multiple
+            inputValue: value === null
                 ? ''
-                : value === null
-                    ? inputValue
-                    : selectedItemToString(value),
+                : selectedItemToString(value),
         }));
     }, [value, multiple, currentValue, inputValue, dispatch, selectedItemToString]);
     react_1.default.useEffect(() => {
@@ -287,11 +285,9 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
             }, closeOnSelect: multiple ? false : true, onRequestClose: evt => {
                 if (clearIfNotSelected) {
                     dispatch((0, context_1.actionSetPartial)({
-                        inputValue: multiple
-                            ? ''
-                            : value !== null
-                                ? selectedItemToString(value)
-                                : '',
+                        inputValue: value !== null
+                            ? selectedItemToString(value)
+                            : '',
                     }));
                 }
                 if ((evt === null || evt === void 0 ? void 0 : evt.target) !== anchorElement) {

package/Autocomplete/index.js

@@ -36,9 +36,16 @@ const AutocompleteContainer_1 = __importDefault(require("./AutocompleteContainer
 const context_1 = require("./context");
 __exportStar(require("./AutocompleteContainer"), exports);
 const Autocomplete = react_1.default.forwardRef((props, ref) => {
-    const { children, items, isOpen, value } = props, restProps = __rest(props, ["children", "items", "isOpen", "value"]);
-    return (react_1.default.createElement(context_1.ContextProvider, { initialState: { filteredItems: items, currentOpen: isOpen, currentValue: value } },
-        react_1.default.createElement(AutocompleteContainer_1.default, Object.assign({}, restProps, { items: items, isOpen: isOpen, value: value, ref: ref }), children)));
+    const { children, items, isOpen, multiple, selectedItemToString, value } = props, restProps = __rest(props, ["children", "items", "isOpen", "multiple", "selectedItemToString", "value"]);
+    return (react_1.default.createElement(context_1.ContextProvider, { initialState: {
+            filteredItems: items,
+            currentOpen: isOpen,
+            currentValue: value,
+            inputValue: value === null
+                ? ''
+                : selectedItemToString(value),
+        } },
+        react_1.default.createElement(AutocompleteContainer_1.default, Object.assign({}, restProps, { items: items, isOpen: isOpen, multiple: multiple, selectedItemToString: selectedItemToString, value: value, ref: ref }), children)));
 });
 Autocomplete.displayName = 'Autocomplete';
 exports.default = Autocomplete;

package/Calendar/CalendarWeekDayLabel.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 declare const _default: React.NamedExoticComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    as?: React.ElementType<any> | undefined;
 } & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
 export default _default;

package/Menu/MenuContainer.js

@@ -126,14 +126,17 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
         if (typeof onSelectItem === 'function') {
             // For multiple
             if (multiple) {
-                const selItems = new Set(value !== null ? value : []);
+                const selectedMap = new Map();
+                if (value !== null) {
+                    value.forEach(v => selectedMap.set(JSON.stringify(v), v));
+                }
                 if (selectedIndexes.includes(index)) {
-                    selItems.delete(item);
+                    selectedMap.delete(JSON.stringify(item));
                 }
-                else {
-                    selItems.add(item);
+                if (!selectedIndexes.includes(index)) {
+                    selectedMap.set(JSON.stringify(item), item);
                 }
-                onSelectItem(Array.from(selItems));
+                onSelectItem(Array.from(selectedMap, ([_key, v]) => v));
             }
             else {
                 // For single

package/PhoneField/templates.js

@@ -15,8 +15,8 @@ const US_1 = __importDefault(require("../CountryFlags/US"));
 const IL_1 = __importDefault(require("../CountryFlags/IL"));
 exports.templates = [
     // Russian template
-    ['RU', react_1.default.createElement(RU_1.default, { key: "ru-1" }), '7', '+x (xxx) xxx-xx-xx', '+7 (987) 654-32-10', /^\+$/], // must be at first (Default RU)
-    ['RU', react_1.default.createElement(RU_1.default, { key: "ru-2" }), '7', '8 (xxx) xxx-xx-xx', '8 (987) 654-32-10', /^8[^1]{0,}/], // 8912...
+    ['RU', react_1.default.createElement(RU_1.default, { key: "ru-1" }), '7', '+x (xxx) xxx-xx-xx', '+7 (987) 654-32-10', /^\+$/],
+    ['RU', react_1.default.createElement(RU_1.default, { key: "ru-2" }), '7', '8 (xxx) xxx-xx-xx', '8 (987) 654-32-10', /^8[^1]{0,}/],
     [
         'RU',
         react_1.default.createElement(RU_1.default, { key: "ru-3" }),
@@ -24,7 +24,7 @@ exports.templates = [
         '+7 (xxx) xxx-xx-xx',
         '+7 (987) 654-32-10',
         /^\+{0,1}7([0-5]|[8-9])[0-9][0-9]/,
-    ], // +79...
+    ],
     // Other fucking countries
     ['BY', react_1.default.createElement(BY_1.default, { key: "by" }), '375', '+375 (xx) xxx-xx-xx', '+375 (98) 765-43-21', /^\+{0,1}375/],
     ['KZ', react_1.default.createElement(KZ_1.default, { key: "kz-1" }), '7', '+997 (xx) xxx-xx-xx', '+997 (98) 765-43-21', /^\+{0,1}997/],
@@ -35,7 +35,7 @@ exports.templates = [
         '+7 (xxx) xxx-xx-xx',
         '+7 (600) 765-43-21',
         /^\+{0,1}7[6-7][0-9][0-9]/,
-    ], // +7600 - +7700
+    ],
     ['UA', react_1.default.createElement(UA_1.default, { key: "ua" }), '380', '+380 (xx) xxx-xxxx', '+380 (98) 765-4321', /^\+{0,1}380/],
     ['JP', react_1.default.createElement(JP_1.default, { key: "jp" }), '81', '+81 (xx) xxx-xxxx', '+81 (98) 765-4321', /^\+{0,1}81/],
     ['US', react_1.default.createElement(US_1.default, { key: "us" }), '1', '+1 xxx xxx-xx-xx', '+1 987 654-32-10', /^\+{0,1}1/],

package/Selectbox/SelectboxButton.js

@@ -39,37 +39,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
-const react_1 = require("@emotion/react");
 const Button_1 = __importDefault(require("../Button"));
 const ButtonTextWrapper_1 = __importDefault(require("../Button/ButtonTextWrapper"));
 const StyledSelectboxButton = (0, styled_1.default)(Button_1.default) `
-  width: 100%;
   flex: 1;
-  border: 1px solid;
-  outline: 1px solid transparent;
   padding: 1em 1.2em;
-  border-color: ${({ theme }) => theme.isDark
-    ? theme.color.textPrimary.darken(100).toString()
-    : theme.color.textPrimary.lighten(150).toString()};
-  width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
   font-size: 1em;
-  background-color: ${({ theme }) => theme.color.surface.toString()};
-  color: ${({ theme }) => theme.color.textPrimary.toString()};
-  transition: all 180ms ease-out 0s;
-
-  ${props => props.$focused &&
-    (0, react_1.css) `
-      border-color: ${props.theme.color.accentPrimary.lighten(10).toString()};
-      outline-color: ${props.theme.color.accentPrimary.lighten(10).toString()};
-    `};
-  ${props => props.$error &&
-    (0, react_1.css) `
-      border-color: ${props.theme.color.error.toString()};
-      color: ${props.theme.color.error.toString()};
-      &:focus {
-        border-color: ${props.theme.color.error.lighten(0.6).toString()};
-      }
-    `}
+  background: none;
+  border-radius: inherit;
+  margin: 0;
+  border: 0;
+  width: 100%;
 `;
 const StyledButtonTextWrapper = (0, styled_1.default)(ButtonTextWrapper_1.default) `
   flex: 1;

package/Selectbox/SelectboxButtonWrapper.d.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
 export type SelectboxButtonWrapperProps = React.HTMLAttributes<HTMLDivElement> & {
     readonly fullWidth?: boolean;
+    readonly error?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     readonly fullWidth?: boolean | undefined;
+    readonly error?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Selectbox/SelectboxButtonWrapper.js

@@ -39,16 +39,40 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("@emotion/react");
 const Wrapper = styled_1.default.div `
   min-width: 16em;
+  font-size: 0.9em;
   text-align: left;
   max-width: ${({ $fullWidth }) => ($fullWidth ? '100%' : '16em')};
   display: flex;
   align-items: stretch;
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
+  border: 1px solid transparent;
+
+  border: 1px solid;
+  outline: 1px solid transparent;
+
+  border-color: ${({ theme }) => theme.isDark
+    ? theme.color.textPrimary.darken(100).toString()
+    : theme.color.textPrimary.lighten(150).toString()};
+  width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
+
+  background-color: ${({ theme }) => theme.color.surface.toString()};
+  color: ${({ theme }) => theme.color.textPrimary.toString()};
+  transition: all 180ms ease-out 0s;
+
+  ${props => props.$error &&
+    (0, react_1.css) `
+      border-color: ${props.theme.color.error.toString()};
+      color: ${props.theme.color.error.toString()};
+      &:focus {
+        border-color: ${props.theme.color.error.lighten(0.6).toString()};
+      }
+    `}
 `;
 const SelectboxButtonWrapper = (props, ref) => {
-    const { fullWidth, children } = props, nativeProps = __rest(props, ["fullWidth", "children"]);
-    return (React.createElement(Wrapper, Object.assign({}, nativeProps, { "$fullWidth": Boolean(fullWidth), ref: ref }), children));
+    const { fullWidth, children, error } = props, nativeProps = __rest(props, ["fullWidth", "children", "error"]);
+    return (React.createElement(Wrapper, Object.assign({}, nativeProps, { "$fullWidth": Boolean(fullWidth), "$error": error, ref: ref }), children));
 };
 exports.default = React.forwardRef(SelectboxButtonWrapper);

package/Selectbox/SelectboxContainer.js

@@ -15,8 +15,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const StyledSelectboxContainer = styled_1.default.div `
+  display: inline-flex;
+  flex-flow: column;
+  vertical-align: top;
+`;
 const SelectboxContainer = (props, ref) => {
     const { children } = props, nativeProps = __rest(props, ["children"]);
-    return (react_1.default.createElement("div", Object.assign({}, nativeProps, { ref: ref }), children));
+    return (react_1.default.createElement(StyledSelectboxContainer, Object.assign({}, nativeProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(SelectboxContainer);

package/Selectbox/index.js

@@ -90,7 +90,7 @@ const Selectbox = react_1.default.forwardRef((props, ref) => {
         typeof label !== 'undefined' && label !== null && (react_1.default.createElement(overridesMap.Label, { htmlFor: inputID, error: error },
             label,
             typeof requiredAsterisk !== 'undefined' && requiredAsterisk !== null && (react_1.default.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk)))),
-        react_1.default.createElement(overridesMap.ButtonWrapper, { fullWidth: fullWidth },
+        react_1.default.createElement(overridesMap.ButtonWrapper, { fullWidth: fullWidth, error: error },
             react_1.default.createElement(overridesMap.Button, Object.assign({ fullWidth: fullWidth, error: error, endIcon: isLoading ? react_1.default.createElement(Spinner_1.default, null) : react_1.default.createElement(overridesMap.Icon, { isOpen: isOpen }), onClick: event => {
                     if (isOpen) {
                         onRequestClose(event);

package/Typography/Base.d.ts

@@ -5,6 +5,6 @@
  */
 declare const Base: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export default Base;

package/Typography/Blockquote.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 declare const Blockquote: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>, {}>;
 export default Blockquote;

package/Typography/List.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
 export declare const Ul: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
 export declare const Ol: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, {}>;
 export declare const Li: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
 export default Ul;

package/Typography/U.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 declare const U: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
 export default U;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.1.0-rc.69",
+  "version": "0.1.0-rc.70",
   "description": "UI Kit",
   "repository": {
     "type": "git",

package/Calendar/CalendarBottomBar.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-export type CalendarBottomBarProps = React.HTMLAttributes<HTMLDivElement>;
-declare const _default: React.ForwardRefExoticComponent<CalendarBottomBarProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;

package/Calendar/CalendarBottomBar.js

@@ -1,28 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const styled_1 = __importDefault(require("@emotion/styled"));
-const Container = styled_1.default.div `
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
-const CalendarBottomBar = (props, ref) => {
-    const { children } = props, restProps = __rest(props, ["children"]);
-    return (react_1.default.createElement(Container, Object.assign({}, restProps, { ref: ref }), children));
-};
-exports.default = react_1.default.forwardRef(CalendarBottomBar);

package/Calendar/CalendarMonthControl.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export interface CalendarMonthControlProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    readonly displayIcon: 'prev' | 'next';
-}
-declare const _default: React.ForwardRefExoticComponent<CalendarMonthControlProps & React.RefAttributes<HTMLButtonElement>>;
-export default _default;

package/Calendar/CalendarMonthControl.js

@@ -1,41 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const styled_1 = __importDefault(require("@emotion/styled"));
-const react_2 = require("@emotion/react");
-const Button_1 = __importDefault(require("../Button"));
-const IconChevronLeft_1 = __importDefault(require("./IconChevronLeft"));
-const IconChevronRight_1 = __importDefault(require("./IconChevronRight"));
-const StyledButton = (0, styled_1.default)(Button_1.default) `
-  color: ${({ theme }) => theme.color.accentSecondaryContrast.toString()};
-  &:hover {
-    color: ${({ theme }) => theme.color.accentSecondaryContrast.alpha(0.5).toString()};
-    background-color: ${({ theme }) => theme.color.accentSecondary.lighten(10).toString()};
-  }
-  &:active {
-    color: ${({ theme }) => theme.color.accentSecondaryContrast.alpha(0.9).toString()};
-  }
-  ${({ disabled }) => disabled &&
-    (0, react_2.css) `
-      opacity: 0.5;
-    `};
-`;
-const CalendarMonthControl = (props, ref) => {
-    const { displayIcon } = props, restProps = __rest(props, ["displayIcon"]);
-    return (react_1.default.createElement(StyledButton, Object.assign({ variant: "plain", iconOnly: true, type: "button" }, restProps, { ref: ref }), displayIcon === 'next' ? react_1.default.createElement(IconChevronRight_1.default, null) : react_1.default.createElement(IconChevronLeft_1.default, null)));
-};
-exports.default = react_1.default.forwardRef(CalendarMonthControl);

package/Calendar/IconChevronLeft.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const _default: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export default _default;

package/Calendar/IconChevronLeft.js

@@ -1,9 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const IconChevronLeft = (props, ref) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: "1em", height: "1em", ref: ref }, props),
-    react_1.default.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 48, d: "M328 112 184 256l144 144" })));
-exports.default = react_1.default.forwardRef(IconChevronLeft);

package/Selectbox/IconShow.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const _default: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export default _default;

package/Selectbox/IconShow.js

@@ -1,9 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const IconShow = (props, ref) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "1em", height: "1em", viewBox: "0 0 512 512" }, props, { ref: ref }),
-    react_1.default.createElement("path", { d: "m105.79 160.82a24 24 0 0 0-10.76 6.2109 24 24 0 0 0 0 33.941l144 144a24.002 24.002 0 0 0 33.941 0l144-144a24 24 0 0 0 0-33.941 24 24 0 0 0-33.941 0l-127.03 127.03-127.03-127.03a24 24 0 0 0-23.182-6.2109z", fill: "currentColor" })));
-exports.default = react_1.default.forwardRef(IconShow);