I am using the useTimeField hook to crate a TimeField-component in my component library with Storybook.
The code is almost the same like in the Example here: https://react-spectrum.adobe.com/react-aria/useTimeField.html
but I was not sure about the Props so I did it like this:
TimeField.tsx
import type { TimeFieldStateOptions } from "react-stately";
import type { Time } from "@internationalized/date";
import classNames from "classnames";
import { useRef } from "react";
import { useLocale, useTimeField } from "react-aria";
import { useTimeFieldState } from "react-stately";
import { Segment } from "./Segment";
export type TimeFieldProps = TimeFieldStateOptions<Time>;
export const TimeField = (props: TimeFieldProps) => {
const { locale } = useLocale();
const state = useTimeFieldState({
...props,
locale,
});
const ref = useRef(null);
const { labelProps, fieldProps } = useTimeField(props, state, ref);
return (
<div className="timefield">
{props.label && (
<label className="mb-1 form-label" {...labelProps}>
{props.label}
{props.isRequired && " *"}
</label>
)}
<div
{...fieldProps}
ref={ref}
className={classNames("field form-control", {
"is-invalid": state.isInvalid,
})}
>
{state.segments.map((segment, i) => (
<Segment key={i} segment={segment} state={state} />
))}
</div>
</div>
);
};
The component is being exported at the top index.ts
export { TimeField, type TimeFieldProps } from "./components/md/TimeField";
It works works fine in Storybook, but when I try to use the component in my Frontend I get this error:
Uncaught TypeError: $kgI3C$swchelperscjs_class_private_field_initcjs._ is not a function
In my component library's package.json I have:
"react-stately": "^3.27.1",
"react-aria": "^3.29.1",
at the dependencies node and...
"@internationalized/date": ">=3.5.0",
at the peerDependencies node.
When I re-create the component in my Frontend it works fine.