@vygruppen/spor-react 3.3.3 → 3.3.4

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@3.3.3 build
+> @vygruppen/spor-react@3.3.4 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -9,13 +9,13 @@
 CJS Build start
 ESM Build start
 DTS Build start
+"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-QHD5YJ6K.mjs".
 "toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/index.js".
-"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-HUBPEIHF.mjs".
 ESM dist/index.mjs                      2.01 KB
-ESM dist/CountryCodeSelect-X3MPRW2E.mjs 350.82 KB
-ESM dist/chunk-HUBPEIHF.mjs             420.27 KB
-ESM ⚡️ Build success in 5772ms
-CJS dist/index.js 903.03 KB
-CJS ⚡️ Build success in 5772ms
-DTS ⚡️ Build success in 21778ms
-DTS dist/index.d.ts 252.30 KB
+ESM dist/CountryCodeSelect-HKZBFK6T.mjs 350.82 KB
+ESM dist/chunk-QHD5YJ6K.mjs             420.68 KB
+ESM ⚡️ Build success in 6202ms
+CJS dist/index.js 903.47 KB
+CJS ⚡️ Build success in 6203ms
+DTS ⚡️ Build success in 23010ms
+DTS dist/index.d.ts 252.39 KB

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @vygruppen/spor-react
 
+## 3.3.4
+
+### Patch Changes
+
+- afebaf34: Override minimum left padding in ComboBox and InfoSelect popovers
+- 309d4e18: Change type of calendar trigger button to "button"
+- 2c7f2004: IconButton: Add missing floating variant
+- Updated dependencies [9f84f18f]
+  - @vygruppen/spor-icon-react@3.2.0
+
 ## 3.3.3
 
 ### Patch Changes

