npm - @helsenorge/designsystem-react - Versions diffs - 13.4.0 → 14.0.0-beta.0 - Mend

@helsenorge/designsystem-react 13.4.0 → 14.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2568) hide show

package/lib/TabList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabList.js","names":["Tab: React.FC<TabProps>","TabItem: React.FC<TabItemProps>","TabChevron: React.FC<TabChevronProps>","TabList: React.FC<TabListProps>"],"sources":["../src/components/Tabs/Tab.tsx","../src/components/Tabs/TabList/TabItem.tsx","../src/components/Tabs/TabList/TabChevron.tsx","../src/components/Tabs/TabList/TabList.tsx","../src/components/Tabs/TabList/index.ts"],"sourcesContent":["import React from 'react';\n\nimport { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\n\nexport interface TabProps {\n /** Sets the tab panel content /\n children?: React.ReactNode;\n /* Optional icon on the tab /\n icon?: SvgIcon \| IconName;\n /* Called when tab is selected /\n onTabClick?: (index: number) => void;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Title on the tab /\n title?: string;\n}\n\nconst Tab: React.FC<TabProps> = props => {\n return <>{props.children ?? null}</>;\n};\n\nexport default Tab;\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { palette } from '../../../theme/palette';\nimport Icon, { IconSize } from '../../Icon';\nimport { IconName } from '../../Icons/IconNames';\nimport LazyIcon from '../../LazyIcon';\nimport { TabProps } from '../Tab';\nimport { TabsColors } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabItemProps {\n tabProps: TabProps;\n index: number;\n color: TabsColors;\n selectedTab: number;\n tabRefs: React.MutableRefObject<React.RefObject<HTMLButtonElement>[] \| null \| undefined>;\n tabListVisible: boolean;\n onTabListClick: (index: number) => void;\n}\n\nconst TabItem: React.FC<TabItemProps> = props => {\n const isSelected = props.index === props.selectedTab;\n const { title, onTabClick, icon, testId } = props.tabProps;\n const handleClick = (): void => {\n if (onTabClick) onTabClick(props.index);\n props.onTabListClick(props.index);\n scrollToTab(props.index);\n };\n const tabButtonClasses = classNames(styles['tab-list__tab'], styles[`tab-list__tab--${props.color}`], {\n [styles['tab-list__tab--selected']]: isSelected,\n [styles['tab-list__tab--not-selected']]: !isSelected,\n });\n\n const currentRef = props.tabRefs.current && props.tabRefs.current[props.index];\n\n const scrollToTab = (index: number): void => {\n const currentRef = props.tabRefs.current && props.tabRefs.current[index];\n\n if (currentRef?.current?.scrollIntoView) {\n currentRef?.current?.scrollIntoView({ behavior: 'smooth', inline: 'nearest', block: 'nearest' });\n }\n };\n\n const itemRef = useRef<HTMLLIElement>(null);\n\n useEffect(() => {\n if (isSelected && props.tabListVisible) {\n scrollToTab(props.index);\n }\n }, [isSelected]);\n\n return (\n <li role=\"presentation\" ref={itemRef}>\n <button\n role=\"tab\"\n aria-selected={isSelected}\n onClick={handleClick}\n className={tabButtonClasses}\n data-testid={testId}\n ref={currentRef as React.RefObject<HTMLButtonElement>}\n >\n <span className={styles['tab-list__tab__title-and-icon']}>\n {icon &&\n (typeof icon === 'string' ? (\n <LazyIcon\n iconName={icon as IconName}\n size={IconSize.XSmall}\n color={isSelected ? palette[`black`] : palette['blueberry500']}\n />\n ) : (\n <Icon svgIcon={icon} size={IconSize.XSmall} color={isSelected ? palette[`black`] : palette['blueberry500']} />\n ))}\n {title}\n </span>\n </button>\n </li>\n );\n};\n\nexport default TabItem;\n","import React from 'react';\n\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport Icon, { IconSize } from '../../Icon';\nimport ChevronLeft from '../../Icons/ChevronLeft';\nimport ChevronRight from '../../Icons/ChevronRight';\n\nimport styles from './styles.module.scss';\n\ninterface TabChevronProps {\n direction: 'left' \| 'right';\n onClick: () => void;\n backgroundColor?: string;\n ariaLabel?: string;\n}\n\nconst TabChevron: React.FC<TabChevronProps> = ({ direction, onClick, backgroundColor, ariaLabel }) => {\n const buttonRef = React.useRef<HTMLButtonElement>(null);\n const { isHovered } = usePseudoClasses<HTMLButtonElement>(buttonRef);\n\n return (\n <button\n type=\"button\"\n ref={buttonRef}\n className={styles['tab-list__button']}\n onClick={onClick}\n aria-label={ariaLabel}\n style={{ backgroundColor: backgroundColor }}\n >\n {direction === 'left' ? (\n <Icon color={'var(--color-action-graphics-onlight)'} isHovered={isHovered} svgIcon={ChevronLeft} size={IconSize.XSmall} />\n ) : (\n <Icon color={'var(--color-action-graphics-onlight)'} isHovered={isHovered} svgIcon={ChevronRight} size={IconSize.XSmall} />\n )}\n </button>\n );\n};\n\nexport default TabChevron;\n","import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport TabItem from './TabItem';\nimport { useIsVisible } from '../../../hooks/useIsVisible';\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { isComponent } from '../../../utils/component';\nimport Tab, { TabProps } from '../Tab';\nimport { TabsColors, TabsOnColor } from '../Tabs';\nimport TabChevron from './TabChevron';\n\nimport styles from './styles.module.scss';\ninterface TabListProps {\n children: React.ReactNode;\n onTabListClick: (index: number) => void;\n selectedTab: number;\n color: TabsColors;\n onColor: TabsOnColor;\n ariaLabelRightButton?: string;\n ariaLabelLeftButton?: string;\n}\n\nconst TabList: React.FC<TabListProps> = props => {\n const { selectedTab, onTabListClick, children, color, onColor, ariaLabelLeftButton, ariaLabelRightButton } = props;\n\n const listRef = useRef<HTMLUListElement>(null);\n\n const tabRefs = useRef(React.Children.map(children, () => React.createRef<HTMLButtonElement>()) \|\| []);\n useRovingFocus(onTabListClick, tabRefs, listRef, true);\n\n const tablistClasses = classNames(styles['tab-list'], styles[`tab-list--${onColor}`]);\n\n const getBackgroundColor = (onColor: TabsOnColor): string => {\n switch (onColor) {\n case 'onwhite':\n return 'var(--color-base-background-white)';\n case 'onblueberry':\n return 'var(--color-base-background-blueberry)';\n case 'onneutral':\n return 'var(--color-base-background-neutral)';\n }\n };\n const firstTab = tabRefs.current && tabRefs.current[0];\n const lastTab = tabRefs.current && tabRefs.current[tabRefs.current.length - 1];\n\n const firstTabVisible = useIsVisible(firstTab);\n const lastTabVisible = useIsVisible(lastTab);\n const tabListVisible = useIsVisible(listRef);\n\n const shouldShowFadeStart = (): boolean => {\n return !firstTabVisible;\n };\n\n const shouldShowFadeEnd = (): boolean => {\n return !lastTabVisible;\n };\n\n const scrollInList = (direction: string): void => {\n if (listRef.current) {\n const listWidth = listRef.current.clientWidth;\n const listScrollLeft = listRef.current.scrollLeft;\n const maxScrollLeft = listRef.current.scrollWidth - listWidth;\n\n if (direction === 'right' && !lastTabVisible) {\n const scrollAmount = Math.min(listWidth / 2, maxScrollLeft - listScrollLeft);\n listRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n } else if (direction === 'left' && !firstTabVisible) {\n const scrollAmount = -Math.min(listWidth / 2, listScrollLeft);\n listRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n }\n }\n };\n\n return (\n <div className={styles['tab-list-wrapper']}>\n {shouldShowFadeStart() && (\n <div className={classNames(styles['tab-list__start-wrapper'])}>\n <TabChevron\n onClick={() => scrollInList('left')}\n direction=\"left\"\n backgroundColor={`${getBackgroundColor(onColor)}`}\n ariaLabel={ariaLabelLeftButton}\n />\n <div\n className={classNames(styles['tab-list__fade-start'])}\n style={{\n backgroundColor: `${getBackgroundColor(onColor)}`,\n }}\n ></div>\n </div>\n )}\n <ul className={tablistClasses} ref={listRef} role=\"tablist\" aria-orientation=\"horizontal\">\n {React.Children.map(children, (child, index) => {\n if (isComponent<TabProps>(child, Tab)) {\n return (\n <TabItem\n tabRefs={tabRefs}\n tabListVisible={tabListVisible}\n key={child.props.title}\n index={index}\n selectedTab={selectedTab}\n onTabListClick={onTabListClick}\n tabProps={child.props}\n color={color}\n />\n );\n }\n return null;\n })}\n </ul>\n {shouldShowFadeEnd() && (\n <div className={classNames(styles['tab-list__end-wrapper'])}>\n <div\n className={classNames(styles['tab-list__fade-end'])}\n style={{\n backgroundColor: `${getBackgroundColor(onColor)}`,\n }}\n ></div>\n <TabChevron\n onClick={() => scrollInList('right')}\n direction=\"right\"\n backgroundColor={`${getBackgroundColor(onColor)}`}\n ariaLabel={ariaLabelRightButton}\n />\n </div>\n )}\n <div className={classNames(styles['tab-list__border'])}></div>\n </div>\n );\n};\n\nexport default TabList;\n","import TabList from './TabList';\nexport from './TabList';\nexport default TabList;\n"],"mappings":"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"}
1	+ {"version":3,"file":"TabList.js","names":["Tab: React.FC<TabProps>","TabChevron: React.FC<TabChevronProps>","TabItem: React.FC<TabItemProps>","TabList: React.FC<TabListProps>"],"sources":["../src/components/Tabs/Tab.tsx","../src/components/Tabs/TabList/TabChevron.tsx","../src/components/Tabs/TabList/TabItem.tsx","../src/components/Tabs/TabList/TabList.tsx","../src/components/Tabs/TabList/index.ts"],"sourcesContent":["import type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nexport interface TabProps {\n /** Sets the tab panel content /\n children?: React.ReactNode;\n /* Optional icon on the tab /\n icon?: SvgIcon \| IconName;\n /* Called when tab is selected /\n onTabClick?: (index: number) => void;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Title on the tab /\n title?: string;\n}\n\nconst Tab: React.FC<TabProps> = props => {\n return <>{props.children ?? null}</>;\n};\n\nexport default Tab;\n","import React from 'react';\n\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport Icon, { IconSize } from '../../Icon';\nimport ChevronLeft from '../../Icons/ChevronLeft';\nimport ChevronRight from '../../Icons/ChevronRight';\n\nimport styles from './styles.module.scss';\n\ninterface TabChevronProps {\n direction: 'left' \| 'right';\n onClick: () => void;\n backgroundColor?: string;\n ariaLabel?: string;\n}\n\nconst TabChevron: React.FC<TabChevronProps> = ({ direction, onClick, backgroundColor, ariaLabel }) => {\n const buttonRef = React.useRef<HTMLButtonElement>(null);\n const { isHovered } = usePseudoClasses<HTMLButtonElement \| null>(buttonRef);\n\n return (\n <button\n type=\"button\"\n ref={buttonRef}\n className={styles['tab-list__button']}\n onClick={onClick}\n aria-label={ariaLabel}\n style={{ backgroundColor: backgroundColor }}\n >\n {direction === 'left' ? (\n <Icon color={'var(--color-action-graphics-onlight)'} isHovered={isHovered} svgIcon={ChevronLeft} size={IconSize.XSmall} />\n ) : (\n <Icon color={'var(--color-action-graphics-onlight)'} isHovered={isHovered} svgIcon={ChevronRight} size={IconSize.XSmall} />\n )}\n </button>\n );\n};\n\nexport default TabChevron;\n","import { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { IconName } from '../../Icons/IconNames';\nimport type { TabProps } from '../Tab';\nimport type { TabsColors } from '../Tabs';\n\nimport { palette } from '../../../theme/palette';\nimport Icon, { IconSize } from '../../Icon';\nimport LazyIcon from '../../LazyIcon';\n\nimport styles from './styles.module.scss';\n\ninterface TabItemProps {\n tabProps: TabProps;\n index: number;\n color: TabsColors;\n selectedTab: number;\n tabRefs: React.RefObject<React.RefObject<HTMLButtonElement \| null>[] \| null \| undefined>;\n tabListVisible: boolean;\n onTabListClick: (index: number) => void;\n}\n\nconst TabItem: React.FC<TabItemProps> = props => {\n const isSelected = props.index === props.selectedTab;\n const { title, onTabClick, icon, testId } = props.tabProps;\n const handleClick = (): void => {\n if (onTabClick) onTabClick(props.index);\n props.onTabListClick(props.index);\n scrollToTab(props.index);\n };\n const tabButtonClasses = classNames(styles['tab-list__tab'], styles[`tab-list__tab--${props.color}`], {\n [styles['tab-list__tab--selected']]: isSelected,\n [styles['tab-list__tab--not-selected']]: !isSelected,\n });\n\n const currentRef = props.tabRefs.current && props.tabRefs.current[props.index];\n\n const scrollToTab = (index: number): void => {\n const currentRef = props.tabRefs.current && props.tabRefs.current[index];\n\n if (currentRef?.current?.scrollIntoView) {\n currentRef?.current?.scrollIntoView({ behavior: 'smooth', inline: 'nearest', block: 'nearest' });\n }\n };\n\n const itemRef = useRef<HTMLLIElement>(null);\n\n useEffect(() => {\n if (isSelected && props.tabListVisible) {\n scrollToTab(props.index);\n }\n }, [isSelected]);\n\n return (\n <li role=\"presentation\" ref={itemRef}>\n <button\n role=\"tab\"\n aria-selected={isSelected}\n onClick={handleClick}\n className={tabButtonClasses}\n data-testid={testId}\n ref={currentRef as React.RefObject<HTMLButtonElement>}\n >\n <span className={styles['tab-list__tab__title-and-icon']}>\n {icon &&\n (typeof icon === 'string' ? (\n <LazyIcon\n iconName={icon as IconName}\n size={IconSize.XSmall}\n color={isSelected ? palette[`black`] : palette['blueberry500']}\n />\n ) : (\n <Icon svgIcon={icon} size={IconSize.XSmall} color={isSelected ? palette[`black`] : palette['blueberry500']} />\n ))}\n {title}\n </span>\n </button>\n </li>\n );\n};\n\nexport default TabItem;\n","import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { TabProps } from '../Tab';\nimport type { TabsColors, TabsOnColor } from '../Tabs';\n\nimport TabChevron from './TabChevron';\nimport TabItem from './TabItem';\nimport { useIsVisible } from '../../../hooks/useIsVisible';\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { isComponent } from '../../../utils/component';\nimport Tab from '../Tab';\n\nimport styles from './styles.module.scss';\ninterface TabListProps {\n children: React.ReactNode;\n onTabListClick: (index: number) => void;\n selectedTab: number;\n color: TabsColors;\n onColor: TabsOnColor;\n ariaLabelRightButton?: string;\n ariaLabelLeftButton?: string;\n}\n\nconst TabList: React.FC<TabListProps> = props => {\n const { selectedTab, onTabListClick, children, color, onColor, ariaLabelLeftButton, ariaLabelRightButton } = props;\n\n const listRef = useRef<HTMLUListElement>(null);\n\n const tabRefs = useRef(React.Children.map(children, () => React.createRef<HTMLButtonElement>()) \|\| []);\n useRovingFocus(onTabListClick, tabRefs, listRef, true);\n\n const tablistClasses = classNames(styles['tab-list'], styles[`tab-list--${onColor}`]);\n\n const getBackgroundColor = (onColor: TabsOnColor): string => {\n switch (onColor) {\n case 'onwhite':\n return 'var(--color-base-background-white)';\n case 'onblueberry':\n return 'var(--color-base-background-blueberry)';\n case 'onneutral':\n return 'var(--color-base-background-neutral)';\n }\n };\n const firstTab = tabRefs.current && tabRefs.current[0];\n const lastTab = tabRefs.current && tabRefs.current[tabRefs.current.length - 1];\n\n const firstTabVisible = useIsVisible(firstTab);\n const lastTabVisible = useIsVisible(lastTab);\n const tabListVisible = useIsVisible(listRef);\n\n const shouldShowFadeStart = (): boolean => {\n return !firstTabVisible;\n };\n\n const shouldShowFadeEnd = (): boolean => {\n return !lastTabVisible;\n };\n\n const scrollInList = (direction: string): void => {\n if (listRef.current) {\n const listWidth = listRef.current.clientWidth;\n const listScrollLeft = listRef.current.scrollLeft;\n const maxScrollLeft = listRef.current.scrollWidth - listWidth;\n\n if (direction === 'right' && !lastTabVisible) {\n const scrollAmount = Math.min(listWidth / 2, maxScrollLeft - listScrollLeft);\n listRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n } else if (direction === 'left' && !firstTabVisible) {\n const scrollAmount = -Math.min(listWidth / 2, listScrollLeft);\n listRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n }\n }\n };\n\n return (\n <div className={styles['tab-list-wrapper']}>\n {shouldShowFadeStart() && (\n <div className={classNames(styles['tab-list__start-wrapper'])}>\n <TabChevron\n onClick={() => scrollInList('left')}\n direction=\"left\"\n backgroundColor={`${getBackgroundColor(onColor)}`}\n ariaLabel={ariaLabelLeftButton}\n />\n <div\n className={classNames(styles['tab-list__fade-start'])}\n style={{\n backgroundColor: `${getBackgroundColor(onColor)}`,\n }}\n ></div>\n </div>\n )}\n <ul className={tablistClasses} ref={listRef} role=\"tablist\" aria-orientation=\"horizontal\">\n {React.Children.map(children, (child, index) => {\n if (isComponent<TabProps>(child, Tab)) {\n return (\n <TabItem\n tabRefs={tabRefs}\n tabListVisible={tabListVisible}\n key={child.props.title}\n index={index}\n selectedTab={selectedTab}\n onTabListClick={onTabListClick}\n tabProps={child.props}\n color={color}\n />\n );\n }\n return null;\n })}\n </ul>\n {shouldShowFadeEnd() && (\n <div className={classNames(styles['tab-list__end-wrapper'])}>\n <div\n className={classNames(styles['tab-list__fade-end'])}\n style={{\n backgroundColor: `${getBackgroundColor(onColor)}`,\n }}\n ></div>\n <TabChevron\n onClick={() => scrollInList('right')}\n direction=\"right\"\n backgroundColor={`${getBackgroundColor(onColor)}`}\n ariaLabel={ariaLabelRightButton}\n />\n </div>\n )}\n <div className={classNames(styles['tab-list__border'])}></div>\n </div>\n );\n};\n\nexport default TabList;\n","import TabList from './TabList';\nexport from './TabList';\nexport default TabList;\n"],"mappings":";;;;;;;;;;;;;;AAgBA,IAAMA,OAA0B,UAAS;AACvC,QAAO,oBAAA,UAAA,EAAA,UAAG,MAAM,YAAY,MAAA,CAAQ;;AAGtC,IAAA,cAAe;ACJf,IAAMC,cAAyC,EAAE,WAAW,SAAS,iBAAiB,gBAAgB;CACpG,MAAM,YAAY,MAAM,OAA0B,KAAK;CACvD,MAAM,EAAE,cAAc,iBAA2C,UAAU;AAE3E,QACE,oBAAC,UAAA;EACC,MAAK;EACL,KAAK;EACL,WAAW,OAAO;EACT;EACT,cAAY;EACZ,OAAO,EAAmB,iBAAiB;YAE1C,cAAc,SACb,oBAAC,cAAA;GAAK,OAAO;GAAmD;GAAW,SAAS;GAAa,MAAM,SAAS;IAAU,GAE1H,oBAAC,cAAA;GAAK,OAAO;GAAmD;GAAW,SAAS;GAAc,MAAM,SAAS;IAAU;GAEtH;;AAIb,IAAA,qBAAe;ACdf,IAAMC,WAAkC,UAAS;CAC/C,MAAM,aAAa,MAAM,UAAU,MAAM;CACzC,MAAM,EAAE,OAAO,YAAY,MAAM,WAAW,MAAM;CAClD,MAAM,oBAA0B;AAC9B,MAAI,WAAY,YAAW,MAAM,MAAM;AACvC,QAAM,eAAe,MAAM,MAAM;AACjC,cAAY,MAAM,MAAM;;CAE1B,MAAM,mBAAmB,GAAW,OAAO,kBAAkB,OAAO,kBAAkB,MAAM,UAAU;GACnG,OAAO,6BAA6B;GACpC,OAAO,iCAAiC,CAAC;EAC3C,CAAC;CAEF,MAAM,aAAa,MAAM,QAAQ,WAAW,MAAM,QAAQ,QAAQ,MAAM;CAExE,MAAM,eAAe,UAAwB;EAC3C,MAAM,eAAa,MAAM,QAAQ,WAAW,MAAM,QAAQ,QAAQ;AAElE,MAAI,cAAY,SAAS,eACvB,eAAY,SAAS,eAAe;GAAE,UAAU;GAAU,QAAQ;GAAW,OAAO;GAAW,CAAC;;CAIpG,MAAM,UAAU,OAAsB,KAAK;AAE3C,iBAAgB;AACd,MAAI,cAAc,MAAM,eACtB,aAAY,MAAM,MAAM;IAEzB,CAAC,WAAW,CAAC;AAEhB,QACE,oBAAC,MAAA;EAAG,MAAK;EAAe,KAAK;YAC3B,oBAAC,UAAA;GACC,MAAK;GACL,iBAAe;GACf,SAAS;GACT,WAAW;GACX,eAAa;GACb,KAAK;aAEL,qBAAC,QAAA;IAAK,WAAW,OAAO;eACrB,SACE,OAAO,SAAS,WACf,oBAAC,kBAAA;KACC,UAAU;KACV,MAAM,SAAS;KACf,OAAO,aAAa,QAAQ,WAAW,QAAQ;MAC/C,GAEF,oBAAC,cAAA;KAAK,SAAS;KAAM,MAAM,SAAS;KAAQ,OAAO,aAAa,QAAQ,WAAW,QAAQ;MAAmB,GAEjH,MAAA;KACI;IACA;GACN;;AAIT,IAAA,kBAAe;AC1Df,IAAMC,WAAkC,UAAS;CAC/C,MAAM,EAAE,aAAa,gBAAgB,UAAU,OAAO,SAAS,qBAAqB,yBAAyB;CAE7G,MAAM,UAAU,OAAyB,KAAK;CAE9C,MAAM,UAAU,OAAO,MAAM,SAAS,IAAI,gBAAgB,MAAM,WAA8B,CAAC,IAAI,EAAE,CAAC;AACtG,gBAAe,gBAAgB,SAAS,SAAS,KAAK;CAEtD,MAAM,iBAAiB,GAAW,OAAO,aAAa,OAAO,aAAa,WAAW;CAErF,MAAM,sBAAsB,cAAiC;AAC3D,UAAQ,WAAR;GACE,KAAK,UACH,QAAO;GACT,KAAK,cACH,QAAO;GACT,KAAK,YACH,QAAO;;;CAGb,MAAM,WAAW,QAAQ,WAAW,QAAQ,QAAQ;CACpD,MAAM,UAAU,QAAQ,WAAW,QAAQ,QAAQ,QAAQ,QAAQ,SAAS;CAE5E,MAAM,kBAAkB,aAAa,SAAS;CAC9C,MAAM,iBAAiB,aAAa,QAAQ;CAC5C,MAAM,iBAAiB,aAAa,QAAQ;CAE5C,MAAM,4BAAqC;AACzC,SAAO,CAAC;;CAGV,MAAM,0BAAmC;AACvC,SAAO,CAAC;;CAGV,MAAM,gBAAgB,cAA4B;AAChD,MAAI,QAAQ,SAAS;GACnB,MAAM,YAAY,QAAQ,QAAQ;GAClC,MAAM,iBAAiB,QAAQ,QAAQ;GACvC,MAAM,gBAAgB,QAAQ,QAAQ,cAAc;AAEpD,OAAI,cAAc,WAAW,CAAC,gBAAgB;IAC5C,MAAM,eAAe,KAAK,IAAI,YAAY,GAAG,gBAAgB,eAAe;AAC5E,YAAQ,QAAQ,SAAS;KAAE,MAAM;KAAc,UAAU;KAAU,CAAC;cAC3D,cAAc,UAAU,CAAC,iBAAiB;IACnD,MAAM,eAAe,CAAC,KAAK,IAAI,YAAY,GAAG,eAAe;AAC7D,YAAQ,QAAQ,SAAS;KAAE,MAAM;KAAc,UAAU;KAAU,CAAC;;;;AAK1E,QACE,qBAAC,OAAA;EAAI,WAAW,OAAO;;GACpB,qBAAqB,IACpB,qBAAC,OAAA;IAAI,WAAW,GAAW,OAAO,2BAA2B;eAC3D,oBAAC,oBAAA;KACC,eAAe,aAAa,OAAO;KACnC,WAAU;KACV,iBAAiB,GAAG,mBAAmB,QAAQ;KAC/C,WAAW;MACX,EACF,oBAAC,OAAA;KACC,WAAW,GAAW,OAAO,wBAAwB;KACrD,OAAO,EACL,iBAAiB,GAAG,mBAAmB,QAAQ,IAChD;MACI,CAAA;KACH;GAER,oBAAC,MAAA;IAAG,WAAW;IAAgB,KAAK;IAAS,MAAK;IAAU,oBAAiB;cAC1E,MAAM,SAAS,IAAI,WAAW,OAAO,UAAU;AAC9C,SAAI,YAAsB,OAAO,YAAI,CACnC,QACE,oBAAC,iBAAA;MACU;MACO;MAET;MACM;MACG;MAChB,UAAU,MAAM;MACT;QALF,MAAM,MAAM,MAMjB;AAGN,YAAO;MACP;KACC;GACJ,mBAAmB,IAClB,qBAAC,OAAA;IAAI,WAAW,GAAW,OAAO,yBAAyB;eACzD,oBAAC,OAAA;KACC,WAAW,GAAW,OAAO,sBAAsB;KACnD,OAAO,EACL,iBAAiB,GAAG,mBAAmB,QAAQ,IAChD;MACI,EACP,oBAAC,oBAAA;KACC,eAAe,aAAa,QAAQ;KACpC,WAAU;KACV,iBAAiB,GAAG,mBAAmB,QAAQ;KAC/C,WAAW;MACX,CAAA;KACE;GAER,oBAAC,OAAA,EAAI,WAAW,GAAW,OAAO,oBAAoB,EAAA,CAAQ;;GAC1D;;AChIV,IAAA,oBDoIe"}

package/lib/TabPanel.js CHANGED Viewed

@@ -1,16 +1,15 @@
-import React, { forwardRef } from "react";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/Tabs/TabPanel/styles.module.scss";
-var TabPanel = forwardRef((props, ref) => {
-	const { children, color = "white", isFirst = false, style } = props;
+var TabPanel = (props) => {
+	const { children, color = "white", isFirst = false, style, ref } = props;
 	return /* @__PURE__ */ jsx("div", {
 		ref,
-		className: classNames(styles["tab-panel"], styles[`tab-panel--${color}`], { [styles["tab-panel--first"]]: isFirst }),
+		className: cn(styles["tab-panel"], styles[`tab-panel--${color}`], { [styles["tab-panel--first"]]: isFirst }),
 		style,
 		children: /* @__PURE__ */ jsx("div", { children })
 	});
-});
+};
 TabPanel.displayName = "TabPanel";
 var TabPanel_default$1 = TabPanel;
 export { TabPanel_default$1 as t };

