@itwin/itwinui-react 2.12.6 → 2.12.8

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 2.12.8
+
+### Patch Changes
+
+- [#1576](https://github.com/iTwin/iTwinUI/pull/1576): Dropdown menus will now automatically become scrollable if there are too many menu items. Also added delay to submenu.
+- [#1578](https://github.com/iTwin/iTwinUI/pull/1578): Fixed missing animation in ComboBox.
+- [#1572](https://github.com/iTwin/iTwinUI/pull/1572): Adjusted borders and shadow values to be more prominent in dark theme.
+- [#1575](https://github.com/iTwin/iTwinUI/pull/1575): ProgressRadial now stays inside container when using size="x-small".
+
+## 2.12.7
+
+### Patch Changes
+
+- [#1545](https://github.com/iTwin/iTwinUI/pull/1545): `tableFilters.DateRangeFilter` now supports localizing the date picker using `translatedLabels.datePicker`.
+
 ## 2.12.6
 
 ### Patch Changes

package/cjs/core/ComboBox/ComboBoxDropdown.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { PopoverProps } from '../utils/index.js';
+import 'tippy.js/animations/shift-away.css';
 declare type ComboBoxDropdownProps = PopoverProps & {
     children: JSX.Element;
 };

package/cjs/core/ComboBox/ComboBoxDropdown.js

@@ -31,6 +31,7 @@ exports.ComboBoxDropdown = void 0;
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
 const helpers_js_1 = require("./helpers.js");
+require("tippy.js/animations/shift-away.css");
 exports.ComboBoxDropdown = React.forwardRef((props, forwardedRef) => {
     const { children, ...rest } = props;
     const { isOpen } = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxStateContext);

package/cjs/core/DatePicker/DatePicker.d.ts

@@ -1,14 +1,13 @@
 /// <reference types="react" />
 import type { TimePickerProps } from '../TimePicker/index.js';
+export declare type DatePickerLocalizedNames = {
+    [key in 'months' | 'shortDays' | 'days']: string[];
+};
 /**
  * Generate localized months and days strings using `Intl.DateTimeFormat` for passed locale to use in DatePicker component.
  * If locale is not passed, browser locale will be used.
  */
-export declare const generateLocalizedStrings: (locale?: string) => {
-    months: string[];
-    shortDays: string[];
-    days: string[];
-};
+export declare const generateLocalizedStrings: (locale?: string) => DatePickerLocalizedNames;
 export declare type DateRangePickerProps = {
     /**
      * Enable date range support.
@@ -42,9 +41,7 @@ export declare type DatePickerProps = {
      * Pass localized week days (start from sunday) and months.
      * Use helper function `generateLocalizedStrings` to generate strings using `Intl.DateTimeFormat`.
      */
-    localizedNames?: {
-        [key in 'months' | 'shortDays' | 'days']: string[];
-    };
+    localizedNames?: DatePickerLocalizedNames;
     /**
      * Set focus on selected day or today.
      * @default false

package/cjs/core/DropdownMenu/DropdownMenu.js

@@ -22,6 +22,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownMenu = void 0;
 /*---------------------------------------------------------------------------------------------
@@ -29,6 +32,7 @@ exports.DropdownMenu = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
 const index_js_2 = require("../Menu/index.js");
 /**
@@ -70,7 +74,7 @@ const DropdownMenu = (props) => {
         onHide === null || onHide === void 0 ? void 0 : onHide(instance);
     }, [onHide]);
     (0, index_js_1.useTheme)();
-    return (React.createElement(index_js_1.Popover, { content: React.createElement(index_js_2.Menu, { className: className, style: style, role: role, id: id }, React.useMemo(() => menuItems(close), [menuItems, close])), visible: trigger === undefined ? isVisible : undefined, onClickOutside: close, placement: placement, onShow: onShowHandler, onHide: onHideHandler, trigger: visible === undefined ? trigger : undefined, ...rest }, React.cloneElement(children, {
+    return (React.createElement(index_js_1.Popover, { content: React.createElement(index_js_2.Menu, { className: (0, classnames_1.default)('iui-scroll', className), style: style, role: role, id: id }, React.useMemo(() => menuItems(close), [menuItems, close])), visible: trigger === undefined ? isVisible : undefined, onClickOutside: close, placement: placement, onShow: onShowHandler, onHide: onHideHandler, trigger: visible === undefined ? trigger : undefined, ...rest }, React.cloneElement(children, {
         ref: (0, index_js_1.mergeRefs)(targetRef, props.children.ref),
         onClick: (args) => {
             var _a, _b;

package/cjs/core/Menu/MenuItem.js

@@ -105,13 +105,13 @@ exports.MenuItem = React.forwardRef((props, ref) => {
                 className: (0, classnames_1.default)(badge.props.className, 'iui-icon'),
             })));
     return subMenuItems.length === 0 ? (listItem) : (React.createElement(MenuItemContext.Provider, { value: { ref: menuItemRef } },
-        React.createElement(index_js_1.Popover, { placement: 'right-start', visible: isSubmenuVisible, appendTo: 'parent', content: React.createElement("div", { onMouseLeave: () => setIsSubmenuVisible(false), onBlur: (e) => {
+        React.createElement(index_js_1.Popover, { placement: 'right-start', visible: isSubmenuVisible, appendTo: 'parent', delay: 100, content: React.createElement("div", { onMouseLeave: () => setIsSubmenuVisible(false), onBlur: (e) => {
                     var _a, _b;
                     !!(e.relatedTarget instanceof Node) &&
                         !((_a = subMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) &&
                         !((_b = subMenuRef.current) === null || _b === void 0 ? void 0 : _b.isEqualNode(e.relatedTarget)) &&
                         setIsSubmenuVisible(false);
                 } },
-                React.createElement(Menu_js_1.Menu, { ref: subMenuRef }, subMenuItems)) }, listItem)));
+                React.createElement(Menu_js_1.Menu, { ref: subMenuRef, className: 'iui-scroll' }, subMenuItems)) }, listItem)));
 });
 exports.default = exports.MenuItem;

package/cjs/core/Table/filters/DateRangeFilter/DatePickerInput.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { LabeledInputProps } from '../../../LabeledInput/index.js';
+import type { DatePickerLocalizedNames } from '../../../DatePicker/DatePicker.js';
 export declare type DatePickerInputProps = {
     date?: Date;
     onChange: (date?: Date) => void;
@@ -13,6 +14,10 @@ export declare type DatePickerInputProps = {
      * The 'to' date for the 'from' DatePickerInput or the 'from' date for the 'to' DatePickerInput
      */
     selectedDate?: Date;
+    /**
+     * Months, short days and days localized names for DatePicker
+     */
+    localizedNames?: DatePickerLocalizedNames;
 } & Omit<LabeledInputProps, 'value' | 'onChange' | 'svgIcon' | 'displayStyle'>;
 declare const DatePickerInput: (props: DatePickerInputProps) => JSX.Element;
 export default DatePickerInput;

package/cjs/core/Table/filters/DateRangeFilter/DatePickerInput.js

@@ -33,7 +33,7 @@ const index_js_2 = require("../../../LabeledInput/index.js");
 const index_js_3 = require("../../../DatePicker/index.js");
 const index_js_4 = require("../../../Buttons/index.js");
 const DatePickerInput = (props) => {
-    const { onChange, date, parseInput, formatDate, isFromOrTo, selectedDate, ...rest } = props;
+    const { onChange, date, parseInput, formatDate, isFromOrTo, selectedDate, localizedNames, ...rest } = props;
     const isDateDisabled = (date) => {
         if (isFromOrTo === 'to') {
             return (0, index_js_1.isBefore)(date, selectedDate);
@@ -68,7 +68,7 @@ const DatePickerInput = (props) => {
             onChange(parsedDate);
         }
     }, [onChange, parseInput]);
-    return (React.createElement(index_js_1.Popover, { content: React.createElement(index_js_3.DatePicker, { date: date, onChange: onDateSelected, setFocus: true, isDateDisabled: isDateDisabled }), placement: 'bottom', visible: isVisible, onClickOutside: (_, e) => {
+    return (React.createElement(index_js_1.Popover, { content: React.createElement(index_js_3.DatePicker, { date: date, onChange: onDateSelected, setFocus: true, isDateDisabled: isDateDisabled, localizedNames: localizedNames }), placement: 'bottom', visible: isVisible, onClickOutside: (_, e) => {
             var _a;
             if (!((_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
                 close();

package/cjs/core/Table/filters/DateRangeFilter/DateRangeFilter.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
 import type { FilterButtonBarTranslation } from '../FilterButtonBar.js';
 import type { TableFilterProps } from '../types.js';
+import type { DatePickerLocalizedNames } from '../../../DatePicker/DatePicker.js';
 export declare type DateRangeTranslation = {
     from: string;
     to: string;
+    datePicker?: DatePickerLocalizedNames;
 };
 export declare type DateRangeFilterProps<T extends Record<string, unknown>> = TableFilterProps<T> & {
     formatDate?: (date: Date) => string;

package/cjs/core/Table/filters/DateRangeFilter/DateRangeFilter.js

@@ -87,8 +87,8 @@ const DateRangeFilter = (props) => {
         }
     };
     return (React.createElement(BaseFilter_js_1.BaseFilter, null,
-        React.createElement(DatePickerInput_js_1.default, { label: translatedStrings.from, date: from, onChange: onFromChange, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder, selectedDate: to, isFromOrTo: 'from', setFocus: true }),
-        React.createElement(DatePickerInput_js_1.default, { label: translatedStrings.to, date: to, onChange: onToChange, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder, selectedDate: from, isFromOrTo: 'to' }),
+        React.createElement(DatePickerInput_js_1.default, { label: translatedStrings.from, date: from, onChange: onFromChange, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder, selectedDate: to, isFromOrTo: 'from', localizedNames: translatedStrings.datePicker, setFocus: true }),
+        React.createElement(DatePickerInput_js_1.default, { label: translatedStrings.to, date: to, onChange: onToChange, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder, selectedDate: from, isFromOrTo: 'to', localizedNames: translatedStrings.datePicker }),
         React.createElement(FilterButtonBar_js_1.FilterButtonBar, { setFilter: () => setFilter([from, to]), clearFilter: clearFilter, translatedLabels: translatedLabels })));
 };
 exports.DateRangeFilter = DateRangeFilter;