@itwin/itwinui-react 2.12.6 → 2.12.8

package/esm/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/esm/core/ComboBox/ComboBoxDropdown.js

@@ -5,6 +5,7 @@
 import * as React from 'react';
 import { Popover, useSafeContext } from '../utils/index.js';
 import { ComboBoxStateContext, ComboBoxActionContext, ComboBoxRefsContext, } from './helpers.js';
+import 'tippy.js/animations/shift-away.css';
 export const ComboBoxDropdown = React.forwardRef((props, forwardedRef) => {
     const { children, ...rest } = props;
     const { isOpen } = useSafeContext(ComboBoxStateContext);

package/esm/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/esm/core/DropdownMenu/DropdownMenu.js

@@ -3,6 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
+import cx from 'classnames';
 import { useTheme, Popover, mergeRefs } from '../utils/index.js';
 import { Menu } from '../Menu/index.js';
 /**
@@ -44,7 +45,7 @@ export const DropdownMenu = (props) => {
         onHide === null || onHide === void 0 ? void 0 : onHide(instance);
     }, [onHide]);
     useTheme();
-    return (React.createElement(Popover, { content: React.createElement(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(Popover, { content: React.createElement(Menu, { className: cx('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: mergeRefs(targetRef, props.children.ref),
         onClick: (args) => {
             var _a, _b;

package/esm/core/Menu/MenuItem.js

@@ -76,13 +76,13 @@ export const MenuItem = React.forwardRef((props, ref) => {
                 className: cx(badge.props.className, 'iui-icon'),
             })));
     return subMenuItems.length === 0 ? (listItem) : (React.createElement(MenuItemContext.Provider, { value: { ref: menuItemRef } },
-        React.createElement(Popover, { placement: 'right-start', visible: isSubmenuVisible, appendTo: 'parent', content: React.createElement("div", { onMouseLeave: () => setIsSubmenuVisible(false), onBlur: (e) => {
+        React.createElement(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, { ref: subMenuRef }, subMenuItems)) }, listItem)));
+                React.createElement(Menu, { ref: subMenuRef, className: 'iui-scroll' }, subMenuItems)) }, listItem)));
 });
 export default MenuItem;

package/esm/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/esm/core/Table/filters/DateRangeFilter/DatePickerInput.js

@@ -8,7 +8,7 @@ import { LabeledInput } from '../../../LabeledInput/index.js';
 import { DatePicker } from '../../../DatePicker/index.js';
 import { IconButton } from '../../../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 isBefore(date, selectedDate);
@@ -43,7 +43,7 @@ const DatePickerInput = (props) => {
             onChange(parsedDate);
         }
     }, [onChange, parseInput]);
-    return (React.createElement(Popover, { content: React.createElement(DatePicker, { date: date, onChange: onDateSelected, setFocus: true, isDateDisabled: isDateDisabled }), placement: 'bottom', visible: isVisible, onClickOutside: (_, e) => {
+    return (React.createElement(Popover, { content: React.createElement(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/esm/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/esm/core/Table/filters/DateRangeFilter/DateRangeFilter.js

@@ -58,7 +58,7 @@ export const DateRangeFilter = (props) => {
         }
     };
     return (React.createElement(BaseFilter, null,
-        React.createElement(DatePickerInput, { label: translatedStrings.from, date: from, onChange: onFromChange, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder, selectedDate: to, isFromOrTo: 'from', setFocus: true }),
-        React.createElement(DatePickerInput, { label: translatedStrings.to, date: to, onChange: onToChange, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder, selectedDate: from, isFromOrTo: 'to' }),
+        React.createElement(DatePickerInput, { 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, { 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, { setFilter: () => setFilter([from, to]), clearFilter: clearFilter, translatedLabels: translatedLabels })));
 };