@amboss/design-system 4.8.2-canary.0 → 4.9.0

package/build/cjs/components/DropdownMenu/Menu.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Menu",{enumerable:!0,get:function(){return Menu}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_useKeyboard=require("../../shared/useKeyboard"),_Divider=require("../Divider/Divider"),_MenuItem=require("./MenuItem"),_usePopupMenu=require("../../shared/popupMenu/usePopupMenu"),_useOutsideInteract=require("../../shared/useOutsideInteract"),_Portal=require("../Portal/Portal"),isSeperator=item=>"separator"===item,StyledMenu=(0,_styled.default)("div",{target:"e1esauyt0",label:"StyledMenu"})(({theme})=>{let zIndex=(0,_Portal.usePortalChildZIndex)(theme.variables.zIndex.dropdown);return{position:"absolute",display:"inline-block",width:"fit-content",minWidth:theme.variables.size.dimension.dropdownMenu.width,zIndex,borderRadius:theme.variables.size.borderRadius.s,backgroundColor:theme.values.color.background.primary.default,paddingTop:theme.variables.size.spacing.xs,paddingBottom:theme.variables.size.spacing.xs,":after":{content:'" "',position:"absolute",top:0,left:0,width:"100%",height:"100%",pointerEvents:"none",borderRadius:"inherit",boxShadow:theme.values.elevation[3]}}}),StyledUl=(0,_styled.default)("ul",{target:"e1esauyt1",label:"StyledUl"})(()=>({margin:0,padding:0,overflow:"hidden"})),StyledLi=(0,_styled.default)("li",{target:"e1esauyt2",label:"StyledLi"})(()=>({margin:0,padding:0,width:"100%",listStyleType:"none",whiteSpace:"nowrap"})),StyledLiSeparator=(0,_styled.default)(StyledLi,{target:"e1esauyt3",label:"StyledLiSeparator"})(({theme})=>({marginTop:theme.variables.size.spacing.xs,marginBottom:theme.variables.size.spacing.xs}));function Menu({isOpen,items,portalContainer,triggerRef,placement,onCloseMenu}){let menuRef=(0,_react.useRef)(null),[focusIndex,setFocusIndex]=(0,_react.useState)(0),{menuStyle}=(0,_usePopupMenu.usePopupMenu)({triggerRef,menuRef,isOpen,placement});(0,_useOutsideInteract.useOutsideInteract)({ref:menuRef,excludeRefs:[triggerRef],onInteractOutside:onCloseMenu,isActive:isOpen}),(0,_useKeyboard.useKeyboard)({Escape:onCloseMenu,ArrowUp:()=>{setFocusIndex(index=>index-1)},ArrowDown:()=>{setFocusIndex(index=>index+1)}},menuRef,isOpen),(0,_react.useEffect)(()=>{if(menuRef&&menuRef.current){let buttons=menuRef.current.querySelectorAll("button");buttons[Math.abs(focusIndex)%buttons.length].focus({preventScroll:!0})}isOpen||setFocusIndex(0)},[menuRef,focusIndex,isOpen]);let menuElm=_react.default.createElement(StyledMenu,{ref:menuRef,style:menuStyle},_react.default.createElement(StyledUl,{role:"menu"},items.map((item,index)=>{if(isSeperator(item))return _react.default.createElement(StyledLiSeparator,{role:"separator",key:`menuitem-separator-${index}`},_react.default.createElement(_Divider.Divider,{"aria-hidden":"true"}));let{label,destructive,disabled,emphasized,icon,onSelect}=item;return _react.default.createElement(StyledLi,{role:"menuitem",key:`menuitem-${label}`},_react.default.createElement(_MenuItem.MenuItem,{onSelect:onSelect,icon:icon,label:label,disabled:disabled,destructive:destructive,emphasized:emphasized}))})));return isOpen?_react.default.createElement(_Portal.Portal,{portalContainer:portalContainer},menuElm):null}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Menu",{enumerable:!0,get:function(){return Menu}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_useKeyboard=require("../../shared/useKeyboard"),_Divider=require("../Divider/Divider"),_MenuItem=require("./MenuItem"),_usePopupMenu=require("../../shared/popupMenu/usePopupMenu"),_useOutsideInteract=require("../../shared/useOutsideInteract"),_Portal=require("../Portal/Portal"),isSeperator=item=>"separator"===item,StyledMenu=(0,_styled.default)("div",{target:"e1gy87fm0",label:"StyledMenu"})(({theme})=>{let zIndex=(0,_Portal.usePortalChildZIndex)(theme.variables.zIndex.dropdown);return{position:"absolute",display:"inline-block",width:"fit-content",minWidth:theme.variables.size.dimension.dropdownMenu.width,zIndex,borderRadius:theme.variables.size.borderRadius.s,backgroundColor:theme.values.color.background.primary.default,paddingTop:theme.variables.size.spacing.xs,paddingBottom:theme.variables.size.spacing.xs,":after":{content:'" "',position:"absolute",top:0,left:0,width:"100%",height:"100%",pointerEvents:"none",borderRadius:"inherit",boxShadow:theme.values.elevation[3]}}}),StyledUl=(0,_styled.default)("ul",{target:"e1gy87fm1",label:"StyledUl"})(()=>({margin:0,padding:0,overflow:"hidden"})),StyledLi=(0,_styled.default)("li",{target:"e1gy87fm2",label:"StyledLi"})(()=>({margin:0,padding:0,width:"100%",listStyleType:"none",whiteSpace:"nowrap"})),StyledLiSeparator=(0,_styled.default)(StyledLi,{target:"e1gy87fm3",label:"StyledLiSeparator"})(({theme})=>({marginTop:theme.variables.size.spacing.xs,marginBottom:theme.variables.size.spacing.xs}));function Menu({isOpen,items,portalContainer,triggerRef,placement,onCloseMenu}){let menuRef=(0,_react.useRef)(null),[focusIndex,setFocusIndex]=(0,_react.useState)(0),{menuStyle}=(0,_usePopupMenu.usePopupMenu)({triggerRef,menuRef,isOpen,placement});(0,_useOutsideInteract.useOutsideInteract)({ref:menuRef,excludeRefs:[triggerRef],onInteractOutside:onCloseMenu,isActive:isOpen}),(0,_useKeyboard.useKeyboard)({Escape:onCloseMenu,ArrowUp:()=>{setFocusIndex(index=>index-1)},ArrowDown:()=>{setFocusIndex(index=>index+1)}},menuRef,isOpen),(0,_react.useEffect)(()=>{if(menuRef&&menuRef.current){let buttons=menuRef.current.querySelectorAll("button");buttons[Math.abs(focusIndex)%buttons.length].focus({preventScroll:!0})}isOpen||setFocusIndex(0)},[menuRef,focusIndex,isOpen]);let menuElm=_react.default.createElement(StyledMenu,{ref:menuRef,style:menuStyle},_react.default.createElement(StyledUl,{role:"menu"},items.map((item,index)=>{if(isSeperator(item))return _react.default.createElement(StyledLiSeparator,{role:"separator",key:`menuitem-separator-${index}`},_react.default.createElement(_Divider.Divider,{"aria-hidden":"true"}));let{label,destructive,disabled,emphasized,icon,onSelect}=item;return _react.default.createElement(StyledLi,{role:"menuitem",key:`menuitem-${label}`},_react.default.createElement(_MenuItem.MenuItem,{onSelect:onSelect,icon:icon,label:label,disabled:disabled,destructive:destructive,emphasized:emphasized}))})));return isOpen?_react.default.createElement(_Portal.Portal,{portalContainer:portalContainer},menuElm):null}

package/build/cjs/components/EntityList/BaseEntityList.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"BaseEntityList",{enumerable:!0,get:function(){return BaseEntityList}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styledcomponents=require("./styled-components"),_useKeyboard=require("../../shared/useKeyboard"),_Icon=require("../Icon/Icon"),_EntityListItem=require("./EntityListItem"),_VirtualizedEntityList=require("./VirtualizedEntityList"),_useFocusByIndex=require("./useFocusByIndex"),_roles=require("./roles");function BaseEntityList({data,size="m",onClick,focusOnMount,isSelectable,selectedIds,onSelectionChange,onSelectionToggle,renderRightContent,renderItemWrapper,getLeftIconProps,hideBorder,filterFn,isVirtualized,maxHeight,ariaAttributes:deprecatedAriaAttributes,slotProps,role:roleProp,truncateLabels=!1,"data-e2e-test-id":dataE2eTestId,...ariaAttributes}){let rootRole,{itemRole,...rootAriaProps}=(rootRole=roleProp??"list",isSelectable&&(rootRole="listbox"),{role:rootRole,itemRole:_roles.ROLE_TO_ITEM_ROLE[rootRole],"aria-multiselectable":"listbox"===rootRole&&!!isSelectable||void 0}),ariaLabelExpand=slotProps?.toggle?.["aria-label-expand"]??deprecatedAriaAttributes?.ariaLabelExpand,ariaLabelCollapse=slotProps?.toggle?.["aria-label-collapse"]??deprecatedAriaAttributes?.ariaLabelCollapse,dataShown=(0,_react.useMemo)(()=>data.length&&filterFn?data.filter(filterFn):data,[data,filterFn]),selectedIdsSet=(0,_react.useMemo)(()=>new Set(selectedIds),[selectedIds]),listRef=(0,_react.useRef)(null),focusableItems=(0,_react.useMemo)(()=>dataShown.map(item=>({id:item.id,isDisabled:!!item.isDisabled})),[dataShown]),initialActiveIndex=(0,_react.useMemo)(()=>{let index=dataShown.findIndex(item=>item.isActive);return -1!==index?index:0},[dataShown]),{moveFocus,focusItemAtIndex,focusedIndex:selectedIndex}=(0,_useFocusByIndex.useFocusByIndex)({containerRef:listRef,nodeSelector:"data-list-item",data:focusableItems,preventScroll:isVirtualized,initialIndex:initialActiveIndex});(0,_react.useEffect)(()=>{focusOnMount&&focusItemAtIndex(selectedIndex)},[]),(0,_useKeyboard.useKeyboard)({ArrowDown:()=>{moveFocus(1)},ArrowUp:()=>{moveFocus(-1)}},listRef,isSelectable||!!onClick);let handleOnClick=(0,_react.useCallback)(item=>{let{id}=item;if(isSelectable){let willBeSelected=!selectedIdsSet.has(id),newSelectedIdsSet=new Set(selectedIdsSet);willBeSelected?newSelectedIdsSet.add(id):newSelectedIdsSet.delete(id),onSelectionToggle?.(id,willBeSelected),onSelectionChange?.(Array.from(newSelectedIdsSet))}onClick?.(item)},[selectedIdsSet,onSelectionChange,onSelectionToggle,onClick,isSelectable]),renderEntityItem=index=>{let tabIndex,item=dataShown[index];if(!item)return null;let isLastItem=index===dataShown.length-1,isSelected=selectedIdsSet.has(item.id);if(isSelectable||onClick){let defaultTabIndex=0===index&&!selectedIndex;tabIndex=!item.isDisabled&&(index===selectedIndex||defaultTabIndex)?0:-1}let itemElm=_react.default.createElement(_EntityListItem.EntityListItem,{"data-list-item":index,"aria-label":item["aria-label"]||item.label,size:size,hideBorder:hideBorder||isLastItem,isActive:item.isActive,isDisabled:item.isDisabled,isClickable:!!(onClick||selectedIds),isSelected:isSelectable?isSelected:void 0,role:itemRole,description:item.description,truncateLabel:truncateLabels,onSpaceEnterPress:()=>handleOnClick(item),tabIndex:tabIndex,ariaLabelExpand:ariaLabelExpand,ariaLabelCollapse:ariaLabelCollapse,onClick:e=>{e.target instanceof Element&&e.target.closest("label")||handleOnClick(item)},checkboxProps:isSelectable&&{name:"list-checkbox",size:"s",checked:isSelected,onChange:()=>handleOnClick(item)},renderLabel:()=>item.label,renderLeft:getLeftIconProps?({textSize})=>_react.default.createElement(_Icon.Icon,{...getLeftIconProps(item),size:textSize}):null,renderRight:renderRightProps=>renderRightContent?renderRightContent({...renderRightProps,...item}):void 0});return _react.default.createElement(_react.default.Fragment,{key:item.id},renderItemWrapper?renderItemWrapper({item,children:itemElm}):itemElm)};return _react.default.createElement("div",{ref:listRef},isVirtualized&&maxHeight?_react.default.createElement(_VirtualizedEntityList.VirtualizedEntityList,{id:dataE2eTestId,maxHeight:maxHeight,size:size,dataShown:dataShown,selectedIndex:selectedIndex,itemTemplate:renderEntityItem,"data-e2e-test-id":dataE2eTestId,...rootAriaProps,...ariaAttributes}):_react.default.createElement(_styledcomponents.StyledList,{size:size,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"EntityList",...rootAriaProps,...ariaAttributes},dataShown.map((_item,i)=>renderEntityItem(i))))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"BaseEntityList",{enumerable:!0,get:function(){return BaseEntityList}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styledcomponents=require("./styled-components"),_useKeyboard=require("../../shared/useKeyboard"),_Icon=require("../Icon/Icon"),_EntityListItem=require("./EntityListItem"),_VirtualizedEntityList=require("./VirtualizedEntityList"),_useFocusByIndex=require("./useFocusByIndex"),_roles=require("./roles");function BaseEntityList({data,size="m",onClick,focusOnMount,isSelectable,selectedIds,onSelectionChange,onSelectionToggle,renderRightContent,renderItemWrapper,getLeftIconProps,hideBorder,filterFn,isVirtualized,maxHeight,ariaAttributes:deprecatedAriaAttributes,slotProps,role:roleProp,truncateLabels=!1,"data-e2e-test-id":dataE2eTestId,...ariaAttributes}){let rootRole,{itemRole,...rootAriaProps}=(rootRole=roleProp??"list",isSelectable&&(rootRole="listbox"),{role:rootRole,itemRole:_roles.ROLE_TO_ITEM_ROLE[rootRole],"aria-multiselectable":"listbox"===rootRole&&!!isSelectable||void 0}),ariaLabelExpand=slotProps?.toggle?.["aria-label-expand"]??deprecatedAriaAttributes?.ariaLabelExpand,ariaLabelCollapse=slotProps?.toggle?.["aria-label-collapse"]??deprecatedAriaAttributes?.ariaLabelCollapse,dataShown=(0,_react.useMemo)(()=>data.length&&filterFn?data.filter(filterFn):data,[data,filterFn]),selectedIdsSet=(0,_react.useMemo)(()=>new Set(selectedIds),[selectedIds]),listRef=(0,_react.useRef)(null),focusableItems=(0,_react.useMemo)(()=>dataShown.map(item=>({id:item.id,isDisabled:!!item.isDisabled})),[dataShown]),initialActiveIndex=(0,_react.useMemo)(()=>{let index=dataShown.findIndex(item=>item.isActive);return -1!==index?index:0},[dataShown]),{moveFocus,focusItemAtIndex,focusedIndex:selectedIndex}=(0,_useFocusByIndex.useFocusByIndex)({containerRef:listRef,nodeSelector:"data-list-item",data:focusableItems,preventScroll:isVirtualized,initialIndex:initialActiveIndex});(0,_react.useEffect)(()=>{focusOnMount&&focusItemAtIndex(selectedIndex)},[]),(0,_useKeyboard.useKeyboard)({ArrowDown:()=>{moveFocus(1)},ArrowUp:()=>{moveFocus(-1)}},listRef,isSelectable||!!onClick);let handleOnClick=(0,_react.useCallback)(item=>{let{id}=item;if(isSelectable){let willBeSelected=!selectedIdsSet.has(id),newSelectedIdsSet=new Set(selectedIdsSet);willBeSelected?newSelectedIdsSet.add(id):newSelectedIdsSet.delete(id),onSelectionToggle?.(id,willBeSelected),onSelectionChange?.(Array.from(newSelectedIdsSet))}onClick?.(item)},[selectedIdsSet,onSelectionChange,onSelectionToggle,onClick,isSelectable]),renderEntityItem=index=>{let tabIndex,item=dataShown[index];if(!item)return null;let isLastItem=index===dataShown.length-1,isSelected=selectedIdsSet.has(item.id);if(isSelectable||onClick){let defaultTabIndex=0===index&&!selectedIndex;tabIndex=!item.isDisabled&&(index===selectedIndex||defaultTabIndex)?0:-1}let itemElm=_react.default.createElement(_EntityListItem.EntityListItem,{"data-list-item":index,"aria-label":item["aria-label"]||item.label,size:size,hideBorder:hideBorder||isLastItem,isActive:item.isActive,isDisabled:item.isDisabled,isClickable:!!(onClick||selectedIds),isSelected:isSelectable?isSelected:void 0,role:itemRole,description:item.description,truncateLabel:truncateLabels,onSpaceEnterPress:()=>handleOnClick(item),tabIndex:tabIndex,ariaLabelExpand:ariaLabelExpand,ariaLabelCollapse:ariaLabelCollapse,onClick:e=>{e.target instanceof Element&&e.target.closest("label")||handleOnClick(item)},checkboxProps:isSelectable?{name:"list-checkbox",size:"s",checked:isSelected,onChange:()=>handleOnClick(item)}:void 0,renderLabel:()=>item.label,renderLeft:getLeftIconProps?({textSize})=>_react.default.createElement(_Icon.Icon,{...getLeftIconProps(item),size:textSize}):void 0,renderRight:renderRightProps=>renderRightContent?renderRightContent({...renderRightProps,...item}):void 0});return _react.default.createElement(_react.default.Fragment,{key:item.id},renderItemWrapper?renderItemWrapper({item,children:itemElm}):itemElm)};return _react.default.createElement("div",{ref:listRef},isVirtualized&&maxHeight?_react.default.createElement(_VirtualizedEntityList.VirtualizedEntityList,{id:dataE2eTestId,maxHeight:maxHeight,size:size,dataShown:dataShown,selectedIndex:selectedIndex,itemTemplate:renderEntityItem,"data-e2e-test-id":dataE2eTestId,...rootAriaProps,...ariaAttributes}):_react.default.createElement(_styledcomponents.StyledList,{size:size,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"EntityList",...rootAriaProps,...ariaAttributes},dataShown.map((_item,i)=>renderEntityItem(i))))}

package/build/cjs/components/EntityList/EntityItemBody.d.ts

@@ -1,3 +1,5 @@
 import React from "react";
 import type { EntityListItemProps } from "./types";
-export declare function EntityItemBody({ checkboxProps, description, renderLabel, renderLeft, renderRight, tabIndex, size, truncateLabel, }: Partial<EntityListItemProps>): React.ReactElement;
+type EntityItemBodyProps = Partial<EntityListItemProps> & Pick<EntityListItemProps, "renderLabel">;
+export declare function EntityItemBody({ checkboxProps, description, renderLabel, renderLeft, renderRight, tabIndex, size, truncateLabel, }: EntityItemBodyProps): React.ReactElement;
+export {};

package/build/cjs/components/EntityList/EntityItemBody.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"EntityItemBody",{enumerable:!0,get:function(){return EntityItemBody}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Checkbox=require("../Form/Checkbox/Checkbox"),_EntityListItemText=require("./EntityListItemText"),_Inline=require("../Inline/Inline"),_styledcomponents=require("./styled-components"),StyledLabel=(0,_styled.default)(_styledcomponents.StyledWrapperOffset,{target:"e1l7tkuv0",label:"StyledLabel"})(({theme,size})=>({cursor:"pointer",display:"block",margin:`-${theme.variables.size.spacing["xs"===size?"xxs":size]} 0`})),StyledMinHeightCell=(0,_styled.default)("div",{target:"e1l7tkuv1",label:"StyledMinHeightCell"})(({theme,textSize})=>({minHeight:"s"===textSize?`calc(${theme.variables.size.spacing.m} + ${theme.variables.size.spacing.xxs})`:theme.variables.size.spacing.l,display:"flex",alignItems:"center"})),hasInteractiveProps=element=>["onClick","onMouseDown","onPointerDown"].some(p=>"function"==typeof element.props?.[p]),isInteractiveElement=element=>(0,_react.isValidElement)(element)&&(hasInteractiveProps(element)||"href"in(element.props??{}));function EntityItemBody({checkboxProps,description,renderLabel,renderLeft,renderRight,tabIndex,size="m",truncateLabel}){let textSize="xs"===size?"s":"m",rightElement=renderRight?.({textSize,actionSize:"l"===size?"m":"s",tabIndex});return _react.default.createElement(_Inline.Inline,{noWrap:!0,alignItems:"spaceBetween",space:["xs","m"]},checkboxProps?_react.default.createElement(StyledLabel,{as:"label",size:size,"aria-hidden":"true"},_react.default.createElement(_Inline.Inline,{noWrap:!0,space:["xs","m"]},_react.default.createElement(_Checkbox.CheckboxRaw,{...checkboxProps,inert:""}),_react.default.createElement(_EntityListItemText.EntityListItemText,{size:textSize,description:description,truncateLabel:truncateLabel},renderLabel({textSize})))):_react.default.createElement(_Inline.Inline,{noWrap:!0,space:["xs","m"]},renderLeft&&renderLeft({textSize}),_react.default.createElement(_EntityListItemText.EntityListItemText,{size:textSize,description:description,truncateLabel:truncateLabel},renderLabel({textSize}))),rightElement&&_react.default.createElement(StyledMinHeightCell,{textSize:textSize},isInteractiveElement(rightElement)?(0,_react.cloneElement)(rightElement,{tabIndex,onClick:event=>{event.stopPropagation(),rightElement.props.onClick?.(event)},...rightElement.props.onMouseDown&&{onMouseDown:event=>{event.stopPropagation(),rightElement.props.onMouseDown?.(event)}},...rightElement.props.onPointerDown&&{onPointerDown:event=>{event.stopPropagation(),rightElement.props.onPointerDown?.(event)}}}):rightElement))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"EntityItemBody",{enumerable:!0,get:function(){return EntityItemBody}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Checkbox=require("../Form/Checkbox/Checkbox"),_EntityListItemText=require("./EntityListItemText"),_Inline=require("../Inline/Inline"),_styledcomponents=require("./styled-components"),StyledLabel=(0,_styled.default)(_styledcomponents.StyledWrapperOffset,{target:"e1acsa3u0",label:"StyledLabel"})(({theme,size})=>({cursor:"pointer",display:"block",margin:`-${theme.variables.size.spacing["xs"===size?"xxs":size]} 0`})),StyledMinHeightCell=(0,_styled.default)("div",{target:"e1acsa3u1",label:"StyledMinHeightCell"})(({theme,textSize})=>({minHeight:"s"===textSize?`calc(${theme.variables.size.spacing.m} + ${theme.variables.size.spacing.xxs})`:theme.variables.size.spacing.l,display:"flex",alignItems:"center"})),hasInteractiveProps=element=>["onClick","onMouseDown","onPointerDown"].some(p=>"function"==typeof element.props?.[p]),isInteractiveElement=element=>(0,_react.isValidElement)(element)&&(hasInteractiveProps(element)||"href"in(element.props??{}));function EntityItemBody({checkboxProps,description,renderLabel,renderLeft,renderRight,tabIndex,size="m",truncateLabel}){let textSize="xs"===size?"s":"m",rightElement=renderRight?.({textSize,actionSize:"l"===size?"m":"s",tabIndex});return _react.default.createElement(_Inline.Inline,{noWrap:!0,alignItems:"spaceBetween",space:["xs","m"]},checkboxProps?_react.default.createElement(StyledLabel,{as:"label",size:size,"aria-hidden":"true"},_react.default.createElement(_Inline.Inline,{noWrap:!0,space:["xs","m"]},_react.default.createElement(_Checkbox.CheckboxRaw,{...checkboxProps,inert:""}),_react.default.createElement(_EntityListItemText.EntityListItemText,{size:textSize,description:description,truncateLabel:truncateLabel},renderLabel({textSize})))):_react.default.createElement(_Inline.Inline,{noWrap:!0,space:["xs","m"]},renderLeft&&renderLeft({textSize}),_react.default.createElement(_EntityListItemText.EntityListItemText,{size:textSize,description:description,truncateLabel:truncateLabel},renderLabel({textSize}))),rightElement&&_react.default.createElement(StyledMinHeightCell,{textSize:textSize},isInteractiveElement(rightElement)?(0,_react.cloneElement)(rightElement,{tabIndex,onClick:event=>{event.stopPropagation(),rightElement.props.onClick?.(event)},...rightElement.props.onMouseDown&&{onMouseDown:event=>{event.stopPropagation(),rightElement.props.onMouseDown?.(event)}},...rightElement.props.onPointerDown&&{onPointerDown:event=>{event.stopPropagation(),rightElement.props.onPointerDown?.(event)}}}):rightElement))}

package/build/cjs/components/EntityList/EntityListItem.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"EntityListItem",{enumerable:!0,get:function(){return EntityListItem}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_EntityItemBody=require("./EntityItemBody"),_useKeyboard=require("../../shared/useKeyboard"),_styledcomponents=require("./styled-components"),isSelfEvent=e=>e.target===e.currentTarget,useButtonKeyboard=({ref:globalRef,isActive,onSpaceEnterPress})=>{let localRef=(0,_react.useRef)(null);return(0,_useKeyboard.useKeyboard)({"Space Enter":onSpaceEnterPress},localRef,isActive,!0),(0,_react.useImperativeHandle)(globalRef,()=>localRef.current),localRef},EntityListItem=_react.default.forwardRef(({checkboxProps,description,hideBorder,isActive,isClickable,isDisabled,onClick,renderLabel,renderLeft,renderRight,role,tabIndex,onSpaceEnterPress,size="m","aria-label":ariaLabel,"data-list-item":dataListItem,isSelected,truncateLabel,onPointerEnter,onPointerLeave,onFocus,onBlur,onKeyDown,"aria-describedby":ariaDescribedBy},ref)=>{let handleOnClick=(0,_react.useCallback)(e=>{isClickable&&onClick&&onClick(e)},[onClick,isClickable]),buttonRef=useButtonKeyboard({ref,isActive:isClickable&&!isDisabled&&void 0!==tabIndex,onSpaceEnterPress}),supportsAriaSelected="menuitem"!==role,supportsAriaCurrent="option"!==role;return _react.default.createElement(_styledcomponents.StyledEntityListItemButton,{role:role,"aria-label":ariaLabel,"aria-describedby":ariaDescribedBy,"aria-selected":supportsAriaSelected?isSelected:void 0,"aria-current":supportsAriaCurrent&&isActive?isActive:void 0,"aria-disabled":isDisabled,size:size,tabIndex:tabIndex,ref:buttonRef,"data-list-item":dataListItem,"data-id":"list-item",onClick:handleOnClick,onPointerEnter:onPointerEnter,onPointerLeave:onPointerLeave,onFocus:e=>{isSelfEvent(e)&&onFocus?.(e)},onBlur:e=>{isSelfEvent(e)&&onBlur?.(e)},onKeyDown:onKeyDown,isClickable:isClickable,isActive:isActive,isDisabled:isDisabled},_react.default.createElement(_styledcomponents.StyledEntityListItemWrapper,{size:size,hideBorder:hideBorder||"xs"===size},_react.default.createElement(_EntityItemBody.EntityItemBody,{size:size,tabIndex:tabIndex,checkboxProps:checkboxProps,description:description,renderLabel:renderLabel,renderLeft:renderLeft,renderRight:renderRight,truncateLabel:truncateLabel})))});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"EntityListItem",{enumerable:!0,get:function(){return EntityListItem}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_EntityItemBody=require("./EntityItemBody"),_useKeyboard=require("../../shared/useKeyboard"),_styledcomponents=require("./styled-components"),isSelfEvent=e=>e.target===e.currentTarget,useButtonKeyboard=({ref:globalRef,isActive,onSpaceEnterPress})=>{let localRef=(0,_react.useRef)(null);return(0,_useKeyboard.useKeyboard)({"Space Enter":e=>onSpaceEnterPress?.(e)},localRef,isActive,!0),(0,_react.useImperativeHandle)(globalRef,()=>localRef.current),localRef},EntityListItem=_react.default.forwardRef(({checkboxProps,description,hideBorder,isActive,isClickable,isDisabled,onClick,renderLabel,renderLeft,renderRight,role,tabIndex,onSpaceEnterPress,size="m","aria-label":ariaLabel,"data-list-item":dataListItem,isSelected,truncateLabel,onPointerEnter,onPointerLeave,onFocus,onBlur,onKeyDown,"aria-describedby":ariaDescribedBy},ref)=>{let handleOnClick=(0,_react.useCallback)(e=>{isClickable&&onClick&&onClick(e)},[onClick,isClickable]),buttonRef=useButtonKeyboard({ref,isActive:!!isClickable&&!isDisabled&&void 0!==tabIndex,onSpaceEnterPress}),supportsAriaSelected="menuitem"!==role,supportsAriaCurrent="option"!==role;return _react.default.createElement(_styledcomponents.StyledEntityListItemButton,{role:role,"aria-label":ariaLabel,"aria-describedby":ariaDescribedBy,"aria-selected":supportsAriaSelected?isSelected:void 0,"aria-current":supportsAriaCurrent&&isActive?isActive:void 0,"aria-disabled":isDisabled,size:size,tabIndex:tabIndex,ref:buttonRef,"data-list-item":dataListItem,"data-id":"list-item",onClick:handleOnClick,onPointerEnter:onPointerEnter,onPointerLeave:onPointerLeave,onFocus:e=>{isSelfEvent(e)&&onFocus?.(e)},onBlur:e=>{isSelfEvent(e)&&onBlur?.(e)},onKeyDown:onKeyDown,isClickable:isClickable,isActive:isActive,isDisabled:isDisabled},_react.default.createElement(_styledcomponents.StyledEntityListItemWrapper,{size:size,hideBorder:hideBorder||"xs"===size},_react.default.createElement(_EntityItemBody.EntityItemBody,{size:size,tabIndex:tabIndex,checkboxProps:checkboxProps,description:description,renderLabel:renderLabel,renderLeft:renderLeft,renderRight:renderRight,truncateLabel:truncateLabel})))});

package/build/cjs/components/EntityTree/BaseEntityTree.d.ts

@@ -1,7 +1,7 @@
 import type { AriaAttributes } from "react";
 import React from "react";
-import type { EntityListAriaAttributes, EntityListItemProps } from "../EntityList/types";
 import type { SlotProps } from "../../shared/slotProps";
+import type { EntityListAriaAttributes, EntityListItemProps } from "../EntityList/types";
 import type { NodeID, TreeNode, CheckboxState } from "./types";
 export type TreeNodeWithUIState = TreeNode & {
     isExpanded: boolean;
@@ -17,6 +17,7 @@ export type RenderTreeItemWrapperProps = {
 };
 export type EntityTreeSlotProps = SlotProps<{
     toggle: {
+        /** TODO(DS): make required — the toggle is icon-only. See follow-up. */
         "aria-label-expand"?: string;
         "aria-label-collapse"?: string;
     };
@@ -69,7 +70,7 @@ export type EntityTreeProps = {
     /** How many expanded nodes we render at once. The tree slows down a page if the size 1000+  */
     chunkSize?: number;
     /** If provided, the function is used to render an element in the trail of a node. */
-    renderRightContent?: (props: TreeNode & Parameters<EntityListItemProps["renderRight"]>[0]) => React.ReactNode;
+    renderRightContent?: (props: TreeNode & Parameters<NonNullable<EntityListItemProps["renderRight"]>>[0]) => React.ReactNode;
     /**
      * Wraps each rendered row, so an overlay (e.g. `Tooltip`) can be composed around
      * it from the outside. The wrapper is applied inside the `treeitem` element, so it

package/build/cjs/components/EntityTree/BaseEntityTree.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"BaseEntityTree",{enumerable:!0,get:function(){return BaseEntityTree}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_Button=require("../Button/Button"),_Box=require("../Box/Box"),_styledcomponents=require("../EntityList/styled-components"),_EntityTreeItem=require("./EntityTreeItem"),_useKeyboard=require("../../shared/useKeyboard"),_useFocusByIndex=require("../EntityList/useFocusByIndex"),_Text=require("../Typography/Text/Text"),_tree=require("./tree"),flattenTree=(data,expandedIds,expadedAll)=>{let flattened=[];return data.forEach(node=>{flattened.push(node),(node.children.length>0&&expandedIds[node.id]||expadedAll)&&flattened.push(...flattenTree(node.children,expandedIds,expadedAll))}),flattened},getLastNodeOfList=({node,data,level,isParentsLastOfLvl})=>{let currentLastNodeOfLvl=node.id===data[data.length-1].id;return 0===level?currentLastNodeOfLvl:isParentsLastOfLvl&&currentLastNodeOfLvl},useTreeTruncation=({chunkSize,data,expandAll,nodeExpandedState})=>{let[maxNodesCount,setMaxNodesCount]=(0,_react.useState)(chunkSize),{result,hasMoreNodes}=(0,_react.useMemo)(()=>(0,_tree.trimDataByMaxSize)(data,nodeExpandedState,expandAll,maxNodesCount),[data,nodeExpandedState,expandAll,maxNodesCount]);return{handleIncreaseMaxNodeCount:(0,_react.useCallback)(()=>{setMaxNodesCount(prev=>prev+chunkSize)},[chunkSize]),result,hasMoreNodes}},Node=({isFirstNode,nodeChildrenMap,nodeCheckboxState,nodeExpandedState,handleSelectionChange,handleToggle,expandAll,onNodeClick,hideBorder,size,showItemsCount,renderRightContent,renderItemWrapper,activeId,focusedNodeId,node,level,renderFn,isLastNodeOfList,ariaLabelExpand,ariaLabelCollapse,visibleNodeIndexMap})=>{let readOnly=null===nodeCheckboxState,hasChildren=node.children.length>0,expandedState=!!expandAll||!!nodeExpandedState[node.id],leafItems=(0,_tree.getLeafNodeIds)(nodeChildrenMap,node.id),totalItemsCount=leafItems.length,selectedItemsCount=nodeCheckboxState?leafItems.filter(leafId=>"checked"===nodeCheckboxState[leafId]).length:null,countLabel=nodeCheckboxState?`(${selectedItemsCount}/${totalItemsCount})`:`(${totalItemsCount})`,lastLeaf=!hasChildren&&!node.isFiltered,isExpanded=lastLeaf?void 0:expandedState,{children,...nodeDataWithoutChildren}=node,isFocused=focusedNodeId===node.id,treeItemElm=_react.default.createElement(_EntityTreeItem.EntityTreeItem,{"data-list-item":visibleNodeIndexMap[node.id],hideBorder:hideBorder||isLastNodeOfList&&(!isExpanded||node.isFiltered),tabIndex:isFocused||null===focusedNodeId&&isFirstNode?0:-1,size:size,lSpaceStep:level,onSpaceEnterPress:()=>{if(readOnly){handleToggle(node.id),onNodeClick?.(nodeDataWithoutChildren);return}handleSelectionChange(node.id)},description:node.description,renderLabel:({textSize})=>_react.default.createElement(_react.default.Fragment,null,node.label,showItemsCount&&!lastLeaf&&_react.default.createElement(_Text.Text,{as:"span",size:textSize,color:"tertiary"}," ",countLabel)),isActive:activeId===node.id,isExpanded:isExpanded,isDisabledExpand:expandAll,checkboxProps:!readOnly&&{size:"s",name:node.label,checked:nodeCheckboxState?.[node.id]==="checked",indeterminate:nodeCheckboxState?.[node.id]==="indeterminate",onChange:()=>handleSelectionChange(node.id)},onExpandClick:e=>{e.stopPropagation(),handleToggle(node.id)},isClickable:readOnly,onClick:()=>{handleToggle(node.id),onNodeClick?.(nodeDataWithoutChildren)},renderRight:renderRightContent?renderRightProps=>renderRightContent({...renderRightProps,...node}):void 0,ariaLabelExpand:ariaLabelExpand,ariaLabelCollapse:ariaLabelCollapse,"aria-label":node.label,"aria-level":level+1},hasChildren&&_react.default.createElement("div",{role:"group"},renderFn({data:children,level:level+1,renderFn,isParentsLastOfLvl:isLastNodeOfList})));return renderItemWrapper?renderItemWrapper({item:node,children:treeItemElm}):treeItemElm},makeRenderTreeBranches=renderTreeArgs=>({data,level,renderFn,isParentsLastOfLvl})=>data.map((node,i)=>{let isFirstNode=0===level&&0===i,isLastNodeOfList=getLastNodeOfList({node,data,level,isParentsLastOfLvl});return _react.default.createElement(Node,{key:node.id,level:level,node:node,isFirstNode:isFirstNode,renderFn:renderFn,isLastNodeOfList:isLastNodeOfList,...renderTreeArgs})}),BaseEntityTree=({ariaAttributes:deprecatedAriaAttributes,slotProps,data,selectedIds,onSelectionChange,onSelectionToggle,onNodeClick,expandedIds=[],onToggle,activeId,chunkSize=10,filterFn,onTreeChange,hideBorder=!1,size="m",showItemsCount=!0,showMoreButtonLabel,renderRightContent,renderItemWrapper,"data-e2e-test-id":dataE2eTestId,...ariaAttributes})=>{let nodeChildrenMap=Object.assign({},...data.map(tree=>(0,_tree.getNodeChildrenMap)(tree))),nodeCheckboxState=selectedIds?Object.assign({},...data.map(tree=>(0,_tree.getTreeCheckboxState)(nodeChildrenMap,tree.id,selectedIds))):null,nodeExpandedState=expandedIds.reduce((acc,id)=>(acc[id]=!0,acc),{}),visibleActiveNodeId=(0,_tree.getVisibleActiveNodeId)(nodeChildrenMap,nodeExpandedState,activeId),handleExpand=(0,_react.useCallback)(targetId=>{onToggle&&!expandedIds.includes(targetId)&&onToggle(expandedIds.concat([targetId]))},[expandedIds,onToggle]),handleCollapse=(0,_react.useCallback)(targetId=>{onToggle&&expandedIds.includes(targetId)&&onToggle(expandedIds.filter(id=>id!==targetId))},[expandedIds,onToggle]),handleToggle=(0,_react.useCallback)(targetId=>{expandedIds.includes(targetId)?handleCollapse(targetId):handleExpand(targetId)},[expandedIds,handleCollapse,handleExpand]),dataShown=filterFn?data.map(tree=>(0,_tree.filterTree)(tree,filterFn)).filter(Boolean):data;(0,_react.useEffect)(()=>{onTreeChange&&onTreeChange(dataShown.map(tree=>(0,_tree.mapTree)(tree,node=>({...node,checkedState:!!nodeCheckboxState&&nodeCheckboxState[node.id],isExpanded:!!nodeExpandedState[node.id]}))))},[dataShown,nodeCheckboxState,nodeExpandedState,onTreeChange]);let expandAll=!!filterFn,{hasMoreNodes,handleIncreaseMaxNodeCount,result}=useTreeTruncation({chunkSize,data:dataShown,nodeExpandedState,expandAll}),listRef=_react.default.useRef(null),visibleNodes=(0,_react.useMemo)(()=>flattenTree(result,nodeExpandedState,expandAll),[result,nodeExpandedState,expandAll]),visibleNodeIndexMap=(0,_react.useMemo)(()=>visibleNodes.reduce((acc,node,index)=>(acc[node.id]=index,acc),{}),[visibleNodes]),focusableNodes=(0,_react.useMemo)(()=>visibleNodes.map(node=>({id:node.id,isDisabled:!!node.isDisabled})),[visibleNodes]),{moveFocus,focusedIndex}=(0,_useFocusByIndex.useFocusByIndex)({containerRef:listRef,nodeSelector:"data-list-item",data:focusableNodes}),focusedNodeId=focusedIndex>=0?visibleNodes[focusedIndex]?.id??null:null;(0,_useKeyboard.useKeyboard)({ArrowDown:()=>{moveFocus(1)},ArrowUp:()=>{moveFocus(-1)},ArrowRight:()=>{!expandAll&&focusedNodeId&&nodeChildrenMap[focusedNodeId]?.length&&!nodeExpandedState[focusedNodeId]&&handleExpand(focusedNodeId)},ArrowLeft:()=>{!expandAll&&focusedNodeId&&nodeChildrenMap[focusedNodeId]?.length&&nodeExpandedState[focusedNodeId]&&handleCollapse(focusedNodeId)}},listRef,!!visibleNodes.length);let renderTreeBranches=makeRenderTreeBranches({nodeChildrenMap,nodeCheckboxState,nodeExpandedState,handleSelectionChange:targetId=>{if(onSelectionChange){let isSelected,updatedSelectedIds=[];if(0===nodeChildrenMap[targetId].length)isSelected=!selectedIds.includes(targetId),updatedSelectedIds=selectedIds.includes(targetId)?selectedIds.filter(id=>id!==targetId):selectedIds.concat([targetId]);else{let affectedLeafNodeIds=(0,_tree.getLeafNodeIds)(nodeChildrenMap,targetId),hasUncheckedChildren=affectedLeafNodeIds.some(leafId=>!selectedIds.includes(leafId));updatedSelectedIds=hasUncheckedChildren?selectedIds.concat(affectedLeafNodeIds.filter(id=>!selectedIds.includes(id))):selectedIds.filter(id=>!affectedLeafNodeIds.includes(id)),isSelected=hasUncheckedChildren}onSelectionToggle?.(targetId,isSelected),onSelectionChange(updatedSelectedIds)}},handleToggle,onNodeClick:node=>{onNodeClick?.(node)},expandAll,hideBorder,size,showItemsCount,renderRightContent,renderItemWrapper,activeId:visibleActiveNodeId,focusedNodeId,visibleNodeIndexMap,ariaLabelExpand:slotProps?.toggle?.["aria-label-expand"]??deprecatedAriaAttributes?.ariaLabelExpand,ariaLabelCollapse:slotProps?.toggle?.["aria-label-collapse"]??deprecatedAriaAttributes?.ariaLabelCollapse});return _react.default.createElement("div",null,_react.default.createElement(_styledcomponents.StyledList,{ref:listRef,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"EntityTree",size:size,...ariaAttributes,role:"tree","aria-multiselectable":!!nodeCheckboxState||void 0},renderTreeBranches({data:result,level:0,renderFn:renderTreeBranches})),hasMoreNodes&&_react.default.createElement(_styledcomponents.StyledShowMore,null,_react.default.createElement(_Box.Box,{alignText:"center",space:"xs"},_react.default.createElement(_Button.Button,{fullWidth:!0,size:"s",variant:"tertiary",onClick:handleIncreaseMaxNodeCount},showMoreButtonLabel))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"BaseEntityTree",{enumerable:!0,get:function(){return BaseEntityTree}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_Button=require("../Button/Button"),_Box=require("../Box/Box"),_styledcomponents=require("../EntityList/styled-components"),_EntityTreeItem=require("./EntityTreeItem"),_useKeyboard=require("../../shared/useKeyboard"),_useFocusByIndex=require("../EntityList/useFocusByIndex"),_Text=require("../Typography/Text/Text"),_tree=require("./tree"),flattenTree=(data,expandedIds,expadedAll)=>{let flattened=[];return data.forEach(node=>{flattened.push(node),(node.children.length>0&&expandedIds[node.id]||expadedAll)&&flattened.push(...flattenTree(node.children,expandedIds,expadedAll))}),flattened},getLastNodeOfList=({node,data,level,isParentsLastOfLvl})=>{let currentLastNodeOfLvl=node.id===data[data.length-1].id;return 0===level?currentLastNodeOfLvl:isParentsLastOfLvl&&currentLastNodeOfLvl},useTreeTruncation=({chunkSize,data,expandAll,nodeExpandedState})=>{let[maxNodesCount,setMaxNodesCount]=(0,_react.useState)(chunkSize),{result,hasMoreNodes}=(0,_react.useMemo)(()=>(0,_tree.trimDataByMaxSize)(data,nodeExpandedState,expandAll,maxNodesCount),[data,nodeExpandedState,expandAll,maxNodesCount]);return{handleIncreaseMaxNodeCount:(0,_react.useCallback)(()=>{setMaxNodesCount(prev=>prev+chunkSize)},[chunkSize]),result,hasMoreNodes}},Node=({isFirstNode,nodeChildrenMap,nodeCheckboxState,nodeExpandedState,handleSelectionChange,handleToggle,expandAll,onNodeClick,hideBorder,size,showItemsCount,renderRightContent,renderItemWrapper,activeId,focusedNodeId,node,level,renderFn,isLastNodeOfList,ariaLabelExpand,ariaLabelCollapse,visibleNodeIndexMap})=>{let readOnly=null===nodeCheckboxState,hasChildren=node.children.length>0,expandedState=!!expandAll||!!nodeExpandedState[node.id],leafItems=(0,_tree.getLeafNodeIds)(nodeChildrenMap,node.id),totalItemsCount=leafItems.length,selectedItemsCount=nodeCheckboxState?leafItems.filter(leafId=>"checked"===nodeCheckboxState[leafId]).length:null,countLabel=nodeCheckboxState?`(${selectedItemsCount}/${totalItemsCount})`:`(${totalItemsCount})`,lastLeaf=!hasChildren&&!node.isFiltered,isExpanded=lastLeaf?void 0:expandedState,{children,...nodeDataWithoutChildren}=node,isFocused=focusedNodeId===node.id,treeItemElm=_react.default.createElement(_EntityTreeItem.EntityTreeItem,{"data-list-item":visibleNodeIndexMap[node.id],hideBorder:hideBorder||isLastNodeOfList&&(!isExpanded||node.isFiltered),tabIndex:isFocused||null===focusedNodeId&&isFirstNode?0:-1,size:size,lSpaceStep:level,onSpaceEnterPress:()=>{if(readOnly){handleToggle(node.id),onNodeClick?.(nodeDataWithoutChildren);return}handleSelectionChange(node.id)},description:node.description,renderLabel:({textSize})=>_react.default.createElement(_react.default.Fragment,null,node.label,showItemsCount&&!lastLeaf&&_react.default.createElement(_Text.Text,{as:"span",size:textSize,color:"tertiary"}," ",countLabel)),isActive:activeId===node.id,isExpanded:isExpanded,isDisabledExpand:expandAll,checkboxProps:readOnly?void 0:{size:"s",name:node.label,checked:nodeCheckboxState?.[node.id]==="checked",indeterminate:nodeCheckboxState?.[node.id]==="indeterminate",onChange:()=>handleSelectionChange(node.id)},onExpandClick:e=>{e.stopPropagation(),handleToggle(node.id)},isClickable:readOnly,onClick:()=>{handleToggle(node.id),onNodeClick?.(nodeDataWithoutChildren)},renderRight:renderRightContent?renderRightProps=>renderRightContent({...renderRightProps,...node}):void 0,ariaLabelExpand:ariaLabelExpand,ariaLabelCollapse:ariaLabelCollapse,"aria-label":node.label,"aria-level":level+1},hasChildren&&_react.default.createElement("div",{role:"group"},renderFn({data:children,level:level+1,renderFn,isParentsLastOfLvl:isLastNodeOfList})));return renderItemWrapper?renderItemWrapper({item:node,children:treeItemElm}):treeItemElm},makeRenderTreeBranches=renderTreeArgs=>({data,level,renderFn,isParentsLastOfLvl=!1})=>data.map((node,i)=>{let isFirstNode=0===level&&0===i,isLastNodeOfList=getLastNodeOfList({node,data,level,isParentsLastOfLvl});return _react.default.createElement(Node,{key:node.id,level:level,node:node,isFirstNode:isFirstNode,renderFn:renderFn,isLastNodeOfList:isLastNodeOfList,...renderTreeArgs})}),isMatchingTreeNode=tree=>null!==tree,BaseEntityTree=({ariaAttributes:deprecatedAriaAttributes,slotProps,data,selectedIds,onSelectionChange,onSelectionToggle,onNodeClick,expandedIds=[],onToggle,activeId,chunkSize=10,filterFn,onTreeChange,hideBorder=!1,size="m",showItemsCount=!0,showMoreButtonLabel,renderRightContent,renderItemWrapper,"data-e2e-test-id":dataE2eTestId,...ariaAttributes})=>{let nodeChildrenMap=Object.assign({},...data.map(tree=>(0,_tree.getNodeChildrenMap)(tree))),nodeCheckboxState=selectedIds?Object.assign({},...data.map(tree=>(0,_tree.getTreeCheckboxState)(nodeChildrenMap,tree.id,selectedIds))):null,nodeExpandedState=expandedIds.reduce((acc,id)=>(acc[id]=!0,acc),{}),visibleActiveNodeId=(0,_tree.getVisibleActiveNodeId)(nodeChildrenMap,nodeExpandedState,activeId),handleExpand=(0,_react.useCallback)(targetId=>{onToggle&&!expandedIds.includes(targetId)&&onToggle(expandedIds.concat([targetId]))},[expandedIds,onToggle]),handleCollapse=(0,_react.useCallback)(targetId=>{onToggle&&expandedIds.includes(targetId)&&onToggle(expandedIds.filter(id=>id!==targetId))},[expandedIds,onToggle]),handleToggle=(0,_react.useCallback)(targetId=>{expandedIds.includes(targetId)?handleCollapse(targetId):handleExpand(targetId)},[expandedIds,handleCollapse,handleExpand]),dataShown=filterFn?data.map(tree=>(0,_tree.filterTree)(tree,filterFn)).filter(isMatchingTreeNode):data;(0,_react.useEffect)(()=>{onTreeChange&&onTreeChange(dataShown.map(tree=>(0,_tree.mapTree)(tree,node=>({...node,checkedState:!!nodeCheckboxState&&nodeCheckboxState[node.id],isExpanded:!!nodeExpandedState[node.id]}))))},[dataShown,nodeCheckboxState,nodeExpandedState,onTreeChange]);let expandAll=!!filterFn,{hasMoreNodes,handleIncreaseMaxNodeCount,result}=useTreeTruncation({chunkSize,data:dataShown,nodeExpandedState,expandAll}),listRef=_react.default.useRef(null),visibleNodes=(0,_react.useMemo)(()=>flattenTree(result,nodeExpandedState,expandAll),[result,nodeExpandedState,expandAll]),visibleNodeIndexMap=(0,_react.useMemo)(()=>visibleNodes.reduce((acc,node,index)=>(acc[node.id]=index,acc),{}),[visibleNodes]),focusableNodes=(0,_react.useMemo)(()=>visibleNodes.map(node=>({id:node.id,isDisabled:!!node.isDisabled})),[visibleNodes]),{moveFocus,focusedIndex}=(0,_useFocusByIndex.useFocusByIndex)({containerRef:listRef,nodeSelector:"data-list-item",data:focusableNodes}),focusedNodeId=focusedIndex>=0?visibleNodes[focusedIndex]?.id??null:null;(0,_useKeyboard.useKeyboard)({ArrowDown:()=>{moveFocus(1)},ArrowUp:()=>{moveFocus(-1)},ArrowRight:()=>{!expandAll&&focusedNodeId&&nodeChildrenMap[focusedNodeId]?.length&&!nodeExpandedState[focusedNodeId]&&handleExpand(focusedNodeId)},ArrowLeft:()=>{!expandAll&&focusedNodeId&&nodeChildrenMap[focusedNodeId]?.length&&nodeExpandedState[focusedNodeId]&&handleCollapse(focusedNodeId)}},listRef,!!visibleNodes.length);let renderTreeBranches=makeRenderTreeBranches({nodeChildrenMap,nodeCheckboxState,nodeExpandedState,handleSelectionChange:targetId=>{if(onSelectionChange&&selectedIds){let isSelected,updatedSelectedIds=[];if(0===nodeChildrenMap[targetId].length)isSelected=!selectedIds.includes(targetId),updatedSelectedIds=selectedIds.includes(targetId)?selectedIds.filter(id=>id!==targetId):selectedIds.concat([targetId]);else{let affectedLeafNodeIds=(0,_tree.getLeafNodeIds)(nodeChildrenMap,targetId),hasUncheckedChildren=affectedLeafNodeIds.some(leafId=>!selectedIds.includes(leafId));updatedSelectedIds=hasUncheckedChildren?selectedIds.concat(affectedLeafNodeIds.filter(id=>!selectedIds.includes(id))):selectedIds.filter(id=>!affectedLeafNodeIds.includes(id)),isSelected=hasUncheckedChildren}onSelectionToggle?.(targetId,isSelected),onSelectionChange(updatedSelectedIds)}},handleToggle,onNodeClick:node=>{onNodeClick?.(node)},expandAll,hideBorder,size,showItemsCount,renderRightContent,renderItemWrapper,activeId:visibleActiveNodeId,focusedNodeId,visibleNodeIndexMap,ariaLabelExpand:slotProps?.toggle?.["aria-label-expand"]??deprecatedAriaAttributes?.ariaLabelExpand,ariaLabelCollapse:slotProps?.toggle?.["aria-label-collapse"]??deprecatedAriaAttributes?.ariaLabelCollapse});return _react.default.createElement("div",null,_react.default.createElement(_styledcomponents.StyledList,{ref:listRef,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"EntityTree",size:size,...ariaAttributes,role:"tree","aria-multiselectable":!!nodeCheckboxState||void 0},renderTreeBranches({data:result,level:0,renderFn:renderTreeBranches})),hasMoreNodes&&_react.default.createElement(_styledcomponents.StyledShowMore,null,_react.default.createElement(_Box.Box,{alignText:"center",space:"xs"},_react.default.createElement(_Button.Button,{fullWidth:!0,size:"s",variant:"tertiary",onClick:handleIncreaseMaxNodeCount},showMoreButtonLabel))))};

package/build/cjs/components/EntityTree/EntityTreeItem.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"EntityTreeItem",{enumerable:!0,get:function(){return EntityTreeItem}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_mediaQueries=require("../../shared/mediaQueries"),_EntityTreeItemExpandButton=require("./EntityTreeItemExpandButton"),_useKeyboard=require("../../shared/useKeyboard"),_mixins=require("../../shared/mixins"),_EntityItemBody=require("../EntityList/EntityItemBody"),_styledcomponents=require("../EntityList/styled-components"),isSelfEvent=e=>e.target===e.currentTarget,StyledEntityTreeItemWrapper=(0,_styled.default)(_styledcomponents.StyledEntityListItemWrapper,{target:"e18sww000",label:"StyledEntityTreeItemWrapper"})({paddingLeft:"0 !important"}),StyledEntityTreeItemContainer=(0,_styled.default)(_styledcomponents.StyledEntityListItemButton,{target:"e18sww001",label:"StyledEntityTreeItemContainer"})(({theme,hasExpandableIcon,lSpaceStep})=>{let getSize=(baseOffset,deepestNodeOffset)=>`calc(${baseOffset} * ${lSpaceStep} + ${hasExpandableIcon?"0px":deepestNodeOffset} + ${theme.variables.size.spacing.xxs})`;return{...(0,_mixins.getFocusStyles)({offset:-2}),...(0,_mediaQueries.useResponsiveValue)({paddingLeft:[getSize(theme.variables.size.spacing.m,"42px"),getSize(theme.variables.size.spacing.xl,"56px")]})}}),EntityTreeItem=_react.default.forwardRef(({checkboxProps,children,description,hideBorder,isActive,isClickable,isDisabled,isDisabledExpand,isExpanded,lSpaceStep,onClick,onExpandClick,onSpaceEnterPress,renderLabel,renderLeft,renderRight,size="m",tabIndex,ariaLabelExpand,ariaLabelCollapse,"aria-level":ariaLevel,"aria-label":ariaLabel,"data-list-item":dataListItem,onPointerEnter,onPointerLeave,onFocus,onBlur,onKeyDown,"aria-describedby":ariaDescribedBy},ref)=>{let hasExpandableIcon=void 0!==isExpanded,handleOnClick=(0,_react.useCallback)(e=>{onClick&&onClick(e)},[onClick]),buttonRef=(0,_react.useRef)(null);return(0,_useKeyboard.useKeyboard)({"Space Enter":onSpaceEnterPress},buttonRef,0===tabIndex&&(isClickable||!!checkboxProps),!0),(0,_react.useImperativeHandle)(ref,()=>buttonRef.current),_react.default.createElement(_styledcomponents.StyledEntityItem,{role:"treeitem","aria-expanded":hasExpandableIcon?isExpanded:void 0,"aria-checked":checkboxProps?.checked,"aria-label":ariaLabel,"aria-level":ariaLevel},_react.default.createElement(StyledEntityTreeItemContainer,{"data-list-item":dataListItem,size:size,ref:buttonRef,"data-id":"list-item",tabIndex:tabIndex,role:"presentation",isActive:isActive,hasExpandableIcon:hasExpandableIcon,lSpaceStep:lSpaceStep,isDisabled:isDisabled,onClick:handleOnClick,isClickable:isClickable,"aria-describedby":ariaDescribedBy,onPointerEnter:onPointerEnter,onPointerLeave:onPointerLeave,onFocus:e=>{isSelfEvent(e)&&onFocus?.(e)},onBlur:e=>{isSelfEvent(e)&&onBlur?.(e)},onKeyDown:onKeyDown},hasExpandableIcon&&_react.default.createElement(_EntityTreeItemExpandButton.EntityTreeItemExpandButton,{size:size,tabIndex:-1,isDisabled:isDisabledExpand||isDisabled,isExpanded:isExpanded,onClick:onExpandClick,ariaLabelExpand:ariaLabelExpand,ariaLabelCollapse:ariaLabelCollapse}),_react.default.createElement(StyledEntityTreeItemWrapper,{size:size,hideBorder:hideBorder||"xs"===size},_react.default.createElement(_EntityItemBody.EntityItemBody,{size:size,tabIndex:tabIndex,description:description,renderLabel:renderLabel,renderLeft:renderLeft,renderRight:renderRight,checkboxProps:checkboxProps}))),isExpanded&&children)});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"EntityTreeItem",{enumerable:!0,get:function(){return EntityTreeItem}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_mediaQueries=require("../../shared/mediaQueries"),_EntityTreeItemExpandButton=require("./EntityTreeItemExpandButton"),_useKeyboard=require("../../shared/useKeyboard"),_mixins=require("../../shared/mixins"),_EntityItemBody=require("../EntityList/EntityItemBody"),_styledcomponents=require("../EntityList/styled-components"),isSelfEvent=e=>e.target===e.currentTarget,StyledEntityTreeItemWrapper=(0,_styled.default)(_styledcomponents.StyledEntityListItemWrapper,{target:"ek85a5p0",label:"StyledEntityTreeItemWrapper"})({paddingLeft:"0 !important"}),StyledEntityTreeItemContainer=(0,_styled.default)(_styledcomponents.StyledEntityListItemButton,{target:"ek85a5p1",label:"StyledEntityTreeItemContainer"})(({theme,hasExpandableIcon,lSpaceStep})=>{let getSize=(baseOffset,deepestNodeOffset)=>`calc(${baseOffset} * ${lSpaceStep} + ${hasExpandableIcon?"0px":deepestNodeOffset} + ${theme.variables.size.spacing.xxs})`;return{...(0,_mixins.getFocusStyles)({offset:-2}),...(0,_mediaQueries.useResponsiveValue)({paddingLeft:[getSize(theme.variables.size.spacing.m,"42px"),getSize(theme.variables.size.spacing.xl,"56px")]})}}),EntityTreeItem=_react.default.forwardRef(({checkboxProps,children,description,hideBorder,isActive,isClickable,isDisabled,isDisabledExpand,isExpanded,lSpaceStep,onClick,onExpandClick,onSpaceEnterPress,renderLabel,renderLeft,renderRight,size="m",tabIndex,ariaLabelExpand,ariaLabelCollapse,"aria-level":ariaLevel,"aria-label":ariaLabel,"data-list-item":dataListItem,onPointerEnter,onPointerLeave,onFocus,onBlur,onKeyDown,"aria-describedby":ariaDescribedBy},ref)=>{let hasExpandableIcon=void 0!==isExpanded,handleOnClick=(0,_react.useCallback)(e=>{onClick&&onClick(e)},[onClick]),buttonRef=(0,_react.useRef)(null);return(0,_useKeyboard.useKeyboard)({"Space Enter":e=>onSpaceEnterPress?.(e)},buttonRef,0===tabIndex&&(isClickable||!!checkboxProps),!0),(0,_react.useImperativeHandle)(ref,()=>buttonRef.current),_react.default.createElement(_styledcomponents.StyledEntityItem,{role:"treeitem","aria-expanded":hasExpandableIcon?isExpanded:void 0,"aria-checked":checkboxProps?.checked,"aria-label":ariaLabel,"aria-level":ariaLevel},_react.default.createElement(StyledEntityTreeItemContainer,{"data-list-item":dataListItem,size:size,ref:buttonRef,"data-id":"list-item",tabIndex:tabIndex,role:"presentation",isActive:isActive,hasExpandableIcon:hasExpandableIcon,lSpaceStep:lSpaceStep,isDisabled:isDisabled,onClick:handleOnClick,isClickable:isClickable,"aria-describedby":ariaDescribedBy,onPointerEnter:onPointerEnter,onPointerLeave:onPointerLeave,onFocus:e=>{isSelfEvent(e)&&onFocus?.(e)},onBlur:e=>{isSelfEvent(e)&&onBlur?.(e)},onKeyDown:onKeyDown},hasExpandableIcon&&_react.default.createElement(_EntityTreeItemExpandButton.EntityTreeItemExpandButton,{size:size,tabIndex:-1,isDisabled:isDisabledExpand||isDisabled,isExpanded:isExpanded,onClick:onExpandClick,ariaLabelExpand:ariaLabelExpand,ariaLabelCollapse:ariaLabelCollapse}),_react.default.createElement(StyledEntityTreeItemWrapper,{size:size,hideBorder:hideBorder||"xs"===size},_react.default.createElement(_EntityItemBody.EntityItemBody,{size:size,tabIndex:tabIndex,description:description,renderLabel:renderLabel,renderLeft:renderLeft,renderRight:renderRight,checkboxProps:checkboxProps}))),isExpanded&&children)});

package/build/cjs/components/EntityTree/EntityTreeItemExpandButton.d.ts

@@ -1,3 +1,5 @@
 import React from "react";
 import type { EntityListItemProps } from "../EntityList/types";
-export declare function EntityTreeItemExpandButton({ size, onClick, isExpanded, isDisabled, ariaLabelExpand, ariaLabelCollapse, tabIndex, }: Partial<EntityListItemProps>): React.ReactElement;
+type EntityTreeItemExpandButtonProps = Pick<EntityListItemProps, "onClick" | "isExpanded" | "isDisabled" | "ariaLabelExpand" | "ariaLabelCollapse" | "tabIndex"> & Required<Pick<EntityListItemProps, "size">>;
+export declare function EntityTreeItemExpandButton({ size, onClick, isExpanded, isDisabled, ariaLabelExpand, ariaLabelCollapse, tabIndex, }: EntityTreeItemExpandButtonProps): React.ReactElement;
+export {};

package/build/cjs/components/EntityTree/EntityTreeItemExpandButton.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"EntityTreeItemExpandButton",{enumerable:!0,get:function(){return EntityTreeItemExpandButton}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_PictogramButton=require("../PictogramButton/PictogramButton"),_Box=require("../Box/Box"),_styledcomponents=require("../EntityList/styled-components");function EntityTreeItemExpandButton({size,onClick,isExpanded,isDisabled,ariaLabelExpand,ariaLabelCollapse,tabIndex}){return _react.default.createElement(_Box.Box,{vSpace:"zero",space:["xs","m"]},_react.default.createElement(_styledcomponents.StyledWrapperOffset,{size:size},_react.default.createElement(_PictogramButton.PictogramButton,{tabIndex:tabIndex,disabled:isDisabled,onClick:onClick,icon:isExpanded?"chevron-down":"chevron-right","aria-label":isExpanded?ariaLabelExpand:ariaLabelCollapse,"aria-expanded":isExpanded})))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"EntityTreeItemExpandButton",{enumerable:!0,get:function(){return EntityTreeItemExpandButton}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_useIntl=require("../../shared/intl/useIntl"),_PictogramButton=require("../PictogramButton/PictogramButton"),_Box=require("../Box/Box"),_styledcomponents=require("../EntityList/styled-components");function EntityTreeItemExpandButton({size,onClick,isExpanded,isDisabled,ariaLabelExpand,ariaLabelCollapse,tabIndex}){let{formatMessage}=(0,_useIntl.useIntl)();return _react.default.createElement(_Box.Box,{vSpace:"zero",space:["xs","m"]},_react.default.createElement(_styledcomponents.StyledWrapperOffset,{size:size},_react.default.createElement(_PictogramButton.PictogramButton,{tabIndex:tabIndex,disabled:isDisabled,onClick:onClick,icon:isExpanded?"chevron-down":"chevron-right","aria-label":isExpanded?ariaLabelCollapse??formatMessage("EntityTree.ExpandButton.CollapseAriaLabel"):ariaLabelExpand??formatMessage("EntityTree.ExpandButton.ExpandAriaLabel"),"aria-expanded":isExpanded})))}

package/build/cjs/components/EntityTree/tree.d.ts

@@ -6,7 +6,7 @@ export declare function trimDataByMaxSize(data: TreeNode[], expandedIds: NodeExp
     hasMoreNodes: boolean;
 };
 export declare function getTreeCheckboxState(nodeChildrenMap: NodeChildrenMap, rootID: NodeID, selectedLeafNodeIds: NodeID[]): NodeCheckboxState;
-export declare function getVisibleActiveNodeId(nodeChildrenMap: NodeChildrenMap, nodeExpandState: NodeExpandedState, activeId: NodeID): NodeID;
+export declare function getVisibleActiveNodeId(nodeChildrenMap: NodeChildrenMap, nodeExpandState: NodeExpandedState, activeId: NodeID | undefined): NodeID | undefined;
 export declare function getLeafNodeIds(nodeChildrenMap: NodeChildrenMap, rootID: NodeID): NodeID[];
 export declare function filterTree(tree: TreeNode, filterFn: (node: TreeNode) => boolean): TreeNode | null;
 export declare function mapTree(tree: TreeNode, mapFn: (node: TreeNode) => TreeNode): TreeNode;

package/build/cjs/components/EntityTree/tree.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get filterTree(){return function filterTree(tree,filterFn){let filteredChildren=tree.children.map(child=>filterTree(child,filterFn)).filter(child=>child);return 0!==filteredChildren.length||filterFn(tree)?{...tree,isFiltered:tree.children.length!==filteredChildren.length,children:filteredChildren}:null}},get findPathToNode(){return findPathToNode},get getLeafNodeIds(){return getLeafNodeIds},get getNodeChildrenMap(){return getNodeChildrenMap},get getTreeCheckboxState(){return getTreeCheckboxState},get getVisibleActiveNodeId(){return getVisibleActiveNodeId},get mapTree(){return function mapTree(tree,mapFn){return{...mapFn(tree),children:tree.children.map(child=>mapTree(child,mapFn))}}},get trimDataByMaxSize(){return trimDataByMaxSize}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _types=require("./types");function foldTree(f,nodeChildrenMap,rootID){let go=nodeID=>f(nodeID,nodeChildrenMap[nodeID].map(go));return go(rootID)}function getNodeChildrenMap(tree){let nodeChildrenMap={};return!function traverse(node){let{children}=node;nodeChildrenMap[node.id]=children.map(child=>(traverse(child),child.id))}(tree),nodeChildrenMap}function findPathToNode(nodeChildrenMap,targetNodeID){let findParent=nodeId=>Object.keys(nodeChildrenMap).find(parentId=>nodeChildrenMap[parentId].includes(nodeId))||null,path=[],currNodeId=targetNodeID;for(;currNodeId;)path.push(currNodeId),currNodeId=findParent(currNodeId);return path.reverse()}function trimDataByMaxSize(data,expandedIds,expandAll,maxNodesSize){let visibleNodesCount=0,hasMoreNodes=!1;return{result:function getVisibleNodes(nodes){return nodes.reduce((filteredNodes,node)=>{if(visibleNodesCount>=maxNodesSize)return hasMoreNodes=!0,filteredNodes;visibleNodesCount+=1;let newNode={...node};return(expandedIds[node.id]||expandAll)&&node.children.length>0&&(newNode.children=getVisibleNodes(node.children)),[...filteredNodes,newNode]},[])}(data),hasMoreNodes}}function getTreeCheckboxState(nodeChildrenMap,rootID,selectedLeafNodeIds){return foldTree((currId,childrenResults)=>{if(0===nodeChildrenMap[currId].length)return{[currId]:selectedLeafNodeIds.includes(currId)?_types.CheckboxState.Checked:_types.CheckboxState.Unchecked};let mergedChildrenResult=childrenResults.reduce((acc,result)=>Object.assign(acc,result)),childrenStates=new Set(nodeChildrenMap[currId].map(childId=>mergedChildrenResult[childId]));return{[currId]:1===childrenStates.size?childrenStates.values().next().value:_types.CheckboxState.Indeterminate,...mergedChildrenResult}},nodeChildrenMap,rootID)}function getVisibleActiveNodeId(nodeChildrenMap,nodeExpandState,activeId){return findPathToNode(nodeChildrenMap,activeId).find(nodeId=>!nodeExpandState[nodeId])}function getLeafNodeIds(nodeChildrenMap,rootID){return foldTree((currId,childrenResults)=>0===nodeChildrenMap[currId].length?[currId]:childrenResults.flat(),nodeChildrenMap,rootID)}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get filterTree(){return function filterTree(tree,filterFn){let filteredChildren=tree.children.map(child=>filterTree(child,filterFn)).filter(child=>child);return 0!==filteredChildren.length||filterFn(tree)?{...tree,isFiltered:tree.children.length!==filteredChildren.length,children:filteredChildren}:null}},get findPathToNode(){return findPathToNode},get getLeafNodeIds(){return getLeafNodeIds},get getNodeChildrenMap(){return getNodeChildrenMap},get getTreeCheckboxState(){return getTreeCheckboxState},get getVisibleActiveNodeId(){return getVisibleActiveNodeId},get mapTree(){return function mapTree(tree,mapFn){return{...mapFn(tree),children:tree.children.map(child=>mapTree(child,mapFn))}}},get trimDataByMaxSize(){return trimDataByMaxSize}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _types=require("./types");function foldTree(f,nodeChildrenMap,rootID){let go=nodeID=>f(nodeID,nodeChildrenMap[nodeID].map(go));return go(rootID)}function getNodeChildrenMap(tree){let nodeChildrenMap={};return!function traverse(node){let{id,children}=node;void 0!==id&&void 0!==children&&(nodeChildrenMap[id]=children.map(child=>(traverse(child),child.id)))}(tree),nodeChildrenMap}function findPathToNode(nodeChildrenMap,targetNodeID){let findParent=nodeId=>Object.keys(nodeChildrenMap).find(parentId=>nodeChildrenMap[parentId].includes(nodeId))||null,path=[],currNodeId=targetNodeID;for(;currNodeId;)path.push(currNodeId),currNodeId=findParent(currNodeId);return path.reverse()}function trimDataByMaxSize(data,expandedIds,expandAll,maxNodesSize){let visibleNodesCount=0,hasMoreNodes=!1;return{result:function getVisibleNodes(nodes){return nodes.reduce((filteredNodes,node)=>{if(visibleNodesCount>=maxNodesSize)return hasMoreNodes=!0,filteredNodes;visibleNodesCount+=1;let newNode={...node};return(expandedIds[node.id]||expandAll)&&node.children.length>0&&(newNode.children=getVisibleNodes(node.children)),[...filteredNodes,newNode]},[])}(data),hasMoreNodes}}function getTreeCheckboxState(nodeChildrenMap,rootID,selectedLeafNodeIds){return foldTree((currId,childrenResults)=>{if(0===nodeChildrenMap[currId].length)return{[currId]:selectedLeafNodeIds.includes(currId)?_types.CheckboxState.Checked:_types.CheckboxState.Unchecked};let mergedChildrenResult=childrenResults.reduce((acc,result)=>Object.assign(acc,result)),childrenStates=new Set(nodeChildrenMap[currId].map(childId=>mergedChildrenResult[childId])),[firstChildState]=childrenStates;return{[currId]:1===childrenStates.size?firstChildState:_types.CheckboxState.Indeterminate,...mergedChildrenResult}},nodeChildrenMap,rootID)}function getVisibleActiveNodeId(nodeChildrenMap,nodeExpandState,activeId){if(activeId)return findPathToNode(nodeChildrenMap,activeId).find(nodeId=>!nodeExpandState[nodeId])}function getLeafNodeIds(nodeChildrenMap,rootID){return foldTree((currId,childrenResults)=>0===nodeChildrenMap[currId].length?[currId]:childrenResults.flat(),nodeChildrenMap,rootID)}

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get Checkbox(){return Checkbox},get CheckboxRaw(){return CheckboxRaw},get StyledCheckboxContainer(){return StyledCheckboxContainer},get StyledFakeInput(){return StyledFakeInput},get StyledInputContainer(){return StyledInputContainer},get StyledRealInput(){return StyledRealInput}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_FormField=require("../FormField/FormField"),_Inline=require("../../Inline/Inline"),_Text=require("../../Typography/Text/Text"),_Icon=require("../../Icon/Icon"),_useFormFieldMessageId=require("../FormField/useFormFieldMessageId"),StyledInputContainer=(0,_styled.default)("div",{target:"e1qs9wfy0",label:"StyledInputContainer"})(({theme,vSize,hSize})=>({userSelect:"none",display:"flex",position:"relative",width:theme.variables.size.dimension.checkbox[hSize],height:`calc(${theme.variables.size.font[vSize]} * ${(0,_Text.getTextLineHeight)({size:vSize,theme})})`,boxSizing:"border-box",alignItems:"center"})),StyledRealInput=(0,_styled.default)("input",{target:"e1qs9wfy1",label:"StyledRealInput"})(({theme})=>({opacity:theme.variables.opacity.hidden,cursor:"pointer",height:0,width:0,position:"absolute"})),StyledFakeInput=(0,_styled.default)("span",{target:"e1qs9wfy2",label:"StyledFakeInput"})(({theme,size})=>({boxSizing:"border-box",width:theme.variables.size.dimension.checkbox[size],height:theme.variables.size.dimension.checkbox[size],borderRadius:theme.variables.size.borderRadius.xs,border:"2px solid",display:"flex",alignItems:"center",justifyContent:"center",background:theme.values.color.background.primary.default,color:theme.values.color.text.onAccent.default,borderColor:theme.values.color.border.primary.default,lineHeight:0,"& svg":{opacity:theme.variables.opacity.hidden},"input: focus-visible + &":{outlineWidth:"2px",outlineStyle:"solid",outlineColor:"Highlight"},"@media (-webkit-min-device-pixel-ratio:0)":{"input: focus-visible + &":{outlineColor:"-webkit-focus-ring-color",outlineStyle:"auto"}},"input:checked + &, input:indeterminate + &":{border:0,background:theme.values.color.background.accent.default,svg:{opacity:theme.variables.opacity.visible}},"input:disabled + &":{pointerEvents:"none"}})),StyledCheckboxContainer=(0,_styled.default)("div",{target:"e1qs9wfy3",label:"StyledCheckboxContainer"})(({theme,isInteractable})=>({"&:hover":{...isInteractable&&{cursor:"pointer",[`input:checked + ${StyledFakeInput}, input:indeterminate + ${StyledFakeInput}`]:{background:theme.values.color.background.accent.hover},[`${StyledFakeInput}`]:{borderColor:theme.values.color.border.primary.hover}},...!isInteractable&&{cursor:"not-allowed"}}})),CheckboxRaw=_react.default.forwardRef(({indeterminate,size="m",disabled,checked,label,labelHint,labelSize="m",...rest},ref)=>{let internalRef=(0,_react.useRef)(null),inputRef=ref??internalRef;return(0,_react.useLayoutEffect)(()=>{inputRef.current&&(inputRef.current.indeterminate=indeterminate)},[indeterminate,inputRef]),_react.default.createElement(StyledCheckboxContainer,{isInteractable:!disabled},_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"top",noWrap:!0},_react.default.createElement(StyledInputContainer,{hSize:size,vSize:labelSize},_react.default.createElement(StyledRealInput,{...rest,ref:inputRef,"aria-checked":indeterminate?"mixed":checked,type:"checkbox",disabled:disabled,checked:checked}),_react.default.createElement(StyledFakeInput,{size:size},indeterminate?_react.default.createElement(_Icon.Icon,{size:"s",name:"minus"}):_react.default.createElement(_Icon.Icon,{size:"s",name:"m"===size?"check":"check-small"}))),label&&_react.default.createElement("div",null,"string"==typeof label?_react.default.createElement(_Text.Text,{size:labelSize},label):label,labelHint&&_react.default.createElement(_Text.Text,{color:"tertiary",size:"s"},labelHint))))}),Checkbox=_react.default.forwardRef(({label,labelHint,hint,errorMessages,size="m",disabled,"data-e2e-test-id":dataE2eTestId,"aria-describedby":ariaDescribedBy,...rest},ref)=>{let{id,ariaDescribedByProp}=(0,_useFormFieldMessageId.useFormFieldMessageId)({ariaDescribedBy,errorMessages,hint});return _react.default.createElement(_FormField.FormField,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Checkbox",disabled:disabled,errorMessages:errorMessages,hint:hint,messageId:id},_react.default.createElement(CheckboxRaw,{...rest,ref:ref,size:size,label:label,labelHint:labelHint,disabled:disabled,...ariaDescribedByProp}))});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get Checkbox(){return Checkbox},get CheckboxRaw(){return CheckboxRaw},get StyledCheckboxContainer(){return StyledCheckboxContainer},get StyledFakeInput(){return StyledFakeInput},get StyledInputContainer(){return StyledInputContainer},get StyledRealInput(){return StyledRealInput}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_FormField=require("../FormField/FormField"),_Inline=require("../../Inline/Inline"),_Text=require("../../Typography/Text/Text"),_Icon=require("../../Icon/Icon"),_useFormFieldMessageId=require("../FormField/useFormFieldMessageId"),StyledInputContainer=(0,_styled.default)("div",{target:"e13evtie0",label:"StyledInputContainer"})(({theme,vSize,hSize})=>({userSelect:"none",display:"flex",position:"relative",width:theme.variables.size.dimension.checkbox[hSize],height:`calc(${theme.variables.size.font[vSize]} * ${(0,_Text.getTextLineHeight)({size:vSize,theme})})`,boxSizing:"border-box",alignItems:"center"})),StyledRealInput=(0,_styled.default)("input",{target:"e13evtie1",label:"StyledRealInput"})(({theme})=>({opacity:theme.variables.opacity.hidden,cursor:"pointer",height:0,width:0,position:"absolute"})),StyledFakeInput=(0,_styled.default)("span",{target:"e13evtie2",label:"StyledFakeInput"})(({theme,size="m"})=>({boxSizing:"border-box",width:theme.variables.size.dimension.checkbox[size],height:theme.variables.size.dimension.checkbox[size],borderRadius:theme.variables.size.borderRadius.xs,border:"2px solid",display:"flex",alignItems:"center",justifyContent:"center",background:theme.values.color.background.primary.default,color:theme.values.color.text.onAccent.default,borderColor:theme.values.color.border.primary.default,lineHeight:0,"& svg":{opacity:theme.variables.opacity.hidden},"input: focus-visible + &":{outlineWidth:"2px",outlineStyle:"solid",outlineColor:"Highlight"},"@media (-webkit-min-device-pixel-ratio:0)":{"input: focus-visible + &":{outlineColor:"-webkit-focus-ring-color",outlineStyle:"auto"}},"input:checked + &, input:indeterminate + &":{border:0,background:theme.values.color.background.accent.default,svg:{opacity:theme.variables.opacity.visible}},"input:disabled + &":{pointerEvents:"none"}})),StyledCheckboxContainer=(0,_styled.default)("div",{target:"e13evtie3",label:"StyledCheckboxContainer"})(({theme,isInteractable})=>({"&:hover":{...isInteractable&&{cursor:"pointer",[`input:checked + ${StyledFakeInput}, input:indeterminate + ${StyledFakeInput}`]:{background:theme.values.color.background.accent.hover},[`${StyledFakeInput}`]:{borderColor:theme.values.color.border.primary.hover}},...!isInteractable&&{cursor:"not-allowed"}}})),CheckboxRaw=_react.default.forwardRef(({indeterminate,size="m",disabled,checked,label,labelHint,labelSize="m",...rest},ref)=>{let internalRef=(0,_react.useRef)(null),inputRef=ref??internalRef;return(0,_react.useLayoutEffect)(()=>{"object"==typeof inputRef&&inputRef.current&&(inputRef.current.indeterminate=!!indeterminate)},[indeterminate,inputRef]),_react.default.createElement(StyledCheckboxContainer,{isInteractable:!disabled},_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"top",noWrap:!0},_react.default.createElement(StyledInputContainer,{hSize:size,vSize:labelSize},_react.default.createElement(StyledRealInput,{...rest,ref:inputRef,"aria-checked":indeterminate?"mixed":checked,type:"checkbox",disabled:disabled,checked:checked}),_react.default.createElement(StyledFakeInput,{size:size},indeterminate?_react.default.createElement(_Icon.Icon,{size:"s",name:"minus"}):_react.default.createElement(_Icon.Icon,{size:"s",name:"m"===size?"check":"check-small"}))),label&&_react.default.createElement("div",null,"string"==typeof label?_react.default.createElement(_Text.Text,{size:labelSize},label):label,labelHint&&_react.default.createElement(_Text.Text,{color:"tertiary",size:"s"},labelHint))))}),Checkbox=_react.default.forwardRef(({label,labelHint,hint,errorMessages,size="m",disabled,"data-e2e-test-id":dataE2eTestId,"aria-describedby":ariaDescribedBy,...rest},ref)=>{let{id,ariaDescribedByProp}=(0,_useFormFieldMessageId.useFormFieldMessageId)({ariaDescribedBy,errorMessages,hint});return _react.default.createElement(_FormField.FormField,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Checkbox",disabled:disabled,errorMessages:errorMessages,hint:hint,messageId:id},_react.default.createElement(CheckboxRaw,{...rest,ref:ref,size:size,label:label,labelHint:labelHint,disabled:disabled,...ariaDescribedByProp}))});

package/build/cjs/components/Form/Combobox/Combobox.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Combobox",{enumerable:!0,get:function(){return Combobox}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_FormField=require("../FormField/FormField"),_SingleSelect=require("./SingleSelect"),_MultiSelect=require("./MultiSelect"),_useFormFieldMessageId=require("../FormField/useFormFieldMessageId"),defaultFilterMethod=(option,value)=>option.label.toLowerCase().indexOf(value.toLowerCase())>-1;function Combobox({options=[],name,value,placeholder,emptyStateMessage,hasError,filterMethod=defaultFilterMethod,formatSelectedOptionsLabel,onChange=()=>{},onBlur=()=>null,onFocus=()=>null,maxHeight=230,autoComplete="on",multiple=!1,privateProps,portalContainer,optionsListWidth,readOnly,errorMessages,hint,slotProps,"aria-describedby":ariaDescribedBy,"data-e2e-test-id":dataE2eTestId,...rest}){let{disabled,label}=rest,{tag}=slotProps??{},{id,ariaDescribedByProp}=(0,_useFormFieldMessageId.useFormFieldMessageId)({ariaDescribedBy,errorMessages,hint});return _react.default.createElement(_FormField.FormField,{"data-ds-id":"Combobox",disabled:disabled,errorMessages:errorMessages,hint:hint,messageId:id,"data-e2e-test-id":dataE2eTestId,...rest},multiple?_react.default.createElement(_MultiSelect.MultiSelect,{name:name,options:options,value:value,placeholder:placeholder,emptyStateMessage:emptyStateMessage,hasError:hasError,disabled:disabled,filterMethod:filterMethod,onChange:onChange,onFocus:onFocus,onBlur:onBlur,maxHeight:maxHeight,autoComplete:autoComplete,label:label,formatSelectedOptionsLabel:formatSelectedOptionsLabel,portalContainer:portalContainer,optionsListWidth:optionsListWidth,slotProps:{tag},...ariaDescribedByProp,...rest}):_react.default.createElement(_SingleSelect.SingleSelect,{name:name,options:options,value:value,placeholder:placeholder,emptyStateMessage:emptyStateMessage,hasError:hasError,disabled:disabled,filterMethod:filterMethod,onChange:onChange,onFocus:onFocus,onBlur:onBlur,maxHeight:maxHeight,autoComplete:autoComplete,label:label,privateProps:privateProps,portalContainer:portalContainer,optionsListWidth:optionsListWidth,readOnly:readOnly,...ariaDescribedByProp,...rest}))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Combobox",{enumerable:!0,get:function(){return Combobox}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_FormField=require("../FormField/FormField"),_SingleSelect=require("./SingleSelect"),_MultiSelect=require("./MultiSelect"),_useFormFieldMessageId=require("../FormField/useFormFieldMessageId"),defaultFilterMethod=(option,value)=>option.label.toLowerCase().indexOf(value.toLowerCase())>-1;function Combobox({options=[],name,value,placeholder,emptyStateMessage,hasError,filterMethod=defaultFilterMethod,formatSelectedOptionsLabel,onChange=()=>{},onBlur=()=>null,onFocus=()=>null,maxHeight=230,autoComplete="on",multiple,privateProps,portalContainer,optionsListWidth,readOnly,errorMessages,hint,slotProps,"aria-describedby":ariaDescribedBy,"data-e2e-test-id":dataE2eTestId,...rest}){let{disabled,label}=rest,{id,ariaDescribedByProp}=(0,_useFormFieldMessageId.useFormFieldMessageId)({ariaDescribedBy,errorMessages,hint});return _react.default.createElement(_FormField.FormField,{"data-ds-id":"Combobox",disabled:disabled,errorMessages:errorMessages,hint:hint,messageId:id,"data-e2e-test-id":dataE2eTestId,...rest},multiple?_react.default.createElement(_MultiSelect.MultiSelect,{name:name,options:options,value:value,placeholder:placeholder,emptyStateMessage:emptyStateMessage,hasError:hasError,disabled:disabled,filterMethod:filterMethod,onChange:onChange,onFocus:onFocus,onBlur:onBlur,maxHeight:maxHeight,autoComplete:autoComplete,label:label,formatSelectedOptionsLabel:formatSelectedOptionsLabel,portalContainer:portalContainer,optionsListWidth:optionsListWidth,slotProps:{tag:slotProps.tag},...ariaDescribedByProp,...rest}):_react.default.createElement(_SingleSelect.SingleSelect,{name:name,options:options,value:value,placeholder:placeholder,emptyStateMessage:emptyStateMessage,hasError:hasError,disabled:disabled,filterMethod:filterMethod,onChange:onChange,onFocus:onFocus,onBlur:onBlur,maxHeight:maxHeight,autoComplete:autoComplete,label:label,privateProps:privateProps,portalContainer:portalContainer,optionsListWidth:optionsListWidth,readOnly:readOnly,...ariaDescribedByProp,...rest}))}

package/build/cjs/components/Form/Combobox/MultiSelect.d.ts

@@ -13,7 +13,7 @@ export type UniqueMultiSelectProps = {
     onChange?: (value: string[], actionData: ActionData, event: React.ChangeEvent<HTMLSelectElement>) => void;
     formatSelectedOptionsLabel?: (count?: number) => string;
 };
-type MultiSelectProps = CommonSelectProps & Pick<FormFieldProps, "label"> & UniqueMultiSelectProps & AriaAttributes & {
+type MultiSelectProps = Omit<CommonSelectProps, "value" | "onChange" | "formatSelectedOptionsLabel" | "options" | "filterMethod" | "maxHeight"> & Required<Pick<CommonSelectProps, "options" | "filterMethod" | "maxHeight">> & Pick<FormFieldProps, "label"> & UniqueMultiSelectProps & AriaAttributes & {
     slotProps: {
         tag: NonNullable<ComboboxSlotProps["tag"]>;
     };

package/build/cjs/components/Form/Combobox/MultiSelect.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"MultiSelect",{enumerable:!0,get:function(){return MultiSelect}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_useKeyboard=require("../../../shared/useKeyboard"),_Input=require("../Input/Input"),_Tag=require("../../Tag/Tag"),_StyledSelectComponents=require("./StyledSelectComponents"),_MultiSelectReducer=require("./MultiSelectReducer"),_OptionsList=require("./OptionsList"),StyledInputWrap=(0,_styled.default)("div",{target:"e1c8shqu0",label:"StyledInputWrap"})(({theme,hasValue})=>({zIndex:1,display:"flex",alignItems:"center",position:"relative","& input":{...hasValue&&{paddingLeft:theme.variables.size.spacing.xxs}}})),StyledTagWrap=(0,_styled.default)("div",{target:"e1c8shqu1",label:"StyledTagWrap"})(({theme})=>({marginLeft:theme.variables.size.spacing.xs,order:-1})),getSelectedOptions=(options,value)=>{let mapFromValue=new Set(value);return options.filter(opt=>mapFromValue.has(opt.value))};function MultiSelect({options,name,value,placeholder,emptyStateMessage,hasError,filterMethod,onChange,onBlur,onFocus,maxHeight,formatSelectedOptionsLabel=count=>`${count} selected`,autoComplete,disabled,label,portalContainer,optionsListWidth,slotProps,"aria-describedby":ariaDescribedBy,privateProps,...ariaAttributes}){let selectRef=(0,_react.useRef)(null),initialSelectedOptions=(0,_react.useMemo)(()=>getSelectedOptions(options,value),[options,value]),{clearButtonAriaLabel}=slotProps.tag,[{selectedOptions,actionName,changedOptions,isOpen,preselectedIndex,innerValue},dispatch]=(0,_react.useReducer)(_MultiSelectReducer.MultiSelectReducer,{selectedOptions:initialSelectedOptions,isOpen:!1,preselectedIndex:-1,innerValue:""}),innerInputRef=(0,_react.useRef)(null),inputWrapperRef=(0,_react.useRef)(null),handleOnChange=(0,_react.useCallback)(event=>{onChange(selectedOptions.map(opt=>opt.value),{name,action:actionName,data:changedOptions},event)},[selectedOptions,actionName,changedOptions,name,onChange]),forceChangeFakeSelect=(0,_react.useCallback)(option=>{dispatch({type:"onChange",option})},[dispatch]);(0,_react.useEffect)(()=>{dispatch({type:"updateSelectedOptions",selectedOptions:initialSelectedOptions})},[initialSelectedOptions]);let closeDropdown=(0,_react.useCallback)(()=>{dispatch({type:"close"}),dispatch({type:"setInnerValue",value:""}),dispatch({type:"setPreselectedIndex",index:-1}),onBlur()},[onBlur,dispatch]);(0,_react.useEffect)(()=>{selectRef.current&&selectRef.current.dispatchEvent(new Event("change",{bubbles:!0}))},[changedOptions,selectRef.current]);let filteredOptions=(0,_react.useMemo)(()=>innerValue?options.filter(option=>filterMethod(option,innerValue)):options,[options,filterMethod,innerValue]);(0,_react.useEffect)(()=>{dispatch({type:"setPreselectedIndex",index:-1})},[filteredOptions]),(0,_useKeyboard.useKeyboard)({"ArrowUp ArrowDown":()=>{dispatch({type:"open"})}},innerInputRef,!isOpen&&!disabled);let optionsListId=(0,_OptionsList.getOptionsListId)(name),preselectedOption=filteredOptions[preselectedIndex]??null,ariaActiveDescendant=-1!==preselectedIndex&&preselectedOption?(0,_OptionsList.getOptionId)(name,preselectedOption.value):"";return _react.default.createElement(_StyledSelectComponents.StyledContainer,{onBlur:()=>{closeDropdown()}},_react.default.createElement(StyledInputWrap,{hasValue:value.length>0,ref:inputWrapperRef},_react.default.createElement(_Input.InputRaw,{name:`${name}-innerInput`,value:innerValue,hasError:hasError,privateProps:{isTransparent:!0,hideOutline:!0},icon:isOpen?"chevron-up":"chevron-down",disabled:disabled,placeholder:0===value.length?placeholder:void 0,onFocus:onFocus,onClick:()=>{dispatch({type:"open"})},onChange:e=>{e.currentTarget.value&&dispatch({type:"open"}),dispatch({type:"setInnerValue",value:e.currentTarget.value})},ref:innerInputRef,autoComplete:autoComplete,...ariaAttributes,"aria-label":label,role:"combobox","aria-activedescendant":isOpen?ariaActiveDescendant:"","aria-controls":isOpen?optionsListId:"","aria-expanded":isOpen,"aria-describedby":ariaDescribedBy}),initialSelectedOptions.length>0&&_react.default.createElement(StyledTagWrap,{role:"status"},_react.default.createElement(_Tag.Tag,{label:formatSelectedOptionsLabel(initialSelectedOptions.length),isRemovable:!0,onClear:()=>{dispatch({type:"clear"})},clearBtnAriaLabel:clearButtonAriaLabel}))),_react.default.createElement(_StyledSelectComponents.StyledFakeInputWrap,null,_react.default.createElement(_Input.InputRaw,{"aria-hidden":!0,name:`${name}-fakeInput`,value:void 0,type:"text",onChange:()=>null,icon:isOpen?"chevron-up":"chevron-down",tabIndex:-1,autoComplete:"off",hasError:hasError})),_react.default.createElement(_OptionsList.OptionsList,{isMultiSelect:!0,name:name,isOpen:isOpen,options:filteredOptions,triggerRef:innerInputRef,triggerWrapperRef:inputWrapperRef,onCloseDropdown:closeDropdown,portalContainer:portalContainer,selectedIndex:preselectedIndex,onSelectedIndexChange:index=>{dispatch({type:"setPreselectedIndex",index})},forceChangeFakeSelect:forceChangeFakeSelect,value:value,emptyStateMessage:emptyStateMessage,disabled:disabled,maxHeight:maxHeight,optionsListWidth:optionsListWidth}),_react.default.createElement("select",{ref:selectRef,name:name,onChange:handleOnChange,"data-e2e-test-id":"multiSelect",tabIndex:-1,"aria-hidden":!0,hidden:!0,value:value,multiple:!0},selectedOptions.map(o=>_react.default.createElement("option",{key:o.value,value:o.value},o.label))))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"MultiSelect",{enumerable:!0,get:function(){return MultiSelect}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_useKeyboard=require("../../../shared/useKeyboard"),_Input=require("../Input/Input"),_Tag=require("../../Tag/Tag"),_StyledSelectComponents=require("./StyledSelectComponents"),_MultiSelectReducer=require("./MultiSelectReducer"),_OptionsList=require("./OptionsList"),StyledInputWrap=(0,_styled.default)("div",{target:"e1p1zl000",label:"StyledInputWrap"})(({theme,hasValue})=>({zIndex:1,display:"flex",alignItems:"center",position:"relative","& input":{...hasValue&&{paddingLeft:theme.variables.size.spacing.xxs}}})),StyledTagWrap=(0,_styled.default)("div",{target:"e1p1zl001",label:"StyledTagWrap"})(({theme})=>({marginLeft:theme.variables.size.spacing.xs,order:-1})),getSelectedOptions=(options,value)=>{let mapFromValue=new Set(value);return options.filter(opt=>mapFromValue.has(opt.value))};function MultiSelect({options,name,value,placeholder,emptyStateMessage,hasError,filterMethod,onChange,onBlur,onFocus,maxHeight,formatSelectedOptionsLabel=count=>`${count} selected`,autoComplete,disabled,label,portalContainer,optionsListWidth,slotProps,"aria-describedby":ariaDescribedBy,privateProps,...ariaAttributes}){let selectRef=(0,_react.useRef)(null),initialSelectedOptions=(0,_react.useMemo)(()=>getSelectedOptions(options,value),[options,value]),{clearButtonAriaLabel}=slotProps.tag,[{selectedOptions,actionName,changedOptions,isOpen,preselectedIndex,innerValue},dispatch]=(0,_react.useReducer)(_MultiSelectReducer.MultiSelectReducer,{selectedOptions:initialSelectedOptions,isOpen:!1,preselectedIndex:-1,innerValue:""}),innerInputRef=(0,_react.useRef)(null),inputWrapperRef=(0,_react.useRef)(null),handleOnChange=(0,_react.useCallback)(event=>{actionName&&changedOptions&&onChange?.(selectedOptions.map(opt=>opt.value),{name,action:actionName,data:changedOptions},event)},[selectedOptions,actionName,changedOptions,name,onChange]),forceChangeFakeSelect=(0,_react.useCallback)(option=>{dispatch({type:"onChange",option})},[dispatch]);(0,_react.useEffect)(()=>{dispatch({type:"updateSelectedOptions",selectedOptions:initialSelectedOptions})},[initialSelectedOptions]);let closeDropdown=(0,_react.useCallback)(()=>{dispatch({type:"close"}),dispatch({type:"setInnerValue",value:""}),dispatch({type:"setPreselectedIndex",index:-1}),onBlur?.()},[onBlur,dispatch]);(0,_react.useEffect)(()=>{selectRef.current&&selectRef.current.dispatchEvent(new Event("change",{bubbles:!0}))},[changedOptions,selectRef.current]);let filteredOptions=(0,_react.useMemo)(()=>innerValue?options.filter(option=>filterMethod(option,innerValue)):options,[options,filterMethod,innerValue]);(0,_react.useEffect)(()=>{dispatch({type:"setPreselectedIndex",index:-1})},[filteredOptions]),(0,_useKeyboard.useKeyboard)({"ArrowUp ArrowDown":()=>{dispatch({type:"open"})}},innerInputRef,!isOpen&&!disabled);let optionsListId=(0,_OptionsList.getOptionsListId)(name),preselectedOption=filteredOptions[preselectedIndex]??null,ariaActiveDescendant=-1!==preselectedIndex&&preselectedOption?(0,_OptionsList.getOptionId)(name,preselectedOption.value):"";return _react.default.createElement(_StyledSelectComponents.StyledContainer,{onBlur:()=>{closeDropdown()}},_react.default.createElement(StyledInputWrap,{hasValue:value.length>0,ref:inputWrapperRef},_react.default.createElement(_Input.InputRaw,{name:`${name}-innerInput`,value:innerValue,hasError:hasError,privateProps:{isTransparent:!0,hideOutline:!0},icon:isOpen?"chevron-up":"chevron-down",disabled:disabled,placeholder:0===value.length?placeholder:void 0,onFocus:onFocus,onClick:()=>{dispatch({type:"open"})},onChange:e=>{e.currentTarget.value&&dispatch({type:"open"}),dispatch({type:"setInnerValue",value:e.currentTarget.value})},ref:innerInputRef,autoComplete:autoComplete,...ariaAttributes,"aria-label":label,role:"combobox","aria-activedescendant":isOpen?ariaActiveDescendant:"","aria-controls":isOpen?optionsListId:"","aria-expanded":isOpen,"aria-describedby":ariaDescribedBy}),initialSelectedOptions.length>0&&_react.default.createElement(StyledTagWrap,{role:"status"},_react.default.createElement(_Tag.Tag,{label:formatSelectedOptionsLabel(initialSelectedOptions.length),isRemovable:!0,onClear:()=>{dispatch({type:"clear"})},clearBtnAriaLabel:clearButtonAriaLabel}))),_react.default.createElement(_StyledSelectComponents.StyledFakeInputWrap,null,_react.default.createElement(_Input.InputRaw,{"aria-hidden":!0,name:`${name}-fakeInput`,value:void 0,type:"text",onChange:()=>null,icon:isOpen?"chevron-up":"chevron-down",tabIndex:-1,autoComplete:"off",hasError:hasError})),_react.default.createElement(_OptionsList.OptionsList,{isMultiSelect:!0,name:name,isOpen:isOpen,options:filteredOptions,triggerRef:innerInputRef,triggerWrapperRef:inputWrapperRef,onCloseDropdown:closeDropdown,portalContainer:portalContainer,selectedIndex:preselectedIndex,onSelectedIndexChange:index=>{dispatch({type:"setPreselectedIndex",index})},forceChangeFakeSelect:forceChangeFakeSelect,value:value,emptyStateMessage:emptyStateMessage,disabled:disabled,maxHeight:maxHeight,optionsListWidth:optionsListWidth}),_react.default.createElement("select",{ref:selectRef,name:name,onChange:handleOnChange,"data-e2e-test-id":"multiSelect",tabIndex:-1,"aria-hidden":!0,hidden:!0,value:value,multiple:!0},selectedOptions.map(o=>_react.default.createElement("option",{key:o.value,value:o.value},o.label))))}

package/build/cjs/components/Form/Combobox/MultiSelectReducer.d.ts

@@ -1,7 +1,7 @@
 import type { SelectOption } from "./Combobox";
 type ChangeAction = "select-option" | "deselect-option" | "clear";
 type State = {
-    selectedOptions?: SelectOption[];
+    selectedOptions: SelectOption[];
     changedOptions?: SelectOption[];
     isOpen: boolean;
     preselectedIndex: number;

package/build/cjs/components/Form/Combobox/OptionsList.d.ts

@@ -11,15 +11,18 @@ export declare const OPTIONS_LIST_SELECTOR = "[role=\"listbox\"], [role=\"option
 type OptionsListProps = {
     isOpen: boolean;
     isMultiSelect?: boolean;
-    triggerRef: RefObject<HTMLInputElement>;
+    triggerRef: RefObject<HTMLElement>;
     triggerWrapperRef?: RefObject<HTMLDivElement>;
     onCloseDropdown: (noSelect?: boolean) => void;
     selectedIndex: number;
     onSelectedIndexChange: (index: number) => void;
     forceChangeFakeSelect: (selectedOption: SelectOption) => void;
     isVirtualized?: boolean;
-} & Partial<CommonSelectProps>;
+    name: string;
+    value: string | string[];
+    maxHeight: number;
+} & Omit<Partial<CommonSelectProps>, "name" | "value" | "maxHeight">;
 export declare function getOptionId(selectName: string, optionValue: string): string;
 export declare function getOptionsListId(selectName: string): string;
-export declare function OptionsList({ isOpen, isMultiSelect, value, disabled, options, portalContainer, triggerRef, triggerWrapperRef, maxHeight, emptyStateMessage, selectedIndex, optionsListWidth, isVirtualized, name, onCloseDropdown, onSelectedIndexChange, forceChangeFakeSelect, }: OptionsListProps): React.ReactElement;
+export declare function OptionsList({ isOpen, isMultiSelect, value, disabled, options, portalContainer, triggerRef, triggerWrapperRef, maxHeight, emptyStateMessage, selectedIndex, optionsListWidth, isVirtualized, name, onCloseDropdown, onSelectedIndexChange, forceChangeFakeSelect, }: OptionsListProps): React.ReactElement | null;
 export {};

package/build/cjs/components/Form/Combobox/OptionsList.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get OPTIONS_LIST_SELECTOR(){return OPTIONS_LIST_SELECTOR},get OptionsList(){return OptionsList},get getOptionId(){return getOptionId},get getOptionsListId(){return getOptionsListId}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_react1=require("@emotion/react"),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_useKeyboard=require("../../../shared/useKeyboard"),_useWindow=require("../../../shared/useWindow"),_usePopupMenu=require("../../../shared/popupMenu/usePopupMenu"),_VirtualScrollList=require("../../VirtualScrollList/VirtualScrollList"),_Text=require("../../Typography/Text/Text"),_Box=require("../../Box/Box"),_Inline=require("../../Inline/Inline"),_Icon=require("../../Icon/Icon"),_StyledSelectComponents=require("./StyledSelectComponents"),_constants=require("./constants"),_Stack=require("../../Stack/Stack"),_Checkbox=require("../Checkbox/Checkbox"),_Portal=require("../../Portal/Portal"),_ScreenReaderText=require("../../Utilities/ScreenReaderText/ScreenReaderText"),OPTIONS_LIST_SELECTOR='[role="listbox"], [role="option"]';function getOptionId(selectName,optionValue){return`${selectName}Option${optionValue}`}function getOptionsListId(selectName){return`${selectName}OptionsList`}const scrollToItem=({list,itemIndex,behavior})=>{list[itemIndex]?.scrollIntoView?.({behavior,block:"nearest"})},CustomOption=(0,_styled.default)(_StyledSelectComponents.StyledOption,{target:"eubbn5p0",label:"CustomOption"})(({theme})=>({paddingTop:0,paddingBottom:0,"& > div":{paddingTop:theme.variables.size.spacing.xs,paddingBottom:theme.variables.size.spacing.xs},"& > div *":{marginTop:0}})),StyledListContainer=(0,_styled.default)("div",{target:"eubbn5p1",label:"StyledListContainer"})(({theme,maxHeight})=>({maxHeight,boxSizing:"border-box",overflow:"auto",padding:`${theme.variables.size.spacing.xxs} 0`}));function OptionsList({isOpen,isMultiSelect=!1,value,disabled,options,portalContainer,triggerRef,triggerWrapperRef,maxHeight,emptyStateMessage="No options available",selectedIndex,optionsListWidth,isVirtualized=!0,name,onCloseDropdown,onSelectedIndexChange,forceChangeFakeSelect}){let optionsListRef=(0,_react.useRef)(null),listContainerRef=(0,_react.useRef)(null),listItemsRef=(0,_react.useRef)(null),refForPositioning=triggerWrapperRef||triggerRef,activeItemIndex=(0,_react.useMemo)(()=>options.findIndex(option=>isMultiSelect?value.includes(option.value):option.value===value),[options,isMultiSelect,value]),{menuStyle:optionsListStyle,calculateStyle}=(0,_usePopupMenu.usePopupMenu)({triggerRef:refForPositioning,menuRef:optionsListRef,isOpen}),win=(0,_useWindow.useWindow)(),{variables}=(0,_react1.useTheme)(),effectiveMaxHeight=(0,_react.useMemo)(()=>{if(!win||!optionsListStyle.top)return maxHeight;let menuViewportMargin=parseInt(variables.size.spacing.xs,10),menuTopInViewport=optionsListStyle.top-(win.scrollY??0),spaceBelow=win.innerHeight-menuTopInViewport-menuViewportMargin;return!Number.isFinite(spaceBelow)||spaceBelow<=0?maxHeight:maxHeight?Math.min(maxHeight,spaceBelow):spaceBelow},[maxHeight,optionsListStyle,win,variables]);(0,_react.useLayoutEffect)(()=>{if(isOpen&&listContainerRef.current&&!isVirtualized&&optionsListStyle.top){let listElm=listContainerRef.current;listElm.clientHeight<listElm.scrollHeight&&(listItemsRef.current=listElm.querySelectorAll("[data-list-item]"),scrollToItem({list:listItemsRef.current,itemIndex:activeItemIndex,behavior:"instant"}))}else listItemsRef.current=null},[isOpen,isVirtualized,listContainerRef,options,maxHeight,optionsListStyle,activeItemIndex]),(0,_react.useEffect)(()=>{listItemsRef.current&&scrollToItem({list:listItemsRef.current,itemIndex:selectedIndex,behavior:"smooth"})},[listItemsRef,selectedIndex]),(0,_useKeyboard.useKeyboard)({Escape:()=>onCloseDropdown(!0),Enter:()=>{let preselectedOption=options[selectedIndex];if(!preselectedOption?.disabled){if(preselectedOption){forceChangeFakeSelect(preselectedOption),isMultiSelect||onCloseDropdown(!0);return}isMultiSelect||onCloseDropdown()}},ArrowUp:()=>{let newIndex=-1===selectedIndex?activeItemIndex:selectedIndex;for(;newIndex>0&&(newIndex-=1,options[newIndex]?.disabled););options[newIndex]?.disabled||onSelectedIndexChange(newIndex)},ArrowDown:()=>{let newIndex=-1===selectedIndex?activeItemIndex:selectedIndex;for(;newIndex<options.length-1&&(newIndex+=1,options[newIndex]?.disabled););options[newIndex]?.disabled||onSelectedIndexChange(newIndex)}},triggerRef,isOpen&&!disabled);let renderItem=index=>{let option=options[index],id=getOptionId(name,option.value);if(isMultiSelect){let isActive=value.includes(option.value);return _react.default.createElement(CustomOption,{role:"option","aria-selected":isActive,"aria-disabled":option.disabled,id:id,key:option.value,active:isActive,disabled:option.disabled,preSelected:selectedIndex===index,"data-list-item":!0,onMouseDown:()=>{option.disabled||forceChangeFakeSelect(option)},onClick:evt=>evt.stopPropagation()},_react.default.createElement(_Checkbox.CheckboxRaw,{name:"",disabled:option.disabled,checked:isActive,size:"s",label:option.label,onChange:()=>null,labelHint:option?.description}))}let isActive=value===option.value,optionText=_react.default.createElement(_Stack.Stack,{space:"zero"},_react.default.createElement(_Text.Text,{color:"primary",size:"m"},option.label),option.description&&_react.default.createElement(_Text.Text,{color:"tertiary",size:"s"},option.description));return _react.default.createElement(_StyledSelectComponents.StyledOption,{role:"option","aria-selected":isActive,"aria-disabled":option.disabled,id:id,key:option.value,active:isActive,disabled:option.disabled,preSelected:selectedIndex===index,"data-list-item":!0,onMouseDown:()=>{option.disabled||(forceChangeFakeSelect(option),onCloseDropdown(!0))}},isActive?_react.default.createElement(_Inline.Inline,{noWrap:!0,alignItems:"spaceBetween"},optionText,_react.default.createElement(_Box.Box,{space:"zero",tSpace:"xxxs"},_react.default.createElement(_Icon.Icon,{name:"check",size:"s",color:"accent"}))):optionText)},listStyle={...optionsListStyle,width:optionsListWidth||refForPositioning.current?.getBoundingClientRect().width},listElm=_react.default.createElement(_StyledSelectComponents.StyledDropdown,{style:listStyle,ref:optionsListRef,onMouseDown:e=>e.preventDefault(),"data-e2e-test-id":"optionsList"},isVirtualized?_react.default.createElement(_VirtualScrollList.VirtualScrollList,{id:getOptionsListId(name),maxHeight:effectiveMaxHeight,itemHeight:36,itemAmount:options.length,emptyState:()=>null,containerStyle:_constants.dropdownContainerStyle,itemInView:selectedIndex,itemTemplate:renderItem,onContentHeightChange:calculateStyle,role:"listbox"}):_react.default.createElement(StyledListContainer,{maxHeight:effectiveMaxHeight,role:"listbox",id:getOptionsListId(name),ref:listContainerRef},options.map((_option,index)=>renderItem(index))));if(!isOpen)return null;let listPortal=options.length?_react.default.createElement(_Portal.Portal,{portalContainer:portalContainer},listElm):null;return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_ScreenReaderText.ScreenReaderText,{role:"status","aria-live":"polite"},options.length?"":emptyStateMessage),listPortal)}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get OPTIONS_LIST_SELECTOR(){return OPTIONS_LIST_SELECTOR},get OptionsList(){return OptionsList},get getOptionId(){return getOptionId},get getOptionsListId(){return getOptionsListId}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_react1=require("@emotion/react"),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_useKeyboard=require("../../../shared/useKeyboard"),_useWindow=require("../../../shared/useWindow"),_usePopupMenu=require("../../../shared/popupMenu/usePopupMenu"),_VirtualScrollList=require("../../VirtualScrollList/VirtualScrollList"),_Text=require("../../Typography/Text/Text"),_Box=require("../../Box/Box"),_Inline=require("../../Inline/Inline"),_Icon=require("../../Icon/Icon"),_StyledSelectComponents=require("./StyledSelectComponents"),_constants=require("./constants"),_Stack=require("../../Stack/Stack"),_Checkbox=require("../Checkbox/Checkbox"),_Portal=require("../../Portal/Portal"),_ScreenReaderText=require("../../Utilities/ScreenReaderText/ScreenReaderText"),OPTIONS_LIST_SELECTOR='[role="listbox"], [role="option"]';function getOptionId(selectName,optionValue){return`${selectName}Option${optionValue}`}function getOptionsListId(selectName){return`${selectName}OptionsList`}const scrollToItem=({list,itemIndex,behavior})=>{list[itemIndex]?.scrollIntoView?.({behavior,block:"nearest"})},CustomOption=(0,_styled.default)(_StyledSelectComponents.StyledOption,{target:"e1bzrm20",label:"CustomOption"})(({theme})=>({paddingTop:0,paddingBottom:0,"& > div":{paddingTop:theme.variables.size.spacing.xs,paddingBottom:theme.variables.size.spacing.xs},"& > div *":{marginTop:0}})),StyledListContainer=(0,_styled.default)("div",{target:"e1bzrm21",label:"StyledListContainer"})(({theme,maxHeight})=>({maxHeight,boxSizing:"border-box",overflow:"auto",padding:`${theme.variables.size.spacing.xxs} 0`}));function OptionsList({isOpen,isMultiSelect=!1,value,disabled,options=[],portalContainer,triggerRef,triggerWrapperRef,maxHeight,emptyStateMessage="No options available",selectedIndex,optionsListWidth,isVirtualized=!0,name,onCloseDropdown,onSelectedIndexChange,forceChangeFakeSelect}){let optionsListRef=(0,_react.useRef)(null),listContainerRef=(0,_react.useRef)(null),listItemsRef=(0,_react.useRef)(null),refForPositioning=triggerWrapperRef||triggerRef,activeItemIndex=(0,_react.useMemo)(()=>options.findIndex(option=>isMultiSelect?value.includes(option.value):option.value===value),[options,isMultiSelect,value]),{menuStyle:optionsListStyle,calculateStyle}=(0,_usePopupMenu.usePopupMenu)({triggerRef:refForPositioning,menuRef:optionsListRef,isOpen}),win=(0,_useWindow.useWindow)(),{variables}=(0,_react1.useTheme)(),effectiveMaxHeight=(0,_react.useMemo)(()=>{if(!win||!optionsListStyle.top)return maxHeight;let menuViewportMargin=parseInt(variables.size.spacing.xs,10),menuTopInViewport=optionsListStyle.top-(win.scrollY??0),spaceBelow=win.innerHeight-menuTopInViewport-menuViewportMargin;return!Number.isFinite(spaceBelow)||spaceBelow<=0?maxHeight:maxHeight?Math.min(maxHeight,spaceBelow):spaceBelow},[maxHeight,optionsListStyle,win,variables]);(0,_react.useLayoutEffect)(()=>{if(isOpen&&listContainerRef.current&&!isVirtualized&&optionsListStyle.top){let listElm=listContainerRef.current;listElm.clientHeight<listElm.scrollHeight&&(listItemsRef.current=listElm.querySelectorAll("[data-list-item]"),scrollToItem({list:listItemsRef.current,itemIndex:activeItemIndex,behavior:"instant"}))}else listItemsRef.current=null},[isOpen,isVirtualized,listContainerRef,options,maxHeight,optionsListStyle,activeItemIndex]),(0,_react.useEffect)(()=>{listItemsRef.current&&scrollToItem({list:listItemsRef.current,itemIndex:selectedIndex,behavior:"smooth"})},[listItemsRef,selectedIndex]),(0,_useKeyboard.useKeyboard)({Escape:()=>onCloseDropdown(!0),Enter:()=>{let preselectedOption=options[selectedIndex];if(!preselectedOption?.disabled){if(preselectedOption){forceChangeFakeSelect(preselectedOption),isMultiSelect||onCloseDropdown(!0);return}isMultiSelect||onCloseDropdown()}},ArrowUp:()=>{let newIndex=-1===selectedIndex?activeItemIndex:selectedIndex;for(;newIndex>0&&(newIndex-=1,options[newIndex]?.disabled););options[newIndex]?.disabled||onSelectedIndexChange(newIndex)},ArrowDown:()=>{let newIndex=-1===selectedIndex?activeItemIndex:selectedIndex;for(;newIndex<options.length-1&&(newIndex+=1,options[newIndex]?.disabled););options[newIndex]?.disabled||onSelectedIndexChange(newIndex)}},triggerRef,isOpen&&!disabled);let renderItem=index=>{let option=options[index],id=getOptionId(name,option.value);if(isMultiSelect){let isActive=value.includes(option.value);return _react.default.createElement(CustomOption,{role:"option","aria-selected":isActive,"aria-disabled":option.disabled,id:id,key:option.value,active:isActive,disabled:option.disabled??!1,preSelected:selectedIndex===index,"data-list-item":!0,onMouseDown:()=>{option.disabled||forceChangeFakeSelect(option)},onClick:evt=>evt.stopPropagation()},_react.default.createElement(_Checkbox.CheckboxRaw,{name:"",disabled:option.disabled,checked:isActive,size:"s",label:option.label,onChange:()=>null,labelHint:option?.description}))}let isActive=value===option.value,optionText=_react.default.createElement(_Stack.Stack,{space:"zero"},_react.default.createElement(_Text.Text,{color:"primary",size:"m"},option.label),option.description&&_react.default.createElement(_Text.Text,{color:"tertiary",size:"s"},option.description));return _react.default.createElement(_StyledSelectComponents.StyledOption,{role:"option","aria-selected":isActive,"aria-disabled":option.disabled,id:id,key:option.value,active:isActive,disabled:option.disabled??!1,preSelected:selectedIndex===index,"data-list-item":!0,onMouseDown:()=>{option.disabled||(forceChangeFakeSelect(option),onCloseDropdown(!0))}},isActive?_react.default.createElement(_Inline.Inline,{noWrap:!0,alignItems:"spaceBetween"},optionText,_react.default.createElement(_Box.Box,{space:"zero",tSpace:"xxxs"},_react.default.createElement(_Icon.Icon,{name:"check",size:"s",color:"accent"}))):optionText)},listStyle={...optionsListStyle,width:optionsListWidth||refForPositioning.current?.getBoundingClientRect().width},listElm=_react.default.createElement(_StyledSelectComponents.StyledDropdown,{style:listStyle,ref:optionsListRef,onMouseDown:e=>e.preventDefault(),"data-e2e-test-id":"optionsList"},isVirtualized?_react.default.createElement(_VirtualScrollList.VirtualScrollList,{id:getOptionsListId(name),maxHeight:effectiveMaxHeight,itemHeight:36,itemAmount:options.length,emptyState:()=>null,containerStyle:_constants.dropdownContainerStyle,itemInView:selectedIndex,itemTemplate:renderItem,onContentHeightChange:calculateStyle,role:"listbox"}):_react.default.createElement(StyledListContainer,{maxHeight:effectiveMaxHeight,role:"listbox",id:getOptionsListId(name),ref:listContainerRef},options.map((_option,index)=>renderItem(index))));if(!isOpen)return null;let listPortal=options.length?_react.default.createElement(_Portal.Portal,{portalContainer:portalContainer},listElm):null;return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_ScreenReaderText.ScreenReaderText,{role:"status","aria-live":"polite"},options.length?"":emptyStateMessage),listPortal)}

package/build/cjs/components/Form/Combobox/SingleSelect.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import type { CommonSelectProps } from "./Combobox";
 import type { FormFieldProps } from "../FormField/FormField";
-type SingleSelectProps = CommonSelectProps & Pick<FormFieldProps, "label"> & {
+type SingleSelectProps = Omit<CommonSelectProps, "value" | "onChange" | "options" | "filterMethod" | "maxHeight"> & Required<Pick<CommonSelectProps, "options" | "filterMethod" | "maxHeight">> & Pick<FormFieldProps, "label"> & {
     value: string;
     onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
 };

package/build/cjs/components/Form/Combobox/SingleSelect.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"SingleSelect",{enumerable:!0,get:function(){return SingleSelect}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_useKeyboard=require("../../../shared/useKeyboard"),_Input=require("../Input/Input"),_StyledSelectComponents=require("./StyledSelectComponents"),_OptionsList=require("./OptionsList"),StyledInnerInputContainer=(0,_styled.default)("div",{target:"e14osuid0",label:"StyledInnerInputContainer"})({position:"relative",zIndex:1}),StyledInputWrap=(0,_styled.default)("div",{target:"e14osuid1",label:"StyledInputWrap"})(()=>({position:"absolute",pointerEvents:"none",width:"100%",bottom:0,left:0})),HiddenSelectInput=(0,_styled.default)("select",{target:"e14osuid2",label:"HiddenSelectInput"})(()=>({display:"none"})),SingleSelect=({options,name,value,placeholder,emptyStateMessage,hasError,filterMethod,onChange=()=>{},onBlur,onFocus,maxHeight,autoComplete,disabled,label,optionsListWidth,portalContainer,readOnly,"aria-describedby":ariaDescribedBy,privateProps,...ariaAttributes})=>{let[isOpen,setIsOpen]=(0,_react.useState)(!1),[innerValue,setInnerValue]=(0,_react.useState)(""),[preselectedIndex,setPreselectedIndex]=(0,_react.useState)(-1),initialValueOption=(0,_react.useMemo)(()=>options.find(option=>option.value===value)||{value:"",label:""},[options,value]),[fakeSelectedOption,setFakeSelectedOption]=(0,_react.useState)(initialValueOption),fakeSelectRef=(0,_react.useRef)(null),innerInputRef=(0,_react.useRef)(null),currentValueRef=(0,_react.useRef)(value);currentValueRef.current=value;let forceChangeFakeSelect=(0,_react.useCallback)(selectedOption=>{fakeSelectedOption.value!==selectedOption.value&&setFakeSelectedOption(selectedOption)},[fakeSelectedOption]),handleOpenDropdown=(0,_react.useCallback)(()=>{readOnly||setIsOpen(!0)},[readOnly,setIsOpen]),closeDropdown=(0,_react.useCallback)((noSelect=!1)=>{if(setIsOpen(!1),!noSelect){let selectedOption=options.find(option=>option.label.toLowerCase().trim()===innerValue.toLowerCase().trim());selectedOption&&forceChangeFakeSelect(selectedOption)}setInnerValue(""),setPreselectedIndex(-1),onBlur()},[onBlur,forceChangeFakeSelect,innerValue,options]);(0,_react.useEffect)(()=>{fakeSelectRef.current&&currentValueRef.current!==fakeSelectedOption.value&&fakeSelectRef.current.dispatchEvent(new Event("change",{bubbles:!0}))},[fakeSelectedOption,fakeSelectRef,currentValueRef]),(0,_react.useEffect)(()=>{forceChangeFakeSelect(initialValueOption)},[initialValueOption]);let filteredOptions=(0,_react.useMemo)(()=>innerValue?options.filter(option=>filterMethod(option,innerValue)):options,[options,filterMethod,innerValue]),displayValue=(0,_react.useMemo)(()=>options.some(option=>option.value===value)?options.find(option=>option.value===value).label:"",[value,options]);(0,_react.useEffect)(()=>{setPreselectedIndex(-1)},[filteredOptions]),(0,_useKeyboard.useKeyboard)({"ArrowUp ArrowDown":()=>{handleOpenDropdown()}},innerInputRef,!isOpen&&!disabled&&!readOnly);let optionsListId=(0,_OptionsList.getOptionsListId)(name),pendingOption=filteredOptions[preselectedIndex]??null,ariaActiveDescendant=isOpen&&pendingOption?(0,_OptionsList.getOptionId)(name,pendingOption.value):"";return _react.default.createElement(_StyledSelectComponents.StyledContainer,{onBlur:()=>{isOpen&&pendingOption&&!pendingOption.disabled&&forceChangeFakeSelect(pendingOption),closeDropdown(!0)}},_react.default.createElement(StyledInnerInputContainer,null,_react.default.createElement(_Input.InputRaw,{name:`${name}-innerInput`,value:innerValue,hasError:hasError,privateProps:{isTransparent:!(isOpen&&innerValue)||readOnly},icon:isOpen?"chevron-up":"chevron-down",disabled:disabled,readOnly:readOnly,onFocus:onFocus,onClick:handleOpenDropdown,onChange:e=>{e.currentTarget.value&&handleOpenDropdown(),setInnerValue(e.currentTarget.value)},ref:innerInputRef,autoComplete:autoComplete,...ariaAttributes,"aria-label":label,role:"combobox","aria-haspopup":"listbox","aria-activedescendant":ariaActiveDescendant,"aria-controls":isOpen?optionsListId:"","aria-expanded":isOpen,"aria-describedby":ariaDescribedBy})),_react.default.createElement(StyledInputWrap,null,_react.default.createElement(_Input.InputRaw,{"aria-hidden":!0,name:name,value:displayValue,onChange:()=>null,icon:isOpen?"chevron-up":"chevron-down",placeholder:placeholder,tabIndex:-1,hasError:hasError,autoComplete:"off",readOnly:readOnly})),_react.default.createElement(_OptionsList.OptionsList,{name:name,isOpen:isOpen,options:filteredOptions,triggerRef:innerInputRef,onCloseDropdown:closeDropdown,portalContainer:portalContainer,selectedIndex:preselectedIndex,onSelectedIndexChange:index=>{setPreselectedIndex(index)},forceChangeFakeSelect:forceChangeFakeSelect,value:value,emptyStateMessage:emptyStateMessage,disabled:disabled,maxHeight:maxHeight,optionsListWidth:optionsListWidth}),_react.default.createElement(HiddenSelectInput,{onChange:onChange,value:fakeSelectedOption.value,ref:fakeSelectRef,autoComplete:"off"},_react.default.createElement("option",{value:fakeSelectedOption.value},fakeSelectedOption.label)))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"SingleSelect",{enumerable:!0,get:function(){return SingleSelect}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_useKeyboard=require("../../../shared/useKeyboard"),_Input=require("../Input/Input"),_StyledSelectComponents=require("./StyledSelectComponents"),_OptionsList=require("./OptionsList"),StyledInnerInputContainer=(0,_styled.default)("div",{target:"eqabiiq0",label:"StyledInnerInputContainer"})({position:"relative",zIndex:1}),StyledInputWrap=(0,_styled.default)("div",{target:"eqabiiq1",label:"StyledInputWrap"})(()=>({position:"absolute",pointerEvents:"none",width:"100%",bottom:0,left:0})),HiddenSelectInput=(0,_styled.default)("select",{target:"eqabiiq2",label:"HiddenSelectInput"})(()=>({display:"none"})),SingleSelect=({options,name,value,placeholder,emptyStateMessage,hasError,filterMethod,onChange=()=>{},onBlur,onFocus,maxHeight,autoComplete,disabled,label,optionsListWidth,portalContainer,readOnly,"aria-describedby":ariaDescribedBy,privateProps,...ariaAttributes})=>{let[isOpen,setIsOpen]=(0,_react.useState)(!1),[innerValue,setInnerValue]=(0,_react.useState)(""),[preselectedIndex,setPreselectedIndex]=(0,_react.useState)(-1),initialValueOption=(0,_react.useMemo)(()=>options.find(option=>option.value===value)||{value:"",label:""},[options,value]),[fakeSelectedOption,setFakeSelectedOption]=(0,_react.useState)(initialValueOption),fakeSelectRef=(0,_react.useRef)(null),innerInputRef=(0,_react.useRef)(null),currentValueRef=(0,_react.useRef)(value);currentValueRef.current=value;let forceChangeFakeSelect=(0,_react.useCallback)(selectedOption=>{fakeSelectedOption.value!==selectedOption.value&&setFakeSelectedOption(selectedOption)},[fakeSelectedOption]),handleOpenDropdown=(0,_react.useCallback)(()=>{readOnly||setIsOpen(!0)},[readOnly,setIsOpen]),closeDropdown=(0,_react.useCallback)((noSelect=!1)=>{if(setIsOpen(!1),!noSelect){let selectedOption=options.find(option=>option.label.toLowerCase().trim()===innerValue.toLowerCase().trim());selectedOption&&forceChangeFakeSelect(selectedOption)}setInnerValue(""),setPreselectedIndex(-1),onBlur?.()},[onBlur,forceChangeFakeSelect,innerValue,options]);(0,_react.useEffect)(()=>{fakeSelectRef.current&&currentValueRef.current!==fakeSelectedOption.value&&fakeSelectRef.current.dispatchEvent(new Event("change",{bubbles:!0}))},[fakeSelectedOption,fakeSelectRef,currentValueRef]),(0,_react.useEffect)(()=>{forceChangeFakeSelect(initialValueOption)},[initialValueOption]);let filteredOptions=(0,_react.useMemo)(()=>innerValue?options.filter(option=>filterMethod(option,innerValue)):options,[options,filterMethod,innerValue]),displayValue=(0,_react.useMemo)(()=>options.find(option=>option.value===value)?.label??"",[value,options]);(0,_react.useEffect)(()=>{setPreselectedIndex(-1)},[filteredOptions]),(0,_useKeyboard.useKeyboard)({"ArrowUp ArrowDown":()=>{handleOpenDropdown()}},innerInputRef,!isOpen&&!disabled&&!readOnly);let optionsListId=(0,_OptionsList.getOptionsListId)(name),pendingOption=filteredOptions[preselectedIndex]??null,ariaActiveDescendant=isOpen&&pendingOption?(0,_OptionsList.getOptionId)(name,pendingOption.value):"";return _react.default.createElement(_StyledSelectComponents.StyledContainer,{onBlur:()=>{isOpen&&pendingOption&&!pendingOption.disabled&&forceChangeFakeSelect(pendingOption),closeDropdown(!0)}},_react.default.createElement(StyledInnerInputContainer,null,_react.default.createElement(_Input.InputRaw,{name:`${name}-innerInput`,value:innerValue,hasError:hasError,privateProps:{isTransparent:!(isOpen&&innerValue)||readOnly},icon:isOpen?"chevron-up":"chevron-down",disabled:disabled,readOnly:readOnly,onFocus:onFocus,onClick:handleOpenDropdown,onChange:e=>{e.currentTarget.value&&handleOpenDropdown(),setInnerValue(e.currentTarget.value)},ref:innerInputRef,autoComplete:autoComplete,...ariaAttributes,"aria-label":label,role:"combobox","aria-haspopup":"listbox","aria-activedescendant":ariaActiveDescendant,"aria-controls":isOpen?optionsListId:"","aria-expanded":isOpen,"aria-describedby":ariaDescribedBy})),_react.default.createElement(StyledInputWrap,null,_react.default.createElement(_Input.InputRaw,{"aria-hidden":!0,name:name,value:displayValue,onChange:()=>null,icon:isOpen?"chevron-up":"chevron-down",placeholder:placeholder,tabIndex:-1,hasError:hasError,autoComplete:"off",readOnly:readOnly})),_react.default.createElement(_OptionsList.OptionsList,{name:name,isOpen:isOpen,options:filteredOptions,triggerRef:innerInputRef,onCloseDropdown:closeDropdown,portalContainer:portalContainer,selectedIndex:preselectedIndex,onSelectedIndexChange:index=>{setPreselectedIndex(index)},forceChangeFakeSelect:forceChangeFakeSelect,value:value,emptyStateMessage:emptyStateMessage,disabled:disabled,maxHeight:maxHeight,optionsListWidth:optionsListWidth}),_react.default.createElement(HiddenSelectInput,{onChange:onChange,value:fakeSelectedOption.value,ref:fakeSelectRef,autoComplete:"off"},_react.default.createElement("option",{value:fakeSelectedOption.value},fakeSelectedOption.label)))};

package/build/cjs/components/Form/Combobox/constants.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"dropdownContainerStyle",{enumerable:!0,get:function(){return dropdownContainerStyle}});const xxs=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("../../../web-tokens/_sizes.json")).default.find(({subitemName})=>"xxs"===subitemName).original,dropdownContainerStyle={paddingTop:xxs,paddingBottom:xxs};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"dropdownContainerStyle",{enumerable:!0,get:function(){return dropdownContainerStyle}});const _sizesjson=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("../../../web-tokens/_sizes.json")),xxs=_sizesjson.default.find(({subitemName})=>"xxs"===subitemName)?.original,dropdownContainerStyle={paddingTop:xxs,paddingBottom:xxs};

package/build/cjs/components/Form/FormFieldGroup/FormFieldGroup.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"FormFieldGroup",{enumerable:!0,get:function(){return FormFieldGroup}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_ispropvalid=/*#__PURE__*/_interop_require_default._(require("@emotion/is-prop-valid")),_Stack=require("../../Stack/Stack"),_Text=require("../../Typography/Text/Text"),_FormErrorMessages=require("../FormErrorMessages/FormErrorMessages"),_FormLabelText=require("../FormLabelText/FormLabelText"),_flattenChildren=require("../../../shared/flattenChildren"),_ScreenReaderText=require("../../Utilities/ScreenReaderText/ScreenReaderText"),_mediaQueries=require("../../../shared/mediaQueries"),StyledFieldset=(0,_styled.default)("fieldset",{shouldForwardProp:prop=>(0,_ispropvalid.default)(prop)&&"color"!==prop,target:"e1o8e6w80",label:"StyledFieldset"})(({isObserverDone,disabled})=>({border:0,margin:0,padding:0,visibility:isObserverDone?"visible":"hidden",...disabled&&{cursor:"not-allowed"}})),InlineChildren=(0,_styled.default)("div",{target:"e1o8e6w81",label:"InlineChildren"})({display:"flex",flexDirection:"row",flexWrap:"nowrap"}),FormChildren=(0,_styled.default)("div",{target:"e1o8e6w82",label:"FormChildren"})(({theme,shouldLabelWrap,space})=>({...(0,_mediaQueries.useResponsiveStyles)({marginRight:[space,theme.variables.size.spacing]}),whiteSpace:shouldLabelWrap?"normal":"nowrap"})),StyledTextContainer=(0,_styled.default)("div",{target:"e1o8e6w83",label:"StyledTextContainer"})(({theme,disabled})=>({...disabled&&{opacity:theme.variables.opacity.disabled,pointerEvents:"none"}})),StyledLabelContainer=(0,_styled.default)("div",{target:"e1o8e6w84",label:"StyledLabelContainer"})(({theme,disabled})=>({...disabled&&{opacity:theme.variables.opacity.disabled,pointerEvents:"none"}}));function FormFieldGroup({children,label="",labelAs="div",isLabelHidden=!1,labelHint="",errorMessages=[],hint="",disabled=!1,inline=!1,space="xl","data-e2e-test-id":dataE2eTestId,...ariaAttributes}){let messageId=(0,_react.useId)(),radioGroupRef=(0,_react.useRef)(null),[isOverflowing,setIsOverflowing]=(0,_react.useState)(!1),[isObserverDone,setIsObserverDone]=(0,_react.useState)(!inline),[shouldLabelWrap,setShouldLabelWrap]=(0,_react.useState)(!1);(0,_react.useEffect)(()=>{let observer;return inline&&"undefined"!=typeof IntersectionObserver&&radioGroupRef&&radioGroupRef.current&&(observer=new IntersectionObserver(entries=>entries.forEach(entry=>{entry.isIntersecting||(setIsOverflowing(!0),setShouldLabelWrap(!0)),setIsObserverDone(!0)}),{root:radioGroupRef.current,threshold:1}),Object.entries(radioGroupRef.current.children).forEach(radio=>{let radioElement=radio[1];observer.observe(radioElement)})),()=>{observer&&observer.disconnect()}},[inline]);let validErrorMessages=errorMessages.filter(message=>message),messagesElm=(!!validErrorMessages.length||hint)&&_react.default.createElement(_Stack.Stack,{space:"xxs",id:messageId},!!validErrorMessages.length&&_react.default.createElement(StyledTextContainer,{disabled:disabled},_react.default.createElement(_FormErrorMessages.FormErrorMessages,{messages:validErrorMessages})),hint&&_react.default.createElement(StyledTextContainer,{disabled:disabled},_react.default.createElement(_Text.Text,{size:"s",color:"tertiary"},hint))),ariaDescribedBy=messagesElm?{"aria-describedby":messageId}:{},renderChild=child=>_react.default.isValidElement(child)?_react.default.cloneElement(child,{disabled:disabled||child.props.disabled}):null;return _react.default.createElement(StyledFieldset,{disabled:disabled,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"FormFieldGroup",isObserverDone:isObserverDone,...ariaAttributes,...ariaDescribedBy},_react.default.createElement(_ScreenReaderText.ScreenReaderText,{as:"legend"},label),_react.default.createElement(_Stack.Stack,{space:"xs"},label&&!isLabelHidden&&_react.default.createElement(StyledLabelContainer,{disabled:disabled},_react.default.createElement(_FormLabelText.FormLabelText,{labelHint:labelHint,labelAs:labelAs},label)),inline&&!isOverflowing?_react.default.createElement(InlineChildren,{ref:radioGroupRef},_react.default.Children.map((0,_flattenChildren.flattenChildren)(children),child=>child?_react.default.createElement(FormChildren,{shouldLabelWrap:shouldLabelWrap,space:space},renderChild(child)):null)):_react.default.Children.map((0,_flattenChildren.flattenChildren)(children),renderChild),messagesElm))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"FormFieldGroup",{enumerable:!0,get:function(){return FormFieldGroup}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_ispropvalid=/*#__PURE__*/_interop_require_default._(require("@emotion/is-prop-valid")),_Stack=require("../../Stack/Stack"),_Text=require("../../Typography/Text/Text"),_FormErrorMessages=require("../FormErrorMessages/FormErrorMessages"),_FormLabelText=require("../FormLabelText/FormLabelText"),_flattenChildren=require("../../../shared/flattenChildren"),_ScreenReaderText=require("../../Utilities/ScreenReaderText/ScreenReaderText"),_mediaQueries=require("../../../shared/mediaQueries"),StyledFieldset=(0,_styled.default)("fieldset",{shouldForwardProp:prop=>(0,_ispropvalid.default)(prop)&&"color"!==prop,target:"ec2mc9r0",label:"StyledFieldset"})(({isObserverDone,disabled})=>({border:0,margin:0,padding:0,visibility:isObserverDone?"visible":"hidden",...disabled&&{cursor:"not-allowed"}})),InlineChildren=(0,_styled.default)("div",{target:"ec2mc9r1",label:"InlineChildren"})({display:"flex",flexDirection:"row",flexWrap:"nowrap"}),FormChildren=(0,_styled.default)("div",{target:"ec2mc9r2",label:"FormChildren"})(({theme,shouldLabelWrap,space})=>({...(0,_mediaQueries.useResponsiveStyles)({marginRight:[space,theme.variables.size.spacing]}),whiteSpace:shouldLabelWrap?"normal":"nowrap"})),StyledTextContainer=(0,_styled.default)("div",{target:"ec2mc9r3",label:"StyledTextContainer"})(({theme,disabled})=>({...disabled&&{opacity:theme.variables.opacity.disabled,pointerEvents:"none"}})),StyledLabelContainer=(0,_styled.default)("div",{target:"ec2mc9r4",label:"StyledLabelContainer"})(({theme,disabled})=>({...disabled&&{opacity:theme.variables.opacity.disabled,pointerEvents:"none"}}));function FormFieldGroup({children,label="",labelAs="div",isLabelHidden=!1,labelHint="",errorMessages=[],hint="",disabled=!1,inline=!1,space="xl","data-e2e-test-id":dataE2eTestId,...ariaAttributes}){let messageId=(0,_react.useId)(),radioGroupRef=(0,_react.useRef)(null),[isOverflowing,setIsOverflowing]=(0,_react.useState)(!1),[isObserverDone,setIsObserverDone]=(0,_react.useState)(!inline),[shouldLabelWrap,setShouldLabelWrap]=(0,_react.useState)(!1);(0,_react.useEffect)(()=>{let observer;return inline&&"undefined"!=typeof IntersectionObserver&&radioGroupRef&&radioGroupRef.current&&(observer=new IntersectionObserver(entries=>entries.forEach(entry=>{entry.isIntersecting||(setIsOverflowing(!0),setShouldLabelWrap(!0)),setIsObserverDone(!0)}),{root:radioGroupRef.current,threshold:1}),Object.entries(radioGroupRef.current.children).forEach(radio=>{let radioElement=radio[1];observer.observe(radioElement)})),()=>{observer&&observer.disconnect()}},[inline]);let validErrorMessages=errorMessages.filter(message=>message),messagesElm=(!!validErrorMessages.length||hint)&&_react.default.createElement(_Stack.Stack,{space:"xxs",id:messageId},!!validErrorMessages.length&&_react.default.createElement(StyledTextContainer,{disabled:disabled},_react.default.createElement(_FormErrorMessages.FormErrorMessages,{messages:validErrorMessages})),hint&&_react.default.createElement(StyledTextContainer,{disabled:disabled},_react.default.createElement(_Text.Text,{size:"s",color:"tertiary"},hint))),ariaDescribedBy=messagesElm?{"aria-describedby":messageId}:{},renderChild=child=>_react.default.isValidElement(child)?_react.default.cloneElement(child,{disabled:disabled||child.props.disabled}):null;return _react.default.createElement(StyledFieldset,{disabled:disabled,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"FormFieldGroup",isObserverDone:isObserverDone,...ariaAttributes,...ariaDescribedBy},_react.default.createElement(_ScreenReaderText.ScreenReaderText,{as:"legend"},label),_react.default.createElement(_Stack.Stack,{space:"xs"},label&&!isLabelHidden&&_react.default.createElement(StyledLabelContainer,{disabled:disabled},_react.default.createElement(_FormLabelText.FormLabelText,{labelHint:labelHint,labelAs:labelAs},label)),inline&&!isOverflowing?_react.default.createElement(InlineChildren,{ref:radioGroupRef},_react.default.Children.map((0,_flattenChildren.flattenChildren)(children),child=>child?_react.default.createElement(FormChildren,{shouldLabelWrap:shouldLabelWrap,space:space},renderChild(child)):null)):_react.default.Children.map((0,_flattenChildren.flattenChildren)(children),renderChild),messagesElm))}

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get Input(){return Input},get InputRaw(){return InputRaw}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Icon=require("../../Icon/Icon"),_FormField=require("../FormField/FormField"),_Text=require("../../Typography/Text/Text"),_useFormFieldMessageId=require("../FormField/useFormFieldMessageId"),_mixins=require("../../../shared/mixins"),StyledContainer=(0,_styled.default)("div",{target:"e20qv3c0",label:"StyledContainer"})(()=>({width:"100%",display:"flex",alignItems:"center",flexDirection:"row",position:"relative"})),StyledIconContainer=(0,_styled.default)("div",{target:"e20qv3c1",label:"StyledIconContainer"})(({theme})=>({position:"absolute",right:theme.variables.size.spacing.xs})),StyledInput=(0,_styled.default)("input",{target:"e20qv3c2",label:"StyledInput"})(({theme,privateProps,hasError,icon,readOnly,inputSize})=>({...(0,_mixins.getInputTextStyles)({theme,size:inputSize,hasError,readOnly}),...(0,_mixins.getInputTextPlaceholder)({theme}),...privateProps?.isTransparent?{backgroundColor:theme.values.color.background.transparent.default,borderColor:"transparent"}:{backgroundColor:theme.values.color.background.primary.default},...privateProps?.hideOutline&&{outline:"none"},"&.error":{borderColor:theme.values.color.border.error.default},"& svg":{pointerEvents:"none"},...icon&&{paddingRight:`calc(${theme.variables.size.spacing.s} + ${theme.variables.size.dimension.icon.m})`}})),InputRaw=_react.default.forwardRef(({size="m",hasError=!1,type="text",icon,autoComplete="on",privateProps={},readOnly,...rest},ref)=>_react.default.createElement(StyledContainer,null,_react.default.createElement(StyledInput,{...rest,type:type,inputSize:size,ref:ref,autoComplete:autoComplete,hasError:hasError,privateProps:privateProps,icon:icon,readOnly:readOnly,"aria-invalid":hasError}),icon&&_react.default.createElement(StyledIconContainer,null,_react.default.createElement(_Text.Text,{as:"span",color:"tertiary"},_react.default.createElement(_Icon.Icon,{name:icon,size:"m",color:readOnly?"quaternary":void 0}))))),Input=_react.default.forwardRef(({size="m",placeholder,hasError=!1,type="text",icon,autoComplete="on",privateProps={},readOnly,disabled,label,labelHint,hideLabel,hint,errorMessages,"aria-describedby":ariaDescribedBy,"data-e2e-test-id":dataE2eTestId,...rest},ref)=>{let{id,ariaDescribedByProp}=(0,_useFormFieldMessageId.useFormFieldMessageId)({ariaDescribedBy,errorMessages,hint});return _react.default.createElement(_FormField.FormField,{"data-ds-id":"Input",disabled:disabled,"data-e2e-test-id":dataE2eTestId,hideLabel:hideLabel,label:label,labelHint:labelHint,hint:hint,errorMessages:errorMessages,messageId:id},_react.default.createElement(InputRaw,{...rest,ref:ref,size:size,type:type,icon:icon,placeholder:!readOnly&&placeholder,hasError:hasError,disabled:disabled,autoComplete:autoComplete,privateProps:privateProps,readOnly:readOnly,...ariaDescribedByProp}))});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get Input(){return Input},get InputRaw(){return InputRaw}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Icon=require("../../Icon/Icon"),_FormField=require("../FormField/FormField"),_Text=require("../../Typography/Text/Text"),_useFormFieldMessageId=require("../FormField/useFormFieldMessageId"),_mixins=require("../../../shared/mixins"),StyledContainer=(0,_styled.default)("div",{target:"e16jtuij0",label:"StyledContainer"})(()=>({width:"100%",display:"flex",alignItems:"center",flexDirection:"row",position:"relative"})),StyledIconContainer=(0,_styled.default)("div",{target:"e16jtuij1",label:"StyledIconContainer"})(({theme})=>({position:"absolute",right:theme.variables.size.spacing.xs})),StyledInput=(0,_styled.default)("input",{target:"e16jtuij2",label:"StyledInput"})(({theme,privateProps,hasError,icon,readOnly,inputSize})=>({...(0,_mixins.getInputTextStyles)({theme,size:inputSize,hasError,readOnly}),...(0,_mixins.getInputTextPlaceholder)({theme}),...privateProps?.isTransparent?{backgroundColor:theme.values.color.background.transparent.default,borderColor:"transparent"}:{backgroundColor:theme.values.color.background.primary.default},...privateProps?.hideOutline&&{outline:"none"},"&.error":{borderColor:theme.values.color.border.error.default},"& svg":{pointerEvents:"none"},...icon&&{paddingRight:`calc(${theme.variables.size.spacing.s} + ${theme.variables.size.dimension.icon.m})`}})),InputRaw=_react.default.forwardRef(({size="m",hasError=!1,type="text",icon,autoComplete="on",privateProps={},readOnly,...rest},ref)=>_react.default.createElement(StyledContainer,null,_react.default.createElement(StyledInput,{...rest,type:type,inputSize:size,ref:ref,autoComplete:autoComplete,hasError:hasError,privateProps:privateProps,icon:icon,readOnly:readOnly,"aria-invalid":hasError}),icon&&_react.default.createElement(StyledIconContainer,null,_react.default.createElement(_Text.Text,{as:"span",color:"tertiary"},_react.default.createElement(_Icon.Icon,{name:icon,size:"m",color:readOnly?"quaternary":void 0}))))),Input=_react.default.forwardRef(({size="m",placeholder,hasError=!1,type="text",icon,autoComplete="on",privateProps={},readOnly,disabled,label,labelHint,hideLabel,hint,errorMessages,"aria-describedby":ariaDescribedBy,"data-e2e-test-id":dataE2eTestId,...rest},ref)=>{let{id,ariaDescribedByProp}=(0,_useFormFieldMessageId.useFormFieldMessageId)({ariaDescribedBy,errorMessages,hint});return _react.default.createElement(_FormField.FormField,{"data-ds-id":"Input",disabled:disabled,"data-e2e-test-id":dataE2eTestId,hideLabel:hideLabel,label:label,labelHint:labelHint,hint:hint,errorMessages:errorMessages,messageId:id},_react.default.createElement(InputRaw,{...rest,ref:ref,size:size,type:type,icon:icon,placeholder:readOnly?void 0:placeholder,hasError:hasError,disabled:disabled,autoComplete:autoComplete,privateProps:privateProps,readOnly:readOnly,...ariaDescribedByProp}))});

package/build/cjs/components/Form/PasswordInput/PasswordInput.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get PasswordInput(){return PasswordInput},get PasswordInputRaw(){return PasswordInputRaw}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_FormField=require("../FormField/FormField"),_useFormFieldMessageId=require("../FormField/useFormFieldMessageId"),_PasswordInputButton=require("./PasswordInputButton"),handleBorderColor=({theme,hasError,readOnly})=>hasError?theme.values.color.border.error.default:readOnly?theme.values.color.border.primary.disabled:theme.values.color.border.primary.default,StyledContainer=(0,_styled.default)("div",{target:"e136axgx0",label:"StyledContainer"})(()=>({width:"100%",display:"flex",alignItems:"center",flexDirection:"row",position:"relative"})),StyledPasswordInput=(0,_styled.default)("input",{target:"e136axgx1",label:"StyledPasswordInput"})(({theme,hasError,readOnly})=>({fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.m,lineHeight:theme.variables.size.lineHeight.xl,borderRadius:theme.variables.size.borderRadius.xs,borderWidth:"1px",borderStyle:"solid",width:"100%",padding:`calc(${theme.variables.size.spacing.xs} - 1px) ${theme.variables.size.spacing.s}`,paddingRight:theme.variables.size.spacing.xxl,boxSizing:"border-box",color:theme.values.color.text.secondary.default,borderColor:handleBorderColor({theme,hasError,readOnly}),backgroundColor:theme.values.color.background.primary.default,"&.error":{borderColor:theme.values.color.border.error.default},"&.has-icon":{paddingRight:theme.variables.size.spacing.xs+theme.variables.size.dimension.icon.m},"&::placeholder":{fontStyle:"italic",color:theme.values.color.text.tertiary.default,opacity:theme.variables.opacity.visible},"&:-ms-input-placeholder":{fontStyle:"italic",color:theme.values.color.text.tertiary.default},"&::-ms-input-placeholder":{fontStyle:"italic",color:theme.values.color.text.tertiary.default},...hasError&&{boxShadow:`0 0 0 1px inset ${theme.values.color.border.error.default}`}})),PasswordInputRaw=(0,_react.forwardRef)(({placeholder,hasError=!1,onIconClick,readOnly,disabled,slotProps:{toggleVisibility:{ariaLabelShow,ariaLabelHide}},...rest},ref)=>{let[isPasswordVisible,setIsPasswordVisible]=(0,_react.useState)(!1);return _react.default.createElement(StyledContainer,null,_react.default.createElement(StyledPasswordInput,{...rest,type:isPasswordVisible?"text":"password",placeholder:!readOnly&&placeholder,ref:ref,hasError:hasError,readOnly:readOnly,disabled:disabled,"aria-invalid":hasError}),_react.default.createElement(_PasswordInputButton.PasswordInputButton,{hasError:hasError,disabled:disabled,onIconClick:onIconClick,isPasswordVisible:isPasswordVisible,readOnly:readOnly,ariaLabel:isPasswordVisible?ariaLabelHide:ariaLabelShow,onToggle:()=>setIsPasswordVisible(prev=>!prev)}))}),PasswordInput=_react.default.forwardRef(({placeholder="••••••••",hasError=!1,onIconClick,autoComplete="on",slotProps,disabled,label,labelHint,hideLabel,hint,errorMessages,"aria-describedby":ariaDescribedBy,"data-e2e-test-id":dataE2eTestId,...rest},ref)=>{let{id,ariaDescribedByProp}=(0,_useFormFieldMessageId.useFormFieldMessageId)({ariaDescribedBy,errorMessages,hint});return _react.default.createElement(_FormField.FormField,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"PasswordInput",disabled:disabled,label:label,labelHint:labelHint,hideLabel:hideLabel,hint:hint,errorMessages:errorMessages,messageId:id},_react.default.createElement(PasswordInputRaw,{...rest,ref:ref,placeholder:placeholder,hasError:hasError,disabled:disabled,onIconClick:onIconClick,autoComplete:autoComplete,slotProps:slotProps,...ariaDescribedByProp}))});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get PasswordInput(){return PasswordInput},get PasswordInputRaw(){return PasswordInputRaw}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_FormField=require("../FormField/FormField"),_useFormFieldMessageId=require("../FormField/useFormFieldMessageId"),_PasswordInputButton=require("./PasswordInputButton"),handleBorderColor=({theme,hasError,readOnly})=>hasError?theme.values.color.border.error.default:readOnly?theme.values.color.border.primary.disabled:theme.values.color.border.primary.default,StyledContainer=(0,_styled.default)("div",{target:"e1talrlh0",label:"StyledContainer"})(()=>({width:"100%",display:"flex",alignItems:"center",flexDirection:"row",position:"relative"})),StyledPasswordInput=(0,_styled.default)("input",{target:"e1talrlh1",label:"StyledPasswordInput"})(({theme,hasError=!1,readOnly=!1})=>({fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.m,lineHeight:theme.variables.size.lineHeight.xl,borderRadius:theme.variables.size.borderRadius.xs,borderWidth:"1px",borderStyle:"solid",width:"100%",padding:`calc(${theme.variables.size.spacing.xs} - 1px) ${theme.variables.size.spacing.s}`,paddingRight:theme.variables.size.spacing.xxl,boxSizing:"border-box",color:theme.values.color.text.secondary.default,borderColor:handleBorderColor({theme,hasError,readOnly}),backgroundColor:theme.values.color.background.primary.default,"&.error":{borderColor:theme.values.color.border.error.default},"&.has-icon":{paddingRight:theme.variables.size.spacing.xs+theme.variables.size.dimension.icon.m},"&::placeholder":{fontStyle:"italic",color:theme.values.color.text.tertiary.default,opacity:theme.variables.opacity.visible},"&:-ms-input-placeholder":{fontStyle:"italic",color:theme.values.color.text.tertiary.default},"&::-ms-input-placeholder":{fontStyle:"italic",color:theme.values.color.text.tertiary.default},...hasError&&{boxShadow:`0 0 0 1px inset ${theme.values.color.border.error.default}`}})),PasswordInputRaw=(0,_react.forwardRef)(({placeholder,hasError=!1,onIconClick,readOnly,disabled,slotProps:{toggleVisibility:{ariaLabelShow,ariaLabelHide}},...rest},ref)=>{let[isPasswordVisible,setIsPasswordVisible]=(0,_react.useState)(!1);return _react.default.createElement(StyledContainer,null,_react.default.createElement(StyledPasswordInput,{...rest,type:isPasswordVisible?"text":"password",placeholder:readOnly?void 0:placeholder,ref:ref,hasError:hasError,readOnly:readOnly,disabled:disabled,"aria-invalid":hasError}),_react.default.createElement(_PasswordInputButton.PasswordInputButton,{hasError:hasError,disabled:disabled,onIconClick:onIconClick,isPasswordVisible:isPasswordVisible,readOnly:readOnly,ariaLabel:isPasswordVisible?ariaLabelHide:ariaLabelShow,onToggle:()=>setIsPasswordVisible(prev=>!prev)}))}),PasswordInput=_react.default.forwardRef(({placeholder="••••••••",hasError=!1,onIconClick,autoComplete="on",slotProps,disabled,label,labelHint,hideLabel,hint,errorMessages,"aria-describedby":ariaDescribedBy,"data-e2e-test-id":dataE2eTestId,...rest},ref)=>{let{id,ariaDescribedByProp}=(0,_useFormFieldMessageId.useFormFieldMessageId)({ariaDescribedBy,errorMessages,hint});return _react.default.createElement(_FormField.FormField,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"PasswordInput",disabled:disabled,label:label,labelHint:labelHint,hideLabel:hideLabel,hint:hint,errorMessages:errorMessages,messageId:id},_react.default.createElement(PasswordInputRaw,{...rest,ref:ref,placeholder:placeholder,hasError:hasError,disabled:disabled,onIconClick:onIconClick,autoComplete:autoComplete,slotProps:slotProps,...ariaDescribedByProp}))});

package/build/cjs/components/Form/PasswordInput/PasswordInputButton.d.ts

@@ -3,8 +3,8 @@ import React from "react";
 type PasswordInputButtonProps = {
     onIconClick?: (e: React.MouseEvent) => void;
     hasError: boolean;
-    disabled: boolean;
-    readOnly: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
     ariaLabel: string;
     isPasswordVisible: boolean;
     onToggle: () => void;

package/build/cjs/components/Form/PasswordInput/PasswordInputButton.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"PasswordInputButton",{enumerable:!0,get:function(){return PasswordInputButton}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Icon=require("../../Icon/Icon"),_ScreenReaderText=require("../../Utilities/ScreenReaderText/ScreenReaderText"),handleIconBorderColor=(theme,hasError)=>hasError?theme.values.color.icon.error.default:"transparent",handleIconLeftBorderColor=(theme,hasError)=>hasError?theme.values.color.border.error.default:theme.values.color.border.primary.default,handleClick=({e,disabled,onIconClick,onToggle})=>{disabled&&e.preventDefault(),onIconClick?.(e),onToggle()},StyledIconBtn=(0,_styled.default)("button",{target:"edrbxqz0",label:"StyledIconBtn"})(({theme,hasError})=>({"&[type='button']":{appearance:"none",MozAppearance:"none",WebkitAppearance:"none"},position:"absolute",top:0,right:0,border:"1px solid",borderColor:handleIconBorderColor(theme,hasError),borderLeftColor:handleIconLeftBorderColor(theme,hasError),padding:`calc(${theme.variables.size.spacing.s} - 1px) ${theme.variables.size.spacing.s}`,borderRadius:theme.variables.size.borderRadius.xs,borderBottomLeftRadius:"0",borderTopLeftRadius:"0",color:theme.values.color.text.secondary.default,backgroundColor:"inherit",cursor:"pointer","&:hover":{backgroundColor:theme.values.color.background.transparent.hover,borderColor:theme.values.color.border.primary.hover},"&:active":{color:theme.values.color.text.primary.default,backgroundColor:theme.values.color.background.transparent.active,borderColor:theme.values.color.border.primary.active},"&:disabled":{backgroundColor:theme.values.color.background.transparent.default,borderLeftColor:theme.values.color.border.primary.disabled,pointerEvents:"none"},...hasError&&{boxShadow:`0 0 0 1px inset ${theme.values.color.border.error.default}`,"&:hover":{backgroundColor:theme.values.color.background.transparent.hover,borderColor:theme.values.color.border.error.default}},"& svg":{pointerEvents:"none"}})),PasswordInputButton=({hasError,disabled,onIconClick,readOnly,ariaLabel,isPasswordVisible,onToggle})=>{let[isButtonFocused,setIsButtonFocused]=(0,_react.useState)(!1),screenReaderTextId=(0,_react.useId)();return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_ScreenReaderText.ScreenReaderText,{id:screenReaderTextId},isButtonFocused?ariaLabel:""),_react.default.createElement(StyledIconBtn,{onClick:e=>handleClick({e,disabled,onIconClick,onToggle}),hasError:hasError,onFocus:()=>setIsButtonFocused(!0),onBlur:()=>setIsButtonFocused(!1),disabled:readOnly||disabled,type:"button","aria-labelledby":screenReaderTextId},_react.default.createElement(_Icon.Icon,{name:isPasswordVisible?"eye":"eye-off",size:"s",color:readOnly?"quaternary":"tertiary"})))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"PasswordInputButton",{enumerable:!0,get:function(){return PasswordInputButton}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Icon=require("../../Icon/Icon"),_ScreenReaderText=require("../../Utilities/ScreenReaderText/ScreenReaderText"),handleIconBorderColor=(theme,hasError)=>hasError?theme.values.color.icon.error.default:"transparent",handleIconLeftBorderColor=(theme,hasError)=>hasError?theme.values.color.border.error.default:theme.values.color.border.primary.default,handleClick=({e,disabled,onIconClick,onToggle})=>{disabled&&e.preventDefault(),onIconClick?.(e),onToggle()},StyledIconBtn=(0,_styled.default)("button",{target:"eyjrml0",label:"StyledIconBtn"})(({theme,hasError=!1})=>({"&[type='button']":{appearance:"none",MozAppearance:"none",WebkitAppearance:"none"},position:"absolute",top:0,right:0,border:"1px solid",borderColor:handleIconBorderColor(theme,hasError),borderLeftColor:handleIconLeftBorderColor(theme,hasError),padding:`calc(${theme.variables.size.spacing.s} - 1px) ${theme.variables.size.spacing.s}`,borderRadius:theme.variables.size.borderRadius.xs,borderBottomLeftRadius:"0",borderTopLeftRadius:"0",color:theme.values.color.text.secondary.default,backgroundColor:"inherit",cursor:"pointer","&:hover":{backgroundColor:theme.values.color.background.transparent.hover,borderColor:theme.values.color.border.primary.hover},"&:active":{color:theme.values.color.text.primary.default,backgroundColor:theme.values.color.background.transparent.active,borderColor:theme.values.color.border.primary.active},"&:disabled":{backgroundColor:theme.values.color.background.transparent.default,borderLeftColor:theme.values.color.border.primary.disabled,pointerEvents:"none"},...hasError&&{boxShadow:`0 0 0 1px inset ${theme.values.color.border.error.default}`,"&:hover":{backgroundColor:theme.values.color.background.transparent.hover,borderColor:theme.values.color.border.error.default}},"& svg":{pointerEvents:"none"}})),PasswordInputButton=({hasError,disabled,onIconClick,readOnly,ariaLabel,isPasswordVisible,onToggle})=>{let[isButtonFocused,setIsButtonFocused]=(0,_react.useState)(!1),screenReaderTextId=(0,_react.useId)();return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_ScreenReaderText.ScreenReaderText,{id:screenReaderTextId},isButtonFocused?ariaLabel:""),_react.default.createElement(StyledIconBtn,{onClick:e=>handleClick({e,disabled,onIconClick,onToggle}),hasError:hasError,onFocus:()=>setIsButtonFocused(!0),onBlur:()=>setIsButtonFocused(!1),disabled:readOnly||disabled,type:"button","aria-labelledby":screenReaderTextId},_react.default.createElement(_Icon.Icon,{name:isPasswordVisible?"eye":"eye-off",size:"s",color:readOnly?"quaternary":"tertiary"})))};