@dnanpm/styleguide 3.11.3 → 3.11.5

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

@@ -1,4 +1,4 @@
-import type { MouseEvent, ReactNode } from 'react';
+import type { ComponentType, MouseEvent, ReactNode } from 'react';
 import React from 'react';
 type ButtonType = 'submit' | 'button' | 'reset';
 export interface Props {
@@ -24,6 +24,13 @@ export interface Props {
      * Allows to change the type of resulting HTML element from button (`<button></button>`) to anchor (`<a href="..."></a>`)
      */
     href?: string;
+    /**
+     * Allows to use a custom link component instead of anchor element when `href` is defined
+     */
+    nextLink?: ComponentType<{
+        href: string;
+        children: ReactNode;
+    }>;
     /**
      * Allows to set the target attribute for the link
      */

package/build/cjs/components/Button/Button.js

@@ -125,8 +125,9 @@ const Element = styledComponents.styled.button `
 `;
 /** @visibleName Button */
 const Button = (_a) => {
+    var _b;
     var { type = 'submit', 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue, 'aria-label': ariaLabel } = _a, props = tslib.__rest(_a, ["type", 'data-testid', 'data-no-close', 'data-track-value', 'aria-label']);
-    return (React__default.default.createElement(Element, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, target: props.href ? props.target : undefined, rel: props.target === '_blank' ? 'noopener noreferrer' : undefined, onClick: props.onClick, onMouseDown: props.onMouseDown, "$small": props.small, "$darkBg": props.darkBg, "$fullWidth": props.fullWidth, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, "aria-label": ariaLabel }, props.dataAttributes, (!props.href && {
+    return (React__default.default.createElement(Element, Object.assign({ id: props.id, as: (_b = props.nextLink) !== null && _b !== void 0 ? _b : (props.href ? 'a' : undefined), type: props.href ? undefined : type, href: props.href, target: props.href ? props.target : undefined, rel: props.target === '_blank' ? 'noopener noreferrer' : undefined, onClick: props.onClick, onMouseDown: props.onMouseDown, "$small": props.small, "$darkBg": props.darkBg, "$fullWidth": props.fullWidth, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, "aria-label": ariaLabel }, props.dataAttributes, (!props.href && {
         name: props.name,
         disabled: props.disabled,
     })), props.loading ? (React__default.default.createElement(PixelLoader.default, { color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.plum, label: props.loadingLabel })) : (React__default.default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))));

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

@@ -56,6 +56,15 @@ const localeData = {
     'en-GB': undefined,
 };
 const sentenceCase = (string) => `${string[0].toUpperCase()}${string.slice(1)}`;
+const parseFIDateString = (dateString) => {
+    const parts = dateString.split(/\D+/);
+    if (!parts || parts.length < 3) {
+        return null;
+    }
+    const [day, month, year] = parts.map(Number);
+    const date = new Date(year, month - 1, day);
+    return !Number.isNaN(date.getTime()) ? date : null;
+};
 // TODO: change `& .react-datepicker` value back to `1` after z-index of Footer removed
 const Wrapper = styledComponents.styled.div `
     position: relative;
@@ -111,10 +120,27 @@ const Wrapper = styledComponents.styled.div `
         }
     }
 
+    & .react-datepicker__sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+    }
+
+    & .react-datepicker__day-names {
+        background-color: ${theme.default.color.background.sand.E01};
+        padding: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.5)} 0;
+    }
+
     & .react-datepicker__day-names,
     & .react-datepicker__week {
         display: flex;
         gap: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.8)};
