@amboss/design-system 4.4.2 → 4.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get SortableCellContent(){return SortableCellContent},get StyledLabel(){return StyledLabel}};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")),_Text=require("../../Typography/Text/Text"),_Icon=require("../../Icon/Icon"),_mediaQueries=require("../../../shared/mediaQueries"),_DataTableHeaderToggletip=require("./DataTableHeaderToggletip"),SORT_DIRECTION_ICON={asc:"sort-ascending",desc:"sort-descending"},SortIcon=(0,_styled.default)("span",{target:"e1lsptu50",label:"SortIcon"})(({theme})=>({marginLeft:theme.variables.size.spacing.xxxs,verticalAlign:"middle",color:theme.values.color.text.primary.default,display:"flex"})),StyledSortableCellWrapper=(0,_styled.default)("div",{target:"e1lsptu51",label:"StyledSortableCellWrapper"})(({theme})=>({display:"inline-flex",gap:theme.variables.size.spacing.xs})),StyledLabel=(0,_styled.default)(_Text.Text,{target:"e1lsptu52",label:"StyledLabel"})(({theme,alignColumn,normalizeHeight})=>({display:"flex",alignItems:"center",flexWrap:"nowrap",fontWeight:theme.variables.weight.bold,lineHeight:theme.variables.size.lineHeight.m,letterSpacing:theme.variables.size.letterSpacing.s,...(0,_mediaQueries.useResponsiveValue)({textAlign:alignColumn}),...normalizeHeight&&{paddingTop:theme.variables.size.spacing.xxs,paddingBottom:theme.variables.size.spacing.xxs}})),StyledSortableCellContent=(0,_styled.default)("button",{target:"e1lsptu53",label:"StyledSortableCellContent"})(({theme,alignColumn})=>({width:"100%",padding:0,background:"none",border:"none",cursor:"pointer",...(0,_mediaQueries.useResponsiveValue)({textAlign:alignColumn}),[`&:hover ${StyledLabel}`]:{color:theme.values.color.text.primary.default}}));function SortableCellContent({name,label,align,toggletipContent,toggletipAriaLabel,sortDirection="asc",currentlySortedByColumn,onSort}){let[hovered,setHovered]=(0,_react.useState)(!1),desiredSortDirection="asc"===sortDirection?"desc":"asc",iconName="sort-neutral";return name===currentlySortedByColumn&&(iconName=SORT_DIRECTION_ICON[sortDirection]),hovered&&(iconName=SORT_DIRECTION_ICON[desiredSortDirection]),_react.default.createElement(StyledSortableCellWrapper,null,_react.default.createElement(StyledSortableCellContent,{onClick:()=>{setHovered(!1),onSort&&onSort(name,desiredSortDirection)},type:"button",alignColumn:align,onPointerEnter:()=>setHovered(!0),onPointerLeave:()=>setHovered(!1)},_react.default.createElement(StyledLabel,{as:"span",size:"xs",transform:"uppercase",variant:"tertiary",normalizeHeight:!toggletipContent},label,_react.default.createElement(SortIcon,{"aria-hidden":"true"},_react.default.createElement(_Icon.Icon,{size:"s",name:iconName,color:"primary"})))),toggletipContent&&_react.default.createElement(_DataTableHeaderToggletip.DataTableHeaderToggletip,{content:toggletipContent,"aria-label":toggletipAriaLabel}))}
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get SortableCellContent(){return SortableCellContent},get StyledLabel(){return StyledLabel}};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")),_Text=require("../../Typography/Text/Text"),_Icon=require("../../Icon/Icon"),_mediaQueries=require("../../../shared/mediaQueries"),_DataTableHeaderToggletip=require("./DataTableHeaderToggletip"),SORT_DIRECTION_ICON={asc:"sort-ascending",desc:"sort-descending"},SortIcon=(0,_styled.default)("span",{target:"e109ymrb0",label:"SortIcon"})(({theme})=>({marginLeft:theme.variables.size.spacing.xxxs,verticalAlign:"middle",color:theme.values.color.text.primary.default,display:"flex"})),StyledSortableCellWrapper=(0,_styled.default)("div",{target:"e109ymrb1",label:"StyledSortableCellWrapper"})(({theme})=>({display:"inline-flex",gap:theme.variables.size.spacing.xs})),StyledLabel=(0,_styled.default)(_Text.Text,{target:"e109ymrb2",label:"StyledLabel"})(({theme,alignColumn,normalizeHeight})=>({display:"flex",alignItems:"center",flexWrap:"nowrap",fontWeight:theme.variables.weight.bold,lineHeight:theme.variables.size.lineHeight.m,...(0,_mediaQueries.useResponsiveValue)({textAlign:alignColumn}),...normalizeHeight&&{paddingTop:theme.variables.size.spacing.xxs,paddingBottom:theme.variables.size.spacing.xxs}})),StyledSortableCellContent=(0,_styled.default)("button",{target:"e109ymrb3",label:"StyledSortableCellContent"})(({theme,alignColumn})=>({width:"100%",padding:0,background:"none",border:"none",cursor:"pointer",...(0,_mediaQueries.useResponsiveValue)({textAlign:alignColumn}),[`&:hover ${StyledLabel}`]:{color:theme.values.color.text.primary.default}}));function SortableCellContent({name,label,align,toggletipContent,toggletipAriaLabel,sortDirection="asc",currentlySortedByColumn,onSort}){let[hovered,setHovered]=(0,_react.useState)(!1),desiredSortDirection="asc"===sortDirection?"desc":"asc",iconName="sort-neutral";return name===currentlySortedByColumn&&(iconName=SORT_DIRECTION_ICON[sortDirection]),hovered&&(iconName=SORT_DIRECTION_ICON[desiredSortDirection]),_react.default.createElement(StyledSortableCellWrapper,null,_react.default.createElement(StyledSortableCellContent,{onClick:()=>{setHovered(!1),onSort&&onSort(name,desiredSortDirection)},type:"button",alignColumn:align,onPointerEnter:()=>setHovered(!0),onPointerLeave:()=>setHovered(!1)},_react.default.createElement(StyledLabel,{as:"span",size:"s",variant:"tertiary",normalizeHeight:!toggletipContent},label,_react.default.createElement(SortIcon,{"aria-hidden":"true"},_react.default.createElement(_Icon.Icon,{size:"s",name:iconName,color:"primary"})))),toggletipContent&&_react.default.createElement(_DataTableHeaderToggletip.DataTableHeaderToggletip,{content:toggletipContent,"aria-label":toggletipAriaLabel}))}
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _default}});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")),_TableCell=/*#__PURE__*/_interop_require_default._(require("../TableCell")),_getColumnSticky=require("../internal/getColumnSticky"),_types=require("../internal/types"),_SortableCellContent=require("./SortableCellContent"),_Inline=require("../../Inline/Inline"),_DataTableHeaderToggletip=require("./DataTableHeaderToggletip"),SORT_DIRECTION_TEXT={asc:"ascending",desc:"descending"},StyledThead=(0,_styled.default)("thead",{target:"e1sckbe90",label:"StyledThead"})(({maxHeight})=>({...maxHeight&&{position:"sticky",top:0,zIndex:2}})),StyledTh=(0,_styled.default)(_TableCell.default,{target:"e1sckbe91",label:"StyledTh"})(({theme})=>({padding:`${theme.variables.size.spacing.s} ${theme.variables.size.spacing.m}`,whiteSpace:"nowrap",backgroundColor:theme.values.color.background.primary.default})),_default=_react.default.memo(function({className,columns,isFirstColumnSticky,isLastColumnSticky,currentlySortedByColumn,isTableScrolledToLeft,isTableScrolledToRight,maxHeight,allRowsSelected,selectedRowIds,selectAllRowsCheckboxAriaLabel,onAllRowsSelectionChange,onSort}){let headerContext={onSort,currentlySortedByColumn,allRowsSelected,selectedRowIds,selectAllRowsCheckboxAriaLabel,onAllRowsSelectionChange},columnElements=columns.map((column,columnIndex)=>{let headerElm,sticky=(0,_getColumnSticky.getColumnSticky)({column,columnIndex,columns,isFirstColumnSticky,isLastColumnSticky});if((0,_types.isControlColumn)(column))return _react.default.createElement(StyledTh,{as:"th",alignColumn:"left",columnWidth:column.width,key:column.name,sticky:sticky,isTableScrolledToLeft:isTableScrolledToLeft,isTableScrolledToRight:isTableScrolledToRight,scope:"col"},column.renderHeader(headerContext));let{isSortable,label,align="left",width,name,sortDirection,toggletipContent,toggletipAriaLabel}=column;headerElm=isSortable?_react.default.createElement(_SortableCellContent.SortableCellContent,{onSort:onSort,name:name,label:label,sortDirection:sortDirection,align:align,currentlySortedByColumn:currentlySortedByColumn,toggletipContent:toggletipContent,toggletipAriaLabel:toggletipAriaLabel}):_react.default.createElement(_Inline.Inline,{space:"xs",noWrap:!0,vAlignItems:"center",alignItems:align},_react.default.createElement(_SortableCellContent.StyledLabel,{as:"span",size:"xs",transform:"uppercase",alignColumn:align,color:"tertiary",normalizeHeight:!0},label),toggletipContent&&_react.default.createElement(_DataTableHeaderToggletip.DataTableHeaderToggletip,{content:toggletipContent,"aria-label":toggletipAriaLabel}));let ariaSortAttr=currentlySortedByColumn===name&&{"aria-sort":SORT_DIRECTION_TEXT[sortDirection]};return _react.default.createElement(StyledTh,{as:"th",alignColumn:align,columnWidth:width,key:name,sticky:sticky,isTableScrolledToLeft:isTableScrolledToLeft,isTableScrolledToRight:isTableScrolledToRight,scope:"col",...ariaSortAttr},headerElm)});return _react.default.createElement(StyledThead,{className:className,maxHeight:maxHeight},_react.default.createElement("tr",null,columnElements))});
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _default}});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")),_TableCell=/*#__PURE__*/_interop_require_default._(require("../TableCell")),_getColumnSticky=require("../internal/getColumnSticky"),_types=require("../internal/types"),_SortableCellContent=require("./SortableCellContent"),_Inline=require("../../Inline/Inline"),_DataTableHeaderToggletip=require("./DataTableHeaderToggletip"),SORT_DIRECTION_TEXT={asc:"ascending",desc:"descending"},StyledThead=(0,_styled.default)("thead",{target:"eqohg680",label:"StyledThead"})(({maxHeight})=>({...maxHeight&&{position:"sticky",top:0,zIndex:2}})),StyledTh=(0,_styled.default)(_TableCell.default,{target:"eqohg681",label:"StyledTh"})(({theme})=>({padding:`${theme.variables.size.spacing.s} ${theme.variables.size.spacing.m}`,whiteSpace:"nowrap",backgroundColor:theme.values.color.background.primary.default})),_default=_react.default.memo(function({className,columns,isFirstColumnSticky,isLastColumnSticky,currentlySortedByColumn,isTableScrolledToLeft,isTableScrolledToRight,maxHeight,allRowsSelected,selectedRowIds,selectAllRowsCheckboxAriaLabel,onAllRowsSelectionChange,onSort}){let headerContext={onSort,currentlySortedByColumn,allRowsSelected,selectedRowIds,selectAllRowsCheckboxAriaLabel,onAllRowsSelectionChange},columnElements=columns.map((column,columnIndex)=>{let headerElm,sticky=(0,_getColumnSticky.getColumnSticky)({column,columnIndex,columns,isFirstColumnSticky,isLastColumnSticky});if((0,_types.isControlColumn)(column))return _react.default.createElement(StyledTh,{as:"th",alignColumn:"left",columnWidth:column.width,key:column.name,sticky:sticky,isTableScrolledToLeft:isTableScrolledToLeft,isTableScrolledToRight:isTableScrolledToRight,scope:"col"},column.renderHeader(headerContext));let{isSortable,label,align="left",width,name,sortDirection,toggletipContent,toggletipAriaLabel}=column;headerElm=isSortable?_react.default.createElement(_SortableCellContent.SortableCellContent,{onSort:onSort,name:name,label:label,sortDirection:sortDirection,align:align,currentlySortedByColumn:currentlySortedByColumn,toggletipContent:toggletipContent,toggletipAriaLabel:toggletipAriaLabel}):_react.default.createElement(_Inline.Inline,{space:"xs",noWrap:!0,vAlignItems:"center",alignItems:align},_react.default.createElement(_SortableCellContent.StyledLabel,{as:"span",size:"s",alignColumn:align,color:"tertiary",normalizeHeight:!0},label),toggletipContent&&_react.default.createElement(_DataTableHeaderToggletip.DataTableHeaderToggletip,{content:toggletipContent,"aria-label":toggletipAriaLabel}));let ariaSortAttr=currentlySortedByColumn===name&&{"aria-sort":SORT_DIRECTION_TEXT[sortDirection]};return _react.default.createElement(StyledTh,{as:"th",alignColumn:align,columnWidth:width,key:name,sticky:sticky,isTableScrolledToLeft:isTableScrolledToLeft,isTableScrolledToRight:isTableScrolledToRight,scope:"col",...ariaSortAttr},headerElm)});return _react.default.createElement(StyledThead,{className:className,maxHeight:maxHeight},_react.default.createElement("tr",null,columnElements))});
@@ -42,7 +42,7 @@ export type PromptInputProps = {
42
42
  onEnterKey: () => void;
43
43
  /** Renders an icon to the left inside the textarea */
44
44
  leftIcon?: IconName;
45
- } & Omit<PromptTextAreaProps, "isAutocompleteListOpen" | "selectedListItem" | "hasLeftIcon" | "size"> & Pick<AutocompleteListProps, "autocompleteListItems" | "autocompleteListFooter" | "portalContainer">;
45
+ } & Omit<PromptTextAreaProps, "isAutocompleteListOpen" | "selectedListItem" | "hasAutocomplete" | "hasLeftIcon" | "size"> & Pick<AutocompleteListProps, "autocompleteListItems" | "autocompleteListFooter" | "portalContainer">;
46
46
  export declare const PromptInput: React.ForwardRefExoticComponent<{
47
47
  "data-e2e-test-id"?: string;
48
48
  header?: BasePromptInputHeaderProps;
@@ -70,5 +70,5 @@ export declare const PromptInput: React.ForwardRefExoticComponent<{
70
70
  onEnterKey: () => void;
71
71
  /** Renders an icon to the left inside the textarea */
72
72
  leftIcon?: IconName;
73
- } & Omit<PromptTextAreaProps, "size" | "selectedListItem" | "isAutocompleteListOpen" | "hasLeftIcon"> & Pick<AutocompleteListProps, "portalContainer" | "autocompleteListItems" | "autocompleteListFooter"> & React.RefAttributes<HTMLTextAreaElement>>;
73
+ } & Omit<PromptTextAreaProps, "size" | "selectedListItem" | "isAutocompleteListOpen" | "hasAutocomplete" | "hasLeftIcon"> & Pick<AutocompleteListProps, "portalContainer" | "autocompleteListItems" | "autocompleteListFooter"> & React.RefAttributes<HTMLTextAreaElement>>;
74
74
  export {};
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"PromptInput",{enumerable:!0,get:function(){return PromptInput}});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")),_PromptTextArea=require("./PromptTextArea"),_Container=require("../Container"),_AutocompleteList=require("./AutocompleteList"),_CategoryList=require("./CategoryList"),_Text=require("../Typography/Text"),_Inline=require("../Inline/Inline"),_RoundButton=require("../RoundButton/RoundButton"),_PictogramButton=require("../PictogramButton/PictogramButton"),_Stack=require("../Stack/Stack"),_Icon=require("../Icon/Icon"),_SubThemeProvider=require("../SubThemeProvider/SubThemeProvider"),_useAnimatedBorder=require("../Utilities/AnimatedBorder/useAnimatedBorder"),_PromptInputHeader=require("./PromptInputHeader"),CustomContainer=(0,_styled.default)(_Container.Container,{target:"eeqo85f0",label:"CustomContainer"})(({theme,hideBorder,hasShadow})=>({border:`1px solid ${theme.values.color.border.primary.default}`,background:theme.values.color.background.elevated.default,...hasShadow&&{boxShadow:theme.values.shadow.defaultRing,transitionProperty:"box-shadow, border-color, outline-color",transitionDuration:theme.variables.animation.promptInput.focus.duration,transitionTimingFunction:theme.variables.animation.promptInput.focus.timingFunction},...hideBorder&&{borderColor:"transparent"},cursor:"text",outlineColor:"transparent","&:has(textarea:focus-visible)":{outlineWidth:1,outlineStyle:"solid",outlineOffset:-1,boxShadow:theme.values.shadow.focusRing,outlineColor:theme.values.color.border.accent.default}})),StyledTextAreaContainer=(0,_styled.default)("div",{target:"eeqo85f1",label:"StyledTextAreaContainer"})({borderRadius:"inherit",position:"relative",width:"100%"}),StyledLeftIconContainer=(0,_styled.default)("div",{target:"eeqo85f2",label:"StyledLeftIconContainer"})(({theme,size})=>({display:"flex",position:"absolute",top:(0,_PromptTextArea.getPaddingVertical)(theme,size),left:(0,_PromptTextArea.getPaddingHorizontal)(theme,size),height:theme.variables.size.dimension.icon.m,alignItems:"center"})),StyledEmptyStateTopRightContentContainer=(0,_styled.default)("div",{target:"eeqo85f3",label:"StyledEmptyStateTopRightContentContainer"})(({theme,size})=>({position:"absolute",top:(0,_PromptTextArea.getPaddingVertical)(theme,size),right:(0,_PromptTextArea.getPaddingHorizontal)(theme,size),userSelect:"none",pointerEvents:"none"})),StyledClearButton=(0,_styled.default)(_PictogramButton.PictogramButton,{target:"eeqo85f4",label:"StyledClearButton"})(({theme,buttonSize})=>({position:"absolute",right:theme.variables.size.spacing.s,top:"m"===buttonSize?theme.variables.size.spacing.s:theme.variables.size.spacing.xs})),StyledSlotsContainer=(0,_styled.default)("div",{target:"eeqo85f5",label:"StyledSlotsContainer"})({display:"flex",flexWrap:"wrap",alignItems:"center"}),StyledSlot=(0,_styled.default)("div",{target:"eeqo85f6",label:"StyledSlot"})(({theme,side})=>({margin:`0 ${theme.variables.size.spacing.s} ${theme.variables.size.spacing.s}`,..."right"===side&&{marginLeft:"auto"}})),defaultSendButtonProps={type:"submit",icon:"arrow-up"},PromptInput=(0,_react.forwardRef)(({"data-e2e-test-id":dataE2eTestId,name,autocompleteListItems=[],value,bottomToolbar,isProcessing,sendButtonProps,autocompleteListFooter,clearButtonAriaLabel="Clear input",hint,emptyStateTopRightContent,portalContainer,leftIcon,header,onChange,onComplete,onClear,onEnterKey,onFocus,onBlur,onKeyDown,variant,size="m",skipAIAnimation=!1,rows=1,...rest},ref)=>{let containerRef=(0,_react.useRef)(null),animatedBorderRef=(0,_react.useRef)(null),textAreaContainerRef=(0,_react.useRef)(null),internalRef=(0,_react.useRef)(null),[selectedIndex,setSelectedIndex]=(0,_react.useState)(-1),userTypedQuery=(0,_react.useRef)(""),[isAutocompleteListOpen,setIsAutocompleteListOpen]=(0,_react.useState)(!1),textAreaRef=ref||internalRef;(0,_useAnimatedBorder.useAnimatedBorder)(animatedBorderRef,{skipAnimation:skipAIAnimation||"ai"!==variant,radius:"m"===size?12:8,iterations:1});let mergedSendButtonProps={...defaultSendButtonProps,...sendButtonProps??{}},closeAutocompleteList=(0,_react.useCallback)(()=>{setIsAutocompleteListOpen(!1),setSelectedIndex(-1)},[]),openAutocompleteList=(0,_react.useCallback)(()=>{autocompleteListItems.length&&(setIsAutocompleteListOpen(!0),setSelectedIndex(-1))},[autocompleteListItems]),acceptTextSelection=()=>{userTypedQuery.current=value,textAreaRef.current.selectionStart!==textAreaRef.current.selectionEnd&&textAreaRef.current.setSelectionRange(value.length,value.length)};(0,_react.useEffect)(()=>{autocompleteListItems.length?openAutocompleteList():closeAutocompleteList()},[autocompleteListItems,openAutocompleteList,closeAutocompleteList]),(0,_react.useEffect)(()=>{value&&value!==userTypedQuery.current&&isAutocompleteListOpen&&textAreaRef.current.setSelectionRange(userTypedQuery.current.length,value.length)},[value,textAreaRef,isAutocompleteListOpen]);let flattenedListItems=(0,_react.useMemo)(()=>{let list=[];return autocompleteListItems.forEach(listItem=>{listItem.items.forEach((item,index)=>{list.push({category:listItem.category,indexInCategory:index,value:item.value,id:(0,_CategoryList.getListItemId)(name,listItem.category,index)})})}),list},[autocompleteListItems,name]),handleSelectedIndexChange=(index,evt)=>{if(setSelectedIndex(index),-1!==index){let{category,value:itemValue}=flattenedListItems[index];onComplete({value:itemValue,category,evt,index})}},handlePreventFocus=evt=>{evt.preventDefault()},selectedListItem=-1!==selectedIndex?flattenedListItems[selectedIndex]:null,emptyStateTopRightContentElm=emptyStateTopRightContent?_react.default.createElement(StyledEmptyStateTopRightContentContainer,{size:size},_react.default.createElement(_Text.Text,{color:"tertiary"},emptyStateTopRightContent)):null,clearButtonElm=value?_react.default.createElement(StyledClearButton,{size:"m"===size?"s":"xs","aria-hidden":"true",tabIndex:-1,icon:"x-circle-filled","aria-label":clearButtonAriaLabel,onPointerDown:handlePreventFocus,onClick:onClear,buttonSize:size}):emptyStateTopRightContentElm,hintElm=!!hint&&_react.default.createElement(_Inline.Inline,{alignItems:"center"},_react.default.createElement(_Text.Text,{size:"s",color:"tertiary"},hint)),bottomToolbarElm=(bottomToolbar?.rightContent||bottomToolbar?.leftContent||!!sendButtonProps)&&_react.default.createElement(_react.default.Fragment,null,bottomToolbar?.leftContent&&_react.default.createElement(StyledSlot,null,bottomToolbar.leftContent),_react.default.createElement(StyledSlot,{"data-e2e-test-id":"bottomToolbar",side:"right"},_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center"},bottomToolbar?.rightContent,sendButtonProps&&_react.default.createElement(_SubThemeProvider.SubThemeProvider,{name:variant},_react.default.createElement(_RoundButton.RoundButton,{ariaAttributes:{"aria-label":isProcessing?"Processing query":"Submit query"},...mergedSendButtonProps,size:"m"===size?"s":"xs",disabled:mergedSendButtonProps.disabled??!value,onClick:evt=>{mergedSendButtonProps.onClick?.(evt),closeAutocompleteList()},onPointerDown:handlePreventFocus,variant:"primary",icon:isProcessing?"stop-filled":mergedSendButtonProps.icon})))));return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement("div",{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"PromptInput",ref:containerRef,translate:"no"},_react.default.createElement(_Stack.Stack,{space:"s"},_react.default.createElement("div",{ref:animatedBorderRef},_react.default.createElement(_SubThemeProvider.SubThemeProvider,{name:variant},_react.default.createElement(CustomContainer,{elevation:0,borderRadius:size,hideBorder:!1,hasShadow:!0},_react.default.createElement(_SubThemeProvider.SubThemeProvider,{name:"unset"},_react.default.createElement(StyledSlotsContainer,{ref:textAreaContainerRef,onPointerDown:evt=>{evt.target===evt.currentTarget&&(textAreaRef.current?.focus(),evt.preventDefault())}},header&&_react.default.createElement(_PromptInputHeader.PromptInputHeader,{...header,borderRadiusSize:size,size:size}),_react.default.createElement(StyledTextAreaContainer,null,leftIcon&&_react.default.createElement(StyledLeftIconContainer,{size:size},_react.default.createElement(_Icon.Icon,{name:leftIcon,size:size,color:"tertiary","aria-hidden":"true"})),_react.default.createElement(_PromptTextArea.PromptTextArea,{...rest,dataE2eTestId:dataE2eTestId?`${dataE2eTestId}-input`:void 0,name:name,value:value,ref:textAreaRef,selectedListItem:selectedListItem,isAutocompleteListOpen:isAutocompleteListOpen,hasLeftIcon:!!leftIcon,onFocus:evt=>{onFocus?.(evt)},onBlur:evt=>{value!==userTypedQuery.current&&onComplete?.({value:userTypedQuery.current,evt}),onBlur?.(evt)},onChange:evt=>{userTypedQuery.current=evt.target.value,onChange(evt)},onKeyDown:evt=>{if(isAutocompleteListOpen)switch(evt.key){case"Escape":closeAutocompleteList(),onComplete({value:userTypedQuery.current,evt});break;case"Enter":!evt.shiftKey&&(evt.preventDefault(),closeAutocompleteList(),acceptTextSelection(),value&&onEnterKey?.());break;case" ":acceptTextSelection();break;case"ArrowUp":evt.preventDefault(),selectedIndex>-1&&handleSelectedIndexChange(selectedIndex-1,evt);break;case"ArrowDown":evt.preventDefault(),selectedIndex<flattenedListItems.length-1&&handleSelectedIndexChange(selectedIndex+1,evt)}else switch(evt.key){case"Escape":onClear?.();break;case"Enter":!evt.shiftKey&&(evt.preventDefault(),value&&onEnterKey?.())}onKeyDown?.(evt)},rows:rows,size:size}),clearButtonElm),bottomToolbarElm))))),hintElm)),_react.default.createElement(_AutocompleteList.AutocompleteList,{name:name,value:value,autocompleteListItems:autocompleteListItems,triggerRef:textAreaContainerRef,selectedListItem:selectedListItem,isOpen:isAutocompleteListOpen,autocompleteListFooter:autocompleteListFooter,portalContainer:portalContainer,onListItemClick:(category,indexInCategory,evt)=>{handleSelectedIndexChange(flattenedListItems.findIndex(listItem=>listItem.category===category&&listItem.indexInCategory===indexInCategory),evt),closeAutocompleteList()}}))});
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"PromptInput",{enumerable:!0,get:function(){return PromptInput}});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")),_PromptTextArea=require("./PromptTextArea"),_Container=require("../Container"),_AutocompleteList=require("./AutocompleteList"),_CategoryList=require("./CategoryList"),_Text=require("../Typography/Text"),_Inline=require("../Inline/Inline"),_RoundButton=require("../RoundButton/RoundButton"),_PictogramButton=require("../PictogramButton/PictogramButton"),_Stack=require("../Stack/Stack"),_Icon=require("../Icon/Icon"),_SubThemeProvider=require("../SubThemeProvider/SubThemeProvider"),_useAnimatedBorder=require("../Utilities/AnimatedBorder/useAnimatedBorder"),_PromptInputHeader=require("./PromptInputHeader"),CustomContainer=(0,_styled.default)(_Container.Container,{target:"e1lp7eti0",label:"CustomContainer"})(({theme,hideBorder,hasShadow})=>({border:`1px solid ${theme.values.color.border.primary.default}`,background:theme.values.color.background.elevated.default,...hasShadow&&{boxShadow:theme.values.shadow.defaultRing,transitionProperty:"box-shadow, border-color, outline-color",transitionDuration:theme.variables.animation.promptInput.focus.duration,transitionTimingFunction:theme.variables.animation.promptInput.focus.timingFunction},...hideBorder&&{borderColor:"transparent"},cursor:"text",outlineColor:"transparent","&:has(textarea:focus-visible)":{outlineWidth:1,outlineStyle:"solid",outlineOffset:-1,boxShadow:theme.values.shadow.focusRing,outlineColor:theme.values.color.border.accent.default}})),StyledTextAreaContainer=(0,_styled.default)("div",{target:"e1lp7eti1",label:"StyledTextAreaContainer"})({borderRadius:"inherit",position:"relative",width:"100%"}),StyledLeftIconContainer=(0,_styled.default)("div",{target:"e1lp7eti2",label:"StyledLeftIconContainer"})(({theme,size})=>({display:"flex",position:"absolute",top:(0,_PromptTextArea.getPaddingVertical)(theme,size),left:(0,_PromptTextArea.getPaddingHorizontal)(theme,size),height:theme.variables.size.dimension.icon.m,alignItems:"center"})),StyledEmptyStateTopRightContentContainer=(0,_styled.default)("div",{target:"e1lp7eti3",label:"StyledEmptyStateTopRightContentContainer"})(({theme,size})=>({position:"absolute",top:(0,_PromptTextArea.getPaddingVertical)(theme,size),right:(0,_PromptTextArea.getPaddingHorizontal)(theme,size),userSelect:"none",pointerEvents:"none"})),StyledClearButton=(0,_styled.default)(_PictogramButton.PictogramButton,{target:"e1lp7eti4",label:"StyledClearButton"})(({theme,buttonSize})=>({position:"absolute",right:theme.variables.size.spacing.s,top:"m"===buttonSize?theme.variables.size.spacing.s:theme.variables.size.spacing.xs})),StyledSlotsContainer=(0,_styled.default)("div",{target:"e1lp7eti5",label:"StyledSlotsContainer"})({display:"flex",flexWrap:"wrap",alignItems:"center"}),StyledSlot=(0,_styled.default)("div",{target:"e1lp7eti6",label:"StyledSlot"})(({theme,side})=>({margin:`0 ${theme.variables.size.spacing.s} ${theme.variables.size.spacing.s}`,..."right"===side&&{marginLeft:"auto"}})),defaultSendButtonProps={type:"submit",icon:"arrow-up"},PromptInput=(0,_react.forwardRef)(({"data-e2e-test-id":dataE2eTestId,name,autocompleteListItems=[],value,bottomToolbar,isProcessing,sendButtonProps,autocompleteListFooter,clearButtonAriaLabel="Clear input",hint,emptyStateTopRightContent,portalContainer,leftIcon,header,onChange,onComplete,onClear,onEnterKey,onFocus,onBlur,onKeyDown,variant,size="m",skipAIAnimation=!1,rows=1,...rest},ref)=>{let containerRef=(0,_react.useRef)(null),animatedBorderRef=(0,_react.useRef)(null),textAreaContainerRef=(0,_react.useRef)(null),internalRef=(0,_react.useRef)(null),[selectedIndex,setSelectedIndex]=(0,_react.useState)(-1),userTypedQuery=(0,_react.useRef)(""),[isAutocompleteListOpen,setIsAutocompleteListOpen]=(0,_react.useState)(!1),textAreaRef=ref||internalRef;(0,_useAnimatedBorder.useAnimatedBorder)(animatedBorderRef,{skipAnimation:skipAIAnimation||"ai"!==variant,radius:"m"===size?12:8,iterations:1});let mergedSendButtonProps={...defaultSendButtonProps,...sendButtonProps??{}},closeAutocompleteList=(0,_react.useCallback)(()=>{setIsAutocompleteListOpen(!1),setSelectedIndex(-1)},[]),openAutocompleteList=(0,_react.useCallback)(()=>{autocompleteListItems.length&&(setIsAutocompleteListOpen(!0),setSelectedIndex(-1))},[autocompleteListItems]),acceptTextSelection=()=>{userTypedQuery.current=value,textAreaRef.current.selectionStart!==textAreaRef.current.selectionEnd&&textAreaRef.current.setSelectionRange(value.length,value.length)};(0,_react.useEffect)(()=>{autocompleteListItems.length?openAutocompleteList():closeAutocompleteList()},[autocompleteListItems,openAutocompleteList,closeAutocompleteList]),(0,_react.useEffect)(()=>{value&&value!==userTypedQuery.current&&isAutocompleteListOpen&&textAreaRef.current.setSelectionRange(userTypedQuery.current.length,value.length)},[value,textAreaRef,isAutocompleteListOpen]);let flattenedListItems=(0,_react.useMemo)(()=>{let list=[];return autocompleteListItems.forEach(listItem=>{listItem.items.forEach((item,index)=>{list.push({category:listItem.category,indexInCategory:index,value:item.value,id:(0,_CategoryList.getListItemId)(name,listItem.category,index)})})}),list},[autocompleteListItems,name]),handleSelectedIndexChange=(index,evt)=>{if(setSelectedIndex(index),-1!==index){let{category,value:itemValue}=flattenedListItems[index];onComplete({value:itemValue,category,evt,index})}},handlePreventFocus=evt=>{evt.preventDefault()},selectedListItem=-1!==selectedIndex?flattenedListItems[selectedIndex]:null,emptyStateTopRightContentElm=emptyStateTopRightContent?_react.default.createElement(StyledEmptyStateTopRightContentContainer,{size:size},_react.default.createElement(_Text.Text,{color:"tertiary"},emptyStateTopRightContent)):null,clearButtonElm=value?_react.default.createElement(StyledClearButton,{size:"m"===size?"s":"xs","aria-hidden":"true",tabIndex:-1,icon:"x-circle-filled","aria-label":clearButtonAriaLabel,onPointerDown:handlePreventFocus,onClick:onClear,buttonSize:size}):emptyStateTopRightContentElm,hintElm=!!hint&&_react.default.createElement(_Inline.Inline,{alignItems:"center"},_react.default.createElement(_Text.Text,{size:"s",color:"tertiary"},hint)),bottomToolbarElm=(bottomToolbar?.rightContent||bottomToolbar?.leftContent||!!sendButtonProps)&&_react.default.createElement(_react.default.Fragment,null,bottomToolbar?.leftContent&&_react.default.createElement(StyledSlot,null,bottomToolbar.leftContent),_react.default.createElement(StyledSlot,{"data-e2e-test-id":"bottomToolbar",side:"right"},_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center"},bottomToolbar?.rightContent,sendButtonProps&&_react.default.createElement(_SubThemeProvider.SubThemeProvider,{name:variant},_react.default.createElement(_RoundButton.RoundButton,{ariaAttributes:{"aria-label":isProcessing?"Processing query":"Submit query"},...mergedSendButtonProps,size:"m"===size?"s":"xs",disabled:mergedSendButtonProps.disabled??!value,onClick:evt=>{mergedSendButtonProps.onClick?.(evt),closeAutocompleteList()},onPointerDown:handlePreventFocus,variant:"primary",icon:isProcessing?"stop-filled":mergedSendButtonProps.icon})))));return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement("div",{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"PromptInput",ref:containerRef,translate:"no"},_react.default.createElement(_Stack.Stack,{space:"s"},_react.default.createElement("div",{ref:animatedBorderRef},_react.default.createElement(_SubThemeProvider.SubThemeProvider,{name:variant},_react.default.createElement(CustomContainer,{elevation:0,borderRadius:size,hideBorder:!1,hasShadow:!0},_react.default.createElement(_SubThemeProvider.SubThemeProvider,{name:"unset"},_react.default.createElement(StyledSlotsContainer,{ref:textAreaContainerRef,onPointerDown:evt=>{evt.target===evt.currentTarget&&(textAreaRef.current?.focus(),evt.preventDefault())}},header&&_react.default.createElement(_PromptInputHeader.PromptInputHeader,{...header,borderRadiusSize:size,size:size}),_react.default.createElement(StyledTextAreaContainer,null,leftIcon&&_react.default.createElement(StyledLeftIconContainer,{size:size},_react.default.createElement(_Icon.Icon,{name:leftIcon,size:size,color:"tertiary","aria-hidden":"true"})),_react.default.createElement(_PromptTextArea.PromptTextArea,{...rest,dataE2eTestId:dataE2eTestId?`${dataE2eTestId}-input`:void 0,name:name,value:value,ref:textAreaRef,selectedListItem:selectedListItem,isAutocompleteListOpen:isAutocompleteListOpen,hasAutocomplete:!!autocompleteListItems.length,hasLeftIcon:!!leftIcon,onFocus:evt=>{onFocus?.(evt)},onBlur:evt=>{value!==userTypedQuery.current&&onComplete?.({value:userTypedQuery.current,evt}),onBlur?.(evt)},onChange:evt=>{userTypedQuery.current=evt.target.value,onChange(evt)},onKeyDown:evt=>{if(isAutocompleteListOpen)switch(evt.key){case"Escape":closeAutocompleteList(),onComplete({value:userTypedQuery.current,evt});break;case"Enter":!evt.shiftKey&&(evt.preventDefault(),closeAutocompleteList(),acceptTextSelection(),value&&onEnterKey?.());break;case" ":acceptTextSelection();break;case"ArrowUp":evt.preventDefault(),selectedIndex>-1&&handleSelectedIndexChange(selectedIndex-1,evt);break;case"ArrowDown":evt.preventDefault(),selectedIndex<flattenedListItems.length-1&&handleSelectedIndexChange(selectedIndex+1,evt)}else switch(evt.key){case"Escape":onClear?.();break;case"Enter":!evt.shiftKey&&(evt.preventDefault(),value&&onEnterKey?.())}onKeyDown?.(evt)},rows:rows,size:size}),clearButtonElm),bottomToolbarElm))))),hintElm)),_react.default.createElement(_AutocompleteList.AutocompleteList,{name:name,value:value,autocompleteListItems:autocompleteListItems,triggerRef:textAreaContainerRef,selectedListItem:selectedListItem,isOpen:isAutocompleteListOpen,autocompleteListFooter:autocompleteListFooter,portalContainer:portalContainer,onListItemClick:(category,indexInCategory,evt)=>{handleSelectedIndexChange(flattenedListItems.findIndex(listItem=>listItem.category===category&&listItem.indexInCategory===indexInCategory),evt),closeAutocompleteList()}}))});
@@ -14,6 +14,8 @@ export type PromptTextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> &
14
14
  maxTextAreaHeight?: Property.Height;
