@vygruppen/spor-react 12.3.1 → 12.3.2

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
 
-> @vygruppen/spor-react@12.3.1 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.3.2 build /home/runner/work/spor/spor/packages/spor-react
 > pnpm typegen && tsup
 
 
-> @vygruppen/spor-react@12.3.1 typegen /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.3.2 typegen /home/runner/work/spor/spor/packages/spor-react
 > npx @chakra-ui/cli typegen src/theme/index.ts
 
 ┌  Chakra CLI ⚡️
@@ -31,12 +31,12 @@ CLI Target: node16
 CJS Build start
 ESM Build start
 DTS Build start
-ESM dist/index.mjs     294.73 KB
-ESM dist/index.mjs.map 633.25 KB
-ESM ⚡️ Build success in 2095ms
-CJS dist/index.js     315.33 KB
-CJS dist/index.js.map 633.25 KB
-CJS ⚡️ Build success in 2098ms
-DTS ⚡️ Build success in 21036ms
-DTS dist/index.d.ts  129.93 KB
-DTS dist/index.d.mts 129.93 KB
+CJS dist/index.js     315.42 KB
+CJS dist/index.js.map 633.63 KB
+CJS ⚡️ Build success in 1999ms
+ESM dist/index.mjs     294.79 KB
+ESM dist/index.mjs.map 633.63 KB
+ESM ⚡️ Build success in 1999ms
+DTS ⚡️ Build success in 20706ms
+DTS dist/index.d.ts  129.65 KB
+DTS dist/index.d.mts 129.65 KB

package/.turbo/turbo-typegen.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.3.1 typegen /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.3.2 typegen /home/runner/work/spor/spor/packages/spor-react
 > npx @chakra-ui/cli typegen src/theme/index.ts
 
 ┌  Chakra CLI ⚡️

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @vygruppen/spor-react
 
+## 12.3.2
+
+### Patch Changes
+
+- a1eb48e: Add positioning props for calendar
+- a72d19f: Fix Issues with unused ref in forwardref functions creating console errors for users.
+- a7b9a27: Fix scaling of loading indicator.
+
 ## 12.3.1
 
 ### Patch Changes

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
 import React__default, { PropsWithChildren, ReactNode } from 'react';
 import * as _chakra_ui_react from '@chakra-ui/react';