package/lib/TabPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabPanel.js","names":[],"sources":["../src/components/Tabs/TabPanel/TabPanel.tsx","../src/components/Tabs/TabPanel/index.ts"],"sourcesContent":["import ~~React, { forwardRef } from 'react';\n\nimport~~ classNames from 'classnames';\n\nimport { TabsColors } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabPanelProps {\n children?: React.ReactNode;\n color?: TabsColors;\n isFirst?: boolean;\n style?: React.CSSProperties;\n}\n\nconst TabPanel ~~= forwardRef~~<~~HTMLDivElement,~~ TabPanelProps>((props, ~~ref)~~ => {\n const { children, color = 'white', isFirst = false, style } = props;\n\n const tabPanelClasses = classNames(styles['tab-panel'], styles[`tab-panel--${color}`], {\n [styles['tab-panel--first']]: isFirst,\n });\n\n return (\n <div ref={ref} className={tabPanelClasses} style={style}>\n <div>{children}</div>\n </div>\n );\n});\n\nTabPanel.displayName = 'TabPanel';\nexport default TabPanel;\n","import TabPanel from './TabPanel';\nexport * from './TabPanel';\nexport default TabPanel;\n"],"mappings":"~~;;;;~~AAeA,~~IAAM~~,~~WAAW~~,~~YAA2C,OAAO,QAAQ~~;~~CACzE~~,MAAM,EAAE,UAAU,QAAQ,SAAS,UAAU,OAAO,~~UAAU~~;~~AAM9D~~,QACE,oBAAC,OAAA;EAAS;EAAK,WALO,~~WAAW~~,OAAO,cAAc,OAAO,cAAc,UAAU,GACpF,OAAO,sBAAsB,SAC/B,CAAC;EAGkD;YAChD,oBAAC,OAAA,EAAK,UAAA,CAAe;GACjB~~;EAER;AAEF~~,SAAS,cAAc;AC3BvB,IAAA,qBD4Be"}
1	+ {"version":3,"file":"TabPanel.js","names":["TabPanel: React.FC<TabPanelProps>"],"sources":["../src/components/Tabs/TabPanel/TabPanel.tsx","../src/components/Tabs/TabPanel/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { TabsColors } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabPanelProps {\n children?: React.ReactNode;\n color?: TabsColors;\n isFirst?: boolean;\n style?: React.CSSProperties;\n /** Ref passed to the component /\n ref?: React.Ref<HTMLDivElement \| null>;\n}\n\nconst TabPanel: React.FC<TabPanelProps> = props => {\n const { children, color = 'white', isFirst = false, style, ref } = props;\n\n const tabPanelClasses = classNames(styles['tab-panel'], styles[`tab-panel--${color}`], {\n [styles['tab-panel--first']]: isFirst,\n });\n\n return (\n <div ref={ref} className={tabPanelClasses} style={style}>\n <div>{children}</div>\n </div>\n );\n};\n\nTabPanel.displayName = 'TabPanel';\nexport default TabPanel;\n","import TabPanel from './TabPanel';\nexport from './TabPanel';\nexport default TabPanel;\n"],"mappings":";;;AAeA,IAAMA,YAAoC,UAAS;CACjD,MAAM,EAAE,UAAU,QAAQ,SAAS,UAAU,OAAO,OAAO,QAAQ;AAMnE,QACE,oBAAC,OAAA;EAAS;EAAK,WALO,GAAW,OAAO,cAAc,OAAO,cAAc,UAAU,GACpF,OAAO,sBAAsB,SAC/B,CAAC;EAGkD;YAChD,oBAAC,OAAA,EAAK,UAAA,CAAe;GACjB;;AAIV,SAAS,cAAc;AC3BvB,IAAA,qBD4Be"}