15
15
  selectedListItem?: FlattenedListItem;
16
16
  isAutocompleteListOpen?: boolean;
17
+ /** Whether the input offers an autocomplete list. When false the textarea renders as a plain textbox, with no combobox wrapper and no autocomplete ARIA. */
18
+ hasAutocomplete?: boolean;
17
19
  hasLeftIcon?: boolean;
18
20
  rows?: number;
19
21
  size: PromptInputSizes;
@@ -26,6 +28,8 @@ export declare const PromptTextArea: React.ForwardRefExoticComponent<TextareaHTM
26
28
  maxTextAreaHeight?: Property.Height;
27
29
  selectedListItem?: FlattenedListItem;
28
30
  isAutocompleteListOpen?: boolean;
31
+ /** Whether the input offers an autocomplete list. When false the textarea renders as a plain textbox, with no combobox wrapper and no autocomplete ARIA. */
32
+ hasAutocomplete?: boolean;
29
33
  hasLeftIcon?: boolean;
30
34
  rows?: number;
31
35
  size: PromptInputSizes;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get PromptTextArea(){return PromptTextArea},get getPaddingHorizontal(){return getPaddingHorizontal},get getPaddingVertical(){return getPaddingVertical}};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")),_getInputTextPlaceholder=require("../../shared/mixins/TextInput/getInputTextPlaceholder"),_ScreenReaderText=require("../Utilities/ScreenReaderText/ScreenReaderText"),_AutocompleteList=require("./AutocompleteList"),getPaddingHorizontal=(theme,size)=>"s"===size?theme.variables.size.spacing.s:theme.variables.size.spacing.m,getPaddingVertical=(theme,size)=>"s"===size?theme.variables.size.spacing.xs:theme.variables.size.spacing.m,StyledTextAreaContainer=(0,_styled.default)("label",{target:"e1584yv0",label:"StyledTextAreaContainer"})(({theme,maxTextAreaHeight,hasLeftIcon,size})=>{let paddingTop=getPaddingVertical(theme,size),paddingBottom=getPaddingVertical(theme,size),iconTextGap="s"===size?`calc(${theme.variables.size.spacing.xs} - ${theme.variables.size.spacing.xxxs})`:theme.variables.size.spacing.xs,basePaddingHorizontal=getPaddingHorizontal(theme,size),paddingRight=`calc(${basePaddingHorizontal} + ${theme.variables.size.dimension.icon.m} + ${iconTextGap})`,paddingLeft=hasLeftIcon?`calc(${basePaddingHorizontal} + ${theme.variables.size.dimension.icon[size]} + ${iconTextGap})`:basePaddingHorizontal;return{display:"grid",verticalAlign:"top",alignItems:"stretch",width:"100%",borderRadius:"inherit",position:"relative",fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.m,lineHeight:theme.variables.size.lineHeight.xl,"&::after":{content:"attr(data-value) ' '",boxSizing:"border-box",fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.m,gridArea:"1 / 1",whiteSpace:"pre-wrap",visibility:"hidden",maxHeight:maxTextAreaHeight},textarea:{all:"unset",resize:"none",gridArea:"1 / 1",cursor:"text",color:theme.values.color.text.primary.default,...(0,_getInputTextPlaceholder.getInputTextPlaceholder)({theme})},"textarea::placeholder":{whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden"},"&::after, textarea":{minWidth:"0",overflowWrap:"break-word",padding:`${paddingTop} ${paddingRight} ${paddingBottom} ${paddingLeft}`}}}),PromptTextArea=(0,_react.forwardRef)(({dataE2eTestId,label,name,value,placeholder,maxTextAreaHeight="200px",selectedListItem,isAutocompleteListOpen,hasLeftIcon,rows=1,size,onChange,role,...rest},ref)=>((0,_react.useEffect)(()=>{ref.current.parentNode.dataset.value=value},[value,ref]),_react.default.createElement(StyledTextAreaContainer,{maxTextAreaHeight:maxTextAreaHeight,hasLeftIcon:hasLeftIcon,size:size},_react.default.createElement(_ScreenReaderText.ScreenReaderText,null,label),_react.default.createElement("textarea",{...rest,"data-e2e-test-id":dataE2eTestId,ref:ref,name:name,value:value,placeholder:placeholder,onChange:onChange,rows:rows,role:role??"combobox","aria-autocomplete":"list","aria-controls":isAutocompleteListOpen?(0,_AutocompleteList.getAutocompleteListId)(name):"","aria-activedescendant":selectedListItem?selectedListItem.id:"","aria-expanded":isAutocompleteListOpen}))));
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get PromptTextArea(){return PromptTextArea},get getPaddingHorizontal(){return getPaddingHorizontal},get getPaddingVertical(){return getPaddingVertical}};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")),_getInputTextPlaceholder=require("../../shared/mixins/TextInput/getInputTextPlaceholder"),_ScreenReaderText=require("../Utilities/ScreenReaderText/ScreenReaderText"),_AutocompleteList=require("./AutocompleteList"),getPaddingHorizontal=(theme,size)=>"s"===size?theme.variables.size.spacing.s:theme.variables.size.spacing.m,getPaddingVertical=(theme,size)=>"s"===size?theme.variables.size.spacing.xs:theme.variables.size.spacing.m,StyledTextAreaContainer=(0,_styled.default)("label",{target:"esul89v0",label:"StyledTextAreaContainer"})(({theme,maxTextAreaHeight,hasLeftIcon,size})=>{let paddingTop=getPaddingVertical(theme,size),paddingBottom=getPaddingVertical(theme,size),iconTextGap="s"===size?`calc(${theme.variables.size.spacing.xs} - ${theme.variables.size.spacing.xxxs})`:theme.variables.size.spacing.xs,basePaddingHorizontal=getPaddingHorizontal(theme,size),paddingRight=`calc(${basePaddingHorizontal} + ${theme.variables.size.dimension.icon.m} + ${iconTextGap})`,paddingLeft=hasLeftIcon?`calc(${basePaddingHorizontal} + ${theme.variables.size.dimension.icon[size]} + ${iconTextGap})`:basePaddingHorizontal;return{display:"grid",verticalAlign:"top",alignItems:"stretch",width:"100%",borderRadius:"inherit",position:"relative",fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.m,lineHeight:theme.variables.size.lineHeight.xl,"&::after":{content:"attr(data-value) ' '",boxSizing:"border-box",fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.m,gridArea:"1 / 1",whiteSpace:"pre-wrap",visibility:"hidden",maxHeight:maxTextAreaHeight},textarea:{all:"unset",resize:"none",gridArea:"1 / 1",cursor:"text",color:theme.values.color.text.primary.default,...(0,_getInputTextPlaceholder.getInputTextPlaceholder)({theme})},"textarea::placeholder":{whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden"},"&::after, textarea":{minWidth:"0",overflowWrap:"break-word",padding:`${paddingTop} ${paddingRight} ${paddingBottom} ${paddingLeft}`}}}),StyledTextAreaWrapper=(0,_styled.default)("div",{target:"esul89v1",label:"StyledTextAreaWrapper"})({borderRadius:"inherit",width:"100%"}),getPromptTextAreaLabelId=name=>`${name}_PromptTextAreaLabel`,getAutocompleteAriaProps=({name,isAutocompleteListOpen,selectedListItem})=>({"aria-autocomplete":"list","aria-controls":isAutocompleteListOpen?(0,_AutocompleteList.getAutocompleteListId)(name):void 0,"aria-activedescendant":selectedListItem?.id}),getComboboxProps=({name,labelId,isAutocompleteListOpen})=>({role:"combobox","aria-expanded":!!isAutocompleteListOpen,"aria-controls":isAutocompleteListOpen?(0,_AutocompleteList.getAutocompleteListId)(name):void 0,"aria-labelledby":labelId}),PromptTextArea=(0,_react.forwardRef)(({dataE2eTestId,label,name,value,placeholder,maxTextAreaHeight="200px",selectedListItem,isAutocompleteListOpen,hasAutocomplete,hasLeftIcon,rows=1,size,onChange,...rest},ref)=>{(0,_react.useEffect)(()=>{ref.current.parentNode.dataset.value=value},[value,ref]);let autocompleteAriaProps=hasAutocomplete?getAutocompleteAriaProps({name,isAutocompleteListOpen,selectedListItem}):{},labelId=getPromptTextAreaLabelId(name),textAreaElm=_react.default.createElement(StyledTextAreaContainer,{maxTextAreaHeight:maxTextAreaHeight,hasLeftIcon:hasLeftIcon,size:size},_react.default.createElement(_ScreenReaderText.ScreenReaderText,{id:labelId},label),_react.default.createElement("textarea",{...rest,"data-e2e-test-id":dataE2eTestId,ref:ref,name:name,value:value,placeholder:placeholder,onChange:onChange,rows:rows,...autocompleteAriaProps})),comboboxProps=hasAutocomplete?getComboboxProps({name,labelId,isAutocompleteListOpen}):{};return _react.default.createElement(StyledTextAreaWrapper,comboboxProps,textAreaElm)});
@@ -18,6 +18,8 @@ export type RangePopoverProps = {
18
18
  contentPadding?: "s" | "m";
19
19
  /** Maximum width of the popover surface. */
20
20
  maxWidth?: number;
21
+ /** When true, the arrow pointing at the range is not rendered. */
22
+ hideArrow?: boolean;
21
23
  /** ARIA role for the popover surface. */
22
24
  role?: string;
23
25
  /**
@@ -53,9 +55,10 @@ export type RangePopoverProps = {
53
55
  * @param portalContainer - Portal target; falls back to the document body.
54
56
  * @param contentPadding - Inner padding of the popover surface.
55
57
  * @param maxWidth - Maximum width of the popover surface.
58
+ * @param hideArrow - When true, the arrow pointing at the range is not rendered.
56
59
  * @param role - ARIA role for the popover surface.
57
60
  * @param aria-label - Accessible name for the popover surface.
58
61
  * @param disableInitialFocus - When true, does not move focus into the popover.
59
62
  */
60
- export declare function RangePopover({ content, range, isVisible, onClose, placement, portalContainer, contentPadding, maxWidth, role, "aria-label": ariaLabel, disableInitialFocus, "data-e2e-test-id": dataE2eTestId, }: RangePopoverProps): React.ReactElement;
63
+ export declare function RangePopover({ content, range, isVisible, onClose, placement, portalContainer, contentPadding, maxWidth, hideArrow, role, "aria-label": ariaLabel, disableInitialFocus, "data-e2e-test-id": dataE2eTestId, }: RangePopoverProps): React.ReactElement;
61
64
  export {};
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"RangePopover",{enumerable:!0,get:function(){return RangePopover}});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")),_TooltipContent=require("../Tooltip/TooltipContent"),_FocusTrapWrapper=require("../../shared/FocusTrapWrapper"),StyledContent=(0,_styled.default)("div",{target:"e6ct16h0",label:"StyledContent"})(({theme,contentPadding})=>({padding:"m"===contentPadding?theme.variables.size.spacing.s:theme.variables.size.spacing.xxs}));function RangePopover({content,range,isVisible,onClose,placement="top",portalContainer,contentPadding="s",maxWidth,role="dialog","aria-label":ariaLabel,disableInitialFocus=!1,"data-e2e-test-id":dataE2eTestId}){let tooltipId=(0,_react.useId)(),rangeRef=(0,_react.useRef)(null);rangeRef.current=range;let contentRef=(0,_react.useRef)(null),trappedContent=_react.default.createElement(_FocusTrapWrapper.FocusTrapWrapper,{active:isVisible,focusTrapOptions:{allowOutsideClick:!0,clickOutsideDeactivates:!0,escapeDeactivates:!0,fallbackFocus:()=>contentRef.current,initialFocus:!disableInitialFocus&&void 0,onPostDeactivate:onClose,preventScroll:!0,returnFocusOnDeactivate:!disableInitialFocus}},_react.default.createElement(StyledContent,{ref:contentRef,tabIndex:-1,contentPadding:contentPadding},content));return _react.default.createElement(_TooltipContent.TooltipContent,{"aria-label":ariaLabel,content:trappedContent,dataDSId:"RangePopover",dataE2eTestId:dataE2eTestId,isVisible:isVisible,maxWidth:maxWidth,placement:placement,portalContainer:portalContainer,role:role,tooltipId:tooltipId,triggerRef:rangeRef})}
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"RangePopover",{enumerable:!0,get:function(){return RangePopover}});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")),_TooltipContent=require("../Tooltip/TooltipContent"),_FocusTrapWrapper=require("../../shared/FocusTrapWrapper"),StyledContent=(0,_styled.default)("div",{target:"e115t0yz0",label:"StyledContent"})(({theme,contentPadding})=>({padding:"m"===contentPadding?theme.variables.size.spacing.s:theme.variables.size.spacing.xxs}));function RangePopover({content,range,isVisible,onClose,placement="top",portalContainer,contentPadding="s",maxWidth,hideArrow=!1,role="dialog","aria-label":ariaLabel,disableInitialFocus=!1,"data-e2e-test-id":dataE2eTestId}){let tooltipId=(0,_react.useId)(),rangeRef=(0,_react.useRef)(null);rangeRef.current=range;let contentRef=(0,_react.useRef)(null),trappedContent=_react.default.createElement(_FocusTrapWrapper.FocusTrapWrapper,{active:isVisible,focusTrapOptions:{allowOutsideClick:!0,clickOutsideDeactivates:!0,escapeDeactivates:!0,fallbackFocus:()=>contentRef.current,initialFocus:!disableInitialFocus&&void 0,onPostDeactivate:onClose,preventScroll:!0,returnFocusOnDeactivate:!disableInitialFocus}},_react.default.createElement(StyledContent,{ref:contentRef,tabIndex:-1,contentPadding:contentPadding},content));return _react.default.createElement(_TooltipContent.TooltipContent,{"aria-label":ariaLabel,content:trappedContent,dataDSId:"RangePopover",dataE2eTestId:dataE2eTestId,hideArrow:hideArrow,isVisible:isVisible,maxWidth:maxWidth,placement:placement,portalContainer:portalContainer,role:role,tooltipId:tooltipId,triggerRef:rangeRef})}
@@ -1 +1 @@
1
- import React,{useState}from"react";import styled from"@emotion/styled";import{Text}from"../../Typography/Text/Text";import{Icon}from"../../Icon/Icon";import{useResponsiveValue}from"../../../shared/mediaQueries";import{DataTableHeaderToggletip}from"./DataTableHeaderToggletip";let SORT_DIRECTION_ICON={asc:"sort-ascending",desc:"sort-descending"},SortIcon=styled("span",{target:"e1lsptu50",label:"SortIcon"})(({theme})=>({marginLeft:theme.variables.size.spacing.xxxs,verticalAlign:"middle",color:theme.values.color.text.primary.default,display:"flex"})),StyledSortableCellWrapper=styled("div",{target:"e1lsptu51",label:"StyledSortableCellWrapper"})(({theme})=>({display:"inline-flex",gap:theme.variables.size.spacing.xs}));export const StyledLabel=styled(Text,{target:"e1lsptu52",label:"StyledLabel"})(({theme,alignColumn,normalizeHeight})=>({display:"flex",alignItems:"center",flexWrap:"nowrap",fontWeight:theme.variables.weight.bold,lineHeight:theme.variables.size.lineHeight.m,letterSpacing:theme.variables.size.letterSpacing.s,...useResponsiveValue({textAlign:alignColumn}),...normalizeHeight&&{paddingTop:theme.variables.size.spacing.xxs,paddingBottom:theme.variables.size.spacing.xxs}}));let StyledSortableCellContent=styled("button",{target:"e1lsptu53",label:"StyledSortableCellContent"})(({theme,alignColumn})=>({width:"100%",padding:0,background:"none",border:"none",cursor:"pointer",...useResponsiveValue({textAlign:alignColumn}),[`&:hover ${StyledLabel}`]:{color:theme.values.color.text.primary.default}}));export function SortableCellContent({name,label,align,toggletipContent,toggletipAriaLabel,sortDirection="asc",currentlySortedByColumn,onSort}){let[hovered,setHovered]=useState(!1),desiredSortDirection="asc"===sortDirection?"desc":"asc",iconName="sort-neutral";return name===currentlySortedByColumn&&(iconName=SORT_DIRECTION_ICON[sortDirection]),hovered&&(iconName=SORT_DIRECTION_ICON[desiredSortDirection]),React.createElement(StyledSortableCellWrapper,null,React.createElement(StyledSortableCellContent,{onClick:()=>{setHovered(!1),onSort&&onSort(name,desiredSortDirection)},type:"button",alignColumn:align,onPointerEnter:()=>setHovered(!0),onPointerLeave:()=>setHovered(!1)},React.createElement(StyledLabel,{as:"span",size:"xs",transform:"uppercase",variant:"tertiary",normalizeHeight:!toggletipContent},label,React.createElement(SortIcon,{"aria-hidden":"true"},React.createElement(Icon,{size:"s",name:iconName,color:"primary"})))),toggletipContent&&React.createElement(DataTableHeaderToggletip,{content:toggletipContent,"aria-label":toggletipAriaLabel}))}
1
+ import React,{useState}from"react";import styled from"@emotion/styled";import{Text}from"../../Typography/Text/Text";import{Icon}from"../../Icon/Icon";import{useResponsiveValue}from"../../../shared/mediaQueries";import{DataTableHeaderToggletip}from"./DataTableHeaderToggletip";let SORT_DIRECTION_ICON={asc:"sort-ascending",desc:"sort-descending"},SortIcon=styled("span",{target:"e109ymrb0",label:"SortIcon"})(({theme})=>({marginLeft:theme.variables.size.spacing.xxxs,verticalAlign:"middle",color:theme.values.color.text.primary.default,display:"flex"})),StyledSortableCellWrapper=styled("div",{target:"e109ymrb1",label:"StyledSortableCellWrapper"})(({theme})=>({display:"inline-flex",gap:theme.variables.size.spacing.xs}));export const StyledLabel=styled(Text,{target:"e109ymrb2",label:"StyledLabel"})(({theme,alignColumn,normalizeHeight})=>({display:"flex",alignItems:"center",flexWrap:"nowrap",fontWeight:theme.variables.weight.bold,lineHeight:theme.variables.size.lineHeight.m,...useResponsiveValue({textAlign:alignColumn}),...normalizeHeight&&{paddingTop:theme.variables.size.spacing.xxs,paddingBottom:theme.variables.size.spacing.xxs}}));let StyledSortableCellContent=styled("button",{target:"e109ymrb3",label:"StyledSortableCellContent"})(({theme,alignColumn})=>({width:"100%",padding:0,background:"none",border:"none",cursor:"pointer",...useResponsiveValue({textAlign:alignColumn}),[`&:hover ${StyledLabel}`]:{color:theme.values.color.text.primary.default}}));export function SortableCellContent({name,label,align,toggletipContent,toggletipAriaLabel,sortDirection="asc",currentlySortedByColumn,onSort}){let[hovered,setHovered]=useState(!1),desiredSortDirection="asc"===sortDirection?"desc":"asc",iconName="sort-neutral";return name===currentlySortedByColumn&&(iconName=SORT_DIRECTION_ICON[sortDirection]),hovered&&(iconName=SORT_DIRECTION_ICON[desiredSortDirection]),React.createElement(StyledSortableCellWrapper,null,React.createElement(StyledSortableCellContent,{onClick:()=>{setHovered(!1),onSort&&onSort(name,desiredSortDirection)},type:"button",alignColumn:align,onPointerEnter:()=>setHovered(!0),onPointerLeave:()=>setHovered(!1)},React.createElement(StyledLabel,{as:"span",size:"s",variant:"tertiary",normalizeHeight:!toggletipContent},label,React.createElement(SortIcon,{"aria-hidden":"true"},React.createElement(Icon,{size:"s",name:iconName,color:"primary"})))),toggletipContent&&React.createElement(DataTableHeaderToggletip,{content:toggletipContent,"aria-label":toggletipAriaLabel}))}
@@ -1 +1 @@
1
- import React from"react";import styled from"@emotion/styled";import TableCell from"../TableCell";import{getColumnSticky}from"../internal/getColumnSticky";import{isControlColumn}from"../internal/types";import{SortableCellContent,StyledLabel}from"./SortableCellContent";import{Inline}from"../../Inline/Inline";import{DataTableHeaderToggletip}from"./DataTableHeaderToggletip";let SORT_DIRECTION_TEXT={asc:"ascending",desc:"descending"},StyledThead=styled("thead",{target:"e1sckbe90",label:"StyledThead"})(({maxHeight})=>({...maxHeight&&{position:"sticky",top:0,zIndex:2}})),StyledTh=styled(TableCell,{target:"e1sckbe91",label:"StyledTh"})(({theme})=>({padding:`${theme.variables.size.spacing.s} ${theme.variables.size.spacing.m}`,whiteSpace:"nowrap",backgroundColor:theme.values.color.background.primary.default}));export default React.memo(function({className,columns,isFirstColumnSticky,isLastColumnSticky,currentlySortedByColumn,isTableScrolledToLeft,isTableScrolledToRight,maxHeight,allRowsSelected,selectedRowIds,selectAllRowsCheckboxAriaLabel,onAllRowsSelectionChange,onSort}){let headerContext={onSort,currentlySortedByColumn,allRowsSelected,selectedRowIds,selectAllRowsCheckboxAriaLabel,onAllRowsSelectionChange},columnElements=columns.map((column,columnIndex)=>{let headerElm,sticky=getColumnSticky({column,columnIndex,columns,isFirstColumnSticky,isLastColumnSticky});if(isControlColumn(column))return React.createElement(StyledTh,{as:"th",alignColumn:"left",columnWidth:column.width,key:column.name,sticky:sticky,isTableScrolledToLeft:isTableScrolledToLeft,isTableScrolledToRight:isTableScrolledToRight,scope:"col"},column.renderHeader(headerContext));let{isSortable,label,align="left",width,name,sortDirection,toggletipContent,toggletipAriaLabel}=column;headerElm=isSortable?React.createElement(SortableCellContent,{onSort:onSort,name:name,label:label,sortDirection:sortDirection,align:align,currentlySortedByColumn:currentlySortedByColumn,toggletipContent:toggletipContent,toggletipAriaLabel:toggletipAriaLabel}):React.createElement(Inline,{space:"xs",noWrap:!0,vAlignItems:"center",alignItems:align},React.createElement(StyledLabel,{as:"span",size:"xs",transform:"uppercase",alignColumn:align,color:"tertiary",normalizeHeight:!0},label),toggletipContent&&React.createElement(DataTableHeaderToggletip,{content:toggletipContent,"aria-label":toggletipAriaLabel}));let ariaSortAttr=currentlySortedByColumn===name&&{"aria-sort":SORT_DIRECTION_TEXT[sortDirection]};return React.createElement(StyledTh,{as:"th",alignColumn:align,columnWidth:width,key:name,sticky:sticky,isTableScrolledToLeft:isTableScrolledToLeft,isTableScrolledToRight:isTableScrolledToRight,scope:"col",...ariaSortAttr},headerElm)});return React.createElement(StyledThead,{className:className,maxHeight:maxHeight},React.createElement("tr",null,columnElements))});
1
+ import React from"react";import styled from"@emotion/styled";import TableCell from"../TableCell";import{getColumnSticky}from"../internal/getColumnSticky";import{isControlColumn}from"../internal/types";import{SortableCellContent,StyledLabel}from"./SortableCellContent";import{Inline}from"../../Inline/Inline";import{DataTableHeaderToggletip}from"./DataTableHeaderToggletip";let SORT_DIRECTION_TEXT={asc:"ascending",desc:"descending"},StyledThead=styled("thead",{target:"eqohg680",label:"StyledThead"})(({maxHeight})=>({...maxHeight&&{position:"sticky",top:0,zIndex:2}})),StyledTh=styled(TableCell,{target:"eqohg681",label:"StyledTh"})(({theme})=>({padding:`${theme.variables.size.spacing.s} ${theme.variables.size.spacing.m}`,whiteSpace:"nowrap",backgroundColor:theme.values.color.background.primary.default}));export default React.memo(function({className,columns,isFirstColumnSticky,isLastColumnSticky,currentlySortedByColumn,isTableScrolledToLeft,isTableScrolledToRight,maxHeight,allRowsSelected,selectedRowIds,selectAllRowsCheckboxAriaLabel,onAllRowsSelectionChange,onSort}){let headerContext={onSort,currentlySortedByColumn,allRowsSelected,selectedRowIds,selectAllRowsCheckboxAriaLabel,onAllRowsSelectionChange},columnElements=columns.map((column,columnIndex)=>{let headerElm,sticky=getColumnSticky({column,columnIndex,columns,isFirstColumnSticky,isLastColumnSticky});if(isControlColumn(column))return React.createElement(StyledTh,{as:"th",alignColumn:"left",columnWidth:column.width,key:column.name,sticky:sticky,isTableScrolledToLeft:isTableScrolledToLeft,isTableScrolledToRight:isTableScrolledToRight,scope:"col"},column.renderHeader(headerContext));let{isSortable,label,align="left",width,name,sortDirection,toggletipContent,toggletipAriaLabel}=column;headerElm=isSortable?React.createElement(SortableCellContent,{onSort:onSort,name:name,label:label,sortDirection:sortDirection,align:align,currentlySortedByColumn:currentlySortedByColumn,toggletipContent:toggletipContent,toggletipAriaLabel:toggletipAriaLabel}):React.createElement(Inline,{space:"xs",noWrap:!0,vAlignItems:"center",alignItems:align},React.createElement(StyledLabel,{as:"span",size:"s",alignColumn:align,color:"tertiary",normalizeHeight:!0},label),toggletipContent&&React.createElement(DataTableHeaderToggletip,{content:toggletipContent,"aria-label":toggletipAriaLabel}));let ariaSortAttr=currentlySortedByColumn===name&&{"aria-sort":SORT_DIRECTION_TEXT[sortDirection]};return React.createElement(StyledTh,{as:"th",alignColumn:align,columnWidth:width,key:name,sticky:sticky,isTableScrolledToLeft:isTableScrolledToLeft,isTableScrolledToRight:isTableScrolledToRight,scope:"col",...ariaSortAttr},headerElm)});return React.createElement(StyledThead,{className:className,maxHeight:maxHeight},React.createElement("tr",null,columnElements))});
@@ -42,7 +42,7 @@ export type PromptInputProps = {
42
42
  onEnterKey: () => void;
43
43
  /** Renders an icon to the left inside the textarea */
44
44
  leftIcon?: IconName;
45
- } & Omit<PromptTextAreaProps, "isAutocompleteListOpen" | "selectedListItem" | "hasLeftIcon" | "size"> & Pick<AutocompleteListProps, "autocompleteListItems" | "autocompleteListFooter" | "portalContainer">;
45
+ } & Omit<PromptTextAreaProps, "isAutocompleteListOpen" | "selectedListItem" | "hasAutocomplete" | "hasLeftIcon" | "size"> & Pick<AutocompleteListProps, "autocompleteListItems" | "autocompleteListFooter" | "portalContainer">;
46
46
  export declare const PromptInput: React.ForwardRefExoticComponent<{
47
47
  "data-e2e-test-id"?: string;
48
48
  header?: BasePromptInputHeaderProps;
@@ -70,5 +70,5 @@ export declare const PromptInput: React.ForwardRefExoticComponent<{
70
70
  onEnterKey: () => void;
71
71
  /** Renders an icon to the left inside the textarea */
72
72
  leftIcon?: IconName;
73
- } & Omit<PromptTextAreaProps, "size" | "selectedListItem" | "isAutocompleteListOpen" | "hasLeftIcon"> & Pick<AutocompleteListProps, "portalContainer" | "autocompleteListItems" | "autocompleteListFooter"> & React.RefAttributes<HTMLTextAreaElement>>;
73
+ } & Omit<PromptTextAreaProps, "size" | "selectedListItem" | "isAutocompleteListOpen" | "hasAutocomplete" | "hasLeftIcon"> & Pick<AutocompleteListProps, "portalContainer" | "autocompleteListItems" | "autocompleteListFooter"> & React.RefAttributes<HTMLTextAreaElement>>;
74
74
  export {};