-import { Accordion as Accordion$1, Alert as Alert$1, ConditionalValue, Breadcrumb as Breadcrumb$1, RecipeVariantProps, ButtonProps as ButtonProps$1, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, Field as Field$1, Dialog, Drawer as Drawer$1, PopoverRootProps, Checkbox as Checkbox$1, CheckboxGroupProps as CheckboxGroupProps$1, CheckboxCardRootProps, CheckboxCard, Fieldset as Fieldset$1, InputProps as InputProps$1, ListRootProps, NativeSelectFieldProps, NativeSelect as NativeSelect$1, RadioGroup as RadioGroup$1, SelectRootProps, Select as Select$1, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, RadioCard as RadioCard$1, SeparatorProps, LinkProps as LinkProps$1, List as List$1, UseProgressProps, SkeletonProps as SkeletonProps$1, CircleProps, Popover as Popover$1, Pagination as Pagination$1, ChakraProviderProps, SystemContext, TabsRootProps, Tabs as Tabs$1, TableRootProps, Table as Table$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
+import { Accordion as Accordion$1, Alert as Alert$1, ConditionalValue, Breadcrumb as Breadcrumb$1, RecipeVariantProps, ButtonProps as ButtonProps$1, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, Field as Field$1, PopoverRootProps, Dialog, Drawer as Drawer$1, Checkbox as Checkbox$1, CheckboxGroupProps as CheckboxGroupProps$1, CheckboxCardRootProps, CheckboxCard, Fieldset as Fieldset$1, InputProps as InputProps$1, ListRootProps, NativeSelectFieldProps, NativeSelect as NativeSelect$1, RadioGroup as RadioGroup$1, SelectRootProps, Select as Select$1, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, RadioCard as RadioCard$1, SeparatorProps, LinkProps as LinkProps$1, List as List$1, UseProgressProps, SkeletonProps as SkeletonProps$1, CircleProps, Popover as Popover$1, Pagination as Pagination$1, ChakraProviderProps, SystemContext, TabsRootProps, Tabs as Tabs$1, TableRootProps, Table as Table$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
 export { Box, BoxProps, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, CenterProps, Collapsible, CollapsibleRootProps, Container, ContainerProps, Em, Flex, FlexProps, For, FormatByte, FormatNumber, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Kbd, LocaleProvider, Portal, PortalProps, Show, SimpleGrid, SimpleGridProps, Spacer, SpacerProps, Span, Stack, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableColumn, TableColumnHeader, TableColumnHeaderProps, TableColumnProps, TableFooter, TableFooterProps, TableHeader, TableHeaderProps, TableRoot, TableRootProps, TableRow, TableRowProps, UseDisclosureProps, VStack, VisuallyHidden, createListCollection, createSystem, defineConfig, defineRecipe, defineStyle, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useToken } from '@chakra-ui/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { IconComponent } from '@vygruppen/spor-icon-react';
@@ -618,6 +618,7 @@ declare const DatePicker: React__default.ForwardRefExoticComponent<Omit<AriaDate
     showYearNavigation?: boolean;
     withPortal?: boolean;
     onChange?: (value: DateValue | null) => void;
+    positioning?: PopoverRootProps["positioning"];
 } & FieldBaseProps & React__default.RefAttributes<HTMLDivElement>>;
 
 type DateRangePickerProps = Omit<AriaDateRangePickerProps<DateValue$1>, "onChange" | "errorMessage" | "isInvalid" | "isRequired"> & Pick<BoxProps, "minHeight"> & PropsWithChildren<DatePickerVariantProps> & CalendarVariants & {
@@ -630,6 +631,7 @@ type DateRangePickerProps = Omit<AriaDateRangePickerProps<DateValue$1>, "onChang
         start: DateValue$1 | null;
         end: DateValue$1 | null;
     } | null) => void;
