@cambly/syntax-core 20.7.0 → 21.1.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.css +11 -8
- package/dist/RichSelect/RichSelectList.css.map +1 -1
- package/dist/RichSelect/RichSelectList.js +3 -3
- package/dist/SelectList/SelectList.js +2 -2
- package/dist/TabButton/TabButton.css +11 -8
- package/dist/TabButton/TabButton.css.map +1 -1
- package/dist/TabButton/TabButton.js +2 -2
- package/dist/TapArea/TapArea.css +11 -8
- package/dist/TapArea/TapArea.css.map +1 -1
- package/dist/TapArea/TapArea.d.ts +4 -0
- package/dist/TapArea/TapArea.js +1 -1
- package/dist/__chunks/{WCHW3AYL.js → EOWYHIIV.js} +2 -2
- package/dist/__chunks/{XMSJWQLW.js → L6DEFAVZ.js} +2 -2
- package/dist/__chunks/{WIKMZ7QF.js → RAYMYVIO.js} +3 -3
- package/dist/__chunks/{77FFPQY6.js → S3C44SBB.js} +5 -2
- package/dist/__chunks/S3C44SBB.js.map +1 -0
- package/dist/__chunks/{JGDLN47H.js → SGGPK2H4.js} +1 -1
- package/dist/__chunks/{JGDLN47H.js.map → SGGPK2H4.js.map} +1 -1
- package/dist/index.css +11 -8
- package/dist/index.css.map +1 -1
- package/dist/index.js +5 -5
- package/package.json +5 -5
- package/dist/Avatar/Avatar.cjs +0 -16
- package/dist/Avatar/Avatar.cjs.map +0 -1
- package/dist/AvatarGroup/AvatarGroup.cjs +0 -17
- package/dist/AvatarGroup/AvatarGroup.cjs.map +0 -1
- package/dist/Badge/Badge.cjs +0 -17
- package/dist/Badge/Badge.cjs.map +0 -1
- package/dist/Box/Box.cjs +0 -14
- package/dist/Box/Box.cjs.map +0 -1
- package/dist/Button/Button.cjs +0 -25
- package/dist/Button/Button.cjs.map +0 -1
- package/dist/Button/constants/iconSize.cjs +0 -11
- package/dist/Button/constants/iconSize.cjs.map +0 -1
- package/dist/Button/constants/loadingIconSize.cjs +0 -9
- package/dist/Button/constants/loadingIconSize.cjs.map +0 -1
- package/dist/Button/constants/textVariant.cjs +0 -9
- package/dist/Button/constants/textVariant.cjs.map +0 -1
- package/dist/ButtonGroup/ButtonGroup.cjs +0 -9
- package/dist/ButtonGroup/ButtonGroup.cjs.map +0 -1
- package/dist/Card/Card.cjs +0 -15
- package/dist/Card/Card.cjs.map +0 -1
- package/dist/Checkbox/Checkbox.cjs +0 -16
- package/dist/Checkbox/Checkbox.cjs.map +0 -1
- package/dist/Chip/Chip.cjs +0 -18
- package/dist/Chip/Chip.cjs.map +0 -1
- package/dist/Dialog/Dialog.cjs +0 -19
- package/dist/Dialog/Dialog.cjs.map +0 -1
- package/dist/Dialog/ModalDialog.cjs +0 -32
- package/dist/Dialog/ModalDialog.cjs.map +0 -1
- package/dist/Divider/Divider.cjs +0 -11
- package/dist/Divider/Divider.cjs.map +0 -1
- package/dist/Heading/Heading.cjs +0 -13
- package/dist/Heading/Heading.cjs.map +0 -1
- package/dist/Icon/Icon.cjs +0 -11
- package/dist/Icon/Icon.cjs.map +0 -1
- package/dist/IconButton/IconButton.cjs +0 -22
- package/dist/IconButton/IconButton.cjs.map +0 -1
- package/dist/IconLinkButton/IconLinkButton.cjs +0 -17
- package/dist/IconLinkButton/IconLinkButton.cjs.map +0 -1
- package/dist/LinkButton/LinkButton.cjs +0 -21
- package/dist/LinkButton/LinkButton.cjs.map +0 -1
- package/dist/Modal/FocusTrap.cjs +0 -10
- package/dist/Modal/FocusTrap.cjs.map +0 -1
- package/dist/Modal/Layer.cjs +0 -15
- package/dist/Modal/Layer.cjs.map +0 -1
- package/dist/Modal/Modal.cjs +0 -29
- package/dist/Modal/Modal.cjs.map +0 -1
- package/dist/Modal/StopScroll.cjs +0 -9
- package/dist/Modal/StopScroll.cjs.map +0 -1
- package/dist/Popover/Popover.cjs +0 -34
- package/dist/Popover/Popover.cjs.map +0 -1
- package/dist/RadioButton/RadioButton.cjs +0 -20
- package/dist/RadioButton/RadioButton.cjs.map +0 -1
- package/dist/RichSelect/RichSelectBox.cjs +0 -42
- package/dist/RichSelect/RichSelectBox.cjs.map +0 -1
- package/dist/RichSelect/RichSelectChip.cjs +0 -20
- package/dist/RichSelect/RichSelectChip.cjs.map +0 -1
- package/dist/RichSelect/RichSelectItem.cjs +0 -12
- package/dist/RichSelect/RichSelectItem.cjs.map +0 -1
- package/dist/RichSelect/RichSelectList.cjs +0 -51
- package/dist/RichSelect/RichSelectList.cjs.map +0 -1
- package/dist/RichSelect/RichSelectRadioButton.cjs +0 -22
- package/dist/RichSelect/RichSelectRadioButton.cjs.map +0 -1
- package/dist/RichSelect/RichSelectSection.cjs +0 -16
- package/dist/RichSelect/RichSelectSection.cjs.map +0 -1
- package/dist/SelectList/SelectList.cjs +0 -22
- package/dist/SelectList/SelectList.cjs.map +0 -1
- package/dist/SelectList/SelectOption.cjs +0 -9
- package/dist/SelectList/SelectOption.cjs.map +0 -1
- package/dist/TabButton/TabButton.cjs +0 -22
- package/dist/TabButton/TabButton.cjs.map +0 -1
- package/dist/TabLink/TabLink.cjs +0 -20
- package/dist/TabLink/TabLink.cjs.map +0 -1
- package/dist/Tabs/TabInternal.cjs +0 -17
- package/dist/Tabs/TabInternal.cjs.map +0 -1
- package/dist/Tabs/Tabs.cjs +0 -16
- package/dist/Tabs/Tabs.cjs.map +0 -1
- package/dist/TapArea/TapArea.cjs +0 -11
- package/dist/TapArea/TapArea.cjs.map +0 -1
- package/dist/TextArea/TextArea.cjs +0 -19
- package/dist/TextArea/TextArea.cjs.map +0 -1
- package/dist/TextField/TextField.cjs +0 -20
- package/dist/TextField/TextField.cjs.map +0 -1
- package/dist/ThemeProvider/ThemeProvider.cjs +0 -9
- package/dist/ThemeProvider/ThemeProvider.cjs.map +0 -1
- package/dist/Tooltip/Tooltip.cjs +0 -24
- package/dist/Tooltip/Tooltip.cjs.map +0 -1
- package/dist/Typography/Typography.cjs +0 -12
- package/dist/Typography/Typography.cjs.map +0 -1
- package/dist/WordConfetti/WordConfetti.cjs +0 -17
- package/dist/WordConfetti/WordConfetti.cjs.map +0 -1
- package/dist/__chunks/2D3DOVVZ.cjs +0 -37
- package/dist/__chunks/2D3DOVVZ.cjs.map +0 -1
- package/dist/__chunks/2XIVACBM.cjs +0 -9
- package/dist/__chunks/2XIVACBM.cjs.map +0 -1
- package/dist/__chunks/36JMUQOL.cjs +0 -205
- package/dist/__chunks/36JMUQOL.cjs.map +0 -1
- package/dist/__chunks/3P2PWHOU.cjs +0 -14
- package/dist/__chunks/3P2PWHOU.cjs.map +0 -1
- package/dist/__chunks/3UEOKPM2.cjs +0 -136
- package/dist/__chunks/3UEOKPM2.cjs.map +0 -1
- package/dist/__chunks/3ULBWSHT.cjs +0 -169
- package/dist/__chunks/3ULBWSHT.cjs.map +0 -1
- package/dist/__chunks/4QUXUGJP.cjs +0 -47
- package/dist/__chunks/4QUXUGJP.cjs.map +0 -1
- package/dist/__chunks/4TYOP5XM.cjs +0 -64
- package/dist/__chunks/4TYOP5XM.cjs.map +0 -1
- package/dist/__chunks/4UT6BROB.cjs +0 -141
- package/dist/__chunks/4UT6BROB.cjs.map +0 -1
- package/dist/__chunks/5ITNEIMC.cjs +0 -109
- package/dist/__chunks/5ITNEIMC.cjs.map +0 -1
- package/dist/__chunks/5JUNB754.cjs +0 -15
- package/dist/__chunks/5JUNB754.cjs.map +0 -1
- package/dist/__chunks/6KSVCCCB.cjs +0 -38
- package/dist/__chunks/6KSVCCCB.cjs.map +0 -1
- package/dist/__chunks/77FFPQY6.js.map +0 -1
- package/dist/__chunks/7DGFMDT7.cjs +0 -9
- package/dist/__chunks/7DGFMDT7.cjs.map +0 -1
- package/dist/__chunks/7KH536I2.cjs +0 -32
- package/dist/__chunks/7KH536I2.cjs.map +0 -1
- package/dist/__chunks/7VI7DO7P.cjs +0 -13
- package/dist/__chunks/7VI7DO7P.cjs.map +0 -1
- package/dist/__chunks/A3B4YKGN.cjs +0 -28
- package/dist/__chunks/A3B4YKGN.cjs.map +0 -1
- package/dist/__chunks/AFOQ6JVB.cjs +0 -211
- package/dist/__chunks/AFOQ6JVB.cjs.map +0 -1
- package/dist/__chunks/AHM6QK6U.cjs +0 -133
- package/dist/__chunks/AHM6QK6U.cjs.map +0 -1
- package/dist/__chunks/AVJQ2E2G.cjs +0 -37
- package/dist/__chunks/AVJQ2E2G.cjs.map +0 -1
- package/dist/__chunks/B3JRSVBD.cjs +0 -35
- package/dist/__chunks/B3JRSVBD.cjs.map +0 -1
- package/dist/__chunks/BVNFNAUO.cjs +0 -149
- package/dist/__chunks/BVNFNAUO.cjs.map +0 -1
- package/dist/__chunks/CHDS4D44.cjs +0 -9
- package/dist/__chunks/CHDS4D44.cjs.map +0 -1
- package/dist/__chunks/DDWGNNLC.cjs +0 -101
- package/dist/__chunks/DDWGNNLC.cjs.map +0 -1
- package/dist/__chunks/DHXH7ZSG.cjs +0 -130
- package/dist/__chunks/DHXH7ZSG.cjs.map +0 -1
- package/dist/__chunks/E5P6WRJD.cjs +0 -32
- package/dist/__chunks/E5P6WRJD.cjs.map +0 -1
- package/dist/__chunks/F3SUJGZL.cjs +0 -56
- package/dist/__chunks/F3SUJGZL.cjs.map +0 -1
- package/dist/__chunks/FXLAQKAB.cjs +0 -67
- package/dist/__chunks/FXLAQKAB.cjs.map +0 -1
- package/dist/__chunks/FZLDJPVT.cjs +0 -65
- package/dist/__chunks/FZLDJPVT.cjs.map +0 -1
- package/dist/__chunks/GEXK47GR.cjs +0 -42
- package/dist/__chunks/GEXK47GR.cjs.map +0 -1
- package/dist/__chunks/GQUBAKFO.cjs +0 -139
- package/dist/__chunks/GQUBAKFO.cjs.map +0 -1
- package/dist/__chunks/HRTHCEIF.cjs +0 -37
- package/dist/__chunks/HRTHCEIF.cjs.map +0 -1
- package/dist/__chunks/HUIHS6RN.cjs +0 -19
- package/dist/__chunks/HUIHS6RN.cjs.map +0 -1
- package/dist/__chunks/IFPLOCSV.cjs +0 -143
- package/dist/__chunks/IFPLOCSV.cjs.map +0 -1
- package/dist/__chunks/IJHKE2Y3.cjs +0 -144
- package/dist/__chunks/IJHKE2Y3.cjs.map +0 -1
- package/dist/__chunks/IL22HCBF.cjs +0 -9
- package/dist/__chunks/IL22HCBF.cjs.map +0 -1
- package/dist/__chunks/J2QDHB6I.cjs +0 -34
- package/dist/__chunks/J2QDHB6I.cjs.map +0 -1
- package/dist/__chunks/J5XNUGR3.cjs +0 -76
- package/dist/__chunks/J5XNUGR3.cjs.map +0 -1
- package/dist/__chunks/JVGX637E.cjs +0 -26
- package/dist/__chunks/JVGX637E.cjs.map +0 -1
- package/dist/__chunks/K4AUV2VK.cjs +0 -16
- package/dist/__chunks/K4AUV2VK.cjs.map +0 -1
- package/dist/__chunks/KFNK5PLG.cjs +0 -122
- package/dist/__chunks/KFNK5PLG.cjs.map +0 -1
- package/dist/__chunks/LLFHCGRA.cjs +0 -19
- package/dist/__chunks/LLFHCGRA.cjs.map +0 -1
- package/dist/__chunks/MENEINOO.cjs +0 -91
- package/dist/__chunks/MENEINOO.cjs.map +0 -1
- package/dist/__chunks/MF7LLV7V.cjs +0 -9
- package/dist/__chunks/MF7LLV7V.cjs.map +0 -1
- package/dist/__chunks/NOELZTQX.cjs +0 -96
- package/dist/__chunks/NOELZTQX.cjs.map +0 -1
- package/dist/__chunks/O7M2NMNZ.cjs +0 -50
- package/dist/__chunks/O7M2NMNZ.cjs.map +0 -1
- package/dist/__chunks/OKT24L6D.cjs +0 -80
- package/dist/__chunks/OKT24L6D.cjs.map +0 -1
- package/dist/__chunks/PLUVW6AM.cjs +0 -9
- package/dist/__chunks/PLUVW6AM.cjs.map +0 -1
- package/dist/__chunks/PMNFDB6C.cjs +0 -121
- package/dist/__chunks/PMNFDB6C.cjs.map +0 -1
- package/dist/__chunks/QODNNCT2.cjs +0 -236
- package/dist/__chunks/QODNNCT2.cjs.map +0 -1
- package/dist/__chunks/QR3HKPXF.cjs +0 -84
- package/dist/__chunks/QR3HKPXF.cjs.map +0 -1
- package/dist/__chunks/R7BL4JYZ.cjs +0 -83
- package/dist/__chunks/R7BL4JYZ.cjs.map +0 -1
- package/dist/__chunks/RHJARLXB.cjs +0 -160
- package/dist/__chunks/RHJARLXB.cjs.map +0 -1
- package/dist/__chunks/RXQBNEFR.cjs +0 -47
- package/dist/__chunks/RXQBNEFR.cjs.map +0 -1
- package/dist/__chunks/RYUXG4AS.cjs +0 -53
- package/dist/__chunks/RYUXG4AS.cjs.map +0 -1
- package/dist/__chunks/RZSHTFXZ.cjs +0 -289
- package/dist/__chunks/RZSHTFXZ.cjs.map +0 -1
- package/dist/__chunks/TH4TA3JN.cjs +0 -9
- package/dist/__chunks/TH4TA3JN.cjs.map +0 -1
- package/dist/__chunks/THM3NAFO.cjs +0 -76
- package/dist/__chunks/THM3NAFO.cjs.map +0 -1
- package/dist/__chunks/TOAI3Z5M.cjs +0 -75
- package/dist/__chunks/TOAI3Z5M.cjs.map +0 -1
- package/dist/__chunks/UEY7FXLX.cjs +0 -22
- package/dist/__chunks/UEY7FXLX.cjs.map +0 -1
- package/dist/__chunks/UKQIAZA5.cjs +0 -9
- package/dist/__chunks/UKQIAZA5.cjs.map +0 -1
- package/dist/__chunks/VDLYCYDQ.cjs +0 -53
- package/dist/__chunks/VDLYCYDQ.cjs.map +0 -1
- package/dist/__chunks/VVRMCACE.cjs +0 -102
- package/dist/__chunks/VVRMCACE.cjs.map +0 -1
- package/dist/__chunks/WFVGNGEP.cjs +0 -2
- package/dist/__chunks/WFVGNGEP.cjs.map +0 -1
- package/dist/__chunks/WKADTHRK.cjs +0 -40
- package/dist/__chunks/WKADTHRK.cjs.map +0 -1
- package/dist/__chunks/X2SDR4SD.cjs +0 -39
- package/dist/__chunks/X2SDR4SD.cjs.map +0 -1
- package/dist/__chunks/XLUVINJW.cjs +0 -9
- package/dist/__chunks/XLUVINJW.cjs.map +0 -1
- package/dist/__chunks/XUDOYOWH.cjs +0 -117
- package/dist/__chunks/XUDOYOWH.cjs.map +0 -1
- package/dist/colors/allColors.cjs +0 -80
- package/dist/colors/allColors.cjs.map +0 -1
- package/dist/colors/backgroundColor.cjs +0 -11
- package/dist/colors/backgroundColor.cjs.map +0 -1
- package/dist/colors/border.cjs +0 -11
- package/dist/colors/border.cjs.map +0 -1
- package/dist/colors/foregroundColor.cjs +0 -11
- package/dist/colors/foregroundColor.cjs.map +0 -1
- package/dist/colors/textColors.cjs +0 -11
- package/dist/colors/textColors.cjs.map +0 -1
- package/dist/constants.cjs +0 -22
- package/dist/constants.cjs.map +0 -1
- package/dist/index.cjs +0 -166
- package/dist/index.cjs.map +0 -1
- package/dist/react-aria-utils/OverlayVisibility.cjs +0 -9
- package/dist/react-aria-utils/OverlayVisibility.cjs.map +0 -1
- package/dist/react-aria-utils/Triggerable.cjs +0 -10
- package/dist/react-aria-utils/Triggerable.cjs.map +0 -1
- package/dist/react-aria-utils/placement.cjs +0 -9
- package/dist/react-aria-utils/placement.cjs.map +0 -1
- package/dist/react-aria-utils/useDomRefSyntheticEventBridge.cjs +0 -9
- package/dist/react-aria-utils/useDomRefSyntheticEventBridge.cjs.map +0 -1
- package/dist/useFocusVisible.cjs +0 -9
- package/dist/useFocusVisible.cjs.map +0 -1
- package/dist/useIsHydrated.cjs +0 -9
- package/dist/useIsHydrated.cjs.map +0 -1
- /package/dist/__chunks/{WCHW3AYL.js.map → EOWYHIIV.js.map} +0 -0
- /package/dist/__chunks/{XMSJWQLW.js.map → L6DEFAVZ.js.map} +0 -0
- /package/dist/__chunks/{WIKMZ7QF.js.map → RAYMYVIO.js.map} +0 -0
|
@@ -1,211 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
var _6KSVCCCBcjs = require('./6KSVCCCB.cjs');
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
var _BVNFNAUOcjs = require('./BVNFNAUO.cjs');
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
var _A3B4YKGNcjs = require('./A3B4YKGN.cjs');
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
var _VDLYCYDQcjs = require('./VDLYCYDQ.cjs');
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
var _WKADTHRKcjs = require('./WKADTHRK.cjs');
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
var _J2QDHB6Icjs = require('./J2QDHB6I.cjs');
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
var _RYUXG4AScjs = require('./RYUXG4AS.cjs');
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
var _QODNNCT2cjs = require('./QODNNCT2.cjs');
|
|
27
|
-
|
|
28
|
-
// src/RichSelect/RichSelectBox.tsx
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
var _react = require('react');
|
|
37
|
-
var _reactariacomponents = require('react-aria-components');
|
|
38
|
-
var _utils = require('@react-stately/utils');
|
|
39
|
-
var _jsxruntime = require('react/jsx-runtime');
|
|
40
|
-
function isString(val) {
|
|
41
|
-
return typeof val === "string";
|
|
42
|
-
}
|
|
43
|
-
function isEqualSelection(set1, set2) {
|
|
44
|
-
if (set1 === set2)
|
|
45
|
-
return true;
|
|
46
|
-
if (!set1 && !set2)
|
|
47
|
-
return true;
|
|
48
|
-
if (!set1 || !set2)
|
|
49
|
-
return false;
|
|
50
|
-
if (isString(set1))
|
|
51
|
-
return set1 === set2;
|
|
52
|
-
if (isString(set2))
|
|
53
|
-
return false;
|
|
54
|
-
if (set1.size !== set2.size)
|
|
55
|
-
return false;
|
|
56
|
-
for (const item of set1) {
|
|
57
|
-
if (!set2.has(item))
|
|
58
|
-
return false;
|
|
59
|
-
}
|
|
60
|
-
return true;
|
|
61
|
-
}
|
|
62
|
-
function convertSelection(selection, defaultValue) {
|
|
63
|
-
if (!selection)
|
|
64
|
-
return defaultValue;
|
|
65
|
-
if (selection === "all")
|
|
66
|
-
return "all";
|
|
67
|
-
return new Set(selection);
|
|
68
|
-
}
|
|
69
|
-
var RichSelectBoxContext = _react.createContext.call(void 0, {});
|
|
70
|
-
var RichSelectBox = _react.forwardRef.call(void 0,
|
|
71
|
-
function RichSelectBox2(props, ref) {
|
|
72
|
-
const {
|
|
73
|
-
accessibilityLabel,
|
|
74
|
-
autosave,
|
|
75
|
-
children,
|
|
76
|
-
"data-testid": dataTestId,
|
|
77
|
-
multiple = false,
|
|
78
|
-
onChange,
|
|
79
|
-
primaryButtonText,
|
|
80
|
-
primaryButtonAccessibilityLabel,
|
|
81
|
-
secondaryButtonText,
|
|
82
|
-
secondaryButtonAccessibilityLabel,
|
|
83
|
-
selectedValues: selectedValuesProp,
|
|
84
|
-
defaultSelectedValues: defaultSelectedValuesProp
|
|
85
|
-
} = props;
|
|
86
|
-
const selectedKeysProp = _react.useMemo.call(void 0,
|
|
87
|
-
() => convertSelection(selectedValuesProp),
|
|
88
|
-
[selectedValuesProp]
|
|
89
|
-
);
|
|
90
|
-
const defaultSelectedKeys = _react.useMemo.call(void 0,
|
|
91
|
-
() => convertSelection(defaultSelectedValuesProp, /* @__PURE__ */ new Set()),
|
|
92
|
-
[defaultSelectedValuesProp]
|
|
93
|
-
);
|
|
94
|
-
const [selectedKeys, setSelectedKeys] = _utils.useControlledState.call(void 0,
|
|
95
|
-
selectedKeysProp,
|
|
96
|
-
// eslint-disable-line @typescript-eslint/no-non-null-assertion -- there is a bug in the typedef for useControlledState from react-stately. Internally they rely on value (first arg) able to be undefined
|
|
97
|
-
defaultSelectedKeys,
|
|
98
|
-
(value) => {
|
|
99
|
-
if (isEqualSelection(value, selectedKeys))
|
|
100
|
-
return;
|
|
101
|
-
if (value === "all")
|
|
102
|
-
return onChange("all");
|
|
103
|
-
onChange([...value].map(String));
|
|
104
|
-
}
|
|
105
|
-
);
|
|
106
|
-
const [stagedKeys, setStagedKeys] = _react.useState.call(void 0,
|
|
107
|
-
selectedKeys
|
|
108
|
-
);
|
|
109
|
-
const saveChanges = () => setSelectedKeys(stagedKeys);
|
|
110
|
-
const clearChanges = () => setStagedKeys(/* @__PURE__ */ new Set());
|
|
111
|
-
const stageChanges = (selectedValues) => {
|
|
112
|
-
setStagedKeys(selectedValues);
|
|
113
|
-
if (autosave)
|
|
114
|
-
setSelectedKeys(selectedValues);
|
|
115
|
-
};
|
|
116
|
-
const [disabledKeysComposed, setDisabledKeysComposed] = _react.useState.call(void 0,
|
|
117
|
-
/* @__PURE__ */ new Set()
|
|
118
|
-
);
|
|
119
|
-
const disableKey = _react.useCallback.call(void 0, (key, _disabled) => {
|
|
120
|
-
setDisabledKeysComposed((keys) => {
|
|
121
|
-
if (keys.has(key) === _disabled)
|
|
122
|
-
return keys;
|
|
123
|
-
_disabled ? keys.add(key) : keys.delete(key);
|
|
124
|
-
return new Set(keys);
|
|
125
|
-
});
|
|
126
|
-
}, []);
|
|
127
|
-
const { autoFocus } = _react.useContext.call(void 0, RichSelectBoxContext);
|
|
128
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RYUXG4AScjs.RichSelectItemContext.Provider, { value: { disableKey }, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _QODNNCT2cjs.Box_default, { children: [
|
|
129
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
130
|
-
_reactariacomponents.ListBox,
|
|
131
|
-
{
|
|
132
|
-
ref,
|
|
133
|
-
"aria-label": accessibilityLabel,
|
|
134
|
-
autoFocus,
|
|
135
|
-
selectionMode: multiple ? "multiple" : "single",
|
|
136
|
-
selectionBehavior: multiple ? "toggle" : "replace",
|
|
137
|
-
shouldFocusWrap: true,
|
|
138
|
-
orientation: "horizontal",
|
|
139
|
-
selectedKeys: stagedKeys,
|
|
140
|
-
onSelectionChange: stageChanges,
|
|
141
|
-
disabledKeys: disabledKeysComposed,
|
|
142
|
-
className: _RYUXG4AScjs.RichSelect_module_default.richSelectBox,
|
|
143
|
-
children
|
|
144
|
-
}
|
|
145
|
-
),
|
|
146
|
-
!autosave && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
147
|
-
_QODNNCT2cjs.Box_default,
|
|
148
|
-
{
|
|
149
|
-
backgroundColor: "white",
|
|
150
|
-
display: "flex",
|
|
151
|
-
direction: "column",
|
|
152
|
-
gap: 5,
|
|
153
|
-
marginTop: 5,
|
|
154
|
-
justifyContent: "end",
|
|
155
|
-
position: "sticky",
|
|
156
|
-
dangerouslySetInlineStyle: {
|
|
157
|
-
__style: {
|
|
158
|
-
bottom: 0
|
|
159
|
-
}
|
|
160
|
-
},
|
|
161
|
-
children: [
|
|
162
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _QODNNCT2cjs.Box_default, { flex: "grow", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _A3B4YKGNcjs.Divider, {}) }),
|
|
163
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
164
|
-
_QODNNCT2cjs.Box_default,
|
|
165
|
-
{
|
|
166
|
-
paddingY: 5,
|
|
167
|
-
marginTop: -5,
|
|
168
|
-
display: "flex",
|
|
169
|
-
justifyContent: "end",
|
|
170
|
-
children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _6KSVCCCBcjs.ButtonGroup_default, { orientation: "horizontal", children: [
|
|
171
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
172
|
-
_BVNFNAUOcjs.Button_default,
|
|
173
|
-
{
|
|
174
|
-
onClick: clearChanges,
|
|
175
|
-
color: "secondary",
|
|
176
|
-
text: secondaryButtonText,
|
|
177
|
-
accessibilityLabel: secondaryButtonAccessibilityLabel,
|
|
178
|
-
"data-testid": [dataTestId, "secondary-button"].filter(Boolean).join("-")
|
|
179
|
-
}
|
|
180
|
-
),
|
|
181
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
182
|
-
_BVNFNAUOcjs.Button_default,
|
|
183
|
-
{
|
|
184
|
-
onClick: saveChanges,
|
|
185
|
-
text: primaryButtonText,
|
|
186
|
-
accessibilityLabel: primaryButtonAccessibilityLabel,
|
|
187
|
-
color: "primary",
|
|
188
|
-
"data-testid": [dataTestId, "primary-button"].filter(Boolean).join("-")
|
|
189
|
-
}
|
|
190
|
-
)
|
|
191
|
-
] })
|
|
192
|
-
}
|
|
193
|
-
)
|
|
194
|
-
]
|
|
195
|
-
}
|
|
196
|
-
)
|
|
197
|
-
] }) });
|
|
198
|
-
}
|
|
199
|
-
);
|
|
200
|
-
var RichSelectBox_default = Object.assign(RichSelectBox, {
|
|
201
|
-
Section: _VDLYCYDQcjs.RichSelectSection_default,
|
|
202
|
-
Chip: _J2QDHB6Icjs.RichSelectChip_default,
|
|
203
|
-
RadioButton: _WKADTHRKcjs.RichSelectRadioButton_default
|
|
204
|
-
});
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
exports.convertSelection = convertSelection; exports.RichSelectBoxContext = RichSelectBoxContext; exports.RichSelectBox_default = RichSelectBox_default;
|
|
211
|
-
//# sourceMappingURL=AFOQ6JVB.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/RichSelect/RichSelectBox.tsx"],"names":["RichSelectBox"],"mappings":"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","sourcesContent":["import React, {\n forwardRef,\n type ReactElement,\n useContext,\n useState,\n useCallback,\n createContext,\n useMemo,\n} from \"react\";\nimport { ListBox as ReactAriaListBox } from \"react-aria-components\";\nimport { type Key } from \"react-aria\";\nimport { type Selection } from \"react-stately\";\nimport { useControlledState } from \"@react-stately/utils\";\nimport { RichSelectItemContext } from \"./RichSelectItem\";\nimport ButtonGroup from \"../ButtonGroup/ButtonGroup\";\nimport Button from \"../Button/Button\";\nimport styles from \"./RichSelect.module.css\";\nimport Box from \"../Box/Box\";\nimport Divider from \"../Divider/Divider\";\nimport RichSelectSection from \"./RichSelectSection\";\nimport RichSelectChip from \"./RichSelectChip\";\nimport RichSelectRadioButton from \"./RichSelectRadioButton\";\n\ntype RichSelectChild =\n | ReactElement<typeof RichSelectChip>\n | ReactElement<typeof RichSelectRadioButton>\n | ReactElement<typeof RichSelectSection>;\n\nfunction isString(val: unknown): val is string {\n return typeof val === \"string\";\n}\n\nfunction isEqualSelection(set1?: Selection, set2?: Selection): boolean {\n if (set1 === set2) return true;\n if (!set1 && !set2) return true;\n if (!set1 || !set2) return false;\n if (isString(set1)) return set1 === set2;\n if (isString(set2)) return false;\n if (set1.size !== set2.size) return false;\n for (const item of set1) {\n if (!set2.has(item)) return false;\n }\n return true;\n}\n\nexport function convertSelection(\n selection: \"all\" | Iterable<Key> | undefined,\n defaultValue?: \"all\" | Set<Key>,\n): \"all\" | Set<Key> | undefined {\n if (!selection) return defaultValue;\n if (selection === \"all\") return \"all\";\n return new Set(selection);\n}\n\nexport type RichSelectBoxProps = {\n /** aria-label for the list box */\n accessibilityLabel: string;\n /** Automatically saves changes when true, shows save/clear buttons when not true */\n autosave?: boolean;\n /** Test id for the list box element */\n \"data-testid\"?: string;\n /** One or more RichSelectList.<Chip|RadioButton|Section|...> components. */\n children: RichSelectChild | RichSelectChild[];\n /** Default selected values */\n defaultSelectedValues?: Set<Key> | string[] | \"all\";\n /** Enables multiple selection (multiselect) */\n multiple?: boolean;\n /** The callback to be called when options are selected / committed */\n onChange: (selectedValues: string[] | \"all\") => void;\n /** Text for primary button (Save). Required: string must be translated */\n primaryButtonText: string;\n /** accessibilityLabel for primary Button component (Save). Required: string must be translated */\n primaryButtonAccessibilityLabel: string;\n /** Text for primary button (Clear). Required: string must be translated */\n secondaryButtonText: string;\n /** accessibilityLabel for secondary Button component (Clear). Required: string must be translated */\n secondaryButtonAccessibilityLabel: string;\n /** Value of the currently selected options */\n selectedValues?: Set<Key> | string[] | \"all\";\n};\n\ntype RichSelectBoxContextType = {\n /** Automatically focuses RichSelectBox on mount when enabled */\n autoFocus?: boolean;\n};\nexport const RichSelectBoxContext = createContext<RichSelectBoxContextType>({});\n\n/**\n * [RichSelectBox](https://cambly-syntax.vercel.app/?path=/docs/components-richselectbox--docs) is an element that allows users to select one or multiple options from a list.\n *\n * Example Usage:\n ```\n <RichSelectBox\n label=\"My Label\"\n multiple\n onChange={() => { ... }}\n primaryButtonText=\"Save\"\n primaryButtonAccessibilityLabel=\"Save\"\n secondaryButtonText=\"Clear\"\n secondaryButtonAccessibilityLabel=\"Clear\"\n >\n <RichSelectBox.Section label=\"Cities\">\n <RichSelectBox.Chip label=\"San Francisco\" value=\"sf\" />\n <RichSelectBox.Chip label=\"New York\" value=\"ny\" disabled />\n <RichSelectBox.Chip label=\"Tulsa\" value=\"tulsa\" />\n <RichSelectBox.Chip label=\"Chicago\" value=\"chicago\" disabled />\n </RichSelectBox.Section>\n </RichSelectBox>\n ```\n */\nconst RichSelectBox = forwardRef<HTMLDivElement, RichSelectBoxProps>(\n function RichSelectBox(props, ref): ReactElement {\n const {\n accessibilityLabel,\n autosave,\n children,\n \"data-testid\": dataTestId,\n multiple = false,\n onChange,\n primaryButtonText,\n primaryButtonAccessibilityLabel,\n secondaryButtonText,\n secondaryButtonAccessibilityLabel,\n selectedValues: selectedValuesProp,\n defaultSelectedValues: defaultSelectedValuesProp,\n } = props;\n\n const selectedKeysProp = useMemo(\n () => convertSelection(selectedValuesProp),\n [selectedValuesProp],\n );\n const defaultSelectedKeys = useMemo(\n () => convertSelection(defaultSelectedValuesProp, new Set()),\n [defaultSelectedValuesProp],\n );\n const [selectedKeys, setSelectedKeys] = useControlledState(\n selectedKeysProp!, // eslint-disable-line @typescript-eslint/no-non-null-assertion -- there is a bug in the typedef for useControlledState from react-stately. Internally they rely on value (first arg) able to be undefined\n defaultSelectedKeys,\n (value) => {\n if (isEqualSelection(value, selectedKeys)) return;\n // Notify parent about the changes\n if (value === \"all\") return onChange(\"all\");\n onChange([...value].map(String));\n },\n );\n const [stagedKeys, setStagedKeys] = useState<Set<Key> | \"all\">(\n selectedKeys,\n );\n\n const saveChanges = () => setSelectedKeys(stagedKeys);\n const clearChanges = () => setStagedKeys(new Set());\n const stageChanges = (selectedValues: Selection) => {\n setStagedKeys(selectedValues);\n if (autosave) setSelectedKeys(selectedValues);\n };\n\n // inject method into context so children can disable themselves\n // by adding `disabled` attribute (through RichSelectItem)\n const [disabledKeysComposed, setDisabledKeysComposed] = useState<Set<Key>>(\n new Set(),\n );\n const disableKey = useCallback((key: Key, _disabled: boolean) => {\n setDisabledKeysComposed((keys) => {\n if (keys.has(key) === _disabled) return keys;\n _disabled ? keys.add(key) : keys.delete(key);\n return new Set(keys);\n });\n }, []);\n\n // higher level context for autoFocus behavior (parent sets when rendering RichSelectBox in overlay)\n const { autoFocus } = useContext(RichSelectBoxContext);\n\n return (\n <RichSelectItemContext.Provider value={{ disableKey }}>\n <Box>\n <ReactAriaListBox\n ref={ref}\n aria-label={accessibilityLabel}\n autoFocus={autoFocus}\n selectionMode={multiple ? \"multiple\" : \"single\"}\n selectionBehavior={multiple ? \"toggle\" : \"replace\"}\n shouldFocusWrap={true}\n orientation=\"horizontal\"\n selectedKeys={stagedKeys}\n onSelectionChange={stageChanges}\n disabledKeys={disabledKeysComposed}\n className={styles.richSelectBox}\n >\n {children}\n </ReactAriaListBox>\n {!autosave && (\n <Box\n backgroundColor=\"white\"\n display=\"flex\"\n direction=\"column\"\n gap={5}\n marginTop={5}\n justifyContent=\"end\"\n position=\"sticky\"\n dangerouslySetInlineStyle={{\n __style: {\n bottom: 0,\n },\n }}\n >\n <Box flex=\"grow\">\n <Divider />\n </Box>\n <Box\n paddingY={5}\n marginTop={-5}\n display=\"flex\"\n justifyContent=\"end\"\n >\n <ButtonGroup orientation=\"horizontal\">\n <Button\n onClick={clearChanges}\n color={\"secondary\"}\n text={secondaryButtonText}\n accessibilityLabel={secondaryButtonAccessibilityLabel}\n data-testid={[dataTestId, \"secondary-button\"]\n .filter(Boolean)\n .join(\"-\")}\n />\n <Button\n onClick={saveChanges}\n text={primaryButtonText}\n accessibilityLabel={primaryButtonAccessibilityLabel}\n color=\"primary\"\n data-testid={[dataTestId, \"primary-button\"]\n .filter(Boolean)\n .join(\"-\")}\n />\n </ButtonGroup>\n </Box>\n </Box>\n )}\n </Box>\n </RichSelectItemContext.Provider>\n );\n },\n);\n\nexport default Object.assign(RichSelectBox, {\n Section: RichSelectSection,\n Chip: RichSelectChip,\n RadioButton: RichSelectRadioButton,\n});\n"]}
|
|
@@ -1,133 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
var _O7M2NMNZcjs = require('./O7M2NMNZ.cjs');
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
var _HUIHS6RNcjs = require('./HUIHS6RN.cjs');
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
var _7KH536I2cjs = require('./7KH536I2.cjs');
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
var _THM3NAFOcjs = require('./THM3NAFO.cjs');
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
var _KFNK5PLGcjs = require('./KFNK5PLG.cjs');
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
var _QODNNCT2cjs = require('./QODNNCT2.cjs');
|
|
20
|
-
|
|
21
|
-
// css-module:./Modal.module.css#css-module
|
|
22
|
-
var Modal_module_default = { "backdrop": "_backdrop_17lbk_1", "closeButton": "_closeButton_17lbk_10" };
|
|
23
|
-
|
|
24
|
-
// src/Modal/Modal.tsx
|
|
25
|
-
var _jsxruntime = require('react/jsx-runtime');
|
|
26
|
-
function XIcon({ className }) {
|
|
27
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
28
|
-
"svg",
|
|
29
|
-
{
|
|
30
|
-
className,
|
|
31
|
-
fill: "currentColor",
|
|
32
|
-
focusable: "false",
|
|
33
|
-
"aria-hidden": "true",
|
|
34
|
-
viewBox: "0 0 24 24",
|
|
35
|
-
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
|
|
36
|
-
}
|
|
37
|
-
);
|
|
38
|
-
}
|
|
39
|
-
function Modal({
|
|
40
|
-
header,
|
|
41
|
-
children,
|
|
42
|
-
image,
|
|
43
|
-
onDismiss,
|
|
44
|
-
footer,
|
|
45
|
-
accessibilityCloseLabel = "close modal",
|
|
46
|
-
zIndex = 1,
|
|
47
|
-
"data-testid": dataTestId
|
|
48
|
-
}) {
|
|
49
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _7KH536I2cjs.Layer, { zIndex, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _HUIHS6RNcjs.StopScroll, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _THM3NAFOcjs.FocusTrap, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
50
|
-
"div",
|
|
51
|
-
{
|
|
52
|
-
className: Modal_module_default.backdrop,
|
|
53
|
-
role: "presentation",
|
|
54
|
-
onMouseDown: (e) => e.target === e.currentTarget && onDismiss(),
|
|
55
|
-
onKeyDown: (e) => e.key === "Escape" && onDismiss(),
|
|
56
|
-
children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
57
|
-
_QODNNCT2cjs.Box_default,
|
|
58
|
-
{
|
|
59
|
-
"data-testid": dataTestId,
|
|
60
|
-
backgroundColor: "gray100",
|
|
61
|
-
rounding: "md",
|
|
62
|
-
display: "flex",
|
|
63
|
-
marginStart: 4,
|
|
64
|
-
marginEnd: 4,
|
|
65
|
-
marginTop: 8,
|
|
66
|
-
marginBottom: 8,
|
|
67
|
-
minWidth: 240,
|
|
68
|
-
maxHeight: "calc(100vh - 64px)",
|
|
69
|
-
maxWidth: 600,
|
|
70
|
-
overflow: "hidden",
|
|
71
|
-
position: "relative",
|
|
72
|
-
width: "100%",
|
|
73
|
-
children: [
|
|
74
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
75
|
-
_QODNNCT2cjs.Box_default,
|
|
76
|
-
{
|
|
77
|
-
position: "absolute",
|
|
78
|
-
dangerouslySetInlineStyle: {
|
|
79
|
-
__style: { top: 4, right: 4 }
|
|
80
|
-
},
|
|
81
|
-
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
82
|
-
_KFNK5PLGcjs.IconButton_default,
|
|
83
|
-
{
|
|
84
|
-
accessibilityLabel: accessibilityCloseLabel,
|
|
85
|
-
color: image ? "primary" : "tertiary",
|
|
86
|
-
on: image ? "darkBackground" : "lightBackground",
|
|
87
|
-
onClick: onDismiss,
|
|
88
|
-
size: "md",
|
|
89
|
-
icon: XIcon
|
|
90
|
-
}
|
|
91
|
-
)
|
|
92
|
-
}
|
|
93
|
-
),
|
|
94
|
-
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _QODNNCT2cjs.Box_default, { display: "flex", direction: "column", width: "100%", children: [
|
|
95
|
-
image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _QODNNCT2cjs.Box_default, { children: image }),
|
|
96
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _QODNNCT2cjs.Box_default, { padding: 6, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _O7M2NMNZcjs.Heading_default, { as: "h1", size: 700, fontStyle: "serif", children: header }) }),
|
|
97
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
98
|
-
_QODNNCT2cjs.Box_default,
|
|
99
|
-
{
|
|
100
|
-
height: "100%",
|
|
101
|
-
overflowY: "auto",
|
|
102
|
-
paddingX: 6,
|
|
103
|
-
marginBottom: footer ? 0 : 6,
|
|
104
|
-
children
|
|
105
|
-
}
|
|
106
|
-
),
|
|
107
|
-
footer && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
108
|
-
_QODNNCT2cjs.Box_default,
|
|
109
|
-
{
|
|
110
|
-
display: "flex",
|
|
111
|
-
direction: "column",
|
|
112
|
-
gap: 3,
|
|
113
|
-
smDirection: "row",
|
|
114
|
-
smJustifyContent: "end",
|
|
115
|
-
lgDirection: "row",
|
|
116
|
-
lgJustifyContent: "end",
|
|
117
|
-
padding: 6,
|
|
118
|
-
children: footer
|
|
119
|
-
}
|
|
120
|
-
)
|
|
121
|
-
] })
|
|
122
|
-
]
|
|
123
|
-
}
|
|
124
|
-
)
|
|
125
|
-
}
|
|
126
|
-
) }) }) });
|
|
127
|
-
}
|
|
128
|
-
Modal.displayName = "Modal";
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
exports.Modal = Modal;
|
|
133
|
-
//# sourceMappingURL=AHM6QK6U.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["css-module:./Modal.module.css#css-module","../../src/Modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAA0F,IAAO,uBAAQ,EAAC,YAAW,qBAAoB,eAAc,wBAAuB;;;ACoBxK,cAsJQ,YAtJR;AATN,SAAS,MAAM,EAAE,UAAU,GAA2B;AACpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,SAAQ;AAAA,MAER,8BAAC,UAAK,GAAE,yGAAwG;AAAA;AAAA,EAClH;AAEJ;AAmCe,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,0BAA0B;AAAA,EAC1B,SAAS;AAAA,EACT,eAAe;AACjB,GA4DiB;AACf,SACE,oBAAC,SAAM,QACL,8BAAC,cACC,8BAAC,aACC;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,qBAAO;AAAA,MAClB,MAAK;AAAA,MACL,aAAa,CAAC,MAAM,EAAE,WAAW,EAAE,iBAAiB,UAAU;AAAA,MAC9D,WAAW,CAAC,MAAM,EAAE,QAAQ,YAAY,UAAU;AAAA,MAElD;AAAA,QAAC;AAAA;AAAA,UACC,eAAa;AAAA,UACb,iBAAgB;AAAA,UAChB,UAAS;AAAA,UACT,SAAQ;AAAA,UACR,aAAa;AAAA,UACb,WAAW;AAAA,UACX,WAAW;AAAA,UACX,cAAc;AAAA,UACd,UAAU;AAAA,UACV,WAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAS;AAAA,UACT,UAAS;AAAA,UACT,OAAM;AAAA,UAEN;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,UAAS;AAAA,gBACT,2BAA2B;AAAA,kBACzB,SAAS,EAAE,KAAK,GAAG,OAAO,EAAE;AAAA,gBAC9B;AAAA,gBAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,oBAAoB;AAAA,oBACpB,OAAO,QAAQ,YAAY;AAAA,oBAC3B,IAAI,QAAQ,mBAAmB;AAAA,oBAC/B,SAAS;AAAA,oBACT,MAAK;AAAA,oBACL,MAAM;AAAA;AAAA,gBACR;AAAA;AAAA,YACF;AAAA,YAEA,qBAAC,eAAI,SAAQ,QAAO,WAAU,UAAS,OAAM,QAC1C;AAAA,uBAAS,oBAAC,eAAK,iBAAM;AAAA,cACtB,oBAAC,eAAI,SAAS,GACZ,8BAAC,mBAAQ,IAAG,MAAK,MAAM,KAAK,WAAU,SACnC,kBACH,GACF;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,QAAO;AAAA,kBACP,WAAU;AAAA,kBACV,UAAU;AAAA,kBACV,cAAc,SAAS,IAAI;AAAA,kBAE1B;AAAA;AAAA,cACH;AAAA,cACC,UACC;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,WAAU;AAAA,kBACV,KAAK;AAAA,kBACL,aAAY;AAAA,kBACZ,kBAAiB;AAAA,kBACjB,aAAY;AAAA,kBACZ,kBAAiB;AAAA,kBACjB,SAAS;AAAA,kBAER;AAAA;AAAA,cACH;AAAA,eAEJ;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACF,GACF,GACF;AAEJ;AAEA,MAAM,cAAc","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Modal/Modal.module.css\"; export default {\"backdrop\":\"_backdrop_17lbk_1\",\"closeButton\":\"_closeButton_17lbk_10\"}","import { type ReactElement } from \"react\";\n\nimport Heading from \"../Heading/Heading\";\nimport Box from \"../Box/Box\";\n\nimport FocusTrap from \"./FocusTrap\";\nimport StopScroll from \"./StopScroll\";\nimport Layer from \"./Layer\";\nimport styles from \"./Modal.module.css\";\nimport IconButton from \"../IconButton/IconButton\";\n\nfunction XIcon({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"currentColor\"\n focusable=\"false\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path>\n </svg>\n );\n}\n\n/**\n * [Modal](https://cambly-syntax.vercel.app/?path=/docs/components-modal--docs) is a dialog that appears on top of the main content and locks user interaction within the modal.\n *\n ```\n const [showModal, setShowModal] = useState(false)\n\n return (\n <>\n {showModal && <Modal\n header=\"header text\"\n onDismiss={() => setShowModal(false)}\n footer={\n <>\n <Button\n text=\"Cancel\"\n color=\"secondary\"\n onClick={() => {}}\n />\n <Button\n text=\"Confirm\"\n onClick={() => {}}\n />\n </>\n }\n >\n <Typography>\n Body text goes here!\n </Typography>\n </Modal> }\n </>\n )\n ```\n */\nexport default function Modal({\n header,\n children,\n image,\n onDismiss,\n footer,\n accessibilityCloseLabel = \"close modal\",\n zIndex = 1,\n \"data-testid\": dataTestId,\n}: {\n /**\n * The modal's main content. Should typically take in `Typography`'d text.\n */\n children: JSX.Element;\n /**\n * The header inside a modal as a string.\n */\n header: string;\n /**\n * What the X button (or clicking out of the modal area) does.\n * Typically used for closing the Modal\n */\n onDismiss: () => void;\n /**\n * The optional image rendered above the Modal.\n * Image\n * * Size should be 600w x 200h\n * * Be sure to set width=\"100%\" on the image\n * If images aren't that sized, should ask design to give another image.\n */\n image?: JSX.Element;\n /**\n * The footer for the bottom area of the Modal. Typically used for rendering buttons.\n * * Use Syntax `Button` and pass it into footer.\n * * If one button, just pass it in. If two, wrap in a React fragment (`<> </>`)\n * * If two(2) buttons, put primary button _second_.\n *\n <>\n <Button\n text=\"Cancel\"\n color=\"secondary\"\n onClick={() => {}}\n />\n <Button\n text=\"Confirm\"\n onClick={() => {}}\n />\n </>\n */\n footer?: JSX.Element;\n /**\n * The accessibilty text on the close button.\n * (Sets the aria-label of the button)\n *\n *\n * @defaultValue close modal\n */\n accessibilityCloseLabel?: string;\n /**\n * The z-index for the modal.\n * Typically used if there are other things on the page with higher z-index and you need this overlayed on top.\n *\n * @defaultValue 0\n */\n zIndex?: number;\n /**\n * Test id for the modal\n */\n \"data-testid\"?: string;\n}): ReactElement {\n return (\n <Layer zIndex={zIndex}>\n <StopScroll>\n <FocusTrap>\n <div\n className={styles.backdrop}\n role=\"presentation\"\n onMouseDown={(e) => e.target === e.currentTarget && onDismiss()}\n onKeyDown={(e) => e.key === \"Escape\" && onDismiss()}\n >\n <Box\n data-testid={dataTestId}\n backgroundColor=\"gray100\"\n rounding=\"md\"\n display=\"flex\"\n marginStart={4}\n marginEnd={4}\n marginTop={8}\n marginBottom={8}\n minWidth={240}\n maxHeight=\"calc(100vh - 64px)\"\n maxWidth={600}\n overflow=\"hidden\"\n position=\"relative\"\n width=\"100%\"\n >\n <Box\n position=\"absolute\"\n dangerouslySetInlineStyle={{\n __style: { top: 4, right: 4 },\n }}\n >\n <IconButton\n accessibilityLabel={accessibilityCloseLabel}\n color={image ? \"primary\" : \"tertiary\"}\n on={image ? \"darkBackground\" : \"lightBackground\"}\n onClick={onDismiss}\n size=\"md\"\n icon={XIcon}\n />\n </Box>\n\n <Box display=\"flex\" direction=\"column\" width=\"100%\">\n {image && <Box>{image}</Box>}\n <Box padding={6}>\n <Heading as=\"h1\" size={700} fontStyle=\"serif\">\n {header}\n </Heading>\n </Box>\n <Box\n height=\"100%\"\n overflowY=\"auto\"\n paddingX={6}\n marginBottom={footer ? 0 : 6}\n >\n {children}\n </Box>\n {footer && (\n <Box\n display=\"flex\"\n direction=\"column\"\n gap={3}\n smDirection=\"row\"\n smJustifyContent=\"end\"\n lgDirection=\"row\"\n lgJustifyContent=\"end\"\n padding={6}\n >\n {footer}\n </Box>\n )}\n </Box>\n </Box>\n </div>\n </FocusTrap>\n </StopScroll>\n </Layer>\n );\n}\n\nModal.displayName = \"Modal\";\n"]}
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
var _QODNNCT2cjs = require('./QODNNCT2.cjs');
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
var _X2SDR4SDcjs = require('./X2SDR4SD.cjs');
|
|
8
|
-
|
|
9
|
-
// src/Card/Card.tsx
|
|
10
|
-
var _react = require('react');
|
|
11
|
-
var _jsxruntime = require('react/jsx-runtime');
|
|
12
|
-
var Card = _react.forwardRef.call(void 0, function Card2(props, ref) {
|
|
13
|
-
const _a = props, { children } = _a, cardProps = _X2SDR4SDcjs.__objRest.call(void 0, _a, ["children"]);
|
|
14
|
-
const {
|
|
15
|
-
backgroundColor = "white",
|
|
16
|
-
size = "roomy",
|
|
17
|
-
"data-testid": dataTestId
|
|
18
|
-
} = cardProps;
|
|
19
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
20
|
-
_QODNNCT2cjs.Box_default,
|
|
21
|
-
{
|
|
22
|
-
rounding: "md",
|
|
23
|
-
padding: size === "compact" ? 2 : 4,
|
|
24
|
-
width: "100%",
|
|
25
|
-
backgroundColor,
|
|
26
|
-
"data-testid": dataTestId,
|
|
27
|
-
ref,
|
|
28
|
-
children
|
|
29
|
-
}
|
|
30
|
-
);
|
|
31
|
-
});
|
|
32
|
-
var Card_default = Card;
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
exports.Card_default = Card_default;
|
|
37
|
-
//# sourceMappingURL=AVJQ2E2G.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Card/Card.tsx"],"names":["Card"],"mappings":";;;;;;;;;AAAA,SAAS,kBAAkB;AA4CvB;AAZJ,IAAM,OAAO,WAAsC,SAASA,MAC1D,OACA,KACa;AACb,QAAmC,YAA3B,WApCV,IAoCqC,IAAd,sBAAc,IAAd,CAAb;AACR,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,SAAS,SAAS,YAAY,IAAI;AAAA,MAClC,OAAM;AAAA,MACN;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,eAAQ","sourcesContent":["import { forwardRef } from \"react\";\nimport Box from \"../Box/Box\";\nimport type allColors from \"../colors/allColors\";\n\ntype CardProps = {\n /**\n * Test id for the button\n */\n \"data-testid\"?: string;\n /**\n * The background color of the box.\n * @defaultValue `white`\n */\n backgroundColor?: (typeof allColors)[number];\n /**\n * The child components to render within Card.\n */\n children: JSX.Element;\n /**\n * The size of the card which specifies the padding and spacing of the card.\n *\n * `compact`: 8px padding\n * `roomy`: 16px padding\n *\n * @defaultValue `roomy`\n */\n size?: \"compact\" | \"roomy\";\n};\n\n/**\n * [Card](https://cambly-syntax.vercel.app/?path=/docs/components-card--docs) is a basic container component to apply consistent styling and render child components.\n */\nconst Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n props: CardProps,\n ref,\n): JSX.Element {\n const { children, ...cardProps } = props;\n const {\n backgroundColor = \"white\",\n size = \"roomy\",\n \"data-testid\": dataTestId,\n } = cardProps;\n\n return (\n <Box\n rounding=\"md\"\n padding={size === \"compact\" ? 2 : 4}\n width=\"100%\"\n backgroundColor={backgroundColor}\n data-testid={dataTestId}\n ref={ref}\n >\n {children}\n </Box>\n );\n});\n\nexport default Card;\n"]}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
var _2XIVACBMcjs = require('./2XIVACBM.cjs');
|
|
5
|
-
|
|
6
|
-
// src/colors/textColors.ts
|
|
7
|
-
function textColor(color) {
|
|
8
|
-
switch (color) {
|
|
9
|
-
case "gray700":
|
|
10
|
-
return _2XIVACBMcjs.colors_module_default.cambioGray700Color;
|
|
11
|
-
case "white":
|
|
12
|
-
return _2XIVACBMcjs.colors_module_default.cambioWhiteColor;
|
|
13
|
-
case "white-secondary":
|
|
14
|
-
return _2XIVACBMcjs.colors_module_default.cambioWhite70Color;
|
|
15
|
-
case "inherit":
|
|
16
|
-
return _2XIVACBMcjs.colors_module_default.inheritColor;
|
|
17
|
-
case "destructive-primary":
|
|
18
|
-
return _2XIVACBMcjs.colors_module_default.cambioDestructive900Color;
|
|
19
|
-
case "destructive-lightBackground":
|
|
20
|
-
return _2XIVACBMcjs.colors_module_default.cambioDestructive900Color;
|
|
21
|
-
case "destructive-darkBackground":
|
|
22
|
-
return _2XIVACBMcjs.colors_module_default.cambioDestructive300Color;
|
|
23
|
-
case "success":
|
|
24
|
-
return _2XIVACBMcjs.colors_module_default.cambioSuccess700Color;
|
|
25
|
-
case "success-darkBackground":
|
|
26
|
-
return _2XIVACBMcjs.colors_module_default.cambioSuccess100Color;
|
|
27
|
-
default:
|
|
28
|
-
return _2XIVACBMcjs.colors_module_default.cambioBlackColor;
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
exports.textColor = textColor;
|
|
35
|
-
//# sourceMappingURL=B3JRSVBD.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/colors/textColors.ts"],"names":[],"mappings":";;;;;;AAEe,SAAR,UACL,OAYQ;AACR,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IAErB;AACE,aAAO,sBAAY;AAAA,EACvB;AACF","sourcesContent":["import colorStyles from \"../colors/colors.module.css\";\n\nexport default function textColor(\n color:\n | \"gray900\"\n | \"gray700\"\n | \"primary\"\n | \"destructive-primary\"\n | \"destructive-lightBackground\"\n | \"destructive-darkBackground\"\n | \"success\"\n | \"success-darkBackground\"\n | \"white\"\n | \"white-secondary\"\n | \"inherit\",\n): string {\n switch (color) {\n case \"gray700\":\n return colorStyles.cambioGray700Color;\n case \"white\":\n return colorStyles.cambioWhiteColor;\n case \"white-secondary\":\n return colorStyles.cambioWhite70Color;\n case \"inherit\":\n return colorStyles.inheritColor;\n case \"destructive-primary\":\n return colorStyles.cambioDestructive900Color;\n case \"destructive-lightBackground\":\n return colorStyles.cambioDestructive900Color;\n case \"destructive-darkBackground\":\n return colorStyles.cambioDestructive300Color;\n case \"success\":\n return colorStyles.cambioSuccess700Color;\n case \"success-darkBackground\":\n return colorStyles.cambioSuccess100Color;\n // primary / gray900\n default:\n return colorStyles.cambioBlackColor;\n }\n}\n"]}
|
|
@@ -1,149 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
var _5JUNB754cjs = require('./5JUNB754.cjs');
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
var _3P2PWHOUcjs = require('./3P2PWHOU.cjs');
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
var _UEY7FXLXcjs = require('./UEY7FXLX.cjs');
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
var _RXQBNEFRcjs = require('./RXQBNEFR.cjs');
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
var _2D3DOVVZcjs = require('./2D3DOVVZ.cjs');
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var _F3SUJGZLcjs = require('./F3SUJGZL.cjs');
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
var _QODNNCT2cjs = require('./QODNNCT2.cjs');
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
var _4TYOP5XMcjs = require('./4TYOP5XM.cjs');
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
|
|
30
|
-
|
|
31
|
-
// src/Button/Button.tsx
|
|
32
|
-
var _react = require('react');
|
|
33
|
-
var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
|
|
34
|
-
|
|
35
|
-
// css-module:./Button.module.css#css-module
|
|
36
|
-
var Button_module_default = { "button": "_button_v2jgj_1", "buttonGap": "_buttonGap_v2jgj_8", "disabled": "_disabled_v2jgj_42", "disabledPrimary": "_disabledPrimary_v2jgj_57", "fullWidth": "_fullWidth_v2jgj_61", "sm": "_sm_v2jgj_65", "md": "_md_v2jgj_72", "lg": "_lg_v2jgj_79", "icon": "_icon_v2jgj_86", "smIcon": "_smIcon_v2jgj_90", "mdIcon": "_mdIcon_v2jgj_97", "lgIcon": "_lgIcon_v2jgj_104", "loading": "_loading_v2jgj_121", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_v2jgj_1", "loadingCircle": "_loadingCircle_v2jgj_125" };
|
|
37
|
-
|
|
38
|
-
// src/Button/Button.tsx
|
|
39
|
-
var _jsxruntime = require('react/jsx-runtime');
|
|
40
|
-
var Button = _react.forwardRef.call(void 0,
|
|
41
|
-
({
|
|
42
|
-
"data-testid": dataTestId,
|
|
43
|
-
text,
|
|
44
|
-
loadingText,
|
|
45
|
-
color = "primary",
|
|
46
|
-
size = "md",
|
|
47
|
-
accessibilityLabel,
|
|
48
|
-
disabled = false,
|
|
49
|
-
loading = false,
|
|
50
|
-
fullWidth = false,
|
|
51
|
-
startIcon: StartIcon,
|
|
52
|
-
endIcon: EndIcon,
|
|
53
|
-
on = "lightBackground",
|
|
54
|
-
onClick,
|
|
55
|
-
tooltip,
|
|
56
|
-
type = "button"
|
|
57
|
-
}, ref) => {
|
|
58
|
-
const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
|
|
59
|
-
const foregroundColorClass = _RXQBNEFRcjs.foregroundColor.call(void 0, color, on);
|
|
60
|
-
const backgroundColorClass = _F3SUJGZLcjs.backgroundColor.call(void 0, color, on);
|
|
61
|
-
const disabledPrimary = color === "primary" && disabled;
|
|
62
|
-
const isDisabled = !isHydrated || disabled || loading;
|
|
63
|
-
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
64
|
-
"button",
|
|
65
|
-
{
|
|
66
|
-
"data-testid": dataTestId,
|
|
67
|
-
ref,
|
|
68
|
-
"aria-label": accessibilityLabel,
|
|
69
|
-
type,
|
|
70
|
-
title: tooltip,
|
|
71
|
-
disabled: isDisabled,
|
|
72
|
-
onClick,
|
|
73
|
-
className: _classnames2.default.call(void 0,
|
|
74
|
-
Button_module_default.button,
|
|
75
|
-
foregroundColorClass,
|
|
76
|
-
backgroundColorClass,
|
|
77
|
-
_2D3DOVVZcjs.border.call(void 0, color, on),
|
|
78
|
-
Button_module_default[size],
|
|
79
|
-
{
|
|
80
|
-
[Button_module_default.fullWidth]: fullWidth,
|
|
81
|
-
[Button_module_default.buttonGap]: size === "lg" || size === "md",
|
|
82
|
-
[Button_module_default.disabled]: isDisabled
|
|
83
|
-
}
|
|
84
|
-
),
|
|
85
|
-
children: [
|
|
86
|
-
!loading && StartIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
87
|
-
StartIcon,
|
|
88
|
-
{
|
|
89
|
-
className: _classnames2.default.call(void 0,
|
|
90
|
-
Button_module_default.icon,
|
|
91
|
-
_UEY7FXLXcjs.materialIconSize[size],
|
|
92
|
-
disabledPrimary && Button_module_default.disabledPrimary
|
|
93
|
-
),
|
|
94
|
-
size: _UEY7FXLXcjs.internalIconSize[size]
|
|
95
|
-
}
|
|
96
|
-
),
|
|
97
|
-
(loading && loadingText || !loading && text) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _QODNNCT2cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _4TYOP5XMcjs.Typography_default, { size: _5JUNB754cjs.textVariant_default[size], weight: "medium", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
98
|
-
"span",
|
|
99
|
-
{
|
|
100
|
-
className: _classnames2.default.call(void 0,
|
|
101
|
-
foregroundColorClass,
|
|
102
|
-
disabledPrimary && Button_module_default.disabledPrimary
|
|
103
|
-
),
|
|
104
|
-
children: loading ? loadingText : text
|
|
105
|
-
}
|
|
106
|
-
) }) }),
|
|
107
|
-
!loading && EndIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
108
|
-
EndIcon,
|
|
109
|
-
{
|
|
110
|
-
className: _classnames2.default.call(void 0,
|
|
111
|
-
Button_module_default.icon,
|
|
112
|
-
_UEY7FXLXcjs.materialIconSize[size],
|
|
113
|
-
disabledPrimary && Button_module_default.disabledPrimary
|
|
114
|
-
),
|
|
115
|
-
size: _UEY7FXLXcjs.internalIconSize[size]
|
|
116
|
-
}
|
|
117
|
-
),
|
|
118
|
-
loading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
119
|
-
"svg",
|
|
120
|
-
{
|
|
121
|
-
className: _classnames2.default.call(void 0, Button_module_default.loading, foregroundColorClass),
|
|
122
|
-
viewBox: "22 22 44 44",
|
|
123
|
-
width: _3P2PWHOUcjs.loadingIconSize_default[size],
|
|
124
|
-
height: _3P2PWHOUcjs.loadingIconSize_default[size],
|
|
125
|
-
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
126
|
-
"circle",
|
|
127
|
-
{
|
|
128
|
-
className: Button_module_default.loadingCircle,
|
|
129
|
-
cx: "44",
|
|
130
|
-
cy: "44",
|
|
131
|
-
r: "20.2",
|
|
132
|
-
fill: "none",
|
|
133
|
-
strokeWidth: "3.6"
|
|
134
|
-
}
|
|
135
|
-
)
|
|
136
|
-
}
|
|
137
|
-
)
|
|
138
|
-
]
|
|
139
|
-
}
|
|
140
|
-
);
|
|
141
|
-
}
|
|
142
|
-
);
|
|
143
|
-
Button.displayName = "Button";
|
|
144
|
-
var Button_default = Button;
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
exports.Button_default = Button_default;
|
|
149
|
-
//# sourceMappingURL=BVNFNAUO.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Button/Button.tsx","css-module:./Button.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,kBAAuC;AACvD,OAAO,gBAAgB;;;ACDqE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,sBAAqB,YAAW,sBAAqB,mBAAkB,6BAA4B,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,QAAO,kBAAiB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,qBAAoB,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;AD4IrkB,SAsBI,KAtBJ;AA7BN,IAAM,SAAS;AAAA,EACb,CACE;AAAA,IACE,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,OAAO;AAAA,IACP;AAAA,IACA,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,IACT,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,GACA,QACG;AACH,UAAM,aAAa,cAAc;AAEjC,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AACtD,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AACtD,UAAM,kBAAkB,UAAU,aAAa;AAC/C,UAAM,aAAa,CAAC,cAAc,YAAY;AAE9C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb;AAAA,QACA,cAAY;AAAA,QACZ;AAAA,QACA,OAAO;AAAA,QACP,UAAU;AAAA,QACV;AAAA,QACA,WAAW;AAAA,UACT,sBAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA,OAAO,OAAO,EAAE;AAAA,UAChB,sBAAO,IAAI;AAAA,UACX;AAAA,YACE,CAAC,sBAAO,SAAS,GAAG;AAAA,YACpB,CAAC,sBAAO,SAAS,GAAG,SAAS,QAAQ,SAAS;AAAA,YAC9C,CAAC,sBAAO,QAAQ,GAAG;AAAA,UACrB;AAAA,QACF;AAAA,QAEC;AAAA,WAAC,WAAW,aACX;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAO;AAAA,gBACP,iBAAiB,IAAI;AAAA,gBACrB,mBAAmB,sBAAO;AAAA,cAC5B;AAAA,cACA,MAAM,iBAAiB,IAAI;AAAA;AAAA,UAC7B;AAAA,WAEC,WAAW,eAAiB,CAAC,WAAW,SACzC,oBAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,oBAAY,IAAI,GAAG,QAAO,UAC1C;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,mBAAmB,sBAAO;AAAA,cAC5B;AAAA,cAEC,oBAAU,cAAc;AAAA;AAAA,UAC3B,GACF,GACF;AAAA,UAED,CAAC,WAAW,WACX;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAO;AAAA,gBACP,iBAAiB,IAAI;AAAA,gBACrB,mBAAmB,sBAAO;AAAA,cAC5B;AAAA,cACA,MAAM,iBAAiB,IAAI;AAAA;AAAA,UAC7B;AAAA,UAED,WACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,WAAW,sBAAO,SAAS,oBAAoB;AAAA,cAC1D,SAAQ;AAAA,cACR,OAAO,wBAAgB,IAAI;AAAA,cAC3B,QAAQ,wBAAgB,IAAI;AAAA,cAE5B;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW,sBAAO;AAAA,kBAClB,IAAG;AAAA,kBACH,IAAG;AAAA,kBACH,GAAE;AAAA,kBACF,MAAK;AAAA,kBACL,aAAY;AAAA;AAAA,cACd;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;AAErB,IAAO,iBAAQ","sourcesContent":["import React, { forwardRef, type ComponentProps } from \"react\";\nimport classNames from \"classnames\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport { materialIconSize, internalIconSize } from \"./constants/iconSize\";\nimport textVariant from \"./constants/textVariant\";\nimport loadingIconSize from \"./constants/loadingIconSize\";\nimport styles from \"./Button.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { backgroundColor } from \"../colors/backgroundColor\";\nimport { foregroundColor } from \"../colors/foregroundColor\";\nimport { border } from \"../colors/border\";\nimport type InternalIcon from \"../Icon/Icon\";\n\ntype ButtonProps = {\n /**\n * Test id for the button\n */\n \"data-testid\"?: string;\n /**\n * The text to be displayed inside the button\n */\n text: string;\n /**\n * The text to be displayed inside the button when it is in a loading state\n */\n loadingText?: string;\n /**\n * The color of the button\n *\n * @defaultValue \"primary\"\n */\n color?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"destructive-primary\"\n | \"destructive-secondary\"\n | \"destructive-tertiary\"\n | \"branded\"\n | \"success-primary\"\n | \"success-secondary\"\n | \"success-tertiary\";\n /**\n * The size of the button\n *\n * * `sm`: 32px\n * * `md`: 48px\n * * `lg`: 64px\n *\n * @defaultValue \"md\"\n */\n size?: (typeof Size)[number];\n /**\n * The label to be used for accessibility\n */\n accessibilityLabel?: string;\n /**\n * If `true`, the button will be disabled\n *\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * If `true`, the button will be in a loading state\n *\n * @defaultValue false\n */\n loading?: boolean;\n /**\n * If `true`, the button will take up the full width of its container\n *\n * @defaultValue false\n */\n fullWidth?: boolean;\n /**\n * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n */\n startIcon?:\n | React.ComponentType<{ className?: string }>\n | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n /**\n * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n */\n endIcon?:\n | React.ComponentType<{ className?: string }>\n | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n /**\n * Indicate whether the button renders on a light or dark background. Changes the color of the button\n *\n * @defaulValue `lightBackground`\n */\n on?: \"lightBackground\" | \"darkBackground\";\n /**\n * The callback to be called when the button is clicked\n */\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n /**\n * The tooltip to be displayed when the user hovers over the button\n */\n tooltip?: string;\n /**\n * The type you want to set for the primitive `<button/>`\n */\n type?: \"button\" | \"submit\" | \"reset\";\n};\n\n/**\n * [Button](https://cambly-syntax.vercel.app/?path=/docs/components-button--docs) is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n \"data-testid\": dataTestId,\n text,\n loadingText,\n color = \"primary\",\n size = \"md\",\n accessibilityLabel,\n disabled = false,\n loading = false,\n fullWidth = false,\n startIcon: StartIcon,\n endIcon: EndIcon,\n on = \"lightBackground\",\n onClick,\n tooltip,\n type = \"button\",\n }: ButtonProps,\n ref,\n ) => {\n const isHydrated = useIsHydrated();\n\n const foregroundColorClass = foregroundColor(color, on);\n const backgroundColorClass = backgroundColor(color, on);\n const disabledPrimary = color === \"primary\" && disabled;\n const isDisabled = !isHydrated || disabled || loading;\n\n return (\n <button\n data-testid={dataTestId}\n ref={ref}\n aria-label={accessibilityLabel}\n type={type}\n title={tooltip}\n disabled={isDisabled}\n onClick={onClick}\n className={classNames(\n styles.button,\n foregroundColorClass,\n backgroundColorClass,\n border(color, on),\n styles[size],\n {\n [styles.fullWidth]: fullWidth,\n [styles.buttonGap]: size === \"lg\" || size === \"md\",\n [styles.disabled]: isDisabled,\n },\n )}\n >\n {!loading && StartIcon && (\n <StartIcon\n className={classNames(\n styles.icon,\n materialIconSize[size],\n disabledPrimary && styles.disabledPrimary,\n )}\n size={internalIconSize[size]}\n />\n )}\n {((loading && loadingText) || (!loading && text)) && (\n <Box paddingX={1}>\n <Typography size={textVariant[size]} weight=\"medium\">\n <span\n className={classNames(\n foregroundColorClass,\n disabledPrimary && styles.disabledPrimary,\n )}\n >\n {loading ? loadingText : text}\n </span>\n </Typography>\n </Box>\n )}\n {!loading && EndIcon && (\n <EndIcon\n className={classNames(\n styles.icon,\n materialIconSize[size],\n disabledPrimary && styles.disabledPrimary,\n )}\n size={internalIconSize[size]}\n />\n )}\n {loading && (\n <svg\n className={classNames(styles.loading, foregroundColorClass)}\n viewBox=\"22 22 44 44\"\n width={loadingIconSize[size]}\n height={loadingIconSize[size]}\n >\n <circle\n className={styles.loadingCircle}\n cx=\"44\"\n cy=\"44\"\n r=\"20.2\"\n fill=\"none\"\n strokeWidth=\"3.6\"\n />\n </svg>\n )}\n </button>\n );\n },\n);\n\nButton.displayName = \"Button\";\n\nexport default Button;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_v2jgj_1\",\"buttonGap\":\"_buttonGap_v2jgj_8\",\"disabled\":\"_disabled_v2jgj_42\",\"disabledPrimary\":\"_disabledPrimary_v2jgj_57\",\"fullWidth\":\"_fullWidth_v2jgj_61\",\"sm\":\"_sm_v2jgj_65\",\"md\":\"_md_v2jgj_72\",\"lg\":\"_lg_v2jgj_79\",\"icon\":\"_icon_v2jgj_86\",\"smIcon\":\"_smIcon_v2jgj_90\",\"mdIcon\":\"_mdIcon_v2jgj_97\",\"lgIcon\":\"_lgIcon_v2jgj_104\",\"loading\":\"_loading_v2jgj_121\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_v2jgj_1\",\"loadingCircle\":\"_loadingCircle_v2jgj_125\"}"]}
|