@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.cjs
CHANGED
@@ -1661,6 +1661,7 @@ __export(system_exports, {
|
|
1661
1661
|
calcTopPosition: () => calcTopPosition,
|
1662
1662
|
calcTopRightPosition: () => calcTopRightPosition,
|
1663
1663
|
cellProps: () => cellProps,
|
1664
|
+
columnIsFieldColumn: () => columnIsFieldColumn,
|
1664
1665
|
createComponent: () => createComponent,
|
1665
1666
|
createMountPointElement: () => createMountPointElement,
|
1666
1667
|
createSimpleComponent: () => createSimpleComponent,
|
@@ -1787,6 +1788,7 @@ __export(molecules_exports, {
|
|
1787
1788
|
asPopoverButton: () => asPopoverButton,
|
1788
1789
|
asTabItem: () => asTabItem,
|
1789
1790
|
cellProps: () => cellProps,
|
1791
|
+
columnIsFieldColumn: () => columnIsFieldColumn,
|
1790
1792
|
createTabsComponent: () => createTabsComponent,
|
1791
1793
|
toSortDirection: () => toSortDirection,
|
1792
1794
|
usePagination: () => usePagination,
|
@@ -5057,11 +5059,9 @@ var import_omit5 = __toESM(require("lodash/omit"));
|
|
5057
5059
|
var import_uniqueId2 = __toESM(require("lodash/uniqueId"));
|
5058
5060
|
var import_match_sorter = require("match-sorter");
|
5059
5061
|
|
5060
|
-
// src/molecules/Popover/
|
5062
|
+
// src/molecules/Popover/PopoverOverlay.tsx
|
5061
5063
|
var import_react45 = __toESM(require("react"));
|
5062
|
-
var import_focus = require("@react-aria/focus");
|
5063
5064
|
var import_overlays4 = require("@react-aria/overlays");
|
5064
|
-
var import_utils3 = require("@react-aria/utils");
|
5065
5065
|
|
5066
5066
|
// src/atoms/Popover/Popover.tsx
|
5067
5067
|
var import_react44 = __toESM(require("react"));
|
@@ -5071,69 +5071,85 @@ var PopoverPanel = import_react44.default.forwardRef((_a, ref) => {
|
|
5071
5071
|
ref,
|
5072
5072
|
className: classNames(
|
5073
5073
|
className,
|
5074
|
-
tw(
|
5075
|
-
"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"
|
5076
|
-
)
|
5074
|
+
tw("rounded-sm shadow-16dp bg-white mt-1 overflow-y-auto flex flex-col border border-grey-20 outline-none")
|
5077
5075
|
)
|
5078
5076
|
}, props), children);
|
5079
5077
|
});
|
5078
|
+
PopoverPanel.displayName = "Popover.Panel";
|
5079
|
+
var PopoverUnderlay = import_react44.default.forwardRef((props, ref) => /* @__PURE__ */ import_react44.default.createElement("div", __spreadProps(__spreadValues({
|
5080
|
+
ref
|
5081
|
+
}, props), {
|
5082
|
+
className: tw("fixed inset-0")
|
5083
|
+
})));
|
5084
|
+
PopoverUnderlay.displayName = "Popover.Underlay";
|
5080
5085
|
var Popover = {
|
5081
|
-
Panel: PopoverPanel
|
5086
|
+
Panel: PopoverPanel,
|
5087
|
+
Underlay: PopoverUnderlay
|
5082
5088
|
};
|
5083
5089
|
|
5084
|
-
// src/molecules/Popover/
|
5085
|
-
var
|
5086
|
-
|
5087
|
-
id,
|
5088
|
-
children,
|
5089
|
-
placement,
|
5090
|
-
arrowProps,
|
5091
|
-
isOpen,
|
5092
|
-
hideArrow,
|
5093
|
-
shouldCloseOnBlur,
|
5094
|
-
isKeyboardDismissDisabled,
|
5095
|
-
isNonModal = true,
|
5096
|
-
isDismissable,
|
5097
|
-
autoFocus,
|
5098
|
-
containFocus,
|
5099
|
-
className
|
5100
|
-
} = _a, otherProps = __objRest(_a, [
|
5101
|
-
"id",
|
5102
|
-
"children",
|
5103
|
-
"placement",
|
5104
|
-
"arrowProps",
|
5105
|
-
"isOpen",
|
5106
|
-
"hideArrow",
|
5107
|
-
"shouldCloseOnBlur",
|
5108
|
-
"isKeyboardDismissDisabled",
|
5109
|
-
"isNonModal",
|
5110
|
-
"isDismissable",
|
5111
|
-
"autoFocus",
|
5112
|
-
"containFocus",
|
5113
|
-
"className"
|
5114
|
-
]);
|
5115
|
-
const { overlayProps } = (0, import_overlays4.useOverlay)(
|
5116
|
-
__spreadProps(__spreadValues({}, props), { isDismissable: isDismissable && isOpen }),
|
5090
|
+
// src/molecules/Popover/PopoverOverlay.tsx
|
5091
|
+
var PopoverOverlay = import_react45.default.forwardRef((props, ref) => {
|
5092
|
+
return /* @__PURE__ */ import_react45.default.createElement(import_overlays4.Overlay, null, /* @__PURE__ */ import_react45.default.createElement(Wrapper, __spreadValues({
|
5117
5093
|
ref
|
5118
|
-
);
|
5119
|
-
const { modalProps } = (0, import_overlays4.useModal)({
|
5120
|
-
isDisabled: isNonModal
|
5121
|
-
});
|
5122
|
-
if (!props.isOpen) {
|
5123
|
-
return null;
|
5124
|
-
}
|
5125
|
-
return /* @__PURE__ */ import_react45.default.createElement(import_overlays4.OverlayContainer, null, /* @__PURE__ */ import_react45.default.createElement(import_focus.FocusScope, {
|
5126
|
-
restoreFocus: true,
|
5127
|
-
autoFocus,
|
5128
|
-
contain: containFocus
|
5129
|
-
}, /* @__PURE__ */ import_react45.default.createElement(Popover.Panel, __spreadProps(__spreadValues({
|
5130
|
-
ref,
|
5131
|
-
role: "dialog"
|
5132
|
-
}, (0, import_utils3.mergeProps)(otherProps, modalProps, overlayProps)), {
|
5133
|
-
id: id != null ? id : overlayProps.id,
|
5134
|
-
className
|
5135
|
-
}), children)));
|
5094
|
+
}, props)));
|
5136
5095
|
});
|
5096
|
+
var Wrapper = import_react45.default.forwardRef(
|
5097
|
+
(_a, ref) => {
|
5098
|
+
var _b = _a, {
|
5099
|
+
id,
|
5100
|
+
state,
|
5101
|
+
className,
|
5102
|
+
style = {},
|
5103
|
+
placement = "bottom-left",
|
5104
|
+
role,
|
5105
|
+
focusable = true,
|
5106
|
+
isNonModal = false,
|
5107
|
+
autoFocus,
|
5108
|
+
containFocus,
|
5109
|
+
children,
|
5110
|
+
popoverRef: _popoverRef
|
5111
|
+
} = _b, props = __objRest(_b, [
|
5112
|
+
"id",
|
5113
|
+
"state",
|
5114
|
+
"className",
|
5115
|
+
"style",
|
5116
|
+
"placement",
|
5117
|
+
"role",
|
5118
|
+
"focusable",
|
5119
|
+
"isNonModal",
|
5120
|
+
"autoFocus",
|
5121
|
+
"containFocus",
|
5122
|
+
"children",
|
5123
|
+
"popoverRef"
|
5124
|
+
]);
|
5125
|
+
const popoverRef = import_react45.default.useRef(null);
|
5126
|
+
import_react45.default.useImperativeHandle(ref, () => popoverRef.current);
|
5127
|
+
(0, import_react45.useEffect)(() => {
|
5128
|
+
if (autoFocus && popoverRef.current) {
|
5129
|
+
popoverRef.current.focus();
|
5130
|
+
}
|
5131
|
+
}, []);
|
5132
|
+
const { underlayProps, popoverProps } = (0, import_overlays4.usePopover)(
|
5133
|
+
__spreadProps(__spreadValues({}, props), {
|
5134
|
+
isNonModal,
|
5135
|
+
placement: placement.replace("-", " "),
|
5136
|
+
popoverRef
|
5137
|
+
}),
|
5138
|
+
state
|
5139
|
+
);
|
5140
|
+
return /* @__PURE__ */ import_react45.default.createElement("div", null, !isNonModal && /* @__PURE__ */ import_react45.default.createElement(Popover.Underlay, __spreadValues({}, underlayProps)), /* @__PURE__ */ import_react45.default.createElement(Popover.Panel, __spreadProps(__spreadValues({
|
5141
|
+
ref: popoverRef,
|
5142
|
+
tabIndex: focusable ? 0 : -1,
|
5143
|
+
role: role != null ? role : "presentation"
|
5144
|
+
}, popoverProps), {
|
5145
|
+
id: id != null ? id : popoverProps.id,
|
5146
|
+
style: __spreadValues(__spreadValues({}, popoverProps.style), style),
|
5147
|
+
className
|
5148
|
+
}), children, /* @__PURE__ */ import_react45.default.createElement(import_overlays4.DismissButton, {
|
5149
|
+
onDismiss: state.close
|
5150
|
+
})));
|
5151
|
+
}
|
5152
|
+
);
|
5137
5153
|
|
5138
5154
|
// src/molecules/Combobox/Combobox.tsx
|
5139
5155
|
var ComboboxBase = (_a) => {
|
@@ -5177,8 +5193,10 @@ var ComboboxBase = (_a) => {
|
|
5177
5193
|
"readOnly"
|
5178
5194
|
]);
|
5179
5195
|
var _a2;
|
5196
|
+
const popoverRef = (0, import_react46.useRef)(null);
|
5180
5197
|
const targetRef = (0, import_react46.useRef)(null);
|
5181
|
-
const
|
5198
|
+
const menuRef = (0, import_react46.useRef)(null);
|
5199
|
+
const inputRef = (0, import_react46.useRef)(null);
|
5182
5200
|
const [inputItems, setInputItems] = (0, import_react46.useState)(options);
|
5183
5201
|
const [hasFocus, setFocus] = (0, import_react46.useState)(false);
|
5184
5202
|
const updateInputItems = (query) => {
|
@@ -5187,15 +5205,16 @@ var ComboboxBase = (_a) => {
|
|
5187
5205
|
};
|
5188
5206
|
const {
|
5189
5207
|
isOpen,
|
5208
|
+
openMenu,
|
5209
|
+
closeMenu,
|
5210
|
+
toggleMenu,
|
5190
5211
|
getToggleButtonProps,
|
5191
5212
|
getMenuProps,
|
5192
5213
|
getInputProps,
|
5193
5214
|
highlightedIndex,
|
5194
5215
|
inputValue,
|
5195
5216
|
getItemProps,
|
5196
|
-
selectedItem
|
5197
|
-
closeMenu,
|
5198
|
-
openMenu
|
5217
|
+
selectedItem
|
5199
5218
|
} = (0, import_downshift.useCombobox)({
|
5200
5219
|
id,
|
5201
5220
|
selectedItem: value,
|
@@ -5216,20 +5235,24 @@ var ComboboxBase = (_a) => {
|
|
5216
5235
|
onSelectedItemChange: (e) => onChange == null ? void 0 : onChange(e.selectedItem),
|
5217
5236
|
onInputValueChange: ({ inputValue: inputValue2 }) => updateInputItems(inputValue2)
|
5218
5237
|
});
|
5219
|
-
const
|
5220
|
-
|
5221
|
-
|
5222
|
-
|
5223
|
-
|
5224
|
-
|
5225
|
-
}
|
5238
|
+
const state = {
|
5239
|
+
isOpen,
|
5240
|
+
close: closeMenu,
|
5241
|
+
open: openMenu,
|
5242
|
+
toggle: toggleMenu,
|
5243
|
+
setOpen: (isOpen2) => isOpen2 ? openMenu() : closeMenu()
|
5244
|
+
};
|
5226
5245
|
(0, import_react46.useEffect)(() => {
|
5227
5246
|
updateInputItems(inputValue);
|
5228
5247
|
}, [JSON.stringify(options)]);
|
5229
|
-
|
5248
|
+
(0, import_react46.useEffect)(() => {
|
5249
|
+
if (state.isOpen && inputRef.current && popoverRef.current) {
|
5250
|
+
return (0, import_overlays5.ariaHideOutside)([inputRef.current, popoverRef.current]);
|
5251
|
+
}
|
5252
|
+
}, [state.isOpen, inputRef, popoverRef]);
|
5253
|
+
const menuProps = getMenuProps({ ref: menuRef }, { suppressRefError: !isOpen });
|
5254
|
+
const inputProps = getInputProps({ ref: inputRef, disabled: disabled || readOnly });
|
5230
5255
|
const hasNoResults = options.length === 0 || inputItems.length === 0;
|
5231
|
-
const width = (_a2 = targetRef.current) == null ? void 0 : _a2.offsetWidth;
|
5232
|
-
const style = isOpen ? __spreadProps(__spreadValues({}, overlayProps.style), { width }) : { display: "none" };
|
5233
5256
|
return /* @__PURE__ */ import_react46.default.createElement("div", {
|
5234
5257
|
className: tw("relative")
|
5235
5258
|
}, /* @__PURE__ */ import_react46.default.createElement(Select.InputContainer, {
|
@@ -5237,6 +5260,7 @@ var ComboboxBase = (_a) => {
|
|
5237
5260
|
variant: disabled ? "disabled" : !valid ? "error" : readOnly ? "readOnly" : hasFocus ? "focused" : "default"
|
5238
5261
|
}, /* @__PURE__ */ import_react46.default.createElement(Select.Input, __spreadProps(__spreadValues(__spreadValues({
|
5239
5262
|
id,
|
5263
|
+
ref: inputRef,
|
5240
5264
|
name,
|
5241
5265
|
placeholder: readOnly ? void 0 : placeholder
|
5242
5266
|
}, inputProps), props), {
|
@@ -5260,16 +5284,18 @@ var ComboboxBase = (_a) => {
|
|
5260
5284
|
})), !readOnly && /* @__PURE__ */ import_react46.default.createElement(Select.Toggle, __spreadValues({
|
5261
5285
|
hasFocus,
|
5262
5286
|
isOpen
|
5263
|
-
}, getToggleButtonProps({ disabled })))), /* @__PURE__ */ import_react46.default.createElement(
|
5264
|
-
|
5265
|
-
|
5266
|
-
|
5267
|
-
|
5268
|
-
|
5269
|
-
|
5270
|
-
|
5287
|
+
}, getToggleButtonProps({ disabled })))), isOpen && /* @__PURE__ */ import_react46.default.createElement(PopoverOverlay, {
|
5288
|
+
ref: popoverRef,
|
5289
|
+
triggerRef: targetRef,
|
5290
|
+
state,
|
5291
|
+
placement: "bottom-left",
|
5292
|
+
shouldFlip: true,
|
5293
|
+
isNonModal: true,
|
5294
|
+
style: { width: (_a2 = targetRef.current) == null ? void 0 : _a2.offsetWidth }
|
5295
|
+
}, /* @__PURE__ */ import_react46.default.createElement(Select.Menu, __spreadValues({
|
5296
|
+
ref: menuRef,
|
5271
5297
|
maxHeight
|
5272
|
-
},
|
5298
|
+
}, menuProps), hasNoResults && /* @__PURE__ */ import_react46.default.createElement(Select.NoResults, null, noResults), inputItems.map((item, index) => /* @__PURE__ */ import_react46.default.createElement(Select.Item, __spreadValues({
|
5273
5299
|
key: itemToString(item),
|
5274
5300
|
selected: item === selectedItem,
|
5275
5301
|
highlighted: index === highlightedIndex
|
@@ -5326,7 +5352,6 @@ var Container2 = ({ maxWidth = "xl", children }) => /* @__PURE__ */ import_react
|
|
5326
5352
|
|
5327
5353
|
// src/molecules/DataList/DataList.tsx
|
5328
5354
|
var import_react53 = __toESM(require("react"));
|
5329
|
-
var import_orderBy2 = __toESM(require("lodash/orderBy"));
|
5330
5355
|
|
5331
5356
|
// src/molecules/Template/Template.tsx
|
5332
5357
|
var import_react48 = __toESM(require("react"));
|
@@ -5587,29 +5612,49 @@ var cellProps = (column) => ({
|
|
5587
5612
|
key: column.key || column.headerName,
|
5588
5613
|
align: column.type === "number" || column.type === "action" ? "right" : "left"
|
5589
5614
|
});
|
5615
|
+
var columnIsFieldColumn = (column) => Boolean(column && column.field);
|
5590
5616
|
|
5591
5617
|
// src/utils/table/useTableSort.tsx
|
5592
5618
|
var import_react52 = __toESM(require("react"));
|
5593
5619
|
var useTableSort = () => {
|
5594
5620
|
const [sort, setSort] = import_react52.default.useState();
|
5595
|
-
const handleSortClick = (
|
5596
|
-
if (
|
5621
|
+
const handleSortClick = (column) => {
|
5622
|
+
if (sort && sort.column.headerName === column.headerName) {
|
5597
5623
|
if (sort.direction === "ascending") {
|
5598
|
-
setSort({
|
5624
|
+
setSort({ column, direction: "descending" });
|
5599
5625
|
} else {
|
5600
5626
|
setSort(void 0);
|
5601
5627
|
}
|
5602
5628
|
} else {
|
5603
|
-
setSort({
|
5629
|
+
setSort({ column, direction: "ascending" });
|
5604
5630
|
}
|
5605
5631
|
};
|
5606
5632
|
return [sort, handleSortClick];
|
5607
5633
|
};
|
5608
5634
|
|
5635
|
+
// src/utils/table/utils.ts
|
5636
|
+
var import_orderBy2 = __toESM(require("lodash/orderBy"));
|
5637
|
+
var sortRowsBy = (rows, sort) => {
|
5638
|
+
if (!sort) {
|
5639
|
+
return rows;
|
5640
|
+
}
|
5641
|
+
const sortFunction = sort.column.sort;
|
5642
|
+
if (sortFunction) {
|
5643
|
+
return [...rows].sort((a, b) => sortFunction(a, b, sort.direction));
|
5644
|
+
} else if (columnIsFieldColumn(sort.column)) {
|
5645
|
+
return (0, import_orderBy2.default)(rows, [sort.column.field], [toSortDirection(sort.direction)]);
|
5646
|
+
}
|
5647
|
+
return rows;
|
5648
|
+
};
|
5649
|
+
|
5609
5650
|
// src/molecules/DataList/DataList.tsx
|
5610
|
-
var DataList2 = ({
|
5651
|
+
var DataList2 = ({
|
5652
|
+
columns,
|
5653
|
+
rows,
|
5654
|
+
sticky
|
5655
|
+
}) => {
|
5611
5656
|
const [sort, updateSort] = useTableSort();
|
5612
|
-
const sortedRows = (
|
5657
|
+
const sortedRows = sortRowsBy(rows, sort);
|
5613
5658
|
const templateColumns = columns.map((column) => {
|
5614
5659
|
var _a;
|
5615
5660
|
return (_a = column.width) != null ? _a : "auto";
|
@@ -5617,9 +5662,9 @@ var DataList2 = ({ columns, rows, sticky }) => {
|
|
5617
5662
|
return /* @__PURE__ */ import_react53.default.createElement(Template, {
|
5618
5663
|
columns: templateColumns
|
5619
5664
|
}, columns.map(
|
5620
|
-
(column) => (column
|
5621
|
-
direction: sort && sort.
|
5622
|
-
onClick: () => updateSort(column
|
5665
|
+
(column) => columnIsFieldColumn(column) && column.sortable || column.sort ? /* @__PURE__ */ import_react53.default.createElement(DataList.SortCell, __spreadValues({
|
5666
|
+
direction: sort && sort.column.headerName === column.headerName ? sort.direction : "none",
|
5667
|
+
onClick: () => updateSort(column),
|
5623
5668
|
sticky
|
5624
5669
|
}, cellProps(column)), column.headerName) : /* @__PURE__ */ import_react53.default.createElement(DataList.HeadCell, __spreadProps(__spreadValues({}, cellProps(column)), {
|
5625
5670
|
sticky
|
@@ -5634,14 +5679,13 @@ var DataList2 = ({ columns, rows, sticky }) => {
|
|
5634
5679
|
dense: true
|
5635
5680
|
}, column.status(row, index, sortedRows)))) : column.type === "action" ? /* @__PURE__ */ import_react53.default.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ import_react53.default.createElement(SecondaryButton, __spreadValues({
|
5636
5681
|
dense: true
|
5637
|
-
}, renameProperty("text", "children", column.action(row, index, sortedRows))))) : column.type === "custom" ? /* @__PURE__ */ import_react53.default.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), column.UNSAFE_render(row, index, sortedRows)) : column.type === "item" ? /* @__PURE__ */ import_react53.default.createElement(DataList.Cell,
|
5682
|
+
}, renameProperty("text", "children", column.action(row, index, sortedRows))))) : column.type === "custom" ? /* @__PURE__ */ import_react53.default.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), column.UNSAFE_render(row, index, sortedRows)) : column.type === "item" ? /* @__PURE__ */ import_react53.default.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), /* @__PURE__ */ import_react53.default.createElement(Item2, __spreadValues({}, column.item(row, index, sortedRows)))) : /* @__PURE__ */ import_react53.default.createElement(DataList.Cell, __spreadValues({}, cellProps(column)), column.formatter ? column.formatter(row[column.field], row, index, sortedRows) : row[column.field])
|
5638
5683
|
}))
|
5639
5684
|
}));
|
5640
5685
|
};
|
5641
5686
|
|
5642
5687
|
// src/molecules/DataTable/DataTable.tsx
|
5643
5688
|
var import_react56 = __toESM(require("react"));
|
5644
|
-
var import_orderBy3 = __toESM(require("lodash/orderBy"));
|
5645
5689
|
|
5646
5690
|
// src/molecules/Table/Table.tsx
|
5647
5691
|
var import_react55 = __toESM(require("react"));
|
@@ -5701,7 +5745,7 @@ var DataTable = (_a) => {
|
|
5701
5745
|
"sticky"
|
5702
5746
|
]);
|
5703
5747
|
const [sort, updateSort] = useTableSort();
|
5704
|
-
const sortedRows = (
|
5748
|
+
const sortedRows = sortRowsBy(rows, sort);
|
5705
5749
|
return /* @__PURE__ */ import_react56.default.createElement(Table2, __spreadProps(__spreadValues({}, rest), {
|
5706
5750
|
className: tw({
|
5707
5751
|
"whitespace-nowrap": noWrap,
|
@@ -5711,9 +5755,9 @@ var DataTable = (_a) => {
|
|
5711
5755
|
}), /* @__PURE__ */ import_react56.default.createElement(Table2.Head, {
|
5712
5756
|
sticky
|
5713
5757
|
}, columns.map(
|
5714
|
-
(column) => (column
|
5715
|
-
direction: sort && sort.
|
5716
|
-
onClick: () => updateSort(column
|
5758
|
+
(column) => columnIsFieldColumn(column) && column.sortable || column.sort ? /* @__PURE__ */ import_react56.default.createElement(Table2.SortCell, __spreadValues({
|
5759
|
+
direction: sort && sort.column.headerName === column.headerName ? sort.direction : "none",
|
5760
|
+
onClick: () => updateSort(column),
|
5717
5761
|
style: { width: column.width },
|
5718
5762
|
"aria-label": column.headerInvisible ? column.headerName : void 0
|
5719
5763
|
}, cellProps(column)), !column.headerInvisible && column.headerName) : /* @__PURE__ */ import_react56.default.createElement(Table2.Cell, __spreadProps(__spreadValues({}, cellProps(column)), {
|
@@ -5738,9 +5782,8 @@ var DataTable = (_a) => {
|
|
5738
5782
|
// src/molecules/Dialog/Dialog.tsx
|
5739
5783
|
var import_react58 = __toESM(require("react"));
|
5740
5784
|
var import_dialog = require("@react-aria/dialog");
|
5741
|
-
var import_focus2 = require("@react-aria/focus");
|
5742
5785
|
var import_overlays6 = require("@react-aria/overlays");
|
5743
|
-
var
|
5786
|
+
var import_utils5 = require("@react-aria/utils");
|
5744
5787
|
var import_overlays7 = require("@react-stately/overlays");
|
5745
5788
|
var import_omit6 = __toESM(require("lodash/omit"));
|
5746
5789
|
|
@@ -5866,36 +5909,39 @@ Modal.Actions = (_a) => {
|
|
5866
5909
|
};
|
5867
5910
|
|
5868
5911
|
// src/molecules/Dialog/Dialog.tsx
|
5869
|
-
var Dialog = ({
|
5912
|
+
var Dialog = (props) => {
|
5913
|
+
const ref = import_react58.default.useRef(null);
|
5914
|
+
const state = (0, import_overlays7.useOverlayTriggerState)({ isOpen: props.open });
|
5915
|
+
const { modalProps, underlayProps } = (0, import_overlays6.useModalOverlay)({}, state, ref);
|
5916
|
+
if (!state.isOpen) {
|
5917
|
+
return null;
|
5918
|
+
}
|
5919
|
+
return /* @__PURE__ */ import_react58.default.createElement(import_overlays6.Overlay, null, /* @__PURE__ */ import_react58.default.createElement(Modal, {
|
5920
|
+
open: true
|
5921
|
+
}, /* @__PURE__ */ import_react58.default.createElement(Modal.BackDrop, __spreadValues({}, underlayProps)), /* @__PURE__ */ import_react58.default.createElement(Modal.Dialog, __spreadValues({
|
5922
|
+
ref,
|
5923
|
+
size: "sm"
|
5924
|
+
}, modalProps), /* @__PURE__ */ import_react58.default.createElement(DialogWrapper, __spreadValues({}, props)))));
|
5925
|
+
};
|
5926
|
+
var DialogWrapper = ({
|
5870
5927
|
title,
|
5871
5928
|
type = "confirmation",
|
5872
|
-
open,
|
5873
5929
|
children,
|
5874
5930
|
primaryAction,
|
5875
5931
|
secondaryAction
|
5876
5932
|
}) => {
|
5877
5933
|
const ref = import_react58.default.useRef(null);
|
5878
|
-
const
|
5879
|
-
const
|
5880
|
-
const labelledBy = (0, import_utils4.useId)();
|
5881
|
-
const describedBy = (0, import_utils4.useId)();
|
5934
|
+
const labelledBy = (0, import_utils5.useId)();
|
5935
|
+
const describedBy = (0, import_utils5.useId)();
|
5882
5936
|
const { dialogProps } = (0, import_dialog.useDialog)(
|
5883
5937
|
{ "role": "alertdialog", "aria-labelledby": labelledBy, "aria-describedby": describedBy },
|
5884
5938
|
ref
|
5885
5939
|
);
|
5886
|
-
|
5887
|
-
|
5888
|
-
}
|
5889
|
-
|
5890
|
-
|
5891
|
-
}, /* @__PURE__ */ import_react58.default.createElement(Modal.BackDrop, __spreadValues({}, underlayProps)), /* @__PURE__ */ import_react58.default.createElement(import_focus2.FocusScope, {
|
5892
|
-
contain: true,
|
5893
|
-
restoreFocus: true,
|
5894
|
-
autoFocus: true
|
5895
|
-
}, /* @__PURE__ */ import_react58.default.createElement(Modal.Dialog, __spreadValues(__spreadValues({
|
5896
|
-
ref,
|
5897
|
-
size: "sm"
|
5898
|
-
}, modalProps), dialogProps), /* @__PURE__ */ import_react58.default.createElement(Modal.Header, null, /* @__PURE__ */ import_react58.default.createElement(Icon, {
|
5940
|
+
return /* @__PURE__ */ import_react58.default.createElement("div", __spreadProps(__spreadValues({
|
5941
|
+
ref
|
5942
|
+
}, dialogProps), {
|
5943
|
+
className: tw("outline-none")
|
5944
|
+
}), /* @__PURE__ */ import_react58.default.createElement(Modal.Header, null, /* @__PURE__ */ import_react58.default.createElement(Icon, {
|
5899
5945
|
icon: DIALOG_ICONS_AND_COLORS[type].icon,
|
5900
5946
|
color: DIALOG_ICONS_AND_COLORS[type].color,
|
5901
5947
|
fontSize: 20
|
@@ -5909,7 +5955,7 @@ var Dialog = ({
|
|
5909
5955
|
key: secondaryAction.text
|
5910
5956
|
}, (0, import_omit6.default)(secondaryAction, "text")), secondaryAction.text), /* @__PURE__ */ import_react58.default.createElement(SecondaryButton, __spreadValues({
|
5911
5957
|
key: primaryAction.text
|
5912
|
-
}, (0, import_omit6.default)(primaryAction, "text")), primaryAction.text))))
|
5958
|
+
}, (0, import_omit6.default)(primaryAction, "text")), primaryAction.text))));
|
5913
5959
|
};
|
5914
5960
|
|
5915
5961
|
// src/molecules/Divider/Divider.tsx
|
@@ -5944,20 +5990,33 @@ var Divider2 = (_a) => {
|
|
5944
5990
|
};
|
5945
5991
|
|
5946
5992
|
// src/molecules/Dropdown/Dropdown.tsx
|
5947
|
-
var
|
5993
|
+
var import_react63 = __toESM(require("react"));
|
5948
5994
|
|
5949
5995
|
// src/molecules/Popover/Popover.tsx
|
5950
|
-
var
|
5996
|
+
var import_react62 = __toESM(require("react"));
|
5951
5997
|
var import_interactions2 = require("@react-aria/interactions");
|
5952
5998
|
var import_overlays8 = require("@react-aria/overlays");
|
5953
|
-
var
|
5999
|
+
var import_utils6 = require("@react-aria/utils");
|
5954
6000
|
var import_overlays9 = require("@react-stately/overlays");
|
5955
6001
|
|
6002
|
+
// src/molecules/Popover/Dialog.tsx
|
6003
|
+
var import_react60 = __toESM(require("react"));
|
6004
|
+
var import_dialog2 = require("@react-aria/dialog");
|
6005
|
+
var Dialog2 = ({ children }) => {
|
6006
|
+
const ref = import_react60.default.useRef(null);
|
6007
|
+
const { dialogProps } = (0, import_dialog2.useDialog)({}, ref);
|
6008
|
+
return /* @__PURE__ */ import_react60.default.createElement("div", __spreadProps(__spreadValues({
|
6009
|
+
ref
|
6010
|
+
}, dialogProps), {
|
6011
|
+
className: tw("outline-none")
|
6012
|
+
}), children);
|
6013
|
+
};
|
6014
|
+
|
5956
6015
|
// src/molecules/Popover/PopoverContext.tsx
|
5957
|
-
var
|
5958
|
-
var PopoverContext = (0,
|
6016
|
+
var import_react61 = require("react");
|
6017
|
+
var PopoverContext = (0, import_react61.createContext)(null);
|
5959
6018
|
var usePopoverContext = () => {
|
5960
|
-
const ctx = (0,
|
6019
|
+
const ctx = (0, import_react61.useContext)(PopoverContext);
|
5961
6020
|
if (ctx === null) {
|
5962
6021
|
throw new Error("PopoverContext was used outside of provider.");
|
5963
6022
|
}
|
@@ -5966,65 +6025,46 @@ var usePopoverContext = () => {
|
|
5966
6025
|
|
5967
6026
|
// src/molecules/Popover/Popover.tsx
|
5968
6027
|
var Popover2 = (props) => {
|
5969
|
-
var _a;
|
5970
6028
|
const {
|
5971
6029
|
id,
|
5972
|
-
|
5973
|
-
|
5974
|
-
|
5975
|
-
|
5976
|
-
|
5977
|
-
|
6030
|
+
type,
|
6031
|
+
placement = "bottom-left",
|
6032
|
+
containFocus = true,
|
6033
|
+
isKeyboardDismissDisabled = false,
|
6034
|
+
targetRef,
|
6035
|
+
offset,
|
6036
|
+
crossOffset,
|
6037
|
+
shouldFlip
|
5978
6038
|
} = props;
|
5979
|
-
const triggerRef = (0,
|
5980
|
-
const overlayRef = (0, import_react61.useRef)(null);
|
6039
|
+
const triggerRef = (0, import_react62.useRef)(null);
|
5981
6040
|
const state = (0, import_overlays9.useOverlayTriggerState)(props);
|
5982
|
-
const {
|
5983
|
-
|
5984
|
-
placement,
|
5985
|
-
arrowProps
|
5986
|
-
} = (0, import_overlays8.useOverlayPosition)({
|
5987
|
-
targetRef: targetRef != null ? targetRef : triggerRef,
|
5988
|
-
overlayRef,
|
5989
|
-
placement: _placement.replace("-", " "),
|
5990
|
-
offset: props.offset,
|
5991
|
-
shouldFlip: props.shouldFlip,
|
5992
|
-
isOpen: state.isOpen
|
5993
|
-
});
|
5994
|
-
const { triggerProps, overlayProps: otherOverlayProps } = (0, import_overlays8.useOverlayTrigger)(
|
5995
|
-
{ type: (_a = props.type) != null ? _a : "dialog" },
|
5996
|
-
state,
|
5997
|
-
triggerRef
|
5998
|
-
);
|
5999
|
-
return /* @__PURE__ */ import_react61.default.createElement(PopoverContext.Provider, {
|
6041
|
+
const { triggerProps, overlayProps } = (0, import_overlays8.useOverlayTrigger)({ type: type != null ? type : "dialog" }, state, triggerRef);
|
6042
|
+
return /* @__PURE__ */ import_react62.default.createElement(PopoverContext.Provider, {
|
6000
6043
|
value: {
|
6001
6044
|
state
|
6002
6045
|
}
|
6003
|
-
},
|
6046
|
+
}, import_react62.default.Children.map(props.children, (child) => {
|
6004
6047
|
if (isComponentType(child, Popover2.Trigger)) {
|
6005
|
-
return /* @__PURE__ */
|
6006
|
-
ref: triggerRef
|
6007
|
-
|
6008
|
-
}, triggerProps), /* @__PURE__ */ import_react61.default.createElement(PopoverTriggerWrapper, {
|
6048
|
+
return /* @__PURE__ */ import_react62.default.createElement(import_interactions2.PressResponder, __spreadValues({
|
6049
|
+
ref: triggerRef
|
6050
|
+
}, triggerProps), /* @__PURE__ */ import_react62.default.createElement(PopoverTriggerWrapper, {
|
6009
6051
|
"data-testid": props["data-testid"],
|
6010
6052
|
"aria-controls": id
|
6011
6053
|
}, child.props.children));
|
6012
6054
|
}
|
6013
6055
|
if (isComponentType(child, Popover2.Panel)) {
|
6014
|
-
return /* @__PURE__ */
|
6015
|
-
|
6016
|
-
|
6017
|
-
onClose: state.close,
|
6056
|
+
return state.isOpen && /* @__PURE__ */ import_react62.default.createElement(PopoverOverlay, __spreadValues({
|
6057
|
+
triggerRef: targetRef != null ? targetRef : triggerRef,
|
6058
|
+
state,
|
6018
6059
|
placement,
|
6019
|
-
|
6020
|
-
|
6060
|
+
isNonModal: !containFocus,
|
6061
|
+
autoFocus: !containFocus,
|
6021
6062
|
isKeyboardDismissDisabled,
|
6022
|
-
|
6023
|
-
|
6024
|
-
|
6025
|
-
|
6026
|
-
|
6027
|
-
}), child.props.children);
|
6063
|
+
className: child.props.className,
|
6064
|
+
offset,
|
6065
|
+
crossOffset,
|
6066
|
+
shouldFlip
|
6067
|
+
}, overlayProps), containFocus ? /* @__PURE__ */ import_react62.default.createElement(Dialog2, null, child.props.children) : child.props.children);
|
6028
6068
|
}
|
6029
6069
|
throw new Error("Invalid children element type");
|
6030
6070
|
}));
|
@@ -6043,7 +6083,7 @@ var asPopoverButton = (Component, displayName) => {
|
|
6043
6083
|
state.close();
|
6044
6084
|
onClick == null ? void 0 : onClick(e);
|
6045
6085
|
};
|
6046
|
-
return /* @__PURE__ */
|
6086
|
+
return /* @__PURE__ */ import_react62.default.createElement(Component, __spreadProps(__spreadValues({}, props), {
|
6047
6087
|
onClick: handleClick
|
6048
6088
|
}));
|
6049
6089
|
};
|
@@ -6055,23 +6095,22 @@ Popover2.Button = PopoverButton;
|
|
6055
6095
|
var PopoverTriggerWrapper = (_a) => {
|
6056
6096
|
var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
|
6057
6097
|
var _a2;
|
6058
|
-
const ref = (0,
|
6059
|
-
const trigger =
|
6098
|
+
const ref = (0, import_react62.useRef)(null);
|
6099
|
+
const trigger = import_react62.default.Children.only(children);
|
6060
6100
|
const { pressProps } = (0, import_interactions2.usePress)(__spreadProps(__spreadValues({}, rest), { ref }));
|
6061
|
-
return
|
6101
|
+
return import_react62.default.cloneElement(trigger, __spreadProps(__spreadValues({
|
6062
6102
|
"ref": ref
|
6063
|
-
}, (0,
|
6103
|
+
}, (0, import_utils6.mergeProps)(pressProps, trigger.props)), {
|
6064
6104
|
"aria-controls": (_a2 = rest["aria-controls"]) != null ? _a2 : pressProps["aria-controls"]
|
6065
6105
|
}));
|
6066
6106
|
};
|
6067
6107
|
|
6068
6108
|
// src/molecules/Dropdown/Dropdown.tsx
|
6069
6109
|
var Dropdown = ({ children, content, placement = "bottom-left" }) => {
|
6070
|
-
return /* @__PURE__ */
|
6110
|
+
return /* @__PURE__ */ import_react63.default.createElement(Popover2, {
|
6071
6111
|
type: "menu",
|
6072
|
-
placement
|
6073
|
-
|
6074
|
-
}, /* @__PURE__ */ import_react62.default.createElement(Popover2.Trigger, null, children), /* @__PURE__ */ import_react62.default.createElement(Popover2.Panel, null, content));
|
6112
|
+
placement
|
6113
|
+
}, /* @__PURE__ */ import_react63.default.createElement(Popover2.Trigger, null, children), /* @__PURE__ */ import_react63.default.createElement(Popover2.Panel, null, content));
|
6075
6114
|
};
|
6076
6115
|
var DropdownMenu = ({
|
6077
6116
|
title,
|
@@ -6080,26 +6119,26 @@ var DropdownMenu = ({
|
|
6080
6119
|
triggerId,
|
6081
6120
|
setClose = () => void 0
|
6082
6121
|
}) => {
|
6083
|
-
const menuRef =
|
6084
|
-
|
6122
|
+
const menuRef = import_react63.default.useRef(null);
|
6123
|
+
import_react63.default.useEffect(() => {
|
6085
6124
|
const id = setTimeout(() => {
|
6086
6125
|
var _a, _b, _c;
|
6087
6126
|
return (_c = (_b = (_a = menuRef.current) == null ? void 0 : _a.children) == null ? void 0 : _b[0]) == null ? void 0 : _c.focus();
|
6088
6127
|
});
|
6089
6128
|
return () => clearTimeout(id);
|
6090
6129
|
}, [menuRef.current]);
|
6091
|
-
return /* @__PURE__ */
|
6130
|
+
return /* @__PURE__ */ import_react63.default.createElement("div", {
|
6092
6131
|
style: { minWidth: "250px" },
|
6093
6132
|
className: tw("py-3 bg-white")
|
6094
|
-
}, !!title && /* @__PURE__ */
|
6133
|
+
}, !!title && /* @__PURE__ */ import_react63.default.createElement("div", {
|
6095
6134
|
className: tw("px-4 py-4 text-left text-grey-100 typography-default-strong")
|
6096
|
-
}, title), /* @__PURE__ */
|
6135
|
+
}, title), /* @__PURE__ */ import_react63.default.createElement("ol", {
|
6097
6136
|
role: "menu",
|
6098
6137
|
ref: menuRef,
|
6099
6138
|
id: contentId,
|
6100
6139
|
"aria-labelledby": triggerId
|
6101
|
-
},
|
6102
|
-
return
|
6140
|
+
}, import_react63.default.Children.map(children, (child) => {
|
6141
|
+
return import_react63.default.cloneElement(child, { setClose });
|
6103
6142
|
})));
|
6104
6143
|
};
|
6105
6144
|
var DropdownItem = (_a) => {
|
@@ -6154,10 +6193,10 @@ var DropdownItem = (_a) => {
|
|
6154
6193
|
handleSelect();
|
6155
6194
|
}
|
6156
6195
|
};
|
6157
|
-
const itemContent = /* @__PURE__ */
|
6196
|
+
const itemContent = /* @__PURE__ */ import_react63.default.createElement("div", {
|
6158
6197
|
className: tw("py-3 px-4")
|
6159
6198
|
}, children);
|
6160
|
-
return /* @__PURE__ */
|
6199
|
+
return /* @__PURE__ */ import_react63.default.createElement("li", __spreadProps(__spreadValues({
|
6161
6200
|
role: "menuitem",
|
6162
6201
|
tabIndex: -1,
|
6163
6202
|
onClick: handleClick,
|
@@ -6168,11 +6207,11 @@ var DropdownItem = (_a) => {
|
|
6168
6207
|
"text-grey-10 cursor-not-allowed": disabled,
|
6169
6208
|
"text-primary-70 hover:text-primary-80": color === "danger" && !disabled
|
6170
6209
|
})
|
6171
|
-
}), tooltip ? /* @__PURE__ */
|
6210
|
+
}), tooltip ? /* @__PURE__ */ import_react63.default.createElement(Tooltip, {
|
6172
6211
|
content: tooltip,
|
6173
6212
|
placement: tooltipPlacement,
|
6174
6213
|
inline: false
|
6175
|
-
}, /* @__PURE__ */
|
6214
|
+
}, /* @__PURE__ */ import_react63.default.createElement("div", {
|
6176
6215
|
tabIndex: 0,
|
6177
6216
|
className: tw("grow")
|
6178
6217
|
}, itemContent)) : itemContent);
|
@@ -6181,49 +6220,48 @@ Dropdown.Menu = DropdownMenu;
|
|
6181
6220
|
Dropdown.Item = DropdownItem;
|
6182
6221
|
|
6183
6222
|
// src/molecules/DropdownMenu/DropdownMenu.tsx
|
6184
|
-
var
|
6223
|
+
var import_react67 = __toESM(require("react"));
|
6185
6224
|
var import_i18n = require("@react-aria/i18n");
|
6186
6225
|
var import_interactions3 = require("@react-aria/interactions");
|
6187
6226
|
var import_menu = require("@react-aria/menu");
|
6188
|
-
var import_overlays10 = require("@react-aria/overlays");
|
6189
6227
|
var import_separator = require("@react-aria/separator");
|
6190
|
-
var
|
6228
|
+
var import_utils8 = require("@react-aria/utils");
|
6191
6229
|
var import_collections = require("@react-stately/collections");
|
6192
6230
|
var import_menu2 = require("@react-stately/menu");
|
6193
6231
|
var import_tree = require("@react-stately/tree");
|
6194
6232
|
|
6195
6233
|
// src/molecules/Input/Input.tsx
|
6196
|
-
var
|
6234
|
+
var import_react65 = __toESM(require("react"));
|
6197
6235
|
var import_omit7 = __toESM(require("lodash/omit"));
|
6198
6236
|
var import_toString = __toESM(require("lodash/toString"));
|
6199
6237
|
var import_uniqueId3 = __toESM(require("lodash/uniqueId"));
|
6200
6238
|
|
6201
6239
|
// src/utils/form/InputAdornment/InputAdornment.tsx
|
6202
|
-
var
|
6240
|
+
var import_react64 = __toESM(require("react"));
|
6203
6241
|
var import_cross4 = __toESM(require_cross());
|
6204
6242
|
var import_error3 = __toESM(require_error());
|
6205
6243
|
var import_search2 = __toESM(require_search());
|
6206
6244
|
var import_tick3 = __toESM(require_tick());
|
6207
6245
|
var InputAdornment = ({ placement = "right", className, dense, children }) => {
|
6208
|
-
return /* @__PURE__ */
|
6246
|
+
return /* @__PURE__ */ import_react64.default.createElement("span", {
|
6209
6247
|
className: classNames(className, "absolute inset-y-0 grow-0 text-grey-40 flex items-center mx-3", {
|
6210
6248
|
"right-0": placement === "right",
|
6211
6249
|
"left-0": placement === "left",
|
6212
6250
|
"typography-small": dense,
|
6213
6251
|
"typography-default-strong": !dense
|
6214
6252
|
})
|
6215
|
-
}, /* @__PURE__ */
|
6253
|
+
}, /* @__PURE__ */ import_react64.default.createElement(Flexbox, {
|
6216
6254
|
gap: "3",
|
6217
6255
|
wrap: "wrap"
|
6218
6256
|
}, children));
|
6219
6257
|
};
|
6220
|
-
var SearchIcon = ({ onClick }) => /* @__PURE__ */
|
6258
|
+
var SearchIcon = ({ onClick }) => /* @__PURE__ */ import_react64.default.createElement(Icon, {
|
6221
6259
|
icon: import_search2.default,
|
6222
6260
|
color: "grey-30",
|
6223
6261
|
"data-testid": "icon-search",
|
6224
6262
|
onClick
|
6225
6263
|
});
|
6226
|
-
var ResetIcon = ({ onClick }) => /* @__PURE__ */
|
6264
|
+
var ResetIcon = ({ onClick }) => /* @__PURE__ */ import_react64.default.createElement(Icon, {
|
6227
6265
|
className: "hover:cursor-pointer",
|
6228
6266
|
icon: import_cross4.default,
|
6229
6267
|
color: "grey-30",
|
@@ -6233,7 +6271,7 @@ var ResetIcon = ({ onClick }) => /* @__PURE__ */ import_react63.default.createEl
|
|
6233
6271
|
|
6234
6272
|
// src/molecules/Input/Input.tsx
|
6235
6273
|
var createInput = (displayName, opts = {}) => {
|
6236
|
-
const InputComponent = (0,
|
6274
|
+
const InputComponent = (0, import_react65.forwardRef)(
|
6237
6275
|
(_a, ref) => {
|
6238
6276
|
var _b = _a, {
|
6239
6277
|
type = "text",
|
@@ -6253,8 +6291,8 @@ var createInput = (displayName, opts = {}) => {
|
|
6253
6291
|
"readOnly"
|
6254
6292
|
]);
|
6255
6293
|
var _a2;
|
6256
|
-
const inputRef =
|
6257
|
-
(0,
|
6294
|
+
const inputRef = import_react65.default.useRef(null);
|
6295
|
+
(0, import_react65.useImperativeHandle)(ref, () => inputRef.current);
|
6258
6296
|
const handleReset = () => {
|
6259
6297
|
var _a3;
|
6260
6298
|
const el = inputRef.current;
|
@@ -6266,11 +6304,11 @@ var createInput = (displayName, opts = {}) => {
|
|
6266
6304
|
el.focus();
|
6267
6305
|
}
|
6268
6306
|
};
|
6269
|
-
return /* @__PURE__ */
|
6307
|
+
return /* @__PURE__ */ import_react65.default.createElement("span", {
|
6270
6308
|
className: tw("relative block")
|
6271
|
-
}, opts.adornment && /* @__PURE__ */
|
6309
|
+
}, opts.adornment && /* @__PURE__ */ import_react65.default.createElement(InputAdornment, {
|
6272
6310
|
placement: "left"
|
6273
|
-
}, opts.adornment), /* @__PURE__ */
|
6311
|
+
}, opts.adornment), /* @__PURE__ */ import_react65.default.createElement("input", __spreadProps(__spreadValues({
|
6274
6312
|
ref: inputRef,
|
6275
6313
|
type
|
6276
6314
|
}, props), {
|
@@ -6285,34 +6323,34 @@ var createInput = (displayName, opts = {}) => {
|
|
6285
6323
|
getCommonInputStyles({ readOnly, valid }),
|
6286
6324
|
props.className
|
6287
6325
|
)
|
6288
|
-
})), opts.canReset && (props.value || ((_a2 = inputRef.current) == null ? void 0 : _a2.value)) && /* @__PURE__ */
|
6326
|
+
})), opts.canReset && (props.value || ((_a2 = inputRef.current) == null ? void 0 : _a2.value)) && /* @__PURE__ */ import_react65.default.createElement(InputAdornment, null, /* @__PURE__ */ import_react65.default.createElement(ResetIcon, {
|
6289
6327
|
onClick: handleReset
|
6290
|
-
})), !opts.canReset && endAdornment && /* @__PURE__ */
|
6328
|
+
})), !opts.canReset && endAdornment && /* @__PURE__ */ import_react65.default.createElement(InputAdornment, null, endAdornment));
|
6291
6329
|
}
|
6292
6330
|
);
|
6293
6331
|
InputComponent.displayName = displayName;
|
6294
|
-
InputComponent.Skeleton = () => /* @__PURE__ */
|
6332
|
+
InputComponent.Skeleton = () => /* @__PURE__ */ import_react65.default.createElement(Skeleton, {
|
6295
6333
|
height: 38
|
6296
6334
|
});
|
6297
6335
|
return InputComponent;
|
6298
6336
|
};
|
6299
6337
|
var InputBase = createInput("InputBase");
|
6300
|
-
var SearchInput = createInput("SearchInput", { adornment: /* @__PURE__ */
|
6301
|
-
var Input2 =
|
6338
|
+
var SearchInput = createInput("SearchInput", { adornment: /* @__PURE__ */ import_react65.default.createElement(SearchIcon, null), canReset: true });
|
6339
|
+
var Input2 = import_react65.default.forwardRef((_a, ref) => {
|
6302
6340
|
var _b = _a, { readOnly = false } = _b, props = __objRest(_b, ["readOnly"]);
|
6303
6341
|
var _a2, _b2, _c;
|
6304
|
-
const [value, setValue] = (0,
|
6305
|
-
const id = (0,
|
6342
|
+
const [value, setValue] = (0, import_react65.useState)((_b2 = (_a2 = props.value) != null ? _a2 : props.defaultValue) != null ? _b2 : "");
|
6343
|
+
const id = (0, import_react65.useRef)((_c = props.id) != null ? _c : `input-${(0, import_uniqueId3.default)()}`);
|
6306
6344
|
const errorMessageId = (0, import_uniqueId3.default)();
|
6307
6345
|
const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
|
6308
6346
|
const _d = getLabelControlProps(props), { "data-testid": dataTestId } = _d, labelControlProps = __objRest(_d, ["data-testid"]);
|
6309
6347
|
const baseProps = (0, import_omit7.default)(props, Object.keys(labelControlProps));
|
6310
|
-
return /* @__PURE__ */
|
6348
|
+
return /* @__PURE__ */ import_react65.default.createElement(LabelControl, __spreadValues({
|
6311
6349
|
id: `${id.current}-label`,
|
6312
6350
|
htmlFor: id.current,
|
6313
6351
|
messageId: errorMessageId,
|
6314
6352
|
length: value !== void 0 ? (0, import_toString.default)(value).length : void 0
|
6315
|
-
}, labelControlProps), /* @__PURE__ */
|
6353
|
+
}, labelControlProps), /* @__PURE__ */ import_react65.default.createElement(InputBase, __spreadProps(__spreadValues(__spreadValues({
|
6316
6354
|
ref
|
6317
6355
|
}, baseProps), errorProps), {
|
6318
6356
|
id: id.current,
|
@@ -6330,41 +6368,42 @@ var Input2 = import_react64.default.forwardRef((_a, ref) => {
|
|
6330
6368
|
})));
|
6331
6369
|
});
|
6332
6370
|
Input2.displayName = "Input";
|
6333
|
-
Input2.Skeleton = () => /* @__PURE__ */
|
6371
|
+
Input2.Skeleton = () => /* @__PURE__ */ import_react65.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react65.default.createElement(InputBase.Skeleton, null));
|
6334
6372
|
Input2.Skeleton.displayName = "Input.Skeleton";
|
6335
6373
|
|
6336
6374
|
// src/atoms/DropdownMenu/DropdownMenu.tsx
|
6337
|
-
var
|
6375
|
+
var import_react66 = __toESM(require("react"));
|
6338
6376
|
var import_tick4 = __toESM(require_tick());
|
6339
|
-
var DropdownMenu2 =
|
6377
|
+
var DropdownMenu2 = import_react66.default.forwardRef(
|
6340
6378
|
(_a, ref) => {
|
6341
6379
|
var _b = _a, { maxHeight = "450px", minWidth = "125px", maxWidth, className, children } = _b, props = __objRest(_b, ["maxHeight", "minWidth", "maxWidth", "className", "children"]);
|
6342
|
-
return /* @__PURE__ */
|
6380
|
+
return /* @__PURE__ */ import_react66.default.createElement("div", __spreadValues({
|
6343
6381
|
ref,
|
6344
6382
|
style: { maxHeight, minWidth, maxWidth },
|
6345
6383
|
className: classNames(className, "bg-white w-full flex flex-col overflow-x-hidden typography-small text-grey-70")
|
6346
6384
|
}, props), children);
|
6347
6385
|
}
|
6348
6386
|
);
|
6349
|
-
var ContentContainer = ({ children }) => /* @__PURE__ */
|
6387
|
+
var ContentContainer = ({ children }) => /* @__PURE__ */ import_react66.default.createElement("div", {
|
6350
6388
|
className: tw("p-3 overflow-y-auto overflow-x-hidden")
|
6351
6389
|
}, children);
|
6352
6390
|
DropdownMenu2.ContentContainer = ContentContainer;
|
6353
|
-
var List2 =
|
6391
|
+
var List2 = import_react66.default.forwardRef(
|
6354
6392
|
(_a, ref) => {
|
6355
|
-
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
6356
|
-
return /* @__PURE__ */
|
6357
|
-
ref
|
6393
|
+
var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
|
6394
|
+
return /* @__PURE__ */ import_react66.default.createElement("ul", __spreadValues({
|
6395
|
+
ref,
|
6396
|
+
className: classNames(className, "outline-none ring-0")
|
6358
6397
|
}, props), children);
|
6359
6398
|
}
|
6360
6399
|
);
|
6361
6400
|
DropdownMenu2.List = List2;
|
6362
|
-
var Group2 =
|
6401
|
+
var Group2 = import_react66.default.forwardRef(
|
6363
6402
|
(_a, ref) => {
|
6364
6403
|
var _b = _a, { className, title, titleProps, children } = _b, props = __objRest(_b, ["className", "title", "titleProps", "children"]);
|
6365
|
-
return /* @__PURE__ */
|
6404
|
+
return /* @__PURE__ */ import_react66.default.createElement("li", __spreadValues({
|
6366
6405
|
ref
|
6367
|
-
}, props), title && /* @__PURE__ */
|
6406
|
+
}, props), title && /* @__PURE__ */ import_react66.default.createElement("div", __spreadValues({
|
6368
6407
|
className: classNames(className, "p-3 text-grey-40 uppercase cursor-default typography-caption", {
|
6369
6408
|
"text-grey-20": props.disabled
|
6370
6409
|
})
|
@@ -6372,10 +6411,10 @@ var Group2 = import_react65.default.forwardRef(
|
|
6372
6411
|
}
|
6373
6412
|
);
|
6374
6413
|
DropdownMenu2.Group = Group2;
|
6375
|
-
var Item3 =
|
6414
|
+
var Item3 = import_react66.default.forwardRef(
|
6376
6415
|
(_a, ref) => {
|
6377
6416
|
var _b = _a, { kind, highlighted, selected, className, icon, children } = _b, props = __objRest(_b, ["kind", "highlighted", "selected", "className", "icon", "children"]);
|
6378
|
-
return /* @__PURE__ */
|
6417
|
+
return /* @__PURE__ */ import_react66.default.createElement("li", __spreadValues({
|
6379
6418
|
ref,
|
6380
6419
|
className: classNames(className, "flex items-center gap-x-3 p-3 outline-none", {
|
6381
6420
|
"cursor-pointer hover:bg-grey-0": !props.disabled,
|
@@ -6383,30 +6422,30 @@ var Item3 = import_react65.default.forwardRef(
|
|
6383
6422
|
"text-primary-80": kind === "action",
|
6384
6423
|
"text-grey-20 cursor-not-allowed": props.disabled
|
6385
6424
|
})
|
6386
|
-
}, props), icon && /* @__PURE__ */
|
6425
|
+
}, props), icon && /* @__PURE__ */ import_react66.default.createElement(InlineIcon, {
|
6387
6426
|
icon
|
6388
|
-
}), /* @__PURE__ */
|
6427
|
+
}), /* @__PURE__ */ import_react66.default.createElement("span", {
|
6389
6428
|
className: tw("grow")
|
6390
|
-
}, children), selected && /* @__PURE__ */
|
6429
|
+
}, children), selected && /* @__PURE__ */ import_react66.default.createElement(InlineIcon, {
|
6391
6430
|
icon: import_tick4.default
|
6392
6431
|
}));
|
6393
6432
|
}
|
6394
6433
|
);
|
6395
6434
|
DropdownMenu2.Item = Item3;
|
6396
|
-
var Description = ({ disabled, children }) => /* @__PURE__ */
|
6435
|
+
var Description = ({ disabled, children }) => /* @__PURE__ */ import_react66.default.createElement(Typography2.Caption, {
|
6397
6436
|
color: disabled ? "grey-20" : "grey-40"
|
6398
6437
|
}, children);
|
6399
6438
|
DropdownMenu2.Description = Description;
|
6400
6439
|
var Separator = (_a) => {
|
6401
6440
|
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
6402
|
-
return /* @__PURE__ */
|
6441
|
+
return /* @__PURE__ */ import_react66.default.createElement("li", __spreadProps(__spreadValues({}, props), {
|
6403
6442
|
className: classNames(className, tw("m-3 block bg-grey-5 h-[1px]"))
|
6404
6443
|
}));
|
6405
6444
|
};
|
6406
6445
|
DropdownMenu2.Separator = Separator;
|
6407
6446
|
var EmptyStateContainer2 = (_a) => {
|
6408
6447
|
var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
|
6409
|
-
return /* @__PURE__ */
|
6448
|
+
return /* @__PURE__ */ import_react66.default.createElement("div", __spreadValues({
|
6410
6449
|
className: classNames(tw("border border-dashed border-grey-10 p-3"), className)
|
6411
6450
|
}, props), children);
|
6412
6451
|
};
|
@@ -6461,29 +6500,19 @@ var DropdownMenu3 = (_a) => {
|
|
6461
6500
|
"footer",
|
6462
6501
|
"children"
|
6463
6502
|
]);
|
6464
|
-
const triggerRef =
|
6465
|
-
const overlayRef = import_react66.default.useRef(null);
|
6503
|
+
const triggerRef = import_react67.default.useRef(null);
|
6466
6504
|
const [trigger, items] = extractTriggerAndItems(children);
|
6467
6505
|
const state = (0, import_menu2.useMenuTriggerState)(props);
|
6468
6506
|
const { menuTriggerProps, menuProps } = (0, import_menu.useMenuTrigger)({}, state, triggerRef);
|
6469
|
-
|
6470
|
-
targetRef: triggerRef,
|
6471
|
-
overlayRef,
|
6472
|
-
placement: placement.replace("-", " "),
|
6473
|
-
shouldFlip: true,
|
6474
|
-
isOpen: state.isOpen
|
6475
|
-
});
|
6476
|
-
return /* @__PURE__ */ import_react66.default.createElement("div", null, /* @__PURE__ */ import_react66.default.createElement(import_interactions3.PressResponder, __spreadValues({
|
6507
|
+
return /* @__PURE__ */ import_react67.default.createElement("div", null, /* @__PURE__ */ import_react67.default.createElement(import_interactions3.PressResponder, __spreadValues({
|
6477
6508
|
ref: triggerRef,
|
6478
6509
|
onPress: () => state.toggle()
|
6479
|
-
}, menuTriggerProps), /* @__PURE__ */
|
6480
|
-
|
6481
|
-
|
6482
|
-
|
6483
|
-
|
6484
|
-
|
6485
|
-
onClose: state.close
|
6486
|
-
}, overlayProps), /* @__PURE__ */ import_react66.default.createElement(MenuWrapper, __spreadValues({
|
6510
|
+
}, menuTriggerProps), /* @__PURE__ */ import_react67.default.createElement(TriggerWrapper, null, trigger.props.children)), state.isOpen && /* @__PURE__ */ import_react67.default.createElement(PopoverOverlay, {
|
6511
|
+
triggerRef,
|
6512
|
+
state,
|
6513
|
+
placement,
|
6514
|
+
focusable: false
|
6515
|
+
}, /* @__PURE__ */ import_react67.default.createElement(MenuWrapper, __spreadValues({
|
6487
6516
|
onAction,
|
6488
6517
|
selectionMode,
|
6489
6518
|
selection,
|
@@ -6508,13 +6537,13 @@ DropdownMenu3.Section = import_collections.Section;
|
|
6508
6537
|
DropdownMenu3.Section.displayName = "DropdownMenu.Section";
|
6509
6538
|
var TriggerWrapper = (_a) => {
|
6510
6539
|
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
6511
|
-
const ref =
|
6540
|
+
const ref = import_react67.default.useRef(null);
|
6512
6541
|
const { pressProps } = (0, import_interactions3.usePress)(__spreadProps(__spreadValues({}, props), { ref }));
|
6513
|
-
const trigger =
|
6514
|
-
if (!trigger || !
|
6542
|
+
const trigger = import_react67.default.Children.only(children);
|
6543
|
+
if (!trigger || !import_react67.default.isValidElement(trigger)) {
|
6515
6544
|
throw new Error("<DropdownMenu.Trigger> must have valid child");
|
6516
6545
|
}
|
6517
|
-
return
|
6546
|
+
return import_react67.default.cloneElement(trigger, __spreadValues({ ref }, (0, import_utils8.mergeProps)(pressProps, props)));
|
6518
6547
|
};
|
6519
6548
|
var isSectionNode = (item) => item.type === "section";
|
6520
6549
|
var isItemNode = (item) => item.type === "item";
|
@@ -6536,7 +6565,7 @@ var MenuWrapper = (_a) => {
|
|
6536
6565
|
"header",
|
6537
6566
|
"footer"
|
6538
6567
|
]);
|
6539
|
-
const ref =
|
6568
|
+
const ref = import_react67.default.useRef(null);
|
6540
6569
|
const disabledKeys = getDisabledItemKeys(props.children);
|
6541
6570
|
const state = (0, import_tree.useTreeState)(__spreadValues({
|
6542
6571
|
disabledKeys,
|
@@ -6544,30 +6573,30 @@ var MenuWrapper = (_a) => {
|
|
6544
6573
|
}, props));
|
6545
6574
|
const { menuProps } = (0, import_menu.useMenu)(props, state, ref);
|
6546
6575
|
const { contains } = (0, import_i18n.useFilter)({ sensitivity: "base" });
|
6547
|
-
const [search, setSearch] =
|
6548
|
-
const filteredCollection =
|
6576
|
+
const [search, setSearch] = import_react67.default.useState("");
|
6577
|
+
const filteredCollection = import_react67.default.useMemo(
|
6549
6578
|
() => searchable ? filterCollection(state.collection, search, contains) : state.collection,
|
6550
6579
|
[state.collection, search, contains]
|
6551
6580
|
);
|
6552
|
-
return /* @__PURE__ */
|
6581
|
+
return /* @__PURE__ */ import_react67.default.createElement(DropdownMenu2, {
|
6553
6582
|
minWidth: minWidth !== void 0 ? `${minWidth}px` : void 0,
|
6554
6583
|
maxWidth: maxWidth !== void 0 ? `${maxWidth}px` : void 0
|
6555
|
-
}, header, /* @__PURE__ */
|
6584
|
+
}, header, /* @__PURE__ */ import_react67.default.createElement(DropdownMenu2.ContentContainer, null, searchable && /* @__PURE__ */ import_react67.default.createElement(SearchInput, {
|
6556
6585
|
"aria-label": "search",
|
6557
6586
|
value: search,
|
6558
6587
|
onChange: (e) => setSearch(e.target.value),
|
6559
6588
|
className: tw("mb-5")
|
6560
|
-
}), filteredCollection.size === 0 && emptyState && /* @__PURE__ */
|
6589
|
+
}), filteredCollection.size === 0 && emptyState && /* @__PURE__ */ import_react67.default.createElement(DropdownMenu2.EmptyStateContainer, null, emptyState), /* @__PURE__ */ import_react67.default.createElement(DropdownMenu2.List, __spreadValues({
|
6561
6590
|
ref
|
6562
6591
|
}, menuProps), Array.from(filteredCollection).map((item) => {
|
6563
6592
|
if (isSectionNode(item)) {
|
6564
|
-
return /* @__PURE__ */
|
6593
|
+
return /* @__PURE__ */ import_react67.default.createElement(SectionWrapper, {
|
6565
6594
|
key: item.key,
|
6566
6595
|
section: item,
|
6567
6596
|
state
|
6568
6597
|
});
|
6569
6598
|
} else if (isItemNode(item)) {
|
6570
|
-
return /* @__PURE__ */
|
6599
|
+
return /* @__PURE__ */ import_react67.default.createElement(ItemWrapper, {
|
6571
6600
|
key: item.key,
|
6572
6601
|
item,
|
6573
6602
|
state
|
@@ -6576,14 +6605,14 @@ var MenuWrapper = (_a) => {
|
|
6576
6605
|
}))), footer);
|
6577
6606
|
};
|
6578
6607
|
var ItemWrapper = ({ item, state }) => {
|
6579
|
-
const ref =
|
6608
|
+
const ref = import_react67.default.useRef(null);
|
6580
6609
|
const { menuItemProps, descriptionProps, isSelected, isFocused, isDisabled } = (0, import_menu.useMenuItem)(
|
6581
6610
|
{ key: item.key, closeOnSelect: item.props.closeOnSelect },
|
6582
6611
|
state,
|
6583
6612
|
ref
|
6584
6613
|
);
|
6585
6614
|
const { icon, description, kind = "default" } = item.props;
|
6586
|
-
return /* @__PURE__ */
|
6615
|
+
return /* @__PURE__ */ import_react67.default.createElement(DropdownMenu2.Item, __spreadProps(__spreadValues({
|
6587
6616
|
ref
|
6588
6617
|
}, menuItemProps), {
|
6589
6618
|
kind,
|
@@ -6591,7 +6620,7 @@ var ItemWrapper = ({ item, state }) => {
|
|
6591
6620
|
highlighted: isFocused,
|
6592
6621
|
disabled: isDisabled,
|
6593
6622
|
icon
|
6594
|
-
}), item.rendered, description && /* @__PURE__ */
|
6623
|
+
}), item.rendered, description && /* @__PURE__ */ import_react67.default.createElement(DropdownMenu2.Description, __spreadValues({
|
6595
6624
|
disabled: isDisabled
|
6596
6625
|
}, descriptionProps), description));
|
6597
6626
|
};
|
@@ -6603,24 +6632,24 @@ var SectionWrapper = ({ section, state }) => {
|
|
6603
6632
|
const { separatorProps } = (0, import_separator.useSeparator)({
|
6604
6633
|
elementType: "li"
|
6605
6634
|
});
|
6606
|
-
return /* @__PURE__ */
|
6635
|
+
return /* @__PURE__ */ import_react67.default.createElement(import_react67.default.Fragment, null, section.key !== state.collection.getFirstKey() && /* @__PURE__ */ import_react67.default.createElement(DropdownMenu2.Separator, __spreadValues({}, separatorProps)), /* @__PURE__ */ import_react67.default.createElement(DropdownMenu2.Group, __spreadValues({
|
6607
6636
|
title: section.rendered,
|
6608
6637
|
titleProps: headingProps
|
6609
|
-
}, itemProps), /* @__PURE__ */
|
6638
|
+
}, itemProps), /* @__PURE__ */ import_react67.default.createElement("ul", __spreadValues({}, groupProps), Array.from(section.childNodes).map((node) => /* @__PURE__ */ import_react67.default.createElement(ItemWrapper, {
|
6610
6639
|
key: node.key,
|
6611
6640
|
item: node,
|
6612
6641
|
state
|
6613
6642
|
})))));
|
6614
6643
|
};
|
6615
6644
|
var extractTriggerAndItems = (children) => {
|
6616
|
-
const [trigger, items] =
|
6645
|
+
const [trigger, items] = import_react67.default.Children.toArray(children);
|
6617
6646
|
if (!isComponentType(trigger, MenuTrigger) || !isComponentType(items, MenuItems)) {
|
6618
6647
|
throw new Error("<DropdownMenu> must have <DropdownMenu.Trigger> and <DropdownMenu.Items> defined");
|
6619
6648
|
}
|
6620
6649
|
return [trigger, items];
|
6621
6650
|
};
|
6622
6651
|
var getDisabledItemKeys = (children) => {
|
6623
|
-
const keys =
|
6652
|
+
const keys = import_react67.default.Children.map(children, (child) => {
|
6624
6653
|
var _a, _b;
|
6625
6654
|
if (!child || typeof child === "function") {
|
6626
6655
|
return null;
|
@@ -6637,11 +6666,11 @@ var getDisabledItemKeys = (children) => {
|
|
6637
6666
|
};
|
6638
6667
|
|
6639
6668
|
// src/molecules/EmptyState/EmptyState.tsx
|
6640
|
-
var
|
6669
|
+
var import_react69 = __toESM(require("react"));
|
6641
6670
|
var import_omit8 = __toESM(require("lodash/omit"));
|
6642
6671
|
|
6643
6672
|
// src/molecules/Flexbox/FlexboxItem.tsx
|
6644
|
-
var
|
6673
|
+
var import_react68 = __toESM(require("react"));
|
6645
6674
|
var FlexboxItem = Tailwindify(
|
6646
6675
|
({ htmlTag = "div", className, style, children, display, flex, grow, shrink, order, alignSelf }) => {
|
6647
6676
|
const hookStyle = useStyle({
|
@@ -6653,7 +6682,7 @@ var FlexboxItem = Tailwindify(
|
|
6653
6682
|
alignSelf
|
6654
6683
|
});
|
6655
6684
|
const HtmlElement = htmlTag;
|
6656
|
-
return /* @__PURE__ */
|
6685
|
+
return /* @__PURE__ */ import_react68.default.createElement(HtmlElement, {
|
6657
6686
|
style: __spreadValues(__spreadValues({}, hookStyle), style),
|
6658
6687
|
className
|
6659
6688
|
}, children);
|
@@ -6711,7 +6740,7 @@ var EmptyState = ({
|
|
6711
6740
|
borderStyle = "dashed"
|
6712
6741
|
}) => {
|
6713
6742
|
const template = layoutStyle(layout);
|
6714
|
-
return /* @__PURE__ */
|
6743
|
+
return /* @__PURE__ */ import_react69.default.createElement(Box, {
|
6715
6744
|
className: classNames(
|
6716
6745
|
tw("rounded", {
|
6717
6746
|
"border border-dashed": borderStyle === "dashed",
|
@@ -6723,38 +6752,38 @@ var EmptyState = ({
|
|
6723
6752
|
backgroundColor: "transparent",
|
6724
6753
|
borderColor: "grey-10",
|
6725
6754
|
padding: "9"
|
6726
|
-
}, /* @__PURE__ */
|
6755
|
+
}, /* @__PURE__ */ import_react69.default.createElement(Flexbox, {
|
6727
6756
|
direction: template.layout,
|
6728
6757
|
justifyContent: template.justifyContent,
|
6729
6758
|
alignItems: template.layout === "row" ? "center" : template.alignItems,
|
6730
6759
|
colGap: "l5",
|
6731
6760
|
rowGap: "8"
|
6732
|
-
}, image && /* @__PURE__ */
|
6761
|
+
}, image && /* @__PURE__ */ import_react69.default.createElement(FlexboxItem, null, /* @__PURE__ */ import_react69.default.createElement("img", {
|
6733
6762
|
src: image,
|
6734
6763
|
alt: imageAlt,
|
6735
6764
|
style: { width: imageWidth ? `${imageWidth}px` : void 0, height: "auto" }
|
6736
|
-
})), /* @__PURE__ */
|
6765
|
+
})), /* @__PURE__ */ import_react69.default.createElement(Flexbox, {
|
6737
6766
|
style: { maxWidth: "610px" },
|
6738
6767
|
direction: "column",
|
6739
6768
|
justifyContent: template.justifyContent,
|
6740
6769
|
alignItems: template.alignItems
|
6741
|
-
}, /* @__PURE__ */
|
6770
|
+
}, /* @__PURE__ */ import_react69.default.createElement(Typography2, {
|
6742
6771
|
variant: "heading",
|
6743
6772
|
htmlTag: "h2"
|
6744
|
-
}, title), (description || children) && /* @__PURE__ */
|
6773
|
+
}, title), (description || children) && /* @__PURE__ */ import_react69.default.createElement(Box, {
|
6745
6774
|
marginTop: "5"
|
6746
|
-
}, /* @__PURE__ */
|
6775
|
+
}, /* @__PURE__ */ import_react69.default.createElement(Typography2, {
|
6747
6776
|
variant: "default",
|
6748
6777
|
color: "grey-60"
|
6749
|
-
}, children || description)), (secondaryAction || primaryAction) && /* @__PURE__ */
|
6778
|
+
}, children || description)), (secondaryAction || primaryAction) && /* @__PURE__ */ import_react69.default.createElement(Flexbox, {
|
6750
6779
|
marginTop: "7",
|
6751
6780
|
gap: "4",
|
6752
6781
|
justifyContent: "center",
|
6753
6782
|
alignItems: "center",
|
6754
6783
|
wrap: "wrap"
|
6755
|
-
}, primaryAction && /* @__PURE__ */
|
6784
|
+
}, primaryAction && /* @__PURE__ */ import_react69.default.createElement(PrimaryButton, __spreadValues({}, (0, import_omit8.default)(primaryAction, "text")), primaryAction.text), secondaryAction && /* @__PURE__ */ import_react69.default.createElement(SecondaryButton, __spreadValues({}, (0, import_omit8.default)(secondaryAction, "text")), secondaryAction.text)), footer && /* @__PURE__ */ import_react69.default.createElement(Box, {
|
6756
6785
|
marginTop: "7"
|
6757
|
-
}, /* @__PURE__ */
|
6786
|
+
}, /* @__PURE__ */ import_react69.default.createElement(Typography2, {
|
6758
6787
|
htmlTag: "div",
|
6759
6788
|
variant: "small",
|
6760
6789
|
color: "grey-60"
|
@@ -6762,7 +6791,7 @@ var EmptyState = ({
|
|
6762
6791
|
};
|
6763
6792
|
|
6764
6793
|
// src/molecules/Grid/GridItem.tsx
|
6765
|
-
var
|
6794
|
+
var import_react70 = __toESM(require("react"));
|
6766
6795
|
var GridItem = Tailwindify(
|
6767
6796
|
({
|
6768
6797
|
htmlTag = "div",
|
@@ -6793,7 +6822,7 @@ var GridItem = Tailwindify(
|
|
6793
6822
|
gridRowEnd: rowEnd
|
6794
6823
|
});
|
6795
6824
|
const HtmlElement = htmlTag;
|
6796
|
-
return /* @__PURE__ */
|
6825
|
+
return /* @__PURE__ */ import_react70.default.createElement(HtmlElement, {
|
6797
6826
|
style: __spreadValues(__spreadValues({}, hookStyle), style),
|
6798
6827
|
className
|
6799
6828
|
}, children);
|
@@ -6801,7 +6830,7 @@ var GridItem = Tailwindify(
|
|
6801
6830
|
);
|
6802
6831
|
|
6803
6832
|
// src/molecules/LineClamp/LineClamp.tsx
|
6804
|
-
var
|
6833
|
+
var import_react71 = __toESM(require("react"));
|
6805
6834
|
var LineClamp2 = ({
|
6806
6835
|
lines,
|
6807
6836
|
children,
|
@@ -6810,10 +6839,10 @@ var LineClamp2 = ({
|
|
6810
6839
|
collapseLabel,
|
6811
6840
|
onClampedChange
|
6812
6841
|
}) => {
|
6813
|
-
const ref =
|
6814
|
-
const [clamped, setClamped] =
|
6815
|
-
const [isClampingEnabled, setClampingEnabled] =
|
6816
|
-
|
6842
|
+
const ref = import_react71.default.useRef(null);
|
6843
|
+
const [clamped, setClamped] = import_react71.default.useState(true);
|
6844
|
+
const [isClampingEnabled, setClampingEnabled] = import_react71.default.useState(false);
|
6845
|
+
import_react71.default.useEffect(() => {
|
6817
6846
|
var _a, _b;
|
6818
6847
|
const el = ref.current;
|
6819
6848
|
setClampingEnabled(((_a = el == null ? void 0 : el.scrollHeight) != null ? _a : 0) > ((_b = el == null ? void 0 : el.clientHeight) != null ? _b : 0));
|
@@ -6822,50 +6851,50 @@ var LineClamp2 = ({
|
|
6822
6851
|
setClamped(!clamped);
|
6823
6852
|
onClampedChange == null ? void 0 : onClampedChange(!clamped);
|
6824
6853
|
};
|
6825
|
-
return /* @__PURE__ */
|
6854
|
+
return /* @__PURE__ */ import_react71.default.createElement("div", null, /* @__PURE__ */ import_react71.default.createElement(LineClamp, {
|
6826
6855
|
ref,
|
6827
6856
|
lines,
|
6828
6857
|
clamped,
|
6829
6858
|
wordBreak
|
6830
|
-
}, children), expandLabel && isClampingEnabled && /* @__PURE__ */
|
6859
|
+
}, children), expandLabel && isClampingEnabled && /* @__PURE__ */ import_react71.default.createElement(GhostButton, {
|
6831
6860
|
dense: true,
|
6832
6861
|
onClick: handleClampedChange
|
6833
6862
|
}, clamped ? expandLabel : collapseLabel));
|
6834
6863
|
};
|
6835
6864
|
|
6836
6865
|
// src/molecules/Link/Link.tsx
|
6837
|
-
var
|
6866
|
+
var import_react73 = __toESM(require("react"));
|
6838
6867
|
|
6839
6868
|
// src/atoms/Link/Link.tsx
|
6840
|
-
var
|
6869
|
+
var import_react72 = __toESM(require("react"));
|
6841
6870
|
var Link = (_a) => {
|
6842
6871
|
var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
|
6843
|
-
return /* @__PURE__ */
|
6872
|
+
return /* @__PURE__ */ import_react72.default.createElement("a", __spreadValues({
|
6844
6873
|
className: classNames(className, linkStyle)
|
6845
6874
|
}, props), children);
|
6846
6875
|
};
|
6847
6876
|
|
6848
6877
|
// src/molecules/Link/Link.tsx
|
6849
|
-
var Link2 = (props) => /* @__PURE__ */
|
6878
|
+
var Link2 = (props) => /* @__PURE__ */ import_react73.default.createElement(Link, __spreadValues({}, props));
|
6850
6879
|
|
6851
6880
|
// src/molecules/List/List.tsx
|
6852
|
-
var
|
6853
|
-
var List = ({ items, renderItem, container =
|
6881
|
+
var import_react74 = __toESM(require("react"));
|
6882
|
+
var List = ({ items, renderItem, container = import_react74.default.Fragment }) => {
|
6854
6883
|
const Component = container;
|
6855
|
-
return /* @__PURE__ */
|
6884
|
+
return /* @__PURE__ */ import_react74.default.createElement(Component, null, items.map(renderItem));
|
6856
6885
|
};
|
6857
6886
|
|
6858
6887
|
// src/molecules/ListItem/ListItem.tsx
|
6859
|
-
var
|
6888
|
+
var import_react75 = __toESM(require("react"));
|
6860
6889
|
var ListItem = ({ name, icon, active = false }) => {
|
6861
|
-
return /* @__PURE__ */
|
6890
|
+
return /* @__PURE__ */ import_react75.default.createElement(Flexbox, {
|
6862
6891
|
alignItems: "center"
|
6863
|
-
}, /* @__PURE__ */
|
6892
|
+
}, /* @__PURE__ */ import_react75.default.createElement(Typography2, {
|
6864
6893
|
variant: active ? "small-strong" : "small",
|
6865
6894
|
color: "grey-70",
|
6866
6895
|
htmlTag: "span",
|
6867
6896
|
className: `px-4 py-2 rounded-full ${active ? "bg-grey-5" : "hover:bg-grey-0"}`
|
6868
|
-
}, /* @__PURE__ */
|
6897
|
+
}, /* @__PURE__ */ import_react75.default.createElement("img", {
|
6869
6898
|
src: icon,
|
6870
6899
|
alt: name,
|
6871
6900
|
className: "inline mr-4",
|
@@ -6875,28 +6904,27 @@ var ListItem = ({ name, icon, active = false }) => {
|
|
6875
6904
|
};
|
6876
6905
|
|
6877
6906
|
// src/molecules/Modal/Modal.tsx
|
6878
|
-
var
|
6879
|
-
var
|
6880
|
-
var
|
6881
|
-
var
|
6882
|
-
var
|
6883
|
-
var import_overlays12 = require("@react-stately/overlays");
|
6907
|
+
var import_react77 = __toESM(require("react"));
|
6908
|
+
var import_dialog3 = require("@react-aria/dialog");
|
6909
|
+
var import_overlays10 = require("@react-aria/overlays");
|
6910
|
+
var import_utils11 = require("@react-aria/utils");
|
6911
|
+
var import_overlays11 = require("@react-stately/overlays");
|
6884
6912
|
var import_castArray = __toESM(require("lodash/castArray"));
|
6885
6913
|
var import_omit9 = __toESM(require("lodash/omit"));
|
6886
6914
|
|
6887
6915
|
// src/molecules/Tabs/Tabs.tsx
|
6888
|
-
var
|
6916
|
+
var import_react76 = __toESM(require("react"));
|
6889
6917
|
var import_isNumber5 = __toESM(require("lodash/isNumber"));
|
6890
6918
|
var import_kebabCase = __toESM(require("lodash/kebabCase"));
|
6891
6919
|
var import_chevronLeft2 = __toESM(require_chevronLeft());
|
6892
6920
|
var import_chevronRight2 = __toESM(require_chevronRight());
|
6893
6921
|
var import_warningSign3 = __toESM(require_warningSign());
|
6894
6922
|
var isTabComponent = (c) => {
|
6895
|
-
return
|
6923
|
+
return import_react76.default.isValidElement(c) && (c.type === Tab || c.type === ModalTab);
|
6896
6924
|
};
|
6897
|
-
var Tab =
|
6925
|
+
var Tab = import_react76.default.forwardRef(
|
6898
6926
|
({ className, id, title, children }, ref) => {
|
6899
|
-
return /* @__PURE__ */
|
6927
|
+
return /* @__PURE__ */ import_react76.default.createElement("div", {
|
6900
6928
|
ref,
|
6901
6929
|
id: `${id != null ? id : (0, import_kebabCase.default)(title)}-panel`,
|
6902
6930
|
className,
|
@@ -6908,14 +6936,14 @@ var Tab = import_react75.default.forwardRef(
|
|
6908
6936
|
);
|
6909
6937
|
var TabContainer = (_a) => {
|
6910
6938
|
var _b = _a, { className, children } = _b, rest = __objRest(_b, ["className", "children"]);
|
6911
|
-
return /* @__PURE__ */
|
6939
|
+
return /* @__PURE__ */ import_react76.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
6912
6940
|
className: classNames("py-6 z-0", className)
|
6913
6941
|
}), children);
|
6914
6942
|
};
|
6915
6943
|
var ModalTab = Tab;
|
6916
6944
|
var ModalTabContainer = TabContainer;
|
6917
6945
|
var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
|
6918
|
-
const Tab2 =
|
6946
|
+
const Tab2 = import_react76.default.forwardRef(
|
6919
6947
|
(_a, ref) => {
|
6920
6948
|
var _b = _a, {
|
6921
6949
|
id,
|
@@ -6945,17 +6973,17 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
|
|
6945
6973
|
const _id = id != null ? id : (0, import_kebabCase.default)(title);
|
6946
6974
|
let statusIcon = void 0;
|
6947
6975
|
if (status === "warning") {
|
6948
|
-
statusIcon = /* @__PURE__ */
|
6976
|
+
statusIcon = /* @__PURE__ */ import_react76.default.createElement(InlineIcon, {
|
6949
6977
|
icon: import_warningSign3.default,
|
6950
6978
|
color: "warning-80"
|
6951
6979
|
});
|
6952
6980
|
} else if (status === "error") {
|
6953
|
-
statusIcon = /* @__PURE__ */
|
6981
|
+
statusIcon = /* @__PURE__ */ import_react76.default.createElement(InlineIcon, {
|
6954
6982
|
icon: import_warningSign3.default,
|
6955
6983
|
color: "error-50"
|
6956
6984
|
});
|
6957
6985
|
}
|
6958
|
-
const tab = /* @__PURE__ */
|
6986
|
+
const tab = /* @__PURE__ */ import_react76.default.createElement(Component, __spreadValues({
|
6959
6987
|
ref,
|
6960
6988
|
id: `${_id}-tab`,
|
6961
6989
|
onClick: () => !disabled && onSelected(value != null ? value : index),
|
@@ -6972,24 +7000,24 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
|
|
6972
7000
|
"aria-selected": selected,
|
6973
7001
|
"aria-controls": `${_id}-panel`,
|
6974
7002
|
tabIndex: disabled ? void 0 : 0
|
6975
|
-
}, rest), /* @__PURE__ */
|
7003
|
+
}, rest), /* @__PURE__ */ import_react76.default.createElement(Typography2, {
|
6976
7004
|
htmlTag: "div",
|
6977
7005
|
variant: "small",
|
6978
7006
|
color: selected ? "primary-80" : disabled ? "grey-20" : "current",
|
6979
7007
|
className: tw("inline-flex items-center gap-3")
|
6980
|
-
}, /* @__PURE__ */
|
7008
|
+
}, /* @__PURE__ */ import_react76.default.createElement("span", {
|
6981
7009
|
className: tw("whitespace-nowrap")
|
6982
|
-
}, title), (0, import_isNumber5.default)(badge) && /* @__PURE__ */
|
7010
|
+
}, title), (0, import_isNumber5.default)(badge) && /* @__PURE__ */ import_react76.default.createElement(Typography2, {
|
6983
7011
|
htmlTag: "span",
|
6984
7012
|
variant: "small",
|
6985
7013
|
color: selected ? "primary-80" : "grey-5",
|
6986
7014
|
className: "leading-none"
|
6987
|
-
}, /* @__PURE__ */
|
7015
|
+
}, /* @__PURE__ */ import_react76.default.createElement(TabBadge, {
|
6988
7016
|
kind: "filled",
|
6989
7017
|
value: badge,
|
6990
7018
|
textClassname: classNames({ "text-white": selected, "text-grey-50": !selected })
|
6991
7019
|
})), statusIcon));
|
6992
|
-
return tooltip ? /* @__PURE__ */
|
7020
|
+
return tooltip ? /* @__PURE__ */ import_react76.default.createElement(Tooltip, {
|
6993
7021
|
content: tooltip
|
6994
7022
|
}, tab) : tab;
|
6995
7023
|
}
|
@@ -7003,20 +7031,20 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
|
|
7003
7031
|
const Tabs2 = (props) => {
|
7004
7032
|
var _a, _b;
|
7005
7033
|
const { className, value, defaultValue, onChange, children } = props;
|
7006
|
-
const childArr =
|
7034
|
+
const childArr = import_react76.default.Children.toArray(children);
|
7007
7035
|
const firstTab = childArr[0];
|
7008
7036
|
const firstTabValue = isTabComponent(firstTab) ? firstTab.props.value : -1;
|
7009
|
-
const [selected, setSelected] = (0,
|
7010
|
-
const [leftCaret, showLeftCaret] = (0,
|
7011
|
-
const [rightCaret, showRightCaret] = (0,
|
7012
|
-
const parentRef = (0,
|
7013
|
-
const containerRef = (0,
|
7014
|
-
const tabsRef = (0,
|
7037
|
+
const [selected, setSelected] = (0, import_react76.useState)((_b = (_a = value != null ? value : defaultValue) != null ? _a : firstTabValue) != null ? _b : 0);
|
7038
|
+
const [leftCaret, showLeftCaret] = (0, import_react76.useState)(false);
|
7039
|
+
const [rightCaret, showRightCaret] = (0, import_react76.useState)(false);
|
7040
|
+
const parentRef = (0, import_react76.useRef)(null);
|
7041
|
+
const containerRef = (0, import_react76.useRef)(null);
|
7042
|
+
const tabsRef = (0, import_react76.useRef)(null);
|
7015
7043
|
const revealSelectedTab = ({ smooth }) => {
|
7016
7044
|
var _a2, _b2;
|
7017
7045
|
const container = containerRef.current;
|
7018
7046
|
const tabs = tabsRef.current;
|
7019
|
-
const values =
|
7047
|
+
const values = import_react76.default.Children.map(
|
7020
7048
|
children,
|
7021
7049
|
(tab, i) => {
|
7022
7050
|
var _a3;
|
@@ -7050,15 +7078,15 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
|
|
7050
7078
|
showLeftCaret(hasLeftCaret);
|
7051
7079
|
showRightCaret(hasRightCaret);
|
7052
7080
|
};
|
7053
|
-
(0,
|
7081
|
+
(0, import_react76.useEffect)(() => {
|
7054
7082
|
if (value === void 0) {
|
7055
7083
|
return;
|
7056
7084
|
}
|
7057
7085
|
updateCarets();
|
7058
7086
|
setSelected(value);
|
7059
7087
|
revealSelectedTab({ smooth: value !== selected });
|
7060
|
-
}, [value,
|
7061
|
-
(0,
|
7088
|
+
}, [value, import_react76.default.Children.count(children)]);
|
7089
|
+
(0, import_react76.useLayoutEffect)(() => {
|
7062
7090
|
var _a2;
|
7063
7091
|
updateCarets();
|
7064
7092
|
(_a2 = containerRef.current) == null ? void 0 : _a2.addEventListener("scroll", updateCarets);
|
@@ -7121,27 +7149,27 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
|
|
7121
7149
|
const handleSelected = (key) => {
|
7122
7150
|
(onChange != null ? onChange : setSelected)(key);
|
7123
7151
|
};
|
7124
|
-
|
7152
|
+
import_react76.default.Children.forEach(children, (c) => {
|
7125
7153
|
if (c && !isTabComponent(c)) {
|
7126
7154
|
throw new Error("<Tabs> can only have <Tabs.Tab> components as children");
|
7127
7155
|
}
|
7128
7156
|
});
|
7129
|
-
return /* @__PURE__ */
|
7157
|
+
return /* @__PURE__ */ import_react76.default.createElement("div", {
|
7130
7158
|
ref: parentRef,
|
7131
7159
|
className: classNames(tw("h-full"), className)
|
7132
|
-
}, /* @__PURE__ */
|
7160
|
+
}, /* @__PURE__ */ import_react76.default.createElement("div", {
|
7133
7161
|
className: tw("relative flex items-center h-full border-b-2 border-grey-10")
|
7134
|
-
}, /* @__PURE__ */
|
7162
|
+
}, /* @__PURE__ */ import_react76.default.createElement("div", {
|
7135
7163
|
ref: containerRef,
|
7136
7164
|
className: tw("overflow-y-auto scrollbar-hide h-full mb-[-2px]")
|
7137
|
-
}, /* @__PURE__ */
|
7165
|
+
}, /* @__PURE__ */ import_react76.default.createElement("div", {
|
7138
7166
|
ref: tabsRef,
|
7139
7167
|
role: "tablist",
|
7140
7168
|
"aria-label": "tabs",
|
7141
7169
|
className: tw("inline-flex items-center cursor-pointer font-normal h-full")
|
7142
|
-
},
|
7170
|
+
}, import_react76.default.Children.map(
|
7143
7171
|
children,
|
7144
|
-
(tab, index) => tab ? /* @__PURE__ */
|
7172
|
+
(tab, index) => tab ? /* @__PURE__ */ import_react76.default.createElement(TabItemComponent, __spreadProps(__spreadValues({
|
7145
7173
|
key: tab.props.value
|
7146
7174
|
}, tab.props), {
|
7147
7175
|
index,
|
@@ -7149,20 +7177,20 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
|
|
7149
7177
|
onKeyDown: handleKeyDown,
|
7150
7178
|
onSelected: handleSelected
|
7151
7179
|
})) : void 0
|
7152
|
-
))), leftCaret && /* @__PURE__ */
|
7180
|
+
))), leftCaret && /* @__PURE__ */ import_react76.default.createElement("div", {
|
7153
7181
|
className: tw("absolute left-0 bg-gradient-to-r from-white via-white z-20 py-3 pr-4")
|
7154
|
-
}, /* @__PURE__ */
|
7182
|
+
}, /* @__PURE__ */ import_react76.default.createElement("div", {
|
7155
7183
|
onClick: () => handleScrollToNext("left"),
|
7156
7184
|
className: tw("hover:bg-grey-0 p-2 leading-none cursor-pointer")
|
7157
|
-
}, /* @__PURE__ */
|
7185
|
+
}, /* @__PURE__ */ import_react76.default.createElement(InlineIcon, {
|
7158
7186
|
icon: import_chevronLeft2.default
|
7159
|
-
}))), rightCaret && /* @__PURE__ */
|
7187
|
+
}))), rightCaret && /* @__PURE__ */ import_react76.default.createElement("div", {
|
7160
7188
|
onClick: () => handleScrollToNext("right"),
|
7161
7189
|
className: tw("absolute right-0 bg-gradient-to-l from-white via-white z-20 py-3 pl-4")
|
7162
|
-
}, /* @__PURE__ */
|
7190
|
+
}, /* @__PURE__ */ import_react76.default.createElement("div", {
|
7163
7191
|
onClick: () => handleScrollToNext("right"),
|
7164
7192
|
className: tw("hover:bg-grey-0 p-2 leading-none cursor-pointer")
|
7165
|
-
}, /* @__PURE__ */
|
7193
|
+
}, /* @__PURE__ */ import_react76.default.createElement(InlineIcon, {
|
7166
7194
|
icon: import_chevronRight2.default
|
7167
7195
|
})))), renderChildren(children, selected, props));
|
7168
7196
|
};
|
@@ -7170,89 +7198,92 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
|
|
7170
7198
|
Tabs2.Tab = TabComponent;
|
7171
7199
|
return Tabs2;
|
7172
7200
|
};
|
7173
|
-
var Tabs = createTabsComponent(Tab, TabItem, "Tabs", (children, selected) => /* @__PURE__ */
|
7201
|
+
var Tabs = createTabsComponent(Tab, TabItem, "Tabs", (children, selected) => /* @__PURE__ */ import_react76.default.createElement(TabContainer, null, children.find(
|
7174
7202
|
(node, index) => (node == null ? void 0 : node.props.value) === selected || index === selected
|
7175
7203
|
)));
|
7176
7204
|
|
7177
7205
|
// src/molecules/Modal/Modal.tsx
|
7178
7206
|
var import_cross5 = __toESM(require_cross());
|
7179
|
-
var Modal2 = ({
|
7180
|
-
|
7181
|
-
|
7182
|
-
|
7183
|
-
|
7184
|
-
|
7185
|
-
|
7186
|
-
primaryAction,
|
7187
|
-
secondaryActions,
|
7188
|
-
size
|
7189
|
-
}) => {
|
7190
|
-
const ref = import_react76.default.useRef(null);
|
7191
|
-
const state = (0, import_overlays12.useOverlayTriggerState)({ isOpen: open });
|
7192
|
-
const { modalProps, underlayProps } = (0, import_overlays11.useModalOverlay)({ isDismissable: false }, state, ref);
|
7193
|
-
const labelledBy = (0, import_utils10.useId)();
|
7194
|
-
const describedBy = (0, import_utils10.useId)();
|
7195
|
-
const { dialogProps } = (0, import_dialog2.useDialog)(
|
7196
|
-
{ "role": "dialog", "aria-labelledby": labelledBy, "aria-describedby": describedBy },
|
7207
|
+
var Modal2 = (props) => {
|
7208
|
+
const { open, onClose, size, portalContainer } = props;
|
7209
|
+
const ref = import_react77.default.useRef(null);
|
7210
|
+
const state = (0, import_overlays11.useOverlayTriggerState)({ isOpen: open, onOpenChange: (isOpen) => !isOpen && onClose() });
|
7211
|
+
const { modalProps, underlayProps } = (0, import_overlays10.useModalOverlay)(
|
7212
|
+
{ isDismissable: true, isKeyboardDismissDisabled: false },
|
7213
|
+
state,
|
7197
7214
|
ref
|
7198
7215
|
);
|
7199
|
-
if (!
|
7216
|
+
if (!state.isOpen) {
|
7200
7217
|
return null;
|
7201
7218
|
}
|
7202
|
-
return /* @__PURE__ */
|
7203
|
-
|
7204
|
-
}, /* @__PURE__ */
|
7205
|
-
|
7206
|
-
|
7207
|
-
autoFocus: true
|
7208
|
-
}, /* @__PURE__ */ import_react76.default.createElement(Modal.Dialog, __spreadValues(__spreadValues({
|
7219
|
+
return /* @__PURE__ */ import_react77.default.createElement(import_overlays10.Overlay, {
|
7220
|
+
portalContainer
|
7221
|
+
}, /* @__PURE__ */ import_react77.default.createElement(Modal, {
|
7222
|
+
open: true
|
7223
|
+
}, /* @__PURE__ */ import_react77.default.createElement(Modal.BackDrop, __spreadValues({}, underlayProps)), /* @__PURE__ */ import_react77.default.createElement(ModalWrapper, __spreadValues(__spreadValues({
|
7209
7224
|
ref,
|
7210
7225
|
size
|
7211
|
-
},
|
7212
|
-
"aria-label": "Close",
|
7213
|
-
icon: import_cross5.default,
|
7214
|
-
onClick: onClose
|
7215
|
-
})), headerImage !== void 0 && /* @__PURE__ */ import_react76.default.createElement(Modal.HeaderImage, {
|
7216
|
-
backgroundImage: headerImage
|
7217
|
-
}), /* @__PURE__ */ import_react76.default.createElement(Modal.Header, {
|
7218
|
-
className: tw({ "pb-3": isComponentType(children, ModalTabs) })
|
7219
|
-
}, /* @__PURE__ */ import_react76.default.createElement(Modal.TitleContainer, null, /* @__PURE__ */ import_react76.default.createElement(Modal.Title, {
|
7220
|
-
id: labelledBy
|
7221
|
-
}, title), subtitle && /* @__PURE__ */ import_react76.default.createElement(Modal.Subtitle, null, subtitle))), isComponentType(children, ModalTabs) ? import_react76.default.cloneElement(children, { className: tw("[&>div:first-child]:px-5 grow") }) : /* @__PURE__ */ import_react76.default.createElement(Modal.Body, {
|
7222
|
-
id: describedBy,
|
7223
|
-
tabIndex: 0,
|
7224
|
-
noFooter: !(secondaryActions || primaryAction)
|
7225
|
-
}, children), (secondaryActions || primaryAction) && /* @__PURE__ */ import_react76.default.createElement(Modal.Footer, null, /* @__PURE__ */ import_react76.default.createElement(Modal.Actions, null, secondaryActions && (0, import_castArray.default)(secondaryActions).filter(Boolean).map((_a) => {
|
7226
|
-
var _b = _a, { text } = _b, action = __objRest(_b, ["text"]);
|
7227
|
-
return /* @__PURE__ */ import_react76.default.createElement(SecondaryButton, __spreadValues({
|
7228
|
-
key: text
|
7229
|
-
}, action), text);
|
7230
|
-
}), primaryAction && /* @__PURE__ */ import_react76.default.createElement(PrimaryButton, __spreadValues({
|
7231
|
-
key: primaryAction.text
|
7232
|
-
}, (0, import_omit9.default)(primaryAction, "text")), primaryAction.text)))))));
|
7226
|
+
}, props), modalProps))));
|
7233
7227
|
};
|
7228
|
+
var ModalWrapper = import_react77.default.forwardRef(
|
7229
|
+
(_a, ref) => {
|
7230
|
+
var _b = _a, { title, subtitle, headerImage, primaryAction, secondaryActions, children, onClose } = _b, props = __objRest(_b, ["title", "subtitle", "headerImage", "primaryAction", "secondaryActions", "children", "onClose"]);
|
7231
|
+
const labelledBy = (0, import_utils11.useId)();
|
7232
|
+
const describedBy = (0, import_utils11.useId)();
|
7233
|
+
const { dialogProps } = (0, import_dialog3.useDialog)(
|
7234
|
+
{ "role": "dialog", "aria-labelledby": labelledBy, "aria-describedby": describedBy },
|
7235
|
+
ref
|
7236
|
+
);
|
7237
|
+
return /* @__PURE__ */ import_react77.default.createElement(Modal.Dialog, __spreadProps(__spreadValues(__spreadValues({
|
7238
|
+
ref
|
7239
|
+
}, props), dialogProps), {
|
7240
|
+
tabIndex: -1
|
7241
|
+
}), /* @__PURE__ */ import_react77.default.createElement(Modal.CloseButtonContainer, null, /* @__PURE__ */ import_react77.default.createElement(IconButton, {
|
7242
|
+
"aria-label": "Close",
|
7243
|
+
icon: import_cross5.default,
|
7244
|
+
onClick: onClose
|
7245
|
+
})), headerImage !== void 0 && /* @__PURE__ */ import_react77.default.createElement(Modal.HeaderImage, {
|
7246
|
+
backgroundImage: headerImage
|
7247
|
+
}), /* @__PURE__ */ import_react77.default.createElement(Modal.Header, {
|
7248
|
+
className: tw({ "pb-3": isComponentType(children, ModalTabs) })
|
7249
|
+
}, /* @__PURE__ */ import_react77.default.createElement(Modal.TitleContainer, null, /* @__PURE__ */ import_react77.default.createElement(Modal.Title, {
|
7250
|
+
id: labelledBy
|
7251
|
+
}, title), subtitle && /* @__PURE__ */ import_react77.default.createElement(Modal.Subtitle, null, subtitle))), isComponentType(children, ModalTabs) ? import_react77.default.cloneElement(children, { className: tw("[&>div:first-child]:px-5 grow") }) : /* @__PURE__ */ import_react77.default.createElement(Modal.Body, {
|
7252
|
+
id: describedBy,
|
7253
|
+
tabIndex: 0,
|
7254
|
+
noFooter: !(secondaryActions || primaryAction)
|
7255
|
+
}, children), (secondaryActions || primaryAction) && /* @__PURE__ */ import_react77.default.createElement(Modal.Footer, null, /* @__PURE__ */ import_react77.default.createElement(Modal.Actions, null, secondaryActions && (0, import_castArray.default)(secondaryActions).filter(Boolean).map((_a2) => {
|
7256
|
+
var _b2 = _a2, { text } = _b2, action = __objRest(_b2, ["text"]);
|
7257
|
+
return /* @__PURE__ */ import_react77.default.createElement(SecondaryButton, __spreadValues({
|
7258
|
+
key: text
|
7259
|
+
}, action), text);
|
7260
|
+
}), primaryAction && /* @__PURE__ */ import_react77.default.createElement(PrimaryButton, __spreadValues({
|
7261
|
+
key: primaryAction.text
|
7262
|
+
}, (0, import_omit9.default)(primaryAction, "text")), primaryAction.text))));
|
7263
|
+
}
|
7264
|
+
);
|
7234
7265
|
var ModalTabs = createTabsComponent(
|
7235
7266
|
ModalTab,
|
7236
7267
|
TabItem,
|
7237
7268
|
"ModalTabs",
|
7238
|
-
(children, selected, props) => /* @__PURE__ */
|
7269
|
+
(children, selected, props) => /* @__PURE__ */ import_react77.default.createElement(Modal.Body, {
|
7239
7270
|
maxHeight: props.maxHeight
|
7240
|
-
}, /* @__PURE__ */
|
7271
|
+
}, /* @__PURE__ */ import_react77.default.createElement(ModalTabContainer, null, children.find(
|
7241
7272
|
(node, index) => (node == null ? void 0 : node.props.value) === selected || index === selected
|
7242
7273
|
)))
|
7243
7274
|
);
|
7244
7275
|
|
7245
7276
|
// src/molecules/MultiInput/MultiInput.tsx
|
7246
|
-
var
|
7277
|
+
var import_react79 = __toESM(require("react"));
|
7247
7278
|
var import_castArray2 = __toESM(require("lodash/castArray"));
|
7248
7279
|
var import_identity = __toESM(require("lodash/identity"));
|
7249
7280
|
var import_omit10 = __toESM(require("lodash/omit"));
|
7250
7281
|
var import_uniqueId4 = __toESM(require("lodash/uniqueId"));
|
7251
7282
|
|
7252
7283
|
// src/molecules/MultiInput/InputChip.tsx
|
7253
|
-
var
|
7284
|
+
var import_react78 = __toESM(require("react"));
|
7254
7285
|
var import_smallCross = __toESM(require_smallCross());
|
7255
|
-
var InputChip =
|
7286
|
+
var InputChip = import_react78.default.forwardRef(
|
7256
7287
|
(_a, ref) => {
|
7257
7288
|
var _b = _a, { invalid = false, disabled, readOnly, className, onClick: _onClick, children } = _b, props = __objRest(_b, ["invalid", "disabled", "readOnly", "className", "onClick", "children"]);
|
7258
7289
|
const onClick = (e) => {
|
@@ -7260,7 +7291,7 @@ var InputChip = import_react77.default.forwardRef(
|
|
7260
7291
|
_onClick == null ? void 0 : _onClick(e);
|
7261
7292
|
}
|
7262
7293
|
};
|
7263
|
-
return /* @__PURE__ */
|
7294
|
+
return /* @__PURE__ */ import_react78.default.createElement("div", __spreadValues({
|
7264
7295
|
ref,
|
7265
7296
|
role: "button",
|
7266
7297
|
className: classNames(className, "inline-flex align-middle mx-1 px-2 py-1 items-center rounded-sm break-all", {
|
@@ -7270,10 +7301,10 @@ var InputChip = import_react77.default.forwardRef(
|
|
7270
7301
|
"bg-grey-5 pointer-events-none": disabled
|
7271
7302
|
}),
|
7272
7303
|
onClick
|
7273
|
-
}, props), /* @__PURE__ */
|
7304
|
+
}, props), /* @__PURE__ */ import_react78.default.createElement(Typography2, {
|
7274
7305
|
variant: "small",
|
7275
7306
|
color: invalid ? "error-80" : disabled ? "grey-40" : "grey-70"
|
7276
|
-
}, children), !readOnly && /* @__PURE__ */
|
7307
|
+
}, children), !readOnly && /* @__PURE__ */ import_react78.default.createElement("div", null, /* @__PURE__ */ import_react78.default.createElement(Icon, {
|
7277
7308
|
icon: import_smallCross.default,
|
7278
7309
|
className: tw("ml-2", {
|
7279
7310
|
"text-error-70": invalid,
|
@@ -7331,11 +7362,11 @@ var MultiInputBase = (_a) => {
|
|
7331
7362
|
"valid"
|
7332
7363
|
]);
|
7333
7364
|
var _a2;
|
7334
|
-
const inputRef = (0,
|
7335
|
-
const [items, setItems] = (0,
|
7336
|
-
const [hasFocus, setFocus] = (0,
|
7365
|
+
const inputRef = (0, import_react79.useRef)(null);
|
7366
|
+
const [items, setItems] = (0, import_react79.useState)((_a2 = value != null ? value : defaultValue) != null ? _a2 : []);
|
7367
|
+
const [hasFocus, setFocus] = (0, import_react79.useState)(false);
|
7337
7368
|
const keyCodes = [delimiter !== "enter" ? " " : null, delimiter !== "space" ? "Enter" : null].filter(import_identity.default);
|
7338
|
-
(0,
|
7369
|
+
(0, import_react79.useEffect)(() => {
|
7339
7370
|
const requiresUpdate = value !== void 0 || defaultValue === void 0;
|
7340
7371
|
if (requiresUpdate && JSON.stringify(value) !== JSON.stringify(items)) {
|
7341
7372
|
setItems(value != null ? value : []);
|
@@ -7414,7 +7445,7 @@ var MultiInputBase = (_a) => {
|
|
7414
7445
|
};
|
7415
7446
|
const renderChips = () => items == null ? void 0 : items.map((item, index) => {
|
7416
7447
|
var _a3;
|
7417
|
-
return /* @__PURE__ */
|
7448
|
+
return /* @__PURE__ */ import_react79.default.createElement(InputChip, {
|
7418
7449
|
key: `${itemToString(item)}.${index}`,
|
7419
7450
|
invalid: !((_a3 = isItemValid == null ? void 0 : isItemValid(item, index)) != null ? _a3 : true),
|
7420
7451
|
readOnly,
|
@@ -7425,11 +7456,11 @@ var MultiInputBase = (_a) => {
|
|
7425
7456
|
}
|
7426
7457
|
}, itemToString(item));
|
7427
7458
|
});
|
7428
|
-
return /* @__PURE__ */
|
7459
|
+
return /* @__PURE__ */ import_react79.default.createElement("div", null, /* @__PURE__ */ import_react79.default.createElement(Select.InputContainer, {
|
7429
7460
|
variant: disabled ? "disabled" : valid === false ? "error" : readOnly ? "readOnly" : hasFocus ? "focused" : "default"
|
7430
|
-
}, /* @__PURE__ */
|
7461
|
+
}, /* @__PURE__ */ import_react79.default.createElement("div", {
|
7431
7462
|
className: "grow inline-flex flex-row flex-wrap gap-y-2"
|
7432
|
-
}, inline && renderChips(), /* @__PURE__ */
|
7463
|
+
}, inline && renderChips(), /* @__PURE__ */ import_react79.default.createElement(Select.Input, __spreadProps(__spreadValues({
|
7433
7464
|
ref: inputRef,
|
7434
7465
|
id: id != null ? id : name,
|
7435
7466
|
name,
|
@@ -7447,35 +7478,35 @@ var MultiInputBase = (_a) => {
|
|
7447
7478
|
onFocus: handleFocus,
|
7448
7479
|
onBlur: handleBlur,
|
7449
7480
|
autoComplete: "off"
|
7450
|
-
}))), endAdornment && /* @__PURE__ */
|
7481
|
+
}))), endAdornment && /* @__PURE__ */ import_react79.default.createElement(InputAdornment, null, endAdornment)), !inline && /* @__PURE__ */ import_react79.default.createElement("div", {
|
7451
7482
|
className: tw("flex flex-row flex-wrap gap-y-2 mt-2")
|
7452
7483
|
}, renderChips()));
|
7453
7484
|
};
|
7454
|
-
var BaseMultiInputSkeleton = () => /* @__PURE__ */
|
7485
|
+
var BaseMultiInputSkeleton = () => /* @__PURE__ */ import_react79.default.createElement(Skeleton, {
|
7455
7486
|
height: 38
|
7456
7487
|
});
|
7457
7488
|
MultiInputBase.Skeleton = BaseMultiInputSkeleton;
|
7458
7489
|
var MultiInput = (props) => {
|
7459
7490
|
var _a, _b, _c, _d, _e;
|
7460
7491
|
const maxLength = (_a = props.maxLength) != null ? _a : props.max;
|
7461
|
-
const [value, setValue] = (0,
|
7462
|
-
(0,
|
7492
|
+
const [value, setValue] = (0, import_react79.useState)((_c = (_b = props.value) != null ? _b : props.defaultValue) != null ? _c : []);
|
7493
|
+
(0, import_react79.useEffect)(() => {
|
7463
7494
|
var _a2;
|
7464
7495
|
setValue((_a2 = props.value) != null ? _a2 : []);
|
7465
7496
|
}, [JSON.stringify(props.value)]);
|
7466
|
-
const id = (0,
|
7497
|
+
const id = (0, import_react79.useRef)((_e = (_d = props.id) != null ? _d : props.name) != null ? _e : `multiinput-${(0, import_uniqueId4.default)()}`);
|
7467
7498
|
const errorMessageId = (0, import_uniqueId4.default)();
|
7468
7499
|
const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
|
7469
7500
|
const labelControlProps = getLabelControlProps(props);
|
7470
7501
|
const baseProps = (0, import_omit10.default)(props, Object.keys(labelControlProps));
|
7471
|
-
return /* @__PURE__ */
|
7502
|
+
return /* @__PURE__ */ import_react79.default.createElement(LabelControl, __spreadProps(__spreadValues({
|
7472
7503
|
id: `${id.current}-label`,
|
7473
7504
|
htmlFor: `${id.current}-input`,
|
7474
7505
|
messageId: errorMessageId
|
7475
7506
|
}, labelControlProps), {
|
7476
7507
|
length: value.length,
|
7477
7508
|
maxLength
|
7478
|
-
}), /* @__PURE__ */
|
7509
|
+
}), /* @__PURE__ */ import_react79.default.createElement(MultiInputBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
|
7479
7510
|
id: `${id.current}-input`,
|
7480
7511
|
onChange: (value2) => {
|
7481
7512
|
var _a2;
|
@@ -7487,13 +7518,13 @@ var MultiInput = (props) => {
|
|
7487
7518
|
valid: props.valid
|
7488
7519
|
})));
|
7489
7520
|
};
|
7490
|
-
var MultiInputSkeleton = () => /* @__PURE__ */
|
7521
|
+
var MultiInputSkeleton = () => /* @__PURE__ */ import_react79.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react79.default.createElement(MultiInputBase.Skeleton, null));
|
7491
7522
|
MultiInput.Skeleton = MultiInputSkeleton;
|
7492
7523
|
MultiInput.Skeleton.displayName = "MultiInput.Skeleton";
|
7493
7524
|
|
7494
7525
|
// src/molecules/MultiSelect/MultiSelect.tsx
|
7495
|
-
var
|
7496
|
-
var
|
7526
|
+
var import_react80 = __toESM(require("react"));
|
7527
|
+
var import_overlays12 = require("@react-aria/overlays");
|
7497
7528
|
var import_downshift2 = require("downshift");
|
7498
7529
|
var import_isEqual = __toESM(require("lodash/isEqual"));
|
7499
7530
|
var import_isNil = __toESM(require("lodash/isNil"));
|
@@ -7548,10 +7579,12 @@ var MultiSelectBase = (_a) => {
|
|
7548
7579
|
"children"
|
7549
7580
|
]);
|
7550
7581
|
var _a2;
|
7551
|
-
const
|
7552
|
-
const
|
7553
|
-
const
|
7554
|
-
const
|
7582
|
+
const popoverRef = (0, import_react80.useRef)(null);
|
7583
|
+
const targetRef = (0, import_react80.useRef)(null);
|
7584
|
+
const menuRef = (0, import_react80.useRef)(null);
|
7585
|
+
const inputRef = (0, import_react80.useRef)(null);
|
7586
|
+
const [inputValue, setInputValue] = (0, import_react80.useState)("");
|
7587
|
+
const [hasFocus, setFocus] = (0, import_react80.useState)(false);
|
7555
7588
|
const { selectedItems, addSelectedItem, removeSelectedItem, getDropdownProps, getSelectedItemProps } = (0, import_downshift2.useMultipleSelection)(
|
7556
7589
|
(0, import_omitBy.default)(
|
7557
7590
|
{
|
@@ -7571,6 +7604,7 @@ var MultiSelectBase = (_a) => {
|
|
7571
7604
|
isOpen,
|
7572
7605
|
openMenu,
|
7573
7606
|
closeMenu,
|
7607
|
+
toggleMenu,
|
7574
7608
|
highlightedIndex,
|
7575
7609
|
getInputProps,
|
7576
7610
|
getMenuProps,
|
@@ -7621,16 +7655,20 @@ var MultiSelectBase = (_a) => {
|
|
7621
7655
|
}
|
7622
7656
|
}
|
7623
7657
|
});
|
7624
|
-
const
|
7625
|
-
|
7626
|
-
|
7627
|
-
|
7628
|
-
|
7629
|
-
|
7630
|
-
}
|
7631
|
-
|
7658
|
+
const state = {
|
7659
|
+
isOpen,
|
7660
|
+
close: closeMenu,
|
7661
|
+
open: openMenu,
|
7662
|
+
toggle: toggleMenu,
|
7663
|
+
setOpen: (isOpen2) => isOpen2 ? openMenu() : closeMenu()
|
7664
|
+
};
|
7665
|
+
(0, import_react80.useEffect)(() => {
|
7666
|
+
if (state.isOpen && inputRef.current && popoverRef.current) {
|
7667
|
+
return (0, import_overlays12.ariaHideOutside)([inputRef.current, popoverRef.current]);
|
7668
|
+
}
|
7669
|
+
}, [state.isOpen, inputRef, popoverRef]);
|
7632
7670
|
const renderChips = () => {
|
7633
|
-
return selectedItems.map((selectedItem, index) => /* @__PURE__ */
|
7671
|
+
return selectedItems.map((selectedItem, index) => /* @__PURE__ */ import_react80.default.createElement(InputChip, __spreadProps(__spreadValues({
|
7634
7672
|
key: `${itemToString(selectedItem)}.chip`,
|
7635
7673
|
className: tw("mx-0"),
|
7636
7674
|
disabled,
|
@@ -7644,17 +7682,18 @@ var MultiSelectBase = (_a) => {
|
|
7644
7682
|
}), itemToString(selectedItem)));
|
7645
7683
|
};
|
7646
7684
|
const hasNoResults = options.length === 0 || filteredOptions.length === 0;
|
7647
|
-
const
|
7648
|
-
const
|
7649
|
-
return /* @__PURE__ */
|
7685
|
+
const inputProps = getInputProps(getDropdownProps({ ref: inputRef, disabled: disabled || readOnly }));
|
7686
|
+
const menuProps = getMenuProps({ ref: menuRef }, { suppressRefError: !isOpen });
|
7687
|
+
return /* @__PURE__ */ import_react80.default.createElement("div", {
|
7650
7688
|
className: tw("relative")
|
7651
|
-
}, /* @__PURE__ */
|
7689
|
+
}, /* @__PURE__ */ import_react80.default.createElement(Select.InputContainer, {
|
7652
7690
|
ref: targetRef,
|
7653
7691
|
variant: disabled ? "disabled" : !valid ? "error" : readOnly ? "readOnly" : hasFocus ? "focused" : "default"
|
7654
|
-
}, /* @__PURE__ */
|
7692
|
+
}, /* @__PURE__ */ import_react80.default.createElement("div", {
|
7655
7693
|
className: "grow inline-flex flex-row flex-wrap gap-2"
|
7656
|
-
}, !hideChips && inline && renderChips(), /* @__PURE__ */
|
7694
|
+
}, !hideChips && inline && renderChips(), /* @__PURE__ */ import_react80.default.createElement(Select.Input, __spreadProps(__spreadValues(__spreadValues({
|
7657
7695
|
id,
|
7696
|
+
ref: inputRef,
|
7658
7697
|
name,
|
7659
7698
|
placeholder: selectedItems.length === 0 && !readOnly ? placeholder : "",
|
7660
7699
|
value: inputValue != null ? inputValue : ""
|
@@ -7674,27 +7713,29 @@ var MultiSelectBase = (_a) => {
|
|
7674
7713
|
setFocus(false);
|
7675
7714
|
(_a3 = inputProps.onBlur) == null ? void 0 : _a3.call(inputProps, e);
|
7676
7715
|
}
|
7677
|
-
}))), !readOnly && /* @__PURE__ */
|
7716
|
+
}))), !readOnly && /* @__PURE__ */ import_react80.default.createElement(Select.Toggle, __spreadValues({
|
7678
7717
|
hasFocus,
|
7679
7718
|
isOpen
|
7680
|
-
}, getToggleButtonProps({ disabled })))), !hideChips && !inline && /* @__PURE__ */
|
7719
|
+
}, getToggleButtonProps({ disabled })))), !hideChips && !inline && /* @__PURE__ */ import_react80.default.createElement("div", {
|
7681
7720
|
className: tw("flex flex-row flex-wrap gap-2 mt-2")
|
7682
|
-
}, renderChips()), /* @__PURE__ */
|
7683
|
-
|
7684
|
-
|
7685
|
-
|
7686
|
-
|
7687
|
-
|
7688
|
-
|
7689
|
-
|
7721
|
+
}, renderChips()), isOpen && /* @__PURE__ */ import_react80.default.createElement(PopoverOverlay, {
|
7722
|
+
ref: popoverRef,
|
7723
|
+
triggerRef: targetRef,
|
7724
|
+
state,
|
7725
|
+
placement: "bottom-left",
|
7726
|
+
shouldFlip: true,
|
7727
|
+
isNonModal: true,
|
7728
|
+
style: { width: (_a2 = targetRef.current) == null ? void 0 : _a2.offsetWidth }
|
7729
|
+
}, /* @__PURE__ */ import_react80.default.createElement(Select.Menu, __spreadValues({
|
7730
|
+
ref: menuRef,
|
7690
7731
|
maxHeight
|
7691
|
-
},
|
7732
|
+
}, menuProps), hasNoResults && /* @__PURE__ */ import_react80.default.createElement(Select.NoResults, null, noResults), filteredOptions.map((item, index) => /* @__PURE__ */ import_react80.default.createElement(Select.Item, __spreadValues({
|
7692
7733
|
key: itemToString(item),
|
7693
7734
|
highlighted: index === highlightedIndex,
|
7694
7735
|
selected: selectedItems.includes(item)
|
7695
7736
|
}, getItemProps({ item, index, disabled: isOptionDisabled(item, index) })), renderOption(item))))));
|
7696
7737
|
};
|
7697
|
-
var MultiSelectBaseSkeleton = () => /* @__PURE__ */
|
7738
|
+
var MultiSelectBaseSkeleton = () => /* @__PURE__ */ import_react80.default.createElement(Skeleton, {
|
7698
7739
|
height: 38
|
7699
7740
|
});
|
7700
7741
|
MultiSelectBase.Skeleton = MultiSelectBaseSkeleton;
|
@@ -7707,16 +7748,16 @@ var MultiSelect = (_a) => {
|
|
7707
7748
|
"noResults"
|
7708
7749
|
]);
|
7709
7750
|
var _a2;
|
7710
|
-
const id = (0,
|
7751
|
+
const id = (0, import_react80.useRef)((_a2 = props.id) != null ? _a2 : `multiselect-${(0, import_uniqueId5.default)()}`);
|
7711
7752
|
const errorMessageId = (0, import_uniqueId5.default)();
|
7712
7753
|
const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
|
7713
7754
|
const labelControlProps = getLabelControlProps(props);
|
7714
7755
|
const baseProps = (0, import_omit11.default)(props, Object.keys(labelControlProps));
|
7715
|
-
return /* @__PURE__ */
|
7756
|
+
return /* @__PURE__ */ import_react80.default.createElement(LabelControl, __spreadValues({
|
7716
7757
|
id: `${id.current}-label`,
|
7717
7758
|
htmlFor: `${id.current}-input`,
|
7718
7759
|
messageId: errorMessageId
|
7719
|
-
}, labelControlProps), /* @__PURE__ */
|
7760
|
+
}, labelControlProps), /* @__PURE__ */ import_react80.default.createElement(MultiSelectBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
|
7720
7761
|
id: id.current,
|
7721
7762
|
options,
|
7722
7763
|
noResults,
|
@@ -7724,16 +7765,16 @@ var MultiSelect = (_a) => {
|
|
7724
7765
|
valid: props.valid
|
7725
7766
|
})));
|
7726
7767
|
};
|
7727
|
-
var MultiSelectSkeleton = () => /* @__PURE__ */
|
7768
|
+
var MultiSelectSkeleton = () => /* @__PURE__ */ import_react80.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react80.default.createElement(MultiSelectBase.Skeleton, null));
|
7728
7769
|
MultiSelect.Skeleton = MultiSelectSkeleton;
|
7729
7770
|
MultiSelect.Skeleton.displayName = "MultiSelect.Skeleton";
|
7730
7771
|
|
7731
7772
|
// src/molecules/NativeSelect/NativeSelect.tsx
|
7732
|
-
var
|
7773
|
+
var import_react81 = __toESM(require("react"));
|
7733
7774
|
var import_omit12 = __toESM(require("lodash/omit"));
|
7734
7775
|
var import_uniqueId6 = __toESM(require("lodash/uniqueId"));
|
7735
7776
|
var import_caretDown = __toESM(require_caretDown());
|
7736
|
-
var NativeSelectBase =
|
7777
|
+
var NativeSelectBase = import_react81.default.forwardRef(
|
7737
7778
|
(_a, ref) => {
|
7738
7779
|
var _b = _a, { children, disabled = false, required = false, valid = true, readOnly = false } = _b, props = __objRest(_b, ["children", "disabled", "required", "valid", "readOnly"]);
|
7739
7780
|
const placeholderValue = (0, import_uniqueId6.default)("default_value_for_placeholder");
|
@@ -7750,16 +7791,16 @@ var NativeSelectBase = import_react80.default.forwardRef(
|
|
7750
7791
|
(_b2 = props.onBlur) == null ? void 0 : _b2.call(props, event);
|
7751
7792
|
}
|
7752
7793
|
};
|
7753
|
-
return /* @__PURE__ */
|
7794
|
+
return /* @__PURE__ */ import_react81.default.createElement("span", {
|
7754
7795
|
className: tw("relative block")
|
7755
|
-
}, !readOnly && /* @__PURE__ */
|
7796
|
+
}, !readOnly && /* @__PURE__ */ import_react81.default.createElement("span", {
|
7756
7797
|
className: tw(
|
7757
7798
|
"absolute right-0 inset-y-0 mr-4 text-grey-40 flex ml-3 pointer-events-none typography-default-strong mt-4"
|
7758
7799
|
)
|
7759
|
-
}, /* @__PURE__ */
|
7800
|
+
}, /* @__PURE__ */ import_react81.default.createElement(Icon, {
|
7760
7801
|
icon: import_caretDown.default,
|
7761
7802
|
"data-testid": "icon-dropdown"
|
7762
|
-
})), /* @__PURE__ */
|
7803
|
+
})), /* @__PURE__ */ import_react81.default.createElement("select", __spreadProps(__spreadValues({
|
7763
7804
|
ref,
|
7764
7805
|
disabled: disabled || readOnly,
|
7765
7806
|
required
|
@@ -7778,29 +7819,29 @@ var NativeSelectBase = import_react80.default.forwardRef(
|
|
7778
7819
|
),
|
7779
7820
|
props.className
|
7780
7821
|
)
|
7781
|
-
}), props.placeholder && /* @__PURE__ */
|
7822
|
+
}), props.placeholder && /* @__PURE__ */ import_react81.default.createElement("option", {
|
7782
7823
|
value: placeholderValue,
|
7783
7824
|
disabled: true
|
7784
7825
|
}, props.placeholder), children));
|
7785
7826
|
}
|
7786
7827
|
);
|
7787
|
-
NativeSelectBase.Skeleton = () => /* @__PURE__ */
|
7828
|
+
NativeSelectBase.Skeleton = () => /* @__PURE__ */ import_react81.default.createElement(Skeleton, {
|
7788
7829
|
height: 38
|
7789
7830
|
});
|
7790
|
-
var NativeSelect =
|
7831
|
+
var NativeSelect = import_react81.default.forwardRef(
|
7791
7832
|
(_a, ref) => {
|
7792
7833
|
var _b = _a, { readOnly } = _b, props = __objRest(_b, ["readOnly"]);
|
7793
7834
|
var _a2;
|
7794
|
-
const id = (0,
|
7835
|
+
const id = (0, import_react81.useRef)((_a2 = props.id) != null ? _a2 : `nativeselect-${(0, import_uniqueId6.default)()}`);
|
7795
7836
|
const errorMessageId = (0, import_uniqueId6.default)();
|
7796
7837
|
const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
|
7797
7838
|
const _b2 = getLabelControlProps(props), { "data-testid": dataTestId } = _b2, labelControlProps = __objRest(_b2, ["data-testid"]);
|
7798
7839
|
const baseProps = (0, import_omit12.default)(props, Object.keys(labelControlProps));
|
7799
|
-
return /* @__PURE__ */
|
7840
|
+
return /* @__PURE__ */ import_react81.default.createElement(LabelControl, __spreadValues({
|
7800
7841
|
id: `${id.current}-label`,
|
7801
7842
|
htmlFor: id.current,
|
7802
7843
|
messageId: errorMessageId
|
7803
|
-
}, labelControlProps), /* @__PURE__ */
|
7844
|
+
}, labelControlProps), /* @__PURE__ */ import_react81.default.createElement(NativeSelectBase, __spreadProps(__spreadValues(__spreadValues({
|
7804
7845
|
ref
|
7805
7846
|
}, baseProps), errorProps), {
|
7806
7847
|
id: id.current,
|
@@ -7814,21 +7855,21 @@ var NativeSelect = import_react80.default.forwardRef(
|
|
7814
7855
|
}
|
7815
7856
|
);
|
7816
7857
|
NativeSelect.displayName = "NativeSelect";
|
7817
|
-
var Option =
|
7858
|
+
var Option = import_react81.default.forwardRef((_a, ref) => {
|
7818
7859
|
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
7819
|
-
return /* @__PURE__ */
|
7860
|
+
return /* @__PURE__ */ import_react81.default.createElement("option", __spreadValues({
|
7820
7861
|
ref
|
7821
7862
|
}, props), children);
|
7822
7863
|
});
|
7823
7864
|
Option.displayName = "Option";
|
7824
|
-
var NativeSelectSkeleton = () => /* @__PURE__ */
|
7865
|
+
var NativeSelectSkeleton = () => /* @__PURE__ */ import_react81.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react81.default.createElement(NativeSelectBase.Skeleton, null), /* @__PURE__ */ import_react81.default.createElement("div", {
|
7825
7866
|
style: { height: "1px" }
|
7826
7867
|
}));
|
7827
7868
|
NativeSelect.Skeleton = NativeSelectSkeleton;
|
7828
7869
|
NativeSelect.Skeleton.displayName = "NativeSelect.Skeleton";
|
7829
7870
|
|
7830
7871
|
// src/molecules/PageHeader/PageHeader.tsx
|
7831
|
-
var
|
7872
|
+
var import_react82 = __toESM(require("react"));
|
7832
7873
|
var import_castArray3 = __toESM(require("lodash/castArray"));
|
7833
7874
|
var import_omit13 = __toESM(require("lodash/omit"));
|
7834
7875
|
var PageHeader = ({
|
@@ -7840,49 +7881,48 @@ var PageHeader = ({
|
|
7840
7881
|
chips = [],
|
7841
7882
|
breadcrumbs
|
7842
7883
|
}) => {
|
7843
|
-
return /* @__PURE__ */
|
7884
|
+
return /* @__PURE__ */ import_react82.default.createElement(Flexbox, {
|
7844
7885
|
direction: "row",
|
7845
7886
|
gap: "4",
|
7846
7887
|
paddingBottom: "6"
|
7847
|
-
}, /* @__PURE__ */
|
7888
|
+
}, /* @__PURE__ */ import_react82.default.createElement(Flexbox, {
|
7848
7889
|
className: tw("grow"),
|
7849
7890
|
direction: "column",
|
7850
7891
|
gap: "0"
|
7851
|
-
}, breadcrumbs && /* @__PURE__ */
|
7892
|
+
}, breadcrumbs && /* @__PURE__ */ import_react82.default.createElement(Breadcrumbs, null, breadcrumbs), /* @__PURE__ */ import_react82.default.createElement(Flexbox, {
|
7852
7893
|
gap: "5"
|
7853
|
-
}, image && /* @__PURE__ */
|
7894
|
+
}, image && /* @__PURE__ */ import_react82.default.createElement("img", {
|
7854
7895
|
src: image,
|
7855
7896
|
alt: imageAlt,
|
7856
7897
|
className: tw("w-[56px] h-[56px]")
|
7857
|
-
}), /* @__PURE__ */
|
7898
|
+
}), /* @__PURE__ */ import_react82.default.createElement(Flexbox, {
|
7858
7899
|
direction: "column",
|
7859
7900
|
justifyContent: "center"
|
7860
|
-
}, /* @__PURE__ */
|
7901
|
+
}, /* @__PURE__ */ import_react82.default.createElement(Typography2.Heading, null, title), chips.length > 0 && /* @__PURE__ */ import_react82.default.createElement(Flexbox, {
|
7861
7902
|
gap: "3"
|
7862
|
-
}, chips.map((chip) => /* @__PURE__ */
|
7903
|
+
}, chips.map((chip) => /* @__PURE__ */ import_react82.default.createElement(Chip2, {
|
7863
7904
|
key: chip,
|
7864
7905
|
dense: true,
|
7865
7906
|
text: chip
|
7866
|
-
})))))), (secondaryActions || primaryAction) && /* @__PURE__ */
|
7907
|
+
})))))), (secondaryActions || primaryAction) && /* @__PURE__ */ import_react82.default.createElement(Flexbox, {
|
7867
7908
|
gap: "4",
|
7868
7909
|
className: tw("self-start")
|
7869
7910
|
}, secondaryActions && (0, import_castArray3.default)(secondaryActions).filter(Boolean).map((_a) => {
|
7870
7911
|
var _b = _a, { text } = _b, action = __objRest(_b, ["text"]);
|
7871
|
-
return /* @__PURE__ */
|
7912
|
+
return /* @__PURE__ */ import_react82.default.createElement(SecondaryButton, __spreadValues({
|
7872
7913
|
key: text
|
7873
7914
|
}, action), text);
|
7874
|
-
}), primaryAction && /* @__PURE__ */
|
7915
|
+
}), primaryAction && /* @__PURE__ */ import_react82.default.createElement(PrimaryButton, __spreadValues({
|
7875
7916
|
key: primaryAction.text
|
7876
7917
|
}, (0, import_omit13.default)(primaryAction, "text")), primaryAction.text)));
|
7877
7918
|
};
|
7878
7919
|
|
7879
7920
|
// src/molecules/Pagination/Pagination.tsx
|
7880
|
-
var
|
7921
|
+
var import_react84 = __toESM(require("react"));
|
7881
7922
|
var import_clamp = __toESM(require("lodash/clamp"));
|
7882
7923
|
|
7883
7924
|
// src/molecules/Select/Select.tsx
|
7884
|
-
var
|
7885
|
-
var import_overlays14 = require("@react-aria/overlays");
|
7925
|
+
var import_react83 = __toESM(require("react"));
|
7886
7926
|
var import_downshift3 = require("downshift");
|
7887
7927
|
var import_defaults = __toESM(require("lodash/defaults"));
|
7888
7928
|
var import_isArray = __toESM(require("lodash/isArray"));
|
@@ -7898,10 +7938,10 @@ var hasOptionGroups = (val) => {
|
|
7898
7938
|
};
|
7899
7939
|
var defaultRenderOption = (item, props, { selectedItem }, { getOptionKey, getValue, optionToString = getOptionLabelBuiltin }) => {
|
7900
7940
|
var _a, _b;
|
7901
|
-
return /* @__PURE__ */
|
7941
|
+
return /* @__PURE__ */ import_react83.default.createElement(Select.Item, __spreadValues({
|
7902
7942
|
key: (_b = (_a = getOptionKey == null ? void 0 : getOptionKey(item)) != null ? _a : getValue == null ? void 0 : getValue(item)) != null ? _b : optionToString(item),
|
7903
7943
|
selected: item === selectedItem
|
7904
|
-
}, props), hasIconProperty(item) && /* @__PURE__ */
|
7944
|
+
}, props), hasIconProperty(item) && /* @__PURE__ */ import_react83.default.createElement(InlineIcon, {
|
7905
7945
|
icon: item.icon
|
7906
7946
|
}), optionToString(item));
|
7907
7947
|
};
|
@@ -7972,9 +8012,9 @@ var _SelectBase = (props) => {
|
|
7972
8012
|
"children",
|
7973
8013
|
"labelWrapper"
|
7974
8014
|
]);
|
7975
|
-
const [hasFocus, setFocus] = (0,
|
7976
|
-
const targetRef = (0,
|
7977
|
-
const
|
8015
|
+
const [hasFocus, setFocus] = (0, import_react83.useState)(false);
|
8016
|
+
const targetRef = (0, import_react83.useRef)(null);
|
8017
|
+
const menuRef = (0, import_react83.useRef)(null);
|
7978
8018
|
const items = hasOptionGroups(options) ? options.flatMap((g) => g.options) : options;
|
7979
8019
|
const findItemByValue = (val) => {
|
7980
8020
|
if (val === null) {
|
@@ -7984,7 +8024,9 @@ var _SelectBase = (props) => {
|
|
7984
8024
|
};
|
7985
8025
|
const {
|
7986
8026
|
isOpen,
|
8027
|
+
openMenu,
|
7987
8028
|
closeMenu,
|
8029
|
+
toggleMenu,
|
7988
8030
|
selectItem,
|
7989
8031
|
selectedItem,
|
7990
8032
|
highlightedIndex,
|
@@ -7999,13 +8041,13 @@ var _SelectBase = (props) => {
|
|
7999
8041
|
itemToString,
|
8000
8042
|
onSelectedItemChange: (e) => onChange == null ? void 0 : onChange(e.selectedItem)
|
8001
8043
|
});
|
8002
|
-
const
|
8003
|
-
|
8004
|
-
|
8005
|
-
|
8006
|
-
|
8007
|
-
|
8008
|
-
}
|
8044
|
+
const state = {
|
8045
|
+
isOpen,
|
8046
|
+
close: closeMenu,
|
8047
|
+
open: openMenu,
|
8048
|
+
toggle: toggleMenu,
|
8049
|
+
setOpen: (isOpen2) => isOpen2 ? openMenu() : closeMenu()
|
8050
|
+
};
|
8009
8051
|
const renderItem = (item, index) => UNSAFE_renderOption(
|
8010
8052
|
item,
|
8011
8053
|
__spreadValues({
|
@@ -8018,13 +8060,13 @@ var _SelectBase = (props) => {
|
|
8018
8060
|
},
|
8019
8061
|
withDefaults
|
8020
8062
|
);
|
8021
|
-
const renderGroup = (group) => /* @__PURE__ */
|
8063
|
+
const renderGroup = (group) => /* @__PURE__ */ import_react83.default.createElement(import_react83.default.Fragment, {
|
8022
8064
|
key: group.label
|
8023
|
-
}, /* @__PURE__ */
|
8024
|
-
const input = /* @__PURE__ */
|
8065
|
+
}, /* @__PURE__ */ import_react83.default.createElement(Select.Group, null, group.label), group.options.map((opt) => renderItem(opt, items.indexOf(opt))));
|
8066
|
+
const input = /* @__PURE__ */ import_react83.default.createElement(Select.InputContainer, __spreadProps(__spreadValues({}, getToggleButtonProps({ disabled: disabled || readOnly, ref: targetRef })), {
|
8025
8067
|
variant: disabled ? "disabled" : !valid ? "error" : readOnly ? "readOnly" : hasFocus ? "focused" : "default",
|
8026
8068
|
tabIndex: 0
|
8027
|
-
}), /* @__PURE__ */
|
8069
|
+
}), /* @__PURE__ */ import_react83.default.createElement(Select.Input, __spreadProps(__spreadValues({
|
8028
8070
|
id,
|
8029
8071
|
name
|
8030
8072
|
}, rest), {
|
@@ -8036,27 +8078,26 @@ var _SelectBase = (props) => {
|
|
8036
8078
|
tabIndex: -1,
|
8037
8079
|
onFocus: () => setFocus(true),
|
8038
8080
|
onBlur: () => setFocus(false)
|
8039
|
-
})), !readOnly && /* @__PURE__ */
|
8081
|
+
})), !readOnly && /* @__PURE__ */ import_react83.default.createElement(Select.Toggle, {
|
8040
8082
|
disabled,
|
8041
8083
|
isOpen,
|
8042
8084
|
tabIndex: -1
|
8043
8085
|
}));
|
8044
|
-
const
|
8045
|
-
|
8046
|
-
return /* @__PURE__ */ import_react82.default.createElement("div", {
|
8086
|
+
const menuProps = getMenuProps({ ref: menuRef }, { suppressRefError: !isOpen });
|
8087
|
+
return /* @__PURE__ */ import_react83.default.createElement("div", {
|
8047
8088
|
className: tw("relative")
|
8048
|
-
}, labelWrapper ?
|
8049
|
-
|
8050
|
-
|
8051
|
-
|
8052
|
-
|
8053
|
-
style
|
8054
|
-
|
8055
|
-
|
8089
|
+
}, labelWrapper ? import_react83.default.cloneElement(labelWrapper, { children: input }) : input, isOpen && /* @__PURE__ */ import_react83.default.createElement(PopoverOverlay, {
|
8090
|
+
state,
|
8091
|
+
triggerRef: targetRef,
|
8092
|
+
placement: "bottom-left",
|
8093
|
+
shouldFlip: true,
|
8094
|
+
style: { width: (_b = targetRef.current) == null ? void 0 : _b.offsetWidth }
|
8095
|
+
}, /* @__PURE__ */ import_react83.default.createElement(Select.Menu, __spreadValues({
|
8096
|
+
ref: menuRef,
|
8056
8097
|
maxHeight
|
8057
|
-
},
|
8098
|
+
}, menuProps), options.length === 0 && /* @__PURE__ */ import_react83.default.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__ */ import_react83.default.createElement(import_react83.default.Fragment, null, /* @__PURE__ */ import_react83.default.createElement(Select.Divider, {
|
8058
8099
|
onMouseOver: () => setHighlightedIndex(-1)
|
8059
|
-
}), actions.map((act, index) => /* @__PURE__ */
|
8100
|
+
}), actions.map((act, index) => /* @__PURE__ */ import_react83.default.createElement(Select.ActionItem, __spreadProps(__spreadValues({
|
8060
8101
|
key: `${index}`
|
8061
8102
|
}, act), {
|
8062
8103
|
onMouseOver: () => setHighlightedIndex(-1),
|
@@ -8066,10 +8107,10 @@ var _SelectBase = (props) => {
|
|
8066
8107
|
}
|
8067
8108
|
}), act.label))))));
|
8068
8109
|
};
|
8069
|
-
var SelectBase = (props) => /* @__PURE__ */
|
8110
|
+
var SelectBase = (props) => /* @__PURE__ */ import_react83.default.createElement(_SelectBase, __spreadProps(__spreadValues({}, props), {
|
8070
8111
|
labelWrapper: void 0
|
8071
8112
|
}));
|
8072
|
-
var SelectBaseSkeleton = () => /* @__PURE__ */
|
8113
|
+
var SelectBaseSkeleton = () => /* @__PURE__ */ import_react83.default.createElement(Skeleton, {
|
8073
8114
|
height: 38
|
8074
8115
|
});
|
8075
8116
|
SelectBase.Skeleton = SelectBaseSkeleton;
|
@@ -8080,26 +8121,26 @@ var Select2 = (_a) => {
|
|
8080
8121
|
"options"
|
8081
8122
|
]);
|
8082
8123
|
var _a2;
|
8083
|
-
const id = (0,
|
8124
|
+
const id = (0, import_react83.useRef)((_a2 = props.id) != null ? _a2 : `select-${(0, import_uniqueId7.default)()}`);
|
8084
8125
|
const errorMessageId = (0, import_uniqueId7.default)();
|
8085
8126
|
const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
|
8086
8127
|
const labelProps = getLabelControlProps(props);
|
8087
8128
|
const baseProps = (0, import_omit14.default)(props, Object.keys(labelProps));
|
8088
8129
|
const legacyError = labelProps.error !== void 0 && labelProps.valid === false;
|
8089
8130
|
const variant = !labelProps.valid || legacyError ? "error" : labelProps.disabled ? "disabled" : "default";
|
8090
|
-
const label = /* @__PURE__ */
|
8131
|
+
const label = /* @__PURE__ */ import_react83.default.createElement(Label, __spreadValues({
|
8091
8132
|
id: `${id.current}-label`,
|
8092
8133
|
htmlFor: `${id.current}-input`,
|
8093
8134
|
variant,
|
8094
8135
|
messageId: errorMessageId
|
8095
8136
|
}, labelProps));
|
8096
|
-
return /* @__PURE__ */
|
8137
|
+
return /* @__PURE__ */ import_react83.default.createElement(FormControl, null, /* @__PURE__ */ import_react83.default.createElement(_SelectBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
|
8097
8138
|
id: `${id.current}-input`,
|
8098
8139
|
options,
|
8099
8140
|
disabled: props.disabled,
|
8100
8141
|
valid: props.valid,
|
8101
8142
|
labelWrapper: label
|
8102
|
-
})), /* @__PURE__ */
|
8143
|
+
})), /* @__PURE__ */ import_react83.default.createElement(HelperText, {
|
8103
8144
|
messageId: errorMessageId,
|
8104
8145
|
error: !labelProps.valid,
|
8105
8146
|
helperText: labelProps.helperText,
|
@@ -8108,7 +8149,7 @@ var Select2 = (_a) => {
|
|
8108
8149
|
reserveSpaceForError: labelProps.reserveSpaceForError
|
8109
8150
|
}));
|
8110
8151
|
};
|
8111
|
-
var SelectSkeleton = () => /* @__PURE__ */
|
8152
|
+
var SelectSkeleton = () => /* @__PURE__ */ import_react83.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react83.default.createElement(SelectBase.Skeleton, null));
|
8112
8153
|
Select2.Skeleton = SelectSkeleton;
|
8113
8154
|
Select2.Skeleton.displayName = "Select.Skeleton";
|
8114
8155
|
|
@@ -8127,23 +8168,23 @@ var Pagination = ({
|
|
8127
8168
|
pageSizes,
|
8128
8169
|
onPageSizeChange
|
8129
8170
|
}) => {
|
8130
|
-
const [value, setValue] =
|
8131
|
-
|
8171
|
+
const [value, setValue] = import_react84.default.useState(currentPage);
|
8172
|
+
import_react84.default.useEffect(() => {
|
8132
8173
|
setValue(currentPage);
|
8133
8174
|
}, [currentPage]);
|
8134
|
-
return /* @__PURE__ */
|
8175
|
+
return /* @__PURE__ */ import_react84.default.createElement(Box, {
|
8135
8176
|
className: tw("grid grid-cols-[200px_1fr_200px]"),
|
8136
8177
|
backgroundColor: "grey-0",
|
8137
8178
|
padding: "4"
|
8138
|
-
}, pageSizes && onPageSizeChange && typeof pageSize === "number" ? /* @__PURE__ */
|
8179
|
+
}, pageSizes && onPageSizeChange && typeof pageSize === "number" ? /* @__PURE__ */ import_react84.default.createElement(Box, {
|
8139
8180
|
display: "flex",
|
8140
8181
|
alignItems: "center",
|
8141
8182
|
gap: "4"
|
8142
|
-
}, /* @__PURE__ */
|
8183
|
+
}, /* @__PURE__ */ import_react84.default.createElement(Typography2.Small, {
|
8143
8184
|
color: "grey-50"
|
8144
|
-
}, "Items per page "), /* @__PURE__ */
|
8185
|
+
}, "Items per page "), /* @__PURE__ */ import_react84.default.createElement("div", {
|
8145
8186
|
className: tw("max-w-[70px]")
|
8146
|
-
}, /* @__PURE__ */
|
8187
|
+
}, /* @__PURE__ */ import_react84.default.createElement(SelectBase, {
|
8147
8188
|
options: pageSizes.map((size) => size.toString()),
|
8148
8189
|
value: pageSize.toString(),
|
8149
8190
|
onChange: (size) => {
|
@@ -8154,26 +8195,26 @@ var Pagination = ({
|
|
8154
8195
|
}
|
8155
8196
|
}
|
8156
8197
|
}
|
8157
|
-
}))) : /* @__PURE__ */
|
8198
|
+
}))) : /* @__PURE__ */ import_react84.default.createElement("div", null), /* @__PURE__ */ import_react84.default.createElement(Box, {
|
8158
8199
|
display: "flex",
|
8159
8200
|
justifyContent: "center",
|
8160
8201
|
alignItems: "center",
|
8161
8202
|
className: tw("grow")
|
8162
|
-
}, /* @__PURE__ */
|
8203
|
+
}, /* @__PURE__ */ import_react84.default.createElement(IconButton, {
|
8163
8204
|
"aria-label": "First",
|
8164
8205
|
onClick: () => onPageChange(1),
|
8165
8206
|
icon: import_chevronBackward.default,
|
8166
8207
|
disabled: !hasPreviousPage
|
8167
|
-
}), /* @__PURE__ */
|
8208
|
+
}), /* @__PURE__ */ import_react84.default.createElement(IconButton, {
|
8168
8209
|
"aria-label": "Previous",
|
8169
8210
|
onClick: () => onPageChange(currentPage - 1),
|
8170
8211
|
icon: import_chevronLeft3.default,
|
8171
8212
|
disabled: !hasPreviousPage
|
8172
|
-
}), /* @__PURE__ */
|
8213
|
+
}), /* @__PURE__ */ import_react84.default.createElement(Box, {
|
8173
8214
|
paddingX: "4"
|
8174
|
-
}, /* @__PURE__ */
|
8215
|
+
}, /* @__PURE__ */ import_react84.default.createElement(Typography2.Small, {
|
8175
8216
|
color: "grey-60"
|
8176
|
-
}, "Page")), /* @__PURE__ */
|
8217
|
+
}, "Page")), /* @__PURE__ */ import_react84.default.createElement(InputBase, {
|
8177
8218
|
className: classNames(tw("text-center max-w-[40px]"), "no-arrows"),
|
8178
8219
|
type: "number",
|
8179
8220
|
min: 1,
|
@@ -8190,45 +8231,45 @@ var Pagination = ({
|
|
8190
8231
|
const newPage = !isNaN(numberValue) ? (0, import_clamp.default)(numberValue, 1, totalPages) : 1;
|
8191
8232
|
onPageChange(newPage);
|
8192
8233
|
}
|
8193
|
-
}), /* @__PURE__ */
|
8234
|
+
}), /* @__PURE__ */ import_react84.default.createElement(Box, {
|
8194
8235
|
paddingX: "4"
|
8195
|
-
}, /* @__PURE__ */
|
8236
|
+
}, /* @__PURE__ */ import_react84.default.createElement(Typography2.Small, {
|
8196
8237
|
color: "grey-60"
|
8197
|
-
}, "of ", totalPages)), /* @__PURE__ */
|
8238
|
+
}, "of ", totalPages)), /* @__PURE__ */ import_react84.default.createElement(IconButton, {
|
8198
8239
|
"aria-label": "Next",
|
8199
8240
|
onClick: () => onPageChange(currentPage + 1),
|
8200
8241
|
icon: import_chevronRight3.default,
|
8201
8242
|
disabled: !hasNextPage
|
8202
|
-
}), /* @__PURE__ */
|
8243
|
+
}), /* @__PURE__ */ import_react84.default.createElement(IconButton, {
|
8203
8244
|
"aria-label": "Last",
|
8204
8245
|
onClick: () => onPageChange(totalPages),
|
8205
8246
|
icon: import_chevronForward.default,
|
8206
8247
|
disabled: !hasNextPage
|
8207
|
-
})), /* @__PURE__ */
|
8248
|
+
})), /* @__PURE__ */ import_react84.default.createElement("div", null));
|
8208
8249
|
};
|
8209
8250
|
|
8210
8251
|
// src/molecules/PopoverDialog/PopoverDialog.tsx
|
8211
|
-
var
|
8252
|
+
var import_react86 = __toESM(require("react"));
|
8212
8253
|
var import_omit15 = __toESM(require("lodash/omit"));
|
8213
8254
|
|
8214
8255
|
// src/atoms/PopoverDialog/PopoverDialog.tsx
|
8215
|
-
var
|
8256
|
+
var import_react85 = __toESM(require("react"));
|
8216
8257
|
var Header = (_a) => {
|
8217
8258
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
8218
|
-
return /* @__PURE__ */
|
8259
|
+
return /* @__PURE__ */ import_react85.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8219
8260
|
className: classNames(tw("p-5 gap-3 flex items-center"), className)
|
8220
8261
|
}), children);
|
8221
8262
|
};
|
8222
8263
|
var Title = (_a) => {
|
8223
8264
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
8224
|
-
return /* @__PURE__ */
|
8265
|
+
return /* @__PURE__ */ import_react85.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
|
8225
8266
|
htmlTag: "h1",
|
8226
8267
|
variant: "small-strong"
|
8227
8268
|
}), children);
|
8228
8269
|
};
|
8229
8270
|
var Body = (_a) => {
|
8230
8271
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
8231
|
-
return /* @__PURE__ */
|
8272
|
+
return /* @__PURE__ */ import_react85.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
|
8232
8273
|
htmlTag: "div",
|
8233
8274
|
variant: "caption",
|
8234
8275
|
className: classNames(tw("px-5 overflow-y-auto"), className)
|
@@ -8236,13 +8277,13 @@ var Body = (_a) => {
|
|
8236
8277
|
};
|
8237
8278
|
var Footer = (_a) => {
|
8238
8279
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
8239
|
-
return /* @__PURE__ */
|
8280
|
+
return /* @__PURE__ */ import_react85.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8240
8281
|
className: classNames(tw("p-5"), className)
|
8241
8282
|
}), children);
|
8242
8283
|
};
|
8243
8284
|
var Actions2 = (_a) => {
|
8244
8285
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
8245
|
-
return /* @__PURE__ */
|
8286
|
+
return /* @__PURE__ */ import_react85.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8246
8287
|
className: classNames(tw("flex gap-4"), className)
|
8247
8288
|
}), children);
|
8248
8289
|
};
|
@@ -8258,13 +8299,13 @@ var PopoverDialog = {
|
|
8258
8299
|
var PopoverDialog2 = ({ placement, open, title, secondaryAction, primaryAction, children }) => {
|
8259
8300
|
const wrapPromptWithBody = (child) => {
|
8260
8301
|
if (isComponentType(child, PopoverDialog2.Prompt)) {
|
8261
|
-
return /* @__PURE__ */
|
8302
|
+
return /* @__PURE__ */ import_react86.default.createElement(Popover2.Panel, {
|
8262
8303
|
className: tw("max-w-[300px]")
|
8263
|
-
}, /* @__PURE__ */
|
8304
|
+
}, /* @__PURE__ */ import_react86.default.createElement(PopoverDialog.Header, null, /* @__PURE__ */ import_react86.default.createElement(PopoverDialog.Title, null, title)), child, /* @__PURE__ */ import_react86.default.createElement(PopoverDialog.Footer, null, /* @__PURE__ */ import_react86.default.createElement(PopoverDialog.Actions, null, secondaryAction && /* @__PURE__ */ import_react86.default.createElement(Popover2.Button, __spreadValues({
|
8264
8305
|
kind: "secondary-ghost",
|
8265
8306
|
key: secondaryAction.text,
|
8266
8307
|
dense: true
|
8267
|
-
}, (0, import_omit15.default)(secondaryAction, "text")), secondaryAction.text), /* @__PURE__ */
|
8308
|
+
}, (0, import_omit15.default)(secondaryAction, "text")), secondaryAction.text), /* @__PURE__ */ import_react86.default.createElement(Popover2.Button, __spreadValues({
|
8268
8309
|
kind: "ghost",
|
8269
8310
|
key: primaryAction.text,
|
8270
8311
|
dense: true
|
@@ -8272,18 +8313,15 @@ var PopoverDialog2 = ({ placement, open, title, secondaryAction, primaryAction,
|
|
8272
8313
|
}
|
8273
8314
|
return child;
|
8274
8315
|
};
|
8275
|
-
return /* @__PURE__ */
|
8316
|
+
return /* @__PURE__ */ import_react86.default.createElement(Popover2, {
|
8276
8317
|
type: "dialog",
|
8277
8318
|
isOpen: open,
|
8278
8319
|
placement,
|
8279
|
-
isDismissable: true,
|
8280
|
-
isKeyboardDismissDisabled: false,
|
8281
|
-
autoFocus: true,
|
8282
8320
|
containFocus: true
|
8283
|
-
},
|
8321
|
+
}, import_react86.default.Children.map(children, wrapPromptWithBody));
|
8284
8322
|
};
|
8285
8323
|
PopoverDialog2.Trigger = Popover2.Trigger;
|
8286
|
-
var Prompt = ({ children }) => /* @__PURE__ */
|
8324
|
+
var Prompt = ({ children }) => /* @__PURE__ */ import_react86.default.createElement(PopoverDialog.Body, null, children);
|
8287
8325
|
Prompt.displayName = "PopoverDialog.Prompt";
|
8288
8326
|
PopoverDialog2.Prompt = Prompt;
|
8289
8327
|
|
@@ -8292,14 +8330,14 @@ var import_react_dom = require("react-dom");
|
|
8292
8330
|
var Portal = ({ children, to }) => (0, import_react_dom.createPortal)(children, to);
|
8293
8331
|
|
8294
8332
|
// src/molecules/ProgressBar/ProgressBar.tsx
|
8295
|
-
var
|
8333
|
+
var import_react88 = __toESM(require("react"));
|
8296
8334
|
|
8297
8335
|
// src/atoms/ProgressBar/ProgressBar.tsx
|
8298
|
-
var
|
8336
|
+
var import_react87 = __toESM(require("react"));
|
8299
8337
|
var import_clamp2 = __toESM(require("lodash/clamp"));
|
8300
8338
|
var ProgressBar = (_a) => {
|
8301
8339
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
8302
|
-
return /* @__PURE__ */
|
8340
|
+
return /* @__PURE__ */ import_react87.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8303
8341
|
className: classNames(
|
8304
8342
|
tw("relative flex items-center w-full bg-grey-0 h-2 rounded-full overflow-hidden"),
|
8305
8343
|
className
|
@@ -8315,7 +8353,7 @@ var STATUS_COLORS = {
|
|
8315
8353
|
ProgressBar.Indicator = (_a) => {
|
8316
8354
|
var _b = _a, { min, max, value, "aria-label": ariaLabel, status, className } = _b, rest = __objRest(_b, ["min", "max", "value", "aria-label", "status", "className"]);
|
8317
8355
|
const completedPercentage = (0, import_clamp2.default)((value - min) / (max - min) * 100, 0, 100);
|
8318
|
-
return /* @__PURE__ */
|
8356
|
+
return /* @__PURE__ */ import_react87.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8319
8357
|
className: classNames(
|
8320
8358
|
tw("h-2 rounded-full transition-all ease-in-out delay-150"),
|
8321
8359
|
STATUS_COLORS[status],
|
@@ -8331,11 +8369,11 @@ ProgressBar.Indicator = (_a) => {
|
|
8331
8369
|
};
|
8332
8370
|
ProgressBar.Labels = (_a) => {
|
8333
8371
|
var _b = _a, { children, startLabel, endLabel, className } = _b, rest = __objRest(_b, ["children", "startLabel", "endLabel", "className"]);
|
8334
|
-
return /* @__PURE__ */
|
8372
|
+
return /* @__PURE__ */ import_react87.default.createElement("div", {
|
8335
8373
|
className: classNames(tw("flex flex-row"), className)
|
8336
|
-
}, /* @__PURE__ */
|
8374
|
+
}, /* @__PURE__ */ import_react87.default.createElement("span", __spreadProps(__spreadValues({}, rest), {
|
8337
8375
|
className: tw("grow text-grey-70 typography-caption")
|
8338
|
-
}), startLabel), /* @__PURE__ */
|
8376
|
+
}), startLabel), /* @__PURE__ */ import_react87.default.createElement("span", __spreadProps(__spreadValues({}, rest), {
|
8339
8377
|
className: tw("grow text-grey-70 typography-caption text-right")
|
8340
8378
|
}), endLabel));
|
8341
8379
|
};
|
@@ -8353,7 +8391,7 @@ var ProgressBar2 = (props) => {
|
|
8353
8391
|
if (min > max) {
|
8354
8392
|
throw new Error("`min` value provided to `ProgressBar` is greater than `max` value.");
|
8355
8393
|
}
|
8356
|
-
const progress = /* @__PURE__ */
|
8394
|
+
const progress = /* @__PURE__ */ import_react88.default.createElement(ProgressBar, null, /* @__PURE__ */ import_react88.default.createElement(ProgressBar.Indicator, {
|
8357
8395
|
status: value === max ? completedStatus : progresStatus,
|
8358
8396
|
min,
|
8359
8397
|
max,
|
@@ -8363,13 +8401,13 @@ var ProgressBar2 = (props) => {
|
|
8363
8401
|
if (props.dense) {
|
8364
8402
|
return progress;
|
8365
8403
|
}
|
8366
|
-
return /* @__PURE__ */
|
8404
|
+
return /* @__PURE__ */ import_react88.default.createElement("div", null, progress, /* @__PURE__ */ import_react88.default.createElement(ProgressBar.Labels, {
|
8367
8405
|
className: tw("py-2"),
|
8368
8406
|
startLabel: props.startLabel,
|
8369
8407
|
endLabel: props.endLabel
|
8370
8408
|
}));
|
8371
8409
|
};
|
8372
|
-
var ProgressBarSkeleton = () => /* @__PURE__ */
|
8410
|
+
var ProgressBarSkeleton = () => /* @__PURE__ */ import_react88.default.createElement(Skeleton, {
|
8373
8411
|
height: 4,
|
8374
8412
|
display: "block"
|
8375
8413
|
});
|
@@ -8377,13 +8415,13 @@ ProgressBar2.Skeleton = ProgressBarSkeleton;
|
|
8377
8415
|
ProgressBar2.Skeleton.displayName = "ProgressBar.Skeleton";
|
8378
8416
|
|
8379
8417
|
// src/molecules/RadioButton/RadioButton.tsx
|
8380
|
-
var
|
8381
|
-
var RadioButton2 =
|
8418
|
+
var import_react89 = __toESM(require("react"));
|
8419
|
+
var RadioButton2 = import_react89.default.forwardRef(
|
8382
8420
|
(_a, ref) => {
|
8383
8421
|
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"]);
|
8384
8422
|
var _a2;
|
8385
8423
|
const isChecked = (_a2 = props.checked) != null ? _a2 : props.defaultChecked;
|
8386
|
-
return !readOnly || isChecked ? /* @__PURE__ */
|
8424
|
+
return !readOnly || isChecked ? /* @__PURE__ */ import_react89.default.createElement(ControlLabel, {
|
8387
8425
|
htmlFor: id,
|
8388
8426
|
label: children,
|
8389
8427
|
"aria-label": ariaLabel,
|
@@ -8391,7 +8429,7 @@ var RadioButton2 = import_react88.default.forwardRef(
|
|
8391
8429
|
readOnly,
|
8392
8430
|
disabled,
|
8393
8431
|
style: { gap: "0 8px" }
|
8394
|
-
}, !readOnly && /* @__PURE__ */
|
8432
|
+
}, !readOnly && /* @__PURE__ */ import_react89.default.createElement(RadioButton, __spreadProps(__spreadValues({
|
8395
8433
|
id,
|
8396
8434
|
ref,
|
8397
8435
|
name
|
@@ -8402,12 +8440,12 @@ var RadioButton2 = import_react88.default.forwardRef(
|
|
8402
8440
|
}
|
8403
8441
|
);
|
8404
8442
|
RadioButton2.displayName = "RadioButton";
|
8405
|
-
var RadioButtonSkeleton = () => /* @__PURE__ */
|
8443
|
+
var RadioButtonSkeleton = () => /* @__PURE__ */ import_react89.default.createElement("div", {
|
8406
8444
|
className: tw("flex gap-3")
|
8407
|
-
}, /* @__PURE__ */
|
8445
|
+
}, /* @__PURE__ */ import_react89.default.createElement(Skeleton, {
|
8408
8446
|
height: 20,
|
8409
8447
|
width: 20
|
8410
|
-
}), /* @__PURE__ */
|
8448
|
+
}), /* @__PURE__ */ import_react89.default.createElement(Skeleton, {
|
8411
8449
|
height: 20,
|
8412
8450
|
width: 150
|
8413
8451
|
}));
|
@@ -8415,10 +8453,10 @@ RadioButton2.Skeleton = RadioButtonSkeleton;
|
|
8415
8453
|
RadioButton2.Skeleton.displayName = "RadioButton.Skeleton";
|
8416
8454
|
|
8417
8455
|
// src/molecules/RadioButtonGroup/RadioButtonGroup.tsx
|
8418
|
-
var
|
8456
|
+
var import_react90 = __toESM(require("react"));
|
8419
8457
|
var import_uniqueId8 = __toESM(require("lodash/uniqueId"));
|
8420
8458
|
var isRadioButton = (c) => {
|
8421
|
-
return
|
8459
|
+
return import_react90.default.isValidElement(c) && c.type === RadioButton2;
|
8422
8460
|
};
|
8423
8461
|
var RadioButtonGroup = (_a) => {
|
8424
8462
|
var _b = _a, {
|
@@ -8441,7 +8479,7 @@ var RadioButtonGroup = (_a) => {
|
|
8441
8479
|
"children"
|
8442
8480
|
]);
|
8443
8481
|
var _a2;
|
8444
|
-
const [value, setValue] =
|
8482
|
+
const [value, setValue] = import_react90.default.useState((_a2 = _value != null ? _value : defaultValue) != null ? _a2 : "");
|
8445
8483
|
const errorMessageId = (0, import_uniqueId8.default)();
|
8446
8484
|
const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
|
8447
8485
|
const labelControlProps = getLabelControlProps(props);
|
@@ -8452,14 +8490,14 @@ var RadioButtonGroup = (_a) => {
|
|
8452
8490
|
setValue(e.target.value);
|
8453
8491
|
onChange == null ? void 0 : onChange(e.target.value);
|
8454
8492
|
};
|
8455
|
-
const content =
|
8493
|
+
const content = import_react90.default.Children.map(children, (c) => {
|
8456
8494
|
var _a3, _b2, _c;
|
8457
8495
|
if (!isRadioButton(c)) {
|
8458
8496
|
return null;
|
8459
8497
|
}
|
8460
8498
|
const defaultChecked = defaultValue === void 0 ? void 0 : c.props.value === defaultValue;
|
8461
8499
|
const checked = value === void 0 ? void 0 : c.props.value === value;
|
8462
|
-
return
|
8500
|
+
return import_react90.default.cloneElement(c, {
|
8463
8501
|
name,
|
8464
8502
|
defaultChecked: (_a3 = c.props.defaultChecked) != null ? _a3 : defaultChecked,
|
8465
8503
|
checked: (_b2 = c.props.checked) != null ? _b2 : checked,
|
@@ -8468,11 +8506,11 @@ var RadioButtonGroup = (_a) => {
|
|
8468
8506
|
readOnly
|
8469
8507
|
});
|
8470
8508
|
});
|
8471
|
-
return /* @__PURE__ */
|
8509
|
+
return /* @__PURE__ */ import_react90.default.createElement(LabelControl, __spreadValues(__spreadValues({
|
8472
8510
|
fieldset: true
|
8473
|
-
}, labelControlProps), errorProps), cols && /* @__PURE__ */
|
8511
|
+
}, labelControlProps), errorProps), cols && /* @__PURE__ */ import_react90.default.createElement(InputGroup, {
|
8474
8512
|
cols
|
8475
|
-
}, content), !cols && /* @__PURE__ */
|
8513
|
+
}, content), !cols && /* @__PURE__ */ import_react90.default.createElement(Flexbox, {
|
8476
8514
|
direction,
|
8477
8515
|
alignItems: "flex-start",
|
8478
8516
|
colGap: "8",
|
@@ -8481,12 +8519,12 @@ var RadioButtonGroup = (_a) => {
|
|
8481
8519
|
}, content));
|
8482
8520
|
};
|
8483
8521
|
var RadioButtonGroupSkeleton = ({ direction = "row", options = 2 }) => {
|
8484
|
-
return /* @__PURE__ */
|
8522
|
+
return /* @__PURE__ */ import_react90.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react90.default.createElement("div", {
|
8485
8523
|
className: tw("flex flex-wrap", {
|
8486
8524
|
"flex-row gap-8": direction === "row",
|
8487
8525
|
"flex-col gap-2": direction === "column"
|
8488
8526
|
})
|
8489
|
-
}, Array.from({ length: options }).map((_, key) => /* @__PURE__ */
|
8527
|
+
}, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ import_react90.default.createElement(RadioButton2.Skeleton, {
|
8490
8528
|
key
|
8491
8529
|
}))));
|
8492
8530
|
};
|
@@ -8494,68 +8532,68 @@ RadioButtonGroup.Skeleton = RadioButtonGroupSkeleton;
|
|
8494
8532
|
RadioButtonGroup.Skeleton.displayName = "RadioButtonGroup.Skeleton";
|
8495
8533
|
|
8496
8534
|
// src/molecules/Section/Section.tsx
|
8497
|
-
var
|
8535
|
+
var import_react92 = __toESM(require("react"));
|
8498
8536
|
var import_castArray4 = __toESM(require("lodash/castArray"));
|
8499
8537
|
|
8500
8538
|
// src/atoms/Section/Section.tsx
|
8501
|
-
var
|
8539
|
+
var import_react91 = __toESM(require("react"));
|
8502
8540
|
var Section2 = (_a) => {
|
8503
8541
|
var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
|
8504
|
-
return /* @__PURE__ */
|
8542
|
+
return /* @__PURE__ */ import_react91.default.createElement(Box, __spreadValues({
|
8505
8543
|
borderColor: "grey-5",
|
8506
8544
|
borderWidth: "1px"
|
8507
8545
|
}, rest), children);
|
8508
8546
|
};
|
8509
8547
|
Section2.Header = (_a) => {
|
8510
8548
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
8511
|
-
return /* @__PURE__ */
|
8549
|
+
return /* @__PURE__ */ import_react91.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8512
8550
|
className: classNames(tw("px-6 py-5 flex gap-5 justify-between items-center"), className)
|
8513
8551
|
}), children);
|
8514
8552
|
};
|
8515
8553
|
Section2.TitleContainer = (_a) => {
|
8516
8554
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
8517
|
-
return /* @__PURE__ */
|
8555
|
+
return /* @__PURE__ */ import_react91.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8518
8556
|
className: classNames(tw("flex flex-col grow gap-2"), className)
|
8519
8557
|
}), children);
|
8520
8558
|
};
|
8521
8559
|
Section2.Title = (_a) => {
|
8522
8560
|
var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
|
8523
|
-
return /* @__PURE__ */
|
8561
|
+
return /* @__PURE__ */ import_react91.default.createElement(Typography2.Subheading, __spreadProps(__spreadValues({}, rest), {
|
8524
8562
|
color: "black"
|
8525
8563
|
}), children);
|
8526
8564
|
};
|
8527
8565
|
Section2.Subtitle = (_a) => {
|
8528
8566
|
var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
|
8529
|
-
return /* @__PURE__ */
|
8567
|
+
return /* @__PURE__ */ import_react91.default.createElement(Typography2.SmallText, __spreadProps(__spreadValues({}, rest), {
|
8530
8568
|
color: "grey-70"
|
8531
8569
|
}), children);
|
8532
8570
|
};
|
8533
8571
|
Section2.Actions = (_a) => {
|
8534
8572
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
8535
|
-
return /* @__PURE__ */
|
8573
|
+
return /* @__PURE__ */ import_react91.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8536
8574
|
className: classNames(tw("flex gap-4 justify-end"), className)
|
8537
8575
|
}), children);
|
8538
8576
|
};
|
8539
8577
|
Section2.Body = (_a) => {
|
8540
8578
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
8541
|
-
return /* @__PURE__ */
|
8579
|
+
return /* @__PURE__ */ import_react91.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8542
8580
|
className: classNames(tw("p-6"), className)
|
8543
|
-
}), /* @__PURE__ */
|
8581
|
+
}), /* @__PURE__ */ import_react91.default.createElement(Typography, {
|
8544
8582
|
htmlTag: "div",
|
8545
8583
|
color: "grey-70"
|
8546
8584
|
}, children));
|
8547
8585
|
};
|
8548
8586
|
|
8549
8587
|
// src/molecules/Section/Section.tsx
|
8550
|
-
var Section3 = ({ title, subtitle, actions, children }) => /* @__PURE__ */
|
8588
|
+
var Section3 = ({ title, subtitle, actions, children }) => /* @__PURE__ */ import_react92.default.createElement(Section2, null, title && /* @__PURE__ */ import_react92.default.createElement(import_react92.default.Fragment, null, /* @__PURE__ */ import_react92.default.createElement(Section2.Header, null, /* @__PURE__ */ import_react92.default.createElement(Section2.TitleContainer, null, /* @__PURE__ */ import_react92.default.createElement(Section2.Title, null, title), subtitle && /* @__PURE__ */ import_react92.default.createElement(Section2.Subtitle, null, subtitle)), /* @__PURE__ */ import_react92.default.createElement(Section2.Actions, null, actions && (0, import_castArray4.default)(actions).filter(Boolean).map((_a) => {
|
8551
8589
|
var _b = _a, { text } = _b, action = __objRest(_b, ["text"]);
|
8552
|
-
return /* @__PURE__ */
|
8590
|
+
return /* @__PURE__ */ import_react92.default.createElement(SecondaryButton, __spreadValues({
|
8553
8591
|
key: text
|
8554
8592
|
}, action), text);
|
8555
|
-
}))), /* @__PURE__ */
|
8593
|
+
}))), /* @__PURE__ */ import_react92.default.createElement(Divider2, null)), /* @__PURE__ */ import_react92.default.createElement(Section2.Body, null, children));
|
8556
8594
|
|
8557
8595
|
// src/molecules/SegmentedControl/SegmentedControl.tsx
|
8558
|
-
var
|
8596
|
+
var import_react93 = __toESM(require("react"));
|
8559
8597
|
var SegmentedControl = (_a) => {
|
8560
8598
|
var _b = _a, {
|
8561
8599
|
children,
|
@@ -8572,7 +8610,7 @@ var SegmentedControl = (_a) => {
|
|
8572
8610
|
"selected",
|
8573
8611
|
"className"
|
8574
8612
|
]);
|
8575
|
-
return /* @__PURE__ */
|
8613
|
+
return /* @__PURE__ */ import_react93.default.createElement("button", __spreadProps(__spreadValues({
|
8576
8614
|
type: "button"
|
8577
8615
|
}, rest), {
|
8578
8616
|
className: classNames(
|
@@ -8603,11 +8641,11 @@ var SegmentedControlGroup = (_a) => {
|
|
8603
8641
|
"border border-grey-20 text-grey-50": variant === "outlined",
|
8604
8642
|
"bg-grey-0": variant === "raised"
|
8605
8643
|
});
|
8606
|
-
return /* @__PURE__ */
|
8644
|
+
return /* @__PURE__ */ import_react93.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8607
8645
|
className: classNames(classes2, className)
|
8608
|
-
}),
|
8646
|
+
}), import_react93.default.Children.map(
|
8609
8647
|
children,
|
8610
|
-
(child) =>
|
8648
|
+
(child) => import_react93.default.cloneElement(child, {
|
8611
8649
|
dense,
|
8612
8650
|
variant,
|
8613
8651
|
onClick: () => onChange(child.props.value),
|
@@ -8645,10 +8683,10 @@ var getCommonClassNames = (dense, selected) => tw(
|
|
8645
8683
|
);
|
8646
8684
|
|
8647
8685
|
// src/molecules/Spacing/Spacing.tsx
|
8648
|
-
var
|
8686
|
+
var import_react94 = __toESM(require("react"));
|
8649
8687
|
var Spacing = (_a) => {
|
8650
8688
|
var _b = _a, { gap, row } = _b, rest = __objRest(_b, ["gap", "row"]);
|
8651
|
-
return /* @__PURE__ */
|
8689
|
+
return /* @__PURE__ */ import_react94.default.createElement(Box, __spreadProps(__spreadValues({}, rest), {
|
8652
8690
|
display: "flex",
|
8653
8691
|
flexDirection: row ? "row" : "column",
|
8654
8692
|
gap
|
@@ -8656,14 +8694,14 @@ var Spacing = (_a) => {
|
|
8656
8694
|
};
|
8657
8695
|
|
8658
8696
|
// src/molecules/Stepper/Stepper.tsx
|
8659
|
-
var
|
8697
|
+
var import_react96 = __toESM(require("react"));
|
8660
8698
|
|
8661
8699
|
// src/atoms/Stepper/Stepper.tsx
|
8662
|
-
var
|
8700
|
+
var import_react95 = __toESM(require("react"));
|
8663
8701
|
var import_tick5 = __toESM(require_tick());
|
8664
8702
|
var Stepper = (_a) => {
|
8665
8703
|
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
|
8666
|
-
return /* @__PURE__ */
|
8704
|
+
return /* @__PURE__ */ import_react95.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8667
8705
|
className: classNames(className)
|
8668
8706
|
}));
|
8669
8707
|
};
|
@@ -8677,7 +8715,7 @@ var ConnectorContainer = (_a) => {
|
|
8677
8715
|
"completed",
|
8678
8716
|
"dense"
|
8679
8717
|
]);
|
8680
|
-
return /* @__PURE__ */
|
8718
|
+
return /* @__PURE__ */ import_react95.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8681
8719
|
className: classNames(
|
8682
8720
|
tw("absolute w-full -left-1/2", {
|
8683
8721
|
"top-[3px] px-[14px]": Boolean(dense),
|
@@ -8689,7 +8727,7 @@ var ConnectorContainer = (_a) => {
|
|
8689
8727
|
};
|
8690
8728
|
var Connector = (_a) => {
|
8691
8729
|
var _b = _a, { children, className, completed, dense } = _b, rest = __objRest(_b, ["children", "className", "completed", "dense"]);
|
8692
|
-
return /* @__PURE__ */
|
8730
|
+
return /* @__PURE__ */ import_react95.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8693
8731
|
className: classNames(
|
8694
8732
|
tw("w-full", {
|
8695
8733
|
"bg-grey-20": !completed,
|
@@ -8703,7 +8741,7 @@ var Connector = (_a) => {
|
|
8703
8741
|
};
|
8704
8742
|
var Step = (_a) => {
|
8705
8743
|
var _b = _a, { className, state } = _b, rest = __objRest(_b, ["className", "state"]);
|
8706
|
-
return /* @__PURE__ */
|
8744
|
+
return /* @__PURE__ */ import_react95.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8707
8745
|
className: classNames(
|
8708
8746
|
tw("flex flex-col items-center text-grey-90 relative text-center", {
|
8709
8747
|
"text-grey-20": state === "inactive"
|
@@ -8724,13 +8762,13 @@ var getDenseClassNames = (state) => tw("h-[8px] w-[8px]", {
|
|
8724
8762
|
});
|
8725
8763
|
var Indicator = (_a) => {
|
8726
8764
|
var _b = _a, { children, className, state, dense } = _b, rest = __objRest(_b, ["children", "className", "state", "dense"]);
|
8727
|
-
return /* @__PURE__ */
|
8765
|
+
return /* @__PURE__ */ import_react95.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8728
8766
|
className: classNames(
|
8729
8767
|
tw("rounded-full flex justify-center items-center mx-2 mb-3"),
|
8730
8768
|
dense ? getDenseClassNames(state) : getClassNames(state),
|
8731
8769
|
className
|
8732
8770
|
)
|
8733
|
-
}), state === "completed" ? /* @__PURE__ */
|
8771
|
+
}), state === "completed" ? /* @__PURE__ */ import_react95.default.createElement(InlineIcon, {
|
8734
8772
|
icon: import_tick5.default
|
8735
8773
|
}) : dense ? null : children);
|
8736
8774
|
};
|
@@ -8741,25 +8779,25 @@ Stepper.ConnectorContainer = ConnectorContainer;
|
|
8741
8779
|
|
8742
8780
|
// src/molecules/Stepper/Stepper.tsx
|
8743
8781
|
var Stepper2 = ({ children, activeIndex, dense }) => {
|
8744
|
-
const steps =
|
8745
|
-
return /* @__PURE__ */
|
8782
|
+
const steps = import_react96.default.Children.count(children);
|
8783
|
+
return /* @__PURE__ */ import_react96.default.createElement(Stepper, {
|
8746
8784
|
role: "list"
|
8747
|
-
}, /* @__PURE__ */
|
8785
|
+
}, /* @__PURE__ */ import_react96.default.createElement(Template, {
|
8748
8786
|
columns: steps
|
8749
|
-
},
|
8787
|
+
}, import_react96.default.Children.map(children, (child, index) => {
|
8750
8788
|
if (!isComponentType(child, Step2)) {
|
8751
8789
|
return new Error("<Stepper> can only have <Stepper.Step> components as children");
|
8752
8790
|
} else {
|
8753
8791
|
const state = index > activeIndex ? "inactive" : index === activeIndex ? "active" : "completed";
|
8754
|
-
return /* @__PURE__ */
|
8792
|
+
return /* @__PURE__ */ import_react96.default.createElement(Stepper.Step, {
|
8755
8793
|
state,
|
8756
8794
|
"aria-current": state === "active" ? "step" : false,
|
8757
8795
|
role: "listitem"
|
8758
|
-
}, index > 0 && index <= steps && /* @__PURE__ */
|
8796
|
+
}, index > 0 && index <= steps && /* @__PURE__ */ import_react96.default.createElement(Stepper.ConnectorContainer, {
|
8759
8797
|
dense
|
8760
|
-
}, /* @__PURE__ */
|
8798
|
+
}, /* @__PURE__ */ import_react96.default.createElement(Stepper.ConnectorContainer.Connector, {
|
8761
8799
|
completed: state === "completed" || state === "active"
|
8762
|
-
})), /* @__PURE__ */
|
8800
|
+
})), /* @__PURE__ */ import_react96.default.createElement(Stepper.Step.Indicator, {
|
8763
8801
|
state,
|
8764
8802
|
dense
|
8765
8803
|
}, index + 1), child.props.children);
|
@@ -8771,16 +8809,16 @@ Step2.displayName = "Stepper.Step";
|
|
8771
8809
|
Stepper2.Step = Step2;
|
8772
8810
|
|
8773
8811
|
// src/molecules/Switch/Switch.tsx
|
8774
|
-
var
|
8812
|
+
var import_react98 = __toESM(require("react"));
|
8775
8813
|
|
8776
8814
|
// src/atoms/Switch/Switch.tsx
|
8777
|
-
var
|
8778
|
-
var Switch =
|
8815
|
+
var import_react97 = __toESM(require("react"));
|
8816
|
+
var Switch = import_react97.default.forwardRef(
|
8779
8817
|
(_a, ref) => {
|
8780
8818
|
var _b = _a, { id, children, name, disabled = false, readOnly = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly"]);
|
8781
|
-
return /* @__PURE__ */
|
8819
|
+
return /* @__PURE__ */ import_react97.default.createElement("span", {
|
8782
8820
|
className: tw("relative inline-flex justify-center items-center self-center group")
|
8783
|
-
}, /* @__PURE__ */
|
8821
|
+
}, /* @__PURE__ */ import_react97.default.createElement("input", __spreadProps(__spreadValues({
|
8784
8822
|
id,
|
8785
8823
|
ref,
|
8786
8824
|
type: "checkbox",
|
@@ -8799,7 +8837,7 @@ var Switch = import_react96.default.forwardRef(
|
|
8799
8837
|
),
|
8800
8838
|
readOnly,
|
8801
8839
|
disabled
|
8802
|
-
})), /* @__PURE__ */
|
8840
|
+
})), /* @__PURE__ */ import_react97.default.createElement("span", {
|
8803
8841
|
className: tw(
|
8804
8842
|
"pointer-events-none rounded-full absolute inline-block transition duration-300 h-4 w-4 transform peer-checked/switch:translate-x-5",
|
8805
8843
|
"bg-white peer-disabled/switch:bg-grey-0 left-2 peer-checked/switch:left-1",
|
@@ -8812,12 +8850,12 @@ var Switch = import_react96.default.forwardRef(
|
|
8812
8850
|
);
|
8813
8851
|
|
8814
8852
|
// src/molecules/Switch/Switch.tsx
|
8815
|
-
var Switch2 =
|
8853
|
+
var Switch2 = import_react98.default.forwardRef(
|
8816
8854
|
(_a, ref) => {
|
8817
8855
|
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"]);
|
8818
8856
|
var _a2;
|
8819
8857
|
const isChecked = (_a2 = props.checked) != null ? _a2 : props.defaultChecked;
|
8820
|
-
return !readOnly || isChecked ? /* @__PURE__ */
|
8858
|
+
return !readOnly || isChecked ? /* @__PURE__ */ import_react98.default.createElement(ControlLabel, {
|
8821
8859
|
htmlFor: id,
|
8822
8860
|
label: children,
|
8823
8861
|
"aria-label": ariaLabel,
|
@@ -8825,7 +8863,7 @@ var Switch2 = import_react97.default.forwardRef(
|
|
8825
8863
|
readOnly,
|
8826
8864
|
disabled,
|
8827
8865
|
style: { gap: "0 8px" }
|
8828
|
-
}, !readOnly && /* @__PURE__ */
|
8866
|
+
}, !readOnly && /* @__PURE__ */ import_react98.default.createElement(Switch, __spreadProps(__spreadValues({
|
8829
8867
|
id,
|
8830
8868
|
ref,
|
8831
8869
|
name
|
@@ -8836,12 +8874,12 @@ var Switch2 = import_react97.default.forwardRef(
|
|
8836
8874
|
}
|
8837
8875
|
);
|
8838
8876
|
Switch2.displayName = "Switch";
|
8839
|
-
var SwitchSkeleton = () => /* @__PURE__ */
|
8877
|
+
var SwitchSkeleton = () => /* @__PURE__ */ import_react98.default.createElement("div", {
|
8840
8878
|
className: tw("flex gap-3")
|
8841
|
-
}, /* @__PURE__ */
|
8879
|
+
}, /* @__PURE__ */ import_react98.default.createElement(Skeleton, {
|
8842
8880
|
height: 20,
|
8843
8881
|
width: 35
|
8844
|
-
}), /* @__PURE__ */
|
8882
|
+
}), /* @__PURE__ */ import_react98.default.createElement(Skeleton, {
|
8845
8883
|
height: 20,
|
8846
8884
|
width: 150
|
8847
8885
|
}));
|
@@ -8849,7 +8887,7 @@ Switch2.Skeleton = SwitchSkeleton;
|
|
8849
8887
|
Switch2.Skeleton.displayName = "Switch.Skeleton ";
|
8850
8888
|
|
8851
8889
|
// src/molecules/SwitchGroup/SwitchGroup.tsx
|
8852
|
-
var
|
8890
|
+
var import_react99 = __toESM(require("react"));
|
8853
8891
|
var import_uniqueId9 = __toESM(require("lodash/uniqueId"));
|
8854
8892
|
var SwitchGroup = (_a) => {
|
8855
8893
|
var _b = _a, {
|
@@ -8868,7 +8906,7 @@ var SwitchGroup = (_a) => {
|
|
8868
8906
|
"children"
|
8869
8907
|
]);
|
8870
8908
|
var _a2;
|
8871
|
-
const [selectedItems, setSelectedItems] = (0,
|
8909
|
+
const [selectedItems, setSelectedItems] = (0, import_react99.useState)((_a2 = value != null ? value : defaultValue) != null ? _a2 : []);
|
8872
8910
|
if (value !== void 0 && value !== selectedItems) {
|
8873
8911
|
setSelectedItems(value);
|
8874
8912
|
}
|
@@ -8881,11 +8919,11 @@ var SwitchGroup = (_a) => {
|
|
8881
8919
|
setSelectedItems(updated);
|
8882
8920
|
onChange == null ? void 0 : onChange(updated);
|
8883
8921
|
};
|
8884
|
-
return /* @__PURE__ */
|
8922
|
+
return /* @__PURE__ */ import_react99.default.createElement(LabelControl, __spreadValues(__spreadValues({
|
8885
8923
|
fieldset: true
|
8886
|
-
}, labelControlProps), errorProps), /* @__PURE__ */
|
8924
|
+
}, labelControlProps), errorProps), /* @__PURE__ */ import_react99.default.createElement(InputGroup, {
|
8887
8925
|
cols
|
8888
|
-
},
|
8926
|
+
}, import_react99.default.Children.map(children, (c) => {
|
8889
8927
|
var _a3, _b2, _c, _d;
|
8890
8928
|
if (!isComponentType(c, Switch2)) {
|
8891
8929
|
return null;
|
@@ -8893,7 +8931,7 @@ var SwitchGroup = (_a) => {
|
|
8893
8931
|
const str = (_a3 = c.props.value) == null ? void 0 : _a3.toString();
|
8894
8932
|
const defaultChecked = defaultValue === void 0 ? void 0 : str !== void 0 && defaultValue.includes(str);
|
8895
8933
|
const checked = value === void 0 ? void 0 : str !== void 0 && value.includes(str);
|
8896
|
-
return
|
8934
|
+
return import_react99.default.cloneElement(c, {
|
8897
8935
|
defaultChecked: (_b2 = c.props.defaultChecked) != null ? _b2 : defaultChecked,
|
8898
8936
|
checked: (_c = c.props.checked) != null ? _c : checked,
|
8899
8937
|
onChange: (_d = c.props.onChange) != null ? _d : handleChange,
|
@@ -8903,9 +8941,9 @@ var SwitchGroup = (_a) => {
|
|
8903
8941
|
})));
|
8904
8942
|
};
|
8905
8943
|
var SwitchGroupSkeleton = ({ options = 2 }) => {
|
8906
|
-
return /* @__PURE__ */
|
8944
|
+
return /* @__PURE__ */ import_react99.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react99.default.createElement("div", {
|
8907
8945
|
className: tw("flex flex-wrap flex-col gap-2")
|
8908
|
-
}, Array.from({ length: options }).map((_, key) => /* @__PURE__ */
|
8946
|
+
}, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ import_react99.default.createElement(Switch2.Skeleton, {
|
8909
8947
|
key
|
8910
8948
|
}))));
|
8911
8949
|
};
|
@@ -8913,10 +8951,10 @@ SwitchGroup.Skeleton = SwitchGroupSkeleton;
|
|
8913
8951
|
SwitchGroup.Skeleton.displayName = "SwitchGroup.Skeleton";
|
8914
8952
|
|
8915
8953
|
// src/molecules/TagLabel/TagLabel.tsx
|
8916
|
-
var
|
8954
|
+
var import_react100 = __toESM(require("react"));
|
8917
8955
|
var TagLabel = (_a) => {
|
8918
8956
|
var _b = _a, { title, dense = false } = _b, rest = __objRest(_b, ["title", "dense"]);
|
8919
|
-
return /* @__PURE__ */
|
8957
|
+
return /* @__PURE__ */ import_react100.default.createElement("span", __spreadProps(__spreadValues({}, rest), {
|
8920
8958
|
className: tw("rounded-full text-white bg-primary-70", {
|
8921
8959
|
"py-2 px-4 typography-caption": !dense,
|
8922
8960
|
"py-2 px-3 typography-caption-small": dense
|
@@ -8925,14 +8963,14 @@ var TagLabel = (_a) => {
|
|
8925
8963
|
};
|
8926
8964
|
|
8927
8965
|
// src/molecules/Textarea/Textarea.tsx
|
8928
|
-
var
|
8966
|
+
var import_react101 = __toESM(require("react"));
|
8929
8967
|
var import_omit16 = __toESM(require("lodash/omit"));
|
8930
8968
|
var import_toString2 = __toESM(require("lodash/toString"));
|
8931
8969
|
var import_uniqueId10 = __toESM(require("lodash/uniqueId"));
|
8932
|
-
var TextareaBase =
|
8970
|
+
var TextareaBase = import_react101.default.forwardRef(
|
8933
8971
|
(_a, ref) => {
|
8934
8972
|
var _b = _a, { readOnly = false, valid = true } = _b, props = __objRest(_b, ["readOnly", "valid"]);
|
8935
|
-
return /* @__PURE__ */
|
8973
|
+
return /* @__PURE__ */ import_react101.default.createElement("textarea", __spreadProps(__spreadValues({
|
8936
8974
|
ref
|
8937
8975
|
}, props), {
|
8938
8976
|
readOnly,
|
@@ -8940,23 +8978,23 @@ var TextareaBase = import_react100.default.forwardRef(
|
|
8940
8978
|
}));
|
8941
8979
|
}
|
8942
8980
|
);
|
8943
|
-
TextareaBase.Skeleton = () => /* @__PURE__ */
|
8981
|
+
TextareaBase.Skeleton = () => /* @__PURE__ */ import_react101.default.createElement(Skeleton, {
|
8944
8982
|
height: 58
|
8945
8983
|
});
|
8946
|
-
var Textarea =
|
8984
|
+
var Textarea = import_react101.default.forwardRef((props, ref) => {
|
8947
8985
|
var _a, _b, _c;
|
8948
|
-
const [value, setValue] = (0,
|
8949
|
-
const id = (0,
|
8986
|
+
const [value, setValue] = (0, import_react101.useState)((_b = (_a = props.value) != null ? _a : props.defaultValue) != null ? _b : "");
|
8987
|
+
const id = (0, import_react101.useRef)((_c = props.id) != null ? _c : `textarea-${(0, import_uniqueId10.default)()}`);
|
8950
8988
|
const errorMessageId = (0, import_uniqueId10.default)();
|
8951
8989
|
const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
|
8952
8990
|
const _d = getLabelControlProps(props), { "data-testid": dataTestId } = _d, labelControlProps = __objRest(_d, ["data-testid"]);
|
8953
8991
|
const baseProps = (0, import_omit16.default)(props, Object.keys(labelControlProps));
|
8954
|
-
return /* @__PURE__ */
|
8992
|
+
return /* @__PURE__ */ import_react101.default.createElement(LabelControl, __spreadValues({
|
8955
8993
|
id: `${id.current}-label`,
|
8956
8994
|
htmlFor: id.current,
|
8957
8995
|
messageId: errorMessageId,
|
8958
8996
|
length: value !== void 0 ? (0, import_toString2.default)(value).length : void 0
|
8959
|
-
}, labelControlProps), /* @__PURE__ */
|
8997
|
+
}, labelControlProps), /* @__PURE__ */ import_react101.default.createElement(TextareaBase, __spreadProps(__spreadValues(__spreadValues({
|
8960
8998
|
ref
|
8961
8999
|
}, baseProps), errorProps), {
|
8962
9000
|
id: id.current,
|
@@ -8973,48 +9011,48 @@ var Textarea = import_react100.default.forwardRef((props, ref) => {
|
|
8973
9011
|
})));
|
8974
9012
|
});
|
8975
9013
|
Textarea.displayName = "Textarea";
|
8976
|
-
var TextAreaSkeleton = () => /* @__PURE__ */
|
9014
|
+
var TextAreaSkeleton = () => /* @__PURE__ */ import_react101.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react101.default.createElement(TextareaBase.Skeleton, null));
|
8977
9015
|
Textarea.Skeleton = TextAreaSkeleton;
|
8978
9016
|
Textarea.Skeleton.displayName = "Textarea.Skeleton";
|
8979
9017
|
|
8980
9018
|
// src/molecules/Timeline/Timeline.tsx
|
8981
|
-
var
|
9019
|
+
var import_react103 = __toESM(require("react"));
|
8982
9020
|
|
8983
9021
|
// src/atoms/Timeline/Timeline.tsx
|
8984
|
-
var
|
9022
|
+
var import_react102 = __toESM(require("react"));
|
8985
9023
|
var Timeline = (_a) => {
|
8986
9024
|
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
|
8987
|
-
return /* @__PURE__ */
|
9025
|
+
return /* @__PURE__ */ import_react102.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8988
9026
|
className: classNames(tw("grid grid-cols-[16px_1fr] gap-x-4"), className)
|
8989
9027
|
}));
|
8990
9028
|
};
|
8991
9029
|
var Content2 = (_a) => {
|
8992
9030
|
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
|
8993
|
-
return /* @__PURE__ */
|
9031
|
+
return /* @__PURE__ */ import_react102.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8994
9032
|
className: classNames(tw("pb-6"), className)
|
8995
9033
|
}));
|
8996
9034
|
};
|
8997
9035
|
var Separator2 = (_a) => {
|
8998
9036
|
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
|
8999
|
-
return /* @__PURE__ */
|
9037
|
+
return /* @__PURE__ */ import_react102.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
9000
9038
|
className: classNames(tw("flex items-center justify-center h-5 w-5"), className)
|
9001
9039
|
}));
|
9002
9040
|
};
|
9003
9041
|
var LineContainer = (_a) => {
|
9004
9042
|
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
|
9005
|
-
return /* @__PURE__ */
|
9043
|
+
return /* @__PURE__ */ import_react102.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
9006
9044
|
className: classNames(tw("flex justify-center py-1"), className)
|
9007
9045
|
}));
|
9008
9046
|
};
|
9009
9047
|
var Line = (_a) => {
|
9010
9048
|
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
|
9011
|
-
return /* @__PURE__ */
|
9049
|
+
return /* @__PURE__ */ import_react102.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
9012
9050
|
className: classNames(tw("w-1 bg-grey-5 h-full justify-self-center"), className)
|
9013
9051
|
}));
|
9014
9052
|
};
|
9015
9053
|
var Dot = (_a) => {
|
9016
9054
|
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
|
9017
|
-
return /* @__PURE__ */
|
9055
|
+
return /* @__PURE__ */ import_react102.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
9018
9056
|
className: classNames(tw("bg-grey-30 h-[6px] w-[6px] rounded"), className)
|
9019
9057
|
}));
|
9020
9058
|
};
|
@@ -9029,52 +9067,52 @@ var import_error4 = __toESM(require_error());
|
|
9029
9067
|
var import_time = __toESM(require_time());
|
9030
9068
|
var import_warningSign4 = __toESM(require_warningSign());
|
9031
9069
|
var TimelineItem = () => null;
|
9032
|
-
var Timeline2 = ({ children }) => /* @__PURE__ */
|
9070
|
+
var Timeline2 = ({ children }) => /* @__PURE__ */ import_react103.default.createElement("div", null, import_react103.default.Children.map(children, (item) => {
|
9033
9071
|
if (!isComponentType(item, TimelineItem)) {
|
9034
9072
|
throw new Error("<Timeline> can only have <Timeline.Item> components as children");
|
9035
9073
|
} else {
|
9036
9074
|
const { props, key } = item;
|
9037
|
-
return /* @__PURE__ */
|
9075
|
+
return /* @__PURE__ */ import_react103.default.createElement(Timeline, {
|
9038
9076
|
key: key != null ? key : props.title
|
9039
|
-
}, /* @__PURE__ */
|
9077
|
+
}, /* @__PURE__ */ import_react103.default.createElement(Timeline.Separator, null, props.variant === "error" ? /* @__PURE__ */ import_react103.default.createElement(Icon, {
|
9040
9078
|
icon: import_error4.default,
|
9041
9079
|
color: "error-30"
|
9042
|
-
}) : props.variant === "warning" ? /* @__PURE__ */
|
9080
|
+
}) : props.variant === "warning" ? /* @__PURE__ */ import_react103.default.createElement(Icon, {
|
9043
9081
|
icon: import_warningSign4.default,
|
9044
9082
|
color: "warning-30"
|
9045
|
-
}) : props.variant === "info" ? /* @__PURE__ */
|
9083
|
+
}) : props.variant === "info" ? /* @__PURE__ */ import_react103.default.createElement(Icon, {
|
9046
9084
|
icon: import_time.default,
|
9047
9085
|
color: "info-30"
|
9048
|
-
}) : /* @__PURE__ */
|
9086
|
+
}) : /* @__PURE__ */ import_react103.default.createElement(Timeline.Separator.Dot, null)), /* @__PURE__ */ import_react103.default.createElement(Typography2.Caption, {
|
9049
9087
|
color: "grey-50"
|
9050
|
-
}, props.title), /* @__PURE__ */
|
9088
|
+
}, props.title), /* @__PURE__ */ import_react103.default.createElement(Timeline.LineContainer, null, /* @__PURE__ */ import_react103.default.createElement(Timeline.LineContainer.Line, null)), /* @__PURE__ */ import_react103.default.createElement(Timeline.Content, null, /* @__PURE__ */ import_react103.default.createElement(Typography2.Small, null, props.children)));
|
9051
9089
|
}
|
9052
9090
|
}));
|
9053
|
-
var TimelineItemSkeleton = () => /* @__PURE__ */
|
9091
|
+
var TimelineItemSkeleton = () => /* @__PURE__ */ import_react103.default.createElement(Timeline, null, /* @__PURE__ */ import_react103.default.createElement(Timeline.Separator, null, /* @__PURE__ */ import_react103.default.createElement(Skeleton, {
|
9054
9092
|
width: 6,
|
9055
9093
|
height: 6,
|
9056
9094
|
rounded: true
|
9057
|
-
})), /* @__PURE__ */
|
9095
|
+
})), /* @__PURE__ */ import_react103.default.createElement(Skeleton, {
|
9058
9096
|
height: 12,
|
9059
9097
|
width: 120
|
9060
|
-
}), /* @__PURE__ */
|
9098
|
+
}), /* @__PURE__ */ import_react103.default.createElement(Timeline.LineContainer, null, /* @__PURE__ */ import_react103.default.createElement(Skeleton, {
|
9061
9099
|
width: 2,
|
9062
9100
|
height: "100%"
|
9063
|
-
})), /* @__PURE__ */
|
9101
|
+
})), /* @__PURE__ */ import_react103.default.createElement(Timeline.Content, null, /* @__PURE__ */ import_react103.default.createElement(Box, {
|
9064
9102
|
display: "flex",
|
9065
9103
|
flexDirection: "column",
|
9066
9104
|
gap: "3"
|
9067
|
-
}, /* @__PURE__ */
|
9105
|
+
}, /* @__PURE__ */ import_react103.default.createElement(Skeleton, {
|
9068
9106
|
height: 32,
|
9069
9107
|
width: "100%"
|
9070
|
-
}), /* @__PURE__ */
|
9108
|
+
}), /* @__PURE__ */ import_react103.default.createElement(Skeleton, {
|
9071
9109
|
height: 32,
|
9072
9110
|
width: "73%"
|
9073
|
-
}), /* @__PURE__ */
|
9111
|
+
}), /* @__PURE__ */ import_react103.default.createElement(Skeleton, {
|
9074
9112
|
height: 32,
|
9075
9113
|
width: "80%"
|
9076
9114
|
}))));
|
9077
|
-
var TimelineSkeleton = ({ items = 3 }) => /* @__PURE__ */
|
9115
|
+
var TimelineSkeleton = ({ items = 3 }) => /* @__PURE__ */ import_react103.default.createElement("div", null, Array.from({ length: items }).map((_, key) => /* @__PURE__ */ import_react103.default.createElement(TimelineItemSkeleton, {
|
9078
9116
|
key
|
9079
9117
|
})));
|
9080
9118
|
Timeline2.Item = TimelineItem;
|
@@ -9082,9 +9120,9 @@ Timeline2.Skeleton = TimelineSkeleton;
|
|
9082
9120
|
Timeline2.Skeleton.displayName = "Timeline.Skeleton";
|
9083
9121
|
|
9084
9122
|
// src/utils/table/useTableSelect.ts
|
9085
|
-
var
|
9123
|
+
var import_react104 = __toESM(require("react"));
|
9086
9124
|
var useTableSelect = (data, { key }) => {
|
9087
|
-
const [selected, setSelected] =
|
9125
|
+
const [selected, setSelected] = import_react104.default.useState([]);
|
9088
9126
|
const allSelected = selected.length === data.length;
|
9089
9127
|
const isSelected = (dot) => selected.includes(dot[key]);
|
9090
9128
|
const selectAll = () => setSelected(data.map((dot) => dot[key]));
|
@@ -9109,7 +9147,7 @@ var useTableSelect = (data, { key }) => {
|
|
9109
9147
|
};
|
9110
9148
|
|
9111
9149
|
// src/molecules/Pagination/usePagination.tsx
|
9112
|
-
var
|
9150
|
+
var import_react105 = require("react");
|
9113
9151
|
var import_clamp3 = __toESM(require("lodash/clamp"));
|
9114
9152
|
var initialState = {
|
9115
9153
|
currentPage: 1,
|
@@ -9117,8 +9155,8 @@ var initialState = {
|
|
9117
9155
|
};
|
9118
9156
|
var getPageIndex = (currentPage, pageSize) => currentPage === 0 ? 0 : (currentPage - 1) * pageSize;
|
9119
9157
|
var usePagination = (items, options) => {
|
9120
|
-
const [currentPage, setCurrentPage] = (0,
|
9121
|
-
const [pageSize, setPageSize] = (0,
|
9158
|
+
const [currentPage, setCurrentPage] = (0, import_react105.useState)((options == null ? void 0 : options.initialPage) || initialState.currentPage);
|
9159
|
+
const [pageSize, setPageSize] = (0, import_react105.useState)((options == null ? void 0 : options.initialPageSize) || initialState.pageSize);
|
9122
9160
|
const totalPages = items.length > 0 ? Math.ceil(items.length / pageSize) : 1;
|
9123
9161
|
const hasPreviousPage = currentPage > 1;
|
9124
9162
|
const hasNextPage = currentPage < totalPages;
|
@@ -9128,7 +9166,7 @@ var usePagination = (items, options) => {
|
|
9128
9166
|
setPageSize(pageSize2);
|
9129
9167
|
setCurrentPage((0, import_clamp3.default)((options == null ? void 0 : options.initialPage) || initialState.currentPage, 1, newTotalPages));
|
9130
9168
|
};
|
9131
|
-
(0,
|
9169
|
+
(0, import_react105.useEffect)(() => {
|
9132
9170
|
setCurrentPage((0, import_clamp3.default)((options == null ? void 0 : options.initialPage) || initialState.currentPage, 1, totalPages));
|
9133
9171
|
}, [items.length]);
|
9134
9172
|
return [
|
@@ -9385,6 +9423,7 @@ var system_default = __spreadProps(__spreadValues({}, molecules_exports), {
|
|
9385
9423
|
calcTopPosition,
|
9386
9424
|
calcTopRightPosition,
|
9387
9425
|
cellProps,
|
9426
|
+
columnIsFieldColumn,
|
9388
9427
|
createComponent,
|
9389
9428
|
createMountPointElement,
|
9390
9429
|
createSimpleComponent,
|