@dnanpm/styleguide 2.1.0 → 2.2.0

package/build/es/components/MainNavigation/ChildComponents/PageSearch.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import colors from '../../../themes/themeComponents/colors.js';
 import Icon from '../../Icon/Icon.js';
+import 'tslib';
 import hlMagnifyingGlass from '../../Icons/hlMagnifyingGlass.js';
 import NavContext from '../context/NavContext.js';
 import MainNavTooltipMenu from './MainNavTooltipMenu.js';

package/build/es/components/MainNavigation/ChildComponents/Ribbon.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { LangProps } from '../../../types/language';
+import type { LangProps } from '../../../types/language';
 export interface RibbonDataProps {
     ribbonLink: LangProps;
     ribbonIcon: string;

package/build/es/components/MainNavigation/ChildComponents/Ribbon.js

@@ -54,17 +54,13 @@ const RibbonColumn = styled.div `
         }
     }
 `;
-const Ribbon = ({ ribbonData, lang = 'fi', navZIndex }) => {
-    return (React.createElement(RibbonContainer, { navZIndex: navZIndex },
-        React.createElement(RibbonItems, null, ribbonData.map(ribbon => {
-            return (React.createElement(RibbonColumn, { key: `ribbon-${ribbon.ribbonIcon}` },
-                ribbon.ribbonLink[lang] && (React.createElement("a", { href: ribbon.ribbonLink[lang] },
-                    React.createElement(Icon, { name: ribbon.ribbonIcon, size: "1rem", position: "left" }),
-                    React.createElement("span", null, ribbon.ribbonTexts[lang]))),
-                !ribbon.ribbonLink[lang] && (React.createElement(React.Fragment, null,
-                    React.createElement(Icon, { name: ribbon.ribbonIcon, size: "1rem", position: "left" }),
-                    React.createElement("span", null, ribbon.ribbonTexts[lang])))));
-        }))));
-};
+const Ribbon = ({ ribbonData, lang = 'fi', navZIndex }) => (React.createElement(RibbonContainer, { navZIndex: navZIndex },
+    React.createElement(RibbonItems, null, ribbonData.map(ribbon => (React.createElement(RibbonColumn, { key: `ribbon-${ribbon.ribbonIcon}` },
+        ribbon.ribbonLink[lang] && (React.createElement("a", { href: ribbon.ribbonLink[lang] },
+            React.createElement(Icon, { name: ribbon.ribbonIcon, size: "1rem", position: "left" }),
+            React.createElement("span", null, ribbon.ribbonTexts[lang]))),
+        !ribbon.ribbonLink[lang] && (React.createElement(React.Fragment, null,
+            React.createElement(Icon, { name: ribbon.ribbonIcon, size: "1rem", position: "left" }),
+            React.createElement("span", null, ribbon.ribbonTexts[lang])))))))));
 
 export default Ribbon;

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { RibbonDataProps } from './ChildComponents/Ribbon';
-import { GlobalNavItems } from './types/globalNavProps';
+import type { RibbonDataProps } from './ChildComponents/Ribbon';
+import type { GlobalNavItems } from './types/globalNavProps';
 export interface MainNavigationProps {
     /** Allows to pass a custom className */
     className?: string;

package/build/es/components/MainNavigation/MainNavigation.js

@@ -147,12 +147,8 @@ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, isMobileMe
     const key = prop('id');
     const level1 = items.mainNavigation && items.mainNavigation.pages ? items.mainNavigation.pages : [];
     // Index & memoize menu levels
-    const level1Items = useMemo(() => {
-        return indexBy(key, level1);
-    }, [level1, key]);
-    const level2 = useMemo(() => {
-        return level1.map((item) => indexBy(key, item.pages));
-    }, [level1, key]);
+    const level1Items = useMemo(() => indexBy(key, level1), [level1, key]);
+    const level2 = useMemo(() => level1.map((item) => indexBy(key, item.pages)), [level1, key]);
     const level2Items = Object.assign({}, ...level2);
     // All states to for handling menus
     const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
@@ -172,36 +168,17 @@ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, isMobileMe
         switch (updatedLevel) {
             case 'level1':
                 clickedItself = newValue === menuLevel.level1;
-                setMenuLevel({
-                    ...menuLevel,
-                    level1: !clickedItself ? newValue : null,
-                    animate1: !clickedItself,
-                    level2: null,
-                    animate2: true,
-                });
+                setMenuLevel(Object.assign(Object.assign({}, menuLevel), { level1: !clickedItself ? newValue : null, animate1: !clickedItself, level2: null, animate2: true }));
                 break;
             case 'level2':
                 clickedItself = newValue === menuLevel.level2;
-                setMenuLevel({
-                    ...menuLevel,
-                    level2: newValue !== menuLevel.level2 ? newValue : null,
-                    animate1: false,
-                    animate2: !clickedItself,
-                });
+                setMenuLevel(Object.assign(Object.assign({}, menuLevel), { level2: newValue !== menuLevel.level2 ? newValue : null, animate1: false, animate2: !clickedItself }));
                 break;
             case 'level1Mobile':
-                setMenuLevel({
-                    ...menuLevel,
-                    level1Mobile: newValue ? newValue : menuLevel.level1Mobile,
-                    scrollPosition: newValue ? 1 : 0,
-                });
+                setMenuLevel(Object.assign(Object.assign({}, menuLevel), { level1Mobile: newValue || menuLevel.level1Mobile, scrollPosition: newValue ? 1 : 0 }));
                 break;
             case 'level2Mobile':
-                setMenuLevel({
-                    ...menuLevel,
-                    level2Mobile: newValue ? newValue : menuLevel.level2Mobile,
-                    scrollPosition: newValue ? 2 : 1,
-                });
+                setMenuLevel(Object.assign(Object.assign({}, menuLevel), { level2Mobile: newValue || menuLevel.level2Mobile, scrollPosition: newValue ? 2 : 1 }));
                 break;
         }
     };
@@ -255,7 +232,7 @@ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, isMobileMe
         setTooltipItems(initialTooltipItems);
     };
     const getBackLink = (menuElements, i) => {
-        const idValue = menuLevel['level' + i + 'Mobile'];
+        const idValue = menuLevel[`level${i}Mobile`];
         return menuElements[idValue];
     };
     const navigationContext = {
@@ -293,12 +270,7 @@ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, isMobileMe
         const overThreshold = checkThreshold(prevPos.y, currPos.y);
         const isShow = currPos.y < prevPos.y;
         if (isShow !== menuLevel.hideOnScroll && overThreshold && !menuLevel.level1) {
-            setMenuLevel({
-                ...menuLevel,
-                animate1: false,
-                animate2: false,
-                hideOnScroll: isShow,
-            });
+            setMenuLevel(Object.assign(Object.assign({}, menuLevel), { animate1: false, animate2: false, hideOnScroll: isShow }));
         }
     }, [menuLevel], undefined, false, 200);
     return (React.createElement(React.Fragment, null,

package/build/es/components/Modal/Modal.js

@@ -1,3 +1,4 @@
+import { __rest } from 'tslib';
 import React from 'react';
 import ReactModal from 'react-modal';
 import styled, { createGlobalStyle, keyframes, css } from '../../themes/styled.js';
@@ -5,8 +6,20 @@ import { media, getMultipliedSize } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
 import hlX from '../Icons/hlX.js';
 
-const ReactModalAdapter = ({ className, appElement, classNameProp, ...props }) => {
-    const styledClassName = classNameProp ? className.replace(` ${classNameProp}`, '') : className;
+const ReactModalAdapter = (_a) => {
+    var { appElement, className, propClassName } = _a, props = __rest(_a, ["appElement", "className", "propClassName"]);
+    /**
+     * Variable "propClassName" represents the original value (if any) passed to the Modal component by using "className" property, e.g.: 'myClassName'
+     * Variable "className" (props.className) represents the combination of propClassName and generated class names by styled-component library, e.g.: 'sc-jvfriV fFzEDO myClassName'
+     *
+     * In order to properly style the overlay and content elements, propClassName value has to be removed from className
+     * Next lines generate eslint warnings since className type is 'string | undefined' but it always has a value generated by styled-component library
+     */
+    const styledClassName = propClassName
+        ? // eslint-disable-next-line
+            className.replace(` ${propClassName}`, '')
+        : // eslint-disable-next-line
+            className;
     const overlayClassName = `${styledClassName}__overlay`;
     const contentClassName = `${styledClassName}__content`;
     return (React.createElement(ReactModal, Object.assign({ portalClassName: className, overlayClassName: overlayClassName, className: contentClassName }, props)));
@@ -39,7 +52,7 @@ const fadeInContent = css `
     animation: ${opacityIn} 0.3s ease-in;
 `;
 const StyledModal = styled(ReactModalAdapter).attrs(props => ({
-    classNameProp: props.className,
+    propClassName: props.className,
 })) `
     &__overlay {
         ${fadeInAnimation};
@@ -103,7 +116,7 @@ const CloseButton = styled.a `
 `;
 class Modal extends React.PureComponent {
     render() {
-        const { appElement, children, className, title, closeIcon, closeLabel, onRequestClose, overflowContentVisible, maxWidth = '37.5rem', ...props } = this.props;
+        const _a = this.props, { appElement, children, className, title, closeIcon, closeLabel, onRequestClose, overflowContentVisible, maxWidth = '37.5rem' } = _a, props = __rest(_a, ["appElement", "children", "className", "title", "closeIcon", "closeLabel", "onRequestClose", "overflowContentVisible", "maxWidth"]);
         if (appElement) {
             ReactModal.setAppElement(appElement);
         }

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

@@ -4,11 +4,11 @@ interface Props {
     /**
      * Depending on the passed type, the background color is determined
      *
-     * @default 'info'
      * @param {NotificationType} info Uses #007d91 color code as background color
      * @param {NotificationType} success Uses #e80c0c color code as background color
      * @param {NotificationType} warning Uses #00b201 color code as background color
      * @param {NotificationType} error Uses #ff7800 color code as background color
+     * @default 'info'
      */
     type?: NotificationType;
     /**

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

@@ -1,3 +1,4 @@
+import { __rest } from 'tslib';
 import React from 'react';
 import styled__default from 'styled-components';
 import theme from '../../themes/theme.js';
@@ -41,7 +42,8 @@ const IconWrapper = styled__default.div `
 const ContentWrapper = styled__default.div `
     flex: 1;
 `;
-const Notification = ({ type = 'info', 'data-testid': dataTestId, ...props }) => {
+const Notification = (_a) => {
+    var { type = 'info', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
     return (React.createElement(StyledRibbon, { color: type, closeButton: props.closeButton, onClick: props.onClickCloseButton, dismissed: props.dismissed, centered: props.centered, className: props.className, "data-testid": dataTestId },
         React.createElement(NotificationWrapper, null,
             props.showIcon && (React.createElement(IconWrapper, null,

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

@@ -1,6 +1,21 @@
 /// <reference types="react" />
-import LoaderProps from './types/LoaderProps';
+interface Props {
+    /**
+     * Allows to pass custom color
+     *
+     * @default 'theme.color.hotPink'
+     */
+    color?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
 /** @visibleName Pixel Loader */
-export declare const PixelLoader: ({ className, color, "data-testid": dataTestId }: LoaderProps) => JSX.Element;
+declare const PixelLoader: ({ className, color, "data-testid": dataTestId }: Props) => JSX.Element;
 /** @component */
 export default PixelLoader;

package/build/es/components/PixelLoader/PixelLoader.js

@@ -1,6 +1,33 @@
 import React from 'react';
-import { LoaderWrapper, Pixel } from './PixelLoaderStyles.js';
+import styled, { keyframes } from '../../themes/styled.js';
+import theme from '../../themes/theme.js';
 
+const loading = keyframes `
+    0% {
+        transform: scale(1);
+    }
+    20% {
+        transform: scale(1.4, 1.4);
+    }
+    40% {
+        transform: scale(1);
+    }
+`;
+const LoaderWrapper = styled.div `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0.125rem;
+`;
+const Pixel = styled.div `
+    background: ${p => p.color || theme.color.hotPink};
+    display: inline-block;
+    width: 0.625rem;
+    height: 0.625rem;
+    margin: 0.125rem;
+    animation: ${loading} 1s ease-in-out infinite;
+    animation-delay: ${p => p.delay}s;
+`;
 /** @visibleName Pixel Loader */
 const PixelLoader = ({ className, color, 'data-testid': dataTestId }) => (React.createElement(LoaderWrapper, { className: className, "data-testid": dataTestId },
     React.createElement(Pixel, { color: color, delay: "-0.27" }),
@@ -9,4 +36,3 @@ const PixelLoader = ({ className, color, 'data-testid': dataTestId }) => (React.
     React.createElement(Pixel, { color: color, delay: "0" })));
 
 export default PixelLoader;
-export { PixelLoader };

package/build/es/components/ProgressIndicator/ProgressIndicator.js

@@ -2,15 +2,16 @@ import { createElement } from 'react';
 import styled from '../../themes/styled.js';
 import { media, getMultipliedSize } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
+import 'tslib';
 import HlCheck from '../Icons/hlCheck.js';
 import hlExclamationMark from '../Icons/hlExclamationMark.js';
 
-const progressBallWidthLarge = 2.5; // 40px
-const progressBallWidthSmall = 1.875; // 30px
-const progressLineTopMarginLarge = 18;
-const progressLineTopMarginSmall = 13;
-const iconSizeLarge = 1.25;
-const iconSizeSmall = 1.0;
+const progressBallWidthLarge = '2.5rem'; // 40px
+const progressBallWidthSmall = '1.875rem'; // 30px
+const progressLineTopMarginLarge = '18';
+const progressLineTopMarginSmall = '13';
+const iconSizeLarge = '1.25rem';
+const iconSizeSmall = '1rem';
 const progressBallBorderWidth = 4;
 const progressBallBorderHeight = 4;
 const ProgressBall = styled.span `
@@ -24,20 +25,20 @@ const ProgressBall = styled.span `
     transition: all 0.3s ease 0.3s;
 
     ${({ theme }) => media.sm `
-        width: ${progressBallWidthLarge}rem;
-        height: ${progressBallWidthLarge}rem;
+        width: ${progressBallWidthLarge};
+        height: ${progressBallWidthLarge};
         font-size: ${theme.fontSize.l};
     `};
 
     span.dnasg-icon,
     span.dnasg-icon > svg {
         margin: 0 auto;
-        height: ${iconSizeSmall}rem;
-        width: ${iconSizeSmall}rem;
+        height: ${iconSizeSmall};
+        width: ${iconSizeSmall};
 
         ${() => media.sm `
-            height: ${iconSizeLarge}rem;
-            width: ${iconSizeLarge}rem;
+            height: ${iconSizeLarge};
+            width: ${iconSizeLarge};
         `};
     }
 `;
@@ -75,14 +76,14 @@ const Progress = styled.ul `
     justify-content: space-around;
 
     ${ProgressBall} {
-        width: ${p => (p && p.small ? progressBallWidthSmall : progressBallWidthLarge)}rem;
-        height: ${p => (p && p.small ? progressBallWidthSmall : progressBallWidthLarge)}rem;
+        width: ${p => (p && p.small ? progressBallWidthSmall : progressBallWidthLarge)};
+        height: ${p => (p && p.small ? progressBallWidthSmall : progressBallWidthLarge)};
         font-size: ${p => (p && p.small ? p.theme.fontSize.s : p.theme.fontSize.l)};
 
         span.dnasg-icon,
         span.dnasg-icon > svg {
-            height: ${p => (p && p.small ? iconSizeSmall : iconSizeLarge)}rem;
-            width: ${p => (p && p.small ? iconSizeSmall : iconSizeLarge)}rem;
+            height: ${p => (p && p.small ? iconSizeSmall : iconSizeLarge)};
+            width: ${p => (p && p.small ? iconSizeSmall : iconSizeLarge)};
         }
     }
 
@@ -124,7 +125,7 @@ const ProgressItem = styled.li `
     padding-bottom: ${({ theme, isSmall }) => isSmall ? 0 : getMultipliedSize(theme.base.baseHeight, 2)};
 
     ${ProgressBall} {
-        cursor: ${({ cursorType }) => (cursorType ? cursorType : 'pointer')};
+        cursor: ${({ cursorType }) => cursorType || 'pointer'};
         border-color: ${({ theme, isActive, isCompleted, isError }) => {
     if (isError) {
         return theme.color.error;
@@ -175,7 +176,7 @@ const ProgressIndicator = props => {
                 onStepChange(index);
             }
         };
-        return (createElement(ProgressItem, { "aria-current": isActive ? 'step' : undefined, cursorType: cursorType, isActive: isActive, isCompleted: isCompleted, isError: isError, isSmall: small, key: index, onClick: handleClick },
+        return (createElement(ProgressItem, { "aria-current": isActive ? 'step' : undefined, cursorType: cursorType, isActive: isActive, isCompleted: isCompleted, isError: isError, isSmall: small, key: `${stepNumber}-${title}`, onClick: handleClick },
             createElement(ProgressLine, null),
             createElement(ProgressBall, null, isCompleted || isError ? createElement(Icon, { icon: icon }) : stepNumber),
             title && createElement(ProgressText, { isSmall: small }, title)));

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 interface Props {
     /**
      * Unique ID for the input element
@@ -21,7 +21,7 @@ interface Props {
     /**
      * On radio button change callback
      */
-    onChange?: (...args: any[]) => any;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     /**
      * Allows to set the radio button as checked
      *

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

@@ -1,5 +1,6 @@
+import { __rest } from 'tslib';
 import React from 'react';
-import { CheckboxInput_RadioInput } from '../../themes/globalStyles.js';
+import { CheckboxAndRadioInputCore } from '../../themes/globalStyles.js';
 import styled from '../../themes/styled.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 
@@ -7,7 +8,7 @@ const Container = styled.div `
     display: flex;
     margin-bottom: ${props => getMultipliedSize(props.theme.base.baseHeight, 0.5)};
 `;
-const Input = styled(CheckboxInput_RadioInput) `
+const Input = styled(CheckboxAndRadioInputCore) `
     border-radius: 50%;
 
     &::before {
@@ -17,7 +18,8 @@ const Input = styled(CheckboxInput_RadioInput) `
     }
 `;
 /** @visibleName Radio Button */
-const RadioButton = ({ 'data-testid': dataTestId, ...props }) => {
+const RadioButton = (_a) => {
+    var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
     return (React.createElement(Container, { className: props.className, "data-testid": dataTestId },
         React.createElement(Input, { id: props.id, type: "radio", name: props.name, checked: props.checked, "aria-checked": props.checked, value: props.value, disabled: props.disabled, onChange: props.onChange, "data-testid": dataTestId && `${dataTestId}-input` }),
         props.label && (React.createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` }, props.label))));

package/build/es/components/ReadMore/ReadMore.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import styled from '../../themes/styled.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
+import 'tslib';
 import hlChevronDown from '../Icons/hlChevronDown.js';
 import hlChevronUp from '../Icons/hlChevronUp.js';
 

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

@@ -11,10 +11,10 @@ interface Props {
     /**
      * When defined, the text colors in color map are ignored and passed value is used instead
      *
-     * @default 'white'
      * @param {TextColor} text Uses #121212 color code as text color
      * @param {TextColor} white Uses #ffffff color code as text color
      * @param {TextColor} black Uses #000000 color code as text color
+     * @default 'white'
      */
     textColor?: TextColor;
     /**

package/build/es/components/Ribbon/Ribbon.js

@@ -1,3 +1,4 @@
+import { __rest } from 'tslib';
 import React from 'react';
 import styled__default from 'styled-components';
 import theme from '../../themes/theme.js';
@@ -5,21 +6,20 @@ import { getMultipliedSize, getDividedSize, media } from '../../utils/styledUtil
 import Icon from '../Icon/Icon.js';
 import hlX from '../Icons/hlX.js';
 
-const getColorScheme = ({ color, textColor }) => {
+const getColorScheme = ({ color, textColor, }) => {
     const map = {
         text: ['pinkday', 'white', 'pink2', 'grayBg', 'gray15', 'gray10', 'gray5'],
         black: ['grayWhite'],
     };
-    textColor =
-        textColor ||
-            Object.keys(map).find(key => map[key].includes(color)) ||
-            'white';
+    const mappedTextColor = textColor ||
+        Object.keys(map).find(key => map[key].includes(color)) ||
+        'white';
     return `
-        color: ${theme.color[textColor]};
+        color: ${theme.color[mappedTextColor]};
         background: ${theme.color[color]};
 
         a {
-            color: ${theme.color[textColor]};
+            color: ${theme.color[mappedTextColor]};
         };
     }`;
 };
@@ -59,7 +59,8 @@ const CloseButton = styled__default.a `
         top: ${getMultipliedSize(theme.base.baseWidth, 1.2)};
     `}
 `;
-const Ribbon = ({ color = 'info', 'data-testid': dataTestId, ...props }) => {
+const Ribbon = (_a) => {
+    var { color = 'info', 'data-testid': dataTestId } = _a, props = __rest(_a, ["color", 'data-testid']);
     if (props.dismissed) {
         return null;
     }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Props as IconProps } from '../Icon/Icon';
+import type { Props as IconProps } from '../Icon/Icon';
 export interface SearchProps {
     /**
      * The input element's name
@@ -54,11 +54,11 @@ export interface SearchProps {
     /**
      * On input element change callback
      */
-    onChange?: (...args: any[]) => any;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     /**
      * On icon element click callback
      */
-    onClick?: (...args: any[]) => any;
+    onClick?: (e: React.MouseEvent<Element, MouseEvent>) => void;
     /**
      * If true, internal input value state management is ignored, thus making the component "stateless".
      * Input value can then be controlled from outside by using the handler functions.

package/build/es/components/Search/Search.js

@@ -1,3 +1,4 @@
+import { __rest } from 'tslib';
 import React, { useState } from 'react';
 import styled from '../../themes/styled.js';
 import colors from '../../themes/themeComponents/colors.js';
@@ -38,7 +39,8 @@ const Input = styled.input `
         display: none;
     }
 `;
-const Search = ({ value = '', iconName, icon = hlMagnifyingGlass, iconSize = '1.5rem', className, onChange, onClick, isReactive = false, ...props }) => {
+const Search = (_a) => {
+    var { value = '', iconName, icon = hlMagnifyingGlass, iconSize = '1.5rem', className, onChange, onClick, isReactive = false } = _a, props = __rest(_a, ["value", "iconName", "icon", "iconSize", "className", "onChange", "onClick", "isReactive"]);
     const [text, setText] = useState(value);
     const inputRef = React.useRef(null);
     const handleChange = (e) => {
@@ -69,7 +71,7 @@ const Search = ({ value = '', iconName, icon = hlMagnifyingGlass, iconSize = '1.
         return (React.createElement(Icon, { icon: inputValue.length ? hlX : icon, size: iconSize, color: colors.hotPink, onClick: onIconClick }));
     };
     return (React.createElement(Container, { className: className },
-        React.createElement(Input, Object.assign({ type: "search", value: isReactive ? value : text, onChange: handleChange, ref: inputRef }, props)),
+        React.createElement(Input, { id: props.id, name: props.name, type: "search", value: isReactive ? value : text, onChange: handleChange, ref: inputRef, placeholder: props.placeholder, autoFocus: props.autoFocus }),
         renderIcon()));
 };
 

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

@@ -4,6 +4,7 @@ import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import { media } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
+import 'tslib';
 import HlCheck from '../Icons/hlCheck.js';
 import hlChevronDown from '../Icons/hlChevronDown.js';
 
@@ -176,7 +177,7 @@ const SecondaryNavigation = ({ currentUrl = '', data, lang = 'fi', nextJSSeconda
                 React.createElement("span", null, selectedElement.titles[lang])),
             React.createElement(MobileSelectorArrow, { isOpen: isSecondaryNavOpen },
                 React.createElement(Icon, { icon: hlChevronDown })))),
-        React.createElement(SecondaryNavigationList, { id: data.name || 'secondary-navigation-category-' + data.categoryId, isOpen: isSecondaryNavOpen, collapseSize: collapseSize, componentMaxWidth: componentMaxWidth, "data-testid": "secondary-nav-menu-ul" }, data.pages
+        React.createElement(SecondaryNavigationList, { id: data.name || `secondary-navigation-category-${data.categoryId}`, isOpen: isSecondaryNavOpen, collapseSize: collapseSize, componentMaxWidth: componentMaxWidth, "data-testid": "secondary-nav-menu-ul" }, data.pages
             ? data.pages.map((listElement, index) => {
                 const linkUrl = listElement.urls[lang];
                 const linkTitle = listElement.titles[lang];

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

@@ -1,10 +1,14 @@
 /// <reference types="react" />
-import { Props as ReactSelectProps } from 'react-select';
-export interface SelectboxItem {
+import type { GroupBase, OptionsOrGroups, Props as ReactSelectProps } from 'react-select';
+interface CustomDropDownIndicator {
+    color?: string;
+    iconSize?: string;
+}
+interface SelectboxOption {
     label: string;
-    value: any;
+    value: string;
 }
-interface Props {
+interface Props<Option extends SelectboxOption = SelectboxOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> {
     /**
      * Unique ID for the select element
      */
@@ -12,13 +16,13 @@ interface Props {
     /**
      * Array of options that populate the select menu
      */
-    options: ReactSelectProps['options'];
+    options: OptionsOrGroups<Option, Group>;
     /**
      * Default value of select menu
      *
      * @default undefined
      */
-    value?: ReactSelectProps['value'];
+    value?: ReactSelectProps<Option>['value'];
     /**
      * Text of the select element label
      */
@@ -34,7 +38,7 @@ interface Props {
     /**
      * On select change callback
      */
-    onChange: (selectedItem: SelectboxItem) => void;
+    onChange: ReactSelectProps<Option, IsMulti>['onChange'];
     /**
      * On input change callback
      */
@@ -49,23 +53,19 @@ interface Props {
     /**
      * Allows to place selectbox options menu above or below the selectbox control
      *
-     * @default 'auto'
      * @param {MenuPlacement} top Opens options menu above the control
      * @param {MenuPlacement} bottom Opens options menu below the control
+     * @default 'auto'
      */
     menuPlacement?: ReactSelectProps['menuPlacement'];
     /**
      * Allows to define icon color and icon size of dropdown indicator
      *
-     * @deprecated Icon color and size should use values only according to Selectbox design prototypes
-     *
      * @default color '#000000'
-     * @default iconSize '1rem'
+     * @default iconSize '1.5rem'
+     * @deprecated Icon color and size should use values only according to Selectbox design prototypes
      */
-    dropDownIndicator?: {
-        color?: string;
-        iconSize?: string;
-    };
+    dropDownIndicator?: CustomDropDownIndicator;
     /**
      * Displayes loading indicator (PixelLoader) instead of selectbox
      *
@@ -89,7 +89,7 @@ interface Props {
      *
      * @default false
      */
-    isMulti?: boolean;
+    isMulti?: IsMulti;
     /**
      * Allows to disable the component functionality
      *
@@ -121,5 +121,5 @@ interface Props {
      */
     'data-testid'?: string;
 }
-declare const SelectBox: ({ dropDownIndicator, "data-testid": dataTestId, isSearchable, isClearable, isMulti, noOptionsText, isLoading, isDisabled, isRequired, error, ...props }: Props) => JSX.Element;
+declare const SelectBox: <Option extends SelectboxOption = SelectboxOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ dropDownIndicator, "data-testid": dataTestId, isSearchable, isClearable, noOptionsText, isLoading, isDisabled, isRequired, error, ...props }: Props<Option, IsMulti, Group>) => JSX.Element;
 export default SelectBox;