package/lib/TableBody.js CHANGED Viewed

@@ -1,13 +1,13 @@
-import { t as ModeType } from "./Table.js";
-import React from "react";
-import classNames from "classnames";
+import { n as ModeType } from "./constants4.js";
+import { i as mapChildrenWithMode } from "./utils5.js";
+import cn from "classnames";
 import { jsx } from "react/jsx-runtime";
 import tableStyles from "./components/Table/styles.module.scss";
 const TableBody = ({ className, children, mode = ModeType.normal, ...rest }) => {
 	return /* @__PURE__ */ jsx("tbody", {
-		className: classNames(tableStyles["table-body"], className),
+		className: cn(tableStyles["table-body"], className),
 		...rest,
-		children: React.Children.map(children, (child) => React.isValidElement(child) && React.cloneElement(child, { mode }))
+		children: mapChildrenWithMode(children, mode)
 	});
 };
 var TableBody_default$1 = TableBody;

package/lib/TableBody.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableBody.js","names":["TableBody: React.FC<Props>"],"sources":["../src/components/Table/TableBody/TableBody.tsx","../src/components/Table/TableBody/index.ts"],"sourcesContent":["import ~~React~~ from '~~react~~';\n\nimport ~~classNames~~ from '~~classnames~~';\n\nimport tableStyles from '../styles.module.scss';\nimport { ~~ModeType~~ } from '../~~Table~~';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tbody'>, 'style'> {\n /** Adds custom classes to the element. /\n className?: string;\n /* Sets the content of the table body. Use TableRows /\n children?: React.ReactNode;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n}\n\nexport const TableBody: React.FC<Props> = ({ className, children, mode = ModeType.normal, ...rest }) => {\n const tableBodyClasses = classNames(tableStyles['table-body'], className);\n return (\n <tbody className={tableBodyClasses} {...rest}>\n {~~React.Children.map~~(children, ~~child => React.isValidElement<{~~ mode~~?: ModeType }>(child~~) ~~&& React.cloneElement(child, { mode~~ }~~))}~~\n </tbody>\n );\n};\n\nexport default TableBody;\n","import TableBody from './TableBody';\nexport from './TableBody';\nexport default TableBody;\n"],"mappings":";;;;;~~AAgBA~~,MAAaA,aAA8B,EAAE,WAAW,UAAU,OAAO,SAAS,QAAQ,GAAG,WAAW;AAEtG,QACE,oBAAC,SAAA;EAAM,WAFgB,~~WAAW~~,YAAY,eAAe,UAAU;EAEnC,GAAI;YACrC,~~MAAM~~,~~SAAS~~,~~IAAI,WAAU,UAAS,MAAM,eAAoC,MAAM,IAAI,MAAM,aAAa,OAAO,EAAE,MAAM,CAAC,CAAC~~;~~GACzH~~;;~~ACnBZ~~,IAAA,~~sBDuBe~~"}
1	+ {"version":3,"file":"TableBody.js","names":["TableBody: React.FC<Props>"],"sources":["../src/components/Table/TableBody/TableBody.tsx","../src/components/Table/TableBody/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\nimport { mapChildrenWithMode } from '../utils';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tbody'>, 'style'> {\n /** Adds custom classes to the element. /\n className?: string;\n /* Sets the content of the table body. Use TableRows /\n children?: React.ReactNode;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n}\n\nexport const TableBody: React.FC<Props> = ({ className, children, mode = ModeType.normal, ...rest }) => {\n const tableBodyClasses = classNames(tableStyles['table-body'], className);\n return (\n <tbody className={tableBodyClasses} {...rest}>\n {mapChildrenWithMode(children, mode)}\n </tbody>\n );\n};\n\nexport default TableBody;\n","import TableBody from './TableBody';\nexport from './TableBody';\nexport default TableBody;\n"],"mappings":";;;;;AAeA,MAAaA,aAA8B,EAAE,WAAW,UAAU,OAAO,SAAS,QAAQ,GAAG,WAAW;AAEtG,QACE,oBAAC,SAAA;EAAM,WAFgB,GAAW,YAAY,eAAe,UAAU;EAEnC,GAAI;YACrC,oBAAoB,UAAU,KAAK;GAC9B;;AClBZ,IAAA,sBDsBe"}

package/lib/TableCell.js CHANGED Viewed

@@ -1,17 +1,10 @@
-import { t as ModeType } from "./Table.js";
-import React from "react";
-import classNames from "classnames";
+import { a as TextAlign, n as ModeType } from "./constants4.js";
+import cn from "classnames";
 import { jsx } from "react/jsx-runtime";
 import tableStyles from "./components/Table/styles.module.scss";