@@ -1 +1 @@
1
- import React,{useRef,useMemo,useState,useEffect,useCallback,forwardRef}from"react";import styled from"@emotion/styled";import{PromptTextArea,getPaddingHorizontal,getPaddingVertical}from"./PromptTextArea";import{Container}from"../Container";import{AutocompleteList}from"./AutocompleteList";import{getListItemId}from"./CategoryList";import{Text}from"../Typography/Text";import{Inline}from"../Inline/Inline";import{RoundButton}from"../RoundButton/RoundButton";import{PictogramButton}from"../PictogramButton/PictogramButton";import{Stack}from"../Stack/Stack";import{Icon}from"../Icon/Icon";import{SubThemeProvider}from"../SubThemeProvider/SubThemeProvider";import{useAnimatedBorder}from"../Utilities/AnimatedBorder/useAnimatedBorder";import{PromptInputHeader}from"./PromptInputHeader";let CustomContainer=styled(Container,{target:"eeqo85f0",label:"CustomContainer"})(({theme,hideBorder,hasShadow})=>({border:`1px solid ${theme.values.color.border.primary.default}`,background:theme.values.color.background.elevated.default,...hasShadow&&{boxShadow:theme.values.shadow.defaultRing,transitionProperty:"box-shadow, border-color, outline-color",transitionDuration:theme.variables.animation.promptInput.focus.duration,transitionTimingFunction:theme.variables.animation.promptInput.focus.timingFunction},...hideBorder&&{borderColor:"transparent"},cursor:"text",outlineColor:"transparent","&:has(textarea:focus-visible)":{outlineWidth:1,outlineStyle:"solid",outlineOffset:-1,boxShadow:theme.values.shadow.focusRing,outlineColor:theme.values.color.border.accent.default}})),StyledTextAreaContainer=styled("div",{target:"eeqo85f1",label:"StyledTextAreaContainer"})({borderRadius:"inherit",position:"relative",width:"100%"}),StyledLeftIconContainer=styled("div",{target:"eeqo85f2",label:"StyledLeftIconContainer"})(({theme,size})=>({display:"flex",position:"absolute",top:getPaddingVertical(theme,size),left:getPaddingHorizontal(theme,size),height:theme.variables.size.dimension.icon.m,alignItems:"center"})),StyledEmptyStateTopRightContentContainer=styled("div",{target:"eeqo85f3",label:"StyledEmptyStateTopRightContentContainer"})(({theme,size})=>({position:"absolute",top:getPaddingVertical(theme,size),right:getPaddingHorizontal(theme,size),userSelect:"none",pointerEvents:"none"})),StyledClearButton=styled(PictogramButton,{target:"eeqo85f4",label:"StyledClearButton"})(({theme,buttonSize})=>({position:"absolute",right:theme.variables.size.spacing.s,top:"m"===buttonSize?theme.variables.size.spacing.s:theme.variables.size.spacing.xs})),StyledSlotsContainer=styled("div",{target:"eeqo85f5",label:"StyledSlotsContainer"})({display:"flex",flexWrap:"wrap",alignItems:"center"}),StyledSlot=styled("div",{target:"eeqo85f6",label:"StyledSlot"})(({theme,side})=>({margin:`0 ${theme.variables.size.spacing.s} ${theme.variables.size.spacing.s}`,..."right"===side&&{marginLeft:"auto"}})),defaultSendButtonProps={type:"submit",icon:"arrow-up"};export const PromptInput=forwardRef(({"data-e2e-test-id":dataE2eTestId,name,autocompleteListItems=[],value,bottomToolbar,isProcessing,sendButtonProps,autocompleteListFooter,clearButtonAriaLabel="Clear input",hint,emptyStateTopRightContent,portalContainer,leftIcon,header,onChange,onComplete,onClear,onEnterKey,onFocus,onBlur,onKeyDown,variant,size="m",skipAIAnimation=!1,rows=1,...rest},ref)=>{let containerRef=useRef(null),animatedBorderRef=useRef(null),textAreaContainerRef=useRef(null),internalRef=useRef(null),[selectedIndex,setSelectedIndex]=useState(-1),userTypedQuery=useRef(""),[isAutocompleteListOpen,setIsAutocompleteListOpen]=useState(!1),textAreaRef=ref||internalRef;useAnimatedBorder(animatedBorderRef,{skipAnimation:skipAIAnimation||"ai"!==variant,radius:"m"===size?12:8,iterations:1});let mergedSendButtonProps={...defaultSendButtonProps,...sendButtonProps??{}},closeAutocompleteList=useCallback(()=>{setIsAutocompleteListOpen(!1),setSelectedIndex(-1)},[]),openAutocompleteList=useCallback(()=>{autocompleteListItems.length&&(setIsAutocompleteListOpen(!0),setSelectedIndex(-1))},[autocompleteListItems]),acceptTextSelection=()=>{userTypedQuery.current=value,textAreaRef.current.selectionStart!==textAreaRef.current.selectionEnd&&textAreaRef.current.setSelectionRange(value.length,value.length)};useEffect(()=>{autocompleteListItems.length?openAutocompleteList():closeAutocompleteList()},[autocompleteListItems,openAutocompleteList,closeAutocompleteList]),useEffect(()=>{value&&value!==userTypedQuery.current&&isAutocompleteListOpen&&textAreaRef.current.setSelectionRange(userTypedQuery.current.length,value.length)},[value,textAreaRef,isAutocompleteListOpen]);let flattenedListItems=useMemo(()=>{let list=[];return autocompleteListItems.forEach(listItem=>{listItem.items.forEach((item,index)=>{list.push({category:listItem.category,indexInCategory:index,value:item.value,id:getListItemId(name,listItem.category,index)})})}),list},[autocompleteListItems,name]),handleSelectedIndexChange=(index,evt)=>{if(setSelectedIndex(index),-1!==index){let{category,value:itemValue}=flattenedListItems[index];onComplete({value:itemValue,category,evt,index})}},handlePreventFocus=evt=>{evt.preventDefault()},selectedListItem=-1!==selectedIndex?flattenedListItems[selectedIndex]:null,emptyStateTopRightContentElm=emptyStateTopRightContent?React.createElement(StyledEmptyStateTopRightContentContainer,{size:size},React.createElement(Text,{color:"tertiary"},emptyStateTopRightContent)):null,clearButtonElm=value?React.createElement(StyledClearButton,{size:"m"===size?"s":"xs","aria-hidden":"true",tabIndex:-1,icon:"x-circle-filled","aria-label":clearButtonAriaLabel,onPointerDown:handlePreventFocus,onClick:onClear,buttonSize:size}):emptyStateTopRightContentElm,hintElm=!!hint&&React.createElement(Inline,{alignItems:"center"},React.createElement(Text,{size:"s",color:"tertiary"},hint)),bottomToolbarElm=(bottomToolbar?.rightContent||bottomToolbar?.leftContent||!!sendButtonProps)&&React.createElement(React.Fragment,null,bottomToolbar?.leftContent&&React.createElement(StyledSlot,null,bottomToolbar.leftContent),React.createElement(StyledSlot,{"data-e2e-test-id":"bottomToolbar",side:"right"},React.createElement(Inline,{space:"xs",vAlignItems:"center"},bottomToolbar?.rightContent,sendButtonProps&&React.createElement(SubThemeProvider,{name:variant},React.createElement(RoundButton,{ariaAttributes:{"aria-label":isProcessing?"Processing query":"Submit query"},...mergedSendButtonProps,size:"m"===size?"s":"xs",disabled:mergedSendButtonProps.disabled??!value,onClick:evt=>{mergedSendButtonProps.onClick?.(evt),closeAutocompleteList()},onPointerDown:handlePreventFocus,variant:"primary",icon:isProcessing?"stop-filled":mergedSendButtonProps.icon})))));return React.createElement(React.Fragment,null,React.createElement("div",{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"PromptInput",ref:containerRef,translate:"no"},React.createElement(Stack,{space:"s"},React.createElement("div",{ref:animatedBorderRef},React.createElement(SubThemeProvider,{name:variant},React.createElement(CustomContainer,{elevation:0,borderRadius:size,hideBorder:!1,hasShadow:!0},React.createElement(SubThemeProvider,{name:"unset"},React.createElement(StyledSlotsContainer,{ref:textAreaContainerRef,onPointerDown:evt=>{evt.target===evt.currentTarget&&(textAreaRef.current?.focus(),evt.preventDefault())}},header&&React.createElement(PromptInputHeader,{...header,borderRadiusSize:size,size:size}),React.createElement(StyledTextAreaContainer,null,leftIcon&&React.createElement(StyledLeftIconContainer,{size:size},React.createElement(Icon,{name:leftIcon,size:size,color:"tertiary","aria-hidden":"true"})),React.createElement(PromptTextArea,{...rest,dataE2eTestId:dataE2eTestId?`${dataE2eTestId}-input`:void 0,name:name,value:value,ref:textAreaRef,selectedListItem:selectedListItem,isAutocompleteListOpen:isAutocompleteListOpen,hasLeftIcon:!!leftIcon,onFocus:evt=>{onFocus?.(evt)},onBlur:evt=>{value!==userTypedQuery.current&&onComplete?.({value:userTypedQuery.current,evt}),onBlur?.(evt)},onChange:evt=>{userTypedQuery.current=evt.target.value,onChange(evt)},onKeyDown:evt=>{if(isAutocompleteListOpen)switch(evt.key){case"Escape":closeAutocompleteList(),onComplete({value:userTypedQuery.current,evt});break;case"Enter":!evt.shiftKey&&(evt.preventDefault(),closeAutocompleteList(),acceptTextSelection(),value&&onEnterKey?.());break;case" ":acceptTextSelection();break;case"ArrowUp":evt.preventDefault(),selectedIndex>-1&&handleSelectedIndexChange(selectedIndex-1,evt);break;case"ArrowDown":evt.preventDefault(),selectedIndex<flattenedListItems.length-1&&handleSelectedIndexChange(selectedIndex+1,evt)}else switch(evt.key){case"Escape":onClear?.();break;case"Enter":!evt.shiftKey&&(evt.preventDefault(),value&&onEnterKey?.())}onKeyDown?.(evt)},rows:rows,size:size}),clearButtonElm),bottomToolbarElm))))),hintElm)),React.createElement(AutocompleteList,{name:name,value:value,autocompleteListItems:autocompleteListItems,triggerRef:textAreaContainerRef,selectedListItem:selectedListItem,isOpen:isAutocompleteListOpen,autocompleteListFooter:autocompleteListFooter,portalContainer:portalContainer,onListItemClick:(category,indexInCategory,evt)=>{handleSelectedIndexChange(flattenedListItems.findIndex(listItem=>listItem.category===category&&listItem.indexInCategory===indexInCategory),evt),closeAutocompleteList()}}))});
1
+ import React,{useRef,useMemo,useState,useEffect,useCallback,forwardRef}from"react";import styled from"@emotion/styled";import{PromptTextArea,getPaddingHorizontal,getPaddingVertical}from"./PromptTextArea";import{Container}from"../Container";import{AutocompleteList}from"./AutocompleteList";import{getListItemId}from"./CategoryList";import{Text}from"../Typography/Text";import{Inline}from"../Inline/Inline";import{RoundButton}from"../RoundButton/RoundButton";import{PictogramButton}from"../PictogramButton/PictogramButton";import{Stack}from"../Stack/Stack";import{Icon}from"../Icon/Icon";import{SubThemeProvider}from"../SubThemeProvider/SubThemeProvider";import{useAnimatedBorder}from"../Utilities/AnimatedBorder/useAnimatedBorder";import{PromptInputHeader}from"./PromptInputHeader";let CustomContainer=styled(Container,{target:"e1lp7eti0",label:"CustomContainer"})(({theme,hideBorder,hasShadow})=>({border:`1px solid ${theme.values.color.border.primary.default}`,background:theme.values.color.background.elevated.default,...hasShadow&&{boxShadow:theme.values.shadow.defaultRing,transitionProperty:"box-shadow, border-color, outline-color",transitionDuration:theme.variables.animation.promptInput.focus.duration,transitionTimingFunction:theme.variables.animation.promptInput.focus.timingFunction},...hideBorder&&{borderColor:"transparent"},cursor:"text",outlineColor:"transparent","&:has(textarea:focus-visible)":{outlineWidth:1,outlineStyle:"solid",outlineOffset:-1,boxShadow:theme.values.shadow.focusRing,outlineColor:theme.values.color.border.accent.default}})),StyledTextAreaContainer=styled("div",{target:"e1lp7eti1",label:"StyledTextAreaContainer"})({borderRadius:"inherit",position:"relative",width:"100%"}),StyledLeftIconContainer=styled("div",{target:"e1lp7eti2",label:"StyledLeftIconContainer"})(({theme,size})=>({display:"flex",position:"absolute",top:getPaddingVertical(theme,size),left:getPaddingHorizontal(theme,size),height:theme.variables.size.dimension.icon.m,alignItems:"center"})),StyledEmptyStateTopRightContentContainer=styled("div",{target:"e1lp7eti3",label:"StyledEmptyStateTopRightContentContainer"})(({theme,size})=>({position:"absolute",top:getPaddingVertical(theme,size),right:getPaddingHorizontal(theme,size),userSelect:"none",pointerEvents:"none"})),StyledClearButton=styled(PictogramButton,{target:"e1lp7eti4",label:"StyledClearButton"})(({theme,buttonSize})=>({position:"absolute",right:theme.variables.size.spacing.s,top:"m"===buttonSize?theme.variables.size.spacing.s:theme.variables.size.spacing.xs})),StyledSlotsContainer=styled("div",{target:"e1lp7eti5",label:"StyledSlotsContainer"})({display:"flex",flexWrap:"wrap",alignItems:"center"}),StyledSlot=styled("div",{target:"e1lp7eti6",label:"StyledSlot"})(({theme,side})=>({margin:`0 ${theme.variables.size.spacing.s} ${theme.variables.size.spacing.s}`,..."right"===side&&{marginLeft:"auto"}})),defaultSendButtonProps={type:"submit",icon:"arrow-up"};export const PromptInput=forwardRef(({"data-e2e-test-id":dataE2eTestId,name,autocompleteListItems=[],value,bottomToolbar,isProcessing,sendButtonProps,autocompleteListFooter,clearButtonAriaLabel="Clear input",hint,emptyStateTopRightContent,portalContainer,leftIcon,header,onChange,onComplete,onClear,onEnterKey,onFocus,onBlur,onKeyDown,variant,size="m",skipAIAnimation=!1,rows=1,...rest},ref)=>{let containerRef=useRef(null),animatedBorderRef=useRef(null),textAreaContainerRef=useRef(null),internalRef=useRef(null),[selectedIndex,setSelectedIndex]=useState(-1),userTypedQuery=useRef(""),[isAutocompleteListOpen,setIsAutocompleteListOpen]=useState(!1),textAreaRef=ref||internalRef;useAnimatedBorder(animatedBorderRef,{skipAnimation:skipAIAnimation||"ai"!==variant,radius:"m"===size?12:8,iterations:1});let mergedSendButtonProps={...defaultSendButtonProps,...sendButtonProps??{}},closeAutocompleteList=useCallback(()=>{setIsAutocompleteListOpen(!1),setSelectedIndex(-1)},[]),openAutocompleteList=useCallback(()=>{autocompleteListItems.length&&(setIsAutocompleteListOpen(!0),setSelectedIndex(-1))},[autocompleteListItems]),acceptTextSelection=()=>{userTypedQuery.current=value,textAreaRef.current.selectionStart!==textAreaRef.current.selectionEnd&&textAreaRef.current.setSelectionRange(value.length,value.length)};useEffect(()=>{autocompleteListItems.length?openAutocompleteList():closeAutocompleteList()},[autocompleteListItems,openAutocompleteList,closeAutocompleteList]),useEffect(()=>{value&&value!==userTypedQuery.current&&isAutocompleteListOpen&&textAreaRef.current.setSelectionRange(userTypedQuery.current.length,value.length)},[value,textAreaRef,isAutocompleteListOpen]);let flattenedListItems=useMemo(()=>{let list=[];return autocompleteListItems.forEach(listItem=>{listItem.items.forEach((item,index)=>{list.push({category:listItem.category,indexInCategory:index,value:item.value,id:getListItemId(name,listItem.category,index)})})}),list},[autocompleteListItems,name]),handleSelectedIndexChange=(index,evt)=>{if(setSelectedIndex(index),-1!==index){let{category,value:itemValue}=flattenedListItems[index];onComplete({value:itemValue,category,evt,index})}},handlePreventFocus=evt=>{evt.preventDefault()},selectedListItem=-1!==selectedIndex?flattenedListItems[selectedIndex]:null,emptyStateTopRightContentElm=emptyStateTopRightContent?React.createElement(StyledEmptyStateTopRightContentContainer,{size:size},React.createElement(Text,{color:"tertiary"},emptyStateTopRightContent)):null,clearButtonElm=value?React.createElement(StyledClearButton,{size:"m"===size?"s":"xs","aria-hidden":"true",tabIndex:-1,icon:"x-circle-filled","aria-label":clearButtonAriaLabel,onPointerDown:handlePreventFocus,onClick:onClear,buttonSize:size}):emptyStateTopRightContentElm,hintElm=!!hint&&React.createElement(Inline,{alignItems:"center"},React.createElement(Text,{size:"s",color:"tertiary"},hint)),bottomToolbarElm=(bottomToolbar?.rightContent||bottomToolbar?.leftContent||!!sendButtonProps)&&React.createElement(React.Fragment,null,bottomToolbar?.leftContent&&React.createElement(StyledSlot,null,bottomToolbar.leftContent),React.createElement(StyledSlot,{"data-e2e-test-id":"bottomToolbar",side:"right"},React.createElement(Inline,{space:"xs",vAlignItems:"center"},bottomToolbar?.rightContent,sendButtonProps&&React.createElement(SubThemeProvider,{name:variant},React.createElement(RoundButton,{ariaAttributes:{"aria-label":isProcessing?"Processing query":"Submit query"},...mergedSendButtonProps,size:"m"===size?"s":"xs",disabled:mergedSendButtonProps.disabled??!value,onClick:evt=>{mergedSendButtonProps.onClick?.(evt),closeAutocompleteList()},onPointerDown:handlePreventFocus,variant:"primary",icon:isProcessing?"stop-filled":mergedSendButtonProps.icon})))));return React.createElement(React.Fragment,null,React.createElement("div",{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"PromptInput",ref:containerRef,translate:"no"},React.createElement(Stack,{space:"s"},React.createElement("div",{ref:animatedBorderRef},React.createElement(SubThemeProvider,{name:variant},React.createElement(CustomContainer,{elevation:0,borderRadius:size,hideBorder:!1,hasShadow:!0},React.createElement(SubThemeProvider,{name:"unset"},React.createElement(StyledSlotsContainer,{ref:textAreaContainerRef,onPointerDown:evt=>{evt.target===evt.currentTarget&&(textAreaRef.current?.focus(),evt.preventDefault())}},header&&React.createElement(PromptInputHeader,{...header,borderRadiusSize:size,size:size}),React.createElement(StyledTextAreaContainer,null,leftIcon&&React.createElement(StyledLeftIconContainer,{size:size},React.createElement(Icon,{name:leftIcon,size:size,color:"tertiary","aria-hidden":"true"})),React.createElement(PromptTextArea,{...rest,dataE2eTestId:dataE2eTestId?`${dataE2eTestId}-input`:void 0,name:name,value:value,ref:textAreaRef,selectedListItem:selectedListItem,isAutocompleteListOpen:isAutocompleteListOpen,hasAutocomplete:!!autocompleteListItems.length,hasLeftIcon:!!leftIcon,onFocus:evt=>{onFocus?.(evt)},onBlur:evt=>{value!==userTypedQuery.current&&onComplete?.({value:userTypedQuery.current,evt}),onBlur?.(evt)},onChange:evt=>{userTypedQuery.current=evt.target.value,onChange(evt)},onKeyDown:evt=>{if(isAutocompleteListOpen)switch(evt.key){case"Escape":closeAutocompleteList(),onComplete({value:userTypedQuery.current,evt});break;case"Enter":!evt.shiftKey&&(evt.preventDefault(),closeAutocompleteList(),acceptTextSelection(),value&&onEnterKey?.());break;case" ":acceptTextSelection();break;case"ArrowUp":evt.preventDefault(),selectedIndex>-1&&handleSelectedIndexChange(selectedIndex-1,evt);break;case"ArrowDown":evt.preventDefault(),selectedIndex<flattenedListItems.length-1&&handleSelectedIndexChange(selectedIndex+1,evt)}else switch(evt.key){case"Escape":onClear?.();break;case"Enter":!evt.shiftKey&&(evt.preventDefault(),value&&onEnterKey?.())}onKeyDown?.(evt)},rows:rows,size:size}),clearButtonElm),bottomToolbarElm))))),hintElm)),React.createElement(AutocompleteList,{name:name,value:value,autocompleteListItems:autocompleteListItems,triggerRef:textAreaContainerRef,selectedListItem:selectedListItem,isOpen:isAutocompleteListOpen,autocompleteListFooter:autocompleteListFooter,portalContainer:portalContainer,onListItemClick:(category,indexInCategory,evt)=>{handleSelectedIndexChange(flattenedListItems.findIndex(listItem=>listItem.category===category&&listItem.indexInCategory===indexInCategory),evt),closeAutocompleteList()}}))});
@@ -14,6 +14,8 @@ export type PromptTextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> &
14
14
  maxTextAreaHeight?: Property.Height;
