add js changes to ts files

dnbexperience · Jan 5, 2024 · 66c8707 · 66c8707
1 parent f76f3db
commit 66c8707
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePicker.tsx b/packages/dnb-eufemia/src/components/date-picker/DatePicker.tsx
@@ -59,7 +59,7 @@ type DatePickerAlignPicker = 'auto' | 'left' | 'right'
 
 export type DatePickerProps = Omit<
   React.HTMLProps<HTMLElement>,
-  'ref' | 'children'
+  'ref' | 'children' | 'label' | 'size' | 'onBlur'
 > &
   SpacingProps & {
     id?: string
@@ -278,6 +278,10 @@ export type DatePickerProps = Omit<
      * Will be called once a user presses the reset button.
      */
     on_reset?: (...args: any[]) => any
+    /**
+     * Will be called once the input loses focus.
+     */
+    onBlur?: (event: React.FocusEventHandler<HTMLInputElement>) => void
   }
 
 const defaultProps: DatePickerProps = {

diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePickerInput.tsx b/packages/dnb-eufemia/src/components/date-picker/DatePickerInput.tsx
@@ -385,9 +385,13 @@ function DatePickerInput(externalProps: DatePickerInputProps) {
     setFocusState('focus')
   }
 
-  function onBlurHandler() {
+  function onBlurHandler(event: React.FocusEvent<HTMLInputElement>) {
     focusMode.current = null
     setFocusState('blur')
+
+    if (props.onBlur) {
+      props.onBlur(event)
+    }
   }
 
   async function onKeyDownHandler(event) {
@@ -748,6 +752,7 @@ function DatePickerInput(externalProps: DatePickerInputProps) {
     onChange, // eslint-disable-line
     onFocus, // eslint-disable-line
     onSubmit, // eslint-disable-line
+    onBlur, // eslint-disable-line
     selectedDateTitle, // eslint-disable-line
     showInput, // eslint-disable-line
     input_element,
@@ -836,7 +841,7 @@ const selectAll = (target) => {
   target.select()
 }
 
-function InputElement(props: TextMaskProps) {
+function InputElement({ className, value, ...props }: TextMaskProps) {
   return (
     <TextMask
       guide={true}
@@ -846,6 +851,11 @@ function InputElement(props: TextMaskProps) {
       autoCapitalize="none"
       spellCheck={false}
       autoCorrect="off"
+      className={classnames(
+        className,
+        /\d+/.test(String(value)) && 'dnb-date-picker__input--highlight'
+      )}
+      value={value}
       {...props}
     />
   )