@chayns-components/core 5.0.58 → 5.0.60
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/AGENTS.md +37 -0
- package/lib/cjs/components/multi-action-button/MultiActionButton.js +133 -32
- package/lib/cjs/components/multi-action-button/MultiActionButton.js.map +1 -1
- package/lib/cjs/components/multi-action-button/MultiActionButton.styles.js +16 -2
- package/lib/cjs/components/multi-action-button/MultiActionButton.styles.js.map +1 -1
- package/lib/cjs/components/multi-action-button/MultiActionButton.types.js.map +1 -1
- package/lib/cjs/components/multi-action-button/MultiActionButton.utils.js +85 -1
- package/lib/cjs/components/multi-action-button/MultiActionButton.utils.js.map +1 -1
- package/lib/cjs/hooks/container.js +1 -2
- package/lib/cjs/hooks/container.js.map +1 -1
- package/lib/esm/components/multi-action-button/MultiActionButton.js +135 -34
- package/lib/esm/components/multi-action-button/MultiActionButton.js.map +1 -1
- package/lib/esm/components/multi-action-button/MultiActionButton.styles.js +16 -2
- package/lib/esm/components/multi-action-button/MultiActionButton.styles.js.map +1 -1
- package/lib/esm/components/multi-action-button/MultiActionButton.types.js.map +1 -1
- package/lib/esm/components/multi-action-button/MultiActionButton.utils.js +81 -0
- package/lib/esm/components/multi-action-button/MultiActionButton.utils.js.map +1 -1
- package/lib/esm/hooks/container.js +1 -2
- package/lib/esm/hooks/container.js.map +1 -1
- package/lib/types/components/multi-action-button/MultiActionButton.styles.d.ts +1 -0
- package/lib/types/components/multi-action-button/MultiActionButton.types.d.ts +8 -0
- package/lib/types/components/multi-action-button/MultiActionButton.utils.d.ts +22 -0
- package/lib/types/hooks/container.d.ts +1 -2
- package/package.json +2 -2
|
@@ -1,3 +1,84 @@
|
|
|
1
|
+
export let MultiActionButtonAutoCollapseMode = /*#__PURE__*/function (MultiActionButtonAutoCollapseMode) {
|
|
2
|
+
MultiActionButtonAutoCollapseMode["Expanded"] = "expanded";
|
|
3
|
+
MultiActionButtonAutoCollapseMode["IconsOnly"] = "icons-only";
|
|
4
|
+
MultiActionButtonAutoCollapseMode["PrimaryOnly"] = "primary-only";
|
|
5
|
+
return MultiActionButtonAutoCollapseMode;
|
|
6
|
+
}({});
|
|
7
|
+
const AUTO_COLLAPSE_HYSTERESIS_PX = 12;
|
|
8
|
+
export const MULTI_ACTION_BUTTON_LABEL_GAP_PX = 6;
|
|
9
|
+
export const MULTI_ACTION_BUTTON_LABEL_RIGHT_PADDING_PX = 18;
|
|
10
|
+
export const MULTI_ACTION_BUTTON_SEPARATOR_WIDTH_PX = 1;
|
|
11
|
+
export const getMinimumMultiActionButtonIconsWidth = ({
|
|
12
|
+
hasSecondaryAction,
|
|
13
|
+
height
|
|
14
|
+
}) => {
|
|
15
|
+
const minimumPrimaryActionWidth = height;
|
|
16
|
+
if (!hasSecondaryAction) {
|
|
17
|
+
return minimumPrimaryActionWidth;
|
|
18
|
+
}
|
|
19
|
+
return minimumPrimaryActionWidth * 2 + 1;
|
|
20
|
+
};
|
|
21
|
+
export const getMinimumPrimaryLabelVisibleWidth = ({
|
|
22
|
+
hasVisibleSecondaryAction,
|
|
23
|
+
height
|
|
24
|
+
}) => {
|
|
25
|
+
const minimumPrimaryIconWidth = height;
|
|
26
|
+
const minimumPrimaryLabelWidth = MULTI_ACTION_BUTTON_LABEL_GAP_PX + MULTI_ACTION_BUTTON_LABEL_RIGHT_PADDING_PX;
|
|
27
|
+
const minimumSecondaryWidth = hasVisibleSecondaryAction ? height + MULTI_ACTION_BUTTON_SEPARATOR_WIDTH_PX : 0;
|
|
28
|
+
return minimumPrimaryIconWidth + minimumPrimaryLabelWidth + minimumSecondaryWidth;
|
|
29
|
+
};
|
|
30
|
+
export const getMultiActionButtonAutoCollapseMode = ({
|
|
31
|
+
availableWidth,
|
|
32
|
+
expandedWidth,
|
|
33
|
+
hasSecondaryAction,
|
|
34
|
+
height,
|
|
35
|
+
previousMode = MultiActionButtonAutoCollapseMode.Expanded
|
|
36
|
+
}) => {
|
|
37
|
+
if (!availableWidth || expandedWidth <= 0) {
|
|
38
|
+
return MultiActionButtonAutoCollapseMode.Expanded;
|
|
39
|
+
}
|
|
40
|
+
const minimumIconsWidth = getMinimumMultiActionButtonIconsWidth({
|
|
41
|
+
hasSecondaryAction,
|
|
42
|
+
height
|
|
43
|
+
});
|
|
44
|
+
if (!hasSecondaryAction) {
|
|
45
|
+
if (availableWidth < expandedWidth) {
|
|
46
|
+
return MultiActionButtonAutoCollapseMode.PrimaryOnly;
|
|
47
|
+
}
|
|
48
|
+
if (previousMode === MultiActionButtonAutoCollapseMode.PrimaryOnly && availableWidth < expandedWidth + AUTO_COLLAPSE_HYSTERESIS_PX) {
|
|
49
|
+
return MultiActionButtonAutoCollapseMode.PrimaryOnly;
|
|
50
|
+
}
|
|
51
|
+
return MultiActionButtonAutoCollapseMode.Expanded;
|
|
52
|
+
}
|
|
53
|
+
if (previousMode === MultiActionButtonAutoCollapseMode.Expanded) {
|
|
54
|
+
if (availableWidth < minimumIconsWidth) {
|
|
55
|
+
return MultiActionButtonAutoCollapseMode.PrimaryOnly;
|
|
56
|
+
}
|
|
57
|
+
if (availableWidth < expandedWidth) {
|
|
58
|
+
return MultiActionButtonAutoCollapseMode.IconsOnly;
|
|
59
|
+
}
|
|
60
|
+
return MultiActionButtonAutoCollapseMode.Expanded;
|
|
61
|
+
}
|
|
62
|
+
if (previousMode === MultiActionButtonAutoCollapseMode.IconsOnly) {
|
|
63
|
+
if (availableWidth < minimumIconsWidth) {
|
|
64
|
+
return MultiActionButtonAutoCollapseMode.PrimaryOnly;
|
|
65
|
+
}
|
|
66
|
+
if (availableWidth < expandedWidth + AUTO_COLLAPSE_HYSTERESIS_PX) {
|
|
67
|
+
return MultiActionButtonAutoCollapseMode.IconsOnly;
|
|
68
|
+
}
|
|
69
|
+
return MultiActionButtonAutoCollapseMode.Expanded;
|
|
70
|
+
}
|
|
71
|
+
if (availableWidth < minimumIconsWidth + AUTO_COLLAPSE_HYSTERESIS_PX) {
|
|
72
|
+
return MultiActionButtonAutoCollapseMode.PrimaryOnly;
|
|
73
|
+
}
|
|
74
|
+
if (availableWidth < expandedWidth) {
|
|
75
|
+
return MultiActionButtonAutoCollapseMode.IconsOnly;
|
|
76
|
+
}
|
|
77
|
+
if (availableWidth < expandedWidth + AUTO_COLLAPSE_HYSTERESIS_PX) {
|
|
78
|
+
return MultiActionButtonAutoCollapseMode.IconsOnly;
|
|
79
|
+
}
|
|
80
|
+
return MultiActionButtonAutoCollapseMode.Expanded;
|
|
81
|
+
};
|
|
1
82
|
export const getSecondaryContextMenuTriggerStyle = ({
|
|
2
83
|
height,
|
|
3
84
|
isCollapsed,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiActionButton.utils.js","names":["
|
|
1
|
+
{"version":3,"file":"MultiActionButton.utils.js","names":["MultiActionButtonAutoCollapseMode","AUTO_COLLAPSE_HYSTERESIS_PX","MULTI_ACTION_BUTTON_LABEL_GAP_PX","MULTI_ACTION_BUTTON_LABEL_RIGHT_PADDING_PX","MULTI_ACTION_BUTTON_SEPARATOR_WIDTH_PX","getMinimumMultiActionButtonIconsWidth","hasSecondaryAction","height","minimumPrimaryActionWidth","getMinimumPrimaryLabelVisibleWidth","hasVisibleSecondaryAction","minimumPrimaryIconWidth","minimumPrimaryLabelWidth","minimumSecondaryWidth","getMultiActionButtonAutoCollapseMode","availableWidth","expandedWidth","previousMode","Expanded","minimumIconsWidth","PrimaryOnly","IconsOnly","getSecondaryContextMenuTriggerStyle","isCollapsed","isExpanded","shouldUseContentWidth","display","minWidth","opacity","pointerEvents","width","flex"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.utils.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nexport enum MultiActionButtonAutoCollapseMode {\n Expanded = 'expanded',\n IconsOnly = 'icons-only',\n PrimaryOnly = 'primary-only',\n}\n\nconst AUTO_COLLAPSE_HYSTERESIS_PX = 12;\nexport const MULTI_ACTION_BUTTON_LABEL_GAP_PX = 6;\nexport const MULTI_ACTION_BUTTON_LABEL_RIGHT_PADDING_PX = 18;\nexport const MULTI_ACTION_BUTTON_SEPARATOR_WIDTH_PX = 1;\n\nexport interface GetMultiActionButtonAutoCollapseModeOptions {\n availableWidth?: number;\n expandedWidth: number;\n hasSecondaryAction: boolean;\n height: number;\n previousMode?: MultiActionButtonAutoCollapseMode;\n}\n\nexport const getMinimumMultiActionButtonIconsWidth = ({\n hasSecondaryAction,\n height,\n}: Pick<GetMultiActionButtonAutoCollapseModeOptions, 'hasSecondaryAction' | 'height'>): number => {\n const minimumPrimaryActionWidth = height;\n\n if (!hasSecondaryAction) {\n return minimumPrimaryActionWidth;\n }\n\n return minimumPrimaryActionWidth * 2 + 1;\n};\n\nexport interface GetMinimumPrimaryLabelVisibleWidthOptions {\n hasVisibleSecondaryAction: boolean;\n height: number;\n}\n\nexport const getMinimumPrimaryLabelVisibleWidth = ({\n hasVisibleSecondaryAction,\n height,\n}: GetMinimumPrimaryLabelVisibleWidthOptions): number => {\n const minimumPrimaryIconWidth = height;\n const minimumPrimaryLabelWidth =\n MULTI_ACTION_BUTTON_LABEL_GAP_PX + MULTI_ACTION_BUTTON_LABEL_RIGHT_PADDING_PX;\n const minimumSecondaryWidth = hasVisibleSecondaryAction\n ? height + MULTI_ACTION_BUTTON_SEPARATOR_WIDTH_PX\n : 0;\n\n return minimumPrimaryIconWidth + minimumPrimaryLabelWidth + minimumSecondaryWidth;\n};\n\nexport const getMultiActionButtonAutoCollapseMode = ({\n availableWidth,\n expandedWidth,\n hasSecondaryAction,\n height,\n previousMode = MultiActionButtonAutoCollapseMode.Expanded,\n}: GetMultiActionButtonAutoCollapseModeOptions): MultiActionButtonAutoCollapseMode => {\n if (!availableWidth || expandedWidth <= 0) {\n return MultiActionButtonAutoCollapseMode.Expanded;\n }\n\n const minimumIconsWidth = getMinimumMultiActionButtonIconsWidth({\n hasSecondaryAction,\n height,\n });\n\n if (!hasSecondaryAction) {\n if (availableWidth < expandedWidth) {\n return MultiActionButtonAutoCollapseMode.PrimaryOnly;\n }\n\n if (\n previousMode === MultiActionButtonAutoCollapseMode.PrimaryOnly &&\n availableWidth < expandedWidth + AUTO_COLLAPSE_HYSTERESIS_PX\n ) {\n return MultiActionButtonAutoCollapseMode.PrimaryOnly;\n }\n\n return MultiActionButtonAutoCollapseMode.Expanded;\n }\n\n if (previousMode === MultiActionButtonAutoCollapseMode.Expanded) {\n if (availableWidth < minimumIconsWidth) {\n return MultiActionButtonAutoCollapseMode.PrimaryOnly;\n }\n\n if (availableWidth < expandedWidth) {\n return MultiActionButtonAutoCollapseMode.IconsOnly;\n }\n\n return MultiActionButtonAutoCollapseMode.Expanded;\n }\n\n if (previousMode === MultiActionButtonAutoCollapseMode.IconsOnly) {\n if (availableWidth < minimumIconsWidth) {\n return MultiActionButtonAutoCollapseMode.PrimaryOnly;\n }\n\n if (availableWidth < expandedWidth + AUTO_COLLAPSE_HYSTERESIS_PX) {\n return MultiActionButtonAutoCollapseMode.IconsOnly;\n }\n\n return MultiActionButtonAutoCollapseMode.Expanded;\n }\n\n if (availableWidth < minimumIconsWidth + AUTO_COLLAPSE_HYSTERESIS_PX) {\n return MultiActionButtonAutoCollapseMode.PrimaryOnly;\n }\n\n if (availableWidth < expandedWidth) {\n return MultiActionButtonAutoCollapseMode.IconsOnly;\n }\n\n if (availableWidth < expandedWidth + AUTO_COLLAPSE_HYSTERESIS_PX) {\n return MultiActionButtonAutoCollapseMode.IconsOnly;\n }\n\n return MultiActionButtonAutoCollapseMode.Expanded;\n};\n\nexport interface GetSecondaryContextMenuTriggerStyleOptions {\n height: number;\n isCollapsed: boolean;\n isExpanded: boolean;\n shouldUseContentWidth: boolean;\n}\n\nexport const getSecondaryContextMenuTriggerStyle = ({\n height,\n isCollapsed,\n isExpanded,\n shouldUseContentWidth,\n}: GetSecondaryContextMenuTriggerStyleOptions): CSSProperties => {\n if (isCollapsed) {\n return {\n display: 'inline-flex',\n minWidth: 0,\n opacity: 0,\n pointerEvents: 'none',\n width: 0,\n };\n }\n\n if (shouldUseContentWidth) {\n return {\n display: 'inline-flex',\n flex: '0 1 auto',\n minWidth: 0,\n };\n }\n\n if (isExpanded) {\n return {\n display: 'inline-flex',\n flex: '1 1 auto',\n minWidth: 0,\n };\n }\n\n return {\n display: 'inline-flex',\n flex: '0 0 auto',\n minWidth: 0,\n width: height,\n };\n};\n"],"mappings":"AAEA,WAAYA,iCAAiC,0BAAjCA,iCAAiC;EAAjCA,iCAAiC;EAAjCA,iCAAiC;EAAjCA,iCAAiC;EAAA,OAAjCA,iCAAiC;AAAA;AAM7C,MAAMC,2BAA2B,GAAG,EAAE;AACtC,OAAO,MAAMC,gCAAgC,GAAG,CAAC;AACjD,OAAO,MAAMC,0CAA0C,GAAG,EAAE;AAC5D,OAAO,MAAMC,sCAAsC,GAAG,CAAC;AAUvD,OAAO,MAAMC,qCAAqC,GAAGA,CAAC;EAClDC,kBAAkB;EAClBC;AACgF,CAAC,KAAa;EAC9F,MAAMC,yBAAyB,GAAGD,MAAM;EAExC,IAAI,CAACD,kBAAkB,EAAE;IACrB,OAAOE,yBAAyB;EACpC;EAEA,OAAOA,yBAAyB,GAAG,CAAC,GAAG,CAAC;AAC5C,CAAC;AAOD,OAAO,MAAMC,kCAAkC,GAAGA,CAAC;EAC/CC,yBAAyB;EACzBH;AACuC,CAAC,KAAa;EACrD,MAAMI,uBAAuB,GAAGJ,MAAM;EACtC,MAAMK,wBAAwB,GAC1BV,gCAAgC,GAAGC,0CAA0C;EACjF,MAAMU,qBAAqB,GAAGH,yBAAyB,GACjDH,MAAM,GAAGH,sCAAsC,GAC/C,CAAC;EAEP,OAAOO,uBAAuB,GAAGC,wBAAwB,GAAGC,qBAAqB;AACrF,CAAC;AAED,OAAO,MAAMC,oCAAoC,GAAGA,CAAC;EACjDC,cAAc;EACdC,aAAa;EACbV,kBAAkB;EAClBC,MAAM;EACNU,YAAY,GAAGjB,iCAAiC,CAACkB;AACR,CAAC,KAAwC;EAClF,IAAI,CAACH,cAAc,IAAIC,aAAa,IAAI,CAAC,EAAE;IACvC,OAAOhB,iCAAiC,CAACkB,QAAQ;EACrD;EAEA,MAAMC,iBAAiB,GAAGd,qCAAqC,CAAC;IAC5DC,kBAAkB;IAClBC;EACJ,CAAC,CAAC;EAEF,IAAI,CAACD,kBAAkB,EAAE;IACrB,IAAIS,cAAc,GAAGC,aAAa,EAAE;MAChC,OAAOhB,iCAAiC,CAACoB,WAAW;IACxD;IAEA,IACIH,YAAY,KAAKjB,iCAAiC,CAACoB,WAAW,IAC9DL,cAAc,GAAGC,aAAa,GAAGf,2BAA2B,EAC9D;MACE,OAAOD,iCAAiC,CAACoB,WAAW;IACxD;IAEA,OAAOpB,iCAAiC,CAACkB,QAAQ;EACrD;EAEA,IAAID,YAAY,KAAKjB,iCAAiC,CAACkB,QAAQ,EAAE;IAC7D,IAAIH,cAAc,GAAGI,iBAAiB,EAAE;MACpC,OAAOnB,iCAAiC,CAACoB,WAAW;IACxD;IAEA,IAAIL,cAAc,GAAGC,aAAa,EAAE;MAChC,OAAOhB,iCAAiC,CAACqB,SAAS;IACtD;IAEA,OAAOrB,iCAAiC,CAACkB,QAAQ;EACrD;EAEA,IAAID,YAAY,KAAKjB,iCAAiC,CAACqB,SAAS,EAAE;IAC9D,IAAIN,cAAc,GAAGI,iBAAiB,EAAE;MACpC,OAAOnB,iCAAiC,CAACoB,WAAW;IACxD;IAEA,IAAIL,cAAc,GAAGC,aAAa,GAAGf,2BAA2B,EAAE;MAC9D,OAAOD,iCAAiC,CAACqB,SAAS;IACtD;IAEA,OAAOrB,iCAAiC,CAACkB,QAAQ;EACrD;EAEA,IAAIH,cAAc,GAAGI,iBAAiB,GAAGlB,2BAA2B,EAAE;IAClE,OAAOD,iCAAiC,CAACoB,WAAW;EACxD;EAEA,IAAIL,cAAc,GAAGC,aAAa,EAAE;IAChC,OAAOhB,iCAAiC,CAACqB,SAAS;EACtD;EAEA,IAAIN,cAAc,GAAGC,aAAa,GAAGf,2BAA2B,EAAE;IAC9D,OAAOD,iCAAiC,CAACqB,SAAS;EACtD;EAEA,OAAOrB,iCAAiC,CAACkB,QAAQ;AACrD,CAAC;AASD,OAAO,MAAMI,mCAAmC,GAAGA,CAAC;EAChDf,MAAM;EACNgB,WAAW;EACXC,UAAU;EACVC;AACwC,CAAC,KAAoB;EAC7D,IAAIF,WAAW,EAAE;IACb,OAAO;MACHG,OAAO,EAAE,aAAa;MACtBC,QAAQ,EAAE,CAAC;MACXC,OAAO,EAAE,CAAC;MACVC,aAAa,EAAE,MAAM;MACrBC,KAAK,EAAE;IACX,CAAC;EACL;EAEA,IAAIL,qBAAqB,EAAE;IACvB,OAAO;MACHC,OAAO,EAAE,aAAa;MACtBK,IAAI,EAAE,UAAU;MAChBJ,QAAQ,EAAE;IACd,CAAC;EACL;EAEA,IAAIH,UAAU,EAAE;IACZ,OAAO;MACHE,OAAO,EAAE,aAAa;MACtBK,IAAI,EAAE,UAAU;MAChBJ,QAAQ,EAAE;IACd,CAAC;EACL;EAEA,OAAO;IACHD,OAAO,EAAE,aAAa;IACtBK,IAAI,EAAE,UAAU;IAChBJ,QAAQ,EAAE,CAAC;IACXG,KAAK,EAAEvB;EACX,CAAC;AACL,CAAC","ignoreList":[]}
|
|
@@ -7,10 +7,9 @@ export let ContainerAnchor = /*#__PURE__*/function (ContainerAnchor) {
|
|
|
7
7
|
ContainerAnchor["ROOT"] = "#root";
|
|
8
8
|
ContainerAnchor["TAPP"] = ".tapp";
|
|
9
9
|
ContainerAnchor["WALLET"] = ".wallet";
|
|
10
|
-
ContainerAnchor["COLOR_SCHEME"] = ".color-scheme-provider";
|
|
11
10
|
return ContainerAnchor;
|
|
12
11
|
}({});
|
|
13
|
-
const DEFAULT_CONTAINER_ANCHORS = [ContainerAnchor.BODY, ContainerAnchor.DIALOG, ContainerAnchor.PAGE, ContainerAnchor.ROOT, ContainerAnchor.TAPP
|
|
12
|
+
const DEFAULT_CONTAINER_ANCHORS = [ContainerAnchor.BODY, ContainerAnchor.DIALOG, ContainerAnchor.PAGE, ContainerAnchor.ROOT, ContainerAnchor.TAPP];
|
|
14
13
|
export const useContainer = ({
|
|
15
14
|
ref,
|
|
16
15
|
anchorElement,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"container.js","names":["useEffect","useState","ContainerAnchor","DEFAULT_CONTAINER_ANCHORS","BODY","DIALOG","PAGE","ROOT","TAPP","
|
|
1
|
+
{"version":3,"file":"container.js","names":["useEffect","useState","ContainerAnchor","DEFAULT_CONTAINER_ANCHORS","BODY","DIALOG","PAGE","ROOT","TAPP","useContainer","ref","anchorElement","container","anchors","newContainer","setNewContainer","undefined","el","current","reservationWrapperContainer","document","querySelector","RESERVATION_WRAPPER","rootContainer","walletContainer","WALLET","isInWallet","contains","element","closest","join","Element"],"sources":["../../../src/hooks/container.ts"],"sourcesContent":["import { MutableRefObject, useEffect, useState } from 'react';\n\nexport enum ContainerAnchor {\n BODY = 'body',\n DIALOG = '.dialog-inner',\n PAGE = '.page-provider',\n RESERVATION_WRAPPER = '.reservation-wrapper',\n ROOT = '#root',\n TAPP = '.tapp',\n WALLET = '.wallet',\n}\n\nconst DEFAULT_CONTAINER_ANCHORS = [\n ContainerAnchor.BODY,\n ContainerAnchor.DIALOG,\n ContainerAnchor.PAGE,\n ContainerAnchor.ROOT,\n ContainerAnchor.TAPP,\n];\n\ninterface UseContainerProps {\n ref?: MutableRefObject<HTMLDivElement | HTMLLabelElement | HTMLSpanElement | null>;\n anchorElement?: Element;\n container?: Element | null;\n anchors?: ContainerAnchor[];\n}\n\nexport const useContainer = ({\n ref,\n anchorElement,\n container,\n anchors = DEFAULT_CONTAINER_ANCHORS,\n}: UseContainerProps) => {\n const [newContainer, setNewContainer] = useState<Element | undefined>(container ?? undefined);\n\n // Get the closest container if none is set\n useEffect(() => {\n let el = anchorElement as HTMLElement;\n\n if (ref?.current) {\n el = ref.current as HTMLElement;\n }\n\n if (!container) {\n const reservationWrapperContainer = document.querySelector(\n ContainerAnchor.RESERVATION_WRAPPER,\n );\n\n const rootContainer = document.querySelector(ContainerAnchor.ROOT);\n const walletContainer = document.querySelector(ContainerAnchor.WALLET);\n\n const isInWallet =\n (reservationWrapperContainer && reservationWrapperContainer.contains(el)) ||\n (walletContainer && walletContainer.contains(el));\n\n if (isInWallet && rootContainer && rootContainer.contains(el)) {\n setNewContainer(rootContainer);\n\n return;\n }\n\n const element = el.closest(anchors?.join(', '));\n\n setNewContainer(element ?? undefined);\n }\n }, [anchors, container, anchorElement, ref]);\n\n useEffect(() => {\n if (container instanceof Element) {\n setNewContainer(container);\n }\n }, [container]);\n\n return newContainer;\n};\n"],"mappings":"AAAA,SAA2BA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAE7D,WAAYC,eAAe,0BAAfA,eAAe;EAAfA,eAAe;EAAfA,eAAe;EAAfA,eAAe;EAAfA,eAAe;EAAfA,eAAe;EAAfA,eAAe;EAAfA,eAAe;EAAA,OAAfA,eAAe;AAAA;AAU3B,MAAMC,yBAAyB,GAAG,CAC9BD,eAAe,CAACE,IAAI,EACpBF,eAAe,CAACG,MAAM,EACtBH,eAAe,CAACI,IAAI,EACpBJ,eAAe,CAACK,IAAI,EACpBL,eAAe,CAACM,IAAI,CACvB;AASD,OAAO,MAAMC,YAAY,GAAGA,CAAC;EACzBC,GAAG;EACHC,aAAa;EACbC,SAAS;EACTC,OAAO,GAAGV;AACK,CAAC,KAAK;EACrB,MAAM,CAACW,YAAY,EAAEC,eAAe,CAAC,GAAGd,QAAQ,CAAsBW,SAAS,IAAII,SAAS,CAAC;;EAE7F;EACAhB,SAAS,CAAC,MAAM;IACZ,IAAIiB,EAAE,GAAGN,aAA4B;IAErC,IAAID,GAAG,EAAEQ,OAAO,EAAE;MACdD,EAAE,GAAGP,GAAG,CAACQ,OAAsB;IACnC;IAEA,IAAI,CAACN,SAAS,EAAE;MACZ,MAAMO,2BAA2B,GAAGC,QAAQ,CAACC,aAAa,CACtDnB,eAAe,CAACoB,mBACpB,CAAC;MAED,MAAMC,aAAa,GAAGH,QAAQ,CAACC,aAAa,CAACnB,eAAe,CAACK,IAAI,CAAC;MAClE,MAAMiB,eAAe,GAAGJ,QAAQ,CAACC,aAAa,CAACnB,eAAe,CAACuB,MAAM,CAAC;MAEtE,MAAMC,UAAU,GACXP,2BAA2B,IAAIA,2BAA2B,CAACQ,QAAQ,CAACV,EAAE,CAAC,IACvEO,eAAe,IAAIA,eAAe,CAACG,QAAQ,CAACV,EAAE,CAAE;MAErD,IAAIS,UAAU,IAAIH,aAAa,IAAIA,aAAa,CAACI,QAAQ,CAACV,EAAE,CAAC,EAAE;QAC3DF,eAAe,CAACQ,aAAa,CAAC;QAE9B;MACJ;MAEA,MAAMK,OAAO,GAAGX,EAAE,CAACY,OAAO,CAAChB,OAAO,EAAEiB,IAAI,CAAC,IAAI,CAAC,CAAC;MAE/Cf,eAAe,CAACa,OAAO,IAAIZ,SAAS,CAAC;IACzC;EACJ,CAAC,EAAE,CAACH,OAAO,EAAED,SAAS,EAAED,aAAa,EAAED,GAAG,CAAC,CAAC;EAE5CV,SAAS,CAAC,MAAM;IACZ,IAAIY,SAAS,YAAYmB,OAAO,EAAE;MAC9BhB,eAAe,CAACH,SAAS,CAAC;IAC9B;EACJ,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEf,OAAOE,YAAY;AACvB,CAAC","ignoreList":[]}
|
|
@@ -4,6 +4,7 @@ export declare const StyledMultiActionButton: import("styled-components/dist/typ
|
|
|
4
4
|
}, never>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof React.Component<any, {}, any>>;
|
|
5
5
|
type StyledSeparatorProps = WithTheme<{
|
|
6
6
|
$gapColor?: string;
|
|
7
|
+
$isHidden?: boolean;
|
|
7
8
|
}>;
|
|
8
9
|
export declare const StyledSeparator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledSeparatorProps>> & string;
|
|
9
10
|
export {};
|
|
@@ -206,6 +206,14 @@ export type MultiActionButtonProps = {
|
|
|
206
206
|
* @optional
|
|
207
207
|
*/
|
|
208
208
|
secondaryContextMenu?: MultiActionButtonSecondaryContextMenu;
|
|
209
|
+
/**
|
|
210
|
+
* Whether the button should collapse automatically based on the available width.
|
|
211
|
+
* @description When enabled, the control switches from the default layout to an icon-only
|
|
212
|
+
* layout and finally to a primary-only icon layout as space becomes tighter.
|
|
213
|
+
* @default false
|
|
214
|
+
* @optional
|
|
215
|
+
*/
|
|
216
|
+
shouldAutoCollapse?: boolean;
|
|
209
217
|
/**
|
|
210
218
|
* Whether the button should take the full width of its parent.
|
|
211
219
|
* @description When true, the control stretches to 100% width unless `width` is provided.
|
|
@@ -1,4 +1,26 @@
|
|
|
1
1
|
import type { CSSProperties } from 'react';
|
|
2
|
+
export declare enum MultiActionButtonAutoCollapseMode {
|
|
3
|
+
Expanded = "expanded",
|
|
4
|
+
IconsOnly = "icons-only",
|
|
5
|
+
PrimaryOnly = "primary-only"
|
|
6
|
+
}
|
|
7
|
+
export declare const MULTI_ACTION_BUTTON_LABEL_GAP_PX = 6;
|
|
8
|
+
export declare const MULTI_ACTION_BUTTON_LABEL_RIGHT_PADDING_PX = 18;
|
|
9
|
+
export declare const MULTI_ACTION_BUTTON_SEPARATOR_WIDTH_PX = 1;
|
|
10
|
+
export interface GetMultiActionButtonAutoCollapseModeOptions {
|
|
11
|
+
availableWidth?: number;
|
|
12
|
+
expandedWidth: number;
|
|
13
|
+
hasSecondaryAction: boolean;
|
|
14
|
+
height: number;
|
|
15
|
+
previousMode?: MultiActionButtonAutoCollapseMode;
|
|
16
|
+
}
|
|
17
|
+
export declare const getMinimumMultiActionButtonIconsWidth: ({ hasSecondaryAction, height, }: Pick<GetMultiActionButtonAutoCollapseModeOptions, "hasSecondaryAction" | "height">) => number;
|
|
18
|
+
export interface GetMinimumPrimaryLabelVisibleWidthOptions {
|
|
19
|
+
hasVisibleSecondaryAction: boolean;
|
|
20
|
+
height: number;
|
|
21
|
+
}
|
|
22
|
+
export declare const getMinimumPrimaryLabelVisibleWidth: ({ hasVisibleSecondaryAction, height, }: GetMinimumPrimaryLabelVisibleWidthOptions) => number;
|
|
23
|
+
export declare const getMultiActionButtonAutoCollapseMode: ({ availableWidth, expandedWidth, hasSecondaryAction, height, previousMode, }: GetMultiActionButtonAutoCollapseModeOptions) => MultiActionButtonAutoCollapseMode;
|
|
2
24
|
export interface GetSecondaryContextMenuTriggerStyleOptions {
|
|
3
25
|
height: number;
|
|
4
26
|
isCollapsed: boolean;
|
|
@@ -6,8 +6,7 @@ export declare enum ContainerAnchor {
|
|
|
6
6
|
RESERVATION_WRAPPER = ".reservation-wrapper",
|
|
7
7
|
ROOT = "#root",
|
|
8
8
|
TAPP = ".tapp",
|
|
9
|
-
WALLET = ".wallet"
|
|
10
|
-
COLOR_SCHEME = ".color-scheme-provider"
|
|
9
|
+
WALLET = ".wallet"
|
|
11
10
|
}
|
|
12
11
|
interface UseContainerProps {
|
|
13
12
|
ref?: MutableRefObject<HTMLDivElement | HTMLLabelElement | HTMLSpanElement | null>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.60",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -87,5 +87,5 @@
|
|
|
87
87
|
"publishConfig": {
|
|
88
88
|
"access": "public"
|
|
89
89
|
},
|
|
90
|
-
"gitHead": "
|
|
90
|
+
"gitHead": "59d6c06fb3ef567df4682771183aa81ed5e6d8f8"
|
|
91
91
|
}
|