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