kiban-design-system 1.1.1-hotfix.0 → 1.1.2-hotfix.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/components/JsonViewer/JsonViewer.d.ts +1 -1
- package/dist/components/JsonViewer/JsonViewer.props.d.ts +3 -1
- package/dist/components/Link/Link.d.ts +5 -0
- package/dist/components/Link/Link.props.d.ts +7 -0
- package/dist/components/Link/index.d.ts +3 -0
- package/dist/components/Popover/utils/setPosition.d.ts +70 -33
- package/dist/components/index.d.ts +1 -0
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.js +173 -161
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -289,7 +289,7 @@ const Layout = () => (jsxs(Fragment, { children: [jsx("rect", { x: '3', y: '3',
|
|
|
289
289
|
|
|
290
290
|
const LifeBuoy = () => (jsxs(Fragment, { children: [jsx("circle", { cx: '12', cy: '12', r: '10' }, void 0), jsx("circle", { cx: '12', cy: '12', r: '4' }, void 0), jsx("line", { x1: '4.93', y1: '4.93', x2: '9.17', y2: '9.17' }, void 0), jsx("line", { x1: '14.83', y1: '14.83', x2: '19.07', y2: '19.07' }, void 0), jsx("line", { x1: '14.83', y1: '9.17', x2: '19.07', y2: '4.93' }, void 0), jsx("line", { x1: '14.83', y1: '9.17', x2: '18.36', y2: '5.64' }, void 0), jsx("line", { x1: '4.93', y1: '19.07', x2: '9.17', y2: '14.83' }, void 0)] }, void 0));
|
|
291
291
|
|
|
292
|
-
const Link$
|
|
292
|
+
const Link$3 = () => (jsxs(Fragment, { children: [jsx("path", { d: 'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71' }, void 0), jsx("path", { d: 'M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71' }, void 0)] }, void 0));
|
|
293
293
|
|
|
294
294
|
const Link2 = () => (jsxs(Fragment, { children: [jsx("path", { d: 'M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3' }, void 0), jsx("line", { x1: '8', y1: '12', x2: '16', y2: '12' }, void 0)] }, void 0));
|
|
295
295
|
|
|
@@ -736,7 +736,7 @@ var Icons = /*#__PURE__*/Object.freeze({
|
|
|
736
736
|
Layers: Layers,
|
|
737
737
|
Layout: Layout,
|
|
738
738
|
LifeBuoy: LifeBuoy,
|
|
739
|
-
Link: Link$
|
|
739
|
+
Link: Link$3,
|
|
740
740
|
Link2: Link2,
|
|
741
741
|
Linkedin: Linkedin,
|
|
742
742
|
List: List$1,
|
|
@@ -1061,10 +1061,10 @@ const PendingIcon = () => (jsxs("svg", Object.assign({ width: '24', height: '24'
|
|
|
1061
1061
|
|
|
1062
1062
|
const WarningIcon = () => (jsxs("svg", Object.assign({ width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }, { children: [jsx("path", { d: 'M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z' }, void 0), jsx("line", { x1: '12', y1: '9', x2: '12', y2: '13' }, void 0), jsx("line", { x1: '12', y1: '17', x2: '12.01', y2: '17' }, void 0)] }), void 0));
|
|
1063
1063
|
|
|
1064
|
-
const COMPONENT_NAME$
|
|
1064
|
+
const COMPONENT_NAME$A = 'AlphaAttributeInput';
|
|
1065
1065
|
const AlphaAttributeInput = ({ items, divider, label, isRequired, }) => {
|
|
1066
1066
|
const [isFocused, setIsFocused] = useState(false);
|
|
1067
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
1067
|
+
const className = cssClassName(COMPONENT_NAME$A, isFocused && 'isFocused');
|
|
1068
1068
|
const handleBlur = (callback) => {
|
|
1069
1069
|
setIsFocused(false);
|
|
1070
1070
|
if (callback) {
|
|
@@ -1083,25 +1083,25 @@ const AlphaAttributeInput = ({ items, divider, label, isRequired, }) => {
|
|
|
1083
1083
|
item.onChange(event.target.value);
|
|
1084
1084
|
}
|
|
1085
1085
|
};
|
|
1086
|
-
const itemLabelMarkup = item.label ? (jsx("label", Object.assign({ className: `${COMPONENT_NAME$
|
|
1087
|
-
const dividerMarkup = divider && index < items.length - 1 ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$
|
|
1088
|
-
return (jsxs(Fragment$1, { children: [jsxs("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
1086
|
+
const itemLabelMarkup = item.label ? (jsx("label", Object.assign({ className: `${COMPONENT_NAME$A}__ItemLabelWrapper` }, { children: item.label }), void 0)) : null;
|
|
1087
|
+
const dividerMarkup = divider && index < items.length - 1 ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$A}__Divider` }, { children: divider }), void 0)) : null;
|
|
1088
|
+
return (jsxs(Fragment$1, { children: [jsxs("div", Object.assign({ className: `${COMPONENT_NAME$A}__Item` }, { children: [itemLabelMarkup, jsx("input", { type: item.type, value: item.value, onChange: handleChange, onBlur: () => handleBlur(item.onBlur), onFocus: () => handleFocus(item.onFocus), placeholder: item.placeholder, min: item.min, max: item.max, minLength: item.minLength, maxLength: item.maxLength }, void 0)] }), index), dividerMarkup] }, index));
|
|
1089
1089
|
};
|
|
1090
|
-
const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
1091
|
-
const itemsMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
1090
|
+
const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$A}__LabelWrapper` }, { children: jsxs("label", Object.assign({ className: `${COMPONENT_NAME$A}__Label` }, { children: [label, isRequired ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$A}__IsRequiredSign` }, { children: "*" }), void 0)) : null] }), void 0) }), void 0)) : null;
|
|
1091
|
+
const itemsMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$A}__ItemsWrapper` }, { children: items.map(renderItem) }), void 0));
|
|
1092
1092
|
return (jsxs("div", Object.assign({ className: className }, { children: [labelMarkup, itemsMarkup] }), void 0));
|
|
1093
1093
|
};
|
|
1094
1094
|
|
|
1095
|
-
const COMPONENT_NAME$
|
|
1095
|
+
const COMPONENT_NAME$z = 'AlphaBadge';
|
|
1096
1096
|
const AlphaBadge = ({ theme: themeProp, children, isSuccess, isWarning, isDanger, isPrimary, }) => {
|
|
1097
1097
|
const { theme } = useTheme();
|
|
1098
1098
|
const THEME_CLASS = `${theme}`;
|
|
1099
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
1100
|
-
const childrenMarkup = children && (jsx("span", Object.assign({ className: `${COMPONENT_NAME$
|
|
1099
|
+
const className = cssClassName(COMPONENT_NAME$z, !themeProp && THEME_CLASS, isPrimary && 'isPrimary', isDanger && 'isDanger', isSuccess && 'isSuccess', isWarning && 'isWarning', themeProp && `${themeProp.toUpperCase()}`);
|
|
1100
|
+
const childrenMarkup = children && (jsx("span", Object.assign({ className: `${COMPONENT_NAME$z}__TextWrapper` }, { children: children }), void 0));
|
|
1101
1101
|
return jsx("span", Object.assign({ className: className }, { children: childrenMarkup }), void 0);
|
|
1102
1102
|
};
|
|
1103
1103
|
|
|
1104
|
-
const COMPONENT_NAME$
|
|
1104
|
+
const COMPONENT_NAME$y = 'AlphaIcon';
|
|
1105
1105
|
const ICON_COLOR_VARIANTS = [
|
|
1106
1106
|
'danger',
|
|
1107
1107
|
'darkGray',
|
|
@@ -1128,9 +1128,9 @@ const AlphaIcon = ({ source, size, color, filled, hasBackdrop, outlined, }) => {
|
|
|
1128
1128
|
if (color && !ICON_COLOR_VARIANTS.includes(color)) {
|
|
1129
1129
|
console.warn(`The color ${color} is not supported for the AlphaIcon component when hasBackdrop is true.`);
|
|
1130
1130
|
}
|
|
1131
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
1131
|
+
const className = cssClassName(COMPONENT_NAME$y, color && `is-${color}`, filled && 'isFilled', outlined && 'isOutlined', size && `is-${size}`, hasBackdrop && 'hasBackdrop', source && `source-${sourceType}`);
|
|
1132
1132
|
const Source = source;
|
|
1133
|
-
const StringSource = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
1133
|
+
const StringSource = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$y}__StringSource` }, { children: jsx("span", { children: source }, void 0) }), void 0));
|
|
1134
1134
|
const content = {
|
|
1135
1135
|
function: jsx(Source, {}, void 0),
|
|
1136
1136
|
string: StringSource,
|
|
@@ -1138,9 +1138,9 @@ const AlphaIcon = ({ source, size, color, filled, hasBackdrop, outlined, }) => {
|
|
|
1138
1138
|
return jsx("span", Object.assign({ className: className }, { children: content[sourceType] }), void 0);
|
|
1139
1139
|
};
|
|
1140
1140
|
|
|
1141
|
-
const COMPONENT_NAME$
|
|
1141
|
+
const COMPONENT_NAME$x = 'AlphaSpinner';
|
|
1142
1142
|
const AlphaSpinner = ({ icon, size }) => {
|
|
1143
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
1143
|
+
const className = cssClassName(COMPONENT_NAME$x);
|
|
1144
1144
|
let iconSource;
|
|
1145
1145
|
if (icon) {
|
|
1146
1146
|
if (isValidIcon(icon.icon)) {
|
|
@@ -1150,16 +1150,16 @@ const AlphaSpinner = ({ icon, size }) => {
|
|
|
1150
1150
|
iconSource = icon.icon;
|
|
1151
1151
|
}
|
|
1152
1152
|
}
|
|
1153
|
-
const iconMarkup = icon ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$
|
|
1153
|
+
const iconMarkup = icon ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$x}__IconWrapper` }, { children: iconSource }), void 0)) : null;
|
|
1154
1154
|
return jsx("div", Object.assign({ className: className }, { children: iconMarkup }), void 0);
|
|
1155
1155
|
};
|
|
1156
1156
|
|
|
1157
|
-
const COMPONENT_NAME$
|
|
1157
|
+
const COMPONENT_NAME$w = 'AlphaButton';
|
|
1158
1158
|
const AlphaButton = ({ children, icon, spinnerIcon, iconPosition = 'left', id, isDanger, isDisabled, isFullWidth, isLink, isLoading, isPrimary, isSubmit, isTertiary, size = 'medium', textAlign = 'center', isRounded, theme: themeProp, onClick, onFocus, onBlur, onKeyPress, onKeyUp, onKeyDown, onMouseEnter, onMouseLeave, onTouchStart, onTouchEnd, }) => {
|
|
1159
1159
|
const { theme } = useTheme();
|
|
1160
1160
|
const THEME_CLASS = `${theme}`;
|
|
1161
1161
|
const isIconOnly = !children && icon;
|
|
1162
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
1162
|
+
const className = cssClassName(COMPONENT_NAME$w, !themeProp && THEME_CLASS, isPrimary && 'isPrimary', isDanger && 'isDanger', isTertiary && 'isTertiary', isFullWidth && 'isFullWidth', isLink && 'isLink', isDisabled && 'isDisabled', isLoading && 'isLoading', size && `is-${size}`, textAlign && `has-text-${textAlign}`, icon && `has-icon-${iconPosition}`, isIconOnly && 'onlyIcon', isIconOnly && isRounded && 'isRounded', themeProp && `${themeProp.toUpperCase()}`);
|
|
1163
1163
|
const buttonProps = {
|
|
1164
1164
|
id,
|
|
1165
1165
|
type: isSubmit ? 'submit' : 'button',
|
|
@@ -1175,7 +1175,7 @@ const AlphaButton = ({ children, icon, spinnerIcon, iconPosition = 'left', id, i
|
|
|
1175
1175
|
onTouchStart,
|
|
1176
1176
|
onTouchEnd,
|
|
1177
1177
|
};
|
|
1178
|
-
const childrenMarkup = children ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$
|
|
1178
|
+
const childrenMarkup = children ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$w}__TextWrapper` }, { children: children }), void 0)) : null;
|
|
1179
1179
|
let iconSource;
|
|
1180
1180
|
let spinnerIconSource;
|
|
1181
1181
|
if (icon) {
|
|
@@ -1194,18 +1194,18 @@ const AlphaButton = ({ children, icon, spinnerIcon, iconPosition = 'left', id, i
|
|
|
1194
1194
|
spinnerIconSource = spinnerIcon.icon;
|
|
1195
1195
|
}
|
|
1196
1196
|
}
|
|
1197
|
-
const iconMarkup = icon ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$
|
|
1198
|
-
const spinnerMarkup = isLoading && (jsx("span", Object.assign({ className: `${COMPONENT_NAME$
|
|
1197
|
+
const iconMarkup = icon ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$w}__IconWrapper` }, { children: iconSource }), void 0)) : null;
|
|
1198
|
+
const spinnerMarkup = isLoading && (jsx("span", Object.assign({ className: `${COMPONENT_NAME$w}__SpinnerWrapper` }, { children: spinnerIconSource }), void 0));
|
|
1199
1199
|
return (jsxs("button", Object.assign({ className: className }, buttonProps, { children: [spinnerMarkup, iconMarkup, childrenMarkup] }), void 0));
|
|
1200
1200
|
};
|
|
1201
1201
|
|
|
1202
|
-
const COMPONENT_NAME$
|
|
1202
|
+
const COMPONENT_NAME$v = 'AlphaChip';
|
|
1203
1203
|
const AlphaChip = ({ children, hasError, removeButtonIcon, isDisabled, theme, onRemove, }) => {
|
|
1204
1204
|
const { theme: currentTheme } = useTheme();
|
|
1205
1205
|
const THEME_CLASS = `${currentTheme}`;
|
|
1206
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
1207
|
-
const childrenMarkup = children ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
1208
|
-
const closeButtonMarkup = removeButtonIcon && (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
1206
|
+
const className = cssClassName(COMPONENT_NAME$v, hasError && 'hasError', isDisabled && 'isDisabled', theme && `${theme.toUpperCase()}`, THEME_CLASS);
|
|
1207
|
+
const childrenMarkup = children ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$v}__TextWrapper` }, { children: children }), void 0)) : null;
|
|
1208
|
+
const closeButtonMarkup = removeButtonIcon && (jsx("div", Object.assign({ className: `${COMPONENT_NAME$v}__CloseButtonWrapper` }, { children: jsx(AlphaButton, { onClick: onRemove, icon: removeButtonIcon }, void 0) }), void 0));
|
|
1209
1209
|
return (jsxs("div", Object.assign({ className: className }, { children: [childrenMarkup, closeButtonMarkup] }), void 0));
|
|
1210
1210
|
};
|
|
1211
1211
|
|
|
@@ -1295,7 +1295,12 @@ function __awaiter(thisArg, _arguments, P, generator) {
|
|
|
1295
1295
|
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
1296
1296
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
1297
1297
|
});
|
|
1298
|
-
}
|
|
1298
|
+
}
|
|
1299
|
+
|
|
1300
|
+
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
1301
|
+
var e = new Error(message);
|
|
1302
|
+
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
1303
|
+
};
|
|
1299
1304
|
|
|
1300
1305
|
const MAIN_CLASS$p = 'Button';
|
|
1301
1306
|
/**
|
|
@@ -1399,10 +1404,10 @@ const Panel$1 = ({ id, children, isHidden }) => {
|
|
|
1399
1404
|
return (jsx("div", Object.assign({ className: className, id: id }, { children: children }), void 0));
|
|
1400
1405
|
};
|
|
1401
1406
|
|
|
1402
|
-
const COMPONENT_NAME$
|
|
1407
|
+
const COMPONENT_NAME$u = 'Tabs';
|
|
1403
1408
|
const Tabs = ({ onSelect, selected, tabs, children, className, areFitted, }) => {
|
|
1404
1409
|
const { theme } = useTheme();
|
|
1405
|
-
const classNames = cssClassName(COMPONENT_NAME$
|
|
1410
|
+
const classNames = cssClassName(COMPONENT_NAME$u, `is${themeClassConverter(theme)}`);
|
|
1406
1411
|
const panelMarkup = children
|
|
1407
1412
|
? tabs.map((tab, index) => selected === index ? (jsx(Panel$1, Object.assign({ id: tab.panelID || `${tab.id}-panel` }, { children: children }), tab.id)) : (jsx(Panel$1, { id: tab.panelID || `${tab.id}-panel`, isHidden: true }, tab.id)))
|
|
1408
1413
|
: null;
|
|
@@ -1560,10 +1565,10 @@ const getPosition = (activator, tooltip, alignment) => {
|
|
|
1560
1565
|
};
|
|
1561
1566
|
};
|
|
1562
1567
|
|
|
1563
|
-
const COMPONENT_NAME$
|
|
1568
|
+
const COMPONENT_NAME$t = 'Alpha__TooltipOverlay';
|
|
1564
1569
|
const Overlay = ({ children, activator, active, zIndexOverride, position = 'bottom', appearance = 'default', width, parentTooltip, theme, onClick, }) => {
|
|
1565
1570
|
const tooltipRef = useRef(null);
|
|
1566
|
-
const overlayClassName = cssClassName(COMPONENT_NAME$
|
|
1571
|
+
const overlayClassName = cssClassName(COMPONENT_NAME$t, position && `is-${position}`, appearance && `is-${appearance}`, theme && appearance === 'default' && `is-${theme}`);
|
|
1567
1572
|
const [positionStyles, setPositionStyles] = useState({
|
|
1568
1573
|
'--tooltip-overlay-top': 0,
|
|
1569
1574
|
'--tooltip-overlay-left': 0,
|
|
@@ -1599,7 +1604,7 @@ const Overlay = ({ children, activator, active, zIndexOverride, position = 'bott
|
|
|
1599
1604
|
return markup;
|
|
1600
1605
|
};
|
|
1601
1606
|
|
|
1602
|
-
const COMPONENT_NAME$
|
|
1607
|
+
const COMPONENT_NAME$s = 'AlphaTooltip';
|
|
1603
1608
|
const AlphaTooltip = ({ content, children, activatorWrapper = 'span', isActive: isActiveProp = false, onClose, onOpen, position, width, parentTooltip, zIndexOverride, appearance, persistence, theme, }) => {
|
|
1604
1609
|
const [activatorNode, setActivatorNode] = useState(null);
|
|
1605
1610
|
const [isActive, setIsActive] = useState(isActiveProp);
|
|
@@ -1607,7 +1612,7 @@ const AlphaTooltip = ({ content, children, activatorWrapper = 'span', isActive:
|
|
|
1607
1612
|
const isMouseOver = useRef(false);
|
|
1608
1613
|
const activatorContainer = useRef(null);
|
|
1609
1614
|
const WrapperComponent = activatorWrapper;
|
|
1610
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
1615
|
+
const className = cssClassName(COMPONENT_NAME$s);
|
|
1611
1616
|
const handleOpen = useCallback(() => {
|
|
1612
1617
|
if (!isActivePersistence) {
|
|
1613
1618
|
setIsActive(true);
|
|
@@ -2182,10 +2187,10 @@ const Popover$1 = ({ activator, children, isActive, onClose, isFullWidth = false
|
|
|
2182
2187
|
};
|
|
2183
2188
|
Popover$1.Pane = Pane$1;
|
|
2184
2189
|
|
|
2185
|
-
const COMPONENT_NAME$
|
|
2190
|
+
const COMPONENT_NAME$r = 'Divider';
|
|
2186
2191
|
const Divider = ({ alignment = 'left', label }) => {
|
|
2187
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
2188
|
-
const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
2192
|
+
const className = cssClassName(COMPONENT_NAME$r, alignment, !label && 'no-label');
|
|
2193
|
+
const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$r}__LabelWrapper` }, { children: jsx("span", Object.assign({ className: `${COMPONENT_NAME$r}__Label` }, { children: label }), void 0) }), void 0)) : null;
|
|
2189
2194
|
return jsx("div", Object.assign({ className: className }, { children: labelMarkup }), void 0);
|
|
2190
2195
|
};
|
|
2191
2196
|
|
|
@@ -9629,7 +9634,7 @@ function formatDate(date, toISO) {
|
|
|
9629
9634
|
return DateTime.fromJSDate(date).toFormat('dd/MM/yyyy');
|
|
9630
9635
|
}
|
|
9631
9636
|
|
|
9632
|
-
const COMPONENT_NAME$
|
|
9637
|
+
const COMPONENT_NAME$q = 'DateInput';
|
|
9633
9638
|
const AlphaInputDate = ({ disabled, label, onChange, value, isRequired, placeholder, onBlur, errorMessage, months, weekdays, }) => {
|
|
9634
9639
|
const [isPopoverActive, setIsPopoverActive] = useState(false);
|
|
9635
9640
|
const [{ month, year }, setDate] = useState({
|
|
@@ -9640,7 +9645,7 @@ const AlphaInputDate = ({ disabled, label, onChange, value, isRequired, placehol
|
|
|
9640
9645
|
const [isErrorTooltipActive, setIsErrorTooltipActive] = useState(false);
|
|
9641
9646
|
const [selectedDate, setSelectedDate] = useState();
|
|
9642
9647
|
const inputRef = useRef(null);
|
|
9643
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
9648
|
+
const className = cssClassName(COMPONENT_NAME$q);
|
|
9644
9649
|
const handleMonthChange = (monthValue, yearValue) => {
|
|
9645
9650
|
setDate({ month: monthValue, year: yearValue });
|
|
9646
9651
|
};
|
|
@@ -9762,7 +9767,7 @@ const AlphaInputDate = ({ disabled, label, onChange, value, isRequired, placehol
|
|
|
9762
9767
|
}
|
|
9763
9768
|
}, [selectedDate]);
|
|
9764
9769
|
const datePickerMarkup = (jsx(DatePicker, { weekStartsOn: 1, month: month, year: year, onMonthChange: handleMonthChange, onChange: handleDateChange, selected: selectedDate || undefined, months: months, weekDays: weekdays }, void 0));
|
|
9765
|
-
const inputMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
9770
|
+
const inputMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$q}__InputWrapper`, onClick: () => setIsPopoverActive(true), ref: inputRef }, { children: jsx(AlphaTooltip, Object.assign({ persistence: true, isActive: isErrorTooltipActive, content: errorMessage, appearance: 'error' }, { children: jsx(InputText, { disabled: disabled, label: label, onChange: handleInputChange, value: inputValue, maxLength: 10, placeholder: placeholder, onBlur: handleInputBlur, icon: 'Calendar', isRequired: isRequired }, void 0) }), void 0) }), void 0));
|
|
9766
9771
|
const popoverMarkup = (jsx(Popover$1, Object.assign({ activator: inputMarkup, isActive: isPopoverActive, isFullWidth: true, onClose: () => setIsPopoverActive(false) }, { children: datePickerMarkup }), void 0));
|
|
9767
9772
|
return jsx("div", Object.assign({ className: className }, { children: popoverMarkup }), void 0);
|
|
9768
9773
|
};
|
|
@@ -9852,9 +9857,9 @@ const AlphaFilterControl = ({ primaryAction, secondaryActions, sections, title,
|
|
|
9852
9857
|
return (jsxs("div", Object.assign({ className: `${MAIN_CLASS$j}` }, { children: [headerMarkup, bodyMarkup, actionsMarkup] }), void 0));
|
|
9853
9858
|
};
|
|
9854
9859
|
|
|
9855
|
-
const COMPONENT_NAME$
|
|
9860
|
+
const COMPONENT_NAME$p = 'AlphaInlineError';
|
|
9856
9861
|
const AlphaInlineError = ({ icon, children }) => {
|
|
9857
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
9862
|
+
const className = cssClassName(COMPONENT_NAME$p);
|
|
9858
9863
|
let iconSource;
|
|
9859
9864
|
if (icon) {
|
|
9860
9865
|
if (isValidIcon(icon.icon)) {
|
|
@@ -9864,23 +9869,23 @@ const AlphaInlineError = ({ icon, children }) => {
|
|
|
9864
9869
|
iconSource = icon.icon;
|
|
9865
9870
|
}
|
|
9866
9871
|
}
|
|
9867
|
-
const iconMarkup = icon ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
9868
|
-
const messageMarkup = children ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$
|
|
9872
|
+
const iconMarkup = icon ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$p}__IconWrapper` }, { children: iconSource }), void 0)) : null;
|
|
9873
|
+
const messageMarkup = children ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$p}__MessageWrapper` }, { children: children }), void 0)) : null;
|
|
9869
9874
|
return (jsxs("div", Object.assign({ className: className }, { children: [iconMarkup, messageMarkup] }), void 0));
|
|
9870
9875
|
};
|
|
9871
9876
|
|
|
9872
|
-
const COMPONENT_NAME$
|
|
9873
|
-
const className$1 = cssClassName(COMPONENT_NAME$
|
|
9877
|
+
const COMPONENT_NAME$o = 'AlphaLabel';
|
|
9878
|
+
const className$1 = cssClassName(COMPONENT_NAME$o);
|
|
9874
9879
|
const AlphaLabel = ({ children, isRequired, action, id }) => {
|
|
9875
|
-
const requiredSignMarkup = isRequired ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$
|
|
9880
|
+
const requiredSignMarkup = isRequired ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$o}__RequiredSign` }, { children: "*" }), void 0)) : null;
|
|
9876
9881
|
const labelMarkup = (jsxs("label", Object.assign({ htmlFor: id }, { children: [children, requiredSignMarkup] }), void 0));
|
|
9877
|
-
const actionMarkup = action ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
9882
|
+
const actionMarkup = action ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$o}__ActionWrapper` }, { children: jsx(AlphaButton, Object.assign({ id: action.id, isDanger: action.isDanger, onMouseEnter: action.onMouseEnter, onTouchStart: action.onTouchStart, isLink: true, onClick: action.onClick, isDisabled: action.isDisabled }, { children: action.content }), void 0) }), void 0)) : null;
|
|
9878
9883
|
return (jsxs("div", Object.assign({ className: className$1 }, { children: [labelMarkup, actionMarkup] }), void 0));
|
|
9879
9884
|
};
|
|
9880
9885
|
|
|
9881
|
-
const COMPONENT_NAME$
|
|
9886
|
+
const COMPONENT_NAME$n = 'AlphaLabelledField__HelpText';
|
|
9882
9887
|
const HelpText = ({ message, icon }) => {
|
|
9883
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
9888
|
+
const className = cssClassName(COMPONENT_NAME$n);
|
|
9884
9889
|
let iconSource;
|
|
9885
9890
|
if (icon) {
|
|
9886
9891
|
if (isValidIcon(icon.icon)) {
|
|
@@ -9890,24 +9895,24 @@ const HelpText = ({ message, icon }) => {
|
|
|
9890
9895
|
iconSource = icon.icon;
|
|
9891
9896
|
}
|
|
9892
9897
|
}
|
|
9893
|
-
const iconMarkup = iconSource ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
9894
|
-
const messageMarkup = message ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
9898
|
+
const iconMarkup = iconSource ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$n}__IconWrapper` }, { children: iconSource }), void 0)) : null;
|
|
9899
|
+
const messageMarkup = message ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$n}__MessageWrapper` }, { children: message }), void 0)) : null;
|
|
9895
9900
|
return (jsxs("div", Object.assign({ className: className }, { children: [iconMarkup, messageMarkup] }), void 0));
|
|
9896
9901
|
};
|
|
9897
9902
|
|
|
9898
|
-
const COMPONENT_NAME$
|
|
9903
|
+
const COMPONENT_NAME$m = 'AlphaLabelledField';
|
|
9899
9904
|
const AlphaLabelledField = ({ label, children, action, error, helpText, id, isRequired, }) => {
|
|
9900
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
9901
|
-
const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
9902
|
-
const errorMarkup = error ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
9905
|
+
const className = cssClassName(COMPONENT_NAME$m);
|
|
9906
|
+
const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$m}__LabelWrapper` }, { children: jsx(AlphaLabel, Object.assign({ action: action, id: id, isRequired: isRequired }, { children: label }), void 0) }), void 0)) : null;
|
|
9907
|
+
const errorMarkup = error ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$m}__ErrorWrapper` }, { children: jsx(AlphaInlineError, Object.assign({ icon: error.icon }, { children: error.message }), void 0) }), void 0)) : null;
|
|
9903
9908
|
const helpTextMarkup = helpText ? (jsx(HelpText, { message: helpText.message, icon: helpText.icon }, void 0)) : null;
|
|
9904
|
-
const contentMarkup = errorMarkup ? (jsx(AlphaTooltip, Object.assign({ persistence: true, content: errorMarkup, isActive: Boolean(errorMarkup), appearance: 'error' }, { children: jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
9909
|
+
const contentMarkup = errorMarkup ? (jsx(AlphaTooltip, Object.assign({ persistence: true, content: errorMarkup, isActive: Boolean(errorMarkup), appearance: 'error' }, { children: jsx("div", Object.assign({ className: `${COMPONENT_NAME$m}__ContentWrapper` }, { children: children }), void 0) }), void 0)) : (children);
|
|
9905
9910
|
return (jsxs("div", Object.assign({ className: className }, { children: [labelMarkup, contentMarkup, helpTextMarkup] }), void 0));
|
|
9906
9911
|
};
|
|
9907
9912
|
|
|
9908
|
-
const COMPONENT_NAME$
|
|
9913
|
+
const COMPONENT_NAME$l = 'AlphaInputText';
|
|
9909
9914
|
const AlphaInputText = ({ isDisabled, label }) => {
|
|
9910
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
9915
|
+
const className = cssClassName(COMPONENT_NAME$l, isDisabled && 'isDisabled');
|
|
9911
9916
|
return (jsx(AlphaLabelledField, Object.assign({ label: label }, { children: jsx("div", { className: className }, void 0) }), void 0));
|
|
9912
9917
|
};
|
|
9913
9918
|
|
|
@@ -9915,14 +9920,14 @@ const StepDefault = {
|
|
|
9915
9920
|
status: 'incomplete',
|
|
9916
9921
|
};
|
|
9917
9922
|
|
|
9918
|
-
const COMPONENT_NAME$
|
|
9923
|
+
const COMPONENT_NAME$k = 'AlphaStepper__Step';
|
|
9919
9924
|
const Step = ({ iconMarkup, label, isComplete, isInactive, isSuccess, isLastStepComplete, isLastStepInactive, }) => {
|
|
9920
9925
|
const { theme } = useTheme();
|
|
9921
|
-
const itemClassName = cssClassName(`${COMPONENT_NAME$
|
|
9922
|
-
return (jsxs("div", Object.assign({ className: COMPONENT_NAME$
|
|
9926
|
+
const itemClassName = cssClassName(`${COMPONENT_NAME$k}__Item`, isComplete && `is-${theme}-light-after`, isInactive && 'is-inactive-light-after', isSuccess && 'is-success-light-after', isSuccess && 'is-success-light-before', isLastStepComplete && `is-${theme}-light-before`, isLastStepInactive && 'is-inactive-light-before');
|
|
9927
|
+
return (jsxs("div", Object.assign({ className: COMPONENT_NAME$k }, { children: [jsx("div", Object.assign({ className: itemClassName }, { children: iconMarkup }), void 0), jsx("div", Object.assign({ className: `${COMPONENT_NAME$k}__Label` }, { children: label }), void 0)] }), void 0));
|
|
9923
9928
|
};
|
|
9924
9929
|
|
|
9925
|
-
const COMPONENT_NAME$
|
|
9930
|
+
const COMPONENT_NAME$j = 'AlphaStepper';
|
|
9926
9931
|
const getSourceIcon = (icon) => {
|
|
9927
9932
|
if (icon) {
|
|
9928
9933
|
if (isValidIcon(icon.icon)) {
|
|
@@ -9937,7 +9942,7 @@ const AlphaStepper = ({ isSuccess, steps = [], completeIcon, incompleteIcon, err
|
|
|
9937
9942
|
const { theme } = useTheme();
|
|
9938
9943
|
const renderStep = (step = Object.assign({}, StepDefault), index) => {
|
|
9939
9944
|
const lastStepStatus = steps[index - 1] ? steps[index - 1].status : '';
|
|
9940
|
-
const iconClassName = cssClassName(`${COMPONENT_NAME$
|
|
9945
|
+
const iconClassName = cssClassName(`${COMPONENT_NAME$j}__IconWrapper`, (step.status === 'complete' || step.status === 'active') && `is-${theme}`, step.status !== 'complete' && `is-inactive`, step.hasError && errorIcon && 'is-danger', isSuccess && `is-success`);
|
|
9941
9946
|
let iconSource = getSourceIcon(incompleteIcon);
|
|
9942
9947
|
if (step.hasError && errorIcon)
|
|
9943
9948
|
iconSource = getSourceIcon(errorIcon);
|
|
@@ -9948,16 +9953,16 @@ const AlphaStepper = ({ isSuccess, steps = [], completeIcon, incompleteIcon, err
|
|
|
9948
9953
|
const isInactive = step.status === 'incomplete' || step.status === 'active';
|
|
9949
9954
|
const isLastStepComplete = lastStepStatus === 'complete';
|
|
9950
9955
|
const isLastStepInactive = lastStepStatus === 'incomplete' || lastStepStatus === 'active';
|
|
9951
|
-
return (jsx(Step, { iconMarkup: iconMarkup, label: step.label, isComplete: isComplete, isInactive: isInactive, isSuccess: isSuccess, isLastStepComplete: isLastStepComplete, isLastStepInactive: isLastStepInactive }, `${COMPONENT_NAME$
|
|
9956
|
+
return (jsx(Step, { iconMarkup: iconMarkup, label: step.label, isComplete: isComplete, isInactive: isInactive, isSuccess: isSuccess, isLastStepComplete: isLastStepComplete, isLastStepInactive: isLastStepInactive }, `${COMPONENT_NAME$j}-${index}`));
|
|
9952
9957
|
};
|
|
9953
9958
|
const stepsMarkup = steps ? steps.map(renderStep) : null;
|
|
9954
|
-
return jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
9959
|
+
return jsx("div", Object.assign({ className: `${COMPONENT_NAME$j}__Container` }, { children: stepsMarkup }), void 0);
|
|
9955
9960
|
};
|
|
9956
9961
|
|
|
9957
|
-
const COMPONENT_NAME$
|
|
9962
|
+
const COMPONENT_NAME$i = 'AlphaTag';
|
|
9958
9963
|
const AlphaTag = ({ color, children }) => {
|
|
9959
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
9960
|
-
const childrenMarkup = (jsx("span", Object.assign({ className: `${COMPONENT_NAME$
|
|
9964
|
+
const className = cssClassName(COMPONENT_NAME$i, color && `is-${color.color}-${color.intensity}`);
|
|
9965
|
+
const childrenMarkup = (jsx("span", Object.assign({ className: `${COMPONENT_NAME$i}__TextWrapper` }, { children: children }), void 0));
|
|
9961
9966
|
return jsx("div", Object.assign({ className: className }, { children: childrenMarkup }), void 0);
|
|
9962
9967
|
};
|
|
9963
9968
|
|
|
@@ -9968,11 +9973,11 @@ const StatusIcon = {
|
|
|
9968
9973
|
Warning: WarningIcon,
|
|
9969
9974
|
};
|
|
9970
9975
|
|
|
9971
|
-
const COMPONENT_NAME$
|
|
9976
|
+
const COMPONENT_NAME$h = 'AlphaTile';
|
|
9972
9977
|
const AlphaTile = ({ isSelected, icon, status, theme: themeProp, title, onClick, }) => {
|
|
9973
9978
|
const { theme } = useTheme();
|
|
9974
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
9975
|
-
const statusWrapperClassName = cssClassName(`${COMPONENT_NAME$
|
|
9979
|
+
const className = cssClassName(COMPONENT_NAME$h, `is${themeClassConverter(themeProp || theme)}`, isSelected && 'isSelected');
|
|
9980
|
+
const statusWrapperClassName = cssClassName(`${COMPONENT_NAME$h}--StatusWrapper`, status && `is${status}`);
|
|
9976
9981
|
let iconSource;
|
|
9977
9982
|
if (icon) {
|
|
9978
9983
|
if (isValidIcon(icon.icon)) {
|
|
@@ -9982,10 +9987,10 @@ const AlphaTile = ({ isSelected, icon, status, theme: themeProp, title, onClick,
|
|
|
9982
9987
|
iconSource = icon.icon;
|
|
9983
9988
|
}
|
|
9984
9989
|
}
|
|
9985
|
-
const iconWrapper = icon ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$
|
|
9986
|
-
const mediaMarkup = icon ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
9987
|
-
const titleWrapper = title ? (jsx("div", { children: jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
9988
|
-
const HeaderWrapper = (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
9990
|
+
const iconWrapper = icon ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$h}__IconWrapper` }, { children: iconSource }), void 0)) : null;
|
|
9991
|
+
const mediaMarkup = icon ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$h}__MediaWrapper` }, { children: iconWrapper }), void 0)) : null;
|
|
9992
|
+
const titleWrapper = title ? (jsx("div", { children: jsx("div", Object.assign({ className: `${COMPONENT_NAME$h}__TitleWrapper` }, { children: title }), void 0) }, void 0)) : null;
|
|
9993
|
+
const HeaderWrapper = (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$h}__HeaderWrapper` }, { children: [mediaMarkup, titleWrapper] }), void 0));
|
|
9989
9994
|
const statusIcon = status ? StatusIcon[status] : '';
|
|
9990
9995
|
const statusWrapper = status ? (jsx("div", Object.assign({ className: statusWrapperClassName }, { children: jsx(AlphaIcon, { source: statusIcon, size: 'medium', outlined: true }, void 0) }), void 0)) : null;
|
|
9991
9996
|
return (jsxs("div", Object.assign({ className: className, onClick: onClick }, { children: [HeaderWrapper, statusWrapper] }), void 0));
|
|
@@ -16626,9 +16631,9 @@ function getRangeDate(range, date) {
|
|
|
16626
16631
|
};
|
|
16627
16632
|
}
|
|
16628
16633
|
|
|
16629
|
-
const COMPONENT_NAME$
|
|
16634
|
+
const COMPONENT_NAME$g = 'DatePicker__Day';
|
|
16630
16635
|
const Day = memo(function Day({ day, isDisabled, isFirstSelectedDay, isLastSelectedDay, isInRange, isSelected, onClick, theme: themeProp, }) {
|
|
16631
|
-
const emptyDayClassName = cssClassName(COMPONENT_NAME$
|
|
16636
|
+
const emptyDayClassName = cssClassName(COMPONENT_NAME$g, !day && 'isEmpty');
|
|
16632
16637
|
if (!day) {
|
|
16633
16638
|
return jsx("td", { className: emptyDayClassName }, void 0);
|
|
16634
16639
|
}
|
|
@@ -16639,14 +16644,14 @@ const Day = memo(function Day({ day, isDisabled, isFirstSelectedDay, isLastSelec
|
|
|
16639
16644
|
}
|
|
16640
16645
|
};
|
|
16641
16646
|
const today = isToday(new Date(), day);
|
|
16642
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
16647
|
+
const className = cssClassName(COMPONENT_NAME$g, today && 'isToday', `theme-${themeProp || theme}`, isSelected && 'isSelected', isDisabled && 'isDisabled', isInRange && 'isInRange', isFirstSelectedDay && 'isFirstSelectedDay', isLastSelectedDay && 'isLastSelectedDay');
|
|
16643
16648
|
const date = day.getDate();
|
|
16644
16649
|
return (jsx("td", Object.assign({ className: className }, { children: jsx("button", Object.assign({ onClick: handleClick }, { children: date }), void 0) }), void 0));
|
|
16645
16650
|
});
|
|
16646
16651
|
|
|
16647
|
-
const COMPONENT_NAME$
|
|
16652
|
+
const COMPONENT_NAME$f = 'DatePicker__Month';
|
|
16648
16653
|
const Month = ({ month = new Date().getMonth(), year = new Date().getFullYear(), allowRange, disableAfterDate, disableBeforeDate, onChange, selected, weekStartsOn = 0, disableDates, weekDays, }) => {
|
|
16649
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
16654
|
+
const className = cssClassName(COMPONENT_NAME$f);
|
|
16650
16655
|
const weeks = useMemo(() => getWeeksByMonth(month, year, weekStartsOn), [month, year, weekStartsOn]);
|
|
16651
16656
|
const handleDateClick = useCallback((selectedDate) => {
|
|
16652
16657
|
if (onChange) {
|
|
@@ -16671,9 +16676,9 @@ const Month = ({ month = new Date().getMonth(), year = new Date().getFullYear(),
|
|
|
16671
16676
|
return jsx("div", Object.assign({ className: className }, { children: calendarGridMarkup }), void 0);
|
|
16672
16677
|
};
|
|
16673
16678
|
|
|
16674
|
-
const COMPONENT_NAME$
|
|
16679
|
+
const COMPONENT_NAME$e = 'DatePIcker__YearField';
|
|
16675
16680
|
const YearField = ({ onChange, value, min, max, onBlur, onFocus, onKeyDown, onKeyUp, }) => {
|
|
16676
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
16681
|
+
const className = cssClassName(COMPONENT_NAME$e);
|
|
16677
16682
|
const handleChange = (event) => {
|
|
16678
16683
|
if (onChange) {
|
|
16679
16684
|
const value = event.target.value.trim();
|
|
@@ -16717,10 +16722,10 @@ const IconButton = (_a) => {
|
|
|
16717
16722
|
return (jsx("button", Object.assign({ className: className, onClick: onClick, onBlur: onBlur, onFocus: onFocus }, rest, { children: icon && jsx(Icon, { name: icon }, void 0) }), void 0));
|
|
16718
16723
|
};
|
|
16719
16724
|
|
|
16720
|
-
const COMPONENT_NAME$
|
|
16725
|
+
const COMPONENT_NAME$d = 'DatePicker__Header';
|
|
16721
16726
|
const Header$2 = ({ month, year, onChange, months }) => {
|
|
16722
16727
|
const [yearValue, setYearValue] = useState(year);
|
|
16723
|
-
const headerClassName = cssClassName(COMPONENT_NAME$
|
|
16728
|
+
const headerClassName = cssClassName(COMPONENT_NAME$d);
|
|
16724
16729
|
const handleMonthChange = useCallback((month, year) => {
|
|
16725
16730
|
if (onChange) {
|
|
16726
16731
|
onChange(month, year);
|
|
@@ -16750,10 +16755,10 @@ const Header$2 = ({ month, year, onChange, months }) => {
|
|
|
16750
16755
|
const previousYear = getPreviousYear(month, year);
|
|
16751
16756
|
const nextMonth = getNextMonth(month);
|
|
16752
16757
|
const nextYear = getNextYear(month, year);
|
|
16753
|
-
return (jsxs("div", Object.assign({ className: headerClassName }, { children: [jsx(IconButton, { icon: 'ArrowLeft', size: 'small', appearance: 'secondary', onClick: () => handleMonthChange(previousMonth, previousYear) }, void 0), jsxs("span", Object.assign({ className: `${COMPONENT_NAME$
|
|
16758
|
+
return (jsxs("div", Object.assign({ className: headerClassName }, { children: [jsx(IconButton, { icon: 'ArrowLeft', size: 'small', appearance: 'secondary', onClick: () => handleMonthChange(previousMonth, previousYear) }, void 0), jsxs("span", Object.assign({ className: `${COMPONENT_NAME$d}__DateLabel` }, { children: [montName, jsx(YearField, { value: yearValue, onChange: setYearValue, onBlur: handleYearBlur, min: MINIMUM_SELECTABLE_YEAR }, void 0)] }), void 0), jsx(IconButton, { icon: 'ArrowRight', size: 'small', appearance: 'secondary', onClick: () => handleMonthChange(nextMonth, nextYear) }, void 0)] }), void 0));
|
|
16754
16759
|
};
|
|
16755
16760
|
|
|
16756
|
-
const COMPONENT_NAME$
|
|
16761
|
+
const COMPONENT_NAME$c = 'DatePicker';
|
|
16757
16762
|
function getMonthSelectedDate(selected) {
|
|
16758
16763
|
return selected instanceof Date
|
|
16759
16764
|
? {
|
|
@@ -16763,7 +16768,7 @@ function getMonthSelectedDate(selected) {
|
|
|
16763
16768
|
: selected;
|
|
16764
16769
|
}
|
|
16765
16770
|
const DatePicker = ({ allowRange, disableAfterDate, disableBeforeDate, id, month = new Date().getMonth(), year = new Date().getFullYear(), onChange, selected, onMonthChange, weekStartsOn, disableDates, months, weekDays, }) => {
|
|
16766
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
16771
|
+
const className = cssClassName(COMPONENT_NAME$c);
|
|
16767
16772
|
const handleDateChange = useCallback((dateRange) => {
|
|
16768
16773
|
if (onChange) {
|
|
16769
16774
|
onChange(dateRange);
|
|
@@ -16778,19 +16783,19 @@ const TrashIcon = () => (jsxs("svg", Object.assign({ width: '24', height: '24',
|
|
|
16778
16783
|
// eslint-disable-next-line max-len
|
|
16779
16784
|
d: 'M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }, void 0), jsx("path", { d: 'M10 11V17', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }, void 0), jsx("path", { d: 'M14 11V17', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }, void 0)] }), void 0));
|
|
16780
16785
|
|
|
16781
|
-
const COMPONENT_NAME$
|
|
16786
|
+
const COMPONENT_NAME$b = 'DeletableSection';
|
|
16782
16787
|
const DeletableSection = ({ children, onDelete, iconDeletable, isDeletable, }) => {
|
|
16783
16788
|
const { theme } = useTheme();
|
|
16784
16789
|
const THEME_CLASS = `${theme}`;
|
|
16785
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
16786
|
-
const classNameButton = cssClassName(`${COMPONENT_NAME$
|
|
16790
|
+
const className = cssClassName(COMPONENT_NAME$b);
|
|
16791
|
+
const classNameButton = cssClassName(`${COMPONENT_NAME$b}__DeleteButtonWrapper`, THEME_CLASS);
|
|
16787
16792
|
const icon = iconDeletable || TrashIcon;
|
|
16788
|
-
const deleteButtonMarkup = onDelete && isDeletable ? (jsx("div", Object.assign({ className: classNameButton }, { children: jsx("button", Object.assign({ className: `${COMPONENT_NAME$
|
|
16789
|
-
const contentMarkup = children ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
16793
|
+
const deleteButtonMarkup = onDelete && isDeletable ? (jsx("div", Object.assign({ className: classNameButton }, { children: jsx("button", Object.assign({ className: `${COMPONENT_NAME$b}__DeleteButton`, onClick: onDelete }, { children: jsx(AlphaIcon, { source: icon, outlined: true }, void 0) }), void 0) }), void 0)) : null;
|
|
16794
|
+
const contentMarkup = children ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$b}__ContentWrapper` }, { children: children }), void 0)) : null;
|
|
16790
16795
|
return (jsxs("div", Object.assign({ className: className }, { children: [deleteButtonMarkup, contentMarkup] }), void 0));
|
|
16791
16796
|
};
|
|
16792
16797
|
|
|
16793
|
-
const COMPONENT_NAME$
|
|
16798
|
+
const COMPONENT_NAME$a = 'AlphaInputTag';
|
|
16794
16799
|
const InputTag$1 = ({ id, inputTextPlaceholder, inputTextValue, isRequired, label, onChange, onInputTextChange, addedTags = [], triggerKeys = ['Enter'], onBlur, onFocus, isDisabled, hasError, tagRemoveIcon, helpText, }) => {
|
|
16795
16800
|
const [isFocused, setIsFocused] = useState(false);
|
|
16796
16801
|
const inputRef = useRef(null);
|
|
@@ -16833,10 +16838,10 @@ const InputTag$1 = ({ id, inputTextPlaceholder, inputTextValue, isRequired, labe
|
|
|
16833
16838
|
}
|
|
16834
16839
|
};
|
|
16835
16840
|
const renderTag = (tag, index) => {
|
|
16836
|
-
return (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
16841
|
+
return (jsx("div", Object.assign({ className: `${COMPONENT_NAME$a}__TagWrapper` }, { children: jsx(AlphaChip, Object.assign({ removeButtonIcon: tagRemoveIcon, onRemove: () => handleRemoveTag(index) }, { children: tag }), void 0) }), index));
|
|
16837
16842
|
};
|
|
16838
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
16839
|
-
const inputWrapperClassName = cssClassName(`${COMPONENT_NAME$
|
|
16843
|
+
const className = cssClassName(COMPONENT_NAME$a);
|
|
16844
|
+
const inputWrapperClassName = cssClassName(`${COMPONENT_NAME$a}__InputWrapper`, isFocused && 'isFocused', isDisabled && 'isDisabled', hasError && 'hasError');
|
|
16840
16845
|
const handleInputChange = (event) => {
|
|
16841
16846
|
if (onInputTextChange) {
|
|
16842
16847
|
onInputTextChange(event.target.value);
|
|
@@ -24512,7 +24517,7 @@ const SectionForm = ({ data, fields, fieldsSection, iconDeletable, iconHelperTex
|
|
|
24512
24517
|
return (jsx(DeletableSection, Object.assign({ onDelete: onDelete, iconDeletable: iconDeletable, isDeletable: isDeletable }, { children: gridMarkup }), void 0));
|
|
24513
24518
|
};
|
|
24514
24519
|
|
|
24515
|
-
const COMPONENT_NAME$
|
|
24520
|
+
const COMPONENT_NAME$9 = 'DynamicForm';
|
|
24516
24521
|
const DynamicForm = ({ dataFormArray = [], fields, fieldsSection, iconDeletable, iconHelperText, labelDivider, onChange, onAddForm, tagRemoveIcon, deletableFormArray, extraPropsFieldsArray, }) => {
|
|
24517
24522
|
const { theme } = useTheme();
|
|
24518
24523
|
const handleChange = (contact, id) => {
|
|
@@ -24540,11 +24545,11 @@ const DynamicForm = ({ dataFormArray = [], fields, fieldsSection, iconDeletable,
|
|
|
24540
24545
|
: undefined;
|
|
24541
24546
|
return (jsx(SectionForm, { data: form, fields: fields, fieldsSection: fieldsSection, iconDeletable: iconDeletable, iconHelperText: iconHelperText, onChange: (formData) => handleChange(formData, form.id || ''), onDelete: () => handleDelete(form.id || ''), tagRemoveIcon: tagRemoveIcon, isDeletable: isDeletable, extraPropsField: extraProps }, `DynamicForm-${form.id}-${index}}`));
|
|
24542
24547
|
};
|
|
24543
|
-
const contactsMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
24548
|
+
const contactsMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$9}__SectionFormWrapper` }, { children: dataFormArray.map(renderForm) }), void 0));
|
|
24544
24549
|
const dividerMarkup = labelDivider && jsx(Divider, { label: labelDivider }, void 0);
|
|
24545
24550
|
const addContactButtonMarkup = onAddForm && (jsx(AlphaButton, Object.assign({ isTertiary: true, onClick: onAddForm.onClick }, { children: onAddForm.label }), void 0));
|
|
24546
24551
|
const THEME_CLASS = `${theme}`;
|
|
24547
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
24552
|
+
const className = cssClassName(COMPONENT_NAME$9, THEME_CLASS);
|
|
24548
24553
|
return (jsxs("div", Object.assign({ className: className }, { children: [dividerMarkup, contactsMarkup, addContactButtonMarkup] }), void 0));
|
|
24549
24554
|
};
|
|
24550
24555
|
|
|
@@ -27739,19 +27744,19 @@ Sortable.mount(Remove, Revert);
|
|
|
27739
27744
|
|
|
27740
27745
|
const Context = createContext({});
|
|
27741
27746
|
|
|
27742
|
-
const COMPONENT_NAME$
|
|
27747
|
+
const COMPONENT_NAME$8 = 'SortableList__Item';
|
|
27743
27748
|
const Item$2 = ({ children }) => {
|
|
27744
27749
|
const { hasHandle } = useContext(Context);
|
|
27745
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
27746
|
-
const handleMarkup = hasHandle ? (jsxs("span", Object.assign({ className: `${COMPONENT_NAME$
|
|
27747
|
-
const contentMarkup = (jsx("span", Object.assign({ className: `${COMPONENT_NAME$
|
|
27750
|
+
const className = cssClassName(COMPONENT_NAME$8, !hasHandle && 'no-handle');
|
|
27751
|
+
const handleMarkup = hasHandle ? (jsxs("span", Object.assign({ className: `${COMPONENT_NAME$8}__Handle` }, { children: [jsx(Icon, { name: 'MoreVertical' }, void 0), jsx(Icon, { name: 'MoreVertical' }, void 0)] }), void 0)) : null;
|
|
27752
|
+
const contentMarkup = (jsx("span", Object.assign({ className: `${COMPONENT_NAME$8}__Content` }, { children: children }), void 0));
|
|
27748
27753
|
return (jsxs("li", Object.assign({ className: className }, { children: [handleMarkup, contentMarkup] }), void 0));
|
|
27749
27754
|
};
|
|
27750
27755
|
|
|
27751
|
-
const COMPONENT_NAME$
|
|
27756
|
+
const COMPONENT_NAME$7 = 'SortableList';
|
|
27752
27757
|
const SortableList = function ({ renderItem, items, onSort, hasHandle, }) {
|
|
27753
27758
|
const listRef = useRef(null);
|
|
27754
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
27759
|
+
const className = cssClassName(COMPONENT_NAME$7);
|
|
27755
27760
|
const hasItems = items && items.length > 0;
|
|
27756
27761
|
const handleSortEnd = (event) => {
|
|
27757
27762
|
const { newIndex, oldIndex } = event;
|
|
@@ -27782,7 +27787,7 @@ const SortableList = function ({ renderItem, items, onSort, hasHandle, }) {
|
|
|
27782
27787
|
}
|
|
27783
27788
|
return itemComponent;
|
|
27784
27789
|
};
|
|
27785
|
-
const listClassName = cssClassName(`${COMPONENT_NAME$
|
|
27790
|
+
const listClassName = cssClassName(`${COMPONENT_NAME$7}__List`);
|
|
27786
27791
|
const listMarkup = hasItems ? (jsx("ul", Object.assign({ ref: listRef, className: listClassName }, { children: Children.toArray(items.map(renderItemElement)) }), void 0)) : null;
|
|
27787
27792
|
const contextValue = {
|
|
27788
27793
|
hasHandle,
|
|
@@ -28068,7 +28073,7 @@ const Frame = ({ header, navigation, children }) => (jsxs("div", Object.assign({
|
|
|
28068
28073
|
|
|
28069
28074
|
const KibanCloud = ({ size }) => (jsxs("svg", Object.assign({ className: `Logo Logo--${size}`, viewBox: '0 0 384 48', fill: 'none' }, { children: [jsxs("g", Object.assign({ clipPath: 'url(#clip0_47_16047)' }, { children: [jsxs("g", Object.assign({ clipPath: 'url(#clip1_47_16047)' }, { children: [jsx("path", { d: 'M48 48.3363V0.337029L47.6361 0.358307C41.5229 0.715759 35.7795 3.40131 31.5881 7.86215C27.3971 12.3226 25.0768 18.2186 25.1046 24.3367C25.0768 30.4548 27.3971 36.3508 31.5881 40.8112C35.7795 45.272 41.5229 47.9576 47.6361 48.315L48 48.3363Z', fill: '#0047FF' }, void 0), jsx("path", { d: 'M0 23.2516V0.337029H29.4276L29.4221 0.423215C29.0332 6.47079 26.4067 12.1575 22.0534 16.377C17.7002 20.5965 11.9316 23.0469 5.87019 23.2514L5.85842 23.2516H0Z', fill: '#0000CC' }, void 0), jsx("path", { d: 'M29.4201 48.3374C29.0246 42.301 26.3995 36.626 22.0534 32.4135C17.7002 28.194 11.9316 25.7436 5.87019 25.5391L5.85842 25.5389H0V48.3374H29.4201Z', fill: '#0000CC' }, void 0)] }), void 0), jsxs("g", Object.assign({ clipPath: 'url(#clip2_47_16047)' }, { children: [jsx("path", { d: 'M68.1528 0H59.52V47.4651H68.1528V0Z', fill: 'black' }, void 0), jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M116.427 47.4651V43.5771C118.119 46.2583 121.981 48 126.183 48C136.418 48 142.451 40.896 142.451 30.576C142.451 20.256 136.418 13.152 126.322 13.152C122.051 13.152 118.39 14.8937 116.427 17.4377V0H107.885V47.4651H116.427ZM124.963 20.4274C130.385 20.4274 133.977 24.4457 133.977 30.5486V30.576C133.977 36.672 130.448 40.6971 124.963 40.6971C119.478 40.6971 115.886 36.6788 115.886 30.576C115.886 24.4731 119.541 20.4274 124.963 20.4274Z', fill: 'black' }, void 0), jsx("path", { d: 'M102.656 0.0137492H94.1206V8.45489H102.656V0.0137492Z', fill: 'black' }, void 0), jsx("path", { d: 'M102.67 13.6868H94.1276V47.4651H102.67V13.6868Z', fill: 'black' }, void 0), jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M178.694 47.4652H170.152V43.5772C168.46 46.2583 164.667 48 160.396 48C150.161 48 144.115 40.896 144.115 30.576C144.115 20.256 150.147 13.152 160.243 13.152C164.514 13.152 168.176 14.8938 170.138 17.4377V13.7143H178.681L178.694 47.4652ZM170.693 30.576C170.693 24.4732 167.101 20.4549 161.616 20.4549C156.131 20.4549 152.602 24.4732 152.602 30.576C152.602 36.6789 156.194 40.6972 161.616 40.6972C167.038 40.6972 170.693 36.672 170.693 30.576Z', fill: 'black' }, void 0), jsx("path", { d: 'M192.465 13.7143H183.923V47.4651H192.445V32.6537C192.445 25.0766 195.489 20.6537 200.71 20.6537C204.711 20.6537 207.214 23.4034 207.214 27.36V47.4651H215.784V25.3714C215.784 17.9794 210.764 13.1794 203.303 13.1794C201.164 13.1415 199.049 13.6375 197.155 14.6215C195.261 15.6054 193.648 17.0457 192.465 18.8091V13.7143Z', fill: 'black' }, void 0), jsx("path", { d: 'M92.1167 13.6731L76.4459 29.0057L94.1206 47.4651H82.2982L68.1598 31.9131V26.544L81.0847 13.6731H92.1167Z', fill: 'black' }, void 0)] }), void 0)] }), void 0), jsx("g", Object.assign({ clipPath: 'url(#clip3_47_16047)' }, { children: jsxs("g", Object.assign({ opacity: '0.6' }, { children: [jsx("path", { d: 'M241.623 48C238.422 48 235.537 47.2787 232.967 45.836C230.442 44.3483 228.436 42.2971 226.948 39.6823C225.506 37.0224 224.784 33.9343 224.784 30.4179C224.784 26.9015 225.506 23.8359 226.948 21.2211C228.436 18.5612 230.442 16.51 232.967 15.0673C235.537 13.5796 238.422 12.8358 241.623 12.8358C245.59 12.8358 248.926 13.8727 251.631 15.9465C254.381 18.0202 256.117 20.7928 256.838 24.2641H251.022C250.571 22.1904 249.467 20.5899 247.709 19.4629C245.951 18.2907 243.899 17.7047 241.555 17.7047C239.662 17.7047 237.881 18.178 236.213 19.1248C234.545 20.0715 233.192 21.4916 232.155 23.385C231.118 25.2785 230.6 27.6228 230.6 30.4179C230.6 33.213 231.118 35.5573 232.155 37.4507C233.192 39.3442 234.545 40.7868 236.213 41.7786C237.881 42.7254 239.662 43.1987 241.555 43.1987C243.899 43.1987 245.951 42.6352 247.709 41.5081C249.467 40.336 250.571 38.6905 251.022 36.5716H256.838C256.162 39.9528 254.449 42.7028 251.699 44.8217C248.949 46.9406 245.59 48 241.623 48Z', fill: 'black' }, void 0), jsx("path", { d: 'M262.742 47.1885V0H268.423V47.1885H262.742Z', fill: 'black' }, void 0), jsx("path", { d: 'M290.987 48C287.831 48 284.991 47.2787 282.467 45.836C279.942 44.3934 277.936 42.3647 276.448 39.7499C275.006 37.0901 274.284 33.9794 274.284 30.4179C274.284 26.8564 275.028 23.7682 276.516 21.1535C278.004 18.4936 280.01 16.4424 282.534 14.9997C285.104 13.5571 287.967 12.8358 291.123 12.8358C294.278 12.8358 297.118 13.5571 299.643 14.9997C302.168 16.4424 304.151 18.4936 305.594 21.1535C307.082 23.7682 307.826 26.8564 307.826 30.4179C307.826 33.9794 307.082 37.0901 305.594 39.7499C304.106 42.3647 302.078 44.3934 299.508 45.836C296.983 47.2787 294.143 48 290.987 48ZM290.987 43.1311C292.926 43.1311 294.729 42.6577 296.397 41.711C298.065 40.7643 299.418 39.3442 300.455 37.4507C301.491 35.5573 302.01 33.213 302.01 30.4179C302.01 27.6228 301.491 25.2785 300.455 23.385C299.463 21.4916 298.133 20.0715 296.465 19.1248C294.797 18.178 293.016 17.7047 291.123 17.7047C289.184 17.7047 287.381 18.178 285.713 19.1248C284.045 20.0715 282.692 21.4916 281.655 23.385C280.618 25.2785 280.1 27.6228 280.1 30.4179C280.1 33.213 280.618 35.5573 281.655 37.4507C282.692 39.3442 284.022 40.7643 285.645 41.711C287.313 42.6577 289.094 43.1311 290.987 43.1311Z', fill: 'black' }, void 0), jsx("path", { d: 'M325.935 48C321.968 48 318.812 46.8053 316.468 44.416C314.123 41.9815 312.951 38.2622 312.951 33.2581V13.6473H318.632V32.6495C318.632 39.6372 321.494 43.1311 327.22 43.1311C330.15 43.1311 332.562 42.0942 334.455 40.0204C336.394 37.9016 337.363 34.9036 337.363 31.0265V13.6473H343.044V47.1885H337.904L337.499 41.17C336.462 43.2889 334.906 44.9569 332.832 46.1742C330.804 47.3914 328.505 48 325.935 48Z', fill: 'black' }, void 0), jsx("path", { d: 'M365.58 48C362.244 48 359.314 47.2336 356.789 45.7008C354.31 44.168 352.371 42.0717 350.974 39.4118C349.621 36.752 348.945 33.7314 348.945 30.3503C348.945 26.9691 349.644 23.9711 351.041 21.3563C352.439 18.6965 354.377 16.6227 356.857 15.135C359.336 13.6022 362.267 12.8358 365.648 12.8358C368.398 12.8358 370.832 13.3993 372.951 14.5264C375.07 15.6534 376.716 17.2313 377.888 19.26V0H383.568V47.1885H378.429L377.888 41.6434C376.806 43.2664 375.25 44.7315 373.222 46.0389C371.193 47.3463 368.646 48 365.58 48ZM366.189 43.0635C368.443 43.0635 370.427 42.545 372.14 41.5081C373.898 40.4262 375.25 38.9384 376.197 37.045C377.189 35.1515 377.685 32.9425 377.685 30.4179C377.685 27.8933 377.189 25.6842 376.197 23.7908C375.25 21.8973 373.898 20.4321 372.14 19.3953C370.427 18.3133 368.443 17.7723 366.189 17.7723C363.98 17.7723 361.996 18.3133 360.238 19.3953C358.525 20.4321 357.172 21.8973 356.181 23.7908C355.234 25.6842 354.76 27.8933 354.76 30.4179C354.76 32.9425 355.234 35.1515 356.181 37.045C357.172 38.9384 358.525 40.4262 360.238 41.5081C361.996 42.545 363.98 43.0635 366.189 43.0635Z', fill: 'black' }, void 0)] }), void 0) }), void 0), jsxs("defs", { children: [jsx("clipPath", Object.assign({ id: 'clip0_47_16047' }, { children: jsx("rect", { width: '215.784', height: '48', fill: 'white' }, void 0) }), void 0), jsx("clipPath", Object.assign({ id: 'clip1_47_16047' }, { children: jsx("rect", { width: '48', height: '48', fill: 'white' }, void 0) }), void 0), jsx("clipPath", Object.assign({ id: 'clip2_47_16047' }, { children: jsx("rect", { width: '156.264', height: '48', fill: 'white', transform: 'translate(59.52)' }, void 0) }), void 0), jsx("clipPath", Object.assign({ id: 'clip3_47_16047' }, { children: jsx("rect", { width: '158.784', height: '48', fill: 'white', transform: 'translate(224.784)' }, void 0) }), void 0)] }, void 0)] }), void 0));
|
|
28070
28075
|
|
|
28071
|
-
const Link$
|
|
28076
|
+
const Link$2 = ({ size }) => (jsxs("svg", Object.assign({ className: `Logo Logo--${size}`, viewBox: '0 0 85 25', fill: 'none' }, { children: [jsxs("g", Object.assign({ "clip-path": 'url(#clip0_1675_17246)' }, { children: [jsx("path", { d: 'M9.03261 0.424744L8.9942 10.3921C8.99452 10.7155 8.93109 11.0357 8.80754 11.3345C8.68399 11.6334 8.50273 11.9049 8.27414 12.1336C8.04555 12.3623 7.77411 12.5437 7.47535 12.6674C7.1766 12.7911 6.85638 12.8547 6.53302 12.8545H0.0256632C-0.157676 10.0576 0.64215 7.2845 2.28683 5.01481C3.93152 2.74511 6.31765 1.1215 9.03261 0.424744V0.424744Z', fill: '#FF9400' }, void 0), jsx("path", { d: 'M12.8309 17.8536V24.0636C10.1071 24.248 7.40162 23.4999 5.15961 21.9421C2.9176 20.3844 1.27261 18.1099 0.4953 15.4928H10.3685C11.0077 15.4809 11.6256 15.7225 12.087 16.1649C12.5485 16.6073 12.8159 17.2145 12.8309 17.8536V17.8536Z', fill: '#FFB32B' }, void 0), jsx("path", { d: 'M20.518 20.5701C19.173 21.9187 17.526 22.9273 15.7133 23.5121V13.7356C15.7133 12.3724 16.7432 11.2707 18.0085 11.2707H24.0114C24.1276 12.9804 23.8759 14.6951 23.2732 16.2993C22.6706 17.9034 21.7311 19.3598 20.518 20.5701V20.5701Z', fill: '#FF9400' }, void 0), jsx("path", { d: 'M23.4575 8.37204L14.0689 8.3361C13.4473 8.34708 12.8466 8.11182 12.3978 7.68162C11.9491 7.25143 11.6887 6.66122 11.6734 6.03975V0.0528755C14.2726 -0.022276 16.8261 0.747417 18.9508 2.24648C21.0755 3.74554 22.6568 5.89314 23.4575 8.36708V8.37204Z', fill: '#FFB32B' }, void 0)] }), void 0), jsx("path", { d: 'M71.2251 0.026001H66.8434V24.1176H71.2251V0.026001Z', fill: 'black' }, void 0), jsx("path", { d: 'M83.3883 6.96599L75.4344 14.7482L84.4054 24.1181L78.4048 24.1181L71.2286 16.2239V13.4988L77.7889 6.96599H83.3883Z', fill: 'black' }, void 0), jsx("path", { d: 'M45.3053 0.026001H40.9729V4.31042H45.3053V0.026001Z', fill: 'black' }, void 0), jsx("path", { d: 'M45.3124 6.96595H40.9764V24.1181H45.3124V6.96595Z', fill: 'black' }, void 0), jsx("path", { d: 'M52.3287 7.06107H47.9927V24.1181H52.3181V16.674C52.3181 12.8281 53.8631 10.5833 56.5133 10.5833C58.544 10.5833 59.8145 11.9789 59.8145 13.9871V24.1181H64.1645V12.9778C64.1645 9.2259 61.6165 6.7896 57.8295 6.7896C56.7437 6.77036 55.6705 7.02209 54.709 7.52152C53.7475 8.02095 52.9289 8.75197 52.3287 9.64703V7.06107Z', fill: 'black' }, void 0), jsx("path", { d: 'M33.9793 11.1494V18.182C33.9793 19.6756 34.9288 20.5904 36.3877 20.5904H38.9106V24.1181L35.913 24.1181C32.2155 24.1181 29.8071 21.8448 29.8071 18.3865L29.8071 4.31042H33.9654V7.66326L33.9793 11.1494Z', fill: 'black' }, void 0), jsx("defs", { children: jsx("clipPath", Object.assign({ id: 'clip0_1675_17246' }, { children: jsx("rect", { width: '24.038', height: '24.038', fill: 'white', transform: 'translate(0 0.0530701)' }, void 0) }), void 0) }, void 0)] }), void 0));
|
|
28072
28077
|
|
|
28073
28078
|
const LinkWhite = ({ size }) => (jsxs("svg", Object.assign({ className: `Logo Logo--${size}`, viewBox: '0 0 82 24', fill: 'none' }, { children: [jsxs("g", Object.assign({ "clip-path": 'url(#clip0_3771_2593)' }, { children: [jsx("path", { d: 'M8.69146 0.792725L8.65449 10.3835C8.6548 10.6947 8.59377 11.0028 8.47488 11.2904C8.356 11.5779 8.18159 11.8392 7.96164 12.0592C7.74168 12.2793 7.4805 12.4538 7.19303 12.5729C6.90556 12.6919 6.59744 12.7531 6.2863 12.7529H0.0247817C-0.151631 10.0616 0.617978 7.39333 2.20053 5.20938C3.78307 3.02543 6.07906 1.46316 8.69146 0.792725Z', fill: 'white' }, void 0), jsx("path", { d: 'M12.3461 17.563V23.5384C9.72523 23.7159 7.12197 22.996 4.96466 21.4971C2.80735 19.9982 1.22451 17.8096 0.476562 15.2914H9.97675C10.5918 15.2799 11.1863 15.5124 11.6304 15.9381C12.0744 16.3638 12.3317 16.9481 12.3461 17.563Z', fill: 'white', "fill-opacity": '0.6' }, void 0), jsx("path", { d: 'M19.7427 20.1771C18.4486 21.4748 16.8638 22.4452 15.1196 23.008V13.6008C15.1196 12.2891 16.1105 11.229 17.328 11.229H23.1042C23.216 12.8741 22.9738 14.524 22.3939 16.0676C21.814 17.6112 20.91 19.0125 19.7427 20.1771Z', fill: 'white' }, void 0), jsx("path", { d: 'M22.5714 8.43988L13.5374 8.4053C12.9393 8.41587 12.3613 8.18949 11.9295 7.77555C11.4977 7.36161 11.2471 6.79369 11.2324 6.1957V0.43501C13.7334 0.362698 16.1905 1.10331 18.2349 2.54574C20.2793 3.98817 21.8009 6.05463 22.5714 8.43511V8.43988Z', fill: 'white', "fill-opacity": '0.6' }, void 0)] }), void 0), jsx("path", { d: 'M68.5345 0.408936H64.3183V23.5904H68.5345V0.408936Z', fill: 'white' }, void 0), jsx("path", { d: 'M80.2381 7.08673L72.5847 14.575L81.2168 23.5908L75.4429 23.5908L68.5378 15.9949V13.3727L74.8502 7.08673H80.2381Z', fill: 'white' }, void 0), jsx("path", { d: 'M43.5939 0.408936H39.4251V4.53149H43.5939V0.408936Z', fill: 'white' }, void 0), jsx("path", { d: 'M43.6007 7.0867H39.4285V23.5908H43.6007V7.0867Z', fill: 'white' }, void 0), jsx("path", { d: 'M50.3519 7.17822H46.1797V23.5908H50.3417V16.428C50.3417 12.7274 51.8284 10.5674 54.3784 10.5674C56.3324 10.5674 57.5549 11.9103 57.5549 13.8426V23.5908H61.7406V12.8714C61.7406 9.26127 59.2888 6.91701 55.6449 6.91701C54.6001 6.8985 53.5674 7.14072 52.6423 7.62128C51.7172 8.10184 50.9294 8.80524 50.3519 9.66649V7.17822Z', fill: 'white' }, void 0), jsx("path", { d: 'M32.6958 11.1121V17.879C32.6958 19.3161 33.6094 20.1964 35.0132 20.1964H37.4407V23.5908L34.5564 23.5908C30.9986 23.5908 28.6812 21.4035 28.6812 18.0757L28.6812 4.53149H32.6824V7.75766L32.6958 11.1121Z', fill: 'white' }, void 0), jsx("defs", { children: jsx("clipPath", Object.assign({ id: 'clip0_3771_2593' }, { children: jsx("rect", { width: '23.1298', height: '23.1298', fill: 'white', transform: 'translate(0 0.435059)' }, void 0) }), void 0) }, void 0)] }), void 0));
|
|
28074
28079
|
|
|
@@ -28132,7 +28137,7 @@ var Logos = /*#__PURE__*/Object.freeze({
|
|
|
28132
28137
|
WorkflooTestWhite: WorkflooTestWhite,
|
|
28133
28138
|
WorkflooLegacy: WorkflooLegacy,
|
|
28134
28139
|
WorkflooBeta: WorkflooBeta,
|
|
28135
|
-
Link: Link$
|
|
28140
|
+
Link: Link$2,
|
|
28136
28141
|
LinkWhite: LinkWhite
|
|
28137
28142
|
});
|
|
28138
28143
|
|
|
@@ -28392,7 +28397,7 @@ const Accordion = ({ title = '', children, isGlobalOpen = false, isParentClick =
|
|
|
28392
28397
|
* @param {object} JsonViewerProps.sortFields - Array to sort jsonData
|
|
28393
28398
|
* @returns {symbol} The component.
|
|
28394
28399
|
*/
|
|
28395
|
-
const JsonViewer = ({ downloadFunction, downloadBtnIcon = 'Paperclip', downloadBtnLabel, downloadBtnType, jsonData, sortFields, }) => {
|
|
28400
|
+
const JsonViewer = ({ downloadFunction, downloadBtnIcon = 'Paperclip', downloadBtnLabel, downloadBtnType, jsonData, sortFields, keysShowBtnDownload, }) => {
|
|
28396
28401
|
const [isOpen, setIsOpen] = useState(false);
|
|
28397
28402
|
const [isParentClick, setIsParentClick] = useState(false);
|
|
28398
28403
|
const { theme } = useTheme();
|
|
@@ -28426,7 +28431,7 @@ const JsonViewer = ({ downloadFunction, downloadBtnIcon = 'Paperclip', downloadB
|
|
|
28426
28431
|
? objToPrint.forEach((key, index) => {
|
|
28427
28432
|
i = index > 0 && index % 4 === 0 ? i + 1 : i;
|
|
28428
28433
|
arrayTem[i] = (jsxs(Fragment$1, { children: [arrayTem[i], jsxs("div", Object.assign({ className: 'JsonViewer__label' }, { children: [jsx("label", Object.assign({ className: 'JsonViewer__key' }, { children: key }), void 0), jsx("label", Object.assign({ className: 'JsonViewer__value' }, { children: primitiveData && primitiveData.hasOwnProperty(key)
|
|
28429
|
-
? getPrimitiveValue(primitiveData[key])
|
|
28434
|
+
? getPrimitiveValue(primitiveData[key], key)
|
|
28430
28435
|
: '' }), void 0)] }), void 0)] }, `data-${key}-
|
|
28431
28436
|
${primitiveData && primitiveData[key]}-${id}`));
|
|
28432
28437
|
})
|
|
@@ -28437,19 +28442,19 @@ const JsonViewer = ({ downloadFunction, downloadBtnIcon = 'Paperclip', downloadB
|
|
|
28437
28442
|
})] }, `print-parent-${id}`));
|
|
28438
28443
|
return responseDiv;
|
|
28439
28444
|
};
|
|
28440
|
-
const getPrimitiveValue = (value) => {
|
|
28445
|
+
const getPrimitiveValue = (value, key) => {
|
|
28441
28446
|
let returnedValue = value;
|
|
28442
28447
|
if (typeof value === 'boolean') {
|
|
28443
28448
|
returnedValue = value ? 'true' : 'false';
|
|
28444
28449
|
}
|
|
28445
|
-
return
|
|
28446
|
-
? renderDownloadBtn(value
|
|
28450
|
+
return keysShowBtnDownload && keysShowBtnDownload.includes(key)
|
|
28451
|
+
? renderDownloadBtn(value, key)
|
|
28447
28452
|
: returnedValue;
|
|
28448
28453
|
};
|
|
28449
|
-
const renderDownloadBtn = (value) => {
|
|
28454
|
+
const renderDownloadBtn = (value, key) => {
|
|
28450
28455
|
return (jsx(Button, { name: `btnDwonloadFile_${value}`, icon: downloadBtnIcon, iconPosition: 'left', appearance: downloadBtnType ? downloadBtnType : 'secondary', disabled: false, children: downloadBtnLabel, onClick: () => {
|
|
28451
28456
|
if (downloadFunction)
|
|
28452
|
-
downloadFunction(value);
|
|
28457
|
+
downloadFunction(value, key);
|
|
28453
28458
|
} }, `btn-down-${value}`));
|
|
28454
28459
|
};
|
|
28455
28460
|
const getLevel = (levelName, data, id, objTemplate = []) => {
|
|
@@ -28472,7 +28477,7 @@ const JsonViewer = ({ downloadFunction, downloadBtnIcon = 'Paperclip', downloadB
|
|
|
28472
28477
|
primitiveValues &&
|
|
28473
28478
|
Object.keys(primitiveValues).length >
|
|
28474
28479
|
0 /** It validates if there is primitive calues and print them */
|
|
28475
|
-
? printPrimitiveValues(primitiveValues, id,
|
|
28480
|
+
? printPrimitiveValues(primitiveValues, id, objectTemplate)
|
|
28476
28481
|
: null,
|
|
28477
28482
|
objectValues &&
|
|
28478
28483
|
Object.keys(objectValues).length >
|
|
@@ -29723,7 +29728,7 @@ function isModifiedEvent(event) {
|
|
|
29723
29728
|
/**
|
|
29724
29729
|
* The public API for rendering a history-aware <a>.
|
|
29725
29730
|
*/
|
|
29726
|
-
const Link = /*#__PURE__*/forwardRef(function LinkWithRef(_ref4, ref) {
|
|
29731
|
+
const Link$1 = /*#__PURE__*/forwardRef(function LinkWithRef(_ref4, ref) {
|
|
29727
29732
|
let {
|
|
29728
29733
|
onClick,
|
|
29729
29734
|
reloadDocument,
|
|
@@ -29762,7 +29767,7 @@ const Link = /*#__PURE__*/forwardRef(function LinkWithRef(_ref4, ref) {
|
|
|
29762
29767
|
});
|
|
29763
29768
|
|
|
29764
29769
|
if (process.env.NODE_ENV !== "production") {
|
|
29765
|
-
Link.displayName = "Link";
|
|
29770
|
+
Link$1.displayName = "Link";
|
|
29766
29771
|
}
|
|
29767
29772
|
|
|
29768
29773
|
/**
|
|
@@ -29810,7 +29815,7 @@ const NavLink = /*#__PURE__*/forwardRef(function NavLinkWithRef(_ref5, ref) {
|
|
|
29810
29815
|
let style = typeof styleProp === "function" ? styleProp({
|
|
29811
29816
|
isActive
|
|
29812
29817
|
}) : styleProp;
|
|
29813
|
-
return /*#__PURE__*/createElement(Link, _extends({}, rest, {
|
|
29818
|
+
return /*#__PURE__*/createElement(Link$1, _extends({}, rest, {
|
|
29814
29819
|
"aria-current": ariaCurrent,
|
|
29815
29820
|
className: className,
|
|
29816
29821
|
ref: ref,
|
|
@@ -30089,12 +30094,12 @@ const Tile = ({ isSelected, media, onClick, title, value, subtitle = '', mediaSi
|
|
|
30089
30094
|
return (jsxs("div", Object.assign({ className: classes, onClick: handleOnClick }, { children: [jsxs("div", Object.assign({ className: 'Tile__Wrapper' }, { children: [jsxs("div", Object.assign({ className: 'Tile__TitleWrapper' }, { children: [jsx("div", Object.assign({ className: 'Tile__Media' }, { children: jsx(Media, { icon: media, size: mediaSize, appearance: 'info' }, void 0) }), void 0), jsxs("div", { children: [jsx("div", Object.assign({ className: 'Tile__Title' }, { children: title }), void 0), subtitle !== '' && (jsx("div", Object.assign({ className: 'Tile__Subtitle' }, { children: subtitle }), void 0))] }, void 0)] }), void 0), jsx("div", Object.assign({ className: 'Tile__RightMediaWrapper' }, { children: rightMedia !== null && rightMedia }), void 0)] }), void 0), tagsMarkup] }), void 0));
|
|
30090
30095
|
};
|
|
30091
30096
|
|
|
30092
|
-
const COMPONENT_NAME$
|
|
30097
|
+
const COMPONENT_NAME$6 = 'Totalizer';
|
|
30093
30098
|
const Totalizer = ({ action, direction, icon, isDisabled, isFocused, label, placeholderValue, value, theme: themeProp, }) => {
|
|
30094
30099
|
const { theme } = useTheme();
|
|
30095
30100
|
const themeClass = `has-Theme${themeProp ? themeProp.toUpperCase() : theme.toUpperCase()}`;
|
|
30096
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
30097
|
-
const titleMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30101
|
+
const className = cssClassName(COMPONENT_NAME$6, themeClass, isDisabled && 'isDisabled', isFocused && 'isFocused', direction && `has-${direction}Direction`);
|
|
30102
|
+
const titleMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$6}__TitleWrapper` }, { children: label }), void 0)) : null;
|
|
30098
30103
|
let iconSource;
|
|
30099
30104
|
if (icon) {
|
|
30100
30105
|
if (isValidIcon(icon.icon)) {
|
|
@@ -30104,25 +30109,25 @@ const Totalizer = ({ action, direction, icon, isDisabled, isFocused, label, plac
|
|
|
30104
30109
|
iconSource = icon.icon;
|
|
30105
30110
|
}
|
|
30106
30111
|
}
|
|
30107
|
-
const iconMarkup = icon ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$
|
|
30108
|
-
const headerMarkup = titleMarkup || iconMarkup ? (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30109
|
-
const valueMarkup = value ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30110
|
-
const placeholderValueMarkup = placeholderValue ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30112
|
+
const iconMarkup = icon ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$6}__IconWrapper` }, { children: iconSource }), void 0)) : null;
|
|
30113
|
+
const headerMarkup = titleMarkup || iconMarkup ? (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$6}__HeaderWrapper` }, { children: [titleMarkup, iconMarkup] }), void 0)) : null;
|
|
30114
|
+
const valueMarkup = value ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$6}__ValueWrapper` }, { children: value }), void 0)) : null;
|
|
30115
|
+
const placeholderValueMarkup = placeholderValue ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$6}__PlaceholderValueWrapper` }, { children: placeholderValue }), void 0)) : null;
|
|
30111
30116
|
const valueContentToRender = (!valueMarkup && placeholderValueMarkup) || valueMarkup;
|
|
30112
|
-
const valueContainerMarkup = valueMarkup || placeholderValueMarkup ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30113
|
-
const actionMarkup = action ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30114
|
-
const contentClassName = cssClassName(`${COMPONENT_NAME$
|
|
30117
|
+
const valueContainerMarkup = valueMarkup || placeholderValueMarkup ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$6}__ValueContainerWrapper` }, { children: valueContentToRender }), void 0)) : null;
|
|
30118
|
+
const actionMarkup = action ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$6}__ActionWrapper` }, { children: jsx(AlphaButton, Object.assign({ id: action.id, onClick: action.onClick, onMouseEnter: action.onMouseEnter, onTouchStart: action.onTouchStart, isDisabled: action.isDisabled || isDisabled, isLoading: action.isLoading, isDanger: action.isDanger, icon: action.icon ? { icon: action.icon } : undefined, isPrimary: true }, { children: action.content }), void 0) }), void 0)) : null;
|
|
30119
|
+
const contentClassName = cssClassName(`${COMPONENT_NAME$6}__ContentWrapper`, action && 'has-Action');
|
|
30115
30120
|
const contentMarkup = valueContainerMarkup || actionMarkup ? (jsxs("div", Object.assign({ className: contentClassName }, { children: [valueContainerMarkup, actionMarkup] }), void 0)) : null;
|
|
30116
30121
|
return (jsxs("div", Object.assign({ className: className }, { children: [headerMarkup, contentMarkup] }), void 0));
|
|
30117
30122
|
};
|
|
30118
30123
|
|
|
30119
|
-
const COMPONENT_NAME$
|
|
30124
|
+
const COMPONENT_NAME$5 = 'TimeSelector__TimePicker__List';
|
|
30120
30125
|
const List = ({ items, selected, onChange }) => {
|
|
30121
30126
|
const listWrapperRef = useRef(null);
|
|
30122
30127
|
const scrollToSelected = () => {
|
|
30123
30128
|
const listWrapper = listWrapperRef.current;
|
|
30124
30129
|
if (listWrapper) {
|
|
30125
|
-
const selectedElement = listWrapper.querySelector(`.${COMPONENT_NAME$
|
|
30130
|
+
const selectedElement = listWrapper.querySelector(`.${COMPONENT_NAME$5}__ListItem--selected`);
|
|
30126
30131
|
if (selectedElement) {
|
|
30127
30132
|
const { top } = selectedElement.getBoundingClientRect();
|
|
30128
30133
|
const { top: listWrapperTop } = listWrapper.getBoundingClientRect();
|
|
@@ -30144,16 +30149,16 @@ const List = ({ items, selected, onChange }) => {
|
|
|
30144
30149
|
const renderItem = (item, index) => {
|
|
30145
30150
|
const { label, value } = item;
|
|
30146
30151
|
const isSelected = Boolean(selected !== null && selected !== undefined && selected === value);
|
|
30147
|
-
const className = cssClassName(`${COMPONENT_NAME$
|
|
30152
|
+
const className = cssClassName(`${COMPONENT_NAME$5}__ListItem`, isSelected && 'selected');
|
|
30148
30153
|
const handleClick = () => handleChange(value);
|
|
30149
|
-
return (jsx("li", Object.assign({ className: className, onClick: handleClick }, { children: label }), `${COMPONENT_NAME$
|
|
30154
|
+
return (jsx("li", Object.assign({ className: className, onClick: handleClick }, { children: label }), `${COMPONENT_NAME$5}__ListItem-${index}`));
|
|
30150
30155
|
};
|
|
30151
30156
|
const itemsMarkup = items ? items.map(renderItem) : null;
|
|
30152
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
30157
|
+
const className = cssClassName(COMPONENT_NAME$5);
|
|
30153
30158
|
return (jsx("div", Object.assign({ className: className, ref: listWrapperRef }, { children: jsx("ul", { children: itemsMarkup }, void 0) }), void 0));
|
|
30154
30159
|
};
|
|
30155
30160
|
|
|
30156
|
-
const COMPONENT_NAME$
|
|
30161
|
+
const COMPONENT_NAME$4 = 'TimeSelector__TimePicker';
|
|
30157
30162
|
const TimePicker = ({ headers, items, onChange, selected, theme: ThemeProp, }) => {
|
|
30158
30163
|
const { theme: themeValue } = useTheme();
|
|
30159
30164
|
const theme = ThemeProp || themeValue;
|
|
@@ -30167,18 +30172,18 @@ const TimePicker = ({ headers, items, onChange, selected, theme: ThemeProp, }) =
|
|
|
30167
30172
|
onChange(selectedValues);
|
|
30168
30173
|
}
|
|
30169
30174
|
};
|
|
30170
|
-
const renderHeader = (header, index) => (jsx("span", Object.assign({ className: `${COMPONENT_NAME$
|
|
30171
|
-
const headersMarkup = headers ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30175
|
+
const renderHeader = (header, index) => (jsx("span", Object.assign({ className: `${COMPONENT_NAME$4}__HeaderItem` }, { children: capitalize(header) }), `${COMPONENT_NAME$4}__HeaderItem-${index}`));
|
|
30176
|
+
const headersMarkup = headers ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$4}__HeadersMarkup` }, { children: headers.map(renderHeader) }), void 0)) : null;
|
|
30172
30177
|
const renderList = (listItems, index) => {
|
|
30173
30178
|
const selectedValue = selected ? selected[index] : undefined;
|
|
30174
|
-
return (jsx(List, { items: listItems, onChange: (value) => handleChange(value, index), selected: selectedValue }, `${COMPONENT_NAME$
|
|
30179
|
+
return (jsx(List, { items: listItems, onChange: (value) => handleChange(value, index), selected: selectedValue }, `${COMPONENT_NAME$4}__List-${index}`));
|
|
30175
30180
|
};
|
|
30176
|
-
const itemsListsMarkup = items ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30177
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
30181
|
+
const itemsListsMarkup = items ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$4}__ItemsListWrapper` }, { children: items.map(renderList) }), void 0)) : null;
|
|
30182
|
+
const className = cssClassName(COMPONENT_NAME$4, theme);
|
|
30178
30183
|
return (jsxs("div", Object.assign({ className: className }, { children: [headersMarkup, itemsListsMarkup] }), void 0));
|
|
30179
30184
|
};
|
|
30180
30185
|
|
|
30181
|
-
const COMPONENT_NAME$
|
|
30186
|
+
const COMPONENT_NAME$3 = 'TimeSelector';
|
|
30182
30187
|
const TimeSelector = ({ plurals, singulars, value, disabled, error, helpText, label, onChange, readOnly, placeholderValues, minMaxDays = [0, 365], minMaxHours = [0, 24], minMaxMinutes = [0, 60], minMaxSeconds = [0, 60], theme: themeProp, isRequired, }) => {
|
|
30183
30188
|
const { theme: themeValue } = useTheme();
|
|
30184
30189
|
const theme = themeProp || themeValue;
|
|
@@ -30269,15 +30274,15 @@ const TimeSelector = ({ plurals, singulars, value, disabled, error, helpText, la
|
|
|
30269
30274
|
const separator = index === Object.keys(singulars).length - 1 ? '' : ', ';
|
|
30270
30275
|
const min = getMaxMins()[field][0];
|
|
30271
30276
|
const max = getMaxMins()[field][1];
|
|
30272
|
-
return (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30277
|
+
return (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$3}__InnerField` }, { children: [jsx("input", { type: 'number', value: elValue, placeholder: placeholderValue, onFocus: handleFocusField, onBlur: handleBlurField, disabled: disabled, onChange: handleInputChange, name: field, min: min, max: max }, void 0), jsxs("span", { children: [label, separator] }, void 0)] }), index));
|
|
30273
30278
|
};
|
|
30274
30279
|
const fieldsMarkup = Object.keys(singulars).map(renderField);
|
|
30275
|
-
const fieldClass = cssClassName(`${COMPONENT_NAME$
|
|
30276
|
-
const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30280
|
+
const fieldClass = cssClassName(`${COMPONENT_NAME$3}__Field`, (isFocused || isActive) && 'isFocused');
|
|
30281
|
+
const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$3}__LabelWrapper` }, { children: jsx(AlphaLabel, Object.assign({ isRequired: isRequired }, { children: label }), void 0) }), void 0)) : null;
|
|
30277
30282
|
const helpTextMarkup = helpText
|
|
30278
|
-
? helpText && (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30283
|
+
? helpText && (jsx("div", Object.assign({ className: `${COMPONENT_NAME$3}__HelpTextWrapper` }, { children: helpText }), void 0))
|
|
30279
30284
|
: null;
|
|
30280
|
-
const fieldMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30285
|
+
const fieldMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$3}__FieldWrapper` }, { children: jsxs(AlphaTooltip, Object.assign({ content: error, appearance: 'error', persistence: true, isActive: hasError }, { children: [labelMarkup, jsx("div", Object.assign({ className: fieldClass, onClick: handleFieldClick, ref: fieldRef }, { children: fieldsMarkup }), void 0)] }), void 0) }), void 0));
|
|
30281
30286
|
const timePickerValue = useMemo(() => {
|
|
30282
30287
|
if (value) {
|
|
30283
30288
|
const { days, hours, minutes, seconds } = value;
|
|
@@ -30288,7 +30293,7 @@ const TimeSelector = ({ plurals, singulars, value, disabled, error, helpText, la
|
|
|
30288
30293
|
const timePickerHeaders = useMemo(() => [plurals.days, plurals.hours, plurals.minutes, plurals.seconds], [plurals]);
|
|
30289
30294
|
const timePickerMarkup = (jsx(TimePicker, { items: [daysList, hoursList, minutesList, secondsList], headers: timePickerHeaders, onChange: handleTimePickerChange, selected: timePickerValue, theme: theme }, void 0));
|
|
30290
30295
|
const popoverMarkup = (jsx(Popover$1, Object.assign({ activator: fieldMarkup, isActive: isActive, isFullWidth: true, onClose: handleClosePopover }, { children: timePickerMarkup }), void 0));
|
|
30291
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
30296
|
+
const className = cssClassName(COMPONENT_NAME$3, theme, !value && 'isEmpty');
|
|
30292
30297
|
return (jsxs("div", Object.assign({ className: className }, { children: [popoverMarkup, helpTextMarkup] }), void 0));
|
|
30293
30298
|
};
|
|
30294
30299
|
function getTimeValue(value) {
|
|
@@ -30302,15 +30307,15 @@ function getTimeList(min, max) {
|
|
|
30302
30307
|
}));
|
|
30303
30308
|
}
|
|
30304
30309
|
|
|
30305
|
-
const COMPONENT_NAME$
|
|
30310
|
+
const COMPONENT_NAME$2 = 'FilterField';
|
|
30306
30311
|
const FilterField = ({ label, isRequired = false, field, onRemove, name, }) => {
|
|
30307
|
-
const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30308
|
-
const filterFieldMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30309
|
-
const removeButtonMarkup = onRemove && !isRequired ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30310
|
-
return (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30312
|
+
const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$2}__LabelWrapper` }, { children: label }), void 0)) : null;
|
|
30313
|
+
const filterFieldMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$2}__FieldWrapper`, id: name }, { children: field }), void 0));
|
|
30314
|
+
const removeButtonMarkup = onRemove && !isRequired ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$2}__RemoveButtonWrapper` }, { children: jsx("button", Object.assign({ type: 'button', className: `${COMPONENT_NAME$2}__RemoveButton`, onClick: onRemove }, { children: jsx(Icon, { name: 'X' }, void 0) }), void 0) }), void 0)) : null;
|
|
30315
|
+
return (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$2}` }, { children: [labelMarkup, filterFieldMarkup, removeButtonMarkup] }), void 0));
|
|
30311
30316
|
};
|
|
30312
30317
|
|
|
30313
|
-
const COMPONENT_NAME = 'Filters';
|
|
30318
|
+
const COMPONENT_NAME$1 = 'Filters';
|
|
30314
30319
|
const Filters = ({ filters = [], onApplyFilters, onRemoveFilter, appliedFilters, onCleanFilters, onAddFilter, addFilterButtonIcon, addFilterButtonLabel, clearButtonLabel, searchButtonLabel, selectedFilters = [], }) => {
|
|
30315
30320
|
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
|
|
30316
30321
|
const mainContainerRef = useRef(null);
|
|
@@ -30331,8 +30336,8 @@ const Filters = ({ filters = [], onApplyFilters, onRemoveFilter, appliedFilters,
|
|
|
30331
30336
|
label: filter.label,
|
|
30332
30337
|
}));
|
|
30333
30338
|
const availableFiltersPopoverMarkup = filters ? (jsx(Popover$1, Object.assign({ activator: addFilterButtonMarkup, isActive: isPopoverOpen, onClose: () => setIsPopoverOpen(false) }, { children: jsx(OptionList, { selected: [], items: optionListItems, onChange: handleSelectFilter }, void 0) }), void 0)) : null;
|
|
30334
|
-
const secondaryActionsMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME}__SecondaryActionsWrapper` }, { children: availableFiltersPopoverMarkup }), void 0));
|
|
30335
|
-
const mainActionsMarkup = (jsxs("div", Object.assign({ className: `${COMPONENT_NAME}__MainActionsWrapper` }, { children: [jsx(AlphaButton, Object.assign({ onClick: onCleanFilters, isDisabled: !appliedFilters.length && !selectedFilters.length }, { children: clearButtonLabel }), void 0), jsx(AlphaButton, Object.assign({ isDisabled: !appliedFilters.length && !selectedFilters.length, isPrimary: true, onClick: onApplyFilters }, { children: searchButtonLabel }), void 0)] }), void 0));
|
|
30339
|
+
const secondaryActionsMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$1}__SecondaryActionsWrapper` }, { children: availableFiltersPopoverMarkup }), void 0));
|
|
30340
|
+
const mainActionsMarkup = (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$1}__MainActionsWrapper` }, { children: [jsx(AlphaButton, Object.assign({ onClick: onCleanFilters, isDisabled: !appliedFilters.length && !selectedFilters.length }, { children: clearButtonLabel }), void 0), jsx(AlphaButton, Object.assign({ isDisabled: !appliedFilters.length && !selectedFilters.length, isPrimary: true, onClick: onApplyFilters }, { children: searchButtonLabel }), void 0)] }), void 0));
|
|
30336
30341
|
const handleRemoveFilter = (filter) => {
|
|
30337
30342
|
onRemoveFilter === null || onRemoveFilter === void 0 ? void 0 : onRemoveFilter(filter);
|
|
30338
30343
|
};
|
|
@@ -30343,12 +30348,19 @@ const Filters = ({ filters = [], onApplyFilters, onRemoveFilter, appliedFilters,
|
|
|
30343
30348
|
const handleRemove = () => {
|
|
30344
30349
|
handleRemoveFilter(filter);
|
|
30345
30350
|
};
|
|
30346
|
-
return (jsx("div", Object.assign({ className: `${COMPONENT_NAME}__SelectedFilter` }, { children: jsx(FilterField, { label: foundFilter.label, field: foundFilter.filter, isRequired: foundFilter.isRequired, onRemove: handleRemove, name: filter }, void 0) }), index));
|
|
30351
|
+
return (jsx("div", Object.assign({ className: `${COMPONENT_NAME$1}__SelectedFilter` }, { children: jsx(FilterField, { label: foundFilter.label, field: foundFilter.filter, isRequired: foundFilter.isRequired, onRemove: handleRemove, name: filter }, void 0) }), index));
|
|
30347
30352
|
};
|
|
30348
|
-
const selectedFiltersMarkup = selectedFilters.length ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME}__SelectedFiltersWrapper` }, { children: selectedFilters.map(renderSelectedFilter) }), void 0)) : null;
|
|
30349
|
-
const actionsContainerMarkup = (jsxs("div", Object.assign({ className: `${COMPONENT_NAME}__ActionsWrapper` }, { children: [secondaryActionsMarkup, mainActionsMarkup] }), void 0));
|
|
30350
|
-
return (jsxs("div", Object.assign({ className: COMPONENT_NAME, ref: mainContainerRef }, { children: [selectedFiltersMarkup, actionsContainerMarkup] }), void 0));
|
|
30353
|
+
const selectedFiltersMarkup = selectedFilters.length ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$1}__SelectedFiltersWrapper` }, { children: selectedFilters.map(renderSelectedFilter) }), void 0)) : null;
|
|
30354
|
+
const actionsContainerMarkup = (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$1}__ActionsWrapper` }, { children: [secondaryActionsMarkup, mainActionsMarkup] }), void 0));
|
|
30355
|
+
return (jsxs("div", Object.assign({ className: COMPONENT_NAME$1, ref: mainContainerRef }, { children: [selectedFiltersMarkup, actionsContainerMarkup] }), void 0));
|
|
30356
|
+
};
|
|
30357
|
+
|
|
30358
|
+
const COMPONENT_NAME = 'Link';
|
|
30359
|
+
const Link = ({ children, className: classNameProp, component, to, }) => {
|
|
30360
|
+
const Component = component;
|
|
30361
|
+
const className = cssClassName(COMPONENT_NAME, classNameProp);
|
|
30362
|
+
return (jsx(Component, Object.assign({ className: className, to: to }, { children: children }), void 0));
|
|
30351
30363
|
};
|
|
30352
30364
|
|
|
30353
|
-
export { ActionList, Alert, AlertProvider, AlphaAttributeInput, AlphaBadge, AlphaButton, AlphaChip, AlphaFilterControl, AlphaIcon, AlphaInlineError, AlphaInputDate, InputTag$1 as AlphaInputTag, AlphaInputText, AlphaLabel, AlphaLabelledField, AlphaSpinner, AlphaStepper, AlphaTag, AlphaTile, AlphaTooltip, Totalizer as AlphaTotalizer, AnnotatedSection, Avatar, Badge, Banner, Button, CalendarPicker, Card, Checkbox, ChoiceList, Collapsible, Connector, Container, Cover, DataTable, DatePicker, DeletableSection, Divider, DynamicForm, EmptyState, ErrorIcon, FileDownloader, Filedrop, FilterControl, Filters, Footer, Form, FormField, FormLayout, Frame, Grid, GridItem, Header$1 as Header, Icon, IconButton, IndexList, InlineEdit, InputPhoneNumber, InputTag, InputText, JsonViewer, Label, ListInfo, Loader, Logo, Media, Modal, ModalHeader, Nip, OptionList, Page, PageActions, Pagination, Pane, Panel, PanelFooter, PanelHeader, PendingIcon, Popover$1 as Popover, Progress, RadioButton, SectionForm, Select, SideMenu, SkeletonInput, SkeletonMedia, SkeletonTabs, SkeletonText, SkeletonTitle, SortableList, Spinner, Stack, StepDefault, SuccessIcon, Table, Tabs, Tag, ThemeProvider, ThreadItem, Thumbnail, Tile, TimeSelector, Title, Toggle, Tooltip, WarningIcon, capitalize, cssClassName, formatDate, isComponentTypeOf, isValidIcon, themeClassConverter, useShowAlert, useTheme };
|
|
30365
|
+
export { ActionList, Alert, AlertProvider, AlphaAttributeInput, AlphaBadge, AlphaButton, AlphaChip, AlphaFilterControl, AlphaIcon, AlphaInlineError, AlphaInputDate, InputTag$1 as AlphaInputTag, AlphaInputText, AlphaLabel, AlphaLabelledField, AlphaSpinner, AlphaStepper, AlphaTag, AlphaTile, AlphaTooltip, Totalizer as AlphaTotalizer, AnnotatedSection, Avatar, Badge, Banner, Button, CalendarPicker, Card, Checkbox, ChoiceList, Collapsible, Connector, Container, Cover, DataTable, DatePicker, DeletableSection, Divider, DynamicForm, EmptyState, ErrorIcon, FileDownloader, Filedrop, FilterControl, Filters, Footer, Form, FormField, FormLayout, Frame, Grid, GridItem, Header$1 as Header, Icon, IconButton, IndexList, InlineEdit, InputPhoneNumber, InputTag, InputText, JsonViewer, Label, Link, ListInfo, Loader, Logo, Media, Modal, ModalHeader, Nip, OptionList, Page, PageActions, Pagination, Pane, Panel, PanelFooter, PanelHeader, PendingIcon, Popover$1 as Popover, Progress, RadioButton, SectionForm, Select, SideMenu, SkeletonInput, SkeletonMedia, SkeletonTabs, SkeletonText, SkeletonTitle, SortableList, Spinner, Stack, StepDefault, SuccessIcon, Table, Tabs, Tag, ThemeProvider, ThreadItem, Thumbnail, Tile, TimeSelector, Title, Toggle, Tooltip, WarningIcon, capitalize, cssClassName, formatDate, isComponentTypeOf, isValidIcon, themeClassConverter, useShowAlert, useTheme };
|
|
30354
30366
|
//# sourceMappingURL=index.js.map
|