@vygruppen/spor-react 3.0.2 → 3.0.3

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@3.0.2 build
+> @vygruppen/spor-react@3.0.3 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -10,12 +10,12 @@
 ESM Build start
 DTS Build start
 "toTime" is imported from external module "@internationalized/date" but never used in "dist/index.js".
-"toTime" is imported from external module "@internationalized/date" but never used in "dist/chunk-CIZ54LAU.mjs".
+"toTime" is imported from external module "@internationalized/date" but never used in "dist/chunk-B2RY6AU2.mjs".
+CJS dist/index.js 896.58 KB
+CJS ⚡️ Build success in 5703ms
 ESM dist/index.mjs                      2.01 KB
-ESM dist/CountryCodeSelect-QGMCRWO6.mjs 351.65 KB
-ESM dist/chunk-CIZ54LAU.mjs             416.53 KB
-ESM ⚡️ Build success in 5751ms
-CJS dist/index.js 896.28 KB
-CJS ⚡️ Build success in 5752ms
-DTS ⚡️ Build success in 23047ms
-DTS dist/index.d.ts 259.22 KB
+ESM dist/CountryCodeSelect-7ASYXAQD.mjs 351.65 KB
+ESM dist/chunk-B2RY6AU2.mjs             416.81 KB
+ESM ⚡️ Build success in 5716ms
+DTS ⚡️ Build success in 22215ms
+DTS dist/index.d.ts 259.26 KB

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @vygruppen/spor-react
 
+## 3.0.3
+
+### Patch Changes
+
+- 7e9b8990: DatePicker, TimePicker: Use cursor: text; everywhere inside of the date input field
+- 7e9b8990: Combobox: Make padding-right apply to the loading indicator as well
+
 ## 3.0.2
 
 ### Patch Changes

package/dist/{CountryCodeSelect-QGMCRWO6.mjs → CountryCodeSelect-7ASYXAQD.mjs}

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

package/dist/{chunk-CIZ54LAU.mjs → chunk-B2RY6AU2.mjs}

@@ -1,4 +1,4 @@
-import { forwardRef, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Button as Button$1, Box, Center, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, Stack as Stack$1, useStyleConfig, Badge as Badge$1, Code as Code$1, Text, useFormControlContext, useMultiStyleConfig, chakra, Flex, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, FormLabel, InputGroup, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, useBreakpointValue, Popover, PopoverAnchor, Portal, PopoverContent, PopoverArrow, PopoverBody, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useColorModeValue, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverTrigger, PopoverCloseButton, ChakraProvider, HStack, useToast as useToast$1, useInterval } from '@chakra-ui/react';
+import { forwardRef, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Button as Button$1, Box, Center, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, Stack as Stack$1, useStyleConfig, Badge as Badge$1, Code as Code$1, Text, useFormControlContext, useMultiStyleConfig, chakra, Flex, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, FormLabel, InputGroup, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, useBreakpointValue, Popover, PopoverAnchor, Portal, PopoverContent, PopoverArrow, PopoverBody, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, useOutsideClick, List, ListItem, useColorModeValue, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverTrigger, PopoverCloseButton, ChakraProvider, HStack, useToast as useToast$1, useInterval } from '@chakra-ui/react';
 export { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Center, Collapse, Container, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, Fade, Flex, FormHelperText, Grid, GridItem, HStack, Image, Img, InputGroup, LightMode, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, VStack, Wrap, WrapItem, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import tokens10__default from '@vygruppen/spor-design-tokens';
 import * as tokens10 from '@vygruppen/spor-design-tokens';
@@ -3828,7 +3828,8 @@ var TimeField = ({ state: state2, ...props }) => {
       ...labelProps,
       htmlFor: fieldProps.id,
       marginBottom: 0,
-      fontSize: "mobile.xs"
+      fontSize: "mobile.xs",
+      cursor: "text"
     },
     props.label
   ), /* @__PURE__ */ React49__default.createElement(Flex, { ...fieldProps, ref }, state2.segments.map((segment) => /* @__PURE__ */ React49__default.createElement(DateTimeSegment, { key: segment.type, segment, state: state2 }))), /* @__PURE__ */ React49__default.createElement(
@@ -4031,7 +4032,9 @@ var Popover3 = forwardRef$1(
     triggerRef,
     offset = 0,
     crossOffset = 0,
-    placement = "bottom"
+    placement = "bottom",
+    shouldFlip = false,
+    isNonModal = false
   }, ref) => {
     var _a6;
     const internalRef = useRef(null);
@@ -4042,7 +4045,9 @@ var Popover3 = forwardRef$1(
         popoverRef,
         offset,
         crossOffset,
-        placement
+        placement,
+        shouldFlip,
+        isNonModal
       },
       state2
     );
