@skbkontur/react-ui 4.4.0 → 4.5.0

package/components/ResponsiveLayout/decorator.d.ts

@@ -3,7 +3,7 @@ import { ResponsiveLayoutFlags } from './types';
 export declare function responsiveLayout<T extends new (...args: any[]) => React.Component>(WrappedComp: T): {
     new (...args: any[]): {
         layout: ResponsiveLayoutFlags;
-        currentLayout: ResponsiveLayoutFlags;
+        currentLayout: ResponsiveLayoutFlags<import("./types").EmptyObject>;
         isMobileLayout: boolean;
         renderWithLayout: (currentLayout: ResponsiveLayoutFlags) => React.ReactNode;
         render(): JSX.Element;

package/components/ResponsiveLayout/types.d.ts

@@ -1,3 +1,11 @@
-export interface ResponsiveLayoutFlags {
+export declare type MediaQueriesType = Record<string, string>;
+export declare type EmptyObject = Record<never, never>;
+export interface ResponsiveLayoutOptions<MQ extends MediaQueriesType> {
+    customMediaQueries?: MQ;
+}
+export declare type ResponsiveLayoutFlags<T extends MediaQueriesType = EmptyObject> = {
+    [K in keyof T]?: boolean;
+} & ResponsiveLayoutFlagsInternal;
+export interface ResponsiveLayoutFlagsInternal {
     isMobile: boolean;
 }

package/components/ResponsiveLayout/useResponsiveLayout/useResponsiveLayout.js

@@ -1,32 +1,53 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { createRef, useCallback, useContext, useEffect, useState } from 'react';
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { addResponsiveLayoutListener, checkMatches } from "../ResponsiveLayoutEvents";
-export function useResponsiveLayout() {
-  var theme = useContext(ThemeContext);
+export function useResponsiveLayout(_temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+      customMediaQueries = _ref.customMediaQueries;
 
-  var getLayoutFromGlobal = function getLayoutFromGlobal() {
-    var isMobile = checkMatches(theme.mobileMediaQuery);
+  var theme = useContext(ThemeContext);
+  var allMediaQueries = Object.entries(_extends({
+    isMobile: theme.mobileMediaQuery
+  }, customMediaQueries)).map(function (_ref2) {
+    var key = _ref2[0],
+        value = _ref2[1];
     return {
-      isMobile: !!isMobile
+      flag: key,
+      query: value,
+      ref: /*#__PURE__*/createRef()
     };
+  });
+
+  var getLayoutFromGlobal = function getLayoutFromGlobal() {
+    return allMediaQueries.reduce(function (result, mediaQuery) {
+      var _Object$assign;
+
+      return Object.assign(result, (_Object$assign = {}, _Object$assign[mediaQuery.flag] = checkMatches(mediaQuery.query), _Object$assign));
+    }, {});
   };
 
   var _useState = useState(getLayoutFromGlobal()),
       state = _useState[0],
       setState = _useState[1];
 
-  var mobileListener = useRef(null);
   var prepareMediaQueries = useCallback(function () {
     if (!theme) {
       return;
     }
 
-    mobileListener.current = addResponsiveLayoutListener(theme.mobileMediaQuery, checkLayoutsMediaQueries); // Checking for SSR use case
+    allMediaQueries.forEach(function (mediaQuery) {
+      return mediaQuery.ref.current = addResponsiveLayoutListener(mediaQuery.query, checkLayoutsMediaQueries);
+    }); // Checking for SSR use case
 
     var globalLayout = getLayoutFromGlobal();
+    var hasChangedQuery = Object.entries(globalLayout).find(function (_ref3) {
+      var key = _ref3[0],
+          value = _ref3[1];
+      return state[key] !== value;
+    });
 
-    if (globalLayout.isMobile !== state.isMobile) {
+    if (hasChangedQuery) {
       setState(globalLayout);
     }
   }, [theme]);
@@ -35,20 +56,24 @@ export function useResponsiveLayout() {
       return;
     }
 
-    if (e.media === theme.mobileMediaQuery) {
-      setState(function (prevState) {
-        return _extends({}, prevState, {
-          isMobile: e.matches
+    allMediaQueries.forEach(function (mediaQuery) {
+      if (e.media === mediaQuery.query) {
+        setState(function (prevState) {
+          var _extends2;
+
+          return _extends({}, prevState, (_extends2 = {}, _extends2[mediaQuery.flag] = e.matches, _extends2));
         });
-      });
-    }
+      }
+    });
   }, [theme]);
   useEffect(function () {
     prepareMediaQueries();
     return function () {
-      var _mobileListener$curre;
+      allMediaQueries.forEach(function (mediaQuery) {
+        var _mediaQuery$ref$curre;
 
-      (_mobileListener$curre = mobileListener.current) == null ? void 0 : _mobileListener$curre.remove();
+        return (_mediaQuery$ref$curre = mediaQuery.ref.current) == null ? void 0 : _mediaQuery$ref$curre.remove();
+      });
     };
   }, []);
   return state;

package/components/ResponsiveLayout/useResponsiveLayout/useResponsiveLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useResponsiveLayout.ts"],"names":["useCallback","useContext","useEffect","useRef","useState","ThemeContext","addResponsiveLayoutListener","checkMatches","useResponsiveLayout","theme","getLayoutFromGlobal","isMobile","mobileMediaQuery","state","setState","mobileListener","prepareMediaQueries","current","checkLayoutsMediaQueries","globalLayout","e","media","prevState","matches","remove"],"mappings":"0DAAA,SAAgBA,WAAhB,EAA6BC,UAA7B,EAAyCC,SAAzC,EAAoDC,MAApD,EAA4DC,QAA5D,QAA4E,OAA5E;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;;;AAGA,SAASC,2BAAT,EAAsCC,YAAtC,QAA0D,0BAA1D;;AAEA,OAAO,SAASC,mBAAT,GAA+B;AACpC,MAAMC,KAAK,GAAGR,UAAU,CAACI,YAAD,CAAxB;;AAEA,MAAMK,mBAAmB,GAAG,SAAtBA,mBAAsB,GAA6B;AACvD,QAAMC,QAAQ,GAAGJ,YAAY,CAACE,KAAK,CAACG,gBAAP,CAA7B;;AAEA,WAAO,EAAED,QAAQ,EAAE,CAAC,CAACA,QAAd,EAAP;AACD,GAJD;;AAMA,kBAA0BP,QAAQ,CAACM,mBAAmB,EAApB,CAAlC,CAAOG,KAAP,gBAAcC,QAAd;;AAEA,MAAMC,cAAqE,GAAGZ,MAAM,CAAC,IAAD,CAApF;;AAEA,MAAMa,mBAAmB,GAAGhB,WAAW,CAAC,YAAM;AAC5C,QAAI,CAACS,KAAL,EAAY;AACV;AACD;;AAEDM,IAAAA,cAAc,CAACE,OAAf,GAAyBX,2BAA2B,CAACG,KAAK,CAACG,gBAAP,EAAyBM,wBAAzB,CAApD;;AAEA;AACA,QAAMC,YAAY,GAAGT,mBAAmB,EAAxC;;AAEA,QAAIS,YAAY,CAACR,QAAb,KAA0BE,KAAK,CAACF,QAApC,EAA8C;AAC5CG,MAAAA,QAAQ,CAACK,YAAD,CAAR;AACD;AACF,GAbsC,EAapC,CAACV,KAAD,CAboC,CAAvC;;AAeA,MAAMS,wBAAwB,GAAGlB,WAAW;AAC1C,YAACoB,CAAD,EAA4B;AAC1B,QAAI,CAACX,KAAL,EAAY;AACV;AACD;;AAED,QAAIW,CAAC,CAACC,KAAF,KAAYZ,KAAK,CAACG,gBAAtB,EAAwC;AACtCE,MAAAA,QAAQ,CAAC,UAACQ,SAAD;AACJA,QAAAA,SADI;AAEPX,UAAAA,QAAQ,EAAES,CAAC,CAACG,OAFL,KAAD,CAAR;;AAID;AACF,GAZyC;AAa1C,GAACd,KAAD,CAb0C,CAA5C;;;AAgBAP,EAAAA,SAAS,CAAC,YAAM;AACdc,IAAAA,mBAAmB;;AAEnB,WAAO,YAAM;AACX,+BAAAD,cAAc,CAACE,OAAf,2CAAwBO,MAAxB;AACD,KAFD;AAGD,GANQ,EAMN,EANM,CAAT;;AAQA,SAAOX,KAAP;AACD","sourcesContent":["import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { ResponsiveLayoutFlags } from './types';\nimport { addResponsiveLayoutListener, checkMatches } from './ResponsiveLayoutEvents';\n\nexport function useResponsiveLayout() {\n  const theme = useContext(ThemeContext);\n\n  const getLayoutFromGlobal = (): ResponsiveLayoutFlags => {\n    const isMobile = checkMatches(theme.mobileMediaQuery);\n\n    return { isMobile: !!isMobile };\n  };\n\n  const [state, setState] = useState(getLayoutFromGlobal());\n\n  const mobileListener: React.MutableRefObject<{ remove: () => void } | null> = useRef(null);\n\n  const prepareMediaQueries = useCallback(() => {\n    if (!theme) {\n      return;\n    }\n\n    mobileListener.current = addResponsiveLayoutListener(theme.mobileMediaQuery, checkLayoutsMediaQueries);\n\n    // Checking for SSR use case\n    const globalLayout = getLayoutFromGlobal();\n\n    if (globalLayout.isMobile !== state.isMobile) {\n      setState(globalLayout);\n    }\n  }, [theme]);\n\n  const checkLayoutsMediaQueries = useCallback(\n    (e: MediaQueryListEvent) => {\n      if (!theme) {\n        return;\n      }\n\n      if (e.media === theme.mobileMediaQuery) {\n        setState((prevState: ResponsiveLayoutFlags) => ({\n          ...prevState,\n          isMobile: e.matches,\n        }));\n      }\n    },\n    [theme],\n  );\n\n  useEffect(() => {\n    prepareMediaQueries();\n\n    return () => {\n      mobileListener.current?.remove();\n    };\n  }, []);\n\n  return state;\n}\n"]}
+{"version":3,"sources":["useResponsiveLayout.ts"],"names":["createRef","useCallback","useContext","useEffect","useState","ThemeContext","addResponsiveLayoutListener","checkMatches","useResponsiveLayout","customMediaQueries","theme","allMediaQueries","Object","entries","isMobile","mobileMediaQuery","map","key","value","flag","query","ref","getLayoutFromGlobal","reduce","result","mediaQuery","assign","state","setState","prepareMediaQueries","forEach","current","checkLayoutsMediaQueries","globalLayout","hasChangedQuery","find","e","media","prevState","matches","remove"],"mappings":"0DAAA,SAAgBA,SAAhB,EAA2BC,WAA3B,EAAwCC,UAAxC,EAAoDC,SAApD,EAA+DC,QAA/D,QAA+E,OAA/E;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;;;AAGA,SAASC,2BAAT,EAAsCC,YAAtC,QAA0D,0BAA1D;;AAEA,OAAO,SAASC,mBAAT;;AAE6B,+BAAJ,EAAI,SADlCC,kBACkC,QADlCA,kBACkC;AAClC,MAAMC,KAAK,GAAGR,UAAU,CAACG,YAAD,CAAxB;;AAEA,MAAMM,eAAe,GAAGC,MAAM,CAACC,OAAP;AACtBC,IAAAA,QAAQ,EAAEJ,KAAK,CAACK,gBADM;AAEnBN,EAAAA,kBAFmB;AAGrBO,EAAAA,GAHqB,CAGjB,sBAAEC,GAAF,YAAOC,KAAP,mBAAmB;AACxBC,MAAAA,IAAI,EAAEF,GADkB;AAExBG,MAAAA,KAAK,EAAEF,KAFiB;AAGxBG,MAAAA,GAAG,eAAErB,SAAS,EAHU,EAAnB,EAHiB,CAAxB;;;AASA,MAAMsB,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAgC;AAC1D,WAAOX,eAAe,CAACY,MAAhB;AACL,cAACC,MAAD,EAASC,UAAT,6BAAwBb,MAAM,CAACc,MAAP,CAAcF,MAAd,uCAAyBC,UAAU,CAACN,IAApC,IAA2CZ,YAAY,CAACkB,UAAU,CAACL,KAAZ,CAAvD,kBAAxB,EADK;AAEL,MAFK,CAAP;;AAID,GALD;;AAOA,kBAA0BhB,QAAQ,CAACkB,mBAAmB,EAApB,CAAlC,CAAOK,KAAP,gBAAcC,QAAd;;AAEA,MAAMC,mBAAmB,GAAG5B,WAAW,CAAC,YAAM;AAC5C,QAAI,CAACS,KAAL,EAAY;AACV;AACD;;AAEDC,IAAAA,eAAe,CAACmB,OAAhB;AACE,cAACL,UAAD;AACGA,QAAAA,UAAU,CAACJ,GAAX,CAAeU,OAAf,GAAyBzB,2BAA2B,CAACmB,UAAU,CAACL,KAAZ,EAAmBY,wBAAnB,CADvD,GADF;;;AAKA;AACA,QAAMC,YAAY,GAAGX,mBAAmB,EAAxC;AACA,QAAMY,eAAe,GAAGtB,MAAM,CAACC,OAAP,CAAeoB,YAAf,EAA6BE,IAA7B,CAAkC,sBAAElB,GAAF,YAAOC,KAAP,mBAAkBS,KAAK,CAACV,GAAD,CAAL,KAAeC,KAAjC,EAAlC,CAAxB;;AAEA,QAAIgB,eAAJ,EAAqB;AACnBN,MAAAA,QAAQ,CAACK,YAAD,CAAR;AACD;AACF,GAjBsC,EAiBpC,CAACvB,KAAD,CAjBoC,CAAvC;;AAmBA,MAAMsB,wBAAwB,GAAG/B,WAAW;AAC1C,YAACmC,CAAD,EAA4B;AAC1B,QAAI,CAAC1B,KAAL,EAAY;AACV;AACD;;AAEDC,IAAAA,eAAe,CAACmB,OAAhB,CAAwB,UAACL,UAAD,EAAgB;AACtC,UAAIW,CAAC,CAACC,KAAF,KAAYZ,UAAU,CAACL,KAA3B,EAAkC;AAChCQ,QAAAA,QAAQ,CAAC,UAACU,SAAD;AACJA,UAAAA,SADI;AAENb,UAAAA,UAAU,CAACN,IAFL,IAEYiB,CAAC,CAACG,OAFd,eAAD,CAAR;;AAID;AACF,KAPD;AAQD,GAdyC;AAe1C,GAAC7B,KAAD,CAf0C,CAA5C;;;AAkBAP,EAAAA,SAAS,CAAC,YAAM;AACd0B,IAAAA,mBAAmB;;AAEnB,WAAO,YAAM;AACXlB,MAAAA,eAAe,CAACmB,OAAhB,CAAwB,UAACL,UAAD,6DAAgBA,UAAU,CAACJ,GAAX,CAAeU,OAA/B,qBAAgB,sBAAwBS,MAAxB,EAAhB,EAAxB;AACD,KAFD;AAGD,GANQ,EAMN,EANM,CAAT;;AAQA,SAAOb,KAAP;AACD","sourcesContent":["import React, { createRef, useCallback, useContext, useEffect, useState } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { EmptyObject, MediaQueriesType, ResponsiveLayoutFlags, ResponsiveLayoutOptions } from './types';\nimport { addResponsiveLayoutListener, checkMatches } from './ResponsiveLayoutEvents';\n\nexport function useResponsiveLayout<T extends MediaQueriesType = EmptyObject>({\n  customMediaQueries,\n}: ResponsiveLayoutOptions<T> = {}) {\n  const theme = useContext(ThemeContext);\n\n  const allMediaQueries = Object.entries({\n    isMobile: theme.mobileMediaQuery,\n    ...customMediaQueries,\n  }).map(([key, value]) => ({\n    flag: key,\n    query: value,\n    ref: createRef() as React.MutableRefObject<{ remove: () => void } | null>,\n  }));\n\n  const getLayoutFromGlobal = (): ResponsiveLayoutFlags<T> => {\n    return allMediaQueries.reduce(\n      (result, mediaQuery) => Object.assign(result, { [mediaQuery.flag]: checkMatches(mediaQuery.query) }),\n      {},\n    ) as ResponsiveLayoutFlags<T>;\n  };\n\n  const [state, setState] = useState(getLayoutFromGlobal());\n\n  const prepareMediaQueries = useCallback(() => {\n    if (!theme) {\n      return;\n    }\n\n    allMediaQueries.forEach(\n      (mediaQuery) =>\n        (mediaQuery.ref.current = addResponsiveLayoutListener(mediaQuery.query, checkLayoutsMediaQueries)),\n    );\n\n    // Checking for SSR use case\n    const globalLayout = getLayoutFromGlobal();\n    const hasChangedQuery = Object.entries(globalLayout).find(([key, value]) => state[key] !== value);\n\n    if (hasChangedQuery) {\n      setState(globalLayout);\n    }\n  }, [theme]);\n\n  const checkLayoutsMediaQueries = useCallback(\n    (e: MediaQueryListEvent) => {\n      if (!theme) {\n        return;\n      }\n\n      allMediaQueries.forEach((mediaQuery) => {\n        if (e.media === mediaQuery.query) {\n          setState((prevState: ResponsiveLayoutFlags<T>) => ({\n            ...prevState,\n            [mediaQuery.flag]: e.matches,\n          }));\n        }\n      });\n    },\n    [theme],\n  );\n\n  useEffect(() => {\n    prepareMediaQueries();\n\n    return () => {\n      allMediaQueries.forEach((mediaQuery) => mediaQuery.ref.current?.remove());\n    };\n  }, []);\n\n  return state;\n}\n"]}

package/components/ResponsiveLayout/useResponsiveLayout.d.ts

@@ -1,2 +1,2 @@
-import { ResponsiveLayoutFlags } from './types';
-export declare function useResponsiveLayout(): ResponsiveLayoutFlags;
+import { EmptyObject, MediaQueriesType, ResponsiveLayoutFlags, ResponsiveLayoutOptions } from './types';
+export declare function useResponsiveLayout<T extends MediaQueriesType = EmptyObject>({ customMediaQueries, }?: ResponsiveLayoutOptions<T>): ResponsiveLayoutFlags<T>;

package/components/Token/Token.styles/Token.styles.js

@@ -13,7 +13,7 @@ export var styles = memoizeStyle({
     return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      align-items: center;\n      border-radius: ", ";\n      padding: ", " ", ";\n      line-height: ", ";\n      font-size: ", ";\n      margin: ", " ", ";\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    "])), t.tokenBorderRadius, t.tokenPaddingY, t.tokenPaddingX, t.tokenLineHeight, t.tokenFontSize, t.tokenMarginY, t.tokenMarginX);
   },
   disabled: function disabled(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", ";\n      margin: ", " ", ";\n      user-select: text;\n      cursor: text;\n      color: ", ";\n\n      .", " {\n        visibility: hidden;\n      }\n    "])), t.tokenPaddingYDisabled, t.tokenPaddingXDisabled, t.tokenMarginYDisabled, t.tokenMarginXDisabled, t.tokenTextColorDisabled, globalClasses.removeIcon);
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", ";\n      margin: ", " ", ";\n      user-select: text;\n      cursor: text;\n      color: ", ";\n      pointer-events: none;\n\n      .", " {\n        visibility: hidden;\n      }\n    "])), t.tokenPaddingYDisabled, t.tokenPaddingXDisabled, t.tokenMarginYDisabled, t.tokenMarginXDisabled, t.tokenTextColorDisabled, globalClasses.removeIcon);
   },
   text: function text(t) {
     return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      padding-bottom: ", ";\n    "])), t.tokenLegacyTextShift);

package/components/Token/Token.styles/Token.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Token.styles.ts"],"names":["css","memoizeStyle","prefix","ColorFunctions","globalClasses","removeIcon","styles","token","t","tokenBorderRadius","tokenPaddingY","tokenPaddingX","tokenLineHeight","tokenFontSize","tokenMarginY","tokenMarginX","disabled","tokenPaddingYDisabled","tokenPaddingXDisabled","tokenMarginYDisabled","tokenMarginXDisabled","tokenTextColorDisabled","text","tokenLegacyTextShift","tokenRemoveIconSize","tokenRemoveIconPaddingY","tokenRemoveIconPaddingX","tokenRemoveIconBoxSizing","tokenRemoveIconGap","colorStyles","name","color","tokenDefaultIdle","tokenDefaultActive","tokenGrayIdle","tokenGrayActive","tokenBlueIdle","tokenBlueActive","tokenGreenIdle","tokenGreenActive","tokenYellowIdle","tokenYellowActive","tokenRedIdle","tokenRedActive","tokenWhite","tokenBlack","reduce","colors","v","getVStyle","tokenOutlineWidth","tokenBorderColorError","tokenBorderColorWarning","contrast","tokenBorderWidth","darken","defaultDisabled","tokenDisabledBg","tokenShadowDisabled","defaultDisabledWarning","defaultDisabledError"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\n\nexport const globalClasses = prefix('token')({\n  removeIcon: 'remove-icon',\n});\n\nexport const styles = memoizeStyle({\n  token(t: Theme) {\n    return css`\n      display: inline-flex;\n      align-items: center;\n      border-radius: ${t.tokenBorderRadius};\n      padding: ${t.tokenPaddingY} ${t.tokenPaddingX};\n      line-height: ${t.tokenLineHeight};\n      font-size: ${t.tokenFontSize};\n      margin: ${t.tokenMarginY} ${t.tokenMarginX};\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      padding: ${t.tokenPaddingYDisabled} ${t.tokenPaddingXDisabled};\n      margin: ${t.tokenMarginYDisabled} ${t.tokenMarginXDisabled};\n      user-select: text;\n      cursor: text;\n      color: ${t.tokenTextColorDisabled};\n\n      .${globalClasses.removeIcon} {\n        visibility: hidden;\n      }\n    `;\n  },\n\n  text(t: Theme) {\n    return css`\n      display: inline-block;\n      padding-bottom: ${t.tokenLegacyTextShift};\n    `;\n  },\n\n  removeIcon(t: Theme) {\n    return css`\n      height: ${t.tokenRemoveIconSize};\n      width: ${t.tokenRemoveIconSize};\n      flex-shrink: 0;\n      padding: ${t.tokenRemoveIconPaddingY} ${t.tokenRemoveIconPaddingX};\n      box-sizing: ${t.tokenRemoveIconBoxSizing};\n      margin-left: ${t.tokenRemoveIconGap};\n      transition: none;\n      fill: currentColor;\n      opacity: 0.5;\n      line-height: 0;\n\n      &:hover {\n        opacity: 1;\n      }\n    `;\n  },\n});\n\ninterface TokenColors {\n  defaultIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  defaultActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  defaultDisabled: (t: Theme) => string;\n  defaultDisabledWarning: (t: Theme) => string;\n  defaultDisabledError: (t: Theme) => string;\n  grayIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  grayActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  blueIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  blueActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  greenIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  greenActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  yellowIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  yellowActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  redIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  redActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  white: (t: Theme, v: 'error' | 'warning' | null) => string;\n  black: (t: Theme, v: 'error' | 'warning' | null) => string;\n}\n\nexport const colorStyles = [\n  { name: 'defaultIdle', color: (t: Theme) => t.tokenDefaultIdle },\n  { name: 'defaultActive', color: (t: Theme) => t.tokenDefaultActive },\n  { name: 'grayIdle', color: (t: Theme) => t.tokenGrayIdle },\n  { name: 'grayActive', color: (t: Theme) => t.tokenGrayActive },\n  { name: 'blueIdle', color: (t: Theme) => t.tokenBlueIdle },\n  { name: 'blueActive', color: (t: Theme) => t.tokenBlueActive },\n  { name: 'greenIdle', color: (t: Theme) => t.tokenGreenIdle },\n  { name: 'greenActive', color: (t: Theme) => t.tokenGreenActive },\n  { name: 'yellowIdle', color: (t: Theme) => t.tokenYellowIdle },\n  { name: 'yellowActive', color: (t: Theme) => t.tokenYellowActive },\n  { name: 'redIdle', color: (t: Theme) => t.tokenRedIdle },\n  { name: 'redActive', color: (t: Theme) => t.tokenRedActive },\n  { name: 'white', color: (t: Theme) => t.tokenWhite },\n  { name: 'black', color: (t: Theme) => t.tokenBlack },\n].reduce(\n  (colors: TokenColors, { name, color }) => ({\n    ...colors,\n    [name](t: Theme, v: 'error' | 'warning') {\n      const getVStyle = () => {\n        if (v === 'error') {\n          return css`\n            box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${color(t)};\n          `;\n        } else if (v === 'warning') {\n          return css`\n            box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${color(t)};\n          `;\n        }\n\n        return '';\n      };\n\n      return css`\n        background-color: ${color(t)};\n        color: ${ColorFunctions.contrast(color(t))};\n        box-shadow: 0 0 0 ${t.tokenBorderWidth} ${ColorFunctions.darken(color(t), '5%')}, inset 0 0 0 1px ${color(t)};\n\n        ${getVStyle()}\n\n        .${globalClasses.removeIcon}:hover {\n          color: ${ColorFunctions.contrast(color(t))};\n        }\n      `;\n    },\n  }),\n  {\n    defaultDisabled(t: Theme) {\n      return css`\n        background-color: ${t.tokenDisabledBg};\n        box-shadow: ${t.tokenShadowDisabled};\n      `;\n    },\n    defaultDisabledWarning(t: Theme) {\n      return css`\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${t.tokenDisabledBg};\n      `;\n    },\n    defaultDisabledError(t: Theme) {\n      return css`\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${t.tokenDisabledBg};\n      `;\n    },\n  } as TokenColors,\n);\n"]}
+{"version":3,"sources":["Token.styles.ts"],"names":["css","memoizeStyle","prefix","ColorFunctions","globalClasses","removeIcon","styles","token","t","tokenBorderRadius","tokenPaddingY","tokenPaddingX","tokenLineHeight","tokenFontSize","tokenMarginY","tokenMarginX","disabled","tokenPaddingYDisabled","tokenPaddingXDisabled","tokenMarginYDisabled","tokenMarginXDisabled","tokenTextColorDisabled","text","tokenLegacyTextShift","tokenRemoveIconSize","tokenRemoveIconPaddingY","tokenRemoveIconPaddingX","tokenRemoveIconBoxSizing","tokenRemoveIconGap","colorStyles","name","color","tokenDefaultIdle","tokenDefaultActive","tokenGrayIdle","tokenGrayActive","tokenBlueIdle","tokenBlueActive","tokenGreenIdle","tokenGreenActive","tokenYellowIdle","tokenYellowActive","tokenRedIdle","tokenRedActive","tokenWhite","tokenBlack","reduce","colors","v","getVStyle","tokenOutlineWidth","tokenBorderColorError","tokenBorderColorWarning","contrast","tokenBorderWidth","darken","defaultDisabled","tokenDisabledBg","tokenShadowDisabled","defaultDisabledWarning","defaultDisabledError"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\n\nexport const globalClasses = prefix('token')({\n  removeIcon: 'remove-icon',\n});\n\nexport const styles = memoizeStyle({\n  token(t: Theme) {\n    return css`\n      display: inline-flex;\n      align-items: center;\n      border-radius: ${t.tokenBorderRadius};\n      padding: ${t.tokenPaddingY} ${t.tokenPaddingX};\n      line-height: ${t.tokenLineHeight};\n      font-size: ${t.tokenFontSize};\n      margin: ${t.tokenMarginY} ${t.tokenMarginX};\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      padding: ${t.tokenPaddingYDisabled} ${t.tokenPaddingXDisabled};\n      margin: ${t.tokenMarginYDisabled} ${t.tokenMarginXDisabled};\n      user-select: text;\n      cursor: text;\n      color: ${t.tokenTextColorDisabled};\n      pointer-events: none;\n\n      .${globalClasses.removeIcon} {\n        visibility: hidden;\n      }\n    `;\n  },\n\n  text(t: Theme) {\n    return css`\n      display: inline-block;\n      padding-bottom: ${t.tokenLegacyTextShift};\n    `;\n  },\n\n  removeIcon(t: Theme) {\n    return css`\n      height: ${t.tokenRemoveIconSize};\n      width: ${t.tokenRemoveIconSize};\n      flex-shrink: 0;\n      padding: ${t.tokenRemoveIconPaddingY} ${t.tokenRemoveIconPaddingX};\n      box-sizing: ${t.tokenRemoveIconBoxSizing};\n      margin-left: ${t.tokenRemoveIconGap};\n      transition: none;\n      fill: currentColor;\n      opacity: 0.5;\n      line-height: 0;\n\n      &:hover {\n        opacity: 1;\n      }\n    `;\n  },\n});\n\ninterface TokenColors {\n  defaultIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  defaultActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  defaultDisabled: (t: Theme) => string;\n  defaultDisabledWarning: (t: Theme) => string;\n  defaultDisabledError: (t: Theme) => string;\n  grayIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  grayActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  blueIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  blueActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  greenIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  greenActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  yellowIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  yellowActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  redIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  redActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  white: (t: Theme, v: 'error' | 'warning' | null) => string;\n  black: (t: Theme, v: 'error' | 'warning' | null) => string;\n}\n\nexport const colorStyles = [\n  { name: 'defaultIdle', color: (t: Theme) => t.tokenDefaultIdle },\n  { name: 'defaultActive', color: (t: Theme) => t.tokenDefaultActive },\n  { name: 'grayIdle', color: (t: Theme) => t.tokenGrayIdle },\n  { name: 'grayActive', color: (t: Theme) => t.tokenGrayActive },\n  { name: 'blueIdle', color: (t: Theme) => t.tokenBlueIdle },\n  { name: 'blueActive', color: (t: Theme) => t.tokenBlueActive },\n  { name: 'greenIdle', color: (t: Theme) => t.tokenGreenIdle },\n  { name: 'greenActive', color: (t: Theme) => t.tokenGreenActive },\n  { name: 'yellowIdle', color: (t: Theme) => t.tokenYellowIdle },\n  { name: 'yellowActive', color: (t: Theme) => t.tokenYellowActive },\n  { name: 'redIdle', color: (t: Theme) => t.tokenRedIdle },\n  { name: 'redActive', color: (t: Theme) => t.tokenRedActive },\n  { name: 'white', color: (t: Theme) => t.tokenWhite },\n  { name: 'black', color: (t: Theme) => t.tokenBlack },\n].reduce(\n  (colors: TokenColors, { name, color }) => ({\n    ...colors,\n    [name](t: Theme, v: 'error' | 'warning') {\n      const getVStyle = () => {\n        if (v === 'error') {\n          return css`\n            box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${color(t)};\n          `;\n        } else if (v === 'warning') {\n          return css`\n            box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${color(t)};\n          `;\n        }\n\n        return '';\n      };\n\n      return css`\n        background-color: ${color(t)};\n        color: ${ColorFunctions.contrast(color(t))};\n        box-shadow: 0 0 0 ${t.tokenBorderWidth} ${ColorFunctions.darken(color(t), '5%')}, inset 0 0 0 1px ${color(t)};\n\n        ${getVStyle()}\n\n        .${globalClasses.removeIcon}:hover {\n          color: ${ColorFunctions.contrast(color(t))};\n        }\n      `;\n    },\n  }),\n  {\n    defaultDisabled(t: Theme) {\n      return css`\n        background-color: ${t.tokenDisabledBg};\n        box-shadow: ${t.tokenShadowDisabled};\n      `;\n    },\n    defaultDisabledWarning(t: Theme) {\n      return css`\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${t.tokenDisabledBg};\n      `;\n    },\n    defaultDisabledError(t: Theme) {\n      return css`\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${t.tokenDisabledBg};\n      `;\n    },\n  } as TokenColors,\n);\n"]}

package/components/TokenInput/TokenInput/TokenInput.js

@@ -131,6 +131,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     _this.tokensInputMenu = null;
     _this.textHelper = null;
     _this.wrapper = null;
+    _this.memoizedTokens = new Map();
 
     _this.hasValueInItems = function (items, value) {
       if (typeof value === 'string') {
@@ -466,6 +467,8 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         }
       }
 
+      var isRightmostTokenNotDisabled = !_this.isTokenDisabled(_this.getProps().selectedItems.length - 1);
+
       switch (true) {
         case isKeyEnter(e):
           if (_this.menuRef) {
@@ -495,7 +498,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
           break;
 
         case isKeyBackspace(e):
-          if (!_this.isEditingMode) {
+          if (!_this.isEditingMode && isRightmostTokenNotDisabled) {
             _this.moveFocusToLastToken();
           }
 
@@ -503,7 +506,16 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
 
         case isKeyArrowLeft(e):
           if (((_this$input4 = _this.input) == null ? void 0 : _this$input4.selectionStart) === 0) {
-            _this.moveFocusToLastToken();
+            var index = _this.getAvailableTokenIndex(_this.getProps().selectedItems.length);
+
+            var itemNew = _this.getProps().selectedItems[index];
+
+            if (itemNew) {
+              _this.dispatch({
+                type: 'SET_ACTIVE_TOKENS',
+                payload: [itemNew]
+              });
+            }
           }
 
           break;
@@ -535,7 +547,9 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         case isKeyBackspace(e):
         case isKeyDelete(e):
           {
-            if (!_this.isEditingMode) {
+            var indexOfActiveToken = _this.getProps().selectedItems.indexOf(_this.state.activeTokens[_this.state.activeTokens.length - 1]);
+
+            if (!_this.isEditingMode && !_this.isTokenDisabled(indexOfActiveToken)) {
               var itemsNew = selectedItems.filter(function (item) {
                 return !_this.hasValueInItems(_this.state.activeTokens, item);
               });
@@ -577,7 +591,9 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
 
           _this.dispatch({
             type: 'SET_ACTIVE_TOKENS',
-            payload: selectedItems
+            payload: selectedItems.filter(function (item) {
+              return !_this.isTokenDisabled(selectedItems.indexOf(item));
+            })
           });
 
           break;
@@ -591,9 +607,11 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
 
       var activeTokens = _this.state.activeTokens;
       var activeItemIndex = selectedItems.indexOf(activeTokens[0]);
-      var newItemIndex = activeItemIndex + (isKeyArrowLeft(e) ? -1 : +1);
+
+      var newItemIndex = _this.getAvailableTokenIndex(activeItemIndex, isKeyArrowLeft(e));
+
       var isLeftEdge = activeItemIndex === 0 && isKeyArrowLeft(e);
-      var isRightEdge = activeItemIndex === selectedItems.length - 1 && isKeyArrowRight(e);
+      var isRightEdge = newItemIndex === selectedItems.length && isKeyArrowRight(e);
 
       if (!e.shiftKey && activeTokens.length === 1) {
         _this.handleWrapperArrowsWithoutShift(isLeftEdge, isRightEdge, newItemIndex);
@@ -872,6 +890,8 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     };
 
     _this.renderToken = function (item) {
+      var _this$props$selectedI;
+
       var _this$props = _this.props,
           _this$props$renderTok = _this$props.renderToken,
           renderToken = _this$props$renderTok === void 0 ? defaultRenderToken : _this$props$renderTok,
@@ -900,18 +920,22 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       var handleTokenDoubleClick = function handleTokenDoubleClick(event) {
         event.stopPropagation();
 
-        if (!_this.isEditingMode) {
+        if (!_this.isEditingMode && !disabled) {
           _this.handleTokenEdit(item);
         }
       };
 
-      return renderToken(item, {
+      var renderedToken = renderToken(item, {
         isActive: isActive,
         onClick: handleTokenClick,
         onDoubleClick: handleTokenDoubleClick,
         onRemove: handleIconClick,
         disabled: disabled
       });
+
+      _this.memoizedTokens.set((_this$props$selectedI = _this.props.selectedItems) == null ? void 0 : _this$props$selectedI.indexOf(item), renderedToken);
+
+      return renderedToken;
     };
 
     _this.renderAddButton = function (value) {
@@ -937,6 +961,44 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       }, addButtonTitle, " ", value);
     };
 
+    _this.isTokenDisabled = function (itemIndex) {
+      var renderedToken;
+
+      if (_this.memoizedTokens.has(itemIndex)) {
+        renderedToken = _this.memoizedTokens.get(itemIndex);
+      } else if (itemIndex < 0 || itemIndex > _this.getProps().selectedItems.length - 1) {
+        return false;
+      } else {
+        renderedToken = _this.renderToken(_this.getProps().selectedItems[itemIndex]);
+      }
+
+      return renderedToken.props.disabled;
+    };
+
+    _this.getAvailableTokenIndex = function (startIndex, isDirectionLeft) {
+      if (isDirectionLeft === void 0) {
+        isDirectionLeft = true;
+      }
+
+      var _this$getProps7 = _this.getProps(),
+          selectedItems = _this$getProps7.selectedItems;
+
+      var step = isDirectionLeft ? -1 : +1;
+      var availableIndex = startIndex + step;
+
+      while (_this.isTokenDisabled(availableIndex)) {
+        availableIndex += step;
+
+        if (availableIndex === selectedItems.length) {
+          return availableIndex;
+        } else if (availableIndex === -1) {
+          return startIndex;
+        }
+      }
+
+      return availableIndex;
+    };
+
     return _this;
   }
 
@@ -965,6 +1027,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
 
     if (prevProps.selectedItems.length !== this.getProps().selectedItems.length) {
       LayoutEvents.emit();
+      this.memoizedTokens.clear();
     }
 
     if (!this.isCursorVisibleForState(prevState) && this.isCursorVisible) {
@@ -1024,14 +1087,14 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         renderTotalCount = _this$props2.renderTotalCount,
         totalCount = _this$props2.totalCount;
 
-    var _this$getProps7 = this.getProps(),
-        selectedItems = _this$getProps7.selectedItems,
-        width = _this$getProps7.width,
-        onMouseEnter = _this$getProps7.onMouseEnter,
-        onMouseLeave = _this$getProps7.onMouseLeave,
-        menuWidth = _this$getProps7.menuWidth,
-        menuAlign = _this$getProps7.menuAlign,
-        renderItem = _this$getProps7.renderItem;
+    var _this$getProps8 = this.getProps(),
+        selectedItems = _this$getProps8.selectedItems,
+        width = _this$getProps8.width,
+        onMouseEnter = _this$getProps8.onMouseEnter,
+        onMouseLeave = _this$getProps8.onMouseLeave,
+        menuWidth = _this$getProps8.menuWidth,
+        menuAlign = _this$getProps8.menuAlign,
+        renderItem = _this$getProps8.renderItem;
 
     var _this$state3 = this.state,
         activeTokens = _this$state3.activeTokens,
@@ -1214,9 +1277,9 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
           inputValue = _this$state4.inputValue,
           editingTokenIndex = _this$state4.editingTokenIndex;
 
-      var _this$getProps8 = this.getProps(),
-          valueToString = _this$getProps8.valueToString,
-          selectedItems = _this$getProps8.selectedItems;
+      var _this$getProps9 = this.getProps(),
+          valueToString = _this$getProps9.valueToString,
+          selectedItems = _this$getProps9.selectedItems;
 
       if (this.isEditingMode) {
         return valueToString(selectedItems[editingTokenIndex]) !== inputValue;