@vygruppen/spor-react 13.0.0 → 13.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "13.0.0",
+  "version": "13.0.1",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -46,9 +46,9 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
-    "@vygruppen/spor-design-tokens": "4.3.3",
     "@vygruppen/spor-icon-react": "5.0.0",
-    "@vygruppen/spor-loader": "0.7.0"
+    "@vygruppen/spor-loader": "0.7.0",
+    "@vygruppen/spor-design-tokens": "4.3.3"
   },
   "devDependencies": {
     "@react-types/datepicker": "^3.10.0",

package/src/accordion/Accordion.tsx

@@ -56,7 +56,7 @@ export const Accordion = ({
   ref,
   ...props
 }: AccordionProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const { variant = "core", children, gap = 2, css, ...rest } = props;
   const recipe = useSlotRecipe({ key: "accordion" });
@@ -77,7 +77,7 @@ export const AccordionItemTrigger = function AccordionItemTrigger({
   ref,
   ...props
 }: AccordionItemTriggerProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) {
   const {
     startElement,
@@ -115,7 +115,7 @@ export const AccordionItemContent = function AccordionItemContent({
   ref,
   ...props
 }: AccordionItemContentProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) {
   const {
     children,

package/src/accordion/Expandable.tsx

@@ -26,7 +26,7 @@ export const Expandable = ({
   ref,
   ...props
 }: ExpandableProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const { title, children, headingLevel, startElement, ...rest } = props;
   return (

package/src/alert/Alert.tsx

@@ -47,7 +47,7 @@ export const Alert = ({
   ref,
   ...props
 }: AlertProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const {
     title,

package/src/alert/AlertIcon.tsx

@@ -30,7 +30,7 @@ export const AlertIcon = ({
   variant,
   customIcon: CustomAlertIcon,
 }: AlertIconProps & {
-  ref?: React.RefObject<SVGSVGElement>;
+  ref?: React.Ref<SVGSVGElement>;
 }) => {
   const { t } = useTranslation();
 

package/src/alert/ExpandableAlert.tsx

@@ -63,7 +63,7 @@ export const ExpandableAlert = ({
   ref,
   ...props
 }: ExpandableAlertProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const {
     variant = "info",

package/src/alert/ServiceAlert.tsx

@@ -61,7 +61,7 @@ export const ServiceAlert = ({
   ref,
   ...props
 }: ServiceAlertProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const {
     variant = "service",

package/src/breadcrumb/Breadcrumb.tsx

@@ -26,7 +26,7 @@ export const Breadcrumb = ({
   css,
   ...props
 }: BreadcrumbRootProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const validChildren = React.Children.toArray(children).filter((element) =>
     React.isValidElement(element),

package/src/button/Button.tsx

@@ -118,7 +118,7 @@ export const Button = ({
   children,
   ...rest
 }: ButtonProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) => {
   const { t } = useTranslation();
 

package/src/button/ButtonGroup.tsx

@@ -52,7 +52,7 @@ export const ButtonGroup = ({
   ref,
   ...props
 }: ButtonGroupProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const recipe = useRecipe({ key: "buttonGroup" });
   const [recipeProps, restProps] = recipe.splitVariantProps(props);

package/src/button/Clipboard.tsx

@@ -24,7 +24,7 @@ const ClipboardIcon = ({
   ref,
   ...props
 }: ChakraClipboard.IndicatorProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   return (
     <ChakraClipboard.Indicator
@@ -41,7 +41,7 @@ const ClipboardCopyText = ({
   ref,
   ...props
 }: ChakraClipboard.IndicatorProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const { t } = useTranslation();
   return (
@@ -61,7 +61,7 @@ export const ClipboardButton = ({
   ref,
   ...props
 }: ClipboardButtonProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) => {
   return (
     <ChakraClipboard.Trigger asChild>

package/src/button/CloseButton.tsx

@@ -31,7 +31,7 @@ export const CloseButton = ({
   size = "sm",
   ...props
 }: CloseButtonProps & {
-  ref?: React.RefObject<HTMLButtonElement | null>;
+  ref?: React.Ref<HTMLButtonElement | null>;
 }) => {
   const { t } = useTranslation();
   return (

package/src/button/FloatingActionButton.tsx

@@ -45,7 +45,7 @@ export const FloatingActionButton = ({
   placement = "bottom right",
   ...props
 }: FloatingActionButtonProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) => {
   const scrollDirection = useScrollDirection();
 

package/src/button/IconButton.tsx

@@ -60,7 +60,7 @@ export const IconButton = ({
   ref,
   ...props
 }: IconButtonProps & {
-  ref?: React.RefObject<HTMLButtonElement | null>;
+  ref?: React.Ref<HTMLButtonElement | null>;
 }) => {
   const { icon, size = "sm", loading = false, ...rest } = props;
   return (

package/src/calendar/CalendarContext.tsx

@@ -34,7 +34,7 @@ type BaseCalendarState = {
   prevButtonProps: AriaButtonProps<"button">;
   startValue: CalendarDate | null;
   isSelectingRange: boolean;
-  ref?: React.RefObject<HTMLDivElement | null>;
+  ref?: React.Ref<HTMLDivElement | null>;
 };
 
 type SingleCalendarState = BaseCalendarState & {

package/src/color-mode/color-mode.tsx

@@ -51,7 +51,7 @@ export const ColorModeButton = function ColorModeButton({
   ref,
   ...props
 }: ColorModeButtonProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) {
   const { toggleColorMode } = useColorMode();
   return (

package/src/datepicker/CalendarTriggerButton.tsx

@@ -28,7 +28,7 @@ export const CalendarTriggerButton = ({
   onPress: _,
   ...buttonProps
 }: CalendarTriggerButtonProps & {
-  ref?: React.RefObject<HTMLDivElement | null>;
+  ref?: React.Ref<HTMLDivElement | null>;
 }) => {
   const { t } = useTranslation();
 

package/src/datepicker/DateField.tsx

@@ -34,7 +34,7 @@ export const DateField = ({
   ref: externalRef,
   ...props
 }: DateFieldProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const locale = useCurrentLocale();
 

package/src/datepicker/DatePicker.tsx

@@ -76,7 +76,7 @@ export const DatePicker = ({
   css,
   ...props
 }: DatePickerProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const chakraFieldProps = useFieldContext();
   const state = useDatePickerState({

package/src/datepicker/DateTimeSegment.tsx

@@ -27,7 +27,7 @@ export const DateTimeSegment = ({
   ariaDescription,
   variant,
 }: DateTimeSegmentProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const internalRef = useRef(null);
   const ref = externalRef ?? internalRef;

package/src/datepicker/StyledField.tsx

@@ -21,7 +21,7 @@ export const StyledField = function StyledField({
   ref,
   ...props
 }: StyledFieldProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) {
   const {
     children,

package/src/dialog/Dialog.tsx

@@ -15,7 +15,7 @@ export const DialogContent = ({
   ref,
   ...props
 }: DialogContentProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const {
     children,
@@ -41,7 +41,7 @@ export const DialogCloseTrigger = function DialogCloseTrigger({
   ref,
   ...props
 }: ChakraDialog.CloseTriggerProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) {
   return (
     <ChakraDialog.CloseTrigger ref={ref} position="absolute" {...props} asChild>

package/src/dialog/Drawer.tsx

@@ -58,7 +58,7 @@ export const DrawerContent = ({
   ref,
   ...props
 }: DrawerContentProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const {
     children,
@@ -127,7 +127,7 @@ export const DrawerCloseTrigger = function DrawerCloseTrigger({
   ref,
   ...props
 }: DrawerCloseTriggerProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) {
   const { showText = false, ...rest } = props;
   const { size } = useRootDrawerProps();
@@ -151,7 +151,7 @@ export const DrawerBackTrigger = ({
   ref,
   ...props
 }: ChakraDrawer.CloseTriggerProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) => {
   const { t } = useTranslation();
   return (
@@ -169,7 +169,7 @@ export const DrawerFullScreenHeader = ({
   ref,
   ...props
 }: DrawerFullScreenHeaderProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const { backTrigger = true, closeTrigger = true, children } = props;
   return (

package/src/input/AttachedInputs.tsx

@@ -46,7 +46,7 @@ export const AttachedInputs = ({
   ref,
   ...props
 }: AttachedInputsProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const recipe = useRecipe({ key: "attachedInputs" });
   const [recipeProps, { onFlip, flipAriaLabel, ...restProps }] =

package/src/input/Autocomplete.tsx

@@ -27,7 +27,7 @@ type Props = {
   loading?: boolean;
   emptyLabel?: React.ReactNode;
   openOnFocus?: boolean;
-  ref?: React.RefObject<HTMLInputElement | null>;
+  ref?: React.Ref<HTMLInputElement | null>;
 } & Omit<ComboboxRootProps, "collection"> &
   FieldProps;
 

package/src/input/CardSelect.tsx

@@ -22,7 +22,7 @@ export const CardSelectContent = ({
   children,
   ...props
 }: StaticCardProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   return (
     <Portal>
@@ -75,7 +75,7 @@ export const CardSelectTrigger = ({
   children,
   ...props
 }: CardSelectTriggerProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) => {
   const ChevronIcon =
     size === "sm" ? DropdownDownFill18Icon : DropdownDownFill24Icon;

package/src/input/Checkbox.tsx

@@ -33,7 +33,7 @@ export const Checkbox = ({
   ref,
   ...props
 }: CheckboxProps & {
-  ref?: React.RefObject<HTMLInputElement>;
+  ref?: React.Ref<HTMLInputElement>;
 }) => {
   const { children, inputProps, rootRef, ...rest } = props;
   return (

package/src/input/ChoiceChip.tsx

@@ -56,7 +56,7 @@ export const ChoiceChip = ({
   onCheckedChange,
   ...rootProps
 }: ChoiceChipProps & {
-  ref?: React.RefObject<HTMLInputElement>;
+  ref?: React.Ref<HTMLInputElement>;
 }) => {
   return (
     <CheckboxCard.Root

package/src/input/CountryCodeSelect.tsx

@@ -41,7 +41,7 @@ export const CountryCodeSelect = ({
   ref,
   ...props
 }: CountryCodeSelectProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const { t } = useTranslation();
 

package/src/input/Field.tsx

@@ -84,7 +84,7 @@ export const Field = ({
   ref,
   ...props
 }: FieldProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const {
     label,
@@ -152,7 +152,7 @@ export const FieldErrorText = ({
   ref,
   ...props
 }: ChakraField.ErrorTextProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   return (
     <ChakraField.ErrorText ref={ref}>{props.children}</ChakraField.ErrorText>

package/src/input/FloatingLabel.tsx

@@ -4,7 +4,7 @@ export const FloatingLabel = ({
   ref,
   ...props
 }: FieldLabelProps & {
-  ref?: React.RefObject<HTMLLabelElement | null>;
+  ref?: React.Ref<HTMLLabelElement | null>;
 }) => <Field.Label ref={ref} {...props} css={floatingLabelStyles} />;
 
 const floatingLabelStyles = defineStyle({

package/src/input/Input.tsx

@@ -77,7 +77,7 @@ export const Input = ({
   labelAsChild,
   ...props
 }: InputProps & {
-  ref?: React.RefObject<HTMLInputElement | null>;
+  ref?: React.Ref<HTMLInputElement | null>;
 }) => {
   const recipe = useRecipe({ key: "input" });
   const [recipeProps, restProps] = recipe.splitVariantProps(props);

package/src/input/NativeSelect.tsx

@@ -43,7 +43,7 @@ export const NativeSelect = function NativeSelect({
   ref,
   ...props
 }: NativeSelectdProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) {
   const {
     children,

package/src/input/NumericStepper.tsx

@@ -67,7 +67,7 @@ export const NumericStepper = ({
   ref,
   ...props
 }: NumericStepperProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const {
     name: nameProperty,
@@ -218,7 +218,7 @@ const VerySmallButton = ({
   ref,
   ...props
 }: VerySmallButtonProps & {
-  ref?: React.RefObject<HTMLButtonElement | null>;
+  ref?: React.Ref<HTMLButtonElement | null>;
 }) => {
   const { withStepLabel = false, ...rest } = props;
 

package/src/input/PasswordInput.tsx

@@ -46,7 +46,7 @@ export const PasswordInput = ({
   ref,
   ...props
 }: PasswordInputProps & {
-  ref?: React.RefObject<HTMLInputElement>;
+  ref?: React.Ref<HTMLInputElement>;
 }) => {
   const {
     defaultVisible,
@@ -94,7 +94,7 @@ const VisibilityTrigger = ({
   ref,
   ...props
 }: ButtonProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) => {
   return (
     <Button

package/src/input/PhoneNumberInput.tsx

@@ -45,7 +45,7 @@ export const PhoneNumberInput = ({
   ref,
   ...props
 }: PhoneNumberInputProps & {
-  ref?: React.RefObject<HTMLInputElement>;
+  ref?: React.Ref<HTMLInputElement>;
 }) => {
   const {
     label: externalLabel,

package/src/input/Popover.tsx

@@ -69,7 +69,7 @@ export const Popover = ({
   hasBackdrop = true,
   containerPadding = 12,
 }: PopoverProps & {
-  ref?: React.RefObject<HTMLDivElement | null>;
+  ref?: React.Ref<HTMLDivElement | null>;
 }) => {
   const internalRef = useRef<HTMLDivElement>(null);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/input/Radio.tsx

@@ -32,7 +32,7 @@ export const Radio = ({
   ref,
   ...props
 }: RadioProps & {
-  ref?: React.RefObject<HTMLInputElement>;
+  ref?: React.Ref<HTMLInputElement>;
 }) => {
   const { children, inputProps, rootRef, ...rest } = props;
 
@@ -55,7 +55,7 @@ export const RadioGroup = ({
   ref,
   ...props
 }: RadioGroupProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   return <ChakraRadioGroup.Root ref={ref} {...props} aria-labelledby="" />;
 };

package/src/input/SearchInput.tsx

@@ -22,7 +22,7 @@ export const SearchInput = ({
   ref,
   ...props
 }: SearchInputProps & {
-  ref?: React.RefObject<HTMLInputElement>;
+  ref?: React.Ref<HTMLInputElement>;
 }) => {
   const { t } = useTranslation();
   const { variant = "core", onReset, label, value } = props;

package/src/input/Select.tsx

@@ -61,7 +61,7 @@ export const Select = ({
   ref,
   ...props
 }: SelectProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const {
     variant = "core",
@@ -126,7 +126,7 @@ export const SelectItem = ({
   ref,
   ...props
 }: SelectItemProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const { item, children, description, ...rest } = props;
   const recipe = useSlotRecipe({ key: "select" });
@@ -158,7 +158,7 @@ export const SelectItemGroup = function SelectItemGroup({
   ref,
   ...props
 }: SelectItemGroupProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) {
   const { children, label, ...rest } = props;
   return (
@@ -178,7 +178,7 @@ export const SelectTrigger = function SelectTrigger({
   ref,
   ...props
 }: SelectTriggerProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) {
   const { children, clearable, ...rest } = props;
   const recipe = useSlotRecipe({ key: "select" });
@@ -209,7 +209,7 @@ const SelectClearTrigger = function SelectClearTrigger({
   ref,
   ...props
 }: SelectClearTriggerProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) {
   return (
     <ChakraSelect.ClearTrigger asChild {...props} ref={ref}>
@@ -233,7 +233,7 @@ export const SelectContent = function SelectContent({
   ref,
   ...props
 }: SelectContentProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) {
   const { portalled = true, portalRef, baseStyle, ...rest } = props;
   return (
@@ -255,7 +255,7 @@ export const SelectValueText = function SelectValueText({
   ref,
   ...props
 }: SelectValueTextProps & {
-  ref?: React.RefObject<HTMLSpanElement>;
+  ref?: React.Ref<HTMLSpanElement>;
 }) {
   const { children, withPlaceholder, placeholder, ...rest } = props;
   return (

package/src/input/Switch.tsx

@@ -49,7 +49,7 @@ export const Switch = ({
   ref,
   ...props
 }: SwitchProps & {
-  ref?: React.RefObject<HTMLInputElement>;
+  ref?: React.Ref<HTMLInputElement>;
 }) => {
   const {
     rootRef,

package/src/input/Textarea.tsx

@@ -60,7 +60,7 @@ export const Textarea = ({
   ref,
   ...props
 }: TextareaProps & {
-  ref?: React.RefObject<HTMLTextAreaElement>;
+  ref?: React.Ref<HTMLTextAreaElement>;
 }) => {
   const {
     label,

package/src/input/useFLoatingInputState.tsx

@@ -8,7 +8,7 @@ export type UseFloatingInputStateProps<
   onFocus?: (event: FocusEvent<T>) => void;
   onBlur?: (event: FocusEvent<T>) => void;
   onChange?: (event: ChangeEvent<T>) => void;
-  inputRef?: React.RefObject<T>;
+  inputRef?: React.Ref<T>;
 };
 
 export function useFloatingInputState<

package/src/layout/PressableCard.tsx

@@ -45,7 +45,7 @@ export const PressableCard = ({
   ref,
   ...props
 }: PressableCardProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) => {
   const recipe = useRecipe({ key: "pressableCard" });
   const [recipeProps, restProps] = recipe.splitVariantProps(props);

package/src/layout/RadioCard.tsx

@@ -42,7 +42,7 @@ export const RadioCard = ({
   ref,
   ...props
 }: RadioCardItemProps & {
-  ref?: React.RefObject<HTMLInputElement>;
+  ref?: React.Ref<HTMLInputElement>;
 }) => {
   const { inputProps, children } = props;
   const uniqueId = useId();
@@ -79,7 +79,7 @@ export const RadioCardGroup = ({
   ref,
   ...props
 }: RadioCardRootProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const {
     children,

package/src/layout/Separator.tsx

@@ -9,7 +9,7 @@ export const Separator = ({
   ref,
   ...props
 }: ChakraSeparatorProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   return <ChakraSeparator {...props} ref={ref} data- />;
 };