+        justify-content: center;
 
         .react-datepicker__day-name,
         .react-datepicker__day {
@@ -250,6 +276,7 @@ const DateTimePicker = (_a) => {
     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 [manualInputValue, setManualInputValue] = React.useState(null);
     const isRange = props.endDate !== undefined;
     const callOnChange = (date, event) => {
         props.onChange(date, event);
@@ -258,6 +285,10 @@ const DateTimePicker = (_a) => {
         setShowReactDatePicker(true);
     };
     const handleOnInputChange = (_, e) => {
+        if (props.isEditable) {
+            setManualInputValue(e.target.value);
+            return;
+        }
         if (props.onInputChange) {
             props.onInputChange(e);
         }
@@ -297,6 +328,7 @@ const DateTimePicker = (_a) => {
         if (!shouldKeepOpen) {
             setShowReactDatePicker(false);
         }
+        setManualInputValue(null);
         callOnChange(date, event);
     };
     const handleOnReactDatePickerClickOutside = () => {
@@ -313,12 +345,15 @@ 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(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);
-                    if (!Number.isNaN(parsedDate.getTime())) {
-                        callOnChange(parsedDate, e);
-                    }
+        React__default.default.createElement(Input.default, { id: `datetimepicker-input-${props.id}`, name: `datetimepicker-input-${props.id}`, label: props.label, placeholder: props.placeholder, value: manualInputValue !== null && manualInputValue !== void 0 ? manualInputValue : 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) {
+                    return;
+                }
+                const date = locale === 'fi-FI'
+                    ? parseFIDateString(e.target.value)
+                    : new Date(e.target.value);
+                if (date && !Number.isNaN(date.getTime())) {
+                    callOnChange(date, e);
                 }
             } }),
         React__default.default.createElement(VisuallyHiddenStatus, { role: "status", "aria-live": "polite" }, startDate instanceof Date && !Number.isNaN(startDate.getTime())

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

@@ -283,14 +283,37 @@ const Categories = ({ categories }) => {
 const GeneralInformation = ({ generalInformation }) => {
     const { language } = React.useContext(FooterContext.default);
     const currentYear = new Date().getFullYear();
-    const orderMap = ['privacyPolicy', 'cookieSettings', 'terms'];
+    const COOKIE_SETTINGS_URL = 'cookie-settings';
+    const OT_SDK_CLASSNAME = 'ot-sdk-show-settings';
+    // TODO after release: Remove redundant `isNewModelUsed` condition and refactor it's usages (STYLE-905)
+    const isNewModelUsed = !!generalInformation.mandatoryLinks;
     const typeToClassMap = {
         cookie: 'ot-sdk-show-settings',
     };
-    const orderedGeneralInformation = orderMap.map(id => new Map(Object.entries(generalInformation)).get(id));
+    const orderMap = ['privacyPolicy', 'cookieSettings', 'terms'];
+    const getOrderedLinks = () => {
+        if (isNewModelUsed && Array.isArray(generalInformation.mandatoryLinks)) {
+            return generalInformation.mandatoryLinks;
+        }
+        return orderMap.map(id => new Map(Object.entries(generalInformation)).get(id));
+    };
+    const getLinkHref = (item) => {
+        var _a;
+        if (!((_a = item.urls) === null || _a === void 0 ? void 0 : _a[language]))
+            return '#!';
+        return item.urls[language] !== COOKIE_SETTINGS_URL ? item.urls[language] : '#!';
+    };
+    const getLinkClassName = (item) => {
+        var _a;
+        if (isNewModelUsed) {
+            return ((_a = item.urls) === null || _a === void 0 ? void 0 : _a[language]) === COOKIE_SETTINGS_URL ? OT_SDK_CLASSNAME : '';
+        }
+        return item.type ? typeToClassMap[item.type] : '';
+    };
+    const orderedGeneralInformation = getOrderedLinks();
     return (React__default.default.createElement(GeneralInformationContainer, { "data-testid": "general-information-section" },
         orderedGeneralInformation.map((item, index) => item && (React__default.default.createElement(React.Fragment, { key: `general-information-link-${index}` },
-            React__default.default.createElement("a", { href: (item.urls && item.urls[language]) || '#!', className: item.type && typeToClassMap[item.type] }, item.titles[language]),
+            React__default.default.createElement("a", { href: getLinkHref(item), className: getLinkClassName(item) }, item.titles[language]),
             React__default.default.createElement("span", { "aria-hidden": "true" }, "|")))),
         "DNA ",
         currentYear));

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

@@ -11,6 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
+/* eslint-disable react/jsx-props-no-spreading */
 const isSelected = (currentUrl, linkUrl, exactMatch = false) => {
     if (currentUrl && linkUrl) {
         let url = linkUrl;
@@ -23,15 +24,28 @@ const isSelected = (currentUrl, linkUrl, exactMatch = false) => {
 };
 const isMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
 const LinkModifier = ({ menuItem, disabledTabIndex, showIcon }) => {
-    const { lang, currentUrl, nextJSLinkComponent, resetMenuEvents } = React.useContext(NavContext.default);
+    const { lang, currentUrl, nextJSLinkComponent, nextJSLinkLegacyBehavior, resetMenuEvents } = React.useContext(NavContext.default);
     const menuItemLink = menuItem.urls[lang];
     const isExternalLink = menuItem.target === '_blank';
-    const MenuLinkComponent = (React__default.default.createElement(globalNavStyles.MenuLink, { "aria-current": isSelected(currentUrl, menuItemLink) ? 'page' : undefined, href: menuItemLink, id: menuItem.id, onClick: resetMenuEvents, tabIndex: disabledTabIndex ? -1 : undefined, target: isExternalLink ? '_blank' : '_self' },
+    const linkContent = (React__default.default.createElement(React__default.default.Fragment, null,
         showIcon && (isExternalLink ? React__default.default.createElement(icons.Open, null) : React__default.default.createElement(icons.ArrowRight, null)),
         React__default.default.createElement("span", null, menuItem.titles[lang])));
+    const MenuLinkComponent = (React__default.default.createElement(globalNavStyles.MenuLink, { "aria-current": isSelected(currentUrl, menuItemLink) ? 'page' : undefined, href: menuItemLink, id: menuItem.id, onClick: resetMenuEvents, tabIndex: disabledTabIndex ? -1 : undefined, target: isExternalLink ? '_blank' : '_self' }, linkContent));
+    const commonLinkProps = {
+        'aria-current': isSelected(currentUrl, menuItemLink) ? 'page' : undefined,
+        linkUrl: menuItemLink,
+        id: menuItem.id,
+        onClick: resetMenuEvents,
+        tabIndex: disabledTabIndex ? -1 : undefined,
+        target: isExternalLink ? '_blank' : '_self',
+    };
     if (nextJSLinkComponent && !isMenuItemLinkAbsolute(menuItemLink)) {
         const NextJSLinkComponent = nextJSLinkComponent;
-        return (React__default.default.createElement(NextJSLinkComponent, { linkUrl: menuItemLink }, MenuLinkComponent));
+        if (nextJSLinkLegacyBehavior) {
+            return (React__default.default.createElement(NextJSLinkComponent, { linkUrl: menuItemLink },
+                React__default.default.createElement(globalNavStyles.MenuLink, Object.assign({}, commonLinkProps), linkContent)));
+        }
+        return (React__default.default.createElement(globalNavStyles.MenuLink, Object.assign({ as: NextJSLinkComponent }, commonLinkProps), linkContent));
     }
     return MenuLinkComponent;
 };

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

@@ -42,10 +42,11 @@ export interface MainHeaderNavigationProps {
     isLoggedIn?: boolean;
     collapseSize?: number;
     nextJSLinkComponent: ComponentType | ReactNode | boolean;
+    nextJSLinkLegacyBehavior?: boolean;
     currentUrl?: string;
     notificationText?: string;
 }
 /** @visibleName MainHeaderNavigation */
-declare const MainHeaderNavigation: ({ backToPreviousCategoryLabel, businessMenuAriaLabel, categoryCollectionText, closeMainMenuAriaLabel, className, collapseSize, currentUrl, dnaLogoLinkAriaLabel, featuredItemsAriaLabel, isLoggedIn, items, language, languageSelector, languageSelectorText, login, loginComponent, loginText, mainMenuAriaLabel, minicart, minicartAmount, minicartAmountLabel, minicartComponent, minicartText, nextJSLinkComponent, notificationText, openMainMenuAriaLabel, search, searchComponent, searchText, showLoginTooltip, showMinicart, zIndex, ...props }: MainHeaderNavigationProps) => React.JSX.Element;
+declare const MainHeaderNavigation: ({ backToPreviousCategoryLabel, businessMenuAriaLabel, categoryCollectionText, closeMainMenuAriaLabel, className, collapseSize, currentUrl, dnaLogoLinkAriaLabel, featuredItemsAriaLabel, isLoggedIn, items, language, languageSelector, languageSelectorText, login, loginComponent, loginText, mainMenuAriaLabel, minicart, minicartAmount, minicartAmountLabel, minicartComponent, minicartText, nextJSLinkComponent, nextJSLinkLegacyBehavior, notificationText, openMainMenuAriaLabel, search, searchComponent, searchText, showLoginTooltip, showMinicart, zIndex, ...props }: MainHeaderNavigationProps) => React.JSX.Element;
 /** @component */
 export default MainHeaderNavigation;

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

@@ -134,7 +134,7 @@ const initiateScrollToHeader = (componentRef) => {
 /** @visibleName MainHeaderNavigation */
 const MainHeaderNavigation = (_a) => {
     var _b, _c, _d;
-    var { backToPreviousCategoryLabel = '', businessMenuAriaLabel = 'Sivustot', categoryCollectionText = 'Muut kategoriat', closeMainMenuAriaLabel, className, collapseSize = 767, currentUrl = '', dnaLogoLinkAriaLabel, featuredItemsAriaLabel = '', isLoggedIn = false, items = {}, language = 'fi', languageSelector = false, languageSelectorText = 'Vaihda kieltä', login = true, loginComponent, loginText = 'Kirjaudu', mainMenuAriaLabel = 'Päänavigaatio', minicart = true, minicartAmount = 0, minicartAmountLabel, minicartComponent = false, minicartText = 'Ostoskori', nextJSLinkComponent = false, notificationText = '', openMainMenuAriaLabel, search = true, searchComponent = false, searchText = 'Haku', showLoginTooltip = false, showMinicart = false, zIndex = 1030 } = _a, props = tslib.__rest(_a, ["backToPreviousCategoryLabel", "businessMenuAriaLabel", "categoryCollectionText", "closeMainMenuAriaLabel", "className", "collapseSize", "currentUrl", "dnaLogoLinkAriaLabel", "featuredItemsAriaLabel", "isLoggedIn", "items", "language", "languageSelector", "languageSelectorText", "login", "loginComponent", "loginText", "mainMenuAriaLabel", "minicart", "minicartAmount", "minicartAmountLabel", "minicartComponent", "minicartText", "nextJSLinkComponent", "notificationText", "openMainMenuAriaLabel", "search", "searchComponent", "searchText", "showLoginTooltip", "showMinicart", "zIndex"]);
+    var { backToPreviousCategoryLabel = '', businessMenuAriaLabel = 'Sivustot', categoryCollectionText = 'Muut kategoriat', closeMainMenuAriaLabel, className, collapseSize = 767, currentUrl = '', dnaLogoLinkAriaLabel, featuredItemsAriaLabel = '', isLoggedIn = false, items = {}, language = 'fi', languageSelector = false, languageSelectorText = 'Vaihda kieltä', login = true, loginComponent, loginText = 'Kirjaudu', mainMenuAriaLabel = 'Päänavigaatio', minicart = true, minicartAmount = 0, minicartAmountLabel, minicartComponent = false, minicartText = 'Ostoskori', nextJSLinkComponent = false, nextJSLinkLegacyBehavior = true, notificationText = '', openMainMenuAriaLabel, search = true, searchComponent = false, searchText = 'Haku', showLoginTooltip = false, showMinicart = false, zIndex = 1030 } = _a, props = tslib.__rest(_a, ["backToPreviousCategoryLabel", "businessMenuAriaLabel", "categoryCollectionText", "closeMainMenuAriaLabel", "className", "collapseSize", "currentUrl", "dnaLogoLinkAriaLabel", "featuredItemsAriaLabel", "isLoggedIn", "items", "language", "languageSelector", "languageSelectorText", "login", "loginComponent", "loginText", "mainMenuAriaLabel", "minicart", "minicartAmount", "minicartAmountLabel", "minicartComponent", "minicartText", "nextJSLinkComponent", "nextJSLinkLegacyBehavior", "notificationText", "openMainMenuAriaLabel", "search", "searchComponent", "searchText", "showLoginTooltip", "showMinicart", "zIndex"]);
     const { isMobile } = useWindowSize.default(collapseSize);
     const navigationEl = React.useRef(null);
     const key = ramda.prop('id');
@@ -257,6 +257,7 @@ const MainHeaderNavigation = (_a) => {
             minicartComponent,
             navZIndex: zIndex,
             nextJSLinkComponent,
+            nextJSLinkLegacyBehavior,
             resetMenuEvents,
             searchComponent,
             setTooltipItems,
@@ -281,6 +282,7 @@ const MainHeaderNavigation = (_a) => {
         menuLevel,
         minicartComponent,
         nextJSLinkComponent,
+        nextJSLinkLegacyBehavior,
         searchComponent,
         showLoginTooltip,
         showMinicart,

package/build/cjs/components/MainHeaderNavigation/context/NavContext.d.ts

@@ -20,6 +20,7 @@ export interface NavContextProps {
     minicartComponent?: ComponentType | ReactNode | boolean;
     navZIndex: number;
     nextJSLinkComponent: ComponentType | ReactNode | boolean;
+    nextJSLinkLegacyBehavior?: boolean;
     resetMenuEvents: () => void;
     searchComponent?: ComponentType | ReactNode | boolean;
     setTooltipItems: Dispatch<SetStateAction<MenuTooltipItems>>;

package/build/cjs/components/MainHeaderNavigation/context/NavContext.js

@@ -43,6 +43,7 @@ const NavContext = React.createContext({
     minicartComponent: undefined,
     navZIndex: 1030,
     nextJSLinkComponent: false,
+    nextJSLinkLegacyBehavior: true,
     resetMenuEvents: () => { },
     searchComponent: false,
     setTooltipItems: () => { },

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

@@ -46,7 +46,7 @@ interface RadioButtonProps {
 }
 type RadioGroupOption = Omit<RadioButtonProps, 'checked' | 'onChange' | 'name'>;
 type GroupVariant = 'fieldset' | 'radiogroup';
-interface RadioButtonGroupProps extends Omit<RadioButtonProps, 'id' | 'checked' | 'disabled'> {
+interface RadioButtonGroupProps extends Omit<RadioButtonProps, 'id' | 'checked' | 'disabled' | 'label'> {
     /**
      * Unique ID for the radio button group
      */
@@ -64,7 +64,7 @@ interface RadioButtonGroupProps extends Omit<RadioButtonProps, 'id' | 'checked'
      * Label for the group
      * Will be rendered inside a `<legend>` or a `<div>`, depending on `groupVariant`
      */
-    label?: string;
+    label?: string | React.ReactNode;
     /**
      *  Helper text shown below the group label
      */

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

@@ -98,9 +98,15 @@ const StyledFieldset = styledComponents.styled.fieldset `
     min-inline-size: unset;
 `;
 const RadioButtonGroup = ({ label, description, groupName, value, onChange, id, options, children, groupVariant, className, 'data-testid': dataTestId, }) => {
-    var _a;
     const isFieldset = groupVariant === 'fieldset';
-    const baseId = (_a = id !== null && id !== void 0 ? id : label === null || label === void 0 ? void 0 : label.normalize('NFKD').replace(/[\u0300-\u036f]/g, '').replace(/\s+/g, '-').replace(/[^a-zA-Z0-9-_]/g, '').toLowerCase()) !== null && _a !== void 0 ? _a : 'radio-group';
+    const baseId = id !== null && id !== void 0 ? id : (typeof label === 'string'
+        ? label
+            .normalize('NFKD')
+            .replace(/[\u0300-\u036f]/g, '')
+            .replace(/\s+/g, '-')
+            .replace(/[^a-zA-Z0-9-_]/g, '')
+            .toLowerCase()
+        : 'radio-group');
     const labelId = `${baseId}-label`;
     const descriptionId = `${baseId}-description`;
     const combinedDescribedBy = [description ? descriptionId : undefined].filter(Boolean).join(' ');

package/build/cjs/components/Textarea/Textarea.js

@@ -64,6 +64,7 @@ const ErrorMessage = styledComponents.styled(Message) `
 const Textarea = (_a) => {
     var { height = 3, 'data-testid': dataTestId, ariaLabel } = _a, props = tslib.__rest(_a, ["height", 'data-testid', "ariaLabel"]);
     const inputRef = React.useRef(null);
+    const isErrorStatus = props.status === 'error';
     const handleOnBlur = (e) => {
         if (props.onBlur) {
             props.onBlur(e.target.value, e);
@@ -80,14 +81,14 @@ const Textarea = (_a) => {
             inputRef.current.focus();
         }
     };
-    const errorId = props.status === 'error' && props.errorMessage ? `${props.id}-error` : undefined;
+    const errorId = isErrorStatus && props.errorMessage ? `${props.id}-error` : undefined;
     const commentId = props.commentMessage ? `${props.id}-comment` : undefined;
     const describedBy = [errorId, commentId].filter(Boolean).join(' ') || undefined;
     return (React__default.default.createElement(FieldContainer, { className: props.className },
-        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(StyledTextarea, { id: props.id, name: props.name, ref: inputRef, value: props.value, rows: height, placeholder: props.placeholder, tabIndex: props.tabIndex, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, "aria-label": !props.label ? ariaLabel : undefined, "aria-describedby": describedBy, "data-testid": dataTestId }),
+        props.label && (React__default.default.createElement(LabelText.default, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, status: isErrorStatus ? 'error' : undefined, isMandatory: props.required }, props.label)),
+        React__default.default.createElement(StyledTextarea, { id: props.id, name: props.name, ref: inputRef, value: props.value, rows: height, placeholder: props.placeholder, tabIndex: props.tabIndex, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, "aria-label": !props.label ? ariaLabel : undefined, "aria-invalid": isErrorStatus, "aria-describedby": describedBy, "data-testid": dataTestId }),
         props.commentMessage && (React__default.default.createElement(Message, { id: commentId, "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage)),
-        props.status === 'error' && props.errorMessage && (React__default.default.createElement(ErrorMessage, { id: errorId, "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
+        isErrorStatus && props.errorMessage && (React__default.default.createElement(ErrorMessage, { id: errorId, "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
 };
 
 exports.default = Textarea;

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

@@ -1,4 +1,4 @@
-import type { MouseEvent, ReactNode } from 'react';
+import type { ComponentType, MouseEvent, ReactNode } from 'react';
 import React from 'react';
 type ButtonType = 'submit' | 'button' | 'reset';
 export interface Props {
@@ -24,6 +24,13 @@ export interface Props {
      * Allows to change the type of resulting HTML element from button (`<button></button>`) to anchor (`<a href="..."></a>`)
      */
     href?: string;
+    /**
+     * Allows to use a custom link component instead of anchor element when `href` is defined
+     */
+    nextLink?: ComponentType<{
+        href: string;
+        children: ReactNode;
+    }>;
     /**
      * Allows to set the target attribute for the link
      */

package/build/es/components/Button/Button.js

@@ -117,8 +117,9 @@ const Element = styled.button `
 `;
 /** @visibleName Button */
 const Button = (_a) => {
+    var _b;
     var { type = 'submit', 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue, 'aria-label': ariaLabel } = _a, props = __rest(_a, ["type", 'data-testid', 'data-no-close', 'data-track-value', 'aria-label']);
-    return (React__default.createElement(Element, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, target: props.href ? props.target : undefined, rel: props.target === '_blank' ? 'noopener noreferrer' : undefined, onClick: props.onClick, onMouseDown: props.onMouseDown, "$small": props.small, "$darkBg": props.darkBg, "$fullWidth": props.fullWidth, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, "aria-label": ariaLabel }, props.dataAttributes, (!props.href && {
+    return (React__default.createElement(Element, Object.assign({ id: props.id, as: (_b = props.nextLink) !== null && _b !== void 0 ? _b : (props.href ? 'a' : undefined), type: props.href ? undefined : type, href: props.href, target: props.href ? props.target : undefined, rel: props.target === '_blank' ? 'noopener noreferrer' : undefined, onClick: props.onClick, onMouseDown: props.onMouseDown, "$small": props.small, "$darkBg": props.darkBg, "$fullWidth": props.fullWidth, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, "aria-label": ariaLabel }, props.dataAttributes, (!props.href && {
         name: props.name,
         disabled: props.disabled,
     })), props.loading ? (React__default.createElement(PixelLoader, { color: props.darkBg ? theme.color.default.white : theme.color.default.plum, label: props.loadingLabel })) : (React__default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))));

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

@@ -47,6 +47,15 @@ const localeData = {
     'en-GB': undefined,
 };
 const sentenceCase = (string) => `${string[0].toUpperCase()}${string.slice(1)}`;
+const parseFIDateString = (dateString) => {
+    const parts = dateString.split(/\D+/);
+    if (!parts || parts.length < 3) {
+        return null;
+    }
+    const [day, month, year] = parts.map(Number);
+    const date = new Date(year, month - 1, day);
+    return !Number.isNaN(date.getTime()) ? date : null;
+};
 // TODO: change `& .react-datepicker` value back to `1` after z-index of Footer removed
 const Wrapper = styled.div `
     position: relative;
@@ -102,10 +111,27 @@ const Wrapper = styled.div `
         }
     }
 
+    & .react-datepicker__sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+    }
+
+    & .react-datepicker__day-names {
+        background-color: ${theme.color.background.sand.E01};
+        padding: ${getMultipliedSize(theme.base.baseWidth, 0.5)} 0;
+    }
+
     & .react-datepicker__day-names,
     & .react-datepicker__week {
         display: flex;
         gap: ${getMultipliedSize(theme.base.baseWidth, 0.8)};
+        justify-content: center;
 
         .react-datepicker__day-name,
         .react-datepicker__day {
@@ -241,6 +267,7 @@ const DateTimePicker = (_a) => {
     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 [manualInputValue, setManualInputValue] = useState(null);
     const isRange = props.endDate !== undefined;
     const callOnChange = (date, event) => {
         props.onChange(date, event);
@@ -249,6 +276,10 @@ const DateTimePicker = (_a) => {
         setShowReactDatePicker(true);
     };
     const handleOnInputChange = (_, e) => {
+        if (props.isEditable) {
+            setManualInputValue(e.target.value);
+            return;
+        }
         if (props.onInputChange) {
             props.onInputChange(e);
         }
@@ -288,6 +319,7 @@ const DateTimePicker = (_a) => {
         if (!shouldKeepOpen) {
             setShowReactDatePicker(false);
         }
+        setManualInputValue(null);
         callOnChange(date, event);
     };
     const handleOnReactDatePickerClickOutside = () => {
@@ -304,12 +336,15 @@ 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(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);
-                    if (!Number.isNaN(parsedDate.getTime())) {
-                        callOnChange(parsedDate, e);
-                    }
+        React__default.createElement(Input, { id: `datetimepicker-input-${props.id}`, name: `datetimepicker-input-${props.id}`, label: props.label, placeholder: props.placeholder, value: manualInputValue !== null && manualInputValue !== void 0 ? manualInputValue : 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) {
+                    return;
+                }
+                const date = locale === 'fi-FI'
+                    ? parseFIDateString(e.target.value)
+                    : new Date(e.target.value);
+                if (date && !Number.isNaN(date.getTime())) {
+                    callOnChange(date, e);
                 }
             } }),
         React__default.createElement(VisuallyHiddenStatus, { role: "status", "aria-live": "polite" }, startDate instanceof Date && !Number.isNaN(startDate.getTime())

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

@@ -277,14 +277,37 @@ const Categories = ({ categories }) => {
 const GeneralInformation = ({ generalInformation }) => {
     const { language } = useContext(FooterContext);
     const currentYear = new Date().getFullYear();
-    const orderMap = ['privacyPolicy', 'cookieSettings', 'terms'];
+    const COOKIE_SETTINGS_URL = 'cookie-settings';
+    const OT_SDK_CLASSNAME = 'ot-sdk-show-settings';
+    // TODO after release: Remove redundant `isNewModelUsed` condition and refactor it's usages (STYLE-905)
+    const isNewModelUsed = !!generalInformation.mandatoryLinks;
     const typeToClassMap = {
         cookie: 'ot-sdk-show-settings',
     };
-    const orderedGeneralInformation = orderMap.map(id => new Map(Object.entries(generalInformation)).get(id));
+    const orderMap = ['privacyPolicy', 'cookieSettings', 'terms'];
+    const getOrderedLinks = () => {
+        if (isNewModelUsed && Array.isArray(generalInformation.mandatoryLinks)) {
+            return generalInformation.mandatoryLinks;
+        }
+        return orderMap.map(id => new Map(Object.entries(generalInformation)).get(id));
+    };
+    const getLinkHref = (item) => {
+        var _a;
+        if (!((_a = item.urls) === null || _a === void 0 ? void 0 : _a[language]))
+            return '#!';
+        return item.urls[language] !== COOKIE_SETTINGS_URL ? item.urls[language] : '#!';
+    };
+    const getLinkClassName = (item) => {
+        var _a;
+        if (isNewModelUsed) {
+            return ((_a = item.urls) === null || _a === void 0 ? void 0 : _a[language]) === COOKIE_SETTINGS_URL ? OT_SDK_CLASSNAME : '';
+        }
+        return item.type ? typeToClassMap[item.type] : '';
+    };
+    const orderedGeneralInformation = getOrderedLinks();
     return (React__default.createElement(GeneralInformationContainer, { "data-testid": "general-information-section" },
         orderedGeneralInformation.map((item, index) => item && (React__default.createElement(Fragment, { key: `general-information-link-${index}` },
-            React__default.createElement("a", { href: (item.urls && item.urls[language]) || '#!', className: item.type && typeToClassMap[item.type] }, item.titles[language]),
+            React__default.createElement("a", { href: getLinkHref(item), className: getLinkClassName(item) }, item.titles[language]),
             React__default.createElement("span", { "aria-hidden": "true" }, "|")))),
         "DNA ",
         currentYear));

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

@@ -3,6 +3,7 @@ import React__default, { useContext } from 'react';
 import NavContext from '../context/NavContext.js';
 import { MenuLink } from '../globalNavStyles.js';
 
+/* eslint-disable react/jsx-props-no-spreading */
 const isSelected = (currentUrl, linkUrl, exactMatch = false) => {
     if (currentUrl && linkUrl) {
         let url = linkUrl;
@@ -15,15 +16,28 @@ const isSelected = (currentUrl, linkUrl, exactMatch = false) => {
 };
 const isMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
 const LinkModifier = ({ menuItem, disabledTabIndex, showIcon }) => {
-    const { lang, currentUrl, nextJSLinkComponent, resetMenuEvents } = useContext(NavContext);
+    const { lang, currentUrl, nextJSLinkComponent, nextJSLinkLegacyBehavior, resetMenuEvents } = useContext(NavContext);
     const menuItemLink = menuItem.urls[lang];
     const isExternalLink = menuItem.target === '_blank';
-    const MenuLinkComponent = (React__default.createElement(MenuLink, { "aria-current": isSelected(currentUrl, menuItemLink) ? 'page' : undefined, href: menuItemLink, id: menuItem.id, onClick: resetMenuEvents, tabIndex: disabledTabIndex ? -1 : undefined, target: isExternalLink ? '_blank' : '_self' },
+    const linkContent = (React__default.createElement(React__default.Fragment, null,
         showIcon && (isExternalLink ? React__default.createElement(Open, null) : React__default.createElement(ArrowRight, null)),
         React__default.createElement("span", null, menuItem.titles[lang])));
+    const MenuLinkComponent = (React__default.createElement(MenuLink, { "aria-current": isSelected(currentUrl, menuItemLink) ? 'page' : undefined, href: menuItemLink, id: menuItem.id, onClick: resetMenuEvents, tabIndex: disabledTabIndex ? -1 : undefined, target: isExternalLink ? '_blank' : '_self' }, linkContent));
+    const commonLinkProps = {
+        'aria-current': isSelected(currentUrl, menuItemLink) ? 'page' : undefined,
+        linkUrl: menuItemLink,
+        id: menuItem.id,
+        onClick: resetMenuEvents,
+        tabIndex: disabledTabIndex ? -1 : undefined,
+        target: isExternalLink ? '_blank' : '_self',
+    };
     if (nextJSLinkComponent && !isMenuItemLinkAbsolute(menuItemLink)) {
         const NextJSLinkComponent = nextJSLinkComponent;
-        return (React__default.createElement(NextJSLinkComponent, { linkUrl: menuItemLink }, MenuLinkComponent));
+        if (nextJSLinkLegacyBehavior) {
+            return (React__default.createElement(NextJSLinkComponent, { linkUrl: menuItemLink },
+                React__default.createElement(MenuLink, Object.assign({}, commonLinkProps), linkContent)));
+        }
+        return (React__default.createElement(MenuLink, Object.assign({ as: NextJSLinkComponent }, commonLinkProps), linkContent));
     }
     return MenuLinkComponent;
 };

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

@@ -42,10 +42,11 @@ export interface MainHeaderNavigationProps {
     isLoggedIn?: boolean;
     collapseSize?: number;
     nextJSLinkComponent: ComponentType | ReactNode | boolean;
+    nextJSLinkLegacyBehavior?: boolean;
     currentUrl?: string;
     notificationText?: string;
 }
 /** @visibleName MainHeaderNavigation */
-declare const MainHeaderNavigation: ({ backToPreviousCategoryLabel, businessMenuAriaLabel, categoryCollectionText, closeMainMenuAriaLabel, className, collapseSize, currentUrl, dnaLogoLinkAriaLabel, featuredItemsAriaLabel, isLoggedIn, items, language, languageSelector, languageSelectorText, login, loginComponent, loginText, mainMenuAriaLabel, minicart, minicartAmount, minicartAmountLabel, minicartComponent, minicartText, nextJSLinkComponent, notificationText, openMainMenuAriaLabel, search, searchComponent, searchText, showLoginTooltip, showMinicart, zIndex, ...props }: MainHeaderNavigationProps) => React.JSX.Element;
+declare const MainHeaderNavigation: ({ backToPreviousCategoryLabel, businessMenuAriaLabel, categoryCollectionText, closeMainMenuAriaLabel, className, collapseSize, currentUrl, dnaLogoLinkAriaLabel, featuredItemsAriaLabel, isLoggedIn, items, language, languageSelector, languageSelectorText, login, loginComponent, loginText, mainMenuAriaLabel, minicart, minicartAmount, minicartAmountLabel, minicartComponent, minicartText, nextJSLinkComponent, nextJSLinkLegacyBehavior, notificationText, openMainMenuAriaLabel, search, searchComponent, searchText, showLoginTooltip, showMinicart, zIndex, ...props }: MainHeaderNavigationProps) => React.JSX.Element;
 /** @component */
 export default MainHeaderNavigation;

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

@@ -126,7 +126,7 @@ const initiateScrollToHeader = (componentRef) => {
 /** @visibleName MainHeaderNavigation */
 const MainHeaderNavigation = (_a) => {
     var _b, _c, _d;
-    var { backToPreviousCategoryLabel = '', businessMenuAriaLabel = 'Sivustot', categoryCollectionText = 'Muut kategoriat', closeMainMenuAriaLabel, className, collapseSize = 767, currentUrl = '', dnaLogoLinkAriaLabel, featuredItemsAriaLabel = '', isLoggedIn = false, items = {}, language = 'fi', languageSelector = false, languageSelectorText = 'Vaihda kieltä', login = true, loginComponent, loginText = 'Kirjaudu', mainMenuAriaLabel = 'Päänavigaatio', minicart = true, minicartAmount = 0, minicartAmountLabel, minicartComponent = false, minicartText = 'Ostoskori', nextJSLinkComponent = false, notificationText = '', openMainMenuAriaLabel, search = true, searchComponent = false, searchText = 'Haku', showLoginTooltip = false, showMinicart = false, zIndex = 1030 } = _a, props = __rest(_a, ["backToPreviousCategoryLabel", "businessMenuAriaLabel", "categoryCollectionText", "closeMainMenuAriaLabel", "className", "collapseSize", "currentUrl", "dnaLogoLinkAriaLabel", "featuredItemsAriaLabel", "isLoggedIn", "items", "language", "languageSelector", "languageSelectorText", "login", "loginComponent", "loginText", "mainMenuAriaLabel", "minicart", "minicartAmount", "minicartAmountLabel", "minicartComponent", "minicartText", "nextJSLinkComponent", "notificationText", "openMainMenuAriaLabel", "search", "searchComponent", "searchText", "showLoginTooltip", "showMinicart", "zIndex"]);
+    var { backToPreviousCategoryLabel = '', businessMenuAriaLabel = 'Sivustot', categoryCollectionText = 'Muut kategoriat', closeMainMenuAriaLabel, className, collapseSize = 767, currentUrl = '', dnaLogoLinkAriaLabel, featuredItemsAriaLabel = '', isLoggedIn = false, items = {}, language = 'fi', languageSelector = false, languageSelectorText = 'Vaihda kieltä', login = true, loginComponent, loginText = 'Kirjaudu', mainMenuAriaLabel = 'Päänavigaatio', minicart = true, minicartAmount = 0, minicartAmountLabel, minicartComponent = false, minicartText = 'Ostoskori', nextJSLinkComponent = false, nextJSLinkLegacyBehavior = true, notificationText = '', openMainMenuAriaLabel, search = true, searchComponent = false, searchText = 'Haku', showLoginTooltip = false, showMinicart = false, zIndex = 1030 } = _a, props = __rest(_a, ["backToPreviousCategoryLabel", "businessMenuAriaLabel", "categoryCollectionText", "closeMainMenuAriaLabel", "className", "collapseSize", "currentUrl", "dnaLogoLinkAriaLabel", "featuredItemsAriaLabel", "isLoggedIn", "items", "language", "languageSelector", "languageSelectorText", "login", "loginComponent", "loginText", "mainMenuAriaLabel", "minicart", "minicartAmount", "minicartAmountLabel", "minicartComponent", "minicartText", "nextJSLinkComponent", "nextJSLinkLegacyBehavior", "notificationText", "openMainMenuAriaLabel", "search", "searchComponent", "searchText", "showLoginTooltip", "showMinicart", "zIndex"]);
     const { isMobile } = useWindowSize(collapseSize);
     const navigationEl = useRef(null);
     const key = prop('id');
@@ -249,6 +249,7 @@ const MainHeaderNavigation = (_a) => {
             minicartComponent,
             navZIndex: zIndex,
             nextJSLinkComponent,
+            nextJSLinkLegacyBehavior,
             resetMenuEvents,
             searchComponent,
             setTooltipItems,
@@ -273,6 +274,7 @@ const MainHeaderNavigation = (_a) => {
         menuLevel,
         minicartComponent,
         nextJSLinkComponent,
+        nextJSLinkLegacyBehavior,
         searchComponent,
         showLoginTooltip,
         showMinicart,

package/build/es/components/MainHeaderNavigation/context/NavContext.d.ts

@@ -20,6 +20,7 @@ export interface NavContextProps {
     minicartComponent?: ComponentType | ReactNode | boolean;
     navZIndex: number;
     nextJSLinkComponent: ComponentType | ReactNode | boolean;
+    nextJSLinkLegacyBehavior?: boolean;
     resetMenuEvents: () => void;
     searchComponent?: ComponentType | ReactNode | boolean;
     setTooltipItems: Dispatch<SetStateAction<MenuTooltipItems>>;

package/build/es/components/MainHeaderNavigation/context/NavContext.js

@@ -39,6 +39,7 @@ const NavContext = createContext({
     minicartComponent: undefined,
     navZIndex: 1030,
     nextJSLinkComponent: false,
+    nextJSLinkLegacyBehavior: true,
     resetMenuEvents: () => { },
     searchComponent: false,
     setTooltipItems: () => { },

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

@@ -46,7 +46,7 @@ interface RadioButtonProps {
 }
 type RadioGroupOption = Omit<RadioButtonProps, 'checked' | 'onChange' | 'name'>;
 type GroupVariant = 'fieldset' | 'radiogroup';
-interface RadioButtonGroupProps extends Omit<RadioButtonProps, 'id' | 'checked' | 'disabled'> {
+interface RadioButtonGroupProps extends Omit<RadioButtonProps, 'id' | 'checked' | 'disabled' | 'label'> {
     /**
      * Unique ID for the radio button group
      */
@@ -64,7 +64,7 @@ interface RadioButtonGroupProps extends Omit<RadioButtonProps, 'id' | 'checked'
      * Label for the group
      * Will be rendered inside a `<legend>` or a `<div>`, depending on `groupVariant`
      */
-    label?: string;
+    label?: string | React.ReactNode;
     /**
      *  Helper text shown below the group label
      */

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

@@ -90,9 +90,15 @@ const StyledFieldset = styled.fieldset `
     min-inline-size: unset;
 `;
 const RadioButtonGroup = ({ label, description, groupName, value, onChange, id, options, children, groupVariant, className, 'data-testid': dataTestId, }) => {
-    var _a;
     const isFieldset = groupVariant === 'fieldset';
-    const baseId = (_a = id !== null && id !== void 0 ? id : label === null || label === void 0 ? void 0 : label.normalize('NFKD').replace(/[\u0300-\u036f]/g, '').replace(/\s+/g, '-').replace(/[^a-zA-Z0-9-_]/g, '').toLowerCase()) !== null && _a !== void 0 ? _a : 'radio-group';
+    const baseId = id !== null && id !== void 0 ? id : (typeof label === 'string'
+        ? label
+            .normalize('NFKD')
+            .replace(/[\u0300-\u036f]/g, '')
+            .replace(/\s+/g, '-')
+            .replace(/[^a-zA-Z0-9-_]/g, '')
+            .toLowerCase()
+        : 'radio-group');
     const labelId = `${baseId}-label`;
     const descriptionId = `${baseId}-description`;
     const combinedDescribedBy = [description ? descriptionId : undefined].filter(Boolean).join(' ');

package/build/es/components/Textarea/Textarea.js

@@ -56,6 +56,7 @@ const ErrorMessage = styled(Message) `
 const Textarea = (_a) => {
     var { height = 3, 'data-testid': dataTestId, ariaLabel } = _a, props = __rest(_a, ["height", 'data-testid', "ariaLabel"]);
     const inputRef = useRef(null);
+    const isErrorStatus = props.status === 'error';
     const handleOnBlur = (e) => {
         if (props.onBlur) {
             props.onBlur(e.target.value, e);
@@ -72,14 +73,14 @@ const Textarea = (_a) => {
             inputRef.current.focus();
         }
     };
-    const errorId = props.status === 'error' && props.errorMessage ? `${props.id}-error` : undefined;
+    const errorId = isErrorStatus && props.errorMessage ? `${props.id}-error` : undefined;
     const commentId = props.commentMessage ? `${props.id}-comment` : undefined;
     const describedBy = [errorId, commentId].filter(Boolean).join(' ') || undefined;
     return (React__default.createElement(FieldContainer, { className: props.className },
-        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(StyledTextarea, { id: props.id, name: props.name, ref: inputRef, value: props.value, rows: height, placeholder: props.placeholder, tabIndex: props.tabIndex, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, "aria-label": !props.label ? ariaLabel : undefined, "aria-describedby": describedBy, "data-testid": dataTestId }),
+        props.label && (React__default.createElement(LabelText, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, status: isErrorStatus ? 'error' : undefined, isMandatory: props.required }, props.label)),
+        React__default.createElement(StyledTextarea, { id: props.id, name: props.name, ref: inputRef, value: props.value, rows: height, placeholder: props.placeholder, tabIndex: props.tabIndex, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, "aria-label": !props.label ? ariaLabel : undefined, "aria-invalid": isErrorStatus, "aria-describedby": describedBy, "data-testid": dataTestId }),
         props.commentMessage && (React__default.createElement(Message, { id: commentId, "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage)),
-        props.status === 'error' && props.errorMessage && (React__default.createElement(ErrorMessage, { id: errorId, "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
+        isErrorStatus && props.errorMessage && (React__default.createElement(ErrorMessage, { id: errorId, "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
 };
 
 export { Textarea as default };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "v3.11.3",
+    "version": "v3.11.5",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",
@@ -25,8 +25,8 @@
         "clean": "rm -rf node_modules build dnanpm-styleguide*.tgz",
         "eslint": "cross-env eslint --fix './**/*.{ts,tsx}'",
         "eslint:check": "cross-env eslint './**/*.{ts,tsx}'",
-        "format": "cross-env prettier --ignore-path .prettierignore --write --loglevel silent '**/*.{ts,tsx,js,json}'",
-        "format:check": "cross-env prettier --ignore-path .prettierignore --check '**/*.{ts,tsx,js,json}'",
+        "format": "cross-env prettier --ignore-path .prettierignore --write --loglevel silent '**/*.{ts,tsx,js,json,md}'",
+        "format:check": "cross-env prettier --ignore-path .prettierignore --check '**/*.{ts,tsx,js,json,md}'",
         "prepublishOnly": "npm run clean && npm ci && npm run eslint:check && npm run format:check && npm run build",
         "styleguide": "styleguidist server",
         "styleguide:build": "styleguidist build",
@@ -58,7 +58,6 @@
         "@types/node": "^17.0.45",
         "@types/ramda": "^0.27.36",
         "@types/react": "^18.3.11",
-        "@types/react-datepicker": "^6.2.0",
         "@types/react-dom": "^18.3.1",
         "@types/react-modal": "^3.13.1",
         "@types/resize-observer-browser": "^0.1.8",
@@ -72,7 +71,7 @@
         "eslint-config-airbnb-typescript": "^17.1.0",
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-import": "2.32.0",
-        "eslint-plugin-jsdoc": "^52.0.2",
+        "eslint-plugin-jsdoc": "^56.1.2",
         "eslint-plugin-jsx-a11y": "^6.10.2",
         "eslint-plugin-prefer-arrow": "^1.2.3",
         "eslint-plugin-react": "^7.37.4",
@@ -99,7 +98,7 @@
     },
     "dependencies": {
         "ramda": "^0.27.1",
-        "react-datepicker": "^8.4.0",
+        "react-datepicker": "8.7.0",
         "react-modal": "^3.16.1",
         "react-select": "^5.8.1",
         "react-spring": "^8.0.27",