package/dist/{CountryCodeSelect-X3MPRW2E.mjs → CountryCodeSelect-HKZBFK6T.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-HUBPEIHF.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-QHD5YJ6K.mjs';
 import React from 'react';
 
 // ../../node_modules/awesome-phonenumber/index-esm.mjs

package/dist/{chunk-HUBPEIHF.mjs → chunk-QHD5YJ6K.mjs}

@@ -3584,14 +3584,23 @@ var CalendarTriggerButton = forwardRef(
   ({ ...buttonProps }, ref) => {
     const { t: t2 } = useTranslation();
     const styles2 = useMultiStyleConfig("Datepicker", {});
+    const { onPress, ...filteredButtonProps } = buttonProps;
+    const handleOnPress = (event) => {
+      if (onPress) {
+        if (event.key == "Enter" || event.key == " ")
+          onPress(event);
+      }
+    };
     return /* @__PURE__ */ React49__default.createElement(PopoverAnchor, null, /* @__PURE__ */ React49__default.createElement(
       Box,
       {
         ref,
         as: "button",
+        type: "button",
         "aria-label": t2(texts9.openCalendar),
         sx: styles2.calendarTriggerButton,
-        ...buttonProps
+        ...filteredButtonProps,
+        onKeyUp: handleOnPress
       },
       /* @__PURE__ */ React49__default.createElement(CalendarOutline24Icon, null)
     ));
@@ -4130,7 +4139,8 @@ var Popover3 = forwardRef$1(
     placement = "bottom",
     shouldFlip = false,
     isNonModal = false,
-    hasBackdrop = true
+    hasBackdrop = true,
+    containerPadding = 12
   }, ref) => {
     var _a6;
     const internalRef = useRef(null);
@@ -4143,7 +4153,8 @@ var Popover3 = forwardRef$1(
         crossOffset,
         placement,
         shouldFlip,
-        isNonModal
+        isNonModal,
+        containerPadding
       },
       state2
     );
@@ -4152,8 +4163,7 @@ var Popover3 = forwardRef$1(
       {
         ...popoverProps,
         ref: popoverRef,
-        minWidth: ((_a6 = triggerRef.current) == null ? void 0 : _a6.clientWidth) ?? "auto",
-        marginLeft: -2
+        minWidth: ((_a6 = triggerRef.current) == null ? void 0 : _a6.clientWidth) ?? "auto"
       },
       /* @__PURE__ */ React49__default.createElement(DismissButton, { onDismiss: state2.close }),
       children,
@@ -4393,7 +4403,8 @@ function Combobox({
       isNonModal: true,
       placement: "bottom start",
       shouldFlip: false,
-      hasBackdrop: false
+      hasBackdrop: false,
+      containerPadding: 0
     },
     /* @__PURE__ */ React49__default.createElement(
       ListBox,
@@ -4649,16 +4660,24 @@ function InfoSelect({
     },
     /* @__PURE__ */ React49__default.createElement(Box, { ...valueProps }, state2.selectedItem ? state2.selectedItem.textValue ?? state2.selectedItem.rendered : placeholder ?? t2(texts11.selectAnOption)),
     /* @__PURE__ */ React49__default.createElement(Box, { sx: styles2.arrowIcon }, state2.isOpen ? /* @__PURE__ */ React49__default.createElement(DropdownUpFill24Icon, null) : /* @__PURE__ */ React49__default.createElement(DropdownDownFill24Icon, null))
-  ), state2.isOpen && /* @__PURE__ */ React49__default.createElement(Popover3, { state: state2, triggerRef }, /* @__PURE__ */ React49__default.createElement(
-    ListBox,
+  ), state2.isOpen && /* @__PURE__ */ React49__default.createElement(
+    Popover3,
     {
-      ...menuProps,
       state: state2,
-      listBoxRef: listboxRef,
-      borderBottomRadius: "sm"
+      triggerRef,
+      containerPadding: 0
     },
-    props.children
-  )));
+    /* @__PURE__ */ React49__default.createElement(
+      ListBox,
+      {
+        ...menuProps,
+        state: state2,
+        listBoxRef: listboxRef,
+        borderBottomRadius: "sm"
+      },
+      props.children
+    )
+  ));
 }
 var texts11 = createTexts({
   selectAnOption: {
@@ -5065,7 +5084,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-X3MPRW2E.mjs'));
+var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-HKZBFK6T.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React49__default.createElement(Radio$1, { ...props, ref });
 });

package/dist/index.d.ts

@@ -307,7 +307,7 @@ type ButtonGroupProps = ButtonGroupProps$1;
 declare const ButtonGroup: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", ButtonGroupProps$1>;
 
 type IconButtonProps = Omit<IconButtonProps$1, "variant"> & {
-    variant: "control" | "primary" | "secondary" | "tertiary" | "additional" | "ghost";
+    variant: "control" | "primary" | "secondary" | "tertiary" | "additional" | "ghost" | "floating";
 };
 /**
  * An icon-only button.
@@ -322,6 +322,7 @@ type IconButtonProps = Omit<IconButtonProps$1, "variant"> & {
  * - `tertiary`: Used for non-essential actions, as well as in combination with the primary button.
  * - `additional`: Used for additional choices, like a less important tertiary action.
  * - `ghost`: Used inside other interactive elements, like date pickers and input fields.
+ * - `floating`: Used for floating actions, like a menu button in a menu.
  *
  * ```tsx
  * <IconButton

package/dist/index.js

@@ -3244,14 +3244,23 @@ var init_CalendarTriggerButton = __esm({
       ({ ...buttonProps }, ref) => {
         const { t: t2 } = useTranslation();
         const styles2 = react.useMultiStyleConfig("Datepicker", {});
+        const { onPress, ...filteredButtonProps } = buttonProps;
+        const handleOnPress = (event) => {
+          if (onPress) {
+            if (event.key == "Enter" || event.key == " ")
+              onPress(event);
+          }
+        };
         return /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React49__namespace.default.createElement(
           react.Box,
           {
             ref,
             as: "button",
+            type: "button",
             "aria-label": t2(texts9.openCalendar),
             sx: styles2.calendarTriggerButton,
-            ...buttonProps
+            ...filteredButtonProps,
+            onKeyUp: handleOnPress
           },
           /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.CalendarOutline24Icon, null)
         ));
@@ -3874,7 +3883,8 @@ var init_Popover = __esm({
         placement = "bottom",
         shouldFlip = false,
         isNonModal = false,
-        hasBackdrop = true
+        hasBackdrop = true,
+        containerPadding = 12
       }, ref) => {
         var _a6;
         const internalRef = React49.useRef(null);
@@ -3887,7 +3897,8 @@ var init_Popover = __esm({
             crossOffset,
             placement,
             shouldFlip,
-            isNonModal
+            isNonModal,
+            containerPadding
           },
           state2
         );
@@ -3896,8 +3907,7 @@ var init_Popover = __esm({
           {
             ...popoverProps,
             ref: popoverRef,
-            minWidth: ((_a6 = triggerRef.current) == null ? void 0 : _a6.clientWidth) ?? "auto",
-            marginLeft: -2
+            minWidth: ((_a6 = triggerRef.current) == null ? void 0 : _a6.clientWidth) ?? "auto"
           },
           /* @__PURE__ */ React49__namespace.default.createElement(reactAria.DismissButton, { onDismiss: state2.close }),
           children,
@@ -4908,7 +4918,8 @@ function Combobox({
       isNonModal: true,
       placement: "bottom start",
       shouldFlip: false,
-      hasBackdrop: false
+      hasBackdrop: false,
+      containerPadding: 0
     },
     /* @__PURE__ */ React49__namespace.default.createElement(
       ListBox,
@@ -5189,16 +5200,24 @@ function InfoSelect({
     },
     /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { ...valueProps }, state2.selectedItem ? state2.selectedItem.textValue ?? state2.selectedItem.rendered : placeholder ?? t2(texts11.selectAnOption)),
     /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { sx: styles2.arrowIcon }, state2.isOpen ? /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.DropdownUpFill24Icon, null) : /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.DropdownDownFill24Icon, null))
-  ), state2.isOpen && /* @__PURE__ */ React49__namespace.default.createElement(Popover3, { state: state2, triggerRef }, /* @__PURE__ */ React49__namespace.default.createElement(
-    ListBox,
+  ), state2.isOpen && /* @__PURE__ */ React49__namespace.default.createElement(
+    Popover3,
     {
-      ...menuProps,
       state: state2,
-      listBoxRef: listboxRef,
-      borderBottomRadius: "sm"
+      triggerRef,
+      containerPadding: 0
     },
-    props.children
-  )));
+    /* @__PURE__ */ React49__namespace.default.createElement(
+      ListBox,
+      {
+        ...menuProps,
+        state: state2,
+        listBoxRef: listboxRef,
+        borderBottomRadius: "sm"
+      },
+      props.children
+    )
+  ));
 }
 var texts11;
 var init_InfoSelect = __esm({

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-HUBPEIHF.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-QHD5YJ6K.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "3.3.3",
+  "version": "3.3.4",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/button/IconButton.tsx

@@ -14,7 +14,8 @@ export type IconButtonProps = Omit<ChakraIconButtonProps, "variant"> & {
     | "secondary"
     | "tertiary"
     | "additional"
-    | "ghost";
+    | "ghost"
+    | "floating";
 };
 /**
  * An icon-only button.
@@ -29,6 +30,7 @@ export type IconButtonProps = Omit<ChakraIconButtonProps, "variant"> & {
  * - `tertiary`: Used for non-essential actions, as well as in combination with the primary button.
  * - `additional`: Used for additional choices, like a less important tertiary action.
  * - `ghost`: Used inside other interactive elements, like date pickers and input fields.
+ * - `floating`: Used for floating actions, like a menu button in a menu.
  *
  * ```tsx
  * <IconButton

package/src/datepicker/CalendarTriggerButton.tsx

@@ -6,7 +6,7 @@ import {
   As,
 } from "@chakra-ui/react";
 import { CalendarOutline24Icon } from "@vygruppen/spor-icon-react";
-import React from "react";
+import React, { useEffect } from "react";
 import { AriaButtonProps } from "react-aria";
 import { createTexts, useTranslation } from "..";
 
@@ -16,14 +16,25 @@ export const CalendarTriggerButton = forwardRef<CalendarTriggerButtonProps, As>(
     const { t } = useTranslation();
     const styles = useMultiStyleConfig("Datepicker", {});
 
+    const { onPress, ...filteredButtonProps } = buttonProps;
+
+    const handleOnPress = (event: KeyboardEvent) => {
+      if (onPress) {
+        if (event.key == "Enter" || event.key == " ")
+        onPress(event as any)
+      }
+    }
+
     return (
       <PopoverAnchor>
         <Box
           ref={ref}
           as="button"
+          type="button"
           aria-label={t(texts.openCalendar)}
           sx={styles.calendarTriggerButton}
-          {...buttonProps}
+          {...filteredButtonProps}
+          onKeyUp={handleOnPress}
         >
           <CalendarOutline24Icon />
         </Box>

package/src/datepicker/DatePicker.tsx

@@ -21,7 +21,6 @@ import { CalendarOutline24Icon } from "@vygruppen/spor-icon-react";
 import React, { forwardRef, useRef } from "react";
 import {
   AriaDatePickerProps,
-  CalendarProps,
   I18nProvider,
   useDatePicker,
 } from "react-aria";

package/src/input/Combobox.tsx

@@ -164,6 +164,9 @@ export function Combobox<T extends object>({
           placement="bottom start"
           shouldFlip={false}
           hasBackdrop={false}
+          // The minimum padding should be 0, because the popover always should be
+          // aligned with the input field regardless of the left padding in the container.
+          containerPadding={0}
         >
           <ListBox
             {...listBoxProps}

package/src/input/InfoSelect.tsx

@@ -216,7 +216,13 @@ export function InfoSelect<T extends object>({
       </chakra.button>
 
       {state.isOpen && (
-        <Popover state={state} triggerRef={triggerRef}>
+        <Popover
+          state={state}
+          triggerRef={triggerRef}
+          // The minimum padding should be 0, because the popover always should be
+          // aligned with the trigger field regardless of the left padding in the container.
+          containerPadding={0}
+        >
           <ListBox
             {...menuProps}
             state={state}

package/src/input/Popover.tsx

@@ -44,6 +44,11 @@ type PopoverProps = {
    * Defaults to true
    */
   hasBackdrop?: boolean;
+  /** The minimum padding required between the popover and the surrounding container
+   * 
+   * Defaults to 12 (the same as React Aria's default)
+   */
+  containerPadding?: number;
 };
 /**
  * Internal popover component.
@@ -62,6 +67,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       shouldFlip = false,
       isNonModal = false,
       hasBackdrop = true,
+      containerPadding = 12,
     },
     ref
   ) => {
@@ -77,6 +83,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         placement,
         shouldFlip,
         isNonModal,
+        containerPadding,
       },
       state
     );
@@ -86,7 +93,6 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         {...popoverProps}
         ref={popoverRef}
         minWidth={triggerRef.current?.clientWidth ?? "auto"}
-        marginLeft={-2}
       >
         <DismissButton onDismiss={state.close} />
         {children}