@dnanpm/styleguide 3.3.0 → 3.3.1

package/build/es/components/Checkbox/Checkbox.js

@@ -5,19 +5,19 @@ import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize, getDividedSize } from '../../utils/styledUtils.js';
 
-// TODO: Implement proper svg icon after https://jira.dna.fi/browse/STYLE-238 is done
-const SVGIconData = () => {
-    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="16px" height="16px">` +
-        `<path d="M9.57 19.44L3.19 13a.6.6 0 0 1 .81-.84l5.53 5.58 11-10.93a.6.6 0 0 1 .84.85z" />` +
-        `</svg>`;
-    return `data:image/svg+xml,${encodeURIComponent(svg)}`;
-};
+// TODO: Implement proper svg icon after https://jira.dna.fi/browse/STYLE-238 is done
+const SVGIconData = () => {
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="16px" height="16px">` +
+        `<path d="M9.57 19.44L3.19 13a.6.6 0 0 1 .81-.84l5.53 5.58 11-10.93a.6.6 0 0 1 .84.85z" />` +
+        `</svg>`;
+    return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+};
 const Container = styled.div `
     display: flex;
     font-size: ${theme.fontSize.default};
     line-height: ${theme.lineHeight.default};
     margin-bottom: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
-`;
+`;
 const Input = styled(CheckboxAndRadioInputCore) `
     position: relative;
     top: ${getDividedSize(theme.base.baseWidth, 5)};
@@ -29,31 +29,31 @@ const Input = styled(CheckboxAndRadioInputCore) `
             background-image: url('${SVGIconData}');
         }
     }
-`;
+`;
 const Mandatory = styled.span `
     color: ${theme.color.default.pink};
     margin-left: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
