@vygruppen/spor-react 3.0.1 → 3.0.3

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@3.0.1 build
+> @vygruppen/spor-react@3.0.3 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
-"toTime" is imported from external module "@internationalized/date" but never used in "dist/chunk-B6U7OYV3.mjs".
 "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-B2RY6AU2.mjs".
+CJS dist/index.js 896.58 KB
+CJS ⚡️ Build success in 5703ms
 ESM dist/index.mjs                      2.01 KB
-ESM dist/CountryCodeSelect-ZP44HPNI.mjs 351.65 KB
-ESM dist/chunk-B6U7OYV3.mjs             416.39 KB
-ESM ⚡️ Build success in 4795ms
-CJS dist/index.js 896.14 KB
-CJS ⚡️ Build success in 4796ms
-DTS ⚡️ Build success in 19473ms
-DTS dist/index.d.ts 259.11 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,19 @@
 # @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
+
+- ed4dc214: NumericStepper: Make label work as "add one" button if the value is zero
+- 0e951ddf: Input: Display text cursor for form labels inside of inputs.
+
 ## 3.0.1
 
 ### Patch Changes

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

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

package/dist/{chunk-B6U7OYV3.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
     );
@@ -4224,7 +4229,13 @@ function Combobox({
     ...rest,
     defaultFilter: contains2,
     allowsEmptyCollection: Boolean(emptyContent),
-    shouldCloseOnBlur: true
+    shouldCloseOnBlur: true,
+    label
+  });
+  useOutsideClick({
+    ref: listBoxRef,
+    handler: state2.close,
+    enabled: true
   });
   const {
     inputProps: { size: size2, ...inputProps },
@@ -4266,6 +4277,7 @@ function Combobox({
         {
           width: "1.5rem",
           alignSelf: "center",
+          paddingRight,
           css: {
             div: {
               display: "flex",
@@ -4281,7 +4293,8 @@ function Combobox({
       state: state2,
       triggerRef: inputRef,
       ref: popoverRef,
-      placement: "bottom start"
+      placement: "bottom start",
+      shouldFlip: false
     },
     /* @__PURE__ */ React49__default.createElement(
       ListBox,
@@ -4673,6 +4686,7 @@ function NumericStepper({
       name: nameProp,
       value,
       ...formControlProps,
+      id: value !== 0 ? formControlProps.id : void 0,
       fontSize: "sm",
       fontWeight: "bold",
       width: "3ch",
@@ -4720,7 +4734,8 @@ function NumericStepper({
       "aria-label": t2(texts11.incrementButtonAriaLabel),
       onClick: () => onChange(value + 1),
       visibility: value >= maxValue ? "hidden" : "visible",
-      isDisabled: formControlProps.disabled
+      isDisabled: formControlProps.disabled,
+      id: value === 0 ? formControlProps.id : void 0
     }
   ));
 }
@@ -4925,7 +4940,7 @@ var texts13 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-ZP44HPNI.mjs'));
+var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-7ASYXAQD.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React49__default.createElement(Radio$1, { ...props, ref });
 });
@@ -11904,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(
@@ -12743,7 +12759,8 @@ var config21 = helpers13.defineMultiStyleConfig({
         position: "absolute",
         my: 2,
         transition: ".1s ease-out",
-        transformOrigin: "top left"
+        transformOrigin: "top left",
+        cursor: "text"
       },
       "&:not(:placeholder-shown)": {
         pt: "16px",

package/dist/index.d.ts

@@ -2706,6 +2706,7 @@ declare const theme: {
                     fontSize: string;
                     color: string;
                     margin: number;
+                    cursor: string;
                 };
                 dateTimeSegment: {
                     color: string;
@@ -3383,6 +3384,7 @@ declare const theme: {
                         my: number;
                         transition: string;
                         transformOrigin: string;
+                        cursor: string;
                     };
                     "&:not(:placeholder-shown)": {
                         pt: string;
@@ -4047,6 +4049,7 @@ declare const theme: {
                         my: number;
                         transition: string;
                         transformOrigin: string;
+                        cursor: string;
                     };
                     "&:not(:placeholder-shown)": {
                         pt: string;
@@ -4827,6 +4830,7 @@ declare const theme: {
                     my: number;
                     transition: string;
                     transformOrigin: string;
+                    cursor: string;
                 };
                 "&:not(:placeholder-shown)": {
                     pt: 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
         );
@@ -4734,7 +4739,13 @@ function Combobox({
     ...rest,
     defaultFilter: contains2,
     allowsEmptyCollection: Boolean(emptyContent),
-    shouldCloseOnBlur: true
+    shouldCloseOnBlur: true,
+    label
+  });
+  react.useOutsideClick({
+    ref: listBoxRef,
+    handler: state2.close,
+    enabled: true
   });
   const {
     inputProps: { size: size2, ...inputProps },
@@ -4776,6 +4787,7 @@ function Combobox({
         {
           width: "1.5rem",
           alignSelf: "center",
+          paddingRight,
           css: {
             div: {
               display: "flex",
@@ -4791,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,
@@ -5252,6 +5265,7 @@ function NumericStepper({
       name: nameProp,
       value,
       ...formControlProps,
+      id: value !== 0 ? formControlProps.id : void 0,
       fontSize: "sm",
       fontWeight: "bold",
       width: "3ch",
@@ -5299,7 +5313,8 @@ function NumericStepper({
       "aria-label": t2(texts11.incrementButtonAriaLabel),
       onClick: () => onChange(value + 1),
       visibility: value >= maxValue ? "hidden" : "visible",
-      isDisabled: formControlProps.disabled
+      isDisabled: formControlProps.disabled,
+      id: value === 0 ? formControlProps.id : void 0
     }
   ));
 }
@@ -19976,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(
@@ -20870,7 +20886,8 @@ var init_input2 = __esm({
             position: "absolute",
             my: 2,
             transition: ".1s ease-out",
-            transformOrigin: "top left"
+            transformOrigin: "top left",
+            cursor: "text"
           },
           "&:not(:placeholder-shown)": {
             pt: "16px",

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-B6U7OYV3.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.1",
+  "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> & {
@@ -93,6 +93,13 @@ export function Combobox<T extends object>({
     defaultFilter: contains,
     allowsEmptyCollection: Boolean(emptyContent),
     shouldCloseOnBlur: true,
+    label,
+  });
+
+  useOutsideClick({
+    ref: listBoxRef,
+    handler: state.close,
+    enabled: true,
   });
 
   const {
@@ -140,6 +147,7 @@ export function Combobox<T extends object>({
             <ColorSpinner
               width="1.5rem"
               alignSelf="center"
+              paddingRight={paddingRight}
               css={{
                 div: {
                   display: "flex",
@@ -158,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/NumericStepper.tsx

@@ -94,6 +94,7 @@ export function NumericStepper({
         name={nameProp}
         value={value}
         {...formControlProps}
+        id={value !== 0 ? formControlProps.id : undefined}
         fontSize="sm"
         fontWeight="bold"
         width="3ch"
@@ -140,6 +141,7 @@ export function NumericStepper({
         onClick={() => onChange(value + 1)}
         visibility={value >= maxValue ? "hidden" : "visible"}
         isDisabled={formControlProps.disabled}
+        id={value === 0 ? formControlProps.id : undefined}
       />
     </Flex>
   );
@@ -156,6 +158,8 @@ type VerySmallButtonProps = {
   visibility?: "visible" | "hidden";
   /** Whether or not the button is disabled */
   isDisabled?: boolean;
+  /** The ID of the button */
+  id?: string;
 };
 /** Internal override for extra small icon buttons */
 const VerySmallButton = (props: VerySmallButtonProps) => {

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(

package/src/theme/components/input.ts

@@ -82,6 +82,7 @@ const config = helpers.defineMultiStyleConfig({
         my: 2,
         transition: ".1s ease-out",
         transformOrigin: "top left",
+        cursor: "text",
       },
       "&:not(:placeholder-shown)": {
         pt: "16px",