@aivenio/aquarium 1.12.0 → 1.13.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 +1 -1
- package/dist/_variables_timescale.scss +1 -1
- package/dist/atoms.cjs +13 -6
- package/dist/atoms.mjs +13 -6
- package/dist/src/atoms/DropdownMenu/DropdownMenu.js +3 -3
- package/dist/src/atoms/Popover/Popover.d.ts +2 -0
- package/dist/src/atoms/Popover/Popover.js +6 -2
- package/dist/src/molecules/Combobox/Combobox.js +25 -24
- package/dist/src/molecules/DataList/DataList.d.ts +3 -3
- package/dist/src/molecules/DataList/DataList.js +7 -7
- package/dist/src/molecules/DataTable/DataTable.d.ts +3 -3
- package/dist/src/molecules/DataTable/DataTable.js +5 -5
- package/dist/src/molecules/Dialog/Dialog.d.ts +3 -3
- package/dist/src/molecules/Dialog/Dialog.js +26 -22
- package/dist/src/molecules/Dropdown/Dropdown.js +2 -2
- package/dist/src/molecules/DropdownMenu/DropdownMenu.js +4 -13
- package/dist/src/molecules/Modal/Modal.d.ts +5 -0
- package/dist/src/molecules/Modal/Modal.js +35 -32
- package/dist/src/molecules/MultiSelect/MultiSelect.js +26 -25
- package/dist/src/molecules/Popover/Dialog.d.ts +2 -0
- package/dist/src/molecules/Popover/Dialog.js +9 -0
- package/dist/src/molecules/Popover/Popover.d.ts +8 -6
- package/dist/src/molecules/Popover/Popover.js +8 -17
- package/dist/src/molecules/Popover/PopoverOverlay.d.ts +21 -0
- package/dist/src/molecules/Popover/PopoverOverlay.js +35 -0
- package/dist/src/molecules/PopoverDialog/PopoverDialog.js +2 -2
- package/dist/src/molecules/Select/Select.js +18 -24
- package/dist/src/utils/table/types.d.ts +25 -12
- package/dist/src/utils/table/types.js +2 -1
- package/dist/src/utils/table/useTableSort.d.ts +2 -2
- package/dist/src/utils/table/useTableSort.js +5 -5
- package/dist/src/utils/table/utils.d.ts +2 -0
- package/dist/src/utils/table/utils.js +16 -0
- package/dist/styles.css +6 -0
- package/dist/styles_timescaledb.css +6 -0
- package/dist/system.cjs +720 -681
- package/dist/system.mjs +687 -649
- package/dist/tsconfig.module.tsbuildinfo +1 -1
- package/dist/types/tailwindGenerated.d.ts +1 -1
- package/package.json +3 -3
- package/dist/src/molecules/Popover/PopoverWrapper.d.ts +0 -16
- package/dist/src/molecules/Popover/PopoverWrapper.js +0 -34
package/dist/system.mjs
CHANGED
@@ -1646,6 +1646,7 @@ __export(molecules_exports, {
|
|
1646
1646
|
asPopoverButton: () => asPopoverButton,
|
1647
1647
|
asTabItem: () => asTabItem,
|
1648
1648
|
cellProps: () => cellProps,
|
1649
|
+
columnIsFieldColumn: () => columnIsFieldColumn,
|
1649
1650
|
createTabsComponent: () => createTabsComponent,
|
1650
1651
|
toSortDirection: () => toSortDirection,
|
1651
1652
|
usePagination: () => usePagination,
|
@@ -4912,18 +4913,16 @@ var ChoiceChip = (_a) => {
|
|
4912
4913
|
};
|
4913
4914
|
|
4914
4915
|
// src/molecules/Combobox/Combobox.tsx
|
4915
|
-
import React41, { useEffect as
|
4916
|
-
import {
|
4916
|
+
import React41, { useEffect as useEffect5, useRef as useRef5, useState as useState5 } from "react";
|
4917
|
+
import { ariaHideOutside } from "@react-aria/overlays";
|
4917
4918
|
import { useCombobox } from "downshift";
|
4918
4919
|
import omit6 from "lodash/omit";
|
4919
4920
|
import uniqueId2 from "lodash/uniqueId";
|
4920
4921
|
import { matchSorter } from "match-sorter";
|
4921
4922
|
|
4922
|
-
// src/molecules/Popover/
|
4923
|
-
import React40 from "react";
|
4924
|
-
import {
|
4925
|
-
import { OverlayContainer as OverlayContainer2, useModal, useOverlay } from "@react-aria/overlays";
|
4926
|
-
import { mergeProps as mergeProps2 } from "@react-aria/utils";
|
4923
|
+
// src/molecules/Popover/PopoverOverlay.tsx
|
4924
|
+
import React40, { useEffect as useEffect4 } from "react";
|
4925
|
+
import { DismissButton, Overlay, usePopover } from "@react-aria/overlays";
|
4927
4926
|
|
4928
4927
|
// src/atoms/Popover/Popover.tsx
|
4929
4928
|
import React39 from "react";
|
@@ -4933,69 +4932,85 @@ var PopoverPanel = React39.forwardRef((_a, ref) => {
|
|
4933
4932
|
ref,
|
4934
4933
|
className: classNames(
|
4935
4934
|
className,
|
4936
|
-
tw(
|
4937
|
-
"rounded-sm shadow-16dp bg-white mt-1 overflow-y-auto flex flex-col focus-visible:outline-0 focus-visible:border-info-70 border border-grey-20"
|
4938
|
-
)
|
4935
|
+
tw("rounded-sm shadow-16dp bg-white mt-1 overflow-y-auto flex flex-col border border-grey-20 outline-none")
|
4939
4936
|
)
|
4940
4937
|
}, props), children);
|
4941
4938
|
});
|
4939
|
+
PopoverPanel.displayName = "Popover.Panel";
|
4940
|
+
var PopoverUnderlay = React39.forwardRef((props, ref) => /* @__PURE__ */ React39.createElement("div", __spreadProps(__spreadValues({
|
4941
|
+
ref
|
4942
|
+
}, props), {
|
4943
|
+
className: tw("fixed inset-0")
|
4944
|
+
})));
|
4945
|
+
PopoverUnderlay.displayName = "Popover.Underlay";
|
4942
4946
|
var Popover = {
|
4943
|
-
Panel: PopoverPanel
|
4947
|
+
Panel: PopoverPanel,
|
4948
|
+
Underlay: PopoverUnderlay
|
4944
4949
|
};
|
4945
4950
|
|
4946
|
-
// src/molecules/Popover/
|
4947
|
-
var
|
4948
|
-
|
4949
|
-
id,
|
4950
|
-
children,
|
4951
|
-
placement,
|
4952
|
-
arrowProps,
|
4953
|
-
isOpen,
|
4954
|
-
hideArrow,
|
4955
|
-
shouldCloseOnBlur,
|
4956
|
-
isKeyboardDismissDisabled,
|
4957
|
-
isNonModal = true,
|
4958
|
-
isDismissable,
|
4959
|
-
autoFocus,
|
4960
|
-
containFocus,
|
4961
|
-
className
|
4962
|
-
} = _a, otherProps = __objRest(_a, [
|
4963
|
-
"id",
|
4964
|
-
"children",
|
4965
|
-
"placement",
|
4966
|
-
"arrowProps",
|
4967
|
-
"isOpen",
|
4968
|
-
"hideArrow",
|
4969
|
-
"shouldCloseOnBlur",
|
4970
|
-
"isKeyboardDismissDisabled",
|
4971
|
-
"isNonModal",
|
4972
|
-
"isDismissable",
|
4973
|
-
"autoFocus",
|
4974
|
-
"containFocus",
|
4975
|
-
"className"
|
4976
|
-
]);
|
4977
|
-
const { overlayProps } = useOverlay(
|
4978
|
-
__spreadProps(__spreadValues({}, props), { isDismissable: isDismissable && isOpen }),
|
4951
|
+
// src/molecules/Popover/PopoverOverlay.tsx
|
4952
|
+
var PopoverOverlay = React40.forwardRef((props, ref) => {
|
4953
|
+
return /* @__PURE__ */ React40.createElement(Overlay, null, /* @__PURE__ */ React40.createElement(Wrapper, __spreadValues({
|
4979
4954
|
ref
|
4980
|
-
);
|
4981
|
-
const { modalProps } = useModal({
|
4982
|
-
isDisabled: isNonModal
|
4983
|
-
});
|
4984
|
-
if (!props.isOpen) {
|
4985
|
-
return null;
|
4986
|
-
}
|
4987
|
-
return /* @__PURE__ */ React40.createElement(OverlayContainer2, null, /* @__PURE__ */ React40.createElement(FocusScope, {
|
4988
|
-
restoreFocus: true,
|
4989
|
-
autoFocus,
|
4990
|
-
contain: containFocus
|
4991
|
-
}, /* @__PURE__ */ React40.createElement(Popover.Panel, __spreadProps(__spreadValues({
|
4992
|
-
ref,
|
4993
|
-
role: "dialog"
|
4994
|
-
}, mergeProps2(otherProps, modalProps, overlayProps)), {
|
4995
|
-
id: id != null ? id : overlayProps.id,
|
4996
|
-
className
|
4997
|
-
}), children)));
|
4955
|
+
}, props)));
|
4998
4956
|
});
|
4957
|
+
var Wrapper = React40.forwardRef(
|
4958
|
+
(_a, ref) => {
|
4959
|
+
var _b = _a, {
|
4960
|
+
id,
|
4961
|
+
state,
|
4962
|
+
className,
|
4963
|
+
style = {},
|
4964
|
+
placement = "bottom-left",
|
4965
|
+
role,
|
4966
|
+
focusable = true,
|
4967
|
+
isNonModal = false,
|
4968
|
+
autoFocus,
|
4969
|
+
containFocus,
|
4970
|
+
children,
|
4971
|
+
popoverRef: _popoverRef
|
4972
|
+
} = _b, props = __objRest(_b, [
|
4973
|
+
"id",
|
4974
|
+
"state",
|
4975
|
+
"className",
|
4976
|
+
"style",
|
4977
|
+
"placement",
|
4978
|
+
"role",
|
4979
|
+
"focusable",
|
4980
|
+
"isNonModal",
|
4981
|
+
"autoFocus",
|
4982
|
+
"containFocus",
|
4983
|
+
"children",
|
4984
|
+
"popoverRef"
|
4985
|
+
]);
|
4986
|
+
const popoverRef = React40.useRef(null);
|
4987
|
+
React40.useImperativeHandle(ref, () => popoverRef.current);
|
4988
|
+
useEffect4(() => {
|
4989
|
+
if (autoFocus && popoverRef.current) {
|
4990
|
+
popoverRef.current.focus();
|
4991
|
+
}
|
4992
|
+
}, []);
|
4993
|
+
const { underlayProps, popoverProps } = usePopover(
|
4994
|
+
__spreadProps(__spreadValues({}, props), {
|
4995
|
+
isNonModal,
|
4996
|
+
placement: placement.replace("-", " "),
|
4997
|
+
popoverRef
|
4998
|
+
}),
|
4999
|
+
state
|
5000
|
+
);
|
5001
|
+
return /* @__PURE__ */ React40.createElement("div", null, !isNonModal && /* @__PURE__ */ React40.createElement(Popover.Underlay, __spreadValues({}, underlayProps)), /* @__PURE__ */ React40.createElement(Popover.Panel, __spreadProps(__spreadValues({
|
5002
|
+
ref: popoverRef,
|
5003
|
+
tabIndex: focusable ? 0 : -1,
|
5004
|
+
role: role != null ? role : "presentation"
|
5005
|
+
}, popoverProps), {
|
5006
|
+
id: id != null ? id : popoverProps.id,
|
5007
|
+
style: __spreadValues(__spreadValues({}, popoverProps.style), style),
|
5008
|
+
className
|
5009
|
+
}), children, /* @__PURE__ */ React40.createElement(DismissButton, {
|
5010
|
+
onDismiss: state.close
|
5011
|
+
})));
|
5012
|
+
}
|
5013
|
+
);
|
4999
5014
|
|
5000
5015
|
// src/molecules/Combobox/Combobox.tsx
|
5001
5016
|
var ComboboxBase = (_a) => {
|
@@ -5039,8 +5054,10 @@ var ComboboxBase = (_a) => {
|
|
5039
5054
|
"readOnly"
|
5040
5055
|
]);
|
5041
5056
|
var _a2;
|
5057
|
+
const popoverRef = useRef5(null);
|
5042
5058
|
const targetRef = useRef5(null);
|
5043
|
-
const
|
5059
|
+
const menuRef = useRef5(null);
|
5060
|
+
const inputRef = useRef5(null);
|
5044
5061
|
const [inputItems, setInputItems] = useState5(options);
|
5045
5062
|
const [hasFocus, setFocus] = useState5(false);
|
5046
5063
|
const updateInputItems = (query) => {
|
@@ -5049,15 +5066,16 @@ var ComboboxBase = (_a) => {
|
|
5049
5066
|
};
|
5050
5067
|
const {
|
5051
5068
|
isOpen,
|
5069
|
+
openMenu,
|
5070
|
+
closeMenu,
|
5071
|
+
toggleMenu,
|
5052
5072
|
getToggleButtonProps,
|
5053
5073
|
getMenuProps,
|
5054
5074
|
getInputProps,
|
5055
5075
|
highlightedIndex,
|
5056
5076
|
inputValue,
|
5057
5077
|
getItemProps,
|
5058
|
-
selectedItem
|
5059
|
-
closeMenu,
|
5060
|
-
openMenu
|
5078
|
+
selectedItem
|
5061
5079
|
} = useCombobox({
|
5062
5080
|
id,
|
5063
5081
|
selectedItem: value,
|
@@ -5078,20 +5096,24 @@ var ComboboxBase = (_a) => {
|
|
5078
5096
|
onSelectedItemChange: (e) => onChange == null ? void 0 : onChange(e.selectedItem),
|
5079
5097
|
onInputValueChange: ({ inputValue: inputValue2 }) => updateInputItems(inputValue2)
|
5080
5098
|
});
|
5081
|
-
const
|
5082
|
-
|
5083
|
-
|
5084
|
-
|
5085
|
-
|
5086
|
-
|
5087
|
-
}
|
5088
|
-
|
5099
|
+
const state = {
|
5100
|
+
isOpen,
|
5101
|
+
close: closeMenu,
|
5102
|
+
open: openMenu,
|
5103
|
+
toggle: toggleMenu,
|
5104
|
+
setOpen: (isOpen2) => isOpen2 ? openMenu() : closeMenu()
|
5105
|
+
};
|
5106
|
+
useEffect5(() => {
|
5089
5107
|
updateInputItems(inputValue);
|
5090
5108
|
}, [JSON.stringify(options)]);
|
5091
|
-
|
5109
|
+
useEffect5(() => {
|
5110
|
+
if (state.isOpen && inputRef.current && popoverRef.current) {
|
5111
|
+
return ariaHideOutside([inputRef.current, popoverRef.current]);
|
5112
|
+
}
|
5113
|
+
}, [state.isOpen, inputRef, popoverRef]);
|
5114
|
+
const menuProps = getMenuProps({ ref: menuRef }, { suppressRefError: !isOpen });
|
5115
|
+
const inputProps = getInputProps({ ref: inputRef, disabled: disabled || readOnly });
|
5092
5116
|
const hasNoResults = options.length === 0 || inputItems.length === 0;
|
5093
|
-
const width = (_a2 = targetRef.current) == null ? void 0 : _a2.offsetWidth;
|
5094
|
-
const style = isOpen ? __spreadProps(__spreadValues({}, overlayProps.style), { width }) : { display: "none" };
|
5095
5117
|
return /* @__PURE__ */ React41.createElement("div", {
|
5096
5118
|
className: tw("relative")
|
5097
5119
|
}, /* @__PURE__ */ React41.createElement(Select.InputContainer, {
|
@@ -5099,6 +5121,7 @@ var ComboboxBase = (_a) => {
|
|
5099
5121
|
variant: disabled ? "disabled" : !valid ? "error" : readOnly ? "readOnly" : hasFocus ? "focused" : "default"
|
5100
5122
|
}, /* @__PURE__ */ React41.createElement(Select.Input, __spreadProps(__spreadValues(__spreadValues({
|
5101
5123
|
id,
|
5124
|
+
ref: inputRef,
|
5102
5125
|
name,
|
5103
5126
|
placeholder: readOnly ? void 0 : placeholder
|
5104
5127
|
}, inputProps), props), {
|
@@ -5122,16 +5145,18 @@ var ComboboxBase = (_a) => {
|
|
5122
5145
|
})), !readOnly && /* @__PURE__ */ React41.createElement(Select.Toggle, __spreadValues({
|
5123
5146
|
hasFocus,
|
5124
5147
|
isOpen
|
5125
|
-
}, getToggleButtonProps({ disabled })))), /* @__PURE__ */ React41.createElement(
|
5126
|
-
|
5127
|
-
|
5128
|
-
|
5129
|
-
|
5130
|
-
|
5131
|
-
|
5132
|
-
|
5148
|
+
}, getToggleButtonProps({ disabled })))), isOpen && /* @__PURE__ */ React41.createElement(PopoverOverlay, {
|
5149
|
+
ref: popoverRef,
|
5150
|
+
triggerRef: targetRef,
|
5151
|
+
state,
|
5152
|
+
placement: "bottom-left",
|
5153
|
+
shouldFlip: true,
|
5154
|
+
isNonModal: true,
|
5155
|
+
style: { width: (_a2 = targetRef.current) == null ? void 0 : _a2.offsetWidth }
|
5156
|
+
}, /* @__PURE__ */ React41.createElement(Select.Menu, __spreadValues({
|
5157
|
+
ref: menuRef,
|
5133
5158
|
maxHeight
|
5134
|
-
},
|
5159
|
+
}, menuProps), hasNoResults && /* @__PURE__ */ React41.createElement(Select.NoResults, null, noResults), inputItems.map((item, index) => /* @__PURE__ */ React41.createElement(Select.Item, __spreadValues({
|
5135
5160
|
key: itemToString(item),
|
5136
5161
|
selected: item === selectedItem,
|
5137
5162
|
highlighted: index === highlightedIndex
|
@@ -5188,7 +5213,6 @@ var Container2 = ({ maxWidth = "xl", children }) => /* @__PURE__ */ React42.crea
|
|
5188
5213
|
|
5189
5214
|
// src/molecules/DataList/DataList.tsx
|
5190
5215
|
import React48 from "react";
|
5191
|
-
import orderBy2 from "lodash/orderBy";
|
5192
5216
|
|
5193
5217
|
// src/molecules/Template/Template.tsx
|
5194
5218
|
import React43 from "react";
|
@@ -5449,29 +5473,49 @@ var cellProps = (column) => ({
|
|
5449
5473
|
key: column.key || column.headerName,
|
5450
5474
|
align: column.type === "number" || column.type === "action" ? "right" : "left"
|
5451
5475
|
});
|
5476
|
+
var columnIsFieldColumn = (column) => Boolean(column && column.field);
|
5452
5477
|
|
5453
5478
|
// src/utils/table/useTableSort.tsx
|
5454
5479
|
import React47 from "react";
|
5455
5480
|
var useTableSort = () => {
|
5456
5481
|
const [sort, setSort] = React47.useState();
|
5457
|
-
const handleSortClick = (
|
5458
|
-
if (
|
5482
|
+
const handleSortClick = (column) => {
|
5483
|
+
if (sort && sort.column.headerName === column.headerName) {
|
5459
5484
|
if (sort.direction === "ascending") {
|
5460
|
-
setSort({
|
5485
|
+
setSort({ column, direction: "descending" });
|
5461
5486
|
} else {
|
5462
5487
|
setSort(void 0);
|
5463
5488
|
}
|
5464
5489
|
} else {
|
5465
|
-
setSort({
|
5490
|
+
setSort({ column, direction: "ascending" });
|
5466
5491
|
}
|
5467
5492
|
};
|
5468
5493
|
return [sort, handleSortClick];
|
5469
5494
|
};
|
5470
5495
|
|
5496
|
+
// src/utils/table/utils.ts
|
5497
|
+
import orderBy2 from "lodash/orderBy";
|
5498
|
+
var sortRowsBy = (rows, sort) => {
|
5499
|
+
if (!sort) {
|
5500
|
+
return rows;
|
5501
|
+
}
|
5502
|
+
const sortFunction = sort.column.sort;
|
5503
|
+
if (sortFunction) {
|
5504
|
+
return [...rows].sort((a, b) => sortFunction(a, b, sort.direction));
|
5505
|
+
} else if (columnIsFieldColumn(sort.column)) {
|
5506
|
+
return orderBy2(rows, [sort.column.field], [toSortDirection(sort.direction)]);
|
5507
|
+
}
|
5508
|
+
return rows;
|
5509
|
+
};
|
5510
|
+
|
5471
5511
|
// src/molecules/DataList/DataList.tsx
|
5472
|
-
var DataList2 = ({
|
5512
|
+
var DataList2 = ({
|
5513
|
+
columns,
|
5514
|
+
rows,
|
5515
|
+
sticky
|
5516
|
+
}) => {
|
5473
5517
|
const [sort, updateSort] = useTableSort();
|
5474
|
-
const sortedRows =
|
5518
|
+
const sortedRows = sortRowsBy(rows, sort);
|
5475
5519
|
const templateColumns = columns.map((column) => {
|
5476
5520
|
var _a;
|
5477
5521
|
return (_a = column.width) != null ? _a : "auto";
|
@@ -5479,9 +5523,9 @@ var DataList2 = ({ columns, rows, sticky }) => {
|
|
5479
5523
|
return /* @__PURE__ */ React48.createElement(Template, {
|
5480
5524
|
columns: templateColumns
|
5481
5525
|
}, columns.map(
|
5482
|
-
(column) => (column
|
5483
|
-
direction: sort && sort.
|
5484
|
-
onClick: () => updateSort(column
|
5526
|
+
(column) => columnIsFieldColumn(column) && column.sortable || column.sort ? /* @__PURE__ */ React48.createElement(DataList.SortCell, __spreadValues({
|
5527
|
+
direction: sort && sort.column.headerName === column.headerName ? sort.direction : "none",
|
5528
|
+
onClick: () => updateSort(column),
|
5485
5529
|
sticky
|
5486
5530
|
}, cellProps(column)), column.headerName) : /* @__PURE__ */ React48.createElement(DataList.HeadCell, __spreadProps(__spreadValues({}, cellProps(column)), {
|
5487
5531
|
sticky
|
@@ -5496,14 +5540,13 @@ var DataList2 = ({ columns, rows, sticky }) => {
|
|
5496
5540
|
dense: true
|
5497
5541
|
}, column.status(row, index, sortedRows)))) : column.type === "action" ? /* @__PURE__ */ React48.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ React48.createElement(SecondaryButton, __spreadValues({
|
5498
5542
|
dense: true
|
5499
|
-
}, renameProperty("text", "children", column.action(row, index, sortedRows))))) : column.type === "custom" ? /* @__PURE__ */ React48.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), column.UNSAFE_render(row, index, sortedRows)) : column.type === "item" ? /* @__PURE__ */ React48.createElement(DataList.Cell,
|
5543
|
+
}, renameProperty("text", "children", column.action(row, index, sortedRows))))) : column.type === "custom" ? /* @__PURE__ */ React48.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), column.UNSAFE_render(row, index, sortedRows)) : column.type === "item" ? /* @__PURE__ */ React48.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ React48.createElement(Item2, __spreadValues({}, column.item(row, index, sortedRows)))) : /* @__PURE__ */ React48.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), column.formatter ? column.formatter(row[column.field], row, index, sortedRows) : row[column.field])
|
5500
5544
|
}))
|
5501
5545
|
}));
|
5502
5546
|
};
|
5503
5547
|
|
5504
5548
|
// src/molecules/DataTable/DataTable.tsx
|
5505
5549
|
import React51 from "react";
|
5506
|
-
import orderBy3 from "lodash/orderBy";
|
5507
5550
|
|
5508
5551
|
// src/molecules/Table/Table.tsx
|
5509
5552
|
import React50 from "react";
|
@@ -5563,7 +5606,7 @@ var DataTable = (_a) => {
|
|
5563
5606
|
"sticky"
|
5564
5607
|
]);
|
5565
5608
|
const [sort, updateSort] = useTableSort();
|
5566
|
-
const sortedRows =
|
5609
|
+
const sortedRows = sortRowsBy(rows, sort);
|
5567
5610
|
return /* @__PURE__ */ React51.createElement(Table2, __spreadProps(__spreadValues({}, rest), {
|
5568
5611
|
className: tw({
|
5569
5612
|
"whitespace-nowrap": noWrap,
|
@@ -5573,9 +5616,9 @@ var DataTable = (_a) => {
|
|
5573
5616
|
}), /* @__PURE__ */ React51.createElement(Table2.Head, {
|
5574
5617
|
sticky
|
5575
5618
|
}, columns.map(
|
5576
|
-
(column) => (column
|
5577
|
-
direction: sort && sort.
|
5578
|
-
onClick: () => updateSort(column
|
5619
|
+
(column) => columnIsFieldColumn(column) && column.sortable || column.sort ? /* @__PURE__ */ React51.createElement(Table2.SortCell, __spreadValues({
|
5620
|
+
direction: sort && sort.column.headerName === column.headerName ? sort.direction : "none",
|
5621
|
+
onClick: () => updateSort(column),
|
5579
5622
|
style: { width: column.width },
|
5580
5623
|
"aria-label": column.headerInvisible ? column.headerName : void 0
|
5581
5624
|
}, cellProps(column)), !column.headerInvisible && column.headerName) : /* @__PURE__ */ React51.createElement(Table2.Cell, __spreadProps(__spreadValues({}, cellProps(column)), {
|
@@ -5600,8 +5643,7 @@ var DataTable = (_a) => {
|
|
5600
5643
|
// src/molecules/Dialog/Dialog.tsx
|
5601
5644
|
import React53 from "react";
|
5602
5645
|
import { useDialog } from "@react-aria/dialog";
|
5603
|
-
import {
|
5604
|
-
import { Overlay, useModalOverlay } from "@react-aria/overlays";
|
5646
|
+
import { Overlay as Overlay2, useModalOverlay } from "@react-aria/overlays";
|
5605
5647
|
import { useId } from "@react-aria/utils";
|
5606
5648
|
import { useOverlayTriggerState as useOverlayTriggerState2 } from "@react-stately/overlays";
|
5607
5649
|
import omit7 from "lodash/omit";
|
@@ -5728,36 +5770,39 @@ Modal.Actions = (_a) => {
|
|
5728
5770
|
};
|
5729
5771
|
|
5730
5772
|
// src/molecules/Dialog/Dialog.tsx
|
5731
|
-
var Dialog = ({
|
5773
|
+
var Dialog = (props) => {
|
5774
|
+
const ref = React53.useRef(null);
|
5775
|
+
const state = useOverlayTriggerState2({ isOpen: props.open });
|
5776
|
+
const { modalProps, underlayProps } = useModalOverlay({}, state, ref);
|
5777
|
+
if (!state.isOpen) {
|
5778
|
+
return null;
|
5779
|
+
}
|
5780
|
+
return /* @__PURE__ */ React53.createElement(Overlay2, null, /* @__PURE__ */ React53.createElement(Modal, {
|
5781
|
+
open: true
|
5782
|
+
}, /* @__PURE__ */ React53.createElement(Modal.BackDrop, __spreadValues({}, underlayProps)), /* @__PURE__ */ React53.createElement(Modal.Dialog, __spreadValues({
|
5783
|
+
ref,
|
5784
|
+
size: "sm"
|
5785
|
+
}, modalProps), /* @__PURE__ */ React53.createElement(DialogWrapper, __spreadValues({}, props)))));
|
5786
|
+
};
|
5787
|
+
var DialogWrapper = ({
|
5732
5788
|
title,
|
5733
5789
|
type = "confirmation",
|
5734
|
-
open,
|
5735
5790
|
children,
|
5736
5791
|
primaryAction,
|
5737
5792
|
secondaryAction
|
5738
5793
|
}) => {
|
5739
5794
|
const ref = React53.useRef(null);
|
5740
|
-
const state = useOverlayTriggerState2({ isOpen: open });
|
5741
|
-
const { modalProps, underlayProps } = useModalOverlay({ isDismissable: false }, state, ref);
|
5742
5795
|
const labelledBy = useId();
|
5743
5796
|
const describedBy = useId();
|
5744
5797
|
const { dialogProps } = useDialog(
|
5745
5798
|
{ "role": "alertdialog", "aria-labelledby": labelledBy, "aria-describedby": describedBy },
|
5746
5799
|
ref
|
5747
5800
|
);
|
5748
|
-
|
5749
|
-
|
5750
|
-
}
|
5751
|
-
|
5752
|
-
|
5753
|
-
}, /* @__PURE__ */ React53.createElement(Modal.BackDrop, __spreadValues({}, underlayProps)), /* @__PURE__ */ React53.createElement(FocusScope2, {
|
5754
|
-
contain: true,
|
5755
|
-
restoreFocus: true,
|
5756
|
-
autoFocus: true
|
5757
|
-
}, /* @__PURE__ */ React53.createElement(Modal.Dialog, __spreadValues(__spreadValues({
|
5758
|
-
ref,
|
5759
|
-
size: "sm"
|
5760
|
-
}, modalProps), dialogProps), /* @__PURE__ */ React53.createElement(Modal.Header, null, /* @__PURE__ */ React53.createElement(Icon, {
|
5801
|
+
return /* @__PURE__ */ React53.createElement("div", __spreadProps(__spreadValues({
|
5802
|
+
ref
|
5803
|
+
}, dialogProps), {
|
5804
|
+
className: tw("outline-none")
|
5805
|
+
}), /* @__PURE__ */ React53.createElement(Modal.Header, null, /* @__PURE__ */ React53.createElement(Icon, {
|
5761
5806
|
icon: DIALOG_ICONS_AND_COLORS[type].icon,
|
5762
5807
|
color: DIALOG_ICONS_AND_COLORS[type].color,
|
5763
5808
|
fontSize: 20
|
@@ -5771,7 +5816,7 @@ var Dialog = ({
|
|
5771
5816
|
key: secondaryAction.text
|
5772
5817
|
}, omit7(secondaryAction, "text")), secondaryAction.text), /* @__PURE__ */ React53.createElement(SecondaryButton, __spreadValues({
|
5773
5818
|
key: primaryAction.text
|
5774
|
-
}, omit7(primaryAction, "text")), primaryAction.text))))
|
5819
|
+
}, omit7(primaryAction, "text")), primaryAction.text))));
|
5775
5820
|
};
|
5776
5821
|
|
5777
5822
|
// src/molecules/Divider/Divider.tsx
|
@@ -5806,15 +5851,28 @@ var Divider2 = (_a) => {
|
|
5806
5851
|
};
|
5807
5852
|
|
5808
5853
|
// src/molecules/Dropdown/Dropdown.tsx
|
5809
|
-
import
|
5854
|
+
import React57 from "react";
|
5810
5855
|
|
5811
5856
|
// src/molecules/Popover/Popover.tsx
|
5812
|
-
import
|
5857
|
+
import React56, { useRef as useRef6 } from "react";
|
5813
5858
|
import { PressResponder, usePress } from "@react-aria/interactions";
|
5814
|
-
import {
|
5815
|
-
import { mergeProps as
|
5859
|
+
import { useOverlayTrigger } from "@react-aria/overlays";
|
5860
|
+
import { mergeProps as mergeProps2 } from "@react-aria/utils";
|
5816
5861
|
import { useOverlayTriggerState as useOverlayTriggerState3 } from "@react-stately/overlays";
|
5817
5862
|
|
5863
|
+
// src/molecules/Popover/Dialog.tsx
|
5864
|
+
import React55 from "react";
|
5865
|
+
import { useDialog as useDialog2 } from "@react-aria/dialog";
|
5866
|
+
var Dialog2 = ({ children }) => {
|
5867
|
+
const ref = React55.useRef(null);
|
5868
|
+
const { dialogProps } = useDialog2({}, ref);
|
5869
|
+
return /* @__PURE__ */ React55.createElement("div", __spreadProps(__spreadValues({
|
5870
|
+
ref
|
5871
|
+
}, dialogProps), {
|
5872
|
+
className: tw("outline-none")
|
5873
|
+
}), children);
|
5874
|
+
};
|
5875
|
+
|
5818
5876
|
// src/molecules/Popover/PopoverContext.tsx
|
5819
5877
|
import { createContext, useContext as useContext2 } from "react";
|
5820
5878
|
var PopoverContext = createContext(null);
|
@@ -5828,65 +5886,46 @@ var usePopoverContext = () => {
|
|
5828
5886
|
|
5829
5887
|
// src/molecules/Popover/Popover.tsx
|
5830
5888
|
var Popover2 = (props) => {
|
5831
|
-
var _a;
|
5832
5889
|
const {
|
5833
5890
|
id,
|
5834
|
-
|
5835
|
-
|
5836
|
-
|
5837
|
-
|
5838
|
-
|
5839
|
-
|
5891
|
+
type,
|
5892
|
+
placement = "bottom-left",
|
5893
|
+
containFocus = true,
|
5894
|
+
isKeyboardDismissDisabled = false,
|
5895
|
+
targetRef,
|
5896
|
+
offset,
|
5897
|
+
crossOffset,
|
5898
|
+
shouldFlip
|
5840
5899
|
} = props;
|
5841
5900
|
const triggerRef = useRef6(null);
|
5842
|
-
const overlayRef = useRef6(null);
|
5843
5901
|
const state = useOverlayTriggerState3(props);
|
5844
|
-
const {
|
5845
|
-
|
5846
|
-
placement,
|
5847
|
-
arrowProps
|
5848
|
-
} = useOverlayPosition3({
|
5849
|
-
targetRef: targetRef != null ? targetRef : triggerRef,
|
5850
|
-
overlayRef,
|
5851
|
-
placement: _placement.replace("-", " "),
|
5852
|
-
offset: props.offset,
|
5853
|
-
shouldFlip: props.shouldFlip,
|
5854
|
-
isOpen: state.isOpen
|
5855
|
-
});
|
5856
|
-
const { triggerProps, overlayProps: otherOverlayProps } = useOverlayTrigger(
|
5857
|
-
{ type: (_a = props.type) != null ? _a : "dialog" },
|
5858
|
-
state,
|
5859
|
-
triggerRef
|
5860
|
-
);
|
5861
|
-
return /* @__PURE__ */ React55.createElement(PopoverContext.Provider, {
|
5902
|
+
const { triggerProps, overlayProps } = useOverlayTrigger({ type: type != null ? type : "dialog" }, state, triggerRef);
|
5903
|
+
return /* @__PURE__ */ React56.createElement(PopoverContext.Provider, {
|
5862
5904
|
value: {
|
5863
5905
|
state
|
5864
5906
|
}
|
5865
|
-
},
|
5907
|
+
}, React56.Children.map(props.children, (child) => {
|
5866
5908
|
if (isComponentType(child, Popover2.Trigger)) {
|
5867
|
-
return /* @__PURE__ */
|
5868
|
-
ref: triggerRef
|
5869
|
-
|
5870
|
-
}, triggerProps), /* @__PURE__ */ React55.createElement(PopoverTriggerWrapper, {
|
5909
|
+
return /* @__PURE__ */ React56.createElement(PressResponder, __spreadValues({
|
5910
|
+
ref: triggerRef
|
5911
|
+
}, triggerProps), /* @__PURE__ */ React56.createElement(PopoverTriggerWrapper, {
|
5871
5912
|
"data-testid": props["data-testid"],
|
5872
5913
|
"aria-controls": id
|
5873
5914
|
}, child.props.children));
|
5874
5915
|
}
|
5875
5916
|
if (isComponentType(child, Popover2.Panel)) {
|
5876
|
-
return /* @__PURE__ */
|
5877
|
-
|
5878
|
-
|
5879
|
-
onClose: state.close,
|
5917
|
+
return state.isOpen && /* @__PURE__ */ React56.createElement(PopoverOverlay, __spreadValues({
|
5918
|
+
triggerRef: targetRef != null ? targetRef : triggerRef,
|
5919
|
+
state,
|
5880
5920
|
placement,
|
5881
|
-
|
5882
|
-
|
5921
|
+
isNonModal: !containFocus,
|
5922
|
+
autoFocus: !containFocus,
|
5883
5923
|
isKeyboardDismissDisabled,
|
5884
|
-
|
5885
|
-
|
5886
|
-
|
5887
|
-
|
5888
|
-
|
5889
|
-
}), child.props.children);
|
5924
|
+
className: child.props.className,
|
5925
|
+
offset,
|
5926
|
+
crossOffset,
|
5927
|
+
shouldFlip
|
5928
|
+
}, overlayProps), containFocus ? /* @__PURE__ */ React56.createElement(Dialog2, null, child.props.children) : child.props.children);
|
5890
5929
|
}
|
5891
5930
|
throw new Error("Invalid children element type");
|
5892
5931
|
}));
|
@@ -5905,7 +5944,7 @@ var asPopoverButton = (Component, displayName) => {
|
|
5905
5944
|
state.close();
|
5906
5945
|
onClick == null ? void 0 : onClick(e);
|
5907
5946
|
};
|
5908
|
-
return /* @__PURE__ */
|
5947
|
+
return /* @__PURE__ */ React56.createElement(Component, __spreadProps(__spreadValues({}, props), {
|
5909
5948
|
onClick: handleClick
|
5910
5949
|
}));
|
5911
5950
|
};
|
@@ -5918,22 +5957,21 @@ var PopoverTriggerWrapper = (_a) => {
|
|
5918
5957
|
var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
|
5919
5958
|
var _a2;
|
5920
5959
|
const ref = useRef6(null);
|
5921
|
-
const trigger =
|
5960
|
+
const trigger = React56.Children.only(children);
|
5922
5961
|
const { pressProps } = usePress(__spreadProps(__spreadValues({}, rest), { ref }));
|
5923
|
-
return
|
5962
|
+
return React56.cloneElement(trigger, __spreadProps(__spreadValues({
|
5924
5963
|
"ref": ref
|
5925
|
-
},
|
5964
|
+
}, mergeProps2(pressProps, trigger.props)), {
|
5926
5965
|
"aria-controls": (_a2 = rest["aria-controls"]) != null ? _a2 : pressProps["aria-controls"]
|
5927
5966
|
}));
|
5928
5967
|
};
|
5929
5968
|
|
5930
5969
|
// src/molecules/Dropdown/Dropdown.tsx
|
5931
5970
|
var Dropdown = ({ children, content, placement = "bottom-left" }) => {
|
5932
|
-
return /* @__PURE__ */
|
5971
|
+
return /* @__PURE__ */ React57.createElement(Popover2, {
|
5933
5972
|
type: "menu",
|
5934
|
-
placement
|
5935
|
-
|
5936
|
-
}, /* @__PURE__ */ React56.createElement(Popover2.Trigger, null, children), /* @__PURE__ */ React56.createElement(Popover2.Panel, null, content));
|
5973
|
+
placement
|
5974
|
+
}, /* @__PURE__ */ React57.createElement(Popover2.Trigger, null, children), /* @__PURE__ */ React57.createElement(Popover2.Panel, null, content));
|
5937
5975
|
};
|
5938
5976
|
var DropdownMenu = ({
|
5939
5977
|
title,
|
@@ -5942,26 +5980,26 @@ var DropdownMenu = ({
|
|
5942
5980
|
triggerId,
|
5943
5981
|
setClose = () => void 0
|
5944
5982
|
}) => {
|
5945
|
-
const menuRef =
|
5946
|
-
|
5983
|
+
const menuRef = React57.useRef(null);
|
5984
|
+
React57.useEffect(() => {
|
5947
5985
|
const id = setTimeout(() => {
|
5948
5986
|
var _a, _b, _c;
|
5949
5987
|
return (_c = (_b = (_a = menuRef.current) == null ? void 0 : _a.children) == null ? void 0 : _b[0]) == null ? void 0 : _c.focus();
|
5950
5988
|
});
|
5951
5989
|
return () => clearTimeout(id);
|
5952
5990
|
}, [menuRef.current]);
|
5953
|
-
return /* @__PURE__ */
|
5991
|
+
return /* @__PURE__ */ React57.createElement("div", {
|
5954
5992
|
style: { minWidth: "250px" },
|
5955
5993
|
className: tw("py-3 bg-white")
|
5956
|
-
}, !!title && /* @__PURE__ */
|
5994
|
+
}, !!title && /* @__PURE__ */ React57.createElement("div", {
|
5957
5995
|
className: tw("px-4 py-4 text-left text-grey-100 typography-default-strong")
|
5958
|
-
}, title), /* @__PURE__ */
|
5996
|
+
}, title), /* @__PURE__ */ React57.createElement("ol", {
|
5959
5997
|
role: "menu",
|
5960
5998
|
ref: menuRef,
|
5961
5999
|
id: contentId,
|
5962
6000
|
"aria-labelledby": triggerId
|
5963
|
-
},
|
5964
|
-
return
|
6001
|
+
}, React57.Children.map(children, (child) => {
|
6002
|
+
return React57.cloneElement(child, { setClose });
|
5965
6003
|
})));
|
5966
6004
|
};
|
5967
6005
|
var DropdownItem = (_a) => {
|
@@ -6016,10 +6054,10 @@ var DropdownItem = (_a) => {
|
|
6016
6054
|
handleSelect();
|
6017
6055
|
}
|
6018
6056
|
};
|
6019
|
-
const itemContent = /* @__PURE__ */
|
6057
|
+
const itemContent = /* @__PURE__ */ React57.createElement("div", {
|
6020
6058
|
className: tw("py-3 px-4")
|
6021
6059
|
}, children);
|
6022
|
-
return /* @__PURE__ */
|
6060
|
+
return /* @__PURE__ */ React57.createElement("li", __spreadProps(__spreadValues({
|
6023
6061
|
role: "menuitem",
|
6024
6062
|
tabIndex: -1,
|
6025
6063
|
onClick: handleClick,
|
@@ -6030,11 +6068,11 @@ var DropdownItem = (_a) => {
|
|
6030
6068
|
"text-grey-10 cursor-not-allowed": disabled,
|
6031
6069
|
"text-primary-70 hover:text-primary-80": color === "danger" && !disabled
|
6032
6070
|
})
|
6033
|
-
}), tooltip ? /* @__PURE__ */
|
6071
|
+
}), tooltip ? /* @__PURE__ */ React57.createElement(Tooltip, {
|
6034
6072
|
content: tooltip,
|
6035
6073
|
placement: tooltipPlacement,
|
6036
6074
|
inline: false
|
6037
|
-
}, /* @__PURE__ */
|
6075
|
+
}, /* @__PURE__ */ React57.createElement("div", {
|
6038
6076
|
tabIndex: 0,
|
6039
6077
|
className: tw("grow")
|
6040
6078
|
}, itemContent)) : itemContent);
|
@@ -6043,49 +6081,48 @@ Dropdown.Menu = DropdownMenu;
|
|
6043
6081
|
Dropdown.Item = DropdownItem;
|
6044
6082
|
|
6045
6083
|
// src/molecules/DropdownMenu/DropdownMenu.tsx
|
6046
|
-
import
|
6084
|
+
import React61 from "react";
|
6047
6085
|
import { useFilter } from "@react-aria/i18n";
|
6048
6086
|
import { PressResponder as PressResponder2, usePress as usePress2 } from "@react-aria/interactions";
|
6049
6087
|
import { useMenu, useMenuItem, useMenuSection, useMenuTrigger } from "@react-aria/menu";
|
6050
|
-
import { useOverlayPosition as useOverlayPosition4 } from "@react-aria/overlays";
|
6051
6088
|
import { useSeparator } from "@react-aria/separator";
|
6052
|
-
import { mergeProps as
|
6089
|
+
import { mergeProps as mergeProps3 } from "@react-aria/utils";
|
6053
6090
|
import { Item as Item4, Section } from "@react-stately/collections";
|
6054
6091
|
import { useMenuTriggerState } from "@react-stately/menu";
|
6055
6092
|
import { useTreeState } from "@react-stately/tree";
|
6056
6093
|
|
6057
6094
|
// src/molecules/Input/Input.tsx
|
6058
|
-
import
|
6095
|
+
import React59, { forwardRef, useImperativeHandle, useRef as useRef7, useState as useState6 } from "react";
|
6059
6096
|
import omit8 from "lodash/omit";
|
6060
6097
|
import toString from "lodash/toString";
|
6061
6098
|
import uniqueId3 from "lodash/uniqueId";
|
6062
6099
|
|
6063
6100
|
// src/utils/form/InputAdornment/InputAdornment.tsx
|
6064
|
-
import
|
6101
|
+
import React58 from "react";
|
6065
6102
|
var import_cross4 = __toESM(require_cross());
|
6066
6103
|
var import_error3 = __toESM(require_error());
|
6067
6104
|
var import_search2 = __toESM(require_search());
|
6068
6105
|
var import_tick3 = __toESM(require_tick());
|
6069
6106
|
var InputAdornment = ({ placement = "right", className, dense, children }) => {
|
6070
|
-
return /* @__PURE__ */
|
6107
|
+
return /* @__PURE__ */ React58.createElement("span", {
|
6071
6108
|
className: classNames(className, "absolute inset-y-0 grow-0 text-grey-40 flex items-center mx-3", {
|
6072
6109
|
"right-0": placement === "right",
|
6073
6110
|
"left-0": placement === "left",
|
6074
6111
|
"typography-small": dense,
|
6075
6112
|
"typography-default-strong": !dense
|
6076
6113
|
})
|
6077
|
-
}, /* @__PURE__ */
|
6114
|
+
}, /* @__PURE__ */ React58.createElement(Flexbox, {
|
6078
6115
|
gap: "3",
|
6079
6116
|
wrap: "wrap"
|
6080
6117
|
}, children));
|
6081
6118
|
};
|
6082
|
-
var SearchIcon = ({ onClick }) => /* @__PURE__ */
|
6119
|
+
var SearchIcon = ({ onClick }) => /* @__PURE__ */ React58.createElement(Icon, {
|
6083
6120
|
icon: import_search2.default,
|
6084
6121
|
color: "grey-30",
|
6085
6122
|
"data-testid": "icon-search",
|
6086
6123
|
onClick
|
6087
6124
|
});
|
6088
|
-
var ResetIcon = ({ onClick }) => /* @__PURE__ */
|
6125
|
+
var ResetIcon = ({ onClick }) => /* @__PURE__ */ React58.createElement(Icon, {
|
6089
6126
|
className: "hover:cursor-pointer",
|
6090
6127
|
icon: import_cross4.default,
|
6091
6128
|
color: "grey-30",
|
@@ -6115,7 +6152,7 @@ var createInput = (displayName, opts = {}) => {
|
|
6115
6152
|
"readOnly"
|
6116
6153
|
]);
|
6117
6154
|
var _a2;
|
6118
|
-
const inputRef =
|
6155
|
+
const inputRef = React59.useRef(null);
|
6119
6156
|
useImperativeHandle(ref, () => inputRef.current);
|
6120
6157
|
const handleReset = () => {
|
6121
6158
|
var _a3;
|
@@ -6128,11 +6165,11 @@ var createInput = (displayName, opts = {}) => {
|
|
6128
6165
|
el.focus();
|
6129
6166
|
}
|
6130
6167
|
};
|
6131
|
-
return /* @__PURE__ */
|
6168
|
+
return /* @__PURE__ */ React59.createElement("span", {
|
6132
6169
|
className: tw("relative block")
|
6133
|
-
}, opts.adornment && /* @__PURE__ */
|
6170
|
+
}, opts.adornment && /* @__PURE__ */ React59.createElement(InputAdornment, {
|
6134
6171
|
placement: "left"
|
6135
|
-
}, opts.adornment), /* @__PURE__ */
|
6172
|
+
}, opts.adornment), /* @__PURE__ */ React59.createElement("input", __spreadProps(__spreadValues({
|
6136
6173
|
ref: inputRef,
|
6137
6174
|
type
|
6138
6175
|
}, props), {
|
@@ -6147,20 +6184,20 @@ var createInput = (displayName, opts = {}) => {
|
|
6147
6184
|
getCommonInputStyles({ readOnly, valid }),
|
6148
6185
|
props.className
|
6149
6186
|
)
|
6150
|
-
})), opts.canReset && (props.value || ((_a2 = inputRef.current) == null ? void 0 : _a2.value)) && /* @__PURE__ */
|
6187
|
+
})), opts.canReset && (props.value || ((_a2 = inputRef.current) == null ? void 0 : _a2.value)) && /* @__PURE__ */ React59.createElement(InputAdornment, null, /* @__PURE__ */ React59.createElement(ResetIcon, {
|
6151
6188
|
onClick: handleReset
|
6152
|
-
})), !opts.canReset && endAdornment && /* @__PURE__ */
|
6189
|
+
})), !opts.canReset && endAdornment && /* @__PURE__ */ React59.createElement(InputAdornment, null, endAdornment));
|
6153
6190
|
}
|
6154
6191
|
);
|
6155
6192
|
InputComponent.displayName = displayName;
|
6156
|
-
InputComponent.Skeleton = () => /* @__PURE__ */
|
6193
|
+
InputComponent.Skeleton = () => /* @__PURE__ */ React59.createElement(Skeleton, {
|
6157
6194
|
height: 38
|
6158
6195
|
});
|
6159
6196
|
return InputComponent;
|
6160
6197
|
};
|
6161
6198
|
var InputBase = createInput("InputBase");
|
6162
|
-
var SearchInput = createInput("SearchInput", { adornment: /* @__PURE__ */
|
6163
|
-
var Input2 =
|
6199
|
+
var SearchInput = createInput("SearchInput", { adornment: /* @__PURE__ */ React59.createElement(SearchIcon, null), canReset: true });
|
6200
|
+
var Input2 = React59.forwardRef((_a, ref) => {
|
6164
6201
|
var _b = _a, { readOnly = false } = _b, props = __objRest(_b, ["readOnly"]);
|
6165
6202
|
var _a2, _b2, _c;
|
6166
6203
|
const [value, setValue] = useState6((_b2 = (_a2 = props.value) != null ? _a2 : props.defaultValue) != null ? _b2 : "");
|
@@ -6169,12 +6206,12 @@ var Input2 = React58.forwardRef((_a, ref) => {
|
|
6169
6206
|
const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
|
6170
6207
|
const _d = getLabelControlProps(props), { "data-testid": dataTestId } = _d, labelControlProps = __objRest(_d, ["data-testid"]);
|
6171
6208
|
const baseProps = omit8(props, Object.keys(labelControlProps));
|
6172
|
-
return /* @__PURE__ */
|
6209
|
+
return /* @__PURE__ */ React59.createElement(LabelControl, __spreadValues({
|
6173
6210
|
id: `${id.current}-label`,
|
6174
6211
|
htmlFor: id.current,
|
6175
6212
|
messageId: errorMessageId,
|
6176
6213
|
length: value !== void 0 ? toString(value).length : void 0
|
6177
|
-
}, labelControlProps), /* @__PURE__ */
|
6214
|
+
}, labelControlProps), /* @__PURE__ */ React59.createElement(InputBase, __spreadProps(__spreadValues(__spreadValues({
|
6178
6215
|
ref
|
6179
6216
|
}, baseProps), errorProps), {
|
6180
6217
|
id: id.current,
|
@@ -6192,41 +6229,42 @@ var Input2 = React58.forwardRef((_a, ref) => {
|
|
6192
6229
|
})));
|
6193
6230
|
});
|
6194
6231
|
Input2.displayName = "Input";
|
6195
|
-
Input2.Skeleton = () => /* @__PURE__ */
|
6232
|
+
Input2.Skeleton = () => /* @__PURE__ */ React59.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React59.createElement(InputBase.Skeleton, null));
|
6196
6233
|
Input2.Skeleton.displayName = "Input.Skeleton";
|
6197
6234
|
|
6198
6235
|
// src/atoms/DropdownMenu/DropdownMenu.tsx
|
6199
|
-
import
|
6236
|
+
import React60 from "react";
|
6200
6237
|
var import_tick4 = __toESM(require_tick());
|
6201
|
-
var DropdownMenu2 =
|
6238
|
+
var DropdownMenu2 = React60.forwardRef(
|
6202
6239
|
(_a, ref) => {
|
6203
6240
|
var _b = _a, { maxHeight = "450px", minWidth = "125px", maxWidth, className, children } = _b, props = __objRest(_b, ["maxHeight", "minWidth", "maxWidth", "className", "children"]);
|
6204
|
-
return /* @__PURE__ */
|
6241
|
+
return /* @__PURE__ */ React60.createElement("div", __spreadValues({
|
6205
6242
|
ref,
|
6206
6243
|
style: { maxHeight, minWidth, maxWidth },
|
6207
6244
|
className: classNames(className, "bg-white w-full flex flex-col overflow-x-hidden typography-small text-grey-70")
|
6208
6245
|
}, props), children);
|
6209
6246
|
}
|
6210
6247
|
);
|
6211
|
-
var ContentContainer = ({ children }) => /* @__PURE__ */
|
6248
|
+
var ContentContainer = ({ children }) => /* @__PURE__ */ React60.createElement("div", {
|
6212
6249
|
className: tw("p-3 overflow-y-auto overflow-x-hidden")
|
6213
6250
|
}, children);
|
6214
6251
|
DropdownMenu2.ContentContainer = ContentContainer;
|
6215
|
-
var List2 =
|
6252
|
+
var List2 = React60.forwardRef(
|
6216
6253
|
(_a, ref) => {
|
6217
|
-
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
6218
|
-
return /* @__PURE__ */
|
6219
|
-
ref
|
6254
|
+
var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
|
6255
|
+
return /* @__PURE__ */ React60.createElement("ul", __spreadValues({
|
6256
|
+
ref,
|
6257
|
+
className: classNames(className, "outline-none ring-0")
|
6220
6258
|
}, props), children);
|
6221
6259
|
}
|
6222
6260
|
);
|
6223
6261
|
DropdownMenu2.List = List2;
|
6224
|
-
var Group2 =
|
6262
|
+
var Group2 = React60.forwardRef(
|
6225
6263
|
(_a, ref) => {
|
6226
6264
|
var _b = _a, { className, title, titleProps, children } = _b, props = __objRest(_b, ["className", "title", "titleProps", "children"]);
|
6227
|
-
return /* @__PURE__ */
|
6265
|
+
return /* @__PURE__ */ React60.createElement("li", __spreadValues({
|
6228
6266
|
ref
|
6229
|
-
}, props), title && /* @__PURE__ */
|
6267
|
+
}, props), title && /* @__PURE__ */ React60.createElement("div", __spreadValues({
|
6230
6268
|
className: classNames(className, "p-3 text-grey-40 uppercase cursor-default typography-caption", {
|
6231
6269
|
"text-grey-20": props.disabled
|
6232
6270
|
})
|
@@ -6234,10 +6272,10 @@ var Group2 = React59.forwardRef(
|
|
6234
6272
|
}
|
6235
6273
|
);
|
6236
6274
|
DropdownMenu2.Group = Group2;
|
6237
|
-
var Item3 =
|
6275
|
+
var Item3 = React60.forwardRef(
|
6238
6276
|
(_a, ref) => {
|
6239
6277
|
var _b = _a, { kind, highlighted, selected, className, icon, children } = _b, props = __objRest(_b, ["kind", "highlighted", "selected", "className", "icon", "children"]);
|
6240
|
-
return /* @__PURE__ */
|
6278
|
+
return /* @__PURE__ */ React60.createElement("li", __spreadValues({
|
6241
6279
|
ref,
|
6242
6280
|
className: classNames(className, "flex items-center gap-x-3 p-3 outline-none", {
|
6243
6281
|
"cursor-pointer hover:bg-grey-0": !props.disabled,
|
@@ -6245,30 +6283,30 @@ var Item3 = React59.forwardRef(
|
|
6245
6283
|
"text-primary-80": kind === "action",
|
6246
6284
|
"text-grey-20 cursor-not-allowed": props.disabled
|
6247
6285
|
})
|
6248
|
-
}, props), icon && /* @__PURE__ */
|
6286
|
+
}, props), icon && /* @__PURE__ */ React60.createElement(InlineIcon, {
|
6249
6287
|
icon
|
6250
|
-
}), /* @__PURE__ */
|
6288
|
+
}), /* @__PURE__ */ React60.createElement("span", {
|
6251
6289
|
className: tw("grow")
|
6252
|
-
}, children), selected && /* @__PURE__ */
|
6290
|
+
}, children), selected && /* @__PURE__ */ React60.createElement(InlineIcon, {
|
6253
6291
|
icon: import_tick4.default
|
6254
6292
|
}));
|
6255
6293
|
}
|
6256
6294
|
);
|
6257
6295
|
DropdownMenu2.Item = Item3;
|
6258
|
-
var Description = ({ disabled, children }) => /* @__PURE__ */
|
6296
|
+
var Description = ({ disabled, children }) => /* @__PURE__ */ React60.createElement(Typography2.Caption, {
|
6259
6297
|
color: disabled ? "grey-20" : "grey-40"
|
6260
6298
|
}, children);
|
6261
6299
|
DropdownMenu2.Description = Description;
|
6262
6300
|
var Separator = (_a) => {
|
6263
6301
|
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
6264
|
-
return /* @__PURE__ */
|
6302
|
+
return /* @__PURE__ */ React60.createElement("li", __spreadProps(__spreadValues({}, props), {
|
6265
6303
|
className: classNames(className, tw("m-3 block bg-grey-5 h-[1px]"))
|
6266
6304
|
}));
|
6267
6305
|
};
|
6268
6306
|
DropdownMenu2.Separator = Separator;
|
6269
6307
|
var EmptyStateContainer2 = (_a) => {
|
6270
6308
|
var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
|
6271
|
-
return /* @__PURE__ */
|
6309
|
+
return /* @__PURE__ */ React60.createElement("div", __spreadValues({
|
6272
6310
|
className: classNames(tw("border border-dashed border-grey-10 p-3"), className)
|
6273
6311
|
}, props), children);
|
6274
6312
|
};
|
@@ -6323,29 +6361,19 @@ var DropdownMenu3 = (_a) => {
|
|
6323
6361
|
"footer",
|
6324
6362
|
"children"
|
6325
6363
|
]);
|
6326
|
-
const triggerRef =
|
6327
|
-
const overlayRef = React60.useRef(null);
|
6364
|
+
const triggerRef = React61.useRef(null);
|
6328
6365
|
const [trigger, items] = extractTriggerAndItems(children);
|
6329
6366
|
const state = useMenuTriggerState(props);
|
6330
6367
|
const { menuTriggerProps, menuProps } = useMenuTrigger({}, state, triggerRef);
|
6331
|
-
|
6332
|
-
targetRef: triggerRef,
|
6333
|
-
overlayRef,
|
6334
|
-
placement: placement.replace("-", " "),
|
6335
|
-
shouldFlip: true,
|
6336
|
-
isOpen: state.isOpen
|
6337
|
-
});
|
6338
|
-
return /* @__PURE__ */ React60.createElement("div", null, /* @__PURE__ */ React60.createElement(PressResponder2, __spreadValues({
|
6368
|
+
return /* @__PURE__ */ React61.createElement("div", null, /* @__PURE__ */ React61.createElement(PressResponder2, __spreadValues({
|
6339
6369
|
ref: triggerRef,
|
6340
6370
|
onPress: () => state.toggle()
|
6341
|
-
}, menuTriggerProps), /* @__PURE__ */
|
6342
|
-
|
6343
|
-
|
6344
|
-
|
6345
|
-
|
6346
|
-
|
6347
|
-
onClose: state.close
|
6348
|
-
}, overlayProps), /* @__PURE__ */ React60.createElement(MenuWrapper, __spreadValues({
|
6371
|
+
}, menuTriggerProps), /* @__PURE__ */ React61.createElement(TriggerWrapper, null, trigger.props.children)), state.isOpen && /* @__PURE__ */ React61.createElement(PopoverOverlay, {
|
6372
|
+
triggerRef,
|
6373
|
+
state,
|
6374
|
+
placement,
|
6375
|
+
focusable: false
|
6376
|
+
}, /* @__PURE__ */ React61.createElement(MenuWrapper, __spreadValues({
|
6349
6377
|
onAction,
|
6350
6378
|
selectionMode,
|
6351
6379
|
selection,
|
@@ -6370,13 +6398,13 @@ DropdownMenu3.Section = Section;
|
|
6370
6398
|
DropdownMenu3.Section.displayName = "DropdownMenu.Section";
|
6371
6399
|
var TriggerWrapper = (_a) => {
|
6372
6400
|
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
6373
|
-
const ref =
|
6401
|
+
const ref = React61.useRef(null);
|
6374
6402
|
const { pressProps } = usePress2(__spreadProps(__spreadValues({}, props), { ref }));
|
6375
|
-
const trigger =
|
6376
|
-
if (!trigger || !
|
6403
|
+
const trigger = React61.Children.only(children);
|
6404
|
+
if (!trigger || !React61.isValidElement(trigger)) {
|
6377
6405
|
throw new Error("<DropdownMenu.Trigger> must have valid child");
|
6378
6406
|
}
|
6379
|
-
return
|
6407
|
+
return React61.cloneElement(trigger, __spreadValues({ ref }, mergeProps3(pressProps, props)));
|
6380
6408
|
};
|
6381
6409
|
var isSectionNode = (item) => item.type === "section";
|
6382
6410
|
var isItemNode = (item) => item.type === "item";
|
@@ -6398,7 +6426,7 @@ var MenuWrapper = (_a) => {
|
|
6398
6426
|
"header",
|
6399
6427
|
"footer"
|
6400
6428
|
]);
|
6401
|
-
const ref =
|
6429
|
+
const ref = React61.useRef(null);
|
6402
6430
|
const disabledKeys = getDisabledItemKeys(props.children);
|
6403
6431
|
const state = useTreeState(__spreadValues({
|
6404
6432
|
disabledKeys,
|
@@ -6406,30 +6434,30 @@ var MenuWrapper = (_a) => {
|
|
6406
6434
|
}, props));
|
6407
6435
|
const { menuProps } = useMenu(props, state, ref);
|
6408
6436
|
const { contains } = useFilter({ sensitivity: "base" });
|
6409
|
-
const [search, setSearch] =
|
6410
|
-
const filteredCollection =
|
6437
|
+
const [search, setSearch] = React61.useState("");
|
6438
|
+
const filteredCollection = React61.useMemo(
|
6411
6439
|
() => searchable ? filterCollection(state.collection, search, contains) : state.collection,
|
6412
6440
|
[state.collection, search, contains]
|
6413
6441
|
);
|
6414
|
-
return /* @__PURE__ */
|
6442
|
+
return /* @__PURE__ */ React61.createElement(DropdownMenu2, {
|
6415
6443
|
minWidth: minWidth !== void 0 ? `${minWidth}px` : void 0,
|
6416
6444
|
maxWidth: maxWidth !== void 0 ? `${maxWidth}px` : void 0
|
6417
|
-
}, header, /* @__PURE__ */
|
6445
|
+
}, header, /* @__PURE__ */ React61.createElement(DropdownMenu2.ContentContainer, null, searchable && /* @__PURE__ */ React61.createElement(SearchInput, {
|
6418
6446
|
"aria-label": "search",
|
6419
6447
|
value: search,
|
6420
6448
|
onChange: (e) => setSearch(e.target.value),
|
6421
6449
|
className: tw("mb-5")
|
6422
|
-
}), filteredCollection.size === 0 && emptyState && /* @__PURE__ */
|
6450
|
+
}), filteredCollection.size === 0 && emptyState && /* @__PURE__ */ React61.createElement(DropdownMenu2.EmptyStateContainer, null, emptyState), /* @__PURE__ */ React61.createElement(DropdownMenu2.List, __spreadValues({
|
6423
6451
|
ref
|
6424
6452
|
}, menuProps), Array.from(filteredCollection).map((item) => {
|
6425
6453
|
if (isSectionNode(item)) {
|
6426
|
-
return /* @__PURE__ */
|
6454
|
+
return /* @__PURE__ */ React61.createElement(SectionWrapper, {
|
6427
6455
|
key: item.key,
|
6428
6456
|
section: item,
|
6429
6457
|
state
|
6430
6458
|
});
|
6431
6459
|
} else if (isItemNode(item)) {
|
6432
|
-
return /* @__PURE__ */
|
6460
|
+
return /* @__PURE__ */ React61.createElement(ItemWrapper, {
|
6433
6461
|
key: item.key,
|
6434
6462
|
item,
|
6435
6463
|
state
|
@@ -6438,14 +6466,14 @@ var MenuWrapper = (_a) => {
|
|
6438
6466
|
}))), footer);
|
6439
6467
|
};
|
6440
6468
|
var ItemWrapper = ({ item, state }) => {
|
6441
|
-
const ref =
|
6469
|
+
const ref = React61.useRef(null);
|
6442
6470
|
const { menuItemProps, descriptionProps, isSelected, isFocused, isDisabled } = useMenuItem(
|
6443
6471
|
{ key: item.key, closeOnSelect: item.props.closeOnSelect },
|
6444
6472
|
state,
|
6445
6473
|
ref
|
6446
6474
|
);
|
6447
6475
|
const { icon, description, kind = "default" } = item.props;
|
6448
|
-
return /* @__PURE__ */
|
6476
|
+
return /* @__PURE__ */ React61.createElement(DropdownMenu2.Item, __spreadProps(__spreadValues({
|
6449
6477
|
ref
|
6450
6478
|
}, menuItemProps), {
|
6451
6479
|
kind,
|
@@ -6453,7 +6481,7 @@ var ItemWrapper = ({ item, state }) => {
|
|
6453
6481
|
highlighted: isFocused,
|
6454
6482
|
disabled: isDisabled,
|
6455
6483
|
icon
|
6456
|
-
}), item.rendered, description && /* @__PURE__ */
|
6484
|
+
}), item.rendered, description && /* @__PURE__ */ React61.createElement(DropdownMenu2.Description, __spreadValues({
|
6457
6485
|
disabled: isDisabled
|
6458
6486
|
}, descriptionProps), description));
|
6459
6487
|
};
|
@@ -6465,24 +6493,24 @@ var SectionWrapper = ({ section, state }) => {
|
|
6465
6493
|
const { separatorProps } = useSeparator({
|
6466
6494
|
elementType: "li"
|
6467
6495
|
});
|
6468
|
-
return /* @__PURE__ */
|
6496
|
+
return /* @__PURE__ */ React61.createElement(React61.Fragment, null, section.key !== state.collection.getFirstKey() && /* @__PURE__ */ React61.createElement(DropdownMenu2.Separator, __spreadValues({}, separatorProps)), /* @__PURE__ */ React61.createElement(DropdownMenu2.Group, __spreadValues({
|
6469
6497
|
title: section.rendered,
|
6470
6498
|
titleProps: headingProps
|
6471
|
-
}, itemProps), /* @__PURE__ */
|
6499
|
+
}, itemProps), /* @__PURE__ */ React61.createElement("ul", __spreadValues({}, groupProps), Array.from(section.childNodes).map((node) => /* @__PURE__ */ React61.createElement(ItemWrapper, {
|
6472
6500
|
key: node.key,
|
6473
6501
|
item: node,
|
6474
6502
|
state
|
6475
6503
|
})))));
|
6476
6504
|
};
|
6477
6505
|
var extractTriggerAndItems = (children) => {
|
6478
|
-
const [trigger, items] =
|
6506
|
+
const [trigger, items] = React61.Children.toArray(children);
|
6479
6507
|
if (!isComponentType(trigger, MenuTrigger) || !isComponentType(items, MenuItems)) {
|
6480
6508
|
throw new Error("<DropdownMenu> must have <DropdownMenu.Trigger> and <DropdownMenu.Items> defined");
|
6481
6509
|
}
|
6482
6510
|
return [trigger, items];
|
6483
6511
|
};
|
6484
6512
|
var getDisabledItemKeys = (children) => {
|
6485
|
-
const keys =
|
6513
|
+
const keys = React61.Children.map(children, (child) => {
|
6486
6514
|
var _a, _b;
|
6487
6515
|
if (!child || typeof child === "function") {
|
6488
6516
|
return null;
|
@@ -6499,11 +6527,11 @@ var getDisabledItemKeys = (children) => {
|
|
6499
6527
|
};
|
6500
6528
|
|
6501
6529
|
// src/molecules/EmptyState/EmptyState.tsx
|
6502
|
-
import
|
6530
|
+
import React63 from "react";
|
6503
6531
|
import omit9 from "lodash/omit";
|
6504
6532
|
|
6505
6533
|
// src/molecules/Flexbox/FlexboxItem.tsx
|
6506
|
-
import
|
6534
|
+
import React62 from "react";
|
6507
6535
|
var FlexboxItem = Tailwindify(
|
6508
6536
|
({ htmlTag = "div", className, style, children, display, flex, grow, shrink, order, alignSelf }) => {
|
6509
6537
|
const hookStyle = useStyle({
|
@@ -6515,7 +6543,7 @@ var FlexboxItem = Tailwindify(
|
|
6515
6543
|
alignSelf
|
6516
6544
|
});
|
6517
6545
|
const HtmlElement = htmlTag;
|
6518
|
-
return /* @__PURE__ */
|
6546
|
+
return /* @__PURE__ */ React62.createElement(HtmlElement, {
|
6519
6547
|
style: __spreadValues(__spreadValues({}, hookStyle), style),
|
6520
6548
|
className
|
6521
6549
|
}, children);
|
@@ -6573,7 +6601,7 @@ var EmptyState = ({
|
|
6573
6601
|
borderStyle = "dashed"
|
6574
6602
|
}) => {
|
6575
6603
|
const template = layoutStyle(layout);
|
6576
|
-
return /* @__PURE__ */
|
6604
|
+
return /* @__PURE__ */ React63.createElement(Box, {
|
6577
6605
|
className: classNames(
|
6578
6606
|
tw("rounded", {
|
6579
6607
|
"border border-dashed": borderStyle === "dashed",
|
@@ -6585,38 +6613,38 @@ var EmptyState = ({
|
|
6585
6613
|
backgroundColor: "transparent",
|
6586
6614
|
borderColor: "grey-10",
|
6587
6615
|
padding: "9"
|
6588
|
-
}, /* @__PURE__ */
|
6616
|
+
}, /* @__PURE__ */ React63.createElement(Flexbox, {
|
6589
6617
|
direction: template.layout,
|
6590
6618
|
justifyContent: template.justifyContent,
|
6591
6619
|
alignItems: template.layout === "row" ? "center" : template.alignItems,
|
6592
6620
|
colGap: "l5",
|
6593
6621
|
rowGap: "8"
|
6594
|
-
}, image && /* @__PURE__ */
|
6622
|
+
}, image && /* @__PURE__ */ React63.createElement(FlexboxItem, null, /* @__PURE__ */ React63.createElement("img", {
|
6595
6623
|
src: image,
|
6596
6624
|
alt: imageAlt,
|
6597
6625
|
style: { width: imageWidth ? `${imageWidth}px` : void 0, height: "auto" }
|
6598
|
-
})), /* @__PURE__ */
|
6626
|
+
})), /* @__PURE__ */ React63.createElement(Flexbox, {
|
6599
6627
|
style: { maxWidth: "610px" },
|
6600
6628
|
direction: "column",
|
6601
6629
|
justifyContent: template.justifyContent,
|
6602
6630
|
alignItems: template.alignItems
|
6603
|
-
}, /* @__PURE__ */
|
6631
|
+
}, /* @__PURE__ */ React63.createElement(Typography2, {
|
6604
6632
|
variant: "heading",
|
6605
6633
|
htmlTag: "h2"
|
6606
|
-
}, title), (description || children) && /* @__PURE__ */
|
6634
|
+
}, title), (description || children) && /* @__PURE__ */ React63.createElement(Box, {
|
6607
6635
|
marginTop: "5"
|
6608
|
-
}, /* @__PURE__ */
|
6636
|
+
}, /* @__PURE__ */ React63.createElement(Typography2, {
|
6609
6637
|
variant: "default",
|
6610
6638
|
color: "grey-60"
|
6611
|
-
}, children || description)), (secondaryAction || primaryAction) && /* @__PURE__ */
|
6639
|
+
}, children || description)), (secondaryAction || primaryAction) && /* @__PURE__ */ React63.createElement(Flexbox, {
|
6612
6640
|
marginTop: "7",
|
6613
6641
|
gap: "4",
|
6614
6642
|
justifyContent: "center",
|
6615
6643
|
alignItems: "center",
|
6616
6644
|
wrap: "wrap"
|
6617
|
-
}, primaryAction && /* @__PURE__ */
|
6645
|
+
}, primaryAction && /* @__PURE__ */ React63.createElement(PrimaryButton, __spreadValues({}, omit9(primaryAction, "text")), primaryAction.text), secondaryAction && /* @__PURE__ */ React63.createElement(SecondaryButton, __spreadValues({}, omit9(secondaryAction, "text")), secondaryAction.text)), footer && /* @__PURE__ */ React63.createElement(Box, {
|
6618
6646
|
marginTop: "7"
|
6619
|
-
}, /* @__PURE__ */
|
6647
|
+
}, /* @__PURE__ */ React63.createElement(Typography2, {
|
6620
6648
|
htmlTag: "div",
|
6621
6649
|
variant: "small",
|
6622
6650
|
color: "grey-60"
|
@@ -6624,7 +6652,7 @@ var EmptyState = ({
|
|
6624
6652
|
};
|
6625
6653
|
|
6626
6654
|
// src/molecules/Grid/GridItem.tsx
|
6627
|
-
import
|
6655
|
+
import React64 from "react";
|
6628
6656
|
var GridItem = Tailwindify(
|
6629
6657
|
({
|
6630
6658
|
htmlTag = "div",
|
@@ -6655,7 +6683,7 @@ var GridItem = Tailwindify(
|
|
6655
6683
|
gridRowEnd: rowEnd
|
6656
6684
|
});
|
6657
6685
|
const HtmlElement = htmlTag;
|
6658
|
-
return /* @__PURE__ */
|
6686
|
+
return /* @__PURE__ */ React64.createElement(HtmlElement, {
|
6659
6687
|
style: __spreadValues(__spreadValues({}, hookStyle), style),
|
6660
6688
|
className
|
6661
6689
|
}, children);
|
@@ -6663,7 +6691,7 @@ var GridItem = Tailwindify(
|
|
6663
6691
|
);
|
6664
6692
|
|
6665
6693
|
// src/molecules/LineClamp/LineClamp.tsx
|
6666
|
-
import
|
6694
|
+
import React65 from "react";
|
6667
6695
|
var LineClamp2 = ({
|
6668
6696
|
lines,
|
6669
6697
|
children,
|
@@ -6672,10 +6700,10 @@ var LineClamp2 = ({
|
|
6672
6700
|
collapseLabel,
|
6673
6701
|
onClampedChange
|
6674
6702
|
}) => {
|
6675
|
-
const ref =
|
6676
|
-
const [clamped, setClamped] =
|
6677
|
-
const [isClampingEnabled, setClampingEnabled] =
|
6678
|
-
|
6703
|
+
const ref = React65.useRef(null);
|
6704
|
+
const [clamped, setClamped] = React65.useState(true);
|
6705
|
+
const [isClampingEnabled, setClampingEnabled] = React65.useState(false);
|
6706
|
+
React65.useEffect(() => {
|
6679
6707
|
var _a, _b;
|
6680
6708
|
const el = ref.current;
|
6681
6709
|
setClampingEnabled(((_a = el == null ? void 0 : el.scrollHeight) != null ? _a : 0) > ((_b = el == null ? void 0 : el.clientHeight) != null ? _b : 0));
|
@@ -6684,50 +6712,50 @@ var LineClamp2 = ({
|
|
6684
6712
|
setClamped(!clamped);
|
6685
6713
|
onClampedChange == null ? void 0 : onClampedChange(!clamped);
|
6686
6714
|
};
|
6687
|
-
return /* @__PURE__ */
|
6715
|
+
return /* @__PURE__ */ React65.createElement("div", null, /* @__PURE__ */ React65.createElement(LineClamp, {
|
6688
6716
|
ref,
|
6689
6717
|
lines,
|
6690
6718
|
clamped,
|
6691
6719
|
wordBreak
|
6692
|
-
}, children), expandLabel && isClampingEnabled && /* @__PURE__ */
|
6720
|
+
}, children), expandLabel && isClampingEnabled && /* @__PURE__ */ React65.createElement(GhostButton, {
|
6693
6721
|
dense: true,
|
6694
6722
|
onClick: handleClampedChange
|
6695
6723
|
}, clamped ? expandLabel : collapseLabel));
|
6696
6724
|
};
|
6697
6725
|
|
6698
6726
|
// src/molecules/Link/Link.tsx
|
6699
|
-
import
|
6727
|
+
import React67 from "react";
|
6700
6728
|
|
6701
6729
|
// src/atoms/Link/Link.tsx
|
6702
|
-
import
|
6730
|
+
import React66 from "react";
|
6703
6731
|
var Link = (_a) => {
|
6704
6732
|
var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
|
6705
|
-
return /* @__PURE__ */
|
6733
|
+
return /* @__PURE__ */ React66.createElement("a", __spreadValues({
|
6706
6734
|
className: classNames(className, linkStyle)
|
6707
6735
|
}, props), children);
|
6708
6736
|
};
|
6709
6737
|
|
6710
6738
|
// src/molecules/Link/Link.tsx
|
6711
|
-
var Link2 = (props) => /* @__PURE__ */
|
6739
|
+
var Link2 = (props) => /* @__PURE__ */ React67.createElement(Link, __spreadValues({}, props));
|
6712
6740
|
|
6713
6741
|
// src/molecules/List/List.tsx
|
6714
|
-
import
|
6715
|
-
var List = ({ items, renderItem, container =
|
6742
|
+
import React68 from "react";
|
6743
|
+
var List = ({ items, renderItem, container = React68.Fragment }) => {
|
6716
6744
|
const Component = container;
|
6717
|
-
return /* @__PURE__ */
|
6745
|
+
return /* @__PURE__ */ React68.createElement(Component, null, items.map(renderItem));
|
6718
6746
|
};
|
6719
6747
|
|
6720
6748
|
// src/molecules/ListItem/ListItem.tsx
|
6721
|
-
import
|
6749
|
+
import React69 from "react";
|
6722
6750
|
var ListItem = ({ name, icon, active = false }) => {
|
6723
|
-
return /* @__PURE__ */
|
6751
|
+
return /* @__PURE__ */ React69.createElement(Flexbox, {
|
6724
6752
|
alignItems: "center"
|
6725
|
-
}, /* @__PURE__ */
|
6753
|
+
}, /* @__PURE__ */ React69.createElement(Typography2, {
|
6726
6754
|
variant: active ? "small-strong" : "small",
|
6727
6755
|
color: "grey-70",
|
6728
6756
|
htmlTag: "span",
|
6729
6757
|
className: `px-4 py-2 rounded-full ${active ? "bg-grey-5" : "hover:bg-grey-0"}`
|
6730
|
-
}, /* @__PURE__ */
|
6758
|
+
}, /* @__PURE__ */ React69.createElement("img", {
|
6731
6759
|
src: icon,
|
6732
6760
|
alt: name,
|
6733
6761
|
className: "inline mr-4",
|
@@ -6737,28 +6765,27 @@ var ListItem = ({ name, icon, active = false }) => {
|
|
6737
6765
|
};
|
6738
6766
|
|
6739
6767
|
// src/molecules/Modal/Modal.tsx
|
6740
|
-
import
|
6741
|
-
import { useDialog as
|
6742
|
-
import {
|
6743
|
-
import { Overlay as Overlay2, useModalOverlay as useModalOverlay2 } from "@react-aria/overlays";
|
6768
|
+
import React71 from "react";
|
6769
|
+
import { useDialog as useDialog3 } from "@react-aria/dialog";
|
6770
|
+
import { Overlay as Overlay3, useModalOverlay as useModalOverlay2 } from "@react-aria/overlays";
|
6744
6771
|
import { useId as useId2 } from "@react-aria/utils";
|
6745
6772
|
import { useOverlayTriggerState as useOverlayTriggerState4 } from "@react-stately/overlays";
|
6746
6773
|
import castArray from "lodash/castArray";
|
6747
6774
|
import omit10 from "lodash/omit";
|
6748
6775
|
|
6749
6776
|
// src/molecules/Tabs/Tabs.tsx
|
6750
|
-
import
|
6777
|
+
import React70, { useEffect as useEffect6, useLayoutEffect as useLayoutEffect2, useRef as useRef8, useState as useState7 } from "react";
|
6751
6778
|
import isNumber5 from "lodash/isNumber";
|
6752
6779
|
import kebabCase from "lodash/kebabCase";
|
6753
6780
|
var import_chevronLeft2 = __toESM(require_chevronLeft());
|
6754
6781
|
var import_chevronRight2 = __toESM(require_chevronRight());
|
6755
6782
|
var import_warningSign3 = __toESM(require_warningSign());
|
6756
6783
|
var isTabComponent = (c) => {
|
6757
|
-
return
|
6784
|
+
return React70.isValidElement(c) && (c.type === Tab || c.type === ModalTab);
|
6758
6785
|
};
|
6759
|
-
var Tab =
|
6786
|
+
var Tab = React70.forwardRef(
|
6760
6787
|
({ className, id, title, children }, ref) => {
|
6761
|
-
return /* @__PURE__ */
|
6788
|
+
return /* @__PURE__ */ React70.createElement("div", {
|
6762
6789
|
ref,
|
6763
6790
|
id: `${id != null ? id : kebabCase(title)}-panel`,
|
6764
6791
|
className,
|
@@ -6770,14 +6797,14 @@ var Tab = React69.forwardRef(
|
|
6770
6797
|
);
|
6771
6798
|
var TabContainer = (_a) => {
|
6772
6799
|
var _b = _a, { className, children } = _b, rest = __objRest(_b, ["className", "children"]);
|
6773
|
-
return /* @__PURE__ */
|
6800
|
+
return /* @__PURE__ */ React70.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
6774
6801
|
className: classNames("py-6 z-0", className)
|
6775
6802
|
}), children);
|
6776
6803
|
};
|
6777
6804
|
var ModalTab = Tab;
|
6778
6805
|
var ModalTabContainer = TabContainer;
|
6779
6806
|
var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
|
6780
|
-
const Tab2 =
|
6807
|
+
const Tab2 = React70.forwardRef(
|
6781
6808
|
(_a, ref) => {
|
6782
6809
|
var _b = _a, {
|
6783
6810
|
id,
|
@@ -6807,17 +6834,17 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
|
|
6807
6834
|
const _id = id != null ? id : kebabCase(title);
|
6808
6835
|
let statusIcon = void 0;
|
6809
6836
|
if (status === "warning") {
|
6810
|
-
statusIcon = /* @__PURE__ */
|
6837
|
+
statusIcon = /* @__PURE__ */ React70.createElement(InlineIcon, {
|
6811
6838
|
icon: import_warningSign3.default,
|
6812
6839
|
color: "warning-80"
|
6813
6840
|
});
|
6814
6841
|
} else if (status === "error") {
|
6815
|
-
statusIcon = /* @__PURE__ */
|
6842
|
+
statusIcon = /* @__PURE__ */ React70.createElement(InlineIcon, {
|
6816
6843
|
icon: import_warningSign3.default,
|
6817
6844
|
color: "error-50"
|
6818
6845
|
});
|
6819
6846
|
}
|
6820
|
-
const tab = /* @__PURE__ */
|
6847
|
+
const tab = /* @__PURE__ */ React70.createElement(Component, __spreadValues({
|
6821
6848
|
ref,
|
6822
6849
|
id: `${_id}-tab`,
|
6823
6850
|
onClick: () => !disabled && onSelected(value != null ? value : index),
|
@@ -6834,24 +6861,24 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
|
|
6834
6861
|
"aria-selected": selected,
|
6835
6862
|
"aria-controls": `${_id}-panel`,
|
6836
6863
|
tabIndex: disabled ? void 0 : 0
|
6837
|
-
}, rest), /* @__PURE__ */
|
6864
|
+
}, rest), /* @__PURE__ */ React70.createElement(Typography2, {
|
6838
6865
|
htmlTag: "div",
|
6839
6866
|
variant: "small",
|
6840
6867
|
color: selected ? "primary-80" : disabled ? "grey-20" : "current",
|
6841
6868
|
className: tw("inline-flex items-center gap-3")
|
6842
|
-
}, /* @__PURE__ */
|
6869
|
+
}, /* @__PURE__ */ React70.createElement("span", {
|
6843
6870
|
className: tw("whitespace-nowrap")
|
6844
|
-
}, title), isNumber5(badge) && /* @__PURE__ */
|
6871
|
+
}, title), isNumber5(badge) && /* @__PURE__ */ React70.createElement(Typography2, {
|
6845
6872
|
htmlTag: "span",
|
6846
6873
|
variant: "small",
|
6847
6874
|
color: selected ? "primary-80" : "grey-5",
|
6848
6875
|
className: "leading-none"
|
6849
|
-
}, /* @__PURE__ */
|
6876
|
+
}, /* @__PURE__ */ React70.createElement(TabBadge, {
|
6850
6877
|
kind: "filled",
|
6851
6878
|
value: badge,
|
6852
6879
|
textClassname: classNames({ "text-white": selected, "text-grey-50": !selected })
|
6853
6880
|
})), statusIcon));
|
6854
|
-
return tooltip ? /* @__PURE__ */
|
6881
|
+
return tooltip ? /* @__PURE__ */ React70.createElement(Tooltip, {
|
6855
6882
|
content: tooltip
|
6856
6883
|
}, tab) : tab;
|
6857
6884
|
}
|
@@ -6865,7 +6892,7 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
|
|
6865
6892
|
const Tabs2 = (props) => {
|
6866
6893
|
var _a, _b;
|
6867
6894
|
const { className, value, defaultValue, onChange, children } = props;
|
6868
|
-
const childArr =
|
6895
|
+
const childArr = React70.Children.toArray(children);
|
6869
6896
|
const firstTab = childArr[0];
|
6870
6897
|
const firstTabValue = isTabComponent(firstTab) ? firstTab.props.value : -1;
|
6871
6898
|
const [selected, setSelected] = useState7((_b = (_a = value != null ? value : defaultValue) != null ? _a : firstTabValue) != null ? _b : 0);
|
@@ -6878,7 +6905,7 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
|
|
6878
6905
|
var _a2, _b2;
|
6879
6906
|
const container = containerRef.current;
|
6880
6907
|
const tabs = tabsRef.current;
|
6881
|
-
const values =
|
6908
|
+
const values = React70.Children.map(
|
6882
6909
|
children,
|
6883
6910
|
(tab, i) => {
|
6884
6911
|
var _a3;
|
@@ -6912,14 +6939,14 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
|
|
6912
6939
|
showLeftCaret(hasLeftCaret);
|
6913
6940
|
showRightCaret(hasRightCaret);
|
6914
6941
|
};
|
6915
|
-
|
6942
|
+
useEffect6(() => {
|
6916
6943
|
if (value === void 0) {
|
6917
6944
|
return;
|
6918
6945
|
}
|
6919
6946
|
updateCarets();
|
6920
6947
|
setSelected(value);
|
6921
6948
|
revealSelectedTab({ smooth: value !== selected });
|
6922
|
-
}, [value,
|
6949
|
+
}, [value, React70.Children.count(children)]);
|
6923
6950
|
useLayoutEffect2(() => {
|
6924
6951
|
var _a2;
|
6925
6952
|
updateCarets();
|
@@ -6983,27 +7010,27 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
|
|
6983
7010
|
const handleSelected = (key) => {
|
6984
7011
|
(onChange != null ? onChange : setSelected)(key);
|
6985
7012
|
};
|
6986
|
-
|
7013
|
+
React70.Children.forEach(children, (c) => {
|
6987
7014
|
if (c && !isTabComponent(c)) {
|
6988
7015
|
throw new Error("<Tabs> can only have <Tabs.Tab> components as children");
|
6989
7016
|
}
|
6990
7017
|
});
|
6991
|
-
return /* @__PURE__ */
|
7018
|
+
return /* @__PURE__ */ React70.createElement("div", {
|
6992
7019
|
ref: parentRef,
|
6993
7020
|
className: classNames(tw("h-full"), className)
|
6994
|
-
}, /* @__PURE__ */
|
7021
|
+
}, /* @__PURE__ */ React70.createElement("div", {
|
6995
7022
|
className: tw("relative flex items-center h-full border-b-2 border-grey-10")
|
6996
|
-
}, /* @__PURE__ */
|
7023
|
+
}, /* @__PURE__ */ React70.createElement("div", {
|
6997
7024
|
ref: containerRef,
|
6998
7025
|
className: tw("overflow-y-auto scrollbar-hide h-full mb-[-2px]")
|
6999
|
-
}, /* @__PURE__ */
|
7026
|
+
}, /* @__PURE__ */ React70.createElement("div", {
|
7000
7027
|
ref: tabsRef,
|
7001
7028
|
role: "tablist",
|
7002
7029
|
"aria-label": "tabs",
|
7003
7030
|
className: tw("inline-flex items-center cursor-pointer font-normal h-full")
|
7004
|
-
},
|
7031
|
+
}, React70.Children.map(
|
7005
7032
|
children,
|
7006
|
-
(tab, index) => tab ? /* @__PURE__ */
|
7033
|
+
(tab, index) => tab ? /* @__PURE__ */ React70.createElement(TabItemComponent, __spreadProps(__spreadValues({
|
7007
7034
|
key: tab.props.value
|
7008
7035
|
}, tab.props), {
|
7009
7036
|
index,
|
@@ -7011,20 +7038,20 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
|
|
7011
7038
|
onKeyDown: handleKeyDown,
|
7012
7039
|
onSelected: handleSelected
|
7013
7040
|
})) : void 0
|
7014
|
-
))), leftCaret && /* @__PURE__ */
|
7041
|
+
))), leftCaret && /* @__PURE__ */ React70.createElement("div", {
|
7015
7042
|
className: tw("absolute left-0 bg-gradient-to-r from-white via-white z-20 py-3 pr-4")
|
7016
|
-
}, /* @__PURE__ */
|
7043
|
+
}, /* @__PURE__ */ React70.createElement("div", {
|
7017
7044
|
onClick: () => handleScrollToNext("left"),
|
7018
7045
|
className: tw("hover:bg-grey-0 p-2 leading-none cursor-pointer")
|
7019
|
-
}, /* @__PURE__ */
|
7046
|
+
}, /* @__PURE__ */ React70.createElement(InlineIcon, {
|
7020
7047
|
icon: import_chevronLeft2.default
|
7021
|
-
}))), rightCaret && /* @__PURE__ */
|
7048
|
+
}))), rightCaret && /* @__PURE__ */ React70.createElement("div", {
|
7022
7049
|
onClick: () => handleScrollToNext("right"),
|
7023
7050
|
className: tw("absolute right-0 bg-gradient-to-l from-white via-white z-20 py-3 pl-4")
|
7024
|
-
}, /* @__PURE__ */
|
7051
|
+
}, /* @__PURE__ */ React70.createElement("div", {
|
7025
7052
|
onClick: () => handleScrollToNext("right"),
|
7026
7053
|
className: tw("hover:bg-grey-0 p-2 leading-none cursor-pointer")
|
7027
|
-
}, /* @__PURE__ */
|
7054
|
+
}, /* @__PURE__ */ React70.createElement(InlineIcon, {
|
7028
7055
|
icon: import_chevronRight2.default
|
7029
7056
|
})))), renderChildren(children, selected, props));
|
7030
7057
|
};
|
@@ -7032,89 +7059,92 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
|
|
7032
7059
|
Tabs2.Tab = TabComponent;
|
7033
7060
|
return Tabs2;
|
7034
7061
|
};
|
7035
|
-
var Tabs = createTabsComponent(Tab, TabItem, "Tabs", (children, selected) => /* @__PURE__ */
|
7062
|
+
var Tabs = createTabsComponent(Tab, TabItem, "Tabs", (children, selected) => /* @__PURE__ */ React70.createElement(TabContainer, null, children.find(
|
7036
7063
|
(node, index) => (node == null ? void 0 : node.props.value) === selected || index === selected
|
7037
7064
|
)));
|
7038
7065
|
|
7039
7066
|
// src/molecules/Modal/Modal.tsx
|
7040
7067
|
var import_cross5 = __toESM(require_cross());
|
7041
|
-
var Modal2 = ({
|
7042
|
-
|
7043
|
-
|
7044
|
-
|
7045
|
-
|
7046
|
-
|
7047
|
-
|
7048
|
-
primaryAction,
|
7049
|
-
secondaryActions,
|
7050
|
-
size
|
7051
|
-
}) => {
|
7052
|
-
const ref = React70.useRef(null);
|
7053
|
-
const state = useOverlayTriggerState4({ isOpen: open });
|
7054
|
-
const { modalProps, underlayProps } = useModalOverlay2({ isDismissable: false }, state, ref);
|
7055
|
-
const labelledBy = useId2();
|
7056
|
-
const describedBy = useId2();
|
7057
|
-
const { dialogProps } = useDialog2(
|
7058
|
-
{ "role": "dialog", "aria-labelledby": labelledBy, "aria-describedby": describedBy },
|
7068
|
+
var Modal2 = (props) => {
|
7069
|
+
const { open, onClose, size, portalContainer } = props;
|
7070
|
+
const ref = React71.useRef(null);
|
7071
|
+
const state = useOverlayTriggerState4({ isOpen: open, onOpenChange: (isOpen) => !isOpen && onClose() });
|
7072
|
+
const { modalProps, underlayProps } = useModalOverlay2(
|
7073
|
+
{ isDismissable: true, isKeyboardDismissDisabled: false },
|
7074
|
+
state,
|
7059
7075
|
ref
|
7060
7076
|
);
|
7061
|
-
if (!
|
7077
|
+
if (!state.isOpen) {
|
7062
7078
|
return null;
|
7063
7079
|
}
|
7064
|
-
return /* @__PURE__ */
|
7065
|
-
|
7066
|
-
}, /* @__PURE__ */
|
7067
|
-
|
7068
|
-
|
7069
|
-
autoFocus: true
|
7070
|
-
}, /* @__PURE__ */ React70.createElement(Modal.Dialog, __spreadValues(__spreadValues({
|
7080
|
+
return /* @__PURE__ */ React71.createElement(Overlay3, {
|
7081
|
+
portalContainer
|
7082
|
+
}, /* @__PURE__ */ React71.createElement(Modal, {
|
7083
|
+
open: true
|
7084
|
+
}, /* @__PURE__ */ React71.createElement(Modal.BackDrop, __spreadValues({}, underlayProps)), /* @__PURE__ */ React71.createElement(ModalWrapper, __spreadValues(__spreadValues({
|
7071
7085
|
ref,
|
7072
7086
|
size
|
7073
|
-
},
|
7074
|
-
"aria-label": "Close",
|
7075
|
-
icon: import_cross5.default,
|
7076
|
-
onClick: onClose
|
7077
|
-
})), headerImage !== void 0 && /* @__PURE__ */ React70.createElement(Modal.HeaderImage, {
|
7078
|
-
backgroundImage: headerImage
|
7079
|
-
}), /* @__PURE__ */ React70.createElement(Modal.Header, {
|
7080
|
-
className: tw({ "pb-3": isComponentType(children, ModalTabs) })
|
7081
|
-
}, /* @__PURE__ */ React70.createElement(Modal.TitleContainer, null, /* @__PURE__ */ React70.createElement(Modal.Title, {
|
7082
|
-
id: labelledBy
|
7083
|
-
}, title), subtitle && /* @__PURE__ */ React70.createElement(Modal.Subtitle, null, subtitle))), isComponentType(children, ModalTabs) ? React70.cloneElement(children, { className: tw("[&>div:first-child]:px-5 grow") }) : /* @__PURE__ */ React70.createElement(Modal.Body, {
|
7084
|
-
id: describedBy,
|
7085
|
-
tabIndex: 0,
|
7086
|
-
noFooter: !(secondaryActions || primaryAction)
|
7087
|
-
}, children), (secondaryActions || primaryAction) && /* @__PURE__ */ React70.createElement(Modal.Footer, null, /* @__PURE__ */ React70.createElement(Modal.Actions, null, secondaryActions && castArray(secondaryActions).filter(Boolean).map((_a) => {
|
7088
|
-
var _b = _a, { text } = _b, action = __objRest(_b, ["text"]);
|
7089
|
-
return /* @__PURE__ */ React70.createElement(SecondaryButton, __spreadValues({
|
7090
|
-
key: text
|
7091
|
-
}, action), text);
|
7092
|
-
}), primaryAction && /* @__PURE__ */ React70.createElement(PrimaryButton, __spreadValues({
|
7093
|
-
key: primaryAction.text
|
7094
|
-
}, omit10(primaryAction, "text")), primaryAction.text)))))));
|
7087
|
+
}, props), modalProps))));
|
7095
7088
|
};
|
7089
|
+
var ModalWrapper = React71.forwardRef(
|
7090
|
+
(_a, ref) => {
|
7091
|
+
var _b = _a, { title, subtitle, headerImage, primaryAction, secondaryActions, children, onClose } = _b, props = __objRest(_b, ["title", "subtitle", "headerImage", "primaryAction", "secondaryActions", "children", "onClose"]);
|
7092
|
+
const labelledBy = useId2();
|
7093
|
+
const describedBy = useId2();
|
7094
|
+
const { dialogProps } = useDialog3(
|
7095
|
+
{ "role": "dialog", "aria-labelledby": labelledBy, "aria-describedby": describedBy },
|
7096
|
+
ref
|
7097
|
+
);
|
7098
|
+
return /* @__PURE__ */ React71.createElement(Modal.Dialog, __spreadProps(__spreadValues(__spreadValues({
|
7099
|
+
ref
|
7100
|
+
}, props), dialogProps), {
|
7101
|
+
tabIndex: -1
|
7102
|
+
}), /* @__PURE__ */ React71.createElement(Modal.CloseButtonContainer, null, /* @__PURE__ */ React71.createElement(IconButton, {
|
7103
|
+
"aria-label": "Close",
|
7104
|
+
icon: import_cross5.default,
|
7105
|
+
onClick: onClose
|
7106
|
+
})), headerImage !== void 0 && /* @__PURE__ */ React71.createElement(Modal.HeaderImage, {
|
7107
|
+
backgroundImage: headerImage
|
7108
|
+
}), /* @__PURE__ */ React71.createElement(Modal.Header, {
|
7109
|
+
className: tw({ "pb-3": isComponentType(children, ModalTabs) })
|
7110
|
+
}, /* @__PURE__ */ React71.createElement(Modal.TitleContainer, null, /* @__PURE__ */ React71.createElement(Modal.Title, {
|
7111
|
+
id: labelledBy
|
7112
|
+
}, title), subtitle && /* @__PURE__ */ React71.createElement(Modal.Subtitle, null, subtitle))), isComponentType(children, ModalTabs) ? React71.cloneElement(children, { className: tw("[&>div:first-child]:px-5 grow") }) : /* @__PURE__ */ React71.createElement(Modal.Body, {
|
7113
|
+
id: describedBy,
|
7114
|
+
tabIndex: 0,
|
7115
|
+
noFooter: !(secondaryActions || primaryAction)
|
7116
|
+
}, children), (secondaryActions || primaryAction) && /* @__PURE__ */ React71.createElement(Modal.Footer, null, /* @__PURE__ */ React71.createElement(Modal.Actions, null, secondaryActions && castArray(secondaryActions).filter(Boolean).map((_a2) => {
|
7117
|
+
var _b2 = _a2, { text } = _b2, action = __objRest(_b2, ["text"]);
|
7118
|
+
return /* @__PURE__ */ React71.createElement(SecondaryButton, __spreadValues({
|
7119
|
+
key: text
|
7120
|
+
}, action), text);
|
7121
|
+
}), primaryAction && /* @__PURE__ */ React71.createElement(PrimaryButton, __spreadValues({
|
7122
|
+
key: primaryAction.text
|
7123
|
+
}, omit10(primaryAction, "text")), primaryAction.text))));
|
7124
|
+
}
|
7125
|
+
);
|
7096
7126
|
var ModalTabs = createTabsComponent(
|
7097
7127
|
ModalTab,
|
7098
7128
|
TabItem,
|
7099
7129
|
"ModalTabs",
|
7100
|
-
(children, selected, props) => /* @__PURE__ */
|
7130
|
+
(children, selected, props) => /* @__PURE__ */ React71.createElement(Modal.Body, {
|
7101
7131
|
maxHeight: props.maxHeight
|
7102
|
-
}, /* @__PURE__ */
|
7132
|
+
}, /* @__PURE__ */ React71.createElement(ModalTabContainer, null, children.find(
|
7103
7133
|
(node, index) => (node == null ? void 0 : node.props.value) === selected || index === selected
|
7104
7134
|
)))
|
7105
7135
|
);
|
7106
7136
|
|
7107
7137
|
// src/molecules/MultiInput/MultiInput.tsx
|
7108
|
-
import
|
7138
|
+
import React73, { useEffect as useEffect7, useRef as useRef9, useState as useState8 } from "react";
|
7109
7139
|
import castArray2 from "lodash/castArray";
|
7110
7140
|
import identity from "lodash/identity";
|
7111
7141
|
import omit11 from "lodash/omit";
|
7112
7142
|
import uniqueId4 from "lodash/uniqueId";
|
7113
7143
|
|
7114
7144
|
// src/molecules/MultiInput/InputChip.tsx
|
7115
|
-
import
|
7145
|
+
import React72 from "react";
|
7116
7146
|
var import_smallCross = __toESM(require_smallCross());
|
7117
|
-
var InputChip =
|
7147
|
+
var InputChip = React72.forwardRef(
|
7118
7148
|
(_a, ref) => {
|
7119
7149
|
var _b = _a, { invalid = false, disabled, readOnly, className, onClick: _onClick, children } = _b, props = __objRest(_b, ["invalid", "disabled", "readOnly", "className", "onClick", "children"]);
|
7120
7150
|
const onClick = (e) => {
|
@@ -7122,7 +7152,7 @@ var InputChip = React71.forwardRef(
|
|
7122
7152
|
_onClick == null ? void 0 : _onClick(e);
|
7123
7153
|
}
|
7124
7154
|
};
|
7125
|
-
return /* @__PURE__ */
|
7155
|
+
return /* @__PURE__ */ React72.createElement("div", __spreadValues({
|
7126
7156
|
ref,
|
7127
7157
|
role: "button",
|
7128
7158
|
className: classNames(className, "inline-flex align-middle mx-1 px-2 py-1 items-center rounded-sm break-all", {
|
@@ -7132,10 +7162,10 @@ var InputChip = React71.forwardRef(
|
|
7132
7162
|
"bg-grey-5 pointer-events-none": disabled
|
7133
7163
|
}),
|
7134
7164
|
onClick
|
7135
|
-
}, props), /* @__PURE__ */
|
7165
|
+
}, props), /* @__PURE__ */ React72.createElement(Typography2, {
|
7136
7166
|
variant: "small",
|
7137
7167
|
color: invalid ? "error-80" : disabled ? "grey-40" : "grey-70"
|
7138
|
-
}, children), !readOnly && /* @__PURE__ */
|
7168
|
+
}, children), !readOnly && /* @__PURE__ */ React72.createElement("div", null, /* @__PURE__ */ React72.createElement(Icon, {
|
7139
7169
|
icon: import_smallCross.default,
|
7140
7170
|
className: tw("ml-2", {
|
7141
7171
|
"text-error-70": invalid,
|
@@ -7197,7 +7227,7 @@ var MultiInputBase = (_a) => {
|
|
7197
7227
|
const [items, setItems] = useState8((_a2 = value != null ? value : defaultValue) != null ? _a2 : []);
|
7198
7228
|
const [hasFocus, setFocus] = useState8(false);
|
7199
7229
|
const keyCodes = [delimiter !== "enter" ? " " : null, delimiter !== "space" ? "Enter" : null].filter(identity);
|
7200
|
-
|
7230
|
+
useEffect7(() => {
|
7201
7231
|
const requiresUpdate = value !== void 0 || defaultValue === void 0;
|
7202
7232
|
if (requiresUpdate && JSON.stringify(value) !== JSON.stringify(items)) {
|
7203
7233
|
setItems(value != null ? value : []);
|
@@ -7276,7 +7306,7 @@ var MultiInputBase = (_a) => {
|
|
7276
7306
|
};
|
7277
7307
|
const renderChips = () => items == null ? void 0 : items.map((item, index) => {
|
7278
7308
|
var _a3;
|
7279
|
-
return /* @__PURE__ */
|
7309
|
+
return /* @__PURE__ */ React73.createElement(InputChip, {
|
7280
7310
|
key: `${itemToString(item)}.${index}`,
|
7281
7311
|
invalid: !((_a3 = isItemValid == null ? void 0 : isItemValid(item, index)) != null ? _a3 : true),
|
7282
7312
|
readOnly,
|
@@ -7287,11 +7317,11 @@ var MultiInputBase = (_a) => {
|
|
7287
7317
|
}
|
7288
7318
|
}, itemToString(item));
|
7289
7319
|
});
|
7290
|
-
return /* @__PURE__ */
|
7320
|
+
return /* @__PURE__ */ React73.createElement("div", null, /* @__PURE__ */ React73.createElement(Select.InputContainer, {
|
7291
7321
|
variant: disabled ? "disabled" : valid === false ? "error" : readOnly ? "readOnly" : hasFocus ? "focused" : "default"
|
7292
|
-
}, /* @__PURE__ */
|
7322
|
+
}, /* @__PURE__ */ React73.createElement("div", {
|
7293
7323
|
className: "grow inline-flex flex-row flex-wrap gap-y-2"
|
7294
|
-
}, inline && renderChips(), /* @__PURE__ */
|
7324
|
+
}, inline && renderChips(), /* @__PURE__ */ React73.createElement(Select.Input, __spreadProps(__spreadValues({
|
7295
7325
|
ref: inputRef,
|
7296
7326
|
id: id != null ? id : name,
|
7297
7327
|
name,
|
@@ -7309,11 +7339,11 @@ var MultiInputBase = (_a) => {
|
|
7309
7339
|
onFocus: handleFocus,
|
7310
7340
|
onBlur: handleBlur,
|
7311
7341
|
autoComplete: "off"
|
7312
|
-
}))), endAdornment && /* @__PURE__ */
|
7342
|
+
}))), endAdornment && /* @__PURE__ */ React73.createElement(InputAdornment, null, endAdornment)), !inline && /* @__PURE__ */ React73.createElement("div", {
|
7313
7343
|
className: tw("flex flex-row flex-wrap gap-y-2 mt-2")
|
7314
7344
|
}, renderChips()));
|
7315
7345
|
};
|
7316
|
-
var BaseMultiInputSkeleton = () => /* @__PURE__ */
|
7346
|
+
var BaseMultiInputSkeleton = () => /* @__PURE__ */ React73.createElement(Skeleton, {
|
7317
7347
|
height: 38
|
7318
7348
|
});
|
7319
7349
|
MultiInputBase.Skeleton = BaseMultiInputSkeleton;
|
@@ -7321,7 +7351,7 @@ var MultiInput = (props) => {
|
|
7321
7351
|
var _a, _b, _c, _d, _e;
|
7322
7352
|
const maxLength = (_a = props.maxLength) != null ? _a : props.max;
|
7323
7353
|
const [value, setValue] = useState8((_c = (_b = props.value) != null ? _b : props.defaultValue) != null ? _c : []);
|
7324
|
-
|
7354
|
+
useEffect7(() => {
|
7325
7355
|
var _a2;
|
7326
7356
|
setValue((_a2 = props.value) != null ? _a2 : []);
|
7327
7357
|
}, [JSON.stringify(props.value)]);
|
@@ -7330,14 +7360,14 @@ var MultiInput = (props) => {
|
|
7330
7360
|
const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
|
7331
7361
|
const labelControlProps = getLabelControlProps(props);
|
7332
7362
|
const baseProps = omit11(props, Object.keys(labelControlProps));
|
7333
|
-
return /* @__PURE__ */
|
7363
|
+
return /* @__PURE__ */ React73.createElement(LabelControl, __spreadProps(__spreadValues({
|
7334
7364
|
id: `${id.current}-label`,
|
7335
7365
|
htmlFor: `${id.current}-input`,
|
7336
7366
|
messageId: errorMessageId
|
7337
7367
|
}, labelControlProps), {
|
7338
7368
|
length: value.length,
|
7339
7369
|
maxLength
|
7340
|
-
}), /* @__PURE__ */
|
7370
|
+
}), /* @__PURE__ */ React73.createElement(MultiInputBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
|
7341
7371
|
id: `${id.current}-input`,
|
7342
7372
|
onChange: (value2) => {
|
7343
7373
|
var _a2;
|
@@ -7349,13 +7379,13 @@ var MultiInput = (props) => {
|
|
7349
7379
|
valid: props.valid
|
7350
7380
|
})));
|
7351
7381
|
};
|
7352
|
-
var MultiInputSkeleton = () => /* @__PURE__ */
|
7382
|
+
var MultiInputSkeleton = () => /* @__PURE__ */ React73.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React73.createElement(MultiInputBase.Skeleton, null));
|
7353
7383
|
MultiInput.Skeleton = MultiInputSkeleton;
|
7354
7384
|
MultiInput.Skeleton.displayName = "MultiInput.Skeleton";
|
7355
7385
|
|
7356
7386
|
// src/molecules/MultiSelect/MultiSelect.tsx
|
7357
|
-
import
|
7358
|
-
import {
|
7387
|
+
import React74, { useEffect as useEffect8, useRef as useRef10, useState as useState9 } from "react";
|
7388
|
+
import { ariaHideOutside as ariaHideOutside2 } from "@react-aria/overlays";
|
7359
7389
|
import { useCombobox as useCombobox2, useMultipleSelection } from "downshift";
|
7360
7390
|
import isEqual from "lodash/isEqual";
|
7361
7391
|
import isNil from "lodash/isNil";
|
@@ -7410,8 +7440,10 @@ var MultiSelectBase = (_a) => {
|
|
7410
7440
|
"children"
|
7411
7441
|
]);
|
7412
7442
|
var _a2;
|
7443
|
+
const popoverRef = useRef10(null);
|
7413
7444
|
const targetRef = useRef10(null);
|
7414
|
-
const
|
7445
|
+
const menuRef = useRef10(null);
|
7446
|
+
const inputRef = useRef10(null);
|
7415
7447
|
const [inputValue, setInputValue] = useState9("");
|
7416
7448
|
const [hasFocus, setFocus] = useState9(false);
|
7417
7449
|
const { selectedItems, addSelectedItem, removeSelectedItem, getDropdownProps, getSelectedItemProps } = useMultipleSelection(
|
@@ -7433,6 +7465,7 @@ var MultiSelectBase = (_a) => {
|
|
7433
7465
|
isOpen,
|
7434
7466
|
openMenu,
|
7435
7467
|
closeMenu,
|
7468
|
+
toggleMenu,
|
7436
7469
|
highlightedIndex,
|
7437
7470
|
getInputProps,
|
7438
7471
|
getMenuProps,
|
@@ -7483,16 +7516,20 @@ var MultiSelectBase = (_a) => {
|
|
7483
7516
|
}
|
7484
7517
|
}
|
7485
7518
|
});
|
7486
|
-
const
|
7487
|
-
|
7488
|
-
|
7489
|
-
|
7490
|
-
|
7491
|
-
|
7492
|
-
}
|
7493
|
-
|
7519
|
+
const state = {
|
7520
|
+
isOpen,
|
7521
|
+
close: closeMenu,
|
7522
|
+
open: openMenu,
|
7523
|
+
toggle: toggleMenu,
|
7524
|
+
setOpen: (isOpen2) => isOpen2 ? openMenu() : closeMenu()
|
7525
|
+
};
|
7526
|
+
useEffect8(() => {
|
7527
|
+
if (state.isOpen && inputRef.current && popoverRef.current) {
|
7528
|
+
return ariaHideOutside2([inputRef.current, popoverRef.current]);
|
7529
|
+
}
|
7530
|
+
}, [state.isOpen, inputRef, popoverRef]);
|
7494
7531
|
const renderChips = () => {
|
7495
|
-
return selectedItems.map((selectedItem, index) => /* @__PURE__ */
|
7532
|
+
return selectedItems.map((selectedItem, index) => /* @__PURE__ */ React74.createElement(InputChip, __spreadProps(__spreadValues({
|
7496
7533
|
key: `${itemToString(selectedItem)}.chip`,
|
7497
7534
|
className: tw("mx-0"),
|
7498
7535
|
disabled,
|
@@ -7506,17 +7543,18 @@ var MultiSelectBase = (_a) => {
|
|
7506
7543
|
}), itemToString(selectedItem)));
|
7507
7544
|
};
|
7508
7545
|
const hasNoResults = options.length === 0 || filteredOptions.length === 0;
|
7509
|
-
const
|
7510
|
-
const
|
7511
|
-
return /* @__PURE__ */
|
7546
|
+
const inputProps = getInputProps(getDropdownProps({ ref: inputRef, disabled: disabled || readOnly }));
|
7547
|
+
const menuProps = getMenuProps({ ref: menuRef }, { suppressRefError: !isOpen });
|
7548
|
+
return /* @__PURE__ */ React74.createElement("div", {
|
7512
7549
|
className: tw("relative")
|
7513
|
-
}, /* @__PURE__ */
|
7550
|
+
}, /* @__PURE__ */ React74.createElement(Select.InputContainer, {
|
7514
7551
|
ref: targetRef,
|
7515
7552
|
variant: disabled ? "disabled" : !valid ? "error" : readOnly ? "readOnly" : hasFocus ? "focused" : "default"
|
7516
|
-
}, /* @__PURE__ */
|
7553
|
+
}, /* @__PURE__ */ React74.createElement("div", {
|
7517
7554
|
className: "grow inline-flex flex-row flex-wrap gap-2"
|
7518
|
-
}, !hideChips && inline && renderChips(), /* @__PURE__ */
|
7555
|
+
}, !hideChips && inline && renderChips(), /* @__PURE__ */ React74.createElement(Select.Input, __spreadProps(__spreadValues(__spreadValues({
|
7519
7556
|
id,
|
7557
|
+
ref: inputRef,
|
7520
7558
|
name,
|
7521
7559
|
placeholder: selectedItems.length === 0 && !readOnly ? placeholder : "",
|
7522
7560
|
value: inputValue != null ? inputValue : ""
|
@@ -7536,27 +7574,29 @@ var MultiSelectBase = (_a) => {
|
|
7536
7574
|
setFocus(false);
|
7537
7575
|
(_a3 = inputProps.onBlur) == null ? void 0 : _a3.call(inputProps, e);
|
7538
7576
|
}
|
7539
|
-
}))), !readOnly && /* @__PURE__ */
|
7577
|
+
}))), !readOnly && /* @__PURE__ */ React74.createElement(Select.Toggle, __spreadValues({
|
7540
7578
|
hasFocus,
|
7541
7579
|
isOpen
|
7542
|
-
}, getToggleButtonProps({ disabled })))), !hideChips && !inline && /* @__PURE__ */
|
7580
|
+
}, getToggleButtonProps({ disabled })))), !hideChips && !inline && /* @__PURE__ */ React74.createElement("div", {
|
7543
7581
|
className: tw("flex flex-row flex-wrap gap-2 mt-2")
|
7544
|
-
}, renderChips()), /* @__PURE__ */
|
7545
|
-
|
7546
|
-
|
7547
|
-
|
7548
|
-
|
7549
|
-
|
7550
|
-
|
7551
|
-
|
7582
|
+
}, renderChips()), isOpen && /* @__PURE__ */ React74.createElement(PopoverOverlay, {
|
7583
|
+
ref: popoverRef,
|
7584
|
+
triggerRef: targetRef,
|
7585
|
+
state,
|
7586
|
+
placement: "bottom-left",
|
7587
|
+
shouldFlip: true,
|
7588
|
+
isNonModal: true,
|
7589
|
+
style: { width: (_a2 = targetRef.current) == null ? void 0 : _a2.offsetWidth }
|
7590
|
+
}, /* @__PURE__ */ React74.createElement(Select.Menu, __spreadValues({
|
7591
|
+
ref: menuRef,
|
7552
7592
|
maxHeight
|
7553
|
-
},
|
7593
|
+
}, menuProps), hasNoResults && /* @__PURE__ */ React74.createElement(Select.NoResults, null, noResults), filteredOptions.map((item, index) => /* @__PURE__ */ React74.createElement(Select.Item, __spreadValues({
|
7554
7594
|
key: itemToString(item),
|
7555
7595
|
highlighted: index === highlightedIndex,
|
7556
7596
|
selected: selectedItems.includes(item)
|
7557
7597
|
}, getItemProps({ item, index, disabled: isOptionDisabled(item, index) })), renderOption(item))))));
|
7558
7598
|
};
|
7559
|
-
var MultiSelectBaseSkeleton = () => /* @__PURE__ */
|
7599
|
+
var MultiSelectBaseSkeleton = () => /* @__PURE__ */ React74.createElement(Skeleton, {
|
7560
7600
|
height: 38
|
7561
7601
|
});
|
7562
7602
|
MultiSelectBase.Skeleton = MultiSelectBaseSkeleton;
|
@@ -7574,11 +7614,11 @@ var MultiSelect = (_a) => {
|
|
7574
7614
|
const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
|
7575
7615
|
const labelControlProps = getLabelControlProps(props);
|
7576
7616
|
const baseProps = omit12(props, Object.keys(labelControlProps));
|
7577
|
-
return /* @__PURE__ */
|
7617
|
+
return /* @__PURE__ */ React74.createElement(LabelControl, __spreadValues({
|
7578
7618
|
id: `${id.current}-label`,
|
7579
7619
|
htmlFor: `${id.current}-input`,
|
7580
7620
|
messageId: errorMessageId
|
7581
|
-
}, labelControlProps), /* @__PURE__ */
|
7621
|
+
}, labelControlProps), /* @__PURE__ */ React74.createElement(MultiSelectBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
|
7582
7622
|
id: id.current,
|
7583
7623
|
options,
|
7584
7624
|
noResults,
|
@@ -7586,16 +7626,16 @@ var MultiSelect = (_a) => {
|
|
7586
7626
|
valid: props.valid
|
7587
7627
|
})));
|
7588
7628
|
};
|
7589
|
-
var MultiSelectSkeleton = () => /* @__PURE__ */
|
7629
|
+
var MultiSelectSkeleton = () => /* @__PURE__ */ React74.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React74.createElement(MultiSelectBase.Skeleton, null));
|
7590
7630
|
MultiSelect.Skeleton = MultiSelectSkeleton;
|
7591
7631
|
MultiSelect.Skeleton.displayName = "MultiSelect.Skeleton";
|
7592
7632
|
|
7593
7633
|
// src/molecules/NativeSelect/NativeSelect.tsx
|
7594
|
-
import
|
7634
|
+
import React75, { useRef as useRef11 } from "react";
|
7595
7635
|
import omit13 from "lodash/omit";
|
7596
7636
|
import uniqueId6 from "lodash/uniqueId";
|
7597
7637
|
var import_caretDown = __toESM(require_caretDown());
|
7598
|
-
var NativeSelectBase =
|
7638
|
+
var NativeSelectBase = React75.forwardRef(
|
7599
7639
|
(_a, ref) => {
|
7600
7640
|
var _b = _a, { children, disabled = false, required = false, valid = true, readOnly = false } = _b, props = __objRest(_b, ["children", "disabled", "required", "valid", "readOnly"]);
|
7601
7641
|
const placeholderValue = uniqueId6("default_value_for_placeholder");
|
@@ -7612,16 +7652,16 @@ var NativeSelectBase = React74.forwardRef(
|
|
7612
7652
|
(_b2 = props.onBlur) == null ? void 0 : _b2.call(props, event);
|
7613
7653
|
}
|
7614
7654
|
};
|
7615
|
-
return /* @__PURE__ */
|
7655
|
+
return /* @__PURE__ */ React75.createElement("span", {
|
7616
7656
|
className: tw("relative block")
|
7617
|
-
}, !readOnly && /* @__PURE__ */
|
7657
|
+
}, !readOnly && /* @__PURE__ */ React75.createElement("span", {
|
7618
7658
|
className: tw(
|
7619
7659
|
"absolute right-0 inset-y-0 mr-4 text-grey-40 flex ml-3 pointer-events-none typography-default-strong mt-4"
|
7620
7660
|
)
|
7621
|
-
}, /* @__PURE__ */
|
7661
|
+
}, /* @__PURE__ */ React75.createElement(Icon, {
|
7622
7662
|
icon: import_caretDown.default,
|
7623
7663
|
"data-testid": "icon-dropdown"
|
7624
|
-
})), /* @__PURE__ */
|
7664
|
+
})), /* @__PURE__ */ React75.createElement("select", __spreadProps(__spreadValues({
|
7625
7665
|
ref,
|
7626
7666
|
disabled: disabled || readOnly,
|
7627
7667
|
required
|
@@ -7640,16 +7680,16 @@ var NativeSelectBase = React74.forwardRef(
|
|
7640
7680
|
),
|
7641
7681
|
props.className
|
7642
7682
|
)
|
7643
|
-
}), props.placeholder && /* @__PURE__ */
|
7683
|
+
}), props.placeholder && /* @__PURE__ */ React75.createElement("option", {
|
7644
7684
|
value: placeholderValue,
|
7645
7685
|
disabled: true
|
7646
7686
|
}, props.placeholder), children));
|
7647
7687
|
}
|
7648
7688
|
);
|
7649
|
-
NativeSelectBase.Skeleton = () => /* @__PURE__ */
|
7689
|
+
NativeSelectBase.Skeleton = () => /* @__PURE__ */ React75.createElement(Skeleton, {
|
7650
7690
|
height: 38
|
7651
7691
|
});
|
7652
|
-
var NativeSelect =
|
7692
|
+
var NativeSelect = React75.forwardRef(
|
7653
7693
|
(_a, ref) => {
|
7654
7694
|
var _b = _a, { readOnly } = _b, props = __objRest(_b, ["readOnly"]);
|
7655
7695
|
var _a2;
|
@@ -7658,11 +7698,11 @@ var NativeSelect = React74.forwardRef(
|
|
7658
7698
|
const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
|
7659
7699
|
const _b2 = getLabelControlProps(props), { "data-testid": dataTestId } = _b2, labelControlProps = __objRest(_b2, ["data-testid"]);
|
7660
7700
|
const baseProps = omit13(props, Object.keys(labelControlProps));
|
7661
|
-
return /* @__PURE__ */
|
7701
|
+
return /* @__PURE__ */ React75.createElement(LabelControl, __spreadValues({
|
7662
7702
|
id: `${id.current}-label`,
|
7663
7703
|
htmlFor: id.current,
|
7664
7704
|
messageId: errorMessageId
|
7665
|
-
}, labelControlProps), /* @__PURE__ */
|
7705
|
+
}, labelControlProps), /* @__PURE__ */ React75.createElement(NativeSelectBase, __spreadProps(__spreadValues(__spreadValues({
|
7666
7706
|
ref
|
7667
7707
|
}, baseProps), errorProps), {
|
7668
7708
|
id: id.current,
|
@@ -7676,21 +7716,21 @@ var NativeSelect = React74.forwardRef(
|
|
7676
7716
|
}
|
7677
7717
|
);
|
7678
7718
|
NativeSelect.displayName = "NativeSelect";
|
7679
|
-
var Option =
|
7719
|
+
var Option = React75.forwardRef((_a, ref) => {
|
7680
7720
|
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
7681
|
-
return /* @__PURE__ */
|
7721
|
+
return /* @__PURE__ */ React75.createElement("option", __spreadValues({
|
7682
7722
|
ref
|
7683
7723
|
}, props), children);
|
7684
7724
|
});
|
7685
7725
|
Option.displayName = "Option";
|
7686
|
-
var NativeSelectSkeleton = () => /* @__PURE__ */
|
7726
|
+
var NativeSelectSkeleton = () => /* @__PURE__ */ React75.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React75.createElement(NativeSelectBase.Skeleton, null), /* @__PURE__ */ React75.createElement("div", {
|
7687
7727
|
style: { height: "1px" }
|
7688
7728
|
}));
|
7689
7729
|
NativeSelect.Skeleton = NativeSelectSkeleton;
|
7690
7730
|
NativeSelect.Skeleton.displayName = "NativeSelect.Skeleton";
|
7691
7731
|
|
7692
7732
|
// src/molecules/PageHeader/PageHeader.tsx
|
7693
|
-
import
|
7733
|
+
import React76 from "react";
|
7694
7734
|
import castArray3 from "lodash/castArray";
|
7695
7735
|
import omit14 from "lodash/omit";
|
7696
7736
|
var PageHeader = ({
|
@@ -7702,49 +7742,48 @@ var PageHeader = ({
|
|
7702
7742
|
chips = [],
|
7703
7743
|
breadcrumbs
|
7704
7744
|
}) => {
|
7705
|
-
return /* @__PURE__ */
|
7745
|
+
return /* @__PURE__ */ React76.createElement(Flexbox, {
|
7706
7746
|
direction: "row",
|
7707
7747
|
gap: "4",
|
7708
7748
|
paddingBottom: "6"
|
7709
|
-
}, /* @__PURE__ */
|
7749
|
+
}, /* @__PURE__ */ React76.createElement(Flexbox, {
|
7710
7750
|
className: tw("grow"),
|
7711
7751
|
direction: "column",
|
7712
7752
|
gap: "0"
|
7713
|
-
}, breadcrumbs && /* @__PURE__ */
|
7753
|
+
}, breadcrumbs && /* @__PURE__ */ React76.createElement(Breadcrumbs, null, breadcrumbs), /* @__PURE__ */ React76.createElement(Flexbox, {
|
7714
7754
|
gap: "5"
|
7715
|
-
}, image && /* @__PURE__ */
|
7755
|
+
}, image && /* @__PURE__ */ React76.createElement("img", {
|
7716
7756
|
src: image,
|
7717
7757
|
alt: imageAlt,
|
7718
7758
|
className: tw("w-[56px] h-[56px]")
|
7719
|
-
}), /* @__PURE__ */
|
7759
|
+
}), /* @__PURE__ */ React76.createElement(Flexbox, {
|
7720
7760
|
direction: "column",
|
7721
7761
|
justifyContent: "center"
|
7722
|
-
}, /* @__PURE__ */
|
7762
|
+
}, /* @__PURE__ */ React76.createElement(Typography2.Heading, null, title), chips.length > 0 && /* @__PURE__ */ React76.createElement(Flexbox, {
|
7723
7763
|
gap: "3"
|
7724
|
-
}, chips.map((chip) => /* @__PURE__ */
|
7764
|
+
}, chips.map((chip) => /* @__PURE__ */ React76.createElement(Chip2, {
|
7725
7765
|
key: chip,
|
7726
7766
|
dense: true,
|
7727
7767
|
text: chip
|
7728
|
-
})))))), (secondaryActions || primaryAction) && /* @__PURE__ */
|
7768
|
+
})))))), (secondaryActions || primaryAction) && /* @__PURE__ */ React76.createElement(Flexbox, {
|
7729
7769
|
gap: "4",
|
7730
7770
|
className: tw("self-start")
|
7731
7771
|
}, secondaryActions && castArray3(secondaryActions).filter(Boolean).map((_a) => {
|
7732
7772
|
var _b = _a, { text } = _b, action = __objRest(_b, ["text"]);
|
7733
|
-
return /* @__PURE__ */
|
7773
|
+
return /* @__PURE__ */ React76.createElement(SecondaryButton, __spreadValues({
|
7734
7774
|
key: text
|
7735
7775
|
}, action), text);
|
7736
|
-
}), primaryAction && /* @__PURE__ */
|
7776
|
+
}), primaryAction && /* @__PURE__ */ React76.createElement(PrimaryButton, __spreadValues({
|
7737
7777
|
key: primaryAction.text
|
7738
7778
|
}, omit14(primaryAction, "text")), primaryAction.text)));
|
7739
7779
|
};
|
7740
7780
|
|
7741
7781
|
// src/molecules/Pagination/Pagination.tsx
|
7742
|
-
import
|
7782
|
+
import React78 from "react";
|
7743
7783
|
import clamp from "lodash/clamp";
|
7744
7784
|
|
7745
7785
|
// src/molecules/Select/Select.tsx
|
7746
|
-
import
|
7747
|
-
import { useOverlayPosition as useOverlayPosition6 } from "@react-aria/overlays";
|
7786
|
+
import React77, { useRef as useRef12, useState as useState10 } from "react";
|
7748
7787
|
import { useSelect } from "downshift";
|
7749
7788
|
import defaults from "lodash/defaults";
|
7750
7789
|
import isArray from "lodash/isArray";
|
@@ -7760,10 +7799,10 @@ var hasOptionGroups = (val) => {
|
|
7760
7799
|
};
|
7761
7800
|
var defaultRenderOption = (item, props, { selectedItem }, { getOptionKey, getValue, optionToString = getOptionLabelBuiltin }) => {
|
7762
7801
|
var _a, _b;
|
7763
|
-
return /* @__PURE__ */
|
7802
|
+
return /* @__PURE__ */ React77.createElement(Select.Item, __spreadValues({
|
7764
7803
|
key: (_b = (_a = getOptionKey == null ? void 0 : getOptionKey(item)) != null ? _a : getValue == null ? void 0 : getValue(item)) != null ? _b : optionToString(item),
|
7765
7804
|
selected: item === selectedItem
|
7766
|
-
}, props), hasIconProperty(item) && /* @__PURE__ */
|
7805
|
+
}, props), hasIconProperty(item) && /* @__PURE__ */ React77.createElement(InlineIcon, {
|
7767
7806
|
icon: item.icon
|
7768
7807
|
}), optionToString(item));
|
7769
7808
|
};
|
@@ -7836,7 +7875,7 @@ var _SelectBase = (props) => {
|
|
7836
7875
|
]);
|
7837
7876
|
const [hasFocus, setFocus] = useState10(false);
|
7838
7877
|
const targetRef = useRef12(null);
|
7839
|
-
const
|
7878
|
+
const menuRef = useRef12(null);
|
7840
7879
|
const items = hasOptionGroups(options) ? options.flatMap((g) => g.options) : options;
|
7841
7880
|
const findItemByValue = (val) => {
|
7842
7881
|
if (val === null) {
|
@@ -7846,7 +7885,9 @@ var _SelectBase = (props) => {
|
|
7846
7885
|
};
|
7847
7886
|
const {
|
7848
7887
|
isOpen,
|
7888
|
+
openMenu,
|
7849
7889
|
closeMenu,
|
7890
|
+
toggleMenu,
|
7850
7891
|
selectItem,
|
7851
7892
|
selectedItem,
|
7852
7893
|
highlightedIndex,
|
@@ -7861,13 +7902,13 @@ var _SelectBase = (props) => {
|
|
7861
7902
|
itemToString,
|
7862
7903
|
onSelectedItemChange: (e) => onChange == null ? void 0 : onChange(e.selectedItem)
|
7863
7904
|
});
|
7864
|
-
const
|
7865
|
-
|
7866
|
-
|
7867
|
-
|
7868
|
-
|
7869
|
-
|
7870
|
-
}
|
7905
|
+
const state = {
|
7906
|
+
isOpen,
|
7907
|
+
close: closeMenu,
|
7908
|
+
open: openMenu,
|
7909
|
+
toggle: toggleMenu,
|
7910
|
+
setOpen: (isOpen2) => isOpen2 ? openMenu() : closeMenu()
|
7911
|
+
};
|
7871
7912
|
const renderItem = (item, index) => UNSAFE_renderOption(
|
7872
7913
|
item,
|
7873
7914
|
__spreadValues({
|
@@ -7880,13 +7921,13 @@ var _SelectBase = (props) => {
|
|
7880
7921
|
},
|
7881
7922
|
withDefaults
|
7882
7923
|
);
|
7883
|
-
const renderGroup = (group) => /* @__PURE__ */
|
7924
|
+
const renderGroup = (group) => /* @__PURE__ */ React77.createElement(React77.Fragment, {
|
7884
7925
|
key: group.label
|
7885
|
-
}, /* @__PURE__ */
|
7886
|
-
const input = /* @__PURE__ */
|
7926
|
+
}, /* @__PURE__ */ React77.createElement(Select.Group, null, group.label), group.options.map((opt) => renderItem(opt, items.indexOf(opt))));
|
7927
|
+
const input = /* @__PURE__ */ React77.createElement(Select.InputContainer, __spreadProps(__spreadValues({}, getToggleButtonProps({ disabled: disabled || readOnly, ref: targetRef })), {
|
7887
7928
|
variant: disabled ? "disabled" : !valid ? "error" : readOnly ? "readOnly" : hasFocus ? "focused" : "default",
|
7888
7929
|
tabIndex: 0
|
7889
|
-
}), /* @__PURE__ */
|
7930
|
+
}), /* @__PURE__ */ React77.createElement(Select.Input, __spreadProps(__spreadValues({
|
7890
7931
|
id,
|
7891
7932
|
name
|
7892
7933
|
}, rest), {
|
@@ -7898,27 +7939,26 @@ var _SelectBase = (props) => {
|
|
7898
7939
|
tabIndex: -1,
|
7899
7940
|
onFocus: () => setFocus(true),
|
7900
7941
|
onBlur: () => setFocus(false)
|
7901
|
-
})), !readOnly && /* @__PURE__ */
|
7942
|
+
})), !readOnly && /* @__PURE__ */ React77.createElement(Select.Toggle, {
|
7902
7943
|
disabled,
|
7903
7944
|
isOpen,
|
7904
7945
|
tabIndex: -1
|
7905
7946
|
}));
|
7906
|
-
const
|
7907
|
-
|
7908
|
-
return /* @__PURE__ */ React76.createElement("div", {
|
7947
|
+
const menuProps = getMenuProps({ ref: menuRef }, { suppressRefError: !isOpen });
|
7948
|
+
return /* @__PURE__ */ React77.createElement("div", {
|
7909
7949
|
className: tw("relative")
|
7910
|
-
}, labelWrapper ?
|
7911
|
-
|
7912
|
-
|
7913
|
-
|
7914
|
-
|
7915
|
-
style
|
7916
|
-
|
7917
|
-
|
7950
|
+
}, labelWrapper ? React77.cloneElement(labelWrapper, { children: input }) : input, isOpen && /* @__PURE__ */ React77.createElement(PopoverOverlay, {
|
7951
|
+
state,
|
7952
|
+
triggerRef: targetRef,
|
7953
|
+
placement: "bottom-left",
|
7954
|
+
shouldFlip: true,
|
7955
|
+
style: { width: (_b = targetRef.current) == null ? void 0 : _b.offsetWidth }
|
7956
|
+
}, /* @__PURE__ */ React77.createElement(Select.Menu, __spreadValues({
|
7957
|
+
ref: menuRef,
|
7918
7958
|
maxHeight
|
7919
|
-
},
|
7959
|
+
}, menuProps), options.length === 0 && /* @__PURE__ */ React77.createElement(Select.EmptyStateContainer, null, emptyState), options.length > 0 && !hasOptionGroups(options) && options.map(renderItem), options.length > 0 && hasOptionGroups(options) && options.map(renderGroup), actions.length > 0 && /* @__PURE__ */ React77.createElement(React77.Fragment, null, /* @__PURE__ */ React77.createElement(Select.Divider, {
|
7920
7960
|
onMouseOver: () => setHighlightedIndex(-1)
|
7921
|
-
}), actions.map((act, index) => /* @__PURE__ */
|
7961
|
+
}), actions.map((act, index) => /* @__PURE__ */ React77.createElement(Select.ActionItem, __spreadProps(__spreadValues({
|
7922
7962
|
key: `${index}`
|
7923
7963
|
}, act), {
|
7924
7964
|
onMouseOver: () => setHighlightedIndex(-1),
|
@@ -7928,10 +7968,10 @@ var _SelectBase = (props) => {
|
|
7928
7968
|
}
|
7929
7969
|
}), act.label))))));
|
7930
7970
|
};
|
7931
|
-
var SelectBase = (props) => /* @__PURE__ */
|
7971
|
+
var SelectBase = (props) => /* @__PURE__ */ React77.createElement(_SelectBase, __spreadProps(__spreadValues({}, props), {
|
7932
7972
|
labelWrapper: void 0
|
7933
7973
|
}));
|
7934
|
-
var SelectBaseSkeleton = () => /* @__PURE__ */
|
7974
|
+
var SelectBaseSkeleton = () => /* @__PURE__ */ React77.createElement(Skeleton, {
|
7935
7975
|
height: 38
|
7936
7976
|
});
|
7937
7977
|
SelectBase.Skeleton = SelectBaseSkeleton;
|
@@ -7949,19 +7989,19 @@ var Select2 = (_a) => {
|
|
7949
7989
|
const baseProps = omit15(props, Object.keys(labelProps));
|
7950
7990
|
const legacyError = labelProps.error !== void 0 && labelProps.valid === false;
|
7951
7991
|
const variant = !labelProps.valid || legacyError ? "error" : labelProps.disabled ? "disabled" : "default";
|
7952
|
-
const label = /* @__PURE__ */
|
7992
|
+
const label = /* @__PURE__ */ React77.createElement(Label, __spreadValues({
|
7953
7993
|
id: `${id.current}-label`,
|
7954
7994
|
htmlFor: `${id.current}-input`,
|
7955
7995
|
variant,
|
7956
7996
|
messageId: errorMessageId
|
7957
7997
|
}, labelProps));
|
7958
|
-
return /* @__PURE__ */
|
7998
|
+
return /* @__PURE__ */ React77.createElement(FormControl, null, /* @__PURE__ */ React77.createElement(_SelectBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
|
7959
7999
|
id: `${id.current}-input`,
|
7960
8000
|
options,
|
7961
8001
|
disabled: props.disabled,
|
7962
8002
|
valid: props.valid,
|
7963
8003
|
labelWrapper: label
|
7964
|
-
})), /* @__PURE__ */
|
8004
|
+
})), /* @__PURE__ */ React77.createElement(HelperText, {
|
7965
8005
|
messageId: errorMessageId,
|
7966
8006
|
error: !labelProps.valid,
|
7967
8007
|
helperText: labelProps.helperText,
|
@@ -7970,7 +8010,7 @@ var Select2 = (_a) => {
|
|
7970
8010
|
reserveSpaceForError: labelProps.reserveSpaceForError
|
7971
8011
|
}));
|
7972
8012
|
};
|
7973
|
-
var SelectSkeleton = () => /* @__PURE__ */
|
8013
|
+
var SelectSkeleton = () => /* @__PURE__ */ React77.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React77.createElement(SelectBase.Skeleton, null));
|
7974
8014
|
Select2.Skeleton = SelectSkeleton;
|
7975
8015
|
Select2.Skeleton.displayName = "Select.Skeleton";
|
7976
8016
|
|
@@ -7989,23 +8029,23 @@ var Pagination = ({
|
|
7989
8029
|
pageSizes,
|
7990
8030
|
onPageSizeChange
|
7991
8031
|
}) => {
|
7992
|
-
const [value, setValue] =
|
7993
|
-
|
8032
|
+
const [value, setValue] = React78.useState(currentPage);
|
8033
|
+
React78.useEffect(() => {
|
7994
8034
|
setValue(currentPage);
|
7995
8035
|
}, [currentPage]);
|
7996
|
-
return /* @__PURE__ */
|
8036
|
+
return /* @__PURE__ */ React78.createElement(Box, {
|
7997
8037
|
className: tw("grid grid-cols-[200px_1fr_200px]"),
|
7998
8038
|
backgroundColor: "grey-0",
|
7999
8039
|
padding: "4"
|
8000
|
-
}, pageSizes && onPageSizeChange && typeof pageSize === "number" ? /* @__PURE__ */
|
8040
|
+
}, pageSizes && onPageSizeChange && typeof pageSize === "number" ? /* @__PURE__ */ React78.createElement(Box, {
|
8001
8041
|
display: "flex",
|
8002
8042
|
alignItems: "center",
|
8003
8043
|
gap: "4"
|
8004
|
-
}, /* @__PURE__ */
|
8044
|
+
}, /* @__PURE__ */ React78.createElement(Typography2.Small, {
|
8005
8045
|
color: "grey-50"
|
8006
|
-
}, "Items per page "), /* @__PURE__ */
|
8046
|
+
}, "Items per page "), /* @__PURE__ */ React78.createElement("div", {
|
8007
8047
|
className: tw("max-w-[70px]")
|
8008
|
-
}, /* @__PURE__ */
|
8048
|
+
}, /* @__PURE__ */ React78.createElement(SelectBase, {
|
8009
8049
|
options: pageSizes.map((size) => size.toString()),
|
8010
8050
|
value: pageSize.toString(),
|
8011
8051
|
onChange: (size) => {
|
@@ -8016,26 +8056,26 @@ var Pagination = ({
|
|
8016
8056
|
}
|
8017
8057
|
}
|
8018
8058
|
}
|
8019
|
-
}))) : /* @__PURE__ */
|
8059
|
+
}))) : /* @__PURE__ */ React78.createElement("div", null), /* @__PURE__ */ React78.createElement(Box, {
|
8020
8060
|
display: "flex",
|
8021
8061
|
justifyContent: "center",
|
8022
8062
|
alignItems: "center",
|
8023
8063
|
className: tw("grow")
|
8024
|
-
}, /* @__PURE__ */
|
8064
|
+
}, /* @__PURE__ */ React78.createElement(IconButton, {
|
8025
8065
|
"aria-label": "First",
|
8026
8066
|
onClick: () => onPageChange(1),
|
8027
8067
|
icon: import_chevronBackward.default,
|
8028
8068
|
disabled: !hasPreviousPage
|
8029
|
-
}), /* @__PURE__ */
|
8069
|
+
}), /* @__PURE__ */ React78.createElement(IconButton, {
|
8030
8070
|
"aria-label": "Previous",
|
8031
8071
|
onClick: () => onPageChange(currentPage - 1),
|
8032
8072
|
icon: import_chevronLeft3.default,
|
8033
8073
|
disabled: !hasPreviousPage
|
8034
|
-
}), /* @__PURE__ */
|
8074
|
+
}), /* @__PURE__ */ React78.createElement(Box, {
|
8035
8075
|
paddingX: "4"
|
8036
|
-
}, /* @__PURE__ */
|
8076
|
+
}, /* @__PURE__ */ React78.createElement(Typography2.Small, {
|
8037
8077
|
color: "grey-60"
|
8038
|
-
}, "Page")), /* @__PURE__ */
|
8078
|
+
}, "Page")), /* @__PURE__ */ React78.createElement(InputBase, {
|
8039
8079
|
className: classNames(tw("text-center max-w-[40px]"), "no-arrows"),
|
8040
8080
|
type: "number",
|
8041
8081
|
min: 1,
|
@@ -8052,45 +8092,45 @@ var Pagination = ({
|
|
8052
8092
|
const newPage = !isNaN(numberValue) ? clamp(numberValue, 1, totalPages) : 1;
|
8053
8093
|
onPageChange(newPage);
|
8054
8094
|
}
|
8055
|
-
}), /* @__PURE__ */
|
8095
|
+
}), /* @__PURE__ */ React78.createElement(Box, {
|
8056
8096
|
paddingX: "4"
|
8057
|
-
}, /* @__PURE__ */
|
8097
|
+
}, /* @__PURE__ */ React78.createElement(Typography2.Small, {
|
8058
8098
|
color: "grey-60"
|
8059
|
-
}, "of ", totalPages)), /* @__PURE__ */
|
8099
|
+
}, "of ", totalPages)), /* @__PURE__ */ React78.createElement(IconButton, {
|
8060
8100
|
"aria-label": "Next",
|
8061
8101
|
onClick: () => onPageChange(currentPage + 1),
|
8062
8102
|
icon: import_chevronRight3.default,
|
8063
8103
|
disabled: !hasNextPage
|
8064
|
-
}), /* @__PURE__ */
|
8104
|
+
}), /* @__PURE__ */ React78.createElement(IconButton, {
|
8065
8105
|
"aria-label": "Last",
|
8066
8106
|
onClick: () => onPageChange(totalPages),
|
8067
8107
|
icon: import_chevronForward.default,
|
8068
8108
|
disabled: !hasNextPage
|
8069
|
-
})), /* @__PURE__ */
|
8109
|
+
})), /* @__PURE__ */ React78.createElement("div", null));
|
8070
8110
|
};
|
8071
8111
|
|
8072
8112
|
// src/molecules/PopoverDialog/PopoverDialog.tsx
|
8073
|
-
import
|
8113
|
+
import React80 from "react";
|
8074
8114
|
import omit16 from "lodash/omit";
|
8075
8115
|
|
8076
8116
|
// src/atoms/PopoverDialog/PopoverDialog.tsx
|
8077
|
-
import
|
8117
|
+
import React79 from "react";
|
8078
8118
|
var Header = (_a) => {
|
8079
8119
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
8080
|
-
return /* @__PURE__ */
|
8120
|
+
return /* @__PURE__ */ React79.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8081
8121
|
className: classNames(tw("p-5 gap-3 flex items-center"), className)
|
8082
8122
|
}), children);
|
8083
8123
|
};
|
8084
8124
|
var Title = (_a) => {
|
8085
8125
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
8086
|
-
return /* @__PURE__ */
|
8126
|
+
return /* @__PURE__ */ React79.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
|
8087
8127
|
htmlTag: "h1",
|
8088
8128
|
variant: "small-strong"
|
8089
8129
|
}), children);
|
8090
8130
|
};
|
8091
8131
|
var Body = (_a) => {
|
8092
8132
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
8093
|
-
return /* @__PURE__ */
|
8133
|
+
return /* @__PURE__ */ React79.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
|
8094
8134
|
htmlTag: "div",
|
8095
8135
|
variant: "caption",
|
8096
8136
|
className: classNames(tw("px-5 overflow-y-auto"), className)
|
@@ -8098,13 +8138,13 @@ var Body = (_a) => {
|
|
8098
8138
|
};
|
8099
8139
|
var Footer = (_a) => {
|
8100
8140
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
8101
|
-
return /* @__PURE__ */
|
8141
|
+
return /* @__PURE__ */ React79.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8102
8142
|
className: classNames(tw("p-5"), className)
|
8103
8143
|
}), children);
|
8104
8144
|
};
|
8105
8145
|
var Actions2 = (_a) => {
|
8106
8146
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
8107
|
-
return /* @__PURE__ */
|
8147
|
+
return /* @__PURE__ */ React79.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8108
8148
|
className: classNames(tw("flex gap-4"), className)
|
8109
8149
|
}), children);
|
8110
8150
|
};
|
@@ -8120,13 +8160,13 @@ var PopoverDialog = {
|
|
8120
8160
|
var PopoverDialog2 = ({ placement, open, title, secondaryAction, primaryAction, children }) => {
|
8121
8161
|
const wrapPromptWithBody = (child) => {
|
8122
8162
|
if (isComponentType(child, PopoverDialog2.Prompt)) {
|
8123
|
-
return /* @__PURE__ */
|
8163
|
+
return /* @__PURE__ */ React80.createElement(Popover2.Panel, {
|
8124
8164
|
className: tw("max-w-[300px]")
|
8125
|
-
}, /* @__PURE__ */
|
8165
|
+
}, /* @__PURE__ */ React80.createElement(PopoverDialog.Header, null, /* @__PURE__ */ React80.createElement(PopoverDialog.Title, null, title)), child, /* @__PURE__ */ React80.createElement(PopoverDialog.Footer, null, /* @__PURE__ */ React80.createElement(PopoverDialog.Actions, null, secondaryAction && /* @__PURE__ */ React80.createElement(Popover2.Button, __spreadValues({
|
8126
8166
|
kind: "secondary-ghost",
|
8127
8167
|
key: secondaryAction.text,
|
8128
8168
|
dense: true
|
8129
|
-
}, omit16(secondaryAction, "text")), secondaryAction.text), /* @__PURE__ */
|
8169
|
+
}, omit16(secondaryAction, "text")), secondaryAction.text), /* @__PURE__ */ React80.createElement(Popover2.Button, __spreadValues({
|
8130
8170
|
kind: "ghost",
|
8131
8171
|
key: primaryAction.text,
|
8132
8172
|
dense: true
|
@@ -8134,18 +8174,15 @@ var PopoverDialog2 = ({ placement, open, title, secondaryAction, primaryAction,
|
|
8134
8174
|
}
|
8135
8175
|
return child;
|
8136
8176
|
};
|
8137
|
-
return /* @__PURE__ */
|
8177
|
+
return /* @__PURE__ */ React80.createElement(Popover2, {
|
8138
8178
|
type: "dialog",
|
8139
8179
|
isOpen: open,
|
8140
8180
|
placement,
|
8141
|
-
isDismissable: true,
|
8142
|
-
isKeyboardDismissDisabled: false,
|
8143
|
-
autoFocus: true,
|
8144
8181
|
containFocus: true
|
8145
|
-
},
|
8182
|
+
}, React80.Children.map(children, wrapPromptWithBody));
|
8146
8183
|
};
|
8147
8184
|
PopoverDialog2.Trigger = Popover2.Trigger;
|
8148
|
-
var Prompt = ({ children }) => /* @__PURE__ */
|
8185
|
+
var Prompt = ({ children }) => /* @__PURE__ */ React80.createElement(PopoverDialog.Body, null, children);
|
8149
8186
|
Prompt.displayName = "PopoverDialog.Prompt";
|
8150
8187
|
PopoverDialog2.Prompt = Prompt;
|
8151
8188
|
|
@@ -8154,14 +8191,14 @@ import { createPortal } from "react-dom";
|
|
8154
8191
|
var Portal = ({ children, to }) => createPortal(children, to);
|
8155
8192
|
|
8156
8193
|
// src/molecules/ProgressBar/ProgressBar.tsx
|
8157
|
-
import
|
8194
|
+
import React82 from "react";
|
8158
8195
|
|
8159
8196
|
// src/atoms/ProgressBar/ProgressBar.tsx
|
8160
|
-
import
|
8197
|
+
import React81 from "react";
|
8161
8198
|
import clamp2 from "lodash/clamp";
|
8162
8199
|
var ProgressBar = (_a) => {
|
8163
8200
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
8164
|
-
return /* @__PURE__ */
|
8201
|
+
return /* @__PURE__ */ React81.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8165
8202
|
className: classNames(
|
8166
8203
|
tw("relative flex items-center w-full bg-grey-0 h-2 rounded-full overflow-hidden"),
|
8167
8204
|
className
|
@@ -8177,7 +8214,7 @@ var STATUS_COLORS = {
|
|
8177
8214
|
ProgressBar.Indicator = (_a) => {
|
8178
8215
|
var _b = _a, { min, max, value, "aria-label": ariaLabel, status, className } = _b, rest = __objRest(_b, ["min", "max", "value", "aria-label", "status", "className"]);
|
8179
8216
|
const completedPercentage = clamp2((value - min) / (max - min) * 100, 0, 100);
|
8180
|
-
return /* @__PURE__ */
|
8217
|
+
return /* @__PURE__ */ React81.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8181
8218
|
className: classNames(
|
8182
8219
|
tw("h-2 rounded-full transition-all ease-in-out delay-150"),
|
8183
8220
|
STATUS_COLORS[status],
|
@@ -8193,11 +8230,11 @@ ProgressBar.Indicator = (_a) => {
|
|
8193
8230
|
};
|
8194
8231
|
ProgressBar.Labels = (_a) => {
|
8195
8232
|
var _b = _a, { children, startLabel, endLabel, className } = _b, rest = __objRest(_b, ["children", "startLabel", "endLabel", "className"]);
|
8196
|
-
return /* @__PURE__ */
|
8233
|
+
return /* @__PURE__ */ React81.createElement("div", {
|
8197
8234
|
className: classNames(tw("flex flex-row"), className)
|
8198
|
-
}, /* @__PURE__ */
|
8235
|
+
}, /* @__PURE__ */ React81.createElement("span", __spreadProps(__spreadValues({}, rest), {
|
8199
8236
|
className: tw("grow text-grey-70 typography-caption")
|
8200
|
-
}), startLabel), /* @__PURE__ */
|
8237
|
+
}), startLabel), /* @__PURE__ */ React81.createElement("span", __spreadProps(__spreadValues({}, rest), {
|
8201
8238
|
className: tw("grow text-grey-70 typography-caption text-right")
|
8202
8239
|
}), endLabel));
|
8203
8240
|
};
|
@@ -8215,7 +8252,7 @@ var ProgressBar2 = (props) => {
|
|
8215
8252
|
if (min > max) {
|
8216
8253
|
throw new Error("`min` value provided to `ProgressBar` is greater than `max` value.");
|
8217
8254
|
}
|
8218
|
-
const progress = /* @__PURE__ */
|
8255
|
+
const progress = /* @__PURE__ */ React82.createElement(ProgressBar, null, /* @__PURE__ */ React82.createElement(ProgressBar.Indicator, {
|
8219
8256
|
status: value === max ? completedStatus : progresStatus,
|
8220
8257
|
min,
|
8221
8258
|
max,
|
@@ -8225,13 +8262,13 @@ var ProgressBar2 = (props) => {
|
|
8225
8262
|
if (props.dense) {
|
8226
8263
|
return progress;
|
8227
8264
|
}
|
8228
|
-
return /* @__PURE__ */
|
8265
|
+
return /* @__PURE__ */ React82.createElement("div", null, progress, /* @__PURE__ */ React82.createElement(ProgressBar.Labels, {
|
8229
8266
|
className: tw("py-2"),
|
8230
8267
|
startLabel: props.startLabel,
|
8231
8268
|
endLabel: props.endLabel
|
8232
8269
|
}));
|
8233
8270
|
};
|
8234
|
-
var ProgressBarSkeleton = () => /* @__PURE__ */
|
8271
|
+
var ProgressBarSkeleton = () => /* @__PURE__ */ React82.createElement(Skeleton, {
|
8235
8272
|
height: 4,
|
8236
8273
|
display: "block"
|
8237
8274
|
});
|
@@ -8239,13 +8276,13 @@ ProgressBar2.Skeleton = ProgressBarSkeleton;
|
|
8239
8276
|
ProgressBar2.Skeleton.displayName = "ProgressBar.Skeleton";
|
8240
8277
|
|
8241
8278
|
// src/molecules/RadioButton/RadioButton.tsx
|
8242
|
-
import
|
8243
|
-
var RadioButton2 =
|
8279
|
+
import React83 from "react";
|
8280
|
+
var RadioButton2 = React83.forwardRef(
|
8244
8281
|
(_a, ref) => {
|
8245
8282
|
var _b = _a, { name, id, readOnly = false, disabled = false, caption, children, "aria-label": ariaLabel } = _b, props = __objRest(_b, ["name", "id", "readOnly", "disabled", "caption", "children", "aria-label"]);
|
8246
8283
|
var _a2;
|
8247
8284
|
const isChecked = (_a2 = props.checked) != null ? _a2 : props.defaultChecked;
|
8248
|
-
return !readOnly || isChecked ? /* @__PURE__ */
|
8285
|
+
return !readOnly || isChecked ? /* @__PURE__ */ React83.createElement(ControlLabel, {
|
8249
8286
|
htmlFor: id,
|
8250
8287
|
label: children,
|
8251
8288
|
"aria-label": ariaLabel,
|
@@ -8253,7 +8290,7 @@ var RadioButton2 = React82.forwardRef(
|
|
8253
8290
|
readOnly,
|
8254
8291
|
disabled,
|
8255
8292
|
style: { gap: "0 8px" }
|
8256
|
-
}, !readOnly && /* @__PURE__ */
|
8293
|
+
}, !readOnly && /* @__PURE__ */ React83.createElement(RadioButton, __spreadProps(__spreadValues({
|
8257
8294
|
id,
|
8258
8295
|
ref,
|
8259
8296
|
name
|
@@ -8264,12 +8301,12 @@ var RadioButton2 = React82.forwardRef(
|
|
8264
8301
|
}
|
8265
8302
|
);
|
8266
8303
|
RadioButton2.displayName = "RadioButton";
|
8267
|
-
var RadioButtonSkeleton = () => /* @__PURE__ */
|
8304
|
+
var RadioButtonSkeleton = () => /* @__PURE__ */ React83.createElement("div", {
|
8268
8305
|
className: tw("flex gap-3")
|
8269
|
-
}, /* @__PURE__ */
|
8306
|
+
}, /* @__PURE__ */ React83.createElement(Skeleton, {
|
8270
8307
|
height: 20,
|
8271
8308
|
width: 20
|
8272
|
-
}), /* @__PURE__ */
|
8309
|
+
}), /* @__PURE__ */ React83.createElement(Skeleton, {
|
8273
8310
|
height: 20,
|
8274
8311
|
width: 150
|
8275
8312
|
}));
|
@@ -8277,10 +8314,10 @@ RadioButton2.Skeleton = RadioButtonSkeleton;
|
|
8277
8314
|
RadioButton2.Skeleton.displayName = "RadioButton.Skeleton";
|
8278
8315
|
|
8279
8316
|
// src/molecules/RadioButtonGroup/RadioButtonGroup.tsx
|
8280
|
-
import
|
8317
|
+
import React84 from "react";
|
8281
8318
|
import uniqueId8 from "lodash/uniqueId";
|
8282
8319
|
var isRadioButton = (c) => {
|
8283
|
-
return
|
8320
|
+
return React84.isValidElement(c) && c.type === RadioButton2;
|
8284
8321
|
};
|
8285
8322
|
var RadioButtonGroup = (_a) => {
|
8286
8323
|
var _b = _a, {
|
@@ -8303,7 +8340,7 @@ var RadioButtonGroup = (_a) => {
|
|
8303
8340
|
"children"
|
8304
8341
|
]);
|
8305
8342
|
var _a2;
|
8306
|
-
const [value, setValue] =
|
8343
|
+
const [value, setValue] = React84.useState((_a2 = _value != null ? _value : defaultValue) != null ? _a2 : "");
|
8307
8344
|
const errorMessageId = uniqueId8();
|
8308
8345
|
const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
|
8309
8346
|
const labelControlProps = getLabelControlProps(props);
|
@@ -8314,14 +8351,14 @@ var RadioButtonGroup = (_a) => {
|
|
8314
8351
|
setValue(e.target.value);
|
8315
8352
|
onChange == null ? void 0 : onChange(e.target.value);
|
8316
8353
|
};
|
8317
|
-
const content =
|
8354
|
+
const content = React84.Children.map(children, (c) => {
|
8318
8355
|
var _a3, _b2, _c;
|
8319
8356
|
if (!isRadioButton(c)) {
|
8320
8357
|
return null;
|
8321
8358
|
}
|
8322
8359
|
const defaultChecked = defaultValue === void 0 ? void 0 : c.props.value === defaultValue;
|
8323
8360
|
const checked = value === void 0 ? void 0 : c.props.value === value;
|
8324
|
-
return
|
8361
|
+
return React84.cloneElement(c, {
|
8325
8362
|
name,
|
8326
8363
|
defaultChecked: (_a3 = c.props.defaultChecked) != null ? _a3 : defaultChecked,
|
8327
8364
|
checked: (_b2 = c.props.checked) != null ? _b2 : checked,
|
@@ -8330,11 +8367,11 @@ var RadioButtonGroup = (_a) => {
|
|
8330
8367
|
readOnly
|
8331
8368
|
});
|
8332
8369
|
});
|
8333
|
-
return /* @__PURE__ */
|
8370
|
+
return /* @__PURE__ */ React84.createElement(LabelControl, __spreadValues(__spreadValues({
|
8334
8371
|
fieldset: true
|
8335
|
-
}, labelControlProps), errorProps), cols && /* @__PURE__ */
|
8372
|
+
}, labelControlProps), errorProps), cols && /* @__PURE__ */ React84.createElement(InputGroup, {
|
8336
8373
|
cols
|
8337
|
-
}, content), !cols && /* @__PURE__ */
|
8374
|
+
}, content), !cols && /* @__PURE__ */ React84.createElement(Flexbox, {
|
8338
8375
|
direction,
|
8339
8376
|
alignItems: "flex-start",
|
8340
8377
|
colGap: "8",
|
@@ -8343,12 +8380,12 @@ var RadioButtonGroup = (_a) => {
|
|
8343
8380
|
}, content));
|
8344
8381
|
};
|
8345
8382
|
var RadioButtonGroupSkeleton = ({ direction = "row", options = 2 }) => {
|
8346
|
-
return /* @__PURE__ */
|
8383
|
+
return /* @__PURE__ */ React84.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React84.createElement("div", {
|
8347
8384
|
className: tw("flex flex-wrap", {
|
8348
8385
|
"flex-row gap-8": direction === "row",
|
8349
8386
|
"flex-col gap-2": direction === "column"
|
8350
8387
|
})
|
8351
|
-
}, Array.from({ length: options }).map((_, key) => /* @__PURE__ */
|
8388
|
+
}, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ React84.createElement(RadioButton2.Skeleton, {
|
8352
8389
|
key
|
8353
8390
|
}))));
|
8354
8391
|
};
|
@@ -8356,68 +8393,68 @@ RadioButtonGroup.Skeleton = RadioButtonGroupSkeleton;
|
|
8356
8393
|
RadioButtonGroup.Skeleton.displayName = "RadioButtonGroup.Skeleton";
|
8357
8394
|
|
8358
8395
|
// src/molecules/Section/Section.tsx
|
8359
|
-
import
|
8396
|
+
import React86 from "react";
|
8360
8397
|
import castArray4 from "lodash/castArray";
|
8361
8398
|
|
8362
8399
|
// src/atoms/Section/Section.tsx
|
8363
|
-
import
|
8400
|
+
import React85 from "react";
|
8364
8401
|
var Section2 = (_a) => {
|
8365
8402
|
var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
|
8366
|
-
return /* @__PURE__ */
|
8403
|
+
return /* @__PURE__ */ React85.createElement(Box, __spreadValues({
|
8367
8404
|
borderColor: "grey-5",
|
8368
8405
|
borderWidth: "1px"
|
8369
8406
|
}, rest), children);
|
8370
8407
|
};
|
8371
8408
|
Section2.Header = (_a) => {
|
8372
8409
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
8373
|
-
return /* @__PURE__ */
|
8410
|
+
return /* @__PURE__ */ React85.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8374
8411
|
className: classNames(tw("px-6 py-5 flex gap-5 justify-between items-center"), className)
|
8375
8412
|
}), children);
|
8376
8413
|
};
|
8377
8414
|
Section2.TitleContainer = (_a) => {
|
8378
8415
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
8379
|
-
return /* @__PURE__ */
|
8416
|
+
return /* @__PURE__ */ React85.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8380
8417
|
className: classNames(tw("flex flex-col grow gap-2"), className)
|
8381
8418
|
}), children);
|
8382
8419
|
};
|
8383
8420
|
Section2.Title = (_a) => {
|
8384
8421
|
var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
|
8385
|
-
return /* @__PURE__ */
|
8422
|
+
return /* @__PURE__ */ React85.createElement(Typography2.Subheading, __spreadProps(__spreadValues({}, rest), {
|
8386
8423
|
color: "black"
|
8387
8424
|
}), children);
|
8388
8425
|
};
|
8389
8426
|
Section2.Subtitle = (_a) => {
|
8390
8427
|
var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
|
8391
|
-
return /* @__PURE__ */
|
8428
|
+
return /* @__PURE__ */ React85.createElement(Typography2.SmallText, __spreadProps(__spreadValues({}, rest), {
|
8392
8429
|
color: "grey-70"
|
8393
8430
|
}), children);
|
8394
8431
|
};
|
8395
8432
|
Section2.Actions = (_a) => {
|
8396
8433
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
8397
|
-
return /* @__PURE__ */
|
8434
|
+
return /* @__PURE__ */ React85.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8398
8435
|
className: classNames(tw("flex gap-4 justify-end"), className)
|
8399
8436
|
}), children);
|
8400
8437
|
};
|
8401
8438
|
Section2.Body = (_a) => {
|
8402
8439
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
8403
|
-
return /* @__PURE__ */
|
8440
|
+
return /* @__PURE__ */ React85.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8404
8441
|
className: classNames(tw("p-6"), className)
|
8405
|
-
}), /* @__PURE__ */
|
8442
|
+
}), /* @__PURE__ */ React85.createElement(Typography, {
|
8406
8443
|
htmlTag: "div",
|
8407
8444
|
color: "grey-70"
|
8408
8445
|
}, children));
|
8409
8446
|
};
|
8410
8447
|
|
8411
8448
|
// src/molecules/Section/Section.tsx
|
8412
|
-
var Section3 = ({ title, subtitle, actions, children }) => /* @__PURE__ */
|
8449
|
+
var Section3 = ({ title, subtitle, actions, children }) => /* @__PURE__ */ React86.createElement(Section2, null, title && /* @__PURE__ */ React86.createElement(React86.Fragment, null, /* @__PURE__ */ React86.createElement(Section2.Header, null, /* @__PURE__ */ React86.createElement(Section2.TitleContainer, null, /* @__PURE__ */ React86.createElement(Section2.Title, null, title), subtitle && /* @__PURE__ */ React86.createElement(Section2.Subtitle, null, subtitle)), /* @__PURE__ */ React86.createElement(Section2.Actions, null, actions && castArray4(actions).filter(Boolean).map((_a) => {
|
8413
8450
|
var _b = _a, { text } = _b, action = __objRest(_b, ["text"]);
|
8414
|
-
return /* @__PURE__ */
|
8451
|
+
return /* @__PURE__ */ React86.createElement(SecondaryButton, __spreadValues({
|
8415
8452
|
key: text
|
8416
8453
|
}, action), text);
|
8417
|
-
}))), /* @__PURE__ */
|
8454
|
+
}))), /* @__PURE__ */ React86.createElement(Divider2, null)), /* @__PURE__ */ React86.createElement(Section2.Body, null, children));
|
8418
8455
|
|
8419
8456
|
// src/molecules/SegmentedControl/SegmentedControl.tsx
|
8420
|
-
import
|
8457
|
+
import React87 from "react";
|
8421
8458
|
var SegmentedControl = (_a) => {
|
8422
8459
|
var _b = _a, {
|
8423
8460
|
children,
|
@@ -8434,7 +8471,7 @@ var SegmentedControl = (_a) => {
|
|
8434
8471
|
"selected",
|
8435
8472
|
"className"
|
8436
8473
|
]);
|
8437
|
-
return /* @__PURE__ */
|
8474
|
+
return /* @__PURE__ */ React87.createElement("button", __spreadProps(__spreadValues({
|
8438
8475
|
type: "button"
|
8439
8476
|
}, rest), {
|
8440
8477
|
className: classNames(
|
@@ -8465,11 +8502,11 @@ var SegmentedControlGroup = (_a) => {
|
|
8465
8502
|
"border border-grey-20 text-grey-50": variant === "outlined",
|
8466
8503
|
"bg-grey-0": variant === "raised"
|
8467
8504
|
});
|
8468
|
-
return /* @__PURE__ */
|
8505
|
+
return /* @__PURE__ */ React87.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8469
8506
|
className: classNames(classes2, className)
|
8470
|
-
}),
|
8507
|
+
}), React87.Children.map(
|
8471
8508
|
children,
|
8472
|
-
(child) =>
|
8509
|
+
(child) => React87.cloneElement(child, {
|
8473
8510
|
dense,
|
8474
8511
|
variant,
|
8475
8512
|
onClick: () => onChange(child.props.value),
|
@@ -8507,10 +8544,10 @@ var getCommonClassNames = (dense, selected) => tw(
|
|
8507
8544
|
);
|
8508
8545
|
|
8509
8546
|
// src/molecules/Spacing/Spacing.tsx
|
8510
|
-
import
|
8547
|
+
import React88 from "react";
|
8511
8548
|
var Spacing = (_a) => {
|
8512
8549
|
var _b = _a, { gap, row } = _b, rest = __objRest(_b, ["gap", "row"]);
|
8513
|
-
return /* @__PURE__ */
|
8550
|
+
return /* @__PURE__ */ React88.createElement(Box, __spreadProps(__spreadValues({}, rest), {
|
8514
8551
|
display: "flex",
|
8515
8552
|
flexDirection: row ? "row" : "column",
|
8516
8553
|
gap
|
@@ -8518,14 +8555,14 @@ var Spacing = (_a) => {
|
|
8518
8555
|
};
|
8519
8556
|
|
8520
8557
|
// src/molecules/Stepper/Stepper.tsx
|
8521
|
-
import
|
8558
|
+
import React90 from "react";
|
8522
8559
|
|
8523
8560
|
// src/atoms/Stepper/Stepper.tsx
|
8524
|
-
import
|
8561
|
+
import React89 from "react";
|
8525
8562
|
var import_tick5 = __toESM(require_tick());
|
8526
8563
|
var Stepper = (_a) => {
|
8527
8564
|
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
|
8528
|
-
return /* @__PURE__ */
|
8565
|
+
return /* @__PURE__ */ React89.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8529
8566
|
className: classNames(className)
|
8530
8567
|
}));
|
8531
8568
|
};
|
@@ -8539,7 +8576,7 @@ var ConnectorContainer = (_a) => {
|
|
8539
8576
|
"completed",
|
8540
8577
|
"dense"
|
8541
8578
|
]);
|
8542
|
-
return /* @__PURE__ */
|
8579
|
+
return /* @__PURE__ */ React89.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8543
8580
|
className: classNames(
|
8544
8581
|
tw("absolute w-full -left-1/2", {
|
8545
8582
|
"top-[3px] px-[14px]": Boolean(dense),
|
@@ -8551,7 +8588,7 @@ var ConnectorContainer = (_a) => {
|
|
8551
8588
|
};
|
8552
8589
|
var Connector = (_a) => {
|
8553
8590
|
var _b = _a, { children, className, completed, dense } = _b, rest = __objRest(_b, ["children", "className", "completed", "dense"]);
|
8554
|
-
return /* @__PURE__ */
|
8591
|
+
return /* @__PURE__ */ React89.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8555
8592
|
className: classNames(
|
8556
8593
|
tw("w-full", {
|
8557
8594
|
"bg-grey-20": !completed,
|
@@ -8565,7 +8602,7 @@ var Connector = (_a) => {
|
|
8565
8602
|
};
|
8566
8603
|
var Step = (_a) => {
|
8567
8604
|
var _b = _a, { className, state } = _b, rest = __objRest(_b, ["className", "state"]);
|
8568
|
-
return /* @__PURE__ */
|
8605
|
+
return /* @__PURE__ */ React89.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8569
8606
|
className: classNames(
|
8570
8607
|
tw("flex flex-col items-center text-grey-90 relative text-center", {
|
8571
8608
|
"text-grey-20": state === "inactive"
|
@@ -8586,13 +8623,13 @@ var getDenseClassNames = (state) => tw("h-[8px] w-[8px]", {
|
|
8586
8623
|
});
|
8587
8624
|
var Indicator = (_a) => {
|
8588
8625
|
var _b = _a, { children, className, state, dense } = _b, rest = __objRest(_b, ["children", "className", "state", "dense"]);
|
8589
|
-
return /* @__PURE__ */
|
8626
|
+
return /* @__PURE__ */ React89.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8590
8627
|
className: classNames(
|
8591
8628
|
tw("rounded-full flex justify-center items-center mx-2 mb-3"),
|
8592
8629
|
dense ? getDenseClassNames(state) : getClassNames(state),
|
8593
8630
|
className
|
8594
8631
|
)
|
8595
|
-
}), state === "completed" ? /* @__PURE__ */
|
8632
|
+
}), state === "completed" ? /* @__PURE__ */ React89.createElement(InlineIcon, {
|
8596
8633
|
icon: import_tick5.default
|
8597
8634
|
}) : dense ? null : children);
|
8598
8635
|
};
|
@@ -8603,25 +8640,25 @@ Stepper.ConnectorContainer = ConnectorContainer;
|
|
8603
8640
|
|
8604
8641
|
// src/molecules/Stepper/Stepper.tsx
|
8605
8642
|
var Stepper2 = ({ children, activeIndex, dense }) => {
|
8606
|
-
const steps =
|
8607
|
-
return /* @__PURE__ */
|
8643
|
+
const steps = React90.Children.count(children);
|
8644
|
+
return /* @__PURE__ */ React90.createElement(Stepper, {
|
8608
8645
|
role: "list"
|
8609
|
-
}, /* @__PURE__ */
|
8646
|
+
}, /* @__PURE__ */ React90.createElement(Template, {
|
8610
8647
|
columns: steps
|
8611
|
-
},
|
8648
|
+
}, React90.Children.map(children, (child, index) => {
|
8612
8649
|
if (!isComponentType(child, Step2)) {
|
8613
8650
|
return new Error("<Stepper> can only have <Stepper.Step> components as children");
|
8614
8651
|
} else {
|
8615
8652
|
const state = index > activeIndex ? "inactive" : index === activeIndex ? "active" : "completed";
|
8616
|
-
return /* @__PURE__ */
|
8653
|
+
return /* @__PURE__ */ React90.createElement(Stepper.Step, {
|
8617
8654
|
state,
|
8618
8655
|
"aria-current": state === "active" ? "step" : false,
|
8619
8656
|
role: "listitem"
|
8620
|
-
}, index > 0 && index <= steps && /* @__PURE__ */
|
8657
|
+
}, index > 0 && index <= steps && /* @__PURE__ */ React90.createElement(Stepper.ConnectorContainer, {
|
8621
8658
|
dense
|
8622
|
-
}, /* @__PURE__ */
|
8659
|
+
}, /* @__PURE__ */ React90.createElement(Stepper.ConnectorContainer.Connector, {
|
8623
8660
|
completed: state === "completed" || state === "active"
|
8624
|
-
})), /* @__PURE__ */
|
8661
|
+
})), /* @__PURE__ */ React90.createElement(Stepper.Step.Indicator, {
|
8625
8662
|
state,
|
8626
8663
|
dense
|
8627
8664
|
}, index + 1), child.props.children);
|
@@ -8633,16 +8670,16 @@ Step2.displayName = "Stepper.Step";
|
|
8633
8670
|
Stepper2.Step = Step2;
|
8634
8671
|
|
8635
8672
|
// src/molecules/Switch/Switch.tsx
|
8636
|
-
import
|
8673
|
+
import React92 from "react";
|
8637
8674
|
|
8638
8675
|
// src/atoms/Switch/Switch.tsx
|
8639
|
-
import
|
8640
|
-
var Switch =
|
8676
|
+
import React91 from "react";
|
8677
|
+
var Switch = React91.forwardRef(
|
8641
8678
|
(_a, ref) => {
|
8642
8679
|
var _b = _a, { id, children, name, disabled = false, readOnly = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly"]);
|
8643
|
-
return /* @__PURE__ */
|
8680
|
+
return /* @__PURE__ */ React91.createElement("span", {
|
8644
8681
|
className: tw("relative inline-flex justify-center items-center self-center group")
|
8645
|
-
}, /* @__PURE__ */
|
8682
|
+
}, /* @__PURE__ */ React91.createElement("input", __spreadProps(__spreadValues({
|
8646
8683
|
id,
|
8647
8684
|
ref,
|
8648
8685
|
type: "checkbox",
|
@@ -8661,7 +8698,7 @@ var Switch = React90.forwardRef(
|
|
8661
8698
|
),
|
8662
8699
|
readOnly,
|
8663
8700
|
disabled
|
8664
|
-
})), /* @__PURE__ */
|
8701
|
+
})), /* @__PURE__ */ React91.createElement("span", {
|
8665
8702
|
className: tw(
|
8666
8703
|
"pointer-events-none rounded-full absolute inline-block transition duration-300 h-4 w-4 transform peer-checked/switch:translate-x-5",
|
8667
8704
|
"bg-white peer-disabled/switch:bg-grey-0 left-2 peer-checked/switch:left-1",
|
@@ -8674,12 +8711,12 @@ var Switch = React90.forwardRef(
|
|
8674
8711
|
);
|
8675
8712
|
|
8676
8713
|
// src/molecules/Switch/Switch.tsx
|
8677
|
-
var Switch2 =
|
8714
|
+
var Switch2 = React92.forwardRef(
|
8678
8715
|
(_a, ref) => {
|
8679
8716
|
var _b = _a, { id, name, caption, readOnly = false, disabled = false, children, "aria-label": ariaLabel } = _b, props = __objRest(_b, ["id", "name", "caption", "readOnly", "disabled", "children", "aria-label"]);
|
8680
8717
|
var _a2;
|
8681
8718
|
const isChecked = (_a2 = props.checked) != null ? _a2 : props.defaultChecked;
|
8682
|
-
return !readOnly || isChecked ? /* @__PURE__ */
|
8719
|
+
return !readOnly || isChecked ? /* @__PURE__ */ React92.createElement(ControlLabel, {
|
8683
8720
|
htmlFor: id,
|
8684
8721
|
label: children,
|
8685
8722
|
"aria-label": ariaLabel,
|
@@ -8687,7 +8724,7 @@ var Switch2 = React91.forwardRef(
|
|
8687
8724
|
readOnly,
|
8688
8725
|
disabled,
|
8689
8726
|
style: { gap: "0 8px" }
|
8690
|
-
}, !readOnly && /* @__PURE__ */
|
8727
|
+
}, !readOnly && /* @__PURE__ */ React92.createElement(Switch, __spreadProps(__spreadValues({
|
8691
8728
|
id,
|
8692
8729
|
ref,
|
8693
8730
|
name
|
@@ -8698,12 +8735,12 @@ var Switch2 = React91.forwardRef(
|
|
8698
8735
|
}
|
8699
8736
|
);
|
8700
8737
|
Switch2.displayName = "Switch";
|
8701
|
-
var SwitchSkeleton = () => /* @__PURE__ */
|
8738
|
+
var SwitchSkeleton = () => /* @__PURE__ */ React92.createElement("div", {
|
8702
8739
|
className: tw("flex gap-3")
|
8703
|
-
}, /* @__PURE__ */
|
8740
|
+
}, /* @__PURE__ */ React92.createElement(Skeleton, {
|
8704
8741
|
height: 20,
|
8705
8742
|
width: 35
|
8706
|
-
}), /* @__PURE__ */
|
8743
|
+
}), /* @__PURE__ */ React92.createElement(Skeleton, {
|
8707
8744
|
height: 20,
|
8708
8745
|
width: 150
|
8709
8746
|
}));
|
@@ -8711,7 +8748,7 @@ Switch2.Skeleton = SwitchSkeleton;
|
|
8711
8748
|
Switch2.Skeleton.displayName = "Switch.Skeleton ";
|
8712
8749
|
|
8713
8750
|
// src/molecules/SwitchGroup/SwitchGroup.tsx
|
8714
|
-
import
|
8751
|
+
import React93, { useState as useState11 } from "react";
|
8715
8752
|
import uniqueId9 from "lodash/uniqueId";
|
8716
8753
|
var SwitchGroup = (_a) => {
|
8717
8754
|
var _b = _a, {
|
@@ -8743,11 +8780,11 @@ var SwitchGroup = (_a) => {
|
|
8743
8780
|
setSelectedItems(updated);
|
8744
8781
|
onChange == null ? void 0 : onChange(updated);
|
8745
8782
|
};
|
8746
|
-
return /* @__PURE__ */
|
8783
|
+
return /* @__PURE__ */ React93.createElement(LabelControl, __spreadValues(__spreadValues({
|
8747
8784
|
fieldset: true
|
8748
|
-
}, labelControlProps), errorProps), /* @__PURE__ */
|
8785
|
+
}, labelControlProps), errorProps), /* @__PURE__ */ React93.createElement(InputGroup, {
|
8749
8786
|
cols
|
8750
|
-
},
|
8787
|
+
}, React93.Children.map(children, (c) => {
|
8751
8788
|
var _a3, _b2, _c, _d;
|
8752
8789
|
if (!isComponentType(c, Switch2)) {
|
8753
8790
|
return null;
|
@@ -8755,7 +8792,7 @@ var SwitchGroup = (_a) => {
|
|
8755
8792
|
const str = (_a3 = c.props.value) == null ? void 0 : _a3.toString();
|
8756
8793
|
const defaultChecked = defaultValue === void 0 ? void 0 : str !== void 0 && defaultValue.includes(str);
|
8757
8794
|
const checked = value === void 0 ? void 0 : str !== void 0 && value.includes(str);
|
8758
|
-
return
|
8795
|
+
return React93.cloneElement(c, {
|
8759
8796
|
defaultChecked: (_b2 = c.props.defaultChecked) != null ? _b2 : defaultChecked,
|
8760
8797
|
checked: (_c = c.props.checked) != null ? _c : checked,
|
8761
8798
|
onChange: (_d = c.props.onChange) != null ? _d : handleChange,
|
@@ -8765,9 +8802,9 @@ var SwitchGroup = (_a) => {
|
|
8765
8802
|
})));
|
8766
8803
|
};
|
8767
8804
|
var SwitchGroupSkeleton = ({ options = 2 }) => {
|
8768
|
-
return /* @__PURE__ */
|
8805
|
+
return /* @__PURE__ */ React93.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React93.createElement("div", {
|
8769
8806
|
className: tw("flex flex-wrap flex-col gap-2")
|
8770
|
-
}, Array.from({ length: options }).map((_, key) => /* @__PURE__ */
|
8807
|
+
}, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ React93.createElement(Switch2.Skeleton, {
|
8771
8808
|
key
|
8772
8809
|
}))));
|
8773
8810
|
};
|
@@ -8775,10 +8812,10 @@ SwitchGroup.Skeleton = SwitchGroupSkeleton;
|
|
8775
8812
|
SwitchGroup.Skeleton.displayName = "SwitchGroup.Skeleton";
|
8776
8813
|
|
8777
8814
|
// src/molecules/TagLabel/TagLabel.tsx
|
8778
|
-
import
|
8815
|
+
import React94 from "react";
|
8779
8816
|
var TagLabel = (_a) => {
|
8780
8817
|
var _b = _a, { title, dense = false } = _b, rest = __objRest(_b, ["title", "dense"]);
|
8781
|
-
return /* @__PURE__ */
|
8818
|
+
return /* @__PURE__ */ React94.createElement("span", __spreadProps(__spreadValues({}, rest), {
|
8782
8819
|
className: tw("rounded-full text-white bg-primary-70", {
|
8783
8820
|
"py-2 px-4 typography-caption": !dense,
|
8784
8821
|
"py-2 px-3 typography-caption-small": dense
|
@@ -8787,14 +8824,14 @@ var TagLabel = (_a) => {
|
|
8787
8824
|
};
|
8788
8825
|
|
8789
8826
|
// src/molecules/Textarea/Textarea.tsx
|
8790
|
-
import
|
8827
|
+
import React95, { useRef as useRef13, useState as useState12 } from "react";
|
8791
8828
|
import omit17 from "lodash/omit";
|
8792
8829
|
import toString2 from "lodash/toString";
|
8793
8830
|
import uniqueId10 from "lodash/uniqueId";
|
8794
|
-
var TextareaBase =
|
8831
|
+
var TextareaBase = React95.forwardRef(
|
8795
8832
|
(_a, ref) => {
|
8796
8833
|
var _b = _a, { readOnly = false, valid = true } = _b, props = __objRest(_b, ["readOnly", "valid"]);
|
8797
|
-
return /* @__PURE__ */
|
8834
|
+
return /* @__PURE__ */ React95.createElement("textarea", __spreadProps(__spreadValues({
|
8798
8835
|
ref
|
8799
8836
|
}, props), {
|
8800
8837
|
readOnly,
|
@@ -8802,10 +8839,10 @@ var TextareaBase = React94.forwardRef(
|
|
8802
8839
|
}));
|
8803
8840
|
}
|
8804
8841
|
);
|
8805
|
-
TextareaBase.Skeleton = () => /* @__PURE__ */
|
8842
|
+
TextareaBase.Skeleton = () => /* @__PURE__ */ React95.createElement(Skeleton, {
|
8806
8843
|
height: 58
|
8807
8844
|
});
|
8808
|
-
var Textarea =
|
8845
|
+
var Textarea = React95.forwardRef((props, ref) => {
|
8809
8846
|
var _a, _b, _c;
|
8810
8847
|
const [value, setValue] = useState12((_b = (_a = props.value) != null ? _a : props.defaultValue) != null ? _b : "");
|
8811
8848
|
const id = useRef13((_c = props.id) != null ? _c : `textarea-${uniqueId10()}`);
|
@@ -8813,12 +8850,12 @@ var Textarea = React94.forwardRef((props, ref) => {
|
|
8813
8850
|
const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
|
8814
8851
|
const _d = getLabelControlProps(props), { "data-testid": dataTestId } = _d, labelControlProps = __objRest(_d, ["data-testid"]);
|
8815
8852
|
const baseProps = omit17(props, Object.keys(labelControlProps));
|
8816
|
-
return /* @__PURE__ */
|
8853
|
+
return /* @__PURE__ */ React95.createElement(LabelControl, __spreadValues({
|
8817
8854
|
id: `${id.current}-label`,
|
8818
8855
|
htmlFor: id.current,
|
8819
8856
|
messageId: errorMessageId,
|
8820
8857
|
length: value !== void 0 ? toString2(value).length : void 0
|
8821
|
-
}, labelControlProps), /* @__PURE__ */
|
8858
|
+
}, labelControlProps), /* @__PURE__ */ React95.createElement(TextareaBase, __spreadProps(__spreadValues(__spreadValues({
|
8822
8859
|
ref
|
8823
8860
|
}, baseProps), errorProps), {
|
8824
8861
|
id: id.current,
|
@@ -8835,48 +8872,48 @@ var Textarea = React94.forwardRef((props, ref) => {
|
|
8835
8872
|
})));
|
8836
8873
|
});
|
8837
8874
|
Textarea.displayName = "Textarea";
|
8838
|
-
var TextAreaSkeleton = () => /* @__PURE__ */
|
8875
|
+
var TextAreaSkeleton = () => /* @__PURE__ */ React95.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React95.createElement(TextareaBase.Skeleton, null));
|
8839
8876
|
Textarea.Skeleton = TextAreaSkeleton;
|
8840
8877
|
Textarea.Skeleton.displayName = "Textarea.Skeleton";
|
8841
8878
|
|
8842
8879
|
// src/molecules/Timeline/Timeline.tsx
|
8843
|
-
import
|
8880
|
+
import React97 from "react";
|
8844
8881
|
|
8845
8882
|
// src/atoms/Timeline/Timeline.tsx
|
8846
|
-
import
|
8883
|
+
import React96 from "react";
|
8847
8884
|
var Timeline = (_a) => {
|
8848
8885
|
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
|
8849
|
-
return /* @__PURE__ */
|
8886
|
+
return /* @__PURE__ */ React96.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8850
8887
|
className: classNames(tw("grid grid-cols-[16px_1fr] gap-x-4"), className)
|
8851
8888
|
}));
|
8852
8889
|
};
|
8853
8890
|
var Content2 = (_a) => {
|
8854
8891
|
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
|
8855
|
-
return /* @__PURE__ */
|
8892
|
+
return /* @__PURE__ */ React96.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8856
8893
|
className: classNames(tw("pb-6"), className)
|
8857
8894
|
}));
|
8858
8895
|
};
|
8859
8896
|
var Separator2 = (_a) => {
|
8860
8897
|
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
|
8861
|
-
return /* @__PURE__ */
|
8898
|
+
return /* @__PURE__ */ React96.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8862
8899
|
className: classNames(tw("flex items-center justify-center h-5 w-5"), className)
|
8863
8900
|
}));
|
8864
8901
|
};
|
8865
8902
|
var LineContainer = (_a) => {
|
8866
8903
|
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
|
8867
|
-
return /* @__PURE__ */
|
8904
|
+
return /* @__PURE__ */ React96.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8868
8905
|
className: classNames(tw("flex justify-center py-1"), className)
|
8869
8906
|
}));
|
8870
8907
|
};
|
8871
8908
|
var Line = (_a) => {
|
8872
8909
|
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
|
8873
|
-
return /* @__PURE__ */
|
8910
|
+
return /* @__PURE__ */ React96.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8874
8911
|
className: classNames(tw("w-1 bg-grey-5 h-full justify-self-center"), className)
|
8875
8912
|
}));
|
8876
8913
|
};
|
8877
8914
|
var Dot = (_a) => {
|
8878
8915
|
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
|
8879
|
-
return /* @__PURE__ */
|
8916
|
+
return /* @__PURE__ */ React96.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8880
8917
|
className: classNames(tw("bg-grey-30 h-[6px] w-[6px] rounded"), className)
|
8881
8918
|
}));
|
8882
8919
|
};
|
@@ -8891,52 +8928,52 @@ var import_error4 = __toESM(require_error());
|
|
8891
8928
|
var import_time = __toESM(require_time());
|
8892
8929
|
var import_warningSign4 = __toESM(require_warningSign());
|
8893
8930
|
var TimelineItem = () => null;
|
8894
|
-
var Timeline2 = ({ children }) => /* @__PURE__ */
|
8931
|
+
var Timeline2 = ({ children }) => /* @__PURE__ */ React97.createElement("div", null, React97.Children.map(children, (item) => {
|
8895
8932
|
if (!isComponentType(item, TimelineItem)) {
|
8896
8933
|
throw new Error("<Timeline> can only have <Timeline.Item> components as children");
|
8897
8934
|
} else {
|
8898
8935
|
const { props, key } = item;
|
8899
|
-
return /* @__PURE__ */
|
8936
|
+
return /* @__PURE__ */ React97.createElement(Timeline, {
|
8900
8937
|
key: key != null ? key : props.title
|
8901
|
-
}, /* @__PURE__ */
|
8938
|
+
}, /* @__PURE__ */ React97.createElement(Timeline.Separator, null, props.variant === "error" ? /* @__PURE__ */ React97.createElement(Icon, {
|
8902
8939
|
icon: import_error4.default,
|
8903
8940
|
color: "error-30"
|
8904
|
-
}) : props.variant === "warning" ? /* @__PURE__ */
|
8941
|
+
}) : props.variant === "warning" ? /* @__PURE__ */ React97.createElement(Icon, {
|
8905
8942
|
icon: import_warningSign4.default,
|
8906
8943
|
color: "warning-30"
|
8907
|
-
}) : props.variant === "info" ? /* @__PURE__ */
|
8944
|
+
}) : props.variant === "info" ? /* @__PURE__ */ React97.createElement(Icon, {
|
8908
8945
|
icon: import_time.default,
|
8909
8946
|
color: "info-30"
|
8910
|
-
}) : /* @__PURE__ */
|
8947
|
+
}) : /* @__PURE__ */ React97.createElement(Timeline.Separator.Dot, null)), /* @__PURE__ */ React97.createElement(Typography2.Caption, {
|
8911
8948
|
color: "grey-50"
|
8912
|
-
}, props.title), /* @__PURE__ */
|
8949
|
+
}, props.title), /* @__PURE__ */ React97.createElement(Timeline.LineContainer, null, /* @__PURE__ */ React97.createElement(Timeline.LineContainer.Line, null)), /* @__PURE__ */ React97.createElement(Timeline.Content, null, /* @__PURE__ */ React97.createElement(Typography2.Small, null, props.children)));
|
8913
8950
|
}
|
8914
8951
|
}));
|
8915
|
-
var TimelineItemSkeleton = () => /* @__PURE__ */
|
8952
|
+
var TimelineItemSkeleton = () => /* @__PURE__ */ React97.createElement(Timeline, null, /* @__PURE__ */ React97.createElement(Timeline.Separator, null, /* @__PURE__ */ React97.createElement(Skeleton, {
|
8916
8953
|
width: 6,
|
8917
8954
|
height: 6,
|
8918
8955
|
rounded: true
|
8919
|
-
})), /* @__PURE__ */
|
8956
|
+
})), /* @__PURE__ */ React97.createElement(Skeleton, {
|
8920
8957
|
height: 12,
|
8921
8958
|
width: 120
|
8922
|
-
}), /* @__PURE__ */
|
8959
|
+
}), /* @__PURE__ */ React97.createElement(Timeline.LineContainer, null, /* @__PURE__ */ React97.createElement(Skeleton, {
|
8923
8960
|
width: 2,
|
8924
8961
|
height: "100%"
|
8925
|
-
})), /* @__PURE__ */
|
8962
|
+
})), /* @__PURE__ */ React97.createElement(Timeline.Content, null, /* @__PURE__ */ React97.createElement(Box, {
|
8926
8963
|
display: "flex",
|
8927
8964
|
flexDirection: "column",
|
8928
8965
|
gap: "3"
|
8929
|
-
}, /* @__PURE__ */
|
8966
|
+
}, /* @__PURE__ */ React97.createElement(Skeleton, {
|
8930
8967
|
height: 32,
|
8931
8968
|
width: "100%"
|
8932
|
-
}), /* @__PURE__ */
|
8969
|
+
}), /* @__PURE__ */ React97.createElement(Skeleton, {
|
8933
8970
|
height: 32,
|
8934
8971
|
width: "73%"
|
8935
|
-
}), /* @__PURE__ */
|
8972
|
+
}), /* @__PURE__ */ React97.createElement(Skeleton, {
|
8936
8973
|
height: 32,
|
8937
8974
|
width: "80%"
|
8938
8975
|
}))));
|
8939
|
-
var TimelineSkeleton = ({ items = 3 }) => /* @__PURE__ */
|
8976
|
+
var TimelineSkeleton = ({ items = 3 }) => /* @__PURE__ */ React97.createElement("div", null, Array.from({ length: items }).map((_, key) => /* @__PURE__ */ React97.createElement(TimelineItemSkeleton, {
|
8940
8977
|
key
|
8941
8978
|
})));
|
8942
8979
|
Timeline2.Item = TimelineItem;
|
@@ -8944,9 +8981,9 @@ Timeline2.Skeleton = TimelineSkeleton;
|
|
8944
8981
|
Timeline2.Skeleton.displayName = "Timeline.Skeleton";
|
8945
8982
|
|
8946
8983
|
// src/utils/table/useTableSelect.ts
|
8947
|
-
import
|
8984
|
+
import React98 from "react";
|
8948
8985
|
var useTableSelect = (data, { key }) => {
|
8949
|
-
const [selected, setSelected] =
|
8986
|
+
const [selected, setSelected] = React98.useState([]);
|
8950
8987
|
const allSelected = selected.length === data.length;
|
8951
8988
|
const isSelected = (dot) => selected.includes(dot[key]);
|
8952
8989
|
const selectAll = () => setSelected(data.map((dot) => dot[key]));
|
@@ -8971,7 +9008,7 @@ var useTableSelect = (data, { key }) => {
|
|
8971
9008
|
};
|
8972
9009
|
|
8973
9010
|
// src/molecules/Pagination/usePagination.tsx
|
8974
|
-
import { useEffect as
|
9011
|
+
import { useEffect as useEffect9, useState as useState13 } from "react";
|
8975
9012
|
import clamp3 from "lodash/clamp";
|
8976
9013
|
var initialState = {
|
8977
9014
|
currentPage: 1,
|
@@ -8990,7 +9027,7 @@ var usePagination = (items, options) => {
|
|
8990
9027
|
setPageSize(pageSize2);
|
8991
9028
|
setCurrentPage(clamp3((options == null ? void 0 : options.initialPage) || initialState.currentPage, 1, newTotalPages));
|
8992
9029
|
};
|
8993
|
-
|
9030
|
+
useEffect9(() => {
|
8994
9031
|
setCurrentPage(clamp3((options == null ? void 0 : options.initialPage) || initialState.currentPage, 1, totalPages));
|
8995
9032
|
}, [items.length]);
|
8996
9033
|
return [
|
@@ -9247,6 +9284,7 @@ export {
|
|
9247
9284
|
calcTopPosition,
|
9248
9285
|
calcTopRightPosition,
|
9249
9286
|
cellProps,
|
9287
|
+
columnIsFieldColumn,
|
9250
9288
|
createComponent,
|
9251
9289
|
createMountPointElement,
|
9252
9290
|
createSimpleComponent,
|