@aivenio/aquarium 1.7.0 → 1.8.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 +109 -94
- package/dist/atoms.mjs +108 -94
- package/dist/src/common/Link/Link.d.ts +3 -0
- package/dist/src/common/Link/Link.js +19 -0
- package/dist/src/common/Popover/Popover.js +2 -2
- package/dist/src/common/index.d.ts +1 -0
- package/dist/src/common/index.js +2 -1
- package/dist/src/components/Avatar/Avatar.js +2 -1
- package/dist/src/components/Badge/Badge.js +2 -1
- package/dist/src/components/Button/Button.js +3 -2
- package/dist/src/components/Checkbox/Checkbox.js +3 -1
- package/dist/src/components/CheckboxGroup/CheckboxGroup.js +2 -1
- package/dist/src/components/Chip/Chip.js +2 -1
- package/dist/src/components/Combobox/Combobox.d.ts +1 -1
- package/dist/src/components/Combobox/Combobox.js +6 -4
- package/dist/src/components/DropdownMenu/DropdownMenu.js +5 -1
- package/dist/src/components/Link/Link.d.ts +5 -0
- package/dist/src/components/Link/Link.js +4 -0
- package/dist/src/components/NativeSelect/NativeSelect.js +3 -1
- package/dist/src/components/ProgressBar/ProgressBar.js +4 -2
- package/dist/src/components/RadioButton/RadioButton.js +3 -1
- package/dist/src/components/RadioButtonGroup/RadioButtonGroup.js +2 -1
- package/dist/src/components/Select/Select.js +2 -1
- package/dist/src/components/Stepper/Stepper.js +2 -1
- package/dist/src/components/Switch/Switch.js +3 -1
- package/dist/src/components/SwitchGroup/SwitchGroup.js +2 -1
- package/dist/src/components/Textarea/Textarea.js +3 -1
- package/dist/src/components/Timeline/Timeline.js +2 -1
- package/dist/src/components/index.d.ts +1 -0
- package/dist/src/components/index.js +2 -1
- package/dist/src/utils/constants.d.ts +2 -0
- package/dist/src/utils/constants.js +4 -2
- package/dist/src/utils/form/HelperText/HelperText.js +2 -1
- package/dist/styles.css +19 -16
- package/dist/styles_timescaledb.css +19 -16
- package/dist/system.cjs +370 -322
- package/dist/system.mjs +337 -290
- package/dist/tailwind.config.js +1 -1
- package/dist/tsconfig.module.tsbuildinfo +1 -1
- package/dist/types/tailwindGenerated.d.ts +1 -1
- package/package.json +1 -1
package/dist/system.cjs
CHANGED
@@ -1591,6 +1591,7 @@ __export(system_exports, {
|
|
1591
1591
|
Label: () => Label,
|
1592
1592
|
LabelControl: () => LabelControl,
|
1593
1593
|
LineClamp: () => LineClamp,
|
1594
|
+
Link: () => Link2,
|
1594
1595
|
List: () => List,
|
1595
1596
|
ListItem: () => ListItem,
|
1596
1597
|
Modal: () => Modal2,
|
@@ -1725,6 +1726,7 @@ __export(components_exports, {
|
|
1725
1726
|
Input: () => Input2,
|
1726
1727
|
InputBase: () => InputBase,
|
1727
1728
|
LineClamp: () => LineClamp,
|
1729
|
+
Link: () => Link2,
|
1728
1730
|
List: () => List,
|
1729
1731
|
ListItem: () => ListItem,
|
1730
1732
|
Modal: () => Modal2,
|
@@ -3070,6 +3072,21 @@ var Arrow = (props) => {
|
|
3070
3072
|
}, props));
|
3071
3073
|
};
|
3072
3074
|
|
3075
|
+
// src/utils/constants.ts
|
3076
|
+
var getCommonInputStyles = ({ readOnly, valid }) => tw(
|
3077
|
+
"block w-full rounded-sm disabled:cursor-not-allowed disabled:border-grey-20 disabled:bg-grey-5 typography-small text-grey-70 disabled:text-grey-40 placeholder:text-grey-40 focus:outline-none",
|
3078
|
+
{
|
3079
|
+
"px-3 py-3": !readOnly,
|
3080
|
+
"border-none resize-none cursor-default": readOnly,
|
3081
|
+
"border border-error-50": !valid && !readOnly,
|
3082
|
+
"border border-grey-20 hover:border-grey-50 focus:border-info-70": valid && !readOnly
|
3083
|
+
}
|
3084
|
+
);
|
3085
|
+
var ghostButtonStyle = tw(
|
3086
|
+
"text-primary-80 active:text-primary-70 focus-visible:text-grey-90 hover:text-primary-70 disabled:text-primary-40"
|
3087
|
+
);
|
3088
|
+
var linkStyle = classNames(ghostButtonStyle, tw("visited:text-primary-80"));
|
3089
|
+
|
3073
3090
|
// src/components/Button/Button.tsx
|
3074
3091
|
var import_chevronDown2 = __toESM(require_chevronDown());
|
3075
3092
|
var import_loading = __toESM(require_loading());
|
@@ -3082,9 +3099,7 @@ var COLOR_CLASSNAMES = {
|
|
3082
3099
|
"focus-visible:ring-2 focus-visible:ring-grey-50 focus-visible:text-grey-80",
|
3083
3100
|
"hover:ring-grey-50 hover:text-grey-80 disabled:text-grey-30 disabled:bg-grey-0 disabled:ring-grey-20"
|
3084
3101
|
),
|
3085
|
-
"ghost":
|
3086
|
-
"text-primary-80 active:text-primary-70 focus-visible:text-grey-90 hover:text-primary-70 disabled:text-primary-40"
|
3087
|
-
),
|
3102
|
+
"ghost": ghostButtonStyle,
|
3088
3103
|
"secondary-ghost": tw(
|
3089
3104
|
"text-grey-60 active:text-grey-50 focus-visible:text-grey-80 hover:text-grey-80 disabled:text-grey-30"
|
3090
3105
|
)
|
@@ -3635,6 +3650,7 @@ var AvatarSkeleton = () => /* @__PURE__ */ import_react19.default.createElement(
|
|
3635
3650
|
className: tw("rounded-full")
|
3636
3651
|
});
|
3637
3652
|
Avatar.Skeleton = AvatarSkeleton;
|
3653
|
+
Avatar.Skeleton.displayName = "Avatar.Skeleton";
|
3638
3654
|
|
3639
3655
|
// src/components/Badge/Badge.tsx
|
3640
3656
|
var import_react20 = __toESM(require("react"));
|
@@ -3675,6 +3691,7 @@ var createBadge = (type, displayName) => {
|
|
3675
3691
|
display: "inline-block",
|
3676
3692
|
className: tw(type === "tab" ? "rounded" : "rounded-full")
|
3677
3693
|
});
|
3694
|
+
Component.Skeleton.displayName = `${displayName}.Skeleton`;
|
3678
3695
|
return Component;
|
3679
3696
|
};
|
3680
3697
|
var Badge = createBadge("default", "Badge");
|
@@ -3969,6 +3986,7 @@ var ChipSkeleton = ({ dense = false, width = dense ? 34 : 56 }) => /* @__PURE__
|
|
3969
3986
|
height: dense ? 20 : 28
|
3970
3987
|
});
|
3971
3988
|
Chip2.Skeleton = ChipSkeleton;
|
3989
|
+
Chip2.Skeleton.displayName = "Chip.Skeleton";
|
3972
3990
|
var StatusChip = import_react26.default.forwardRef(
|
3973
3991
|
(_a, ref) => {
|
3974
3992
|
var _b = _a, { UNSAFE_icon: icon, text, dense = false, status } = _b, rest = __objRest(_b, ["UNSAFE_icon", "text", "dense", "status"]);
|
@@ -4564,6 +4582,7 @@ var Checkbox2 = import_react34.default.forwardRef(
|
|
4564
4582
|
}))) : null;
|
4565
4583
|
}
|
4566
4584
|
);
|
4585
|
+
Checkbox2.displayName = "Checkbox";
|
4567
4586
|
var CheckboxSkeleton = () => /* @__PURE__ */ import_react34.default.createElement("div", {
|
4568
4587
|
className: tw("flex gap-3")
|
4569
4588
|
}, /* @__PURE__ */ import_react34.default.createElement(Skeleton, {
|
@@ -4574,6 +4593,7 @@ var CheckboxSkeleton = () => /* @__PURE__ */ import_react34.default.createElemen
|
|
4574
4593
|
width: 150
|
4575
4594
|
}));
|
4576
4595
|
Checkbox2.Skeleton = CheckboxSkeleton;
|
4596
|
+
Checkbox2.Skeleton.displayName = "Checkbox.Skeleton";
|
4577
4597
|
|
4578
4598
|
// src/components/CheckboxGroup/CheckboxGroup.tsx
|
4579
4599
|
var import_react41 = __toESM(require("react"));
|
@@ -4735,6 +4755,7 @@ var Skeleton2 = ({ className, children }) => /* @__PURE__ */ import_react39.defa
|
|
4735
4755
|
className: (0, import_classnames3.default)(className, "h-[25px]")
|
4736
4756
|
}, children);
|
4737
4757
|
HelperText.Skeleton = Skeleton2;
|
4758
|
+
HelperText.Skeleton.displayName = "HelperText.Skeleton";
|
4738
4759
|
|
4739
4760
|
// src/utils/form/Label/Label.tsx
|
4740
4761
|
var import_questionMark = __toESM(require_questionMark());
|
@@ -4920,6 +4941,7 @@ var CheckboxGroupSkeleton = ({ options = 2 }) => {
|
|
4920
4941
|
}))));
|
4921
4942
|
};
|
4922
4943
|
CheckboxGroup.Skeleton = CheckboxGroupSkeleton;
|
4944
|
+
CheckboxGroup.Skeleton.displayName = "CheckboxGroup.Skeleton";
|
4923
4945
|
|
4924
4946
|
// src/components/ChoiceChip/ChoiceChip.tsx
|
4925
4947
|
var import_react42 = __toESM(require("react"));
|
@@ -4973,7 +4995,7 @@ var PopoverPanel = import_react43.default.forwardRef((_a, ref) => {
|
|
4973
4995
|
className: classNames(
|
4974
4996
|
className,
|
4975
4997
|
tw(
|
4976
|
-
"rounded-sm shadow-16dp bg-white mt-1 focus-visible:outline-0 focus-visible:border-info-70 border border-grey-20
|
4998
|
+
"rounded-sm shadow-16dp bg-white mt-1 focus-visible:outline-0 focus-visible:border-info-70 border border-grey-20"
|
4977
4999
|
)
|
4978
5000
|
)
|
4979
5001
|
}, props), children);
|
@@ -5179,10 +5201,10 @@ var ComboboxBase = (_a) => {
|
|
5179
5201
|
highlighted: index === highlightedIndex
|
5180
5202
|
}, getItemProps({ item, index, disabled: isOptionDisabled(item, index) })), renderOption(item))))));
|
5181
5203
|
};
|
5182
|
-
var
|
5204
|
+
var ComboboxBaseSkeleton = () => /* @__PURE__ */ import_react45.default.createElement(Skeleton, {
|
5183
5205
|
height: 38
|
5184
5206
|
});
|
5185
|
-
ComboboxBase.Skeleton =
|
5207
|
+
ComboboxBase.Skeleton = ComboboxBaseSkeleton;
|
5186
5208
|
var Combobox = (_a) => {
|
5187
5209
|
var _b = _a, {
|
5188
5210
|
options,
|
@@ -5209,7 +5231,9 @@ var Combobox = (_a) => {
|
|
5209
5231
|
valid: props.valid
|
5210
5232
|
})));
|
5211
5233
|
};
|
5212
|
-
|
5234
|
+
var ComboboxSkeleton = () => /* @__PURE__ */ import_react45.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react45.default.createElement(ComboboxBase.Skeleton, null));
|
5235
|
+
Combobox.Skeleton = ComboboxSkeleton;
|
5236
|
+
Combobox.Skeleton.displayName = "Combobox.Skeleton";
|
5213
5237
|
|
5214
5238
|
// src/components/Container/Container.tsx
|
5215
5239
|
var import_react46 = __toESM(require("react"));
|
@@ -6095,17 +6119,6 @@ var import_omit7 = __toESM(require("lodash/omit"));
|
|
6095
6119
|
var import_toString = __toESM(require("lodash/toString"));
|
6096
6120
|
var import_uniqueId3 = __toESM(require("lodash/uniqueId"));
|
6097
6121
|
|
6098
|
-
// src/utils/constants.ts
|
6099
|
-
var getCommonInputStyles = ({ readOnly, valid }) => tw(
|
6100
|
-
"block w-full rounded-sm disabled:cursor-not-allowed disabled:border-grey-20 disabled:bg-grey-5 typography-small text-grey-70 disabled:text-grey-40 placeholder:text-grey-40 focus:outline-none",
|
6101
|
-
{
|
6102
|
-
"px-3 py-3": !readOnly,
|
6103
|
-
"border-none resize-none cursor-default": readOnly,
|
6104
|
-
"border border-error-50": !valid && !readOnly,
|
6105
|
-
"border border-grey-20 hover:border-grey-50 focus:border-info-70": valid && !readOnly
|
6106
|
-
}
|
6107
|
-
);
|
6108
|
-
|
6109
6122
|
// src/utils/form/InputAdornment/InputAdornment.tsx
|
6110
6123
|
var import_react62 = __toESM(require("react"));
|
6111
6124
|
var import_cross4 = __toESM(require_cross());
|
@@ -6410,9 +6423,13 @@ var DropdownMenu3 = (_a) => {
|
|
6410
6423
|
var MenuTrigger = () => null;
|
6411
6424
|
var MenuItems = () => null;
|
6412
6425
|
DropdownMenu3.Trigger = MenuTrigger;
|
6426
|
+
DropdownMenu3.Trigger.displayName = "DropdownMenu.Trigger";
|
6413
6427
|
DropdownMenu3.Items = MenuItems;
|
6428
|
+
DropdownMenu3.Items.displayName = "DropdownMenu.Items";
|
6414
6429
|
DropdownMenu3.Item = import_collections.Item;
|
6430
|
+
DropdownMenu3.Item.displayName = "DropdownMenu.Item";
|
6415
6431
|
DropdownMenu3.Section = import_collections.Section;
|
6432
|
+
DropdownMenu3.Section.displayName = "DropdownMenu.Section";
|
6416
6433
|
var TriggerWrapper = (_a) => {
|
6417
6434
|
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
6418
6435
|
const ref = import_react65.default.useRef(null);
|
@@ -6727,24 +6744,39 @@ var LineClamp = ({ lines, children, expandLabel, collapseLabel }) => {
|
|
6727
6744
|
}, clamped ? expandLabel : collapseLabel));
|
6728
6745
|
};
|
6729
6746
|
|
6730
|
-
// src/components/
|
6747
|
+
// src/components/Link/Link.tsx
|
6748
|
+
var import_react71 = __toESM(require("react"));
|
6749
|
+
|
6750
|
+
// src/common/Link/Link.tsx
|
6731
6751
|
var import_react70 = __toESM(require("react"));
|
6732
|
-
var
|
6752
|
+
var Link = (_a) => {
|
6753
|
+
var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
|
6754
|
+
return /* @__PURE__ */ import_react70.default.createElement("a", __spreadValues({
|
6755
|
+
className: classNames(className, linkStyle)
|
6756
|
+
}, props), children);
|
6757
|
+
};
|
6758
|
+
|
6759
|
+
// src/components/Link/Link.tsx
|
6760
|
+
var Link2 = (props) => /* @__PURE__ */ import_react71.default.createElement(Link, __spreadValues({}, props));
|
6761
|
+
|
6762
|
+
// src/components/List/List.tsx
|
6763
|
+
var import_react72 = __toESM(require("react"));
|
6764
|
+
var List = ({ items, renderItem, container = import_react72.default.Fragment }) => {
|
6733
6765
|
const Component = container;
|
6734
|
-
return /* @__PURE__ */
|
6766
|
+
return /* @__PURE__ */ import_react72.default.createElement(Component, null, items.map(renderItem));
|
6735
6767
|
};
|
6736
6768
|
|
6737
6769
|
// src/components/ListItem/ListItem.tsx
|
6738
|
-
var
|
6770
|
+
var import_react73 = __toESM(require("react"));
|
6739
6771
|
var ListItem = ({ name, icon, active = false }) => {
|
6740
|
-
return /* @__PURE__ */
|
6772
|
+
return /* @__PURE__ */ import_react73.default.createElement(Flexbox, {
|
6741
6773
|
alignItems: "center"
|
6742
|
-
}, /* @__PURE__ */
|
6774
|
+
}, /* @__PURE__ */ import_react73.default.createElement(Typography2, {
|
6743
6775
|
variant: active ? "small-strong" : "small",
|
6744
6776
|
color: "grey-70",
|
6745
6777
|
htmlTag: "span",
|
6746
6778
|
className: `px-4 py-2 rounded-full ${active ? "bg-grey-5" : "hover:bg-grey-0"}`
|
6747
|
-
}, /* @__PURE__ */
|
6779
|
+
}, /* @__PURE__ */ import_react73.default.createElement("img", {
|
6748
6780
|
src: icon,
|
6749
6781
|
alt: name,
|
6750
6782
|
className: "inline mr-4",
|
@@ -6754,7 +6786,7 @@ var ListItem = ({ name, icon, active = false }) => {
|
|
6754
6786
|
};
|
6755
6787
|
|
6756
6788
|
// src/components/Modal/Modal.tsx
|
6757
|
-
var
|
6789
|
+
var import_react75 = __toESM(require("react"));
|
6758
6790
|
var import_dialog2 = require("@react-aria/dialog");
|
6759
6791
|
var import_focus3 = require("@react-aria/focus");
|
6760
6792
|
var import_overlays11 = require("@react-aria/overlays");
|
@@ -6764,18 +6796,18 @@ var import_castArray = __toESM(require("lodash/castArray"));
|
|
6764
6796
|
var import_omit9 = __toESM(require("lodash/omit"));
|
6765
6797
|
|
6766
6798
|
// src/components/Tabs/Tabs.tsx
|
6767
|
-
var
|
6799
|
+
var import_react74 = __toESM(require("react"));
|
6768
6800
|
var import_isNumber4 = __toESM(require("lodash/isNumber"));
|
6769
6801
|
var import_kebabCase = __toESM(require("lodash/kebabCase"));
|
6770
6802
|
var import_chevronLeft2 = __toESM(require_chevronLeft());
|
6771
6803
|
var import_chevronRight2 = __toESM(require_chevronRight());
|
6772
6804
|
var import_warningSign3 = __toESM(require_warningSign());
|
6773
6805
|
var isTabComponent = (c) => {
|
6774
|
-
return
|
6806
|
+
return import_react74.default.isValidElement(c) && (c.type === Tab || c.type === ModalTab);
|
6775
6807
|
};
|
6776
|
-
var Tab =
|
6808
|
+
var Tab = import_react74.default.forwardRef(
|
6777
6809
|
({ className, id, title, children }, ref) => {
|
6778
|
-
return /* @__PURE__ */
|
6810
|
+
return /* @__PURE__ */ import_react74.default.createElement("div", {
|
6779
6811
|
ref,
|
6780
6812
|
id: `${id != null ? id : (0, import_kebabCase.default)(title)}-panel`,
|
6781
6813
|
className,
|
@@ -6787,14 +6819,14 @@ var Tab = import_react72.default.forwardRef(
|
|
6787
6819
|
);
|
6788
6820
|
var TabContainer = (_a) => {
|
6789
6821
|
var _b = _a, { className, children } = _b, rest = __objRest(_b, ["className", "children"]);
|
6790
|
-
return /* @__PURE__ */
|
6822
|
+
return /* @__PURE__ */ import_react74.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
6791
6823
|
className: classNames("py-6 z-0", className)
|
6792
6824
|
}), children);
|
6793
6825
|
};
|
6794
6826
|
var ModalTab = Tab;
|
6795
6827
|
var ModalTabContainer = TabContainer;
|
6796
6828
|
var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
|
6797
|
-
const Tab2 =
|
6829
|
+
const Tab2 = import_react74.default.forwardRef(
|
6798
6830
|
(_a, ref) => {
|
6799
6831
|
var _b = _a, {
|
6800
6832
|
id,
|
@@ -6824,17 +6856,17 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
|
|
6824
6856
|
const _id = id != null ? id : (0, import_kebabCase.default)(title);
|
6825
6857
|
let statusIcon = void 0;
|
6826
6858
|
if (status === "warning") {
|
6827
|
-
statusIcon = /* @__PURE__ */
|
6859
|
+
statusIcon = /* @__PURE__ */ import_react74.default.createElement(InlineIcon, {
|
6828
6860
|
icon: import_warningSign3.default,
|
6829
6861
|
color: "warning-80"
|
6830
6862
|
});
|
6831
6863
|
} else if (status === "error") {
|
6832
|
-
statusIcon = /* @__PURE__ */
|
6864
|
+
statusIcon = /* @__PURE__ */ import_react74.default.createElement(InlineIcon, {
|
6833
6865
|
icon: import_warningSign3.default,
|
6834
6866
|
color: "error-50"
|
6835
6867
|
});
|
6836
6868
|
}
|
6837
|
-
const tab = /* @__PURE__ */
|
6869
|
+
const tab = /* @__PURE__ */ import_react74.default.createElement(Component, __spreadValues({
|
6838
6870
|
ref,
|
6839
6871
|
id: `${_id}-tab`,
|
6840
6872
|
onClick: () => !disabled && onSelected(value != null ? value : index),
|
@@ -6851,24 +6883,24 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
|
|
6851
6883
|
"aria-selected": selected,
|
6852
6884
|
"aria-controls": `${_id}-panel`,
|
6853
6885
|
tabIndex: disabled ? void 0 : 0
|
6854
|
-
}, rest), /* @__PURE__ */
|
6886
|
+
}, rest), /* @__PURE__ */ import_react74.default.createElement(Typography2, {
|
6855
6887
|
htmlTag: "div",
|
6856
6888
|
variant: "small",
|
6857
6889
|
color: selected ? "primary-80" : disabled ? "grey-20" : "current",
|
6858
6890
|
className: tw("inline-flex items-center gap-3")
|
6859
|
-
}, /* @__PURE__ */
|
6891
|
+
}, /* @__PURE__ */ import_react74.default.createElement("span", {
|
6860
6892
|
className: tw("whitespace-nowrap")
|
6861
|
-
}, title), (0, import_isNumber4.default)(badge) && /* @__PURE__ */
|
6893
|
+
}, title), (0, import_isNumber4.default)(badge) && /* @__PURE__ */ import_react74.default.createElement(Typography2, {
|
6862
6894
|
htmlTag: "span",
|
6863
6895
|
variant: "small",
|
6864
6896
|
color: selected ? "primary-80" : "grey-5",
|
6865
6897
|
className: "leading-none"
|
6866
|
-
}, /* @__PURE__ */
|
6898
|
+
}, /* @__PURE__ */ import_react74.default.createElement(TabBadge, {
|
6867
6899
|
kind: "filled",
|
6868
6900
|
value: badge,
|
6869
6901
|
textClassname: classNames({ "text-white": selected, "text-grey-50": !selected })
|
6870
6902
|
})), statusIcon));
|
6871
|
-
return tooltip ? /* @__PURE__ */
|
6903
|
+
return tooltip ? /* @__PURE__ */ import_react74.default.createElement(Tooltip, {
|
6872
6904
|
content: tooltip
|
6873
6905
|
}, tab) : tab;
|
6874
6906
|
}
|
@@ -6882,20 +6914,20 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
|
|
6882
6914
|
const Tabs2 = (props) => {
|
6883
6915
|
var _a, _b;
|
6884
6916
|
const { className, value, defaultValue, onChange, children } = props;
|
6885
|
-
const childArr =
|
6917
|
+
const childArr = import_react74.default.Children.toArray(children);
|
6886
6918
|
const firstTab = childArr[0];
|
6887
6919
|
const firstTabValue = isTabComponent(firstTab) ? firstTab.props.value : -1;
|
6888
|
-
const [selected, setSelected] = (0,
|
6889
|
-
const [leftCaret, showLeftCaret] = (0,
|
6890
|
-
const [rightCaret, showRightCaret] = (0,
|
6891
|
-
const parentRef = (0,
|
6892
|
-
const containerRef = (0,
|
6893
|
-
const tabsRef = (0,
|
6920
|
+
const [selected, setSelected] = (0, import_react74.useState)((_b = (_a = value != null ? value : defaultValue) != null ? _a : firstTabValue) != null ? _b : 0);
|
6921
|
+
const [leftCaret, showLeftCaret] = (0, import_react74.useState)(false);
|
6922
|
+
const [rightCaret, showRightCaret] = (0, import_react74.useState)(false);
|
6923
|
+
const parentRef = (0, import_react74.useRef)(null);
|
6924
|
+
const containerRef = (0, import_react74.useRef)(null);
|
6925
|
+
const tabsRef = (0, import_react74.useRef)(null);
|
6894
6926
|
const revealSelectedTab = ({ smooth }) => {
|
6895
6927
|
var _a2, _b2;
|
6896
6928
|
const container = containerRef.current;
|
6897
6929
|
const tabs = tabsRef.current;
|
6898
|
-
const values =
|
6930
|
+
const values = import_react74.default.Children.map(
|
6899
6931
|
children,
|
6900
6932
|
(tab, i) => {
|
6901
6933
|
var _a3;
|
@@ -6929,15 +6961,15 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
|
|
6929
6961
|
showLeftCaret(hasLeftCaret);
|
6930
6962
|
showRightCaret(hasRightCaret);
|
6931
6963
|
};
|
6932
|
-
(0,
|
6964
|
+
(0, import_react74.useEffect)(() => {
|
6933
6965
|
if (value === void 0) {
|
6934
6966
|
return;
|
6935
6967
|
}
|
6936
6968
|
updateCarets();
|
6937
6969
|
setSelected(value);
|
6938
6970
|
revealSelectedTab({ smooth: value !== selected });
|
6939
|
-
}, [value,
|
6940
|
-
(0,
|
6971
|
+
}, [value, import_react74.default.Children.count(children)]);
|
6972
|
+
(0, import_react74.useLayoutEffect)(() => {
|
6941
6973
|
var _a2;
|
6942
6974
|
updateCarets();
|
6943
6975
|
(_a2 = containerRef.current) == null ? void 0 : _a2.addEventListener("scroll", updateCarets);
|
@@ -7000,27 +7032,27 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
|
|
7000
7032
|
const handleSelected = (key) => {
|
7001
7033
|
(onChange != null ? onChange : setSelected)(key);
|
7002
7034
|
};
|
7003
|
-
|
7035
|
+
import_react74.default.Children.forEach(children, (c) => {
|
7004
7036
|
if (c && !isTabComponent(c)) {
|
7005
7037
|
throw new Error("<Tabs> can only have <Tabs.Tab> components as children");
|
7006
7038
|
}
|
7007
7039
|
});
|
7008
|
-
return /* @__PURE__ */
|
7040
|
+
return /* @__PURE__ */ import_react74.default.createElement("div", {
|
7009
7041
|
ref: parentRef,
|
7010
7042
|
className: classNames(tw("h-full"), className)
|
7011
|
-
}, /* @__PURE__ */
|
7043
|
+
}, /* @__PURE__ */ import_react74.default.createElement("div", {
|
7012
7044
|
className: tw("relative flex items-center h-full border-b-2 border-grey-10")
|
7013
|
-
}, /* @__PURE__ */
|
7045
|
+
}, /* @__PURE__ */ import_react74.default.createElement("div", {
|
7014
7046
|
ref: containerRef,
|
7015
7047
|
className: tw("overflow-y-auto scrollbar-hide h-full mb-[-2px]")
|
7016
|
-
}, /* @__PURE__ */
|
7048
|
+
}, /* @__PURE__ */ import_react74.default.createElement("div", {
|
7017
7049
|
ref: tabsRef,
|
7018
7050
|
role: "tablist",
|
7019
7051
|
"aria-label": "tabs",
|
7020
7052
|
className: tw("inline-flex items-center cursor-pointer font-normal h-full")
|
7021
|
-
},
|
7053
|
+
}, import_react74.default.Children.map(
|
7022
7054
|
children,
|
7023
|
-
(tab, index) => tab ? /* @__PURE__ */
|
7055
|
+
(tab, index) => tab ? /* @__PURE__ */ import_react74.default.createElement(TabItemComponent, __spreadProps(__spreadValues({
|
7024
7056
|
key: tab.props.value
|
7025
7057
|
}, tab.props), {
|
7026
7058
|
index,
|
@@ -7028,20 +7060,20 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
|
|
7028
7060
|
onKeyDown: handleKeyDown,
|
7029
7061
|
onSelected: handleSelected
|
7030
7062
|
})) : void 0
|
7031
|
-
))), leftCaret && /* @__PURE__ */
|
7063
|
+
))), leftCaret && /* @__PURE__ */ import_react74.default.createElement("div", {
|
7032
7064
|
className: tw("absolute left-0 bg-gradient-to-r from-white via-white z-20 py-3 pr-4")
|
7033
|
-
}, /* @__PURE__ */
|
7065
|
+
}, /* @__PURE__ */ import_react74.default.createElement("div", {
|
7034
7066
|
onClick: () => handleScrollToNext("left"),
|
7035
7067
|
className: tw("hover:bg-grey-0 p-2 leading-none cursor-pointer")
|
7036
|
-
}, /* @__PURE__ */
|
7068
|
+
}, /* @__PURE__ */ import_react74.default.createElement(InlineIcon, {
|
7037
7069
|
icon: import_chevronLeft2.default
|
7038
|
-
}))), rightCaret && /* @__PURE__ */
|
7070
|
+
}))), rightCaret && /* @__PURE__ */ import_react74.default.createElement("div", {
|
7039
7071
|
onClick: () => handleScrollToNext("right"),
|
7040
7072
|
className: tw("absolute right-0 bg-gradient-to-l from-white via-white z-20 py-3 pl-4")
|
7041
|
-
}, /* @__PURE__ */
|
7073
|
+
}, /* @__PURE__ */ import_react74.default.createElement("div", {
|
7042
7074
|
onClick: () => handleScrollToNext("right"),
|
7043
7075
|
className: tw("hover:bg-grey-0 p-2 leading-none cursor-pointer")
|
7044
|
-
}, /* @__PURE__ */
|
7076
|
+
}, /* @__PURE__ */ import_react74.default.createElement(InlineIcon, {
|
7045
7077
|
icon: import_chevronRight2.default
|
7046
7078
|
})))), renderChildren(children, selected, props));
|
7047
7079
|
};
|
@@ -7049,7 +7081,7 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
|
|
7049
7081
|
Tabs2.Tab = TabComponent;
|
7050
7082
|
return Tabs2;
|
7051
7083
|
};
|
7052
|
-
var Tabs = createTabsComponent(Tab, TabItem, "Tabs", (children, selected) => /* @__PURE__ */
|
7084
|
+
var Tabs = createTabsComponent(Tab, TabItem, "Tabs", (children, selected) => /* @__PURE__ */ import_react74.default.createElement(TabContainer, null, children.find(
|
7053
7085
|
(node, index) => (node == null ? void 0 : node.props.value) === selected || index === selected
|
7054
7086
|
)));
|
7055
7087
|
|
@@ -7066,7 +7098,7 @@ var Modal2 = ({
|
|
7066
7098
|
secondaryActions,
|
7067
7099
|
size
|
7068
7100
|
}) => {
|
7069
|
-
const ref =
|
7101
|
+
const ref = import_react75.default.useRef(null);
|
7070
7102
|
const state = (0, import_overlays12.useOverlayTriggerState)({ isOpen: open });
|
7071
7103
|
const { modalProps, underlayProps } = (0, import_overlays11.useModalOverlay)({ isDismissable: false }, state, ref);
|
7072
7104
|
const labelledBy = (0, import_utils10.useId)();
|
@@ -7078,35 +7110,35 @@ var Modal2 = ({
|
|
7078
7110
|
if (!open) {
|
7079
7111
|
return null;
|
7080
7112
|
}
|
7081
|
-
return /* @__PURE__ */
|
7113
|
+
return /* @__PURE__ */ import_react75.default.createElement(import_overlays11.Overlay, null, /* @__PURE__ */ import_react75.default.createElement(Modal, {
|
7082
7114
|
open: state.isOpen
|
7083
|
-
}, /* @__PURE__ */
|
7115
|
+
}, /* @__PURE__ */ import_react75.default.createElement(Modal.BackDrop, __spreadValues({}, underlayProps)), /* @__PURE__ */ import_react75.default.createElement(import_focus3.FocusScope, {
|
7084
7116
|
contain: true,
|
7085
7117
|
restoreFocus: true,
|
7086
7118
|
autoFocus: true
|
7087
|
-
}, /* @__PURE__ */
|
7119
|
+
}, /* @__PURE__ */ import_react75.default.createElement(Modal.Dialog, __spreadValues(__spreadValues({
|
7088
7120
|
ref,
|
7089
7121
|
size
|
7090
|
-
}, modalProps), dialogProps), /* @__PURE__ */
|
7122
|
+
}, modalProps), dialogProps), /* @__PURE__ */ import_react75.default.createElement(Modal.CloseButtonContainer, null, /* @__PURE__ */ import_react75.default.createElement(IconButton, {
|
7091
7123
|
"aria-label": "Close",
|
7092
7124
|
icon: import_cross5.default,
|
7093
7125
|
onClick: onClose
|
7094
|
-
})), headerImage !== void 0 && /* @__PURE__ */
|
7126
|
+
})), headerImage !== void 0 && /* @__PURE__ */ import_react75.default.createElement(Modal.HeaderImage, {
|
7095
7127
|
backgroundImage: headerImage
|
7096
|
-
}), /* @__PURE__ */
|
7128
|
+
}), /* @__PURE__ */ import_react75.default.createElement(Modal.Header, {
|
7097
7129
|
className: tw({ "pb-3": isComponentType(children, ModalTabs) })
|
7098
|
-
}, /* @__PURE__ */
|
7130
|
+
}, /* @__PURE__ */ import_react75.default.createElement(Modal.TitleContainer, null, /* @__PURE__ */ import_react75.default.createElement(Modal.Title, {
|
7099
7131
|
id: labelledBy
|
7100
|
-
}, title), subtitle && /* @__PURE__ */
|
7132
|
+
}, title), subtitle && /* @__PURE__ */ import_react75.default.createElement(Modal.Subtitle, null, subtitle))), isComponentType(children, ModalTabs) ? import_react75.default.cloneElement(children, { className: tw("[&>div:first-child]:px-5 grow") }) : /* @__PURE__ */ import_react75.default.createElement(Modal.Body, {
|
7101
7133
|
id: describedBy,
|
7102
7134
|
tabIndex: 0,
|
7103
7135
|
noFooter: !(secondaryActions || primaryAction)
|
7104
|
-
}, children), (secondaryActions || primaryAction) && /* @__PURE__ */
|
7136
|
+
}, children), (secondaryActions || primaryAction) && /* @__PURE__ */ import_react75.default.createElement(Modal.Footer, null, /* @__PURE__ */ import_react75.default.createElement(Modal.Actions, null, secondaryActions && (0, import_castArray.default)(secondaryActions).filter(Boolean).map((_a) => {
|
7105
7137
|
var _b = _a, { text } = _b, action = __objRest(_b, ["text"]);
|
7106
|
-
return /* @__PURE__ */
|
7138
|
+
return /* @__PURE__ */ import_react75.default.createElement(SecondaryButton, __spreadValues({
|
7107
7139
|
key: text
|
7108
7140
|
}, action), text);
|
7109
|
-
}), primaryAction && /* @__PURE__ */
|
7141
|
+
}), primaryAction && /* @__PURE__ */ import_react75.default.createElement(PrimaryButton, __spreadValues({
|
7110
7142
|
key: primaryAction.text
|
7111
7143
|
}, (0, import_omit9.default)(primaryAction, "text")), primaryAction.text)))))));
|
7112
7144
|
};
|
@@ -7114,24 +7146,24 @@ var ModalTabs = createTabsComponent(
|
|
7114
7146
|
ModalTab,
|
7115
7147
|
TabItem,
|
7116
7148
|
"ModalTabs",
|
7117
|
-
(children, selected, props) => /* @__PURE__ */
|
7149
|
+
(children, selected, props) => /* @__PURE__ */ import_react75.default.createElement(Modal.Body, {
|
7118
7150
|
maxHeight: props.maxHeight
|
7119
|
-
}, /* @__PURE__ */
|
7151
|
+
}, /* @__PURE__ */ import_react75.default.createElement(ModalTabContainer, null, children.find(
|
7120
7152
|
(node, index) => (node == null ? void 0 : node.props.value) === selected || index === selected
|
7121
7153
|
)))
|
7122
7154
|
);
|
7123
7155
|
|
7124
7156
|
// src/components/MultiInput/MultiInput.tsx
|
7125
|
-
var
|
7157
|
+
var import_react77 = __toESM(require("react"));
|
7126
7158
|
var import_castArray2 = __toESM(require("lodash/castArray"));
|
7127
7159
|
var import_identity = __toESM(require("lodash/identity"));
|
7128
7160
|
var import_omit10 = __toESM(require("lodash/omit"));
|
7129
7161
|
var import_uniqueId4 = __toESM(require("lodash/uniqueId"));
|
7130
7162
|
|
7131
7163
|
// src/components/MultiInput/InputChip.tsx
|
7132
|
-
var
|
7164
|
+
var import_react76 = __toESM(require("react"));
|
7133
7165
|
var import_smallCross = __toESM(require_smallCross());
|
7134
|
-
var InputChip =
|
7166
|
+
var InputChip = import_react76.default.forwardRef(
|
7135
7167
|
(_a, ref) => {
|
7136
7168
|
var _b = _a, { invalid = false, disabled, readOnly, className, onClick: _onClick, children } = _b, props = __objRest(_b, ["invalid", "disabled", "readOnly", "className", "onClick", "children"]);
|
7137
7169
|
const onClick = (e) => {
|
@@ -7139,7 +7171,7 @@ var InputChip = import_react74.default.forwardRef(
|
|
7139
7171
|
_onClick == null ? void 0 : _onClick(e);
|
7140
7172
|
}
|
7141
7173
|
};
|
7142
|
-
return /* @__PURE__ */
|
7174
|
+
return /* @__PURE__ */ import_react76.default.createElement("div", __spreadValues({
|
7143
7175
|
ref,
|
7144
7176
|
role: "button",
|
7145
7177
|
className: classNames(className, "inline-flex align-middle mx-1 px-2 py-1 items-center rounded-sm break-all", {
|
@@ -7149,10 +7181,10 @@ var InputChip = import_react74.default.forwardRef(
|
|
7149
7181
|
"bg-grey-5 pointer-events-none": disabled
|
7150
7182
|
}),
|
7151
7183
|
onClick
|
7152
|
-
}, props), /* @__PURE__ */
|
7184
|
+
}, props), /* @__PURE__ */ import_react76.default.createElement(Typography2, {
|
7153
7185
|
variant: "small",
|
7154
7186
|
color: invalid ? "error-80" : disabled ? "grey-40" : "grey-70"
|
7155
|
-
}, children), !readOnly && /* @__PURE__ */
|
7187
|
+
}, children), !readOnly && /* @__PURE__ */ import_react76.default.createElement("div", null, /* @__PURE__ */ import_react76.default.createElement(Icon, {
|
7156
7188
|
icon: import_smallCross.default,
|
7157
7189
|
className: tw("ml-2", {
|
7158
7190
|
"text-error-70": invalid,
|
@@ -7210,11 +7242,11 @@ var MultiInputBase = (_a) => {
|
|
7210
7242
|
"valid"
|
7211
7243
|
]);
|
7212
7244
|
var _a2;
|
7213
|
-
const inputRef = (0,
|
7214
|
-
const [items, setItems] = (0,
|
7215
|
-
const [hasFocus, setFocus] = (0,
|
7245
|
+
const inputRef = (0, import_react77.useRef)(null);
|
7246
|
+
const [items, setItems] = (0, import_react77.useState)((_a2 = value != null ? value : defaultValue) != null ? _a2 : []);
|
7247
|
+
const [hasFocus, setFocus] = (0, import_react77.useState)(false);
|
7216
7248
|
const keyCodes = [delimiter !== "enter" ? " " : null, delimiter !== "space" ? "Enter" : null].filter(import_identity.default);
|
7217
|
-
(0,
|
7249
|
+
(0, import_react77.useEffect)(() => {
|
7218
7250
|
const requiresUpdate = value !== void 0 || defaultValue === void 0;
|
7219
7251
|
if (requiresUpdate && JSON.stringify(value) !== JSON.stringify(items)) {
|
7220
7252
|
setItems(value != null ? value : []);
|
@@ -7293,7 +7325,7 @@ var MultiInputBase = (_a) => {
|
|
7293
7325
|
};
|
7294
7326
|
const renderChips = () => items == null ? void 0 : items.map((item, index) => {
|
7295
7327
|
var _a3;
|
7296
|
-
return /* @__PURE__ */
|
7328
|
+
return /* @__PURE__ */ import_react77.default.createElement(InputChip, {
|
7297
7329
|
key: `${itemToString(item)}.${index}`,
|
7298
7330
|
invalid: !((_a3 = isItemValid == null ? void 0 : isItemValid(item, index)) != null ? _a3 : true),
|
7299
7331
|
readOnly,
|
@@ -7304,11 +7336,11 @@ var MultiInputBase = (_a) => {
|
|
7304
7336
|
}
|
7305
7337
|
}, itemToString(item));
|
7306
7338
|
});
|
7307
|
-
return /* @__PURE__ */
|
7339
|
+
return /* @__PURE__ */ import_react77.default.createElement("div", null, /* @__PURE__ */ import_react77.default.createElement(Select.InputContainer, {
|
7308
7340
|
variant: disabled ? "disabled" : valid === false ? "error" : readOnly ? "readOnly" : hasFocus ? "focused" : "default"
|
7309
|
-
}, /* @__PURE__ */
|
7341
|
+
}, /* @__PURE__ */ import_react77.default.createElement("div", {
|
7310
7342
|
className: "grow inline-flex flex-row flex-wrap gap-y-2"
|
7311
|
-
}, inline && renderChips(), /* @__PURE__ */
|
7343
|
+
}, inline && renderChips(), /* @__PURE__ */ import_react77.default.createElement(Select.Input, __spreadProps(__spreadValues({
|
7312
7344
|
ref: inputRef,
|
7313
7345
|
id: id != null ? id : name,
|
7314
7346
|
name,
|
@@ -7326,35 +7358,35 @@ var MultiInputBase = (_a) => {
|
|
7326
7358
|
onFocus: handleFocus,
|
7327
7359
|
onBlur: handleBlur,
|
7328
7360
|
autoComplete: "off"
|
7329
|
-
}))), endAdornment && /* @__PURE__ */
|
7361
|
+
}))), endAdornment && /* @__PURE__ */ import_react77.default.createElement(InputAdornment, null, endAdornment)), !inline && /* @__PURE__ */ import_react77.default.createElement("div", {
|
7330
7362
|
className: tw("flex flex-row flex-wrap gap-y-2 mt-2")
|
7331
7363
|
}, renderChips()));
|
7332
7364
|
};
|
7333
|
-
var BaseMultiInputSkeleton = () => /* @__PURE__ */
|
7365
|
+
var BaseMultiInputSkeleton = () => /* @__PURE__ */ import_react77.default.createElement(Skeleton, {
|
7334
7366
|
height: 38
|
7335
7367
|
});
|
7336
7368
|
MultiInputBase.Skeleton = BaseMultiInputSkeleton;
|
7337
7369
|
var MultiInput = (props) => {
|
7338
7370
|
var _a, _b, _c, _d, _e;
|
7339
7371
|
const maxLength = (_a = props.maxLength) != null ? _a : props.max;
|
7340
|
-
const [value, setValue] = (0,
|
7341
|
-
(0,
|
7372
|
+
const [value, setValue] = (0, import_react77.useState)((_c = (_b = props.value) != null ? _b : props.defaultValue) != null ? _c : []);
|
7373
|
+
(0, import_react77.useEffect)(() => {
|
7342
7374
|
var _a2;
|
7343
7375
|
setValue((_a2 = props.value) != null ? _a2 : []);
|
7344
7376
|
}, [JSON.stringify(props.value)]);
|
7345
|
-
const id = (0,
|
7377
|
+
const id = (0, import_react77.useRef)((_e = (_d = props.id) != null ? _d : props.name) != null ? _e : `multiinput-${(0, import_uniqueId4.default)()}`);
|
7346
7378
|
const errorMessageId = (0, import_uniqueId4.default)();
|
7347
7379
|
const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
|
7348
7380
|
const labelControlProps = getLabelControlProps(props);
|
7349
7381
|
const baseProps = (0, import_omit10.default)(props, Object.keys(labelControlProps));
|
7350
|
-
return /* @__PURE__ */
|
7382
|
+
return /* @__PURE__ */ import_react77.default.createElement(LabelControl, __spreadProps(__spreadValues({
|
7351
7383
|
id: `${id.current}-label`,
|
7352
7384
|
htmlFor: `${id.current}-input`,
|
7353
7385
|
messageId: errorMessageId
|
7354
7386
|
}, labelControlProps), {
|
7355
7387
|
length: value.length,
|
7356
7388
|
maxLength
|
7357
|
-
}), /* @__PURE__ */
|
7389
|
+
}), /* @__PURE__ */ import_react77.default.createElement(MultiInputBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
|
7358
7390
|
id: `${id.current}-input`,
|
7359
7391
|
onChange: (value2) => {
|
7360
7392
|
var _a2;
|
@@ -7366,12 +7398,12 @@ var MultiInput = (props) => {
|
|
7366
7398
|
valid: props.valid
|
7367
7399
|
})));
|
7368
7400
|
};
|
7369
|
-
var MultiInputSkeleton = () => /* @__PURE__ */
|
7401
|
+
var MultiInputSkeleton = () => /* @__PURE__ */ import_react77.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react77.default.createElement(MultiInputBase.Skeleton, null));
|
7370
7402
|
MultiInput.Skeleton = MultiInputSkeleton;
|
7371
7403
|
MultiInput.Skeleton.displayName = "MultiInput.Skeleton";
|
7372
7404
|
|
7373
7405
|
// src/components/MultiSelect/MultiSelect.tsx
|
7374
|
-
var
|
7406
|
+
var import_react78 = __toESM(require("react"));
|
7375
7407
|
var import_overlays13 = require("@react-aria/overlays");
|
7376
7408
|
var import_downshift2 = require("downshift");
|
7377
7409
|
var import_isNil = __toESM(require("lodash/isNil"));
|
@@ -7426,10 +7458,10 @@ var MultiSelectBase = (_a) => {
|
|
7426
7458
|
"children"
|
7427
7459
|
]);
|
7428
7460
|
var _a2;
|
7429
|
-
const targetRef = (0,
|
7430
|
-
const overlayRef = (0,
|
7431
|
-
const [inputValue, setInputValue] = (0,
|
7432
|
-
const [hasFocus, setFocus] = (0,
|
7461
|
+
const targetRef = (0, import_react78.useRef)(null);
|
7462
|
+
const overlayRef = (0, import_react78.useRef)(null);
|
7463
|
+
const [inputValue, setInputValue] = (0, import_react78.useState)("");
|
7464
|
+
const [hasFocus, setFocus] = (0, import_react78.useState)(false);
|
7433
7465
|
const { selectedItems, addSelectedItem, removeSelectedItem, getDropdownProps, getSelectedItemProps } = (0, import_downshift2.useMultipleSelection)(
|
7434
7466
|
(0, import_omitBy.default)(
|
7435
7467
|
{
|
@@ -7499,7 +7531,7 @@ var MultiSelectBase = (_a) => {
|
|
7499
7531
|
});
|
7500
7532
|
const inputProps = getInputProps(getDropdownProps({ disabled: disabled || readOnly }));
|
7501
7533
|
const renderChips = () => {
|
7502
|
-
return selectedItems.map((selectedItem, index) => /* @__PURE__ */
|
7534
|
+
return selectedItems.map((selectedItem, index) => /* @__PURE__ */ import_react78.default.createElement(InputChip, __spreadProps(__spreadValues({
|
7503
7535
|
key: `${itemToString(selectedItem)}.chip`,
|
7504
7536
|
className: tw("mx-0"),
|
7505
7537
|
disabled,
|
@@ -7515,14 +7547,14 @@ var MultiSelectBase = (_a) => {
|
|
7515
7547
|
const hasNoResults = options.length === 0 || filteredOptions.length === 0;
|
7516
7548
|
const width = (_a2 = targetRef.current) == null ? void 0 : _a2.offsetWidth;
|
7517
7549
|
const style = isOpen ? __spreadProps(__spreadValues({}, overlayProps.style), { width }) : { display: "none" };
|
7518
|
-
return /* @__PURE__ */
|
7550
|
+
return /* @__PURE__ */ import_react78.default.createElement("div", {
|
7519
7551
|
className: tw("relative")
|
7520
|
-
}, /* @__PURE__ */
|
7552
|
+
}, /* @__PURE__ */ import_react78.default.createElement(Select.InputContainer, {
|
7521
7553
|
ref: targetRef,
|
7522
7554
|
variant: disabled ? "disabled" : !valid ? "error" : readOnly ? "readOnly" : hasFocus ? "focused" : "default"
|
7523
|
-
}, /* @__PURE__ */
|
7555
|
+
}, /* @__PURE__ */ import_react78.default.createElement("div", {
|
7524
7556
|
className: "grow inline-flex flex-row flex-wrap gap-2"
|
7525
|
-
}, !hideChips && inline && renderChips(), /* @__PURE__ */
|
7557
|
+
}, !hideChips && inline && renderChips(), /* @__PURE__ */ import_react78.default.createElement(Select.Input, __spreadProps(__spreadValues(__spreadValues({
|
7526
7558
|
id,
|
7527
7559
|
name,
|
7528
7560
|
placeholder: selectedItems.length === 0 && !readOnly ? placeholder : "",
|
@@ -7543,12 +7575,12 @@ var MultiSelectBase = (_a) => {
|
|
7543
7575
|
setFocus(false);
|
7544
7576
|
(_a3 = inputProps.onBlur) == null ? void 0 : _a3.call(inputProps, e);
|
7545
7577
|
}
|
7546
|
-
}))), !readOnly && /* @__PURE__ */
|
7578
|
+
}))), !readOnly && /* @__PURE__ */ import_react78.default.createElement(Select.Toggle, __spreadValues({
|
7547
7579
|
hasFocus,
|
7548
7580
|
isOpen
|
7549
|
-
}, getToggleButtonProps({ disabled })))), !hideChips && !inline && /* @__PURE__ */
|
7581
|
+
}, getToggleButtonProps({ disabled })))), !hideChips && !inline && /* @__PURE__ */ import_react78.default.createElement("div", {
|
7550
7582
|
className: tw("flex flex-row flex-wrap gap-2 mt-2")
|
7551
|
-
}, renderChips()), /* @__PURE__ */
|
7583
|
+
}, renderChips()), /* @__PURE__ */ import_react78.default.createElement(PopoverWrapper, __spreadProps(__spreadValues({
|
7552
7584
|
isOpen: true,
|
7553
7585
|
isDismissable: true,
|
7554
7586
|
autoFocus: true
|
@@ -7556,15 +7588,15 @@ var MultiSelectBase = (_a) => {
|
|
7556
7588
|
style,
|
7557
7589
|
onClose: closeMenu,
|
7558
7590
|
className: tw("overflow-y-auto")
|
7559
|
-
}), /* @__PURE__ */
|
7591
|
+
}), /* @__PURE__ */ import_react78.default.createElement(Select.Menu, {
|
7560
7592
|
maxHeight
|
7561
|
-
}, isOpen && hasNoResults && /* @__PURE__ */
|
7593
|
+
}, isOpen && hasNoResults && /* @__PURE__ */ import_react78.default.createElement(Select.NoResults, null, noResults), isOpen && filteredOptions.map((item, index) => /* @__PURE__ */ import_react78.default.createElement(Select.Item, __spreadValues({
|
7562
7594
|
key: itemToString(item),
|
7563
7595
|
highlighted: index === highlightedIndex,
|
7564
7596
|
selected: selectedItems.includes(item)
|
7565
7597
|
}, getItemProps({ item, index, disabled: isOptionDisabled(item, index) })), renderOption(item))))));
|
7566
7598
|
};
|
7567
|
-
var MultiSelectBaseSkeleton = () => /* @__PURE__ */
|
7599
|
+
var MultiSelectBaseSkeleton = () => /* @__PURE__ */ import_react78.default.createElement(Skeleton, {
|
7568
7600
|
height: 38
|
7569
7601
|
});
|
7570
7602
|
MultiSelectBase.Skeleton = MultiSelectBaseSkeleton;
|
@@ -7577,16 +7609,16 @@ var MultiSelect = (_a) => {
|
|
7577
7609
|
"noResults"
|
7578
7610
|
]);
|
7579
7611
|
var _a2;
|
7580
|
-
const id = (0,
|
7612
|
+
const id = (0, import_react78.useRef)((_a2 = props.id) != null ? _a2 : `multiselect-${(0, import_uniqueId5.default)()}`);
|
7581
7613
|
const errorMessageId = (0, import_uniqueId5.default)();
|
7582
7614
|
const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
|
7583
7615
|
const labelControlProps = getLabelControlProps(props);
|
7584
7616
|
const baseProps = (0, import_omit11.default)(props, Object.keys(labelControlProps));
|
7585
|
-
return /* @__PURE__ */
|
7617
|
+
return /* @__PURE__ */ import_react78.default.createElement(LabelControl, __spreadValues({
|
7586
7618
|
id: `${id.current}-label`,
|
7587
7619
|
htmlFor: `${id.current}-input`,
|
7588
7620
|
messageId: errorMessageId
|
7589
|
-
}, labelControlProps), /* @__PURE__ */
|
7621
|
+
}, labelControlProps), /* @__PURE__ */ import_react78.default.createElement(MultiSelectBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
|
7590
7622
|
id: id.current,
|
7591
7623
|
options,
|
7592
7624
|
noResults,
|
@@ -7594,16 +7626,16 @@ var MultiSelect = (_a) => {
|
|
7594
7626
|
valid: props.valid
|
7595
7627
|
})));
|
7596
7628
|
};
|
7597
|
-
var MultiSelectSkeleton = () => /* @__PURE__ */
|
7629
|
+
var MultiSelectSkeleton = () => /* @__PURE__ */ import_react78.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react78.default.createElement(MultiSelectBase.Skeleton, null));
|
7598
7630
|
MultiSelect.Skeleton = MultiSelectSkeleton;
|
7599
7631
|
MultiSelect.Skeleton.displayName = "MultiSelect.Skeleton";
|
7600
7632
|
|
7601
7633
|
// src/components/NativeSelect/NativeSelect.tsx
|
7602
|
-
var
|
7634
|
+
var import_react79 = __toESM(require("react"));
|
7603
7635
|
var import_omit12 = __toESM(require("lodash/omit"));
|
7604
7636
|
var import_uniqueId6 = __toESM(require("lodash/uniqueId"));
|
7605
7637
|
var import_caretDown = __toESM(require_caretDown());
|
7606
|
-
var NativeSelectBase =
|
7638
|
+
var NativeSelectBase = import_react79.default.forwardRef(
|
7607
7639
|
(_a, ref) => {
|
7608
7640
|
var _b = _a, { children, disabled = false, required = false, valid = true, readOnly = false } = _b, props = __objRest(_b, ["children", "disabled", "required", "valid", "readOnly"]);
|
7609
7641
|
const placeholderValue = (0, import_uniqueId6.default)("default_value_for_placeholder");
|
@@ -7620,16 +7652,16 @@ var NativeSelectBase = import_react77.default.forwardRef(
|
|
7620
7652
|
(_b2 = props.onBlur) == null ? void 0 : _b2.call(props, event);
|
7621
7653
|
}
|
7622
7654
|
};
|
7623
|
-
return /* @__PURE__ */
|
7655
|
+
return /* @__PURE__ */ import_react79.default.createElement("span", {
|
7624
7656
|
className: tw("relative block")
|
7625
|
-
}, !readOnly && /* @__PURE__ */
|
7657
|
+
}, !readOnly && /* @__PURE__ */ import_react79.default.createElement("span", {
|
7626
7658
|
className: tw(
|
7627
7659
|
"absolute right-0 inset-y-0 mr-4 text-grey-40 flex ml-3 pointer-events-none typography-default-strong mt-4"
|
7628
7660
|
)
|
7629
|
-
}, /* @__PURE__ */
|
7661
|
+
}, /* @__PURE__ */ import_react79.default.createElement(Icon, {
|
7630
7662
|
icon: import_caretDown.default,
|
7631
7663
|
"data-testid": "icon-dropdown"
|
7632
|
-
})), /* @__PURE__ */
|
7664
|
+
})), /* @__PURE__ */ import_react79.default.createElement("select", __spreadProps(__spreadValues({
|
7633
7665
|
ref,
|
7634
7666
|
disabled: disabled || readOnly,
|
7635
7667
|
required
|
@@ -7648,29 +7680,29 @@ var NativeSelectBase = import_react77.default.forwardRef(
|
|
7648
7680
|
),
|
7649
7681
|
props.className
|
7650
7682
|
)
|
7651
|
-
}), props.placeholder && /* @__PURE__ */
|
7683
|
+
}), props.placeholder && /* @__PURE__ */ import_react79.default.createElement("option", {
|
7652
7684
|
value: placeholderValue,
|
7653
7685
|
disabled: true
|
7654
7686
|
}, props.placeholder), children));
|
7655
7687
|
}
|
7656
7688
|
);
|
7657
|
-
NativeSelectBase.Skeleton = () => /* @__PURE__ */
|
7689
|
+
NativeSelectBase.Skeleton = () => /* @__PURE__ */ import_react79.default.createElement(Skeleton, {
|
7658
7690
|
height: 38
|
7659
7691
|
});
|
7660
|
-
var NativeSelect =
|
7692
|
+
var NativeSelect = import_react79.default.forwardRef(
|
7661
7693
|
(_a, ref) => {
|
7662
7694
|
var _b = _a, { readOnly } = _b, props = __objRest(_b, ["readOnly"]);
|
7663
7695
|
var _a2;
|
7664
|
-
const id = (0,
|
7696
|
+
const id = (0, import_react79.useRef)((_a2 = props.id) != null ? _a2 : `nativeselect-${(0, import_uniqueId6.default)()}`);
|
7665
7697
|
const errorMessageId = (0, import_uniqueId6.default)();
|
7666
7698
|
const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
|
7667
7699
|
const _b2 = getLabelControlProps(props), { "data-testid": dataTestId } = _b2, labelControlProps = __objRest(_b2, ["data-testid"]);
|
7668
7700
|
const baseProps = (0, import_omit12.default)(props, Object.keys(labelControlProps));
|
7669
|
-
return /* @__PURE__ */
|
7701
|
+
return /* @__PURE__ */ import_react79.default.createElement(LabelControl, __spreadValues({
|
7670
7702
|
id: `${id.current}-label`,
|
7671
7703
|
htmlFor: id.current,
|
7672
7704
|
messageId: errorMessageId
|
7673
|
-
}, labelControlProps), /* @__PURE__ */
|
7705
|
+
}, labelControlProps), /* @__PURE__ */ import_react79.default.createElement(NativeSelectBase, __spreadProps(__spreadValues(__spreadValues({
|
7674
7706
|
ref
|
7675
7707
|
}, baseProps), errorProps), {
|
7676
7708
|
id: id.current,
|
@@ -7683,20 +7715,22 @@ var NativeSelect = import_react77.default.forwardRef(
|
|
7683
7715
|
})));
|
7684
7716
|
}
|
7685
7717
|
);
|
7686
|
-
|
7718
|
+
NativeSelect.displayName = "NativeSelect";
|
7719
|
+
var Option = import_react79.default.forwardRef((_a, ref) => {
|
7687
7720
|
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
7688
|
-
return /* @__PURE__ */
|
7721
|
+
return /* @__PURE__ */ import_react79.default.createElement("option", __spreadValues({
|
7689
7722
|
ref
|
7690
7723
|
}, props), children);
|
7691
7724
|
});
|
7692
|
-
|
7725
|
+
Option.displayName = "Option";
|
7726
|
+
var NativeSelectSkeleton = () => /* @__PURE__ */ import_react79.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react79.default.createElement(NativeSelectBase.Skeleton, null), /* @__PURE__ */ import_react79.default.createElement("div", {
|
7693
7727
|
style: { height: "1px" }
|
7694
7728
|
}));
|
7695
7729
|
NativeSelect.Skeleton = NativeSelectSkeleton;
|
7696
7730
|
NativeSelect.Skeleton.displayName = "NativeSelect.Skeleton";
|
7697
7731
|
|
7698
7732
|
// src/components/PageHeader/PageHeader.tsx
|
7699
|
-
var
|
7733
|
+
var import_react80 = __toESM(require("react"));
|
7700
7734
|
var import_castArray3 = __toESM(require("lodash/castArray"));
|
7701
7735
|
var import_omit13 = __toESM(require("lodash/omit"));
|
7702
7736
|
var PageHeader = ({
|
@@ -7708,48 +7742,48 @@ var PageHeader = ({
|
|
7708
7742
|
chips = [],
|
7709
7743
|
breadcrumbs
|
7710
7744
|
}) => {
|
7711
|
-
return /* @__PURE__ */
|
7745
|
+
return /* @__PURE__ */ import_react80.default.createElement(Flexbox, {
|
7712
7746
|
direction: "row",
|
7713
7747
|
gap: "4",
|
7714
7748
|
paddingBottom: "6"
|
7715
|
-
}, /* @__PURE__ */
|
7749
|
+
}, /* @__PURE__ */ import_react80.default.createElement(Flexbox, {
|
7716
7750
|
className: tw("grow"),
|
7717
7751
|
direction: "column",
|
7718
7752
|
gap: "0"
|
7719
|
-
}, breadcrumbs && /* @__PURE__ */
|
7753
|
+
}, breadcrumbs && /* @__PURE__ */ import_react80.default.createElement(Breadcrumbs, null, breadcrumbs), /* @__PURE__ */ import_react80.default.createElement(Flexbox, {
|
7720
7754
|
gap: "5"
|
7721
|
-
}, image && /* @__PURE__ */
|
7755
|
+
}, image && /* @__PURE__ */ import_react80.default.createElement("img", {
|
7722
7756
|
src: image,
|
7723
7757
|
alt: imageAlt,
|
7724
7758
|
className: tw("w-[56px] h-[56px]")
|
7725
|
-
}), /* @__PURE__ */
|
7759
|
+
}), /* @__PURE__ */ import_react80.default.createElement(Flexbox, {
|
7726
7760
|
direction: "column",
|
7727
7761
|
justifyContent: "center"
|
7728
|
-
}, /* @__PURE__ */
|
7762
|
+
}, /* @__PURE__ */ import_react80.default.createElement(Typography2.Heading, null, title), chips.length > 0 && /* @__PURE__ */ import_react80.default.createElement(Flexbox, {
|
7729
7763
|
gap: "3"
|
7730
|
-
}, chips.map((chip) => /* @__PURE__ */
|
7764
|
+
}, chips.map((chip) => /* @__PURE__ */ import_react80.default.createElement(Chip2, {
|
7731
7765
|
key: chip,
|
7732
7766
|
dense: true,
|
7733
7767
|
text: chip
|
7734
|
-
})))))), (secondaryActions || primaryAction) && /* @__PURE__ */
|
7768
|
+
})))))), (secondaryActions || primaryAction) && /* @__PURE__ */ import_react80.default.createElement(Flexbox, {
|
7735
7769
|
gap: "4",
|
7736
7770
|
className: tw("self-start")
|
7737
7771
|
}, secondaryActions && (0, import_castArray3.default)(secondaryActions).filter(Boolean).map((_a) => {
|
7738
7772
|
var _b = _a, { text } = _b, action = __objRest(_b, ["text"]);
|
7739
|
-
return /* @__PURE__ */
|
7773
|
+
return /* @__PURE__ */ import_react80.default.createElement(SecondaryButton, __spreadValues({
|
7740
7774
|
key: text
|
7741
7775
|
}, action), text);
|
7742
|
-
}), primaryAction && /* @__PURE__ */
|
7776
|
+
}), primaryAction && /* @__PURE__ */ import_react80.default.createElement(PrimaryButton, __spreadValues({
|
7743
7777
|
key: primaryAction.text
|
7744
7778
|
}, (0, import_omit13.default)(primaryAction, "text")), primaryAction.text)));
|
7745
7779
|
};
|
7746
7780
|
|
7747
7781
|
// src/components/Pagination/Pagination.tsx
|
7748
|
-
var
|
7782
|
+
var import_react82 = __toESM(require("react"));
|
7749
7783
|
var import_clamp = __toESM(require("lodash/clamp"));
|
7750
7784
|
|
7751
7785
|
// src/components/Select/Select.tsx
|
7752
|
-
var
|
7786
|
+
var import_react81 = __toESM(require("react"));
|
7753
7787
|
var import_overlays14 = require("@react-aria/overlays");
|
7754
7788
|
var import_downshift3 = require("downshift");
|
7755
7789
|
var import_defaults = __toESM(require("lodash/defaults"));
|
@@ -7766,10 +7800,10 @@ var hasOptionGroups = (val) => {
|
|
7766
7800
|
};
|
7767
7801
|
var defaultRenderOption = (item, props, { selectedItem }, { getOptionKey, getValue, optionToString = getOptionLabelBuiltin }) => {
|
7768
7802
|
var _a, _b;
|
7769
|
-
return /* @__PURE__ */
|
7803
|
+
return /* @__PURE__ */ import_react81.default.createElement(Select.Item, __spreadValues({
|
7770
7804
|
key: (_b = (_a = getOptionKey == null ? void 0 : getOptionKey(item)) != null ? _a : getValue == null ? void 0 : getValue(item)) != null ? _b : optionToString(item),
|
7771
7805
|
selected: item === selectedItem
|
7772
|
-
}, props), hasIconProperty(item) && /* @__PURE__ */
|
7806
|
+
}, props), hasIconProperty(item) && /* @__PURE__ */ import_react81.default.createElement(InlineIcon, {
|
7773
7807
|
icon: item.icon
|
7774
7808
|
}), optionToString(item));
|
7775
7809
|
};
|
@@ -7840,9 +7874,9 @@ var _SelectBase = (props) => {
|
|
7840
7874
|
"children",
|
7841
7875
|
"labelWrapper"
|
7842
7876
|
]);
|
7843
|
-
const [hasFocus, setFocus] = (0,
|
7844
|
-
const targetRef = (0,
|
7845
|
-
const overlayRef = (0,
|
7877
|
+
const [hasFocus, setFocus] = (0, import_react81.useState)(false);
|
7878
|
+
const targetRef = (0, import_react81.useRef)(null);
|
7879
|
+
const overlayRef = (0, import_react81.useRef)(null);
|
7846
7880
|
const items = hasOptionGroups(options) ? options.flatMap((g) => g.options) : options;
|
7847
7881
|
const findItemByValue = (val) => {
|
7848
7882
|
if (val === null) {
|
@@ -7886,13 +7920,13 @@ var _SelectBase = (props) => {
|
|
7886
7920
|
},
|
7887
7921
|
withDefaults
|
7888
7922
|
);
|
7889
|
-
const renderGroup = (group) => /* @__PURE__ */
|
7923
|
+
const renderGroup = (group) => /* @__PURE__ */ import_react81.default.createElement(import_react81.default.Fragment, {
|
7890
7924
|
key: group.label
|
7891
|
-
}, /* @__PURE__ */
|
7892
|
-
const input = /* @__PURE__ */
|
7925
|
+
}, /* @__PURE__ */ import_react81.default.createElement(Select.Group, null, group.label), group.options.map((opt) => renderItem(opt, items.indexOf(opt))));
|
7926
|
+
const input = /* @__PURE__ */ import_react81.default.createElement(Select.InputContainer, __spreadProps(__spreadValues({}, getToggleButtonProps({ disabled: disabled || readOnly, ref: targetRef })), {
|
7893
7927
|
variant: disabled ? "disabled" : !valid ? "error" : readOnly ? "readOnly" : hasFocus ? "focused" : "default",
|
7894
7928
|
tabIndex: 0
|
7895
|
-
}), /* @__PURE__ */
|
7929
|
+
}), /* @__PURE__ */ import_react81.default.createElement(Select.Input, __spreadProps(__spreadValues({
|
7896
7930
|
id,
|
7897
7931
|
name
|
7898
7932
|
}, rest), {
|
@@ -7904,16 +7938,16 @@ var _SelectBase = (props) => {
|
|
7904
7938
|
tabIndex: -1,
|
7905
7939
|
onFocus: () => setFocus(true),
|
7906
7940
|
onBlur: () => setFocus(false)
|
7907
|
-
})), !readOnly && /* @__PURE__ */
|
7941
|
+
})), !readOnly && /* @__PURE__ */ import_react81.default.createElement(Select.Toggle, {
|
7908
7942
|
disabled,
|
7909
7943
|
isOpen,
|
7910
7944
|
tabIndex: -1
|
7911
7945
|
}));
|
7912
7946
|
const width = (_b = targetRef.current) == null ? void 0 : _b.offsetWidth;
|
7913
7947
|
const style = isOpen ? __spreadProps(__spreadValues({}, overlayProps.style), { width }) : { display: "none" };
|
7914
|
-
return /* @__PURE__ */
|
7948
|
+
return /* @__PURE__ */ import_react81.default.createElement("div", {
|
7915
7949
|
className: tw("relative")
|
7916
|
-
}, labelWrapper ?
|
7950
|
+
}, labelWrapper ? import_react81.default.cloneElement(labelWrapper, { children: input }) : input, /* @__PURE__ */ import_react81.default.createElement(PopoverWrapper, __spreadProps(__spreadValues({
|
7917
7951
|
isOpen: true,
|
7918
7952
|
isDismissable: true,
|
7919
7953
|
autoFocus: true
|
@@ -7921,11 +7955,11 @@ var _SelectBase = (props) => {
|
|
7921
7955
|
style,
|
7922
7956
|
onClose: closeMenu,
|
7923
7957
|
className: tw("overflow-y-auto")
|
7924
|
-
}), /* @__PURE__ */
|
7958
|
+
}), /* @__PURE__ */ import_react81.default.createElement(Select.Menu, {
|
7925
7959
|
maxHeight
|
7926
|
-
}, isOpen && options.length === 0 && /* @__PURE__ */
|
7960
|
+
}, isOpen && options.length === 0 && /* @__PURE__ */ import_react81.default.createElement(Select.EmptyStateContainer, null, emptyState), isOpen && options.length > 0 && !hasOptionGroups(options) && options.map(renderItem), isOpen && options.length > 0 && hasOptionGroups(options) && options.map(renderGroup), isOpen && actions.length > 0 && /* @__PURE__ */ import_react81.default.createElement(import_react81.default.Fragment, null, /* @__PURE__ */ import_react81.default.createElement(Select.Divider, {
|
7927
7961
|
onMouseOver: () => setHighlightedIndex(-1)
|
7928
|
-
}), actions.map((act, index) => /* @__PURE__ */
|
7962
|
+
}), actions.map((act, index) => /* @__PURE__ */ import_react81.default.createElement(Select.ActionItem, __spreadProps(__spreadValues({
|
7929
7963
|
key: `${index}`
|
7930
7964
|
}, act), {
|
7931
7965
|
onMouseOver: () => setHighlightedIndex(-1),
|
@@ -7935,10 +7969,10 @@ var _SelectBase = (props) => {
|
|
7935
7969
|
}
|
7936
7970
|
}), act.label))))));
|
7937
7971
|
};
|
7938
|
-
var SelectBase = (props) => /* @__PURE__ */
|
7972
|
+
var SelectBase = (props) => /* @__PURE__ */ import_react81.default.createElement(_SelectBase, __spreadProps(__spreadValues({}, props), {
|
7939
7973
|
labelWrapper: void 0
|
7940
7974
|
}));
|
7941
|
-
var SelectBaseSkeleton = () => /* @__PURE__ */
|
7975
|
+
var SelectBaseSkeleton = () => /* @__PURE__ */ import_react81.default.createElement(Skeleton, {
|
7942
7976
|
height: 38
|
7943
7977
|
});
|
7944
7978
|
SelectBase.Skeleton = SelectBaseSkeleton;
|
@@ -7949,26 +7983,26 @@ var Select2 = (_a) => {
|
|
7949
7983
|
"options"
|
7950
7984
|
]);
|
7951
7985
|
var _a2;
|
7952
|
-
const id = (0,
|
7986
|
+
const id = (0, import_react81.useRef)((_a2 = props.id) != null ? _a2 : `select-${(0, import_uniqueId7.default)()}`);
|
7953
7987
|
const errorMessageId = (0, import_uniqueId7.default)();
|
7954
7988
|
const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
|
7955
7989
|
const labelProps = getLabelControlProps(props);
|
7956
7990
|
const baseProps = (0, import_omit14.default)(props, Object.keys(labelProps));
|
7957
7991
|
const legacyError = labelProps.error !== void 0 && labelProps.valid === false;
|
7958
7992
|
const variant = !labelProps.valid || legacyError ? "error" : labelProps.disabled ? "disabled" : "default";
|
7959
|
-
const label = /* @__PURE__ */
|
7993
|
+
const label = /* @__PURE__ */ import_react81.default.createElement(Label, __spreadValues({
|
7960
7994
|
id: `${id.current}-label`,
|
7961
7995
|
htmlFor: `${id.current}-input`,
|
7962
7996
|
variant,
|
7963
7997
|
messageId: errorMessageId
|
7964
7998
|
}, labelProps));
|
7965
|
-
return /* @__PURE__ */
|
7999
|
+
return /* @__PURE__ */ import_react81.default.createElement(FormControl, null, /* @__PURE__ */ import_react81.default.createElement(_SelectBase, __spreadProps(__spreadValues(__spreadValues({}, baseProps), errorProps), {
|
7966
8000
|
id: `${id.current}-input`,
|
7967
8001
|
options,
|
7968
8002
|
disabled: props.disabled,
|
7969
8003
|
valid: props.valid,
|
7970
8004
|
labelWrapper: label
|
7971
|
-
})), /* @__PURE__ */
|
8005
|
+
})), /* @__PURE__ */ import_react81.default.createElement(HelperText, {
|
7972
8006
|
messageId: errorMessageId,
|
7973
8007
|
error: !labelProps.valid,
|
7974
8008
|
helperText: labelProps.helperText,
|
@@ -7977,8 +8011,9 @@ var Select2 = (_a) => {
|
|
7977
8011
|
reserveSpaceForError: labelProps.reserveSpaceForError
|
7978
8012
|
}));
|
7979
8013
|
};
|
7980
|
-
var SelectSkeleton = () => /* @__PURE__ */
|
8014
|
+
var SelectSkeleton = () => /* @__PURE__ */ import_react81.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react81.default.createElement(SelectBase.Skeleton, null));
|
7981
8015
|
Select2.Skeleton = SelectSkeleton;
|
8016
|
+
Select2.Skeleton.displayName = "Select.Skeleton";
|
7982
8017
|
|
7983
8018
|
// src/components/Pagination/Pagination.tsx
|
7984
8019
|
var import_chevronBackward = __toESM(require_chevronBackward());
|
@@ -7995,25 +8030,25 @@ var Pagination = ({
|
|
7995
8030
|
pageSizes,
|
7996
8031
|
onPageSizeChange
|
7997
8032
|
}) => {
|
7998
|
-
const [value, setValue] =
|
7999
|
-
|
8033
|
+
const [value, setValue] = import_react82.default.useState(currentPage);
|
8034
|
+
import_react82.default.useEffect(() => {
|
8000
8035
|
setValue(currentPage);
|
8001
8036
|
}, [currentPage]);
|
8002
|
-
|
8037
|
+
import_react82.default.useEffect(() => {
|
8003
8038
|
onPageChange(1);
|
8004
8039
|
setValue(1);
|
8005
8040
|
}, [pageSize]);
|
8006
|
-
return /* @__PURE__ */
|
8041
|
+
return /* @__PURE__ */ import_react82.default.createElement(Box, {
|
8007
8042
|
className: tw("grid grid-cols-[200px_1fr_200px]"),
|
8008
8043
|
backgroundColor: "grey-0",
|
8009
8044
|
padding: "4"
|
8010
|
-
}, pageSizes && onPageSizeChange && typeof pageSize === "number" ? /* @__PURE__ */
|
8045
|
+
}, pageSizes && onPageSizeChange && typeof pageSize === "number" ? /* @__PURE__ */ import_react82.default.createElement(Box, {
|
8011
8046
|
display: "flex",
|
8012
8047
|
alignItems: "center",
|
8013
8048
|
gap: "4"
|
8014
|
-
}, /* @__PURE__ */
|
8049
|
+
}, /* @__PURE__ */ import_react82.default.createElement(Typography2.SmallText, null, "Items per page "), /* @__PURE__ */ import_react82.default.createElement("div", {
|
8015
8050
|
className: tw("max-w-[70px]")
|
8016
|
-
}, /* @__PURE__ */
|
8051
|
+
}, /* @__PURE__ */ import_react82.default.createElement(SelectBase, {
|
8017
8052
|
options: pageSizes.map((size) => size.toString()),
|
8018
8053
|
value: pageSize.toString(),
|
8019
8054
|
onChange: (size) => {
|
@@ -8024,24 +8059,24 @@ var Pagination = ({
|
|
8024
8059
|
}
|
8025
8060
|
}
|
8026
8061
|
}
|
8027
|
-
}))) : /* @__PURE__ */
|
8062
|
+
}))) : /* @__PURE__ */ import_react82.default.createElement("div", null), /* @__PURE__ */ import_react82.default.createElement(Box, {
|
8028
8063
|
display: "flex",
|
8029
8064
|
justifyContent: "center",
|
8030
8065
|
alignItems: "center",
|
8031
8066
|
className: tw("grow")
|
8032
|
-
}, /* @__PURE__ */
|
8067
|
+
}, /* @__PURE__ */ import_react82.default.createElement(IconButton, {
|
8033
8068
|
"aria-label": "First",
|
8034
8069
|
onClick: () => onPageChange(1),
|
8035
8070
|
icon: import_chevronBackward.default,
|
8036
8071
|
disabled: !hasPreviousPage
|
8037
|
-
}), /* @__PURE__ */
|
8072
|
+
}), /* @__PURE__ */ import_react82.default.createElement(IconButton, {
|
8038
8073
|
"aria-label": "Previous",
|
8039
8074
|
onClick: () => onPageChange(currentPage - 1),
|
8040
8075
|
icon: import_chevronLeft3.default,
|
8041
8076
|
disabled: !hasPreviousPage
|
8042
|
-
}), /* @__PURE__ */
|
8077
|
+
}), /* @__PURE__ */ import_react82.default.createElement(Box, {
|
8043
8078
|
paddingX: "4"
|
8044
|
-
}, /* @__PURE__ */
|
8079
|
+
}, /* @__PURE__ */ import_react82.default.createElement(Typography2.SmallText, null, "Page")), /* @__PURE__ */ import_react82.default.createElement(InputBase, {
|
8045
8080
|
className: classNames(tw("text-center max-w-[40px]"), "no-arrows"),
|
8046
8081
|
type: "number",
|
8047
8082
|
min: 1,
|
@@ -8064,43 +8099,43 @@ var Pagination = ({
|
|
8064
8099
|
setValue(1);
|
8065
8100
|
}
|
8066
8101
|
}
|
8067
|
-
}), /* @__PURE__ */
|
8102
|
+
}), /* @__PURE__ */ import_react82.default.createElement(Box, {
|
8068
8103
|
paddingX: "4"
|
8069
|
-
}, /* @__PURE__ */
|
8104
|
+
}, /* @__PURE__ */ import_react82.default.createElement(Typography2.SmallText, null, "of ", totalPages)), /* @__PURE__ */ import_react82.default.createElement(IconButton, {
|
8070
8105
|
"aria-label": "Next",
|
8071
8106
|
onClick: () => onPageChange(currentPage + 1),
|
8072
8107
|
icon: import_chevronRight3.default,
|
8073
8108
|
disabled: !hasNextPage
|
8074
|
-
}), /* @__PURE__ */
|
8109
|
+
}), /* @__PURE__ */ import_react82.default.createElement(IconButton, {
|
8075
8110
|
"aria-label": "Last",
|
8076
8111
|
onClick: () => onPageChange(totalPages),
|
8077
8112
|
icon: import_chevronForward.default,
|
8078
8113
|
disabled: !hasNextPage
|
8079
|
-
})), /* @__PURE__ */
|
8114
|
+
})), /* @__PURE__ */ import_react82.default.createElement("div", null));
|
8080
8115
|
};
|
8081
8116
|
|
8082
8117
|
// src/components/PopoverDialog/PopoverDialog.tsx
|
8083
|
-
var
|
8118
|
+
var import_react84 = __toESM(require("react"));
|
8084
8119
|
var import_omit15 = __toESM(require("lodash/omit"));
|
8085
8120
|
|
8086
8121
|
// src/common/PopoverDialog/PopoverDialog.tsx
|
8087
|
-
var
|
8122
|
+
var import_react83 = __toESM(require("react"));
|
8088
8123
|
var Header = (_a) => {
|
8089
8124
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
8090
|
-
return /* @__PURE__ */
|
8125
|
+
return /* @__PURE__ */ import_react83.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8091
8126
|
className: classNames(tw("p-5 gap-3 flex items-center"), className)
|
8092
8127
|
}), children);
|
8093
8128
|
};
|
8094
8129
|
var Title = (_a) => {
|
8095
8130
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
8096
|
-
return /* @__PURE__ */
|
8131
|
+
return /* @__PURE__ */ import_react83.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
|
8097
8132
|
htmlTag: "h1",
|
8098
8133
|
variant: "small-strong"
|
8099
8134
|
}), children);
|
8100
8135
|
};
|
8101
8136
|
var Body = (_a) => {
|
8102
8137
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
8103
|
-
return /* @__PURE__ */
|
8138
|
+
return /* @__PURE__ */ import_react83.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
|
8104
8139
|
htmlTag: "div",
|
8105
8140
|
variant: "caption",
|
8106
8141
|
className: classNames(tw("px-5 overflow-y-auto"), className)
|
@@ -8108,13 +8143,13 @@ var Body = (_a) => {
|
|
8108
8143
|
};
|
8109
8144
|
var Footer = (_a) => {
|
8110
8145
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
8111
|
-
return /* @__PURE__ */
|
8146
|
+
return /* @__PURE__ */ import_react83.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8112
8147
|
className: classNames(tw("p-5"), className)
|
8113
8148
|
}), children);
|
8114
8149
|
};
|
8115
8150
|
var Actions2 = (_a) => {
|
8116
8151
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
8117
|
-
return /* @__PURE__ */
|
8152
|
+
return /* @__PURE__ */ import_react83.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8118
8153
|
className: classNames(tw("flex gap-4"), className)
|
8119
8154
|
}), children);
|
8120
8155
|
};
|
@@ -8130,13 +8165,13 @@ var PopoverDialog = {
|
|
8130
8165
|
var PopoverDialog2 = ({ placement, open, title, secondaryAction, primaryAction, children }) => {
|
8131
8166
|
const wrapPromptWithBody = (child) => {
|
8132
8167
|
if (isComponentType(child, PopoverDialog2.Prompt)) {
|
8133
|
-
return /* @__PURE__ */
|
8168
|
+
return /* @__PURE__ */ import_react84.default.createElement(Popover2.Panel, {
|
8134
8169
|
className: tw("max-w-[300px]")
|
8135
|
-
}, /* @__PURE__ */
|
8170
|
+
}, /* @__PURE__ */ import_react84.default.createElement(PopoverDialog.Header, null, /* @__PURE__ */ import_react84.default.createElement(PopoverDialog.Title, null, title)), child, /* @__PURE__ */ import_react84.default.createElement(PopoverDialog.Footer, null, /* @__PURE__ */ import_react84.default.createElement(PopoverDialog.Actions, null, secondaryAction && /* @__PURE__ */ import_react84.default.createElement(Popover2.Button, __spreadValues({
|
8136
8171
|
kind: "secondary-ghost",
|
8137
8172
|
key: secondaryAction.text,
|
8138
8173
|
dense: true
|
8139
|
-
}, (0, import_omit15.default)(secondaryAction, "text")), secondaryAction.text), /* @__PURE__ */
|
8174
|
+
}, (0, import_omit15.default)(secondaryAction, "text")), secondaryAction.text), /* @__PURE__ */ import_react84.default.createElement(Popover2.Button, __spreadValues({
|
8140
8175
|
kind: "ghost",
|
8141
8176
|
key: primaryAction.text,
|
8142
8177
|
dense: true
|
@@ -8144,7 +8179,7 @@ var PopoverDialog2 = ({ placement, open, title, secondaryAction, primaryAction,
|
|
8144
8179
|
}
|
8145
8180
|
return child;
|
8146
8181
|
};
|
8147
|
-
return /* @__PURE__ */
|
8182
|
+
return /* @__PURE__ */ import_react84.default.createElement(Popover2, {
|
8148
8183
|
type: "dialog",
|
8149
8184
|
isOpen: open,
|
8150
8185
|
placement,
|
@@ -8152,10 +8187,10 @@ var PopoverDialog2 = ({ placement, open, title, secondaryAction, primaryAction,
|
|
8152
8187
|
isKeyboardDismissDisabled: false,
|
8153
8188
|
autoFocus: true,
|
8154
8189
|
containFocus: true
|
8155
|
-
},
|
8190
|
+
}, import_react84.default.Children.map(children, wrapPromptWithBody));
|
8156
8191
|
};
|
8157
8192
|
PopoverDialog2.Trigger = Popover2.Trigger;
|
8158
|
-
var Prompt = ({ children }) => /* @__PURE__ */
|
8193
|
+
var Prompt = ({ children }) => /* @__PURE__ */ import_react84.default.createElement(PopoverDialog.Body, null, children);
|
8159
8194
|
Prompt.displayName = "PopoverDialog.Prompt";
|
8160
8195
|
PopoverDialog2.Prompt = Prompt;
|
8161
8196
|
|
@@ -8164,14 +8199,14 @@ var import_react_dom = require("react-dom");
|
|
8164
8199
|
var Portal = ({ children, to }) => (0, import_react_dom.createPortal)(children, to);
|
8165
8200
|
|
8166
8201
|
// src/components/ProgressBar/ProgressBar.tsx
|
8167
|
-
var
|
8202
|
+
var import_react86 = __toESM(require("react"));
|
8168
8203
|
|
8169
8204
|
// src/common/ProgressBar/ProgressBar.tsx
|
8170
|
-
var
|
8205
|
+
var import_react85 = __toESM(require("react"));
|
8171
8206
|
var import_clamp2 = __toESM(require("lodash/clamp"));
|
8172
8207
|
var ProgressBar = (_a) => {
|
8173
8208
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
8174
|
-
return /* @__PURE__ */
|
8209
|
+
return /* @__PURE__ */ import_react85.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8175
8210
|
className: classNames(
|
8176
8211
|
tw("relative flex items-center w-full bg-grey-0 h-2 rounded-full overflow-hidden"),
|
8177
8212
|
className
|
@@ -8187,7 +8222,7 @@ var STATUS_COLORS = {
|
|
8187
8222
|
ProgressBar.Indicator = (_a) => {
|
8188
8223
|
var _b = _a, { min, max, value, "aria-label": ariaLabel, status, className } = _b, rest = __objRest(_b, ["min", "max", "value", "aria-label", "status", "className"]);
|
8189
8224
|
const completedPercentage = (0, import_clamp2.default)((value - min) / (max - min) * 100, 0, 100);
|
8190
|
-
return /* @__PURE__ */
|
8225
|
+
return /* @__PURE__ */ import_react85.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8191
8226
|
className: classNames(
|
8192
8227
|
tw("h-2 rounded-full transition-all ease-in-out delay-150"),
|
8193
8228
|
STATUS_COLORS[status],
|
@@ -8203,11 +8238,11 @@ ProgressBar.Indicator = (_a) => {
|
|
8203
8238
|
};
|
8204
8239
|
ProgressBar.Labels = (_a) => {
|
8205
8240
|
var _b = _a, { children, startLabel, endLabel, className } = _b, rest = __objRest(_b, ["children", "startLabel", "endLabel", "className"]);
|
8206
|
-
return /* @__PURE__ */
|
8241
|
+
return /* @__PURE__ */ import_react85.default.createElement("div", {
|
8207
8242
|
className: classNames(tw("flex flex-row"), className)
|
8208
|
-
}, /* @__PURE__ */
|
8243
|
+
}, /* @__PURE__ */ import_react85.default.createElement("span", __spreadProps(__spreadValues({}, rest), {
|
8209
8244
|
className: tw("grow text-grey-70 typography-caption")
|
8210
|
-
}), startLabel), /* @__PURE__ */
|
8245
|
+
}), startLabel), /* @__PURE__ */ import_react85.default.createElement("span", __spreadProps(__spreadValues({}, rest), {
|
8211
8246
|
className: tw("grow text-grey-70 typography-caption text-right")
|
8212
8247
|
}), endLabel));
|
8213
8248
|
};
|
@@ -8225,7 +8260,7 @@ var ProgressBar2 = (props) => {
|
|
8225
8260
|
if (min > max) {
|
8226
8261
|
throw new Error("`min` value provided to `ProgressBar` is greater than `max` value.");
|
8227
8262
|
}
|
8228
|
-
const progress = /* @__PURE__ */
|
8263
|
+
const progress = /* @__PURE__ */ import_react86.default.createElement(ProgressBar, null, /* @__PURE__ */ import_react86.default.createElement(ProgressBar.Indicator, {
|
8229
8264
|
status: value === max ? completedStatus : progresStatus,
|
8230
8265
|
min,
|
8231
8266
|
max,
|
@@ -8235,25 +8270,27 @@ var ProgressBar2 = (props) => {
|
|
8235
8270
|
if (props.dense) {
|
8236
8271
|
return progress;
|
8237
8272
|
}
|
8238
|
-
return /* @__PURE__ */
|
8273
|
+
return /* @__PURE__ */ import_react86.default.createElement("div", null, progress, /* @__PURE__ */ import_react86.default.createElement(ProgressBar.Labels, {
|
8239
8274
|
className: tw("py-2"),
|
8240
8275
|
startLabel: props.startLabel,
|
8241
8276
|
endLabel: props.endLabel
|
8242
8277
|
}));
|
8243
8278
|
};
|
8244
|
-
|
8279
|
+
var ProgressBarSkeleton = () => /* @__PURE__ */ import_react86.default.createElement(Skeleton, {
|
8245
8280
|
height: 4,
|
8246
8281
|
display: "block"
|
8247
8282
|
});
|
8283
|
+
ProgressBar2.Skeleton = ProgressBarSkeleton;
|
8284
|
+
ProgressBar2.Skeleton.displayName = "ProgressBar.Skeleton";
|
8248
8285
|
|
8249
8286
|
// src/components/RadioButton/RadioButton.tsx
|
8250
|
-
var
|
8251
|
-
var RadioButton2 =
|
8287
|
+
var import_react87 = __toESM(require("react"));
|
8288
|
+
var RadioButton2 = import_react87.default.forwardRef(
|
8252
8289
|
(_a, ref) => {
|
8253
8290
|
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"]);
|
8254
8291
|
var _a2;
|
8255
8292
|
const isChecked = (_a2 = props.checked) != null ? _a2 : props.defaultChecked;
|
8256
|
-
return !readOnly || isChecked ? /* @__PURE__ */
|
8293
|
+
return !readOnly || isChecked ? /* @__PURE__ */ import_react87.default.createElement(ControlLabel, {
|
8257
8294
|
htmlFor: id,
|
8258
8295
|
label: children,
|
8259
8296
|
"aria-label": ariaLabel,
|
@@ -8261,7 +8298,7 @@ var RadioButton2 = import_react85.default.forwardRef(
|
|
8261
8298
|
readOnly,
|
8262
8299
|
disabled,
|
8263
8300
|
style: { gap: "0 8px" }
|
8264
|
-
}, !readOnly && /* @__PURE__ */
|
8301
|
+
}, !readOnly && /* @__PURE__ */ import_react87.default.createElement(RadioButton, __spreadProps(__spreadValues({
|
8265
8302
|
id,
|
8266
8303
|
ref,
|
8267
8304
|
name
|
@@ -8271,22 +8308,24 @@ var RadioButton2 = import_react85.default.forwardRef(
|
|
8271
8308
|
}))) : null;
|
8272
8309
|
}
|
8273
8310
|
);
|
8274
|
-
|
8311
|
+
RadioButton2.displayName = "RadioButton";
|
8312
|
+
var RadioButtonSkeleton = () => /* @__PURE__ */ import_react87.default.createElement("div", {
|
8275
8313
|
className: tw("flex gap-3")
|
8276
|
-
}, /* @__PURE__ */
|
8314
|
+
}, /* @__PURE__ */ import_react87.default.createElement(Skeleton, {
|
8277
8315
|
height: 20,
|
8278
8316
|
width: 20
|
8279
|
-
}), /* @__PURE__ */
|
8317
|
+
}), /* @__PURE__ */ import_react87.default.createElement(Skeleton, {
|
8280
8318
|
height: 20,
|
8281
8319
|
width: 150
|
8282
8320
|
}));
|
8283
8321
|
RadioButton2.Skeleton = RadioButtonSkeleton;
|
8322
|
+
RadioButton2.Skeleton.displayName = "RadioButton.Skeleton";
|
8284
8323
|
|
8285
8324
|
// src/components/RadioButtonGroup/RadioButtonGroup.tsx
|
8286
|
-
var
|
8325
|
+
var import_react88 = __toESM(require("react"));
|
8287
8326
|
var import_uniqueId8 = __toESM(require("lodash/uniqueId"));
|
8288
8327
|
var isRadioButton = (c) => {
|
8289
|
-
return
|
8328
|
+
return import_react88.default.isValidElement(c) && c.type === RadioButton2;
|
8290
8329
|
};
|
8291
8330
|
var RadioButtonGroup = (_a) => {
|
8292
8331
|
var _b = _a, {
|
@@ -8309,7 +8348,7 @@ var RadioButtonGroup = (_a) => {
|
|
8309
8348
|
"children"
|
8310
8349
|
]);
|
8311
8350
|
var _a2;
|
8312
|
-
const [value, setValue] =
|
8351
|
+
const [value, setValue] = import_react88.default.useState((_a2 = _value != null ? _value : defaultValue) != null ? _a2 : "");
|
8313
8352
|
const errorMessageId = (0, import_uniqueId8.default)();
|
8314
8353
|
const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
|
8315
8354
|
const labelControlProps = getLabelControlProps(props);
|
@@ -8320,14 +8359,14 @@ var RadioButtonGroup = (_a) => {
|
|
8320
8359
|
setValue(e.target.value);
|
8321
8360
|
onChange == null ? void 0 : onChange(e.target.value);
|
8322
8361
|
};
|
8323
|
-
const content =
|
8362
|
+
const content = import_react88.default.Children.map(children, (c) => {
|
8324
8363
|
var _a3, _b2, _c;
|
8325
8364
|
if (!isRadioButton(c)) {
|
8326
8365
|
return null;
|
8327
8366
|
}
|
8328
8367
|
const defaultChecked = defaultValue === void 0 ? void 0 : c.props.value === defaultValue;
|
8329
8368
|
const checked = value === void 0 ? void 0 : c.props.value === value;
|
8330
|
-
return
|
8369
|
+
return import_react88.default.cloneElement(c, {
|
8331
8370
|
name,
|
8332
8371
|
defaultChecked: (_a3 = c.props.defaultChecked) != null ? _a3 : defaultChecked,
|
8333
8372
|
checked: (_b2 = c.props.checked) != null ? _b2 : checked,
|
@@ -8336,11 +8375,11 @@ var RadioButtonGroup = (_a) => {
|
|
8336
8375
|
readOnly
|
8337
8376
|
});
|
8338
8377
|
});
|
8339
|
-
return /* @__PURE__ */
|
8378
|
+
return /* @__PURE__ */ import_react88.default.createElement(LabelControl, __spreadValues(__spreadValues({
|
8340
8379
|
fieldset: true
|
8341
|
-
}, labelControlProps), errorProps), cols && /* @__PURE__ */
|
8380
|
+
}, labelControlProps), errorProps), cols && /* @__PURE__ */ import_react88.default.createElement(InputGroup, {
|
8342
8381
|
cols
|
8343
|
-
}, content), !cols && /* @__PURE__ */
|
8382
|
+
}, content), !cols && /* @__PURE__ */ import_react88.default.createElement(Flexbox, {
|
8344
8383
|
direction,
|
8345
8384
|
alignItems: "flex-start",
|
8346
8385
|
colGap: "8",
|
@@ -8349,80 +8388,81 @@ var RadioButtonGroup = (_a) => {
|
|
8349
8388
|
}, content));
|
8350
8389
|
};
|
8351
8390
|
var RadioButtonGroupSkeleton = ({ direction = "row", options = 2 }) => {
|
8352
|
-
return /* @__PURE__ */
|
8391
|
+
return /* @__PURE__ */ import_react88.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react88.default.createElement("div", {
|
8353
8392
|
className: tw("flex flex-wrap", {
|
8354
8393
|
"flex-row gap-8": direction === "row",
|
8355
8394
|
"flex-col gap-2": direction === "column"
|
8356
8395
|
})
|
8357
|
-
}, Array.from({ length: options }).map((_, key) => /* @__PURE__ */
|
8396
|
+
}, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ import_react88.default.createElement(RadioButton2.Skeleton, {
|
8358
8397
|
key
|
8359
8398
|
}))));
|
8360
8399
|
};
|
8361
8400
|
RadioButtonGroup.Skeleton = RadioButtonGroupSkeleton;
|
8401
|
+
RadioButtonGroup.Skeleton.displayName = "RadioButtonGroup.Skeleton";
|
8362
8402
|
|
8363
8403
|
// src/components/Section/Section.tsx
|
8364
|
-
var
|
8404
|
+
var import_react90 = __toESM(require("react"));
|
8365
8405
|
var import_castArray4 = __toESM(require("lodash/castArray"));
|
8366
8406
|
|
8367
8407
|
// src/common/Section/Section.tsx
|
8368
|
-
var
|
8408
|
+
var import_react89 = __toESM(require("react"));
|
8369
8409
|
var Section2 = (_a) => {
|
8370
8410
|
var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
|
8371
|
-
return /* @__PURE__ */
|
8411
|
+
return /* @__PURE__ */ import_react89.default.createElement(Box, __spreadValues({
|
8372
8412
|
borderColor: "grey-5",
|
8373
8413
|
borderWidth: "1px"
|
8374
8414
|
}, rest), children);
|
8375
8415
|
};
|
8376
8416
|
Section2.Header = (_a) => {
|
8377
8417
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
8378
|
-
return /* @__PURE__ */
|
8418
|
+
return /* @__PURE__ */ import_react89.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8379
8419
|
className: classNames(tw("px-6 py-5 flex gap-5 justify-between items-center"), className)
|
8380
8420
|
}), children);
|
8381
8421
|
};
|
8382
8422
|
Section2.TitleContainer = (_a) => {
|
8383
8423
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
8384
|
-
return /* @__PURE__ */
|
8424
|
+
return /* @__PURE__ */ import_react89.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8385
8425
|
className: classNames(tw("flex flex-col grow gap-2"), className)
|
8386
8426
|
}), children);
|
8387
8427
|
};
|
8388
8428
|
Section2.Title = (_a) => {
|
8389
8429
|
var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
|
8390
|
-
return /* @__PURE__ */
|
8430
|
+
return /* @__PURE__ */ import_react89.default.createElement(Typography2.Subheading, __spreadProps(__spreadValues({}, rest), {
|
8391
8431
|
color: "black"
|
8392
8432
|
}), children);
|
8393
8433
|
};
|
8394
8434
|
Section2.Subtitle = (_a) => {
|
8395
8435
|
var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
|
8396
|
-
return /* @__PURE__ */
|
8436
|
+
return /* @__PURE__ */ import_react89.default.createElement(Typography2.SmallText, __spreadProps(__spreadValues({}, rest), {
|
8397
8437
|
color: "grey-70"
|
8398
8438
|
}), children);
|
8399
8439
|
};
|
8400
8440
|
Section2.Actions = (_a) => {
|
8401
8441
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
8402
|
-
return /* @__PURE__ */
|
8442
|
+
return /* @__PURE__ */ import_react89.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8403
8443
|
className: classNames(tw("flex gap-4 justify-end"), className)
|
8404
8444
|
}), children);
|
8405
8445
|
};
|
8406
8446
|
Section2.Body = (_a) => {
|
8407
8447
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
8408
|
-
return /* @__PURE__ */
|
8448
|
+
return /* @__PURE__ */ import_react89.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8409
8449
|
className: classNames(tw("p-6"), className)
|
8410
|
-
}), /* @__PURE__ */
|
8450
|
+
}), /* @__PURE__ */ import_react89.default.createElement(Typography, {
|
8411
8451
|
htmlTag: "div",
|
8412
8452
|
color: "grey-70"
|
8413
8453
|
}, children));
|
8414
8454
|
};
|
8415
8455
|
|
8416
8456
|
// src/components/Section/Section.tsx
|
8417
|
-
var Section3 = ({ title, subtitle, actions, children }) => /* @__PURE__ */
|
8457
|
+
var Section3 = ({ title, subtitle, actions, children }) => /* @__PURE__ */ import_react90.default.createElement(Section2, null, title && /* @__PURE__ */ import_react90.default.createElement(import_react90.default.Fragment, null, /* @__PURE__ */ import_react90.default.createElement(Section2.Header, null, /* @__PURE__ */ import_react90.default.createElement(Section2.TitleContainer, null, /* @__PURE__ */ import_react90.default.createElement(Section2.Title, null, title), subtitle && /* @__PURE__ */ import_react90.default.createElement(Section2.Subtitle, null, subtitle)), /* @__PURE__ */ import_react90.default.createElement(Section2.Actions, null, actions && (0, import_castArray4.default)(actions).filter(Boolean).map((_a) => {
|
8418
8458
|
var _b = _a, { text } = _b, action = __objRest(_b, ["text"]);
|
8419
|
-
return /* @__PURE__ */
|
8459
|
+
return /* @__PURE__ */ import_react90.default.createElement(SecondaryButton, __spreadValues({
|
8420
8460
|
key: text
|
8421
8461
|
}, action), text);
|
8422
|
-
}))), /* @__PURE__ */
|
8462
|
+
}))), /* @__PURE__ */ import_react90.default.createElement(Divider2, null)), /* @__PURE__ */ import_react90.default.createElement(Section2.Body, null, children));
|
8423
8463
|
|
8424
8464
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
8425
|
-
var
|
8465
|
+
var import_react91 = __toESM(require("react"));
|
8426
8466
|
var SegmentedControl = (_a) => {
|
8427
8467
|
var _b = _a, {
|
8428
8468
|
children,
|
@@ -8439,7 +8479,7 @@ var SegmentedControl = (_a) => {
|
|
8439
8479
|
"selected",
|
8440
8480
|
"className"
|
8441
8481
|
]);
|
8442
|
-
return /* @__PURE__ */
|
8482
|
+
return /* @__PURE__ */ import_react91.default.createElement("button", __spreadProps(__spreadValues({
|
8443
8483
|
type: "button"
|
8444
8484
|
}, rest), {
|
8445
8485
|
className: classNames(
|
@@ -8470,11 +8510,11 @@ var SegmentedControlGroup = (_a) => {
|
|
8470
8510
|
"border border-grey-20 text-grey-50": variant === "outlined",
|
8471
8511
|
"bg-grey-0": variant === "raised"
|
8472
8512
|
});
|
8473
|
-
return /* @__PURE__ */
|
8513
|
+
return /* @__PURE__ */ import_react91.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8474
8514
|
className: classNames(classes, className)
|
8475
|
-
}),
|
8515
|
+
}), import_react91.default.Children.map(
|
8476
8516
|
children,
|
8477
|
-
(child) =>
|
8517
|
+
(child) => import_react91.default.cloneElement(child, {
|
8478
8518
|
dense,
|
8479
8519
|
variant,
|
8480
8520
|
onClick: () => onChange(child.props.value),
|
@@ -8512,14 +8552,14 @@ var getCommonClassNames = (dense, selected) => tw(
|
|
8512
8552
|
);
|
8513
8553
|
|
8514
8554
|
// src/components/Stepper/Stepper.tsx
|
8515
|
-
var
|
8555
|
+
var import_react93 = __toESM(require("react"));
|
8516
8556
|
|
8517
8557
|
// src/common/Stepper/Stepper.tsx
|
8518
|
-
var
|
8558
|
+
var import_react92 = __toESM(require("react"));
|
8519
8559
|
var import_tick5 = __toESM(require_tick());
|
8520
8560
|
var Stepper = (_a) => {
|
8521
8561
|
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
|
8522
|
-
return /* @__PURE__ */
|
8562
|
+
return /* @__PURE__ */ import_react92.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8523
8563
|
className: classNames(className)
|
8524
8564
|
}));
|
8525
8565
|
};
|
@@ -8533,7 +8573,7 @@ var ConnectorContainer = (_a) => {
|
|
8533
8573
|
"completed",
|
8534
8574
|
"dense"
|
8535
8575
|
]);
|
8536
|
-
return /* @__PURE__ */
|
8576
|
+
return /* @__PURE__ */ import_react92.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8537
8577
|
className: classNames(
|
8538
8578
|
tw("absolute w-full -left-1/2", {
|
8539
8579
|
"top-[3px] px-[14px]": Boolean(dense),
|
@@ -8545,7 +8585,7 @@ var ConnectorContainer = (_a) => {
|
|
8545
8585
|
};
|
8546
8586
|
var Connector = (_a) => {
|
8547
8587
|
var _b = _a, { children, className, completed, dense } = _b, rest = __objRest(_b, ["children", "className", "completed", "dense"]);
|
8548
|
-
return /* @__PURE__ */
|
8588
|
+
return /* @__PURE__ */ import_react92.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8549
8589
|
className: classNames(
|
8550
8590
|
tw("w-full", {
|
8551
8591
|
"bg-grey-20": !completed,
|
@@ -8559,7 +8599,7 @@ var Connector = (_a) => {
|
|
8559
8599
|
};
|
8560
8600
|
var Step = (_a) => {
|
8561
8601
|
var _b = _a, { className, state } = _b, rest = __objRest(_b, ["className", "state"]);
|
8562
|
-
return /* @__PURE__ */
|
8602
|
+
return /* @__PURE__ */ import_react92.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8563
8603
|
className: classNames(
|
8564
8604
|
tw("flex flex-col items-center text-grey-90 relative text-center", {
|
8565
8605
|
"text-grey-20": state === "inactive"
|
@@ -8580,13 +8620,13 @@ var getDenseClassNames = (state) => tw("h-[8px] w-[8px]", {
|
|
8580
8620
|
});
|
8581
8621
|
var Indicator = (_a) => {
|
8582
8622
|
var _b = _a, { children, className, state, dense } = _b, rest = __objRest(_b, ["children", "className", "state", "dense"]);
|
8583
|
-
return /* @__PURE__ */
|
8623
|
+
return /* @__PURE__ */ import_react92.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8584
8624
|
className: classNames(
|
8585
8625
|
tw("rounded-full flex justify-center items-center mx-2 mb-3"),
|
8586
8626
|
dense ? getDenseClassNames(state) : getClassNames(state),
|
8587
8627
|
className
|
8588
8628
|
)
|
8589
|
-
}), state === "completed" ? /* @__PURE__ */
|
8629
|
+
}), state === "completed" ? /* @__PURE__ */ import_react92.default.createElement(InlineIcon, {
|
8590
8630
|
icon: import_tick5.default
|
8591
8631
|
}) : dense ? null : children);
|
8592
8632
|
};
|
@@ -8597,25 +8637,25 @@ Stepper.ConnectorContainer = ConnectorContainer;
|
|
8597
8637
|
|
8598
8638
|
// src/components/Stepper/Stepper.tsx
|
8599
8639
|
var Stepper2 = ({ children, activeIndex, dense }) => {
|
8600
|
-
const steps =
|
8601
|
-
return /* @__PURE__ */
|
8640
|
+
const steps = import_react93.default.Children.count(children);
|
8641
|
+
return /* @__PURE__ */ import_react93.default.createElement(Stepper, {
|
8602
8642
|
role: "list"
|
8603
|
-
}, /* @__PURE__ */
|
8643
|
+
}, /* @__PURE__ */ import_react93.default.createElement(Template, {
|
8604
8644
|
columns: steps
|
8605
|
-
},
|
8645
|
+
}, import_react93.default.Children.map(children, (child, index) => {
|
8606
8646
|
if (!isComponentType(child, Step2)) {
|
8607
8647
|
return new Error("<Stepper> can only have <Stepper.Step> components as children");
|
8608
8648
|
} else {
|
8609
8649
|
const state = index > activeIndex ? "inactive" : index === activeIndex ? "active" : "completed";
|
8610
|
-
return /* @__PURE__ */
|
8650
|
+
return /* @__PURE__ */ import_react93.default.createElement(Stepper.Step, {
|
8611
8651
|
state,
|
8612
8652
|
"aria-current": state === "active" ? "step" : false,
|
8613
8653
|
role: "listitem"
|
8614
|
-
}, index > 0 && index <= steps && /* @__PURE__ */
|
8654
|
+
}, index > 0 && index <= steps && /* @__PURE__ */ import_react93.default.createElement(Stepper.ConnectorContainer, {
|
8615
8655
|
dense
|
8616
|
-
}, /* @__PURE__ */
|
8656
|
+
}, /* @__PURE__ */ import_react93.default.createElement(Stepper.ConnectorContainer.Connector, {
|
8617
8657
|
completed: state === "completed" || state === "active"
|
8618
|
-
})), /* @__PURE__ */
|
8658
|
+
})), /* @__PURE__ */ import_react93.default.createElement(Stepper.Step.Indicator, {
|
8619
8659
|
state,
|
8620
8660
|
dense
|
8621
8661
|
}, index + 1), child.props.children);
|
@@ -8623,19 +8663,20 @@ var Stepper2 = ({ children, activeIndex, dense }) => {
|
|
8623
8663
|
})));
|
8624
8664
|
};
|
8625
8665
|
var Step2 = () => null;
|
8666
|
+
Step2.displayName = "Stepper.Step";
|
8626
8667
|
Stepper2.Step = Step2;
|
8627
8668
|
|
8628
8669
|
// src/components/Switch/Switch.tsx
|
8629
|
-
var
|
8670
|
+
var import_react95 = __toESM(require("react"));
|
8630
8671
|
|
8631
8672
|
// src/common/Switch/Switch.tsx
|
8632
|
-
var
|
8633
|
-
var Switch =
|
8673
|
+
var import_react94 = __toESM(require("react"));
|
8674
|
+
var Switch = import_react94.default.forwardRef(
|
8634
8675
|
(_a, ref) => {
|
8635
8676
|
var _b = _a, { id, children, name, disabled = false, readOnly = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly"]);
|
8636
|
-
return /* @__PURE__ */
|
8677
|
+
return /* @__PURE__ */ import_react94.default.createElement("span", {
|
8637
8678
|
className: tw("relative inline-flex justify-center items-center self-center group")
|
8638
|
-
}, /* @__PURE__ */
|
8679
|
+
}, /* @__PURE__ */ import_react94.default.createElement("input", __spreadProps(__spreadValues({
|
8639
8680
|
id,
|
8640
8681
|
ref,
|
8641
8682
|
type: "checkbox",
|
@@ -8654,7 +8695,7 @@ var Switch = import_react92.default.forwardRef(
|
|
8654
8695
|
),
|
8655
8696
|
readOnly,
|
8656
8697
|
disabled
|
8657
|
-
})), /* @__PURE__ */
|
8698
|
+
})), /* @__PURE__ */ import_react94.default.createElement("span", {
|
8658
8699
|
className: tw(
|
8659
8700
|
"pointer-events-none rounded-full absolute inline-block transition duration-300 h-4 w-4 transform peer-checked/switch:translate-x-5",
|
8660
8701
|
"bg-white peer-disabled/switch:bg-grey-0 left-2 peer-checked/switch:left-1",
|
@@ -8667,12 +8708,12 @@ var Switch = import_react92.default.forwardRef(
|
|
8667
8708
|
);
|
8668
8709
|
|
8669
8710
|
// src/components/Switch/Switch.tsx
|
8670
|
-
var Switch2 =
|
8711
|
+
var Switch2 = import_react95.default.forwardRef(
|
8671
8712
|
(_a, ref) => {
|
8672
8713
|
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"]);
|
8673
8714
|
var _a2;
|
8674
8715
|
const isChecked = (_a2 = props.checked) != null ? _a2 : props.defaultChecked;
|
8675
|
-
return !readOnly || isChecked ? /* @__PURE__ */
|
8716
|
+
return !readOnly || isChecked ? /* @__PURE__ */ import_react95.default.createElement(ControlLabel, {
|
8676
8717
|
htmlFor: id,
|
8677
8718
|
label: children,
|
8678
8719
|
"aria-label": ariaLabel,
|
@@ -8680,7 +8721,7 @@ var Switch2 = import_react93.default.forwardRef(
|
|
8680
8721
|
readOnly,
|
8681
8722
|
disabled,
|
8682
8723
|
style: { gap: "0 8px" }
|
8683
|
-
}, !readOnly && /* @__PURE__ */
|
8724
|
+
}, !readOnly && /* @__PURE__ */ import_react95.default.createElement(Switch, __spreadProps(__spreadValues({
|
8684
8725
|
id,
|
8685
8726
|
ref,
|
8686
8727
|
name
|
@@ -8690,19 +8731,21 @@ var Switch2 = import_react93.default.forwardRef(
|
|
8690
8731
|
}))) : null;
|
8691
8732
|
}
|
8692
8733
|
);
|
8693
|
-
|
8734
|
+
Switch2.displayName = "Switch";
|
8735
|
+
var SwitchSkeleton = () => /* @__PURE__ */ import_react95.default.createElement("div", {
|
8694
8736
|
className: tw("flex gap-3")
|
8695
|
-
}, /* @__PURE__ */
|
8737
|
+
}, /* @__PURE__ */ import_react95.default.createElement(Skeleton, {
|
8696
8738
|
height: 20,
|
8697
8739
|
width: 35
|
8698
|
-
}), /* @__PURE__ */
|
8740
|
+
}), /* @__PURE__ */ import_react95.default.createElement(Skeleton, {
|
8699
8741
|
height: 20,
|
8700
8742
|
width: 150
|
8701
8743
|
}));
|
8702
8744
|
Switch2.Skeleton = SwitchSkeleton;
|
8745
|
+
Switch2.Skeleton.displayName = "Switch.Skeleton ";
|
8703
8746
|
|
8704
8747
|
// src/components/SwitchGroup/SwitchGroup.tsx
|
8705
|
-
var
|
8748
|
+
var import_react96 = __toESM(require("react"));
|
8706
8749
|
var import_uniqueId9 = __toESM(require("lodash/uniqueId"));
|
8707
8750
|
var SwitchGroup = (_a) => {
|
8708
8751
|
var _b = _a, {
|
@@ -8721,7 +8764,7 @@ var SwitchGroup = (_a) => {
|
|
8721
8764
|
"children"
|
8722
8765
|
]);
|
8723
8766
|
var _a2;
|
8724
|
-
const [selectedItems, setSelectedItems] = (0,
|
8767
|
+
const [selectedItems, setSelectedItems] = (0, import_react96.useState)((_a2 = value != null ? value : defaultValue) != null ? _a2 : []);
|
8725
8768
|
if (value !== void 0 && value !== selectedItems) {
|
8726
8769
|
setSelectedItems(value);
|
8727
8770
|
}
|
@@ -8734,11 +8777,11 @@ var SwitchGroup = (_a) => {
|
|
8734
8777
|
setSelectedItems(updated);
|
8735
8778
|
onChange == null ? void 0 : onChange(updated);
|
8736
8779
|
};
|
8737
|
-
return /* @__PURE__ */
|
8780
|
+
return /* @__PURE__ */ import_react96.default.createElement(LabelControl, __spreadValues(__spreadValues({
|
8738
8781
|
fieldset: true
|
8739
|
-
}, labelControlProps), errorProps), /* @__PURE__ */
|
8782
|
+
}, labelControlProps), errorProps), /* @__PURE__ */ import_react96.default.createElement(InputGroup, {
|
8740
8783
|
cols
|
8741
|
-
},
|
8784
|
+
}, import_react96.default.Children.map(children, (c) => {
|
8742
8785
|
var _a3, _b2, _c, _d;
|
8743
8786
|
if (!isComponentType(c, Switch2)) {
|
8744
8787
|
return null;
|
@@ -8746,7 +8789,7 @@ var SwitchGroup = (_a) => {
|
|
8746
8789
|
const str = (_a3 = c.props.value) == null ? void 0 : _a3.toString();
|
8747
8790
|
const defaultChecked = defaultValue === void 0 ? void 0 : str !== void 0 && defaultValue.includes(str);
|
8748
8791
|
const checked = value === void 0 ? void 0 : str !== void 0 && value.includes(str);
|
8749
|
-
return
|
8792
|
+
return import_react96.default.cloneElement(c, {
|
8750
8793
|
defaultChecked: (_b2 = c.props.defaultChecked) != null ? _b2 : defaultChecked,
|
8751
8794
|
checked: (_c = c.props.checked) != null ? _c : checked,
|
8752
8795
|
onChange: (_d = c.props.onChange) != null ? _d : handleChange,
|
@@ -8756,19 +8799,20 @@ var SwitchGroup = (_a) => {
|
|
8756
8799
|
})));
|
8757
8800
|
};
|
8758
8801
|
var SwitchGroupSkeleton = ({ options = 2 }) => {
|
8759
|
-
return /* @__PURE__ */
|
8802
|
+
return /* @__PURE__ */ import_react96.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react96.default.createElement("div", {
|
8760
8803
|
className: tw("flex flex-wrap flex-col gap-2")
|
8761
|
-
}, Array.from({ length: options }).map((_, key) => /* @__PURE__ */
|
8804
|
+
}, Array.from({ length: options }).map((_, key) => /* @__PURE__ */ import_react96.default.createElement(Switch2.Skeleton, {
|
8762
8805
|
key
|
8763
8806
|
}))));
|
8764
8807
|
};
|
8765
8808
|
SwitchGroup.Skeleton = SwitchGroupSkeleton;
|
8809
|
+
SwitchGroup.Skeleton.displayName = "SwitchGroup.Skeleton";
|
8766
8810
|
|
8767
8811
|
// src/components/TagLabel/TagLabel.tsx
|
8768
|
-
var
|
8812
|
+
var import_react97 = __toESM(require("react"));
|
8769
8813
|
var TagLabel = (_a) => {
|
8770
8814
|
var _b = _a, { title, dense = false } = _b, rest = __objRest(_b, ["title", "dense"]);
|
8771
|
-
return /* @__PURE__ */
|
8815
|
+
return /* @__PURE__ */ import_react97.default.createElement("span", __spreadProps(__spreadValues({}, rest), {
|
8772
8816
|
className: tw("rounded-full text-white bg-primary-70", {
|
8773
8817
|
"py-2 px-4 typography-caption": !dense,
|
8774
8818
|
"py-2 px-3 typography-caption-small": dense
|
@@ -8777,14 +8821,14 @@ var TagLabel = (_a) => {
|
|
8777
8821
|
};
|
8778
8822
|
|
8779
8823
|
// src/components/Textarea/Textarea.tsx
|
8780
|
-
var
|
8824
|
+
var import_react98 = __toESM(require("react"));
|
8781
8825
|
var import_omit16 = __toESM(require("lodash/omit"));
|
8782
8826
|
var import_toString2 = __toESM(require("lodash/toString"));
|
8783
8827
|
var import_uniqueId10 = __toESM(require("lodash/uniqueId"));
|
8784
|
-
var TextareaBase =
|
8828
|
+
var TextareaBase = import_react98.default.forwardRef(
|
8785
8829
|
(_a, ref) => {
|
8786
8830
|
var _b = _a, { readOnly = false, valid = true } = _b, props = __objRest(_b, ["readOnly", "valid"]);
|
8787
|
-
return /* @__PURE__ */
|
8831
|
+
return /* @__PURE__ */ import_react98.default.createElement("textarea", __spreadProps(__spreadValues({
|
8788
8832
|
ref
|
8789
8833
|
}, props), {
|
8790
8834
|
readOnly,
|
@@ -8792,23 +8836,23 @@ var TextareaBase = import_react96.default.forwardRef(
|
|
8792
8836
|
}));
|
8793
8837
|
}
|
8794
8838
|
);
|
8795
|
-
TextareaBase.Skeleton = () => /* @__PURE__ */
|
8839
|
+
TextareaBase.Skeleton = () => /* @__PURE__ */ import_react98.default.createElement(Skeleton, {
|
8796
8840
|
height: 58
|
8797
8841
|
});
|
8798
|
-
var Textarea =
|
8842
|
+
var Textarea = import_react98.default.forwardRef((props, ref) => {
|
8799
8843
|
var _a, _b, _c;
|
8800
|
-
const [value, setValue] = (0,
|
8801
|
-
const id = (0,
|
8844
|
+
const [value, setValue] = (0, import_react98.useState)((_b = (_a = props.value) != null ? _a : props.defaultValue) != null ? _b : "");
|
8845
|
+
const id = (0, import_react98.useRef)((_c = props.id) != null ? _c : `textarea-${(0, import_uniqueId10.default)()}`);
|
8802
8846
|
const errorMessageId = (0, import_uniqueId10.default)();
|
8803
8847
|
const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
|
8804
8848
|
const _d = getLabelControlProps(props), { "data-testid": dataTestId } = _d, labelControlProps = __objRest(_d, ["data-testid"]);
|
8805
8849
|
const baseProps = (0, import_omit16.default)(props, Object.keys(labelControlProps));
|
8806
|
-
return /* @__PURE__ */
|
8850
|
+
return /* @__PURE__ */ import_react98.default.createElement(LabelControl, __spreadValues({
|
8807
8851
|
id: `${id.current}-label`,
|
8808
8852
|
htmlFor: id.current,
|
8809
8853
|
messageId: errorMessageId,
|
8810
8854
|
length: value !== void 0 ? (0, import_toString2.default)(value).length : void 0
|
8811
|
-
}, labelControlProps), /* @__PURE__ */
|
8855
|
+
}, labelControlProps), /* @__PURE__ */ import_react98.default.createElement(TextareaBase, __spreadProps(__spreadValues(__spreadValues({
|
8812
8856
|
ref
|
8813
8857
|
}, baseProps), errorProps), {
|
8814
8858
|
id: id.current,
|
@@ -8824,47 +8868,49 @@ var Textarea = import_react96.default.forwardRef((props, ref) => {
|
|
8824
8868
|
valid: props.valid
|
8825
8869
|
})));
|
8826
8870
|
});
|
8827
|
-
|
8871
|
+
Textarea.displayName = "Textarea";
|
8872
|
+
var TextAreaSkeleton = () => /* @__PURE__ */ import_react98.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react98.default.createElement(TextareaBase.Skeleton, null));
|
8828
8873
|
Textarea.Skeleton = TextAreaSkeleton;
|
8874
|
+
Textarea.Skeleton.displayName = "Textarea.Skeleton";
|
8829
8875
|
|
8830
8876
|
// src/components/Timeline/Timeline.tsx
|
8831
|
-
var
|
8877
|
+
var import_react100 = __toESM(require("react"));
|
8832
8878
|
|
8833
8879
|
// src/common/Timeline/Timeline.tsx
|
8834
|
-
var
|
8880
|
+
var import_react99 = __toESM(require("react"));
|
8835
8881
|
var Timeline = (_a) => {
|
8836
8882
|
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
|
8837
|
-
return /* @__PURE__ */
|
8883
|
+
return /* @__PURE__ */ import_react99.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8838
8884
|
className: classNames(tw("grid grid-cols-[16px_1fr] gap-x-4"), className)
|
8839
8885
|
}));
|
8840
8886
|
};
|
8841
8887
|
var Content2 = (_a) => {
|
8842
8888
|
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
|
8843
|
-
return /* @__PURE__ */
|
8889
|
+
return /* @__PURE__ */ import_react99.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8844
8890
|
className: classNames(tw("pb-6"), className)
|
8845
8891
|
}));
|
8846
8892
|
};
|
8847
8893
|
var Separator2 = (_a) => {
|
8848
8894
|
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
|
8849
|
-
return /* @__PURE__ */
|
8895
|
+
return /* @__PURE__ */ import_react99.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8850
8896
|
className: classNames(tw("flex items-center justify-center h-5 w-5"), className)
|
8851
8897
|
}));
|
8852
8898
|
};
|
8853
8899
|
var LineContainer = (_a) => {
|
8854
8900
|
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
|
8855
|
-
return /* @__PURE__ */
|
8901
|
+
return /* @__PURE__ */ import_react99.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8856
8902
|
className: classNames(tw("flex justify-center py-1"), className)
|
8857
8903
|
}));
|
8858
8904
|
};
|
8859
8905
|
var Line = (_a) => {
|
8860
8906
|
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
|
8861
|
-
return /* @__PURE__ */
|
8907
|
+
return /* @__PURE__ */ import_react99.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8862
8908
|
className: classNames(tw("w-1 bg-grey-5 h-full justify-self-center"), className)
|
8863
8909
|
}));
|
8864
8910
|
};
|
8865
8911
|
var Dot = (_a) => {
|
8866
8912
|
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
|
8867
|
-
return /* @__PURE__ */
|
8913
|
+
return /* @__PURE__ */ import_react99.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
|
8868
8914
|
className: classNames(tw("bg-grey-30 h-[6px] w-[6px] rounded"), className)
|
8869
8915
|
}));
|
8870
8916
|
};
|
@@ -8879,61 +8925,62 @@ var import_error4 = __toESM(require_error());
|
|
8879
8925
|
var import_time = __toESM(require_time());
|
8880
8926
|
var import_warningSign4 = __toESM(require_warningSign());
|
8881
8927
|
var TimelineItem = () => null;
|
8882
|
-
var Timeline2 = ({ children }) => /* @__PURE__ */
|
8928
|
+
var Timeline2 = ({ children }) => /* @__PURE__ */ import_react100.default.createElement("div", null, import_react100.default.Children.map(children, (item) => {
|
8883
8929
|
if (!isComponentType(item, TimelineItem)) {
|
8884
8930
|
throw new Error("<Timeline> can only have <Timeline.Item> components as children");
|
8885
8931
|
} else {
|
8886
8932
|
const { props, key } = item;
|
8887
|
-
return /* @__PURE__ */
|
8933
|
+
return /* @__PURE__ */ import_react100.default.createElement(Timeline, {
|
8888
8934
|
key: key != null ? key : props.title
|
8889
|
-
}, /* @__PURE__ */
|
8935
|
+
}, /* @__PURE__ */ import_react100.default.createElement(Timeline.Separator, null, props.variant === "error" ? /* @__PURE__ */ import_react100.default.createElement(Icon, {
|
8890
8936
|
icon: import_error4.default,
|
8891
8937
|
color: "error-30"
|
8892
|
-
}) : props.variant === "warning" ? /* @__PURE__ */
|
8938
|
+
}) : props.variant === "warning" ? /* @__PURE__ */ import_react100.default.createElement(Icon, {
|
8893
8939
|
icon: import_warningSign4.default,
|
8894
8940
|
color: "warning-30"
|
8895
|
-
}) : props.variant === "info" ? /* @__PURE__ */
|
8941
|
+
}) : props.variant === "info" ? /* @__PURE__ */ import_react100.default.createElement(Icon, {
|
8896
8942
|
icon: import_time.default,
|
8897
8943
|
color: "info-30"
|
8898
|
-
}) : /* @__PURE__ */
|
8944
|
+
}) : /* @__PURE__ */ import_react100.default.createElement(Timeline.Separator.Dot, null)), /* @__PURE__ */ import_react100.default.createElement(Typography2.Caption, {
|
8899
8945
|
color: "grey-50"
|
8900
|
-
}, props.title), /* @__PURE__ */
|
8946
|
+
}, props.title), /* @__PURE__ */ import_react100.default.createElement(Timeline.LineContainer, null, /* @__PURE__ */ import_react100.default.createElement(Timeline.LineContainer.Line, null)), /* @__PURE__ */ import_react100.default.createElement(Timeline.Content, null, /* @__PURE__ */ import_react100.default.createElement(Typography2.Small, null, props.children)));
|
8901
8947
|
}
|
8902
8948
|
}));
|
8903
|
-
var TimelineItemSkeleton = () => /* @__PURE__ */
|
8949
|
+
var TimelineItemSkeleton = () => /* @__PURE__ */ import_react100.default.createElement(Timeline, null, /* @__PURE__ */ import_react100.default.createElement(Timeline.Separator, null, /* @__PURE__ */ import_react100.default.createElement(Skeleton, {
|
8904
8950
|
width: 6,
|
8905
8951
|
height: 6,
|
8906
8952
|
rounded: true
|
8907
|
-
})), /* @__PURE__ */
|
8953
|
+
})), /* @__PURE__ */ import_react100.default.createElement(Skeleton, {
|
8908
8954
|
height: 12,
|
8909
8955
|
width: 120
|
8910
|
-
}), /* @__PURE__ */
|
8956
|
+
}), /* @__PURE__ */ import_react100.default.createElement(Timeline.LineContainer, null, /* @__PURE__ */ import_react100.default.createElement(Skeleton, {
|
8911
8957
|
width: 2,
|
8912
8958
|
height: "100%"
|
8913
|
-
})), /* @__PURE__ */
|
8959
|
+
})), /* @__PURE__ */ import_react100.default.createElement(Timeline.Content, null, /* @__PURE__ */ import_react100.default.createElement(Box, {
|
8914
8960
|
display: "flex",
|
8915
8961
|
flexDirection: "column",
|
8916
8962
|
gap: "3"
|
8917
|
-
}, /* @__PURE__ */
|
8963
|
+
}, /* @__PURE__ */ import_react100.default.createElement(Skeleton, {
|
8918
8964
|
height: 32,
|
8919
8965
|
width: "100%"
|
8920
|
-
}), /* @__PURE__ */
|
8966
|
+
}), /* @__PURE__ */ import_react100.default.createElement(Skeleton, {
|
8921
8967
|
height: 32,
|
8922
8968
|
width: "73%"
|
8923
|
-
}), /* @__PURE__ */
|
8969
|
+
}), /* @__PURE__ */ import_react100.default.createElement(Skeleton, {
|
8924
8970
|
height: 32,
|
8925
8971
|
width: "80%"
|
8926
8972
|
}))));
|
8927
|
-
var TimelineSkeleton = ({ items = 3 }) => /* @__PURE__ */
|
8973
|
+
var TimelineSkeleton = ({ items = 3 }) => /* @__PURE__ */ import_react100.default.createElement("div", null, Array.from({ length: items }).map((_, key) => /* @__PURE__ */ import_react100.default.createElement(TimelineItemSkeleton, {
|
8928
8974
|
key
|
8929
8975
|
})));
|
8930
8976
|
Timeline2.Item = TimelineItem;
|
8931
8977
|
Timeline2.Skeleton = TimelineSkeleton;
|
8978
|
+
Timeline2.Skeleton.displayName = "Timeline.Skeleton";
|
8932
8979
|
|
8933
8980
|
// src/utils/table/useTableSelect.ts
|
8934
|
-
var
|
8981
|
+
var import_react101 = __toESM(require("react"));
|
8935
8982
|
var useTableSelect = (data, { key }) => {
|
8936
|
-
const [selected, setSelected] =
|
8983
|
+
const [selected, setSelected] = import_react101.default.useState([]);
|
8937
8984
|
const allSelected = selected.length === data.length;
|
8938
8985
|
const isSelected = (dot) => selected.includes(dot[key]);
|
8939
8986
|
const selectAll = () => setSelected(data.map((dot) => dot[key]));
|
@@ -8958,15 +9005,15 @@ var useTableSelect = (data, { key }) => {
|
|
8958
9005
|
};
|
8959
9006
|
|
8960
9007
|
// src/components/Pagination/usePagination.tsx
|
8961
|
-
var
|
9008
|
+
var import_react102 = require("react");
|
8962
9009
|
var initialState = {
|
8963
9010
|
currentPage: 1,
|
8964
9011
|
pageSize: 10
|
8965
9012
|
};
|
8966
9013
|
var getPageIndex = (currentPage, pageSize) => currentPage === 0 ? 0 : (currentPage - 1) * pageSize;
|
8967
9014
|
var usePagination = (items, options) => {
|
8968
|
-
const [currentPage, setCurrentPage] = (0,
|
8969
|
-
const [pageSize, setPageSize] = (0,
|
9015
|
+
const [currentPage, setCurrentPage] = (0, import_react102.useState)((options == null ? void 0 : options.initialPage) || initialState.currentPage);
|
9016
|
+
const [pageSize, setPageSize] = (0, import_react102.useState)((options == null ? void 0 : options.initialPageSize) || initialState.pageSize);
|
8970
9017
|
const totalPages = items.length > 0 ? Math.ceil(items.length / pageSize) : 1;
|
8971
9018
|
const hasPreviousPage = currentPage > 1;
|
8972
9019
|
const hasNextPage = currentPage < totalPages;
|
@@ -8975,7 +9022,7 @@ var usePagination = (items, options) => {
|
|
8975
9022
|
setPageSize(pageSize2);
|
8976
9023
|
setCurrentPage((options == null ? void 0 : options.initialPage) || initialState.currentPage);
|
8977
9024
|
};
|
8978
|
-
(0,
|
9025
|
+
(0, import_react102.useEffect)(() => {
|
8979
9026
|
setCurrentPage((options == null ? void 0 : options.initialPage) || initialState.currentPage);
|
8980
9027
|
}, [items.length]);
|
8981
9028
|
return [
|
@@ -9162,6 +9209,7 @@ var system_default = __spreadProps(__spreadValues({}, components_exports), {
|
|
9162
9209
|
Label,
|
9163
9210
|
LabelControl,
|
9164
9211
|
LineClamp,
|
9212
|
+
Link,
|
9165
9213
|
List,
|
9166
9214
|
ListItem,
|
9167
9215
|
Modal,
|