diff --git a/packages/react-timerange-picker/README.md b/packages/react-timerange-picker/README.md
index ae191dd..24da70f 100644
--- a/packages/react-timerange-picker/README.md
+++ b/packages/react-timerange-picker/README.md
@@ -99,7 +99,7 @@ Displays an input field complete with custom inputs, native input and a clock.
| clearAriaLabel | `aria-label` for the clear button. | n/a | `"Clear value"` |
| clearIcon | Content of the clear button. Setting the value explicitly to `null` will hide the icon. | (default icon) |
` element. | n/a | String: `"class1 class2"` Array of strings: `["class1", "class2 class3"]` |
+| clockProps | Props to pass to React-Clock component. | n/a | See [React-Clock documentation](https://github.com/wojtekmaj/react-clock) |
| clockIcon | Content of the clock button. Setting the value explicitly to `null` will hide the icon. | (default icon) | String: `"Clock"` React element: ` ` React function: `ClockIcon` |
| closeClock | Whether to close the clock on value selection. **Note**: It's recommended to use `shouldCloseClock` function instead. | `true` | `false` |
| data-testid | `data-testid` attribute for the main React-TimeRange-Picker `` element. | n/a | `"timerange-picker"` |
diff --git a/packages/react-timerange-picker/src/TimeRangePicker.spec.tsx b/packages/react-timerange-picker/src/TimeRangePicker.spec.tsx
index cf505c5..df6fc07 100644
--- a/packages/react-timerange-picker/src/TimeRangePicker.spec.tsx
+++ b/packages/react-timerange-picker/src/TimeRangePicker.spec.tsx
@@ -187,10 +187,12 @@ describe('TimeRangePicker', () => {
expect(wrapper).toHaveClass('react-timerange-picker--open');
});
- it('applies clockClassName to the clock when given a string', () => {
+ it('applies clock className to the clock when given a string', () => {
const clockClassName = 'testClassName';
- const { container } = render( );
+ const { container } = render(
+ ,
+ );
const clock = container.querySelector('.react-clock');
diff --git a/packages/react-timerange-picker/src/TimeRangePicker.tsx b/packages/react-timerange-picker/src/TimeRangePicker.tsx
index b57c9d2..7510087 100644
--- a/packages/react-timerange-picker/src/TimeRangePicker.tsx
+++ b/packages/react-timerange-picker/src/TimeRangePicker.tsx
@@ -102,12 +102,9 @@ export type TimeRangePickerProps = {
*/
clockAriaLabel?: string;
/**
- * Class name(s) that will be added along with `"react-clock"` to the main React-Clock `` element.
- *
- * @example 'class1 class2'
- * @example ['class1', 'class2 class3']
+ * Props to pass to React-Clock component.
*/
- clockClassName?: ClassName;
+ clockProps?: ClockProps;
/**
* Content of the clock button. Setting the value explicitly to `null` will hide the icon.
*
@@ -326,8 +323,7 @@ export type TimeRangePickerProps = {
* @example ["22:15:00", "23:45:00"]
*/
value?: LooseValue;
-} & ClockProps &
- Omit;
+} & Omit;
export default function TimeRangePicker(props: TimeRangePickerProps) {
const {
@@ -602,21 +598,14 @@ export default function TimeRangePicker(props: TimeRangePickerProps) {
return null;
}
- const {
- clockClassName,
- className: timeRangePickerClassName, // Unused, here to exclude it from clockProps
- onChange: onChangeProps, // Unused, here to exclude it from clockProps
- portalContainer,
- value,
- ...clockProps
- } = props;
+ const { clockProps, portalContainer, value } = props;
const className = `${baseClassName}__clock`;
const classNames = clsx(className, `${className}--${isOpen ? 'open' : 'closed'}`);
const [valueFrom] = Array.isArray(value) ? value : [value];
- const clock = ;
+ const clock = ;
return portalContainer ? (
createPortal(
diff --git a/test/Test.tsx b/test/Test.tsx
index d979afc..b8425c6 100644
--- a/test/Test.tsx
+++ b/test/Test.tsx
@@ -83,7 +83,7 @@ export default function Test() {
{...ariaLabelProps}
{...placeholderProps}
className="myCustomTimeRangePickerClassName"
- clockClassName="myCustomClockClassName"
+ clockProps={{ className: 'myCustomClockClassName' }}
data-testid="myCustomTimeRangePicker"
disabled={disabled}
locale={locale}