@seeqdev/qomponents 0.0.59 → 0.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/dist/FontCustom.woff +0 -0
- package/dist/FontCustom.woff2 +0 -0
- package/dist/ToolbarButton/ToolbarButton.types.d.ts +0 -2
- package/dist/index.d.ts +0 -4
- package/dist/index.esm.js +20 -855
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +19 -856
- package/dist/index.js.map +1 -1
- package/dist/styles.css +4 -188
- package/package.json +3 -4
- package/dist/ButtonWithDropdown/ButtonWithDropdown.d.ts +0 -4
- package/dist/ButtonWithDropdown/ButtonWithDropdown.stories.d.ts +0 -5
- package/dist/ButtonWithDropdown/ButtonWithDropdown.test.d.ts +0 -1
- package/dist/ButtonWithDropdown/ButtonWithDropdown.types.d.ts +0 -66
- package/dist/ButtonWithDropdown/index.d.ts +0 -1
- package/dist/ButtonWithPopover/ButtonWithPopover.d.ts +0 -4
- package/dist/ButtonWithPopover/ButtonWithPopover.stories.d.ts +0 -5
- package/dist/ButtonWithPopover/ButtonWithPopover.test.d.ts +0 -1
- package/dist/ButtonWithPopover/ButtonWithPopover.types.d.ts +0 -48
- package/dist/ButtonWithPopover/index.d.ts +0 -1
package/dist/index.js
CHANGED
|
@@ -3010,20 +3010,6 @@ function useFloating(options) {
|
|
|
3010
3010
|
}), [data, update, refs, elements, floatingStyles]);
|
|
3011
3011
|
}
|
|
3012
3012
|
|
|
3013
|
-
const $7e8f5cd07187803e$export$21b07c8f274aebd5 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
|
|
3014
|
-
const { children: children , width: width = 10 , height: height = 5 , ...arrowProps } = props;
|
|
3015
|
-
return /*#__PURE__*/ React.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.svg, _extends({}, arrowProps, {
|
|
3016
|
-
ref: forwardedRef,
|
|
3017
|
-
width: width,
|
|
3018
|
-
height: height,
|
|
3019
|
-
viewBox: "0 0 30 10",
|
|
3020
|
-
preserveAspectRatio: "none"
|
|
3021
|
-
}), props.asChild ? children : /*#__PURE__*/ React.createElement("polygon", {
|
|
3022
|
-
points: "0,0 30,0 15,10"
|
|
3023
|
-
}));
|
|
3024
|
-
});
|
|
3025
|
-
/* -----------------------------------------------------------------------------------------------*/ const $7e8f5cd07187803e$export$be92b6f5f03c0fe9 = $7e8f5cd07187803e$export$21b07c8f274aebd5;
|
|
3026
|
-
|
|
3027
3013
|
function $db6c3485150b8e66$export$1ab7ae714698c4b8(element) {
|
|
3028
3014
|
const [size, setSize] = React.useState(undefined);
|
|
3029
3015
|
$9f79659886946c16$export$e5c5a5f917a5871c(()=>{
|
|
@@ -3243,52 +3229,6 @@ const $cf1ac5d9fe0e8206$export$bc4ae5855d3c4fc = /*#__PURE__*/ React.forwardRef(
|
|
|
3243
3229
|
}
|
|
3244
3230
|
}))));
|
|
3245
3231
|
});
|
|
3246
|
-
/* -------------------------------------------------------------------------------------------------
|
|
3247
|
-
* PopperArrow
|
|
3248
|
-
* -----------------------------------------------------------------------------------------------*/ const $cf1ac5d9fe0e8206$var$ARROW_NAME = 'PopperArrow';
|
|
3249
|
-
const $cf1ac5d9fe0e8206$var$OPPOSITE_SIDE = {
|
|
3250
|
-
top: 'bottom',
|
|
3251
|
-
right: 'left',
|
|
3252
|
-
bottom: 'top',
|
|
3253
|
-
left: 'right'
|
|
3254
|
-
};
|
|
3255
|
-
const $cf1ac5d9fe0e8206$export$79d62cd4e10a3fd0 = /*#__PURE__*/ React.forwardRef(function $cf1ac5d9fe0e8206$export$79d62cd4e10a3fd0(props, forwardedRef) {
|
|
3256
|
-
const { __scopePopper: __scopePopper , ...arrowProps } = props;
|
|
3257
|
-
const contentContext = $cf1ac5d9fe0e8206$var$useContentContext($cf1ac5d9fe0e8206$var$ARROW_NAME, __scopePopper);
|
|
3258
|
-
const baseSide = $cf1ac5d9fe0e8206$var$OPPOSITE_SIDE[contentContext.placedSide];
|
|
3259
|
-
return(/*#__PURE__*/ // we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)
|
|
3260
|
-
// doesn't report size as we'd expect on SVG elements.
|
|
3261
|
-
// it reports their bounding box which is effectively the largest path inside the SVG.
|
|
3262
|
-
React.createElement("span", {
|
|
3263
|
-
ref: contentContext.onArrowChange,
|
|
3264
|
-
style: {
|
|
3265
|
-
position: 'absolute',
|
|
3266
|
-
left: contentContext.arrowX,
|
|
3267
|
-
top: contentContext.arrowY,
|
|
3268
|
-
[baseSide]: 0,
|
|
3269
|
-
transformOrigin: {
|
|
3270
|
-
top: '',
|
|
3271
|
-
right: '0 0',
|
|
3272
|
-
bottom: 'center 0',
|
|
3273
|
-
left: '100% 0'
|
|
3274
|
-
}[contentContext.placedSide],
|
|
3275
|
-
transform: {
|
|
3276
|
-
top: 'translateY(100%)',
|
|
3277
|
-
right: 'translateY(50%) rotate(90deg) translateX(-50%)',
|
|
3278
|
-
bottom: `rotate(180deg)`,
|
|
3279
|
-
left: 'translateY(50%) rotate(-90deg) translateX(50%)'
|
|
3280
|
-
}[contentContext.placedSide],
|
|
3281
|
-
visibility: contentContext.shouldHideArrow ? 'hidden' : undefined
|
|
3282
|
-
}
|
|
3283
|
-
}, /*#__PURE__*/ React.createElement($7e8f5cd07187803e$export$be92b6f5f03c0fe9, _extends({}, arrowProps, {
|
|
3284
|
-
ref: forwardedRef,
|
|
3285
|
-
style: {
|
|
3286
|
-
...arrowProps.style,
|
|
3287
|
-
// ensures the element can be measured correctly (mostly for if SVG)
|
|
3288
|
-
display: 'block'
|
|
3289
|
-
}
|
|
3290
|
-
}))));
|
|
3291
|
-
});
|
|
3292
3232
|
/* -----------------------------------------------------------------------------------------------*/ function $cf1ac5d9fe0e8206$var$isNotNull(value) {
|
|
3293
3233
|
return value !== null;
|
|
3294
3234
|
}
|
|
@@ -3344,7 +3284,6 @@ function $cf1ac5d9fe0e8206$var$getSideAndAlignFromPlacement(placement) {
|
|
|
3344
3284
|
const $cf1ac5d9fe0e8206$export$be92b6f5f03c0fe9 = $cf1ac5d9fe0e8206$export$badac9ada3a0bdf9;
|
|
3345
3285
|
const $cf1ac5d9fe0e8206$export$b688253958b8dfe7 = $cf1ac5d9fe0e8206$export$ecd4e1ccab6ed6d;
|
|
3346
3286
|
const $cf1ac5d9fe0e8206$export$7c6e2c02157bb7d2 = $cf1ac5d9fe0e8206$export$bc4ae5855d3c4fc;
|
|
3347
|
-
const $cf1ac5d9fe0e8206$export$21b07c8f274aebd5 = $cf1ac5d9fe0e8206$export$79d62cd4e10a3fd0;
|
|
3348
3287
|
|
|
3349
3288
|
const $f1701beae083dbae$export$602eac185826482c = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
|
|
3350
3289
|
var _globalThis$document;
|
|
@@ -4354,7 +4293,7 @@ var SideCar = exportSidecar(effectCar, RemoveScrollSideCar);
|
|
|
4354
4293
|
|
|
4355
4294
|
var ReactRemoveScroll = React__namespace.forwardRef(function (props, ref) { return (React__namespace.createElement(RemoveScroll, __assign({}, props, { ref: ref, sideCar: SideCar }))); });
|
|
4356
4295
|
ReactRemoveScroll.classNames = RemoveScroll.classNames;
|
|
4357
|
-
var $
|
|
4296
|
+
var $67UHm$RemoveScroll = ReactRemoveScroll;
|
|
4358
4297
|
|
|
4359
4298
|
/* -------------------------------------------------------------------------------------------------
|
|
4360
4299
|
* Popover
|
|
@@ -4445,7 +4384,7 @@ const $cb5cc270b50c6fcd$export$d7e1f420b25549ff = /*#__PURE__*/ React.forwardRef
|
|
|
4445
4384
|
const content = contentRef.current;
|
|
4446
4385
|
if (content) return hideOthers(content);
|
|
4447
4386
|
}, []);
|
|
4448
|
-
return /*#__PURE__*/ React.createElement($
|
|
4387
|
+
return /*#__PURE__*/ React.createElement($67UHm$RemoveScroll, {
|
|
4449
4388
|
as: $5e63c961fc1ce211$export$8c6ed5c666ac1360,
|
|
4450
4389
|
allowPinchZoom: true
|
|
4451
4390
|
}, /*#__PURE__*/ React.createElement($cb5cc270b50c6fcd$var$PopoverContentImpl, _extends({}, props, {
|
|
@@ -4547,22 +4486,14 @@ const $cb5cc270b50c6fcd$var$PopoverContentNonModal = /*#__PURE__*/ React.forward
|
|
|
4547
4486
|
}
|
|
4548
4487
|
}))));
|
|
4549
4488
|
});
|
|
4550
|
-
const $cb5cc270b50c6fcd$export$3152841115e061b2 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
|
|
4551
|
-
const { __scopePopover: __scopePopover , ...arrowProps } = props;
|
|
4552
|
-
const popperScope = $cb5cc270b50c6fcd$var$usePopperScope(__scopePopover);
|
|
4553
|
-
return /*#__PURE__*/ React.createElement($cf1ac5d9fe0e8206$export$21b07c8f274aebd5, _extends({}, popperScope, arrowProps, {
|
|
4554
|
-
ref: forwardedRef
|
|
4555
|
-
}));
|
|
4556
|
-
});
|
|
4557
4489
|
/* -----------------------------------------------------------------------------------------------*/ function $cb5cc270b50c6fcd$var$getState(open) {
|
|
4558
4490
|
return open ? 'open' : 'closed';
|
|
4559
4491
|
}
|
|
4560
4492
|
const $cb5cc270b50c6fcd$export$be92b6f5f03c0fe9 = $cb5cc270b50c6fcd$export$5b6b19405a83ff9d;
|
|
4561
4493
|
const $cb5cc270b50c6fcd$export$41fb9f06171c75f4 = $cb5cc270b50c6fcd$export$7dacb05d26466c3;
|
|
4562
4494
|
const $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2 = $cb5cc270b50c6fcd$export$d7e1f420b25549ff;
|
|
4563
|
-
const $cb5cc270b50c6fcd$export$21b07c8f274aebd5 = $cb5cc270b50c6fcd$export$3152841115e061b2;
|
|
4564
4495
|
|
|
4565
|
-
const borderStyles$
|
|
4496
|
+
const borderStyles$1 = [
|
|
4566
4497
|
'tw-border-solid',
|
|
4567
4498
|
'tw-border',
|
|
4568
4499
|
'tw-rounded-sm',
|
|
@@ -4596,10 +4527,10 @@ const activeBorderStyles = [
|
|
|
4596
4527
|
'active:tw-border-sq-color-dark',
|
|
4597
4528
|
'dark:hover:tw-border-sq-color-dark-dark',
|
|
4598
4529
|
].join(' ');
|
|
4599
|
-
const bgStyles
|
|
4600
|
-
const disabledClasses$
|
|
4530
|
+
const bgStyles = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
|
|
4531
|
+
const disabledClasses$1 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
|
|
4601
4532
|
const PopoverContent = React__namespace.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (React__namespace.createElement($cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, { ref: ref, align: align, sideOffset: sideOffset, ...props, asChild: true })));
|
|
4602
|
-
const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIcon = false, tooltipText, id, popoverContent, extraClassNames, testId, tooltipTestId, tooltipOptions, isActive = false, isHtmlTooltip =
|
|
4533
|
+
const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIcon = false, tooltipText, id, popoverContent, extraClassNames, testId, tooltipTestId, tooltipOptions, isActive = false, isHtmlTooltip = true, disabled = false, onClick, onHide, }) => {
|
|
4603
4534
|
let tooltipData = undefined;
|
|
4604
4535
|
if (tooltipText) {
|
|
4605
4536
|
tooltipData = {
|
|
@@ -4616,22 +4547,20 @@ const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIco
|
|
|
4616
4547
|
}
|
|
4617
4548
|
};
|
|
4618
4549
|
return (React__namespace.createElement($cb5cc270b50c6fcd$export$be92b6f5f03c0fe9, { defaultOpen: false, onOpenChange: onOpenChange },
|
|
4619
|
-
React__namespace.createElement($cb5cc270b50c6fcd$export$41fb9f06171c75f4, { id: id, className: `tw-border-none ${isActive ? 'active' : ''}`, disabled: disabled, "data-testid": testId, onClick: (e) => {
|
|
4550
|
+
React__namespace.createElement($cb5cc270b50c6fcd$export$41fb9f06171c75f4, { id: id, className: `tw-border-none ${isActive ? 'active' : ''}`, disabled: disabled, "data-testid": testId, ...tooltipData, onClick: (e) => {
|
|
4620
4551
|
onClick && onClick(e);
|
|
4621
4552
|
} },
|
|
4622
|
-
React__namespace.createElement("div", {
|
|
4553
|
+
React__namespace.createElement("div", { className: `tw-bg-transparent tw-p-0 tw-flex tw-flex-col tw-items-center ${isSmall ? 'tw-py-[1px] tw-px-[5px]' : 'tw-px-2 tw-py-[3px]'} ${disabled ? disabledClasses$1 : isActive ? activeBorderStyles : triggerBorderStyles} ${extraClassNames || ''}` },
|
|
4623
4554
|
React__namespace.createElement("span", { className: "tw-nowrap" },
|
|
4624
4555
|
React__namespace.createElement(Icon, { icon: icon, testId: "firstIcon", type: "text", large: !isSmall && !label && !secondIcon && !forceSmallIcon, extraClassNames: `tw-text-sq-text-color dark:tw-text-sq-dark-text` }),
|
|
4625
4556
|
secondIcon && React__namespace.createElement(Icon, { icon: secondIcon, type: "text", testId: "secondIcon" }),
|
|
4626
4557
|
popoverContent ? (React__namespace.createElement(Icon, { icon: "fc-arrow-dropdown", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-dark-text tw-ml-[3px] tw-text-[8px]", type: "text" })) : undefined),
|
|
4627
4558
|
!isSmall && (React__namespace.createElement("small", { className: "tw-text-sq-text-color dark:tw-text-sq-dark-text tw-text-[10px]" }, label)))),
|
|
4628
|
-
!!popoverContent ? (React__namespace.createElement(PopoverContent, { sideOffset:
|
|
4629
|
-
React__namespace.createElement("div", { className: bgStyles
|
|
4630
|
-
' tw-relative tw-z-[1000] tw-min-w-6 tw-p-[0.5rem]
|
|
4559
|
+
!!popoverContent ? (React__namespace.createElement(PopoverContent, { sideOffset: 4, align: "start" },
|
|
4560
|
+
React__namespace.createElement("div", { className: bgStyles +
|
|
4561
|
+
' tw-relative tw-z-[1000] tw-min-w-6 tw-p-[0.5rem] outline-none data-[state=open]:animate-in data-[state=closed]:animate-out' +
|
|
4631
4562
|
' data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2' +
|
|
4632
|
-
borderStyles$
|
|
4633
|
-
hasArrow && (React__namespace.createElement($cb5cc270b50c6fcd$export$21b07c8f274aebd5, { className: "tw-fill-white tw-stroke-2 dark:tw-fill-sq-dark-background tw-stroke-slate-300 dark:tw-stroke-sq-color-dark-dark" })),
|
|
4634
|
-
popoverContent))) : undefined));
|
|
4563
|
+
borderStyles$1 }, popoverContent))) : undefined));
|
|
4635
4564
|
};
|
|
4636
4565
|
|
|
4637
4566
|
const errorClasses$2 = 'tw-border-sq-danger-color';
|
|
@@ -6540,17 +6469,11 @@ const QTip = () => {
|
|
|
6540
6469
|
let dataset = e.target?.dataset;
|
|
6541
6470
|
let text = dataset?.qtipText;
|
|
6542
6471
|
// Buttons support React.Nodes as children, the tooltip however is applied to the actual button component.
|
|
6543
|
-
// we only check
|
|
6472
|
+
// we only check one level up - alternatively the tooltip can also be provided on the React.Node
|
|
6544
6473
|
if (!text || text === '') {
|
|
6545
|
-
|
|
6546
|
-
dataset = currentTooltipTarget?.dataset;
|
|
6474
|
+
dataset = e.target?.parentElement?.dataset;
|
|
6547
6475
|
text = dataset?.qtipText;
|
|
6548
|
-
|
|
6549
|
-
currentTooltipTarget = e.target?.parentElement?.parentElement;
|
|
6550
|
-
dataset = currentTooltipTarget?.dataset;
|
|
6551
|
-
text = dataset?.qtipText;
|
|
6552
|
-
}
|
|
6553
|
-
tooltipTarget.current = currentTooltipTarget;
|
|
6476
|
+
tooltipTarget.current = e.target?.parentElement;
|
|
6554
6477
|
}
|
|
6555
6478
|
if (text) {
|
|
6556
6479
|
const delay = parseInt(dataset?.qtipDelay ?? DEFAULT_TOOL_TIP_DELAY + '');
|
|
@@ -13615,7 +13538,7 @@ const baseClasses = ['focus:tw-ring-0', 'disabled:tw-cursor-not-allowed'].join('
|
|
|
13615
13538
|
const containerStyles = ['tw-bg-white', 'dark:tw-bg-sq-dark-background'].join(' ');
|
|
13616
13539
|
const errorClasses = 'tw-border-sq-danger-color';
|
|
13617
13540
|
const borderColorClasses = ['tw-border-sq-disabled-gray', 'dark:tw-border-sq-dark-disabled-gray'].join(' ');
|
|
13618
|
-
const borderStyles
|
|
13541
|
+
const borderStyles = [
|
|
13619
13542
|
'tw-border-solid',
|
|
13620
13543
|
'tw-border',
|
|
13621
13544
|
'hover:tw-border-sq-color-dark',
|
|
@@ -13669,7 +13592,7 @@ const optionStyles = [
|
|
|
13669
13592
|
'tw-px-2.5',
|
|
13670
13593
|
'specSelectOption',
|
|
13671
13594
|
].join(' ');
|
|
13672
|
-
const disabledClasses
|
|
13595
|
+
const disabledClasses = ['tw-bg-sq-field-disabled-gray', 'tw-cursor-not-allowed'].join(' ');
|
|
13673
13596
|
const dropDownIndicatorStyles = `tw-text-sq-disabled-gray ${textActiveStyles} specOpenIt`;
|
|
13674
13597
|
const placeholderStyles = ['tw-text-gray-400', 'dark:tw-text-sq-dark-text-lighter', 'specOpenSelect'].join(' ');
|
|
13675
13598
|
const multiValueStyles = [
|
|
@@ -13746,8 +13669,8 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
|
|
|
13746
13669
|
else if (inputGroup === 'right') {
|
|
13747
13670
|
border = menuIsOpen ? 'tw-rounded-tr-sm' : 'tw-rounded-r-sm';
|
|
13748
13671
|
}
|
|
13749
|
-
const appliedClasses = `${borderStyles
|
|
13750
|
-
return `${appliedClasses} ${baseClasses} specSelectControl ${isDisabled ? disabledClasses
|
|
13672
|
+
const appliedClasses = `${borderStyles} ${border} ${showError ? errorClasses : borderColorClasses} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} `;
|
|
13673
|
+
return `${appliedClasses} ${baseClasses} specSelectControl ${isDisabled ? disabledClasses : ''} ${small ? 'tw-pl-2 tw-pr-1' : 'tw-pl-2.5 tw-pr-1.5'}`;
|
|
13751
13674
|
},
|
|
13752
13675
|
placeholder: () => placeholderStyles,
|
|
13753
13676
|
container: () => `${textStyles} ${containerStyles} ${extraClassNames}`,
|
|
@@ -15011,768 +14934,8 @@ const Accordion = ({ accordionItems, defaultValue, value, onItemSelect, disabled
|
|
|
15011
14934
|
React.createElement($1bf158f521e1b1b4$export$7c6e2c02157bb7d2, { className: `data-[state=open]:tw-animate-slideDown data-[state=closed]:tw-animate-slideUp tw-overflow-hidden focus-visible:tw-outline-none ${item.contentClassNames || ''}` }, item.content))))));
|
|
15012
14935
|
};
|
|
15013
14936
|
|
|
15014
|
-
const bgStyles$1 = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
|
|
15015
|
-
const borderStyles$1 = [
|
|
15016
|
-
'tw-border-solid',
|
|
15017
|
-
'tw-border',
|
|
15018
|
-
'tw-rounded-sm',
|
|
15019
|
-
'tw-border-sq-light-gray',
|
|
15020
|
-
'dark:tw-border-gray-700',
|
|
15021
|
-
].join(' ');
|
|
15022
|
-
const disabledClasses$1 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
|
|
15023
|
-
const ButtonWithPopover = ({ children, trigger, tooltipText, id, hasArrow, extraTriggerClassNames, extraPopoverClassNames, testId, tooltipTestId, tooltipDelay, tooltipPlacement, disabled = false, align = 'end', alignOffset = -5, placement = 'bottom', placementOffset = 2, onOpenChange, isOpen, isHtmlTooltip = false, isCloseOnContentClick = false, }) => {
|
|
15024
|
-
let tooltipData = undefined;
|
|
15025
|
-
if (tooltipText) {
|
|
15026
|
-
tooltipData = {
|
|
15027
|
-
'data-qtip-text': tooltipText,
|
|
15028
|
-
'data-qtip-placement': tooltipPlacement,
|
|
15029
|
-
'data-qtip-is-html': isHtmlTooltip,
|
|
15030
|
-
'data-qtip-testid': tooltipTestId,
|
|
15031
|
-
'data-qtip-delay': tooltipDelay ?? DEFAULT_TOOL_TIP_DELAY,
|
|
15032
|
-
};
|
|
15033
|
-
}
|
|
15034
|
-
return (React__namespace.createElement($cb5cc270b50c6fcd$export$be92b6f5f03c0fe9, { open: isOpen, defaultOpen: false, onOpenChange: onOpenChange },
|
|
15035
|
-
React__namespace.createElement($cb5cc270b50c6fcd$export$41fb9f06171c75f4, { id: id, className: `tw-border-none`, disabled: disabled, "data-testid": testId },
|
|
15036
|
-
React__namespace.createElement("div", { ...tooltipData, className: `tw-bg-transparent tw-flex tw-flex-col tw-items-center tw-justify-center ${disabled ? disabledClasses$1 : ''} ${extraTriggerClassNames || ''}` }, trigger)),
|
|
15037
|
-
React__namespace.createElement($cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, { sideOffset: placementOffset, align: align, side: placement, alignOffset: alignOffset, asChild: true, onClick: () => isCloseOnContentClick && onOpenChange && onOpenChange(false), className: "focus-visible:tw-outline-none tw-outline-none" },
|
|
15038
|
-
React__namespace.createElement("div", { className: `${bgStyles$1} ${borderStyles$1} tw-relative tw-z-[1000] tw-min-w-6 tw-p-[0.5rem] focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out
|
|
15039
|
-
data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade
|
|
15040
|
-
${extraPopoverClassNames || ''}` },
|
|
15041
|
-
hasArrow && (React__namespace.createElement($cb5cc270b50c6fcd$export$21b07c8f274aebd5, { asChild: true },
|
|
15042
|
-
React__namespace.createElement("div", { className: " tw-fill-transparent tw-bg-white tw-w-[6px] tw-h-[6px] tw-rotate-45 dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-light-gray dark:tw-border-gray-700 tw-mt-[-2px]" }))),
|
|
15043
|
-
children))));
|
|
15044
|
-
};
|
|
15045
|
-
|
|
15046
|
-
const $6cc32821e9371a1c$var$SELECTION_KEYS = [
|
|
15047
|
-
'Enter',
|
|
15048
|
-
' '
|
|
15049
|
-
];
|
|
15050
|
-
const $6cc32821e9371a1c$var$FIRST_KEYS = [
|
|
15051
|
-
'ArrowDown',
|
|
15052
|
-
'PageUp',
|
|
15053
|
-
'Home'
|
|
15054
|
-
];
|
|
15055
|
-
const $6cc32821e9371a1c$var$LAST_KEYS = [
|
|
15056
|
-
'ArrowUp',
|
|
15057
|
-
'PageDown',
|
|
15058
|
-
'End'
|
|
15059
|
-
];
|
|
15060
|
-
const $6cc32821e9371a1c$var$FIRST_LAST_KEYS = [
|
|
15061
|
-
...$6cc32821e9371a1c$var$FIRST_KEYS,
|
|
15062
|
-
...$6cc32821e9371a1c$var$LAST_KEYS
|
|
15063
|
-
];
|
|
15064
|
-
/* -------------------------------------------------------------------------------------------------
|
|
15065
|
-
* Menu
|
|
15066
|
-
* -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$MENU_NAME = 'Menu';
|
|
15067
|
-
const [$6cc32821e9371a1c$var$Collection, $6cc32821e9371a1c$var$useCollection, $6cc32821e9371a1c$var$createCollectionScope] = $e02a7d9cb1dc128c$export$c74125a8e3af6bb2($6cc32821e9371a1c$var$MENU_NAME);
|
|
15068
|
-
const [$6cc32821e9371a1c$var$createMenuContext, $6cc32821e9371a1c$export$4027731b685e72eb] = $c512c27ab02ef895$export$50c7b4e9d9f19c1($6cc32821e9371a1c$var$MENU_NAME, [
|
|
15069
|
-
$6cc32821e9371a1c$var$createCollectionScope,
|
|
15070
|
-
$cf1ac5d9fe0e8206$export$722aac194ae923,
|
|
15071
|
-
$d7bdfb9eb0fdf311$export$c7109489551a4f4
|
|
15072
|
-
]);
|
|
15073
|
-
const $6cc32821e9371a1c$var$usePopperScope = $cf1ac5d9fe0e8206$export$722aac194ae923();
|
|
15074
|
-
const $6cc32821e9371a1c$var$useRovingFocusGroupScope = $d7bdfb9eb0fdf311$export$c7109489551a4f4();
|
|
15075
|
-
const [$6cc32821e9371a1c$var$MenuProvider, $6cc32821e9371a1c$var$useMenuContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$MENU_NAME);
|
|
15076
|
-
const [$6cc32821e9371a1c$var$MenuRootProvider, $6cc32821e9371a1c$var$useMenuRootContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$MENU_NAME);
|
|
15077
|
-
const $6cc32821e9371a1c$export$d9b273488cd8ce6f = (props)=>{
|
|
15078
|
-
const { __scopeMenu: __scopeMenu , open: open = false , children: children , dir: dir , onOpenChange: onOpenChange , modal: modal = true } = props;
|
|
15079
|
-
const popperScope = $6cc32821e9371a1c$var$usePopperScope(__scopeMenu);
|
|
15080
|
-
const [content, setContent] = React.useState(null);
|
|
15081
|
-
const isUsingKeyboardRef = React.useRef(false);
|
|
15082
|
-
const handleOpenChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onOpenChange);
|
|
15083
|
-
const direction = $f631663db3294ace$export$b39126d51d94e6f3(dir);
|
|
15084
|
-
React.useEffect(()=>{
|
|
15085
|
-
// Capture phase ensures we set the boolean before any side effects execute
|
|
15086
|
-
// in response to the key or pointer event as they might depend on this value.
|
|
15087
|
-
const handleKeyDown = ()=>{
|
|
15088
|
-
isUsingKeyboardRef.current = true;
|
|
15089
|
-
document.addEventListener('pointerdown', handlePointer, {
|
|
15090
|
-
capture: true,
|
|
15091
|
-
once: true
|
|
15092
|
-
});
|
|
15093
|
-
document.addEventListener('pointermove', handlePointer, {
|
|
15094
|
-
capture: true,
|
|
15095
|
-
once: true
|
|
15096
|
-
});
|
|
15097
|
-
};
|
|
15098
|
-
const handlePointer = ()=>isUsingKeyboardRef.current = false
|
|
15099
|
-
;
|
|
15100
|
-
document.addEventListener('keydown', handleKeyDown, {
|
|
15101
|
-
capture: true
|
|
15102
|
-
});
|
|
15103
|
-
return ()=>{
|
|
15104
|
-
document.removeEventListener('keydown', handleKeyDown, {
|
|
15105
|
-
capture: true
|
|
15106
|
-
});
|
|
15107
|
-
document.removeEventListener('pointerdown', handlePointer, {
|
|
15108
|
-
capture: true
|
|
15109
|
-
});
|
|
15110
|
-
document.removeEventListener('pointermove', handlePointer, {
|
|
15111
|
-
capture: true
|
|
15112
|
-
});
|
|
15113
|
-
};
|
|
15114
|
-
}, []);
|
|
15115
|
-
return /*#__PURE__*/ React.createElement($cf1ac5d9fe0e8206$export$be92b6f5f03c0fe9, popperScope, /*#__PURE__*/ React.createElement($6cc32821e9371a1c$var$MenuProvider, {
|
|
15116
|
-
scope: __scopeMenu,
|
|
15117
|
-
open: open,
|
|
15118
|
-
onOpenChange: handleOpenChange,
|
|
15119
|
-
content: content,
|
|
15120
|
-
onContentChange: setContent
|
|
15121
|
-
}, /*#__PURE__*/ React.createElement($6cc32821e9371a1c$var$MenuRootProvider, {
|
|
15122
|
-
scope: __scopeMenu,
|
|
15123
|
-
onClose: React.useCallback(()=>handleOpenChange(false)
|
|
15124
|
-
, [
|
|
15125
|
-
handleOpenChange
|
|
15126
|
-
]),
|
|
15127
|
-
isUsingKeyboardRef: isUsingKeyboardRef,
|
|
15128
|
-
dir: direction,
|
|
15129
|
-
modal: modal
|
|
15130
|
-
}, children)));
|
|
15131
|
-
};
|
|
15132
|
-
const $6cc32821e9371a1c$export$9fa5ebd18bee4d43 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
|
|
15133
|
-
const { __scopeMenu: __scopeMenu , ...anchorProps } = props;
|
|
15134
|
-
const popperScope = $6cc32821e9371a1c$var$usePopperScope(__scopeMenu);
|
|
15135
|
-
return /*#__PURE__*/ React.createElement($cf1ac5d9fe0e8206$export$b688253958b8dfe7, _extends({}, popperScope, anchorProps, {
|
|
15136
|
-
ref: forwardedRef
|
|
15137
|
-
}));
|
|
15138
|
-
});
|
|
15139
|
-
/* -------------------------------------------------------------------------------------------------
|
|
15140
|
-
* MenuPortal
|
|
15141
|
-
* -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$PORTAL_NAME = 'MenuPortal';
|
|
15142
|
-
const [$6cc32821e9371a1c$var$PortalProvider, $6cc32821e9371a1c$var$usePortalContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$PORTAL_NAME, {
|
|
15143
|
-
forceMount: undefined
|
|
15144
|
-
});
|
|
15145
|
-
/* -------------------------------------------------------------------------------------------------
|
|
15146
|
-
* MenuContent
|
|
15147
|
-
* -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$CONTENT_NAME = 'MenuContent';
|
|
15148
|
-
const [$6cc32821e9371a1c$var$MenuContentProvider, $6cc32821e9371a1c$var$useMenuContentContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$CONTENT_NAME);
|
|
15149
|
-
const $6cc32821e9371a1c$export$479f0f2f71193efe = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
|
|
15150
|
-
const portalContext = $6cc32821e9371a1c$var$usePortalContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
|
|
15151
|
-
const { forceMount: forceMount = portalContext.forceMount , ...contentProps } = props;
|
|
15152
|
-
const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
|
|
15153
|
-
const rootContext = $6cc32821e9371a1c$var$useMenuRootContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
|
|
15154
|
-
return /*#__PURE__*/ React.createElement($6cc32821e9371a1c$var$Collection.Provider, {
|
|
15155
|
-
scope: props.__scopeMenu
|
|
15156
|
-
}, /*#__PURE__*/ React.createElement($921a889cee6df7e8$export$99c2b779aa4e8b8b, {
|
|
15157
|
-
present: forceMount || context.open
|
|
15158
|
-
}, /*#__PURE__*/ React.createElement($6cc32821e9371a1c$var$Collection.Slot, {
|
|
15159
|
-
scope: props.__scopeMenu
|
|
15160
|
-
}, rootContext.modal ? /*#__PURE__*/ React.createElement($6cc32821e9371a1c$var$MenuRootContentModal, _extends({}, contentProps, {
|
|
15161
|
-
ref: forwardedRef
|
|
15162
|
-
})) : /*#__PURE__*/ React.createElement($6cc32821e9371a1c$var$MenuRootContentNonModal, _extends({}, contentProps, {
|
|
15163
|
-
ref: forwardedRef
|
|
15164
|
-
})))));
|
|
15165
|
-
});
|
|
15166
|
-
/* ---------------------------------------------------------------------------------------------- */ const $6cc32821e9371a1c$var$MenuRootContentModal = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
|
|
15167
|
-
const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
|
|
15168
|
-
const ref = React.useRef(null);
|
|
15169
|
-
const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref); // Hide everything from ARIA except the `MenuContent`
|
|
15170
|
-
React.useEffect(()=>{
|
|
15171
|
-
const content = ref.current;
|
|
15172
|
-
if (content) return hideOthers(content);
|
|
15173
|
-
}, []);
|
|
15174
|
-
return /*#__PURE__*/ React.createElement($6cc32821e9371a1c$var$MenuContentImpl, _extends({}, props, {
|
|
15175
|
-
ref: composedRefs // we make sure we're not trapping once it's been closed
|
|
15176
|
-
,
|
|
15177
|
-
trapFocus: context.open // make sure to only disable pointer events when open
|
|
15178
|
-
,
|
|
15179
|
-
disableOutsidePointerEvents: context.open,
|
|
15180
|
-
disableOutsideScroll: true // When focus is trapped, a `focusout` event may still happen.
|
|
15181
|
-
,
|
|
15182
|
-
onFocusOutside: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onFocusOutside, (event)=>event.preventDefault()
|
|
15183
|
-
, {
|
|
15184
|
-
checkForDefaultPrevented: false
|
|
15185
|
-
}),
|
|
15186
|
-
onDismiss: ()=>context.onOpenChange(false)
|
|
15187
|
-
}));
|
|
15188
|
-
});
|
|
15189
|
-
const $6cc32821e9371a1c$var$MenuRootContentNonModal = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
|
|
15190
|
-
const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
|
|
15191
|
-
return /*#__PURE__*/ React.createElement($6cc32821e9371a1c$var$MenuContentImpl, _extends({}, props, {
|
|
15192
|
-
ref: forwardedRef,
|
|
15193
|
-
trapFocus: false,
|
|
15194
|
-
disableOutsidePointerEvents: false,
|
|
15195
|
-
disableOutsideScroll: false,
|
|
15196
|
-
onDismiss: ()=>context.onOpenChange(false)
|
|
15197
|
-
}));
|
|
15198
|
-
});
|
|
15199
|
-
/* ---------------------------------------------------------------------------------------------- */ const $6cc32821e9371a1c$var$MenuContentImpl = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
|
|
15200
|
-
const { __scopeMenu: __scopeMenu , loop: loop = false , trapFocus: trapFocus , onOpenAutoFocus: onOpenAutoFocus , onCloseAutoFocus: onCloseAutoFocus , disableOutsidePointerEvents: disableOutsidePointerEvents , onEntryFocus: onEntryFocus , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , onFocusOutside: onFocusOutside , onInteractOutside: onInteractOutside , onDismiss: onDismiss , disableOutsideScroll: disableOutsideScroll , ...contentProps } = props;
|
|
15201
|
-
const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$CONTENT_NAME, __scopeMenu);
|
|
15202
|
-
const rootContext = $6cc32821e9371a1c$var$useMenuRootContext($6cc32821e9371a1c$var$CONTENT_NAME, __scopeMenu);
|
|
15203
|
-
const popperScope = $6cc32821e9371a1c$var$usePopperScope(__scopeMenu);
|
|
15204
|
-
const rovingFocusGroupScope = $6cc32821e9371a1c$var$useRovingFocusGroupScope(__scopeMenu);
|
|
15205
|
-
const getItems = $6cc32821e9371a1c$var$useCollection(__scopeMenu);
|
|
15206
|
-
const [currentItemId, setCurrentItemId] = React.useState(null);
|
|
15207
|
-
const contentRef = React.useRef(null);
|
|
15208
|
-
const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, contentRef, context.onContentChange);
|
|
15209
|
-
const timerRef = React.useRef(0);
|
|
15210
|
-
const searchRef = React.useRef('');
|
|
15211
|
-
const pointerGraceTimerRef = React.useRef(0);
|
|
15212
|
-
const pointerGraceIntentRef = React.useRef(null);
|
|
15213
|
-
const pointerDirRef = React.useRef('right');
|
|
15214
|
-
const lastPointerXRef = React.useRef(0);
|
|
15215
|
-
const ScrollLockWrapper = disableOutsideScroll ? $epM9y$RemoveScroll : React.Fragment;
|
|
15216
|
-
const scrollLockWrapperProps = disableOutsideScroll ? {
|
|
15217
|
-
as: $5e63c961fc1ce211$export$8c6ed5c666ac1360,
|
|
15218
|
-
allowPinchZoom: true
|
|
15219
|
-
} : undefined;
|
|
15220
|
-
const handleTypeaheadSearch = (key)=>{
|
|
15221
|
-
var _items$find, _items$find2;
|
|
15222
|
-
const search = searchRef.current + key;
|
|
15223
|
-
const items = getItems().filter((item)=>!item.disabled
|
|
15224
|
-
);
|
|
15225
|
-
const currentItem = document.activeElement;
|
|
15226
|
-
const currentMatch = (_items$find = items.find((item)=>item.ref.current === currentItem
|
|
15227
|
-
)) === null || _items$find === void 0 ? void 0 : _items$find.textValue;
|
|
15228
|
-
const values = items.map((item)=>item.textValue
|
|
15229
|
-
);
|
|
15230
|
-
const nextMatch = $6cc32821e9371a1c$var$getNextMatch(values, search, currentMatch);
|
|
15231
|
-
const newItem = (_items$find2 = items.find((item)=>item.textValue === nextMatch
|
|
15232
|
-
)) === null || _items$find2 === void 0 ? void 0 : _items$find2.ref.current; // Reset `searchRef` 1 second after it was last updated
|
|
15233
|
-
(function updateSearch(value) {
|
|
15234
|
-
searchRef.current = value;
|
|
15235
|
-
window.clearTimeout(timerRef.current);
|
|
15236
|
-
if (value !== '') timerRef.current = window.setTimeout(()=>updateSearch('')
|
|
15237
|
-
, 1000);
|
|
15238
|
-
})(search);
|
|
15239
|
-
if (newItem) /**
|
|
15240
|
-
* Imperative focus during keydown is risky so we prevent React's batching updates
|
|
15241
|
-
* to avoid potential bugs. See: https://github.com/facebook/react/issues/20332
|
|
15242
|
-
*/ setTimeout(()=>newItem.focus()
|
|
15243
|
-
);
|
|
15244
|
-
};
|
|
15245
|
-
React.useEffect(()=>{
|
|
15246
|
-
return ()=>window.clearTimeout(timerRef.current)
|
|
15247
|
-
;
|
|
15248
|
-
}, []); // Make sure the whole tree has focus guards as our `MenuContent` may be
|
|
15249
|
-
// the last element in the DOM (beacuse of the `Portal`)
|
|
15250
|
-
$3db38b7d1fb3fe6a$export$b7ece24a22aeda8c();
|
|
15251
|
-
const isPointerMovingToSubmenu = React.useCallback((event)=>{
|
|
15252
|
-
var _pointerGraceIntentRe, _pointerGraceIntentRe2;
|
|
15253
|
-
const isMovingTowards = pointerDirRef.current === ((_pointerGraceIntentRe = pointerGraceIntentRef.current) === null || _pointerGraceIntentRe === void 0 ? void 0 : _pointerGraceIntentRe.side);
|
|
15254
|
-
return isMovingTowards && $6cc32821e9371a1c$var$isPointerInGraceArea(event, (_pointerGraceIntentRe2 = pointerGraceIntentRef.current) === null || _pointerGraceIntentRe2 === void 0 ? void 0 : _pointerGraceIntentRe2.area);
|
|
15255
|
-
}, []);
|
|
15256
|
-
return /*#__PURE__*/ React.createElement($6cc32821e9371a1c$var$MenuContentProvider, {
|
|
15257
|
-
scope: __scopeMenu,
|
|
15258
|
-
searchRef: searchRef,
|
|
15259
|
-
onItemEnter: React.useCallback((event)=>{
|
|
15260
|
-
if (isPointerMovingToSubmenu(event)) event.preventDefault();
|
|
15261
|
-
}, [
|
|
15262
|
-
isPointerMovingToSubmenu
|
|
15263
|
-
]),
|
|
15264
|
-
onItemLeave: React.useCallback((event)=>{
|
|
15265
|
-
var _contentRef$current;
|
|
15266
|
-
if (isPointerMovingToSubmenu(event)) return;
|
|
15267
|
-
(_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 || _contentRef$current.focus();
|
|
15268
|
-
setCurrentItemId(null);
|
|
15269
|
-
}, [
|
|
15270
|
-
isPointerMovingToSubmenu
|
|
15271
|
-
]),
|
|
15272
|
-
onTriggerLeave: React.useCallback((event)=>{
|
|
15273
|
-
if (isPointerMovingToSubmenu(event)) event.preventDefault();
|
|
15274
|
-
}, [
|
|
15275
|
-
isPointerMovingToSubmenu
|
|
15276
|
-
]),
|
|
15277
|
-
pointerGraceTimerRef: pointerGraceTimerRef,
|
|
15278
|
-
onPointerGraceIntentChange: React.useCallback((intent)=>{
|
|
15279
|
-
pointerGraceIntentRef.current = intent;
|
|
15280
|
-
}, [])
|
|
15281
|
-
}, /*#__PURE__*/ React.createElement(ScrollLockWrapper, scrollLockWrapperProps, /*#__PURE__*/ React.createElement($d3863c46a17e8a28$export$20e40289641fbbb6, {
|
|
15282
|
-
asChild: true,
|
|
15283
|
-
trapped: trapFocus,
|
|
15284
|
-
onMountAutoFocus: $e42e1063c40fb3ef$export$b9ecd428b558ff10(onOpenAutoFocus, (event)=>{
|
|
15285
|
-
var _contentRef$current2;
|
|
15286
|
-
// when opening, explicitly focus the content area only and leave
|
|
15287
|
-
// `onEntryFocus` in control of focusing first item
|
|
15288
|
-
event.preventDefault();
|
|
15289
|
-
(_contentRef$current2 = contentRef.current) === null || _contentRef$current2 === void 0 || _contentRef$current2.focus();
|
|
15290
|
-
}),
|
|
15291
|
-
onUnmountAutoFocus: onCloseAutoFocus
|
|
15292
|
-
}, /*#__PURE__*/ React.createElement($5cb92bef7577960e$export$177fb62ff3ec1f22, {
|
|
15293
|
-
asChild: true,
|
|
15294
|
-
disableOutsidePointerEvents: disableOutsidePointerEvents,
|
|
15295
|
-
onEscapeKeyDown: onEscapeKeyDown,
|
|
15296
|
-
onPointerDownOutside: onPointerDownOutside,
|
|
15297
|
-
onFocusOutside: onFocusOutside,
|
|
15298
|
-
onInteractOutside: onInteractOutside,
|
|
15299
|
-
onDismiss: onDismiss
|
|
15300
|
-
}, /*#__PURE__*/ React.createElement($d7bdfb9eb0fdf311$export$be92b6f5f03c0fe9, _extends({
|
|
15301
|
-
asChild: true
|
|
15302
|
-
}, rovingFocusGroupScope, {
|
|
15303
|
-
dir: rootContext.dir,
|
|
15304
|
-
orientation: "vertical",
|
|
15305
|
-
loop: loop,
|
|
15306
|
-
currentTabStopId: currentItemId,
|
|
15307
|
-
onCurrentTabStopIdChange: setCurrentItemId,
|
|
15308
|
-
onEntryFocus: $e42e1063c40fb3ef$export$b9ecd428b558ff10(onEntryFocus, (event)=>{
|
|
15309
|
-
// only focus first item when using keyboard
|
|
15310
|
-
if (!rootContext.isUsingKeyboardRef.current) event.preventDefault();
|
|
15311
|
-
})
|
|
15312
|
-
}), /*#__PURE__*/ React.createElement($cf1ac5d9fe0e8206$export$7c6e2c02157bb7d2, _extends({
|
|
15313
|
-
role: "menu",
|
|
15314
|
-
"aria-orientation": "vertical",
|
|
15315
|
-
"data-state": $6cc32821e9371a1c$var$getOpenState(context.open),
|
|
15316
|
-
"data-radix-menu-content": "",
|
|
15317
|
-
dir: rootContext.dir
|
|
15318
|
-
}, popperScope, contentProps, {
|
|
15319
|
-
ref: composedRefs,
|
|
15320
|
-
style: {
|
|
15321
|
-
outline: 'none',
|
|
15322
|
-
...contentProps.style
|
|
15323
|
-
},
|
|
15324
|
-
onKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(contentProps.onKeyDown, (event)=>{
|
|
15325
|
-
// submenu key events bubble through portals. We only care about keys in this menu.
|
|
15326
|
-
const target = event.target;
|
|
15327
|
-
const isKeyDownInside = target.closest('[data-radix-menu-content]') === event.currentTarget;
|
|
15328
|
-
const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
|
|
15329
|
-
const isCharacterKey = event.key.length === 1;
|
|
15330
|
-
if (isKeyDownInside) {
|
|
15331
|
-
// menus should not be navigated using tab key so we prevent it
|
|
15332
|
-
if (event.key === 'Tab') event.preventDefault();
|
|
15333
|
-
if (!isModifierKey && isCharacterKey) handleTypeaheadSearch(event.key);
|
|
15334
|
-
} // focus first/last item based on key pressed
|
|
15335
|
-
const content = contentRef.current;
|
|
15336
|
-
if (event.target !== content) return;
|
|
15337
|
-
if (!$6cc32821e9371a1c$var$FIRST_LAST_KEYS.includes(event.key)) return;
|
|
15338
|
-
event.preventDefault();
|
|
15339
|
-
const items = getItems().filter((item)=>!item.disabled
|
|
15340
|
-
);
|
|
15341
|
-
const candidateNodes = items.map((item)=>item.ref.current
|
|
15342
|
-
);
|
|
15343
|
-
if ($6cc32821e9371a1c$var$LAST_KEYS.includes(event.key)) candidateNodes.reverse();
|
|
15344
|
-
$6cc32821e9371a1c$var$focusFirst(candidateNodes);
|
|
15345
|
-
}),
|
|
15346
|
-
onBlur: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onBlur, (event)=>{
|
|
15347
|
-
// clear search buffer when leaving the menu
|
|
15348
|
-
if (!event.currentTarget.contains(event.target)) {
|
|
15349
|
-
window.clearTimeout(timerRef.current);
|
|
15350
|
-
searchRef.current = '';
|
|
15351
|
-
}
|
|
15352
|
-
}),
|
|
15353
|
-
onPointerMove: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerMove, $6cc32821e9371a1c$var$whenMouse((event)=>{
|
|
15354
|
-
const target = event.target;
|
|
15355
|
-
const pointerXHasChanged = lastPointerXRef.current !== event.clientX; // We don't use `event.movementX` for this check because Safari will
|
|
15356
|
-
// always return `0` on a pointer event.
|
|
15357
|
-
if (event.currentTarget.contains(target) && pointerXHasChanged) {
|
|
15358
|
-
const newDir = event.clientX > lastPointerXRef.current ? 'right' : 'left';
|
|
15359
|
-
pointerDirRef.current = newDir;
|
|
15360
|
-
lastPointerXRef.current = event.clientX;
|
|
15361
|
-
}
|
|
15362
|
-
}))
|
|
15363
|
-
})))))));
|
|
15364
|
-
});
|
|
15365
|
-
/* -------------------------------------------------------------------------------------------------
|
|
15366
|
-
* MenuItem
|
|
15367
|
-
* -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$ITEM_NAME = 'MenuItem';
|
|
15368
|
-
const $6cc32821e9371a1c$var$ITEM_SELECT = 'menu.itemSelect';
|
|
15369
|
-
const $6cc32821e9371a1c$export$2ce376c2cc3355c8 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
|
|
15370
|
-
const { disabled: disabled = false , onSelect: onSelect , ...itemProps } = props;
|
|
15371
|
-
const ref = React.useRef(null);
|
|
15372
|
-
const rootContext = $6cc32821e9371a1c$var$useMenuRootContext($6cc32821e9371a1c$var$ITEM_NAME, props.__scopeMenu);
|
|
15373
|
-
const contentContext = $6cc32821e9371a1c$var$useMenuContentContext($6cc32821e9371a1c$var$ITEM_NAME, props.__scopeMenu);
|
|
15374
|
-
const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref);
|
|
15375
|
-
const isPointerDownRef = React.useRef(false);
|
|
15376
|
-
const handleSelect = ()=>{
|
|
15377
|
-
const menuItem = ref.current;
|
|
15378
|
-
if (!disabled && menuItem) {
|
|
15379
|
-
const itemSelectEvent = new CustomEvent($6cc32821e9371a1c$var$ITEM_SELECT, {
|
|
15380
|
-
bubbles: true,
|
|
15381
|
-
cancelable: true
|
|
15382
|
-
});
|
|
15383
|
-
menuItem.addEventListener($6cc32821e9371a1c$var$ITEM_SELECT, (event)=>onSelect === null || onSelect === void 0 ? void 0 : onSelect(event)
|
|
15384
|
-
, {
|
|
15385
|
-
once: true
|
|
15386
|
-
});
|
|
15387
|
-
$8927f6f2acc4f386$export$6d1a0317bde7de7f(menuItem, itemSelectEvent);
|
|
15388
|
-
if (itemSelectEvent.defaultPrevented) isPointerDownRef.current = false;
|
|
15389
|
-
else rootContext.onClose();
|
|
15390
|
-
}
|
|
15391
|
-
};
|
|
15392
|
-
return /*#__PURE__*/ React.createElement($6cc32821e9371a1c$var$MenuItemImpl, _extends({}, itemProps, {
|
|
15393
|
-
ref: composedRefs,
|
|
15394
|
-
disabled: disabled,
|
|
15395
|
-
onClick: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onClick, handleSelect),
|
|
15396
|
-
onPointerDown: (event)=>{
|
|
15397
|
-
var _props$onPointerDown;
|
|
15398
|
-
(_props$onPointerDown = props.onPointerDown) === null || _props$onPointerDown === void 0 || _props$onPointerDown.call(props, event);
|
|
15399
|
-
isPointerDownRef.current = true;
|
|
15400
|
-
},
|
|
15401
|
-
onPointerUp: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerUp, (event)=>{
|
|
15402
|
-
var _event$currentTarget;
|
|
15403
|
-
// Pointer down can move to a different menu item which should activate it on pointer up.
|
|
15404
|
-
// We dispatch a click for selection to allow composition with click based triggers and to
|
|
15405
|
-
// prevent Firefox from getting stuck in text selection mode when the menu closes.
|
|
15406
|
-
if (!isPointerDownRef.current) (_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 || _event$currentTarget.click();
|
|
15407
|
-
}),
|
|
15408
|
-
onKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onKeyDown, (event)=>{
|
|
15409
|
-
const isTypingAhead = contentContext.searchRef.current !== '';
|
|
15410
|
-
if (disabled || isTypingAhead && event.key === ' ') return;
|
|
15411
|
-
if ($6cc32821e9371a1c$var$SELECTION_KEYS.includes(event.key)) {
|
|
15412
|
-
event.currentTarget.click();
|
|
15413
|
-
/**
|
|
15414
|
-
* We prevent default browser behaviour for selection keys as they should trigger
|
|
15415
|
-
* a selection only:
|
|
15416
|
-
* - prevents space from scrolling the page.
|
|
15417
|
-
* - if keydown causes focus to move, prevents keydown from firing on the new target.
|
|
15418
|
-
*/ event.preventDefault();
|
|
15419
|
-
}
|
|
15420
|
-
})
|
|
15421
|
-
}));
|
|
15422
|
-
});
|
|
15423
|
-
/* ---------------------------------------------------------------------------------------------- */ const $6cc32821e9371a1c$var$MenuItemImpl = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
|
|
15424
|
-
const { __scopeMenu: __scopeMenu , disabled: disabled = false , textValue: textValue , ...itemProps } = props;
|
|
15425
|
-
const contentContext = $6cc32821e9371a1c$var$useMenuContentContext($6cc32821e9371a1c$var$ITEM_NAME, __scopeMenu);
|
|
15426
|
-
const rovingFocusGroupScope = $6cc32821e9371a1c$var$useRovingFocusGroupScope(__scopeMenu);
|
|
15427
|
-
const ref = React.useRef(null);
|
|
15428
|
-
const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref);
|
|
15429
|
-
const [isFocused, setIsFocused] = React.useState(false); // get the item's `.textContent` as default strategy for typeahead `textValue`
|
|
15430
|
-
const [textContent, setTextContent] = React.useState('');
|
|
15431
|
-
React.useEffect(()=>{
|
|
15432
|
-
const menuItem = ref.current;
|
|
15433
|
-
if (menuItem) {
|
|
15434
|
-
var _menuItem$textContent;
|
|
15435
|
-
setTextContent(((_menuItem$textContent = menuItem.textContent) !== null && _menuItem$textContent !== void 0 ? _menuItem$textContent : '').trim());
|
|
15436
|
-
}
|
|
15437
|
-
}, [
|
|
15438
|
-
itemProps.children
|
|
15439
|
-
]);
|
|
15440
|
-
return /*#__PURE__*/ React.createElement($6cc32821e9371a1c$var$Collection.ItemSlot, {
|
|
15441
|
-
scope: __scopeMenu,
|
|
15442
|
-
disabled: disabled,
|
|
15443
|
-
textValue: textValue !== null && textValue !== void 0 ? textValue : textContent
|
|
15444
|
-
}, /*#__PURE__*/ React.createElement($d7bdfb9eb0fdf311$export$6d08773d2e66f8f2, _extends({
|
|
15445
|
-
asChild: true
|
|
15446
|
-
}, rovingFocusGroupScope, {
|
|
15447
|
-
focusable: !disabled
|
|
15448
|
-
}), /*#__PURE__*/ React.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({
|
|
15449
|
-
role: "menuitem",
|
|
15450
|
-
"data-highlighted": isFocused ? '' : undefined,
|
|
15451
|
-
"aria-disabled": disabled || undefined,
|
|
15452
|
-
"data-disabled": disabled ? '' : undefined
|
|
15453
|
-
}, itemProps, {
|
|
15454
|
-
ref: composedRefs,
|
|
15455
|
-
onPointerMove: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerMove, $6cc32821e9371a1c$var$whenMouse((event)=>{
|
|
15456
|
-
if (disabled) contentContext.onItemLeave(event);
|
|
15457
|
-
else {
|
|
15458
|
-
contentContext.onItemEnter(event);
|
|
15459
|
-
if (!event.defaultPrevented) {
|
|
15460
|
-
const item = event.currentTarget;
|
|
15461
|
-
item.focus();
|
|
15462
|
-
}
|
|
15463
|
-
}
|
|
15464
|
-
})),
|
|
15465
|
-
onPointerLeave: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerLeave, $6cc32821e9371a1c$var$whenMouse((event)=>contentContext.onItemLeave(event)
|
|
15466
|
-
)),
|
|
15467
|
-
onFocus: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onFocus, ()=>setIsFocused(true)
|
|
15468
|
-
),
|
|
15469
|
-
onBlur: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onBlur, ()=>setIsFocused(false)
|
|
15470
|
-
)
|
|
15471
|
-
}))));
|
|
15472
|
-
});
|
|
15473
|
-
/* -------------------------------------------------------------------------------------------------
|
|
15474
|
-
* MenuRadioGroup
|
|
15475
|
-
* -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$RADIO_GROUP_NAME = 'MenuRadioGroup';
|
|
15476
|
-
$6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$RADIO_GROUP_NAME, {
|
|
15477
|
-
value: undefined,
|
|
15478
|
-
onValueChange: ()=>{}
|
|
15479
|
-
});
|
|
15480
|
-
/* -------------------------------------------------------------------------------------------------
|
|
15481
|
-
* MenuItemIndicator
|
|
15482
|
-
* -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$ITEM_INDICATOR_NAME = 'MenuItemIndicator';
|
|
15483
|
-
$6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$ITEM_INDICATOR_NAME, {
|
|
15484
|
-
checked: false
|
|
15485
|
-
});
|
|
15486
|
-
const $6cc32821e9371a1c$export$1cec7dcdd713e220 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
|
|
15487
|
-
const { __scopeMenu: __scopeMenu , ...separatorProps } = props;
|
|
15488
|
-
return /*#__PURE__*/ React.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({
|
|
15489
|
-
role: "separator",
|
|
15490
|
-
"aria-orientation": "horizontal"
|
|
15491
|
-
}, separatorProps, {
|
|
15492
|
-
ref: forwardedRef
|
|
15493
|
-
}));
|
|
15494
|
-
});
|
|
15495
|
-
const $6cc32821e9371a1c$export$bcdda4773debf5fa = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
|
|
15496
|
-
const { __scopeMenu: __scopeMenu , ...arrowProps } = props;
|
|
15497
|
-
const popperScope = $6cc32821e9371a1c$var$usePopperScope(__scopeMenu);
|
|
15498
|
-
return /*#__PURE__*/ React.createElement($cf1ac5d9fe0e8206$export$21b07c8f274aebd5, _extends({}, popperScope, arrowProps, {
|
|
15499
|
-
ref: forwardedRef
|
|
15500
|
-
}));
|
|
15501
|
-
});
|
|
15502
|
-
/* -------------------------------------------------------------------------------------------------
|
|
15503
|
-
* MenuSub
|
|
15504
|
-
* -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$SUB_NAME = 'MenuSub';
|
|
15505
|
-
$6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$SUB_NAME);
|
|
15506
|
-
/* -----------------------------------------------------------------------------------------------*/ function $6cc32821e9371a1c$var$getOpenState(open) {
|
|
15507
|
-
return open ? 'open' : 'closed';
|
|
15508
|
-
}
|
|
15509
|
-
function $6cc32821e9371a1c$var$focusFirst(candidates) {
|
|
15510
|
-
const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
|
|
15511
|
-
for (const candidate of candidates){
|
|
15512
|
-
// if focus is already where we want to go, we don't want to keep going through the candidates
|
|
15513
|
-
if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
|
|
15514
|
-
candidate.focus();
|
|
15515
|
-
if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
|
|
15516
|
-
}
|
|
15517
|
-
}
|
|
15518
|
-
/**
|
|
15519
|
-
* Wraps an array around itself at a given start index
|
|
15520
|
-
* Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`
|
|
15521
|
-
*/ function $6cc32821e9371a1c$var$wrapArray(array, startIndex) {
|
|
15522
|
-
return array.map((_, index)=>array[(startIndex + index) % array.length]
|
|
15523
|
-
);
|
|
15524
|
-
}
|
|
15525
|
-
/**
|
|
15526
|
-
* This is the "meat" of the typeahead matching logic. It takes in all the values,
|
|
15527
|
-
* the search and the current match, and returns the next match (or `undefined`).
|
|
15528
|
-
*
|
|
15529
|
-
* We normalize the search because if a user has repeatedly pressed a character,
|
|
15530
|
-
* we want the exact same behavior as if we only had that one character
|
|
15531
|
-
* (ie. cycle through options starting with that character)
|
|
15532
|
-
*
|
|
15533
|
-
* We also reorder the values by wrapping the array around the current match.
|
|
15534
|
-
* This is so we always look forward from the current match, and picking the first
|
|
15535
|
-
* match will always be the correct one.
|
|
15536
|
-
*
|
|
15537
|
-
* Finally, if the normalized search is exactly one character, we exclude the
|
|
15538
|
-
* current match from the values because otherwise it would be the first to match always
|
|
15539
|
-
* and focus would never move. This is as opposed to the regular case, where we
|
|
15540
|
-
* don't want focus to move if the current match still matches.
|
|
15541
|
-
*/ function $6cc32821e9371a1c$var$getNextMatch(values, search, currentMatch) {
|
|
15542
|
-
const isRepeated = search.length > 1 && Array.from(search).every((char)=>char === search[0]
|
|
15543
|
-
);
|
|
15544
|
-
const normalizedSearch = isRepeated ? search[0] : search;
|
|
15545
|
-
const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
|
|
15546
|
-
let wrappedValues = $6cc32821e9371a1c$var$wrapArray(values, Math.max(currentMatchIndex, 0));
|
|
15547
|
-
const excludeCurrentMatch = normalizedSearch.length === 1;
|
|
15548
|
-
if (excludeCurrentMatch) wrappedValues = wrappedValues.filter((v)=>v !== currentMatch
|
|
15549
|
-
);
|
|
15550
|
-
const nextMatch = wrappedValues.find((value)=>value.toLowerCase().startsWith(normalizedSearch.toLowerCase())
|
|
15551
|
-
);
|
|
15552
|
-
return nextMatch !== currentMatch ? nextMatch : undefined;
|
|
15553
|
-
}
|
|
15554
|
-
// Determine if a point is inside of a polygon.
|
|
15555
|
-
// Based on https://github.com/substack/point-in-polygon
|
|
15556
|
-
function $6cc32821e9371a1c$var$isPointInPolygon(point, polygon) {
|
|
15557
|
-
const { x: x , y: y } = point;
|
|
15558
|
-
let inside = false;
|
|
15559
|
-
for(let i = 0, j = polygon.length - 1; i < polygon.length; j = i++){
|
|
15560
|
-
const xi = polygon[i].x;
|
|
15561
|
-
const yi = polygon[i].y;
|
|
15562
|
-
const xj = polygon[j].x;
|
|
15563
|
-
const yj = polygon[j].y; // prettier-ignore
|
|
15564
|
-
const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
|
|
15565
|
-
if (intersect) inside = !inside;
|
|
15566
|
-
}
|
|
15567
|
-
return inside;
|
|
15568
|
-
}
|
|
15569
|
-
function $6cc32821e9371a1c$var$isPointerInGraceArea(event, area) {
|
|
15570
|
-
if (!area) return false;
|
|
15571
|
-
const cursorPos = {
|
|
15572
|
-
x: event.clientX,
|
|
15573
|
-
y: event.clientY
|
|
15574
|
-
};
|
|
15575
|
-
return $6cc32821e9371a1c$var$isPointInPolygon(cursorPos, area);
|
|
15576
|
-
}
|
|
15577
|
-
function $6cc32821e9371a1c$var$whenMouse(handler) {
|
|
15578
|
-
return (event)=>event.pointerType === 'mouse' ? handler(event) : undefined
|
|
15579
|
-
;
|
|
15580
|
-
}
|
|
15581
|
-
const $6cc32821e9371a1c$export$be92b6f5f03c0fe9 = $6cc32821e9371a1c$export$d9b273488cd8ce6f;
|
|
15582
|
-
const $6cc32821e9371a1c$export$b688253958b8dfe7 = $6cc32821e9371a1c$export$9fa5ebd18bee4d43;
|
|
15583
|
-
const $6cc32821e9371a1c$export$7c6e2c02157bb7d2 = $6cc32821e9371a1c$export$479f0f2f71193efe;
|
|
15584
|
-
const $6cc32821e9371a1c$export$6d08773d2e66f8f2 = $6cc32821e9371a1c$export$2ce376c2cc3355c8;
|
|
15585
|
-
const $6cc32821e9371a1c$export$1ff3c3f08ae963c0 = $6cc32821e9371a1c$export$1cec7dcdd713e220;
|
|
15586
|
-
const $6cc32821e9371a1c$export$21b07c8f274aebd5 = $6cc32821e9371a1c$export$bcdda4773debf5fa;
|
|
15587
|
-
|
|
15588
|
-
/* -------------------------------------------------------------------------------------------------
|
|
15589
|
-
* DropdownMenu
|
|
15590
|
-
* -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$DROPDOWN_MENU_NAME = 'DropdownMenu';
|
|
15591
|
-
const [$d08ef79370b62062$var$createDropdownMenuContext, $d08ef79370b62062$export$c0623cd925aeb687] = $c512c27ab02ef895$export$50c7b4e9d9f19c1($d08ef79370b62062$var$DROPDOWN_MENU_NAME, [
|
|
15592
|
-
$6cc32821e9371a1c$export$4027731b685e72eb
|
|
15593
|
-
]);
|
|
15594
|
-
const $d08ef79370b62062$var$useMenuScope = $6cc32821e9371a1c$export$4027731b685e72eb();
|
|
15595
|
-
const [$d08ef79370b62062$var$DropdownMenuProvider, $d08ef79370b62062$var$useDropdownMenuContext] = $d08ef79370b62062$var$createDropdownMenuContext($d08ef79370b62062$var$DROPDOWN_MENU_NAME);
|
|
15596
|
-
const $d08ef79370b62062$export$e44a253a59704894 = (props)=>{
|
|
15597
|
-
const { __scopeDropdownMenu: __scopeDropdownMenu , children: children , dir: dir , open: openProp , defaultOpen: defaultOpen , onOpenChange: onOpenChange , modal: modal = true } = props;
|
|
15598
|
-
const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
|
|
15599
|
-
const triggerRef = React.useRef(null);
|
|
15600
|
-
const [open = false, setOpen] = $71cd76cc60e0454e$export$6f32135080cb4c3({
|
|
15601
|
-
prop: openProp,
|
|
15602
|
-
defaultProp: defaultOpen,
|
|
15603
|
-
onChange: onOpenChange
|
|
15604
|
-
});
|
|
15605
|
-
return /*#__PURE__*/ React.createElement($d08ef79370b62062$var$DropdownMenuProvider, {
|
|
15606
|
-
scope: __scopeDropdownMenu,
|
|
15607
|
-
triggerId: $1746a345f3d73bb7$export$f680877a34711e37(),
|
|
15608
|
-
triggerRef: triggerRef,
|
|
15609
|
-
contentId: $1746a345f3d73bb7$export$f680877a34711e37(),
|
|
15610
|
-
open: open,
|
|
15611
|
-
onOpenChange: setOpen,
|
|
15612
|
-
onOpenToggle: React.useCallback(()=>setOpen((prevOpen)=>!prevOpen
|
|
15613
|
-
)
|
|
15614
|
-
, [
|
|
15615
|
-
setOpen
|
|
15616
|
-
]),
|
|
15617
|
-
modal: modal
|
|
15618
|
-
}, /*#__PURE__*/ React.createElement($6cc32821e9371a1c$export$be92b6f5f03c0fe9, _extends({}, menuScope, {
|
|
15619
|
-
open: open,
|
|
15620
|
-
onOpenChange: setOpen,
|
|
15621
|
-
dir: dir,
|
|
15622
|
-
modal: modal
|
|
15623
|
-
}), children));
|
|
15624
|
-
};
|
|
15625
|
-
/* -------------------------------------------------------------------------------------------------
|
|
15626
|
-
* DropdownMenuTrigger
|
|
15627
|
-
* -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$TRIGGER_NAME = 'DropdownMenuTrigger';
|
|
15628
|
-
const $d08ef79370b62062$export$d2469213b3befba9 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
|
|
15629
|
-
const { __scopeDropdownMenu: __scopeDropdownMenu , disabled: disabled = false , ...triggerProps } = props;
|
|
15630
|
-
const context = $d08ef79370b62062$var$useDropdownMenuContext($d08ef79370b62062$var$TRIGGER_NAME, __scopeDropdownMenu);
|
|
15631
|
-
const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
|
|
15632
|
-
return /*#__PURE__*/ React.createElement($6cc32821e9371a1c$export$b688253958b8dfe7, _extends({
|
|
15633
|
-
asChild: true
|
|
15634
|
-
}, menuScope), /*#__PURE__*/ React.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.button, _extends({
|
|
15635
|
-
type: "button",
|
|
15636
|
-
id: context.triggerId,
|
|
15637
|
-
"aria-haspopup": "menu",
|
|
15638
|
-
"aria-expanded": context.open,
|
|
15639
|
-
"aria-controls": context.open ? context.contentId : undefined,
|
|
15640
|
-
"data-state": context.open ? 'open' : 'closed',
|
|
15641
|
-
"data-disabled": disabled ? '' : undefined,
|
|
15642
|
-
disabled: disabled
|
|
15643
|
-
}, triggerProps, {
|
|
15644
|
-
ref: $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, context.triggerRef),
|
|
15645
|
-
onPointerDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerDown, (event)=>{
|
|
15646
|
-
// only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
|
|
15647
|
-
// but not when the control key is pressed (avoiding MacOS right click)
|
|
15648
|
-
if (!disabled && event.button === 0 && event.ctrlKey === false) {
|
|
15649
|
-
context.onOpenToggle(); // prevent trigger focusing when opening
|
|
15650
|
-
// this allows the content to be given focus without competition
|
|
15651
|
-
if (!context.open) event.preventDefault();
|
|
15652
|
-
}
|
|
15653
|
-
}),
|
|
15654
|
-
onKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onKeyDown, (event)=>{
|
|
15655
|
-
if (disabled) return;
|
|
15656
|
-
if ([
|
|
15657
|
-
'Enter',
|
|
15658
|
-
' '
|
|
15659
|
-
].includes(event.key)) context.onOpenToggle();
|
|
15660
|
-
if (event.key === 'ArrowDown') context.onOpenChange(true); // prevent keydown from scrolling window / first focused item to execute
|
|
15661
|
-
// that keydown (inadvertently closing the menu)
|
|
15662
|
-
if ([
|
|
15663
|
-
'Enter',
|
|
15664
|
-
' ',
|
|
15665
|
-
'ArrowDown'
|
|
15666
|
-
].includes(event.key)) event.preventDefault();
|
|
15667
|
-
})
|
|
15668
|
-
})));
|
|
15669
|
-
});
|
|
15670
|
-
/* -------------------------------------------------------------------------------------------------
|
|
15671
|
-
* DropdownMenuContent
|
|
15672
|
-
* -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$CONTENT_NAME = 'DropdownMenuContent';
|
|
15673
|
-
const $d08ef79370b62062$export$6e76d93a37c01248 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
|
|
15674
|
-
const { __scopeDropdownMenu: __scopeDropdownMenu , ...contentProps } = props;
|
|
15675
|
-
const context = $d08ef79370b62062$var$useDropdownMenuContext($d08ef79370b62062$var$CONTENT_NAME, __scopeDropdownMenu);
|
|
15676
|
-
const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
|
|
15677
|
-
const hasInteractedOutsideRef = React.useRef(false);
|
|
15678
|
-
return /*#__PURE__*/ React.createElement($6cc32821e9371a1c$export$7c6e2c02157bb7d2, _extends({
|
|
15679
|
-
id: context.contentId,
|
|
15680
|
-
"aria-labelledby": context.triggerId
|
|
15681
|
-
}, menuScope, contentProps, {
|
|
15682
|
-
ref: forwardedRef,
|
|
15683
|
-
onCloseAutoFocus: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onCloseAutoFocus, (event)=>{
|
|
15684
|
-
var _context$triggerRef$c;
|
|
15685
|
-
if (!hasInteractedOutsideRef.current) (_context$triggerRef$c = context.triggerRef.current) === null || _context$triggerRef$c === void 0 || _context$triggerRef$c.focus();
|
|
15686
|
-
hasInteractedOutsideRef.current = false; // Always prevent auto focus because we either focus manually or want user agent focus
|
|
15687
|
-
event.preventDefault();
|
|
15688
|
-
}),
|
|
15689
|
-
onInteractOutside: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onInteractOutside, (event)=>{
|
|
15690
|
-
const originalEvent = event.detail.originalEvent;
|
|
15691
|
-
const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
|
|
15692
|
-
const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
|
|
15693
|
-
if (!context.modal || isRightClick) hasInteractedOutsideRef.current = true;
|
|
15694
|
-
}),
|
|
15695
|
-
style: {
|
|
15696
|
-
...props.style,
|
|
15697
|
-
'--radix-dropdown-menu-content-transform-origin': 'var(--radix-popper-transform-origin)',
|
|
15698
|
-
'--radix-dropdown-menu-content-available-width': 'var(--radix-popper-available-width)',
|
|
15699
|
-
'--radix-dropdown-menu-content-available-height': 'var(--radix-popper-available-height)',
|
|
15700
|
-
'--radix-dropdown-menu-trigger-width': 'var(--radix-popper-anchor-width)',
|
|
15701
|
-
'--radix-dropdown-menu-trigger-height': 'var(--radix-popper-anchor-height)'
|
|
15702
|
-
}
|
|
15703
|
-
}));
|
|
15704
|
-
});
|
|
15705
|
-
const $d08ef79370b62062$export$ed97964d1871885d = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
|
|
15706
|
-
const { __scopeDropdownMenu: __scopeDropdownMenu , ...itemProps } = props;
|
|
15707
|
-
const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
|
|
15708
|
-
return /*#__PURE__*/ React.createElement($6cc32821e9371a1c$export$6d08773d2e66f8f2, _extends({}, menuScope, itemProps, {
|
|
15709
|
-
ref: forwardedRef
|
|
15710
|
-
}));
|
|
15711
|
-
});
|
|
15712
|
-
const $d08ef79370b62062$export$da160178fd3bc7e9 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
|
|
15713
|
-
const { __scopeDropdownMenu: __scopeDropdownMenu , ...separatorProps } = props;
|
|
15714
|
-
const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
|
|
15715
|
-
return /*#__PURE__*/ React.createElement($6cc32821e9371a1c$export$1ff3c3f08ae963c0, _extends({}, menuScope, separatorProps, {
|
|
15716
|
-
ref: forwardedRef
|
|
15717
|
-
}));
|
|
15718
|
-
});
|
|
15719
|
-
const $d08ef79370b62062$export$34b8980744021ec5 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
|
|
15720
|
-
const { __scopeDropdownMenu: __scopeDropdownMenu , ...arrowProps } = props;
|
|
15721
|
-
const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
|
|
15722
|
-
return /*#__PURE__*/ React.createElement($6cc32821e9371a1c$export$21b07c8f274aebd5, _extends({}, menuScope, arrowProps, {
|
|
15723
|
-
ref: forwardedRef
|
|
15724
|
-
}));
|
|
15725
|
-
});
|
|
15726
|
-
/* -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$export$be92b6f5f03c0fe9 = $d08ef79370b62062$export$e44a253a59704894;
|
|
15727
|
-
const $d08ef79370b62062$export$41fb9f06171c75f4 = $d08ef79370b62062$export$d2469213b3befba9;
|
|
15728
|
-
const $d08ef79370b62062$export$7c6e2c02157bb7d2 = $d08ef79370b62062$export$6e76d93a37c01248;
|
|
15729
|
-
const $d08ef79370b62062$export$6d08773d2e66f8f2 = $d08ef79370b62062$export$ed97964d1871885d;
|
|
15730
|
-
const $d08ef79370b62062$export$1ff3c3f08ae963c0 = $d08ef79370b62062$export$da160178fd3bc7e9;
|
|
15731
|
-
const $d08ef79370b62062$export$21b07c8f274aebd5 = $d08ef79370b62062$export$34b8980744021ec5;
|
|
15732
|
-
|
|
15733
|
-
const borderStyles = [
|
|
15734
|
-
'tw-border-solid',
|
|
15735
|
-
'tw-border',
|
|
15736
|
-
'tw-rounded-sm',
|
|
15737
|
-
'tw-border-sq-light-gray',
|
|
15738
|
-
'dark:tw-border-gray-700',
|
|
15739
|
-
].join(' ');
|
|
15740
|
-
const bgStyles = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
|
|
15741
|
-
const disabledClasses = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
|
|
15742
|
-
const ButtonWithDropdown = ({ dropdownItems, triggerIcon, tooltipText, id, extraClassNames, testId, tooltipTestId, tooltipDelay, tooltipPlacement, disabled = false, align = 'end', placement = 'bottom', placementOffset = 2, alignOffset = -5, hasArrow = false, onOpenChange, isHtmlTooltip = false, isOpen, }) => {
|
|
15743
|
-
let tooltipData = undefined;
|
|
15744
|
-
if (tooltipText) {
|
|
15745
|
-
tooltipData = {
|
|
15746
|
-
'data-qtip-text': tooltipText,
|
|
15747
|
-
'data-qtip-placement': tooltipPlacement,
|
|
15748
|
-
'data-qtip-is-html': isHtmlTooltip,
|
|
15749
|
-
'data-qtip-testid': tooltipTestId,
|
|
15750
|
-
'data-qtip-delay': tooltipDelay ?? DEFAULT_TOOL_TIP_DELAY,
|
|
15751
|
-
};
|
|
15752
|
-
}
|
|
15753
|
-
return (React__namespace.createElement($d08ef79370b62062$export$be92b6f5f03c0fe9, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange },
|
|
15754
|
-
React__namespace.createElement($d08ef79370b62062$export$41fb9f06171c75f4, { id: id, className: `tw-border-none focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none`, disabled: disabled, "data-testid": testId },
|
|
15755
|
-
React__namespace.createElement("div", { ...tooltipData, className: `tw-bg-transparent tw-flex tw-flex-col tw-items-center focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none ${disabled ? disabledClasses : ''} ${extraClassNames || ''}` }, triggerIcon)),
|
|
15756
|
-
React__namespace.createElement($d08ef79370b62062$export$7c6e2c02157bb7d2, { sideOffset: placementOffset, side: placement, align: align, alignOffset: alignOffset, asChild: true, className: "focus-visible:tw-outline-none tw-outline-none" },
|
|
15757
|
-
React__namespace.createElement("div", { className: bgStyles +
|
|
15758
|
-
' tw-relative tw-z-[1000] tw-min-w-6 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out' +
|
|
15759
|
-
' forceFont data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade ' +
|
|
15760
|
-
borderStyles },
|
|
15761
|
-
hasArrow && (React__namespace.createElement($d08ef79370b62062$export$21b07c8f274aebd5, { asChild: true },
|
|
15762
|
-
React__namespace.createElement("div", { className: " tw-fill-transparent tw-bg-white tw-w-[6px] tw-h-[6px] tw-rotate-45 dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-light-gray dark:tw-border-gray-700 tw-mt-[-2px]" }))),
|
|
15763
|
-
dropdownItems.map((item, index) => (React__namespace.createElement("div", { key: item.label + index },
|
|
15764
|
-
React__namespace.createElement($d08ef79370b62062$export$6d08773d2e66f8f2, { key: item.label + index, onSelect: (e) => {
|
|
15765
|
-
item.onClick(e);
|
|
15766
|
-
}, className: `tw-cursor-pointer tw-flex dark:tw-text-sq-white hover:tw-bg-sq-colored-hover hover:dark:tw-bg-sq-colored-hover-dark tw-leading-none tw-items-center tw-h-[27px] tw-px-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-text-sq-disabled-gray data-[disabled]:tw-pointer-events-none ${item.containerExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled },
|
|
15767
|
-
item.icon && (React__namespace.createElement(Icon, { icon: item.icon, testId: item.iconTestId, type: "text", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" })),
|
|
15768
|
-
React__namespace.createElement("div", { "data-testid": item.labelTestId, className: "tw-text-[13px] tw-ml-1" }, item.label)),
|
|
15769
|
-
item.hasDivider && (React__namespace.createElement($d08ef79370b62062$export$1ff3c3f08ae963c0, { "data-testid": `dropdown-divider-${index}`, className: "tw-h-[1px] tw-bg-sq-light-gray dark:tw-bg-gray-700 tw-my-[8px]" })))))))));
|
|
15770
|
-
};
|
|
15771
|
-
|
|
15772
14937
|
exports.Accordion = Accordion;
|
|
15773
14938
|
exports.Button = Button;
|
|
15774
|
-
exports.ButtonWithDropdown = ButtonWithDropdown;
|
|
15775
|
-
exports.ButtonWithPopover = ButtonWithPopover;
|
|
15776
14939
|
exports.Checkbox = Checkbox;
|
|
15777
14940
|
exports.Icon = Icon;
|
|
15778
14941
|
exports.Modal = Modal;
|