@dnb/eufemia 10.0.0-beta.1 → 10.0.0-beta.2

package/components/checkbox/Checkbox.d.ts

@@ -1,64 +1,27 @@
 import * as React from 'react';
-export type CheckboxLabel =
-  | string
-  | ((...args: any[]) => any)
-  | React.ReactNode;
+import type {
+  FormStatusProps,
+  FormStatusState,
+  FormStatusText
+} from '../FormStatus';
+import type { FormLabelText } from '../FormLabel';
+import type { SkeletonShow } from '../Skeleton';
+import type { SpacingProps } from '../space/types';
 export type CheckboxLabelPosition = 'left' | 'right';
-export type CheckboxChecked = string | boolean;
-export type CheckboxDisabled = string | boolean;
 export type CheckboxSize = 'default' | 'medium' | 'large';
-export type CheckboxStatus =
-  | string
-  | boolean
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type CheckboxStatusNoAnimation = string | boolean;
 export type CheckboxSuffix =
   | string
   | ((...args: any[]) => any)
   | React.ReactNode;
 export type CheckboxAttributes = string | Record<string, unknown>;
-export type CheckboxReadOnly = string | boolean;
-export type CheckboxSkeleton = string | boolean;
-export type CheckboxSpace =
-  | string
-  | number
-  | boolean
-  | {
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-       */
-      top?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-       */
-      right?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-       */
-      bottom?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-       */
-      left?: string | number | boolean;
-    };
-export type CheckboxTop = string | number | boolean;
-export type CheckboxRight = string | number | boolean;
-export type CheckboxBottom = string | number | boolean;
-export type CheckboxLeft = string | number | boolean;
 export type CheckboxChildren = string | ((...args: any[]) => any);
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
-export interface CheckboxProps extends React.HTMLProps<HTMLElement> {
+export interface CheckboxProps
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   /**
    * Use either the `label` property or provide a custom one.
    */
-  label?: CheckboxLabel;
+  label?: FormLabelText;
 
   /**
    * Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`.
@@ -79,8 +42,8 @@ export interface CheckboxProps extends React.HTMLProps<HTMLElement> {
   /**
    * Determine whether the checkbox is checked or not. The default is `false`.
    */
-  checked?: CheckboxChecked;
-  disabled?: CheckboxDisabled;
+  checked?: boolean;
+  disabled?: boolean;
   id?: string;
 
   /**
@@ -91,18 +54,18 @@ export interface CheckboxProps extends React.HTMLProps<HTMLElement> {
   /**
    * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.
    */
-  status?: CheckboxStatus;
+  status?: FormStatusText;
 
   /**
    * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
-  status_state?: string;
+  status_state?: FormStatusState;
 
   /**
    * Use an object to define additional FormStatus properties.
    */
-  status_props?: Record<string, unknown>;
-  status_no_animation?: CheckboxStatusNoAnimation;
+  status_props?: FormStatusProps;
+  status_no_animation?: boolean;
 
   /**
    * The `status_id` used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
@@ -115,38 +78,13 @@ export interface CheckboxProps extends React.HTMLProps<HTMLElement> {
   suffix?: CheckboxSuffix;
   value?: string;
   attributes?: CheckboxAttributes;
-  readOnly?: CheckboxReadOnly;
+  readOnly?: boolean;
 
   /**
    * If set to `true`, an overlaying skeleton with animation will be shown.
    */
-  skeleton?: CheckboxSkeleton;
+  skeleton?: SkeletonShow;
   class?: string;
-
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: CheckboxSpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: CheckboxTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: CheckboxRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: CheckboxBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: CheckboxLeft;
   className?: string;
   children?: CheckboxChildren;
 
@@ -160,10 +98,6 @@ export default class Checkbox extends React.Component<CheckboxProps, any> {
   static defaultProps: object;
   render(): JSX.Element;
 }
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface CheckIconProps {
   /**
    * The size of the checkbox. For now there is "medium" (default) and "large".

package/components/date-picker/DatePicker.d.ts

@@ -1,4 +1,13 @@
 import * as React from 'react';
+import type { FormLabelLabelDirection, FormLabelText } from '../FormLabel';
+import type {
+  FormStatusProps,
+  FormStatusState,
+  FormStatusText
+} from '../FormStatus';
+import type { InputInputElement } from '../Input';
+import type { SkeletonShow } from '../Skeleton';
+import type { SpacingProps } from '../space/types';
 export type DatePickerDate = Date | string;
 export type DatePickerStartDate = Date | string;
 export type DatePickerEndDate = Date | string;
@@ -7,87 +16,18 @@ export type DatePickerStartMonth = Date | string;
 export type DatePickerEndMonth = Date | string;
 export type DatePickerMinDate = Date | string;
 export type DatePickerMaxDate = Date | string;
-export type DatePickerCorrectInvalidDate = string | boolean;
-export type DatePickerHideNavigation = string | boolean;
-export type DatePickerHideNavigationButtons = string | boolean;
-export type DatePickerHideDays = string | boolean;
-export type DatePickerOnlyMonth = string | boolean;
-export type DatePickerHideLastWeek = string | boolean;
-export type DatePickerDisableAutofocus = string | boolean;
-export type DatePickerEnableKeyboardNav = string | boolean;
-export type DatePickerShowInput = string | boolean;
-export type DatePickerShowSubmitButton = string | boolean;
-export type DatePickerShowCancelButton = string | boolean;
-export type DatePickerShowResetButton = string | boolean;
-export type DatePickerResetDate = string | boolean;
-export type DatePickerRange = string | boolean;
-export type DatePickerLink = string | boolean;
-export type DatePickerSync = string | boolean;
-export type DatePickerLabel =
-  | string
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type DatePickerLabelDirection = 'horizontal' | 'vertical';
-export type DatePickerLabelSrOnly = string | boolean;
-export type DatePickerInputElement =
-  | string
-  | ((...args: any[]) => any)
-  | React.ReactNode;
 export type DatePickerAddonElement = string | React.ReactNode;
 export type DatePickerShortcuts = any[] | ((...args: any[]) => any);
-export type DatePickerDisabled = string | boolean;
-export type DatePickerStretch = string | boolean;
-export type DatePickerSkeleton = string | boolean;
 export type DatePickerSize = 'default' | 'small' | 'medium' | 'large';
-export type DatePickerStatus =
-  | string
-  | boolean
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type DatePickerStatusNoAnimation = string | boolean;
 export type DatePickerSuffix =
   | string
   | ((...args: any[]) => any)
   | React.ReactNode;
-export type DatePickerOpened = string | boolean;
-export type DatePickerPreventClose = string | boolean;
-export type DatePickerNoAnimation = string | boolean;
 export type DatePickerDirection = 'auto' | 'top' | 'bottom';
 export type DatePickerAlignPicker = 'auto' | 'left' | 'right';
-export type DatePickerSpace =
-  | string
-  | number
-  | boolean
-  | {
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-       */
-      top?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-       */
-      right?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-       */
-      bottom?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-       */
-      left?: string | number | boolean;
-    };
-export type DatePickerTop = string | number | boolean;
-export type DatePickerRight = string | number | boolean;
-export type DatePickerBottom = string | number | boolean;
-export type DatePickerLeft = string | number | boolean;
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
-export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
+export interface DatePickerProps
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   id?: string;
   title?: string;
 
@@ -97,12 +37,12 @@ export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
   date?: DatePickerDate;
 
   /**
-   * To set the pre-filled starting date. Is used if `range={true}` is set to true. Defaults to null, showing the `mask_placeholder`.
+   * To set the pre-filled starting date. Is used if `range={true}` is set to `true`. Defaults to `null`, showing the `mask_placeholder`.
    */
   start_date?: DatePickerStartDate;
 
   /**
-   * To set the pre-filled ending date. Is used if `range={true}` is set to true. Defaults to null, showing the `mask_placeholder`.
+   * To set the pre-filled ending date. Is used if `range={true}` is set to `true`. Defaults to `null`, showing the `mask_placeholder`.
    */
   end_date?: DatePickerEndDate;
 
@@ -122,15 +62,15 @@ export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
   end_month?: DatePickerEndMonth;
 
   /**
-   * To limit a date range to a minimum `start_date`. Defaults to null.
+   * To limit a date range to a minimum `start_date`. Defaults to `null`.
    */
   min_date?: DatePickerMinDate;
 
   /**
-   * To limit a date range to a maximum `end_date`. Defaults to null.
+   * To limit a date range to a maximum `end_date`. Defaults to `null`.
    */
   max_date?: DatePickerMaxDate;
-  correct_invalid_date?: DatePickerCorrectInvalidDate;
+  correct_invalid_date?: boolean;
 
   /**
    * To define the order of the masked placeholder input fields. Defaults to `dd/mm/yyyy`
@@ -155,53 +95,53 @@ export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
   /**
    * If set to `true`, the navigation will be hidden. Defaults to `false`.
    */
-  hide_navigation?: DatePickerHideNavigation;
-  hide_navigation_buttons?: DatePickerHideNavigationButtons;
+  hide_navigation?: boolean;
+  hide_navigation_buttons?: boolean;
 
   /**
    * If set to `true`, the week days will be hidden. Defaults to `false`.
    */
-  hide_days?: DatePickerHideDays;
+  hide_days?: boolean;
 
   /**
    * Use `true` to only show the defined month. Disables the month navigation possibility. Defaults to `false`.
    */
-  only_month?: DatePickerOnlyMonth;
+  only_month?: boolean;
 
   /**
    * Use `true` to only show the last week in the current month if it needs to be shown. The result is that there will mainly be shows five (5) weeks (rows) instead of six (6). Defaults to `false`.
    */
-  hide_last_week?: DatePickerHideLastWeek;
+  hide_last_week?: boolean;
 
   /**
    * Once the date picker gets opened, there is a focus handling to ensure good accessibility. This can be disabled with this property. Defaults to `false`.
    */
-  disable_autofocus?: DatePickerDisableAutofocus;
-  enable_keyboard_nav?: DatePickerEnableKeyboardNav;
+  disable_autofocus?: boolean;
+  enable_keyboard_nav?: boolean;
 
   /**
    * If the input fields with the mask should be visible. Defaults to `false`.
    */
-  show_input?: DatePickerShowInput;
+  show_input?: boolean;
 
   /**
    * If set to `true`, a submit button will be shown. You can change the default text by using `submit_button_text="Ok"`. Defaults to `false`. If the `range` prop is `true`, then the submit button is shown.
    */
-  show_submit_button?: DatePickerShowSubmitButton;
+  show_submit_button?: boolean;
 
   /**
    * If set to `true`, a cancel button will be shown. You can change the default text by using `cancel_button_text="Avbryt"` Defaults to `false`. If the `range` prop is `true`, then the cancel button is shown.
    */
-  show_cancel_button?: DatePickerShowCancelButton;
+  show_cancel_button?: boolean;
 
   /**
    * If set to `true`, a reset button will be shown. You can change the default text by using `reset_button_text="Tilbakestill"` Defaults to `false`.
    */
-  show_reset_button?: DatePickerShowResetButton;
+  show_reset_button?: boolean;
   submit_button_text?: string;
   cancel_button_text?: string;
   reset_button_text?: string;
-  reset_date?: DatePickerResetDate;
+  reset_date?: boolean;
 
   /**
    * To define the first day of the week. Defaults to `monday`.
@@ -216,37 +156,37 @@ export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
   /**
    * If the date picker should support a range of two dates (starting and ending date). Defaults to `false`.
    */
-  range?: DatePickerRange;
+  range?: boolean;
 
   /**
-   * Link both calendars, once to the user is navigating between months. Only meant to use if the range is set to true. Defaults to `false`.
+   * Link both calendars, once to the user is navigating between months. Only meant to use if the range is set to `true`. Defaults to `false`.
    */
-  link?: DatePickerLink;
+  link?: boolean;
 
   /**
    * Sync input values with the calendars views. Once the input values get changed, the calendar changes its views in sync. Defaults to `true`.
    */
-  sync?: DatePickerSync;
+  sync?: boolean;
 
   /**
    * A prepending label in sync with the date input field.
    */
-  label?: DatePickerLabel;
+  label?: FormLabelText;
 
   /**
    * Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`.
    */
-  label_direction?: DatePickerLabelDirection;
+  label_direction?: FormLabelLabelDirection;
 
   /**
    * Use `true` to make the label only readable by screen readers.
    */
-  label_sr_only?: DatePickerLabelSrOnly;
+  label_sr_only?: boolean;
 
   /**
    * Gives you the possibility to use a plain/vanilla `<input />` HTML element by defining it as a string `input_element="input"`, a React element, or a render function `input_element={(internalProps) => (<Return />)}`. Can also be used in circumstances where the `react-text-mask` not should be used, e.g. in testing environments. Defaults to custom masked input.
    */
-  input_element?: DatePickerInputElement;
+  input_element?: InputInputElement;
 
   /**
    * Gives you the possibility to inject a React element showing up over the footer. Use it to customize `shortcuts`.
@@ -257,17 +197,17 @@ export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
    * Gives you the possibility to set predefined dates and date ranges so the user can select these by one click. Define either a JSON or an object with the defined shortcuts. More info is below.
    */
   shortcuts?: DatePickerShortcuts;
-  disabled?: DatePickerDisabled;
+  disabled?: boolean;
 
   /**
    * If set to `true`, then the date-picker input field will be 100% in `width`.
    */
-  stretch?: DatePickerStretch;
+  stretch?: boolean;
 
   /**
    * If set to `true`, an overlaying skeleton with animation will be shown.
    */
-  skeleton?: DatePickerSkeleton;
+  skeleton?: SkeletonShow;
 
   /**
    * The sizes you can choose is `small` (1.5rem), `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`.
@@ -277,18 +217,18 @@ export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
   /**
    * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.
    */
-  status?: DatePickerStatus;
+  status?: FormStatusText;
 
   /**
    * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
-  status_state?: string;
+  status_state?: FormStatusState;
 
   /**
    * Use an object to define additional FormStatus properties.
    */
-  status_props?: Record<string, unknown>;
-  status_no_animation?: DatePickerStatusNoAnimation;
+  status_props?: FormStatusProps;
+  status_no_animation?: boolean;
 
   /**
    * The `status_id` used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
@@ -303,9 +243,9 @@ export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
   /**
    * To open the date-picker by default. Defaults to `false`.
    */
-  opened?: DatePickerOpened;
-  prevent_close?: DatePickerPreventClose;
-  no_animation?: DatePickerNoAnimation;
+  opened?: boolean;
+  prevent_close?: boolean;
+  no_animation?: boolean;
   direction?: DatePickerDirection;
 
   /**
@@ -315,31 +255,6 @@ export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
   class?: string;
   className?: string;
 
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: DatePickerSpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: DatePickerTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: DatePickerRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: DatePickerBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: DatePickerLeft;
-
   /**
    * Will be called right before every new calendar view gets rendered. See the example above.
    */

package/components/date-picker/DatePickerAddon.d.ts

@@ -3,10 +3,6 @@ export type DatePickerAddonShortcuts = any[] | ((...args: any[]) => any);
 export type DatePickerAddonRenderElement =
   | React.ReactNode
   | ((...args: any[]) => any);
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface DatePickerAddonProps
   extends React.HTMLProps<HTMLElement> {
   /**

package/components/date-picker/DatePickerCalendar.d.ts

@@ -1,8 +1,4 @@
 import * as React from 'react';
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface DatePickerCalendarProps
   extends React.HTMLProps<HTMLElement> {
   id?: string;

package/components/date-picker/DatePickerFooter.d.ts

@@ -1,8 +1,4 @@
 import * as React from 'react';
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface DatePickerFooterProps
   extends React.HTMLProps<HTMLElement> {
   isRange: boolean;

package/components/date-picker/DatePickerInput.d.ts

@@ -1,18 +1,12 @@
 import * as React from 'react';
+import {
+  FormStatusProps,
+  FormStatusState,
+  FormStatusText
+} from '../FormStatus';
+import type { InputInputElement } from '../Input';
+import type { SkeletonShow } from '../Skeleton';
 export type DatePickerInputSize = 'default' | 'small' | 'medium' | 'large';
-export type DatePickerInputStatus =
-  | string
-  | boolean
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type DatePickerInputInputElement =
-  | string
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface DatePickerInputProps
   extends React.HTMLProps<HTMLElement> {
   id?: string;
@@ -32,22 +26,22 @@ export interface DatePickerInputProps
   /**
    * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.
    */
-  status?: DatePickerInputStatus;
+  status?: FormStatusText;
 
   /**
    * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
-  status_state?: string;
+  status_state?: FormStatusState;
 
   /**
    * Use an object to define additional FormStatus properties.
    */
-  status_props?: Record<string, unknown>;
+  status_props?: FormStatusProps;
 
   /**
    * Gives you the possibility to use a plain/vanilla `<input />` HTML element by defining it as a string `input_element="input"`, a React element, or a render function `input_element={(internalProps) => (<Return />)}`. Can also be used in circumstances where the `react-text-mask` not should be used, e.g. in testing environments. Defaults to custom masked input.
    */
-  input_element?: DatePickerInputInputElement;
+  input_element?: InputInputElement;
 
   /**
    * To define the locale used in the calendar. Needs to be an `date-fns` "v2" locale object, like `import enLocale from &#39;date-fns/locale/en-GB&#39;`. Defaults to `nb-NO`.
@@ -58,7 +52,7 @@ export interface DatePickerInputProps
   /**
    * If set to `true`, an overlaying skeleton with animation will be shown.
    */
-  skeleton?: boolean;
+  skeleton?: SkeletonShow;
 
   /**
    * To open the date-picker by default. Defaults to `false`.

package/components/date-picker/DatePickerInput.js

@@ -215,20 +215,20 @@ export default class DatePickerInput extends React.PureComponent {
           event
         });
         await wait(1);
-        const endPos = target.value.length;
-        target.focus();
-        target.setSelectionRange(0, endPos);
+        selectAll(target);
       } catch (e) {
         warn(e);
       }
     });
 
+    _defineProperty(this, "selectStart", target => {
+      target.focus();
+      target.setSelectionRange(0, 0);
+    });
+
     _defineProperty(this, "onFocusHandler", event => {
       try {
-        const target = event.target;
-        const endPos = target.value.length;
-        target.focus();
-        target.setSelectionRange(0, endPos);
+        selectAll(event.target);
       } catch (e) {
         warn(e);
       }
@@ -251,6 +251,10 @@ export default class DatePickerInput extends React.PureComponent {
       const keyCode = keycode(event);
       const target = event.target;
 
+      if (target.selectionStart !== target.selectionEnd) {
+        this.selectStart(target);
+      }
+
       switch (keyCode) {
         case 'up':
         case 'down':
@@ -448,7 +452,6 @@ export default class DatePickerInput extends React.PureComponent {
         if (!input_element) {
           params = _objectSpread(_objectSpread({}, params), {}, {
             onKeyDown: this.onKeyDownHandler,
-            onMouseUp: selectInput,
             onPaste: this.shortcutHandler,
             onFocus: e => {
               this.focusMode = mode;
@@ -669,9 +672,9 @@ process.env.NODE_ENV !== "production" ? DatePickerInput.propTypes = {
   onFocus: PropTypes.func
 } : void 0;
 
-const selectInput = e => {
-  e.target.focus();
-  e.target.select();
+const selectAll = target => {
+  target.focus();
+  target.select();
 };
 
 const InputElement = props => {

package/components/date-picker/DatePickerProvider.d.ts

@@ -1,20 +1,15 @@
 import * as React from 'react';
 export type DatePickerProviderMinDate = Date | string;
 export type DatePickerProviderMaxDate = Date | string;
-export type DatePickerProviderRange = boolean | string;
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface DatePickerProviderProps
   extends React.HTMLProps<HTMLElement> {
   /**
-   * To limit a date range to a minimum `start_date`. Defaults to null.
+   * To limit a date range to a minimum `start_date`. Defaults to `null`.
    */
   min_date?: DatePickerProviderMinDate;
 
   /**
-   * To limit a date range to a maximum `end_date`. Defaults to null.
+   * To limit a date range to a maximum `end_date`. Defaults to `null`.
    */
   max_date?: DatePickerProviderMaxDate;
 
@@ -26,7 +21,7 @@ export interface DatePickerProviderProps
   /**
    * If the date picker should support a range of two dates (starting and ending date). Defaults to `false`.
    */
-  range: DatePickerProviderRange;
+  range: boolean;
   setReturnObject: (...args: any[]) => any;
   enhanceWithMethods?: Record<string, unknown>;
   attributes?: Record<string, unknown>;