@dnanpm/styleguide 3.11.1 → 3.11.2

package/build/cjs/components/Checkbox/Checkbox.js

@@ -94,7 +94,8 @@ const Input = styledComponents.styled.input `
 
     &:focus-visible {
         outline: none;
-        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.light},
+        box-shadow:
+            0px 0px 0px 2px ${theme.default.color.focus.light},
             0px 0px 0px 4px ${theme.default.color.focus.dark};
     }
 `;

package/build/cjs/components/Chip/Chip.js

@@ -50,7 +50,8 @@ const Element = styledComponents.styled.div `
 
     &:focus-visible {
         outline: none;
-        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.light},
+        box-shadow:
+            0px 0px 0px 2px ${theme.default.color.focus.light},
             0px 0px 0px 4px ${theme.default.color.focus.dark};
     }
 `;

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

@@ -1,6 +1,6 @@
 import type { ChangeEvent } from 'react';
 import React from 'react';
-import type { ReactDatePickerProps } from 'react-datepicker';
+import type { DatePickerProps } from 'react-datepicker';
 import type { LocaleCode } from '../../types/locale.d';
 interface Props {
     /**
@@ -15,7 +15,7 @@ interface Props {
      * 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'];
+    endDate?: DatePickerProps['endDate'];
     /**
      * Input label content
      */
@@ -36,7 +36,7 @@ interface Props {
     /**
      * On datetime picker change callback
      */
-    onChange: ReactDatePickerProps['onChange'];
+    onChange: DatePickerProps['onChange'];
     /**
      * On input change callback
      */
@@ -44,17 +44,17 @@ interface Props {
     /**
      * Minimum selectable date
      */
-    minDate?: ReactDatePickerProps['minDate'];
+    minDate?: DatePickerProps['minDate'];
     /**
      * Maximum selectable date
      */
-    maxDate?: ReactDatePickerProps['maxDate'];
+    maxDate?: DatePickerProps['maxDate'];
     /**
      * Allows to define time intervals in time picker
      *
      * @default 30
      */
-    timeInterval?: ReactDatePickerProps['timeIntervals'];
+    timeInterval?: DatePickerProps['timeIntervals'];
     /**
      * Text of the error message when input element is in error state
      */

package/build/cjs/components/DateTimePicker/DateTimePicker.js

@@ -86,7 +86,6 @@ const Wrapper = styledComponents.styled.div `
         padding: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)}
             ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)}
             ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.5)};
-        border-bottom: 1px solid ${theme.default.color.line.L03};
         background-color: ${theme.default.color.background.sand.E01};
 
         .react-datepicker-time__header {
@@ -100,6 +99,7 @@ const Wrapper = styledComponents.styled.div `
     & .react-datepicker__month,
     .react-datepicker__time-list {
         display: grid;
+        border-top: 1px solid ${theme.default.color.line.L03};
         gap: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.5)};
         color: ${theme.default.color.text.gray};
         padding: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.5)}
@@ -234,18 +234,6 @@ const CurrentMonth = styledComponents.styled.div `
     line-height: ${theme.default.lineHeight.default};
     font-weight: ${theme.default.fontWeight.bold};
 `;
