@cambly/syntax-core 15.2.0 → 15.3.0
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/RichSelect/RichSelectList.cjs +3 -3
- package/dist/RichSelect/RichSelectList.js +2 -2
- package/dist/SelectList/SelectList.cjs +3 -3
- package/dist/SelectList/SelectList.js +2 -2
- package/dist/Tooltip/Tooltip.cjs +2 -2
- package/dist/Tooltip/Tooltip.d.ts +7 -0
- package/dist/Tooltip/Tooltip.js +1 -1
- package/dist/__chunks/{3SUN5HNO.cjs → 2OHQ7WYY.cjs} +3 -3
- package/dist/__chunks/{TWMVLYWR.cjs → CLVBAIGL.cjs} +1 -1
- package/dist/__chunks/{TWMVLYWR.cjs.map → CLVBAIGL.cjs.map} +1 -1
- package/dist/__chunks/{GWRAEUKW.js → DDWSH5JD.js} +10 -6
- package/dist/__chunks/DDWSH5JD.js.map +1 -0
- package/dist/__chunks/{YG47EHYS.cjs → DXGDMMAL.cjs} +10 -6
- package/dist/__chunks/DXGDMMAL.cjs.map +1 -0
- package/dist/__chunks/{6BRU7BZE.js → GJNRWQUK.js} +2 -2
- package/dist/__chunks/{EUM53NAR.js → KJ7XJWSH.js} +1 -1
- package/dist/__chunks/{EUM53NAR.js.map → KJ7XJWSH.js.map} +1 -1
- package/dist/__chunks/{AHQ7E5DV.js → Z5N4IV4T.js} +2 -2
- package/dist/__chunks/{IPQGCHQ7.cjs → ZH6DWDNG.cjs} +3 -3
- package/dist/index.cjs +5 -5
- package/dist/index.js +4 -4
- package/package.json +1 -1
- package/dist/__chunks/GWRAEUKW.js.map +0 -1
- package/dist/__chunks/YG47EHYS.cjs.map +0 -1
- /package/dist/__chunks/{3SUN5HNO.cjs.map → 2OHQ7WYY.cjs.map} +0 -0
- /package/dist/__chunks/{6BRU7BZE.js.map → GJNRWQUK.js.map} +0 -0
- /package/dist/__chunks/{AHQ7E5DV.js.map → Z5N4IV4T.js.map} +0 -0
- /package/dist/__chunks/{IPQGCHQ7.cjs.map → ZH6DWDNG.cjs.map} +0 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _ZH6DWDNGcjs = require('../__chunks/ZH6DWDNG.cjs');
|
|
5
5
|
require('../__chunks/EUBO6YEI.cjs');
|
|
6
6
|
require('../__chunks/C5XPZTFO.cjs');
|
|
7
7
|
require('../__chunks/HF4V7JJP.cjs');
|
|
@@ -16,7 +16,7 @@ require('../__chunks/TYPTB7HD.cjs');
|
|
|
16
16
|
require('../__chunks/76LTWV2Q.cjs');
|
|
17
17
|
require('../__chunks/63XQSPT7.cjs');
|
|
18
18
|
require('../__chunks/3UEOKPM2.cjs');
|
|
19
|
-
require('../__chunks/
|
|
19
|
+
require('../__chunks/CLVBAIGL.cjs');
|
|
20
20
|
require('../__chunks/7BZZUMJM.cjs');
|
|
21
21
|
require('../__chunks/MF7LLV7V.cjs');
|
|
22
22
|
require('../__chunks/N7ZNFTV7.cjs');
|
|
@@ -46,5 +46,5 @@ require('../__chunks/E5P6WRJD.cjs');
|
|
|
46
46
|
require('../__chunks/X2SDR4SD.cjs');
|
|
47
47
|
|
|
48
48
|
|
|
49
|
-
exports.default =
|
|
49
|
+
exports.default = _ZH6DWDNGcjs.RichSelectList_default;
|
|
50
50
|
//# sourceMappingURL=RichSelectList.cjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
RichSelectList_default
|
|
4
|
-
} from "../__chunks/
|
|
4
|
+
} from "../__chunks/Z5N4IV4T.js";
|
|
5
5
|
import "../__chunks/OTGGVIQE.js";
|
|
6
6
|
import "../__chunks/BOX3VY3Q.js";
|
|
7
7
|
import "../__chunks/DFGY3NSE.js";
|
|
@@ -16,7 +16,7 @@ import "../__chunks/NPZBG5AK.js";
|
|
|
16
16
|
import "../__chunks/TZGJS522.js";
|
|
17
17
|
import "../__chunks/4JFE4NWI.js";
|
|
18
18
|
import "../__chunks/77FFPQY6.js";
|
|
19
|
-
import "../__chunks/
|
|
19
|
+
import "../__chunks/KJ7XJWSH.js";
|
|
20
20
|
import "../__chunks/YI35INQ7.js";
|
|
21
21
|
import "../__chunks/DDUJFFG7.js";
|
|
22
22
|
import "../__chunks/ONZHIMUG.js";
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _2OHQ7WYYcjs = require('../__chunks/2OHQ7WYY.cjs');
|
|
5
5
|
require('../__chunks/JVGX637E.cjs');
|
|
6
|
-
require('../__chunks/
|
|
6
|
+
require('../__chunks/CLVBAIGL.cjs');
|
|
7
7
|
require('../__chunks/XLUVINJW.cjs');
|
|
8
8
|
require('../__chunks/FESAFV44.cjs');
|
|
9
9
|
require('../__chunks/WFVGNGEP.cjs');
|
|
@@ -18,5 +18,5 @@ require('../__chunks/NOELZTQX.cjs');
|
|
|
18
18
|
require('../__chunks/X2SDR4SD.cjs');
|
|
19
19
|
|
|
20
20
|
|
|
21
|
-
exports.default =
|
|
21
|
+
exports.default = _2OHQ7WYYcjs.SelectList;
|
|
22
22
|
//# sourceMappingURL=SelectList.cjs.map
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
SelectList
|
|
4
|
-
} from "../__chunks/
|
|
4
|
+
} from "../__chunks/GJNRWQUK.js";
|
|
5
5
|
import "../__chunks/SPQ7DQHG.js";
|
|
6
|
-
import "../__chunks/
|
|
6
|
+
import "../__chunks/KJ7XJWSH.js";
|
|
7
7
|
import "../__chunks/KKADUD65.js";
|
|
8
8
|
import "../__chunks/M36V23WR.js";
|
|
9
9
|
import "../__chunks/4U4UW4AK.js";
|
package/dist/Tooltip/Tooltip.cjs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var _DXGDMMALcjs = require('../__chunks/DXGDMMAL.cjs');
|
|
6
6
|
require('../__chunks/PLUVW6AM.cjs');
|
|
7
7
|
require('../__chunks/IL22HCBF.cjs');
|
|
8
8
|
require('../__chunks/WFVGNGEP.cjs');
|
|
@@ -20,5 +20,5 @@ require('../__chunks/X2SDR4SD.cjs');
|
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
|
|
23
|
-
exports.AriaTooltip =
|
|
23
|
+
exports.AriaTooltip = _DXGDMMALcjs.AriaTooltip; exports.default = _DXGDMMALcjs.Tooltip_default;
|
|
24
24
|
//# sourceMappingURL=Tooltip.cjs.map
|
|
@@ -11,6 +11,7 @@ import '@react-aria/overlays';
|
|
|
11
11
|
declare const AriaTooltip: React__default.ForwardRefExoticComponent<TooltipProps$1 & {
|
|
12
12
|
/** Optional handler for change of visibility for overlaid content, for analytics timing */
|
|
13
13
|
onChangeContentVisibility?: ((visible: boolean) => void) | undefined;
|
|
14
|
+
on?: "lightBackground" | "darkBackground" | undefined;
|
|
14
15
|
} & React__default.RefAttributes<HTMLDivElement>>;
|
|
15
16
|
type TooltipProps = {
|
|
16
17
|
/**
|
|
@@ -43,6 +44,12 @@ type TooltipProps = {
|
|
|
43
44
|
* @defaultValue "top-end"
|
|
44
45
|
*/
|
|
45
46
|
placement?: Placement;
|
|
47
|
+
/**
|
|
48
|
+
* Indicate whether the tooltip renders on a light or dark background. Changes the color of the tooltip
|
|
49
|
+
*
|
|
50
|
+
* @defaultValue `lightBackground`
|
|
51
|
+
*/
|
|
52
|
+
on?: "lightBackground" | "darkBackground";
|
|
46
53
|
};
|
|
47
54
|
/**
|
|
48
55
|
* [Tooltip](https://cambly-syntax.vercel.app/?path=/docs/components-tooltip--docs) displays contextual information on hover or focus.
|
package/dist/Tooltip/Tooltip.js
CHANGED
|
@@ -5,7 +5,7 @@ var _JVGX637Ecjs = require('./JVGX637E.cjs');
|
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
|
|
8
|
-
var
|
|
8
|
+
var _CLVBAIGLcjs = require('./CLVBAIGL.cjs');
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
var _XLUVINJWcjs = require('./XLUVINJW.cjs');
|
|
@@ -98,7 +98,7 @@ function SelectList({
|
|
|
98
98
|
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
99
99
|
"path",
|
|
100
100
|
{
|
|
101
|
-
fill: errorText ?
|
|
101
|
+
fill: errorText ? _CLVBAIGLcjs.ColorBaseDestructive700 : _CLVBAIGLcjs.ColorBaseGray800,
|
|
102
102
|
d: "M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
|
|
103
103
|
}
|
|
104
104
|
)
|
|
@@ -122,4 +122,4 @@ SelectList.Option = _JVGX637Ecjs.SelectOption_default;
|
|
|
122
122
|
|
|
123
123
|
|
|
124
124
|
exports.SelectList = SelectList;
|
|
125
|
-
//# sourceMappingURL=
|
|
125
|
+
//# sourceMappingURL=2OHQ7WYY.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB","sourcesContent":["/**\n * Do not edit directly\n * Generated on
|
|
1
|
+
{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB","sourcesContent":["/**\n * Do not edit directly\n * Generated on Fri, 24 May 2024 02:42:29 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\nexport const SyntaxFontSansSerif = \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\n"]}
|
|
@@ -46,6 +46,7 @@ var Tooltip_module_default = { "tooltip": "_tooltip_11pyp_1", "arrowPlacementtop
|
|
|
46
46
|
// src/Tooltip/Tooltip.tsx
|
|
47
47
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
48
48
|
function TooltipArrow(props) {
|
|
49
|
+
const { on } = props;
|
|
49
50
|
return /* @__PURE__ */ jsx(ReactAriaOverlayArrow, __spreadProps(__spreadValues({}, props), { children: ({ placement }) => {
|
|
50
51
|
if (placement === "center")
|
|
51
52
|
return null;
|
|
@@ -58,7 +59,8 @@ function TooltipArrow(props) {
|
|
|
58
59
|
{
|
|
59
60
|
className: classNames([
|
|
60
61
|
Box_module_default.block,
|
|
61
|
-
Tooltip_module_default[`arrowPlacement${placement}`]
|
|
62
|
+
Tooltip_module_default[`arrowPlacement${placement}`],
|
|
63
|
+
on === "lightBackground" ? colors_module_default.cambioBlackColor : colors_module_default.cambioWhiteColor
|
|
62
64
|
]),
|
|
63
65
|
children: /* @__PURE__ */ jsx(
|
|
64
66
|
"svg",
|
|
@@ -76,11 +78,11 @@ function TooltipArrow(props) {
|
|
|
76
78
|
} }));
|
|
77
79
|
}
|
|
78
80
|
var AriaTooltip = forwardRef(function AriaTooltip2(_a, ref) {
|
|
79
|
-
var _b = _a, { children: childrenProp, onChangeContentVisibility } = _b, otherProps = __objRest(_b, ["children", "onChangeContentVisibility"]);
|
|
81
|
+
var _b = _a, { children: childrenProp, onChangeContentVisibility, on } = _b, otherProps = __objRest(_b, ["children", "onChangeContentVisibility", "on"]);
|
|
80
82
|
const className = classNames([
|
|
81
83
|
Box_module_default.box,
|
|
82
84
|
colors_module_default.gray900Color,
|
|
83
|
-
colors_module_default.cambioBlackBackgroundColor,
|
|
85
|
+
on === "lightBackground" ? colors_module_default.cambioBlackBackgroundColor : colors_module_default.cambioWhiteBackgroundColor,
|
|
84
86
|
padding_module_default.paddingX2,
|
|
85
87
|
padding_module_default.paddingY2,
|
|
86
88
|
rounding_module_default.roundingsm,
|
|
@@ -101,7 +103,7 @@ var AriaTooltip = forwardRef(function AriaTooltip2(_a, ref) {
|
|
|
101
103
|
children: composeRenderProps(
|
|
102
104
|
childrenProp,
|
|
103
105
|
(children, { isEntering, isExiting }) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
104
|
-
/* @__PURE__ */ jsx(TooltipArrow, {}),
|
|
106
|
+
/* @__PURE__ */ jsx(TooltipArrow, { on }),
|
|
105
107
|
/* @__PURE__ */ jsx(Typography_default, { size: 100, color: "white", children }),
|
|
106
108
|
/* @__PURE__ */ jsx(
|
|
107
109
|
OverlayVisibility,
|
|
@@ -128,7 +130,8 @@ var Tooltip = forwardRef(function Tooltip2(props, ref) {
|
|
|
128
130
|
onChangeContentVisibility,
|
|
129
131
|
onOpenChange,
|
|
130
132
|
open,
|
|
131
|
-
placement = "top"
|
|
133
|
+
placement = "top",
|
|
134
|
+
on = "lightBackground"
|
|
132
135
|
} = props;
|
|
133
136
|
return /* @__PURE__ */ jsxs(
|
|
134
137
|
ReactAriaTooltipTrigger,
|
|
@@ -149,6 +152,7 @@ var Tooltip = forwardRef(function Tooltip2(props, ref) {
|
|
|
149
152
|
"aria-label": accessibilityLabel,
|
|
150
153
|
"data-testid": dataTestId,
|
|
151
154
|
onChangeContentVisibility,
|
|
155
|
+
on,
|
|
152
156
|
children: content
|
|
153
157
|
}
|
|
154
158
|
)
|
|
@@ -162,4 +166,4 @@ export {
|
|
|
162
166
|
AriaTooltip,
|
|
163
167
|
Tooltip_default
|
|
164
168
|
};
|
|
165
|
-
//# sourceMappingURL=
|
|
169
|
+
//# sourceMappingURL=DDWSH5JD.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Tooltip/Tooltip.tsx","css-module:./Tooltip.module.css#css-module"],"sourcesContent":["import React, { forwardRef, type ReactNode, type ReactElement } from \"react\";\nimport { mergeProps } from \"react-aria\";\nimport {\n composeRenderProps,\n OverlayArrow as ReactAriaOverlayArrow,\n type OverlayArrowProps as ReactAriaOverlayArrowProps,\n Tooltip as ReactAriaTooltip,\n TooltipTrigger as ReactAriaTooltipTrigger,\n type TooltipProps as ReactAriaTooltipProps,\n} from \"react-aria-components\";\n\nimport Triggerable from \"../react-aria-utils/Triggerable\";\nimport Typography from \"../Typography/Typography\";\nimport OverlayVisibility from \"../react-aria-utils/OverlayVisibility\";\nimport classNames from \"classnames\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport styles from \"./Tooltip.module.css\";\nimport {\n type Placement,\n syntaxToReactAriaPlacement,\n} from \"../react-aria-utils/placement\";\n\nfunction TooltipArrow(\n props: ReactAriaOverlayArrowProps & {\n on?: \"lightBackground\" | \"darkBackground\";\n },\n): ReactElement {\n const { on } = props;\n\n return (\n <ReactAriaOverlayArrow {...props}>\n {({ placement }) => {\n if (placement === \"center\") return null;\n if (placement === \"left\") return null;\n if (placement === \"right\") return null;\n return (\n <div\n className={classNames([\n boxStyles.block,\n styles[`arrowPlacement${placement}`],\n on === \"lightBackground\"\n ? colorStyles.cambioBlackColor\n : colorStyles.cambioWhiteColor,\n ])}\n >\n <svg\n className={classNames([boxStyles.block])}\n width={40}\n height={5}\n viewBox=\"0 0 40 5\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M17 0L22 5H12L17 0Z\" fill=\"currentColor\" />\n </svg>\n </div>\n );\n }}\n </ReactAriaOverlayArrow>\n );\n}\n\n/**\n * AriaTooltip: This component extends Tooltip from react-aria-components\n * It applies syntax styles and adds aadditional props:\n * - onContentChangeVisibility\n */\nexport const AriaTooltip = forwardRef<\n HTMLDivElement,\n ReactAriaTooltipProps & {\n /** Optional handler for change of visibility for overlaid content, for analytics timing */\n onChangeContentVisibility?: (visible: boolean) => void;\n on?: \"lightBackground\" | \"darkBackground\";\n }\n>(function AriaTooltip(\n { children: childrenProp, onChangeContentVisibility, on, ...otherProps },\n ref,\n): ReactElement {\n const className = classNames([\n boxStyles.box,\n colorStyles.gray900Color,\n on === \"lightBackground\"\n ? colorStyles.cambioBlackBackgroundColor\n : colorStyles.cambioWhiteBackgroundColor,\n paddingStyles.paddingX2,\n paddingStyles.paddingY2,\n roundingStyles.roundingsm,\n styles.tooltip,\n ]);\n\n return (\n <ReactAriaTooltip\n ref={ref}\n {...mergeProps(\n {\n className,\n offset: 8,\n crossOffset: 0,\n },\n otherProps,\n )}\n >\n {composeRenderProps(\n childrenProp,\n (children, { isEntering, isExiting }) => (\n <>\n <TooltipArrow on={on} />\n <Typography size={100} color=\"white\">\n {children}\n </Typography>\n <OverlayVisibility\n isEntering={isEntering}\n isExiting={isExiting}\n onChange={onChangeContentVisibility}\n />\n </>\n ),\n )}\n </ReactAriaTooltip>\n );\n});\n\ntype TooltipProps = {\n /**\n * Test id for the floating tooltip\n */\n \"data-testid\"?: string;\n /**\n * How long a user hovers before tooltip shows (in ms)\n * @defaultValue 0\n */\n delay?: number;\n /** Optional boolean to disable tooltip trigger behavior */\n disabled?: boolean;\n /** Optional aria-label for the tooltip (content element) */\n accessibilityLabel?: string;\n /** Required trigger element */\n children: ReactElement;\n /** Content to be shown inside the tooltip. */\n content: ReactNode;\n /** If set to true the tooltip will render initially open */\n initialOpen?: boolean;\n /** Optional handler for change of visibility for popover content, for analytics timing */\n onChangeContentVisibility?: (visible: boolean) => void;\n /** Optional handler for change of visibility for popover content, for control */\n onOpenChange?: (open: boolean) => void;\n /** Optional boolean to control open state of tooltip externally */\n open?: boolean;\n /**\n * Location of the tooltip content relative to anchor element\n * @defaultValue \"top-end\"\n */\n placement?: Placement;\n\n /**\n * Indicate whether the tooltip renders on a light or dark background. Changes the color of the tooltip\n *\n * @defaultValue `lightBackground`\n */\n on?: \"lightBackground\" | \"darkBackground\";\n};\n/**\n * [Tooltip](https://cambly-syntax.vercel.app/?path=/docs/components-tooltip--docs) displays contextual information on hover or focus.\n *\n * Tooltip content is hidden by default and shown on hover or focus.\n * The content is hidden again when the user mouses out of the trigger element or blurs the trigger element or presses Escape\n *\n * Example Usage:\n ```\n <Tooltip\n delay={200}\n placement=\"bottom-start\"\n initialOpen\n content={(\n <Box padding={2}>\n ... some content goes here\n </Box>\n )}\n >\n <Button text=\"Trigger me\" />\n </Tooltip>\n ```\n */\nconst Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(\n props,\n ref,\n): ReactElement {\n const {\n accessibilityLabel,\n \"data-testid\": dataTestId,\n delay = 0,\n disabled = false,\n children,\n content,\n initialOpen,\n onChangeContentVisibility,\n onOpenChange,\n open,\n placement = \"top\",\n on = \"lightBackground\",\n } = props;\n\n return (\n <ReactAriaTooltipTrigger\n defaultOpen={initialOpen}\n delay={delay}\n closeDelay={500}\n isDisabled={disabled}\n isOpen={open}\n onOpenChange={onOpenChange}\n >\n {/* transfer focus handlers to child element if it is focusable */}\n <Triggerable>{children}</Triggerable>\n <AriaTooltip\n ref={ref}\n placement={syntaxToReactAriaPlacement(placement)}\n aria-label={accessibilityLabel}\n data-testid={dataTestId}\n onChangeContentVisibility={onChangeContentVisibility}\n on={on}\n >\n {content}\n </AriaTooltip>\n </ReactAriaTooltipTrigger>\n );\n});\n\nexport default Tooltip;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Tooltip/Tooltip.module.css\"; export default {\"tooltip\":\"_tooltip_11pyp_1\",\"arrowPlacementtop\":\"_arrowPlacementtop_11pyp_5\",\"arrowPlacementbottom\":\"_arrowPlacementbottom_11pyp_10\"}"],"mappings":"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","names":["AriaTooltip","Tooltip"]}
|
|
@@ -46,6 +46,7 @@ var Tooltip_module_default = { "tooltip": "_tooltip_11pyp_1", "arrowPlacementtop
|
|
|
46
46
|
// src/Tooltip/Tooltip.tsx
|
|
47
47
|
var _jsxruntime = require('react/jsx-runtime');
|
|
48
48
|
function TooltipArrow(props) {
|
|
49
|
+
const { on } = props;
|
|
49
50
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.OverlayArrow, _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {}, props), { children: ({ placement }) => {
|
|
50
51
|
if (placement === "center")
|
|
51
52
|
return null;
|
|
@@ -58,7 +59,8 @@ function TooltipArrow(props) {
|
|
|
58
59
|
{
|
|
59
60
|
className: _classnames2.default.call(void 0, [
|
|
60
61
|
_IL22HCBFcjs.Box_module_default.block,
|
|
61
|
-
Tooltip_module_default[`arrowPlacement${placement}`]
|
|
62
|
+
Tooltip_module_default[`arrowPlacement${placement}`],
|
|
63
|
+
on === "lightBackground" ? _QT6IRCGWcjs.colors_module_default.cambioBlackColor : _QT6IRCGWcjs.colors_module_default.cambioWhiteColor
|
|
62
64
|
]),
|
|
63
65
|
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
64
66
|
"svg",
|
|
@@ -76,11 +78,11 @@ function TooltipArrow(props) {
|
|
|
76
78
|
} }));
|
|
77
79
|
}
|
|
78
80
|
var AriaTooltip = _react.forwardRef.call(void 0, function AriaTooltip2(_a, ref) {
|
|
79
|
-
var _b = _a, { children: childrenProp, onChangeContentVisibility } = _b, otherProps = _X2SDR4SDcjs.__objRest.call(void 0, _b, ["children", "onChangeContentVisibility"]);
|
|
81
|
+
var _b = _a, { children: childrenProp, onChangeContentVisibility, on } = _b, otherProps = _X2SDR4SDcjs.__objRest.call(void 0, _b, ["children", "onChangeContentVisibility", "on"]);
|
|
80
82
|
const className = _classnames2.default.call(void 0, [
|
|
81
83
|
_IL22HCBFcjs.Box_module_default.box,
|
|
82
84
|
_QT6IRCGWcjs.colors_module_default.gray900Color,
|
|
83
|
-
_QT6IRCGWcjs.colors_module_default.cambioBlackBackgroundColor,
|
|
85
|
+
on === "lightBackground" ? _QT6IRCGWcjs.colors_module_default.cambioBlackBackgroundColor : _QT6IRCGWcjs.colors_module_default.cambioWhiteBackgroundColor,
|
|
84
86
|
_PLUVW6AMcjs.padding_module_default.paddingX2,
|
|
85
87
|
_PLUVW6AMcjs.padding_module_default.paddingY2,
|
|
86
88
|
_CHDS4D44cjs.rounding_module_default.roundingsm,
|
|
@@ -101,7 +103,7 @@ var AriaTooltip = _react.forwardRef.call(void 0, function AriaTooltip2(_a, ref)
|
|
|
101
103
|
children: _reactariacomponents.composeRenderProps.call(void 0,
|
|
102
104
|
childrenProp,
|
|
103
105
|
(children, { isEntering, isExiting }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
|
|
104
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipArrow, {}),
|
|
106
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipArrow, { on }),
|
|
105
107
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PJLDYIB6cjs.Typography_default, { size: 100, color: "white", children }),
|
|
106
108
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
107
109
|
_E5P6WRJDcjs.OverlayVisibility,
|
|
@@ -128,7 +130,8 @@ var Tooltip = _react.forwardRef.call(void 0, function Tooltip2(props, ref) {
|
|
|
128
130
|
onChangeContentVisibility,
|
|
129
131
|
onOpenChange,
|
|
130
132
|
open,
|
|
131
|
-
placement = "top"
|
|
133
|
+
placement = "top",
|
|
134
|
+
on = "lightBackground"
|
|
132
135
|
} = props;
|
|
133
136
|
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
134
137
|
_reactariacomponents.TooltipTrigger,
|
|
@@ -149,6 +152,7 @@ var Tooltip = _react.forwardRef.call(void 0, function Tooltip2(props, ref) {
|
|
|
149
152
|
"aria-label": accessibilityLabel,
|
|
150
153
|
"data-testid": dataTestId,
|
|
151
154
|
onChangeContentVisibility,
|
|
155
|
+
on,
|
|
152
156
|
children: content
|
|
153
157
|
}
|
|
154
158
|
)
|
|
@@ -162,4 +166,4 @@ var Tooltip_default = Tooltip;
|
|
|
162
166
|
|
|
163
167
|
|
|
164
168
|
exports.AriaTooltip = AriaTooltip; exports.Tooltip_default = Tooltip_default;
|
|
165
|
-
//# sourceMappingURL=
|
|
169
|
+
//# sourceMappingURL=DXGDMMAL.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Tooltip/Tooltip.tsx","css-module:./Tooltip.module.css#css-module"],"names":["AriaTooltip","Tooltip"],"mappings":"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","sourcesContent":["import React, { forwardRef, type ReactNode, type ReactElement } from \"react\";\nimport { mergeProps } from \"react-aria\";\nimport {\n composeRenderProps,\n OverlayArrow as ReactAriaOverlayArrow,\n type OverlayArrowProps as ReactAriaOverlayArrowProps,\n Tooltip as ReactAriaTooltip,\n TooltipTrigger as ReactAriaTooltipTrigger,\n type TooltipProps as ReactAriaTooltipProps,\n} from \"react-aria-components\";\n\nimport Triggerable from \"../react-aria-utils/Triggerable\";\nimport Typography from \"../Typography/Typography\";\nimport OverlayVisibility from \"../react-aria-utils/OverlayVisibility\";\nimport classNames from \"classnames\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport styles from \"./Tooltip.module.css\";\nimport {\n type Placement,\n syntaxToReactAriaPlacement,\n} from \"../react-aria-utils/placement\";\n\nfunction TooltipArrow(\n props: ReactAriaOverlayArrowProps & {\n on?: \"lightBackground\" | \"darkBackground\";\n },\n): ReactElement {\n const { on } = props;\n\n return (\n <ReactAriaOverlayArrow {...props}>\n {({ placement }) => {\n if (placement === \"center\") return null;\n if (placement === \"left\") return null;\n if (placement === \"right\") return null;\n return (\n <div\n className={classNames([\n boxStyles.block,\n styles[`arrowPlacement${placement}`],\n on === \"lightBackground\"\n ? colorStyles.cambioBlackColor\n : colorStyles.cambioWhiteColor,\n ])}\n >\n <svg\n className={classNames([boxStyles.block])}\n width={40}\n height={5}\n viewBox=\"0 0 40 5\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M17 0L22 5H12L17 0Z\" fill=\"currentColor\" />\n </svg>\n </div>\n );\n }}\n </ReactAriaOverlayArrow>\n );\n}\n\n/**\n * AriaTooltip: This component extends Tooltip from react-aria-components\n * It applies syntax styles and adds aadditional props:\n * - onContentChangeVisibility\n */\nexport const AriaTooltip = forwardRef<\n HTMLDivElement,\n ReactAriaTooltipProps & {\n /** Optional handler for change of visibility for overlaid content, for analytics timing */\n onChangeContentVisibility?: (visible: boolean) => void;\n on?: \"lightBackground\" | \"darkBackground\";\n }\n>(function AriaTooltip(\n { children: childrenProp, onChangeContentVisibility, on, ...otherProps },\n ref,\n): ReactElement {\n const className = classNames([\n boxStyles.box,\n colorStyles.gray900Color,\n on === \"lightBackground\"\n ? colorStyles.cambioBlackBackgroundColor\n : colorStyles.cambioWhiteBackgroundColor,\n paddingStyles.paddingX2,\n paddingStyles.paddingY2,\n roundingStyles.roundingsm,\n styles.tooltip,\n ]);\n\n return (\n <ReactAriaTooltip\n ref={ref}\n {...mergeProps(\n {\n className,\n offset: 8,\n crossOffset: 0,\n },\n otherProps,\n )}\n >\n {composeRenderProps(\n childrenProp,\n (children, { isEntering, isExiting }) => (\n <>\n <TooltipArrow on={on} />\n <Typography size={100} color=\"white\">\n {children}\n </Typography>\n <OverlayVisibility\n isEntering={isEntering}\n isExiting={isExiting}\n onChange={onChangeContentVisibility}\n />\n </>\n ),\n )}\n </ReactAriaTooltip>\n );\n});\n\ntype TooltipProps = {\n /**\n * Test id for the floating tooltip\n */\n \"data-testid\"?: string;\n /**\n * How long a user hovers before tooltip shows (in ms)\n * @defaultValue 0\n */\n delay?: number;\n /** Optional boolean to disable tooltip trigger behavior */\n disabled?: boolean;\n /** Optional aria-label for the tooltip (content element) */\n accessibilityLabel?: string;\n /** Required trigger element */\n children: ReactElement;\n /** Content to be shown inside the tooltip. */\n content: ReactNode;\n /** If set to true the tooltip will render initially open */\n initialOpen?: boolean;\n /** Optional handler for change of visibility for popover content, for analytics timing */\n onChangeContentVisibility?: (visible: boolean) => void;\n /** Optional handler for change of visibility for popover content, for control */\n onOpenChange?: (open: boolean) => void;\n /** Optional boolean to control open state of tooltip externally */\n open?: boolean;\n /**\n * Location of the tooltip content relative to anchor element\n * @defaultValue \"top-end\"\n */\n placement?: Placement;\n\n /**\n * Indicate whether the tooltip renders on a light or dark background. Changes the color of the tooltip\n *\n * @defaultValue `lightBackground`\n */\n on?: \"lightBackground\" | \"darkBackground\";\n};\n/**\n * [Tooltip](https://cambly-syntax.vercel.app/?path=/docs/components-tooltip--docs) displays contextual information on hover or focus.\n *\n * Tooltip content is hidden by default and shown on hover or focus.\n * The content is hidden again when the user mouses out of the trigger element or blurs the trigger element or presses Escape\n *\n * Example Usage:\n ```\n <Tooltip\n delay={200}\n placement=\"bottom-start\"\n initialOpen\n content={(\n <Box padding={2}>\n ... some content goes here\n </Box>\n )}\n >\n <Button text=\"Trigger me\" />\n </Tooltip>\n ```\n */\nconst Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(\n props,\n ref,\n): ReactElement {\n const {\n accessibilityLabel,\n \"data-testid\": dataTestId,\n delay = 0,\n disabled = false,\n children,\n content,\n initialOpen,\n onChangeContentVisibility,\n onOpenChange,\n open,\n placement = \"top\",\n on = \"lightBackground\",\n } = props;\n\n return (\n <ReactAriaTooltipTrigger\n defaultOpen={initialOpen}\n delay={delay}\n closeDelay={500}\n isDisabled={disabled}\n isOpen={open}\n onOpenChange={onOpenChange}\n >\n {/* transfer focus handlers to child element if it is focusable */}\n <Triggerable>{children}</Triggerable>\n <AriaTooltip\n ref={ref}\n placement={syntaxToReactAriaPlacement(placement)}\n aria-label={accessibilityLabel}\n data-testid={dataTestId}\n onChangeContentVisibility={onChangeContentVisibility}\n on={on}\n >\n {content}\n </AriaTooltip>\n </ReactAriaTooltipTrigger>\n );\n});\n\nexport default Tooltip;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Tooltip/Tooltip.module.css\"; export default {\"tooltip\":\"_tooltip_11pyp_1\",\"arrowPlacementtop\":\"_arrowPlacementtop_11pyp_5\",\"arrowPlacementbottom\":\"_arrowPlacementbottom_11pyp_10\"}"]}
|
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
import {
|
|
6
6
|
ColorBaseDestructive700,
|
|
7
7
|
ColorBaseGray800
|
|
8
|
-
} from "./
|
|
8
|
+
} from "./KJ7XJWSH.js";
|
|
9
9
|
import {
|
|
10
10
|
Focus_module_default
|
|
11
11
|
} from "./KKADUD65.js";
|
|
@@ -122,4 +122,4 @@ SelectList.Option = SelectOption_default;
|
|
|
122
122
|
export {
|
|
123
123
|
SelectList
|
|
124
124
|
};
|
|
125
|
-
//# sourceMappingURL=
|
|
125
|
+
//# sourceMappingURL=GJNRWQUK.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on
|
|
1
|
+
{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Fri, 24 May 2024 02:42:29 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\nexport const SyntaxFontSansSerif = \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\n"],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB;","names":[]}
|
|
@@ -19,7 +19,7 @@ import {
|
|
|
19
19
|
import {
|
|
20
20
|
ColorBaseDestructive700,
|
|
21
21
|
ColorBaseGray800
|
|
22
|
-
} from "./
|
|
22
|
+
} from "./KJ7XJWSH.js";
|
|
23
23
|
import {
|
|
24
24
|
RichSelectSection_default
|
|
25
25
|
} from "./YI35INQ7.js";
|
|
@@ -266,4 +266,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
|
|
|
266
266
|
export {
|
|
267
267
|
RichSelectList_default
|
|
268
268
|
};
|
|
269
|
-
//# sourceMappingURL=
|
|
269
|
+
//# sourceMappingURL=Z5N4IV4T.js.map
|
|
@@ -19,7 +19,7 @@ var _3UEOKPM2cjs = require('./3UEOKPM2.cjs');
|
|
|
19
19
|
|
|
20
20
|
|
|
21
21
|
|
|
22
|
-
var
|
|
22
|
+
var _CLVBAIGLcjs = require('./CLVBAIGL.cjs');
|
|
23
23
|
|
|
24
24
|
|
|
25
25
|
var _7BZZUMJMcjs = require('./7BZZUMJM.cjs');
|
|
@@ -231,7 +231,7 @@ function RichSelectList(props) {
|
|
|
231
231
|
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
232
232
|
"path",
|
|
233
233
|
{
|
|
234
|
-
fill: errorText ?
|
|
234
|
+
fill: errorText ? _CLVBAIGLcjs.ColorBaseDestructive700 : _CLVBAIGLcjs.ColorBaseGray800,
|
|
235
235
|
d: "M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
|
|
236
236
|
}
|
|
237
237
|
)
|
|
@@ -266,4 +266,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
|
|
|
266
266
|
|
|
267
267
|
|
|
268
268
|
exports.RichSelectList_default = RichSelectList_default;
|
|
269
|
-
//# sourceMappingURL=
|
|
269
|
+
//# sourceMappingURL=ZH6DWDNG.cjs.map
|
package/dist/index.cjs
CHANGED
|
@@ -38,11 +38,11 @@ var _67PBF26Wcjs = require('./__chunks/67PBF26W.cjs');
|
|
|
38
38
|
require('./__chunks/WFVGNGEP.cjs');
|
|
39
39
|
|
|
40
40
|
|
|
41
|
-
var
|
|
41
|
+
var _2OHQ7WYYcjs = require('./__chunks/2OHQ7WYY.cjs');
|
|
42
42
|
require('./__chunks/JVGX637E.cjs');
|
|
43
43
|
|
|
44
44
|
|
|
45
|
-
var
|
|
45
|
+
var _ZH6DWDNGcjs = require('./__chunks/ZH6DWDNG.cjs');
|
|
46
46
|
require('./__chunks/EUBO6YEI.cjs');
|
|
47
47
|
|
|
48
48
|
|
|
@@ -71,7 +71,7 @@ var _63XQSPT7cjs = require('./__chunks/63XQSPT7.cjs');
|
|
|
71
71
|
|
|
72
72
|
|
|
73
73
|
var _3UEOKPM2cjs = require('./__chunks/3UEOKPM2.cjs');
|
|
74
|
-
require('./__chunks/
|
|
74
|
+
require('./__chunks/CLVBAIGL.cjs');
|
|
75
75
|
require('./__chunks/7BZZUMJM.cjs');
|
|
76
76
|
require('./__chunks/MF7LLV7V.cjs');
|
|
77
77
|
require('./__chunks/N7ZNFTV7.cjs');
|
|
@@ -89,7 +89,7 @@ require('./__chunks/RAL6R27S.cjs');
|
|
|
89
89
|
require('./__chunks/KZT53ITQ.cjs');
|
|
90
90
|
|
|
91
91
|
|
|
92
|
-
var
|
|
92
|
+
var _DXGDMMALcjs = require('./__chunks/DXGDMMAL.cjs');
|
|
93
93
|
require('./__chunks/PLUVW6AM.cjs');
|
|
94
94
|
require('./__chunks/IL22HCBF.cjs');
|
|
95
95
|
|
|
@@ -137,5 +137,5 @@ require('./__chunks/X2SDR4SD.cjs');
|
|
|
137
137
|
|
|
138
138
|
|
|
139
139
|
|
|
140
|
-
exports.Avatar = _NOQ3DDEPcjs.Avatar_default; exports.AvatarGroup = _KBFQU5AWcjs.AvatarGroup; exports.Badge = _YVQRFDEEcjs.Badge_default; exports.Box = _FESAFV44cjs.Box_default; exports.Button = _HF4V7JJPcjs.Button_default; exports.ButtonGroup = _C5XPZTFOcjs.ButtonGroup_default; exports.Card = _D5AQ3PGBcjs.Card; exports.Checkbox = _SZMHZR3Bcjs.Checkbox_default; exports.Chip = _ZBBMY7Y7cjs.Chip_default; exports.Divider = _DMA6PPUZcjs.Divider; exports.Heading = _47PGLBOScjs.Heading_default; exports.Icon = _CV5CESW2cjs.Icon_default; exports.IconButton = _63XQSPT7cjs.IconButton_default; exports.LinkButton = _XYSRAKGDcjs.LinkButton_default; exports.Modal = _TJQKHHNHcjs.Modal; exports.Popover = _ELEREGBWcjs.Popover_default; exports.RadioButton = _N5W44DQ5cjs.RadioButton_default; exports.RichSelectList =
|
|
140
|
+
exports.Avatar = _NOQ3DDEPcjs.Avatar_default; exports.AvatarGroup = _KBFQU5AWcjs.AvatarGroup; exports.Badge = _YVQRFDEEcjs.Badge_default; exports.Box = _FESAFV44cjs.Box_default; exports.Button = _HF4V7JJPcjs.Button_default; exports.ButtonGroup = _C5XPZTFOcjs.ButtonGroup_default; exports.Card = _D5AQ3PGBcjs.Card; exports.Checkbox = _SZMHZR3Bcjs.Checkbox_default; exports.Chip = _ZBBMY7Y7cjs.Chip_default; exports.Divider = _DMA6PPUZcjs.Divider; exports.Heading = _47PGLBOScjs.Heading_default; exports.Icon = _CV5CESW2cjs.Icon_default; exports.IconButton = _63XQSPT7cjs.IconButton_default; exports.LinkButton = _XYSRAKGDcjs.LinkButton_default; exports.Modal = _TJQKHHNHcjs.Modal; exports.Popover = _ELEREGBWcjs.Popover_default; exports.RadioButton = _N5W44DQ5cjs.RadioButton_default; exports.RichSelectList = _ZH6DWDNGcjs.RichSelectList_default; exports.SelectList = _2OHQ7WYYcjs.SelectList; exports.TapArea = _3UEOKPM2cjs.TapArea_default; exports.TextArea = _67PBF26Wcjs.TextArea_default; exports.TextField = _VKAYAQ3Zcjs.TextField; exports.ThemeProvider = _ASFZDRJJcjs.ThemeProvider; exports.Tooltip = _DXGDMMALcjs.Tooltip_default; exports.Typography = _PJLDYIB6cjs.Typography_default;
|
|
141
141
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.js
CHANGED
|
@@ -38,11 +38,11 @@ import {
|
|
|
38
38
|
import "./__chunks/4U4UW4AK.js";
|
|
39
39
|
import {
|
|
40
40
|
SelectList
|
|
41
|
-
} from "./__chunks/
|
|
41
|
+
} from "./__chunks/GJNRWQUK.js";
|
|
42
42
|
import "./__chunks/SPQ7DQHG.js";
|
|
43
43
|
import {
|
|
44
44
|
RichSelectList_default
|
|
45
|
-
} from "./__chunks/
|
|
45
|
+
} from "./__chunks/Z5N4IV4T.js";
|
|
46
46
|
import "./__chunks/OTGGVIQE.js";
|
|
47
47
|
import {
|
|
48
48
|
ButtonGroup_default
|
|
@@ -71,7 +71,7 @@ import {
|
|
|
71
71
|
import {
|
|
72
72
|
TapArea_default
|
|
73
73
|
} from "./__chunks/77FFPQY6.js";
|
|
74
|
-
import "./__chunks/
|
|
74
|
+
import "./__chunks/KJ7XJWSH.js";
|
|
75
75
|
import "./__chunks/YI35INQ7.js";
|
|
76
76
|
import "./__chunks/DDUJFFG7.js";
|
|
77
77
|
import "./__chunks/ONZHIMUG.js";
|
|
@@ -89,7 +89,7 @@ import "./__chunks/T6PXFSRX.js";
|
|
|
89
89
|
import "./__chunks/PUTZ53EC.js";
|
|
90
90
|
import {
|
|
91
91
|
Tooltip_default
|
|
92
|
-
} from "./__chunks/
|
|
92
|
+
} from "./__chunks/DDWSH5JD.js";
|
|
93
93
|
import "./__chunks/ZOWOFYUE.js";
|
|
94
94
|
import "./__chunks/AVREYFSM.js";
|
|
95
95
|
import "./__chunks/4U4UW4AK.js";
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tooltip/Tooltip.tsx","css-module:./Tooltip.module.css#css-module"],"sourcesContent":["import React, { forwardRef, type ReactNode, type ReactElement } from \"react\";\nimport { mergeProps } from \"react-aria\";\nimport {\n composeRenderProps,\n OverlayArrow as ReactAriaOverlayArrow,\n type OverlayArrowProps as ReactAriaOverlayArrowProps,\n Tooltip as ReactAriaTooltip,\n TooltipTrigger as ReactAriaTooltipTrigger,\n type TooltipProps as ReactAriaTooltipProps,\n} from \"react-aria-components\";\n\nimport Triggerable from \"../react-aria-utils/Triggerable\";\nimport Typography from \"../Typography/Typography\";\nimport OverlayVisibility from \"../react-aria-utils/OverlayVisibility\";\nimport classNames from \"classnames\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport styles from \"./Tooltip.module.css\";\nimport {\n type Placement,\n syntaxToReactAriaPlacement,\n} from \"../react-aria-utils/placement\";\n\nfunction TooltipArrow(props: ReactAriaOverlayArrowProps): ReactElement {\n return (\n <ReactAriaOverlayArrow {...props}>\n {({ placement }) => {\n if (placement === \"center\") return null;\n if (placement === \"left\") return null;\n if (placement === \"right\") return null;\n return (\n <div\n className={classNames([\n boxStyles.block,\n styles[`arrowPlacement${placement}`],\n ])}\n >\n <svg\n className={classNames([boxStyles.block])}\n width={40}\n height={5}\n viewBox=\"0 0 40 5\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M17 0L22 5H12L17 0Z\" fill=\"currentColor\" />\n </svg>\n </div>\n );\n }}\n </ReactAriaOverlayArrow>\n );\n}\n\n/**\n * AriaTooltip: This component extends Tooltip from react-aria-components\n * It applies syntax styles and adds aadditional props:\n * - onContentChangeVisibility\n */\nexport const AriaTooltip = forwardRef<\n HTMLDivElement,\n ReactAriaTooltipProps & {\n /** Optional handler for change of visibility for overlaid content, for analytics timing */\n onChangeContentVisibility?: (visible: boolean) => void;\n }\n>(function AriaTooltip(\n { children: childrenProp, onChangeContentVisibility, ...otherProps },\n ref,\n): ReactElement {\n const className = classNames([\n boxStyles.box,\n colorStyles.gray900Color,\n colorStyles.cambioBlackBackgroundColor,\n paddingStyles.paddingX2,\n paddingStyles.paddingY2,\n roundingStyles.roundingsm,\n styles.tooltip,\n ]);\n return (\n <ReactAriaTooltip\n ref={ref}\n {...mergeProps(\n {\n className,\n offset: 8,\n crossOffset: 0,\n },\n otherProps,\n )}\n >\n {composeRenderProps(\n childrenProp,\n (children, { isEntering, isExiting }) => (\n <>\n <TooltipArrow />\n <Typography size={100} color=\"white\">\n {children}\n </Typography>\n <OverlayVisibility\n isEntering={isEntering}\n isExiting={isExiting}\n onChange={onChangeContentVisibility}\n />\n </>\n ),\n )}\n </ReactAriaTooltip>\n );\n});\n\ntype TooltipProps = {\n /**\n * Test id for the floating tooltip\n */\n \"data-testid\"?: string;\n /**\n * How long a user hovers before tooltip shows (in ms)\n * @defaultValue 0\n */\n delay?: number;\n /** Optional boolean to disable tooltip trigger behavior */\n disabled?: boolean;\n /** Optional aria-label for the tooltip (content element) */\n accessibilityLabel?: string;\n /** Required trigger element */\n children: ReactElement;\n /** Content to be shown inside the tooltip. */\n content: ReactNode;\n /** If set to true the tooltip will render initially open */\n initialOpen?: boolean;\n /** Optional handler for change of visibility for popover content, for analytics timing */\n onChangeContentVisibility?: (visible: boolean) => void;\n /** Optional handler for change of visibility for popover content, for control */\n onOpenChange?: (open: boolean) => void;\n /** Optional boolean to control open state of tooltip externally */\n open?: boolean;\n /**\n * Location of the tooltip content relative to anchor element\n * @defaultValue \"top-end\"\n */\n placement?: Placement;\n};\n/**\n * [Tooltip](https://cambly-syntax.vercel.app/?path=/docs/components-tooltip--docs) displays contextual information on hover or focus.\n *\n * Tooltip content is hidden by default and shown on hover or focus.\n * The content is hidden again when the user mouses out of the trigger element or blurs the trigger element or presses Escape\n *\n * Example Usage:\n ```\n <Tooltip\n delay={200}\n placement=\"bottom-start\"\n initialOpen\n content={(\n <Box padding={2}>\n ... some content goes here\n </Box>\n )}\n >\n <Button text=\"Trigger me\" />\n </Tooltip>\n ```\n */\nconst Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(\n props,\n ref,\n): ReactElement {\n const {\n accessibilityLabel,\n \"data-testid\": dataTestId,\n delay = 0,\n disabled = false,\n children,\n content,\n initialOpen,\n onChangeContentVisibility,\n onOpenChange,\n open,\n placement = \"top\",\n } = props;\n\n return (\n <ReactAriaTooltipTrigger\n defaultOpen={initialOpen}\n delay={delay}\n closeDelay={500}\n isDisabled={disabled}\n isOpen={open}\n onOpenChange={onOpenChange}\n >\n {/* transfer focus handlers to child element if it is focusable */}\n <Triggerable>{children}</Triggerable>\n <AriaTooltip\n ref={ref}\n placement={syntaxToReactAriaPlacement(placement)}\n aria-label={accessibilityLabel}\n data-testid={dataTestId}\n onChangeContentVisibility={onChangeContentVisibility}\n >\n {content}\n </AriaTooltip>\n </ReactAriaTooltipTrigger>\n );\n});\n\nexport default Tooltip;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Tooltip/Tooltip.module.css\"; export default {\"tooltip\":\"_tooltip_11pyp_1\",\"arrowPlacementtop\":\"_arrowPlacementtop_11pyp_5\",\"arrowPlacementbottom\":\"_arrowPlacementbottom_11pyp_10\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,kBAAqD;AACrE,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,EACA,gBAAgB;AAAA,EAEhB,WAAW;AAAA,EACX,kBAAkB;AAAA,OAEb;AAKP,OAAO,gBAAgB;;;ACduE,IAAO,yBAAQ,EAAC,WAAU,oBAAmB,qBAAoB,8BAA6B,wBAAuB,iCAAgC;;;AD8CrO,SAgDJ,UAhDI,KAgDJ,YAhDI;AArBd,SAAS,aAAa,OAAiD;AACrE,SACE,oBAAC,wDAA0B,QAA1B,EACE,WAAC,EAAE,UAAU,MAAM;AAClB,QAAI,cAAc;AAAU,aAAO;AACnC,QAAI,cAAc;AAAQ,aAAO;AACjC,QAAI,cAAc;AAAS,aAAO;AAClC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,WAAW;AAAA,UACpB,mBAAU;AAAA,UACV,uBAAO,iBAAiB,WAAW;AAAA,QACrC,CAAC;AAAA,QAED;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,WAAW,CAAC,mBAAU,KAAK,CAAC;AAAA,YACvC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,SAAQ;AAAA,YACR,OAAM;AAAA,YAEN,8BAAC,UAAK,GAAE,uBAAsB,MAAK,gBAAe;AAAA;AAAA,QACpD;AAAA;AAAA,IACF;AAAA,EAEJ,IACF;AAEJ;AAOO,IAAM,cAAc,WAMzB,SAASA,aACT,IACA,KACc;AAFd,eAAE,YAAU,cAAc,0BAnE5B,IAmEE,IAAwD,uBAAxD,IAAwD,CAAtD,YAAwB;AAG1B,QAAM,YAAY,WAAW;AAAA,IAC3B,mBAAU;AAAA,IACV,sBAAY;AAAA,IACZ,sBAAY;AAAA,IACZ,uBAAc;AAAA,IACd,uBAAc;AAAA,IACd,wBAAe;AAAA,IACf,uBAAO;AAAA,EACT,CAAC;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,OACI;AAAA,MACF;AAAA,QACE;AAAA,QACA,QAAQ;AAAA,QACR,aAAa;AAAA,MACf;AAAA,MACA;AAAA,IACF,IATD;AAAA,MAWE;AAAA,QACC;AAAA,QACA,CAAC,UAAU,EAAE,YAAY,UAAU,MACjC,iCACE;AAAA,8BAAC,gBAAa;AAAA,UACd,oBAAC,sBAAW,MAAM,KAAK,OAAM,SAC1B,UACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,UAAU;AAAA;AAAA,UACZ;AAAA,WACF;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ,CAAC;AAwDD,IAAM,UAAU,WAAyC,SAASC,SAChE,OACA,KACc;AACd,QAAM;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb;AAAA,MACA,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR;AAAA,MAGA;AAAA,4BAAC,uBAAa,UAAS;AAAA,QACvB;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAW,2BAA2B,SAAS;AAAA,YAC/C,cAAY;AAAA,YACZ,eAAa;AAAA,YACb;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,IAAO,kBAAQ;","names":["AriaTooltip","Tooltip"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tooltip/Tooltip.tsx","css-module:./Tooltip.module.css#css-module"],"names":["AriaTooltip","Tooltip"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,kBAAqD;AACrE,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,EACA,gBAAgB;AAAA,EAEhB,WAAW;AAAA,EACX,kBAAkB;AAAA,OAEb;AAKP,OAAO,gBAAgB;;;ACduE,IAAO,yBAAQ,EAAC,WAAU,oBAAmB,qBAAoB,8BAA6B,wBAAuB,iCAAgC;;;AD8CrO,SAgDJ,UAhDI,KAgDJ,YAhDI;AArBd,SAAS,aAAa,OAAiD;AACrE,SACE,oBAAC,wDAA0B,QAA1B,EACE,WAAC,EAAE,UAAU,MAAM;AAClB,QAAI,cAAc;AAAU,aAAO;AACnC,QAAI,cAAc;AAAQ,aAAO;AACjC,QAAI,cAAc;AAAS,aAAO;AAClC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,WAAW;AAAA,UACpB,mBAAU;AAAA,UACV,uBAAO,iBAAiB,WAAW;AAAA,QACrC,CAAC;AAAA,QAED;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,WAAW,CAAC,mBAAU,KAAK,CAAC;AAAA,YACvC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,SAAQ;AAAA,YACR,OAAM;AAAA,YAEN,8BAAC,UAAK,GAAE,uBAAsB,MAAK,gBAAe;AAAA;AAAA,QACpD;AAAA;AAAA,IACF;AAAA,EAEJ,IACF;AAEJ;AAOO,IAAM,cAAc,WAMzB,SAASA,aACT,IACA,KACc;AAFd,eAAE,YAAU,cAAc,0BAnE5B,IAmEE,IAAwD,uBAAxD,IAAwD,CAAtD,YAAwB;AAG1B,QAAM,YAAY,WAAW;AAAA,IAC3B,mBAAU;AAAA,IACV,sBAAY;AAAA,IACZ,sBAAY;AAAA,IACZ,uBAAc;AAAA,IACd,uBAAc;AAAA,IACd,wBAAe;AAAA,IACf,uBAAO;AAAA,EACT,CAAC;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,OACI;AAAA,MACF;AAAA,QACE;AAAA,QACA,QAAQ;AAAA,QACR,aAAa;AAAA,MACf;AAAA,MACA;AAAA,IACF,IATD;AAAA,MAWE;AAAA,QACC;AAAA,QACA,CAAC,UAAU,EAAE,YAAY,UAAU,MACjC,iCACE;AAAA,8BAAC,gBAAa;AAAA,UACd,oBAAC,sBAAW,MAAM,KAAK,OAAM,SAC1B,UACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,UAAU;AAAA;AAAA,UACZ;AAAA,WACF;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ,CAAC;AAwDD,IAAM,UAAU,WAAyC,SAASC,SAChE,OACA,KACc;AACd,QAAM;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb;AAAA,MACA,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR;AAAA,MAGA;AAAA,4BAAC,uBAAa,UAAS;AAAA,QACvB;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAW,2BAA2B,SAAS;AAAA,YAC/C,cAAY;AAAA,YACZ,eAAa;AAAA,YACb;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,IAAO,kBAAQ","sourcesContent":["import React, { forwardRef, type ReactNode, type ReactElement } from \"react\";\nimport { mergeProps } from \"react-aria\";\nimport {\n composeRenderProps,\n OverlayArrow as ReactAriaOverlayArrow,\n type OverlayArrowProps as ReactAriaOverlayArrowProps,\n Tooltip as ReactAriaTooltip,\n TooltipTrigger as ReactAriaTooltipTrigger,\n type TooltipProps as ReactAriaTooltipProps,\n} from \"react-aria-components\";\n\nimport Triggerable from \"../react-aria-utils/Triggerable\";\nimport Typography from \"../Typography/Typography\";\nimport OverlayVisibility from \"../react-aria-utils/OverlayVisibility\";\nimport classNames from \"classnames\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport styles from \"./Tooltip.module.css\";\nimport {\n type Placement,\n syntaxToReactAriaPlacement,\n} from \"../react-aria-utils/placement\";\n\nfunction TooltipArrow(props: ReactAriaOverlayArrowProps): ReactElement {\n return (\n <ReactAriaOverlayArrow {...props}>\n {({ placement }) => {\n if (placement === \"center\") return null;\n if (placement === \"left\") return null;\n if (placement === \"right\") return null;\n return (\n <div\n className={classNames([\n boxStyles.block,\n styles[`arrowPlacement${placement}`],\n ])}\n >\n <svg\n className={classNames([boxStyles.block])}\n width={40}\n height={5}\n viewBox=\"0 0 40 5\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M17 0L22 5H12L17 0Z\" fill=\"currentColor\" />\n </svg>\n </div>\n );\n }}\n </ReactAriaOverlayArrow>\n );\n}\n\n/**\n * AriaTooltip: This component extends Tooltip from react-aria-components\n * It applies syntax styles and adds aadditional props:\n * - onContentChangeVisibility\n */\nexport const AriaTooltip = forwardRef<\n HTMLDivElement,\n ReactAriaTooltipProps & {\n /** Optional handler for change of visibility for overlaid content, for analytics timing */\n onChangeContentVisibility?: (visible: boolean) => void;\n }\n>(function AriaTooltip(\n { children: childrenProp, onChangeContentVisibility, ...otherProps },\n ref,\n): ReactElement {\n const className = classNames([\n boxStyles.box,\n colorStyles.gray900Color,\n colorStyles.cambioBlackBackgroundColor,\n paddingStyles.paddingX2,\n paddingStyles.paddingY2,\n roundingStyles.roundingsm,\n styles.tooltip,\n ]);\n return (\n <ReactAriaTooltip\n ref={ref}\n {...mergeProps(\n {\n className,\n offset: 8,\n crossOffset: 0,\n },\n otherProps,\n )}\n >\n {composeRenderProps(\n childrenProp,\n (children, { isEntering, isExiting }) => (\n <>\n <TooltipArrow />\n <Typography size={100} color=\"white\">\n {children}\n </Typography>\n <OverlayVisibility\n isEntering={isEntering}\n isExiting={isExiting}\n onChange={onChangeContentVisibility}\n />\n </>\n ),\n )}\n </ReactAriaTooltip>\n );\n});\n\ntype TooltipProps = {\n /**\n * Test id for the floating tooltip\n */\n \"data-testid\"?: string;\n /**\n * How long a user hovers before tooltip shows (in ms)\n * @defaultValue 0\n */\n delay?: number;\n /** Optional boolean to disable tooltip trigger behavior */\n disabled?: boolean;\n /** Optional aria-label for the tooltip (content element) */\n accessibilityLabel?: string;\n /** Required trigger element */\n children: ReactElement;\n /** Content to be shown inside the tooltip. */\n content: ReactNode;\n /** If set to true the tooltip will render initially open */\n initialOpen?: boolean;\n /** Optional handler for change of visibility for popover content, for analytics timing */\n onChangeContentVisibility?: (visible: boolean) => void;\n /** Optional handler for change of visibility for popover content, for control */\n onOpenChange?: (open: boolean) => void;\n /** Optional boolean to control open state of tooltip externally */\n open?: boolean;\n /**\n * Location of the tooltip content relative to anchor element\n * @defaultValue \"top-end\"\n */\n placement?: Placement;\n};\n/**\n * [Tooltip](https://cambly-syntax.vercel.app/?path=/docs/components-tooltip--docs) displays contextual information on hover or focus.\n *\n * Tooltip content is hidden by default and shown on hover or focus.\n * The content is hidden again when the user mouses out of the trigger element or blurs the trigger element or presses Escape\n *\n * Example Usage:\n ```\n <Tooltip\n delay={200}\n placement=\"bottom-start\"\n initialOpen\n content={(\n <Box padding={2}>\n ... some content goes here\n </Box>\n )}\n >\n <Button text=\"Trigger me\" />\n </Tooltip>\n ```\n */\nconst Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(\n props,\n ref,\n): ReactElement {\n const {\n accessibilityLabel,\n \"data-testid\": dataTestId,\n delay = 0,\n disabled = false,\n children,\n content,\n initialOpen,\n onChangeContentVisibility,\n onOpenChange,\n open,\n placement = \"top\",\n } = props;\n\n return (\n <ReactAriaTooltipTrigger\n defaultOpen={initialOpen}\n delay={delay}\n closeDelay={500}\n isDisabled={disabled}\n isOpen={open}\n onOpenChange={onOpenChange}\n >\n {/* transfer focus handlers to child element if it is focusable */}\n <Triggerable>{children}</Triggerable>\n <AriaTooltip\n ref={ref}\n placement={syntaxToReactAriaPlacement(placement)}\n aria-label={accessibilityLabel}\n data-testid={dataTestId}\n onChangeContentVisibility={onChangeContentVisibility}\n >\n {content}\n </AriaTooltip>\n </ReactAriaTooltipTrigger>\n );\n});\n\nexport default Tooltip;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Tooltip/Tooltip.module.css\"; export default {\"tooltip\":\"_tooltip_11pyp_1\",\"arrowPlacementtop\":\"_arrowPlacementtop_11pyp_5\",\"arrowPlacementbottom\":\"_arrowPlacementbottom_11pyp_10\"}"]}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|