@amboss/design-system 3.42.1 → 3.42.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/EntityList/BaseEntityList.d.ts +1 -1
- package/build/cjs/components/EntityList/BaseEntityList.js +1 -1
- package/build/cjs/components/EntityList/types.d.ts +1 -0
- package/build/cjs/components/EntityList/useFocusByIndex.d.ts +1 -0
- package/build/cjs/components/EntityList/useFocusByIndex.js +1 -1
- package/build/cjs/components/PromptInput/PromptInput.js +1 -1
- package/build/cjs/components/PromptInput/PromptTextArea.d.ts +2 -0
- package/build/cjs/components/PromptInput/PromptTextArea.js +1 -1
- package/build/esm/components/EntityList/BaseEntityList.d.ts +1 -1
- package/build/esm/components/EntityList/BaseEntityList.js +1 -1
- package/build/esm/components/EntityList/types.d.ts +1 -0
- package/build/esm/components/EntityList/useFocusByIndex.d.ts +1 -0
- package/build/esm/components/EntityList/useFocusByIndex.js +1 -1
- package/build/esm/components/PromptInput/PromptInput.js +1 -1
- package/build/esm/components/PromptInput/PromptTextArea.d.ts +2 -0
- package/build/esm/components/PromptInput/PromptTextArea.js +1 -1
- package/package.json +1 -1
|
@@ -17,6 +17,7 @@ export type PromptTextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> &
|
|
|
17
17
|
/** Collapsed variant showing only single row text area */
|
|
18
18
|
isNavBarVariant?: boolean;
|
|
19
19
|
hasLeftIcon?: boolean;
|
|
20
|
+
rows?: number;
|
|
20
21
|
};
|
|
21
22
|
export declare const PromptTextArea: React.ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & {
|
|
22
23
|
dataE2eTestId?: string;
|
|
@@ -30,4 +31,5 @@ export declare const PromptTextArea: React.ForwardRefExoticComponent<TextareaHTM
|
|
|
30
31
|
/** Collapsed variant showing only single row text area */
|
|
31
32
|
isNavBarVariant?: boolean;
|
|
32
33
|
hasLeftIcon?: boolean;
|
|
34
|
+
rows?: number;
|
|
33
35
|
} & React.RefAttributes<HTMLTextAreaElement>>;
|
|
@@ -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=>theme.variables.size.spacing.m,getPaddingVertical=theme=>theme.variables.size.spacing.m,StyledTextAreaContainer=(0,_styled.default)("label",{target:"e1kr3gwl0",label:"StyledTextAreaContainer"})(({theme,maxTextAreaHeight,isCollapsed,isNavBarVariant,hasLeftIcon})=>{let paddingTop=isNavBarVariant?theme.variables.size.spacing.xxs:getPaddingVertical(theme),paddingBottom=isNavBarVariant?theme.variables.size.spacing.xxs:getPaddingVertical(theme),paddingRight=theme.variables.size.spacing.xxl,basePaddingLeft=getPaddingHorizontal(theme),paddingLeft=hasLeftIcon?`calc(${basePaddingLeft} + ${theme.variables.size.dimension.icon.m} + ${theme.variables.size.spacing.xs})`:basePaddingLeft;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,...isCollapsed&&{backgroundColor:theme.values.color.canvas},"&::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,...isCollapsed&&{overflow:"hidden"},...(0,_getInputTextPlaceholder.getInputTextPlaceholder)({theme})},"textarea::placeholder":{whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden"},"&::after, textarea":{minWidth:"0",overflowWrap:"break-word",padding:`${paddingTop} ${paddingRight} ${paddingBottom} ${paddingLeft}`,...!isCollapsed&&{paddingBottom:getPaddingVertical(theme)}}}},"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvUHJvbXB0SW5wdXQvUHJvbXB0VGV4dEFyZWEudHN4Iiwic291cmNlcyI6WyJzcmMvY29tcG9uZW50cy9Qcm9tcHRJbnB1dC9Qcm9tcHRUZXh0QXJlYS50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBSZWZPYmplY3QsIFRleHRhcmVhSFRNTEF0dHJpYnV0ZXMgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmLCB1c2VFZmZlY3QgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB0eXBlIHsgVGhlbWUgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHR5cGUgeyBQcm9wZXJ0eSB9IGZyb20gXCJjc3N0eXBlXCI7XG5pbXBvcnQgeyBnZXRJbnB1dFRleHRQbGFjZWhvbGRlciB9IGZyb20gXCIuLi8uLi9zaGFyZWQvbWl4aW5zL1RleHRJbnB1dC9nZXRJbnB1dFRleHRQbGFjZWhvbGRlclwiO1xuaW1wb3J0IHsgU2NyZWVuUmVhZGVyVGV4dCB9IGZyb20gXCIuLi9VdGlsaXRpZXMvU2NyZWVuUmVhZGVyVGV4dC9TY3JlZW5SZWFkZXJUZXh0XCI7XG5pbXBvcnQgeyBnZXRBdXRvY29tcGxldGVMaXN0SWQgfSBmcm9tIFwiLi9BdXRvY29tcGxldGVMaXN0XCI7XG5pbXBvcnQgdHlwZSB7IEZsYXR0ZW5lZExpc3RJdGVtIH0gZnJvbSBcIi4vQ2F0ZWdvcnlMaXN0XCI7XG5cbmV4cG9ydCBjb25zdCBnZXRQYWRkaW5nSG9yaXpvbnRhbCA9ICh0aGVtZTogVGhlbWUpOiBzdHJpbmcgPT5cbiAgdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy5tO1xuZXhwb3J0IGNvbnN0IGdldFBhZGRpbmdWZXJ0aWNhbCA9ICh0aGVtZTogVGhlbWUpOiBzdHJpbmcgPT5cbiAgdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy5tO1xuXG5leHBvcnQgdHlwZSBQcm9tcHRUZXh0QXJlYVByb3BzID1cbiAgVGV4dGFyZWFIVE1MQXR0cmlidXRlczxIVE1MVGV4dEFyZWFFbGVtZW50PiAmIHtcbiAgICBkYXRhRTJlVGVzdElkPzogc3RyaW5nO1xuICAgIGxhYmVsOiBzdHJpbmc7XG4gICAgbmFtZTogc3RyaW5nO1xuICAgIHZhbHVlOiBzdHJpbmc7XG4gICAgbWF4VGV4dEFyZWFIZWlnaHQ/OiBQcm9wZXJ0eS5IZWlnaHQ7XG4gICAgc2VsZWN0ZWRMaXN0SXRlbT86IEZsYXR0ZW5lZExpc3RJdGVtO1xuICAgIGlzQXV0b2NvbXBsZXRlTGlzdE9wZW4/OiBib29sZWFuO1xuICAgIGlzQ29sbGFwc2VkPzogYm9vbGVhbjtcbiAgICAvKiogQ29sbGFwc2VkIHZhcmlhbnQgc2hvd2luZyBvbmx5IHNpbmdsZSByb3cgdGV4dCBhcmVhICovXG4gICAgaXNOYXZCYXJWYXJpYW50PzogYm9vbGVhbjtcbiAgICBoYXNMZWZ0SWNvbj86IGJvb2xlYW47XG4gIH07XG5cbnR5cGUgU3R5bGVkVGV4dEFyZWFDb250YWluZXJQcm9wcyA9IFBpY2s8XG4gIFByb21wdFRleHRBcmVhUHJvcHMsXG4gIFwibWF4VGV4dEFyZWFIZWlnaHRcIiB8IFwiaXNDb2xsYXBzZWRcIiB8IFwiaXNOYXZCYXJWYXJpYW50XCIgfCBcImhhc0xlZnRJY29uXCJcbj47XG5cbi8vIFRleHRhcmVhIGF1dG8gZ3JvdyBpbXBsZW1lbnRlZCBhY2NvcmRpbmcgdG8gaHR0cHM6Ly9jc3MtdHJpY2tzLmNvbS90aGUtY2xlYW5lc3QtdHJpY2stZm9yLWF1dG9ncm93aW5nLXRleHRhcmVhcy9cblxuY29uc3QgU3R5bGVkVGV4dEFyZWFDb250YWluZXIgPSBzdHlsZWQubGFiZWw8U3R5bGVkVGV4dEFyZWFDb250YWluZXJQcm9wcz4oXG4gICh7IHRoZW1lLCBtYXhUZXh0QXJlYUhlaWdodCwgaXNDb2xsYXBzZWQsIGlzTmF2QmFyVmFyaWFudCwgaGFzTGVmdEljb24gfSkgPT4ge1xuICAgIGNvbnN0IHBhZGRpbmdUb3AgPSBpc05hdkJhclZhcmlhbnRcbiAgICAgID8gdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy54eHNcbiAgICAgIDogZ2V0UGFkZGluZ1ZlcnRpY2FsKHRoZW1lKTtcbiAgICBjb25zdCBwYWRkaW5nQm90dG9tID0gaXNOYXZCYXJWYXJpYW50XG4gICAgICA/IHRoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcueHhzXG4gICAgICA6IGdldFBhZGRpbmdWZXJ0aWNhbCh0aGVtZSk7XG4gICAgY29uc3QgcGFkZGluZ1JpZ2h0ID0gdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy54eGw7XG4gICAgY29uc3QgYmFzZVBhZGRpbmdMZWZ0ID0gZ2V0UGFkZGluZ0hvcml6b250YWwodGhlbWUpO1xuICAgIGNvbnN0IHBhZGRpbmdMZWZ0ID0gaGFzTGVmdEljb25cbiAgICAgID8gYGNhbGMoJHtiYXNlUGFkZGluZ0xlZnR9ICsgJHt0aGVtZS52YXJpYWJsZXMuc2l6ZS5kaW1lbnNpb24uaWNvbi5tfSArICR7dGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy54c30pYFxuICAgICAgOiBiYXNlUGFkZGluZ0xlZnQ7XG5cbiAgICByZXR1cm4ge1xuICAgICAgZGlzcGxheTogXCJncmlkXCIsXG4gICAgICB2ZXJ0aWNhbEFsaWduOiBcInRvcFwiLFxuICAgICAgYWxpZ25JdGVtczogXCJzdHJldGNoXCIsXG4gICAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgICBib3JkZXJSYWRpdXM6IFwiaW5oZXJpdFwiLFxuICAgICAgcG9zaXRpb246IFwicmVsYXRpdmVcIixcbiAgICAgIGZvbnRGYW1pbHk6IHRoZW1lLnZhcmlhYmxlcy5mb250RmFtaWx5LmxhdG8sXG4gICAgICBmb250U2l6ZTogdGhlbWUudmFyaWFibGVzLnNpemUuZm9udC5tLFxuICAgICAgbGluZUhlaWdodDogdGhlbWUudmFyaWFibGVzLnNpemUubGluZUhlaWdodC54bCxcblxuICAgICAgLi4uKGlzQ29sbGFwc2VkICYmIHtcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS52YWx1ZXMuY29sb3IuY2FudmFzLFxuICAgICAgfSksXG5cbiAgICAgIC8vIFRleHRhcmVhIGdyb3dzIGR1ZSB0byA6OmFmdGVyIGdyb3dzXG4gICAgICAvLyBpZiB5b3UgbmVlZCB0byBtYW5pcHVsYXRlIHdpdGggc2l6ZSBvZiB0ZXh0YXJlYSwgeW91IG5lZWQgdG8gbWFuaXB1bGF0ZSB3aXRoIDo6YWZ0ZXIgYWxzb1xuICAgICAgXCImOjphZnRlclwiOiB7XG4gICAgICAgIGNvbnRlbnQ6IFwiYXR0cihkYXRhLXZhbHVlKSAnICdcIiwgLy8gdGhlIGVtcHR5IHNwYWNlIHByZXZlbnRzIHRleHRhcmVhIGp1bXAgb24gZ3Jvd1xuICAgICAgICBib3hTaXppbmc6IFwiYm9yZGVyLWJveFwiLFxuICAgICAgICBmb250RmFtaWx5OiB0aGVtZS52YXJpYWJsZXMuZm9udEZhbWlseS5sYXRvLFxuICAgICAgICBmb250U2l6ZTogdGhlbWUudmFyaWFibGVzLnNpemUuZm9udC5tLFxuICAgICAgICBncmlkQXJlYTogXCIxIC8gMVwiLFxuICAgICAgICB3aGl0ZVNwYWNlOiBcInByZS13cmFwXCIsXG4gICAgICAgIHZpc2liaWxpdHk6IFwiaGlkZGVuXCIsXG4gICAgICAgIG1heEhlaWdodDogbWF4VGV4dEFyZWFIZWlnaHQsXG4gICAgICB9LFxuXG4gICAgICB0ZXh0YXJlYToge1xuICAgICAgICBhbGw6IFwidW5zZXRcIixcbiAgICAgICAgcmVzaXplOiBcIm5vbmVcIixcbiAgICAgICAgZ3JpZEFyZWE6IFwiMSAvIDFcIixcbiAgICAgICAgY3Vyc29yOiBcInRleHRcIixcbiAgICAgICAgY29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci50ZXh0LnByaW1hcnkuZGVmYXVsdCxcbiAgICAgICAgLi4uKGlzQ29sbGFwc2VkICYmIHtcbiAgICAgICAgICBvdmVyZmxvdzogXCJoaWRkZW5cIixcbiAgICAgICAgfSksXG4gICAgICAgIC4uLmdldElucHV0VGV4dFBsYWNlaG9sZGVyKHsgdGhlbWUgfSksXG4gICAgICB9LFxuICAgICAgXCJ0ZXh0YXJlYTo6cGxhY2Vob2xkZXJcIjoge1xuICAgICAgICB3aGl0ZVNwYWNlOiBcIm5vd3JhcFwiLFxuICAgICAgICB0ZXh0T3ZlcmZsb3c6IFwiZWxsaXBzaXNcIixcbiAgICAgICAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG4gICAgICB9LFxuXG4gICAgICBcIiY6OmFmdGVyLCB0ZXh0YXJlYVwiOiB7XG4gICAgICAgIC8vIG1pbldpZHRoIGNvbWVzIHRvZ2V0aGVyIHdpdGggb3ZlcmZsb3dXcmFwIHRvIGFjaGlldmUgYnJlYWstd29yZFxuICAgICAgICAvLyBpdCBzaG91bGQgYmUgYXBwbGllZCBmb3IgOjphZnRlciBhbmQgdGV4dGFyZWFcbiAgICAgICAgbWluV2lkdGg6IFwiMFwiLFxuICAgICAgICBvdmVyZmxvd1dyYXA6IFwiYnJlYWstd29yZFwiLFxuICAgICAgICBwYWRkaW5nOiBgJHtwYWRkaW5nVG9wfSAke3BhZGRpbmdSaWdodH0gJHtwYWRkaW5nQm90dG9tfSAke3BhZGRpbmdMZWZ0fWAsXG5cbiAgICAgICAgLi4uKCFpc0NvbGxhcHNlZCAmJiB7XG4gICAgICAgICAgcGFkZGluZ0JvdHRvbTogZ2V0UGFkZGluZ1ZlcnRpY2FsKHRoZW1lKSxcbiAgICAgICAgfSksXG4gICAgICB9LFxuICAgIH07XG4gIH1cbik7XG5cbmV4cG9ydCBjb25zdCBQcm9tcHRUZXh0QXJlYSA9IGZvcndhcmRSZWYoXG4gIChcbiAgICB7XG4gICAgICBkYXRhRTJlVGVzdElkLFxuICAgICAgbGFiZWwsXG4gICAgICBuYW1lLFxuICAgICAgdmFsdWUsXG4gICAgICBwbGFjZWhvbGRlcixcbiAgICAgIG1heFRleHRBcmVhSGVpZ2h0ID0gXCIyMDBweFwiLFxuICAgICAgc2VsZWN0ZWRMaXN0SXRlbSxcbiAgICAgIGlzQXV0b2NvbXBsZXRlTGlzdE9wZW4sXG4gICAgICBpc0NvbGxhcHNlZCxcbiAgICAgIGlzTmF2QmFyVmFyaWFudCxcbiAgICAgIGhhc0xlZnRJY29uLFxuICAgICAgb25DaGFuZ2UsXG4gICAgICAuLi5yZXN0XG4gICAgfTogUHJvbXB0VGV4dEFyZWFQcm9wcyxcbiAgICByZWY6IFJlZk9iamVjdDxIVE1MVGV4dEFyZWFFbGVtZW50PlxuICApID0+IHtcbiAgICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgICAgY29uc3QgdGV4dEFyZWEgPSByZWYuY3VycmVudDtcblxuICAgICAgaWYgKGlzQ29sbGFwc2VkKSB7XG4gICAgICAgICh0ZXh0QXJlYS5wYXJlbnROb2RlIGFzIEhUTUxFbGVtZW50KS5kYXRhc2V0LnZhbHVlID0gXCJcIjtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIC8vIFNldCB0aGUgdmFsdWUgb2YgdGhlIDo6YWZ0ZXIgcHN1ZWRvIGVsZW1lbnQgc28gdGhhdCB0aGUgVGV4dEFyZWEgcmVzaXplcyBhY2NvcmRpbmdseSBhcyB0aGUgZ3JpZCBzdHJldGNoZXMuXG4gICAgICAgICh0ZXh0QXJlYS5wYXJlbnROb2RlIGFzIEhUTUxFbGVtZW50KS5kYXRhc2V0LnZhbHVlID0gdmFsdWU7XG4gICAgICB9XG4gICAgfSwgW3ZhbHVlLCByZWYsIGlzQ29sbGFwc2VkXSk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgPFN0eWxlZFRleHRBcmVhQ29udGFpbmVyXG4gICAgICAgIG1heFRleHRBcmVhSGVpZ2h0PXttYXhUZXh0QXJlYUhlaWdodH1cbiAgICAgICAgaXNDb2xsYXBzZWQ9e2lzQ29sbGFwc2VkfVxuICAgICAgICBpc05hdkJhclZhcmlhbnQ9e2lzTmF2QmFyVmFyaWFudH1cbiAgICAgICAgaGFzTGVmdEljb249e2hhc0xlZnRJY29ufVxuICAgICAgPlxuICAgICAgICA8U2NyZWVuUmVhZGVyVGV4dD57bGFiZWx9PC9TY3JlZW5SZWFkZXJUZXh0PlxuICAgICAgICA8dGV4dGFyZWFcbiAgICAgICAgICB7Li4ucmVzdH1cbiAgICAgICAgICBkYXRhLWUyZS10ZXN0LWlkPXtkYXRhRTJlVGVzdElkfVxuICAgICAgICAgIHJlZj17cmVmfVxuICAgICAgICAgIG5hbWU9e25hbWV9XG4gICAgICAgICAgdmFsdWU9e3ZhbHVlfVxuICAgICAgICAgIHBsYWNlaG9sZGVyPXtwbGFjZWhvbGRlcn1cbiAgICAgICAgICBvbkNoYW5nZT17b25DaGFuZ2V9XG4gICAgICAgICAgcm93cz17MX1cbiAgICAgICAgICByb2xlPVwiY29tYm9ib3hcIlxuICAgICAgICAgIGFyaWEtYXV0b2NvbXBsZXRlPVwibGlzdFwiXG4gICAgICAgICAgYXJpYS1jb250cm9scz17XG4gICAgICAgICAgICBpc0F1dG9jb21wbGV0ZUxpc3RPcGVuID8gZ2V0QXV0b2NvbXBsZXRlTGlzdElkKG5hbWUpIDogXCJcIlxuICAgICAgICAgIH1cbiAgICAgICAgICBhcmlhLWFjdGl2ZWRlc2NlbmRhbnQ9e3NlbGVjdGVkTGlzdEl0ZW0gPyBzZWxlY3RlZExpc3RJdGVtLmlkIDogXCJcIn1cbiAgICAgICAgICBhcmlhLWV4cGFuZGVkPXtpc0F1dG9jb21wbGV0ZUxpc3RPcGVufVxuICAgICAgICAvPlxuICAgICAgPC9TdHlsZWRUZXh0QXJlYUNvbnRhaW5lcj5cbiAgICApO1xuICB9XG4pO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFDZ0MifQ== */"),PromptTextArea=(0,_react.forwardRef)(({dataE2eTestId,label,name,value,placeholder,maxTextAreaHeight="200px",selectedListItem,isAutocompleteListOpen,isCollapsed,isNavBarVariant,hasLeftIcon,onChange,...rest},ref)=>((0,_react.useEffect)(()=>{let textArea=ref.current;isCollapsed?textArea.parentNode.dataset.value="":textArea.parentNode.dataset.value=value},[value,ref,isCollapsed]),_react.default.createElement(StyledTextAreaContainer,{maxTextAreaHeight:maxTextAreaHeight,isCollapsed:isCollapsed,isNavBarVariant:isNavBarVariant,hasLeftIcon:hasLeftIcon},_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:1,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=>theme.variables.size.spacing.m,getPaddingVertical=theme=>theme.variables.size.spacing.m,StyledTextAreaContainer=(0,_styled.default)("label",{target:"ezuj8j20",label:"StyledTextAreaContainer"})(({theme,maxTextAreaHeight,isCollapsed,isNavBarVariant,hasLeftIcon})=>{let paddingTop=isNavBarVariant?theme.variables.size.spacing.xxs:getPaddingVertical(theme),paddingBottom=isNavBarVariant?theme.variables.size.spacing.xxs:getPaddingVertical(theme),paddingRight=theme.variables.size.spacing.xxl,basePaddingLeft=getPaddingHorizontal(theme),paddingLeft=hasLeftIcon?`calc(${basePaddingLeft} + ${theme.variables.size.dimension.icon.m} + ${theme.variables.size.spacing.xs})`:basePaddingLeft;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,...isCollapsed&&{backgroundColor:theme.values.color.canvas},"&::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,...isCollapsed&&{overflow:"hidden"},...(0,_getInputTextPlaceholder.getInputTextPlaceholder)({theme})},"textarea::placeholder":{whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden"},"&::after, textarea":{minWidth:"0",overflowWrap:"break-word",padding:`${paddingTop} ${paddingRight} ${paddingBottom} ${paddingLeft}`,...!isCollapsed&&{paddingBottom:getPaddingVertical(theme)}}}},"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvUHJvbXB0SW5wdXQvUHJvbXB0VGV4dEFyZWEudHN4Iiwic291cmNlcyI6WyJzcmMvY29tcG9uZW50cy9Qcm9tcHRJbnB1dC9Qcm9tcHRUZXh0QXJlYS50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBSZWZPYmplY3QsIFRleHRhcmVhSFRNTEF0dHJpYnV0ZXMgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmLCB1c2VFZmZlY3QgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB0eXBlIHsgVGhlbWUgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHR5cGUgeyBQcm9wZXJ0eSB9IGZyb20gXCJjc3N0eXBlXCI7XG5pbXBvcnQgeyBnZXRJbnB1dFRleHRQbGFjZWhvbGRlciB9IGZyb20gXCIuLi8uLi9zaGFyZWQvbWl4aW5zL1RleHRJbnB1dC9nZXRJbnB1dFRleHRQbGFjZWhvbGRlclwiO1xuaW1wb3J0IHsgU2NyZWVuUmVhZGVyVGV4dCB9IGZyb20gXCIuLi9VdGlsaXRpZXMvU2NyZWVuUmVhZGVyVGV4dC9TY3JlZW5SZWFkZXJUZXh0XCI7XG5pbXBvcnQgeyBnZXRBdXRvY29tcGxldGVMaXN0SWQgfSBmcm9tIFwiLi9BdXRvY29tcGxldGVMaXN0XCI7XG5pbXBvcnQgdHlwZSB7IEZsYXR0ZW5lZExpc3RJdGVtIH0gZnJvbSBcIi4vQ2F0ZWdvcnlMaXN0XCI7XG5cbmV4cG9ydCBjb25zdCBnZXRQYWRkaW5nSG9yaXpvbnRhbCA9ICh0aGVtZTogVGhlbWUpOiBzdHJpbmcgPT5cbiAgdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy5tO1xuZXhwb3J0IGNvbnN0IGdldFBhZGRpbmdWZXJ0aWNhbCA9ICh0aGVtZTogVGhlbWUpOiBzdHJpbmcgPT5cbiAgdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy5tO1xuXG5leHBvcnQgdHlwZSBQcm9tcHRUZXh0QXJlYVByb3BzID1cbiAgVGV4dGFyZWFIVE1MQXR0cmlidXRlczxIVE1MVGV4dEFyZWFFbGVtZW50PiAmIHtcbiAgICBkYXRhRTJlVGVzdElkPzogc3RyaW5nO1xuICAgIGxhYmVsOiBzdHJpbmc7XG4gICAgbmFtZTogc3RyaW5nO1xuICAgIHZhbHVlOiBzdHJpbmc7XG4gICAgbWF4VGV4dEFyZWFIZWlnaHQ/OiBQcm9wZXJ0eS5IZWlnaHQ7XG4gICAgc2VsZWN0ZWRMaXN0SXRlbT86IEZsYXR0ZW5lZExpc3RJdGVtO1xuICAgIGlzQXV0b2NvbXBsZXRlTGlzdE9wZW4/OiBib29sZWFuO1xuICAgIGlzQ29sbGFwc2VkPzogYm9vbGVhbjtcbiAgICAvKiogQ29sbGFwc2VkIHZhcmlhbnQgc2hvd2luZyBvbmx5IHNpbmdsZSByb3cgdGV4dCBhcmVhICovXG4gICAgaXNOYXZCYXJWYXJpYW50PzogYm9vbGVhbjtcbiAgICBoYXNMZWZ0SWNvbj86IGJvb2xlYW47XG4gICAgcm93cz86IG51bWJlcjtcbiAgfTtcblxudHlwZSBTdHlsZWRUZXh0QXJlYUNvbnRhaW5lclByb3BzID0gUGljazxcbiAgUHJvbXB0VGV4dEFyZWFQcm9wcyxcbiAgXCJtYXhUZXh0QXJlYUhlaWdodFwiIHwgXCJpc0NvbGxhcHNlZFwiIHwgXCJpc05hdkJhclZhcmlhbnRcIiB8IFwiaGFzTGVmdEljb25cIlxuPjtcblxuLy8gVGV4dGFyZWEgYXV0byBncm93IGltcGxlbWVudGVkIGFjY29yZGluZyB0byBodHRwczovL2Nzcy10cmlja3MuY29tL3RoZS1jbGVhbmVzdC10cmljay1mb3ItYXV0b2dyb3dpbmctdGV4dGFyZWFzL1xuXG5jb25zdCBTdHlsZWRUZXh0QXJlYUNvbnRhaW5lciA9IHN0eWxlZC5sYWJlbDxTdHlsZWRUZXh0QXJlYUNvbnRhaW5lclByb3BzPihcbiAgKHsgdGhlbWUsIG1heFRleHRBcmVhSGVpZ2h0LCBpc0NvbGxhcHNlZCwgaXNOYXZCYXJWYXJpYW50LCBoYXNMZWZ0SWNvbiB9KSA9PiB7XG4gICAgY29uc3QgcGFkZGluZ1RvcCA9IGlzTmF2QmFyVmFyaWFudFxuICAgICAgPyB0aGVtZS52YXJpYWJsZXMuc2l6ZS5zcGFjaW5nLnh4c1xuICAgICAgOiBnZXRQYWRkaW5nVmVydGljYWwodGhlbWUpO1xuICAgIGNvbnN0IHBhZGRpbmdCb3R0b20gPSBpc05hdkJhclZhcmlhbnRcbiAgICAgID8gdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy54eHNcbiAgICAgIDogZ2V0UGFkZGluZ1ZlcnRpY2FsKHRoZW1lKTtcbiAgICBjb25zdCBwYWRkaW5nUmlnaHQgPSB0aGVtZS52YXJpYWJsZXMuc2l6ZS5zcGFjaW5nLnh4bDtcbiAgICBjb25zdCBiYXNlUGFkZGluZ0xlZnQgPSBnZXRQYWRkaW5nSG9yaXpvbnRhbCh0aGVtZSk7XG4gICAgY29uc3QgcGFkZGluZ0xlZnQgPSBoYXNMZWZ0SWNvblxuICAgICAgPyBgY2FsYygke2Jhc2VQYWRkaW5nTGVmdH0gKyAke3RoZW1lLnZhcmlhYmxlcy5zaXplLmRpbWVuc2lvbi5pY29uLm19ICsgJHt0aGVtZS52YXJpYWJsZXMuc2l6ZS5zcGFjaW5nLnhzfSlgXG4gICAgICA6IGJhc2VQYWRkaW5nTGVmdDtcblxuICAgIHJldHVybiB7XG4gICAgICBkaXNwbGF5OiBcImdyaWRcIixcbiAgICAgIHZlcnRpY2FsQWxpZ246IFwidG9wXCIsXG4gICAgICBhbGlnbkl0ZW1zOiBcInN0cmV0Y2hcIixcbiAgICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICAgIGJvcmRlclJhZGl1czogXCJpbmhlcml0XCIsXG4gICAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICAgICAgZm9udEZhbWlseTogdGhlbWUudmFyaWFibGVzLmZvbnRGYW1pbHkubGF0byxcbiAgICAgIGZvbnRTaXplOiB0aGVtZS52YXJpYWJsZXMuc2l6ZS5mb250Lm0sXG4gICAgICBsaW5lSGVpZ2h0OiB0aGVtZS52YXJpYWJsZXMuc2l6ZS5saW5lSGVpZ2h0LnhsLFxuXG4gICAgICAuLi4oaXNDb2xsYXBzZWQgJiYge1xuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci5jYW52YXMsXG4gICAgICB9KSxcblxuICAgICAgLy8gVGV4dGFyZWEgZ3Jvd3MgZHVlIHRvIDo6YWZ0ZXIgZ3Jvd3NcbiAgICAgIC8vIGlmIHlvdSBuZWVkIHRvIG1hbmlwdWxhdGUgd2l0aCBzaXplIG9mIHRleHRhcmVhLCB5b3UgbmVlZCB0byBtYW5pcHVsYXRlIHdpdGggOjphZnRlciBhbHNvXG4gICAgICBcIiY6OmFmdGVyXCI6IHtcbiAgICAgICAgY29udGVudDogXCJhdHRyKGRhdGEtdmFsdWUpICcgJ1wiLCAvLyB0aGUgZW1wdHkgc3BhY2UgcHJldmVudHMgdGV4dGFyZWEganVtcCBvbiBncm93XG4gICAgICAgIGJveFNpemluZzogXCJib3JkZXItYm94XCIsXG4gICAgICAgIGZvbnRGYW1pbHk6IHRoZW1lLnZhcmlhYmxlcy5mb250RmFtaWx5LmxhdG8sXG4gICAgICAgIGZvbnRTaXplOiB0aGVtZS52YXJpYWJsZXMuc2l6ZS5mb250Lm0sXG4gICAgICAgIGdyaWRBcmVhOiBcIjEgLyAxXCIsXG4gICAgICAgIHdoaXRlU3BhY2U6IFwicHJlLXdyYXBcIixcbiAgICAgICAgdmlzaWJpbGl0eTogXCJoaWRkZW5cIixcbiAgICAgICAgbWF4SGVpZ2h0OiBtYXhUZXh0QXJlYUhlaWdodCxcbiAgICAgIH0sXG5cbiAgICAgIHRleHRhcmVhOiB7XG4gICAgICAgIGFsbDogXCJ1bnNldFwiLFxuICAgICAgICByZXNpemU6IFwibm9uZVwiLFxuICAgICAgICBncmlkQXJlYTogXCIxIC8gMVwiLFxuICAgICAgICBjdXJzb3I6IFwidGV4dFwiLFxuICAgICAgICBjb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLnRleHQucHJpbWFyeS5kZWZhdWx0LFxuICAgICAgICAuLi4oaXNDb2xsYXBzZWQgJiYge1xuICAgICAgICAgIG92ZXJmbG93OiBcImhpZGRlblwiLFxuICAgICAgICB9KSxcbiAgICAgICAgLi4uZ2V0SW5wdXRUZXh0UGxhY2Vob2xkZXIoeyB0aGVtZSB9KSxcbiAgICAgIH0sXG4gICAgICBcInRleHRhcmVhOjpwbGFjZWhvbGRlclwiOiB7XG4gICAgICAgIHdoaXRlU3BhY2U6IFwibm93cmFwXCIsXG4gICAgICAgIHRleHRPdmVyZmxvdzogXCJlbGxpcHNpc1wiLFxuICAgICAgICBvdmVyZmxvdzogXCJoaWRkZW5cIixcbiAgICAgIH0sXG5cbiAgICAgIFwiJjo6YWZ0ZXIsIHRleHRhcmVhXCI6IHtcbiAgICAgICAgLy8gbWluV2lkdGggY29tZXMgdG9nZXRoZXIgd2l0aCBvdmVyZmxvd1dyYXAgdG8gYWNoaWV2ZSBicmVhay13b3JkXG4gICAgICAgIC8vIGl0IHNob3VsZCBiZSBhcHBsaWVkIGZvciA6OmFmdGVyIGFuZCB0ZXh0YXJlYVxuICAgICAgICBtaW5XaWR0aDogXCIwXCIsXG4gICAgICAgIG92ZXJmbG93V3JhcDogXCJicmVhay13b3JkXCIsXG4gICAgICAgIHBhZGRpbmc6IGAke3BhZGRpbmdUb3B9ICR7cGFkZGluZ1JpZ2h0fSAke3BhZGRpbmdCb3R0b219ICR7cGFkZGluZ0xlZnR9YCxcblxuICAgICAgICAuLi4oIWlzQ29sbGFwc2VkICYmIHtcbiAgICAgICAgICBwYWRkaW5nQm90dG9tOiBnZXRQYWRkaW5nVmVydGljYWwodGhlbWUpLFxuICAgICAgICB9KSxcbiAgICAgIH0sXG4gICAgfTtcbiAgfVxuKTtcblxuZXhwb3J0IGNvbnN0IFByb21wdFRleHRBcmVhID0gZm9yd2FyZFJlZihcbiAgKFxuICAgIHtcbiAgICAgIGRhdGFFMmVUZXN0SWQsXG4gICAgICBsYWJlbCxcbiAgICAgIG5hbWUsXG4gICAgICB2YWx1ZSxcbiAgICAgIHBsYWNlaG9sZGVyLFxuICAgICAgbWF4VGV4dEFyZWFIZWlnaHQgPSBcIjIwMHB4XCIsXG4gICAgICBzZWxlY3RlZExpc3RJdGVtLFxuICAgICAgaXNBdXRvY29tcGxldGVMaXN0T3BlbixcbiAgICAgIGlzQ29sbGFwc2VkLFxuICAgICAgaXNOYXZCYXJWYXJpYW50LFxuICAgICAgaGFzTGVmdEljb24sXG4gICAgICByb3dzID0gMSxcbiAgICAgIG9uQ2hhbmdlLFxuICAgICAgLi4ucmVzdFxuICAgIH06IFByb21wdFRleHRBcmVhUHJvcHMsXG4gICAgcmVmOiBSZWZPYmplY3Q8SFRNTFRleHRBcmVhRWxlbWVudD5cbiAgKSA9PiB7XG4gICAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAgIGNvbnN0IHRleHRBcmVhID0gcmVmLmN1cnJlbnQ7XG5cbiAgICAgIGlmIChpc0NvbGxhcHNlZCkge1xuICAgICAgICAodGV4dEFyZWEucGFyZW50Tm9kZSBhcyBIVE1MRWxlbWVudCkuZGF0YXNldC52YWx1ZSA9IFwiXCI7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICAvLyBTZXQgdGhlIHZhbHVlIG9mIHRoZSA6OmFmdGVyIHBzdWVkbyBlbGVtZW50IHNvIHRoYXQgdGhlIFRleHRBcmVhIHJlc2l6ZXMgYWNjb3JkaW5nbHkgYXMgdGhlIGdyaWQgc3RyZXRjaGVzLlxuICAgICAgICAodGV4dEFyZWEucGFyZW50Tm9kZSBhcyBIVE1MRWxlbWVudCkuZGF0YXNldC52YWx1ZSA9IHZhbHVlO1xuICAgICAgfVxuICAgIH0sIFt2YWx1ZSwgcmVmLCBpc0NvbGxhcHNlZF0pO1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDxTdHlsZWRUZXh0QXJlYUNvbnRhaW5lclxuICAgICAgICBtYXhUZXh0QXJlYUhlaWdodD17bWF4VGV4dEFyZWFIZWlnaHR9XG4gICAgICAgIGlzQ29sbGFwc2VkPXtpc0NvbGxhcHNlZH1cbiAgICAgICAgaXNOYXZCYXJWYXJpYW50PXtpc05hdkJhclZhcmlhbnR9XG4gICAgICAgIGhhc0xlZnRJY29uPXtoYXNMZWZ0SWNvbn1cbiAgICAgID5cbiAgICAgICAgPFNjcmVlblJlYWRlclRleHQ+e2xhYmVsfTwvU2NyZWVuUmVhZGVyVGV4dD5cbiAgICAgICAgPHRleHRhcmVhXG4gICAgICAgICAgey4uLnJlc3R9XG4gICAgICAgICAgZGF0YS1lMmUtdGVzdC1pZD17ZGF0YUUyZVRlc3RJZH1cbiAgICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgICBuYW1lPXtuYW1lfVxuICAgICAgICAgIHZhbHVlPXt2YWx1ZX1cbiAgICAgICAgICBwbGFjZWhvbGRlcj17cGxhY2Vob2xkZXJ9XG4gICAgICAgICAgb25DaGFuZ2U9e29uQ2hhbmdlfVxuICAgICAgICAgIHJvd3M9e3Jvd3N9XG4gICAgICAgICAgcm9sZT1cImNvbWJvYm94XCJcbiAgICAgICAgICBhcmlhLWF1dG9jb21wbGV0ZT1cImxpc3RcIlxuICAgICAgICAgIGFyaWEtY29udHJvbHM9e1xuICAgICAgICAgICAgaXNBdXRvY29tcGxldGVMaXN0T3BlbiA/IGdldEF1dG9jb21wbGV0ZUxpc3RJZChuYW1lKSA6IFwiXCJcbiAgICAgICAgICB9XG4gICAgICAgICAgYXJpYS1hY3RpdmVkZXNjZW5kYW50PXtzZWxlY3RlZExpc3RJdGVtID8gc2VsZWN0ZWRMaXN0SXRlbS5pZCA6IFwiXCJ9XG4gICAgICAgICAgYXJpYS1leHBhbmRlZD17aXNBdXRvY29tcGxldGVMaXN0T3Blbn1cbiAgICAgICAgLz5cbiAgICAgIDwvU3R5bGVkVGV4dEFyZWFDb250YWluZXI+XG4gICAgKTtcbiAgfVxuKTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzQ2dDIn0= */"),PromptTextArea=(0,_react.forwardRef)(({dataE2eTestId,label,name,value,placeholder,maxTextAreaHeight="200px",selectedListItem,isAutocompleteListOpen,isCollapsed,isNavBarVariant,hasLeftIcon,rows=1,onChange,...rest},ref)=>((0,_react.useEffect)(()=>{let textArea=ref.current;isCollapsed?textArea.parentNode.dataset.value="":textArea.parentNode.dataset.value=value},[value,ref,isCollapsed]),_react.default.createElement(StyledTextAreaContainer,{maxTextAreaHeight:maxTextAreaHeight,isCollapsed:isCollapsed,isNavBarVariant:isNavBarVariant,hasLeftIcon:hasLeftIcon},_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:"combobox","aria-autocomplete":"list","aria-controls":isAutocompleteListOpen?(0,_AutocompleteList.getAutocompleteListId)(name):"","aria-activedescendant":selectedListItem?selectedListItem.id:"","aria-expanded":isAutocompleteListOpen}))));
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import type { EntityListProps } from "./types";
|
|
3
|
-
export declare function BaseEntityList({ data, size, onClick, isSelectable, selectedIds, onSelectionChange, onSelectionToggle, renderRightContent, getLeftIconProps, hideBorder, filterFn, isVirtualized, maxHeight, ariaAttributes: deprecatedAriaAttributes, slotProps, role: roleProp, "data-e2e-test-id": dataE2eTestId, ...ariaAttributes }: EntityListProps): React.ReactElement;
|
|
3
|
+
export declare function BaseEntityList({ data, size, onClick, focusOnMount, isSelectable, selectedIds, onSelectionChange, onSelectionToggle, renderRightContent, getLeftIconProps, hideBorder, filterFn, isVirtualized, maxHeight, ariaAttributes: deprecatedAriaAttributes, slotProps, role: roleProp, "data-e2e-test-id": dataE2eTestId, ...ariaAttributes }: EntityListProps): React.ReactElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{useRef,useMemo,useCallback}from"react";import{StyledList}from"./styled-components";import{useKeyboard}from"../../shared/useKeyboard";import{Icon}from"../Icon/Icon";import{EntityListItem}from"./EntityListItem";import{VirtualizedEntityList}from"./VirtualizedEntityList";import{useFocusByIndex}from"./useFocusByIndex";let ITEM_ROLE_MAP={list:"listitem",listbox:"option",menu:"menuitem"};export function BaseEntityList({data,size="m",onClick,isSelectable,selectedIds,onSelectionChange,onSelectionToggle,renderRightContent,getLeftIconProps,hideBorder,filterFn,isVirtualized,maxHeight,ariaAttributes:deprecatedAriaAttributes,slotProps,role:roleProp,"data-e2e-test-id":dataE2eTestId,...ariaAttributes}){let rootRole,{itemRole,...rootAriaProps}=(rootRole=roleProp??"list",isSelectable&&(rootRole="listbox"),{role:rootRole,itemRole:ITEM_ROLE_MAP[rootRole],"aria-multiselectable":"listbox"===rootRole&&!!isSelectable||void 0}),ariaLabelExpand=slotProps?.toggle?.["aria-label-expand"]??deprecatedAriaAttributes?.ariaLabelExpand,ariaLabelCollapse=slotProps?.toggle?.["aria-label-collapse"]??deprecatedAriaAttributes?.ariaLabelCollapse,dataShown=useMemo(()=>data.length&&filterFn?data.filter(filterFn):data,[data,filterFn]),selectedIdsSet=useMemo(()=>new Set(selectedIds),[selectedIds]),listRef=useRef(null),{moveFocus,focusedIndex:selectedIndex}=useFocusByIndex({containerRef:listRef,nodeSelector:"data-list-item",data:useMemo(()=>dataShown.map(item=>({id:item.id,isDisabled:!!item.isDisabled})),[dataShown]),preventScroll:isVirtualized,initialIndex:useMemo(()=>{let index=dataShown.findIndex(item=>item.isActive);return -1!==index?index:0},[dataShown])});useKeyboard({ArrowDown:()=>{moveFocus(1)},ArrowUp:()=>{moveFocus(-1)}},listRef,isSelectable||!!onClick);let handleOnClick=useCallback(item=>{let{id}=item;if(isSelectable){let willBeSelected=!selectedIdsSet.has(id),newSelectedIdsSet=new Set(selectedIdsSet);willBeSelected?newSelectedIdsSet.add(id):newSelectedIdsSet.delete(id),onSelectionToggle?.(id,willBeSelected),onSelectionChange?.(Array.from(newSelectedIdsSet))}onClick?.(item)},[selectedIdsSet,onSelectionChange,onSelectionToggle,onClick,isSelectable]),renderEntityItem=index=>{let tabIndex,item=dataShown[index];if(!item)return null;let isLastItem=index===dataShown.length-1,isSelected=selectedIdsSet.has(item.id);
|
|
1
|
+
import React,{useEffect,useRef,useMemo,useCallback}from"react";import{StyledList}from"./styled-components";import{useKeyboard}from"../../shared/useKeyboard";import{Icon}from"../Icon/Icon";import{EntityListItem}from"./EntityListItem";import{VirtualizedEntityList}from"./VirtualizedEntityList";import{useFocusByIndex}from"./useFocusByIndex";let ITEM_ROLE_MAP={list:"listitem",listbox:"option",menu:"menuitem"};export function BaseEntityList({data,size="m",onClick,focusOnMount,isSelectable,selectedIds,onSelectionChange,onSelectionToggle,renderRightContent,getLeftIconProps,hideBorder,filterFn,isVirtualized,maxHeight,ariaAttributes:deprecatedAriaAttributes,slotProps,role:roleProp,"data-e2e-test-id":dataE2eTestId,...ariaAttributes}){let rootRole,{itemRole,...rootAriaProps}=(rootRole=roleProp??"list",isSelectable&&(rootRole="listbox"),{role:rootRole,itemRole:ITEM_ROLE_MAP[rootRole],"aria-multiselectable":"listbox"===rootRole&&!!isSelectable||void 0}),ariaLabelExpand=slotProps?.toggle?.["aria-label-expand"]??deprecatedAriaAttributes?.ariaLabelExpand,ariaLabelCollapse=slotProps?.toggle?.["aria-label-collapse"]??deprecatedAriaAttributes?.ariaLabelCollapse,dataShown=useMemo(()=>data.length&&filterFn?data.filter(filterFn):data,[data,filterFn]),selectedIdsSet=useMemo(()=>new Set(selectedIds),[selectedIds]),listRef=useRef(null),{moveFocus,focusItemAtIndex,focusedIndex:selectedIndex}=useFocusByIndex({containerRef:listRef,nodeSelector:"data-list-item",data:useMemo(()=>dataShown.map(item=>({id:item.id,isDisabled:!!item.isDisabled})),[dataShown]),preventScroll:isVirtualized,initialIndex:useMemo(()=>{let index=dataShown.findIndex(item=>item.isActive);return -1!==index?index:0},[dataShown])});useEffect(()=>{focusOnMount&&focusItemAtIndex(selectedIndex)},[]),useKeyboard({ArrowDown:()=>{moveFocus(1)},ArrowUp:()=>{moveFocus(-1)}},listRef,isSelectable||!!onClick);let handleOnClick=useCallback(item=>{let{id}=item;if(isSelectable){let willBeSelected=!selectedIdsSet.has(id),newSelectedIdsSet=new Set(selectedIdsSet);willBeSelected?newSelectedIdsSet.add(id):newSelectedIdsSet.delete(id),onSelectionToggle?.(id,willBeSelected),onSelectionChange?.(Array.from(newSelectedIdsSet))}onClick?.(item)},[selectedIdsSet,onSelectionChange,onSelectionToggle,onClick,isSelectable]),renderEntityItem=index=>{let tabIndex,item=dataShown[index];if(!item)return null;let isLastItem=index===dataShown.length-1,isSelected=selectedIdsSet.has(item.id);if(isSelectable||onClick){let defaultTabIndex=0===index&&!selectedIndex;tabIndex=!item.isDisabled&&(index===selectedIndex||defaultTabIndex)?0:-1}return React.createElement(EntityListItem,{key:item.id,"data-list-item":index,"aria-label":item["aria-label"]||item.label,size:size,hideBorder:hideBorder||isLastItem,isActive:item.isActive,isDisabled:item.isDisabled,isClickable:!!(onClick||selectedIds),isSelected:isSelectable?isSelected:void 0,role:itemRole,description:item.description,onSpaceEnterPress:()=>handleOnClick(item),tabIndex:tabIndex,ariaLabelExpand:ariaLabelExpand,ariaLabelCollapse:ariaLabelCollapse,onClick:e=>{e.target.closest("label")||handleOnClick(item)},checkboxProps:isSelectable&&{name:"list-checkbox",size:"s",checked:isSelected,onChange:()=>handleOnClick(item)},renderLabel:()=>item.label,renderLeft:getLeftIconProps?({textSize})=>React.createElement(Icon,{...getLeftIconProps(item),size:textSize}):null,renderRight:renderRightProps=>renderRightContent?renderRightContent({...renderRightProps,...item}):void 0})};return React.createElement("div",{ref:listRef},isVirtualized&&maxHeight?React.createElement(VirtualizedEntityList,{id:dataE2eTestId,maxHeight:maxHeight,size:size,dataShown:dataShown,selectedIndex:selectedIndex,itemTemplate:renderEntityItem,"data-e2e-test-id":dataE2eTestId,...rootAriaProps,...ariaAttributes}):React.createElement(StyledList,{size:size,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"EntityList",...rootAriaProps,...ariaAttributes},dataShown.map((_item,i)=>renderEntityItem(i))))}
|
|
@@ -44,6 +44,7 @@ export type BaseEntityListProps = {
|
|
|
44
44
|
* @param ListNode[].customProp - Your data in order to use it custom "render" functions
|
|
45
45
|
*/
|
|
46
46
|
data: ListNode[];
|
|
47
|
+
focusOnMount?: boolean;
|
|
47
48
|
size?: ListSize;
|
|
48
49
|
selectedIds?: string[];
|
|
49
50
|
/** Allows selection of items with checkboxes. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useCallback,useEffect,useRef,useState}from"react";let getNextEnabledIndex=(items,startIndex,direction)=>{let index=startIndex+direction;for(;index>=0&&index<items.length;){if(!items[index]?.isDisabled)return index;index+=direction}return -1},getClosestEnabledIndex=(items,currentIndex)=>{if(!items.length)return -1;if(currentIndex>=0&¤tIndex<items.length&&!items[currentIndex]?.isDisabled)return currentIndex;let forward=getNextEnabledIndex(items,currentIndex,1);return -1!==forward?forward:getNextEnabledIndex(items,currentIndex,-1)};export const useFocusByIndex=({data,containerRef,nodeSelector,preventScroll=!1,initialIndex=0})=>{let[focusedIndex,setFocusedIndex]=useState(()=>getClosestEnabledIndex(data,initialIndex)),focusedIndexRef=useRef(focusedIndex);useEffect(()=>{focusedIndexRef.current=focusedIndex},[focusedIndex]);let focusItemAtIndex=useCallback(index=>{if(-1===index)return;let container=containerRef.current;if(!container)return;let element=container.querySelector(`[${nodeSelector}="${index}"]`);!element||data[index]?.isDisabled||(element.focus({preventScroll}),setFocusedIndex(index))},[containerRef,data,nodeSelector,preventScroll]);return useEffect(()=>{let container=containerRef.current;if(!container)return;let handleContainerFocus=()=>{let nextIndex=getClosestEnabledIndex(data,focusedIndexRef.current);-1!==nextIndex&&focusItemAtIndex(nextIndex)},handleFocusIn=event=>{let target=event.target;if(!container.contains(target))return;let attributeValue=target.getAttribute(nodeSelector);if(null===attributeValue)return;let parsedIndex=Number(attributeValue);Number.isNaN(parsedIndex)||data[parsedIndex]?.isDisabled||setFocusedIndex(parsedIndex)};return container.addEventListener("focus",handleContainerFocus),container.addEventListener("focusin",handleFocusIn),()=>{container.removeEventListener("focus",handleContainerFocus),container.removeEventListener("focusin",handleFocusIn)}},[containerRef,data,focusItemAtIndex,nodeSelector]),{moveFocus:useCallback(offset=>{let nextIndex;if(!data.length)return;let direction=offset>0?1:-1,remainingSteps=Math.abs(offset);for(nextIndex=-1===focusedIndex?direction>0?-1:data.length:focusedIndex;remainingSteps>0;){let candidate=getNextEnabledIndex(data,nextIndex,direction);if(-1===candidate)return;nextIndex=candidate,remainingSteps-=1}nextIndex!==focusedIndex&&focusItemAtIndex(nextIndex)},[data,focusItemAtIndex,focusedIndex]),focusedIndex}};
|
|
1
|
+
import{useCallback,useEffect,useRef,useState}from"react";let getNextEnabledIndex=(items,startIndex,direction)=>{let index=startIndex+direction;for(;index>=0&&index<items.length;){if(!items[index]?.isDisabled)return index;index+=direction}return -1},getClosestEnabledIndex=(items,currentIndex)=>{if(!items.length)return -1;if(currentIndex>=0&¤tIndex<items.length&&!items[currentIndex]?.isDisabled)return currentIndex;let forward=getNextEnabledIndex(items,currentIndex,1);return -1!==forward?forward:getNextEnabledIndex(items,currentIndex,-1)};export const useFocusByIndex=({data,containerRef,nodeSelector,preventScroll=!1,initialIndex=0})=>{let[focusedIndex,setFocusedIndex]=useState(()=>getClosestEnabledIndex(data,initialIndex)),focusedIndexRef=useRef(focusedIndex);useEffect(()=>{focusedIndexRef.current=focusedIndex},[focusedIndex]);let focusItemAtIndex=useCallback(index=>{if(-1===index)return;let container=containerRef.current;if(!container)return;let element=container.querySelector(`[${nodeSelector}="${index}"]`);!element||data[index]?.isDisabled||(element.focus({preventScroll}),setFocusedIndex(index))},[containerRef,data,nodeSelector,preventScroll]);return useEffect(()=>{let container=containerRef.current;if(!container)return;let handleContainerFocus=()=>{let nextIndex=getClosestEnabledIndex(data,focusedIndexRef.current);-1!==nextIndex&&focusItemAtIndex(nextIndex)},handleFocusIn=event=>{let target=event.target;if(!container.contains(target))return;let attributeValue=target.getAttribute(nodeSelector);if(null===attributeValue)return;let parsedIndex=Number(attributeValue);Number.isNaN(parsedIndex)||data[parsedIndex]?.isDisabled||setFocusedIndex(parsedIndex)};return container.addEventListener("focus",handleContainerFocus),container.addEventListener("focusin",handleFocusIn),()=>{container.removeEventListener("focus",handleContainerFocus),container.removeEventListener("focusin",handleFocusIn)}},[containerRef,data,focusItemAtIndex,nodeSelector]),{moveFocus:useCallback(offset=>{let nextIndex;if(!data.length)return;let direction=offset>0?1:-1,remainingSteps=Math.abs(offset);for(nextIndex=-1===focusedIndex?direction>0?-1:data.length:focusedIndex;remainingSteps>0;){let candidate=getNextEnabledIndex(data,nextIndex,direction);if(-1===candidate)return;nextIndex=candidate,remainingSteps-=1}nextIndex!==focusedIndex&&focusItemAtIndex(nextIndex)},[data,focusItemAtIndex,focusedIndex]),focusedIndex,focusItemAtIndex}};
|