@aivenio/aquarium 0.0.1 → 1.0.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/_variables.scss +2 -1
- package/dist/_variables_timescale.scss +2 -1
- package/dist/atoms.cjs +1 -0
- package/dist/atoms.mjs +1 -0
- package/dist/src/common/Section/Section.d.ts +14 -0
- package/dist/src/common/Section/Section.js +46 -0
- package/dist/src/common/Typography/Typography.d.ts +1 -1
- package/dist/src/components/Box/Box.d.ts +1 -1
- package/dist/src/components/DataTable/DataTable.js +7 -4
- package/dist/src/components/List/List.d.ts +1 -1
- package/dist/src/components/MultiInput/MultiInput.d.ts +2 -1
- package/dist/src/components/MultiInput/MultiInput.js +3 -3
- package/dist/src/components/Pagination/usePagination.d.ts +42 -0
- package/dist/src/components/Pagination/usePagination.js +34 -0
- package/dist/src/components/Section/Section.d.ts +13 -0
- package/dist/src/components/Section/Section.js +31 -0
- package/dist/src/components/index.d.ts +2 -1
- package/dist/src/components/index.js +3 -2
- package/dist/styles.css +12 -11
- package/dist/styles_timescaledb.css +12 -11
- package/dist/system.cjs +291 -341
- package/dist/system.mjs +286 -337
- package/dist/tailwind.config.js +1 -1
- package/dist/tailwind.theme.json +1 -0
- package/dist/tsconfig.module.tsbuildinfo +1 -1
- package/dist/types/tailwindGenerated.d.ts +1 -1
- package/package.json +2 -2
- package/dist/src/components/Positioner/Positioner.d.ts +0 -21
- package/dist/src/components/Positioner/Positioner.js +0 -97
package/dist/system.mjs
CHANGED
@@ -1297,7 +1297,6 @@ __export(components_exports, {
|
|
1297
1297
|
Popover: () => Popover2,
|
1298
1298
|
PopoverDialog: () => PopoverDialog2,
|
1299
1299
|
Portal: () => Portal,
|
1300
|
-
Positioner: () => Positioner,
|
1301
1300
|
PrimaryButton: () => PrimaryButton,
|
1302
1301
|
PrimaryDropdownButton: () => PrimaryDropdownButton,
|
1303
1302
|
ProgressBar: () => ProgressBar2,
|
@@ -1307,6 +1306,7 @@ __export(components_exports, {
|
|
1307
1306
|
SecondaryButton: () => SecondaryButton,
|
1308
1307
|
SecondaryDropdownButton: () => SecondaryDropdownButton,
|
1309
1308
|
SecondaryGhostButton: () => SecondaryGhostButton,
|
1309
|
+
Section: () => Section3,
|
1310
1310
|
SegmentedControl: () => SegmentedControl,
|
1311
1311
|
SegmentedControlGroup: () => SegmentedControlGroup,
|
1312
1312
|
Select: () => Select2,
|
@@ -1331,6 +1331,7 @@ __export(components_exports, {
|
|
1331
1331
|
asPopoverButton: () => asPopoverButton,
|
1332
1332
|
asTabItem: () => asTabItem,
|
1333
1333
|
createTabsComponent: () => createTabsComponent,
|
1334
|
+
usePagination: () => usePagination,
|
1334
1335
|
usePopoverContext: () => usePopoverContext,
|
1335
1336
|
useScrollTarget: () => useScrollTarget,
|
1336
1337
|
useTableSelect: () => useTableSelect,
|
@@ -1994,6 +1995,7 @@ var tailwind_theme_default = {
|
|
1994
1995
|
"grey-20": "#d2d2d6",
|
1995
1996
|
transparent: "transparent",
|
1996
1997
|
white: "white",
|
1998
|
+
black: "black",
|
1997
1999
|
current: "currentColor",
|
1998
2000
|
"navyBlue-100": "#30375E"
|
1999
2001
|
},
|
@@ -4508,27 +4510,31 @@ var DataTable = ({
|
|
4508
4510
|
key: column.headerName,
|
4509
4511
|
style: { width: column.width }
|
4510
4512
|
}, column.headerName)
|
4511
|
-
)), /* @__PURE__ */ React42.createElement(Table2.Body, null,
|
4512
|
-
|
4513
|
-
|
4514
|
-
|
4515
|
-
|
4516
|
-
|
4517
|
-
|
4518
|
-
|
4519
|
-
|
4520
|
-
|
4521
|
-
|
4522
|
-
|
4523
|
-
|
4524
|
-
|
4525
|
-
|
4526
|
-
|
4527
|
-
|
4528
|
-
|
4529
|
-
|
4530
|
-
|
4531
|
-
|
4513
|
+
)), /* @__PURE__ */ React42.createElement(Table2.Body, null, /* @__PURE__ */ React42.createElement(List, {
|
4514
|
+
items: orderBy2(rows, [sort?.key], [toSortDirection(sort?.direction)]),
|
4515
|
+
renderItem: (row) => /* @__PURE__ */ React42.createElement(Table2.Row, {
|
4516
|
+
key: row.id
|
4517
|
+
}, /* @__PURE__ */ React42.createElement(List, {
|
4518
|
+
items: columns,
|
4519
|
+
renderItem: (column, index) => isFieldColumn(column) ? /* @__PURE__ */ React42.createElement(Table2.Cell, {
|
4520
|
+
key: column.field,
|
4521
|
+
align: isNumberColumn(column) ? "right" : "left"
|
4522
|
+
}, row[column.field]) : isStatusColumn(column) ? /* @__PURE__ */ React42.createElement(Table2.Cell, {
|
4523
|
+
key: column.headerName
|
4524
|
+
}, /* @__PURE__ */ React42.createElement(StatusChip, {
|
4525
|
+
dense: true,
|
4526
|
+
...column.status(row, index, rows)
|
4527
|
+
})) : isActionColumn(column) ? /* @__PURE__ */ React42.createElement(Table2.Cell, {
|
4528
|
+
align: "right",
|
4529
|
+
key: column.headerName
|
4530
|
+
}, /* @__PURE__ */ React42.createElement(SecondaryButton, {
|
4531
|
+
dense: true,
|
4532
|
+
...renameProperty("text", "children", column.action(row, index, rows))
|
4533
|
+
})) : /* @__PURE__ */ React42.createElement(Table2.Cell, {
|
4534
|
+
key: column.headerName
|
4535
|
+
}, column.UNSAFE_render(row, index, rows))
|
4536
|
+
}))
|
4537
|
+
})));
|
4532
4538
|
};
|
4533
4539
|
|
4534
4540
|
// src/components/Dialog/Dialog.tsx
|
@@ -5835,6 +5841,7 @@ var MultiInputBase = ({
|
|
5835
5841
|
itemToString = (val) => String(val),
|
5836
5842
|
createItem = (val) => val,
|
5837
5843
|
onChange,
|
5844
|
+
onInputChange,
|
5838
5845
|
isItemValid,
|
5839
5846
|
disabled = false,
|
5840
5847
|
readOnly = false,
|
@@ -5937,6 +5944,7 @@ var MultiInputBase = ({
|
|
5937
5944
|
name,
|
5938
5945
|
type,
|
5939
5946
|
...props,
|
5947
|
+
onChange: onInputChange,
|
5940
5948
|
autoFocus,
|
5941
5949
|
disabled,
|
5942
5950
|
readOnly,
|
@@ -6696,264 +6704,13 @@ PopoverDialog2.Prompt = Prompt;
|
|
6696
6704
|
import { createPortal } from "react-dom";
|
6697
6705
|
var Portal = ({ children, to }) => createPortal(children, to);
|
6698
6706
|
|
6699
|
-
// src/components/Positioner/Positioner.tsx
|
6700
|
-
import React68 from "react";
|
6701
|
-
|
6702
|
-
// src/utils/positioner.ts
|
6703
|
-
import clamp2 from "lodash/clamp";
|
6704
|
-
var PositionerPlacement = /* @__PURE__ */ ((PositionerPlacement2) => {
|
6705
|
-
PositionerPlacement2["top"] = "top";
|
6706
|
-
PositionerPlacement2["left"] = "left";
|
6707
|
-
PositionerPlacement2["bottom"] = "bottom";
|
6708
|
-
PositionerPlacement2["right"] = "right";
|
6709
|
-
PositionerPlacement2["topLeft"] = "top-left";
|
6710
|
-
PositionerPlacement2["topRight"] = "top-right";
|
6711
|
-
PositionerPlacement2["bottomLeft"] = "bottom-left";
|
6712
|
-
PositionerPlacement2["bottomRight"] = "bottom-right";
|
6713
|
-
return PositionerPlacement2;
|
6714
|
-
})(PositionerPlacement || {});
|
6715
|
-
var placementOrder = [
|
6716
|
-
"top" /* top */,
|
6717
|
-
"top-left" /* topLeft */,
|
6718
|
-
"top-right" /* topRight */,
|
6719
|
-
"right" /* right */,
|
6720
|
-
"bottom" /* bottom */,
|
6721
|
-
"bottom-left" /* bottomLeft */,
|
6722
|
-
"bottom-right" /* bottomRight */,
|
6723
|
-
"left" /* left */
|
6724
|
-
];
|
6725
|
-
var POSITIONER_MOUNT_ELEMENT_ID = "positioner-root";
|
6726
|
-
function createMountPointElement() {
|
6727
|
-
const mountElement = document.createElement("div");
|
6728
|
-
mountElement.id = POSITIONER_MOUNT_ELEMENT_ID;
|
6729
|
-
return mountElement;
|
6730
|
-
}
|
6731
|
-
function calcBottomPosition(triggerRect, contentRect, padding) {
|
6732
|
-
return {
|
6733
|
-
x: triggerRect.left - (contentRect.width / 2 - triggerRect.width / 2),
|
6734
|
-
y: triggerRect.top + triggerRect.height + padding
|
6735
|
-
};
|
6736
|
-
}
|
6737
|
-
function calcTopPosition(triggerRect, contentRect, padding) {
|
6738
|
-
return {
|
6739
|
-
x: triggerRect.left - (contentRect.width / 2 - triggerRect.width / 2),
|
6740
|
-
y: triggerRect.top - contentRect.height - padding
|
6741
|
-
};
|
6742
|
-
}
|
6743
|
-
function calcLeftPosition(triggerRect, contentRect, padding) {
|
6744
|
-
return {
|
6745
|
-
x: triggerRect.left - contentRect.width - padding,
|
6746
|
-
y: triggerRect.top - (contentRect.height / 2 - triggerRect.height / 2)
|
6747
|
-
};
|
6748
|
-
}
|
6749
|
-
function calcRightPosition(triggerRect, contentRect, padding) {
|
6750
|
-
return {
|
6751
|
-
x: triggerRect.left + triggerRect.width + padding,
|
6752
|
-
y: triggerRect.top - (contentRect.height / 2 - triggerRect.height / 2)
|
6753
|
-
};
|
6754
|
-
}
|
6755
|
-
function calcBottomLeftPosition(triggerRect, contentRect, padding) {
|
6756
|
-
return {
|
6757
|
-
x: triggerRect.left - contentRect.width - padding,
|
6758
|
-
y: triggerRect.top + triggerRect.height + padding
|
6759
|
-
};
|
6760
|
-
}
|
6761
|
-
function calcBottomRightPosition(triggerRect, contentRect, padding) {
|
6762
|
-
return {
|
6763
|
-
x: triggerRect.left + triggerRect.width + padding,
|
6764
|
-
y: triggerRect.top + triggerRect.height + padding
|
6765
|
-
};
|
6766
|
-
}
|
6767
|
-
function calcTopLeftPosition(triggerRect, contentRect, padding) {
|
6768
|
-
return {
|
6769
|
-
x: triggerRect.left - contentRect.width - padding,
|
6770
|
-
y: triggerRect.top - contentRect.height - padding
|
6771
|
-
};
|
6772
|
-
}
|
6773
|
-
function calcTopRightPosition(triggerRect, contentRect, padding) {
|
6774
|
-
return {
|
6775
|
-
x: triggerRect.left + triggerRect.width + padding,
|
6776
|
-
y: triggerRect.top - contentRect.height - padding
|
6777
|
-
};
|
6778
|
-
}
|
6779
|
-
var positionCalcFuncs = {
|
6780
|
-
["top" /* top */]: calcTopPosition,
|
6781
|
-
["top-left" /* topLeft */]: calcTopLeftPosition,
|
6782
|
-
["top-right" /* topRight */]: calcTopRightPosition,
|
6783
|
-
["bottom" /* bottom */]: calcBottomPosition,
|
6784
|
-
["bottom-left" /* bottomLeft */]: calcBottomLeftPosition,
|
6785
|
-
["bottom-right" /* bottomRight */]: calcBottomRightPosition,
|
6786
|
-
["left" /* left */]: calcLeftPosition,
|
6787
|
-
["right" /* right */]: calcRightPosition
|
6788
|
-
};
|
6789
|
-
function isOutOfBounds(position) {
|
6790
|
-
return position.x < 0 || position.x > window.innerWidth;
|
6791
|
-
}
|
6792
|
-
function calcPosition(triggerRect, contentRect, placement, padding) {
|
6793
|
-
return positionCalcFuncs[placement](triggerRect, contentRect, padding);
|
6794
|
-
}
|
6795
|
-
function calcBestPosition(triggerRect, contentRect, placement, padding) {
|
6796
|
-
let attempts = 0;
|
6797
|
-
return function _calcBestPosition(triggerRect2, contentRect2, placement2, padding2) {
|
6798
|
-
attempts++;
|
6799
|
-
const position = calcPosition(triggerRect2, contentRect2, placement2, padding2);
|
6800
|
-
const hasAttemptsLeft = attempts < placementOrder.length;
|
6801
|
-
if (isOutOfBounds(position) && hasAttemptsLeft) {
|
6802
|
-
const nextPlacementAttempt = placementOrder[placementOrder.findIndex((p) => placement2 === p) + 1] || placementOrder[0];
|
6803
|
-
return _calcBestPosition(triggerRect2, contentRect2, nextPlacementAttempt, padding2);
|
6804
|
-
} else {
|
6805
|
-
return {
|
6806
|
-
x: clamp2(position.x + window.scrollX, 0, window.innerWidth),
|
6807
|
-
y: position.y + window.scrollY
|
6808
|
-
};
|
6809
|
-
}
|
6810
|
-
}(triggerRect, contentRect, placement, padding);
|
6811
|
-
}
|
6812
|
-
|
6813
|
-
// src/components/Positioner/Positioner.tsx
|
6814
|
-
var Positioner = ({
|
6815
|
-
children,
|
6816
|
-
content,
|
6817
|
-
autoAdjust = false,
|
6818
|
-
animate = false,
|
6819
|
-
trigger = "click",
|
6820
|
-
placement = "bottom" /* bottom */,
|
6821
|
-
onClose,
|
6822
|
-
padding = 5,
|
6823
|
-
allowClosingManually = false,
|
6824
|
-
stayVisibleOnHover = false,
|
6825
|
-
fullWidth = false,
|
6826
|
-
tabIndex = 0
|
6827
|
-
}) => {
|
6828
|
-
const [isOpen, setOpen] = React68.useState(false);
|
6829
|
-
const triggerRef = React68.useRef(null);
|
6830
|
-
const timeoutId = React68.useRef();
|
6831
|
-
React68.useEffect(() => {
|
6832
|
-
return () => {
|
6833
|
-
timeoutId.current && clearTimeout(timeoutId.current);
|
6834
|
-
window.document.body.removeEventListener("mouseover", handleMouseOver);
|
6835
|
-
};
|
6836
|
-
}, []);
|
6837
|
-
const handleTriggerKeyDown = (event) => event.key === "Enter" && showContent(!isOpen);
|
6838
|
-
const handleTriggerClick = () => {
|
6839
|
-
showContent(!isOpen);
|
6840
|
-
};
|
6841
|
-
const handleMouseOver = (event) => {
|
6842
|
-
if (!triggerRef.current?.contains(event.target)) {
|
6843
|
-
showContent(false);
|
6844
|
-
window.document.body.removeEventListener("mouseover", handleMouseOver);
|
6845
|
-
}
|
6846
|
-
};
|
6847
|
-
const showContent = (value, shouldDelay = false) => {
|
6848
|
-
timeoutId.current && clearTimeout(timeoutId.current);
|
6849
|
-
shouldDelay ? timeoutId.current = setTimeout(() => setOpen(value), 300) : setOpen(value);
|
6850
|
-
if (!value) {
|
6851
|
-
onClose?.({ triggerRef });
|
6852
|
-
}
|
6853
|
-
};
|
6854
|
-
const handleTriggerMouseEnter = () => {
|
6855
|
-
if (!stayVisibleOnHover) {
|
6856
|
-
window.document.body.addEventListener("mouseover", handleMouseOver);
|
6857
|
-
}
|
6858
|
-
showContent(true, true);
|
6859
|
-
};
|
6860
|
-
const handleTriggerMouseLeave = () => showContent(false, stayVisibleOnHover);
|
6861
|
-
const handleOutsideClick = React68.useCallback((event) => {
|
6862
|
-
const { target } = event;
|
6863
|
-
if (target !== window && !triggerRef?.current?.contains(target)) {
|
6864
|
-
showContent(false);
|
6865
|
-
}
|
6866
|
-
}, []);
|
6867
|
-
const handleESCPress = React68.useCallback(() => showContent(false), []);
|
6868
|
-
const handleSetOpen = React68.useCallback((value) => showContent(value), []);
|
6869
|
-
return /* @__PURE__ */ React68.createElement("div", {
|
6870
|
-
className: tw("inline-block", {
|
6871
|
-
"w-full": fullWidth
|
6872
|
-
}),
|
6873
|
-
ref: triggerRef,
|
6874
|
-
onClick: trigger === "click" ? handleTriggerClick : void 0,
|
6875
|
-
onKeyDown: handleTriggerKeyDown,
|
6876
|
-
onMouseEnter: trigger === "hover" ? handleTriggerMouseEnter : void 0,
|
6877
|
-
onMouseLeave: stayVisibleOnHover ? handleTriggerMouseLeave : void 0,
|
6878
|
-
tabIndex,
|
6879
|
-
"data-testid": "positioner",
|
6880
|
-
id: content.props.triggerId,
|
6881
|
-
"aria-haspopup": isOpen,
|
6882
|
-
"aria-expanded": isOpen,
|
6883
|
-
"aria-controls": content.props.contentId
|
6884
|
-
}, children, isOpen && /* @__PURE__ */ React68.createElement(Positioned, {
|
6885
|
-
triggerRect: triggerRef.current?.getBoundingClientRect() || { x: 0, y: 0 },
|
6886
|
-
animate,
|
6887
|
-
autoAdjust,
|
6888
|
-
onOutsideClick: handleOutsideClick,
|
6889
|
-
onESCPress: handleESCPress,
|
6890
|
-
placement,
|
6891
|
-
padding,
|
6892
|
-
setOpen: handleSetOpen,
|
6893
|
-
stayVisibleOnHover
|
6894
|
-
}, allowClosingManually ? React68.cloneElement(content, { setClose: () => showContent(false) }) : content));
|
6895
|
-
};
|
6896
|
-
var Positioned = ({
|
6897
|
-
children,
|
6898
|
-
onOutsideClick,
|
6899
|
-
onESCPress,
|
6900
|
-
autoAdjust = false,
|
6901
|
-
animate = false,
|
6902
|
-
triggerRect,
|
6903
|
-
placement = "bottom" /* bottom */,
|
6904
|
-
padding = 5,
|
6905
|
-
setOpen = () => void 0,
|
6906
|
-
stayVisibleOnHover = false
|
6907
|
-
}) => {
|
6908
|
-
const [position, setPosition] = React68.useState({ x: 0, y: 0 });
|
6909
|
-
const contentRef = React68.useRef(null);
|
6910
|
-
const mountElementRef = React68.useRef(createMountPointElement());
|
6911
|
-
const handleBodyClick = (event) => !contentRef.current?.contains(event.target) && onOutsideClick(event);
|
6912
|
-
const handleWindowKeyUp = (event) => event.key === "Escape" && onESCPress();
|
6913
|
-
const handleSetOpen = (event, value) => {
|
6914
|
-
event.stopPropagation();
|
6915
|
-
setOpen(value);
|
6916
|
-
};
|
6917
|
-
React68.useEffect(() => {
|
6918
|
-
window.document.body.addEventListener("click", handleBodyClick);
|
6919
|
-
window.addEventListener("keyup", handleWindowKeyUp);
|
6920
|
-
document.body.appendChild(mountElementRef.current);
|
6921
|
-
if (contentRef.current) {
|
6922
|
-
setPosition(
|
6923
|
-
autoAdjust ? calcBestPosition(triggerRect, contentRef.current.getBoundingClientRect(), placement, padding) : calcPosition(triggerRect, contentRef.current.getBoundingClientRect(), placement, padding)
|
6924
|
-
);
|
6925
|
-
}
|
6926
|
-
return () => {
|
6927
|
-
document.body.removeChild(mountElementRef.current);
|
6928
|
-
window.document.body.removeEventListener("click", handleBodyClick);
|
6929
|
-
window.removeEventListener("keyup", handleWindowKeyUp);
|
6930
|
-
};
|
6931
|
-
}, []);
|
6932
|
-
return /* @__PURE__ */ React68.createElement(Portal, {
|
6933
|
-
to: mountElementRef.current
|
6934
|
-
}, /* @__PURE__ */ React68.createElement("div", {
|
6935
|
-
tabIndex: -1,
|
6936
|
-
onClick: (event) => event.stopPropagation(),
|
6937
|
-
ref: contentRef,
|
6938
|
-
style: {
|
6939
|
-
transform: `translate(${position.x}px, ${position.y}px)`
|
6940
|
-
},
|
6941
|
-
className: tw("absolute top-0 left-0", {
|
6942
|
-
"animate-positioner-fade-in": animate
|
6943
|
-
}),
|
6944
|
-
"data-testid": "positioned",
|
6945
|
-
...stayVisibleOnHover && { onMouseEnter: (e) => handleSetOpen(e, true) },
|
6946
|
-
...stayVisibleOnHover && { onMouseLeave: (e) => handleSetOpen(e, false) }
|
6947
|
-
}, children));
|
6948
|
-
};
|
6949
|
-
|
6950
6707
|
// src/components/ProgressBar/ProgressBar.tsx
|
6951
|
-
import
|
6708
|
+
import React69 from "react";
|
6952
6709
|
|
6953
6710
|
// src/common/ProgressBar/ProgressBar.tsx
|
6954
|
-
import
|
6955
|
-
import
|
6956
|
-
var ProgressBar = ({ children, className, ...rest }) => /* @__PURE__ */
|
6711
|
+
import React68 from "react";
|
6712
|
+
import clamp2 from "lodash/clamp";
|
6713
|
+
var ProgressBar = ({ children, className, ...rest }) => /* @__PURE__ */ React68.createElement("div", {
|
6957
6714
|
...rest,
|
6958
6715
|
className: classNames(
|
6959
6716
|
tw("relative flex items-center w-full bg-grey-0 h-2 rounded-full overflow-hidden"),
|
@@ -6967,8 +6724,8 @@ var STATUS_COLORS = {
|
|
6967
6724
|
error: tw("bg-error-70")
|
6968
6725
|
};
|
6969
6726
|
ProgressBar.Indicator = ({ min, max, value, "aria-label": ariaLabel, status, className, ...rest }) => {
|
6970
|
-
const completedPercentage =
|
6971
|
-
return /* @__PURE__ */
|
6727
|
+
const completedPercentage = clamp2((value - min) / (max - min) * 100, 0, 100);
|
6728
|
+
return /* @__PURE__ */ React68.createElement("div", {
|
6972
6729
|
...rest,
|
6973
6730
|
className: classNames(
|
6974
6731
|
tw("h-2 rounded-full transition-all ease-in-out delay-150"),
|
@@ -6983,12 +6740,12 @@ ProgressBar.Indicator = ({ min, max, value, "aria-label": ariaLabel, status, cla
|
|
6983
6740
|
"aria-valuemax": max
|
6984
6741
|
});
|
6985
6742
|
};
|
6986
|
-
ProgressBar.Labels = ({ children, startLabel, endLabel, className, ...rest }) => /* @__PURE__ */
|
6743
|
+
ProgressBar.Labels = ({ children, startLabel, endLabel, className, ...rest }) => /* @__PURE__ */ React68.createElement("div", {
|
6987
6744
|
className: classNames(tw("flex flex-row"), className)
|
6988
|
-
}, /* @__PURE__ */
|
6745
|
+
}, /* @__PURE__ */ React68.createElement("span", {
|
6989
6746
|
...rest,
|
6990
6747
|
className: tw("grow text-grey-70 typography-caption-default")
|
6991
|
-
}, startLabel), /* @__PURE__ */
|
6748
|
+
}, startLabel), /* @__PURE__ */ React68.createElement("span", {
|
6992
6749
|
...rest,
|
6993
6750
|
className: tw("grow text-grey-70 typography-caption-default text-right")
|
6994
6751
|
}, endLabel));
|
@@ -7006,7 +6763,7 @@ var ProgressBar2 = (props) => {
|
|
7006
6763
|
if (min > max) {
|
7007
6764
|
throw new Error("`min` value provided to `ProgressBar` is greater than `max` value.");
|
7008
6765
|
}
|
7009
|
-
const progress = /* @__PURE__ */
|
6766
|
+
const progress = /* @__PURE__ */ React69.createElement(ProgressBar, null, /* @__PURE__ */ React69.createElement(ProgressBar.Indicator, {
|
7010
6767
|
status: value === max ? completedStatus : progresStatus,
|
7011
6768
|
min,
|
7012
6769
|
max,
|
@@ -7016,20 +6773,20 @@ var ProgressBar2 = (props) => {
|
|
7016
6773
|
if (props.dense) {
|
7017
6774
|
return progress;
|
7018
6775
|
}
|
7019
|
-
return /* @__PURE__ */
|
6776
|
+
return /* @__PURE__ */ React69.createElement("div", null, progress, /* @__PURE__ */ React69.createElement(ProgressBar.Labels, {
|
7020
6777
|
className: tw("py-2"),
|
7021
6778
|
startLabel: props.startLabel,
|
7022
6779
|
endLabel: props.endLabel
|
7023
6780
|
}));
|
7024
6781
|
};
|
7025
|
-
ProgressBar2.Skeleton = () => /* @__PURE__ */
|
6782
|
+
ProgressBar2.Skeleton = () => /* @__PURE__ */ React69.createElement(Skeleton, {
|
7026
6783
|
height: 4,
|
7027
6784
|
display: "block"
|
7028
6785
|
});
|
7029
6786
|
|
7030
6787
|
// src/components/RadioButton/RadioButton.tsx
|
7031
|
-
import
|
7032
|
-
var RadioButton2 =
|
6788
|
+
import React70 from "react";
|
6789
|
+
var RadioButton2 = React70.forwardRef(
|
7033
6790
|
({
|
7034
6791
|
name,
|
7035
6792
|
id,
|
@@ -7043,11 +6800,11 @@ var RadioButton2 = React71.forwardRef(
|
|
7043
6800
|
"aria-label": ariaLabel,
|
7044
6801
|
...props
|
7045
6802
|
}, ref) => {
|
7046
|
-
const [checked, setChecked] =
|
6803
|
+
const [checked, setChecked] = React70.useState(_checked ?? defaultChecked ?? false);
|
7047
6804
|
if (_checked !== void 0 && checked !== _checked) {
|
7048
6805
|
setChecked(_checked);
|
7049
6806
|
}
|
7050
|
-
return !readOnly || checked ? /* @__PURE__ */
|
6807
|
+
return !readOnly || checked ? /* @__PURE__ */ React70.createElement(ControlLabel, {
|
7051
6808
|
htmlFor: id,
|
7052
6809
|
label: children,
|
7053
6810
|
"aria-label": ariaLabel,
|
@@ -7055,7 +6812,7 @@ var RadioButton2 = React71.forwardRef(
|
|
7055
6812
|
readOnly,
|
7056
6813
|
disabled,
|
7057
6814
|
style: { gap: "0 8px" }
|
7058
|
-
}, !readOnly && /* @__PURE__ */
|
6815
|
+
}, !readOnly && /* @__PURE__ */ React70.createElement(RadioButton, {
|
7059
6816
|
id,
|
7060
6817
|
ref,
|
7061
6818
|
name,
|
@@ -7070,22 +6827,22 @@ var RadioButton2 = React71.forwardRef(
|
|
7070
6827
|
})) : null;
|
7071
6828
|
}
|
7072
6829
|
);
|
7073
|
-
var RadioButtonSkeleton = () => /* @__PURE__ */
|
6830
|
+
var RadioButtonSkeleton = () => /* @__PURE__ */ React70.createElement("div", {
|
7074
6831
|
className: tw("flex gap-3")
|
7075
|
-
}, /* @__PURE__ */
|
6832
|
+
}, /* @__PURE__ */ React70.createElement(Skeleton, {
|
7076
6833
|
height: 20,
|
7077
6834
|
width: 20
|
7078
|
-
}), /* @__PURE__ */
|
6835
|
+
}), /* @__PURE__ */ React70.createElement(Skeleton, {
|
7079
6836
|
height: 20,
|
7080
6837
|
width: 150
|
7081
6838
|
}));
|
7082
6839
|
RadioButton2.Skeleton = RadioButtonSkeleton;
|
7083
6840
|
|
7084
6841
|
// src/components/RadioButtonGroup/RadioButtonGroup.tsx
|
7085
|
-
import
|
6842
|
+
import React71 from "react";
|
7086
6843
|
import uniqueId8 from "lodash/uniqueId";
|
7087
6844
|
var isRadioButton = (c) => {
|
7088
|
-
return
|
6845
|
+
return React71.isValidElement(c) && c.type === RadioButton2;
|
7089
6846
|
};
|
7090
6847
|
var RadioButtonGroup = ({
|
7091
6848
|
name,
|
@@ -7098,7 +6855,7 @@ var RadioButtonGroup = ({
|
|
7098
6855
|
children,
|
7099
6856
|
...props
|
7100
6857
|
}) => {
|
7101
|
-
const [value, setValue] =
|
6858
|
+
const [value, setValue] = React71.useState(_value ?? defaultValue ?? "");
|
7102
6859
|
const errorMessageId = uniqueId8();
|
7103
6860
|
const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
|
7104
6861
|
const labelControlProps = getLabelControlProps(props);
|
@@ -7109,13 +6866,13 @@ var RadioButtonGroup = ({
|
|
7109
6866
|
setValue(e.target.value);
|
7110
6867
|
onChange?.(e.target.value);
|
7111
6868
|
};
|
7112
|
-
const content =
|
6869
|
+
const content = React71.Children.map(children, (c) => {
|
7113
6870
|
if (!isRadioButton(c)) {
|
7114
6871
|
return null;
|
7115
6872
|
}
|
7116
6873
|
const defaultChecked = defaultValue === void 0 ? void 0 : c.props.value === defaultValue;
|
7117
6874
|
const checked = value === void 0 ? void 0 : c.props.value === value;
|
7118
|
-
return
|
6875
|
+
return React71.cloneElement(c, {
|
7119
6876
|
name,
|
7120
6877
|
defaultChecked: c.props.defaultChecked ?? defaultChecked,
|
7121
6878
|
checked: c.props.checked ?? checked,
|
@@ -7124,13 +6881,13 @@ var RadioButtonGroup = ({
|
|
7124
6881
|
readOnly
|
7125
6882
|
});
|
7126
6883
|
});
|
7127
|
-
return /* @__PURE__ */
|
6884
|
+
return /* @__PURE__ */ React71.createElement(LabelControl, {
|
7128
6885
|
fieldset: true,
|
7129
6886
|
...labelControlProps,
|
7130
6887
|
...errorProps
|
7131
|
-
}, cols && /* @__PURE__ */
|
6888
|
+
}, cols && /* @__PURE__ */ React71.createElement(InputGroup, {
|
7132
6889
|
cols
|
7133
|
-
}, content), !cols && /* @__PURE__ */
|
6890
|
+
}, content), !cols && /* @__PURE__ */ React71.createElement(Flexbox, {
|
7134
6891
|
direction,
|
7135
6892
|
alignItems: "flex-start",
|
7136
6893
|
colGap: "8",
|
@@ -7139,19 +6896,64 @@ var RadioButtonGroup = ({
|
|
7139
6896
|
}, content));
|
7140
6897
|
};
|
7141
6898
|
var RadioButtonGroupSkeleton = ({ direction = "row", options = 2 }) => {
|
7142
|
-
return /* @__PURE__ */
|
6899
|
+
return /* @__PURE__ */ React71.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React71.createElement("div", {
|
7143
6900
|
className: tw("flex flex-wrap", {
|
7144
6901
|
"flex-row gap-8": direction === "row",
|
7145
6902
|
"flex-col gap-2": direction === "column"
|
7146
6903
|
})
|
7147
|
-
}, Array.from({ length: options }).map((_, key) => /* @__PURE__ */
|
6904
|
+
}, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ React71.createElement(RadioButton2.Skeleton, {
|
7148
6905
|
key
|
7149
6906
|
}))));
|
7150
6907
|
};
|
7151
6908
|
RadioButtonGroup.Skeleton = RadioButtonGroupSkeleton;
|
7152
6909
|
|
7153
|
-
// src/components/
|
6910
|
+
// src/components/Section/Section.tsx
|
7154
6911
|
import React73 from "react";
|
6912
|
+
|
6913
|
+
// src/common/Section/Section.tsx
|
6914
|
+
import React72 from "react";
|
6915
|
+
var Section2 = ({ children, ...rest }) => /* @__PURE__ */ React72.createElement(Box, {
|
6916
|
+
borderColor: "grey-5",
|
6917
|
+
borderWidth: "1px",
|
6918
|
+
...rest
|
6919
|
+
}, children);
|
6920
|
+
Section2.Header = ({ children, className, ...rest }) => /* @__PURE__ */ React72.createElement("div", {
|
6921
|
+
...rest,
|
6922
|
+
className: classNames(tw("px-6 py-5 flex gap-5 justify-between items-center"), className)
|
6923
|
+
}, children);
|
6924
|
+
Section2.TitleContainer = ({ children, className, ...rest }) => /* @__PURE__ */ React72.createElement("div", {
|
6925
|
+
...rest,
|
6926
|
+
className: classNames(tw("flex flex-col grow gap-2"), className)
|
6927
|
+
}, children);
|
6928
|
+
Section2.Title = ({ children, ...rest }) => /* @__PURE__ */ React72.createElement(Typography2.Subheading, {
|
6929
|
+
...rest,
|
6930
|
+
color: "black"
|
6931
|
+
}, children);
|
6932
|
+
Section2.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ React72.createElement(Typography2.SmallText, {
|
6933
|
+
...rest,
|
6934
|
+
color: "grey-70"
|
6935
|
+
}, children);
|
6936
|
+
Section2.Actions = ({ children, className, ...rest }) => /* @__PURE__ */ React72.createElement("div", {
|
6937
|
+
...rest,
|
6938
|
+
className: classNames(tw("flex gap-4 justify-end"), className)
|
6939
|
+
}, children);
|
6940
|
+
Section2.Body = ({ children, className, ...rest }) => /* @__PURE__ */ React72.createElement("div", {
|
6941
|
+
...rest,
|
6942
|
+
className: classNames(tw("p-6"), className)
|
6943
|
+
}, /* @__PURE__ */ React72.createElement(Typography, {
|
6944
|
+
htmlTag: "div",
|
6945
|
+
color: "grey-70"
|
6946
|
+
}, children));
|
6947
|
+
|
6948
|
+
// src/components/Section/Section.tsx
|
6949
|
+
import castArray4 from "lodash/castArray";
|
6950
|
+
var Section3 = ({ title, subtitle, actions, children }) => /* @__PURE__ */ React73.createElement(Section2, null, /* @__PURE__ */ React73.createElement(Section2.Header, null, /* @__PURE__ */ React73.createElement(Section2.TitleContainer, null, /* @__PURE__ */ React73.createElement(Section2.Title, null, title), /* @__PURE__ */ React73.createElement(Section2.Subtitle, null, subtitle)), /* @__PURE__ */ React73.createElement(Section2.Actions, null, actions && castArray4(actions).filter(Boolean).map(({ text, ...action }) => /* @__PURE__ */ React73.createElement(SecondaryButton, {
|
6951
|
+
key: text,
|
6952
|
+
...action
|
6953
|
+
}, text)))), /* @__PURE__ */ React73.createElement(Divider2, null), /* @__PURE__ */ React73.createElement(Section2.Body, null, children));
|
6954
|
+
|
6955
|
+
// src/components/SegmentedControl/SegmentedControl.tsx
|
6956
|
+
import React74 from "react";
|
7155
6957
|
var SegmentedControl = ({
|
7156
6958
|
children,
|
7157
6959
|
value,
|
@@ -7160,7 +6962,7 @@ var SegmentedControl = ({
|
|
7160
6962
|
selected = false,
|
7161
6963
|
className,
|
7162
6964
|
...rest
|
7163
|
-
}) => /* @__PURE__ */
|
6965
|
+
}) => /* @__PURE__ */ React74.createElement("button", {
|
7164
6966
|
type: "button",
|
7165
6967
|
...rest,
|
7166
6968
|
className: classNames(
|
@@ -7183,12 +6985,12 @@ var SegmentedControlGroup = ({
|
|
7183
6985
|
"border border-grey-20 text-grey-50": variant === "outlined",
|
7184
6986
|
"bg-grey-0": variant === "raised"
|
7185
6987
|
});
|
7186
|
-
return /* @__PURE__ */
|
6988
|
+
return /* @__PURE__ */ React74.createElement("div", {
|
7187
6989
|
...rest,
|
7188
6990
|
className: classNames(classes, className)
|
7189
|
-
},
|
6991
|
+
}, React74.Children.map(
|
7190
6992
|
children,
|
7191
|
-
(child) =>
|
6993
|
+
(child) => React74.cloneElement(child, {
|
7192
6994
|
dense,
|
7193
6995
|
variant,
|
7194
6996
|
onClick: () => onChange(child.props.value),
|
@@ -7226,8 +7028,8 @@ var getCommonClassNames = (dense, selected) => tw(
|
|
7226
7028
|
);
|
7227
7029
|
|
7228
7030
|
// src/components/Switch/Switch.tsx
|
7229
|
-
import
|
7230
|
-
var Switch =
|
7031
|
+
import React75 from "react";
|
7032
|
+
var Switch = React75.forwardRef(
|
7231
7033
|
({
|
7232
7034
|
id,
|
7233
7035
|
name,
|
@@ -7241,11 +7043,11 @@ var Switch = React74.forwardRef(
|
|
7241
7043
|
"aria-label": ariaLabel,
|
7242
7044
|
...props
|
7243
7045
|
}, ref) => {
|
7244
|
-
const [checked, setChecked] =
|
7046
|
+
const [checked, setChecked] = React75.useState(_checked ?? defaultChecked ?? false);
|
7245
7047
|
if (_checked !== void 0 && checked !== _checked) {
|
7246
7048
|
setChecked(_checked);
|
7247
7049
|
}
|
7248
|
-
return !readOnly || checked ? /* @__PURE__ */
|
7050
|
+
return !readOnly || checked ? /* @__PURE__ */ React75.createElement(ControlLabel, {
|
7249
7051
|
htmlFor: id,
|
7250
7052
|
label: children,
|
7251
7053
|
"aria-label": ariaLabel,
|
@@ -7253,7 +7055,7 @@ var Switch = React74.forwardRef(
|
|
7253
7055
|
readOnly,
|
7254
7056
|
disabled,
|
7255
7057
|
style: { gap: "0 8px" }
|
7256
|
-
}, !readOnly && /* @__PURE__ */
|
7058
|
+
}, !readOnly && /* @__PURE__ */ React75.createElement(Box, {
|
7257
7059
|
component: "span",
|
7258
7060
|
display: "inline-flex",
|
7259
7061
|
justifyContent: "center",
|
@@ -7264,7 +7066,7 @@ var Switch = React74.forwardRef(
|
|
7264
7066
|
"text-grey-100 cursor-pointer": !disabled
|
7265
7067
|
})
|
7266
7068
|
)
|
7267
|
-
}, /* @__PURE__ */
|
7069
|
+
}, /* @__PURE__ */ React75.createElement("input", {
|
7268
7070
|
id,
|
7269
7071
|
ref,
|
7270
7072
|
type: "checkbox",
|
@@ -7278,7 +7080,7 @@ var Switch = React74.forwardRef(
|
|
7278
7080
|
className: tw("appearance-none peer"),
|
7279
7081
|
readOnly,
|
7280
7082
|
disabled
|
7281
|
-
}), /* @__PURE__ */
|
7083
|
+
}), /* @__PURE__ */ React75.createElement("span", {
|
7282
7084
|
className: tw(
|
7283
7085
|
"rounded-full inline-block w-[34px] h-[20px] transition duration-300 peer-focus:border border-info-70",
|
7284
7086
|
{
|
@@ -7288,7 +7090,7 @@ var Switch = React74.forwardRef(
|
|
7288
7090
|
"opacity-40": disabled && checked
|
7289
7091
|
}
|
7290
7092
|
)
|
7291
|
-
}), /* @__PURE__ */
|
7093
|
+
}), /* @__PURE__ */ React75.createElement("span", {
|
7292
7094
|
style: {
|
7293
7095
|
right: checked ? "20px" : void 0,
|
7294
7096
|
left: checked ? void 0 : "4px"
|
@@ -7301,19 +7103,19 @@ var Switch = React74.forwardRef(
|
|
7301
7103
|
}))) : null;
|
7302
7104
|
}
|
7303
7105
|
);
|
7304
|
-
var SwitchSkeleton = () => /* @__PURE__ */
|
7106
|
+
var SwitchSkeleton = () => /* @__PURE__ */ React75.createElement("div", {
|
7305
7107
|
className: tw("flex gap-3")
|
7306
|
-
}, /* @__PURE__ */
|
7108
|
+
}, /* @__PURE__ */ React75.createElement(Skeleton, {
|
7307
7109
|
height: 20,
|
7308
7110
|
width: 35
|
7309
|
-
}), /* @__PURE__ */
|
7111
|
+
}), /* @__PURE__ */ React75.createElement(Skeleton, {
|
7310
7112
|
height: 20,
|
7311
7113
|
width: 150
|
7312
7114
|
}));
|
7313
7115
|
Switch.Skeleton = SwitchSkeleton;
|
7314
7116
|
|
7315
7117
|
// src/components/SwitchGroup/SwitchGroup.tsx
|
7316
|
-
import
|
7118
|
+
import React76, { useState as useState10 } from "react";
|
7317
7119
|
import uniqueId9 from "lodash/uniqueId";
|
7318
7120
|
var SwitchGroup = ({
|
7319
7121
|
value,
|
@@ -7337,20 +7139,20 @@ var SwitchGroup = ({
|
|
7337
7139
|
setSelectedItems(updated);
|
7338
7140
|
onChange?.(updated);
|
7339
7141
|
};
|
7340
|
-
return /* @__PURE__ */
|
7142
|
+
return /* @__PURE__ */ React76.createElement(LabelControl, {
|
7341
7143
|
fieldset: true,
|
7342
7144
|
...labelControlProps,
|
7343
7145
|
...errorProps
|
7344
|
-
}, /* @__PURE__ */
|
7146
|
+
}, /* @__PURE__ */ React76.createElement(InputGroup, {
|
7345
7147
|
cols
|
7346
|
-
},
|
7148
|
+
}, React76.Children.map(children, (c) => {
|
7347
7149
|
if (!isComponentType(c, Switch)) {
|
7348
7150
|
return null;
|
7349
7151
|
}
|
7350
7152
|
const str = c.props.value?.toString();
|
7351
7153
|
const defaultChecked = defaultValue === void 0 ? void 0 : str !== void 0 && defaultValue.includes(str);
|
7352
7154
|
const checked = value === void 0 ? void 0 : str !== void 0 && value.includes(str);
|
7353
|
-
return
|
7155
|
+
return React76.cloneElement(c, {
|
7354
7156
|
defaultChecked: c.props.defaultChecked ?? defaultChecked,
|
7355
7157
|
checked: c.props.checked ?? checked,
|
7356
7158
|
onChange: c.props.onChange ?? handleChange,
|
@@ -7360,17 +7162,17 @@ var SwitchGroup = ({
|
|
7360
7162
|
})));
|
7361
7163
|
};
|
7362
7164
|
var SwitchGroupSkeleton = ({ options = 2 }) => {
|
7363
|
-
return /* @__PURE__ */
|
7165
|
+
return /* @__PURE__ */ React76.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React76.createElement("div", {
|
7364
7166
|
className: tw("flex flex-wrap flex-col gap-2")
|
7365
|
-
}, Array.from({ length: options }).map((_, key) => /* @__PURE__ */
|
7167
|
+
}, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ React76.createElement(Switch.Skeleton, {
|
7366
7168
|
key
|
7367
7169
|
}))));
|
7368
7170
|
};
|
7369
7171
|
SwitchGroup.Skeleton = SwitchGroupSkeleton;
|
7370
7172
|
|
7371
7173
|
// src/components/TagLabel/TagLabel.tsx
|
7372
|
-
import
|
7373
|
-
var TagLabel = ({ title, dense = false, ...rest }) => /* @__PURE__ */
|
7174
|
+
import React77 from "react";
|
7175
|
+
var TagLabel = ({ title, dense = false, ...rest }) => /* @__PURE__ */ React77.createElement("span", {
|
7374
7176
|
...rest,
|
7375
7177
|
className: tw("rounded-full text-white bg-primary-70", {
|
7376
7178
|
"py-2 px-4 typography-caption-default": !dense,
|
@@ -7379,35 +7181,35 @@ var TagLabel = ({ title, dense = false, ...rest }) => /* @__PURE__ */ React76.cr
|
|
7379
7181
|
}, title);
|
7380
7182
|
|
7381
7183
|
// src/components/Textarea/Textarea.tsx
|
7382
|
-
import
|
7184
|
+
import React78, { useRef as useRef10, useState as useState11 } from "react";
|
7383
7185
|
import uniqueId10 from "lodash/uniqueId";
|
7384
7186
|
import toString2 from "lodash/toString";
|
7385
7187
|
import omit16 from "lodash/omit";
|
7386
|
-
var TextareaBase =
|
7387
|
-
({ readOnly = false, valid = true, ...props }, ref) => /* @__PURE__ */
|
7188
|
+
var TextareaBase = React78.forwardRef(
|
7189
|
+
({ readOnly = false, valid = true, ...props }, ref) => /* @__PURE__ */ React78.createElement("textarea", {
|
7388
7190
|
ref,
|
7389
7191
|
...props,
|
7390
7192
|
readOnly,
|
7391
7193
|
className: classNames(getCommonInputStyles({ readOnly, valid }), props.className)
|
7392
7194
|
})
|
7393
7195
|
);
|
7394
|
-
TextareaBase.Skeleton = () => /* @__PURE__ */
|
7196
|
+
TextareaBase.Skeleton = () => /* @__PURE__ */ React78.createElement(Skeleton, {
|
7395
7197
|
height: 58
|
7396
7198
|
});
|
7397
|
-
var Textarea =
|
7199
|
+
var Textarea = React78.forwardRef((props, ref) => {
|
7398
7200
|
const [value, setValue] = useState11(props.value ?? props.defaultValue ?? "");
|
7399
7201
|
const id = useRef10(props.id ?? `textarea-${uniqueId10()}`);
|
7400
7202
|
const errorMessageId = uniqueId10();
|
7401
7203
|
const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
|
7402
7204
|
const { "data-testid": dataTestId, ...labelControlProps } = getLabelControlProps(props);
|
7403
7205
|
const baseProps = omit16(props, Object.keys(labelControlProps));
|
7404
|
-
return /* @__PURE__ */
|
7206
|
+
return /* @__PURE__ */ React78.createElement(LabelControl, {
|
7405
7207
|
id: `${id.current}-label`,
|
7406
7208
|
htmlFor: id.current,
|
7407
7209
|
messageId: errorMessageId,
|
7408
7210
|
length: value !== void 0 ? toString2(value).length : void 0,
|
7409
7211
|
...labelControlProps
|
7410
|
-
}, /* @__PURE__ */
|
7212
|
+
}, /* @__PURE__ */ React78.createElement(TextareaBase, {
|
7411
7213
|
ref,
|
7412
7214
|
...baseProps,
|
7413
7215
|
...errorProps,
|
@@ -7423,12 +7225,158 @@ var Textarea = React77.forwardRef((props, ref) => {
|
|
7423
7225
|
valid: props.valid
|
7424
7226
|
}));
|
7425
7227
|
});
|
7426
|
-
var TextAreaSkeleton = () => /* @__PURE__ */
|
7228
|
+
var TextAreaSkeleton = () => /* @__PURE__ */ React78.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React78.createElement(TextareaBase.Skeleton, null));
|
7427
7229
|
Textarea.Skeleton = TextAreaSkeleton;
|
7428
7230
|
|
7231
|
+
// src/components/Pagination/usePagination.tsx
|
7232
|
+
import { useState as useState12, useEffect as useEffect6 } from "react";
|
7233
|
+
var initialState = {
|
7234
|
+
currentPage: 1,
|
7235
|
+
pageSize: 10
|
7236
|
+
};
|
7237
|
+
var getPageIndex = (currentPage, pageSize) => currentPage === 0 ? 0 : (currentPage - 1) * pageSize;
|
7238
|
+
var usePagination = (items, options) => {
|
7239
|
+
const [currentPage, setCurrentPage] = useState12(options?.initialPage || initialState.currentPage);
|
7240
|
+
const [pageSize, setPageSize] = useState12(options?.initialPageSize || initialState.pageSize);
|
7241
|
+
const totalPages = items.length > 0 ? Math.ceil(items.length / pageSize) : 1;
|
7242
|
+
const hasPreviousPage = currentPage > 1;
|
7243
|
+
const hasNextPage = currentPage < totalPages;
|
7244
|
+
const pageIndex = getPageIndex(currentPage, pageSize);
|
7245
|
+
const onPageSizeChange = (pageSize2) => {
|
7246
|
+
setPageSize(pageSize2);
|
7247
|
+
setCurrentPage(options?.initialPage || initialState.currentPage);
|
7248
|
+
};
|
7249
|
+
useEffect6(() => {
|
7250
|
+
setCurrentPage(options?.initialPage || initialState.currentPage);
|
7251
|
+
}, [items.length]);
|
7252
|
+
return [
|
7253
|
+
items.slice(pageIndex, Math.min(pageIndex + pageSize, items.length)),
|
7254
|
+
{
|
7255
|
+
currentPage,
|
7256
|
+
totalPages,
|
7257
|
+
pageSize,
|
7258
|
+
hasPreviousPage,
|
7259
|
+
hasNextPage,
|
7260
|
+
onPageChange: setCurrentPage,
|
7261
|
+
onPageSizeChange
|
7262
|
+
}
|
7263
|
+
];
|
7264
|
+
};
|
7265
|
+
|
7429
7266
|
// src/components/index.ts
|
7430
7267
|
var SelectItem = Select.Item;
|
7431
7268
|
|
7269
|
+
// src/utils/positioner.ts
|
7270
|
+
import clamp3 from "lodash/clamp";
|
7271
|
+
var PositionerPlacement = /* @__PURE__ */ ((PositionerPlacement2) => {
|
7272
|
+
PositionerPlacement2["top"] = "top";
|
7273
|
+
PositionerPlacement2["left"] = "left";
|
7274
|
+
PositionerPlacement2["bottom"] = "bottom";
|
7275
|
+
PositionerPlacement2["right"] = "right";
|
7276
|
+
PositionerPlacement2["topLeft"] = "top-left";
|
7277
|
+
PositionerPlacement2["topRight"] = "top-right";
|
7278
|
+
PositionerPlacement2["bottomLeft"] = "bottom-left";
|
7279
|
+
PositionerPlacement2["bottomRight"] = "bottom-right";
|
7280
|
+
return PositionerPlacement2;
|
7281
|
+
})(PositionerPlacement || {});
|
7282
|
+
var placementOrder = [
|
7283
|
+
"top" /* top */,
|
7284
|
+
"top-left" /* topLeft */,
|
7285
|
+
"top-right" /* topRight */,
|
7286
|
+
"right" /* right */,
|
7287
|
+
"bottom" /* bottom */,
|
7288
|
+
"bottom-left" /* bottomLeft */,
|
7289
|
+
"bottom-right" /* bottomRight */,
|
7290
|
+
"left" /* left */
|
7291
|
+
];
|
7292
|
+
var POSITIONER_MOUNT_ELEMENT_ID = "positioner-root";
|
7293
|
+
function createMountPointElement() {
|
7294
|
+
const mountElement = document.createElement("div");
|
7295
|
+
mountElement.id = POSITIONER_MOUNT_ELEMENT_ID;
|
7296
|
+
return mountElement;
|
7297
|
+
}
|
7298
|
+
function calcBottomPosition(triggerRect, contentRect, padding) {
|
7299
|
+
return {
|
7300
|
+
x: triggerRect.left - (contentRect.width / 2 - triggerRect.width / 2),
|
7301
|
+
y: triggerRect.top + triggerRect.height + padding
|
7302
|
+
};
|
7303
|
+
}
|
7304
|
+
function calcTopPosition(triggerRect, contentRect, padding) {
|
7305
|
+
return {
|
7306
|
+
x: triggerRect.left - (contentRect.width / 2 - triggerRect.width / 2),
|
7307
|
+
y: triggerRect.top - contentRect.height - padding
|
7308
|
+
};
|
7309
|
+
}
|
7310
|
+
function calcLeftPosition(triggerRect, contentRect, padding) {
|
7311
|
+
return {
|
7312
|
+
x: triggerRect.left - contentRect.width - padding,
|
7313
|
+
y: triggerRect.top - (contentRect.height / 2 - triggerRect.height / 2)
|
7314
|
+
};
|
7315
|
+
}
|
7316
|
+
function calcRightPosition(triggerRect, contentRect, padding) {
|
7317
|
+
return {
|
7318
|
+
x: triggerRect.left + triggerRect.width + padding,
|
7319
|
+
y: triggerRect.top - (contentRect.height / 2 - triggerRect.height / 2)
|
7320
|
+
};
|
7321
|
+
}
|
7322
|
+
function calcBottomLeftPosition(triggerRect, contentRect, padding) {
|
7323
|
+
return {
|
7324
|
+
x: triggerRect.left - contentRect.width - padding,
|
7325
|
+
y: triggerRect.top + triggerRect.height + padding
|
7326
|
+
};
|
7327
|
+
}
|
7328
|
+
function calcBottomRightPosition(triggerRect, contentRect, padding) {
|
7329
|
+
return {
|
7330
|
+
x: triggerRect.left + triggerRect.width + padding,
|
7331
|
+
y: triggerRect.top + triggerRect.height + padding
|
7332
|
+
};
|
7333
|
+
}
|
7334
|
+
function calcTopLeftPosition(triggerRect, contentRect, padding) {
|
7335
|
+
return {
|
7336
|
+
x: triggerRect.left - contentRect.width - padding,
|
7337
|
+
y: triggerRect.top - contentRect.height - padding
|
7338
|
+
};
|
7339
|
+
}
|
7340
|
+
function calcTopRightPosition(triggerRect, contentRect, padding) {
|
7341
|
+
return {
|
7342
|
+
x: triggerRect.left + triggerRect.width + padding,
|
7343
|
+
y: triggerRect.top - contentRect.height - padding
|
7344
|
+
};
|
7345
|
+
}
|
7346
|
+
var positionCalcFuncs = {
|
7347
|
+
["top" /* top */]: calcTopPosition,
|
7348
|
+
["top-left" /* topLeft */]: calcTopLeftPosition,
|
7349
|
+
["top-right" /* topRight */]: calcTopRightPosition,
|
7350
|
+
["bottom" /* bottom */]: calcBottomPosition,
|
7351
|
+
["bottom-left" /* bottomLeft */]: calcBottomLeftPosition,
|
7352
|
+
["bottom-right" /* bottomRight */]: calcBottomRightPosition,
|
7353
|
+
["left" /* left */]: calcLeftPosition,
|
7354
|
+
["right" /* right */]: calcRightPosition
|
7355
|
+
};
|
7356
|
+
function isOutOfBounds(position) {
|
7357
|
+
return position.x < 0 || position.x > window.innerWidth;
|
7358
|
+
}
|
7359
|
+
function calcPosition(triggerRect, contentRect, placement, padding) {
|
7360
|
+
return positionCalcFuncs[placement](triggerRect, contentRect, padding);
|
7361
|
+
}
|
7362
|
+
function calcBestPosition(triggerRect, contentRect, placement, padding) {
|
7363
|
+
let attempts = 0;
|
7364
|
+
return function _calcBestPosition(triggerRect2, contentRect2, placement2, padding2) {
|
7365
|
+
attempts++;
|
7366
|
+
const position = calcPosition(triggerRect2, contentRect2, placement2, padding2);
|
7367
|
+
const hasAttemptsLeft = attempts < placementOrder.length;
|
7368
|
+
if (isOutOfBounds(position) && hasAttemptsLeft) {
|
7369
|
+
const nextPlacementAttempt = placementOrder[placementOrder.findIndex((p) => placement2 === p) + 1] || placementOrder[0];
|
7370
|
+
return _calcBestPosition(triggerRect2, contentRect2, nextPlacementAttempt, padding2);
|
7371
|
+
} else {
|
7372
|
+
return {
|
7373
|
+
x: clamp3(position.x + window.scrollX, 0, window.innerWidth),
|
7374
|
+
y: position.y + window.scrollY
|
7375
|
+
};
|
7376
|
+
}
|
7377
|
+
}(triggerRect, contentRect, placement, padding);
|
7378
|
+
}
|
7379
|
+
|
7432
7380
|
// src/system.ts
|
7433
7381
|
var system_default = {
|
7434
7382
|
...components_exports,
|
@@ -7501,7 +7449,6 @@ export {
|
|
7501
7449
|
Popover2 as Popover,
|
7502
7450
|
PopoverDialog2 as PopoverDialog,
|
7503
7451
|
Portal,
|
7504
|
-
Positioner,
|
7505
7452
|
PositionerPlacement,
|
7506
7453
|
PrimaryButton,
|
7507
7454
|
PrimaryDropdownButton,
|
@@ -7512,6 +7459,7 @@ export {
|
|
7512
7459
|
SecondaryButton,
|
7513
7460
|
SecondaryDropdownButton,
|
7514
7461
|
SecondaryGhostButton,
|
7462
|
+
Section3 as Section,
|
7515
7463
|
SegmentedControl,
|
7516
7464
|
SegmentedControlGroup,
|
7517
7465
|
Select2 as Select,
|
@@ -7554,6 +7502,7 @@ export {
|
|
7554
7502
|
isOutOfBounds,
|
7555
7503
|
placementOrder,
|
7556
7504
|
export_theme as theme,
|
7505
|
+
usePagination,
|
7557
7506
|
usePopoverContext,
|
7558
7507
|
useScrollTarget,
|
7559
7508
|
useTableSelect,
|