+    positioning?: PopoverRootProps["positioning"];
 } & FieldBaseProps;
 /**
  * A date range picker component.
@@ -639,7 +641,7 @@ type DateRangePickerProps = Omit<AriaDateRangePickerProps<DateValue$1>, "onChang
  * ```tsx
  * <DateRangePicker startLabel="From" startName="from" endLabel="To" endName="to" variant="core" />
  * ```
- */ declare function DateRangePicker({ variant, minHeight, startName, endName, withPortal, errorText, helperText, invalid, ...props }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
+ */ declare function DateRangePicker({ variant, minHeight, startName, endName, withPortal, errorText, helperText, invalid, positioning, ...props }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
 
 type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & FieldBaseProps & {
     /** The label. Defaults to a localized version of "Time" */
@@ -1163,28 +1165,10 @@ type ComboboxProps<T> = Exclude<InputProps, "variant" | "colorPalette" | "size">
  * </Combobox>
  * ```
  */
-declare const Combobox: React__default.ForwardRefExoticComponent<_chakra_ui_react.InputProps & Omit<_chakra_ui_react.FieldRootProps, "label"> & {
-    children?: ReactNode | undefined;
-} & FieldBaseProps & {
-    label: ReactNode;
-    startElement?: React__default.ReactNode;
-    endElement?: React__default.ReactNode;
-} & AriaComboBoxProps<object> & {
-    /** The label of the combobox */
-    label: string;
-    /** Whether or not the combobox is waiting for new suggestions */
-    loading?: boolean;
-    /** Optional UI to show when there are no matching items */
-    emptyContent?: React__default.ReactNode;
-    /** A ref to the input field */
-    inputRef?: React__default.RefObject<HTMLInputElement>;
-    /** If you want to allow an empty collection */
-    allowsEmptyCollection?: boolean;
-    lefticon?: ReactNode;
-    righticon?: ReactNode;
-    variant?: "core" | "floating";
-    children?: React__default.ReactNode;
-} & React__default.RefAttributes<HTMLDivElement>>;
+declare const Combobox: {
+    (props: ComboboxProps<object>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
 declare const Fieldset: React$1.ForwardRefExoticComponent<Fieldset$1.RootProps & React$1.RefAttributes<HTMLFieldSetElement>>;
 declare const FieldsetLegend: React$1.ForwardRefExoticComponent<Fieldset$1.LegendProps & React$1.RefAttributes<HTMLLegendElement>>;
@@ -1211,6 +1195,38 @@ declare const Input: React__default.ForwardRefExoticComponent<InputProps$1 & Omi
     endElement?: React__default.ReactNode;
 } & React__default.RefAttributes<HTMLInputElement>>;
 
+declare const listBoxSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "item" | "description" | "label", {
+    variant: {
+        core: {
+            root: {
+                outline: "1px solid";
+                outlineColor: "core.outline";
+            };
+        };
+        floating: {
+            root: {
+                outline: "1px solid";
+                outlineColor: "floating.outline";
+            };
+        };
+    };
+}>;
+
+type ListBoxVariantProps = RecipeVariantProps<typeof listBoxSlotRecipe>;
+type ListBoxProps<T> = AriaListBoxProps<T> & Omit<BoxProps, "filter" | "autoFocus" | "children"> & PropsWithChildren<ListBoxVariantProps> & Exclude<ListRootProps, "variant"> & {
+    /** External reference to the ListBox itself */
+    listBoxRef: React__default.RefObject<HTMLUListElement>;
+    /** Whether or not the listbox is waiting on new data, i.e. through a autosuggest search */
+    loading?: boolean;
+    /** The state of the listbox, provided externally somehow. */
+    state: ListState<T> | SelectState<unknown>;
+    /** UI to render if the collection is empty */
+    emptyContent?: React__default.ReactNode;
+    maxWidth?: BoxProps["maxWidth"];
+    variant?: "core" | "floating";
+    children: React__default.ReactNode;
+    autoFocus?: boolean;
+};
 /**
  * A component that renders a list box with selectable options.
  *
@@ -1245,24 +1261,10 @@ declare const Input: React__default.ForwardRefExoticComponent<InputProps$1 & Omi
  * );
  * ```
  */
-declare const ListBox: React__default.ForwardRefExoticComponent<AriaListBoxProps<object> & Omit<BoxProps, "filter" | "autoFocus" | "children"> & {
-    variant?: _chakra_ui_react.ConditionalValue<"floating" | "core" | undefined>;
-} & {
-    children?: React__default.ReactNode | undefined;
-} & ListRootProps & {
-    /** External reference to the ListBox itself */
-    listBoxRef: React__default.RefObject<HTMLUListElement>;
-    /** Whether or not the listbox is waiting on new data, i.e. through a autosuggest search */
-    loading?: boolean;
-    /** The state of the listbox, provided externally somehow. */
-    state: ListState<object> | SelectState<unknown>;
-    /** UI to render if the collection is empty */
-    emptyContent?: React__default.ReactNode;
-    maxWidth?: BoxProps["maxWidth"];
-    variant?: "core" | "floating";
-    children: React__default.ReactNode;
-    autoFocus?: boolean;
-} & React__default.RefAttributes<HTMLDivElement>>;
+declare const ListBox: {
+    (props: ListBoxProps<object>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 /**
  * Renders a label for a listbox item.
  *

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
 import React__default, { PropsWithChildren, ReactNode } from 'react';
 import * as _chakra_ui_react from '@chakra-ui/react';
-import { Accordion as Accordion$1, Alert as Alert$1, ConditionalValue, Breadcrumb as Breadcrumb$1, RecipeVariantProps, ButtonProps as ButtonProps$1, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, Field as Field$1, Dialog, Drawer as Drawer$1, PopoverRootProps, Checkbox as Checkbox$1, CheckboxGroupProps as CheckboxGroupProps$1, CheckboxCardRootProps, CheckboxCard, Fieldset as Fieldset$1, InputProps as InputProps$1, ListRootProps, NativeSelectFieldProps, NativeSelect as NativeSelect$1, RadioGroup as RadioGroup$1, SelectRootProps, Select as Select$1, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, RadioCard as RadioCard$1, SeparatorProps, LinkProps as LinkProps$1, List as List$1, UseProgressProps, SkeletonProps as SkeletonProps$1, CircleProps, Popover as Popover$1, Pagination as Pagination$1, ChakraProviderProps, SystemContext, TabsRootProps, Tabs as Tabs$1, TableRootProps, Table as Table$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
+import { Accordion as Accordion$1, Alert as Alert$1, ConditionalValue, Breadcrumb as Breadcrumb$1, RecipeVariantProps, ButtonProps as ButtonProps$1, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, Field as Field$1, PopoverRootProps, Dialog, Drawer as Drawer$1, Checkbox as Checkbox$1, CheckboxGroupProps as CheckboxGroupProps$1, CheckboxCardRootProps, CheckboxCard, Fieldset as Fieldset$1, InputProps as InputProps$1, ListRootProps, NativeSelectFieldProps, NativeSelect as NativeSelect$1, RadioGroup as RadioGroup$1, SelectRootProps, Select as Select$1, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, RadioCard as RadioCard$1, SeparatorProps, LinkProps as LinkProps$1, List as List$1, UseProgressProps, SkeletonProps as SkeletonProps$1, CircleProps, Popover as Popover$1, Pagination as Pagination$1, ChakraProviderProps, SystemContext, TabsRootProps, Tabs as Tabs$1, TableRootProps, Table as Table$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
 export { Box, BoxProps, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, CenterProps, Collapsible, CollapsibleRootProps, Container, ContainerProps, Em, Flex, FlexProps, For, FormatByte, FormatNumber, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Kbd, LocaleProvider, Portal, PortalProps, Show, SimpleGrid, SimpleGridProps, Spacer, SpacerProps, Span, Stack, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableColumn, TableColumnHeader, TableColumnHeaderProps, TableColumnProps, TableFooter, TableFooterProps, TableHeader, TableHeaderProps, TableRoot, TableRootProps, TableRow, TableRowProps, UseDisclosureProps, VStack, VisuallyHidden, createListCollection, createSystem, defineConfig, defineRecipe, defineStyle, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useToken } from '@chakra-ui/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { IconComponent } from '@vygruppen/spor-icon-react';
@@ -618,6 +618,7 @@ declare const DatePicker: React__default.ForwardRefExoticComponent<Omit<AriaDate
     showYearNavigation?: boolean;
     withPortal?: boolean;
     onChange?: (value: DateValue | null) => void;
+    positioning?: PopoverRootProps["positioning"];
 } & FieldBaseProps & React__default.RefAttributes<HTMLDivElement>>;
 
 type DateRangePickerProps = Omit<AriaDateRangePickerProps<DateValue$1>, "onChange" | "errorMessage" | "isInvalid" | "isRequired"> & Pick<BoxProps, "minHeight"> & PropsWithChildren<DatePickerVariantProps> & CalendarVariants & {
@@ -630,6 +631,7 @@ type DateRangePickerProps = Omit<AriaDateRangePickerProps<DateValue$1>, "onChang
         start: DateValue$1 | null;
         end: DateValue$1 | null;
     } | null) => void;
+    positioning?: PopoverRootProps["positioning"];
 } & FieldBaseProps;
 /**
  * A date range picker component.
@@ -639,7 +641,7 @@ type DateRangePickerProps = Omit<AriaDateRangePickerProps<DateValue$1>, "onChang
  * ```tsx
  * <DateRangePicker startLabel="From" startName="from" endLabel="To" endName="to" variant="core" />
  * ```
- */ declare function DateRangePicker({ variant, minHeight, startName, endName, withPortal, errorText, helperText, invalid, ...props }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
+ */ declare function DateRangePicker({ variant, minHeight, startName, endName, withPortal, errorText, helperText, invalid, positioning, ...props }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
 
 type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & FieldBaseProps & {
     /** The label. Defaults to a localized version of "Time" */
@@ -1163,28 +1165,10 @@ type ComboboxProps<T> = Exclude<InputProps, "variant" | "colorPalette" | "size">
  * </Combobox>
  * ```
  */
-declare const Combobox: React__default.ForwardRefExoticComponent<_chakra_ui_react.InputProps & Omit<_chakra_ui_react.FieldRootProps, "label"> & {
-    children?: ReactNode | undefined;
-} & FieldBaseProps & {
-    label: ReactNode;
-    startElement?: React__default.ReactNode;
-    endElement?: React__default.ReactNode;
-} & AriaComboBoxProps<object> & {
-    /** The label of the combobox */
-    label: string;
-    /** Whether or not the combobox is waiting for new suggestions */
-    loading?: boolean;
-    /** Optional UI to show when there are no matching items */
-    emptyContent?: React__default.ReactNode;
-    /** A ref to the input field */
-    inputRef?: React__default.RefObject<HTMLInputElement>;
-    /** If you want to allow an empty collection */
-    allowsEmptyCollection?: boolean;
-    lefticon?: ReactNode;
-    righticon?: ReactNode;
-    variant?: "core" | "floating";
-    children?: React__default.ReactNode;
-} & React__default.RefAttributes<HTMLDivElement>>;
+declare const Combobox: {
+    (props: ComboboxProps<object>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
 declare const Fieldset: React$1.ForwardRefExoticComponent<Fieldset$1.RootProps & React$1.RefAttributes<HTMLFieldSetElement>>;
 declare const FieldsetLegend: React$1.ForwardRefExoticComponent<Fieldset$1.LegendProps & React$1.RefAttributes<HTMLLegendElement>>;
@@ -1211,6 +1195,38 @@ declare const Input: React__default.ForwardRefExoticComponent<InputProps$1 & Omi
     endElement?: React__default.ReactNode;
 } & React__default.RefAttributes<HTMLInputElement>>;
 
+declare const listBoxSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "item" | "description" | "label", {
+    variant: {
+        core: {
+            root: {
+                outline: "1px solid";
+                outlineColor: "core.outline";
+            };
+        };
+        floating: {
+            root: {
+                outline: "1px solid";
+                outlineColor: "floating.outline";
+            };
+        };
+    };
+}>;
+
+type ListBoxVariantProps = RecipeVariantProps<typeof listBoxSlotRecipe>;
+type ListBoxProps<T> = AriaListBoxProps<T> & Omit<BoxProps, "filter" | "autoFocus" | "children"> & PropsWithChildren<ListBoxVariantProps> & Exclude<ListRootProps, "variant"> & {
+    /** External reference to the ListBox itself */
+    listBoxRef: React__default.RefObject<HTMLUListElement>;
+    /** Whether or not the listbox is waiting on new data, i.e. through a autosuggest search */
+    loading?: boolean;
+    /** The state of the listbox, provided externally somehow. */
+    state: ListState<T> | SelectState<unknown>;
+    /** UI to render if the collection is empty */
+    emptyContent?: React__default.ReactNode;
+    maxWidth?: BoxProps["maxWidth"];
+    variant?: "core" | "floating";
+    children: React__default.ReactNode;
+    autoFocus?: boolean;
+};
 /**
  * A component that renders a list box with selectable options.
  *
@@ -1245,24 +1261,10 @@ declare const Input: React__default.ForwardRefExoticComponent<InputProps$1 & Omi
  * );
  * ```
  */
-declare const ListBox: React__default.ForwardRefExoticComponent<AriaListBoxProps<object> & Omit<BoxProps, "filter" | "autoFocus" | "children"> & {
-    variant?: _chakra_ui_react.ConditionalValue<"floating" | "core" | undefined>;
-} & {
-    children?: React__default.ReactNode | undefined;
-} & ListRootProps & {
-    /** External reference to the ListBox itself */
-    listBoxRef: React__default.RefObject<HTMLUListElement>;
-    /** Whether or not the listbox is waiting on new data, i.e. through a autosuggest search */
-    loading?: boolean;
-    /** The state of the listbox, provided externally somehow. */
-    state: ListState<object> | SelectState<unknown>;
-    /** UI to render if the collection is empty */
-    emptyContent?: React__default.ReactNode;
-    maxWidth?: BoxProps["maxWidth"];
-    variant?: "core" | "floating";
-    children: React__default.ReactNode;
-    autoFocus?: boolean;
-} & React__default.RefAttributes<HTMLDivElement>>;
+declare const ListBox: {
+    (props: ListBoxProps<object>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 /**
  * Renders a label for a listbox item.
  *