-const StyledInput = styledComponents.styled(Input.default) `
-    ${({ disabled }) => !disabled &&
-    `
-        div {
-            background-color: ${theme.default.color.background.white.default};
-        }
-
-        .react-datepicker-ignore-onclickoutside-lock-icon {
-            display: none;
-        }
-    `}
-`;
 const VisuallyHiddenStatus = styledComponents.styled.div `
     position: absolute;
     left: -9999px;
@@ -259,9 +247,13 @@ const DateTimePickerCustomHeader = ({ date, decreaseMonth, increaseMonth, locale
     React__default.default.createElement(ButtonIcon.default, { icon: icons.ChevronRight, onClick: increaseMonth, ariaLabel: ariaLabelNextMonth })));
 /** @visibleName DateTime Picker */
 const DateTimePicker = (_a) => {
-    var _b, _c;
+    var _b, _c, _d;
     var { date: startDate, locale = 'fi-FI', isDatePicker = true, isTimePicker = false, timeInterval = 30, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["date", "locale", "isDatePicker", "isTimePicker", "timeInterval", 'data-testid']);
     const [showReactDatePicker, setShowReactDatePicker] = React.useState(false);
+    const isRange = props.endDate !== undefined;
+    const callOnChange = (date, event) => {
+        props.onChange(date, event);
+    };
     const handleOnInputFocus = () => {
         setShowReactDatePicker(true);
     };
@@ -282,17 +274,16 @@ const DateTimePicker = (_a) => {
             setShowReactDatePicker(false);
         }
         if (!props.isEditable && ['Backspace', 'Delete', 'Clear'].includes(e.key)) {
-            props.onChange(null, e);
+            callOnChange(null, e);
         }
     };
     const handleClearable = (e) => {
-        props.onChange(null, e);
+        callOnChange(null, e);
     };
     const handleOnReactDatePickerChange = (date, event) => {
         var _a, _b;
-        const isSelectingRange = props.endDate !== undefined;
         let shouldKeepOpen = false;
-        if (isSelectingRange) {
+        if (isRange) {
             const [start, end] = Array.isArray(date) && date.length === 2 ? date : [null, null];
             shouldKeepOpen = !(start && end);
         }
@@ -306,7 +297,7 @@ const DateTimePicker = (_a) => {
         if (!shouldKeepOpen) {
             setShowReactDatePicker(false);
         }
-        props.onChange(date, event);
+        callOnChange(date, event);
     };
     const handleOnReactDatePickerClickOutside = () => {
         setShowReactDatePicker(false);
@@ -322,22 +313,23 @@ const DateTimePicker = (_a) => {
         .join(' - ');
     const getDateTimePickerCustomHeader = (args) => DateTimePickerCustomHeader(Object.assign(Object.assign({}, args), { locale, ariaLabelPreviousMonth: props.ariaLabelPreviousMonth, ariaLabelNextMonth: props.ariaLabelNextMonth }));
     return (React__default.default.createElement(Wrapper, { id: props.id, className: props.className, "data-testid": dataTestId },
-        React__default.default.createElement(StyledInput, { 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: props.isClearable ? handleClearable : undefined, 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, ariaLabel: props.ariaLabelInput, onBlur: (_val, e) => {
+        React__default.default.createElement(Input.default, { 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: props.isClearable ? handleClearable : undefined, className: "react-datepicker-ignore-onclickoutside", "data-testid": dataTestId && `${dataTestId}-datetimepicker-input`, disabled: props.isDisabled, required: props.isRequired, readonlyUnstyled: !props.isEditable, status: props.isInError ? 'error' : undefined, errorMessage: props.errorMessage, ariaLabel: props.ariaLabelInput, onBlur: (_val, e) => {
                 if (props.isEditable && e.target.value) {
                     const parsedDate = new Date(e.target.value);
-                    const time = parsedDate.getTime();
-                    if (!Number.isNaN(time)) {
-                        props.onChange(parsedDate, e);
+                    if (!Number.isNaN(parsedDate.getTime())) {
+                        callOnChange(parsedDate, e);
                     }
                 }
             } }),
         React__default.default.createElement(VisuallyHiddenStatus, { role: "status", "aria-live": "polite" }, startDate instanceof Date && !Number.isNaN(startDate.getTime())
             ? (_b = props.ariaLiveAnnouncement) === null || _b === void 0 ? void 0 : _b.replace('{{date}}', startDate.toLocaleDateString(locale))
             : ''),
-        showReactDatePicker && (React__default.default.createElement(ReactDatePicker__default.default, { inline: true, selected: startDate, startDate: startDate, maxDate: props.maxDate, minDate: props.minDate, endDate: props.endDate, onChange: handleOnReactDatePickerChange, selectsRange: props.endDate !== undefined, showTimeSelect: props.endDate === undefined && isTimePicker, showTimeSelectOnly: props.endDate === undefined && !isDatePicker && isTimePicker, timeCaption: (_c = localeData[locale]) === null || _c === void 0 ? void 0 : _c.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 }))));
+        showReactDatePicker &&
+            (isRange ? (React__default.default.createElement(ReactDatePicker__default.default, { selectsRange: true, endDate: props.endDate, inline: true, selected: startDate, startDate: startDate, maxDate: props.maxDate, minDate: props.minDate, onChange: handleOnReactDatePickerChange, timeCaption: (_c = localeData[locale]) === null || _c === void 0 ? void 0 : _c.localize.timeCaption, timeIntervals: timeInterval, onClickOutside: handleOnReactDatePickerClickOutside, locale: localeData[locale], dateFormat: [isDatePicker && 'P', isTimePicker && 'p']
+                    .filter(Boolean)
+                    .join(''), renderCustomHeader: getDateTimePickerCustomHeader })) : (React__default.default.createElement(ReactDatePicker__default.default, { showTimeSelect: isTimePicker, showTimeSelectOnly: !isDatePicker && isTimePicker, inline: true, selected: startDate, startDate: startDate, maxDate: props.maxDate, minDate: props.minDate, onChange: handleOnReactDatePickerChange, timeCaption: (_d = localeData[locale]) === null || _d === void 0 ? void 0 : _d.localize.timeCaption, timeIntervals: timeInterval, onClickOutside: handleOnReactDatePickerClickOutside, locale: localeData[locale], dateFormat: [isDatePicker && 'P', isTimePicker && 'p']
+                    .filter(Boolean)
+                    .join(''), renderCustomHeader: getDateTimePickerCustomHeader })))));
 };
 
 exports.default = DateTimePicker;

package/build/cjs/components/Footer/Components/FooterComponents.js

@@ -49,7 +49,8 @@ const BaseContainer = styledComponents.styled.div `
 `;
 const CategoryLinks = styledComponents.styled.ul `
     display: ${({ $active }) => ($active ? 'flex' : 'none')};
-    transition: all 0.3s ease-in-out,
+    transition:
+        all 0.3s ease-in-out,
         padding 0s linear ${({ $active }) => ($active ? '0s' : '0.3s')};
     max-height: ${({ $active }) => ($active ? '500' : '0')}px;
     flex-direction: column;
