@via-profit/ui-kit 0.1.0-rc.73 → 0.1.0-rc.74

package/Autocomplete/AutocompleteContainer.d.ts

@@ -34,7 +34,7 @@ export interface AutocompleteProps<T, Multiple extends boolean | undefined = und
      * Should the autocomplete element be cleared when blur and if no element is selected\
      * **Default:** `true`
      */
-    readonly clearIfNotSelected?: boolean;
+    readonly clearOnBlur?: boolean;
     /**
      * Show clear button if clearable is true\
      * **Default:** `true`

package/Autocomplete/AutocompleteContainer.js

@@ -46,7 +46,7 @@ const context_1 = __importStar(require("./context"));
 const IconClear_1 = __importDefault(require("./IconClear"));
 const ClickOutside_1 = require("../ClickOutside");
 const Autocomplete = react_1.default.forwardRef((props, ref) => {
-    const { items, value, multiple, isOpen = false, isLoading = false, clearIfNotSelected = true, anchorPos = 'auto-start-end', openOnFocus = true, requiredAsterisk, startIcon, fullWidth, placeholder, label, error, errorText, inputRef, filterItems, children, onChange, selectedItemToString, clearable = true, onInputChange, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides } = props, nativeInputProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "clearIfNotSelected", "anchorPos", "openOnFocus", "requiredAsterisk", "startIcon", "fullWidth", "placeholder", "label", "error", "errorText", "inputRef", "filterItems", "children", "onChange", "selectedItemToString", "clearable", "onInputChange", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides"]);
+    const { items, value, multiple, isOpen = false, isLoading = false, clearOnBlur = true, anchorPos = 'auto-start-end', openOnFocus = true, requiredAsterisk, startIcon, fullWidth, placeholder, label, error, errorText, inputRef, filterItems, children, onChange, selectedItemToString, clearable = true, onInputChange, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides } = props, nativeInputProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "clearOnBlur", "anchorPos", "openOnFocus", "requiredAsterisk", "startIcon", "fullWidth", "placeholder", "label", "error", "errorText", "inputRef", "filterItems", "children", "onChange", "selectedItemToString", "clearable", "onInputChange", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides"]);
     const menuRef = react_1.default.useRef(null);
     const fieldInputRef = react_1.default.useRef(null);
     const isFocusedRef = react_1.default.useRef(false);
@@ -191,7 +191,7 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
             }
             // Click outside
             if (needToClose) {
-                if (clearIfNotSelected) {
+                if (clearOnBlur) {
                     dispatch((0, context_1.actionSetPartial)({
                         inputValue: currentValue === null
                             ? ''
@@ -211,7 +211,7 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
         onRequestClose,
         anchorElement,
         isOpen,
-        clearIfNotSelected,
+        clearOnBlur,
         dispatch,
         value,
         selectedItemToString,

package/Autocomplete/AutocompleteItem.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { MenuItemProps } from '../Menu/MenuItem';
+export interface AutocompleteItemProps extends MenuItemProps {
+    readonly variant?: 'standard' | 'virtual';
+    readonly startIcon?: JSX.Element;
+}
+export declare const AutocompleteItem: React.ForwardRefExoticComponent<AutocompleteItemProps & React.RefAttributes<HTMLDivElement>>;
+export default AutocompleteItem;

package/Autocomplete/AutocompleteItem.js

@@ -0,0 +1,44 @@
+"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 });
+exports.AutocompleteItem = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const MenuItem_1 = __importDefault(require("../Menu/MenuItem"));
+const StyeldMenuItem = (0, styled_1.default)(MenuItem_1.default, {
+    shouldForwardProp: p => !['$vatiant'].includes(p),
+}) `
+  ${({ $variant, theme }) => $variant === 'virtual' &&
+    (0, react_2.css) `
+      background-color: ${theme.color.accentPrimary.alpha(0.1).toString()};
+      border-color: ${theme.color.accentPrimary.toString()};
+      color: ${theme.color.textPrimary.toString()};
+      border-style: dashed;
+      border-width: 0.02em;
+
+      :hover {
+        background-color: ${theme.color.accentPrimary.toString()};
+        color: ${theme.color.accentPrimaryContrast.toString()};
+      }
+    `}
+`;
+const AutocompleteItemWithRef = (props, ref) => {
+    const { variant = 'standard', children } = props, restMenuItemProps = __rest(props, ["variant", "children"]);
+    return (react_1.default.createElement(StyeldMenuItem, Object.assign({}, restMenuItemProps, { "$variant": variant, ref: ref }), children));
+};
+exports.AutocompleteItem = react_1.default.forwardRef(AutocompleteItemWithRef);
+exports.default = exports.AutocompleteItem;

package/Autocomplete/index.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
-import AutocompleteItem from '../Menu/MenuItem';
 import { AutocompleteProps, AutocompleteRef } from './AutocompleteContainer';
 export * from './AutocompleteContainer';
-export { AutocompleteItem };
+export * from './AutocompleteItem';
 declare const _default: <T, Multiple extends boolean | undefined = undefined>(props: AutocompleteProps<T, Multiple> & {
     ref?: React.Ref<AutocompleteRef> | undefined;
 }) => JSX.Element;

package/Autocomplete/index.js

@@ -28,13 +28,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AutocompleteItem = void 0;
 const react_1 = __importDefault(require("react"));
-const MenuItem_1 = __importDefault(require("../Menu/MenuItem"));
-exports.AutocompleteItem = MenuItem_1.default;
 const AutocompleteContainer_1 = __importDefault(require("./AutocompleteContainer"));
 const context_1 = require("./context");
 __exportStar(require("./AutocompleteContainer"), exports);
+__exportStar(require("./AutocompleteItem"), exports);
 const Autocomplete = react_1.default.forwardRef((props, ref) => {
     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: {

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> | undefined;
+    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
 } & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
 export default _default;

package/Highlighted/index.d.ts

@@ -28,6 +28,11 @@ export interface HighlightedProps extends React.HTMLAttributes<HTMLSpanElement>
      *
      */
     readonly caseSensitive?: boolean;
