@lightsparkdev/ui 0.0.5 → 0.0.6
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/CHANGELOG.md +12 -0
- package/README.md +2 -0
- package/dist/{chunk-3PB5DNAL.js → chunk-23SR7TFO.js} +1 -1
- package/dist/{chunk-VV7F7VVL.js → chunk-2WYVO6B2.js} +1 -1
- package/dist/{chunk-PVUPVJ3F.js → chunk-3CZOYF3X.js} +5 -2
- package/dist/{chunk-4K2KAYVH.js → chunk-4TFRLWCC.js} +4 -1
- package/dist/{chunk-SUD5NOKE.js → chunk-FKETYVPP.js} +11 -6
- package/dist/{chunk-6R6A5H4I.js → chunk-G2PZZFJL.js} +20 -12
- package/dist/{chunk-WB6FFT7Y.js → chunk-I74XQIVV.js} +6 -3
- package/dist/{chunk-DHNWT2E5.js → chunk-IQFU7CM5.js} +1 -1
- package/dist/{chunk-U6LQLAWI.js → chunk-JYWYEOM6.js} +3 -3
- package/dist/{chunk-EZ4RHFY7.js → chunk-K7D7A34K.js} +1 -1
- package/dist/{chunk-6RXFA73Z.js → chunk-M56R3RJ7.js} +10 -1
- package/dist/{chunk-WEPQ7LRL.js → chunk-N2RDQJQ5.js} +1 -1
- package/dist/{chunk-OLAFBUE5.js → chunk-NGS4OSWT.js} +1 -1
- package/dist/{chunk-ANJDI74G.js → chunk-NH25O7PC.js} +6 -3
- package/dist/{chunk-MYG24ZWT.js → chunk-NZJCJJH5.js} +1 -1
- package/dist/{chunk-SW6ZA7W2.js → chunk-QGGOMPHZ.js} +4 -1
- package/dist/{chunk-XUGLVWSH.js → chunk-RFGKH3R6.js} +27 -7
- package/dist/{chunk-ZQTE53SK.js → chunk-RTUZVKPK.js} +10 -8
- package/dist/{chunk-YHSFWCFN.js → chunk-T33SBHYI.js} +3 -2
- package/dist/chunk-TAI352I3.js +30 -0
- package/dist/{chunk-SV5QPU7N.js → chunk-UO6U7AYM.js} +1 -1
- package/dist/{chunk-4ZZHBSW4.js → chunk-VBWTKANQ.js} +15 -8
- package/dist/{chunk-FRIQXHPR.js → chunk-WWFDI534.js} +3 -3
- package/dist/chunk-YMNSXZ5D.js +8 -0
- package/dist/components/Button.cjs +8 -1
- package/dist/components/Button.js +8 -7
- package/dist/components/ButtonRow.js +10 -9
- package/dist/components/Collapsible.cjs +8 -4
- package/dist/components/Collapsible.js +5 -5
- package/dist/components/ContentTable.js +4 -4
- package/dist/components/CopyToClipboardButton.js +5 -5
- package/dist/components/CurrencyAmount.js +4 -4
- package/dist/components/Icon.js +3 -3
- package/dist/components/LightsparkProvider.cjs +2 -1
- package/dist/components/LightsparkProvider.js +4 -4
- package/dist/components/Loading.js +4 -4
- package/dist/components/Modal.cjs +113 -66
- package/dist/components/Modal.d.cts +1 -1
- package/dist/components/Modal.d.ts +1 -1
- package/dist/components/Modal.js +12 -10
- package/dist/components/ProgressBar.cjs +200 -17
- package/dist/components/ProgressBar.js +3 -1
- package/dist/components/SecretContainer.cjs +12 -6
- package/dist/components/SecretContainer.js +6 -6
- package/dist/components/TextIconAligner.d.cts +2 -2
- package/dist/components/TextIconAligner.d.ts +2 -2
- package/dist/components/TextIconAligner.js +4 -4
- package/dist/components/UnstyledButton.js +3 -3
- package/dist/components/documentation/AnchorLinkHeader.cjs +7 -2
- package/dist/components/documentation/AnchorLinkHeader.js +6 -5
- package/dist/components/documentation/index.cjs +7 -2
- package/dist/components/documentation/index.js +6 -5
- package/dist/components/index.cjs +108 -60
- package/dist/components/index.js +20 -18
- package/dist/icons/DotGrid1x3Horizontal.cjs +60 -0
- package/dist/icons/DotGrid1x3Horizontal.d.cts +5 -0
- package/dist/icons/DotGrid1x3Horizontal.d.ts +5 -0
- package/dist/icons/DotGrid1x3Horizontal.js +41 -0
- package/dist/icons/Home.cjs +52 -0
- package/dist/icons/Home.d.cts +5 -0
- package/dist/icons/Home.d.ts +5 -0
- package/dist/icons/Home.js +29 -0
- package/dist/icons/Person.cjs +22 -12
- package/dist/icons/Person.js +23 -13
- package/dist/icons/Team.cjs +3 -3
- package/dist/icons/Team.js +3 -3
- package/dist/icons/index.js +3 -3
- package/dist/router.cjs +10 -0
- package/dist/router.d.cts +5 -2
- package/dist/router.d.ts +5 -2
- package/dist/router.js +3 -1
- package/dist/styles/colors.d.cts +2 -1
- package/dist/styles/colors.d.ts +2 -1
- package/dist/styles/common.cjs +26 -4
- package/dist/styles/common.d.cts +16 -9
- package/dist/styles/common.d.ts +16 -9
- package/dist/styles/common.js +6 -2
- package/dist/styles/fields.cjs +1 -1
- package/dist/styles/fields.d.cts +11 -15
- package/dist/styles/fields.d.ts +11 -15
- package/dist/styles/fields.js +5 -5
- package/dist/styles/fonts/typography/Article.cjs +18 -6
- package/dist/styles/fonts/typography/Article.js +9 -8
- package/dist/styles/fonts/typography/Display.cjs +6 -1
- package/dist/styles/fonts/typography/Display.js +2 -1
- package/dist/styles/fonts/typography/Headline.cjs +6 -1
- package/dist/styles/fonts/typography/Headline.js +2 -1
- package/dist/styles/fonts/typography/index.cjs +18 -6
- package/dist/styles/fonts/typography/index.js +15 -14
- package/dist/styles/global.cjs +2 -1
- package/dist/styles/global.js +3 -3
- package/dist/styles/type.cjs +3 -2
- package/dist/styles/type.d.cts +4 -0
- package/dist/styles/type.d.ts +4 -0
- package/dist/styles/type.js +6 -5
- package/dist/styles/utils.js +3 -3
- package/dist/utils/emotion.cjs +32 -0
- package/dist/utils/emotion.d.cts +5 -0
- package/dist/utils/emotion.d.ts +5 -0
- package/dist/utils/emotion.js +7 -0
- package/dist/utils/toReactNodes.cjs +1252 -0
- package/dist/utils/toReactNodes.d.cts +14 -0
- package/dist/utils/toReactNodes.d.ts +14 -0
- package/dist/utils/toReactNodes.js +14 -0
- package/package.json +12 -3
|
@@ -72,7 +72,7 @@ __export(Modal_exports, {
|
|
|
72
72
|
});
|
|
73
73
|
module.exports = __toCommonJS(Modal_exports);
|
|
74
74
|
var import_styled7 = __toESM(require("@emotion/styled"), 1);
|
|
75
|
-
var
|
|
75
|
+
var import_react12 = __toESM(require("react"), 1);
|
|
76
76
|
var import_react_dom = __toESM(require("react-dom"), 1);
|
|
77
77
|
|
|
78
78
|
// src/hooks/useLiveRef.tsx
|
|
@@ -1353,6 +1353,12 @@ var rootFontSizeRems = rootFontSizePx / 16;
|
|
|
1353
1353
|
var standardContentInsetPx = 32;
|
|
1354
1354
|
var standardContentInsetMdPx = 24;
|
|
1355
1355
|
var standardContentInsetSmPx = 16;
|
|
1356
|
+
var standardBorderRadius = (radius) => {
|
|
1357
|
+
const borderRadiusPx = Array.isArray(radius) ? radius.map((r) => `${r}px`).join(" ") : `${radius}px`;
|
|
1358
|
+
return `
|
|
1359
|
+
border-radius: ${borderRadiusPx};
|
|
1360
|
+
`;
|
|
1361
|
+
};
|
|
1356
1362
|
var smContentInset = import_react5.css`
|
|
1357
1363
|
${bp.sm(`
|
|
1358
1364
|
margin-left: auto;
|
|
@@ -1411,11 +1417,23 @@ var darkGradientBg = import_react5.css`
|
|
|
1411
1417
|
var StyledTooltip = (0, import_styled.default)(import_react_tooltip.Tooltip)`
|
|
1412
1418
|
z-index: ${z.modalOverlay};
|
|
1413
1419
|
`;
|
|
1414
|
-
var
|
|
1415
|
-
|
|
1416
|
-
|
|
1420
|
+
var overlaySurfaceBorderColor = ({
|
|
1421
|
+
theme,
|
|
1422
|
+
important = false
|
|
1423
|
+
}) => import_react5.css`
|
|
1424
|
+
border-color: ${themeOr(theme.c1Neutral, theme.c3Neutral)({ theme })}
|
|
1425
|
+
${important ? "!important" : ""};
|
|
1426
|
+
`;
|
|
1427
|
+
var overlaySurface = ({
|
|
1428
|
+
theme,
|
|
1429
|
+
important = false
|
|
1430
|
+
}) => import_react5.css`
|
|
1431
|
+
background-color: ${themeOr(colors.white, theme.c1Neutral)({ theme })}
|
|
1432
|
+
${important ? "!important" : ""};
|
|
1433
|
+
border: 0.5px solid ${important ? "!important" : ""};
|
|
1434
|
+
${overlaySurfaceBorderColor({ theme, important })};
|
|
1417
1435
|
${themeOr(
|
|
1418
|
-
|
|
1436
|
+
`box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.1) ${important ? "!important" : ""};`,
|
|
1419
1437
|
""
|
|
1420
1438
|
)({ theme })}
|
|
1421
1439
|
`;
|
|
@@ -1481,9 +1499,13 @@ var overflowAutoWithoutScrollbars = import_react6.css`
|
|
|
1481
1499
|
}
|
|
1482
1500
|
`;
|
|
1483
1501
|
|
|
1484
|
-
// src/
|
|
1485
|
-
|
|
1486
|
-
|
|
1502
|
+
// src/utils/emotion.tsx
|
|
1503
|
+
function select(component) {
|
|
1504
|
+
return component.toString();
|
|
1505
|
+
}
|
|
1506
|
+
|
|
1507
|
+
// src/utils/toReactNodes.tsx
|
|
1508
|
+
var import_react8 = require("react");
|
|
1487
1509
|
|
|
1488
1510
|
// src/router.tsx
|
|
1489
1511
|
var import_lodash_es2 = require("lodash-es");
|
|
@@ -1560,10 +1582,35 @@ function Link({
|
|
|
1560
1582
|
);
|
|
1561
1583
|
}
|
|
1562
1584
|
|
|
1585
|
+
// src/utils/toReactNodes.tsx
|
|
1586
|
+
var import_jsx_runtime3 = require("@emotion/react/jsx-runtime");
|
|
1587
|
+
var ToReactNodesTypes = {
|
|
1588
|
+
Link: "link"
|
|
1589
|
+
};
|
|
1590
|
+
function toReactNodes(toReactNodesArg) {
|
|
1591
|
+
const toReactNodesArray = Array.isArray(toReactNodesArg) ? toReactNodesArg : [toReactNodesArg];
|
|
1592
|
+
const reactNodes = toReactNodesArray.map((node, i) => {
|
|
1593
|
+
if (typeof node === "string") {
|
|
1594
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react8.Fragment, { children: node.split("\n").map((str, j, strArr) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react8.Fragment, { children: [
|
|
1595
|
+
str,
|
|
1596
|
+
j < strArr.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("br", {})
|
|
1597
|
+
] }, `str-${i}-break-${j}`)) }, `str-${i}`);
|
|
1598
|
+
} else if (node.type === ToReactNodesTypes.Link) {
|
|
1599
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Link, { to: node.to, children: node.text }, `link-${i}`);
|
|
1600
|
+
}
|
|
1601
|
+
return null;
|
|
1602
|
+
});
|
|
1603
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react8.Fragment, { children: reactNodes });
|
|
1604
|
+
}
|
|
1605
|
+
|
|
1606
|
+
// src/components/Button.tsx
|
|
1607
|
+
var import_react10 = require("@emotion/react");
|
|
1608
|
+
var import_styled5 = __toESM(require("@emotion/styled"), 1);
|
|
1609
|
+
|
|
1563
1610
|
// src/components/Icon.tsx
|
|
1564
1611
|
var import_styled2 = __toESM(require("@emotion/styled"), 1);
|
|
1565
|
-
var
|
|
1566
|
-
var
|
|
1612
|
+
var import_react9 = require("react");
|
|
1613
|
+
var import_jsx_runtime4 = require("@emotion/react/jsx-runtime");
|
|
1567
1614
|
var iconMap = {};
|
|
1568
1615
|
function loadIcon(iconName) {
|
|
1569
1616
|
return __async(this, null, function* () {
|
|
@@ -1590,9 +1637,9 @@ function Icon({
|
|
|
1590
1637
|
verticalAlign = "middle",
|
|
1591
1638
|
color = void 0
|
|
1592
1639
|
}) {
|
|
1593
|
-
const [, setLoading] = (0,
|
|
1640
|
+
const [, setLoading] = (0, import_react9.useState)(false);
|
|
1594
1641
|
const IconComponent = iconMap[name] || null;
|
|
1595
|
-
(0,
|
|
1642
|
+
(0, import_react9.useLayoutEffect)(() => {
|
|
1596
1643
|
void (() => __async(this, null, function* () {
|
|
1597
1644
|
if (!iconMap[name]) {
|
|
1598
1645
|
setLoading(true);
|
|
@@ -1605,7 +1652,7 @@ function Icon({
|
|
|
1605
1652
|
const mrRems = parseFloat((mr / rootFontSizePx).toFixed(2));
|
|
1606
1653
|
const mlRems = parseFloat((ml / rootFontSizePx).toFixed(2));
|
|
1607
1654
|
const va = typeof verticalAlign === "string" ? verticalAlign : parseFloat((verticalAlign / rootFontSizePx).toFixed(2));
|
|
1608
|
-
return /* @__PURE__ */ (0,
|
|
1655
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1609
1656
|
IconContainer,
|
|
1610
1657
|
{
|
|
1611
1658
|
className,
|
|
@@ -1615,7 +1662,7 @@ function Icon({
|
|
|
1615
1662
|
verticalAlign: va,
|
|
1616
1663
|
fontColor: color,
|
|
1617
1664
|
"data-tutorial-tip": tutorialStep == null ? void 0 : tutorialStep.toString(),
|
|
1618
|
-
children: IconComponent ? /* @__PURE__ */ (0,
|
|
1665
|
+
children: IconComponent ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconComponent, {}) : null
|
|
1619
1666
|
}
|
|
1620
1667
|
);
|
|
1621
1668
|
}
|
|
@@ -1641,7 +1688,7 @@ var IconContainer = import_styled2.default.span`
|
|
|
1641
1688
|
|
|
1642
1689
|
// src/components/Loading.tsx
|
|
1643
1690
|
var import_styled3 = __toESM(require("@emotion/styled"), 1);
|
|
1644
|
-
var
|
|
1691
|
+
var import_jsx_runtime5 = require("@emotion/react/jsx-runtime");
|
|
1645
1692
|
var defaultProps = {
|
|
1646
1693
|
size: 60,
|
|
1647
1694
|
center: true,
|
|
@@ -1652,7 +1699,7 @@ function Loading({
|
|
|
1652
1699
|
size: size2 = defaultProps.size,
|
|
1653
1700
|
ml = defaultProps.ml
|
|
1654
1701
|
}) {
|
|
1655
|
-
return /* @__PURE__ */ (0,
|
|
1702
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LoadingWrapper, { center, ml, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Rotate, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "LoadingSpinner", width: size2 }) }) });
|
|
1656
1703
|
}
|
|
1657
1704
|
Loading.defaultProps = defaultProps;
|
|
1658
1705
|
var LoadingWrapper = import_styled3.default.div`
|
|
@@ -1706,7 +1753,7 @@ var UnstyledButton = import_styled4.default.button`
|
|
|
1706
1753
|
`;
|
|
1707
1754
|
|
|
1708
1755
|
// src/components/Button.tsx
|
|
1709
|
-
var
|
|
1756
|
+
var import_jsx_runtime6 = require("@emotion/react/jsx-runtime");
|
|
1710
1757
|
function getTextColor({ color, theme, primary: primary2, blue }) {
|
|
1711
1758
|
if (color) {
|
|
1712
1759
|
return color;
|
|
@@ -1801,11 +1848,11 @@ function Button({
|
|
|
1801
1848
|
const iconSize = size2 === "lg" ? 16 : 12;
|
|
1802
1849
|
let currentIcon = null;
|
|
1803
1850
|
if (loading) {
|
|
1804
|
-
currentIcon = /* @__PURE__ */ (0,
|
|
1851
|
+
currentIcon = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ButtonIcon, { ghost, iconSide, text, size: size2, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Loading, { size: iconSize, center: false }) });
|
|
1805
1852
|
} else if (icon) {
|
|
1806
|
-
currentIcon = /* @__PURE__ */ (0,
|
|
1853
|
+
currentIcon = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ButtonIcon, { ghost, iconSide, text, size: size2, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: icon, width: iconSize }) });
|
|
1807
1854
|
}
|
|
1808
|
-
const content = /* @__PURE__ */ (0,
|
|
1855
|
+
const content = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
1809
1856
|
"div",
|
|
1810
1857
|
{
|
|
1811
1858
|
css: {
|
|
@@ -1815,7 +1862,7 @@ function Button({
|
|
|
1815
1862
|
},
|
|
1816
1863
|
children: [
|
|
1817
1864
|
iconSide === "left" && currentIcon,
|
|
1818
|
-
/* @__PURE__ */ (0,
|
|
1865
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1819
1866
|
"div",
|
|
1820
1867
|
{
|
|
1821
1868
|
css: {
|
|
@@ -1853,9 +1900,9 @@ function Button({
|
|
|
1853
1900
|
zIndex
|
|
1854
1901
|
};
|
|
1855
1902
|
if (to) {
|
|
1856
|
-
return /* @__PURE__ */ (0,
|
|
1903
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ButtonLink, __spreadProps(__spreadValues({}, commonProps), { to, params: toParams, hash, children: content }));
|
|
1857
1904
|
}
|
|
1858
|
-
return href ? /* @__PURE__ */ (0,
|
|
1905
|
+
return href ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ButtonHrefLink, __spreadProps(__spreadValues({}, commonProps), { href, target: "_blank", children: content })) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StyledButton, __spreadProps(__spreadValues({}, commonProps), { children: content }));
|
|
1859
1906
|
}
|
|
1860
1907
|
var hPaddingPx = 24;
|
|
1861
1908
|
var buttonStyle = ({
|
|
@@ -1874,7 +1921,7 @@ var buttonStyle = ({
|
|
|
1874
1921
|
text,
|
|
1875
1922
|
zIndex,
|
|
1876
1923
|
iconSide
|
|
1877
|
-
}) =>
|
|
1924
|
+
}) => import_react10.css`
|
|
1878
1925
|
display: inline-flex;
|
|
1879
1926
|
opacity: ${disabled && !isLoading ? 0.2 : 1};
|
|
1880
1927
|
transition: opacity 0.2s;
|
|
@@ -1938,8 +1985,8 @@ var ButtonHrefLink = import_styled5.default.a`
|
|
|
1938
1985
|
|
|
1939
1986
|
// src/components/ProgressBar.tsx
|
|
1940
1987
|
var import_styled6 = __toESM(require("@emotion/styled"), 1);
|
|
1941
|
-
var
|
|
1942
|
-
var
|
|
1988
|
+
var import_react11 = require("react");
|
|
1989
|
+
var import_jsx_runtime7 = require("@emotion/react/jsx-runtime");
|
|
1943
1990
|
var defaultProps2 = {
|
|
1944
1991
|
isSm: false,
|
|
1945
1992
|
stepDuration: 0.5
|
|
@@ -1950,18 +1997,17 @@ function ProgressBar({
|
|
|
1950
1997
|
isSm = defaultProps2.isSm,
|
|
1951
1998
|
stepDuration = defaultProps2.stepDuration
|
|
1952
1999
|
}) {
|
|
1953
|
-
const [percentage, setPercentage] = (0,
|
|
1954
|
-
|
|
1955
|
-
setTimeout(() => {
|
|
1956
|
-
setPercentage(100);
|
|
1957
|
-
}, 0);
|
|
1958
|
-
}
|
|
1959
|
-
(0, import_react10.useEffect)(() => {
|
|
2000
|
+
const [percentage, setPercentage] = (0, import_react11.useState)(5);
|
|
2001
|
+
(0, import_react11.useEffect)(() => {
|
|
1960
2002
|
if (progressPercentage !== void 0) {
|
|
1961
2003
|
setPercentage(progressPercentage);
|
|
2004
|
+
} else {
|
|
2005
|
+
setTimeout(() => {
|
|
2006
|
+
setPercentage(100);
|
|
2007
|
+
}, 0);
|
|
1962
2008
|
}
|
|
1963
2009
|
}, [progressPercentage]);
|
|
1964
|
-
return /* @__PURE__ */ (0,
|
|
2010
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ProgressBarContainer, { isSm, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Bar, { isSm, percentage, stepDuration, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1965
2011
|
BarBg,
|
|
1966
2012
|
{
|
|
1967
2013
|
background,
|
|
@@ -1973,8 +2019,8 @@ function ProgressBar({
|
|
|
1973
2019
|
}
|
|
1974
2020
|
ProgressBar.defaultProps = defaultProps2;
|
|
1975
2021
|
var ProgressBarContainer = import_styled6.default.div`
|
|
2022
|
+
${standardBorderRadius(16)}
|
|
1976
2023
|
background-color: ${({ theme }) => themeOr(theme.c05Neutral, theme.c1Neutral)({ theme })};
|
|
1977
|
-
border-radius: 16px;
|
|
1978
2024
|
box-sizing: border-box;
|
|
1979
2025
|
display: flex;
|
|
1980
2026
|
height: ${({ isSm }) => isSm ? "6px" : "16px"};
|
|
@@ -1983,7 +2029,7 @@ var ProgressBarContainer = import_styled6.default.div`
|
|
|
1983
2029
|
position: relative;
|
|
1984
2030
|
`;
|
|
1985
2031
|
var BarBg = import_styled6.default.div`
|
|
1986
|
-
|
|
2032
|
+
${standardBorderRadius(16)}
|
|
1987
2033
|
width: ${({ percentage }) => 100 / percentage * 100}%;
|
|
1988
2034
|
height: 100%;
|
|
1989
2035
|
|
|
@@ -1997,8 +2043,8 @@ var BarBg = import_styled6.default.div`
|
|
|
1997
2043
|
)`};
|
|
1998
2044
|
`;
|
|
1999
2045
|
var Bar = import_styled6.default.div`
|
|
2046
|
+
${standardBorderRadius(16)}
|
|
2000
2047
|
overflow: hidden;
|
|
2001
|
-
border-radius: ${({ isSm }) => isSm ? "6px" : "16px"};
|
|
2002
2048
|
box-sizing: border-box;
|
|
2003
2049
|
display: inline-block;
|
|
2004
2050
|
height: ${({ isSm }) => isSm ? "6px" : "16px"};
|
|
@@ -2008,7 +2054,7 @@ var Bar = import_styled6.default.div`
|
|
|
2008
2054
|
`;
|
|
2009
2055
|
|
|
2010
2056
|
// src/components/Modal.tsx
|
|
2011
|
-
var
|
|
2057
|
+
var import_jsx_runtime8 = require("@emotion/react/jsx-runtime");
|
|
2012
2058
|
function Modal({
|
|
2013
2059
|
visible,
|
|
2014
2060
|
title,
|
|
@@ -2030,23 +2076,24 @@ function Modal({
|
|
|
2030
2076
|
width = 460,
|
|
2031
2077
|
progressBar
|
|
2032
2078
|
}) {
|
|
2033
|
-
const visibleChangedRef = (0,
|
|
2034
|
-
const nodeRef = (0,
|
|
2079
|
+
const visibleChangedRef = (0, import_react12.useRef)(false);
|
|
2080
|
+
const nodeRef = (0, import_react12.useRef)(null);
|
|
2035
2081
|
const [defaultFirstFocusRef, defaultFirstFocusRefCb] = useLiveRef();
|
|
2036
2082
|
const ref = firstFocusRef || defaultFirstFocusRef;
|
|
2037
|
-
const [nodeReady, setNodeReady] =
|
|
2038
|
-
const overlayRef = (0,
|
|
2039
|
-
const prevFocusedElement = (0,
|
|
2040
|
-
const modalContainerRef = (0,
|
|
2083
|
+
const [nodeReady, setNodeReady] = import_react12.default.useState(false);
|
|
2084
|
+
const overlayRef = (0, import_react12.useRef)(null);
|
|
2085
|
+
const prevFocusedElement = (0, import_react12.useRef)();
|
|
2086
|
+
const modalContainerRef = (0, import_react12.useRef)(null);
|
|
2041
2087
|
const bp2 = useBreakpoints();
|
|
2042
2088
|
const isSm = bp2.current("sm" /* sm */);
|
|
2043
|
-
|
|
2089
|
+
const formattedDescription = description ? toReactNodes(description) : null;
|
|
2090
|
+
(0, import_react12.useEffect)(() => {
|
|
2044
2091
|
if (visible !== visibleChangedRef.current) {
|
|
2045
2092
|
visibleChangedRef.current = visible;
|
|
2046
2093
|
}
|
|
2047
2094
|
}, [visible]);
|
|
2048
2095
|
const visibleChanged = visible !== visibleChangedRef.current;
|
|
2049
|
-
(0,
|
|
2096
|
+
(0, import_react12.useEffect)(() => {
|
|
2050
2097
|
prevFocusedElement.current = document.activeElement;
|
|
2051
2098
|
if (!nodeRef.current) {
|
|
2052
2099
|
nodeRef.current = document.createElement("div");
|
|
@@ -2060,7 +2107,7 @@ function Modal({
|
|
|
2060
2107
|
}
|
|
2061
2108
|
};
|
|
2062
2109
|
}, []);
|
|
2063
|
-
(0,
|
|
2110
|
+
(0, import_react12.useEffect)(() => {
|
|
2064
2111
|
const handleOutsideClick = (event) => {
|
|
2065
2112
|
if (visible && overlayRef.current && event.target && overlayRef.current.contains(event.target) && !nonDismissable) {
|
|
2066
2113
|
onClose();
|
|
@@ -2097,7 +2144,7 @@ function Modal({
|
|
|
2097
2144
|
}
|
|
2098
2145
|
};
|
|
2099
2146
|
}, [onClose, visible, nonDismissable]);
|
|
2100
|
-
(0,
|
|
2147
|
+
(0, import_react12.useLayoutEffect)(() => {
|
|
2101
2148
|
if (visible) {
|
|
2102
2149
|
if (visibleChanged) {
|
|
2103
2150
|
prevFocusedElement.current = document.activeElement;
|
|
@@ -2126,9 +2173,9 @@ function Modal({
|
|
|
2126
2173
|
onClose();
|
|
2127
2174
|
}
|
|
2128
2175
|
}
|
|
2129
|
-
const modalContent = /* @__PURE__ */ (0,
|
|
2130
|
-
/* @__PURE__ */ (0,
|
|
2131
|
-
/* @__PURE__ */ (0,
|
|
2176
|
+
const modalContent = /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react12.Fragment, { children: [
|
|
2177
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ModalOverlay, { ref: overlayRef }),
|
|
2178
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
2132
2179
|
ModalContainer,
|
|
2133
2180
|
{
|
|
2134
2181
|
"aria-modal": true,
|
|
@@ -2136,22 +2183,22 @@ function Modal({
|
|
|
2136
2183
|
tabIndex: -1,
|
|
2137
2184
|
role: "dialog",
|
|
2138
2185
|
ref: modalContainerRef,
|
|
2139
|
-
children: /* @__PURE__ */ (0,
|
|
2140
|
-
!firstFocusRef && /* @__PURE__ */ (0,
|
|
2141
|
-
!(nonDismissable || ghost) && /* @__PURE__ */ (0,
|
|
2142
|
-
/* @__PURE__ */ (0,
|
|
2143
|
-
progressBar ? /* @__PURE__ */ (0,
|
|
2186
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ModalContent, { width, ghost, children: [
|
|
2187
|
+
!firstFocusRef && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
|
|
2188
|
+
!(nonDismissable || ghost) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "Close", width: 9 }) }),
|
|
2189
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ModalContentInner, { ghost, children: [
|
|
2190
|
+
progressBar ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { css: { marginBottom: "20px" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
2144
2191
|
ProgressBar,
|
|
2145
2192
|
{
|
|
2146
2193
|
progressPercentage: progressBar.progressPercentage,
|
|
2147
2194
|
isSm: progressBar.isSm
|
|
2148
2195
|
}
|
|
2149
2196
|
) }) : null,
|
|
2150
|
-
title ? /* @__PURE__ */ (0,
|
|
2151
|
-
|
|
2152
|
-
/* @__PURE__ */ (0,
|
|
2153
|
-
onSubmit ? /* @__PURE__ */ (0,
|
|
2154
|
-
!isSm && !cancelHidden && /* @__PURE__ */ (0,
|
|
2197
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h4", { children: title }) : null,
|
|
2198
|
+
formattedDescription ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Description, { children: formattedDescription }) : null,
|
|
2199
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children }),
|
|
2200
|
+
onSubmit ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ModalButtonRow, { children: [
|
|
2201
|
+
!isSm && !cancelHidden && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
2155
2202
|
Button,
|
|
2156
2203
|
{
|
|
2157
2204
|
disabled: cancelDisabled,
|
|
@@ -2159,7 +2206,7 @@ function Modal({
|
|
|
2159
2206
|
text: cancelText != null ? cancelText : "Cancel"
|
|
2160
2207
|
}
|
|
2161
2208
|
),
|
|
2162
|
-
/* @__PURE__ */ (0,
|
|
2209
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
2163
2210
|
Button,
|
|
2164
2211
|
{
|
|
2165
2212
|
disabled: submitDisabled,
|
|
@@ -2169,7 +2216,7 @@ function Modal({
|
|
|
2169
2216
|
type: "submit"
|
|
2170
2217
|
}
|
|
2171
2218
|
),
|
|
2172
|
-
isSm && !cancelHidden && /* @__PURE__ */ (0,
|
|
2219
|
+
isSm && !cancelHidden && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Button, { onClick: onClose, text: "Cancel" })
|
|
2173
2220
|
] }) : null
|
|
2174
2221
|
] })
|
|
2175
2222
|
] })
|
|
@@ -2177,7 +2224,7 @@ function Modal({
|
|
|
2177
2224
|
)
|
|
2178
2225
|
] });
|
|
2179
2226
|
return visible && nodeReady && nodeRef.current ? import_react_dom.default.createPortal(
|
|
2180
|
-
onSubmit ? /* @__PURE__ */ (0,
|
|
2227
|
+
onSubmit ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("form", { onSubmit: onSubmitForm, children: modalContent }) : modalContent,
|
|
2181
2228
|
nodeRef.current
|
|
2182
2229
|
) : null;
|
|
2183
2230
|
}
|
|
@@ -2245,13 +2292,13 @@ var ModalButtonRow = import_styled7.default.div`
|
|
|
2245
2292
|
var ModalContent = import_styled7.default.div`
|
|
2246
2293
|
${overflowAutoWithoutScrollbars}
|
|
2247
2294
|
${smContentInset}
|
|
2295
|
+
${standardBorderRadius(16)}
|
|
2248
2296
|
${(props) => props.ghost ? "" : overlaySurface}
|
|
2249
2297
|
pointer-events: auto;
|
|
2250
2298
|
transition: width 0.25s ease-in;
|
|
2251
2299
|
width: ${(props) => props.width}px;
|
|
2252
2300
|
max-width: 100%;
|
|
2253
2301
|
max-height: 100%;
|
|
2254
|
-
border-radius: 16px;
|
|
2255
2302
|
position: absolute;
|
|
2256
2303
|
${(props) => props.ghost ? "" : "padding: 16px 16px 40px;"}
|
|
2257
2304
|
|
|
@@ -2259,7 +2306,7 @@ var ModalContent = import_styled7.default.div`
|
|
|
2259
2306
|
margin: 0;
|
|
2260
2307
|
font-weight: 800;
|
|
2261
2308
|
font-size: ${pxToRems(21)};
|
|
2262
|
-
& + *:not(${Description}) {
|
|
2309
|
+
& + *:not(${select(Description)}) {
|
|
2263
2310
|
margin-top: ${contentTopMarginPx}px;
|
|
2264
2311
|
}
|
|
2265
2312
|
}
|
package/dist/components/Modal.js
CHANGED
|
@@ -1,21 +1,23 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
Modal
|
|
4
|
-
} from "../chunk-
|
|
4
|
+
} from "../chunk-G2PZZFJL.js";
|
|
5
|
+
import "../chunk-TAI352I3.js";
|
|
5
6
|
import "../chunk-NBCCPGA4.js";
|
|
6
|
-
import "../chunk-
|
|
7
|
-
import "../chunk-
|
|
8
|
-
import "../chunk-
|
|
9
|
-
import "../chunk-
|
|
10
|
-
import "../chunk-
|
|
11
|
-
import "../chunk-
|
|
12
|
-
import "../chunk-
|
|
7
|
+
import "../chunk-RTUZVKPK.js";
|
|
8
|
+
import "../chunk-FKETYVPP.js";
|
|
9
|
+
import "../chunk-M56R3RJ7.js";
|
|
10
|
+
import "../chunk-YMNSXZ5D.js";
|
|
11
|
+
import "../chunk-NGS4OSWT.js";
|
|
12
|
+
import "../chunk-UO6U7AYM.js";
|
|
13
|
+
import "../chunk-IQFU7CM5.js";
|
|
14
|
+
import "../chunk-NZJCJJH5.js";
|
|
13
15
|
import "../chunk-LAMQKQU3.js";
|
|
14
|
-
import "../chunk-
|
|
15
|
-
import "../chunk-CLU2FRJZ.js";
|
|
16
|
+
import "../chunk-RFGKH3R6.js";
|
|
16
17
|
import "../chunk-2VBDEO6M.js";
|
|
17
18
|
import "../chunk-E4EXM4SY.js";
|
|
18
19
|
import "../chunk-JSGRNWSB.js";
|
|
20
|
+
import "../chunk-CLU2FRJZ.js";
|
|
19
21
|
import "../chunk-CIGAQ47A.js";
|
|
20
22
|
export {
|
|
21
23
|
Modal
|