-`;
+`;
 const ErrorMessage = styled.div `
     font-size: ${theme.fontSize.s};
     line-height: ${theme.lineHeight.s};
     color: ${theme.color.notification.error};
     margin-bottom: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
-`;
-const Checkbox = (_a) => {
-    var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
-    const handleChange = () => {
-        if (props.onChange && !props.disabled) {
-            props.onChange(!props.value);
-        }
-    };
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Container, null,
-            React__default.createElement(Input, { id: props.id, name: props.name, type: "checkbox", className: props.className, checked: Boolean(props.value), "aria-checked": Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId }),
-            React__default.createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` },
-                props.label,
-                props.required && React__default.createElement(Mandatory, null, "*"))),
-        props.error && props.errorMessage && (React__default.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
+`;
+const Checkbox = (_a) => {
+    var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
+    const handleChange = () => {
+        if (props.onChange && !props.disabled) {
+            props.onChange(!props.value);
+        }
+    };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Container, null,
+            React__default.createElement(Input, { id: props.id, name: props.name, type: "checkbox", className: props.className, checked: Boolean(props.value), "aria-checked": Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId }),
+            React__default.createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` },
+                props.label,
+                props.required && React__default.createElement(Mandatory, null, "*"))),
+        props.error && props.errorMessage && (React__default.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
 };
 
 export { Checkbox as default };

package/build/es/components/Chip/Chip.d.ts

@@ -1,50 +1,50 @@
-import type { MouseEvent, ReactNode } from 'react';
-import React from 'react';
-type ChipType = 'default' | 'info' | 'success' | 'warning' | 'error';
-type ChipVariant = 'outlined' | 'filled';
-interface Props {
-    /**
-     * Unique ID for the component
-     */
-    id?: string;
-    /**
-     * Allows to change the color styling of component, depending on the passed type
-     *
-     * @param {ChipType} default Uses `theme.color.line.L01` color for styling
-     * @param {ChipType} info Uses `theme.color.notification.info` color for styling
-     * @param {ChipType} success Uses `theme.color.notification.success` color for styling
-     * @param {ChipType} warning Uses `theme.color.notification.warning` color for styling
-     * @param {ChipType} error Uses `theme.color.notification.error` color for styling
-     *
-     * @default 'default'
-     */
-    type?: ChipType;
-    /**
-     * Allows to change the appearance styling of component, depending on passed variant
-     *
-     * @param {ChipVariant} outlined Displays the component with border color depending on the `type` property
-     * @param {ChipVariant} filled Displays the component with background color depending on the `type` property
-     *
-     * @default 'outlined'
-     */
-    variant?: ChipVariant;
-    /**
-     * Content of the component
-     */
-    children?: ReactNode;
-    /**
-     * On component click callback
-     */
-    onClick?: (e: MouseEvent<HTMLElement>) => void;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-    /**
-     * Allows to pass testid string for testing purposes
-     */
-    'data-testid'?: string;
-}
-declare const Chip: ({ type, variant, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default Chip;
+import type { MouseEvent, ReactNode } from 'react';
+import React from 'react';
+type ChipType = 'default' | 'info' | 'success' | 'warning' | 'error';
+type ChipVariant = 'outlined' | 'filled';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Allows to change the color styling of component, depending on the passed type
+     *
+     * @param {ChipType} default Uses `theme.color.line.L01` color for styling
+     * @param {ChipType} info Uses `theme.color.notification.info` color for styling
+     * @param {ChipType} success Uses `theme.color.notification.success` color for styling
+     * @param {ChipType} warning Uses `theme.color.notification.warning` color for styling
+     * @param {ChipType} error Uses `theme.color.notification.error` color for styling
+     *
+     * @default 'default'
+     */
+    type?: ChipType;
+    /**
+     * Allows to change the appearance styling of component, depending on passed variant
+     *
+     * @param {ChipVariant} outlined Displays the component with border color depending on the `type` property
+     * @param {ChipVariant} filled Displays the component with background color depending on the `type` property
+     *
+     * @default 'outlined'
+     */
+    variant?: ChipVariant;
+    /**
+     * Content of the component
+     */
+    children?: ReactNode;
+    /**
+     * On component click callback
+     */
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+declare const Chip: ({ type, variant, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Chip;

package/build/es/components/Chip/Chip.js

@@ -4,13 +4,13 @@ import styled__default from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 
-const getStyling = ({ $type, $variant, }) => {
-    const stylingColor = $type === 'default' ? theme.color.line.L01 : theme.color.notification[$type];
-    const border = `border: 2px solid ${stylingColor};`;
-    const background = `background-color: ${$variant === 'outlined' ? theme.color.background.white.default : stylingColor};`;
-    const color = `color: ${$variant === 'outlined' ? theme.color.text.black : theme.color.text.white};`;
-    return `${border}${background}${color}`;
-};
+const getStyling = ({ $type, $variant, }) => {
+    const stylingColor = $type === 'default' ? theme.color.line.L01 : theme.color.notification[$type];
+    const border = `border: 2px solid ${stylingColor};`;
+    const background = `background-color: ${$variant === 'outlined' ? theme.color.background.white.default : stylingColor};`;
+    const color = `color: ${$variant === 'outlined' ? theme.color.text.black : theme.color.text.white};`;
+    return `${border}${background}${color}`;
+};
 const Element = styled__default.div `
     display: inline-block;
     border-radius: ${theme.radius.pill};
@@ -22,10 +22,10 @@ const Element = styled__default.div `
     ${({ onClick }) => onClick && `cursor: pointer`};
 
     ${({ $type, $variant }) => getStyling({ $type, $variant })}
-`;
-const Chip = (_a) => {
-    var { type = 'default', variant = 'outlined', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", "variant", 'data-testid']);
-    return (React__default.createElement(Element, { id: props.id, "$type": type, "$variant": variant, onClick: props.onClick, className: props.className, "data-testid": dataTestId }, props.children));
+`;
+const Chip = (_a) => {
+    var { type = 'default', variant = 'outlined', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", "variant", 'data-testid']);
+    return (React__default.createElement(Element, { id: props.id, "$type": type, "$variant": variant, onClick: props.onClick, className: props.className, "data-testid": dataTestId }, props.children));
 };
 
 export { Chip as default };

package/build/es/components/DateTimePicker/DateTimePicker.d.ts

@@ -1,102 +1,102 @@
-import type { ChangeEvent } from 'react';
-import React from 'react';
-import type { ReactDatePickerProps } from 'react-datepicker';
-import type { LocaleCode } from '../../types/locale.d';
-interface Props {
-    /**
-     * Unique ID for the component
-     */
-    id: string;
-    /**
-     * Default selected date value
-     */
-    date?: Date;
-    /**
-     * Allows to enable range picker functionality.
-     * By passing `null` as value, range picker functionality will be enabled but no value will be provided as default
-     */
-    endDate?: ReactDatePickerProps['endDate'];
-    /**
-     * Input label content
-     */
-    label?: string;
-    /**
-     * Input placeholder content
-     */
-    placeholder?: string;
-    /**
-     * Allows to change formatting of date value in input
-     *
-     * @param {LocaleCode} fi-FI Finnish (Finland)
-     * @param {LocaleCode} en-GB English (United Kingdom)
-     *
-     * @default 'fi-FI'
-     */
-    locale?: LocaleCode;
-    /**
-     * On datetime picker change callback
-     */
-    onChange: ReactDatePickerProps['onChange'];
-    /**
-     * On input change callback
-     */
-    onInputChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * Allows to define time intervals in time picker
-     *
-     * @default 30
-     */
-    timeInterval?: ReactDatePickerProps['timeIntervals'];
-    /**
-     * Text of the error message when input element is in error state
-     */
-    errorMessage?: string;
-    /**
-     * Allows to enable or disable date picker functionality
-     *
-     * @default true
-     */
-    isDatePicker?: boolean;
-    /**
-     * Allows to enable or disable time picker functionality. Ignored when endDate prop is defined
-     *
-     * @default false
-     */
-    isTimePicker?: boolean;
-    /**
-     * Allows to set input element as editable
-     *
-     * @default false
-     */
-    isEditable?: boolean;
-    /**
-     * Allows to disable the component functionality
-     *
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Allows to set input element as mandatory
-     *
-     * @default false
-     */
-    isRequired?: boolean;
-    /**
-     * Allows to displays error icon with `theme.color.notification.error` color in the input element and error message underneath the input
-     *
-     * @default false
-     */
-    isInError?: boolean;
-    /**
-     * Allows to pass testid string for testing purposes
-     */
-    'data-testid'?: string;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-}
-/** @visibleName DateTime Picker */
-declare const DateTimePicker: ({ date: startDate, locale, isDatePicker, isTimePicker, timeInterval, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default DateTimePicker;
+import type { ChangeEvent } from 'react';
+import React from 'react';
+import type { ReactDatePickerProps } from 'react-datepicker';
+import type { LocaleCode } from '../../types/locale.d';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id: string;
+    /**
+     * Default selected date value
+     */
+    date?: Date;
+    /**
+     * Allows to enable range picker functionality.
+     * By passing `null` as value, range picker functionality will be enabled but no value will be provided as default
+     */
+    endDate?: ReactDatePickerProps['endDate'];
+    /**
+     * Input label content
+     */
+    label?: string;
+    /**
+     * Input placeholder content
+     */
+    placeholder?: string;
+    /**
+     * Allows to change formatting of date value in input
+     *
+     * @param {LocaleCode} fi-FI Finnish (Finland)
+     * @param {LocaleCode} en-GB English (United Kingdom)
+     *
+     * @default 'fi-FI'
+     */
+    locale?: LocaleCode;
+    /**
+     * On datetime picker change callback
+     */
+    onChange: ReactDatePickerProps['onChange'];
+    /**
+     * On input change callback
+     */
+    onInputChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Allows to define time intervals in time picker
+     *
+     * @default 30
+     */
+    timeInterval?: ReactDatePickerProps['timeIntervals'];
+    /**
+     * Text of the error message when input element is in error state
+     */
+    errorMessage?: string;
+    /**
+     * Allows to enable or disable date picker functionality
+     *
+     * @default true
+     */
+    isDatePicker?: boolean;
+    /**
+     * Allows to enable or disable time picker functionality. Ignored when endDate prop is defined
+     *
+     * @default false
+     */
+    isTimePicker?: boolean;
+    /**
+     * Allows to set input element as editable
+     *
+     * @default false
+     */
+    isEditable?: boolean;
+    /**
+     * Allows to disable the component functionality
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Allows to set input element as mandatory
+     *
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Allows to displays error icon with `theme.color.notification.error` color in the input element and error message underneath the input
+     *
+     * @default false
+     */
+    isInError?: boolean;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+}
+/** @visibleName DateTime Picker */
+declare const DateTimePicker: ({ date: startDate, locale, isDatePicker, isTimePicker, timeInterval, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default DateTimePicker;

package/build/es/components/DateTimePicker/DateTimePicker.js

@@ -8,45 +8,45 @@ import { getMultipliedSize } from '../../utils/styledUtils.js';
 import ButtonIcon from '../Button/ButtonIcon.js';
 import Input from '../Input/Input.js';
 
-/**
- * Customized local copy of date-fns/locale/fi object to avoid importing unnecessary libraries
- * Contains only used and functionality wise necessary properties
- */
-const localeData = {
-    // https://github.com/date-fns/date-fns/blob/main/src/locale/fi/index.ts
-    'fi-FI': {
-        code: 'fi',
-        formatLong: {
-            date: () => 'eeee d. MMMM y',
-            time: () => 'HH.mm',
-        },
-        localize: {
-            day: (i) => ['Su', 'Ma', 'Ti', 'Ke', 'To', 'Pe', 'La'][i],
-            month: (i) => [
-                'Tammikuu',
-                'Helmikuu',
-                'Maaliskuu',
-                'Huhtikuu',
-                'Toukokuu',
-                'Kesäkuu',
-                'Heinäkuu',
-                'Elokuu',
-                'Syyskuu',
-                'Lokakuu',
-                'Marraskuu',
-                'Joulukuu',
-            ][i],
-            timeCaption: 'Aika',
-        },
-        options: {
-            weekStartsOn: 1,
-            firstWeekContainsDate: 4,
-        },
-    },
-    // Use react-datepicker default language
-    'en-GB': undefined,
-};
-const sentenceCase = (string) => `${string[0].toUpperCase()}${string.slice(1)}`;
+/**
+ * Customized local copy of date-fns/locale/fi object to avoid importing unnecessary libraries
+ * Contains only used and functionality wise necessary properties
+ */
+const localeData = {
+    // https://github.com/date-fns/date-fns/blob/main/src/locale/fi/index.ts
+    'fi-FI': {
+        code: 'fi',
+        formatLong: {
+            date: () => 'eeee d. MMMM y',
+            time: () => 'HH.mm',
+        },
+        localize: {
+            day: (i) => ['Su', 'Ma', 'Ti', 'Ke', 'To', 'Pe', 'La'][i],
+            month: (i) => [
+                'Tammikuu',
+                'Helmikuu',
+                'Maaliskuu',
+                'Huhtikuu',
+                'Toukokuu',
+                'Kesäkuu',
+                'Heinäkuu',
+                'Elokuu',
+                'Syyskuu',
+                'Lokakuu',
+                'Marraskuu',
+                'Joulukuu',
+            ][i],
+            timeCaption: 'Aika',
+        },
+        options: {
+            weekStartsOn: 1,
+            firstWeekContainsDate: 4,
+        },
+    },
+    // Use react-datepicker default language
+    'en-GB': undefined,
+};
+const sentenceCase = (string) => `${string[0].toUpperCase()}${string.slice(1)}`;
 const Wrapper = styled__default.div `
     position: relative;
 
@@ -199,7 +199,7 @@ const Wrapper = styled__default.div `
             }
         }
     }
-`;
+`;
 const MonthSelector = styled__default.div `
     display: flex;
     align-items: center;
@@ -208,64 +208,64 @@ const MonthSelector = styled__default.div `
     span.dnasg-icon > svg {
         fill: ${theme.color.text.gray};
     }
-`;
+`;
 const CurrentMonth = styled__default.div `
     font-size: ${theme.fontSize.default};
     line-height: ${theme.lineHeight.default};
     font-weight: ${theme.fontWeight.bold};
-`;
-const DateTimePickerCustomHeader = ({ date, decreaseMonth, increaseMonth, locale, }) => (React__default.createElement(MonthSelector, null,
-    React__default.createElement(ButtonIcon, { icon: ChevronLeft, onClick: decreaseMonth }),
-    React__default.createElement(CurrentMonth, null, sentenceCase(date.toLocaleString(locale, {
-        month: 'long',
-        year: 'numeric',
-    }))),
-    React__default.createElement(ButtonIcon, { icon: ChevronRight, onClick: increaseMonth })));
-/** @visibleName DateTime Picker */
-const DateTimePicker = (_a) => {
-    var _b;
-    var { date: startDate, locale = 'fi-FI', isDatePicker = true, isTimePicker = false, timeInterval = 30, 'data-testid': dataTestId } = _a, props = __rest(_a, ["date", "locale", "isDatePicker", "isTimePicker", "timeInterval", 'data-testid']);
-    const [showReactDatePicker, setShowReactDatePicker] = useState(false);
-    const handleOnInputFocus = () => {
-        setShowReactDatePicker(true);
-    };
-    const handleOnInputChange = (_, e) => {
-        if (props.onInputChange) {
-            props.onInputChange(e);
-        }
-    };
-    const handleOnKeyDown = (e) => {
-        if (!props.isEditable &&
-            (e.key === 'Backspace' || e.key === 'Delete' || e.key === 'Clear')) {
-            props.onChange(null, e);
-        }
-    };
-    const handleClearable = (e) => {
-        props.onChange(null, e);
-    };
-    const handleOnReactDatePickerChange = (date, e) => {
-        setShowReactDatePicker(false);
-        props.onChange(date, e);
-    };
-    const handleOnReactDatePickerClickOutside = () => {
-        setShowReactDatePicker(false);
-    };
-    const formatInputValue = [startDate, props.endDate]
-        .filter(Boolean)
-        .map(date => date === null || date === void 0 ? void 0 : date.toLocaleString(locale, Object.assign(Object.assign({}, (isDatePicker && {
-        dateStyle: 'medium',
-    })), (props.endDate === undefined &&
-        isTimePicker && {
-        timeStyle: 'short',
-    }))))
-        .join(' - ');
-    const getDateTimePickerCustomHeader = (args) => DateTimePickerCustomHeader(Object.assign(Object.assign({}, args), { locale }));
-    return (React__default.createElement(Wrapper, { id: props.id, className: props.className, "data-testid": dataTestId },
-        React__default.createElement(Input, { id: `datetimepicker-input-${props.id}`, name: `datetimepicker-input-${props.id}`, label: props.label, placeholder: props.placeholder, value: formatInputValue, onFocus: handleOnInputFocus, onChange: handleOnInputChange, onKeyDown: handleOnKeyDown, onClearableButtonClick: handleClearable, className: "react-datepicker-ignore-onclickoutside", "data-testid": dataTestId && `${dataTestId}-datetimepicker-input`, disabled: props.isDisabled, required: props.isRequired, readonly: !props.isEditable, status: props.isInError ? 'error' : undefined, errorMessage: props.errorMessage }),
-        showReactDatePicker && (React__default.createElement(ReactDatePicker, { inline: true, selected: startDate, startDate: startDate, endDate: props.endDate, onChange: handleOnReactDatePickerChange, selectsRange: props.endDate !== undefined, showTimeSelect: props.endDate === undefined && isTimePicker, showTimeSelectOnly: props.endDate === undefined && !isDatePicker && isTimePicker, timeCaption: (_b = localeData[locale]) === null || _b === void 0 ? void 0 : _b.localize.timeCaption, timeIntervals: timeInterval, onClickOutside: handleOnReactDatePickerClickOutside, locale: localeData[locale], 
-            // Used to format the date/time in internal ReactDatePicker input
-            // Currently ignored as date/time is shown in Styleguide Input instead, and formatted by using Intl.DateTimeFormat
-            dateFormat: [isDatePicker && 'P', isTimePicker && 'p'].filter(Boolean).join(''), renderCustomHeader: getDateTimePickerCustomHeader }))));
+`;
+const DateTimePickerCustomHeader = ({ date, decreaseMonth, increaseMonth, locale, }) => (React__default.createElement(MonthSelector, null,
+    React__default.createElement(ButtonIcon, { icon: ChevronLeft, onClick: decreaseMonth }),
+    React__default.createElement(CurrentMonth, null, sentenceCase(date.toLocaleString(locale, {
+        month: 'long',
+        year: 'numeric',
+    }))),
+    React__default.createElement(ButtonIcon, { icon: ChevronRight, onClick: increaseMonth })));
+/** @visibleName DateTime Picker */
+const DateTimePicker = (_a) => {
+    var _b;
+    var { date: startDate, locale = 'fi-FI', isDatePicker = true, isTimePicker = false, timeInterval = 30, 'data-testid': dataTestId } = _a, props = __rest(_a, ["date", "locale", "isDatePicker", "isTimePicker", "timeInterval", 'data-testid']);
+    const [showReactDatePicker, setShowReactDatePicker] = useState(false);
+    const handleOnInputFocus = () => {
+        setShowReactDatePicker(true);
+    };
+    const handleOnInputChange = (_, e) => {
+        if (props.onInputChange) {
+            props.onInputChange(e);
+        }
+    };
+    const handleOnKeyDown = (e) => {
+        if (!props.isEditable &&
+            (e.key === 'Backspace' || e.key === 'Delete' || e.key === 'Clear')) {
+            props.onChange(null, e);
+        }
+    };
+    const handleClearable = (e) => {
+        props.onChange(null, e);
+    };
+    const handleOnReactDatePickerChange = (date, e) => {
+        setShowReactDatePicker(false);
+        props.onChange(date, e);
+    };
+    const handleOnReactDatePickerClickOutside = () => {
+        setShowReactDatePicker(false);
+    };
+    const formatInputValue = [startDate, props.endDate]
+        .filter(Boolean)
+        .map(date => date === null || date === void 0 ? void 0 : date.toLocaleString(locale, Object.assign(Object.assign({}, (isDatePicker && {
+        dateStyle: 'medium',
+    })), (props.endDate === undefined &&
+        isTimePicker && {
+        timeStyle: 'short',
+    }))))
+        .join(' - ');
+    const getDateTimePickerCustomHeader = (args) => DateTimePickerCustomHeader(Object.assign(Object.assign({}, args), { locale }));
+    return (React__default.createElement(Wrapper, { id: props.id, className: props.className, "data-testid": dataTestId },
+        React__default.createElement(Input, { id: `datetimepicker-input-${props.id}`, name: `datetimepicker-input-${props.id}`, label: props.label, placeholder: props.placeholder, value: formatInputValue, onFocus: handleOnInputFocus, onChange: handleOnInputChange, onKeyDown: handleOnKeyDown, onClearableButtonClick: handleClearable, className: "react-datepicker-ignore-onclickoutside", "data-testid": dataTestId && `${dataTestId}-datetimepicker-input`, disabled: props.isDisabled, required: props.isRequired, readonly: !props.isEditable, status: props.isInError ? 'error' : undefined, errorMessage: props.errorMessage }),
+        showReactDatePicker && (React__default.createElement(ReactDatePicker, { inline: true, selected: startDate, startDate: startDate, endDate: props.endDate, onChange: handleOnReactDatePickerChange, selectsRange: props.endDate !== undefined, showTimeSelect: props.endDate === undefined && isTimePicker, showTimeSelectOnly: props.endDate === undefined && !isDatePicker && isTimePicker, timeCaption: (_b = localeData[locale]) === null || _b === void 0 ? void 0 : _b.localize.timeCaption, timeIntervals: timeInterval, onClickOutside: handleOnReactDatePickerClickOutside, locale: localeData[locale], 
+            // Used to format the date/time in internal ReactDatePicker input
+            // Currently ignored as date/time is shown in Styleguide Input instead, and formatted by using Intl.DateTimeFormat
+            dateFormat: [isDatePicker && 'P', isTimePicker && 'p'].filter(Boolean).join(''), renderCustomHeader: getDateTimePickerCustomHeader }))));
 };
 
 export { DateTimePicker as default };