@amboss/design-system 4.4.1 → 4.4.2
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/PromptButtonGroup/PromptButtonGroup.d.ts +7 -1
- package/build/cjs/components/PromptButtonGroup/PromptButtonGroup.js +1 -1
- package/build/esm/components/PromptButtonGroup/PromptButtonGroup.d.ts +7 -1
- package/build/esm/components/PromptButtonGroup/PromptButtonGroup.js +1 -1
- package/package.json +1 -1
|
@@ -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)}
|
|
@@ -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)}
|