@northlight/ui 2.43.2 → 2.43.3

package/lib/components/date-picker/components/date-field/types.ts

@@ -2,6 +2,7 @@ import { HTMLAttributes, ReactNode } from 'react'
 import { DateValue } from '@internationalized/date'
 import { AriaDateFieldProps } from '@react-aria/datepicker'
 import { DateFieldState, DateSegment } from '@react-stately/datepicker'
+import { AriaButtonProps } from '@react-aria/button'
 
 export type DateSegmentType = DateSegment
 export interface DateFieldProps extends AriaDateFieldProps<DateValue> {
@@ -19,13 +20,7 @@ export interface StyledFieldProps extends HTMLAttributes<HTMLElement> {
   children: ReactNode
   variant?: 'outline' | 'filled'
 }
-export interface TriggerProps {
-  id?: string
-  'aria-haspopup'?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
-  'aria-label'?: string
-  'aria-labelledby'?: string
-  'aria-describedby'?: string
-  'aria-expanded'?: boolean | 'true' | 'false'
-  isDisabled?: boolean
+
+export interface TriggerProps extends AriaButtonProps {
   handleClick: () => void
 }

package/lib/components/date-picker/date-picker/date-picker.tsx

@@ -63,6 +63,7 @@ import { DatePickerLocaleWrapper } from './date-picker-locale-wrapper'
  */
 export const DatePicker = (props: DatePickerProps) => {
   const {
+    'data-testid': dataTestId,
     isDisabled,
     isClearable = true,
     resetDate,
@@ -250,7 +251,7 @@ export const DatePicker = (props: DatePickerProps) => {
       placement="bottom-end"
     >
       <PopoverAnchor>
-        <HStack minW={ 56 }>
+        <HStack minW={ 56 } data-testid={ dataTestId }>
           <InputGroup
             role={ groupRole }
             id={ groupId }
@@ -271,7 +272,7 @@ export const DatePicker = (props: DatePickerProps) => {
               isInvalid={ isInvalid }
               variant={ variant }
             >
-              <Box paddingInlineStart="1a" paddingInlineEnd={ 10 }>
+              <Box paddingInlineStart="1a" data-testid="date-picker-input-field" paddingInlineEnd={ 10 }>
                 <DateField
                   { ...restFieldProps }
                   id={ fieldId }
@@ -299,6 +300,7 @@ export const DatePicker = (props: DatePickerProps) => {
             <InputRightElement
               sx={ { height: '100%', paddingRight: '1' } }
               zIndex={ 0 }
+              data-testid="date-picker-trigger"
             >
               <Trigger
                 id={ buttonId }

package/lib/components/date-picker/date-picker/date-range-picker.tsx

@@ -179,7 +179,6 @@ export const DateRangePicker = (props: DateRangePickerProps) => {
       startName,
       endName,
       'aria-label': 'Date range picker',
-      ...(!isNil(dataTestId) && { 'data-testid': dataTestId }),
     },
     state,
     ref
@@ -344,7 +343,7 @@ export const DateRangePicker = (props: DateRangePickerProps) => {
       placement="bottom-start"
     >
       <PopoverAnchor>
-        <HStack>
+        <HStack data-testid={ dataTestId }>
           <InputGroup
             role={ groupRole }
             id={ groupId }
@@ -365,7 +364,7 @@ export const DateRangePicker = (props: DateRangePickerProps) => {
               isInvalid={ isInvalid }
               variant={ variant }
             >
-              <HStack paddingInlineStart="1a" paddingInlineEnd={ 10 }>
+              <HStack paddingInlineStart="1a" data-test-id="daterange-picker-input-field" paddingInlineEnd={ 10 }>
                 <DateField
                   { ...restStartFieldProps }
                   id={ startFieldId }
@@ -412,7 +411,7 @@ export const DateRangePicker = (props: DateRangePickerProps) => {
                 />
               </HStack>
             </StyledField>
-            <InputRightElement sx={ { height: '100%', paddingRight: '1' } }>
+            <InputRightElement data-test-id="daterange-picker-trigger" sx={ { height: '100%', paddingRight: '1' } }>
               <Trigger
                 id={ buttonId }
                 aria-haspopup={ buttonAriaHasPopup }

package/lib/components/date-picker/types.ts

@@ -29,7 +29,9 @@ interface DatePickerSettings {
 
 export interface DatePickerProps
   extends Omit<AriaDatePickerProps<DateValue>, 'firstDayOfWeek'>,
-  DatePickerSettings {}
+  DatePickerSettings {
+  'data-testid': string
+}
 
 export interface DateRangePickerProps
   extends Omit<AriaDateRangePickerProps<DateValue>, 'firstDayOfWeek' | 'onChange' | 'value' | 'minValue' | 'maxValue'>,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@northlight/ui",
-  "version": "2.43.2",
+  "version": "2.43.3",
   "description": "Northlight UI library, based on Chakra-ui",
   "license": "MIT",
   "author": "Camphouse",
@@ -126,5 +126,5 @@
     "react-dom": ">=18.0.0",
     "react-router-dom": "^5.0.0"
   },
-  "gitHead": "08ca589543218f25a739aa7f7674fd883fb28a3a"
+  "gitHead": "fdae3d38ecd44d41a69cd4bc5e9257d2a39b5751"
 }