@@ -4227,6 +4232,11 @@ function Combobox({
     shouldCloseOnBlur: true,
     label
   });
+  useOutsideClick({
+    ref: listBoxRef,
+    handler: state2.close,
+    enabled: true
+  });
   const {
     inputProps: { size: size2, ...inputProps },
     listBoxProps
@@ -4267,6 +4277,7 @@ function Combobox({
         {
           width: "1.5rem",
           alignSelf: "center",
+          paddingRight,
           css: {
             div: {
               display: "flex",
@@ -4282,7 +4293,8 @@ function Combobox({
       state: state2,
       triggerRef: inputRef,
       ref: popoverRef,
-      placement: "bottom start"
+      placement: "bottom start",
+      shouldFlip: false
     },
     /* @__PURE__ */ React49__default.createElement(
       ListBox,
@@ -4928,7 +4940,7 @@ var texts13 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-QGMCRWO6.mjs'));
+var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-7ASYXAQD.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React49__default.createElement(Radio$1, { ...props, ref });
 });
@@ -11907,7 +11919,8 @@ var config13 = helpers6.defineMultiStyleConfig({
     inputLabel: {
       fontSize: "mobile.xs",
       color: mode("darkGrey", "white")(props),
-      margin: 0
+      margin: 0,
+      cursor: "text"
     },
     dateTimeSegment: {
       color: mode(

package/dist/index.d.ts

@@ -2706,6 +2706,7 @@ declare const theme: {
                     fontSize: string;
                     color: string;
                     margin: number;
+                    cursor: string;
                 };
                 dateTimeSegment: {
                     color: string;

package/dist/index.js

@@ -3533,7 +3533,8 @@ var init_TimeField = __esm({
           ...labelProps,
           htmlFor: fieldProps.id,
           marginBottom: 0,
-          fontSize: "mobile.xs"
+          fontSize: "mobile.xs",
+          cursor: "text"
         },
         props.label
       ), /* @__PURE__ */ React49__namespace.default.createElement(react.Flex, { ...fieldProps, ref }, state2.segments.map((segment) => /* @__PURE__ */ React49__namespace.default.createElement(DateTimeSegment, { key: segment.type, segment, state: state2 }))), /* @__PURE__ */ React49__namespace.default.createElement(
@@ -3770,7 +3771,9 @@ var init_Popover = __esm({
         triggerRef,
         offset = 0,
         crossOffset = 0,
-        placement = "bottom"
+        placement = "bottom",
+        shouldFlip = false,
+        isNonModal = false
       }, ref) => {
         var _a6;
         const internalRef = React49.useRef(null);
@@ -3781,7 +3784,9 @@ var init_Popover = __esm({
             popoverRef,
             offset,
             crossOffset,
-            placement
+            placement,
+            shouldFlip,
+            isNonModal
           },
           state2
         );
@@ -4737,6 +4742,11 @@ function Combobox({
     shouldCloseOnBlur: true,
     label
   });
+  react.useOutsideClick({
+    ref: listBoxRef,
+    handler: state2.close,
+    enabled: true
+  });
   const {
     inputProps: { size: size2, ...inputProps },
     listBoxProps
@@ -4777,6 +4787,7 @@ function Combobox({
         {
           width: "1.5rem",
           alignSelf: "center",
+          paddingRight,
           css: {
             div: {
               display: "flex",
@@ -4792,7 +4803,8 @@ function Combobox({
       state: state2,
       triggerRef: inputRef,
       ref: popoverRef,
-      placement: "bottom start"
+      placement: "bottom start",
+      shouldFlip: false
     },
     /* @__PURE__ */ React49__namespace.default.createElement(
       ListBox,
@@ -19979,7 +19991,8 @@ var init_datepicker2 = __esm({
         inputLabel: {
           fontSize: "mobile.xs",
           color: themeTools.mode("darkGrey", "white")(props),
-          margin: 0
+          margin: 0,
+          cursor: "text"
         },
         dateTimeSegment: {
           color: themeTools.mode(

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-CIZ54LAU.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-B2RY6AU2.mjs';

package/package.json

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

package/src/datepicker/TimeField.tsx

@@ -28,6 +28,7 @@ export const TimeField = ({ state, ...props }: TimeFieldProps) => {
         htmlFor={fieldProps.id}
         marginBottom={0}
         fontSize="mobile.xs"
+        cursor="text"
       >
         {props.label}
       </FormLabel>

package/src/input/Combobox.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import { AriaComboBoxProps, useComboBox, useFilter } from "react-aria";
 import { useComboBoxState } from "react-stately";
-import { ColorSpinner, Input, InputProps, ListBox } from "..";
+import { ColorSpinner, Input, InputProps, ListBox, useOutsideClick } from "..";
 import { Popover } from "./Popover";
 
 export type ComboboxProps<T> = AriaComboBoxProps<T> & {
@@ -96,6 +96,12 @@ export function Combobox<T extends object>({
     label,
   });
 
+  useOutsideClick({
+    ref: listBoxRef,
+    handler: state.close,
+    enabled: true,
+  });
+
   const {
     inputProps: { size, ...inputProps },
     listBoxProps,
@@ -141,6 +147,7 @@ export function Combobox<T extends object>({
             <ColorSpinner
               width="1.5rem"
               alignSelf="center"
+              paddingRight={paddingRight}
               css={{
                 div: {
                   display: "flex",
@@ -159,6 +166,7 @@ export function Combobox<T extends object>({
           triggerRef={inputRef as any}
           ref={popoverRef}
           placement="bottom start"
+          shouldFlip={false}
         >
           <ListBox
             {...listBoxProps}

package/src/input/Popover.tsx

@@ -27,6 +27,18 @@ type PopoverProps = {
    * Defaults to "bottom"
    */
   placement?: AriaPopoverProps["placement"];
+  /**
+   * Whether or not the list should flip to the opposite side of the trigger if there is not enough space.
+   * Defaults to false.
+   */
+  shouldFlip?: boolean;
+  /**
+   * Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies.
+   * Most popovers should not use this option as it may negatively impact the screen reader experience. Only use with components such as combobox, which are designed to handle this situation carefully.
+   *
+   * Defaults to false.
+   */
+  isNonModal?: boolean;
 };
 /**
  * Internal popover component.
@@ -42,6 +54,8 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       offset = 0,
       crossOffset = 0,
       placement = "bottom",
+      shouldFlip = false,
+      isNonModal = false,
     },
     ref
   ) => {
@@ -55,6 +69,8 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         offset,
         crossOffset,
         placement,
+        shouldFlip,
+        isNonModal,
       },
       state
     );

package/src/theme/components/datepicker.ts

@@ -70,6 +70,7 @@ const config = helpers.defineMultiStyleConfig({
       fontSize: "mobile.xs",
       color: mode("darkGrey", "white")(props),
       margin: 0,
+      cursor: "text",
     },
     dateTimeSegment: {
       color: mode(