@via-profit/ui-kit 0.1.0-rc.87 → 0.1.0-rc.89

package/Color/index.d.ts

@@ -75,6 +75,15 @@ declare class Color {
      * lum - 0-25
      */
     private shade;
+    static stringToHashCode(str: string): number;
+    /**
+     * Convert the integer value to a string color value
+     */
+    static intToRGB(i: number): string;
+    /**
+     * Convert GUID string value to a color string
+     */
+    static uuidToColor(uuid: string): string;
     /**
      * Returns the current color as separate rgb channels
      */

package/Color/index.js

@@ -122,6 +122,31 @@ class Color {
         __classPrivateFieldGet(this, _Color_color, "f").b = parseInt('0' + Math.min(255, Math.max(0, __classPrivateFieldGet(this, _Color_color, "f").b + lum)), 10);
         return this;
     }
+    static stringToHashCode(str) {
+        let hash = 0;
+        for (let i = 0; i < str.length; i++) {
+            const char = str.charCodeAt(i);
+            hash = (hash << 5) - hash + char;
+            hash |= 0; // Convert to a 32-bit integer
+        }
+        return hash;
+    }
+    /**
+     * Convert the integer value to a string color value
+     */
+    static intToRGB(i) {
+        const red = (i >> 16) & 0xff;
+        const green = (i >> 8) & 0xff;
+        const blue = i & 0xff;
+        return `rgb(${red},${green},${blue})`;
+    }
+    /**
+     * Convert GUID string value to a color string
+     */
+    static uuidToColor(uuid) {
+        const hash = Color.stringToHashCode(uuid);
+        return Color.intToRGB(hash);
+    }
     /**
      * Returns the current color as separate rgb channels
      */

package/Modal/BaseModal/ModalInner.js

@@ -20,24 +20,21 @@ const react_2 = require("@emotion/react");
 const StyledModalInner = styled_1.default.div `
   opacity: 0;
   z-index: ${({ theme }) => theme.zIndex.modal};
-  position: fixed;
-  left: 50%;
-  top: 50%;
   outline: none;
+  position: relative;
   background-color: ${({ theme }) => theme.color.surface.toString()};
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
-  transform: translate(-50%, -30%);
+  margin-top: 2em;
   transition:
-    transform 240ms ease-out,
-    opacity 100ms ease-out;
-
+    opacity 100ms ease-out,
+    margin-top 240ms ease-out;
   ${({ $isOpen }) => $isOpen &&
     (0, react_2.css) `
+      margin-top: 0;
       opacity: 1;
-      transform: translate(-50%, -50%);
       transition:
-        transform 240ms ease-out,
-        opacity 100ms ease-out;
+        opacity 100ms ease-out,
+        margin-top 240ms ease-out;
     `}
 `;
 const ModalInner = (props, ref) => {

package/Modal/BaseModal/ModalInnerContainer.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface ModalInnerContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The dialog will remain open as long as the value is true
+     */
+    readonly isOpen: boolean;
+    /**
+     * The function that will be called to close the dialog
+     */
+    readonly onRequestClose: (event: React.MouseEvent<HTMLElement> | KeyboardEvent) => void;
+}
+declare const _default: React.ForwardRefExoticComponent<ModalInnerContainerProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Modal/BaseModal/ModalInnerContainer.js

@@ -0,0 +1,42 @@
+"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 StyledModalInnerContainer = styled_1.default.div `
+  opacity: 0;
+  z-index: ${({ theme }) => theme.zIndex.modal};
+  position: fixed;
+  inset: 0;
+  outline: none;
+  transition: opacity 100ms ease-out;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  ${({ $isOpen }) => $isOpen &&
+    (0, react_2.css) `
+      opacity: 1;
+      transition: opacity 100ms ease-out;
+    `}
+`;
+const ModalInnerContainer = (props, ref) => {
+    const { children, isOpen, onRequestClose } = props, restProps = __rest(props, ["children", "isOpen", "onRequestClose"]);
+    return (react_1.default.createElement(StyledModalInnerContainer, Object.assign({}, restProps, { "$isOpen": isOpen, ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(ModalInnerContainer);

package/Modal/BaseModal/RenderModal.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
 import { ModalOverlayProps } from './ModalOverlay';
 import { ModalInnerProps } from './ModalInner';
+import { ModalInnerContainerProps } from './ModalInnerContainer';
 interface RenderModalProps {
     readonly children: React.ReactNode | readonly React.ReactNode[];
     readonly overrides: {
         readonly Overlay?: React.ForwardRefExoticComponent<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>;
         readonly Inner?: React.ForwardRefExoticComponent<ModalInnerProps & React.RefAttributes<HTMLDivElement>>;
+        readonly InnerContainer?: React.ForwardRefExoticComponent<ModalInnerContainerProps & React.RefAttributes<HTMLDivElement>>;
     };
 }
 declare const RenderModal: React.FC<RenderModalProps>;

package/Modal/BaseModal/RenderModal.js

@@ -7,6 +7,7 @@ const react_1 = __importDefault(require("react"));
 const context_1 = require("./context");
 const ModalOverlay_1 = __importDefault(require("./ModalOverlay"));
 const ModalInner_1 = __importDefault(require("./ModalInner"));
+const ModalInnerContainer_1 = __importDefault(require("./ModalInnerContainer"));
 const RenderModal = props => {
     const { children, overrides } = props;
     const { state } = (0, context_1.useContext)();
@@ -14,9 +15,11 @@ const RenderModal = props => {
     const overridesMap = react_1.default.useMemo(() => ({
         Overlay: (overrides === null || overrides === void 0 ? void 0 : overrides.Overlay) || ModalOverlay_1.default,
         Inner: (overrides === null || overrides === void 0 ? void 0 : overrides.Inner) || ModalInner_1.default,
+        InnerContainer: (overrides === null || overrides === void 0 ? void 0 : overrides.InnerContainer) || ModalInnerContainer_1.default,
     }), [overrides]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.useMemo(() => (react_1.default.createElement(overridesMap.Overlay, { isOpen: isOpen, onRequestClose: onRequestClose, closeOnOverlayClick: closeOnOverlayClick })), [overridesMap, isOpen, closeOnOverlayClick, onRequestClose]),
-        react_1.default.useMemo(() => (react_1.default.createElement(overridesMap.Inner, { isOpen: isOpen, onRequestClose: onRequestClose }, children)), [children, isOpen, overridesMap, onRequestClose])));
+        react_1.default.useMemo(() => (react_1.default.createElement(overridesMap.InnerContainer, { isOpen: isOpen, onRequestClose: onRequestClose },
+            react_1.default.createElement(overridesMap.Inner, { isOpen: isOpen, onRequestClose: onRequestClose }, children))), [children, isOpen, overridesMap, onRequestClose])));
 };
 exports.default = RenderModal;

package/Modal/BaseModal/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ModalOverlayProps } from './ModalOverlay';
 import { ModalInnerProps } from './ModalInner';
+import { ModalInnerContainerProps } from './ModalInnerContainer';
 export interface BaseModalProps {
     /**
      * The dialog will remain open as long as the value is true
@@ -46,6 +47,7 @@ export interface BaseModalProps {
 export interface BaseModalOverrides {
     readonly Overlay?: React.ForwardRefExoticComponent<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>;
     readonly Inner?: React.ForwardRefExoticComponent<ModalInnerProps & React.RefAttributes<HTMLDivElement>>;
+    readonly InnerContainer?: React.ForwardRefExoticComponent<ModalInnerContainerProps & React.RefAttributes<HTMLDivElement>>;
 }
 declare const BaseModal: React.FC<BaseModalProps>;
 export default BaseModal;

package/Modal/BaseModal/index.js

@@ -8,6 +8,7 @@ const react_dom_1 = __importDefault(require("react-dom"));
 const context_1 = require("./context");
 const ModalOverlay_1 = __importDefault(require("./ModalOverlay"));
 const ModalInner_1 = __importDefault(require("./ModalInner"));
+const ModalInnerContainer_1 = __importDefault(require("./ModalInnerContainer"));
 const ModalWrapper_1 = __importDefault(require("./ModalWrapper"));
 const RenderModal_1 = __importDefault(require("./RenderModal"));
 const NoSSR_1 = __importDefault(require("../../NoSSR"));
@@ -18,6 +19,7 @@ const BaseModal = props => {
     const overridesMap = react_1.default.useMemo(() => ({
         Overlay: (overrides === null || overrides === void 0 ? void 0 : overrides.Overlay) || ModalOverlay_1.default,
         Inner: (overrides === null || overrides === void 0 ? void 0 : overrides.Inner) || ModalInner_1.default,
+        InnerContainer: (overrides === null || overrides === void 0 ? void 0 : overrides.InnerContainer) || ModalInnerContainer_1.default,
     }), [overrides]);
     react_1.default.useEffect(() => {
         /**

package/Modal/Dialog/DialogInner.js

@@ -16,34 +16,12 @@ 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 react_2 = require("@emotion/react");
-const StyledDialogInner = styled_1.default.div `
-  flex: 1;
+const ModalInner_1 = __importDefault(require("../BaseModal/ModalInner"));
+const StyledDialogInner = (0, styled_1.default)(ModalInner_1.default) `
   padding: 1em 1em;
-  opacity: 0;
-  z-index: ${({ theme }) => theme.zIndex.modal};
-  position: fixed;
-  left: 50%;
-  top: 50%;
-  outline: none;
-  background-color: ${({ theme }) => theme.color.surface.toString()};
-  border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
-  transform: translate(-50%, -30%);
-  transition:
-    transform 240ms ease-out,
-    opacity 100ms ease-out;
-
-  ${({ $isOpen }) => $isOpen &&
-    (0, react_2.css) `
-      opacity: 1;
-      transform: translate(-50%, -50%);
-      ransition:
-        transform 240ms ease-out,
-        opacity 100ms ease-out;
-    `}
 `;
 const DialogInner = (props, ref) => {
-    const { children, isOpen, onRequestClose, dialogID } = props, nativeProps = __rest(props, ["children", "isOpen", "onRequestClose", "dialogID"]);
-    return (react_1.default.createElement(StyledDialogInner, Object.assign({ "$isOpen": isOpen, id: `${dialogID}-description` }, nativeProps, { ref: ref }), children));
+    const { children, dialogID } = props, restProps = __rest(props, ["children", "dialogID"]);
+    return (react_1.default.createElement(StyledDialogInner, Object.assign({ id: `${dialogID}-description` }, restProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(DialogInner);

package/Modal/Drawer/DrawerInner.js

@@ -21,103 +21,99 @@ const StyledDrawerBottomInner = styled_1.default.div `
   position: fixed;
   left: 0;
   right: 0;
-  bottom: 0;
-  opacity: 0;
+  bottom: -100%;
   max-height: 90%;
+  opacity: 0;
   display: flex;
   flex-direction: column;
-  transform: translate(0, 100%);
   z-index: ${({ theme }) => theme.zIndex.modal};
   background-color: ${({ theme }) => theme.color.surface.toString()};
   border-top-left-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   border-top-right-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   transition:
-    transform 600ms ease-out,
-    opacity 120ms ease-out;
+    opacity 120ms ease-out,
+    bottom 600ms ease-out;
   ${({ $isOpen }) => $isOpen &&
     (0, react_2.css) `
       opacity: 1;
-      transform: translate(0, 0);
+      bottom: 0;
       transition:
-        transform 240ms ease-out,
-        opacity 100ms ease-out;
+        opacity 100ms ease-out,
+        bottom 240ms ease-out;
     `}
 `;
 const StyledDrawerTopInner = styled_1.default.div `
   position: fixed;
   left: 0;
   right: 0;
-  top: 0;
+  top: -100%;
   opacity: 0;
   max-height: 90%;
   display: flex;
   flex-direction: column;
-  transform: translate(0, -100%);
   z-index: ${({ theme }) => theme.zIndex.modal};
   background-color: ${({ theme }) => theme.color.surface.toString()};
   border-bottom-left-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   border-bottom-right-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   transition:
-    transform 600ms ease-out,
+    top 600ms ease-out,
     opacity 120ms ease-out;
   ${({ $isOpen }) => $isOpen &&
     (0, react_2.css) `
       opacity: 1;
-      transform: translate(0, 0);
+      top: 0;
       transition:
-        transform 240ms ease-out,
+        top 240ms ease-out,
         opacity 100ms ease-out;
     `}
 `;
 const StyledDrawerRightInner = styled_1.default.div `
   position: fixed;
-  right: 0;
+  right: -100%;
   top: 0;
   bottom: 0;
   opacity: 0;
   max-width: 90%;
   display: flex;
   flex-direction: column;
-  transform: translate(100%, 0);
   z-index: ${({ theme }) => theme.zIndex.modal};
   background-color: ${({ theme }) => theme.color.surface.toString()};
   border-top-left-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   border-bottom-left-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   transition:
-    transform 600ms ease-out,
+    right 600ms ease-out,
     opacity 120ms ease-out;
   ${({ $isOpen }) => $isOpen &&
     (0, react_2.css) `
       opacity: 1;
-      transform: translate(0, 0);
+      right: 0;
       transition:
-        transform 240ms ease-out,
+        right 240ms ease-out,
         opacity 100ms ease-out;
     `}
 `;
 const StyledDrawerLeftInner = styled_1.default.div `
   position: fixed;
-  left: 0;
+  left: -100%;
   top: 0;
   bottom: 0;
   opacity: 0;
   max-width: 90%;
   display: flex;
   flex-direction: column;
-  transform: translate(-100%, 0);
   z-index: ${({ theme }) => theme.zIndex.modal};
   background-color: ${({ theme }) => theme.color.surface.toString()};
   border-top-right-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   border-bottom-right-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   transition:
-    transform 600ms ease-out,
+    left 600ms ease-out,
     opacity 120ms ease-out;
   ${({ $isOpen }) => $isOpen &&
     (0, react_2.css) `
       opacity: 1;
-      transform: translate(0, 0);
+      left: 0;
       transition:
-        transform 240ms ease-out,
+        left 240ms ease-out,
         opacity 100ms ease-out;
     `}
 `;

package/Modal/Drawer/index.js

@@ -51,7 +51,7 @@ const Drawer = props => {
     const hasHeader = React.useMemo(() => typeof header !== 'undefined' ||
         typeof toolbar !== 'undefined' ||
         typeof showCloseButton !== 'undefined', [showCloseButton, header, toolbar]);
-    const dialogID = React.useMemo(() => `drawer-confirm-${new Date().getTime()}`, []);
+    const dialogID = React.useMemo(() => `drawer-${new Date().getTime()}`, []);
     const overridesMap = React.useMemo(() => ({
         Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || DrawerContainer_1.default,
         Header: (overrides === null || overrides === void 0 ? void 0 : overrides.Header) || DrawerHeader_1.default,

package/PhoneField/index.d.ts

@@ -1,14 +1,23 @@
 import React from 'react';
 import { TextFieldProps } from '../TextField';
-import type { CountryCode, CountryFlag, PhoneTemplate } from './templates';
+import type { CountryFlag, PhoneTemplate } from './templates';
 export interface PhoneFieldProps extends Omit<TextFieldProps, 'value' | 'onChange'> {
     /**
      * Phone string format 79876543210 or +7 (987) 654-32-10
      */
     readonly value: string;
-    readonly defaultCountry?: CountryCode | null;
+    /**
+     * On input change event
+     */
     readonly onChange: (event: React.ChangeEvent<HTMLInputElement>, payload: PhonePayload) => void;
+    /**
+     * Supported RegExp templates
+     */
     readonly templates: readonly PhoneTemplate[];
+    /**
+     * If truethen CountryFalg component will be hidden
+     */
+    readonly withoutCountryFlag?: boolean;
 }
 export interface PhonePayload {
     /**

package/PhoneField/index.js

@@ -33,7 +33,7 @@ const TextField_1 = __importDefault(require("../TextField"));
 const usePhoneUtils_1 = require("./usePhoneUtils");
 const CountryFlagComponent_1 = __importDefault(require("./CountryFlagComponent"));
 const PhoneField = (props, ref) => {
-    const { value, defaultCountry, templates, inputRef, onChange } = props, textFieldProps = __rest(props, ["value", "defaultCountry", "templates", "inputRef", "onChange"]);
+    const { value, templates, inputRef, withoutCountryFlag, onChange } = props, textFieldProps = __rest(props, ["value", "templates", "inputRef", "withoutCountryFlag", "onChange"]);
     const { formatParsedInput, parseInput, parseAndFormat } = (0, usePhoneUtils_1.usePhoneUtils)({ templates });
     const textInputRef = react_1.default.useRef(null);
     const initialValue = react_1.default.useRef(value);
@@ -80,12 +80,12 @@ const PhoneField = (props, ref) => {
             (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(caret, caret);
         }, 15);
     };
-    return (react_1.default.createElement(TextField_1.default, Object.assign({ ref: ref, startIcon: react_1.default.useMemo(() => (react_1.default.createElement(CountryFlagComponent_1.default, { flag: CountryFlag, onClick: () => {
+    return (react_1.default.createElement(TextField_1.default, Object.assign({ ref: ref, startIcon: react_1.default.useMemo(() => withoutCountryFlag ? undefined : (react_1.default.createElement(CountryFlagComponent_1.default, { flag: CountryFlag, onClick: () => {
                 if (textInputRef.current) {
                     textInputRef.current.select();
                     textInputRef.current.focus();
                 }
-            } })), [CountryFlag]) }, textFieldProps, { value: currentValue, placeholder: placeholder, onChange: handleChange, inputRef: input => {
+            } })), [CountryFlag, withoutCountryFlag]) }, textFieldProps, { value: currentValue, placeholder: placeholder, onChange: handleChange, inputRef: input => {
             textInputRef.current = input;
             if (typeof inputRef === 'function') {
                 inputRef(input);

package/package.json

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