@wistia/ui 0.22.7 → 0.22.9
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/index.d.ts +120 -4
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +180 -75
- package/dist/index.js.map +1 -1
- package/package.json +24 -24
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
|
-
* @license @wistia/ui v0.22.
|
|
3
|
+
* @license @wistia/ui v0.22.9
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -22,7 +22,7 @@ import { Content as Content$1, Root as Root$1, Trigger as Trigger$1 } from "@rad
|
|
|
22
22
|
import { Item, Root as Root$2 } from "@radix-ui/react-radio-group";
|
|
23
23
|
import { differenceEuclidean, easingSmootherstep, formatHex, interpolate, modeHsv, modeLrgb, modeRgb, parseHex, useMode, wcagContrast } from "culori/fn";
|
|
24
24
|
import { Item as Item$1, Root as Root$3 } from "@radix-ui/react-toggle-group";
|
|
25
|
-
import { Close, Content as Content$2, PopoverArrow, Portal as Portal$1, Root as Root$4, Trigger as Trigger$2 } from "@radix-ui/react-popover";
|
|
25
|
+
import { Anchor, Close, Content as Content$2, PopoverArrow as PopoverArrow$1, Portal as Portal$1, Root as Root$4, Trigger as Trigger$2 } from "@radix-ui/react-popover";
|
|
26
26
|
import { Range, Root as Root$5, Thumb, Track } from "@radix-ui/react-slider";
|
|
27
27
|
import * as Ariakit from "@ariakit/react";
|
|
28
28
|
import { matchSorter } from "match-sorter";
|
|
@@ -1410,7 +1410,7 @@ const noOpFn = () => {};
|
|
|
1410
1410
|
//#endregion
|
|
1411
1411
|
//#region src/private/hooks/useEvent/useEvent.ts
|
|
1412
1412
|
const isEventTargetSupported = (eventTarget) => Boolean(typeof eventTarget === "object" && eventTarget?.addEventListener);
|
|
1413
|
-
const useEvent = (eventName, eventHandler, eventTarget = window, eventOptions = {}) => {
|
|
1413
|
+
const useEvent = (eventName, eventHandler, eventTarget = typeof document !== "undefined" ? window : void 0, eventOptions = {}) => {
|
|
1414
1414
|
const savedEventHandler = useRef(void 0);
|
|
1415
1415
|
const savedEventOptions = useRef(void 0);
|
|
1416
1416
|
useEffect(() => {
|
|
@@ -7673,7 +7673,6 @@ const ColorGridOption = ({ value: rawValue, name }) => {
|
|
|
7673
7673
|
const { valueAsHsv, nonDerivedValueAsHex } = useColorPickerState();
|
|
7674
7674
|
const valueAsHex = formatHex(valueAsHsv);
|
|
7675
7675
|
const isSelected = valueAsHex === value;
|
|
7676
|
-
const derivativeIsSelected = !isSelected && nonDerivedValueAsHex === value;
|
|
7677
7676
|
return /* @__PURE__ */ jsx(Tooltip, {
|
|
7678
7677
|
content: name ?? /* @__PURE__ */ jsx("span", {
|
|
7679
7678
|
style: { fontFamily: "var(--wui-typography-family-mono)" },
|
|
@@ -7686,7 +7685,7 @@ const ColorGridOption = ({ value: rawValue, name }) => {
|
|
|
7686
7685
|
tabIndex: -1,
|
|
7687
7686
|
value,
|
|
7688
7687
|
children: /* @__PURE__ */ jsx(ColorSwatch, {
|
|
7689
|
-
derivativeIsSelected,
|
|
7688
|
+
derivativeIsSelected: !isSelected && nonDerivedValueAsHex === value,
|
|
7690
7689
|
isSelected,
|
|
7691
7690
|
value
|
|
7692
7691
|
})
|
|
@@ -7796,7 +7795,6 @@ const ColorListOption = ({ value: rawValue, name }) => {
|
|
|
7796
7795
|
const { valueAsHsv, nonDerivedValueAsHex } = useColorPickerState();
|
|
7797
7796
|
const valueAsHex = formatHex(valueAsHsv);
|
|
7798
7797
|
const isSelected = valueAsHex === value;
|
|
7799
|
-
const derivativeIsSelected = !isSelected && nonDerivedValueAsHex === value;
|
|
7800
7798
|
return /* @__PURE__ */ jsxs(Container$5, {
|
|
7801
7799
|
"aria-label": value,
|
|
7802
7800
|
"aria-selected": valueAsHex === value,
|
|
@@ -7804,7 +7802,7 @@ const ColorListOption = ({ value: rawValue, name }) => {
|
|
|
7804
7802
|
tabIndex: -1,
|
|
7805
7803
|
value,
|
|
7806
7804
|
children: [/* @__PURE__ */ jsx(ColorSwatch, {
|
|
7807
|
-
derivativeIsSelected,
|
|
7805
|
+
derivativeIsSelected: !isSelected && nonDerivedValueAsHex === value,
|
|
7808
7806
|
isSelected,
|
|
7809
7807
|
value
|
|
7810
7808
|
}), /* @__PURE__ */ jsx(ColorNameOrHexCode, {
|
|
@@ -7815,6 +7813,19 @@ const ColorListOption = ({ value: rawValue, name }) => {
|
|
|
7815
7813
|
};
|
|
7816
7814
|
ColorListOption.displayName = "ColorListOption_UI";
|
|
7817
7815
|
//#endregion
|
|
7816
|
+
//#region src/components/ColorPicker/normalizeHexColor.ts
|
|
7817
|
+
/**
|
|
7818
|
+
* A helper to ensure that a given hex code is normalized for all variants (short-hand, missing hex prefix, uppercase)
|
|
7819
|
+
*
|
|
7820
|
+
* @param hexValue
|
|
7821
|
+
* @returns string, a hex code value with a hash prefix followed by 6 hex characters
|
|
7822
|
+
*/
|
|
7823
|
+
const normalizeHexColor = (hexValue) => {
|
|
7824
|
+
const hexValueWithHash = hexValue.startsWith("#") ? hexValue.toLowerCase() : `#${hexValue.toLowerCase()}`;
|
|
7825
|
+
if (hexValueWithHash.length === 4) return `#${hexValueWithHash[1]}${hexValueWithHash[1]}${hexValueWithHash[2]}${hexValueWithHash[2]}${hexValueWithHash[3]}${hexValueWithHash[3]}`;
|
|
7826
|
+
return hexValueWithHash;
|
|
7827
|
+
};
|
|
7828
|
+
//#endregion
|
|
7818
7829
|
//#region src/components/ColorPicker/ColorPicker.tsx
|
|
7819
7830
|
/**
|
|
7820
7831
|
* A composable color picker built from low-level building blocks. Choose the
|
|
@@ -7826,7 +7837,7 @@ ColorListOption.displayName = "ColorListOption_UI";
|
|
|
7826
7837
|
* sensible defaults (brand colors, contrast controls, popover/inline modes).
|
|
7827
7838
|
*/
|
|
7828
7839
|
const ColorPicker = ({ children, colorForComparison = DEFAULT_COLOR_FOR_COMPARISON, minimumContrastRatio = DEFAULT_MIN_CONTRAST, onOpenChange, opacityForContrastCalculation = 1, onValueChange, value }) => {
|
|
7829
|
-
const normalizedValue =
|
|
7840
|
+
const normalizedValue = normalizeHexColor(value);
|
|
7830
7841
|
const handleOpenChange = (isOpen) => {
|
|
7831
7842
|
if (isFunction(onOpenChange)) onOpenChange(isOpen);
|
|
7832
7843
|
};
|
|
@@ -8329,6 +8340,13 @@ const StyledInputContainer = styled.div`
|
|
|
8329
8340
|
transform: translateY(-50%);
|
|
8330
8341
|
}
|
|
8331
8342
|
|
|
8343
|
+
/* Presentational icons shouldn't swallow clicks meant for the input.
|
|
8344
|
+
Scoped to svg so interactive decorations (e.g. IconButton) still work. */
|
|
8345
|
+
svg.wui-input-left-icon,
|
|
8346
|
+
svg.wui-input-right-icon {
|
|
8347
|
+
pointer-events: none;
|
|
8348
|
+
}
|
|
8349
|
+
|
|
8332
8350
|
&:has(.wui-input-left-icon) input,
|
|
8333
8351
|
&:has(.wui-input-left-icon) textarea {
|
|
8334
8352
|
padding-left: 32px;
|
|
@@ -11551,10 +11569,12 @@ const keyToString = (key) => {
|
|
|
11551
11569
|
case "ArrowUp": return "↑";
|
|
11552
11570
|
case "Alt": return "Alt";
|
|
11553
11571
|
case "Cmd":
|
|
11554
|
-
case "Meta":
|
|
11555
|
-
|
|
11556
|
-
if (
|
|
11572
|
+
case "Meta": {
|
|
11573
|
+
const userAgent = typeof document !== "undefined" ? window.navigator.userAgent : "";
|
|
11574
|
+
if (/Mac|iPhone|iPad/.test(userAgent)) return "⌘";
|
|
11575
|
+
if (userAgent.includes("Win")) return "⊞";
|
|
11557
11576
|
return "^";
|
|
11577
|
+
}
|
|
11558
11578
|
case "Ctrl": return "Ctrl";
|
|
11559
11579
|
case "Option": return "⌥";
|
|
11560
11580
|
case "Shift": return "⇧";
|
|
@@ -12111,7 +12131,8 @@ const modalExit = keyframes`
|
|
|
12111
12131
|
transform: translateX(-50%) translateY(calc(var(--wui-modal-translate-y) + 24px));
|
|
12112
12132
|
}
|
|
12113
12133
|
`;
|
|
12114
|
-
const
|
|
12134
|
+
const positionStyleMap = {
|
|
12135
|
+
centered: css`
|
|
12115
12136
|
--wui-modal-screen-offset: var(--wui-space-05);
|
|
12116
12137
|
--wui-modal-translate-y: -50%;
|
|
12117
12138
|
|
|
@@ -12126,8 +12147,8 @@ const centeredModalStyles = css`
|
|
|
12126
12147
|
&[data-state='closed'] {
|
|
12127
12148
|
animation: ${modalExit} var(--wui-motion-duration-03) var(--wui-motion-ease-out);
|
|
12128
12149
|
}
|
|
12129
|
-
|
|
12130
|
-
|
|
12150
|
+
`,
|
|
12151
|
+
"fixed-top": css`
|
|
12131
12152
|
--wui-modal-screen-offset-top: 15vh;
|
|
12132
12153
|
--wui-modal-screen-offset-bottom: 5vh;
|
|
12133
12154
|
--wui-modal-translate-y: 0%;
|
|
@@ -12145,8 +12166,8 @@ const fixedTopModalStyles = css`
|
|
|
12145
12166
|
&[data-state='closed'] {
|
|
12146
12167
|
animation: ${modalExit} var(--wui-motion-duration-03) var(--wui-motion-ease-out);
|
|
12147
12168
|
}
|
|
12148
|
-
|
|
12149
|
-
|
|
12169
|
+
`,
|
|
12170
|
+
"right-side-panel": css`
|
|
12150
12171
|
--wui-modal-screen-offset: var(--wui-space-05);
|
|
12151
12172
|
|
|
12152
12173
|
height: calc(100vh - var(--wui-modal-screen-offset) * 2);
|
|
@@ -12178,11 +12199,7 @@ const rightSidePanelModalStyles = css`
|
|
|
12178
12199
|
}
|
|
12179
12200
|
`} var(--wui-motion-duration-03) var(--wui-motion-ease-in);
|
|
12180
12201
|
}
|
|
12181
|
-
|
|
12182
|
-
const positionStyleMap = {
|
|
12183
|
-
centered: centeredModalStyles,
|
|
12184
|
-
"fixed-top": fixedTopModalStyles,
|
|
12185
|
-
"right-side-panel": rightSidePanelModalStyles
|
|
12202
|
+
`
|
|
12186
12203
|
};
|
|
12187
12204
|
const StyledModalContent = styled(Content$4)`
|
|
12188
12205
|
position: fixed;
|
|
@@ -12334,13 +12351,112 @@ const ModalCallout = ({ title, image, children }) => {
|
|
|
12334
12351
|
};
|
|
12335
12352
|
ModalCallout.displayName = "ModalCallout_UI";
|
|
12336
12353
|
//#endregion
|
|
12337
|
-
//#region src/
|
|
12338
|
-
|
|
12339
|
-
|
|
12340
|
-
|
|
12341
|
-
|
|
12342
|
-
|
|
12343
|
-
|
|
12354
|
+
//#region src/components/Popover/PopoverRoot.tsx
|
|
12355
|
+
/**
|
|
12356
|
+
* The root of a composable popover. Wrap `PopoverTrigger` (or `PopoverAnchor`)
|
|
12357
|
+
* and `PopoverContent` inside it.
|
|
12358
|
+
*
|
|
12359
|
+
* For the common "button opens a panel" case, prefer the bundled `Popover`.
|
|
12360
|
+
*/
|
|
12361
|
+
const PopoverRoot = ({ isOpen, ...props }) => /* @__PURE__ */ jsx(Root$4, {
|
|
12362
|
+
...props,
|
|
12363
|
+
...isOpen !== void 0 ? { open: isOpen } : {}
|
|
12364
|
+
});
|
|
12365
|
+
PopoverRoot.displayName = "PopoverRoot_UI";
|
|
12366
|
+
//#endregion
|
|
12367
|
+
//#region src/components/Popover/PopoverTrigger.tsx
|
|
12368
|
+
/**
|
|
12369
|
+
* The button that toggles the popover open and closed. By default it renders a
|
|
12370
|
+
* `<button>` wrapping its children; pass `asChild` to merge the trigger
|
|
12371
|
+
* behavior onto a single child element (e.g. a `Button` or `IconButton`).
|
|
12372
|
+
*/
|
|
12373
|
+
const PopoverTrigger = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(Trigger$2, {
|
|
12374
|
+
ref: forwardedRef,
|
|
12375
|
+
...props
|
|
12376
|
+
}));
|
|
12377
|
+
PopoverTrigger.displayName = "PopoverTrigger_UI";
|
|
12378
|
+
//#endregion
|
|
12379
|
+
//#region src/components/Popover/PopoverPortal.tsx
|
|
12380
|
+
/**
|
|
12381
|
+
* Portals the popover content out of the DOM hierarchy of its trigger so it can
|
|
12382
|
+
* escape clipping ancestors (`overflow: hidden`, transformed containers, etc.).
|
|
12383
|
+
*/
|
|
12384
|
+
const PopoverPortal = (props) => /* @__PURE__ */ jsx(Portal$1, { ...props });
|
|
12385
|
+
PopoverPortal.displayName = "PopoverPortal_UI";
|
|
12386
|
+
//#endregion
|
|
12387
|
+
//#region src/components/Popover/PopoverContent.tsx
|
|
12388
|
+
const StyledContent$1 = styled(Content$2)`
|
|
12389
|
+
z-index: var(--wui-zindex-popover);
|
|
12390
|
+
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
12391
|
+
${({ $unstyled }) => !$unstyled && css`
|
|
12392
|
+
border-radius: var(--wui-border-radius-02);
|
|
12393
|
+
padding: var(--wui-space-04);
|
|
12394
|
+
max-width: var(--wui-popover-max-width);
|
|
12395
|
+
max-height: var(--wui-popover-max-height);
|
|
12396
|
+
background-color: var(--wui-color-bg-surface);
|
|
12397
|
+
box-shadow: var(--wui-elevation-01);
|
|
12398
|
+
border: 1px solid var(--wui-color-border);
|
|
12399
|
+
overflow: auto;
|
|
12400
|
+
`}
|
|
12401
|
+
|
|
12402
|
+
[data-wui-popover-close] {
|
|
12403
|
+
position: absolute;
|
|
12404
|
+
top: var(--wui-space-02);
|
|
12405
|
+
right: var(--wui-space-02);
|
|
12406
|
+
}
|
|
12407
|
+
`;
|
|
12408
|
+
const DEFAULT_SIDE_OFFSET = 8;
|
|
12409
|
+
const DEFAULT_MAX_WIDTH = "320px";
|
|
12410
|
+
const DEFAULT_MAX_HEIGHT = "auto";
|
|
12411
|
+
/**
|
|
12412
|
+
* The styled popover surface. Place inside a `PopoverRoot` (typically wrapped
|
|
12413
|
+
* in a `PopoverPortal`). Forwards all Radix Content props, including
|
|
12414
|
+
* dismissal/focus event handlers such as `onPointerDownOutside`,
|
|
12415
|
+
* `onOpenAutoFocus`, and `onCloseAutoFocus`.
|
|
12416
|
+
*/
|
|
12417
|
+
const PopoverContent = forwardRef(({ colorScheme = "inherit", unstyled = false, maxWidth = DEFAULT_MAX_WIDTH, maxHeight = DEFAULT_MAX_HEIGHT, sideOffset = DEFAULT_SIDE_OFFSET, style, ...props }, forwardedRef) => {
|
|
12418
|
+
return /* @__PURE__ */ jsx(StyledContent$1, {
|
|
12419
|
+
ref: forwardedRef,
|
|
12420
|
+
$colorScheme: colorScheme,
|
|
12421
|
+
$unstyled: unstyled,
|
|
12422
|
+
sideOffset,
|
|
12423
|
+
style: {
|
|
12424
|
+
"--wui-popover-max-width": maxWidth,
|
|
12425
|
+
"--wui-popover-max-height": maxHeight,
|
|
12426
|
+
...style
|
|
12427
|
+
},
|
|
12428
|
+
...props
|
|
12429
|
+
});
|
|
12430
|
+
});
|
|
12431
|
+
PopoverContent.displayName = "PopoverContent_UI";
|
|
12432
|
+
//#endregion
|
|
12433
|
+
//#region src/components/Popover/PopoverClose.tsx
|
|
12434
|
+
/**
|
|
12435
|
+
* An element that closes the popover when activated. Defaults to a `<button>`;
|
|
12436
|
+
* pass `asChild` to merge the close behavior onto a single child element. For
|
|
12437
|
+
* a pre-styled icon close button, use `PopoverCloseButton`.
|
|
12438
|
+
*/
|
|
12439
|
+
const PopoverClose = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(Close, {
|
|
12440
|
+
ref: forwardedRef,
|
|
12441
|
+
...props
|
|
12442
|
+
}));
|
|
12443
|
+
PopoverClose.displayName = "PopoverClose_UI";
|
|
12444
|
+
//#endregion
|
|
12445
|
+
//#region src/components/Popover/PopoverCloseButton.tsx
|
|
12446
|
+
/**
|
|
12447
|
+
* A pre-styled close button intended to be placed inside a `PopoverContent`.
|
|
12448
|
+
* For a custom close control, use `PopoverClose` directly.
|
|
12449
|
+
*/
|
|
12450
|
+
const PopoverCloseButton = ({ label = "Close" } = {}) => /* @__PURE__ */ jsx(PopoverClose, {
|
|
12451
|
+
asChild: true,
|
|
12452
|
+
children: /* @__PURE__ */ jsx(IconButton, {
|
|
12453
|
+
"data-wui-popover-close": true,
|
|
12454
|
+
label,
|
|
12455
|
+
variant: "ghost",
|
|
12456
|
+
children: /* @__PURE__ */ jsx(Icon, { type: "close" })
|
|
12457
|
+
})
|
|
12458
|
+
});
|
|
12459
|
+
PopoverCloseButton.displayName = "PopoverCloseButton_UI";
|
|
12344
12460
|
//#endregion
|
|
12345
12461
|
//#region src/components/Popover/PopoverArrow.tsx
|
|
12346
12462
|
const StyledPath = styled.path`
|
|
@@ -12380,8 +12496,8 @@ const StyledCircle = styled.circle`
|
|
|
12380
12496
|
`}
|
|
12381
12497
|
}
|
|
12382
12498
|
`;
|
|
12383
|
-
const PopoverArrow
|
|
12384
|
-
return /* @__PURE__ */ jsx(PopoverArrow, {
|
|
12499
|
+
const PopoverArrow = ({ isAnimated }) => {
|
|
12500
|
+
return /* @__PURE__ */ jsx(PopoverArrow$1, {
|
|
12385
12501
|
asChild: true,
|
|
12386
12502
|
children: /* @__PURE__ */ jsxs("svg", {
|
|
12387
12503
|
fill: "none",
|
|
@@ -12411,61 +12527,38 @@ const PopoverArrow$1 = ({ isAnimated }) => {
|
|
|
12411
12527
|
})
|
|
12412
12528
|
});
|
|
12413
12529
|
};
|
|
12414
|
-
PopoverArrow
|
|
12530
|
+
PopoverArrow.displayName = "PopoverArrow_UI";
|
|
12415
12531
|
//#endregion
|
|
12416
12532
|
//#region src/components/Popover/Popover.tsx
|
|
12417
|
-
const StyledContent$1 = styled(Content$2)`
|
|
12418
|
-
z-index: var(--wui-zindex-popover);
|
|
12419
|
-
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
12420
|
-
${({ $unstyled }) => !$unstyled && css`
|
|
12421
|
-
border-radius: var(--wui-border-radius-02);
|
|
12422
|
-
padding: var(--wui-space-04);
|
|
12423
|
-
max-width: var(--wui-popover-max-width, 320px);
|
|
12424
|
-
max-height: var(--wui-popover-max-height, auto);
|
|
12425
|
-
background-color: var(--wui-color-bg-surface);
|
|
12426
|
-
box-shadow: var(--wui-elevation-01);
|
|
12427
|
-
border: 1px solid var(--wui-color-border);
|
|
12428
|
-
overflow: auto;
|
|
12429
|
-
`}
|
|
12430
|
-
|
|
12431
|
-
[data-wui-popover-close] {
|
|
12432
|
-
position: absolute;
|
|
12433
|
-
top: var(--wui-space-02);
|
|
12434
|
-
right: var(--wui-space-02);
|
|
12435
|
-
}
|
|
12436
|
-
`;
|
|
12437
12533
|
/**
|
|
12438
12534
|
* Displays rich content in a portal, triggered by a button.
|
|
12535
|
+
*
|
|
12536
|
+
* For more control — custom anchor, access to event handlers like
|
|
12537
|
+
* `onPointerDownOutside`, no injected close button, etc. — compose the
|
|
12538
|
+
* primitives directly: `PopoverRoot`, `PopoverTrigger`, `PopoverAnchor`,
|
|
12539
|
+
* `PopoverPortal`, `PopoverContent`, `PopoverClose`.
|
|
12439
12540
|
*/
|
|
12440
|
-
const Popover = ({ children, trigger, isOpen
|
|
12541
|
+
const Popover = ({ children, trigger, isOpen, hideCloseButton = false, maxWidth, maxHeight, onOpenChange, unstyled = false, withArrow = false, isAnimated = false, colorScheme = "inherit", style, ...props }) => {
|
|
12441
12542
|
const sideOffset = withArrow ? -24 : 8;
|
|
12442
|
-
|
|
12443
|
-
|
|
12444
|
-
|
|
12445
|
-
|
|
12446
|
-
|
|
12447
|
-
|
|
12448
|
-
...getControlProps(isOpen, onOpenChange),
|
|
12449
|
-
children: [/* @__PURE__ */ jsx(Trigger$2, {
|
|
12543
|
+
return /* @__PURE__ */ jsxs(PopoverRoot, {
|
|
12544
|
+
...isOpen !== void 0 ? {
|
|
12545
|
+
isOpen,
|
|
12546
|
+
onOpenChange
|
|
12547
|
+
} : {},
|
|
12548
|
+
children: [/* @__PURE__ */ jsx(PopoverTrigger, {
|
|
12450
12549
|
asChild: true,
|
|
12451
12550
|
children: trigger
|
|
12452
|
-
}), /* @__PURE__ */ jsx(
|
|
12453
|
-
|
|
12551
|
+
}), /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsxs(PopoverContent, {
|
|
12552
|
+
colorScheme,
|
|
12553
|
+
...maxHeight !== void 0 ? { maxHeight } : {},
|
|
12554
|
+
...maxWidth !== void 0 ? { maxWidth } : {},
|
|
12454
12555
|
sideOffset,
|
|
12556
|
+
unstyled,
|
|
12455
12557
|
...props,
|
|
12456
|
-
|
|
12457
|
-
style: mergedStyle,
|
|
12558
|
+
style,
|
|
12458
12559
|
children: [
|
|
12459
|
-
!hideCloseButton && /* @__PURE__ */ jsx(
|
|
12460
|
-
|
|
12461
|
-
children: /* @__PURE__ */ jsx(IconButton, {
|
|
12462
|
-
"data-wui-popover-close": true,
|
|
12463
|
-
label: "Close",
|
|
12464
|
-
variant: "ghost",
|
|
12465
|
-
children: /* @__PURE__ */ jsx(Icon, { type: "close" })
|
|
12466
|
-
})
|
|
12467
|
-
}),
|
|
12468
|
-
withArrow ? /* @__PURE__ */ jsx(PopoverArrow$1, { isAnimated }) : null,
|
|
12560
|
+
!hideCloseButton && /* @__PURE__ */ jsx(PopoverCloseButton, {}),
|
|
12561
|
+
withArrow ? /* @__PURE__ */ jsx(PopoverArrow, { isAnimated }) : null,
|
|
12469
12562
|
/* @__PURE__ */ jsx("div", { children })
|
|
12470
12563
|
]
|
|
12471
12564
|
}) })]
|
|
@@ -12473,6 +12566,18 @@ const Popover = ({ children, trigger, isOpen = false, hideCloseButton = false, m
|
|
|
12473
12566
|
};
|
|
12474
12567
|
Popover.displayName = "Popover_UI";
|
|
12475
12568
|
//#endregion
|
|
12569
|
+
//#region src/components/Popover/PopoverAnchor.tsx
|
|
12570
|
+
/**
|
|
12571
|
+
* Positions the popover relative to an element other than the trigger. Useful
|
|
12572
|
+
* when the element the user interacts with (e.g. a text input) is separate
|
|
12573
|
+
* from what the popover attaches to.
|
|
12574
|
+
*/
|
|
12575
|
+
const PopoverAnchor = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(Anchor, {
|
|
12576
|
+
ref: forwardedRef,
|
|
12577
|
+
...props
|
|
12578
|
+
}));
|
|
12579
|
+
PopoverAnchor.displayName = "PopoverAnchor_UI";
|
|
12580
|
+
//#endregion
|
|
12476
12581
|
//#region src/components/ProgressBar/ProgressBar.tsx
|
|
12477
12582
|
const ProgressBarWrapper = styled.div`
|
|
12478
12583
|
--progress-bar-height: 8px;
|
|
@@ -14419,6 +14524,6 @@ const WistiaLogo = ({ description = void 0, height = 100, hoverColor = void 0, h
|
|
|
14419
14524
|
};
|
|
14420
14525
|
WistiaLogo.displayName = "WistiaLogo_UI";
|
|
14421
14526
|
//#endregion
|
|
14422
|
-
export { ActionButton, Avatar, Badge, Banner, Box, Breadcrumb, Breadcrumbs, Button, ButtonGroup, Card, Center, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, Collapsible, CollapsibleContent, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, ColorList, ColorListGroup, ColorListOption, ColorPicker, ColorPickerPopoverContent, ColorPickerSection, ColorPickerTrigger, ColorSchemeWrapper, Combobox, ComboboxOption, ContextMenu, ContrastControls, CustomizableThemeWrapper, DataCard, DataCardHoverArrow, DataCardTrend, DataCards, DataList, DataListItem, DataListItemLabel, DataListItemValue, Divider, EditableHeading, EditableText, EditableTextCancelButton, EditableTextContext, EditableTextDisplay, EditableTextInput, EditableTextLabel, EditableTextRoot, EditableTextSubmitButton, EditableTextTrigger, Ellipsis, FeatureCard, FeatureCardImage, FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, FormGroup, Grid, Heading, HexColorInput, HueSlider, Icon, IconButton, Image, ImageDimensionsValidator, Input, InputClickToCopy, InputPassword, KeyboardShortcut, Label, Link, List, ListItem, Mark, Markdown, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Meter, Modal, ModalCallout, ModalCallouts, PersistentFileAmountLimitValidator, Popover, PreviewCard, ProgressBar, Radio, RadioCard, RadioCardImage, RadioGroup, RadioMenuItem, SaturationAndValuePicker, ScreenReaderOnly, ScrollArea, SegmentedControl, SegmentedControlItem, Select, SelectOption, SelectOptionGroup, Slider, SplitButton, Stack, SubMenu, Switch, Table, TableBody, TableCell, TableFoot, TableHead, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text, Thumbnail, ThumbnailBadge, ThumbnailCollage, Tooltip, UIProvider, ValueNameOrHexCode, ValueSwatch, WistiaLogo, calculateContrast, coerceToBoolean, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, isKeyboardKey, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useKeyPress, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize, validateWithYup };
|
|
14527
|
+
export { ActionButton, Avatar, Badge, Banner, Box, Breadcrumb, Breadcrumbs, Button, ButtonGroup, Card, Center, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, Collapsible, CollapsibleContent, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, ColorList, ColorListGroup, ColorListOption, ColorPicker, ColorPickerPopoverContent, ColorPickerSection, ColorPickerTrigger, ColorSchemeWrapper, Combobox, ComboboxOption, ContextMenu, ContrastControls, CustomizableThemeWrapper, DataCard, DataCardHoverArrow, DataCardTrend, DataCards, DataList, DataListItem, DataListItemLabel, DataListItemValue, Divider, EditableHeading, EditableText, EditableTextCancelButton, EditableTextContext, EditableTextDisplay, EditableTextInput, EditableTextLabel, EditableTextRoot, EditableTextSubmitButton, EditableTextTrigger, Ellipsis, FeatureCard, FeatureCardImage, FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, FormGroup, Grid, Heading, HexColorInput, HueSlider, Icon, IconButton, Image, ImageDimensionsValidator, Input, InputClickToCopy, InputPassword, KeyboardShortcut, Label, Link, List, ListItem, Mark, Markdown, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Meter, Modal, ModalCallout, ModalCallouts, PersistentFileAmountLimitValidator, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverCloseButton, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, PreviewCard, ProgressBar, Radio, RadioCard, RadioCardImage, RadioGroup, RadioMenuItem, SaturationAndValuePicker, ScreenReaderOnly, ScrollArea, SegmentedControl, SegmentedControlItem, Select, SelectOption, SelectOptionGroup, Slider, SplitButton, Stack, SubMenu, Switch, Table, TableBody, TableCell, TableFoot, TableHead, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text, Thumbnail, ThumbnailBadge, ThumbnailCollage, Tooltip, UIProvider, ValueNameOrHexCode, ValueSwatch, WistiaLogo, calculateContrast, coerceToBoolean, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, isKeyboardKey, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useKeyPress, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize, validateWithYup };
|
|
14423
14528
|
|
|
14424
14529
|
//# sourceMappingURL=index.js.map
|