@jetbrains/ring-ui 4.0.52 → 4.0.56

package/components/date-picker/date-input.js

@@ -25,7 +25,8 @@ export default class DateInput extends React.PureComponent {
     onInput: PropTypes.func,
     onActivate: PropTypes.func,
     onConfirm: PropTypes.func,
-    onClear: PropTypes.func
+    onClear: PropTypes.func,
+    locale: PropTypes.object
   };
 
   static defaultProps = {
@@ -78,16 +79,16 @@ export default class DateInput extends React.PureComponent {
       time, name, hoverDate,
       date, displayFormat, translations,
       onActivate, onClear,
-      fromPlaceholder, toPlaceholder, timePlaceholder
+      fromPlaceholder, toPlaceholder, timePlaceholder, locale
     } = this.props;
 
     let displayText = '';
     if (active && hoverDate) {
-      displayText = displayFormat(hoverDate);
+      displayText = displayFormat(hoverDate, locale);
     } else if (active && text != null) {
       displayText = text;
     } else if (date) {
-      displayText = displayFormat(date);
+      displayText = displayFormat(date, locale);
     } else if (name === 'time') {
       displayText = time || '';
     }

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

@@ -198,6 +198,8 @@
 
   text-align: left;
 
+  text-transform: capitalize;
+
   font-weight: bold;
 
   @supports (flex-basis: 1px) {
@@ -449,6 +451,8 @@
   height: cellSize;
   padding-left: calc(unit * 1.5);
 
+  text-transform: capitalize;
+
   line-height: cellSize;
 }
 

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

@@ -90,7 +90,8 @@ export default class DatePicker extends PureComponent {
     disabled: PropTypes.bool,
     minDate: dateType,
     maxDate: dateType,
-    translations: PropTypes.object
+    translations: PropTypes.object,
+    locale: PropTypes.object
   };
 
   static defaultProps = {
@@ -101,10 +102,10 @@ export default class DatePicker extends PureComponent {
     from: null,
     to: null,
     clear: false,
-    displayFormat: date => (date ? formatDate(date, 'd MMM yyyy') : ''),
-    displayMonthFormat: date => (date ? formatDate(date, 'd MMM') : ''),
-    displayDayFormat: date => (date ? formatDate(date, 'd') : ''),
-    displayTimeFormat: date => (date ? formatDate(date, 'HH:mm') : ''),
+    displayFormat: (date, locale) => (date ? formatDate(date, 'd MMM yyyy', {locale}) : ''),
+    displayMonthFormat: (date, locale) => (date ? formatDate(date, 'd MMM', {locale}) : ''),
+    displayDayFormat: (date, locale) => (date ? formatDate(date, 'd', {locale}) : ''),
+    displayTimeFormat: (date, locale) => (date ? formatDate(date, 'HH:mm', {locale}) : ''),
     datePlaceholder: 'Set a date',
     dateTimePlaceholder: 'Set date and time',
     rangePlaceholder: 'Set a period',
@@ -194,7 +195,8 @@ export default class DatePicker extends PureComponent {
       displayFormat,
       displayMonthFormat,
       displayDayFormat,
-      translations
+      translations,
+      locale
     } = this.props;
 
     const date = this.parse(this.props.date);
@@ -204,27 +206,27 @@ export default class DatePicker extends PureComponent {
 
     let text;
     if (!range && !withTime) {
-      text = date ? displayFormat(date) : datePlaceholder || translations.setDate;
+      text = date ? displayFormat(date, locale) : datePlaceholder || translations.setDate;
     } else if (!range && withTime) {
       if (!date && !time) {
         text = dateTimePlaceholder || translations.setDateTime;
       } else {
-        text = `${date && displayFormat(date) || '—'}, ${time || '—'}`;
+        text = `${date && displayFormat(date, locale) || '—'}, ${time || '—'}`;
       }
     } else if (!from && !to) {
       text = rangePlaceholder || translations.setPeriod;
     } else if (!to) {
-      text = `${displayFormat(from)} —`;
+      text = `${displayFormat(from, locale)} —`;
     } else if (!from) {
-      text = `— ${displayFormat(to)}`;
+      text = `— ${displayFormat(to, locale)}`;
     } else if (!isSameYear(from, to)) {
-      text = `${displayFormat(from)} — ${displayFormat(to)}`;
+      text = `${displayFormat(from, locale)} — ${displayFormat(to, locale)}`;
     } else if (!isSameMonth(from, to)) {
-      text = `${displayMonthFormat(from)} — ${displayFormat(to)}`;
+      text = `${displayMonthFormat(from, locale)} — ${displayFormat(to, locale)}`;
     } else if (!isSameDay(from, to)) {
-      text = `${displayDayFormat(from)} — ${displayFormat(to)}`;
+      text = `${displayDayFormat(from, locale)} — ${displayFormat(to, locale)}`;
     } else {
-      text = `${displayFormat(to)}`;
+      text = `${displayFormat(to, locale)}`;
     }
 
     return text;

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

@@ -47,7 +47,8 @@ export default class DatePopup extends Component {
     hidden: PropTypes.bool,
     fromPlaceholder: PropTypes.string,
     toPlaceholder: PropTypes.string,
-    timePlaceholder: PropTypes.string
+    timePlaceholder: PropTypes.string,
+    locale: PropTypes.object
   };
 
   static defaultProps = {
@@ -77,7 +78,7 @@ export default class DatePopup extends Component {
 
   componentDidMount() {
     if (this.componentRef.current) {
-      this.componentRef.current.addEventListener('wheel', this.handleWheel);
+      this.componentRef.current.addEventListener('wheel', this.handleWheel, {passive: true});
     }
   }
 
@@ -297,7 +298,7 @@ export default class DatePopup extends Component {
   };
 
   render() {
-    const {range, hidden, withTime, time} = this.props;
+    const {range, hidden, withTime, time, locale} = this.props;
     const parsedDate = this.parse(this.props.date, 'date');
     const parsedTo = this.parse(this.props.to, 'to');
 
@@ -391,6 +392,7 @@ export default class DatePopup extends Component {
                 onInput={this.handleInput}
                 onConfirm={this.handleConfirm(name)}
                 onClear={onClear}
+                locale={locale}
               />
             );
           })}
@@ -413,12 +415,13 @@ export default class DatePopup extends Component {
                   onInput={this.handleInput}
                   onConfirm={this.handleConfirm('time')}
                   onClear={clearable && this.onClear || undefined}
+                  locale={locale}
                 />
               )
               : ('')
           }
         </div>
-        <Weekdays/>
+        <Weekdays locale={locale}/>
         <div
           className={styles.calendar}
         >
@@ -426,6 +429,7 @@ export default class DatePopup extends Component {
             {...calendarProps}
             onHover={this.hoverHandler}
             onSelect={this.selectHandler}
+            locale={locale}
           />
           <Years {...calendarProps}/>
         </div>

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

@@ -21,7 +21,7 @@ class MonthName extends PureComponent {
   };
 
   render() {
-    const {month} = this.props;
+    const {month, locale} = this.props;
 
     return (
       <button
@@ -34,7 +34,7 @@ class MonthName extends PureComponent {
         )}
         onClick={this.handleClick}
       >
-        {format(month, 'MMM')}
+        {format(month, 'LLL', {locale})}
       </button>
     );
   }
@@ -42,11 +42,12 @@ class MonthName extends PureComponent {
 
 MonthName.propTypes = {
   month: dateType,
-  onScrollChange: PropTypes.func
+  onScrollChange: PropTypes.func,
+  locale: PropTypes.string
 };
 
 export default function MonthNames(props) {
-  const {scrollDate} = props;
+  const {scrollDate, locale} = props;
   const months = [];
   for (let i = 0; i < YEAR; i++) {
     const middleDay = set(scrollDate, {month: i, date: MIDDLE_DAY});
@@ -73,6 +74,7 @@ export default function MonthNames(props) {
           key={+month}
           month={month}
           onScrollChange={props.onScrollChange}
+          locale={locale}
         />
       ))}
       {props.currentRange &&
@@ -97,5 +99,6 @@ export default function MonthNames(props) {
 MonthNames.propTypes = {
   scrollDate: dateType,
   onScrollChange: PropTypes.func,
-  currentRange: PropTypes.arrayOf(dateType)
+  currentRange: PropTypes.arrayOf(dateType),
+  locale: PropTypes.string
 };

package/components/date-picker/month.js

@@ -5,6 +5,8 @@ import format from 'date-fns/format';
 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 styles from './date-picker.css';
@@ -12,6 +14,7 @@ import styles from './date-picker.css';
 export default function Month(props) {
   const start = props.month;
   const end = endOfMonth(start);
+  const {locale} = props;
 
   // pad with empty cells starting from last friday
   const weekday = getDay(start);
@@ -25,7 +28,7 @@ export default function Month(props) {
   return (
     <div className={styles.month}>
       <span className={styles.monthTitle}>
-        {format(props.month, 'MMMM')}
+        {format(props.month, 'LLLL', {locale})}
       </span>
       {days.map(date => (
         <Day
@@ -40,5 +43,6 @@ export default function Month(props) {
 }
 
 Month.propTypes = {
-  month: dateType
+  month: dateType,
+  locale: PropTypes.string
 };

package/components/date-picker/weekdays.js

@@ -5,13 +5,17 @@ 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 styles from './date-picker.css';
 
-export default function Weekdays() {
+export default function Weekdays(props) {
   const days = Object.keys(weekdays).
     map(key => startOfDay(setDay(new Date(), weekdays[key])));
 
+  const {locale} = props;
+
   return (
     <div className={styles.weekdays}>
       {days.map(day => (
@@ -24,9 +28,13 @@ export default function Weekdays() {
           )}
           key={+day}
         >
-          {format(day, 'EEEEEE')}
+          {format(day, 'EEEEEE', {locale})}
         </span>
       ))}
     </div>
   );
 }
+
+Weekdays.propTypes = {
+  locale: PropTypes.string
+};

package/components/dropdown-menu/dropdown-menu.js

@@ -93,6 +93,7 @@ const DropdownMenu = React.forwardRef(function DropdownMenu(
           id={listId}
           ariaLabel={ariaLabel || defaultAriaLabel}
           closeOnSelect
+          activateFirstItem
           data={data}
           onSelect={onSelect}
           {...menuProps}

package/components/dropdown-menu/dropdown-menu.test.js

@@ -66,8 +66,7 @@ describe('Dropdown Menu', () => {
   it('should add accessibility attributes to anchor', async () => {
     const wrapper = await mountAndWaitForMenuContent({
       anchor: 'Anchor text',
-      data: [{key: 'key1'}, {key: 'key2'}],
-      menuProps: {activateFirstItem: true}
+      data: [{key: 'key1'}, {key: 'key2'}]
     });
 
     const anchorProps = wrapper.update().find(Anchor).props();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "4.0.52",
+  "version": "4.0.56",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -55,7 +55,7 @@
     "test-ci": "karma start karma-ci.conf.js",
     "test-watch": "karma start karma-watch.conf.js",
     "prerelease-ci": "git pull",
-    "release-ci": "lerna publish --yes",
+    "release-ci": "lerna publish --no-verify-access --yes",
     "prepublishOnly": "pinst --disable",
     "postpublish": "pinst --enable"
   },
@@ -68,26 +68,26 @@
     "@babel/cli": "^7.15.7",
     "@babel/eslint-parser": "^7.15.8",
     "@jetbrains/eslint-config": "^5.3.1",
-    "@jetbrains/generator-ring-ui": "^4.0.40",
+    "@jetbrains/generator-ring-ui": "^4.0.43",
     "@jetbrains/stylelint-config": "^2.0.1",
-    "@primer/octicons": "^16.0.0",
-    "@storybook/addon-a11y": "6.3.11",
-    "@storybook/addon-docs": "6.3.10",
-    "@storybook/addon-essentials": "6.3.11",
+    "@primer/octicons": "^16.1.1",
+    "@storybook/addon-a11y": "6.3.12",
+    "@storybook/addon-docs": "6.3.12",
+    "@storybook/addon-essentials": "6.3.12",
     "@storybook/addon-storyshots": "6.3.2",
     "@storybook/addon-storyshots-puppeteer": "6.3.2",
-    "@storybook/addon-storysource": "6.3.11",
-    "@storybook/addons": "6.3.10",
-    "@storybook/builder-webpack5": "6.3.10",
-    "@storybook/client-api": "6.3.10",
-    "@storybook/core": "6.3.11",
-    "@storybook/html": "6.3.10",
-    "@storybook/manager-webpack5": "^6.3.10",
-    "@storybook/source-loader": "6.3.10",
-    "@storybook/theming": "6.3.10",
+    "@storybook/addon-storysource": "6.3.12",
+    "@storybook/addons": "6.3.12",
+    "@storybook/builder-webpack5": "6.3.12",
+    "@storybook/client-api": "6.3.12",
+    "@storybook/core": "6.3.12",
+    "@storybook/html": "6.3.12",
+    "@storybook/manager-webpack5": "^6.3.12",
+    "@storybook/source-loader": "6.3.12",
+    "@storybook/theming": "6.3.12",
     "@testing-library/react": "^12.1.2",
-    "@testing-library/user-event": "^13.3.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
+    "@testing-library/user-event": "^13.5.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.5",
     "angular": "^1.8.2",
     "angular-mocks": "^1.8.2",
     "angular-route": "^1.8.2",
@@ -98,23 +98,23 @@
     "chai-dom": "^1.10.0",
     "chai-enzyme": "1.0.0-beta.1",
     "cheerio": "^0.22.0",
-    "core-js": "^3.18.2",
+    "core-js": "^3.19.0",
     "enzyme": "^3.11.0",
     "eslint": "^7.32.0",
-    "eslint-import-resolver-webpack": "^0.13.1",
+    "eslint-import-resolver-webpack": "^0.13.2",
     "eslint-plugin-angular": "^4.1.0",
     "eslint-plugin-bdd": "^2.1.1",
-    "eslint-plugin-import": "^2.25.1",
+    "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.26.1",
     "events": "^3.3.0",
-    "html-webpack-plugin": "^5.3.2",
-    "husky": "^7.0.2",
+    "html-webpack-plugin": "^5.5.0",
+    "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
-    "imports-loader": "^3.0.0",
-    "jest": "~27.2.5",
+    "imports-loader": "^3.1.0",
+    "jest": "~27.3.1",
     "jest-teamcity": "^1.10.0",
-    "karma": "^6.3.4",
+    "karma": "^6.3.5",
     "karma-chrome-launcher": "3.1.0",
     "karma-mocha": "^2.0.1",
     "karma-sourcemap-loader": "^0.3.8",
@@ -123,7 +123,7 @@
     "lerna": "^4.0.0",
     "lint-staged": "^11.2.3",
     "merge-options": "^3.0.4",
-    "mocha": "^9.1.2",
+    "mocha": "^9.1.3",
     "pinst": "^2.1.6",
     "puppeteer": "^10.4.0",
     "raw-loader": "^4.0.2",
@@ -139,8 +139,8 @@
     "teamcity-service-messages": "^0.1.11",
     "terser-webpack-plugin": "^5.2.4",
     "wallaby-webpack": "^3.9.16",
-    "webpack": "^5.58.2",
-    "webpack-cli": "^4.9.0",
+    "webpack": "^5.59.1",
+    "webpack-cli": "^4.9.1",
     "xmlappend": "^1.0.4",
     "yo": "^4.3.0"
   },
@@ -148,17 +148,17 @@
     "core-js": ">=3.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "webpack": "^5.58.2"
+    "webpack": "^5.59.1"
   },
   "dependencies": {
     "@babel/core": "^7.15.8",
     "@jetbrains/angular-elastic": "^2.5.1",
     "@jetbrains/babel-preset-jetbrains": "^2.3.1",
     "@jetbrains/icons": "^3.17.1",
-    "@jetbrains/logos": "^1.4.24",
+    "@jetbrains/logos": "^1.4.25",
     "@jetbrains/postcss-require-hover": "^0.1.2",
     "@ungap/url-search-params": "^0.2.2",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^8.2.3",
     "babel-plugin-transform-define": "^2.0.1",
     "browserslist": "^4.16.6",
     "change-case": "^4.1.1",
@@ -178,15 +178,15 @@
     "focus-trap": "^6.7.1",
     "focus-visible": "^5.2.0",
     "highlight.js": "^10.7.2",
-    "html-loader": "^1.3.2",
+    "html-loader": "^3.0.0",
     "interpolate-loader": "^2.0.1",
-    "just-debounce-it": "^1.5.0",
-    "memoize-one": "^5.2.1",
-    "postcss": "^8.3.9",
+    "just-debounce-it": "^2.0.0",
+    "memoize-one": "^6.0.0",
+    "postcss": "^8.3.11",
     "postcss-calc": "^8.0.0",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-font-family-system-ui": "^5.0.0",
-    "postcss-loader": "^6.1.1",
+    "postcss-loader": "^6.2.0",
     "postcss-modules-values-replace": "^3.4.0",
     "postcss-preset-env": "^6.7.0",
     "prop-types": "^15.7.2",
@@ -194,12 +194,12 @@
     "react-movable": "^2.5.4",
     "react-virtualized": "^9.22.3",
     "react-waypoint": "^10.1.0",
-    "remark-breaks": "^3.0.1",
+    "remark-breaks": "^3.0.2",
     "remark-gfm": "^1.0.0",
     "scrollbar-width": "^3.1.1",
     "simply-uuid": "^1.0.1",
     "sniffr": "^1.2.0",
-    "style-loader": "~3.3.0",
+    "style-loader": "~3.3.1",
     "url-loader": "^4.1.1",
     "util-deprecate": "^1.0.2"
   },
@@ -207,5 +207,5 @@
     "node": ">=7.4",
     "npm": ">=6.0.0"
   },
-  "gitHead": "081813df7cd0a278be5c00c10286f34540409715"
+  "gitHead": "47f9adf1d43b1494f1df7af9ea28a00713c11696"
 }