@jetbrains/ring-ui 6.0.11 → 6.0.13

package/components/date-picker/consts.d.ts

@@ -10,6 +10,7 @@ declare const units: {
 export default units;
 export declare const YEAR = 12;
 export declare const WEEK = 7;
+export declare const FIFTH_DAY = 4;
 export declare const weekdays: {
     MO: number;
     TU: number;
@@ -26,6 +27,9 @@ export declare const DOUBLE = 2;
 export declare const HALF = 0.5;
 export declare const dateType: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
 export declare function parseTime(time: string): string | null;
+export declare function shiftWeekArray<T>(arr: T[], startOfWeek: number): T[];
+export declare function getWeekStartsOn(locale: Locale | undefined): number;
+export declare function getDayNumInWeek(locale: Locale | undefined, day: number): number;
 export interface DateInputTranslations {
     addFirstDate?: string;
     addSecondDate?: string;

package/components/date-picker/consts.js

@@ -12,6 +12,7 @@ const units = {
 export default units;
 export const YEAR = 12;
 export const WEEK = 7;
+export const FIFTH_DAY = 4;
 export const weekdays = {
     MO: 1,
     TU: 2,
@@ -42,3 +43,14 @@ export function parseTime(time) {
     }
     return result;
 }
+export function shiftWeekArray(arr, startOfWeek) {
+    const shiftTimes = startOfWeek - 1;
+    return arr.slice(shiftTimes).concat(arr.slice(0, shiftTimes));
+}
+export function getWeekStartsOn(locale) {
+    return locale?.options?.weekStartsOn ?? weekdays.MO;
+}
+export function getDayNumInWeek(locale, day) {
+    const weekDays = shiftWeekArray(Object.values(weekdays), getWeekStartsOn(locale));
+    return weekDays.indexOf(day);
+}

package/components/date-picker/date-picker.css

@@ -333,7 +333,7 @@
   border-radius: var(--ring-border-radius);
 }
 
-.Monday {
+.Day1 {
   position: relative;
 
   &::before,
@@ -400,13 +400,13 @@
     left: 0;
   }
 
-  &.Monday {
+  &.Day1 {
     &::after {
       height: calc(var(--ring-unit) * 5);
     }
   }
 
-  & + .Tuesday {
+  & + .Day2 {
     position: relative;
 
     &::before {
@@ -424,9 +424,9 @@
   }
 }
 
-.Friday,
-.Saturday,
-.Sunday {
+.Day5,
+.Day6,
+.Day7 {
   &::before,
   &::after {
     height: calc(var(--ring-unit) * 5);
@@ -436,7 +436,7 @@
 .spread {
   &::before,
   &::after,
-  & + .Tuesday::before {
+  & + .Day2::before {
     transition: none;
 
     background-color: var(--ring-selected-background-color);
@@ -446,7 +446,7 @@
 .activeSpread {
   &::before,
   &::after,
-  & + .Tuesday::before {
+  & + .Day2::before {
     transition: none;
 
     background-color: var(--ring-date-picker-hover-color);

package/components/date-picker/day.d.ts

@@ -15,6 +15,7 @@ export default class Day extends Component<DayProps> {
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
         parseDateInput: PropTypes.Requireable<(...args: any[]) => any>;
         onHover: PropTypes.Requireable<(...args: any[]) => any>;
+        locale: PropTypes.Requireable<object>;
         minDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
         maxDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
     };

package/components/date-picker/day.js

@@ -10,7 +10,7 @@ import { isBefore } from 'date-fns/isBefore';
 import { isSameDay } from 'date-fns/isSameDay';
 import { isToday } from 'date-fns/isToday';
 import { startOfDay } from 'date-fns/startOfDay';
-import { dateType, weekdays } from './consts';
+import { dateType, weekdays, getDayNumInWeek } from './consts';
 import styles from './date-picker.css';
 let hoverTO;
 export default class Day extends Component {
@@ -23,6 +23,7 @@ export default class Day extends Component {
         onSelect: PropTypes.func,
         parseDateInput: PropTypes.func,
         onHover: PropTypes.func,
+        locale: PropTypes.object,
         minDate: dateType,
         maxDate: dateType
     };
@@ -55,8 +56,9 @@ export default class Day extends Component {
         return this.props.parseDateInput(text);
     }
     render() {
-        const { day, from, currentRange, activeRange, empty } = this.props;
+        const { day, from, currentRange, activeRange, empty, locale } = this.props;
         const reverse = activeRange && activeRange[1] === from;
+        const dayInWeek = getDayNumInWeek(locale, getDay(day)) + 1;
         function makeSpreadRange(range) {
             return range && [range[0], addDays(range[1], 1)];
         }
@@ -65,7 +67,7 @@ export default class Day extends Component {
         const activeSpreadRange = makeSpreadRange(activeRange);
         return (
         // TODO make keyboard navigation actually work
-        <button type="button" className={classNames(styles.day, styles[format(day, 'EEEE')], {
+        <button type="button" className={classNames(styles.day, styles[`Day${dayInWeek}`], {
                 [styles.current]: ['date', 'from', 'to'].some(this.is),
                 [styles.active]: !disabled && this.is('activeDate'),
                 [styles.weekend]: [weekdays.SA, weekdays.SU].includes(getDay(day)),

package/components/date-picker/month-names.d.ts

@@ -7,7 +7,7 @@ declare namespace MonthNames {
         scrollDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
         onScrollChange: PropTypes.Requireable<(...args: any[]) => any>;
         currentRange: PropTypes.Requireable<(NonNullable<string | number | Date | null | undefined> | null | undefined)[]>;
-        locale: PropTypes.Requireable<string>;
+        locale: PropTypes.Requireable<object>;
     };
 }
 export default MonthNames;

package/components/date-picker/month-names.js

@@ -15,7 +15,7 @@ class MonthName extends PureComponent {
     static propTypes = {
         month: dateType,
         onScrollChange: PropTypes.func,
-        locale: PropTypes.string
+        locale: PropTypes.object
     };
     handleClick = () => {
         const end = endOfMonth(this.props.month);
@@ -58,5 +58,5 @@ MonthNames.propTypes = {
     scrollDate: dateType,
     onScrollChange: PropTypes.func,
     currentRange: PropTypes.arrayOf(dateType),
-    locale: PropTypes.string
+    locale: PropTypes.object
 };

package/components/date-picker/month.d.ts

@@ -8,7 +8,7 @@ declare function Month(props: MonthProps): React.JSX.Element;
 declare namespace Month {
     var propTypes: {
         month: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
-        locale: PropTypes.Requireable<string>;
+        locale: PropTypes.Requireable<object>;
     };
 }
 export default Month;

package/components/date-picker/month.js

@@ -6,7 +6,7 @@ import { getDay } from 'date-fns/getDay';
 import { setDay } from 'date-fns/setDay';
 import PropTypes from 'prop-types';
 import Day from './day';
-import { dateType, WEEK, weekdays } from './consts';
+import { dateType, WEEK, weekdays, shiftWeekArray, getWeekStartsOn, FIFTH_DAY } from './consts';
 import styles from './date-picker.css';
 export default function Month(props) {
     const start = props.month;
@@ -14,7 +14,9 @@ export default function Month(props) {
     const { locale } = props;
     // pad with empty cells starting from last friday
     const weekday = getDay(start);
-    let day = setDay(start, weekday >= weekdays.FR ? weekdays.FR : weekdays.FR - WEEK);
+    const weekDays = shiftWeekArray(Object.values(weekdays), getWeekStartsOn(props.locale));
+    const fifthDayOfWeek = weekDays[FIFTH_DAY];
+    let day = setDay(start, weekday >= fifthDayOfWeek ? fifthDayOfWeek : fifthDayOfWeek - WEEK);
     const days = [];
     while (day < end) {
         days.push(day);
@@ -29,5 +31,5 @@ export default function Month(props) {
 }
 Month.propTypes = {
     month: dateType,
-    locale: PropTypes.string
+    locale: PropTypes.object
 };

package/components/date-picker/weekdays.d.ts

@@ -7,7 +7,7 @@ interface WeekdaysProps {
 declare function Weekdays(props: WeekdaysProps): React.JSX.Element;
 declare namespace Weekdays {
     var propTypes: {
-        locale: PropTypes.Requireable<string>;
+        locale: PropTypes.Requireable<object>;
     };
 }
 export default Weekdays;

package/components/date-picker/weekdays.js

@@ -5,10 +5,10 @@ import { format } from 'date-fns/format';
 import { setDay } from 'date-fns/setDay';
 import { startOfDay } from 'date-fns/startOfDay';
 import PropTypes from 'prop-types';
-import { weekdays } from './consts';
+import { getWeekStartsOn, shiftWeekArray, weekdays } from './consts';
 import styles from './date-picker.css';
 export default function Weekdays(props) {
-    const days = Object.values(weekdays).
+    const days = shiftWeekArray(Object.values(weekdays), getWeekStartsOn(props.locale)).
         map(value => startOfDay(setDay(new Date(), value)));
     const { locale } = props;
     return (<div className={styles.weekdays}>
@@ -20,5 +20,5 @@ export default function Weekdays(props) {
     </div>);
 }
 Weekdays.propTypes = {
-    locale: PropTypes.string
+    locale: PropTypes.object
 };

package/components/header/header.css

@@ -141,9 +141,15 @@
   cursor: pointer;
 }
 
-.avatarWrapper {
+.anchorClassName {
   composes: resetButton from "../global/global.css";
 
+  display: flex;
+  align-items: center;
+  gap: calc(1.5 * var(--ring-unit));
+}
+
+.avatarWrapper {
   line-height: 0;
 }
 

package/components/header/profile.d.ts

@@ -1,6 +1,7 @@
 import React, { ComponentType, HTMLAttributes, PureComponent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { Size } from '../avatar/avatar';
+import { PopupMenuAttrs } from '../popup-menu/popup-menu';
 import { ListDataItem } from '../list/consts';
 import { AuthUser } from '../auth/auth';
 import { ClickableLinkProps } from '../link/clickableLink';
@@ -27,15 +28,19 @@ export interface ProfileProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSe
     LinkComponent?: ComponentType<ClickableLinkProps> | null | undefined;
     user?: AuthUser | null | undefined | void;
     round?: boolean | null | undefined;
+    showName?: boolean | null | undefined;
     showLogIn?: boolean | null | undefined;
     showLogOut?: boolean | null | undefined;
     showSwitchUser?: boolean | null | undefined;
     showApplyChangedUser?: boolean | null | undefined;
     onRevertPostponement?: (() => void) | null | undefined;
+    menuProps?: PopupMenuAttrs | null | undefined;
+    activeClassName?: string | null | undefined;
 }
 export default class Profile extends PureComponent<ProfileProps> {
     static propTypes: {
         className: PropTypes.Requireable<string>;
+        activeClassName: PropTypes.Requireable<string>;
         closeOnSelect: PropTypes.Requireable<boolean>;
         hasUpdates: PropTypes.Requireable<boolean>;
         loading: PropTypes.Requireable<boolean>;
@@ -59,12 +64,14 @@ export default class Profile extends PureComponent<ProfileProps> {
         }>>;
         size: PropTypes.Requireable<number>;
         round: PropTypes.Requireable<boolean>;
+        showName: PropTypes.Requireable<boolean>;
         showLogIn: PropTypes.Requireable<boolean>;
         showLogOut: PropTypes.Requireable<boolean>;
         showSwitchUser: PropTypes.Requireable<boolean>;
         showApplyChangedUser: PropTypes.Requireable<boolean>;
         onRevertPostponement: PropTypes.Requireable<(...args: any[]) => any>;
         renderGuest: PropTypes.Requireable<(...args: any[]) => any>;
+        menuProps: PropTypes.Requireable<object>;
     };
     static defaultProps: ProfileProps;
     static contextType: React.Context<import("../i18n/i18n-context").I18nContextProps>;

package/components/header/profile.js

@@ -12,6 +12,7 @@ const rgItemType = PopupMenu.ListProps.Type.LINK;
 export default class Profile extends PureComponent {
     static propTypes = {
         className: PropTypes.string,
+        activeClassName: PropTypes.string,
         closeOnSelect: PropTypes.bool,
         hasUpdates: PropTypes.bool,
         loading: PropTypes.bool,
@@ -39,12 +40,14 @@ export default class Profile extends PureComponent {
         }),
         size: PropTypes.number,
         round: PropTypes.bool,
+        showName: PropTypes.bool,
         showLogIn: PropTypes.bool,
         showLogOut: PropTypes.bool,
         showSwitchUser: PropTypes.bool,
         showApplyChangedUser: PropTypes.bool,
         onRevertPostponement: PropTypes.func,
-        renderGuest: PropTypes.func
+        renderGuest: PropTypes.func,
+        menuProps: PropTypes.object
     };
     static defaultProps = {
         closeOnSelect: true,
@@ -61,7 +64,7 @@ export default class Profile extends PureComponent {
     static contextType = I18nContext;
     static Size = Size;
     render() {
-        const { className, closeOnSelect, hasUpdates, onLogout, user, profileUrl, LinkComponent, onSwitchUser, renderPopupItems, onRevertPostponement, showApplyChangedUser, showLogIn, showLogOut, showSwitchUser, renderGuest, translations, size, round, loading, onLogin, ...props } = this.props;
+        const { className, activeClassName, closeOnSelect, hasUpdates, onLogout, user, profileUrl, LinkComponent, onSwitchUser, renderPopupItems, onRevertPostponement, showApplyChangedUser, showName, showLogIn, showLogOut, showSwitchUser, renderGuest, translations, size, round, loading, onLogin, menuProps, ...props } = this.props;
         const { translate } = this.context;
         if (!user) {
             return (<div {...props} className={classNames(styles.profileEmpty, className)}>
@@ -71,11 +74,14 @@ export default class Profile extends PureComponent {
         if (user.guest) {
             return renderGuest(this.props);
         }
-        const anchorClassName = classNames(styles.avatarWrapper, {
+        const avatarWrapper = classNames(styles.avatarWrapper, {
             [styles.hasUpdates]: hasUpdates
         });
-        const anchor = (<button type="button" className={anchorClassName}>
-        <Avatar url={user.profile && user.profile.avatar && user.profile.avatar.url} size={size} round={round}/>
+        const anchor = (<button type="button" className={styles.anchorClassName}>
+        <span className={avatarWrapper}>
+          <Avatar url={user.profile && user.profile.avatar && user.profile.avatar.url} size={size} round={round}/>
+        </span>
+        {showName && <span>{user.name}</span>}
       </button>);
         const items = [
             showApplyChangedUser && {
@@ -109,11 +115,12 @@ export default class Profile extends PureComponent {
                 onClick: onLogout
             }
         ].filter(isTruthy);
-        return (<DropdownMenu {...props} title={user.name} anchor={anchor} data={renderPopupItems(items)} data-test="ring-profile" className={classNames(styles.profile, className)} menuProps={{
+        return (<DropdownMenu {...props} title={user.name} anchor={anchor} data={renderPopupItems(items)} data-test="ring-profile" className={classNames(styles.profile, className)} activeClassName={activeClassName} menuProps={{
                 closeOnSelect,
                 left: -2,
                 top: -8,
-                sidePadding: 32
+                sidePadding: 32,
+                ...menuProps
             }}/>);
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "6.0.11",
+  "version": "6.0.13",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -76,54 +76,54 @@
   },
   "readmeFilename": "README.md",
   "devDependencies": {
-    "@babel/cli": "^7.23.9",
-    "@babel/eslint-parser": "^7.23.10",
-    "@csstools/css-parser-algorithms": "^2.6.0",
+    "@babel/cli": "^7.24.1",
+    "@babel/eslint-parser": "^7.24.1",
+    "@csstools/css-parser-algorithms": "^2.6.1",
     "@csstools/stylelint-no-at-nest-rule": "^2.0.0",
     "@jetbrains/eslint-config": "^5.4.1",
     "@jetbrains/stylelint-config": "^4.0.2",
-    "@primer/octicons": "^19.8.0",
+    "@primer/octicons": "^19.9.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.5",
-    "@storybook/addon-a11y": "7.6.17",
-    "@storybook/addon-docs": "7.6.17",
+    "@storybook/addon-a11y": "8.0.4",
+    "@storybook/addon-docs": "8.0.4",
     "@storybook/addon-essentials": "7.6.17",
     "@storybook/addon-storyshots": "7.6.17",
     "@storybook/addon-storyshots-puppeteer": "7.6.17",
-    "@storybook/addon-storysource": "7.6.17",
+    "@storybook/addon-storysource": "8.0.4",
     "@storybook/addons": "7.6.17",
-    "@storybook/components": "7.6.17",
+    "@storybook/components": "8.0.4",
     "@storybook/preview-api": "7.6.17",
     "@storybook/react": "7.6.17",
     "@storybook/react-webpack5": "7.6.17",
-    "@storybook/source-loader": "7.6.17",
-    "@storybook/theming": "7.6.17",
-    "@testing-library/react": "^14.2.1",
+    "@storybook/source-loader": "8.0.2",
+    "@storybook/theming": "8.0.4",
+    "@testing-library/react": "^14.2.2",
     "@testing-library/user-event": "^14.5.2",
-    "@types/chai": "^4.3.12",
+    "@types/chai": "^4.3.14",
     "@types/chai-as-promised": "^7.1.8",
     "@types/chai-dom": "0.0.10",
     "@types/chai-enzyme": "^0.6.13",
     "@types/enzyme": "^3.10.18",
     "@types/markdown-it": "^13.0.7",
-    "@types/react": "^18.2.64",
-    "@types/react-dom": "^18.2.21",
+    "@types/react": "^18.2.67",
+    "@types/react-dom": "^18.2.22",
     "@types/sinon": "^17.0.3",
     "@types/sinon-chai": "^3.2.12",
-    "@typescript-eslint/eslint-plugin": "^7.1.1",
-    "@typescript-eslint/parser": "^7.1.1",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "acorn": "^8.11.3",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001597",
+    "caniuse-lite": "^1.0.30001600",
     "chai": "^5.1.0",
     "chai-as-promised": "^7.1.1",
     "chai-dom": "^1.10.0",
     "chai-enzyme": "1.0.0-beta.1",
     "cheerio": "^1.0.0-rc.12",
-    "core-js": "^3.36.0",
+    "core-js": "^3.36.1",
     "cpy-cli": "^3.1.1",
     "enzyme": "^3.11.0",
     "eslint": "^8.57.0",
@@ -131,7 +131,7 @@
     "eslint-plugin-bdd": "^2.1.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-storybook": "^0.8.0",
     "events": "^3.3.0",
     "glob": "^10.3.10",
@@ -149,33 +149,33 @@
     "karma-teamcity-reporter": "^2.0.0",
     "karma-webpack": "^5.0.1",
     "lint-staged": "^15.2.2",
-    "markdown-it": "^14.0.0",
+    "markdown-it": "^14.1.0",
     "merge-options": "^3.0.4",
     "mocha": "^10.3.0",
     "pinst": "^3.0.0",
     "prettier": "^3.2.5",
-    "puppeteer": "^22.4.1",
+    "puppeteer": "^22.6.0",
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^5.0.5",
-    "rollup": "^4.12.1",
+    "rollup": "^4.13.0",
     "rollup-plugin-clear": "^2.0.7",
     "rollup-plugin-styles": "^4.0.0",
     "sinon": "^17.0.1",
     "sinon-chai": "^3.7.0",
     "storage-mock": "^2.1.0",
-    "storybook": "7.6.17",
+    "storybook": "8.0.4",
     "storybook-addon-themes": "^6.1.0",
     "stylelint": "^16.2.1",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
     "terser-webpack-plugin": "^5.3.10",
-    "typescript": "~5.4.2",
+    "typescript": "~5.4.3",
     "wallaby-webpack": "^3.9.16",
-    "webpack": "^5.90.3",
+    "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4",
     "xmlappend": "^1.0.4"
   },
@@ -199,11 +199,11 @@
     }
   },
   "dependencies": {
-    "@babel/core": "^7.24.0",
-    "@babel/preset-typescript": "^7.23.3",
+    "@babel/core": "^7.24.3",
+    "@babel/preset-typescript": "^7.24.1",
     "@jetbrains/babel-preset-jetbrains": "^2.3.2",
     "@jetbrains/icons": "^4.1.0",
-    "@jetbrains/logos": "^2.2.25",
+    "@jetbrains/logos": "^2.2.26",
     "@jetbrains/postcss-require-hover": "^0.1.2",
     "@types/combokeys": "^2.4.9",
     "@types/deep-equal": "^1.0.4",
@@ -220,7 +220,7 @@
     "combokeys": "^3.0.1",
     "css-loader": "^6.10.0",
     "csstype": "^3.1.3",
-    "date-fns": "^3.3.1",
+    "date-fns": "^3.6.0",
     "deep-equal": "^2.2.3",
     "element-resize-detector": "^1.2.4",
     "es6-error": "^4.1.1",
@@ -231,13 +231,13 @@
     "highlight.js": "^10.7.2",
     "just-debounce-it": "^3.2.0",
     "memoize-one": "^6.0.0",
-    "postcss": "^8.4.35",
+    "postcss": "^8.4.38",
     "postcss-calc": "^9.0.1",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-font-family-system-ui": "^5.0.0",
     "postcss-loader": "^8.1.1",
     "postcss-modules-values-replace": "^4.2.0",
-    "postcss-preset-env": "^9.5.0",
+    "postcss-preset-env": "^9.5.2",
     "prop-types": "^15.8.1",
     "react-movable": "^3.2.0",
     "react-virtualized": "^9.22.5",