@@ -68,7 +69,8 @@ const CategoryHeader = styledComponents.styled.button `
     justify-content: space-between;
     &:focus-visible {
         outline: 1px solid transparent;
-        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.light},
+        box-shadow:
+            0px 0px 0px 2px ${theme.default.color.focus.light},
             0px 0px 0px 4px ${theme.default.color.focus.dark};
         ${theme.default.radius.s};
     }

package/build/cjs/components/Footer/Footer.js

@@ -29,7 +29,8 @@ const FooterContainer = styledComponents.styled.footer `
         &:focus-visible {
             text-decoration: none;
             outline: 1px solid transparent;
-            box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.light},
+            box-shadow:
+                0px 0px 0px 2px ${theme.default.color.focus.light},
                 0px 0px 0px 4px ${theme.default.color.focus.dark};
             &:not(.menu-link):not(${FooterComponents.LangLink}) {
                 ${theme.default.radius.s};

package/build/cjs/components/Input/Input.d.ts

@@ -102,6 +102,12 @@ interface Props {
      * @default false
      */
     readonly?: boolean;
+    /**
+     * Allows to set input as readonly without any styles applied
+     *
+     * @default false
+     */
+    readonlyUnstyled?: boolean;
     /**
      * Allows to set input as mandatory
      *

package/build/cjs/components/Input/Input.js

@@ -170,20 +170,21 @@ const Input = React.forwardRef((_a, ref) => {
     const inputType = getInputType();
     return (React__default.default.createElement(FieldContainer, { className: props.className, "data-testid": dataTestId && `${dataTestId}-container` },
         props.label && (React__default.default.createElement(LabelText.default, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, status: props.status === 'error' ? props.status : undefined, isMandatory: props.required }, props.label)),
-        React__default.default.createElement(FieldWrapper, { "$status": props.status, "$type": inputType, "$disabled": props.disabled, "$readonly": props.readonly },
-            React__default.default.createElement(StyledInput, { id: props.id, name: props.name, type: inputType, value: props.value, placeholder: props.placeholder, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, autoComplete: props.autocomplete, "aria-disabled": props.disabled, "aria-readonly": props.readonly || undefined, "aria-label": !props.label ? (_b = props.ariaLabel) !== null && _b !== void 0 ? _b : props.id : undefined, ref: ref, tabIndex: props.tabIndex, "aria-describedby": getDescribedBy(), "data-testid": dataTestId, readOnly: props.readonly }),
+        React__default.default.createElement(FieldWrapper, { "$status": props.status, "$type": inputType, "$disabled": props.disabled, "$readonly": props.readonly && !props.readonlyUnstyled },
+            React__default.default.createElement(StyledInput, { id: props.id, name: props.name, type: inputType, value: props.value, placeholder: props.placeholder, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, autoComplete: props.autocomplete, "aria-disabled": props.disabled, "aria-readonly": props.readonly || props.readonlyUnstyled || undefined, "aria-label": !props.label ? ((_b = props.ariaLabel) !== null && _b !== void 0 ? _b : props.id) : undefined, ref: ref, tabIndex: props.tabIndex, "aria-describedby": getDescribedBy(), "data-testid": dataTestId, readOnly: props.readonly || props.readonlyUnstyled }),
             ((props.status && props.status !== 'comment') ||
                 props.showPasswordToggle ||
                 props.disabled ||
                 props.readonly ||
+                props.readonlyUnstyled ||
                 props.onClearableButtonClick) && (React__default.default.createElement(IconWrapper, null,
                 props.showPasswordToggle && (React__default.default.createElement(StyledButtonIcon, { icon: showPassword ? icons.EyeOpen : icons.EyeClosed, onClick: togglePasswordVisibility, ariaLabel: props.passwordToggleLabel })),
                 (props.status === 'success' || props.status === 'error') && (React__default.default.createElement(Icon.default, { "aria-hidden": true, icon: iconsMap[props.status], color: theme.default.color.notification[props.status] })),
-                (props.disabled || props.readonly) && (React__default.default.createElement(Icon.default, { "aria-hidden": true, icon: icons.Lock, className: props.className && `${props.className}-lock-icon` })),
+                (props.disabled || (props.readonly && !props.readonlyUnstyled)) && (React__default.default.createElement(Icon.default, { "aria-hidden": true, icon: icons.Lock, className: props.className && `${props.className}-lock-icon` })),
                 props.onClearableButtonClick &&
                     Boolean(props.value) &&
                     !props.disabled &&
-                    !props.readonly && (React__default.default.createElement(ButtonIcon.default, { icon: icons.Close, onClick: props.onClearableButtonClick, ariaLabel: props.clearButtonLabel }))))),
+                    (!props.readonly || props.readonlyUnstyled) && (React__default.default.createElement(ButtonIcon.default, { icon: icons.Close, onClick: props.onClearableButtonClick, ariaLabel: props.clearButtonLabel }))))),
         props.status === 'error' && props.errorMessage && (React__default.default.createElement(ErrorMessage, { id: `${props.id}-error`, "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage)),
         props.status === 'comment' && props.commentMessage && (React__default.default.createElement(Message, { id: `${props.id}-comment`, "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage))));
 });

package/build/cjs/components/MainHeaderNavigation/ChildComponents/BusinessMenu.js

@@ -40,7 +40,8 @@ const BusinessMenuLink = styledComponents.styled.a `
     }
     &:focus-visible {
         outline: none;
-        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.light},
+        box-shadow:
+            0px 0px 0px 2px ${theme.default.color.focus.light},
             0px 0px 0px 4px ${theme.default.color.focus.dark};
     }
 `;

package/build/cjs/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.js

@@ -32,7 +32,8 @@ const TooltipWrapper = styledComponents.styled.button `
     &:focus-visible {
         outline: 0;
         border-radius: ${theme.default.radius.s};
-        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.light},
+        box-shadow:
+            0px 0px 0px 2px ${theme.default.color.focus.light},
             0px 0px 0px 4px ${theme.default.color.focus.dark};
         > svg,
         > span {

package/build/cjs/components/MainHeaderNavigation/globalNavStyles.js

@@ -38,7 +38,8 @@ const MobileMenuButton = styledComponents.styled.button `
     &:focus-visible {
         outline: 0;
         border-radius: ${theme.default.radius.s};
-        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.light},
+        box-shadow:
+            0px 0px 0px 2px ${theme.default.color.focus.light},
             0px 0px 0px 4px ${theme.default.color.focus.dark};
         color: ${theme.default.color.text.black};
     }
@@ -82,7 +83,8 @@ const MenuItem = styledComponents.styled.li `
         &:focus-visible {
             outline: 0;
             border-radius: ${theme.default.radius.s};
-            box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.light},
+            box-shadow:
+                0px 0px 0px 2px ${theme.default.color.focus.light},
                 0px 0px 0px 4px ${theme.default.color.focus.dark};
         }
         ${styledUtils.media.xl `

package/build/cjs/components/Notification/Notification.js

@@ -53,7 +53,8 @@ const ButtonCloseStyled = styledComponents.styled(ButtonClose.default) `
 
     &:focus-visible {
         outline: none;
-        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.light},
+        box-shadow:
+            0px 0px 0px 2px ${theme.default.color.focus.light},
             0px 0px 0px 4px ${theme.default.color.focus.dark};
     }
 `;

package/build/cjs/components/Pill/Pill.js

@@ -76,7 +76,8 @@ const Label = styledComponents.styled.label `
 
     &:focus-within, *:focus > & {
         outline: none;
-        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.light},
+        box-shadow:
+            0px 0px 0px 2px ${theme.default.color.focus.light},
             0px 0px 0px 4px ${theme.default.color.focus.dark};
     }
 

package/build/cjs/components/RadioButton/RadioButton.js

@@ -79,7 +79,8 @@ const Input = styledComponents.styled.input `
 
     &:focus-visible {
         outline: none;
-        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.light},
+        box-shadow:
+            0px 0px 0px 2px ${theme.default.color.focus.light},
             0px 0px 0px 4px ${theme.default.color.focus.dark};
     }
 `;

package/build/cjs/components/SecondaryNavigation/SecondaryNavigation.js

@@ -76,7 +76,9 @@ const SecondaryNavigationList = styledComponents.styled.ul `
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    transition: max-height 0.2s ease-in-out, border-bottom 0.2s linear;
+    transition:
+        max-height 0.2s ease-in-out,
+        border-bottom 0.2s linear;
     background-color: ${({ isOpen }) => isOpen ? theme.default.color.background.white.default : 'transparent'};
     max-height: ${({ isOpen }) => (isOpen ? '500vh' : '0')};
     border-bottom: ${({ isOpen }) => (isOpen ? `1px solid ${theme.default.color.line.L03}` : 'none')};

package/build/cjs/components/Tooltip/Tooltip.js

@@ -33,7 +33,8 @@ const Helper = styledComponents.styled.button `
 
     &:focus-visible {
         outline: none;
-        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.light},
+        box-shadow:
+            0px 0px 0px 2px ${theme.default.color.focus.light},
             0px 0px 0px 4px ${theme.default.color.focus.dark};
         border-radius: 100%;
     }

package/build/cjs/utils/styledUtils.js

@@ -7,10 +7,10 @@ const getMultipliedSize = (base, multiply) => `${multiply * base.value}${base.un
 const getDividedSize = (base, divide) => `${base.value / divide}${base.unit}`;
 const media = Object.keys(breakpoints.default).reduce((acc, label) => {
     acc[label] = (literals, ...placeholders) => styledComponents.css `
-            @media (min-width: ${breakpoints.default[label]}px) {
-                ${styledComponents.css(literals, ...placeholders)};
-            }
-        `.join('');
+                @media (min-width: ${breakpoints.default[label]}px) {
+                    ${styledComponents.css(literals, ...placeholders)};
+                }
+            `.join('');
     return acc;
 }, {});
 

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

@@ -86,7 +86,8 @@ const Input = styled.input `
 
     &:focus-visible {
         outline: none;
-        box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+        box-shadow:
+            0px 0px 0px 2px ${theme.color.focus.light},
             0px 0px 0px 4px ${theme.color.focus.dark};
     }
 `;

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

@@ -42,7 +42,8 @@ const Element = styled.div `
 
     &:focus-visible {
         outline: none;
-        box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+        box-shadow:
+            0px 0px 0px 2px ${theme.color.focus.light},
             0px 0px 0px 4px ${theme.color.focus.dark};
     }
 `;

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

@@ -1,6 +1,6 @@
 import type { ChangeEvent } from 'react';
 import React from 'react';
-import type { ReactDatePickerProps } from 'react-datepicker';
+import type { DatePickerProps } from 'react-datepicker';
 import type { LocaleCode } from '../../types/locale.d';
 interface Props {
     /**
@@ -15,7 +15,7 @@ interface Props {
      * 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'];
+    endDate?: DatePickerProps['endDate'];
     /**
      * Input label content
      */
@@ -36,7 +36,7 @@ interface Props {
     /**
      * On datetime picker change callback
      */
-    onChange: ReactDatePickerProps['onChange'];
+    onChange: DatePickerProps['onChange'];
     /**
      * On input change callback
      */
@@ -44,17 +44,17 @@ interface Props {
     /**
      * Minimum selectable date
      */
-    minDate?: ReactDatePickerProps['minDate'];
+    minDate?: DatePickerProps['minDate'];
     /**
      * Maximum selectable date
      */
-    maxDate?: ReactDatePickerProps['maxDate'];
+    maxDate?: DatePickerProps['maxDate'];
     /**
      * Allows to define time intervals in time picker
      *
      * @default 30
      */
-    timeInterval?: ReactDatePickerProps['timeIntervals'];
+    timeInterval?: DatePickerProps['timeIntervals'];
     /**
      * Text of the error message when input element is in error state
      */

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

@@ -77,7 +77,6 @@ const Wrapper = styled.div `
         padding: ${getMultipliedSize(theme.base.baseWidth, 1)}
             ${getMultipliedSize(theme.base.baseWidth, 1)}
             ${getMultipliedSize(theme.base.baseWidth, 0.5)};
-        border-bottom: 1px solid ${theme.color.line.L03};
         background-color: ${theme.color.background.sand.E01};
 
         .react-datepicker-time__header {
@@ -91,6 +90,7 @@ const Wrapper = styled.div `
     & .react-datepicker__month,
     .react-datepicker__time-list {
         display: grid;
+        border-top: 1px solid ${theme.color.line.L03};
         gap: ${getMultipliedSize(theme.base.baseWidth, 0.5)};
         color: ${theme.color.text.gray};
         padding: ${getMultipliedSize(theme.base.baseWidth, 0.5)}
@@ -225,18 +225,6 @@ const CurrentMonth = styled.div `
     line-height: ${theme.lineHeight.default};
     font-weight: ${theme.fontWeight.bold};
 `;
-const StyledInput = styled(Input) `
-    ${({ disabled }) => !disabled &&
-    `
-        div {
-            background-color: ${theme.color.background.white.default};
-        }
-
-        .react-datepicker-ignore-onclickoutside-lock-icon {
-            display: none;
-        }
-    `}
-`;
 const VisuallyHiddenStatus = styled.div `
     position: absolute;
     left: -9999px;
@@ -250,9 +238,13 @@ const DateTimePickerCustomHeader = ({ date, decreaseMonth, increaseMonth, locale
     React__default.createElement(ButtonIcon, { icon: ChevronRight, onClick: increaseMonth, ariaLabel: ariaLabelNextMonth })));
 /** @visibleName DateTime Picker */
 const DateTimePicker = (_a) => {
-    var _b, _c;
+    var _b, _c, _d;
     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 isRange = props.endDate !== undefined;
+    const callOnChange = (date, event) => {
+        props.onChange(date, event);
+    };
     const handleOnInputFocus = () => {
         setShowReactDatePicker(true);
     };
@@ -273,17 +265,16 @@ const DateTimePicker = (_a) => {
             setShowReactDatePicker(false);
         }
         if (!props.isEditable && ['Backspace', 'Delete', 'Clear'].includes(e.key)) {
-            props.onChange(null, e);
+            callOnChange(null, e);
         }
     };
     const handleClearable = (e) => {
-        props.onChange(null, e);
+        callOnChange(null, e);
     };
     const handleOnReactDatePickerChange = (date, event) => {
         var _a, _b;
-        const isSelectingRange = props.endDate !== undefined;
         let shouldKeepOpen = false;
-        if (isSelectingRange) {
+        if (isRange) {
             const [start, end] = Array.isArray(date) && date.length === 2 ? date : [null, null];
             shouldKeepOpen = !(start && end);
         }
@@ -297,7 +288,7 @@ const DateTimePicker = (_a) => {
         if (!shouldKeepOpen) {
             setShowReactDatePicker(false);
         }
-        props.onChange(date, event);
+        callOnChange(date, event);
     };
     const handleOnReactDatePickerClickOutside = () => {
         setShowReactDatePicker(false);
@@ -313,22 +304,23 @@ const DateTimePicker = (_a) => {
         .join(' - ');
     const getDateTimePickerCustomHeader = (args) => DateTimePickerCustomHeader(Object.assign(Object.assign({}, args), { locale, ariaLabelPreviousMonth: props.ariaLabelPreviousMonth, ariaLabelNextMonth: props.ariaLabelNextMonth }));
     return (React__default.createElement(Wrapper, { id: props.id, className: props.className, "data-testid": dataTestId },
-        React__default.createElement(StyledInput, { 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: props.isClearable ? handleClearable : undefined, 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, ariaLabel: props.ariaLabelInput, onBlur: (_val, e) => {
+        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: props.isClearable ? handleClearable : undefined, className: "react-datepicker-ignore-onclickoutside", "data-testid": dataTestId && `${dataTestId}-datetimepicker-input`, disabled: props.isDisabled, required: props.isRequired, readonlyUnstyled: !props.isEditable, status: props.isInError ? 'error' : undefined, errorMessage: props.errorMessage, ariaLabel: props.ariaLabelInput, onBlur: (_val, e) => {
                 if (props.isEditable && e.target.value) {
                     const parsedDate = new Date(e.target.value);
-                    const time = parsedDate.getTime();
-                    if (!Number.isNaN(time)) {
-                        props.onChange(parsedDate, e);
+                    if (!Number.isNaN(parsedDate.getTime())) {
+                        callOnChange(parsedDate, e);
                     }
                 }
             } }),
         React__default.createElement(VisuallyHiddenStatus, { role: "status", "aria-live": "polite" }, startDate instanceof Date && !Number.isNaN(startDate.getTime())
             ? (_b = props.ariaLiveAnnouncement) === null || _b === void 0 ? void 0 : _b.replace('{{date}}', startDate.toLocaleDateString(locale))
             : ''),
-        showReactDatePicker && (React__default.createElement(ReactDatePicker, { inline: true, selected: startDate, startDate: startDate, maxDate: props.maxDate, minDate: props.minDate, endDate: props.endDate, onChange: handleOnReactDatePickerChange, selectsRange: props.endDate !== undefined, showTimeSelect: props.endDate === undefined && isTimePicker, showTimeSelectOnly: props.endDate === undefined && !isDatePicker && isTimePicker, timeCaption: (_c = localeData[locale]) === null || _c === void 0 ? void 0 : _c.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 }))));
+        showReactDatePicker &&
+            (isRange ? (React__default.createElement(ReactDatePicker, { selectsRange: true, endDate: props.endDate, inline: true, selected: startDate, startDate: startDate, maxDate: props.maxDate, minDate: props.minDate, onChange: handleOnReactDatePickerChange, timeCaption: (_c = localeData[locale]) === null || _c === void 0 ? void 0 : _c.localize.timeCaption, timeIntervals: timeInterval, onClickOutside: handleOnReactDatePickerClickOutside, locale: localeData[locale], dateFormat: [isDatePicker && 'P', isTimePicker && 'p']
+                    .filter(Boolean)
+                    .join(''), renderCustomHeader: getDateTimePickerCustomHeader })) : (React__default.createElement(ReactDatePicker, { showTimeSelect: isTimePicker, showTimeSelectOnly: !isDatePicker && isTimePicker, inline: true, selected: startDate, startDate: startDate, maxDate: props.maxDate, minDate: props.minDate, onChange: handleOnReactDatePickerChange, timeCaption: (_d = localeData[locale]) === null || _d === void 0 ? void 0 : _d.localize.timeCaption, timeIntervals: timeInterval, onClickOutside: handleOnReactDatePickerClickOutside, locale: localeData[locale], dateFormat: [isDatePicker && 'P', isTimePicker && 'p']
+                    .filter(Boolean)
+                    .join(''), renderCustomHeader: getDateTimePickerCustomHeader })))));
 };
 
 export { DateTimePicker as default };

package/build/es/components/Footer/Components/FooterComponents.js

@@ -43,7 +43,8 @@ const BaseContainer = styled.div `
 `;
 const CategoryLinks = styled.ul `
     display: ${({ $active }) => ($active ? 'flex' : 'none')};
-    transition: all 0.3s ease-in-out,
+    transition:
+        all 0.3s ease-in-out,
         padding 0s linear ${({ $active }) => ($active ? '0s' : '0.3s')};
     max-height: ${({ $active }) => ($active ? '500' : '0')}px;
     flex-direction: column;
@@ -62,7 +63,8 @@ const CategoryHeader = styled.button `
     justify-content: space-between;
     &:focus-visible {
         outline: 1px solid transparent;
-        box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+        box-shadow:
+            0px 0px 0px 2px ${theme.color.focus.light},
             0px 0px 0px 4px ${theme.color.focus.dark};
         ${theme.radius.s};
     }

package/build/es/components/Footer/Footer.js

@@ -21,7 +21,8 @@ const FooterContainer = styled.footer `
         &:focus-visible {
             text-decoration: none;
             outline: 1px solid transparent;
-            box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+            box-shadow:
+                0px 0px 0px 2px ${theme.color.focus.light},
                 0px 0px 0px 4px ${theme.color.focus.dark};
             &:not(.menu-link):not(${LangLink}) {
                 ${theme.radius.s};

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

@@ -102,6 +102,12 @@ interface Props {
      * @default false
      */
     readonly?: boolean;
+    /**
+     * Allows to set input as readonly without any styles applied
+     *
+     * @default false
+     */
+    readonlyUnstyled?: boolean;
     /**
      * Allows to set input as mandatory
      *

package/build/es/components/Input/Input.js

@@ -162,20 +162,21 @@ const Input = forwardRef((_a, ref) => {
     const inputType = getInputType();
     return (React__default.createElement(FieldContainer, { className: props.className, "data-testid": dataTestId && `${dataTestId}-container` },
         props.label && (React__default.createElement(LabelText, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, status: props.status === 'error' ? props.status : undefined, isMandatory: props.required }, props.label)),
-        React__default.createElement(FieldWrapper, { "$status": props.status, "$type": inputType, "$disabled": props.disabled, "$readonly": props.readonly },
-            React__default.createElement(StyledInput, { id: props.id, name: props.name, type: inputType, value: props.value, placeholder: props.placeholder, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, autoComplete: props.autocomplete, "aria-disabled": props.disabled, "aria-readonly": props.readonly || undefined, "aria-label": !props.label ? (_b = props.ariaLabel) !== null && _b !== void 0 ? _b : props.id : undefined, ref: ref, tabIndex: props.tabIndex, "aria-describedby": getDescribedBy(), "data-testid": dataTestId, readOnly: props.readonly }),
+        React__default.createElement(FieldWrapper, { "$status": props.status, "$type": inputType, "$disabled": props.disabled, "$readonly": props.readonly && !props.readonlyUnstyled },
+            React__default.createElement(StyledInput, { id: props.id, name: props.name, type: inputType, value: props.value, placeholder: props.placeholder, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, autoComplete: props.autocomplete, "aria-disabled": props.disabled, "aria-readonly": props.readonly || props.readonlyUnstyled || undefined, "aria-label": !props.label ? ((_b = props.ariaLabel) !== null && _b !== void 0 ? _b : props.id) : undefined, ref: ref, tabIndex: props.tabIndex, "aria-describedby": getDescribedBy(), "data-testid": dataTestId, readOnly: props.readonly || props.readonlyUnstyled }),
             ((props.status && props.status !== 'comment') ||
                 props.showPasswordToggle ||
                 props.disabled ||
                 props.readonly ||
+                props.readonlyUnstyled ||
                 props.onClearableButtonClick) && (React__default.createElement(IconWrapper, null,
                 props.showPasswordToggle && (React__default.createElement(StyledButtonIcon, { icon: showPassword ? EyeOpen : EyeClosed, onClick: togglePasswordVisibility, ariaLabel: props.passwordToggleLabel })),
                 (props.status === 'success' || props.status === 'error') && (React__default.createElement(Icon, { "aria-hidden": true, icon: iconsMap[props.status], color: theme.color.notification[props.status] })),
-                (props.disabled || props.readonly) && (React__default.createElement(Icon, { "aria-hidden": true, icon: Lock, className: props.className && `${props.className}-lock-icon` })),
+                (props.disabled || (props.readonly && !props.readonlyUnstyled)) && (React__default.createElement(Icon, { "aria-hidden": true, icon: Lock, className: props.className && `${props.className}-lock-icon` })),
                 props.onClearableButtonClick &&
                     Boolean(props.value) &&
                     !props.disabled &&
-                    !props.readonly && (React__default.createElement(ButtonIcon, { icon: Close, onClick: props.onClearableButtonClick, ariaLabel: props.clearButtonLabel }))))),
+                    (!props.readonly || props.readonlyUnstyled) && (React__default.createElement(ButtonIcon, { icon: Close, onClick: props.onClearableButtonClick, ariaLabel: props.clearButtonLabel }))))),
         props.status === 'error' && props.errorMessage && (React__default.createElement(ErrorMessage, { id: `${props.id}-error`, "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage)),
         props.status === 'comment' && props.commentMessage && (React__default.createElement(Message, { id: `${props.id}-comment`, "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage))));
 });

package/build/es/components/MainHeaderNavigation/ChildComponents/BusinessMenu.js

@@ -32,7 +32,8 @@ const BusinessMenuLink = styled.a `
     }
     &:focus-visible {
         outline: none;
-        box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+        box-shadow:
+            0px 0px 0px 2px ${theme.color.focus.light},
             0px 0px 0px 4px ${theme.color.focus.dark};
     }
 `;

package/build/es/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.js

@@ -28,7 +28,8 @@ const TooltipWrapper = styled.button `
     &:focus-visible {
         outline: 0;
         border-radius: ${theme.radius.s};
-        box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+        box-shadow:
+            0px 0px 0px 2px ${theme.color.focus.light},
             0px 0px 0px 4px ${theme.color.focus.dark};
         > svg,
         > span {

package/build/es/components/MainHeaderNavigation/globalNavStyles.js

@@ -36,7 +36,8 @@ const MobileMenuButton = styled.button `
     &:focus-visible {
         outline: 0;
         border-radius: ${theme.radius.s};
-        box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+        box-shadow:
+            0px 0px 0px 2px ${theme.color.focus.light},
             0px 0px 0px 4px ${theme.color.focus.dark};
         color: ${theme.color.text.black};
     }
@@ -80,7 +81,8 @@ const MenuItem = styled.li `
         &:focus-visible {
             outline: 0;
             border-radius: ${theme.radius.s};
-            box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+            box-shadow:
+                0px 0px 0px 2px ${theme.color.focus.light},
                 0px 0px 0px 4px ${theme.color.focus.dark};
         }
         ${media.xl `

package/build/es/components/Notification/Notification.js

@@ -45,7 +45,8 @@ const ButtonCloseStyled = styled(ButtonClose) `
 
     &:focus-visible {
         outline: none;
-        box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+        box-shadow:
+            0px 0px 0px 2px ${theme.color.focus.light},
             0px 0px 0px 4px ${theme.color.focus.dark};
     }
 `;

package/build/es/components/Pill/Pill.js

@@ -68,7 +68,8 @@ const Label = styled.label `
 
     &:focus-within, *:focus > & {
         outline: none;
-        box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+        box-shadow:
+            0px 0px 0px 2px ${theme.color.focus.light},
             0px 0px 0px 4px ${theme.color.focus.dark};
     }
 

package/build/es/components/RadioButton/RadioButton.js

@@ -71,7 +71,8 @@ const Input = styled.input `
 
     &:focus-visible {
         outline: none;
-        box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+        box-shadow:
+            0px 0px 0px 2px ${theme.color.focus.light},
             0px 0px 0px 4px ${theme.color.focus.dark};
     }
 `;

package/build/es/components/SecondaryNavigation/SecondaryNavigation.js

@@ -68,7 +68,9 @@ const SecondaryNavigationList = styled.ul `
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    transition: max-height 0.2s ease-in-out, border-bottom 0.2s linear;
+    transition:
+        max-height 0.2s ease-in-out,
+        border-bottom 0.2s linear;
     background-color: ${({ isOpen }) => isOpen ? theme.color.background.white.default : 'transparent'};
     max-height: ${({ isOpen }) => (isOpen ? '500vh' : '0')};
     border-bottom: ${({ isOpen }) => (isOpen ? `1px solid ${theme.color.line.L03}` : 'none')};

package/build/es/components/Tooltip/Tooltip.js

@@ -25,7 +25,8 @@ const Helper = styled.button `
 
     &:focus-visible {
         outline: none;
-        box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+        box-shadow:
+            0px 0px 0px 2px ${theme.color.focus.light},
             0px 0px 0px 4px ${theme.color.focus.dark};
         border-radius: 100%;
     }

package/build/es/utils/styledUtils.js

@@ -5,10 +5,10 @@ const getMultipliedSize = (base, multiply) => `${multiply * base.value}${base.un
 const getDividedSize = (base, divide) => `${base.value / divide}${base.unit}`;
 const media = Object.keys(breakpoints).reduce((acc, label) => {
     acc[label] = (literals, ...placeholders) => css `
-            @media (min-width: ${breakpoints[label]}px) {
-                ${css(literals, ...placeholders)};
-            }
-        `.join('');
+                @media (min-width: ${breakpoints[label]}px) {
+                    ${css(literals, ...placeholders)};
+                }
+            `.join('');
     return acc;
 }, {});
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "v3.11.1",
+    "version": "v3.11.2",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",
@@ -30,9 +30,11 @@
         "prepublishOnly": "npm run clean && npm ci && npm run eslint:check && npm run format:check && npm run build",
         "styleguide": "styleguidist server",
         "styleguide:build": "styleguidist build",
+        "dev": "npm run styleguide",
         "tar": "npm run clean && npm ci && npm run build && npm pack && mv dnanpm-styleguide*.tgz dnanpm-styleguide-snapshot.tgz",
         "test": "cross-env jest --maxWorkers=2 --coverage",
-        "test:coverage": "rm -rf coverage && cross-env jest --coverage --runInBand --no-cache"
+        "test:coverage": "rm -rf coverage && cross-env jest --coverage --runInBand --no-cache",
+        "preCommit": "npm run eslint:check && npm run format:check"
     },
     "browserslist": [
         ">0.2%",
@@ -52,7 +54,7 @@
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^14.5.2",
-        "@types/jest": "^29.5.14",
+        "@types/jest": "^30.0.0",
         "@types/node": "^17.0.45",
         "@types/ramda": "^0.27.36",
         "@types/react": "^18.3.11",
@@ -63,7 +65,7 @@
         "@typescript-eslint/eslint-plugin": "^5.62.0",
         "@typescript-eslint/parser": "^5.62.0",
         "babel-loader": "^9.2.1",
-        "cross-env": "^7.0.3",
+        "cross-env": "^10.0.0",
         "css-loader": "^6.11.0",
         "eslint": "^8.57.1",
         "eslint-config-airbnb": "^19.0.4",
@@ -75,11 +77,11 @@
         "eslint-plugin-prefer-arrow": "^1.2.3",
         "eslint-plugin-react": "^7.37.4",
         "eslint-plugin-react-hooks": "^4.6.2",
-        "jest": "^29.7.0",
+        "jest": "^30.0.5",
         "jest-environment-jsdom": "^29.7.0",
         "jest-styled-components": "^7.2.0",
         "mini-css-extract-plugin": "^2.9.2",
-        "prettier": "^2.8.8",
+        "prettier": "^3.6.2",
         "react": "^18.3.1",
         "react-docgen": "^5.4.3",
         "react-docgen-typescript": "^2.2.2",
@@ -97,7 +99,7 @@
     },
     "dependencies": {
         "ramda": "^0.27.1",
-        "react-datepicker": "^6.9.0",
+        "react-datepicker": "^8.4.0",
         "react-modal": "^3.16.1",
         "react-select": "^5.8.1",
         "react-spring": "^8.0.27",