@amboss/design-system 4.8.0 → 4.8.1
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 +10 -10
- package/build/cjs/components/PromptButtonGroup/PromptButtonGroup.js +1 -1
- package/build/cjs/components/PromptButtonGroup/useVisibleCount.d.ts +3 -2
- package/build/cjs/components/PromptButtonGroup/useVisibleCount.js +1 -1
- package/build/esm/components/PromptButtonGroup/PromptButtonGroup.d.ts +10 -10
- package/build/esm/components/PromptButtonGroup/PromptButtonGroup.js +1 -1
- package/build/esm/components/PromptButtonGroup/useVisibleCount.d.ts +3 -2
- package/build/esm/components/PromptButtonGroup/useVisibleCount.js +1 -1
- package/package.json +1 -1
|
@@ -1,9 +1,6 @@
|
|
|
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;
|
|
7
4
|
export type PromptButtonGroupItem = Omit<PromptButtonProps, "variant" | "children" | "type"> & {
|
|
8
5
|
key: string;
|
|
9
6
|
label: string;
|
|
@@ -27,16 +24,19 @@ export type PromptButtonGroupSlotProps = {
|
|
|
27
24
|
};
|
|
28
25
|
export type PromptButtonGroupProps = Pick<PromptButtonProps, "variant"> & {
|
|
29
26
|
items: PromptButtonGroupItem[];
|
|
30
|
-
/**
|
|
31
|
-
|
|
27
|
+
/**
|
|
28
|
+
* Ref to the element whose width the group fits into. The group measures
|
|
29
|
+
* that element rather than itself, so its own row shrink-wraps and the
|
|
30
|
+
* container is free to position it.
|
|
31
|
+
*/
|
|
32
|
+
containerRef: React.RefObject<HTMLElement | null>;
|
|
32
33
|
slotProps?: PromptButtonGroupSlotProps;
|
|
33
34
|
"data-e2e-test-id"?: string;
|
|
34
35
|
};
|
|
35
36
|
/**
|
|
36
37
|
* Row of PromptButtons that collapses overflow into a popover when the
|
|
37
|
-
*
|
|
38
|
-
* that cannot fit a single pill next to the overflow
|
|
39
|
-
* falls back to a vertical stack of full-width buttons.
|
|
38
|
+
* element passed as `containerRef` is too narrow to fit them all on one
|
|
39
|
+
* line. At widths that cannot fit a single pill next to the overflow
|
|
40
|
+
* trigger, the group falls back to a vertical stack of full-width buttons.
|
|
40
41
|
*/
|
|
41
|
-
export declare function PromptButtonGroup({ items, variant,
|
|
42
|
-
export {};
|
|
42
|
+
export declare function PromptButtonGroup({ items, variant, slotProps, containerRef, "data-e2e-test-id": dataE2eTestId, }: PromptButtonGroupProps): React.ReactElement | null;
|
|
@@ -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:"e3yo750",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:"e3yo751",label:"StyledRoot"})(({isStackLayout})=>({position:"relative",width:isStackLayout?"100%":"fit-content",maxWidth:"100%"})),CustomFullWidthPromptButton=(0,_styled.default)(_PromptButton.PromptButton,{target:"e3yo752",label:"CustomFullWidthPromptButton"})({width:"100%"}),CustomFullWidthOverflowButton=(0,_styled.default)(_PromptButtonGroupOverflowButton.PromptButtonGroupOverflowButton,{target:"e3yo753",label:"CustomFullWidthOverflowButton"})({width:"100%"}),StyledPopoverBody=(0,_styled.default)("div",{shouldForwardProp:prop=>"withMinWidth"!==prop,target:"e3yo754",label:"StyledPopoverBody"})(({theme,withMinWidth})=>({...withMinWidth&&{minWidth:`min(${theme.variables.size.dimension.promptButtonGroupPopover.minWidth}, 100%)`}}));function PromptButtonGroup({items,variant,slotProps,containerRef,"data-e2e-test-id":dataE2eTestId}){let{formatMessage}=(0,_useIntl.useIntl)(),[isPopoverVisible,setIsPopoverVisible]=(0,_react.useState)(!1),hasPromptInputSlot=slotProps?.promptInput!=null,{setMeasurementEl,fit}=(0,_useVisibleCount.useVisibleCount)({items,hasPromptInputSlot,containerRef}),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",vAlignItems:"center"},visibleItems.map(item=>renderVisibleItem(item,_PromptButton.PromptButton)),overflowTrigger);return _react.default.createElement(StyledRoot,{isStackLayout:isStackLayout,"data-ds-id":"PromptButtonGroup","data-e2e-test-id":dataE2eTestId},measuredItemsRow,visibleRow)}
|
|
@@ -1,13 +1,14 @@
|
|
|
1
|
+
import type { RefObject } from "react";
|
|
1
2
|
import type { ComputeVisibleCountResult } from "./computeVisibleCount";
|
|
2
3
|
import type { PromptButtonGroupItem } from "./PromptButtonGroup";
|
|
3
4
|
type UseVisibleCountParams = {
|
|
4
5
|
items: PromptButtonGroupItem[];
|
|
5
6
|
hasPromptInputSlot: boolean;
|
|
7
|
+
containerRef: RefObject<HTMLElement | null>;
|
|
6
8
|
};
|
|
7
9
|
type UseVisibleCountResult = {
|
|
8
|
-
setContainerEl: (el: HTMLDivElement | null) => void;
|
|
9
10
|
setMeasurementEl: (el: HTMLDivElement | null) => void;
|
|
10
11
|
fit: ComputeVisibleCountResult;
|
|
11
12
|
};
|
|
12
|
-
export declare const useVisibleCount: ({ items, hasPromptInputSlot, }: UseVisibleCountParams) => UseVisibleCountResult;
|
|
13
|
+
export declare const useVisibleCount: ({ items, hasPromptInputSlot, containerRef, }: UseVisibleCountParams) => UseVisibleCountResult;
|
|
13
14
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"useVisibleCount",{enumerable:!0,get:function(){return useVisibleCount}});const _react=require("react"),_computeVisibleCount=require("./computeVisibleCount"),_readMeasurement=require("./readMeasurement"),initialFit=itemCount=>({layout:"row",visibleCount:itemCount}),useVisibleCount=({items,hasPromptInputSlot})=>{let[containerEl,setContainerEl]=(0,_react.useState)(null),[measurementEl,setMeasurementEl]=(0,_react.useState)(null),[fit,setFit]=(0,_react.useState)(()=>initialFit(items.length)),recalculate=(0,_react.useCallback)(()=>{if(!containerEl||!measurementEl||0===items.length)return;let measurement=(0,_readMeasurement.readMeasurement)(measurementEl,items.length);if(!measurement)return;let containerWidth=containerEl.getBoundingClientRect().width,nextFit=(0,_computeVisibleCount.computeVisibleCount)({containerWidth,itemWidths:measurement.itemWidths,moreWidth:measurement.moreWidth,gap:measurement.gap,alwaysReserveMore:hasPromptInputSlot});setFit(current=>current.layout===nextFit.layout&¤t.visibleCount===nextFit.visibleCount?current:nextFit)},[containerEl,measurementEl,items,hasPromptInputSlot]);return(0,_react.useLayoutEffect)(recalculate,[recalculate]),(0,_react.useEffect)(()=>{if(!containerEl||"undefined"==typeof ResizeObserver||0===items.length)return;let observer=new ResizeObserver(()=>recalculate());return observer.observe(containerEl),()=>observer.disconnect()},[containerEl,recalculate,items.length]),{
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"useVisibleCount",{enumerable:!0,get:function(){return useVisibleCount}});const _react=require("react"),_computeVisibleCount=require("./computeVisibleCount"),_readMeasurement=require("./readMeasurement"),initialFit=itemCount=>({layout:"row",visibleCount:itemCount}),useVisibleCount=({items,hasPromptInputSlot,containerRef})=>{let[containerEl,setContainerEl]=(0,_react.useState)(null),[measurementEl,setMeasurementEl]=(0,_react.useState)(null),[fit,setFit]=(0,_react.useState)(()=>initialFit(items.length)),syncContainerEl=(0,_react.useCallback)(()=>{let el=containerRef.current;setContainerEl(current=>current===el?current:el)},[containerRef]);(0,_react.useLayoutEffect)(syncContainerEl);let recalculate=(0,_react.useCallback)(()=>{if(!containerEl||!measurementEl||0===items.length)return;let measurement=(0,_readMeasurement.readMeasurement)(measurementEl,items.length);if(!measurement)return;let containerWidth=containerEl.getBoundingClientRect().width,nextFit=(0,_computeVisibleCount.computeVisibleCount)({containerWidth,itemWidths:measurement.itemWidths,moreWidth:measurement.moreWidth,gap:measurement.gap,alwaysReserveMore:hasPromptInputSlot});setFit(current=>current.layout===nextFit.layout&¤t.visibleCount===nextFit.visibleCount?current:nextFit)},[containerEl,measurementEl,items,hasPromptInputSlot]);return(0,_react.useLayoutEffect)(recalculate,[recalculate]),(0,_react.useEffect)(()=>{if(!containerEl||"undefined"==typeof ResizeObserver||0===items.length)return;let observer=new ResizeObserver(()=>recalculate());return observer.observe(containerEl),()=>observer.disconnect()},[containerEl,recalculate,items.length]),{setMeasurementEl,fit}};
|
|
@@ -1,9 +1,6 @@
|
|
|
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;
|
|
7
4
|
export type PromptButtonGroupItem = Omit<PromptButtonProps, "variant" | "children" | "type"> & {
|
|
8
5
|
key: string;
|
|
9
6
|
label: string;
|
|
@@ -27,16 +24,19 @@ export type PromptButtonGroupSlotProps = {
|
|
|
27
24
|
};
|
|
28
25
|
export type PromptButtonGroupProps = Pick<PromptButtonProps, "variant"> & {
|
|
29
26
|
items: PromptButtonGroupItem[];
|
|
30
|
-
/**
|
|
31
|
-
|
|
27
|
+
/**
|
|
28
|
+
* Ref to the element whose width the group fits into. The group measures
|
|
29
|
+
* that element rather than itself, so its own row shrink-wraps and the
|
|
30
|
+
* container is free to position it.
|
|
31
|
+
*/
|
|
32
|
+
containerRef: React.RefObject<HTMLElement | null>;
|
|
32
33
|
slotProps?: PromptButtonGroupSlotProps;
|
|
33
34
|
"data-e2e-test-id"?: string;
|
|
34
35
|
};
|
|
35
36
|
/**
|
|
36
37
|
* Row of PromptButtons that collapses overflow into a popover when the
|
|
37
|
-
*
|
|
38
|
-
* that cannot fit a single pill next to the overflow
|
|
39
|
-
* falls back to a vertical stack of full-width buttons.
|
|
38
|
+
* element passed as `containerRef` is too narrow to fit them all on one
|
|
39
|
+
* line. At widths that cannot fit a single pill next to the overflow
|
|
40
|
+
* trigger, the group falls back to a vertical stack of full-width buttons.
|
|
40
41
|
*/
|
|
41
|
-
export declare function PromptButtonGroup({ items, variant,
|
|
42
|
-
export {};
|
|
42
|
+
export declare function PromptButtonGroup({ items, variant, slotProps, containerRef, "data-e2e-test-id": dataE2eTestId, }: PromptButtonGroupProps): React.ReactElement | null;
|
|
@@ -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:"e3yo750",label:"StyledMeasurementLayer"})({position:"absolute",top:0,left:0,width:0,height:0,overflow:"hidden",visibility:"hidden",pointerEvents:"none",whiteSpace:"nowrap"}),StyledRoot=styled("div",{target:"e3yo751",label:"StyledRoot"})(({isStackLayout})=>({position:"relative",width:isStackLayout?"100%":"fit-content",maxWidth:"100%"})),CustomFullWidthPromptButton=styled(PromptButton,{target:"e3yo752",label:"CustomFullWidthPromptButton"})({width:"100%"}),CustomFullWidthOverflowButton=styled(PromptButtonGroupOverflowButton,{target:"e3yo753",label:"CustomFullWidthOverflowButton"})({width:"100%"}),StyledPopoverBody=styled("div",{shouldForwardProp:prop=>"withMinWidth"!==prop,target:"e3yo754",label:"StyledPopoverBody"})(({theme,withMinWidth})=>({...withMinWidth&&{minWidth:`min(${theme.variables.size.dimension.promptButtonGroupPopover.minWidth}, 100%)`}}));export function PromptButtonGroup({items,variant,slotProps,containerRef,"data-e2e-test-id":dataE2eTestId}){let{formatMessage}=useIntl(),[isPopoverVisible,setIsPopoverVisible]=useState(!1),hasPromptInputSlot=slotProps?.promptInput!=null,{setMeasurementEl,fit}=useVisibleCount({items,hasPromptInputSlot,containerRef}),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",vAlignItems:"center"},visibleItems.map(item=>renderVisibleItem(item,PromptButton)),overflowTrigger);return React.createElement(StyledRoot,{isStackLayout:isStackLayout,"data-ds-id":"PromptButtonGroup","data-e2e-test-id":dataE2eTestId},measuredItemsRow,visibleRow)}
|
|
@@ -1,13 +1,14 @@
|
|
|
1
|
+
import type { RefObject } from "react";
|
|
1
2
|
import type { ComputeVisibleCountResult } from "./computeVisibleCount";
|
|
2
3
|
import type { PromptButtonGroupItem } from "./PromptButtonGroup";
|
|
3
4
|
type UseVisibleCountParams = {
|
|
4
5
|
items: PromptButtonGroupItem[];
|
|
5
6
|
hasPromptInputSlot: boolean;
|
|
7
|
+
containerRef: RefObject<HTMLElement | null>;
|
|
6
8
|
};
|
|
7
9
|
type UseVisibleCountResult = {
|
|
8
|
-
setContainerEl: (el: HTMLDivElement | null) => void;
|
|
9
10
|
setMeasurementEl: (el: HTMLDivElement | null) => void;
|
|
10
11
|
fit: ComputeVisibleCountResult;
|
|
11
12
|
};
|
|
12
|
-
export declare const useVisibleCount: ({ items, hasPromptInputSlot, }: UseVisibleCountParams) => UseVisibleCountResult;
|
|
13
|
+
export declare const useVisibleCount: ({ items, hasPromptInputSlot, containerRef, }: UseVisibleCountParams) => UseVisibleCountResult;
|
|
13
14
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useCallback,useEffect,useLayoutEffect,useState}from"react";import{computeVisibleCount}from"./computeVisibleCount";import{readMeasurement}from"./readMeasurement";let initialFit=itemCount=>({layout:"row",visibleCount:itemCount});export const useVisibleCount=({items,hasPromptInputSlot})=>{let[containerEl,setContainerEl]=useState(null),[measurementEl,setMeasurementEl]=useState(null),[fit,setFit]=useState(()=>initialFit(items.length)),recalculate=useCallback(()=>{if(!containerEl||!measurementEl||0===items.length)return;let measurement=readMeasurement(measurementEl,items.length);if(!measurement)return;let nextFit=computeVisibleCount({containerWidth:containerEl.getBoundingClientRect().width,itemWidths:measurement.itemWidths,moreWidth:measurement.moreWidth,gap:measurement.gap,alwaysReserveMore:hasPromptInputSlot});setFit(current=>current.layout===nextFit.layout&¤t.visibleCount===nextFit.visibleCount?current:nextFit)},[containerEl,measurementEl,items,hasPromptInputSlot]);return useLayoutEffect(recalculate,[recalculate]),useEffect(()=>{if(!containerEl||"undefined"==typeof ResizeObserver||0===items.length)return;let observer=new ResizeObserver(()=>recalculate());return observer.observe(containerEl),()=>observer.disconnect()},[containerEl,recalculate,items.length]),{
|
|
1
|
+
import{useCallback,useEffect,useLayoutEffect,useState}from"react";import{computeVisibleCount}from"./computeVisibleCount";import{readMeasurement}from"./readMeasurement";let initialFit=itemCount=>({layout:"row",visibleCount:itemCount});export const useVisibleCount=({items,hasPromptInputSlot,containerRef})=>{let[containerEl,setContainerEl]=useState(null),[measurementEl,setMeasurementEl]=useState(null),[fit,setFit]=useState(()=>initialFit(items.length));useLayoutEffect(useCallback(()=>{let el=containerRef.current;setContainerEl(current=>current===el?current:el)},[containerRef]));let recalculate=useCallback(()=>{if(!containerEl||!measurementEl||0===items.length)return;let measurement=readMeasurement(measurementEl,items.length);if(!measurement)return;let nextFit=computeVisibleCount({containerWidth:containerEl.getBoundingClientRect().width,itemWidths:measurement.itemWidths,moreWidth:measurement.moreWidth,gap:measurement.gap,alwaysReserveMore:hasPromptInputSlot});setFit(current=>current.layout===nextFit.layout&¤t.visibleCount===nextFit.visibleCount?current:nextFit)},[containerEl,measurementEl,items,hasPromptInputSlot]);return useLayoutEffect(recalculate,[recalculate]),useEffect(()=>{if(!containerEl||"undefined"==typeof ResizeObserver||0===items.length)return;let observer=new ResizeObserver(()=>recalculate());return observer.observe(containerEl),()=>observer.disconnect()},[containerEl,recalculate,items.length]),{setMeasurementEl,fit}};
|