@jetbrains/ring-ui 5.0.52 → 5.0.54

package/components/date-picker/months.js

@@ -3,8 +3,6 @@ import PropTypes from 'prop-types';
 import addMonths from 'date-fns/addMonths';
 import getDay from 'date-fns/getDay';
 import getDaysInMonth from 'date-fns/getDaysInMonth';
-import set from 'date-fns/set';
-import startOfHour from 'date-fns/startOfHour';
 import startOfMonth from 'date-fns/startOfMonth';
 import subMonths from 'date-fns/subMonths';
 import endOfMonth from 'date-fns/endOfMonth';
@@ -37,8 +35,9 @@ const scrollSchedule = scheduleRAF();
 let dy = 0;
 export default function Months(props) {
     const { scrollDate } = props;
-    // prevent switching from april to march because of daylight saving time
-    const monthStart = startOfHour(set(scrollDate, { date: 1, hours: 1 }));
+    const monthDate = scrollDate instanceof Date ? scrollDate : new Date(scrollDate);
+    // Creating midnight of the first day of the month in UTC to prevent the impact of user timezone
+    const monthStart = new Date(Date.UTC(monthDate.getFullYear(), monthDate.getMonth(), 1));
     let month = subMonths(monthStart, MONTHSBACK);
     const months = [month];
     for (let i = 0; i < MONTHSBACK * DOUBLE; i++) {

package/components/editable-heading/editable-heading.d.ts

@@ -2,6 +2,7 @@ import React, { InputHTMLAttributes } from 'react';
 import { Levels } from '../heading/heading';
 import { Size } from '../input/input';
 export { Levels };
+export { Size };
 export declare type EditableHeadingProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'size'> & {
     level?: Levels;
     headingClassName?: string | null;
@@ -19,7 +20,6 @@ export declare type EditableHeadingProps = Omit<InputHTMLAttributes<HTMLInputEle
     error?: string;
     renderMenu?: () => React.ReactNode;
 };
-export { Size } from '../input/input';
 export declare const EditableHeading: (props: EditableHeadingProps) => JSX.Element;
 declare const _default: React.MemoExoticComponent<(props: EditableHeadingProps) => JSX.Element>;
 export default _default;

package/components/editable-heading/editable-heading.js

@@ -8,12 +8,20 @@ import getUID from '../global/get-uid';
 import Shortcuts from '../shortcuts/shortcuts';
 import styles from './editable-heading.css';
 export { Levels };
+export { Size };
 function noop() { }
-const shortcutsScope = getUID('ring-editable-heading-');
-export { Size } from '../input/input';
 export const EditableHeading = (props) => {
-    const { level = Levels.H1, className, headingClassName, inputClassName, isEditing, isSavingPossible, isSaving, children, embedded = false, size = Size.L, onEdit, onSave = noop, onCancel = noop, autoFocus = true, 'data-test': dataTest, error, disabled, renderMenu = () => null, ...restProps } = props;
+    const { level = Levels.H1, className, headingClassName, inputClassName, children, isEditing = false, isSavingPossible = false, isSaving = false, embedded = false, size = Size.L, onEdit = noop, onSave = noop, onCancel = noop, autoFocus = true, 'data-test': dataTest, error, disabled, renderMenu = () => null, ...restProps } = props;
+    const [shortcutsScope] = React.useState(getUID('ring-editable-heading-'));
+    const [isInFocus, setIsInFocus] = React.useState(false);
     const hasError = error !== undefined;
+    const isSaveDisabled = !isSavingPossible || !children || children.trim() === '' || hasError || isSaving;
+    const isCancelDisabled = isSaving;
+    const isShortcutsDisabled = !isInFocus || isSaving;
+    const shortcutsMap = React.useMemo(() => ({
+        enter: isSaveDisabled ? noop : onSave,
+        esc: isCancelDisabled ? noop : onCancel
+    }), [isSaveDisabled, isCancelDisabled, onSave, onCancel]);
     const classes = classNames(styles.editableHeading, className, {
         [styles.fullSize]: size === Size.FULL,
         [styles.isEditing]: isEditing,
@@ -22,26 +30,27 @@ export const EditableHeading = (props) => {
     });
     const headingClasses = classNames(styles.heading, headingClassName);
     const inputClasses = classNames('ring-js-shortcuts', styles.input, inputStyles[`size${size}`], styles[`level${level}`], inputClassName);
-    const onClick = React.useCallback(() => {
-        if (disabled || !onEdit) {
+    const onHeadingClick = React.useCallback(() => {
+        if (disabled) {
             return undefined;
         }
         return onEdit();
     }, [disabled, onEdit]);
-    const isSaveDisabled = !isSavingPossible || !children || children.trim() === '' || hasError || isSaving;
-    const isCancelDisabled = isSaving;
+    const onInputFocus = React.useCallback(() => {
+        setIsInFocus(true);
+    }, []);
+    const onInputBlur = React.useCallback(() => {
+        setIsInFocus(false);
+    }, []);
     return (<>
       <div className={classes}>
         {!disabled && isEditing
             ? (<>
-              <Shortcuts map={{
-                    enter: () => !isSaveDisabled && onSave(),
-                    esc: () => !isCancelDisabled && onCancel()
-                }} scope={shortcutsScope} disabled={isSaving}/>
+              <Shortcuts map={shortcutsMap} scope={shortcutsScope} disabled={isShortcutsDisabled}/>
 
-              <input className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} {...restProps}/>
+              <input className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} onFocus={onInputFocus} onBlur={onInputBlur} {...restProps}/>
             </>)
-            : (<Heading className={headingClasses} level={level} onClick={onClick} data-test={dataTest}>{children}</Heading>)}
+            : (<Heading className={headingClasses} level={level} onClick={onHeadingClick} data-test={dataTest}>{children}</Heading>)}
 
         {!isEditing && (renderMenu())}
 

package/components/global/fuzzy-highlight.d.ts

@@ -1,5 +1,11 @@
 /** https://github.com/bevacqua/fuzzysearch + highlighting with Markdown */
+declare type Match = {
+    from: number;
+    to: number;
+};
 export default function fuzzyHighlight(needle: string, haystack: string, caseSensitive?: boolean): {
     matched: boolean;
+    matches: Match[];
     highlight: string;
 };
+export {};

package/components/global/fuzzy-highlight.js

@@ -1,9 +1,20 @@
 /** https://github.com/bevacqua/fuzzysearch + highlighting with Markdown */
-const marker = '**';
 export default function fuzzyHighlight(needle, haystack, caseSensitive = false) {
     const ndl = caseSensitive ? needle : needle.toLowerCase();
     const hstck = caseSensitive ? haystack : haystack.toLowerCase();
-    const result = (matched, highlight = haystack) => ({ matched, highlight });
+    const result = (matched, matches = []) => {
+        let highlight = haystack;
+        if (matches.length > 0) {
+            highlight = '';
+            let prevMatch = { to: 0 };
+            for (const match of matches) {
+                highlight += `${haystack.slice(prevMatch.to, match.from)}**${haystack.slice(match.from, match.to)}**`;
+                prevMatch = match;
+            }
+            highlight += haystack.slice(prevMatch.to);
+        }
+        return ({ matched, matches, highlight });
+    };
     const hlen = hstck.length;
     const nlen = ndl.length;
     if (nlen > hlen) {
@@ -11,11 +22,12 @@ export default function fuzzyHighlight(needle, haystack, caseSensitive = false)
     }
     if (nlen === hlen) {
         const matched = ndl === hstck;
-        return result(matched, matched ? `${marker}${haystack}${marker}` : haystack);
+        return result(matched, matched ? [{ from: 0, to: haystack.length }] : []);
     }
-    let highlight = '';
     let on = false;
     let j = 0;
+    const matches = [];
+    let from = 0;
     /* eslint-disable no-labels */
     outer: for (let i = 0; i < nlen; i++) {
         const nch = ndl[i];
@@ -24,10 +36,13 @@ export default function fuzzyHighlight(needle, haystack, caseSensitive = false)
             const match = hch === nch;
             // Don't turn highlight on for space characters
             const nextOn = match && /\S/.test(hch);
-            if (nextOn !== on) {
-                highlight += marker;
+            if (nextOn && !on) {
+                from = j;
+            }
+            else if (!nextOn && on) {
+                matches.push({ from, to: j });
             }
-            highlight += haystack[j++];
+            j++;
             on = nextOn;
             if (match) {
                 continue outer;
@@ -37,8 +52,7 @@ export default function fuzzyHighlight(needle, haystack, caseSensitive = false)
     }
     /* eslint-enable */
     if (on) {
-        highlight += marker;
+        matches.push({ from, to: j });
     }
-    highlight += haystack.slice(j);
-    return result(true, highlight);
+    return result(true, matches);
 }

package/components/header/services.js

@@ -42,8 +42,8 @@ export default class Services extends PureComponent {
             return (<TrayIcon {...props} loader={loading} active={loading} icon={servicesIcon} aria-label="Services"/>);
         }
         const sortedServices = [...services].sort(Services.sort);
-        const servicesWithIcons = sortedServices.filter(service => service.iconUrl);
-        const servicesWithOutIcons = sortedServices.filter(service => !service.iconUrl);
+        const servicesWithIcons = sortedServices.filter(service => service.iconUrl && service.homeUrl);
+        const servicesWithOutIcons = sortedServices.filter(service => !service.iconUrl && service.homeUrl);
         const separatorIsRequired = servicesWithIcons.length !== 0 && servicesWithOutIcons.length !== 0;
         return (<Dropdown {...props} anchor={makeAnchor(loading)} initShown={initShown}>
         <Popup className={classNames(styles.services, { [darkStyles.dark]: theme === Theme.DARK })} top={-3}>

package/components/shortcuts/shortcuts.js

@@ -18,13 +18,17 @@ export default class Shortcuts extends PureComponent {
         }
     }
     componentDidUpdate(prevProps) {
-        const { disabled } = this.props;
+        const { disabled, map } = this.props;
         if (!prevProps.disabled && disabled) {
             this.turnShorcutsOff();
         }
         if (prevProps.disabled && !disabled) {
             this.turnShorcutsOn();
         }
+        if (prevProps.map !== map) {
+            this.turnShorcutsOff();
+            this.turnShorcutsOn();
+        }
     }
     componentWillUnmount() {
         if (!this.props.disabled) {

package/dist/date-picker/date-picker.js

@@ -55,7 +55,6 @@ import './months.js';
 import 'date-fns/addMonths';
 import 'date-fns/getDay';
 import 'date-fns/getDaysInMonth';
-import 'date-fns/startOfHour';
 import 'date-fns/startOfMonth';
 import 'date-fns/subMonths';
 import 'date-fns/endOfMonth';

package/dist/date-picker/date-popup.js

@@ -35,8 +35,6 @@ import 'date-fns/add';
 import 'date-fns/addMonths';
 import 'date-fns/getDay';
 import 'date-fns/getDaysInMonth';
-import 'date-fns/set';
-import 'date-fns/startOfHour';
 import 'date-fns/startOfMonth';
 import 'date-fns/subMonths';
 import 'date-fns/endOfMonth';
@@ -51,6 +49,7 @@ import 'date-fns/getDate';
 import 'date-fns/isToday';
 import './month-names.js';
 import 'date-fns/isThisMonth';
+import 'date-fns/set';
 import 'date-fns/startOfYear';
 import './month-slider.js';
 import 'date-fns/addYears';

package/dist/date-picker/months.js

@@ -4,8 +4,6 @@ import PropTypes from 'prop-types';
 import addMonths from 'date-fns/addMonths';
 import getDay from 'date-fns/getDay';
 import getDaysInMonth from 'date-fns/getDaysInMonth';
-import set from 'date-fns/set';
-import startOfHour from 'date-fns/startOfHour';
 import startOfMonth from 'date-fns/startOfMonth';
 import subMonths from 'date-fns/subMonths';
 import endOfMonth from 'date-fns/endOfMonth';
@@ -27,6 +25,7 @@ import 'date-fns/isSameDay';
 import 'date-fns/isToday';
 import 'date-fns/startOfDay';
 import 'date-fns/isThisMonth';
+import 'date-fns/set';
 import 'date-fns/startOfYear';
 import './month-slider.js';
 import 'date-fns/addYears';
@@ -62,11 +61,9 @@ function Months(props) {
   const {
     scrollDate
   } = props;
-  // prevent switching from april to march because of daylight saving time
-  const monthStart = startOfHour(set(scrollDate, {
-    date: 1,
-    hours: 1
-  }));
+  const monthDate = scrollDate instanceof Date ? scrollDate : new Date(scrollDate);
+  // Creating midnight of the first day of the month in UTC to prevent the impact of user timezone
+  const monthStart = new Date(Date.UTC(monthDate.getFullYear(), monthDate.getMonth(), 1));
   let month = subMonths(monthStart, MONTHSBACK);
   const months = [month];
   for (let i = 0; i < MONTHSBACK * DOUBLE; i++) {

package/dist/editable-heading/editable-heading.d.ts

@@ -2,6 +2,7 @@ import React, { InputHTMLAttributes } from 'react';
 import { Levels } from '../heading/heading';
 import { Size } from '../input/input';
 export { Levels };
+export { Size };
 export declare type EditableHeadingProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'size'> & {
     level?: Levels;
     headingClassName?: string | null;
@@ -19,7 +20,6 @@ export declare type EditableHeadingProps = Omit<InputHTMLAttributes<HTMLInputEle
     error?: string;
     renderMenu?: () => React.ReactNode;
 };
-export { Size } from '../input/input';
 export declare const EditableHeading: (props: EditableHeadingProps) => JSX.Element;
 declare const _default: React.MemoExoticComponent<(props: EditableHeadingProps) => JSX.Element>;
 export default _default;

package/dist/editable-heading/editable-heading.js

@@ -33,20 +33,19 @@ import 'sniffr';
 var modules_6e69b0fe = {"unit":"8px","editableHeading":"editableHeading_rui_0870","fullSize":"fullSize_rui_0870","isEditing":"isEditing_rui_0870","heading":"heading_rui_0870","disabled":"disabled_rui_0870","input":"input_rui_0870","error":"error_rui_0870","button":"button_rui_0870","errorText":"errorText_rui_0870","level1":"level1_rui_0870","level2":"level2_rui_0870","level3":"level3_rui_0870"};
 
 function noop() {}
-const shortcutsScope = getUID('ring-editable-heading-');
 const EditableHeading = props => {
   const {
     level = Levels.H1,
     className,
     headingClassName,
     inputClassName,
-    isEditing,
-    isSavingPossible,
-    isSaving,
     children,
+    isEditing = false,
+    isSavingPossible = false,
+    isSaving = false,
     embedded = false,
     size = Size.L,
-    onEdit,
+    onEdit = noop,
     onSave = noop,
     onCancel = noop,
     autoFocus = true,
@@ -56,7 +55,16 @@ const EditableHeading = props => {
     renderMenu = () => null,
     ...restProps
   } = props;
+  const [shortcutsScope] = React.useState(getUID('ring-editable-heading-'));
+  const [isInFocus, setIsInFocus] = React.useState(false);
   const hasError = error !== undefined;
+  const isSaveDisabled = !isSavingPossible || !children || children.trim() === '' || hasError || isSaving;
+  const isCancelDisabled = isSaving;
+  const isShortcutsDisabled = !isInFocus || isSaving;
+  const shortcutsMap = React.useMemo(() => ({
+    enter: isSaveDisabled ? noop : onSave,
+    esc: isCancelDisabled ? noop : onCancel
+  }), [isSaveDisabled, isCancelDisabled, onSave, onCancel]);
   const classes = classNames(modules_6e69b0fe.editableHeading, className, {
     [modules_6e69b0fe.fullSize]: size === Size.FULL,
     [modules_6e69b0fe.isEditing]: isEditing,
@@ -65,33 +73,36 @@ const EditableHeading = props => {
   });
   const headingClasses = classNames(modules_6e69b0fe.heading, headingClassName);
   const inputClasses = classNames('ring-js-shortcuts', modules_6e69b0fe.input, modules_88cfaf40[`size${size}`], modules_6e69b0fe[`level${level}`], inputClassName);
-  const onClick = React.useCallback(() => {
-    if (disabled || !onEdit) {
+  const onHeadingClick = React.useCallback(() => {
+    if (disabled) {
       return undefined;
     }
     return onEdit();
   }, [disabled, onEdit]);
-  const isSaveDisabled = !isSavingPossible || !children || children.trim() === '' || hasError || isSaving;
-  const isCancelDisabled = isSaving;
+  const onInputFocus = React.useCallback(() => {
+    setIsInFocus(true);
+  }, []);
+  const onInputBlur = React.useCallback(() => {
+    setIsInFocus(false);
+  }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: classes
   }, !disabled && isEditing ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Shortcuts, {
-    map: {
-      enter: () => !isSaveDisabled && onSave(),
-      esc: () => !isCancelDisabled && onCancel()
-    },
+    map: shortcutsMap,
     scope: shortcutsScope,
-    disabled: isSaving
+    disabled: isShortcutsDisabled
   }), /*#__PURE__*/React.createElement("input", _extends({
     className: inputClasses,
     value: children,
     autoFocus: autoFocus,
     "data-test": dataTest,
-    disabled: isSaving
+    disabled: isSaving,
+    onFocus: onInputFocus,
+    onBlur: onInputBlur
   }, restProps))) : /*#__PURE__*/React.createElement(Heading, {
     className: headingClasses,
     level: level,
-    onClick: onClick,
+    onClick: onHeadingClick,
     "data-test": dataTest
   }, children), !isEditing && renderMenu(), isEditing && !embedded && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
     className: modules_6e69b0fe.button,

package/dist/global/fuzzy-highlight.d.ts

@@ -1,5 +1,11 @@
 /** https://github.com/bevacqua/fuzzysearch + highlighting with Markdown */
+declare type Match = {
+    from: number;
+    to: number;
+};
 export default function fuzzyHighlight(needle: string, haystack: string, caseSensitive?: boolean): {
     matched: boolean;
+    matches: Match[];
     highlight: string;
 };
+export {};

package/dist/global/fuzzy-highlight.js

@@ -1,13 +1,25 @@
 /** https://github.com/bevacqua/fuzzysearch + highlighting with Markdown */
-const marker = '**';
 function fuzzyHighlight(needle, haystack) {
   let caseSensitive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   const ndl = caseSensitive ? needle : needle.toLowerCase();
   const hstck = caseSensitive ? haystack : haystack.toLowerCase();
   const result = function (matched) {
-    let highlight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : haystack;
+    let matches = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    let highlight = haystack;
+    if (matches.length > 0) {
+      highlight = '';
+      let prevMatch = {
+        to: 0
+      };
+      for (const match of matches) {
+        highlight += `${haystack.slice(prevMatch.to, match.from)}**${haystack.slice(match.from, match.to)}**`;
+        prevMatch = match;
+      }
+      highlight += haystack.slice(prevMatch.to);
+    }
     return {
       matched,
+      matches,
       highlight
     };
   };
@@ -18,11 +30,15 @@ function fuzzyHighlight(needle, haystack) {
   }
   if (nlen === hlen) {
     const matched = ndl === hstck;
-    return result(matched, matched ? `${marker}${haystack}${marker}` : haystack);
+    return result(matched, matched ? [{
+      from: 0,
+      to: haystack.length
+    }] : []);
   }
-  let highlight = '';
   let on = false;
   let j = 0;
+  const matches = [];
+  let from = 0;
   /* eslint-disable no-labels */
   outer: for (let i = 0; i < nlen; i++) {
     const nch = ndl[i];
@@ -31,10 +47,15 @@ function fuzzyHighlight(needle, haystack) {
       const match = hch === nch;
       // Don't turn highlight on for space characters
       const nextOn = match && /\S/.test(hch);
-      if (nextOn !== on) {
-        highlight += marker;
+      if (nextOn && !on) {
+        from = j;
+      } else if (!nextOn && on) {
+        matches.push({
+          from,
+          to: j
+        });
       }
-      highlight += haystack[j++];
+      j++;
       on = nextOn;
       if (match) {
         continue outer;
@@ -44,10 +65,12 @@ function fuzzyHighlight(needle, haystack) {
   }
   /* eslint-enable */
   if (on) {
-    highlight += marker;
+    matches.push({
+      from,
+      to: j
+    });
   }
-  highlight += haystack.slice(j);
-  return result(true, highlight);
+  return result(true, matches);
 }
 
 export { fuzzyHighlight as default };

package/dist/header/services.js

@@ -80,8 +80,8 @@ class Services extends PureComponent {
       }));
     }
     const sortedServices = [...services].sort(Services.sort);
-    const servicesWithIcons = sortedServices.filter(service => service.iconUrl);
-    const servicesWithOutIcons = sortedServices.filter(service => !service.iconUrl);
+    const servicesWithIcons = sortedServices.filter(service => service.iconUrl && service.homeUrl);
+    const servicesWithOutIcons = sortedServices.filter(service => !service.iconUrl && service.homeUrl);
     const separatorIsRequired = servicesWithIcons.length !== 0 && servicesWithOutIcons.length !== 0;
     return /*#__PURE__*/React.createElement(Dropdown, _extends({}, props, {
       anchor: makeAnchor(loading),

package/dist/shortcuts/shortcuts.js

@@ -14,7 +14,8 @@ class Shortcuts extends PureComponent {
   }
   componentDidUpdate(prevProps) {
     const {
-      disabled
+      disabled,
+      map
     } = this.props;
     if (!prevProps.disabled && disabled) {
       this.turnShorcutsOff();
@@ -22,6 +23,10 @@ class Shortcuts extends PureComponent {
     if (prevProps.disabled && !disabled) {
       this.turnShorcutsOn();
     }
+    if (prevProps.map !== map) {
+      this.turnShorcutsOff();
+      this.turnShorcutsOn();
+    }
   }
   componentWillUnmount() {
     if (!this.props.disabled) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "5.0.52",
+  "version": "5.0.54",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -259,5 +259,5 @@
     "node": ">=14.0",
     "npm": ">=6.0.0"
   },
-  "gitHead": "497b3b0144654bd77fb90abcee949fcb6979501c"
+  "gitHead": "738bf4ba27a6a7ac082c070a845f7b992f87c350"
 }