@skbkontur/react-ui 0.0.0-4cd450ed1e → 0.0.0-4da47ece08

package/internal/InternalMenu/InternalMenu.d.ts

@@ -1,12 +1,22 @@
 import React from 'react';
 import { ScrollContainerScrollState } from '../../components/ScrollContainer';
-interface MenuProps {
+export interface InternalMenuProps {
     children?: React.ReactNode;
     hasShadow?: boolean;
+    /**
+     * Максимальная высота применяется только для скролл контейнера
+     *
+     * Высота `header` и `footer` в нее не включены
+     */
     maxHeight?: number | string;
     onItemClick?: (event: React.SyntheticEvent<HTMLElement>) => void;
     width?: number | string;
     preventWindowScroll?: boolean;
+    /**
+     * Предотвращает выравнивание текста всех пунктов меню относительно друг друга.
+     * Так, если хотя бы у одного пункта меню есть иконка, текст в  остальных пунктах меню будет выровнен относительно пункта меню с иконкой
+     */
+    preventIconsOffset?: boolean;
     onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
     header?: React.ReactNode;
     footer?: React.ReactNode;
@@ -18,32 +28,34 @@ interface MenuState {
     maxHeight: number | string;
     scrollState: ScrollContainerScrollState;
 }
-export declare class InternalMenu extends React.Component<MenuProps, MenuState> {
+export declare const InternalMenuDataTids: {
+    readonly root: "InternalMenu__root";
+};
+declare type DefaultProps = Required<Pick<InternalMenuProps, 'width' | 'maxHeight' | 'hasShadow' | 'preventWindowScroll' | 'cyclicSelection' | 'initialSelectedItemIndex'>>;
+/**
+ * @deprecated use Menu component instead
+ */
+export declare class InternalMenu extends React.PureComponent<InternalMenuProps, MenuState> {
     static __KONTUR_REACT_UI__: string;
-    static defaultProps: {
-        width: string;
-        maxHeight: number;
-        hasShadow: boolean;
-        preventWindowScroll: boolean;
-        cyclicSelection: boolean;
-        initialSelectedItemIndex: number;
-    };
+    static displayName: string;
+    static defaultProps: DefaultProps;
+    private getProps;
     state: MenuState;
     private theme;
     private scrollContainer;
     private highlighted;
-    private rootElement;
+    private setRootNode;
     private header;
     private footer;
-    private getProps;
+    private isMobileLayout;
     componentDidMount(): void;
-    componentDidUpdate(prevProps: MenuProps, prevState: MenuState): void;
-    UNSAFE_componentWillReceiveProps(nextProps: MenuProps): void;
+    componentDidUpdate(prevProps: InternalMenuProps): void;
     focus(): void;
     render(): JSX.Element;
     private renderMain;
     private renderHeader;
     private renderFooter;
+    private renderMenuSeparatorWithNoMargin;
     private focusOnRootElement;
     private shouldRecalculateMaxHeight;
     private calculateMaxHeight;

package/internal/InternalMenu/InternalMenu.styles/InternalMenu.styles.js

@@ -1,84 +1,31 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-function _templateObject6() {
-  var data = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);\n    "]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);\n    "]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n      bottom: -5px;\n      position: relative;\n      z-index: 1;\n      width: 100%;\n      overflow: hidden;\n      line-height: 18px;\n      box-sizing: border-box;\n      padding: 6px 18px 7px 8px;\n    "]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n      top: -5px;\n      position: relative;\n      z-index: 1;\n      width: 100%;\n      overflow: hidden;\n      line-height: 18px;\n      box-sizing: border-box;\n      padding: 6px 18px 7px 8px;\n    "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n      border: 1px solid #d5d5d5;\n      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);\n    "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n      overflow: auto;\n      padding: 5px 0;\n      outline: none;\n      background: ", ";\n    "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-var styles = {
+export var styles = memoizeStyle({
   root: function root(t) {
-    return css(_templateObject(), t.bgDefault);
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      padding: ", " ", ";\n      outline: none;\n      box-sizing: content-box;\n      background: ", ";\n    "])), t.internalMenuPaddingY, t.menuPaddingX, t.bgSecondary);
+  },
+  mobileRoot: function mobileRoot(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      padding: 0 ", ";\n    "])), t.mobileMenuPaddingX);
+  },
+  shadow: function shadow(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      border: ", ";\n      box-shadow: ", ";\n    "])), t.menuBorder, t.menuShadow);
   },
-  shadow: function shadow() {
-    return css(_templateObject2());
+  wrapper: function wrapper() {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      position: relative;\n      z-index: 1;\n      width: 100%;\n      overflow: hidden;\n      line-height: 18px;\n      box-sizing: border-box;\n    "])));
   },
-  header: function header() {
-    return css(_templateObject3());
+  headerWrapper: function headerWrapper() {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      top: -5px;\n    "])));
   },
-  footer: function footer() {
-    return css(_templateObject4());
+  footerWrapper: function footerWrapper() {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      bottom: -5px;\n    "])));
   },
-  fixedHeader: function fixedHeader() {
-    return css(_templateObject5());
+  contentWrapper: function contentWrapper() {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      padding: 6px 18px 7px 8px;\n    "])));
   },
-  fixedFooter: function fixedFooter() {
-    return css(_templateObject6());
+  menuSeparatorWrapper: function menuSeparatorWrapper(t) {
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      height: ", ";\n    "])), t.menuSeparatorBorderWidth);
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

package/internal/InternalMenu/InternalMenu.styles/InternalMenu.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["InternalMenu.styles.ts"],"names":["css","memoizeStyle","styles","root","t","bgDefault","shadow","header","footer","fixedHeader","fixedFooter","jsStyles"],"mappings":"iqDAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,gBACRC,CADQ,EACE;AACb,WAAOJ,GAAP;;;;AAIgBI,IAAAA,CAAC,CAACC,SAJlB;;AAMD,GARY;;AAUbC,EAAAA,MAVa,oBAUJ;AACP,WAAON,GAAP;;;;AAID,GAfY;;AAiBbO,EAAAA,MAjBa,oBAiBJ;AACP,WAAOP,GAAP;;;;;;;;;;AAUD,GA5BY;;AA8BbQ,EAAAA,MA9Ba,oBA8BJ;AACP,WAAOR,GAAP;;;;;;;;;;AAUD,GAzCY;;AA2CbS,EAAAA,WA3Ca,yBA2CC;AACZ,WAAOT,GAAP;;;AAGD,GA/CY;;AAiDbU,EAAAA,WAjDa,yBAiDC;AACZ,WAAOV,GAAP;;;AAGD,GArDY,EAAf;;;AAwDA,OAAO,IAAMW,QAAQ,GAAGV,YAAY,CAACC,MAAD,CAA7B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst styles = {\r\n  root(t: Theme) {\r\n    return css`\r\n      overflow: auto;\r\n      padding: 5px 0;\r\n      outline: none;\r\n      background: ${t.bgDefault};\r\n    `;\r\n  },\r\n\r\n  shadow() {\r\n    return css`\r\n      border: 1px solid #d5d5d5;\r\n      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);\r\n    `;\r\n  },\r\n\r\n  header() {\r\n    return css`\r\n      top: -5px;\r\n      position: relative;\r\n      z-index: 1;\r\n      width: 100%;\r\n      overflow: hidden;\r\n      line-height: 18px;\r\n      box-sizing: border-box;\r\n      padding: 6px 18px 7px 8px;\r\n    `;\r\n  },\r\n\r\n  footer() {\r\n    return css`\r\n      bottom: -5px;\r\n      position: relative;\r\n      z-index: 1;\r\n      width: 100%;\r\n      overflow: hidden;\r\n      line-height: 18px;\r\n      box-sizing: border-box;\r\n      padding: 6px 18px 7px 8px;\r\n    `;\r\n  },\r\n\r\n  fixedHeader() {\r\n    return css`\r\n      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);\r\n    `;\r\n  },\r\n\r\n  fixedFooter() {\r\n    return css`\r\n      box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["InternalMenu.styles.ts"],"names":["css","memoizeStyle","styles","root","t","internalMenuPaddingY","menuPaddingX","bgSecondary","mobileRoot","mobileMenuPaddingX","shadow","menuBorder","menuShadow","wrapper","headerWrapper","footerWrapper","contentWrapper","menuSeparatorWrapper","menuSeparatorBorderWidth"],"mappings":"kPAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,WAAOJ,GAAP;AACaI,IAAAA,CAAC,CAACC,oBADf,EACuCD,CAAC,CAACE,YADzC;;;AAIgBF,IAAAA,CAAC,CAACG,WAJlB;;AAMD,GARgC;;AAUjCC,EAAAA,UAViC,sBAUtBJ,CAVsB,EAUZ;AACnB,WAAOJ,GAAP;AACeI,IAAAA,CAAC,CAACK,kBADjB;;AAGD,GAdgC;;AAgBjCC,EAAAA,MAhBiC,kBAgB1BN,CAhB0B,EAgBhB;AACf,WAAOJ,GAAP;AACYI,IAAAA,CAAC,CAACO,UADd;AAEgBP,IAAAA,CAAC,CAACQ,UAFlB;;AAID,GArBgC;;AAuBjCC,EAAAA,OAvBiC,qBAuBvB;AACR,WAAOb,GAAP;;;;;;;;AAQD,GAhCgC;;AAkCjCc,EAAAA,aAlCiC,2BAkCjB;AACd,WAAOd,GAAP;;;AAGD,GAtCgC;;AAwCjCe,EAAAA,aAxCiC,2BAwCjB;AACd,WAAOf,GAAP;;;AAGD,GA5CgC;;AA8CjCgB,EAAAA,cA9CiC,4BA8ChB;AACf,WAAOhB,GAAP;;;AAGD,GAlDgC;;AAoDjCiB,EAAAA,oBApDiC,gCAoDZb,CApDY,EAoDF;AAC7B,WAAOJ,GAAP;AACYI,IAAAA,CAAC,CAACc,wBADd;;AAGD,GAxDgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      padding: ${t.internalMenuPaddingY} ${t.menuPaddingX};\n      outline: none;\n      box-sizing: content-box;\n      background: ${t.bgSecondary};\n    `;\n  },\n\n  mobileRoot(t: Theme) {\n    return css`\n      padding: 0 ${t.mobileMenuPaddingX};\n    `;\n  },\n\n  shadow(t: Theme) {\n    return css`\n      border: ${t.menuBorder};\n      box-shadow: ${t.menuShadow};\n    `;\n  },\n\n  wrapper() {\n    return css`\n      position: relative;\n      z-index: 1;\n      width: 100%;\n      overflow: hidden;\n      line-height: 18px;\n      box-sizing: border-box;\n    `;\n  },\n\n  headerWrapper() {\n    return css`\n      top: -5px;\n    `;\n  },\n\n  footerWrapper() {\n    return css`\n      bottom: -5px;\n    `;\n  },\n\n  contentWrapper() {\n    return css`\n      padding: 6px 18px 7px 8px;\n    `;\n  },\n\n  menuSeparatorWrapper(t: Theme) {\n    return css`\n      height: ${t.menuSeparatorBorderWidth};\n    `;\n  },\n});\n"]}

package/internal/InternalMenu/InternalMenu.styles.d.ts

@@ -1,8 +1,11 @@
-export declare const jsStyles: {
-    root(t: Readonly<typeof import("../themes/DefaultTheme").DefaultTheme>): string;
-    shadow(): string;
-    header(): string;
-    footer(): string;
-    fixedHeader(): string;
-    fixedFooter(): string;
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    root(t: Theme): string;
+    mobileRoot(t: Theme): string;
+    shadow(t: Theme): string;
+    wrapper(): string;
+    headerWrapper(): string;
+    footerWrapper(): string;
+    contentWrapper(): string;
+    menuSeparatorWrapper(t: Theme): string;
 };

package/internal/InternalMenu/addIconPaddingIfPartOfMenu/addIconPaddingIfPartOfMenu.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { isMenuItem } from "../../../components/MenuItem";
+import { isMenuHeader } from "../../../components/MenuHeader";
+export var addIconPaddingIfPartOfMenu = function addIconPaddingIfPartOfMenu(child, enableIconPadding) {
+  var isPartOfMenu = isMenuItem(child) || isMenuHeader(child);
+
+  if (enableIconPadding && isPartOfMenu) {
+    return /*#__PURE__*/React.cloneElement(child, {
+      _enableIconPadding: true
+    });
+  }
+
+  return child;
+};

package/internal/InternalMenu/addIconPaddingIfPartOfMenu/addIconPaddingIfPartOfMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["addIconPaddingIfPartOfMenu.ts"],"names":["React","isMenuItem","isMenuHeader","addIconPaddingIfPartOfMenu","child","enableIconPadding","isPartOfMenu","cloneElement","_enableIconPadding"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,UAAT,QAA2B,2BAA3B;AACA,SAASC,YAAT,QAA6B,6BAA7B;;AAEA,OAAO,IAAMC,0BAA0B,GAAG,SAA7BA,0BAA6B,CAACC,KAAD,EAAyBC,iBAAzB,EAAwD;AAChG,MAAMC,YAAY,GAAGL,UAAU,CAACG,KAAD,CAAV,IAAqBF,YAAY,CAACE,KAAD,CAAtD;;AAEA,MAAIC,iBAAiB,IAAIC,YAAzB,EAAuC;AACrC,wBAAON,KAAK,CAACO,YAAN,CAAmBH,KAAnB,EAA0B;AAC/BI,MAAAA,kBAAkB,EAAE,IADW,EAA1B,CAAP;;AAGD;;AAED,SAAOJ,KAAP;AACD,CAVM","sourcesContent":["import React from 'react';\n\nimport { isMenuItem } from '../../components/MenuItem';\nimport { isMenuHeader } from '../../components/MenuHeader';\n\nexport const addIconPaddingIfPartOfMenu = (child: React.ReactNode, enableIconPadding: boolean) => {\n  const isPartOfMenu = isMenuItem(child) || isMenuHeader(child);\n\n  if (enableIconPadding && isPartOfMenu) {\n    return React.cloneElement(child, {\n      _enableIconPadding: true,\n    });\n  }\n\n  return child;\n};\n"]}

package/internal/InternalMenu/addIconPaddingIfPartOfMenu/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/InternalMenu/addIconPaddingIfPartOfMenu.js",
+  "module": "addIconPaddingIfPartOfMenu",
+  "types": "../addIconPaddingIfPartOfMenu.d.ts",
+  "sideEffects": false
+}

package/internal/InternalMenu/addIconPaddingIfPartOfMenu.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const addIconPaddingIfPartOfMenu: (child: React.ReactNode, enableIconPadding: boolean) => {} | null | undefined;

package/internal/InternalMenu/index/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAd","sourcesContent":["export * from './InternalMenu';\r\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAd","sourcesContent":["export * from './InternalMenu';\n"]}

package/internal/InternalMenu/isActiveElement/isActiveElement.js.map

@@ -1 +1 @@
-{"version":3,"sources":["isActiveElement.tsx"],"names":["isMenuItem","isActiveElement","element","props","disabled"],"mappings":";;AAEA,SAAkCA,UAAlC,QAAoD,2BAApD;;AAEA,OAAO,SAASC,eAAT,CAAyBC,OAAzB,EAAmG;AACxG,SAAOF,UAAU,CAACE,OAAD,CAAV,IAAuB,CAACA,OAAO,CAACC,KAAR,CAAcC,QAA7C;AACD","sourcesContent":["import React from 'react';\r\n\r\nimport { MenuItem, MenuItemProps, isMenuItem } from '../../components/MenuItem';\r\n\r\nexport function isActiveElement(element: any): element is React.ComponentElement<MenuItemProps, MenuItem> {\r\n  return isMenuItem(element) && !element.props.disabled;\r\n}\r\n"]}
+{"version":3,"sources":["isActiveElement.tsx"],"names":["isMenuItem","isActiveElement","element","props","disabled"],"mappings":";;AAEA,SAAkCA,UAAlC,QAAoD,2BAApD;;AAEA,OAAO,SAASC,eAAT,CAAyBC,OAAzB,EAAmG;AACxG,SAAOF,UAAU,CAACE,OAAD,CAAV,IAAuB,CAACA,OAAO,CAACC,KAAR,CAAcC,QAA7C;AACD","sourcesContent":["import React from 'react';\n\nimport { MenuItem, MenuItemProps, isMenuItem } from '../../components/MenuItem';\n\nexport function isActiveElement(element: any): element is React.ComponentElement<MenuItemProps, MenuItem> {\n  return isMenuItem(element) && !element.props.disabled;\n}\n"]}

package/internal/InternalMenu/isIconPaddingEnabled/isIconPaddingEnabled.js

@@ -0,0 +1,6 @@
+import React from 'react';
+export var isIconPaddingEnabled = function isIconPaddingEnabled(children, preventIconsOffset) {
+  return Boolean(!preventIconsOffset && React.Children.toArray(children).some(function (x) {
+    return /*#__PURE__*/React.isValidElement(x) && x.props.icon;
+  }));
+};

package/internal/InternalMenu/isIconPaddingEnabled/isIconPaddingEnabled.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["isIconPaddingEnabled.ts"],"names":["React","isIconPaddingEnabled","children","preventIconsOffset","Boolean","Children","toArray","some","x","isValidElement","props","icon"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;;;AAIA,OAAO,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB;AAClCC,QADkC;AAElCC,kBAFkC;;AAIlCC,IAAAA,OAAO,CAAC,CAACD,kBAAD,IAAuBH,KAAK,CAACK,QAAN,CAAeC,OAAf,CAAuBJ,QAAvB,EAAiCK,IAAjC,CAAsC,UAACC,CAAD,UAAO,aAAAR,KAAK,CAACS,cAAN,CAAqBD,CAArB,KAA2BA,CAAC,CAACE,KAAF,CAAQC,IAA1C,EAAtC,CAAxB,CAJ2B,GAA7B","sourcesContent":["import React from 'react';\n\nimport { InternalMenuProps } from './InternalMenu';\n\nexport const isIconPaddingEnabled = (\n  children: InternalMenuProps['children'],\n  preventIconsOffset: InternalMenuProps['preventIconsOffset'],\n) =>\n  Boolean(!preventIconsOffset && React.Children.toArray(children).some((x) => React.isValidElement(x) && x.props.icon));\n"]}

package/internal/InternalMenu/isIconPaddingEnabled/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/InternalMenu/isIconPaddingEnabled.js",
+  "module": "isIconPaddingEnabled",
+  "types": "../isIconPaddingEnabled.d.ts",
+  "sideEffects": false
+}

package/internal/InternalMenu/isIconPaddingEnabled.d.ts

@@ -0,0 +1,2 @@
+import { InternalMenuProps } from './InternalMenu';
+export declare const isIconPaddingEnabled: (children: InternalMenuProps['children'], preventIconsOffset: InternalMenuProps['preventIconsOffset']) => boolean;

package/internal/MaskCharLowLine/MaskCharLowLine/MaskCharLowLine.js

@@ -1,16 +1,16 @@
 import React from 'react';
-import { jsStyles } from "../MaskCharLowLine.styles";
-/**
- * FIGURE SPACE
- *
- * space equal to tabular width of a font this is equivalent to the digit width of fonts with fixed-width digits
- *
- * @see http://www.fileformat.info/info/unicode/char/2007/index.htm
+import { styles } from "../MaskCharLowLine.styles";
+/**
+ * FIGURE SPACE
+ *
+ * space equal to tabular width of a font this is equivalent to the digit width of fonts with fixed-width digits
+ *
+ * @see http://www.fileformat.info/info/unicode/char/2007/index.htm
  */
 
 export var MASK_CHAR_EXEMPLAR = String.fromCharCode(0x2007);
 export var MaskCharLowLine = function MaskCharLowLine() {
   return /*#__PURE__*/React.createElement("span", {
-    className: jsStyles.root()
+    className: styles.root()
   }, MASK_CHAR_EXEMPLAR);
 };

package/internal/MaskCharLowLine/MaskCharLowLine/MaskCharLowLine.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MaskCharLowLine.tsx"],"names":["React","jsStyles","MASK_CHAR_EXEMPLAR","String","fromCharCode","MaskCharLowLine","root"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,QAAT,QAAyB,0BAAzB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,kBAAkB,GAAGC,MAAM,CAACC,YAAP,CAAoB,MAApB,CAA3B;;AAEP,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,wBAAM,8BAAM,SAAS,EAAEJ,QAAQ,CAACK,IAAT,EAAjB,IAAmCJ,kBAAnC,CAAN,EAAxB","sourcesContent":["import React from 'react';\r\n\r\nimport { jsStyles } from './MaskCharLowLine.styles';\r\n\r\n/**\r\n * FIGURE SPACE\r\n *\r\n * space equal to tabular width of a font this is equivalent to the digit width of fonts with fixed-width digits\r\n *\r\n * @see http://www.fileformat.info/info/unicode/char/2007/index.htm\r\n */\r\nexport const MASK_CHAR_EXEMPLAR = String.fromCharCode(0x2007);\r\n\r\nexport const MaskCharLowLine = () => <span className={jsStyles.root()}>{MASK_CHAR_EXEMPLAR}</span>;\r\n"]}
+{"version":3,"sources":["MaskCharLowLine.tsx"],"names":["React","styles","MASK_CHAR_EXEMPLAR","String","fromCharCode","MaskCharLowLine","root"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,MAAT,QAAuB,0BAAvB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,kBAAkB,GAAGC,MAAM,CAACC,YAAP,CAAoB,MAApB,CAA3B;;AAEP,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,wBAAM,8BAAM,SAAS,EAAEJ,MAAM,CAACK,IAAP,EAAjB,IAAiCJ,kBAAjC,CAAN,EAAxB","sourcesContent":["import React from 'react';\n\nimport { styles } from './MaskCharLowLine.styles';\n\n/**\n * FIGURE SPACE\n *\n * space equal to tabular width of a font this is equivalent to the digit width of fonts with fixed-width digits\n *\n * @see http://www.fileformat.info/info/unicode/char/2007/index.htm\n */\nexport const MASK_CHAR_EXEMPLAR = String.fromCharCode(0x2007);\n\nexport const MaskCharLowLine = () => <span className={styles.root()}>{MASK_CHAR_EXEMPLAR}</span>;\n"]}

package/internal/MaskCharLowLine/MaskCharLowLine.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * FIGURE SPACE
  *

package/internal/MaskCharLowLine/MaskCharLowLine.styles/MaskCharLowLine.styles.js

@@ -1,19 +1,10 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n      position: relative;\n\n      &:after {\n        content: '';\n        position: absolute;\n        width: calc(100% - 0.1em);\n        height: 1px;\n        left: 0.05em;\n        bottom: 0.11em;\n        border-bottom: solid 0.05em;\n      }\n    "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-var styles = {
+export var styles = memoizeStyle({
   root: function root() {
-    return css(_templateObject());
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      position: relative;\n\n      &:after {\n        content: '';\n        position: absolute;\n        width: calc(100% - 0.1em);\n        height: 1px;\n        left: 0.05em;\n        bottom: 0.11em;\n        border-bottom: solid 0.05em;\n      }\n    "])));
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

package/internal/MaskCharLowLine/MaskCharLowLine.styles/MaskCharLowLine.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MaskCharLowLine.styles.ts"],"names":["css","memoizeStyle","styles","root","jsStyles"],"mappings":"kfAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,kBACN;AACL,WAAOH,GAAP;;;;;;;;;;;;;AAaD,GAfY,EAAf;;;AAkBA,OAAO,IAAMI,QAAQ,GAAGH,YAAY,CAACC,MAAD,CAA7B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\n\r\nconst styles = {\r\n  root() {\r\n    return css`\r\n      position: relative;\r\n\r\n      &:after {\r\n        content: '';\r\n        position: absolute;\r\n        width: calc(100% - 0.1em);\r\n        height: 1px;\r\n        left: 0.05em;\r\n        bottom: 0.11em;\r\n        border-bottom: solid 0.05em;\r\n      }\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["MaskCharLowLine.styles.ts"],"names":["css","memoizeStyle","styles","root"],"mappings":"oHAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,kBAC1B;AACL,WAAOH,GAAP;;;;;;;;;;;;;AAaD,GAfgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      position: relative;\n\n      &:after {\n        content: '';\n        position: absolute;\n        width: calc(100% - 0.1em);\n        height: 1px;\n        left: 0.05em;\n        bottom: 0.11em;\n        border-bottom: solid 0.05em;\n      }\n    `;\n  },\n});\n"]}

package/internal/MaskCharLowLine/MaskCharLowLine.styles.d.ts

@@ -1,3 +1,3 @@
-export declare const jsStyles: {
+export declare const styles: {
     root(): string;
 };

package/internal/MaskCharLowLine/index/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,mBAAd","sourcesContent":["export * from './MaskCharLowLine';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,mBAAd","sourcesContent":["export * from './MaskCharLowLine';\n"]}

package/internal/MaskedInputElement/MaskedInputElement/MaskedInputElement.js

@@ -0,0 +1,206 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+var _excluded = ["mask", "maskChar", "formatChars", "alwaysShowMask", "maxLength", "onUnexpectedInput", "defaultValue", "style"];
+import React, { useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { IMaskInput, IMask } from 'react-imask';
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { MaskCharLowLine } from "../../MaskCharLowLine";
+import { cx } from "../../../lib/theming/Emotion";
+import { forwardRefAndName } from "../../../lib/forwardRefAndName";
+import { styles } from "../MaskedInputElement.styles";
+import { getCurrentValue, getDefinitions, getFocusPrefix, getMaskChar } from "../MaskedInputElement.helpers";
+export var MaskedInputElementDataTids = {
+  root: 'MaskedInput__root'
+};
+export var MaskedInputElement = forwardRefAndName('MaskedInputElement', function MaskedInputElement(props, ref) {
+  var _useState = useState(function () {
+    var value = getValue(props);
+    return {
+      value: value,
+      originValue: value
+    };
+  }),
+      values = _useState[0],
+      setValues = _useState[1];
+
+  var value = values.value,
+      originValue = values.originValue;
+
+  var _useState2 = useState(''),
+      emptyValue = _useState2[0],
+      setEmptyValue = _useState2[1];
+
+  var _useState3 = useState(false),
+      focused = _useState3[0],
+      setFocused = _useState3[1];
+
+  var inputRef = useRef(null);
+  var rootNodeRef = React.useRef(null);
+  var theme = useContext(ThemeContext);
+  var expectedChangesRef = useRef(false);
+  var isFirstRender = useRef(true);
+  useImperativeHandle(ref, function () {
+    return {
+      input: inputRef.current,
+      getRootNode: function getRootNode() {
+        return rootNodeRef.current;
+      }
+    };
+  }, []);
+  useEffect(function () {
+    setEmptyValue(getEmptyValue(props.mask, props.maskChar, props.formatChars));
+  }, [props.mask, props.maskChar]);
+  useEffect(function () {
+    if (isFirstRender.current) {
+      return;
+    }
+
+    var value = props.value ? props.value.toString() : '';
+    setValues(function (values) {
+      return _extends({}, values, {
+        value: value
+      });
+    });
+  }, [props.value]);
+  useEffect(function () {
+    isFirstRender.current = false;
+  }, []);
+
+  var mask = props.mask,
+      maskChar = props.maskChar,
+      formatChars = props.formatChars,
+      alwaysShowMask = props.alwaysShowMask,
+      maxLength = props.maxLength,
+      onUnexpectedInput = props.onUnexpectedInput,
+      defaultValue = props.defaultValue,
+      style = props.style,
+      inputProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var leftClass = (style == null ? void 0 : style.textAlign) !== 'right' && styles.inputMaskLeft();
+
+  var _getCurrentValue = getCurrentValue({
+    value: value,
+    originValue: originValue,
+    emptyValue: emptyValue
+  }, focused, maskChar),
+      currentValue = _getCurrentValue[0],
+      left = _getCurrentValue[1],
+      right = _getCurrentValue[2];
+  /* В rightHelper не DEFAULT_MASK_CHAR, а специальная логика для обработки подчркивания('_').
+   * Не менять на DEFAULT_MASK_CHAR
+   */
+
+
+  var rightHelper = right.split('').map(function (_char, i) {
+    return _char === '_' ? /*#__PURE__*/React.createElement(MaskCharLowLine, {
+      key: i
+    }) : _char;
+  });
+  var leftHelper = (style == null ? void 0 : style.textAlign) !== 'right' && /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'transparent'
+    }
+  }, left);
+  var isMaskVisible = alwaysShowMask || focused;
+  return /*#__PURE__*/React.createElement("span", {
+    "data-tid": MaskedInputElementDataTids.root,
+    ref: rootNodeRef,
+    className: styles.container(),
+    "x-ms-format-detection": "none"
+  }, /*#__PURE__*/React.createElement(IMaskInput, _extends({}, inputProps, {
+    mask: mask,
+    definitions: getDefinitions(formatChars),
+    eager: true,
+    overwrite: 'shift',
+    onAccept: handleAccept,
+    onInput: handleInput,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    value: currentValue,
+    inputRef: inputRef,
+    style: _extends({}, style)
+  })), isMaskVisible && /*#__PURE__*/React.createElement("span", {
+    className: cx(styles.inputMask(theme), leftClass)
+  }, leftHelper, rightHelper));
+
+  function getValue(props) {
+    var _ref, _props$value;
+
+    return ((_ref = (_props$value = props.value) != null ? _props$value : props.defaultValue) != null ? _ref : '').toString();
+  }
+  /** В imask вызывается только когда значение с маской меняется*/
+
+
+  function handleAccept(value) {
+    expectedChangesRef.current = true; // Если разделить на 2 setState - между первым и вторым происходит рендер и иногда символы "съедаются"
+
+    setValues({
+      value: value,
+      originValue: value
+    });
+    setTimeout(function () {
+      /** При вводе с клавиатуры срабатывает handleAccept, за ним handleInput
+       * expectedChanges - нужен чтобы сообщить из handleAccept в handleInput, что значение с маской изменилось.
+       * Если маска не изменилась и сработал handleInput, вызываем handleUnexpectedInput. Ввели значение не по маске.
+       * setTimeout нужен чтобы сбросить expectedChanges, например, если изменилось значение в пропах.
+       * Маска изменится, вызовется handleAccept, но не handleInput
+       */
+      expectedChangesRef.current = false;
+    });
+  }
+  /** Отслеживаем неправильные нажатия,
+   * handleAccept не вызывается когда значение с маской не меняется, а handleInput вызывается
+   * Сначала вызывается handleAccept, затем handleInput
+   * */
+
+
+  function handleInput(e) {
+    var value = e.target.value;
+
+    if (!expectedChangesRef.current && value === originValue) {
+      handleUnexpectedInput();
+    }
+
+    expectedChangesRef.current = false;
+  }
+
+  function handleFocus(event) {
+    setFocused(true);
+    expectedChangesRef.current = false;
+
+    if (props.onFocus) {
+      props.onFocus(event);
+    }
+  }
+
+  function handleBlur(event) {
+    if (value === getFocusPrefix(emptyValue, maskChar)) {
+      setValues({
+        value: '',
+        originValue: ''
+      });
+    }
+
+    setFocused(false);
+
+    if (props.onBlur) {
+      props.onBlur(event);
+    }
+  }
+
+  function handleUnexpectedInput() {
+    if (props.onUnexpectedInput) {
+      props.onUnexpectedInput(value);
+    }
+  }
+
+  function getEmptyValue(mask, maskChar, formatChars) {
+    var maskPattern = IMask.createMask({
+      mask: mask,
+      definitions: getDefinitions(formatChars),
+      lazy: false,
+      placeholderChar: getMaskChar(maskChar)
+    });
+    return maskPattern.appendTail('').inserted;
+  }
+});

package/internal/MaskedInputElement/MaskedInputElement/MaskedInputElement.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MaskedInputElement.tsx"],"names":["React","useContext","useEffect","useImperativeHandle","useRef","useState","IMaskInput","IMask","ThemeContext","MaskCharLowLine","cx","forwardRefAndName","styles","getCurrentValue","getDefinitions","getFocusPrefix","getMaskChar","MaskedInputElementDataTids","root","MaskedInputElement","props","ref","value","getValue","originValue","values","setValues","emptyValue","setEmptyValue","focused","setFocused","inputRef","rootNodeRef","theme","expectedChangesRef","isFirstRender","input","current","getRootNode","getEmptyValue","mask","maskChar","formatChars","toString","alwaysShowMask","maxLength","onUnexpectedInput","defaultValue","style","inputProps","leftClass","textAlign","inputMaskLeft","currentValue","left","right","rightHelper","split","map","_char","i","leftHelper","color","isMaskVisible","container","handleAccept","handleInput","handleFocus","handleBlur","inputMask","setTimeout","e","target","handleUnexpectedInput","event","onFocus","onBlur","maskPattern","createMask","definitions","lazy","placeholderChar","appendTail","inserted"],"mappings":"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","sourcesContent":["import React, { ForwardedRef, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport { IMaskInput, IMask } from 'react-imask';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { MaskCharLowLine } from '../MaskCharLowLine';\nimport { cx } from '../../lib/theming/Emotion';\nimport { InputElement, InputElementProps } from '../../components/Input';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\n\nimport { styles } from './MaskedInputElement.styles';\nimport { getCurrentValue, getDefinitions, getFocusPrefix, getMaskChar } from './MaskedInputElement.helpers';\n\nexport interface MaskedInputElementProps extends InputElementProps {\n  mask: string;\n  maskChar?: string | null;\n  formatChars?: { [key: string]: string };\n  alwaysShowMask?: boolean;\n  onUnexpectedInput: (value: string) => void;\n}\n\nexport const MaskedInputElementDataTids = {\n  root: 'MaskedInput__root',\n} as const;\n\nexport const MaskedInputElement = forwardRefAndName(\n  'MaskedInputElement',\n  function MaskedInputElement(props: MaskedInputElementProps, ref: ForwardedRef<InputElement>) {\n    const [values, setValues] = useState<{ value: string; originValue: string }>(() => {\n      const value = getValue(props);\n      return { value, originValue: value };\n    });\n    const { value, originValue } = values;\n\n    const [emptyValue, setEmptyValue] = useState('');\n    const [focused, setFocused] = useState(false);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const rootNodeRef = React.useRef<HTMLDivElement>(null);\n    const theme = useContext(ThemeContext);\n    const expectedChangesRef = useRef(false);\n    const isFirstRender = useRef(true);\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        input: inputRef.current,\n        getRootNode: () => rootNodeRef.current,\n      }),\n      [],\n    );\n\n    useEffect(() => {\n      setEmptyValue(getEmptyValue(props.mask, props.maskChar, props.formatChars));\n    }, [props.mask, props.maskChar]);\n\n    useEffect(() => {\n      if (isFirstRender.current) {\n        return;\n      }\n\n      const value = props.value ? props.value.toString() : '';\n      setValues((values) => ({ ...values, value }));\n    }, [props.value]);\n\n    useEffect(() => {\n      isFirstRender.current = false;\n    }, []);\n\n    const {\n      mask,\n      maskChar,\n      formatChars,\n      alwaysShowMask,\n      maxLength,\n      onUnexpectedInput,\n      defaultValue,\n      style,\n      ...inputProps\n    } = props;\n\n    const leftClass = style?.textAlign !== 'right' && styles.inputMaskLeft();\n    const [currentValue, left, right] = getCurrentValue({ value, originValue, emptyValue }, focused, maskChar);\n\n    /* В rightHelper не DEFAULT_MASK_CHAR, а специальная логика для обработки подчркивания('_').\n     * Не менять на DEFAULT_MASK_CHAR\n     */\n    const rightHelper = right.split('').map((_char, i) => (_char === '_' ? <MaskCharLowLine key={i} /> : _char));\n    const leftHelper = style?.textAlign !== 'right' && <span style={{ color: 'transparent' }}>{left}</span>;\n    const isMaskVisible = alwaysShowMask || focused;\n\n    return (\n      <span\n        data-tid={MaskedInputElementDataTids.root}\n        ref={rootNodeRef}\n        className={styles.container()}\n        x-ms-format-detection=\"none\"\n      >\n        <IMaskInput\n          {...inputProps}\n          mask={mask}\n          definitions={getDefinitions(formatChars)}\n          eager\n          overwrite={'shift'}\n          onAccept={handleAccept}\n          onInput={handleInput}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          value={currentValue}\n          inputRef={inputRef}\n          style={{ ...style }}\n        />\n        {isMaskVisible && (\n          <span className={cx(styles.inputMask(theme), leftClass)}>\n            {leftHelper}\n            {rightHelper}\n          </span>\n        )}\n      </span>\n    );\n\n    function getValue(props: MaskedInputElementProps): string {\n      return (props.value ?? props.defaultValue ?? '').toString();\n    }\n\n    /** В imask вызывается только когда значение с маской меняется*/\n    function handleAccept(value: string) {\n      expectedChangesRef.current = true;\n      // Если разделить на 2 setState - между первым и вторым происходит рендер и иногда символы \"съедаются\"\n      setValues({ value, originValue: value });\n\n      setTimeout(() => {\n        /** При вводе с клавиатуры срабатывает handleAccept, за ним handleInput\n         * expectedChanges - нужен чтобы сообщить из handleAccept в handleInput, что значение с маской изменилось.\n         * Если маска не изменилась и сработал handleInput, вызываем handleUnexpectedInput. Ввели значение не по маске.\n         * setTimeout нужен чтобы сбросить expectedChanges, например, если изменилось значение в пропах.\n         * Маска изменится, вызовется handleAccept, но не handleInput\n         */\n        expectedChangesRef.current = false;\n      });\n    }\n\n    /** Отслеживаем неправильные нажатия,\n     * handleAccept не вызывается когда значение с маской не меняется, а handleInput вызывается\n     * Сначала вызывается handleAccept, затем handleInput\n     * */\n    function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n      const value = e.target.value;\n\n      if (!expectedChangesRef.current && value === originValue) {\n        handleUnexpectedInput();\n      }\n\n      expectedChangesRef.current = false;\n    }\n\n    function handleFocus(event: React.FocusEvent<HTMLInputElement>) {\n      setFocused(true);\n\n      expectedChangesRef.current = false;\n\n      if (props.onFocus) {\n        props.onFocus(event);\n      }\n    }\n\n    function handleBlur(event: React.FocusEvent<HTMLInputElement>) {\n      if (value === getFocusPrefix(emptyValue, maskChar)) {\n        setValues({ value: '', originValue: '' });\n      }\n\n      setFocused(false);\n\n      if (props.onBlur) {\n        props.onBlur(event);\n      }\n    }\n\n    function handleUnexpectedInput() {\n      if (props.onUnexpectedInput) {\n        props.onUnexpectedInput(value);\n      }\n    }\n\n    function getEmptyValue(\n      mask: MaskedInputElementProps['mask'],\n      maskChar: MaskedInputElementProps['maskChar'],\n      formatChars: MaskedInputElementProps['formatChars'],\n    ): string {\n      const maskPattern = IMask.createMask({\n        mask,\n        definitions: getDefinitions(formatChars),\n        lazy: false,\n        placeholderChar: getMaskChar(maskChar),\n      });\n      return maskPattern.appendTail('').inserted;\n    }\n  },\n);\n"]}

package/internal/MaskedInputElement/MaskedInputElement/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/MaskedInputElement/MaskedInputElement.js",
+  "module": "MaskedInputElement",
+  "types": "../MaskedInputElement.d.ts",
+  "sideEffects": false
+}

package/internal/MaskedInputElement/MaskedInputElement.d.ts

@@ -0,0 +1,14 @@
+import { InputElement, InputElementProps } from '../../components/Input';
+export interface MaskedInputElementProps extends InputElementProps {
+    mask: string;
+    maskChar?: string | null;
+    formatChars?: {
+        [key: string]: string;
+    };
+    alwaysShowMask?: boolean;
+    onUnexpectedInput: (value: string) => void;
+}
+export declare const MaskedInputElementDataTids: {
+    readonly root: "MaskedInput__root";
+};
+export declare const MaskedInputElement: import("../../lib/forwardRefAndName").ReactUIComponentWithRef<InputElement, MaskedInputElementProps> & Record<never, never>;