+    /**
+     * Disable highlighting and show the plain text\
+     * **Default:** `false`
+     */
+    readonly disabledHighlighting?: boolean;
     /**
      * Overridable components map
      */

package/Highlighted/index.js

@@ -26,7 +26,7 @@ exports.escapeRegex = escapeRegex;
  * The component allows you to highlight text matches in a string
  */
 const Highlighted = (props, ref) => {
-    const { text, highlight, overrides, caseSensitive = false } = props, nativeProps = __rest(props, ["text", "highlight", "overrides", "caseSensitive"]);
+    const { text, highlight, overrides, disabledHighlighting = false, caseSensitive = false } = props, nativeProps = __rest(props, ["text", "highlight", "overrides", "disabledHighlighting", "caseSensitive"]);
     const patterns = react_1.default.useMemo(() => (typeof highlight === 'string' ? [highlight] : highlight)
         .filter(h => h.trim() !== '')
         .map(exports.escapeRegex), [highlight]);
@@ -37,8 +37,10 @@ const Highlighted = (props, ref) => {
         Text: (overrides === null || overrides === void 0 ? void 0 : overrides.Text) || HighlightedText_1.default,
     }), [overrides]);
     return (react_1.default.createElement(overridesMap.Container, Object.assign({}, nativeProps, { ref: ref }),
-        patterns.length === 0 && react_1.default.createElement(overridesMap.Text, null, text),
-        patterns.length > 0 &&
+        disabledHighlighting && react_1.default.createElement(overridesMap.Text, null, text),
+        !disabledHighlighting && patterns.length === 0 && (react_1.default.createElement(overridesMap.Text, null, text)),
+        !disabledHighlighting &&
+            patterns.length > 0 &&
             text
                 .split(regex)
                 .map((part, i) => regex.test(part) ? (react_1.default.createElement(overridesMap.Mark, { key: i }, part)) : (react_1.default.createElement(overridesMap.Text, { key: i }, part)))));

package/Menu/MenuItem.d.ts

@@ -1,12 +1,25 @@
 import React from 'react';
 export type MenuItemProps = React.HTMLAttributes<HTMLDivElement> & MenuItemCommonProps;
 export type MenuItemCommonProps = {
+    /**
+     * Selected flag
+     */
     readonly selected: boolean;
+    /**
+     * Hovered flag
+     */
     readonly hovered: boolean;
+    /**
+     * React key
+     */
     readonly key: React.Key;
     readonly onMouseEnter: React.MouseEventHandler<HTMLDivElement>;
     readonly onMouseLeave: React.MouseEventHandler<HTMLDivElement>;
     readonly onClick: React.MouseEventHandler<HTMLDivElement>;
+    /**
+     * Icon or another JSX element placed before button label
+     */
+    readonly startIcon?: JSX.Element;
 };
 declare const MenuItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & MenuItemCommonProps & React.RefAttributes<HTMLDivElement>>;
 export default MenuItem;

package/Menu/MenuItem.js

@@ -50,9 +50,14 @@ const InnerContainer = styled_1.default.div `
       }
     `}
 `;
+const ItemIconWrapper = styled_1.default.span `
+  margin-right: 0.5em;
+`;
 const MenuItem = react_1.default.forwardRef((props, ref) => {
-    const { children, selected, hovered, onMouseEnter, onMouseLeave, onClick } = props, nativeProps = __rest(props, ["children", "selected", "hovered", "onMouseEnter", "onMouseLeave", "onClick"]);
-    return (react_1.default.createElement(InnerContainer, Object.assign({}, nativeProps, { ref: ref, onMouseLeave: onMouseLeave, onMouseEnter: onMouseEnter, onClick: onClick, selected: selected, hovered: hovered }), children));
+    const { children, selected, hovered, onMouseEnter, onMouseLeave, onClick, startIcon } = props, nativeProps = __rest(props, ["children", "selected", "hovered", "onMouseEnter", "onMouseLeave", "onClick", "startIcon"]);
+    return (react_1.default.createElement(InnerContainer, Object.assign({}, nativeProps, { ref: ref, onMouseLeave: onMouseLeave, onMouseEnter: onMouseEnter, onClick: onClick, selected: selected, hovered: hovered }),
+        typeof startIcon !== 'undefined' && startIcon !== null && (react_1.default.createElement(ItemIconWrapper, null, startIcon)),
+        children));
 });
 MenuItem.displayName = 'MenuItem';
 exports.default = MenuItem;

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', /^\+$/],
-    ['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-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-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/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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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.73",
+  "version": "0.1.0-rc.74",
   "description": "UI Kit",
   "repository": {
     "type": "git",
@@ -88,7 +88,7 @@
     "shebang-loader": "^0.0.1",
     "terser-webpack-plugin": "^5.3.9",
     "ts-node": "^10.9.2",
-    "type-fest": "^4.8.3",
+    "type-fest": "^4.9.0",
     "typescript": "^5.3.3",
     "url-loader": "^4.1.1",
     "webpack": "^5.89.0",