@amboss/design-system 4.4.1 → 4.4.3
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.
- package/build/cjs/components/DataTable/header/SortableCellContent.js +1 -1
- package/build/cjs/components/DataTable/header/TableHeader.js +1 -1
- package/build/cjs/components/PromptButtonGroup/PromptButtonGroup.d.ts +7 -1
- package/build/cjs/components/PromptButtonGroup/PromptButtonGroup.js +1 -1
- package/build/cjs/components/PromptInput/PromptInput.d.ts +2 -2
- package/build/cjs/components/PromptInput/PromptInput.js +1 -1
- package/build/cjs/components/PromptInput/PromptTextArea.d.ts +4 -0
- package/build/cjs/components/PromptInput/PromptTextArea.js +1 -1
- package/build/esm/components/DataTable/header/SortableCellContent.js +1 -1
- package/build/esm/components/DataTable/header/TableHeader.js +1 -1
- package/build/esm/components/PromptButtonGroup/PromptButtonGroup.d.ts +7 -1
- package/build/esm/components/PromptButtonGroup/PromptButtonGroup.js +1 -1
- package/build/esm/components/PromptInput/PromptInput.d.ts +2 -2
- package/build/esm/components/PromptInput/PromptInput.js +1 -1
- package/build/esm/components/PromptInput/PromptTextArea.d.ts +4 -0
- package/build/esm/components/PromptInput/PromptTextArea.js +1 -1
- package/package.json +6 -2
|
@@ -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:"
|
|
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:"
|
|
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))});
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import type { PromptButtonProps } from "../PromptButton/PromptButton";
|
|
3
3
|
import type { PromptInputProps } from "../PromptInput/PromptInput";
|
|
4
|
+
import type { MQ } from "../../types";
|
|
5
|
+
type PromptButtonGroupAlignment = "left" | "right" | "center";
|
|
6
|
+
type PromptButtonGroupAlignItems = MQ<PromptButtonGroupAlignment> | PromptButtonGroupAlignment;
|
|
4
7
|
export type PromptButtonGroupItem = Omit<PromptButtonProps, "variant" | "children" | "type"> & {
|
|
5
8
|
key: string;
|
|
6
9
|
label: string;
|
|
@@ -24,6 +27,8 @@ export type PromptButtonGroupSlotProps = {
|
|
|
24
27
|
};
|
|
25
28
|
export type PromptButtonGroupProps = Pick<PromptButtonProps, "variant"> & {
|
|
26
29
|
items: PromptButtonGroupItem[];
|
|
30
|
+
/** Horizontal alignment of the visible row. `"spaceBetween"` is disallowed — it would split the last pill from the overflow trigger. */
|
|
31
|
+
alignItems?: PromptButtonGroupAlignItems;
|
|
27
32
|
slotProps?: PromptButtonGroupSlotProps;
|
|
28
33
|
"data-e2e-test-id"?: string;
|
|
29
34
|
};
|
|
@@ -33,4 +38,5 @@ export type PromptButtonGroupProps = Pick<PromptButtonProps, "variant"> & {
|
|
|
33
38
|
* that cannot fit a single pill next to the overflow trigger, the group
|
|
34
39
|
* falls back to a vertical stack of full-width buttons.
|
|
35
40
|
*/
|
|
36
|
-
export declare function PromptButtonGroup({ items, variant, slotProps, "data-e2e-test-id": dataE2eTestId, }: PromptButtonGroupProps): React.ReactElement | null;
|
|
41
|
+
export declare function PromptButtonGroup({ items, variant, alignItems, slotProps, "data-e2e-test-id": dataE2eTestId, }: PromptButtonGroupProps): React.ReactElement | null;
|
|
42
|
+
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"PromptButtonGroup",{enumerable:!0,get:function(){return PromptButtonGroup}});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")),_Box=require("../Box/Box"),_Inline=require("../Inline/Inline"),_Popover=require("../Popover/Popover"),_PromptButton=require("../PromptButton/PromptButton"),_PromptInput=require("../PromptInput/PromptInput"),_Stack=require("../Stack/Stack"),_SubThemeProvider=require("../SubThemeProvider/SubThemeProvider"),_useIntl=require("../../shared/intl/useIntl"),_PromptButtonGroupOverflowButton=require("./PromptButtonGroupOverflowButton"),_useVisibleCount=require("./useVisibleCount"),StyledMeasurementLayer=(0,_styled.default)("div",{target:"
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"PromptButtonGroup",{enumerable:!0,get:function(){return PromptButtonGroup}});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")),_Box=require("../Box/Box"),_Inline=require("../Inline/Inline"),_Popover=require("../Popover/Popover"),_PromptButton=require("../PromptButton/PromptButton"),_PromptInput=require("../PromptInput/PromptInput"),_Stack=require("../Stack/Stack"),_SubThemeProvider=require("../SubThemeProvider/SubThemeProvider"),_useIntl=require("../../shared/intl/useIntl"),_PromptButtonGroupOverflowButton=require("./PromptButtonGroupOverflowButton"),_useVisibleCount=require("./useVisibleCount"),StyledMeasurementLayer=(0,_styled.default)("div",{target:"eb1xfcg0",label:"StyledMeasurementLayer"})({position:"absolute",top:0,left:0,width:0,height:0,overflow:"hidden",visibility:"hidden",pointerEvents:"none",whiteSpace:"nowrap"}),StyledRoot=(0,_styled.default)("div",{target:"eb1xfcg1",label:"StyledRoot"})({position:"relative",width:"100%"}),CustomFullWidthPromptButton=(0,_styled.default)(_PromptButton.PromptButton,{target:"eb1xfcg2",label:"CustomFullWidthPromptButton"})({width:"100%"}),CustomFullWidthOverflowButton=(0,_styled.default)(_PromptButtonGroupOverflowButton.PromptButtonGroupOverflowButton,{target:"eb1xfcg3",label:"CustomFullWidthOverflowButton"})({width:"100%"}),StyledPopoverBody=(0,_styled.default)("div",{shouldForwardProp:prop=>"withMinWidth"!==prop,target:"eb1xfcg4",label:"StyledPopoverBody"})(({theme,withMinWidth})=>({...withMinWidth&&{minWidth:`min(${theme.variables.size.dimension.promptButtonGroupPopover.minWidth}, 100%)`}}));function PromptButtonGroup({items,variant,alignItems="left",slotProps,"data-e2e-test-id":dataE2eTestId}){let{formatMessage}=(0,_useIntl.useIntl)(),[isPopoverVisible,setIsPopoverVisible]=(0,_react.useState)(!1),hasPromptInputSlot=slotProps?.promptInput!=null,{setContainerEl,setMeasurementEl,fit}=(0,_useVisibleCount.useVisibleCount)({items,hasPromptInputSlot}),overflowButtonLabel=slotProps?.overflowButton?.label??formatMessage("PromptButtonGroup.OverflowButton.Label"),overflowButtonAriaLabel=slotProps?.overflowButton?.["aria-label"]??formatMessage("PromptButtonGroup.OverflowButton.AriaLabel"),clampedVisibleCount=Math.min(fit.visibleCount,items.length),visibleItems=items.slice(0,clampedVisibleCount),overflowItems=items.slice(clampedVisibleCount),hasOverflowItems=overflowItems.length>0,shouldRenderOverflowTrigger=hasOverflowItems||hasPromptInputSlot,isStackLayout="stack"===fit.layout;(0,_react.useEffect)(()=>{shouldRenderOverflowTrigger&&0!==items.length||setIsPopoverVisible(!1)},[shouldRenderOverflowTrigger,items.length]);let handleOverflowItemClick=(0,_react.useCallback)(item=>{setIsPopoverVisible(!1),item.onClick()},[]);if(0===items.length)return null;let measuredItemsRow=_react.default.createElement(StyledMeasurementLayer,{ref:setMeasurementEl,"aria-hidden":"true","data-ds-id":"PromptButtonGroupMeasurement"},_react.default.createElement(_Inline.Inline,{noWrap:!0,space:"xs",vAlignItems:"center"},items.map(({key,label,leftIcon,disabled,as})=>_react.default.createElement(_PromptButton.PromptButton,{key:key,variant:variant,leftIcon:leftIcon,disabled:disabled,as:as},label)),_react.default.createElement(_PromptButtonGroupOverflowButton.PromptButtonGroupOverflowButton,{label:overflowButtonLabel}))),renderVisibleItem=(item,ButtonComponent)=>{let{key,label,leftIcon,disabled,as,onClick,"data-e2e-test-id":itemDataE2eTestId}=item;return _react.default.createElement(ButtonComponent,{key:key,variant:variant,leftIcon:leftIcon,disabled:disabled,as:as,onClick:onClick,"data-e2e-test-id":itemDataE2eTestId},label)},popoverContent=_react.default.createElement(_SubThemeProvider.SubThemeProvider,{name:"unset"},_react.default.createElement(_Box.Box,{space:"m"},_react.default.createElement(StyledPopoverBody,{withMinWidth:hasPromptInputSlot},_react.default.createElement(_Stack.Stack,{space:"m"},hasOverflowItems&&_react.default.createElement(_Stack.Stack,{space:"xs"},overflowItems.map(item=>{let{key,label,disabled,as,"data-e2e-test-id":itemDataE2eTestId}=item;return _react.default.createElement(_PromptButton.PromptButton,{key:key,disabled:disabled,as:as,"data-e2e-test-id":itemDataE2eTestId,onClick:()=>handleOverflowItemClick(item)},label)})),slotProps?.promptInput&&_react.default.createElement(_PromptInput.PromptInput,{...slotProps.promptInput,size:"s",variant:"ai"}))))),overflowTrigger=shouldRenderOverflowTrigger?_react.default.createElement(_Popover.Popover,{content:popoverContent,role:"dialog",placement:"bottom-left",dismissOnOutsideClick:!0,hideArrow:!0,renderAsSheetOnMobile:!0,isVisible:isPopoverVisible,onVisibilityChange:setIsPopoverVisible},isStackLayout?_react.default.createElement(CustomFullWidthOverflowButton,{label:overflowButtonLabel,"aria-label":overflowButtonAriaLabel}):_react.default.createElement(_PromptButtonGroupOverflowButton.PromptButtonGroupOverflowButton,{label:overflowButtonLabel,"aria-label":overflowButtonAriaLabel})):null,visibleRow=isStackLayout?_react.default.createElement(_Stack.Stack,{space:"xs"},visibleItems.map(item=>renderVisibleItem(item,CustomFullWidthPromptButton)),overflowTrigger):_react.default.createElement(_Inline.Inline,{noWrap:!0,space:"xs",alignItems:alignItems,vAlignItems:"center"},visibleItems.map(item=>renderVisibleItem(item,_PromptButton.PromptButton)),overflowTrigger);return _react.default.createElement(StyledRoot,{ref:setContainerEl,"data-ds-id":"PromptButtonGroup","data-e2e-test-id":dataE2eTestId},measuredItemsRow,visibleRow)}
|
|
@@ -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:"
|
|
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)});
|
|
@@ -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:"
|
|
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:"
|
|
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))});
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import type { PromptButtonProps } from "../PromptButton/PromptButton";
|
|
3
3
|
import type { PromptInputProps } from "../PromptInput/PromptInput";
|
|
4
|
+
import type { MQ } from "../../types";
|
|
5
|
+
type PromptButtonGroupAlignment = "left" | "right" | "center";
|
|
6
|
+
type PromptButtonGroupAlignItems = MQ<PromptButtonGroupAlignment> | PromptButtonGroupAlignment;
|
|
4
7
|
export type PromptButtonGroupItem = Omit<PromptButtonProps, "variant" | "children" | "type"> & {
|
|
5
8
|
key: string;
|
|
6
9
|
label: string;
|
|
@@ -24,6 +27,8 @@ export type PromptButtonGroupSlotProps = {
|
|
|
24
27
|
};
|
|
25
28
|
export type PromptButtonGroupProps = Pick<PromptButtonProps, "variant"> & {
|
|
26
29
|
items: PromptButtonGroupItem[];
|
|
30
|
+
/** Horizontal alignment of the visible row. `"spaceBetween"` is disallowed — it would split the last pill from the overflow trigger. */
|
|
31
|
+
alignItems?: PromptButtonGroupAlignItems;
|
|
27
32
|
slotProps?: PromptButtonGroupSlotProps;
|
|
28
33
|
"data-e2e-test-id"?: string;
|
|
29
34
|
};
|
|
@@ -33,4 +38,5 @@ export type PromptButtonGroupProps = Pick<PromptButtonProps, "variant"> & {
|
|
|
33
38
|
* that cannot fit a single pill next to the overflow trigger, the group
|
|
34
39
|
* falls back to a vertical stack of full-width buttons.
|
|
35
40
|
*/
|
|
36
|
-
export declare function PromptButtonGroup({ items, variant, slotProps, "data-e2e-test-id": dataE2eTestId, }: PromptButtonGroupProps): React.ReactElement | null;
|
|
41
|
+
export declare function PromptButtonGroup({ items, variant, alignItems, slotProps, "data-e2e-test-id": dataE2eTestId, }: PromptButtonGroupProps): React.ReactElement | null;
|
|
42
|
+
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{useCallback,useEffect,useState}from"react";import styled from"@emotion/styled";import{Box}from"../Box/Box";import{Inline}from"../Inline/Inline";import{Popover}from"../Popover/Popover";import{PromptButton}from"../PromptButton/PromptButton";import{PromptInput}from"../PromptInput/PromptInput";import{Stack}from"../Stack/Stack";import{SubThemeProvider}from"../SubThemeProvider/SubThemeProvider";import{useIntl}from"../../shared/intl/useIntl";import{PromptButtonGroupOverflowButton}from"./PromptButtonGroupOverflowButton";import{useVisibleCount}from"./useVisibleCount";let StyledMeasurementLayer=styled("div",{target:"
|
|
1
|
+
import React,{useCallback,useEffect,useState}from"react";import styled from"@emotion/styled";import{Box}from"../Box/Box";import{Inline}from"../Inline/Inline";import{Popover}from"../Popover/Popover";import{PromptButton}from"../PromptButton/PromptButton";import{PromptInput}from"../PromptInput/PromptInput";import{Stack}from"../Stack/Stack";import{SubThemeProvider}from"../SubThemeProvider/SubThemeProvider";import{useIntl}from"../../shared/intl/useIntl";import{PromptButtonGroupOverflowButton}from"./PromptButtonGroupOverflowButton";import{useVisibleCount}from"./useVisibleCount";let StyledMeasurementLayer=styled("div",{target:"eb1xfcg0",label:"StyledMeasurementLayer"})({position:"absolute",top:0,left:0,width:0,height:0,overflow:"hidden",visibility:"hidden",pointerEvents:"none",whiteSpace:"nowrap"}),StyledRoot=styled("div",{target:"eb1xfcg1",label:"StyledRoot"})({position:"relative",width:"100%"}),CustomFullWidthPromptButton=styled(PromptButton,{target:"eb1xfcg2",label:"CustomFullWidthPromptButton"})({width:"100%"}),CustomFullWidthOverflowButton=styled(PromptButtonGroupOverflowButton,{target:"eb1xfcg3",label:"CustomFullWidthOverflowButton"})({width:"100%"}),StyledPopoverBody=styled("div",{shouldForwardProp:prop=>"withMinWidth"!==prop,target:"eb1xfcg4",label:"StyledPopoverBody"})(({theme,withMinWidth})=>({...withMinWidth&&{minWidth:`min(${theme.variables.size.dimension.promptButtonGroupPopover.minWidth}, 100%)`}}));export function PromptButtonGroup({items,variant,alignItems="left",slotProps,"data-e2e-test-id":dataE2eTestId}){let{formatMessage}=useIntl(),[isPopoverVisible,setIsPopoverVisible]=useState(!1),hasPromptInputSlot=slotProps?.promptInput!=null,{setContainerEl,setMeasurementEl,fit}=useVisibleCount({items,hasPromptInputSlot}),overflowButtonLabel=slotProps?.overflowButton?.label??formatMessage("PromptButtonGroup.OverflowButton.Label"),overflowButtonAriaLabel=slotProps?.overflowButton?.["aria-label"]??formatMessage("PromptButtonGroup.OverflowButton.AriaLabel"),clampedVisibleCount=Math.min(fit.visibleCount,items.length),visibleItems=items.slice(0,clampedVisibleCount),overflowItems=items.slice(clampedVisibleCount),hasOverflowItems=overflowItems.length>0,shouldRenderOverflowTrigger=hasOverflowItems||hasPromptInputSlot,isStackLayout="stack"===fit.layout;useEffect(()=>{shouldRenderOverflowTrigger&&0!==items.length||setIsPopoverVisible(!1)},[shouldRenderOverflowTrigger,items.length]);let handleOverflowItemClick=useCallback(item=>{setIsPopoverVisible(!1),item.onClick()},[]);if(0===items.length)return null;let measuredItemsRow=React.createElement(StyledMeasurementLayer,{ref:setMeasurementEl,"aria-hidden":"true","data-ds-id":"PromptButtonGroupMeasurement"},React.createElement(Inline,{noWrap:!0,space:"xs",vAlignItems:"center"},items.map(({key,label,leftIcon,disabled,as})=>React.createElement(PromptButton,{key:key,variant:variant,leftIcon:leftIcon,disabled:disabled,as:as},label)),React.createElement(PromptButtonGroupOverflowButton,{label:overflowButtonLabel}))),renderVisibleItem=(item,ButtonComponent)=>{let{key,label,leftIcon,disabled,as,onClick,"data-e2e-test-id":itemDataE2eTestId}=item;return React.createElement(ButtonComponent,{key:key,variant:variant,leftIcon:leftIcon,disabled:disabled,as:as,onClick:onClick,"data-e2e-test-id":itemDataE2eTestId},label)},popoverContent=React.createElement(SubThemeProvider,{name:"unset"},React.createElement(Box,{space:"m"},React.createElement(StyledPopoverBody,{withMinWidth:hasPromptInputSlot},React.createElement(Stack,{space:"m"},hasOverflowItems&&React.createElement(Stack,{space:"xs"},overflowItems.map(item=>{let{key,label,disabled,as,"data-e2e-test-id":itemDataE2eTestId}=item;return React.createElement(PromptButton,{key:key,disabled:disabled,as:as,"data-e2e-test-id":itemDataE2eTestId,onClick:()=>handleOverflowItemClick(item)},label)})),slotProps?.promptInput&&React.createElement(PromptInput,{...slotProps.promptInput,size:"s",variant:"ai"}))))),overflowTrigger=shouldRenderOverflowTrigger?React.createElement(Popover,{content:popoverContent,role:"dialog",placement:"bottom-left",dismissOnOutsideClick:!0,hideArrow:!0,renderAsSheetOnMobile:!0,isVisible:isPopoverVisible,onVisibilityChange:setIsPopoverVisible},isStackLayout?React.createElement(CustomFullWidthOverflowButton,{label:overflowButtonLabel,"aria-label":overflowButtonAriaLabel}):React.createElement(PromptButtonGroupOverflowButton,{label:overflowButtonLabel,"aria-label":overflowButtonAriaLabel})):null,visibleRow=isStackLayout?React.createElement(Stack,{space:"xs"},visibleItems.map(item=>renderVisibleItem(item,CustomFullWidthPromptButton)),overflowTrigger):React.createElement(Inline,{noWrap:!0,space:"xs",alignItems:alignItems,vAlignItems:"center"},visibleItems.map(item=>renderVisibleItem(item,PromptButton)),overflowTrigger);return React.createElement(StyledRoot,{ref:setContainerEl,"data-ds-id":"PromptButtonGroup","data-e2e-test-id":dataE2eTestId},measuredItemsRow,visibleRow)}
|
|
@@ -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:"
|
|
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:"
|
|
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)});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@amboss/design-system",
|
|
3
|
-
"version": "4.4.
|
|
3
|
+
"version": "4.4.3",
|
|
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",
|