-let TextAlign = /* @__PURE__ */ function(TextAlign$1) {
-	TextAlign$1["left"] = "left";
-	TextAlign$1["center"] = "center";
-	TextAlign$1["right"] = "right";
-	return TextAlign$1;
-}({});
 const TableCell = ({ nowrap = false, textAlign = TextAlign.left, dataLabel, children, className, testId, mode = ModeType.normal, ...rest }) => {
 	return /* @__PURE__ */ jsx("td", {
-		className: classNames(tableStyles["table__cell"], { [tableStyles["table__cell--compact"]]: mode === ModeType.compact }, { [tableStyles["table__cell--nowrap"]]: nowrap }, { [tableStyles["table__cell--center"]]: textAlign === "center" }, { [tableStyles["table__cell--right"]]: textAlign === "right" }, className),
+		className: cn(tableStyles["table__cell"], { [tableStyles["table__cell--compact"]]: mode === ModeType.compact }, { [tableStyles["table__cell--nowrap"]]: nowrap }, { [tableStyles["table__cell--center"]]: textAlign === "center" }, { [tableStyles["table__cell--right"]]: textAlign === "right" }, className),
 		"data-label": dataLabel,
 		"data-testid": testId,
 		...rest,
@@ -19,6 +12,6 @@ const TableCell = ({ nowrap = false, textAlign = TextAlign.left, dataLabel, chil
 	});
 };
 var TableCell_default$1 = TableCell;
-export { TableCell as n, TextAlign as r, TableCell_default$1 as t };
+export { TableCell as n, TableCell_default$1 as t };
 //# sourceMappingURL=TableCell.js.map

package/lib/TableCell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableCell.js","names":["TableCell: React.FC<Props>"],"sources":["../src/components/Table/TableCell/TableCell.tsx","../src/components/Table/TableCell/index.ts"],"sourcesContent":["import ~~React~~ from '~~react~~';\n\nimport ~~classNames~~ from '~~classnames~~';\n\nimport tableStyles from '../styles.module.scss';\~~nimport { ModeType } from '../Table';\~~n\nexport ~~enum TextAlign {\n left = 'left',\n center = 'center',\n right = 'right',\n}\n\nexport~~ interface Props extends Omit<React.ComponentPropsWithoutRef<'td'>, 'style'> {\n /** Label used for small viewport block /\n dataLabel?: string;\n /* text align in cell /\n textAlign?: TextAlign;\n /* nowrap for white space /\n nowrap?: boolean;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the content of the table cell /\n children?: React.ReactNode;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n /* For test purposes /\n testId?: string;\n}\n\nexport const TableCell: React.FC<Props> = ({\n nowrap = false,\n textAlign = TextAlign.left,\n dataLabel,\n children,\n className,\n testId,\n mode = ModeType.normal,\n ...rest\n}) => {\n const tableCellClass = classNames(\n tableStyles['table__cell'],\n { [tableStyles['table__cell--compact']]: mode === ModeType.compact },\n { [tableStyles['table__cell--nowrap']]: nowrap },\n { [tableStyles['table__cell--center']]: textAlign === 'center' },\n { [tableStyles['table__cell--right']]: textAlign === 'right' },\n className\n );\n\n return (\n <td className={tableCellClass} data-label={dataLabel} data-testid={testId} {...rest}>\n {children}\n </td>\n );\n};\n\nexport default TableCell;\n","import TableCell from './TableCell';\nexport from './TableCell';\nexport default TableCell;\n"],"mappings":"~~;;;;;AAOA~~,~~IAAY,YAAA,yBAAA,aAAL;AACL,aAAA,UAAA;AACA,aAAA,YAAA;AACA,aAAA,WAAA;;;AAoBF,~~MAAaA,aAA8B,EACzC,SAAS,OACT,YAAY,UAAU,MACtB,WACA,UACA,WACA,QACA,OAAO,SAAS,QAChB,GAAG,WACC;AAUJ,QACE,oBAAC,MAAA;EAAG,WAViB,~~WACrB~~,YAAY,gBACZ,GAAG,YAAY,0BAA0B,SAAS,SAAS,SAAS,EACpE,GAAG,YAAY,yBAAyB,QAAQ,EAChD,GAAG,YAAY,yBAAyB,cAAc,UAAU,EAChE,GAAG,YAAY,wBAAwB,cAAc,SAAS,EAC9D,UACD;EAGgC,cAAY;EAAW,eAAa;EAAQ,GAAI;EAC5E;GACE;;~~AClDT~~,IAAA,~~sBDsDe~~"}
1	+ {"version":3,"file":"TableCell.js","names":["TableCell: React.FC<Props>"],"sources":["../src/components/Table/TableCell/TableCell.tsx","../src/components/Table/TableCell/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { ModeType, TextAlign } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'td'>, 'style'> {\n /** Label used for small viewport block /\n dataLabel?: string;\n /* text align in cell /\n textAlign?: TextAlign;\n /* nowrap for white space /\n nowrap?: boolean;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the content of the table cell /\n children?: React.ReactNode;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n /* For test purposes /\n testId?: string;\n}\n\nexport const TableCell: React.FC<Props> = ({\n nowrap = false,\n textAlign = TextAlign.left,\n dataLabel,\n children,\n className,\n testId,\n mode = ModeType.normal,\n ...rest\n}) => {\n const tableCellClass = classNames(\n tableStyles['table__cell'],\n { [tableStyles['table__cell--compact']]: mode === ModeType.compact },\n { [tableStyles['table__cell--nowrap']]: nowrap },\n { [tableStyles['table__cell--center']]: textAlign === 'center' },\n { [tableStyles['table__cell--right']]: textAlign === 'right' },\n className\n );\n\n return (\n <td className={tableCellClass} data-label={dataLabel} data-testid={testId} {...rest}>\n {children}\n </td>\n );\n};\n\nexport default TableCell;\n","import TableCell from './TableCell';\nexport from './TableCell';\nexport default TableCell;\n"],"mappings":";;;;AAsBA,MAAaA,aAA8B,EACzC,SAAS,OACT,YAAY,UAAU,MACtB,WACA,UACA,WACA,QACA,OAAO,SAAS,QAChB,GAAG,WACC;AAUJ,QACE,oBAAC,MAAA;EAAG,WAViB,GACrB,YAAY,gBACZ,GAAG,YAAY,0BAA0B,SAAS,SAAS,SAAS,EACpE,GAAG,YAAY,yBAAyB,QAAQ,EAChD,GAAG,YAAY,yBAAyB,cAAc,UAAU,EAChE,GAAG,YAAY,wBAAwB,cAAc,SAAS,EAC9D,UACD;EAGgC,cAAY;EAAW,eAAa;EAAQ,GAAI;EAC5E;GACE;;AC1CT,IAAA,sBD8Ce"}

package/lib/TableExpandedRow.js CHANGED Viewed

@@ -1,20 +1,20 @@
 import { t as Icon_default } from "./Icon.js";
 import { t as Button_default } from "./Button.js";
 import { t as ChevronUp_default } from "./ChevronUp.js";
-import { t as ModeType } from "./Table.js";
+import { n as ModeType } from "./constants4.js";
+import cn from "classnames";
 import React from "react";
-import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import tableStyles from "./components/Table/styles.module.scss";
 const TableExpandedRow = ({ numberOfColumns, expanded, hideDetailsText, toggleClick, children, className, mode = ModeType.normal, id }) => {
 	return /* @__PURE__ */ jsx("tr", {
-		className: classNames(tableStyles["table__expanded-row"], { [tableStyles["table__expanded-row--expanded"]]: expanded }, className),
+		className: cn(tableStyles["table__expanded-row"], { [tableStyles["table__expanded-row--expanded"]]: expanded }, className),
 		id,
 		children: /* @__PURE__ */ jsx("td", {
 			colSpan: numberOfColumns,
-			className: classNames(tableStyles["table__cell"], className, { [tableStyles["table__cell--compact"]]: mode === ModeType.compact }),
+			className: cn(tableStyles["table__cell"], className, { [tableStyles["table__cell--compact"]]: mode === ModeType.compact }),
 			children: /* @__PURE__ */ jsxs("div", {
-				className: classNames(tableStyles["table__expanded-row-container"]),
+				className: cn(tableStyles["table__expanded-row-container"]),
 				children: [React.Children.map(children, (child) => React.isValidElement(child) && React.cloneElement(child)), /* @__PURE__ */ jsxs(Button_default, {
 					variant: "borderless",
 					onClick: toggleClick,

package/lib/TableExpandedRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableExpandedRow.js","names":[],"sources":["../src/components/Table/TableExpandedRow/TableExpandedRow.tsx","../src/components/Table/TableExpandedRow/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport ~~tableStyles~~ from '../~~styles.module.scss~~';\nimport { ~~ModeType }~~ from '../~~Table~~';\n\nexport interface Props {\n /** Row is expanded. /\n expanded: boolean;\n /* Number of columns in table. /\n numberOfColumns: number;\n /* Text for hide button. /\n hideDetailsText: string;\n /* When hide button inside expanded row is clicked. /\n toggleClick: () => void;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the content of the expanded row. /\n children: React.ReactNode;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n /* Row id. For use with aria-controls. /\n id?: string;\n}\n\nexport const TableExpandedRow = ({\n numberOfColumns,\n expanded,\n hideDetailsText,\n toggleClick,\n children,\n className,\n mode = ModeType.normal,\n id,\n}: Props): React.JSX.Element => {\n const tableRowClass = classNames(\n tableStyles['table__expanded-row'],\n { [tableStyles['table__expanded-row--expanded']]: expanded },\n className\n );\n const tableCellClass = classNames(tableStyles['table__cell'], className, {\n [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n });\n\n const containerClass = classNames(tableStyles['table__expanded-row-container']);\n\n return (\n <tr className={tableRowClass} id={id}>\n <td colSpan={numberOfColumns} className={tableCellClass}>\n <div className={containerClass}>\n {React.Children.map(children, child => React.isValidElement(child) && React.cloneElement(child))}\n <Button variant={'borderless'} onClick={toggleClick} aria-expanded={expanded} tabIndex={expanded ? 0 : -1}>\n {hideDetailsText}\n <Icon svgIcon={ChevronUp} />\n </Button>\n </div>\n </td>\n </tr>\n );\n};\n\nexport default TableExpandedRow;\n","import TableExpandedRow from './TableExpandedRow';\nexport from './TableExpandedRow';\nexport default TableExpandedRow;\n"],"mappings":";;;;;;;;AA6BA,MAAa,oBAAoB,EAC/B,iBACA,UACA,iBACA,aACA,UACA,WACA,OAAO,SAAS,QAChB,SAC8B;AAY9B,QACE,oBAAC,MAAA;EAAG,WAZgB,~~WACpB~~,YAAY,wBACZ,GAAG,YAAY,mCAAmC,UAAU,EAC5D,UACD;EAQmC;YAChC,oBAAC,MAAA;GAAG,SAAS;GAAiB,WARX,~~WAAW~~,YAAY,gBAAgB,WAAW,GACtE,YAAY,0BAA0B,SAAS,SAAS,SAC1D,CAAC;aAOI,qBAAC,OAAA;IAAI,WALY,~~WAAW~~,YAAY,iCAAiC;eAMtE,MAAM,SAAS,IAAI,WAAU,UAAS,MAAM,eAAe,MAAM,IAAI,MAAM,aAAa,MAAM,CAAC,EAChG,qBAAC,gBAAA;KAAO,SAAS;KAAc,SAAS;KAAa,iBAAe;KAAU,UAAU,WAAW,IAAI;gBACpG,iBACD,oBAAC,cAAA,EAAK,SAAS,mBAAA,CAAa,CAAA;MACrB,CAAA;KACL;IACH;GACF;;AC3DT,IAAA,6BD+De"}
1	+ {"version":3,"file":"TableExpandedRow.js","names":[],"sources":["../src/components/Table/TableExpandedRow/TableExpandedRow.tsx","../src/components/Table/TableExpandedRow/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\nexport interface Props {\n /** Row is expanded. /\n expanded: boolean;\n /* Number of columns in table. /\n numberOfColumns: number;\n /* Text for hide button. /\n hideDetailsText: string;\n /* When hide button inside expanded row is clicked. /\n toggleClick: () => void;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the content of the expanded row. /\n children: React.ReactNode;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n /* Row id. For use with aria-controls. /\n id?: string;\n}\n\nexport const TableExpandedRow = ({\n numberOfColumns,\n expanded,\n hideDetailsText,\n toggleClick,\n children,\n className,\n mode = ModeType.normal,\n id,\n}: Props): React.JSX.Element => {\n const tableRowClass = classNames(\n tableStyles['table__expanded-row'],\n { [tableStyles['table__expanded-row--expanded']]: expanded },\n className\n );\n const tableCellClass = classNames(tableStyles['table__cell'], className, {\n [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n });\n\n const containerClass = classNames(tableStyles['table__expanded-row-container']);\n\n return (\n <tr className={tableRowClass} id={id}>\n <td colSpan={numberOfColumns} className={tableCellClass}>\n <div className={containerClass}>\n {React.Children.map(children, child => React.isValidElement(child) && React.cloneElement(child))}\n <Button variant={'borderless'} onClick={toggleClick} aria-expanded={expanded} tabIndex={expanded ? 0 : -1}>\n {hideDetailsText}\n <Icon svgIcon={ChevronUp} />\n </Button>\n </div>\n </td>\n </tr>\n );\n};\n\nexport default TableExpandedRow;\n","import TableExpandedRow from './TableExpandedRow';\nexport from './TableExpandedRow';\nexport default TableExpandedRow;\n"],"mappings":";;;;;;;;AA6BA,MAAa,oBAAoB,EAC/B,iBACA,UACA,iBACA,aACA,UACA,WACA,OAAO,SAAS,QAChB,SAC8B;AAY9B,QACE,oBAAC,MAAA;EAAG,WAZgB,GACpB,YAAY,wBACZ,GAAG,YAAY,mCAAmC,UAAU,EAC5D,UACD;EAQmC;YAChC,oBAAC,MAAA;GAAG,SAAS;GAAiB,WARX,GAAW,YAAY,gBAAgB,WAAW,GACtE,YAAY,0BAA0B,SAAS,SAAS,SAC1D,CAAC;aAOI,qBAAC,OAAA;IAAI,WALY,GAAW,YAAY,iCAAiC;eAMtE,MAAM,SAAS,IAAI,WAAU,UAAS,MAAM,eAAe,MAAM,IAAI,MAAM,aAAa,MAAM,CAAC,EAChG,qBAAC,gBAAA;KAAO,SAAS;KAAc,SAAS;KAAa,iBAAe;KAAU,UAAU,WAAW,IAAI;gBACpG,iBACD,oBAAC,cAAA,EAAK,SAAS,mBAAA,CAAa,CAAA;MACrB,CAAA;KACL;IACH;GACF;;AC3DT,IAAA,6BD+De"}

package/lib/TableExpanderCell.js CHANGED Viewed

@@ -2,13 +2,12 @@ import { t as Icon_default } from "./Icon.js";
 import { t as Button_default } from "./Button.js";
 import { t as ChevronDown_default } from "./ChevronDown.js";
 import { t as ChevronUp_default } from "./ChevronUp.js";
-import { t as ModeType } from "./Table.js";
-import React from "react";
-import classNames from "classnames";
+import { n as ModeType } from "./constants4.js";
+import cn from "classnames";
 import { jsx } from "react/jsx-runtime";
 import tableStyles from "./components/Table/styles.module.scss";
 const TableExpanderCell = ({ expandableRowId, hideDetailsText, showDetailsText, expanded, className, mode = ModeType.normal }) => {
-	const tableCellClass = classNames(tableStyles["table__cell"], tableStyles["table__cell-expander"], className, { [tableStyles["table__cell--compact"]]: mode === ModeType.compact });
+	const tableCellClass = cn(tableStyles["table__cell"], tableStyles["table__cell-expander"], className, { [tableStyles["table__cell--compact"]]: mode === ModeType.compact });
 	const icon = expanded ? ChevronUp_default : ChevronDown_default;
 	return /* @__PURE__ */ jsx("td", {
 		className: tableCellClass,

package/lib/TableExpanderCell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableExpanderCell.js","names":[],"sources":["../src/components/Table/TableExpanderCell/TableExpanderCell.tsx","../src/components/Table/TableExpanderCell/index.ts"],"sourcesContent":["import ~~React from 'react';\n\nimport~~ classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport ~~tableStyles~~ from '../~~styles.module.scss~~';\nimport { ~~ModeType }~~ from '../~~Table~~';\n\nexport interface Props {\n /** Adds custom classes to the element. /\n className?: string;\n /* Row is expanded. /\n expanded: boolean;\n /* Id for expanded row. /\n expandableRowId: string;\n /* Text for hide button used for aria label. /\n hideDetailsText: string;\n /* Text for show button used for aria label. /\n showDetailsText: string;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n}\n\nexport const TableExpanderCell = ({\n expandableRowId,\n hideDetailsText,\n showDetailsText,\n expanded,\n className,\n mode = ModeType.normal,\n}: Props): React.JSX.Element => {\n const tableCellClass = classNames(tableStyles['table__cell'], tableStyles['table__cell-expander'], className, {\n [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n });\n const icon = expanded ? ChevronUp : ChevronDown;\n\n return (\n <td className={tableCellClass}>\n <Button\n variant=\"borderless\"\n aria-expanded={expanded}\n aria-controls={expandableRowId}\n ariaLabel={expanded ? hideDetailsText : showDetailsText}\n >\n <Icon svgIcon={icon} />\n </Button>\n </td>\n );\n};\n\nexport default TableExpanderCell;\n","import TableExpanderCell from './TableExpanderCell';\nexport from './TableExpanderCell';\nexport default TableExpanderCell;\n"],"mappings":"~~;;;;;;;;;AA0BA~~,MAAa,qBAAqB,EAChC,iBACA,iBACA,iBACA,UACA,WACA,OAAO,SAAS,aACc;CAC9B,MAAM,iBAAiB,~~WAAW~~,YAAY,gBAAgB,YAAY,yBAAyB,WAAW,GAC3G,YAAY,0BAA0B,SAAS,SAAS,SAC1D,CAAC;CACF,MAAM,OAAO,WAAW,oBAAY;AAEpC,QACE,oBAAC,MAAA;EAAG,WAAW;YACb,oBAAC,gBAAA;GACC,SAAQ;GACR,iBAAe;GACf,iBAAe;GACf,WAAW,WAAW,kBAAkB;aAExC,oBAAC,cAAA,EAAK,SAAS,MAAA,CAAQ;IAChB;GACN;;~~AC/CT~~,IAAA,~~8BDmDe~~"}
1	+ {"version":3,"file":"TableExpanderCell.js","names":[],"sources":["../src/components/Table/TableExpanderCell/TableExpanderCell.tsx","../src/components/Table/TableExpanderCell/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\nexport interface Props {\n /** Adds custom classes to the element. /\n className?: string;\n /* Row is expanded. /\n expanded: boolean;\n /* Id for expanded row. /\n expandableRowId: string;\n /* Text for hide button used for aria label. /\n hideDetailsText: string;\n /* Text for show button used for aria label. /\n showDetailsText: string;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n}\n\nexport const TableExpanderCell = ({\n expandableRowId,\n hideDetailsText,\n showDetailsText,\n expanded,\n className,\n mode = ModeType.normal,\n}: Props): React.JSX.Element => {\n const tableCellClass = classNames(tableStyles['table__cell'], tableStyles['table__cell-expander'], className, {\n [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n });\n const icon = expanded ? ChevronUp : ChevronDown;\n\n return (\n <td className={tableCellClass}>\n <Button\n variant=\"borderless\"\n aria-expanded={expanded}\n aria-controls={expandableRowId}\n ariaLabel={expanded ? hideDetailsText : showDetailsText}\n >\n <Icon svgIcon={icon} />\n </Button>\n </td>\n );\n};\n\nexport default TableExpanderCell;\n","import TableExpanderCell from './TableExpanderCell';\nexport from './TableExpanderCell';\nexport default TableExpanderCell;\n"],"mappings":";;;;;;;;AAwBA,MAAa,qBAAqB,EAChC,iBACA,iBACA,iBACA,UACA,WACA,OAAO,SAAS,aACc;CAC9B,MAAM,iBAAiB,GAAW,YAAY,gBAAgB,YAAY,yBAAyB,WAAW,GAC3G,YAAY,0BAA0B,SAAS,SAAS,SAC1D,CAAC;CACF,MAAM,OAAO,WAAW,oBAAY;AAEpC,QACE,oBAAC,MAAA;EAAG,WAAW;YACb,oBAAC,gBAAA;GACC,SAAQ;GACR,iBAAe;GACf,iBAAe;GACf,WAAW,WAAW,kBAAkB;aAExC,oBAAC,cAAA,EAAK,SAAS,MAAA,CAAQ;IAChB;GACN;;AC7CT,IAAA,8BDiDe"}

package/lib/TableHead.js CHANGED Viewed

@@ -1,27 +1,21 @@
-import { t as ModeType } from "./Table.js";
-import React from "react";
-import classNames from "classnames";
+import { n as ModeType, t as HeaderCategory } from "./constants4.js";
+import { i as mapChildrenWithMode } from "./utils5.js";
+import cn from "classnames";
 import { jsx } from "react/jsx-runtime";
 import tableStyles from "./components/Table/styles.module.scss";
-let HeaderCategory = /* @__PURE__ */ function(HeaderCategory$1) {
-	HeaderCategory$1["normal"] = "normal";
-	HeaderCategory$1["transparent"] = "transparent";
-	HeaderCategory$1["sortable"] = "sortable";
-	return HeaderCategory$1;
-}({});
 const TableHead = ({ category = HeaderCategory.normal, className, children, mode, ...rest }) => {
 	return /* @__PURE__ */ jsx("thead", {
-		className: classNames(tableStyles["table__head"], {
+		className: cn(tableStyles["table__head"], {
 			[tableStyles["table__head--normal"]]: category === HeaderCategory.normal,
 			[tableStyles["table__head--transparent"]]: category === HeaderCategory.transparent,
 			[tableStyles["table__head--sortable"]]: category == HeaderCategory.sortable,
 			[tableStyles["table__head--compact"]]: mode == ModeType.compact
 		}, className),
 		...rest,
-		children: React.Children.map(children, (child) => React.isValidElement(child) && React.cloneElement(child, { mode }))
+		children: mapChildrenWithMode(children, mode)
 	});
 };
 var TableHead_default$1 = TableHead;
-export { HeaderCategory as n, TableHead as r, TableHead_default$1 as t };
+export { TableHead as n, TableHead_default$1 as t };
 //# sourceMappingURL=TableHead.js.map

package/lib/TableHead.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableHead.js","names":["TableHead: React.FC<Props>"],"sources":["../src/components/Table/TableHead/TableHead.tsx","../src/components/Table/TableHead/index.ts"],"sourcesContent":["import ~~React~~ from '~~react~~';\n\nimport ~~classNames~~ from '~~classnames~~';\n\nimport tableStyles from '../styles.module.scss';\nimport { ~~ModeType~~ } from '../~~Table~~';\n\nexport ~~enum HeaderCategory {\n normal = 'normal',\n transparent = 'transparent',\n sortable = 'sortable',\n}\n\nexport~~ interface Props extends Omit<React.ComponentPropsWithoutRef<'thead'>, 'style'> {\n /** Header category for styling. Default: normal /\n category?: HeaderCategory;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the content of the thead. Add table rows /\n children: React.ReactNode;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n}\n\nexport const TableHead: React.FC<Props> = ({ category = HeaderCategory.normal, className, children, mode, ...rest }) => {\n const tableHeadClass = classNames(\n tableStyles['table__head'],\n {\n [tableStyles['table__head--normal']]: category === HeaderCategory.normal,\n [tableStyles['table__head--transparent']]: category === HeaderCategory.transparent,\n [tableStyles['table__head--sortable']]: category == HeaderCategory.sortable,\n [tableStyles['table__head--compact']]: mode == ModeType.compact,\n },\n className\n );\n\n return (\n <thead className={tableHeadClass} {...rest}>\n {~~React.Children.map~~(children, ~~child => React.isValidElement<{~~ mode~~?: ModeType }>(child~~) ~~&& React.cloneElement(child, { mode~~ }~~))}~~\n </thead>\n );\n};\n\nexport default TableHead;\n","import TableHead from './TableHead';\nexport from './TableHead';\nexport default TableHead;\n"],"mappings":";;;;;~~AAOA~~,~~IAAY,iBAAA,yBAAA,kBAAL;AACL,kBAAA,YAAA;AACA,kBAAA,iBAAA;AACA,kBAAA,cAAA;;;AAcF,~~MAAaA,aAA8B,EAAE,WAAW,eAAe,QAAQ,WAAW,UAAU,MAAM,GAAG,WAAW;AAYtH,QACE,oBAAC,SAAA;EAAM,WAZc,~~WACrB~~,YAAY,gBACZ;IACG,YAAY,yBAAyB,aAAa,eAAe;IACjE,YAAY,8BAA8B,aAAa,eAAe;IACtE,YAAY,2BAA2B,YAAY,eAAe;IAClE,YAAY,0BAA0B,QAAQ,SAAS;GACzD,EACD,UACD;EAGmC,GAAI;YACnC,~~MAAM~~,~~SAAS~~,~~IAAI,WAAU,UAAS,MAAM,eAAoC,MAAM,IAAI,MAAM,aAAa,OAAO,EAAE,MAAM,CAAC,CAAC~~;~~GACzH~~;;~~ACrCZ~~,IAAA,~~sBDyCe~~"}
1	+ {"version":3,"file":"TableHead.js","names":["TableHead: React.FC<Props>"],"sources":["../src/components/Table/TableHead/TableHead.tsx","../src/components/Table/TableHead/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { HeaderCategory, ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\nimport { mapChildrenWithMode } from '../utils';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'thead'>, 'style'> {\n /** Header category for styling. Default: normal /\n category?: HeaderCategory;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the content of the thead. Add table rows /\n children: React.ReactNode;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n}\n\nexport const TableHead: React.FC<Props> = ({ category = HeaderCategory.normal, className, children, mode, ...rest }) => {\n const tableHeadClass = classNames(\n tableStyles['table__head'],\n {\n [tableStyles['table__head--normal']]: category === HeaderCategory.normal,\n [tableStyles['table__head--transparent']]: category === HeaderCategory.transparent,\n [tableStyles['table__head--sortable']]: category == HeaderCategory.sortable,\n [tableStyles['table__head--compact']]: mode == ModeType.compact,\n },\n className\n );\n\n return (\n <thead className={tableHeadClass} {...rest}>\n {mapChildrenWithMode(children, mode)}\n </thead>\n );\n};\n\nexport default TableHead;\n","import TableHead from './TableHead';\nexport from './TableHead';\nexport default TableHead;\n"],"mappings":";;;;;AAiBA,MAAaA,aAA8B,EAAE,WAAW,eAAe,QAAQ,WAAW,UAAU,MAAM,GAAG,WAAW;AAYtH,QACE,oBAAC,SAAA;EAAM,WAZc,GACrB,YAAY,gBACZ;IACG,YAAY,yBAAyB,aAAa,eAAe;IACjE,YAAY,8BAA8B,aAAa,eAAe;IACtE,YAAY,2BAA2B,YAAY,eAAe;IAClE,YAAY,0BAA0B,QAAQ,SAAS;GACzD,EACD,UACD;EAGmC,GAAI;YACnC,oBAAoB,UAAU,KAAK;GAC9B;;AC9BZ,IAAA,sBDkCe"}

package/lib/TableHeadCell.js CHANGED Viewed

@@ -2,18 +2,12 @@ import { a as IconSize } from "./constants2.js";
 import { t as Icon_default } from "./Icon.js";
 import { t as ArrowDown_default } from "./ArrowDown.js";
 import { t as ArrowUp_default } from "./ArrowUp.js";
-import { t as ModeType } from "./Table.js";
-import React from "react";
-import classNames from "classnames";
+import { i as SortDirection, n as ModeType } from "./constants4.js";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import tableStyles from "./components/Table/styles.module.scss";
-let SortDirection = /* @__PURE__ */ function(SortDirection$1) {
-	SortDirection$1["asc"] = "asc";
-	SortDirection$1["desc"] = "desc";
-	return SortDirection$1;
-}({});
 const TableHeadCell = ({ sortable, onClick, className, children, sortDir, mode = ModeType.normal, scope = "col", ...rest }) => {
-	const tableHeadCellDefaultClass = classNames(tableStyles["table__head-cell"], className, { [tableStyles["table__head-cell--compact"]]: mode === ModeType.compact });
+	const tableHeadCellDefaultClass = cn(tableStyles["table__head-cell"], className, { [tableStyles["table__head-cell--compact"]]: mode === ModeType.compact });
 	if (!sortable && !children) return /* @__PURE__ */ jsx("td", { className: tableHeadCellDefaultClass });
 	if (!sortable) return /* @__PURE__ */ jsx("th", {
 		scope,
@@ -21,7 +15,7 @@ const TableHeadCell = ({ sortable, onClick, className, children, sortDir, mode =
 		...rest,
 		children
 	});
-	const sortableClasses = classNames(tableHeadCellDefaultClass, tableStyles["table__head-cell--sortable"], className);
+	const sortableClasses = cn(tableHeadCellDefaultClass, tableStyles["table__head-cell--sortable"], className);
 	const renderSortIcon = () => sortDir && /* @__PURE__ */ jsx("div", {
 		className: tableStyles["table__head-cell-sort-icon-wrapper"],
 		children: /* @__PURE__ */ jsx(Icon_default, {
@@ -50,6 +44,6 @@ const TableHeadCell = ({ sortable, onClick, className, children, sortDir, mode =
 	});
 };
 var TableHeadCell_default$1 = TableHeadCell;
-export { SortDirection as n, TableHeadCell as r, TableHeadCell_default$1 as t };
+export { TableHeadCell as n, TableHeadCell_default$1 as t };
 //# sourceMappingURL=TableHeadCell.js.map

package/lib/TableHeadCell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableHeadCell.js","names":["TableHeadCell: React.FC<Props>"],"sources":["../src/components/Table/TableHeadCell/TableHeadCell.tsx","../src/components/Table/TableHeadCell/index.ts"],"sourcesContent":["import ~~React from 'react';\n\nimport~~ classNames from 'classnames';\n\nimport Icon, { IconSize } from '../../Icon';\nimport ArrowDown from '../../Icons/ArrowDown';\nimport ArrowUp from '../../Icons/ArrowUp';\nimport ~~tableStyles from '../styles.module.scss';\nimport~~ { ModeType } from '../~~Table~~';\~~n\nexport~~ ~~enum~~ ~~SortDirection~~ ~~{\n asc =~~ '~~asc~~',\n ~~desc = 'desc',\n}~~\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'th'>, 'style'> {\n /** Sets if column for head cell should be sortable/\n sortable?: boolean;\n /* Sort direction /\n sortDir?: SortDirection;\n /* Function that is called when clicked /\n onClick?: () => void;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the content of the td element. /\n children?: React.ReactNode;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n}\n\nexport const TableHeadCell: React.FC<Props> = ({\n sortable,\n onClick,\n className,\n children,\n sortDir,\n mode = ModeType.normal,\n scope = 'col',\n ...rest\n}) => {\n const tableHeadCellDefaultClass = classNames(tableStyles['table__head-cell'], className, {\n [tableStyles['table__head-cell--compact']]: mode === ModeType.compact,\n });\n\n if (!sortable && !children) {\n return <td className={tableHeadCellDefaultClass}></td>;\n }\n\n if (!sortable) {\n return (\n <th scope={scope} className={tableHeadCellDefaultClass} {...rest}>\n {children}\n </th>\n );\n }\n\n const sortableClasses = classNames(tableHeadCellDefaultClass, tableStyles['table__head-cell--sortable'], className);\n\n const renderSortIcon = (): React.JSX.Element \| undefined =>\n sortDir && (\n <div className={tableStyles['table__head-cell-sort-icon-wrapper']}>\n <Icon svgIcon={sortDir == SortDirection.asc ? ArrowDown : ArrowUp} size={IconSize.XXSmall} />\n </div>\n );\n\n const getSortDirection = (): React.AriaAttributes['aria-sort'] => {\n switch (sortDir) {\n case SortDirection.asc:\n return 'ascending';\n case SortDirection.desc:\n return 'descending';\n }\n };\n\n return (\n <th scope={scope} className={sortableClasses} aria-sort={getSortDirection()} {...rest}>\n <button type=\"button\" onClick={onClick} className={tableStyles['table__sort-button']} aria-pressed={sortDir ? !!sortDir : undefined}>\n {renderSortIcon()}\n {children}\n </button>\n </th>\n );\n};\n\nexport default TableHeadCell;\n","import TableHeadCell from './TableHeadCell';\nexport from './TableHeadCell';\nexport default TableHeadCell;\n"],"mappings":"~~;;;;;;;;;AAUA~~,~~IAAY,gBAAA,yBAAA,iBAAL;AACL,iBAAA,SAAA;AACA,iBAAA,UAAA;;;AAkBF,~~MAAaA,iBAAkC,EAC7C,UACA,SACA,WACA,UACA,SACA,OAAO,SAAS,QAChB,QAAQ,OACR,GAAG,WACC;CACJ,MAAM,4BAA4B,~~WAAW~~,YAAY,qBAAqB,WAAW,GACtF,YAAY,+BAA+B,SAAS,SAAS,SAC/D,CAAC;AAEF,KAAI,CAAC,YAAY,CAAC,SAChB,QAAO,oBAAC,MAAA,EAAG,WAAW,2BAAA,CAAgC;AAGxD,KAAI,CAAC,SACH,QACE,oBAAC,MAAA;EAAU;EAAO,WAAW;EAA2B,GAAI;EACzD;GACE;CAIT,MAAM,kBAAkB,~~WAAW~~,2BAA2B,YAAY,+BAA+B,UAAU;CAEnH,MAAM,uBACJ,WACE,oBAAC,OAAA;EAAI,WAAW,YAAY;YAC1B,oBAAC,cAAA;GAAK,SAAS,WAAW,cAAc,MAAM,oBAAY;GAAS,MAAM,SAAS;IAAW;GACzF;CAGV,MAAM,yBAA4D;AAChE,UAAQ,SAAR;GACE,KAAK,cAAc,IACjB,QAAO;GACT,KAAK,cAAc,KACjB,QAAO;;;AAIb,QACE,oBAAC,MAAA;EAAU;EAAO,WAAW;EAAiB,aAAW,kBAAkB;EAAE,GAAI;YAC/E,qBAAC,UAAA;GAAO,MAAK;GAAkB;GAAS,WAAW,YAAY;GAAuB,gBAAc,UAAU,CAAC,CAAC,UAAU,KAAA;cACvH,gBAAgB,EAChB,SAAA;IACM;GACN;;~~AC9ET~~,IAAA,~~0BDkFe~~"}
1	+ {"version":3,"file":"TableHeadCell.js","names":["TableHeadCell: React.FC<Props>"],"sources":["../src/components/Table/TableHeadCell/TableHeadCell.tsx","../src/components/Table/TableHeadCell/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport Icon, { IconSize } from '../../Icon';\nimport ArrowDown from '../../Icons/ArrowDown';\nimport ArrowUp from '../../Icons/ArrowUp';\nimport { ModeType, SortDirection } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'th'>, 'style'> {\n /** Sets if column for head cell should be sortable/\n sortable?: boolean;\n /* Sort direction /\n sortDir?: SortDirection;\n /* Function that is called when clicked /\n onClick?: () => void;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the content of the td element. /\n children?: React.ReactNode;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n}\n\nexport const TableHeadCell: React.FC<Props> = ({\n sortable,\n onClick,\n className,\n children,\n sortDir,\n mode = ModeType.normal,\n scope = 'col',\n ...rest\n}) => {\n const tableHeadCellDefaultClass = classNames(tableStyles['table__head-cell'], className, {\n [tableStyles['table__head-cell--compact']]: mode === ModeType.compact,\n });\n\n if (!sortable && !children) {\n return <td className={tableHeadCellDefaultClass}></td>;\n }\n\n if (!sortable) {\n return (\n <th scope={scope} className={tableHeadCellDefaultClass} {...rest}>\n {children}\n </th>\n );\n }\n\n const sortableClasses = classNames(tableHeadCellDefaultClass, tableStyles['table__head-cell--sortable'], className);\n\n const renderSortIcon = (): React.JSX.Element \| undefined =>\n sortDir && (\n <div className={tableStyles['table__head-cell-sort-icon-wrapper']}>\n <Icon svgIcon={sortDir == SortDirection.asc ? ArrowDown : ArrowUp} size={IconSize.XXSmall} />\n </div>\n );\n\n const getSortDirection = (): React.AriaAttributes['aria-sort'] => {\n switch (sortDir) {\n case SortDirection.asc:\n return 'ascending';\n case SortDirection.desc:\n return 'descending';\n }\n };\n\n return (\n <th scope={scope} className={sortableClasses} aria-sort={getSortDirection()} {...rest}>\n <button type=\"button\" onClick={onClick} className={tableStyles['table__sort-button']} aria-pressed={sortDir ? !!sortDir : undefined}>\n {renderSortIcon()}\n {children}\n </button>\n </th>\n );\n};\n\nexport default TableHeadCell;\n","import TableHeadCell from './TableHeadCell';\nexport from './TableHeadCell';\nexport default TableHeadCell;\n"],"mappings":";;;;;;;;AAuBA,MAAaA,iBAAkC,EAC7C,UACA,SACA,WACA,UACA,SACA,OAAO,SAAS,QAChB,QAAQ,OACR,GAAG,WACC;CACJ,MAAM,4BAA4B,GAAW,YAAY,qBAAqB,WAAW,GACtF,YAAY,+BAA+B,SAAS,SAAS,SAC/D,CAAC;AAEF,KAAI,CAAC,YAAY,CAAC,SAChB,QAAO,oBAAC,MAAA,EAAG,WAAW,2BAAA,CAAgC;AAGxD,KAAI,CAAC,SACH,QACE,oBAAC,MAAA;EAAU;EAAO,WAAW;EAA2B,GAAI;EACzD;GACE;CAIT,MAAM,kBAAkB,GAAW,2BAA2B,YAAY,+BAA+B,UAAU;CAEnH,MAAM,uBACJ,WACE,oBAAC,OAAA;EAAI,WAAW,YAAY;YAC1B,oBAAC,cAAA;GAAK,SAAS,WAAW,cAAc,MAAM,oBAAY;GAAS,MAAM,SAAS;IAAW;GACzF;CAGV,MAAM,yBAA4D;AAChE,UAAQ,SAAR;GACE,KAAK,cAAc,IACjB,QAAO;GACT,KAAK,cAAc,KACjB,QAAO;;;AAIb,QACE,oBAAC,MAAA;EAAU;EAAO,WAAW;EAAiB,aAAW,kBAAkB;EAAE,GAAI;YAC/E,qBAAC,UAAA;GAAO,MAAK;GAAkB;GAAS,WAAW,YAAY;GAAuB,gBAAc,UAAU,CAAC,CAAC,UAAU,KAAA;cACvH,gBAAgB,EAChB,SAAA;IACM;GACN;;ACvET,IAAA,0BD2Ee"}

package/lib/TableRow.js CHANGED Viewed

@@ -2,14 +2,14 @@ import { t as Icon_default } from "./Icon.js";
 import { t as Button_default } from "./Button.js";
 import { t as ChevronDown_default } from "./ChevronDown.js";
 import { t as ChevronUp_default } from "./ChevronUp.js";
-import { t as ModeType } from "./Table.js";
-import React from "react";
-import classNames from "classnames";
+import { n as ModeType } from "./constants4.js";
+import { i as mapChildrenWithMode } from "./utils5.js";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import tableStyles from "./components/Table/styles.module.scss";
 var TableExpanderCellMobile = ({ expanded, onClick, hideDetailsText, showDetailsText, mode = ModeType.normal }) => {
 	return /* @__PURE__ */ jsx("td", {
-		className: classNames(tableStyles.table__cell, tableStyles["table__expander-cell-mobile"], {
+		className: cn(tableStyles.table__cell, tableStyles["table__expander-cell-mobile"], {
 			[tableStyles["table__expander-cell-mobile--expanded"]]: expanded,
 			[tableStyles["table__cell--compact"]]: mode === ModeType.compact
 		}),
@@ -28,10 +28,10 @@ var TableExpanderCellMobile = ({ expanded, onClick, hideDetailsText, showDetails
 var TableExpanderCellMobile_default = TableExpanderCellMobile;
 const TableRow = ({ rowKey, hideDetailsText, showDetailsText, expandable, expanded, onClick, className, children, mode = ModeType.normal, ...rest }) => {
 	return /* @__PURE__ */ jsxs("tr", {
-		className: classNames(tableStyles["table-row"], { [tableStyles["table__row--expandable"]]: expandable }, className),
+		className: cn(tableStyles["table-row"], { [tableStyles["table__row--expandable"]]: expandable }, className),
 		onClick,
 		...rest,
-		children: [React.Children.map(children, (child) => React.isValidElement(child) && React.cloneElement(child, { mode })), expandable && /* @__PURE__ */ jsx(TableExpanderCellMobile_default, {
+		children: [mapChildrenWithMode(children, mode), expandable && /* @__PURE__ */ jsx(TableExpanderCellMobile_default, {
 			expanded,
 			onClick,
 			hideDetailsText,

package/lib/TableRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableRow.js","names":["TableExpanderCellMobile: React.FC<TableExpanderCellMobileProps>","TableRow: React.FC<Props>"],"sources":["../src/components/Table/TableExpanderCell/TableExpanderCellMobile.tsx","../src/components/Table/TableRow/TableRow.tsx","../src/components/Table/TableRow/index.ts"],"sourcesContent":["import ~~React~~ from '~~react~~';\n\nimport ~~classNames~~ from '~~classnames~~';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport ~~tableStyles from '../styles.module.scss';\nimport~~ { ModeType } from '../~~Table~~';\nimport { ~~Props }~~ from '../~~TableRow/TableRow~~';\n\ntype TableExpanderCellMobileProps = Pick<Props, 'expanded' \| 'onClick' \| 'hideDetailsText' \| 'showDetailsText' \| 'mode'>;\n\nconst TableExpanderCellMobile: React.FC<TableExpanderCellMobileProps> = ({\n expanded,\n onClick,\n hideDetailsText,\n showDetailsText,\n mode = ModeType.normal,\n}) => {\n const cellClass = classNames(tableStyles.table__cell, tableStyles['table__expander-cell-mobile'], {\n [tableStyles['table__expander-cell-mobile--expanded']]: expanded,\n [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n });\n\n return (\n <td className={cellClass}>\n <Button aria-expanded={expanded} variant=\"borderless\" onClick={onClick}>\n <Icon svgIcon={expanded ? ChevronUp : ChevronDown} /> {expanded ? hideDetailsText : showDetailsText}\n </Button>\n </td>\n );\n};\n\nexport default TableExpanderCellMobile;\n","import ~~React~~ from '~~react~~';\n\nimport ~~classNames~~ from '~~classnames~~';\n\nimport tableStyles from '../styles.module.scss';\nimport { ~~ModeType }~~ from '../~~Table~~';\nimport ~~TableExpanderCellMobile~~ from '../~~TableExpanderCell/TableExpanderCellMobile~~';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tr'>, 'style'> {\n /** Sets if expanded row can be expanded /\n expandable?: boolean;\n /* Sets if expanded row is expanded /\n expanded?: boolean;\n /* When hide/show button for expanded row is clicked. /\n onClick?: () => void;\n /* Text for expanded row hide button. /\n hideDetailsText?: string;\n /* Text for expanded row show button. /\n showDetailsText?: string;\n /* Key attribute for row /\n rowKey?: string;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the cells of the table row element. /\n children?: React.ReactNode;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n}\n\nexport const TableRow: React.FC<Props> = ({\n rowKey,\n hideDetailsText,\n showDetailsText,\n expandable,\n expanded,\n onClick,\n className,\n children,\n mode = ModeType.normal,\n ...rest\n}) => {\n const tableRowClass = classNames(\n tableStyles['table-row'],\n {\n [tableStyles['table__row--expandable']]: expandable,\n },\n className\n );\n\n return (\n <tr className={tableRowClass} onClick={onClick} key={rowKey} {...rest}>\n {~~React.Children.map~~(children, ~~child => React.isValidElement<{~~ mode~~?: ModeType }>(child~~) ~~&& React.cloneElement(child, { mode~~ }~~))}~~\n {expandable && (\n <TableExpanderCellMobile\n expanded={expanded}\n onClick={onClick}\n hideDetailsText={hideDetailsText}\n showDetailsText={showDetailsText}\n mode={mode}\n />\n )}\n </tr>\n );\n};\n\nexport default TableRow;\n","import TableRow from './TableRow';\nexport from './TableRow';\nexport default TableRow;\n"],"mappings":";;;;;;;;;~~AAcA~~,IAAMA,2BAAmE,EACvE,UACA,SACA,iBACA,iBACA,OAAO,SAAS,aACZ;AAMJ,QACE,oBAAC,MAAA;EAAG,WANY,~~WAAW~~,YAAY,aAAa,YAAY,gCAAgC;IAC/F,YAAY,2CAA2C;IACvD,YAAY,0BAA0B,SAAS,SAAS;GAC1D,CAAC;YAIE,qBAAC,gBAAA;GAAO,iBAAe;GAAU,SAAQ;GAAsB;;IAC7D,oBAAC,cAAA,EAAK,SAAS,WAAW,oBAAY,qBAAA,CAAe;;IAAE,WAAW,kBAAkB;;IAC7E;GACN;;AAIT,IAAA,kCAAe;ACNf,MAAaC,YAA6B,EACxC,QACA,iBACA,iBACA,YACA,UACA,SACA,WACA,UACA,OAAO,SAAS,QAChB,GAAG,WACC;AASJ,QACE,qBAAC,MAAA;EAAG,WATgB,~~WACpB~~,YAAY,cACZ,GACG,YAAY,4BAA4B,YAC1C,EACD,UACD;EAGwC;EAAsB,GAAI;aAC9D,~~MAAM~~,~~SAAS~~,~~IAAI~~,~~WAAU~~,~~UAAS,MAAM,eAAoC,MAAM,IAAI,MAAM,aAAa,OAAO,EAAE,MAAM,CAAC,CAAC,EAC9H,~~cACC,oBAAC,iCAAA;GACW;GACD;GACQ;GACA;GACX;IACN,CAAA;IAT+C,OAWhD;;~~AC3DT~~,IAAA,~~qBD+De~~"}
1	+ {"version":3,"file":"TableRow.js","names":["TableExpanderCellMobile: React.FC<TableExpanderCellMobileProps>","TableRow: React.FC<Props>"],"sources":["../src/components/Table/TableExpanderCell/TableExpanderCellMobile.tsx","../src/components/Table/TableRow/TableRow.tsx","../src/components/Table/TableRow/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { Props } from '../TableRow/TableRow';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\ntype TableExpanderCellMobileProps = Pick<Props, 'expanded' \| 'onClick' \| 'hideDetailsText' \| 'showDetailsText' \| 'mode'>;\n\nconst TableExpanderCellMobile: React.FC<TableExpanderCellMobileProps> = ({\n expanded,\n onClick,\n hideDetailsText,\n showDetailsText,\n mode = ModeType.normal,\n}) => {\n const cellClass = classNames(tableStyles.table__cell, tableStyles['table__expander-cell-mobile'], {\n [tableStyles['table__expander-cell-mobile--expanded']]: expanded,\n [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n });\n\n return (\n <td className={cellClass}>\n <Button aria-expanded={expanded} variant=\"borderless\" onClick={onClick}>\n <Icon svgIcon={expanded ? ChevronUp : ChevronDown} /> {expanded ? hideDetailsText : showDetailsText}\n </Button>\n </td>\n );\n};\n\nexport default TableExpanderCellMobile;\n","import classNames from 'classnames';\n\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\nimport TableExpanderCellMobile from '../TableExpanderCell/TableExpanderCellMobile';\nimport { mapChildrenWithMode } from '../utils';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tr'>, 'style'> {\n /** Sets if expanded row can be expanded /\n expandable?: boolean;\n /* Sets if expanded row is expanded /\n expanded?: boolean;\n /* When hide/show button for expanded row is clicked. /\n onClick?: () => void;\n /* Text for expanded row hide button. /\n hideDetailsText?: string;\n /* Text for expanded row show button. /\n showDetailsText?: string;\n /* Key attribute for row /\n rowKey?: string;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the cells of the table row element. /\n children?: React.ReactNode;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n}\n\nexport const TableRow: React.FC<Props> = ({\n rowKey,\n hideDetailsText,\n showDetailsText,\n expandable,\n expanded,\n onClick,\n className,\n children,\n mode = ModeType.normal,\n ...rest\n}) => {\n const tableRowClass = classNames(\n tableStyles['table-row'],\n {\n [tableStyles['table__row--expandable']]: expandable,\n },\n className\n );\n\n return (\n <tr className={tableRowClass} onClick={onClick} key={rowKey} {...rest}>\n {mapChildrenWithMode(children, mode)}\n {expandable && (\n <TableExpanderCellMobile\n expanded={expanded}\n onClick={onClick}\n hideDetailsText={hideDetailsText}\n showDetailsText={showDetailsText}\n mode={mode}\n />\n )}\n </tr>\n );\n};\n\nexport default TableRow;\n","import TableRow from './TableRow';\nexport from './TableRow';\nexport default TableRow;\n"],"mappings":";;;;;;;;;AAaA,IAAMA,2BAAmE,EACvE,UACA,SACA,iBACA,iBACA,OAAO,SAAS,aACZ;AAMJ,QACE,oBAAC,MAAA;EAAG,WANY,GAAW,YAAY,aAAa,YAAY,gCAAgC;IAC/F,YAAY,2CAA2C;IACvD,YAAY,0BAA0B,SAAS,SAAS;GAC1D,CAAC;YAIE,qBAAC,gBAAA;GAAO,iBAAe;GAAU,SAAQ;GAAsB;;IAC7D,oBAAC,cAAA,EAAK,SAAS,WAAW,oBAAY,qBAAA,CAAe;;IAAE,WAAW,kBAAkB;;IAC7E;GACN;;AAIT,IAAA,kCAAe;ACNf,MAAaC,YAA6B,EACxC,QACA,iBACA,iBACA,YACA,UACA,SACA,WACA,UACA,OAAO,SAAS,QAChB,GAAG,WACC;AASJ,QACE,qBAAC,MAAA;EAAG,WATgB,GACpB,YAAY,cACZ,GACG,YAAY,4BAA4B,YAC1C,EACD,UACD;EAGwC;EAAsB,GAAI;aAC9D,oBAAoB,UAAU,KAAK,EACnC,cACC,oBAAC,iCAAA;GACW;GACD;GACQ;GACA;GACX;IACN,CAAA;IAT+C,OAWhD;;AC1DT,IAAA,qBD8De"}

package/lib/Textarea.js CHANGED Viewed

@@ -1,13 +1,13 @@
 import { t as uuid } from "./uuid.js";
 import { n as AnalyticsId, r as FormOnColor, s as LanguageLocales, t as AVERAGE_CHARACTER_WIDTH_PX } from "./constants2.js";
-import { r as useLanguage } from "./language.js";
+import { n as useLanguage } from "./useLanguage.js";
 import { t as useIdWithFallback } from "./useIdWithFallback.js";
 import { t as getAriaDescribedBy } from "./accessibility.js";
 import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
-import { r as renderLabel } from "./Label.js";
+import { n as renderLabel } from "./utils2.js";
 import { t as MaxCharacters_default } from "./MaxCharacters.js";
-import React, { useEffect, useRef, useState } from "react";
-import classNames from "classnames";
+import cn from "classnames";
+import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Textarea/styles.module.scss";
 var HN_Designsystem_TextArea_en_GB_default = { characters: "characters" };
@@ -24,18 +24,16 @@ const getResources = (language) => {
 var getTextareaMaxWidth = (characters$3) => {
 	return `calc(${characters$3 * 12}px + 2rem + 16px + 4px)`;
 };
-var Textarea = React.forwardRef((props, ref) => {
-	const { maxCharacters, maxText, width, testId, defaultValue, marginBottom: gutterBottom, transparent, onColor = FormOnColor.onwhite, label, textareaId = uuid(), minRows = 3, maxRows = 10, grow, error, errorText, errorTextId: errorTextIdProp, errorWrapperClassName, autoFocus, disabled, name, autoComplete = "off", placeholder, readOnly, required, onChange, value, resources, ...rest } = props;
+var Textarea = (props) => {
+	const { maxCharacters, width, testId, defaultValue, marginBottom: gutterBottom, transparent, onColor = FormOnColor.onwhite, label, textareaId = uuid(), minRows = 3, maxRows = 10, grow, error, errorText, errorTextId: errorTextIdProp, errorWrapperClassName, autoFocus, disabled, name, autoComplete = "off", placeholder, readOnly, required, onChange, value, resources, ref, ...rest } = props;
 	const [rows, setRows] = useState(minRows);
 	const [textareaInput, setTextareaInput] = useState(value || defaultValue || "");
 	const referanse = useRef(null);
 	const errorTextUuid = useIdWithFallback(errorTextIdProp);
 	const { language } = useLanguage(LanguageLocales.NORWEGIAN);
-	const defaultResources = getResources(language);
 	const mergedResources = {
-		...defaultResources,
-		...resources,
-		characters: maxText || resources?.characters || defaultResources.characters
+		...getResources(language),
+		...resources
 	};
 	useEffect(() => {
 		setTextareaInput(defaultValue || "");
@@ -57,15 +55,15 @@ var Textarea = React.forwardRef((props, ref) => {
 	const onBlueberry = onColor === FormOnColor.onblueberry;
 	const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;
 	const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;
-	const textareaWrapperClass = classNames(styles.textarea, { [styles["textarea--gutterBottom"]]: gutterBottom });
-	const contentWrapperClass = classNames(styles["input-container"], {
+	const textareaWrapperClass = cn(styles.textarea, { [styles["textarea--gutterBottom"]]: gutterBottom });
+	const contentWrapperClass = cn(styles["input-container"], {
 		[styles["input-container--transparent"]]: transparent,
 		[styles["input-container--on-blueberry"]]: onBlueberry,
 		[styles["input-container--on-dark"]]: onDark,
 		[styles["input-container--invalid"]]: onError,
 		[styles["input-container--disabled"]]: props.disabled
 	});
-	const textareaClass = classNames(styles["input-container__input"], { [styles[`input-container__input--disabled`]]: props.disabled });
+	const textareaClass = cn(styles["input-container__input"], { [styles[`input-container__input--disabled`]]: props.disabled });
 	useEffect(() => {
 		if (value) setTextareaInput(value);
 		if (grow && referanse.current?.children && referanse.current?.children[0]) {
@@ -123,7 +121,7 @@ var Textarea = React.forwardRef((props, ref) => {
 			]
 		})
 	});
-});
+};
 Textarea.displayName = "Textarea";
 var Textarea_default$1 = Textarea;
 export { Textarea_default$1 as t };

package/lib/Textarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Textarea.js","names":["mergedResources: HNDesignsystemTextArea"],"sources":["../src/resources/HN.Designsystem.TextArea.en-GB.json","../src/resources/HN.Designsystem.TextArea.nb-NO.json","../src/resources/HN.Designsystem.TextArea.nn-NO.json","../src/components/Textarea/resourceHelper.ts","../src/components/Textarea/Textarea.tsx","../src/components/Textarea/index.tsx"],"sourcesContent":["{\n \"characters\": \"characters\"\n}\n","{\n \"characters\": \"tegn\"\n}\n","{\n \"characters\": \"teikn\"\n}\n","import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.TextArea.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.TextArea.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.TextArea.nn-NO.json';\nimport { HNDesignsystemTextArea } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemTextArea => {\n switch (language) {\n case LanguageLocales.ENGLISH:\n return enGB;\n case LanguageLocales.NORWEGIAN_NYNORSK:\n return nnNO;\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import React, { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, LanguageLocales } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { HNDesignsystemTextArea } from '../../resources/Resources';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { useLanguage } from '../../utils/language';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface TextareaProps\n extends ErrorWrapperClassNameProps,\n Pick<\n React.InputHTMLAttributes<HTMLTextAreaElement>,\n \| 'aria-describedby'\n \| 'autoFocus'\n \| 'disabled'\n \| 'name'\n \| 'autoComplete'\n \| 'placeholder'\n \| 'readOnly'\n \| 'required'\n \| 'defaultValue'\n \| 'onChange'\n \| 'value'\n > {\n /** max character limit in textarea /\n maxCharacters?: number;\n /* @deprecated use resources instead. The text is displayed in the end of the text-counter /\n maxText?: string;\n /* Width of textarea in characters (approximate) /\n width?: number;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* If true, the component will have a bottom margin. /\n marginBottom?: boolean;\n /* If true, the component will be transparent. /\n transparent?: boolean;\n /* Changes the visuals of the textarea /\n onColor?: keyof typeof FormOnColor;\n /* Label of the input /\n label?: React.ReactNode;\n /* id of the textarea /\n textareaId?: string;\n /* max rows /\n maxRows?: number;\n /* min rows /\n minRows?: number;\n /* auto-grows until maxRows /\n grow?: boolean;\n /* Activates Error style for the input /\n error?: boolean;\n /* Error text to show above the component /\n errorText?: string;\n /* Error text id /\n errorTextId?: string;\n /* Resources for component /\n resources?: Partial<HNDesignsystemTextArea>;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n const paddingWidth = '2rem';\n const scrollbarWidth = '16px';\n const borderWidth = '4px';\n\n return `calc(${characters AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea = React.forwardRef((props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) => {\n const {\n maxCharacters,\n maxText,\n width,\n testId,\n defaultValue,\n marginBottom: gutterBottom,\n transparent,\n onColor = FormOnColor.onwhite,\n label,\n textareaId = uuid(),\n minRows = 3,\n maxRows = 10,\n grow,\n error,\n errorText,\n errorTextId: errorTextIdProp,\n errorWrapperClassName,\n autoFocus,\n disabled,\n name,\n autoComplete = 'off',\n placeholder,\n readOnly,\n required,\n onChange,\n value,\n resources,\n ...rest\n } = props;\n\n const [rows, setRows] = useState(minRows);\n const [textareaInput, setTextareaInput] = useState(value \|\| defaultValue \|\| '');\n const referanse = useRef<HTMLDivElement>(null);\n const errorTextUuid = useIdWithFallback(errorTextIdProp);\n\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources: HNDesignsystemTextArea = {\n ...defaultResources,\n ...resources,\n characters: maxText \|\| resources?.characters \|\| defaultResources.characters,\n };\n\n useEffect(() => {\n setTextareaInput(defaultValue \|\| '');\n }, [defaultValue]);\n\n const resizeHeight = (target: HTMLTextAreaElement): void => {\n const textareaLineHeight = 28;\n\n const previousRows = target.rows;\n target.rows = minRows; // reset number of rows in textarea\n\n const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n if (currentRows === previousRows) {\n target.rows = currentRows;\n }\n\n if (currentRows >= maxRows) {\n target.rows = maxRows;\n target.scrollTop = target.scrollHeight;\n }\n\n if (currentRows < maxRows) {\n setRows(currentRows);\n } else {\n setRows(maxRows);\n }\n };\n\n const onDark = onColor === FormOnColor.ondark;\n const onBlueberry = onColor === FormOnColor.onblueberry;\n const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n const onError = onColor === FormOnColor.oninvalid \|\| !!errorText \|\| !!error \|\| maxCharactersExceeded;\n\n const textareaWrapperClass = cn(styles.textarea, {\n [styles['textarea--gutterBottom']]: gutterBottom,\n });\n\n const contentWrapperClass = cn(styles['input-container'], {\n [styles['input-container--transparent']]: transparent,\n [styles['input-container--on-blueberry']]: onBlueberry,\n [styles['input-container--on-dark']]: onDark,\n [styles['input-container--invalid']]: onError,\n [styles['input-container--disabled']]: props.disabled,\n });\n\n const textareaClass = cn(styles['input-container__input'], {\n [styles[`input-container__input--disabled`]]: props.disabled,\n });\n\n useEffect(() => {\n if (value) setTextareaInput(value);\n\n if (grow && referanse.current?.children && referanse.current?.children[0]) {\n const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n resizeHeight(textarea);\n }\n }, [value]);\n\n const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n setTextareaInput(e.target.value);\n\n if (onChange) {\n onChange(e);\n }\n\n if (grow) {\n resizeHeight(e.target);\n }\n };\n\n const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n return (\n <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n {renderLabel(label, textareaId, onColor as FormOnColor)}\n <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n <textarea\n {...rest}\n rows={rows}\n defaultValue={defaultValue}\n id={textareaId}\n className={textareaClass}\n ref={ref}\n aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n aria-invalid={!!onError}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={autoFocus}\n disabled={disabled}\n name={name}\n autoComplete={autoComplete ? autoComplete : undefined}\n placeholder={placeholder}\n readOnly={readOnly}\n required={required}\n onChange={onChangeHandler}\n value={value}\n />\n </div>\n {maxCharacters && (\n <MaxCharacters\n maxCharacters={maxCharacters}\n length={textareaInput.toString().length}\n maxText={mergedResources.characters}\n onColor={onColor}\n maxWidth={maxWidth}\n />\n )}\n </div>\n </ErrorWrapper>\n );\n});\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n","import Textarea from './Textarea';\nexport * from './Textarea';\nexport default Textarea;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Textarea.js","names":["Textarea: React.FC<TextareaProps>","mergedResources: HNDesignsystemTextArea"],"sources":["../src/resources/HN.Designsystem.TextArea.en-GB.json","../src/resources/HN.Designsystem.TextArea.nb-NO.json","../src/resources/HN.Designsystem.TextArea.nn-NO.json","../src/components/Textarea/resourceHelper.ts","../src/components/Textarea/Textarea.tsx","../src/components/Textarea/index.ts"],"sourcesContent":["{\n \"characters\": \"characters\"\n}\n","{\n \"characters\": \"tegn\"\n}\n","{\n \"characters\": \"teikn\"\n}\n","import type { HNDesignsystemTextArea } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.TextArea.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.TextArea.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.TextArea.nn-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemTextArea => {\n switch (language) {\n case LanguageLocales.ENGLISH:\n return enGB;\n case LanguageLocales.NORWEGIAN_NYNORSK:\n return nnNO;\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport type { HNDesignsystemTextArea } from '../../resources/Resources';\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, LanguageLocales } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { renderLabel } from '../Label/utils';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface TextareaProps\n extends\n ErrorWrapperClassNameProps,\n Pick<\n React.InputHTMLAttributes<HTMLTextAreaElement>,\n \| 'aria-describedby'\n \| 'autoFocus'\n \| 'disabled'\n \| 'name'\n \| 'autoComplete'\n \| 'placeholder'\n \| 'readOnly'\n \| 'required'\n \| 'defaultValue'\n \| 'onChange'\n \| 'value'\n > {\n /** max character limit in textarea /\n maxCharacters?: number;\n /* Width of textarea in characters (approximate) /\n width?: number;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* If true, the component will have a bottom margin. /\n marginBottom?: boolean;\n /* If true, the component will be transparent. /\n transparent?: boolean;\n /* Changes the visuals of the textarea /\n onColor?: keyof typeof FormOnColor;\n /* Label of the input /\n label?: React.ReactNode;\n /* id of the textarea /\n textareaId?: string;\n /* max rows /\n maxRows?: number;\n /* min rows /\n minRows?: number;\n /* auto-grows until maxRows /\n grow?: boolean;\n /* Activates Error style for the input /\n error?: boolean;\n /* Error text to show above the component /\n errorText?: string;\n /* Error text id /\n errorTextId?: string;\n /* Resources for component /\n resources?: Partial<HNDesignsystemTextArea>;\n /* Ref passed to the component /\n ref?: React.Ref<HTMLTextAreaElement \| null>;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n const paddingWidth = '2rem';\n const scrollbarWidth = '16px';\n const borderWidth = '4px';\n\n return `calc(${characters AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea: React.FC<TextareaProps> = props => {\n const {\n maxCharacters,\n width,\n testId,\n defaultValue,\n marginBottom: gutterBottom,\n transparent,\n onColor = FormOnColor.onwhite,\n label,\n textareaId = uuid(),\n minRows = 3,\n maxRows = 10,\n grow,\n error,\n errorText,\n errorTextId: errorTextIdProp,\n errorWrapperClassName,\n autoFocus,\n disabled,\n name,\n autoComplete = 'off',\n placeholder,\n readOnly,\n required,\n onChange,\n value,\n resources,\n ref,\n ...rest\n } = props;\n\n const [rows, setRows] = useState(minRows);\n const [textareaInput, setTextareaInput] = useState(value \|\| defaultValue \|\| '');\n const referanse = useRef<HTMLDivElement>(null);\n const errorTextUuid = useIdWithFallback(errorTextIdProp);\n\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources: HNDesignsystemTextArea = {\n ...defaultResources,\n ...resources,\n };\n\n useEffect(() => {\n setTextareaInput(defaultValue \|\| '');\n }, [defaultValue]);\n\n const resizeHeight = (target: HTMLTextAreaElement): void => {\n const textareaLineHeight = 28;\n\n const previousRows = target.rows;\n target.rows = minRows; // reset number of rows in textarea\n\n const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n if (currentRows === previousRows) {\n target.rows = currentRows;\n }\n\n if (currentRows >= maxRows) {\n target.rows = maxRows;\n target.scrollTop = target.scrollHeight;\n }\n\n if (currentRows < maxRows) {\n setRows(currentRows);\n } else {\n setRows(maxRows);\n }\n };\n\n const onDark = onColor === FormOnColor.ondark;\n const onBlueberry = onColor === FormOnColor.onblueberry;\n const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n const onError = onColor === FormOnColor.oninvalid \|\| !!errorText \|\| !!error \|\| maxCharactersExceeded;\n\n const textareaWrapperClass = cn(styles.textarea, {\n [styles['textarea--gutterBottom']]: gutterBottom,\n });\n\n const contentWrapperClass = cn(styles['input-container'], {\n [styles['input-container--transparent']]: transparent,\n [styles['input-container--on-blueberry']]: onBlueberry,\n [styles['input-container--on-dark']]: onDark,\n [styles['input-container--invalid']]: onError,\n [styles['input-container--disabled']]: props.disabled,\n });\n\n const textareaClass = cn(styles['input-container__input'], {\n [styles[`input-container__input--disabled`]]: props.disabled,\n });\n\n useEffect(() => {\n if (value) setTextareaInput(value);\n\n if (grow && referanse.current?.children && referanse.current?.children[0]) {\n const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n resizeHeight(textarea);\n }\n }, [value]);\n\n const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n setTextareaInput(e.target.value);\n\n if (onChange) {\n onChange(e);\n }\n\n if (grow) {\n resizeHeight(e.target);\n }\n };\n\n const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n return (\n <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n {renderLabel(label, textareaId, onColor as FormOnColor)}\n <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n <textarea\n {...rest}\n rows={rows}\n defaultValue={defaultValue}\n id={textareaId}\n className={textareaClass}\n ref={ref}\n aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n aria-invalid={!!onError}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={autoFocus}\n disabled={disabled}\n name={name}\n autoComplete={autoComplete ? autoComplete : undefined}\n placeholder={placeholder}\n readOnly={readOnly}\n required={required}\n onChange={onChangeHandler}\n value={value}\n />\n </div>\n {maxCharacters && (\n <MaxCharacters\n maxCharacters={maxCharacters}\n length={textareaInput.toString().length}\n maxText={mergedResources.characters}\n onColor={onColor}\n maxWidth={maxWidth}\n />\n )}\n </div>\n </ErrorWrapper>\n );\n};\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n","import Textarea from './Textarea';\nexport * from './Textarea';\nexport default Textarea;\n"],"mappings":";;;;;;;;;;;;;;;AGOA,MAAa,gBAAgB,aAAsD;AACjF,SAAQ,UAAR;EACE,KAAK,gBAAgB,QACnB,QAAO;EACT,KAAK,gBAAgB,kBACnB,QAAO;EACT,KAAK,gBAAgB;EACrB,QACE,QAAO;;;ACuDb,IAAM,uBAAuB,iBAA+B;AAK1D,QAAO,QAAQ,eAAA,GAAwC;;AAGzD,IAAMA,YAAoC,UAAS;CACjD,MAAM,EACJ,eACA,OACA,QACA,cACA,cAAc,cACd,aACA,UAAU,YAAY,SACtB,OACA,aAAa,MAAM,EACnB,UAAU,GACV,UAAU,IACV,MACA,OACA,WACA,aAAa,iBACb,uBACA,WACA,UACA,MACA,eAAe,OACf,aACA,UACA,UACA,UACA,OACA,WACA,KACA,GAAG,SACD;CAEJ,MAAM,CAAC,MAAM,WAAW,SAAS,QAAQ;CACzC,MAAM,CAAC,eAAe,oBAAoB,SAAS,SAAS,gBAAgB,GAAG;CAC/E,MAAM,YAAY,OAAuB,KAAK;CAC9C,MAAM,gBAAgB,kBAAkB,gBAAgB;CAExD,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAMC,kBAA0C;EAC9C,GAHuB,aAAa,SAAS;EAI7C,GAAG;EACJ;AAED,iBAAgB;AACd,mBAAiB,gBAAgB,GAAG;IACnC,CAAC,aAAa,CAAC;CAElB,MAAM,gBAAgB,WAAsC;EAC1D,MAAM,qBAAqB;EAE3B,MAAM,eAAe,OAAO;AAC5B,SAAO,OAAO;EAEd,MAAM,cAAc,KAAK,OAAO,OAAO,eAAe,MAAM,mBAAmB;AAE/E,MAAI,gBAAgB,aAClB,QAAO,OAAO;AAGhB,MAAI,eAAe,SAAS;AAC1B,UAAO,OAAO;AACd,UAAO,YAAY,OAAO;;AAG5B,MAAI,cAAc,QAChB,SAAQ,YAAY;MAEpB,SAAQ,QAAQ;;CAIpB,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,wBAAwB,CAAC,CAAC,iBAAiB,cAAc,UAAU,CAAC,SAAS;CACnF,MAAM,UAAU,YAAY,YAAY,aAAa,CAAC,CAAC,aAAa,CAAC,CAAC,SAAS;CAE/E,MAAM,uBAAuB,GAAG,OAAO,UAAU,GAC9C,OAAO,4BAA4B,cACrC,CAAC;CAEF,MAAM,sBAAsB,GAAG,OAAO,oBAAoB;GACvD,OAAO,kCAAkC;GACzC,OAAO,mCAAmC;GAC1C,OAAO,8BAA8B;GACrC,OAAO,8BAA8B;GACrC,OAAO,+BAA+B,MAAM;EAC9C,CAAC;CAEF,MAAM,gBAAgB,GAAG,OAAO,2BAA2B,GACxD,OAAO,sCAAsC,MAAM,UACrD,CAAC;AAEF,iBAAgB;AACd,MAAI,MAAO,kBAAiB,MAAM;AAElC,MAAI,QAAQ,UAAU,SAAS,YAAY,UAAU,SAAS,SAAS,IAAI;GACzE,MAAM,WAAW,UAAU,SAAS,SAAS;AAC7C,gBAAa,SAAS;;IAEvB,CAAC,MAAM,CAAC;CAEX,MAAM,mBAAmB,MAAoD;AAC3E,mBAAiB,EAAE,OAAO,MAAM;AAEhC,MAAI,SACF,UAAS,EAAE;AAGb,MAAI,KACF,cAAa,EAAE,OAAO;;CAI1B,MAAM,WAAW,QAAQ,oBAAoB,MAAM,GAAG,KAAA;AAEtD,QACE,oBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAW,aAAa;YACjF,qBAAC,OAAA;GAAI,eAAa;GAAQ,oBAAkB,YAAY;GAAU,WAAW;;IAC1E,YAAY,OAAO,YAAY,QAAuB;IACvD,oBAAC,OAAA;KAAI,WAAW;KAAqB,KAAK;KAAW,OAAO,EAAE,UAAU;eACtE,oBAAC,YAAA;MACC,GAAI;MACE;MACQ;MACd,IAAI;MACJ,WAAW;MACN;MACL,oBAAkB,mBAAmB,OAAO,cAAc;MAC1D,gBAAc,CAAC,CAAC;MAEL;MACD;MACJ;MACN,cAAc,eAAe,eAAe,KAAA;MAC/B;MACH;MACA;MACV,UAAU;MACH;OACP;MACE;IACL,iBACC,oBAAC,uBAAA;KACgB;KACf,QAAQ,cAAc,UAAU,CAAC;KACjC,SAAS,gBAAgB;KAChB;KACC;MACV;;IAEA;GACO;;AAInB,SAAS,cAAc;ACzOvB,IAAA,qBD2Oe"}