15
15
  selectedListItem?: FlattenedListItem;
16
16
  isAutocompleteListOpen?: boolean;
17
+ /** Whether the input offers an autocomplete list. When false the textarea renders as a plain textbox, with no combobox wrapper and no autocomplete ARIA. */
18
+ hasAutocomplete?: boolean;
17
19
  hasLeftIcon?: boolean;
18
20
  rows?: number;
19
21
  size: PromptInputSizes;
@@ -26,6 +28,8 @@ export declare const PromptTextArea: React.ForwardRefExoticComponent<TextareaHTM
26
28
  maxTextAreaHeight?: Property.Height;
27
29
  selectedListItem?: FlattenedListItem;
28
30
  isAutocompleteListOpen?: boolean;
31
+ /** Whether the input offers an autocomplete list. When false the textarea renders as a plain textbox, with no combobox wrapper and no autocomplete ARIA. */
32
+ hasAutocomplete?: boolean;
29
33
  hasLeftIcon?: boolean;
30
34
  rows?: number;
31
35
  size: PromptInputSizes;
@@ -1 +1 @@
1
- import React,{forwardRef,useEffect}from"react";import styled from"@emotion/styled";import{getInputTextPlaceholder}from"../../shared/mixins/TextInput/getInputTextPlaceholder";import{ScreenReaderText}from"../Utilities/ScreenReaderText/ScreenReaderText";import{getAutocompleteListId}from"./AutocompleteList";export const getPaddingHorizontal=(theme,size)=>"s"===size?theme.variables.size.spacing.s:theme.variables.size.spacing.m;export const getPaddingVertical=(theme,size)=>"s"===size?theme.variables.size.spacing.xs:theme.variables.size.spacing.m;let StyledTextAreaContainer=styled("label",{target:"e1584yv0",label:"StyledTextAreaContainer"})(({theme,maxTextAreaHeight,hasLeftIcon,size})=>{let paddingTop=getPaddingVertical(theme,size),paddingBottom=getPaddingVertical(theme,size),iconTextGap="s"===size?`calc(${theme.variables.size.spacing.xs} - ${theme.variables.size.spacing.xxxs})`:theme.variables.size.spacing.xs,basePaddingHorizontal=getPaddingHorizontal(theme,size),paddingRight=`calc(${basePaddingHorizontal} + ${theme.variables.size.dimension.icon.m} + ${iconTextGap})`,paddingLeft=hasLeftIcon?`calc(${basePaddingHorizontal} + ${theme.variables.size.dimension.icon[size]} + ${iconTextGap})`:basePaddingHorizontal;return{display:"grid",verticalAlign:"top",alignItems:"stretch",width:"100%",borderRadius:"inherit",position:"relative",fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.m,lineHeight:theme.variables.size.lineHeight.xl,"&::after":{content:"attr(data-value) ' '",boxSizing:"border-box",fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.m,gridArea:"1 / 1",whiteSpace:"pre-wrap",visibility:"hidden",maxHeight:maxTextAreaHeight},textarea:{all:"unset",resize:"none",gridArea:"1 / 1",cursor:"text",color:theme.values.color.text.primary.default,...getInputTextPlaceholder({theme})},"textarea::placeholder":{whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden"},"&::after, textarea":{minWidth:"0",overflowWrap:"break-word",padding:`${paddingTop} ${paddingRight} ${paddingBottom} ${paddingLeft}`}}});export const PromptTextArea=forwardRef(({dataE2eTestId,label,name,value,placeholder,maxTextAreaHeight="200px",selectedListItem,isAutocompleteListOpen,hasLeftIcon,rows=1,size,onChange,role,...rest},ref)=>(useEffect(()=>{ref.current.parentNode.dataset.value=value},[value,ref]),React.createElement(StyledTextAreaContainer,{maxTextAreaHeight:maxTextAreaHeight,hasLeftIcon:hasLeftIcon,size:size},React.createElement(ScreenReaderText,null,label),React.createElement("textarea",{...rest,"data-e2e-test-id":dataE2eTestId,ref:ref,name:name,value:value,placeholder:placeholder,onChange:onChange,rows:rows,role:role??"combobox","aria-autocomplete":"list","aria-controls":isAutocompleteListOpen?getAutocompleteListId(name):"","aria-activedescendant":selectedListItem?selectedListItem.id:"","aria-expanded":isAutocompleteListOpen}))));
1
+ import React,{forwardRef,useEffect}from"react";import styled from"@emotion/styled";import{getInputTextPlaceholder}from"../../shared/mixins/TextInput/getInputTextPlaceholder";import{ScreenReaderText}from"../Utilities/ScreenReaderText/ScreenReaderText";import{getAutocompleteListId}from"./AutocompleteList";export const getPaddingHorizontal=(theme,size)=>"s"===size?theme.variables.size.spacing.s:theme.variables.size.spacing.m;export const getPaddingVertical=(theme,size)=>"s"===size?theme.variables.size.spacing.xs:theme.variables.size.spacing.m;let StyledTextAreaContainer=styled("label",{target:"esul89v0",label:"StyledTextAreaContainer"})(({theme,maxTextAreaHeight,hasLeftIcon,size})=>{let paddingTop=getPaddingVertical(theme,size),paddingBottom=getPaddingVertical(theme,size),iconTextGap="s"===size?`calc(${theme.variables.size.spacing.xs} - ${theme.variables.size.spacing.xxxs})`:theme.variables.size.spacing.xs,basePaddingHorizontal=getPaddingHorizontal(theme,size),paddingRight=`calc(${basePaddingHorizontal} + ${theme.variables.size.dimension.icon.m} + ${iconTextGap})`,paddingLeft=hasLeftIcon?`calc(${basePaddingHorizontal} + ${theme.variables.size.dimension.icon[size]} + ${iconTextGap})`:basePaddingHorizontal;return{display:"grid",verticalAlign:"top",alignItems:"stretch",width:"100%",borderRadius:"inherit",position:"relative",fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.m,lineHeight:theme.variables.size.lineHeight.xl,"&::after":{content:"attr(data-value) ' '",boxSizing:"border-box",fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.m,gridArea:"1 / 1",whiteSpace:"pre-wrap",visibility:"hidden",maxHeight:maxTextAreaHeight},textarea:{all:"unset",resize:"none",gridArea:"1 / 1",cursor:"text",color:theme.values.color.text.primary.default,...getInputTextPlaceholder({theme})},"textarea::placeholder":{whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden"},"&::after, textarea":{minWidth:"0",overflowWrap:"break-word",padding:`${paddingTop} ${paddingRight} ${paddingBottom} ${paddingLeft}`}}}),StyledTextAreaWrapper=styled("div",{target:"esul89v1",label:"StyledTextAreaWrapper"})({borderRadius:"inherit",width:"100%"}),getPromptTextAreaLabelId=name=>`${name}_PromptTextAreaLabel`,getAutocompleteAriaProps=({name,isAutocompleteListOpen,selectedListItem})=>({"aria-autocomplete":"list","aria-controls":isAutocompleteListOpen?getAutocompleteListId(name):void 0,"aria-activedescendant":selectedListItem?.id}),getComboboxProps=({name,labelId,isAutocompleteListOpen})=>({role:"combobox","aria-expanded":!!isAutocompleteListOpen,"aria-controls":isAutocompleteListOpen?getAutocompleteListId(name):void 0,"aria-labelledby":labelId});export const PromptTextArea=forwardRef(({dataE2eTestId,label,name,value,placeholder,maxTextAreaHeight="200px",selectedListItem,isAutocompleteListOpen,hasAutocomplete,hasLeftIcon,rows=1,size,onChange,...rest},ref)=>{useEffect(()=>{ref.current.parentNode.dataset.value=value},[value,ref]);let autocompleteAriaProps=hasAutocomplete?getAutocompleteAriaProps({name,isAutocompleteListOpen,selectedListItem}):{},labelId=getPromptTextAreaLabelId(name),textAreaElm=React.createElement(StyledTextAreaContainer,{maxTextAreaHeight:maxTextAreaHeight,hasLeftIcon:hasLeftIcon,size:size},React.createElement(ScreenReaderText,{id:labelId},label),React.createElement("textarea",{...rest,"data-e2e-test-id":dataE2eTestId,ref:ref,name:name,value:value,placeholder:placeholder,onChange:onChange,rows:rows,...autocompleteAriaProps})),comboboxProps=hasAutocomplete?getComboboxProps({name,labelId,isAutocompleteListOpen}):{};return React.createElement(StyledTextAreaWrapper,comboboxProps,textAreaElm)});
@@ -18,6 +18,8 @@ export type RangePopoverProps = {
18
18
  contentPadding?: "s" | "m";
19
19
  /** Maximum width of the popover surface. */
20
20
  maxWidth?: number;
21
+ /** When true, the arrow pointing at the range is not rendered. */
22
+ hideArrow?: boolean;
21
23
  /** ARIA role for the popover surface. */
22
24
  role?: string;
23
25
  /**
@@ -53,9 +55,10 @@ export type RangePopoverProps = {
53
55
  * @param portalContainer - Portal target; falls back to the document body.
54
56
  * @param contentPadding - Inner padding of the popover surface.
55
57
  * @param maxWidth - Maximum width of the popover surface.
58
+ * @param hideArrow - When true, the arrow pointing at the range is not rendered.
56
59
  * @param role - ARIA role for the popover surface.
57
60
  * @param aria-label - Accessible name for the popover surface.
58
61
  * @param disableInitialFocus - When true, does not move focus into the popover.
59
62
  */
60
- export declare function RangePopover({ content, range, isVisible, onClose, placement, portalContainer, contentPadding, maxWidth, role, "aria-label": ariaLabel, disableInitialFocus, "data-e2e-test-id": dataE2eTestId, }: RangePopoverProps): React.ReactElement;
63
+ export declare function RangePopover({ content, range, isVisible, onClose, placement, portalContainer, contentPadding, maxWidth, hideArrow, role, "aria-label": ariaLabel, disableInitialFocus, "data-e2e-test-id": dataE2eTestId, }: RangePopoverProps): React.ReactElement;
61
64
  export {};
@@ -1 +1 @@
1
- import React,{useId,useRef}from"react";import styled from"@emotion/styled";import{TooltipContent}from"../Tooltip/TooltipContent";import{FocusTrapWrapper}from"../../shared/FocusTrapWrapper";let StyledContent=styled("div",{target:"e6ct16h0",label:"StyledContent"})(({theme,contentPadding})=>({padding:"m"===contentPadding?theme.variables.size.spacing.s:theme.variables.size.spacing.xxs}));export function RangePopover({content,range,isVisible,onClose,placement="top",portalContainer,contentPadding="s",maxWidth,role="dialog","aria-label":ariaLabel,disableInitialFocus=!1,"data-e2e-test-id":dataE2eTestId}){let tooltipId=useId(),rangeRef=useRef(null);rangeRef.current=range;let contentRef=useRef(null),trappedContent=React.createElement(FocusTrapWrapper,{active:isVisible,focusTrapOptions:{allowOutsideClick:!0,clickOutsideDeactivates:!0,escapeDeactivates:!0,fallbackFocus:()=>contentRef.current,initialFocus:!disableInitialFocus&&void 0,onPostDeactivate:onClose,preventScroll:!0,returnFocusOnDeactivate:!disableInitialFocus}},React.createElement(StyledContent,{ref:contentRef,tabIndex:-1,contentPadding:contentPadding},content));return React.createElement(TooltipContent,{"aria-label":ariaLabel,content:trappedContent,dataDSId:"RangePopover",dataE2eTestId:dataE2eTestId,isVisible:isVisible,maxWidth:maxWidth,placement:placement,portalContainer:portalContainer,role:role,tooltipId:tooltipId,triggerRef:rangeRef})}
1
+ import React,{useId,useRef}from"react";import styled from"@emotion/styled";import{TooltipContent}from"../Tooltip/TooltipContent";import{FocusTrapWrapper}from"../../shared/FocusTrapWrapper";let StyledContent=styled("div",{target:"e115t0yz0",label:"StyledContent"})(({theme,contentPadding})=>({padding:"m"===contentPadding?theme.variables.size.spacing.s:theme.variables.size.spacing.xxs}));export function RangePopover({content,range,isVisible,onClose,placement="top",portalContainer,contentPadding="s",maxWidth,hideArrow=!1,role="dialog","aria-label":ariaLabel,disableInitialFocus=!1,"data-e2e-test-id":dataE2eTestId}){let tooltipId=useId(),rangeRef=useRef(null);rangeRef.current=range;let contentRef=useRef(null),trappedContent=React.createElement(FocusTrapWrapper,{active:isVisible,focusTrapOptions:{allowOutsideClick:!0,clickOutsideDeactivates:!0,escapeDeactivates:!0,fallbackFocus:()=>contentRef.current,initialFocus:!disableInitialFocus&&void 0,onPostDeactivate:onClose,preventScroll:!0,returnFocusOnDeactivate:!disableInitialFocus}},React.createElement(StyledContent,{ref:contentRef,tabIndex:-1,contentPadding:contentPadding},content));return React.createElement(TooltipContent,{"aria-label":ariaLabel,content:trappedContent,dataDSId:"RangePopover",dataE2eTestId:dataE2eTestId,hideArrow:hideArrow,isVisible:isVisible,maxWidth:maxWidth,placement:placement,portalContainer:portalContainer,role:role,tooltipId:tooltipId,triggerRef:rangeRef})}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@amboss/design-system",
3
- "version": "4.4.2",
3
+ "version": "4.4.4",
4
4
  "description": "the design system for AMBOSS products",
5
5
  "author": "AMBOSS",
6
6
  "license": "ISC",
@@ -114,7 +114,11 @@
114
114
  "icons:ios": "node ./scripts/svg-to-pdf.mts",
115
115
  "icons:android": "node ./scripts/svg-to-xml.mts",
116
116
  "icons:optimize": "svgo -rf assets/icons -o assets/icons",
117
- "build:icons:ci": "node ./scripts/build-mobile-icon-assets.mts"
117
+ "build:icons:ci": "node ./scripts/build-mobile-icon-assets.mts",
118
+ "fonts:css": "node ./scripts/generate-fonts-css.mts",
119
+ "fonts:prepare-upload": "node ./scripts/prepare-font-cdn-upload.mts",
120
+ "fonts:upload": "node ./scripts/upload-fonts-to-cdn.mts",
121
+ "fonts:verify": "node ./scripts/verify-font-buckets.mts"
118
122
  },
119
123
  "repository": {
120
124
  "type": "git",