@itwin/itwinui-react 2.12.5 → 2.12.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 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
+
+- [#1516](https://github.com/iTwin/iTwinUI/pull/1516): Update SearchBox placeholder color to match Input.
+
 ## 2.12.5
 
 ### Patch Changes

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/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;