@cambly/syntax-core 20.2.0 → 20.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/Dialog/Dialog.cjs +2 -2
- package/dist/Dialog/Dialog.css +2 -8
- package/dist/Dialog/Dialog.css.map +1 -1
- package/dist/Dialog/Dialog.js +1 -1
- package/dist/Dialog/ModalDialog.cjs +3 -3
- package/dist/Dialog/ModalDialog.css +2 -8
- package/dist/Dialog/ModalDialog.css.map +1 -1
- package/dist/Dialog/ModalDialog.js +2 -2
- package/dist/Popover/Popover.cjs +4 -4
- package/dist/Popover/Popover.css +2 -8
- package/dist/Popover/Popover.css.map +1 -1
- package/dist/Popover/Popover.js +3 -3
- package/dist/RichSelect/RichSelectList.cjs +6 -6
- package/dist/RichSelect/RichSelectList.css +2 -8
- package/dist/RichSelect/RichSelectList.css.map +1 -1
- package/dist/RichSelect/RichSelectList.js +5 -5
- package/dist/SelectList/SelectList.cjs +3 -3
- package/dist/SelectList/SelectList.js +2 -2
- package/dist/__chunks/{VZTP4FJU.cjs → 34KWYODX.cjs} +5 -5
- package/dist/__chunks/{HKWOBYWV.cjs → ARG3EXY4.cjs} +1 -1
- package/dist/__chunks/{HKWOBYWV.cjs.map → ARG3EXY4.cjs.map} +1 -1
- package/dist/__chunks/{LE2W6Z2R.js → F2QRADHL.js} +2 -2
- package/dist/__chunks/{DJCHJ6JD.js → FVE7IUGA.js} +1 -1
- package/dist/__chunks/{DJCHJ6JD.js.map → FVE7IUGA.js.map} +1 -1
- package/dist/__chunks/{ATUBU46J.js → IKOJX6EH.js} +3 -3
- package/dist/__chunks/{4Y2AWRAG.cjs → JKREBCJY.cjs} +9 -9
- package/dist/__chunks/{3RX4RMGC.cjs → OKT24L6D.cjs} +2 -2
- package/dist/__chunks/{3RX4RMGC.cjs.map → OKT24L6D.cjs.map} +1 -1
- package/dist/__chunks/{Y5R3XLL7.cjs → P3YRUAAE.cjs} +3 -3
- package/dist/__chunks/{WXCTEEON.js → PQOA7RCC.js} +4 -4
- package/dist/__chunks/{CXENLD6O.js → QVK3VV5M.js} +2 -2
- package/dist/__chunks/{CXENLD6O.js.map → QVK3VV5M.js.map} +1 -1
- package/dist/__chunks/{OCNJ63NC.cjs → S3NKZJST.cjs} +5 -5
- package/dist/__chunks/{QURJJHRN.js → YN2ORRKZ.js} +2 -2
- package/dist/index.cjs +7 -7
- package/dist/index.css +2 -8
- package/dist/index.css.map +1 -1
- package/dist/index.js +6 -6
- package/package.json +1 -1
- /package/dist/__chunks/{VZTP4FJU.cjs.map → 34KWYODX.cjs.map} +0 -0
- /package/dist/__chunks/{LE2W6Z2R.js.map → F2QRADHL.js.map} +0 -0
- /package/dist/__chunks/{ATUBU46J.js.map → IKOJX6EH.js.map} +0 -0
- /package/dist/__chunks/{4Y2AWRAG.cjs.map → JKREBCJY.cjs.map} +0 -0
- /package/dist/__chunks/{Y5R3XLL7.cjs.map → P3YRUAAE.cjs.map} +0 -0
- /package/dist/__chunks/{WXCTEEON.js.map → PQOA7RCC.js.map} +0 -0
- /package/dist/__chunks/{OCNJ63NC.cjs.map → S3NKZJST.cjs.map} +0 -0
- /package/dist/__chunks/{QURJJHRN.js.map → YN2ORRKZ.js.map} +0 -0
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
ModalDialog_default
|
|
4
|
-
} from "./
|
|
4
|
+
} from "./YN2ORRKZ.js";
|
|
5
5
|
import {
|
|
6
6
|
Dialog_default
|
|
7
|
-
} from "./
|
|
7
|
+
} from "./QVK3VV5M.js";
|
|
8
8
|
import {
|
|
9
9
|
layout_module_default
|
|
10
10
|
} from "./DDUJFFG7.js";
|
|
@@ -141,4 +141,4 @@ export {
|
|
|
141
141
|
AriaPopover,
|
|
142
142
|
Popover_default
|
|
143
143
|
};
|
|
144
|
-
//# sourceMappingURL=
|
|
144
|
+
//# sourceMappingURL=IKOJX6EH.js.map
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _34KWYODXcjs = require('./34KWYODX.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
var
|
|
7
|
+
var _OKT24L6Dcjs = require('./OKT24L6D.cjs');
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _ARG3EXY4cjs = require('./ARG3EXY4.cjs');
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
|
|
@@ -147,12 +147,12 @@ function RichSelectList(props) {
|
|
|
147
147
|
};
|
|
148
148
|
const getArrowIconColor = () => {
|
|
149
149
|
if (errorText) {
|
|
150
|
-
return
|
|
150
|
+
return _ARG3EXY4cjs.ColorBaseDestructive700;
|
|
151
151
|
} else {
|
|
152
152
|
if (color === "clear") {
|
|
153
|
-
return
|
|
153
|
+
return _ARG3EXY4cjs.ColorCambioWhite100;
|
|
154
154
|
} else {
|
|
155
|
-
return
|
|
155
|
+
return _ARG3EXY4cjs.ColorBaseGray700;
|
|
156
156
|
}
|
|
157
157
|
}
|
|
158
158
|
};
|
|
@@ -161,7 +161,7 @@ function RichSelectList(props) {
|
|
|
161
161
|
{
|
|
162
162
|
values: [
|
|
163
163
|
[_6FA2AYTDcjs.RichSelectBoxContext, { autoFocus: true }],
|
|
164
|
-
[
|
|
164
|
+
[_OKT24L6Dcjs.DialogContext, { padding: autosave ? void 0 : 0 }]
|
|
165
165
|
// this is altering Popover's internal dialog padding to show the sticky save/close buttons. Ideally this could be avoided
|
|
166
166
|
],
|
|
167
167
|
children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
@@ -188,7 +188,7 @@ function RichSelectList(props) {
|
|
|
188
188
|
})
|
|
189
189
|
) }),
|
|
190
190
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
191
|
-
|
|
191
|
+
_34KWYODXcjs.Popover_default,
|
|
192
192
|
{
|
|
193
193
|
ref: overlayHandlerRef,
|
|
194
194
|
disabled,
|
|
@@ -286,4 +286,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
|
|
|
286
286
|
|
|
287
287
|
|
|
288
288
|
exports.RichSelectList_default = RichSelectList_default;
|
|
289
|
-
//# sourceMappingURL=
|
|
289
|
+
//# sourceMappingURL=JKREBCJY.cjs.map
|
|
@@ -25,7 +25,7 @@ var _react = require('react'); var _react2 = _interopRequireDefault(_react);
|
|
|
25
25
|
var elevation_module_default = { "elevation400BoxShadow": "_elevation400BoxShadow_vw6sp_1" };
|
|
26
26
|
|
|
27
27
|
// css-module:./Dialog.module.css#css-module
|
|
28
|
-
var Dialog_module_default = { "dialog": "
|
|
28
|
+
var Dialog_module_default = { "dialog": "_dialog_1ds6e_1" };
|
|
29
29
|
|
|
30
30
|
// src/Dialog/Dialog.tsx
|
|
31
31
|
var _reactariacomponents = require('react-aria-components');
|
|
@@ -77,4 +77,4 @@ var Dialog_default = Dialog;
|
|
|
77
77
|
|
|
78
78
|
|
|
79
79
|
exports.DialogContext = DialogContext; exports.Dialog_default = Dialog_default;
|
|
80
|
-
//# sourceMappingURL=
|
|
80
|
+
//# sourceMappingURL=OKT24L6D.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Dialog/Dialog.tsx","css-module:../elevation/elevation.module.css#css-module","css-module:./Dialog.module.css#css-module"],"names":["Dialog"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAO;AAAA,EAEL;AAAA,EAEA;AAAA,OAEK;;;ACN2F,IAAO,2BAAQ,EAAC,yBAAwB,iCAAgC;;;ACA9E,IAAO,wBAAQ,EAAC,UAAS,kBAAiB;;;AFctI,SAAS,UAAU,uBAAuB;AAC1C,OAAO,gBAAgB;AAqDnB;AAtCJ,IAAM,gBAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAMO,IAAM,gBAAgB,MAAM,cAAiC,CAAC,CAAC;AActE,IAAM,SAAS,WAAwC,SAASA,QAC9D,OACA,KACc;AACd,QAAM;AAAA,IACJ,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,IAAI;AAEJ,QAAM,EAAE,QAAQ,IAAI,WAAW,aAAa;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MAGb,cAAY;AAAA,MACZ,WAAW,WAAW;AAAA,QACpB,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,sBAAY;AAAA,QACZ,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,wBAAe;AAAA,QACf,yBAAgB;AAAA,QAChB,sBAAa;AAAA,QACb,sBAAa;AAAA,QACb,sBAAO;AAAA,MACT,CAAC;AAAA,MAEA;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,iBAAQ","sourcesContent":["import React, {\n type ReactNode,\n forwardRef,\n type ReactElement,\n useContext,\n type ComponentProps,\n} from \"react\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport elevationStyles from \"../elevation/elevation.module.css\";\nimport layoutStyles from \"../layout.module.css\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport styles from \"./Dialog.module.css\";\nimport { Dialog as ReactAriaDialog } from \"react-aria-components\";\nimport classNames from \"classnames\";\nimport type Box from \"../Box/Box\";\n\ntype DialogSize = \"sm\" | \"md\" | \"lg\";\nexport type DialogProps = {\n /** Test id for the floating dialog */\n \"data-testid\"?: string;\n /** aria-label for the dialog */\n accessibilityLabel?: string;\n /** Content to be shown inside the dialog. */\n children?: ReactNode;\n /** Optional size of the dialog box */\n size?: DialogSize;\n};\n\nconst sizeToPadding: Record<DialogSize, 4 | 5 | 6> = {\n sm: 4,\n md: 5,\n lg: 6,\n};\n\ntype DialogContextType = {\n /** padding of dialog content. overrides \\\"size\\\" prop's padding\" */\n padding?: ComponentProps<typeof Box>[\"padding\"];\n};\nexport const DialogContext = React.createContext<DialogContextType>({});\n\n/**\n * Dialog is a display component for showing content in Popovers, Modals, etc...\n *\n * Example Usage:\n ```\n <Dialog accessibilityLabel=\"Select some options\">\n <Box padding={2} maxWidth={400}>\n ... some content goes here\n </Box>\n </Dialog>\n ```\n */\nconst Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(\n props,\n ref,\n): ReactElement {\n const {\n \"data-testid\": dataTestId,\n accessibilityLabel,\n children,\n size = \"md\",\n } = props;\n\n const { padding } = useContext(DialogContext);\n\n return (\n <ReactAriaDialog\n ref={ref}\n data-testid={dataTestId}\n // first thing screen reader reads\n // e.g. \"<this was the label prop>, dialog, 4 items...\"\n aria-label={accessibilityLabel}\n className={classNames([\n boxStyles.box,\n boxStyles.flex,\n boxStyles.column,\n boxStyles.gap4,\n boxStyles.relative,\n boxStyles.overflowauto,\n colorStyles.whiteBackgroundColor,\n paddingStyles[`paddingX${padding ?? sizeToPadding[size]}`],\n paddingStyles[`paddingY${padding ?? sizeToPadding[size]}`],\n roundingStyles.roundingmd,\n elevationStyles.elevation400BoxShadow,\n layoutStyles.fullMaxHeight,\n layoutStyles.visibilityVisible,\n styles.dialog,\n ])}\n >\n {children}\n </ReactAriaDialog>\n );\n});\n\nexport default Dialog;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/elevation/elevation.module.css\"; export default {\"elevation400BoxShadow\":\"_elevation400BoxShadow_vw6sp_1\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Dialog/Dialog.module.css\"; export default {\"dialog\":\"
|
|
1
|
+
{"version":3,"sources":["../../src/Dialog/Dialog.tsx","css-module:../elevation/elevation.module.css#css-module","css-module:./Dialog.module.css#css-module"],"names":["Dialog"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAO;AAAA,EAEL;AAAA,EAEA;AAAA,OAEK;;;ACN2F,IAAO,2BAAQ,EAAC,yBAAwB,iCAAgC;;;ACA9E,IAAO,wBAAQ,EAAC,UAAS,kBAAiB;;;AFctI,SAAS,UAAU,uBAAuB;AAC1C,OAAO,gBAAgB;AAqDnB;AAtCJ,IAAM,gBAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAMO,IAAM,gBAAgB,MAAM,cAAiC,CAAC,CAAC;AActE,IAAM,SAAS,WAAwC,SAASA,QAC9D,OACA,KACc;AACd,QAAM;AAAA,IACJ,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,IAAI;AAEJ,QAAM,EAAE,QAAQ,IAAI,WAAW,aAAa;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MAGb,cAAY;AAAA,MACZ,WAAW,WAAW;AAAA,QACpB,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,sBAAY;AAAA,QACZ,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,wBAAe;AAAA,QACf,yBAAgB;AAAA,QAChB,sBAAa;AAAA,QACb,sBAAa;AAAA,QACb,sBAAO;AAAA,MACT,CAAC;AAAA,MAEA;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,iBAAQ","sourcesContent":["import React, {\n type ReactNode,\n forwardRef,\n type ReactElement,\n useContext,\n type ComponentProps,\n} from \"react\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport elevationStyles from \"../elevation/elevation.module.css\";\nimport layoutStyles from \"../layout.module.css\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport styles from \"./Dialog.module.css\";\nimport { Dialog as ReactAriaDialog } from \"react-aria-components\";\nimport classNames from \"classnames\";\nimport type Box from \"../Box/Box\";\n\ntype DialogSize = \"sm\" | \"md\" | \"lg\";\nexport type DialogProps = {\n /** Test id for the floating dialog */\n \"data-testid\"?: string;\n /** aria-label for the dialog */\n accessibilityLabel?: string;\n /** Content to be shown inside the dialog. */\n children?: ReactNode;\n /** Optional size of the dialog box */\n size?: DialogSize;\n};\n\nconst sizeToPadding: Record<DialogSize, 4 | 5 | 6> = {\n sm: 4,\n md: 5,\n lg: 6,\n};\n\ntype DialogContextType = {\n /** padding of dialog content. overrides \\\"size\\\" prop's padding\" */\n padding?: ComponentProps<typeof Box>[\"padding\"];\n};\nexport const DialogContext = React.createContext<DialogContextType>({});\n\n/**\n * Dialog is a display component for showing content in Popovers, Modals, etc...\n *\n * Example Usage:\n ```\n <Dialog accessibilityLabel=\"Select some options\">\n <Box padding={2} maxWidth={400}>\n ... some content goes here\n </Box>\n </Dialog>\n ```\n */\nconst Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(\n props,\n ref,\n): ReactElement {\n const {\n \"data-testid\": dataTestId,\n accessibilityLabel,\n children,\n size = \"md\",\n } = props;\n\n const { padding } = useContext(DialogContext);\n\n return (\n <ReactAriaDialog\n ref={ref}\n data-testid={dataTestId}\n // first thing screen reader reads\n // e.g. \"<this was the label prop>, dialog, 4 items...\"\n aria-label={accessibilityLabel}\n className={classNames([\n boxStyles.box,\n boxStyles.flex,\n boxStyles.column,\n boxStyles.gap4,\n boxStyles.relative,\n boxStyles.overflowauto,\n colorStyles.whiteBackgroundColor,\n paddingStyles[`paddingX${padding ?? sizeToPadding[size]}`],\n paddingStyles[`paddingY${padding ?? sizeToPadding[size]}`],\n roundingStyles.roundingmd,\n elevationStyles.elevation400BoxShadow,\n layoutStyles.fullMaxHeight,\n layoutStyles.visibilityVisible,\n styles.dialog,\n ])}\n >\n {children}\n </ReactAriaDialog>\n );\n});\n\nexport default Dialog;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/elevation/elevation.module.css\"; export default {\"elevation400BoxShadow\":\"_elevation400BoxShadow_vw6sp_1\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Dialog/Dialog.module.css\"; export default {\"dialog\":\"_dialog_1ds6e_1\"}"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _OKT24L6Dcjs = require('./OKT24L6D.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
var _VJWLFFADcjs = require('./VJWLFFAD.cjs');
|
|
@@ -113,7 +113,7 @@ var ModalDialog = _react.forwardRef.call(void 0,
|
|
|
113
113
|
"aria-label": accessibilityLabel,
|
|
114
114
|
onChangeContentVisibility,
|
|
115
115
|
children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
116
|
-
|
|
116
|
+
_OKT24L6Dcjs.Dialog_default,
|
|
117
117
|
{
|
|
118
118
|
accessibilityLabel,
|
|
119
119
|
"data-testid": dataTestId,
|
|
@@ -157,4 +157,4 @@ var ModalDialog_default = ModalDialog;
|
|
|
157
157
|
|
|
158
158
|
|
|
159
159
|
exports.AriaModalOverlay = AriaModalOverlay; exports.AriaModal = AriaModal; exports.ModalDialog_default = ModalDialog_default;
|
|
160
|
-
//# sourceMappingURL=
|
|
160
|
+
//# sourceMappingURL=P3YRUAAE.cjs.map
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
Popover_default
|
|
4
|
-
} from "./
|
|
4
|
+
} from "./IKOJX6EH.js";
|
|
5
5
|
import {
|
|
6
6
|
DialogContext
|
|
7
|
-
} from "./
|
|
7
|
+
} from "./QVK3VV5M.js";
|
|
8
8
|
import {
|
|
9
9
|
ColorBaseDestructive700,
|
|
10
10
|
ColorBaseGray700,
|
|
11
11
|
ColorCambioWhite100
|
|
12
|
-
} from "./
|
|
12
|
+
} from "./FVE7IUGA.js";
|
|
13
13
|
import {
|
|
14
14
|
RichSelectBoxContext,
|
|
15
15
|
RichSelectBox_default,
|
|
@@ -286,4 +286,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
|
|
|
286
286
|
export {
|
|
287
287
|
RichSelectList_default
|
|
288
288
|
};
|
|
289
|
-
//# sourceMappingURL=
|
|
289
|
+
//# sourceMappingURL=PQOA7RCC.js.map
|
|
@@ -25,7 +25,7 @@ import React, {
|
|
|
25
25
|
var elevation_module_default = { "elevation400BoxShadow": "_elevation400BoxShadow_vw6sp_1" };
|
|
26
26
|
|
|
27
27
|
// css-module:./Dialog.module.css#css-module
|
|
28
|
-
var Dialog_module_default = { "dialog": "
|
|
28
|
+
var Dialog_module_default = { "dialog": "_dialog_1ds6e_1" };
|
|
29
29
|
|
|
30
30
|
// src/Dialog/Dialog.tsx
|
|
31
31
|
import { Dialog as ReactAriaDialog } from "react-aria-components";
|
|
@@ -77,4 +77,4 @@ export {
|
|
|
77
77
|
DialogContext,
|
|
78
78
|
Dialog_default
|
|
79
79
|
};
|
|
80
|
-
//# sourceMappingURL=
|
|
80
|
+
//# sourceMappingURL=QVK3VV5M.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Dialog/Dialog.tsx","css-module:../elevation/elevation.module.css#css-module","css-module:./Dialog.module.css#css-module"],"sourcesContent":["import React, {\n type ReactNode,\n forwardRef,\n type ReactElement,\n useContext,\n type ComponentProps,\n} from \"react\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport elevationStyles from \"../elevation/elevation.module.css\";\nimport layoutStyles from \"../layout.module.css\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport styles from \"./Dialog.module.css\";\nimport { Dialog as ReactAriaDialog } from \"react-aria-components\";\nimport classNames from \"classnames\";\nimport type Box from \"../Box/Box\";\n\ntype DialogSize = \"sm\" | \"md\" | \"lg\";\nexport type DialogProps = {\n /** Test id for the floating dialog */\n \"data-testid\"?: string;\n /** aria-label for the dialog */\n accessibilityLabel?: string;\n /** Content to be shown inside the dialog. */\n children?: ReactNode;\n /** Optional size of the dialog box */\n size?: DialogSize;\n};\n\nconst sizeToPadding: Record<DialogSize, 4 | 5 | 6> = {\n sm: 4,\n md: 5,\n lg: 6,\n};\n\ntype DialogContextType = {\n /** padding of dialog content. overrides \\\"size\\\" prop's padding\" */\n padding?: ComponentProps<typeof Box>[\"padding\"];\n};\nexport const DialogContext = React.createContext<DialogContextType>({});\n\n/**\n * Dialog is a display component for showing content in Popovers, Modals, etc...\n *\n * Example Usage:\n ```\n <Dialog accessibilityLabel=\"Select some options\">\n <Box padding={2} maxWidth={400}>\n ... some content goes here\n </Box>\n </Dialog>\n ```\n */\nconst Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(\n props,\n ref,\n): ReactElement {\n const {\n \"data-testid\": dataTestId,\n accessibilityLabel,\n children,\n size = \"md\",\n } = props;\n\n const { padding } = useContext(DialogContext);\n\n return (\n <ReactAriaDialog\n ref={ref}\n data-testid={dataTestId}\n // first thing screen reader reads\n // e.g. \"<this was the label prop>, dialog, 4 items...\"\n aria-label={accessibilityLabel}\n className={classNames([\n boxStyles.box,\n boxStyles.flex,\n boxStyles.column,\n boxStyles.gap4,\n boxStyles.relative,\n boxStyles.overflowauto,\n colorStyles.whiteBackgroundColor,\n paddingStyles[`paddingX${padding ?? sizeToPadding[size]}`],\n paddingStyles[`paddingY${padding ?? sizeToPadding[size]}`],\n roundingStyles.roundingmd,\n elevationStyles.elevation400BoxShadow,\n layoutStyles.fullMaxHeight,\n layoutStyles.visibilityVisible,\n styles.dialog,\n ])}\n >\n {children}\n </ReactAriaDialog>\n );\n});\n\nexport default Dialog;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/elevation/elevation.module.css\"; export default {\"elevation400BoxShadow\":\"_elevation400BoxShadow_vw6sp_1\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Dialog/Dialog.module.css\"; export default {\"dialog\":\"
|
|
1
|
+
{"version":3,"sources":["../../src/Dialog/Dialog.tsx","css-module:../elevation/elevation.module.css#css-module","css-module:./Dialog.module.css#css-module"],"sourcesContent":["import React, {\n type ReactNode,\n forwardRef,\n type ReactElement,\n useContext,\n type ComponentProps,\n} from \"react\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport elevationStyles from \"../elevation/elevation.module.css\";\nimport layoutStyles from \"../layout.module.css\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport styles from \"./Dialog.module.css\";\nimport { Dialog as ReactAriaDialog } from \"react-aria-components\";\nimport classNames from \"classnames\";\nimport type Box from \"../Box/Box\";\n\ntype DialogSize = \"sm\" | \"md\" | \"lg\";\nexport type DialogProps = {\n /** Test id for the floating dialog */\n \"data-testid\"?: string;\n /** aria-label for the dialog */\n accessibilityLabel?: string;\n /** Content to be shown inside the dialog. */\n children?: ReactNode;\n /** Optional size of the dialog box */\n size?: DialogSize;\n};\n\nconst sizeToPadding: Record<DialogSize, 4 | 5 | 6> = {\n sm: 4,\n md: 5,\n lg: 6,\n};\n\ntype DialogContextType = {\n /** padding of dialog content. overrides \\\"size\\\" prop's padding\" */\n padding?: ComponentProps<typeof Box>[\"padding\"];\n};\nexport const DialogContext = React.createContext<DialogContextType>({});\n\n/**\n * Dialog is a display component for showing content in Popovers, Modals, etc...\n *\n * Example Usage:\n ```\n <Dialog accessibilityLabel=\"Select some options\">\n <Box padding={2} maxWidth={400}>\n ... some content goes here\n </Box>\n </Dialog>\n ```\n */\nconst Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(\n props,\n ref,\n): ReactElement {\n const {\n \"data-testid\": dataTestId,\n accessibilityLabel,\n children,\n size = \"md\",\n } = props;\n\n const { padding } = useContext(DialogContext);\n\n return (\n <ReactAriaDialog\n ref={ref}\n data-testid={dataTestId}\n // first thing screen reader reads\n // e.g. \"<this was the label prop>, dialog, 4 items...\"\n aria-label={accessibilityLabel}\n className={classNames([\n boxStyles.box,\n boxStyles.flex,\n boxStyles.column,\n boxStyles.gap4,\n boxStyles.relative,\n boxStyles.overflowauto,\n colorStyles.whiteBackgroundColor,\n paddingStyles[`paddingX${padding ?? sizeToPadding[size]}`],\n paddingStyles[`paddingY${padding ?? sizeToPadding[size]}`],\n roundingStyles.roundingmd,\n elevationStyles.elevation400BoxShadow,\n layoutStyles.fullMaxHeight,\n layoutStyles.visibilityVisible,\n styles.dialog,\n ])}\n >\n {children}\n </ReactAriaDialog>\n );\n});\n\nexport default Dialog;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/elevation/elevation.module.css\"; export default {\"elevation400BoxShadow\":\"_elevation400BoxShadow_vw6sp_1\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Dialog/Dialog.module.css\"; export default {\"dialog\":\"_dialog_1ds6e_1\"}"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAO;AAAA,EAEL;AAAA,EAEA;AAAA,OAEK;;;ACN2F,IAAO,2BAAQ,EAAC,yBAAwB,iCAAgC;;;ACA9E,IAAO,wBAAQ,EAAC,UAAS,kBAAiB;;;AFctI,SAAS,UAAU,uBAAuB;AAC1C,OAAO,gBAAgB;AAqDnB;AAtCJ,IAAM,gBAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAMO,IAAM,gBAAgB,MAAM,cAAiC,CAAC,CAAC;AActE,IAAM,SAAS,WAAwC,SAASA,QAC9D,OACA,KACc;AACd,QAAM;AAAA,IACJ,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,IAAI;AAEJ,QAAM,EAAE,QAAQ,IAAI,WAAW,aAAa;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MAGb,cAAY;AAAA,MACZ,WAAW,WAAW;AAAA,QACpB,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,sBAAY;AAAA,QACZ,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,wBAAe;AAAA,QACf,yBAAgB;AAAA,QAChB,sBAAa;AAAA,QACb,sBAAa;AAAA,QACb,sBAAO;AAAA,MACT,CAAC;AAAA,MAEA;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,iBAAQ;","names":["Dialog"]}
|
|
@@ -6,7 +6,7 @@ var _JVGX637Ecjs = require('./JVGX637E.cjs');
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
var
|
|
9
|
+
var _ARG3EXY4cjs = require('./ARG3EXY4.cjs');
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
var _XLUVINJWcjs = require('./XLUVINJW.cjs');
|
|
@@ -66,12 +66,12 @@ function SelectList({
|
|
|
66
66
|
};
|
|
67
67
|
const getArrowIconColor = () => {
|
|
68
68
|
if (errorText) {
|
|
69
|
-
return
|
|
69
|
+
return _ARG3EXY4cjs.ColorBaseDestructive700;
|
|
70
70
|
} else {
|
|
71
71
|
if (on === "darkBackground") {
|
|
72
|
-
return
|
|
72
|
+
return _ARG3EXY4cjs.ColorCambioWhite100;
|
|
73
73
|
} else {
|
|
74
|
-
return
|
|
74
|
+
return _ARG3EXY4cjs.ColorBaseGray700;
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
77
|
};
|
|
@@ -140,4 +140,4 @@ SelectList.Option = _JVGX637Ecjs.SelectOption_default;
|
|
|
140
140
|
|
|
141
141
|
|
|
142
142
|
exports.SelectList = SelectList;
|
|
143
|
-
//# sourceMappingURL=
|
|
143
|
+
//# sourceMappingURL=S3NKZJST.cjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
Dialog_default
|
|
4
|
-
} from "./
|
|
4
|
+
} from "./QVK3VV5M.js";
|
|
5
5
|
import {
|
|
6
6
|
IconButton_default
|
|
7
7
|
} from "./GDXRRA57.js";
|
|
@@ -157,4 +157,4 @@ export {
|
|
|
157
157
|
AriaModal,
|
|
158
158
|
ModalDialog_default
|
|
159
159
|
};
|
|
160
|
-
//# sourceMappingURL=
|
|
160
|
+
//# sourceMappingURL=YN2ORRKZ.js.map
|
package/dist/index.cjs
CHANGED
|
@@ -32,21 +32,21 @@ var _RUXLZWRZcjs = require('./__chunks/RUXLZWRZ.cjs');
|
|
|
32
32
|
require('./__chunks/TH4TA3JN.cjs');
|
|
33
33
|
|
|
34
34
|
|
|
35
|
-
var
|
|
35
|
+
var _S3NKZJSTcjs = require('./__chunks/S3NKZJST.cjs');
|
|
36
36
|
require('./__chunks/JVGX637E.cjs');
|
|
37
37
|
|
|
38
38
|
|
|
39
|
-
var
|
|
39
|
+
var _JKREBCJYcjs = require('./__chunks/JKREBCJY.cjs');
|
|
40
40
|
|
|
41
41
|
|
|
42
|
-
var
|
|
43
|
-
require('./__chunks/
|
|
44
|
-
require('./__chunks/
|
|
42
|
+
var _34KWYODXcjs = require('./__chunks/34KWYODX.cjs');
|
|
43
|
+
require('./__chunks/P3YRUAAE.cjs');
|
|
44
|
+
require('./__chunks/OKT24L6D.cjs');
|
|
45
45
|
|
|
46
46
|
|
|
47
47
|
var _VJWLFFADcjs = require('./__chunks/VJWLFFAD.cjs');
|
|
48
48
|
require('./__chunks/WFVGNGEP.cjs');
|
|
49
|
-
require('./__chunks/
|
|
49
|
+
require('./__chunks/ARG3EXY4.cjs');
|
|
50
50
|
require('./__chunks/6FA2AYTD.cjs');
|
|
51
51
|
|
|
52
52
|
|
|
@@ -162,5 +162,5 @@ require('./__chunks/X2SDR4SD.cjs');
|
|
|
162
162
|
|
|
163
163
|
|
|
164
164
|
|
|
165
|
-
exports.Avatar = _GQUBAKFOcjs.Avatar_default; exports.AvatarGroup = _GEXK47GRcjs.AvatarGroup; exports.Badge = _J5XNUGR3cjs.Badge_default; exports.Box = _QODNNCT2cjs.Box_default; exports.Button = _44EISWI2cjs.Button_default; exports.ButtonGroup = _6KSVCCCBcjs.ButtonGroup_default; exports.Card = _AVJQ2E2Gcjs.Card_default; exports.Checkbox = _XUDOYOWHcjs.Checkbox_default; exports.Chip = _MENEINOOcjs.Chip_default; exports.Divider = _A3B4YKGNcjs.Divider; exports.Heading = _O7M2NMNZcjs.Heading_default; exports.Icon = _IBT4YOI5cjs.Icon_default; exports.IconButton = _VJWLFFADcjs.IconButton_default; exports.IconLinkButton = _RUXLZWRZcjs.IconLinkButton_default; exports.LinkButton = _TTUGZZPVcjs.LinkButton_default; exports.Modal = _67PPAFHWcjs.Modal; exports.Popover =
|
|
165
|
+
exports.Avatar = _GQUBAKFOcjs.Avatar_default; exports.AvatarGroup = _GEXK47GRcjs.AvatarGroup; exports.Badge = _J5XNUGR3cjs.Badge_default; exports.Box = _QODNNCT2cjs.Box_default; exports.Button = _44EISWI2cjs.Button_default; exports.ButtonGroup = _6KSVCCCBcjs.ButtonGroup_default; exports.Card = _AVJQ2E2Gcjs.Card_default; exports.Checkbox = _XUDOYOWHcjs.Checkbox_default; exports.Chip = _MENEINOOcjs.Chip_default; exports.Divider = _A3B4YKGNcjs.Divider; exports.Heading = _O7M2NMNZcjs.Heading_default; exports.Icon = _IBT4YOI5cjs.Icon_default; exports.IconButton = _VJWLFFADcjs.IconButton_default; exports.IconLinkButton = _RUXLZWRZcjs.IconLinkButton_default; exports.LinkButton = _TTUGZZPVcjs.LinkButton_default; exports.Modal = _67PPAFHWcjs.Modal; exports.Popover = _34KWYODXcjs.Popover_default; exports.RadioButton = _DHXH7ZSGcjs.RadioButton_default; exports.RichSelectList = _JKREBCJYcjs.RichSelectList_default; exports.SelectList = _S3NKZJSTcjs.SelectList; exports.TabButton = _DJSQRPF3cjs.TabButton; exports.TabLink = _3XOGCBCJcjs.TabLink_default; exports.Tabs = _4QUXUGJPcjs.Tabs; exports.TapArea = _3UEOKPM2cjs.TapArea_default; exports.TextArea = _VVRMCACEcjs.TextArea_default; exports.TextField = _PMNFDB6Ccjs.TextField; exports.ThemeProvider = _36JMUQOLcjs.ThemeProvider; exports.Tooltip = _3ULBWSHTcjs.Tooltip_default; exports.Typography = _4TYOP5XMcjs.Typography_default; exports.WordConfetti = _YGFJ2STLcjs.WordConfetti_default;
|
|
166
166
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.css
CHANGED
|
@@ -2867,15 +2867,9 @@
|
|
|
2867
2867
|
}
|
|
2868
2868
|
|
|
2869
2869
|
/* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Dialog/Dialog.module.css/#css-module-data */
|
|
2870
|
-
.
|
|
2871
|
-
min-width: var(--trigger-width);
|
|
2872
|
-
}
|
|
2873
|
-
._dialog_1bme6_1:focus-visible {
|
|
2870
|
+
._dialog_1ds6e_1 {
|
|
2874
2871
|
outline: none;
|
|
2875
|
-
|
|
2876
|
-
0 0 0 2px #fff,
|
|
2877
|
-
0 0 0 4px #000,
|
|
2878
|
-
var(--elevation-400);
|
|
2872
|
+
min-width: var(--trigger-width);
|
|
2879
2873
|
}
|
|
2880
2874
|
|
|
2881
2875
|
/* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Dialog/ModalDialog.module.css/#css-module-data */
|