kiban-design-system 1.0.223-alpha.0 → 1.1.1-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 +1 -3
- package/dist/components/Table/Table.d.ts +1 -3
- package/dist/components/Table/Table.props.d.ts +0 -8
- package/dist/components/index.d.ts +0 -1
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.js +163 -178
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/components/Link/Link.d.ts +0 -5
- package/dist/components/Link/Link.props.d.ts +0 -7
- package/dist/components/Link/index.d.ts +0 -3
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$2 = () => (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$2,
|
|
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$z = '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$z, 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$z}__ItemLabelWrapper` }, { children: item.label }), void 0)) : null;
|
|
1087
|
+
const dividerMarkup = divider && index < items.length - 1 ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$z}__Divider` }, { children: divider }), void 0)) : null;
|
|
1088
|
+
return (jsxs(Fragment$1, { children: [jsxs("div", Object.assign({ className: `${COMPONENT_NAME$z}__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$z}__LabelWrapper` }, { children: jsxs("label", Object.assign({ className: `${COMPONENT_NAME$z}__Label` }, { children: [label, isRequired ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$z}__IsRequiredSign` }, { children: "*" }), void 0)) : null] }), void 0) }), void 0)) : null;
|
|
1091
|
+
const itemsMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$z}__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$y = '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$y, !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$y}__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$x = '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$x, 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$x}__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$w = 'AlphaSpinner';
|
|
1142
1142
|
const AlphaSpinner = ({ icon, size }) => {
|
|
1143
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
1143
|
+
const className = cssClassName(COMPONENT_NAME$w);
|
|
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$w}__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$v = '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$v, !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$v}__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$v}__IconWrapper` }, { children: iconSource }), void 0)) : null;
|
|
1198
|
+
const spinnerMarkup = isLoading && (jsx("span", Object.assign({ className: `${COMPONENT_NAME$v}__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$u = '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$u, hasError && 'hasError', isDisabled && 'isDisabled', theme && `${theme.toUpperCase()}`, THEME_CLASS);
|
|
1207
|
+
const childrenMarkup = children ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$u}__TextWrapper` }, { children: children }), void 0)) : null;
|
|
1208
|
+
const closeButtonMarkup = removeButtonIcon && (jsx("div", Object.assign({ className: `${COMPONENT_NAME$u}__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
|
|
|
@@ -1399,10 +1399,10 @@ const Panel$1 = ({ id, children, isHidden }) => {
|
|
|
1399
1399
|
return (jsx("div", Object.assign({ className: className, id: id }, { children: children }), void 0));
|
|
1400
1400
|
};
|
|
1401
1401
|
|
|
1402
|
-
const COMPONENT_NAME$
|
|
1402
|
+
const COMPONENT_NAME$t = 'Tabs';
|
|
1403
1403
|
const Tabs = ({ onSelect, selected, tabs, children, className, areFitted, }) => {
|
|
1404
1404
|
const { theme } = useTheme();
|
|
1405
|
-
const classNames = cssClassName(COMPONENT_NAME$
|
|
1405
|
+
const classNames = cssClassName(COMPONENT_NAME$t, `is${themeClassConverter(theme)}`);
|
|
1406
1406
|
const panelMarkup = children
|
|
1407
1407
|
? 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
1408
|
: null;
|
|
@@ -1560,10 +1560,10 @@ const getPosition = (activator, tooltip, alignment) => {
|
|
|
1560
1560
|
};
|
|
1561
1561
|
};
|
|
1562
1562
|
|
|
1563
|
-
const COMPONENT_NAME$
|
|
1563
|
+
const COMPONENT_NAME$s = 'Alpha__TooltipOverlay';
|
|
1564
1564
|
const Overlay = ({ children, activator, active, zIndexOverride, position = 'bottom', appearance = 'default', width, parentTooltip, theme, onClick, }) => {
|
|
1565
1565
|
const tooltipRef = useRef(null);
|
|
1566
|
-
const overlayClassName = cssClassName(COMPONENT_NAME$
|
|
1566
|
+
const overlayClassName = cssClassName(COMPONENT_NAME$s, position && `is-${position}`, appearance && `is-${appearance}`, theme && appearance === 'default' && `is-${theme}`);
|
|
1567
1567
|
const [positionStyles, setPositionStyles] = useState({
|
|
1568
1568
|
'--tooltip-overlay-top': 0,
|
|
1569
1569
|
'--tooltip-overlay-left': 0,
|
|
@@ -1599,7 +1599,7 @@ const Overlay = ({ children, activator, active, zIndexOverride, position = 'bott
|
|
|
1599
1599
|
return markup;
|
|
1600
1600
|
};
|
|
1601
1601
|
|
|
1602
|
-
const COMPONENT_NAME$
|
|
1602
|
+
const COMPONENT_NAME$r = 'AlphaTooltip';
|
|
1603
1603
|
const AlphaTooltip = ({ content, children, activatorWrapper = 'span', isActive: isActiveProp = false, onClose, onOpen, position, width, parentTooltip, zIndexOverride, appearance, persistence, theme, }) => {
|
|
1604
1604
|
const [activatorNode, setActivatorNode] = useState(null);
|
|
1605
1605
|
const [isActive, setIsActive] = useState(isActiveProp);
|
|
@@ -1607,7 +1607,7 @@ const AlphaTooltip = ({ content, children, activatorWrapper = 'span', isActive:
|
|
|
1607
1607
|
const isMouseOver = useRef(false);
|
|
1608
1608
|
const activatorContainer = useRef(null);
|
|
1609
1609
|
const WrapperComponent = activatorWrapper;
|
|
1610
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
1610
|
+
const className = cssClassName(COMPONENT_NAME$r);
|
|
1611
1611
|
const handleOpen = useCallback(() => {
|
|
1612
1612
|
if (!isActivePersistence) {
|
|
1613
1613
|
setIsActive(true);
|
|
@@ -2182,10 +2182,10 @@ const Popover$1 = ({ activator, children, isActive, onClose, isFullWidth = false
|
|
|
2182
2182
|
};
|
|
2183
2183
|
Popover$1.Pane = Pane$1;
|
|
2184
2184
|
|
|
2185
|
-
const COMPONENT_NAME$
|
|
2185
|
+
const COMPONENT_NAME$q = 'Divider';
|
|
2186
2186
|
const Divider = ({ alignment = 'left', label }) => {
|
|
2187
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
2188
|
-
const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
2187
|
+
const className = cssClassName(COMPONENT_NAME$q, alignment, !label && 'no-label');
|
|
2188
|
+
const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$q}__LabelWrapper` }, { children: jsx("span", Object.assign({ className: `${COMPONENT_NAME$q}__Label` }, { children: label }), void 0) }), void 0)) : null;
|
|
2189
2189
|
return jsx("div", Object.assign({ className: className }, { children: labelMarkup }), void 0);
|
|
2190
2190
|
};
|
|
2191
2191
|
|
|
@@ -9629,7 +9629,7 @@ function formatDate(date, toISO) {
|
|
|
9629
9629
|
return DateTime.fromJSDate(date).toFormat('dd/MM/yyyy');
|
|
9630
9630
|
}
|
|
9631
9631
|
|
|
9632
|
-
const COMPONENT_NAME$
|
|
9632
|
+
const COMPONENT_NAME$p = 'DateInput';
|
|
9633
9633
|
const AlphaInputDate = ({ disabled, label, onChange, value, isRequired, placeholder, onBlur, errorMessage, months, weekdays, }) => {
|
|
9634
9634
|
const [isPopoverActive, setIsPopoverActive] = useState(false);
|
|
9635
9635
|
const [{ month, year }, setDate] = useState({
|
|
@@ -9640,7 +9640,7 @@ const AlphaInputDate = ({ disabled, label, onChange, value, isRequired, placehol
|
|
|
9640
9640
|
const [isErrorTooltipActive, setIsErrorTooltipActive] = useState(false);
|
|
9641
9641
|
const [selectedDate, setSelectedDate] = useState();
|
|
9642
9642
|
const inputRef = useRef(null);
|
|
9643
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
9643
|
+
const className = cssClassName(COMPONENT_NAME$p);
|
|
9644
9644
|
const handleMonthChange = (monthValue, yearValue) => {
|
|
9645
9645
|
setDate({ month: monthValue, year: yearValue });
|
|
9646
9646
|
};
|
|
@@ -9762,7 +9762,7 @@ const AlphaInputDate = ({ disabled, label, onChange, value, isRequired, placehol
|
|
|
9762
9762
|
}
|
|
9763
9763
|
}, [selectedDate]);
|
|
9764
9764
|
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$
|
|
9765
|
+
const inputMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$p}__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
9766
|
const popoverMarkup = (jsx(Popover$1, Object.assign({ activator: inputMarkup, isActive: isPopoverActive, isFullWidth: true, onClose: () => setIsPopoverActive(false) }, { children: datePickerMarkup }), void 0));
|
|
9767
9767
|
return jsx("div", Object.assign({ className: className }, { children: popoverMarkup }), void 0);
|
|
9768
9768
|
};
|
|
@@ -9852,9 +9852,9 @@ const AlphaFilterControl = ({ primaryAction, secondaryActions, sections, title,
|
|
|
9852
9852
|
return (jsxs("div", Object.assign({ className: `${MAIN_CLASS$j}` }, { children: [headerMarkup, bodyMarkup, actionsMarkup] }), void 0));
|
|
9853
9853
|
};
|
|
9854
9854
|
|
|
9855
|
-
const COMPONENT_NAME$
|
|
9855
|
+
const COMPONENT_NAME$o = 'AlphaInlineError';
|
|
9856
9856
|
const AlphaInlineError = ({ icon, children }) => {
|
|
9857
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
9857
|
+
const className = cssClassName(COMPONENT_NAME$o);
|
|
9858
9858
|
let iconSource;
|
|
9859
9859
|
if (icon) {
|
|
9860
9860
|
if (isValidIcon(icon.icon)) {
|
|
@@ -9864,23 +9864,23 @@ const AlphaInlineError = ({ icon, children }) => {
|
|
|
9864
9864
|
iconSource = icon.icon;
|
|
9865
9865
|
}
|
|
9866
9866
|
}
|
|
9867
|
-
const iconMarkup = icon ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
9868
|
-
const messageMarkup = children ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$
|
|
9867
|
+
const iconMarkup = icon ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$o}__IconWrapper` }, { children: iconSource }), void 0)) : null;
|
|
9868
|
+
const messageMarkup = children ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$o}__MessageWrapper` }, { children: children }), void 0)) : null;
|
|
9869
9869
|
return (jsxs("div", Object.assign({ className: className }, { children: [iconMarkup, messageMarkup] }), void 0));
|
|
9870
9870
|
};
|
|
9871
9871
|
|
|
9872
|
-
const COMPONENT_NAME$
|
|
9873
|
-
const className$1 = cssClassName(COMPONENT_NAME$
|
|
9872
|
+
const COMPONENT_NAME$n = 'AlphaLabel';
|
|
9873
|
+
const className$1 = cssClassName(COMPONENT_NAME$n);
|
|
9874
9874
|
const AlphaLabel = ({ children, isRequired, action, id }) => {
|
|
9875
|
-
const requiredSignMarkup = isRequired ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$
|
|
9875
|
+
const requiredSignMarkup = isRequired ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$n}__RequiredSign` }, { children: "*" }), void 0)) : null;
|
|
9876
9876
|
const labelMarkup = (jsxs("label", Object.assign({ htmlFor: id }, { children: [children, requiredSignMarkup] }), void 0));
|
|
9877
|
-
const actionMarkup = action ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
9877
|
+
const actionMarkup = action ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$n}__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
9878
|
return (jsxs("div", Object.assign({ className: className$1 }, { children: [labelMarkup, actionMarkup] }), void 0));
|
|
9879
9879
|
};
|
|
9880
9880
|
|
|
9881
|
-
const COMPONENT_NAME$
|
|
9881
|
+
const COMPONENT_NAME$m = 'AlphaLabelledField__HelpText';
|
|
9882
9882
|
const HelpText = ({ message, icon }) => {
|
|
9883
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
9883
|
+
const className = cssClassName(COMPONENT_NAME$m);
|
|
9884
9884
|
let iconSource;
|
|
9885
9885
|
if (icon) {
|
|
9886
9886
|
if (isValidIcon(icon.icon)) {
|
|
@@ -9890,24 +9890,24 @@ const HelpText = ({ message, icon }) => {
|
|
|
9890
9890
|
iconSource = icon.icon;
|
|
9891
9891
|
}
|
|
9892
9892
|
}
|
|
9893
|
-
const iconMarkup = iconSource ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
9894
|
-
const messageMarkup = message ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
9893
|
+
const iconMarkup = iconSource ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$m}__IconWrapper` }, { children: iconSource }), void 0)) : null;
|
|
9894
|
+
const messageMarkup = message ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$m}__MessageWrapper` }, { children: message }), void 0)) : null;
|
|
9895
9895
|
return (jsxs("div", Object.assign({ className: className }, { children: [iconMarkup, messageMarkup] }), void 0));
|
|
9896
9896
|
};
|
|
9897
9897
|
|
|
9898
|
-
const COMPONENT_NAME$
|
|
9898
|
+
const COMPONENT_NAME$l = 'AlphaLabelledField';
|
|
9899
9899
|
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$
|
|
9900
|
+
const className = cssClassName(COMPONENT_NAME$l);
|
|
9901
|
+
const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$l}__LabelWrapper` }, { children: jsx(AlphaLabel, Object.assign({ action: action, id: id, isRequired: isRequired }, { children: label }), void 0) }), void 0)) : null;
|
|
9902
|
+
const errorMarkup = error ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$l}__ErrorWrapper` }, { children: jsx(AlphaInlineError, Object.assign({ icon: error.icon }, { children: error.message }), void 0) }), void 0)) : null;
|
|
9903
9903
|
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$
|
|
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$l}__ContentWrapper` }, { children: children }), void 0) }), void 0)) : (children);
|
|
9905
9905
|
return (jsxs("div", Object.assign({ className: className }, { children: [labelMarkup, contentMarkup, helpTextMarkup] }), void 0));
|
|
9906
9906
|
};
|
|
9907
9907
|
|
|
9908
|
-
const COMPONENT_NAME$
|
|
9908
|
+
const COMPONENT_NAME$k = 'AlphaInputText';
|
|
9909
9909
|
const AlphaInputText = ({ isDisabled, label }) => {
|
|
9910
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
9910
|
+
const className = cssClassName(COMPONENT_NAME$k, isDisabled && 'isDisabled');
|
|
9911
9911
|
return (jsx(AlphaLabelledField, Object.assign({ label: label }, { children: jsx("div", { className: className }, void 0) }), void 0));
|
|
9912
9912
|
};
|
|
9913
9913
|
|
|
@@ -9915,14 +9915,14 @@ const StepDefault = {
|
|
|
9915
9915
|
status: 'incomplete',
|
|
9916
9916
|
};
|
|
9917
9917
|
|
|
9918
|
-
const COMPONENT_NAME$
|
|
9918
|
+
const COMPONENT_NAME$j = 'AlphaStepper__Step';
|
|
9919
9919
|
const Step = ({ iconMarkup, label, isComplete, isInactive, isSuccess, isLastStepComplete, isLastStepInactive, }) => {
|
|
9920
9920
|
const { theme } = useTheme();
|
|
9921
|
-
const itemClassName = cssClassName(`${COMPONENT_NAME$
|
|
9922
|
-
return (jsxs("div", Object.assign({ className: COMPONENT_NAME$
|
|
9921
|
+
const itemClassName = cssClassName(`${COMPONENT_NAME$j}__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');
|
|
9922
|
+
return (jsxs("div", Object.assign({ className: COMPONENT_NAME$j }, { children: [jsx("div", Object.assign({ className: itemClassName }, { children: iconMarkup }), void 0), jsx("div", Object.assign({ className: `${COMPONENT_NAME$j}__Label` }, { children: label }), void 0)] }), void 0));
|
|
9923
9923
|
};
|
|
9924
9924
|
|
|
9925
|
-
const COMPONENT_NAME$
|
|
9925
|
+
const COMPONENT_NAME$i = 'AlphaStepper';
|
|
9926
9926
|
const getSourceIcon = (icon) => {
|
|
9927
9927
|
if (icon) {
|
|
9928
9928
|
if (isValidIcon(icon.icon)) {
|
|
@@ -9937,7 +9937,7 @@ const AlphaStepper = ({ isSuccess, steps = [], completeIcon, incompleteIcon, err
|
|
|
9937
9937
|
const { theme } = useTheme();
|
|
9938
9938
|
const renderStep = (step = Object.assign({}, StepDefault), index) => {
|
|
9939
9939
|
const lastStepStatus = steps[index - 1] ? steps[index - 1].status : '';
|
|
9940
|
-
const iconClassName = cssClassName(`${COMPONENT_NAME$
|
|
9940
|
+
const iconClassName = cssClassName(`${COMPONENT_NAME$i}__IconWrapper`, (step.status === 'complete' || step.status === 'active') && `is-${theme}`, step.status !== 'complete' && `is-inactive`, step.hasError && errorIcon && 'is-danger', isSuccess && `is-success`);
|
|
9941
9941
|
let iconSource = getSourceIcon(incompleteIcon);
|
|
9942
9942
|
if (step.hasError && errorIcon)
|
|
9943
9943
|
iconSource = getSourceIcon(errorIcon);
|
|
@@ -9948,16 +9948,16 @@ const AlphaStepper = ({ isSuccess, steps = [], completeIcon, incompleteIcon, err
|
|
|
9948
9948
|
const isInactive = step.status === 'incomplete' || step.status === 'active';
|
|
9949
9949
|
const isLastStepComplete = lastStepStatus === 'complete';
|
|
9950
9950
|
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$
|
|
9951
|
+
return (jsx(Step, { iconMarkup: iconMarkup, label: step.label, isComplete: isComplete, isInactive: isInactive, isSuccess: isSuccess, isLastStepComplete: isLastStepComplete, isLastStepInactive: isLastStepInactive }, `${COMPONENT_NAME$i}-${index}`));
|
|
9952
9952
|
};
|
|
9953
9953
|
const stepsMarkup = steps ? steps.map(renderStep) : null;
|
|
9954
|
-
return jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
9954
|
+
return jsx("div", Object.assign({ className: `${COMPONENT_NAME$i}__Container` }, { children: stepsMarkup }), void 0);
|
|
9955
9955
|
};
|
|
9956
9956
|
|
|
9957
|
-
const COMPONENT_NAME$
|
|
9957
|
+
const COMPONENT_NAME$h = 'AlphaTag';
|
|
9958
9958
|
const AlphaTag = ({ color, children }) => {
|
|
9959
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
9960
|
-
const childrenMarkup = (jsx("span", Object.assign({ className: `${COMPONENT_NAME$
|
|
9959
|
+
const className = cssClassName(COMPONENT_NAME$h, color && `is-${color.color}-${color.intensity}`);
|
|
9960
|
+
const childrenMarkup = (jsx("span", Object.assign({ className: `${COMPONENT_NAME$h}__TextWrapper` }, { children: children }), void 0));
|
|
9961
9961
|
return jsx("div", Object.assign({ className: className }, { children: childrenMarkup }), void 0);
|
|
9962
9962
|
};
|
|
9963
9963
|
|
|
@@ -9968,11 +9968,11 @@ const StatusIcon = {
|
|
|
9968
9968
|
Warning: WarningIcon,
|
|
9969
9969
|
};
|
|
9970
9970
|
|
|
9971
|
-
const COMPONENT_NAME$
|
|
9971
|
+
const COMPONENT_NAME$g = 'AlphaTile';
|
|
9972
9972
|
const AlphaTile = ({ isSelected, icon, status, theme: themeProp, title, onClick, }) => {
|
|
9973
9973
|
const { theme } = useTheme();
|
|
9974
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
9975
|
-
const statusWrapperClassName = cssClassName(`${COMPONENT_NAME$
|
|
9974
|
+
const className = cssClassName(COMPONENT_NAME$g, `is${themeClassConverter(themeProp || theme)}`, isSelected && 'isSelected');
|
|
9975
|
+
const statusWrapperClassName = cssClassName(`${COMPONENT_NAME$g}--StatusWrapper`, status && `is${status}`);
|
|
9976
9976
|
let iconSource;
|
|
9977
9977
|
if (icon) {
|
|
9978
9978
|
if (isValidIcon(icon.icon)) {
|
|
@@ -9982,10 +9982,10 @@ const AlphaTile = ({ isSelected, icon, status, theme: themeProp, title, onClick,
|
|
|
9982
9982
|
iconSource = icon.icon;
|
|
9983
9983
|
}
|
|
9984
9984
|
}
|
|
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$
|
|
9985
|
+
const iconWrapper = icon ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$g}__IconWrapper` }, { children: iconSource }), void 0)) : null;
|
|
9986
|
+
const mediaMarkup = icon ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$g}__MediaWrapper` }, { children: iconWrapper }), void 0)) : null;
|
|
9987
|
+
const titleWrapper = title ? (jsx("div", { children: jsx("div", Object.assign({ className: `${COMPONENT_NAME$g}__TitleWrapper` }, { children: title }), void 0) }, void 0)) : null;
|
|
9988
|
+
const HeaderWrapper = (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$g}__HeaderWrapper` }, { children: [mediaMarkup, titleWrapper] }), void 0));
|
|
9989
9989
|
const statusIcon = status ? StatusIcon[status] : '';
|
|
9990
9990
|
const statusWrapper = status ? (jsx("div", Object.assign({ className: statusWrapperClassName }, { children: jsx(AlphaIcon, { source: statusIcon, size: 'medium', outlined: true }, void 0) }), void 0)) : null;
|
|
9991
9991
|
return (jsxs("div", Object.assign({ className: className, onClick: onClick }, { children: [HeaderWrapper, statusWrapper] }), void 0));
|
|
@@ -16626,9 +16626,9 @@ function getRangeDate(range, date) {
|
|
|
16626
16626
|
};
|
|
16627
16627
|
}
|
|
16628
16628
|
|
|
16629
|
-
const COMPONENT_NAME$
|
|
16629
|
+
const COMPONENT_NAME$f = 'DatePicker__Day';
|
|
16630
16630
|
const Day = memo(function Day({ day, isDisabled, isFirstSelectedDay, isLastSelectedDay, isInRange, isSelected, onClick, theme: themeProp, }) {
|
|
16631
|
-
const emptyDayClassName = cssClassName(COMPONENT_NAME$
|
|
16631
|
+
const emptyDayClassName = cssClassName(COMPONENT_NAME$f, !day && 'isEmpty');
|
|
16632
16632
|
if (!day) {
|
|
16633
16633
|
return jsx("td", { className: emptyDayClassName }, void 0);
|
|
16634
16634
|
}
|
|
@@ -16639,14 +16639,14 @@ const Day = memo(function Day({ day, isDisabled, isFirstSelectedDay, isLastSelec
|
|
|
16639
16639
|
}
|
|
16640
16640
|
};
|
|
16641
16641
|
const today = isToday(new Date(), day);
|
|
16642
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
16642
|
+
const className = cssClassName(COMPONENT_NAME$f, today && 'isToday', `theme-${themeProp || theme}`, isSelected && 'isSelected', isDisabled && 'isDisabled', isInRange && 'isInRange', isFirstSelectedDay && 'isFirstSelectedDay', isLastSelectedDay && 'isLastSelectedDay');
|
|
16643
16643
|
const date = day.getDate();
|
|
16644
16644
|
return (jsx("td", Object.assign({ className: className }, { children: jsx("button", Object.assign({ onClick: handleClick }, { children: date }), void 0) }), void 0));
|
|
16645
16645
|
});
|
|
16646
16646
|
|
|
16647
|
-
const COMPONENT_NAME$
|
|
16647
|
+
const COMPONENT_NAME$e = 'DatePicker__Month';
|
|
16648
16648
|
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$
|
|
16649
|
+
const className = cssClassName(COMPONENT_NAME$e);
|
|
16650
16650
|
const weeks = useMemo(() => getWeeksByMonth(month, year, weekStartsOn), [month, year, weekStartsOn]);
|
|
16651
16651
|
const handleDateClick = useCallback((selectedDate) => {
|
|
16652
16652
|
if (onChange) {
|
|
@@ -16671,9 +16671,9 @@ const Month = ({ month = new Date().getMonth(), year = new Date().getFullYear(),
|
|
|
16671
16671
|
return jsx("div", Object.assign({ className: className }, { children: calendarGridMarkup }), void 0);
|
|
16672
16672
|
};
|
|
16673
16673
|
|
|
16674
|
-
const COMPONENT_NAME$
|
|
16674
|
+
const COMPONENT_NAME$d = 'DatePIcker__YearField';
|
|
16675
16675
|
const YearField = ({ onChange, value, min, max, onBlur, onFocus, onKeyDown, onKeyUp, }) => {
|
|
16676
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
16676
|
+
const className = cssClassName(COMPONENT_NAME$d);
|
|
16677
16677
|
const handleChange = (event) => {
|
|
16678
16678
|
if (onChange) {
|
|
16679
16679
|
const value = event.target.value.trim();
|
|
@@ -16717,10 +16717,10 @@ const IconButton = (_a) => {
|
|
|
16717
16717
|
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
16718
|
};
|
|
16719
16719
|
|
|
16720
|
-
const COMPONENT_NAME$
|
|
16720
|
+
const COMPONENT_NAME$c = 'DatePicker__Header';
|
|
16721
16721
|
const Header$2 = ({ month, year, onChange, months }) => {
|
|
16722
16722
|
const [yearValue, setYearValue] = useState(year);
|
|
16723
|
-
const headerClassName = cssClassName(COMPONENT_NAME$
|
|
16723
|
+
const headerClassName = cssClassName(COMPONENT_NAME$c);
|
|
16724
16724
|
const handleMonthChange = useCallback((month, year) => {
|
|
16725
16725
|
if (onChange) {
|
|
16726
16726
|
onChange(month, year);
|
|
@@ -16750,10 +16750,10 @@ const Header$2 = ({ month, year, onChange, months }) => {
|
|
|
16750
16750
|
const previousYear = getPreviousYear(month, year);
|
|
16751
16751
|
const nextMonth = getNextMonth(month);
|
|
16752
16752
|
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$
|
|
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$c}__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
16754
|
};
|
|
16755
16755
|
|
|
16756
|
-
const COMPONENT_NAME$
|
|
16756
|
+
const COMPONENT_NAME$b = 'DatePicker';
|
|
16757
16757
|
function getMonthSelectedDate(selected) {
|
|
16758
16758
|
return selected instanceof Date
|
|
16759
16759
|
? {
|
|
@@ -16763,7 +16763,7 @@ function getMonthSelectedDate(selected) {
|
|
|
16763
16763
|
: selected;
|
|
16764
16764
|
}
|
|
16765
16765
|
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$
|
|
16766
|
+
const className = cssClassName(COMPONENT_NAME$b);
|
|
16767
16767
|
const handleDateChange = useCallback((dateRange) => {
|
|
16768
16768
|
if (onChange) {
|
|
16769
16769
|
onChange(dateRange);
|
|
@@ -16778,19 +16778,19 @@ const TrashIcon = () => (jsxs("svg", Object.assign({ width: '24', height: '24',
|
|
|
16778
16778
|
// eslint-disable-next-line max-len
|
|
16779
16779
|
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
16780
|
|
|
16781
|
-
const COMPONENT_NAME$
|
|
16781
|
+
const COMPONENT_NAME$a = 'DeletableSection';
|
|
16782
16782
|
const DeletableSection = ({ children, onDelete, iconDeletable, isDeletable, }) => {
|
|
16783
16783
|
const { theme } = useTheme();
|
|
16784
16784
|
const THEME_CLASS = `${theme}`;
|
|
16785
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
16786
|
-
const classNameButton = cssClassName(`${COMPONENT_NAME$
|
|
16785
|
+
const className = cssClassName(COMPONENT_NAME$a);
|
|
16786
|
+
const classNameButton = cssClassName(`${COMPONENT_NAME$a}__DeleteButtonWrapper`, THEME_CLASS);
|
|
16787
16787
|
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$
|
|
16788
|
+
const deleteButtonMarkup = onDelete && isDeletable ? (jsx("div", Object.assign({ className: classNameButton }, { children: jsx("button", Object.assign({ className: `${COMPONENT_NAME$a}__DeleteButton`, onClick: onDelete }, { children: jsx(AlphaIcon, { source: icon, outlined: true }, void 0) }), void 0) }), void 0)) : null;
|
|
16789
|
+
const contentMarkup = children ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$a}__ContentWrapper` }, { children: children }), void 0)) : null;
|
|
16790
16790
|
return (jsxs("div", Object.assign({ className: className }, { children: [deleteButtonMarkup, contentMarkup] }), void 0));
|
|
16791
16791
|
};
|
|
16792
16792
|
|
|
16793
|
-
const COMPONENT_NAME$
|
|
16793
|
+
const COMPONENT_NAME$9 = 'AlphaInputTag';
|
|
16794
16794
|
const InputTag$1 = ({ id, inputTextPlaceholder, inputTextValue, isRequired, label, onChange, onInputTextChange, addedTags = [], triggerKeys = ['Enter'], onBlur, onFocus, isDisabled, hasError, tagRemoveIcon, helpText, }) => {
|
|
16795
16795
|
const [isFocused, setIsFocused] = useState(false);
|
|
16796
16796
|
const inputRef = useRef(null);
|
|
@@ -16833,10 +16833,10 @@ const InputTag$1 = ({ id, inputTextPlaceholder, inputTextValue, isRequired, labe
|
|
|
16833
16833
|
}
|
|
16834
16834
|
};
|
|
16835
16835
|
const renderTag = (tag, index) => {
|
|
16836
|
-
return (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
16836
|
+
return (jsx("div", Object.assign({ className: `${COMPONENT_NAME$9}__TagWrapper` }, { children: jsx(AlphaChip, Object.assign({ removeButtonIcon: tagRemoveIcon, onRemove: () => handleRemoveTag(index) }, { children: tag }), void 0) }), index));
|
|
16837
16837
|
};
|
|
16838
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
16839
|
-
const inputWrapperClassName = cssClassName(`${COMPONENT_NAME$
|
|
16838
|
+
const className = cssClassName(COMPONENT_NAME$9);
|
|
16839
|
+
const inputWrapperClassName = cssClassName(`${COMPONENT_NAME$9}__InputWrapper`, isFocused && 'isFocused', isDisabled && 'isDisabled', hasError && 'hasError');
|
|
16840
16840
|
const handleInputChange = (event) => {
|
|
16841
16841
|
if (onInputTextChange) {
|
|
16842
16842
|
onInputTextChange(event.target.value);
|
|
@@ -24512,7 +24512,7 @@ const SectionForm = ({ data, fields, fieldsSection, iconDeletable, iconHelperTex
|
|
|
24512
24512
|
return (jsx(DeletableSection, Object.assign({ onDelete: onDelete, iconDeletable: iconDeletable, isDeletable: isDeletable }, { children: gridMarkup }), void 0));
|
|
24513
24513
|
};
|
|
24514
24514
|
|
|
24515
|
-
const COMPONENT_NAME$
|
|
24515
|
+
const COMPONENT_NAME$8 = 'DynamicForm';
|
|
24516
24516
|
const DynamicForm = ({ dataFormArray = [], fields, fieldsSection, iconDeletable, iconHelperText, labelDivider, onChange, onAddForm, tagRemoveIcon, deletableFormArray, extraPropsFieldsArray, }) => {
|
|
24517
24517
|
const { theme } = useTheme();
|
|
24518
24518
|
const handleChange = (contact, id) => {
|
|
@@ -24540,11 +24540,11 @@ const DynamicForm = ({ dataFormArray = [], fields, fieldsSection, iconDeletable,
|
|
|
24540
24540
|
: undefined;
|
|
24541
24541
|
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
24542
|
};
|
|
24543
|
-
const contactsMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
24543
|
+
const contactsMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$8}__SectionFormWrapper` }, { children: dataFormArray.map(renderForm) }), void 0));
|
|
24544
24544
|
const dividerMarkup = labelDivider && jsx(Divider, { label: labelDivider }, void 0);
|
|
24545
24545
|
const addContactButtonMarkup = onAddForm && (jsx(AlphaButton, Object.assign({ isTertiary: true, onClick: onAddForm.onClick }, { children: onAddForm.label }), void 0));
|
|
24546
24546
|
const THEME_CLASS = `${theme}`;
|
|
24547
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
24547
|
+
const className = cssClassName(COMPONENT_NAME$8, THEME_CLASS);
|
|
24548
24548
|
return (jsxs("div", Object.assign({ className: className }, { children: [dividerMarkup, contactsMarkup, addContactButtonMarkup] }), void 0));
|
|
24549
24549
|
};
|
|
24550
24550
|
|
|
@@ -27739,19 +27739,19 @@ Sortable.mount(Remove, Revert);
|
|
|
27739
27739
|
|
|
27740
27740
|
const Context = createContext({});
|
|
27741
27741
|
|
|
27742
|
-
const COMPONENT_NAME$
|
|
27742
|
+
const COMPONENT_NAME$7 = 'SortableList__Item';
|
|
27743
27743
|
const Item$2 = ({ children }) => {
|
|
27744
27744
|
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$
|
|
27745
|
+
const className = cssClassName(COMPONENT_NAME$7, !hasHandle && 'no-handle');
|
|
27746
|
+
const handleMarkup = hasHandle ? (jsxs("span", Object.assign({ className: `${COMPONENT_NAME$7}__Handle` }, { children: [jsx(Icon, { name: 'MoreVertical' }, void 0), jsx(Icon, { name: 'MoreVertical' }, void 0)] }), void 0)) : null;
|
|
27747
|
+
const contentMarkup = (jsx("span", Object.assign({ className: `${COMPONENT_NAME$7}__Content` }, { children: children }), void 0));
|
|
27748
27748
|
return (jsxs("li", Object.assign({ className: className }, { children: [handleMarkup, contentMarkup] }), void 0));
|
|
27749
27749
|
};
|
|
27750
27750
|
|
|
27751
|
-
const COMPONENT_NAME$
|
|
27751
|
+
const COMPONENT_NAME$6 = 'SortableList';
|
|
27752
27752
|
const SortableList = function ({ renderItem, items, onSort, hasHandle, }) {
|
|
27753
27753
|
const listRef = useRef(null);
|
|
27754
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
27754
|
+
const className = cssClassName(COMPONENT_NAME$6);
|
|
27755
27755
|
const hasItems = items && items.length > 0;
|
|
27756
27756
|
const handleSortEnd = (event) => {
|
|
27757
27757
|
const { newIndex, oldIndex } = event;
|
|
@@ -27782,7 +27782,7 @@ const SortableList = function ({ renderItem, items, onSort, hasHandle, }) {
|
|
|
27782
27782
|
}
|
|
27783
27783
|
return itemComponent;
|
|
27784
27784
|
};
|
|
27785
|
-
const listClassName = cssClassName(`${COMPONENT_NAME$
|
|
27785
|
+
const listClassName = cssClassName(`${COMPONENT_NAME$6}__List`);
|
|
27786
27786
|
const listMarkup = hasItems ? (jsx("ul", Object.assign({ ref: listRef, className: listClassName }, { children: Children.toArray(items.map(renderItemElement)) }), void 0)) : null;
|
|
27787
27787
|
const contextValue = {
|
|
27788
27788
|
hasHandle,
|
|
@@ -28068,7 +28068,7 @@ const Frame = ({ header, navigation, children }) => (jsxs("div", Object.assign({
|
|
|
28068
28068
|
|
|
28069
28069
|
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
28070
|
|
|
28071
|
-
const Link$
|
|
28071
|
+
const Link$1 = ({ 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
28072
|
|
|
28073
28073
|
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
28074
|
|
|
@@ -28132,7 +28132,7 @@ var Logos = /*#__PURE__*/Object.freeze({
|
|
|
28132
28132
|
WorkflooTestWhite: WorkflooTestWhite,
|
|
28133
28133
|
WorkflooLegacy: WorkflooLegacy,
|
|
28134
28134
|
WorkflooBeta: WorkflooBeta,
|
|
28135
|
-
Link: Link$
|
|
28135
|
+
Link: Link$1,
|
|
28136
28136
|
LinkWhite: LinkWhite
|
|
28137
28137
|
});
|
|
28138
28138
|
|
|
@@ -28392,7 +28392,7 @@ const Accordion = ({ title = '', children, isGlobalOpen = false, isParentClick =
|
|
|
28392
28392
|
* @param {object} JsonViewerProps.sortFields - Array to sort jsonData
|
|
28393
28393
|
* @returns {symbol} The component.
|
|
28394
28394
|
*/
|
|
28395
|
-
const JsonViewer = ({ downloadFunction, downloadBtnIcon = 'Paperclip', downloadBtnLabel, downloadBtnType, jsonData, sortFields,
|
|
28395
|
+
const JsonViewer = ({ downloadFunction, downloadBtnIcon = 'Paperclip', downloadBtnLabel, downloadBtnType, jsonData, sortFields, }) => {
|
|
28396
28396
|
const [isOpen, setIsOpen] = useState(false);
|
|
28397
28397
|
const [isParentClick, setIsParentClick] = useState(false);
|
|
28398
28398
|
const { theme } = useTheme();
|
|
@@ -28426,7 +28426,7 @@ const JsonViewer = ({ downloadFunction, downloadBtnIcon = 'Paperclip', downloadB
|
|
|
28426
28426
|
? objToPrint.forEach((key, index) => {
|
|
28427
28427
|
i = index > 0 && index % 4 === 0 ? i + 1 : i;
|
|
28428
28428
|
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]
|
|
28429
|
+
? getPrimitiveValue(primitiveData[key])
|
|
28430
28430
|
: '' }), void 0)] }), void 0)] }, `data-${key}-
|
|
28431
28431
|
${primitiveData && primitiveData[key]}-${id}`));
|
|
28432
28432
|
})
|
|
@@ -28437,19 +28437,19 @@ const JsonViewer = ({ downloadFunction, downloadBtnIcon = 'Paperclip', downloadB
|
|
|
28437
28437
|
})] }, `print-parent-${id}`));
|
|
28438
28438
|
return responseDiv;
|
|
28439
28439
|
};
|
|
28440
|
-
const getPrimitiveValue = (value
|
|
28440
|
+
const getPrimitiveValue = (value) => {
|
|
28441
28441
|
let returnedValue = value;
|
|
28442
28442
|
if (typeof value === 'boolean') {
|
|
28443
28443
|
returnedValue = value ? 'true' : 'false';
|
|
28444
28444
|
}
|
|
28445
|
-
return
|
|
28446
|
-
? renderDownloadBtn(value
|
|
28445
|
+
return String(value).includes('@workfloo_file')
|
|
28446
|
+
? renderDownloadBtn(value.split(':')[1])
|
|
28447
28447
|
: returnedValue;
|
|
28448
28448
|
};
|
|
28449
|
-
const renderDownloadBtn = (value
|
|
28449
|
+
const renderDownloadBtn = (value) => {
|
|
28450
28450
|
return (jsx(Button, { name: `btnDwonloadFile_${value}`, icon: downloadBtnIcon, iconPosition: 'left', appearance: downloadBtnType ? downloadBtnType : 'secondary', disabled: false, children: downloadBtnLabel, onClick: () => {
|
|
28451
28451
|
if (downloadFunction)
|
|
28452
|
-
downloadFunction(value
|
|
28452
|
+
downloadFunction(value);
|
|
28453
28453
|
} }, `btn-down-${value}`));
|
|
28454
28454
|
};
|
|
28455
28455
|
const getLevel = (levelName, data, id, objTemplate = []) => {
|
|
@@ -29723,7 +29723,7 @@ function isModifiedEvent(event) {
|
|
|
29723
29723
|
/**
|
|
29724
29724
|
* The public API for rendering a history-aware <a>.
|
|
29725
29725
|
*/
|
|
29726
|
-
const Link
|
|
29726
|
+
const Link = /*#__PURE__*/forwardRef(function LinkWithRef(_ref4, ref) {
|
|
29727
29727
|
let {
|
|
29728
29728
|
onClick,
|
|
29729
29729
|
reloadDocument,
|
|
@@ -29762,7 +29762,7 @@ const Link$1 = /*#__PURE__*/forwardRef(function LinkWithRef(_ref4, ref) {
|
|
|
29762
29762
|
});
|
|
29763
29763
|
|
|
29764
29764
|
if (process.env.NODE_ENV !== "production") {
|
|
29765
|
-
Link
|
|
29765
|
+
Link.displayName = "Link";
|
|
29766
29766
|
}
|
|
29767
29767
|
|
|
29768
29768
|
/**
|
|
@@ -29810,7 +29810,7 @@ const NavLink = /*#__PURE__*/forwardRef(function NavLinkWithRef(_ref5, ref) {
|
|
|
29810
29810
|
let style = typeof styleProp === "function" ? styleProp({
|
|
29811
29811
|
isActive
|
|
29812
29812
|
}) : styleProp;
|
|
29813
|
-
return /*#__PURE__*/createElement(Link
|
|
29813
|
+
return /*#__PURE__*/createElement(Link, _extends({}, rest, {
|
|
29814
29814
|
"aria-current": ariaCurrent,
|
|
29815
29815
|
className: className,
|
|
29816
29816
|
ref: ref,
|
|
@@ -30033,14 +30033,12 @@ const Cell = ({ children }) => jsx("td", { children: children }, void 0);
|
|
|
30033
30033
|
* @param {string} TableProps.id - Id to table
|
|
30034
30034
|
* @param {Array} TableProps.headings - Headings of the table
|
|
30035
30035
|
* @param {Array} TableProps.headingsTypes - Determines the positioning of the text
|
|
30036
|
-
* @param {function} TableProps.onSelectAllRows - Function to select all rows
|
|
30037
|
-
* @param {Boolean} TableProps.areAllRowsSelected - Determines if all rows are selected
|
|
30038
30036
|
* in the columns, respects the order of the array, It only
|
|
30039
30037
|
* accepts text or numeric, if it is numeric the text is aligned
|
|
30040
30038
|
* to the right, if not it is aligned to the left
|
|
30041
30039
|
* @returns {symbol} - Element Table
|
|
30042
30040
|
*/
|
|
30043
|
-
const Table = ({ headings, headingsTypes, children, id
|
|
30041
|
+
const Table = ({ headings, headingsTypes, children, id }) => {
|
|
30044
30042
|
useEffect(() => {
|
|
30045
30043
|
var _a;
|
|
30046
30044
|
if (headingsTypes) {
|
|
@@ -30057,15 +30055,9 @@ const Table = ({ headings, headingsTypes, children, id, onSelectAllRows, areAllR
|
|
|
30057
30055
|
}
|
|
30058
30056
|
}
|
|
30059
30057
|
}, [headingsTypes]);
|
|
30060
|
-
|
|
30061
|
-
|
|
30062
|
-
|
|
30063
|
-
}
|
|
30064
|
-
};
|
|
30065
|
-
const checkboxSelectAllRowsMarkup = onSelectAllRows ? (jsx("th", { children: jsx(Checkbox, { onChange: handleOnChangeAllSelected, isChecked: areAllRowsSelected, value: 'all', id: 'allSelected' }, void 0) }, void 0)) : null;
|
|
30066
|
-
return (jsxs("table", Object.assign({ className: 'Table', id: id }, { children: [jsx("thead", { children: jsxs("tr", { children: [checkboxSelectAllRowsMarkup, headings === null || headings === void 0 ? void 0 : headings.map((head, i) => (jsx("th", Object.assign({ className: headingsTypes && headingsTypes[i] === 'numeric'
|
|
30067
|
-
? 'Table__text-right'
|
|
30068
|
-
: '' }, { children: head }), i)))] }, void 0) }, void 0), jsx("tbody", Object.assign({ id: 'tbody' }, { children: children }), void 0)] }), void 0));
|
|
30058
|
+
return (jsxs("table", Object.assign({ className: 'Table', id: id }, { children: [jsx("thead", { children: jsx("tr", { children: headings === null || headings === void 0 ? void 0 : headings.map((head, i) => (jsx("th", Object.assign({ className: headingsTypes && headingsTypes[i] === 'numeric'
|
|
30059
|
+
? 'Table__text-right'
|
|
30060
|
+
: '' }, { children: head }), i))) }, void 0) }, void 0), jsx("tbody", Object.assign({ id: 'tbody' }, { children: children }), void 0)] }), void 0));
|
|
30069
30061
|
};
|
|
30070
30062
|
Table.Row = Row;
|
|
30071
30063
|
Table.Cell = Cell;
|
|
@@ -30097,12 +30089,12 @@ const Tile = ({ isSelected, media, onClick, title, value, subtitle = '', mediaSi
|
|
|
30097
30089
|
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));
|
|
30098
30090
|
};
|
|
30099
30091
|
|
|
30100
|
-
const COMPONENT_NAME$
|
|
30092
|
+
const COMPONENT_NAME$5 = 'Totalizer';
|
|
30101
30093
|
const Totalizer = ({ action, direction, icon, isDisabled, isFocused, label, placeholderValue, value, theme: themeProp, }) => {
|
|
30102
30094
|
const { theme } = useTheme();
|
|
30103
30095
|
const themeClass = `has-Theme${themeProp ? themeProp.toUpperCase() : theme.toUpperCase()}`;
|
|
30104
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
30105
|
-
const titleMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30096
|
+
const className = cssClassName(COMPONENT_NAME$5, themeClass, isDisabled && 'isDisabled', isFocused && 'isFocused', direction && `has-${direction}Direction`);
|
|
30097
|
+
const titleMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$5}__TitleWrapper` }, { children: label }), void 0)) : null;
|
|
30106
30098
|
let iconSource;
|
|
30107
30099
|
if (icon) {
|
|
30108
30100
|
if (isValidIcon(icon.icon)) {
|
|
@@ -30112,25 +30104,25 @@ const Totalizer = ({ action, direction, icon, isDisabled, isFocused, label, plac
|
|
|
30112
30104
|
iconSource = icon.icon;
|
|
30113
30105
|
}
|
|
30114
30106
|
}
|
|
30115
|
-
const iconMarkup = icon ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$
|
|
30116
|
-
const headerMarkup = titleMarkup || iconMarkup ? (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30117
|
-
const valueMarkup = value ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30118
|
-
const placeholderValueMarkup = placeholderValue ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30107
|
+
const iconMarkup = icon ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$5}__IconWrapper` }, { children: iconSource }), void 0)) : null;
|
|
30108
|
+
const headerMarkup = titleMarkup || iconMarkup ? (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$5}__HeaderWrapper` }, { children: [titleMarkup, iconMarkup] }), void 0)) : null;
|
|
30109
|
+
const valueMarkup = value ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$5}__ValueWrapper` }, { children: value }), void 0)) : null;
|
|
30110
|
+
const placeholderValueMarkup = placeholderValue ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$5}__PlaceholderValueWrapper` }, { children: placeholderValue }), void 0)) : null;
|
|
30119
30111
|
const valueContentToRender = (!valueMarkup && placeholderValueMarkup) || valueMarkup;
|
|
30120
|
-
const valueContainerMarkup = valueMarkup || placeholderValueMarkup ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30121
|
-
const actionMarkup = action ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30122
|
-
const contentClassName = cssClassName(`${COMPONENT_NAME$
|
|
30112
|
+
const valueContainerMarkup = valueMarkup || placeholderValueMarkup ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$5}__ValueContainerWrapper` }, { children: valueContentToRender }), void 0)) : null;
|
|
30113
|
+
const actionMarkup = action ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$5}__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;
|
|
30114
|
+
const contentClassName = cssClassName(`${COMPONENT_NAME$5}__ContentWrapper`, action && 'has-Action');
|
|
30123
30115
|
const contentMarkup = valueContainerMarkup || actionMarkup ? (jsxs("div", Object.assign({ className: contentClassName }, { children: [valueContainerMarkup, actionMarkup] }), void 0)) : null;
|
|
30124
30116
|
return (jsxs("div", Object.assign({ className: className }, { children: [headerMarkup, contentMarkup] }), void 0));
|
|
30125
30117
|
};
|
|
30126
30118
|
|
|
30127
|
-
const COMPONENT_NAME$
|
|
30119
|
+
const COMPONENT_NAME$4 = 'TimeSelector__TimePicker__List';
|
|
30128
30120
|
const List = ({ items, selected, onChange }) => {
|
|
30129
30121
|
const listWrapperRef = useRef(null);
|
|
30130
30122
|
const scrollToSelected = () => {
|
|
30131
30123
|
const listWrapper = listWrapperRef.current;
|
|
30132
30124
|
if (listWrapper) {
|
|
30133
|
-
const selectedElement = listWrapper.querySelector(`.${COMPONENT_NAME$
|
|
30125
|
+
const selectedElement = listWrapper.querySelector(`.${COMPONENT_NAME$4}__ListItem--selected`);
|
|
30134
30126
|
if (selectedElement) {
|
|
30135
30127
|
const { top } = selectedElement.getBoundingClientRect();
|
|
30136
30128
|
const { top: listWrapperTop } = listWrapper.getBoundingClientRect();
|
|
@@ -30152,16 +30144,16 @@ const List = ({ items, selected, onChange }) => {
|
|
|
30152
30144
|
const renderItem = (item, index) => {
|
|
30153
30145
|
const { label, value } = item;
|
|
30154
30146
|
const isSelected = Boolean(selected !== null && selected !== undefined && selected === value);
|
|
30155
|
-
const className = cssClassName(`${COMPONENT_NAME$
|
|
30147
|
+
const className = cssClassName(`${COMPONENT_NAME$4}__ListItem`, isSelected && 'selected');
|
|
30156
30148
|
const handleClick = () => handleChange(value);
|
|
30157
|
-
return (jsx("li", Object.assign({ className: className, onClick: handleClick }, { children: label }), `${COMPONENT_NAME$
|
|
30149
|
+
return (jsx("li", Object.assign({ className: className, onClick: handleClick }, { children: label }), `${COMPONENT_NAME$4}__ListItem-${index}`));
|
|
30158
30150
|
};
|
|
30159
30151
|
const itemsMarkup = items ? items.map(renderItem) : null;
|
|
30160
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
30152
|
+
const className = cssClassName(COMPONENT_NAME$4);
|
|
30161
30153
|
return (jsx("div", Object.assign({ className: className, ref: listWrapperRef }, { children: jsx("ul", { children: itemsMarkup }, void 0) }), void 0));
|
|
30162
30154
|
};
|
|
30163
30155
|
|
|
30164
|
-
const COMPONENT_NAME$
|
|
30156
|
+
const COMPONENT_NAME$3 = 'TimeSelector__TimePicker';
|
|
30165
30157
|
const TimePicker = ({ headers, items, onChange, selected, theme: ThemeProp, }) => {
|
|
30166
30158
|
const { theme: themeValue } = useTheme();
|
|
30167
30159
|
const theme = ThemeProp || themeValue;
|
|
@@ -30175,18 +30167,18 @@ const TimePicker = ({ headers, items, onChange, selected, theme: ThemeProp, }) =
|
|
|
30175
30167
|
onChange(selectedValues);
|
|
30176
30168
|
}
|
|
30177
30169
|
};
|
|
30178
|
-
const renderHeader = (header, index) => (jsx("span", Object.assign({ className: `${COMPONENT_NAME$
|
|
30179
|
-
const headersMarkup = headers ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30170
|
+
const renderHeader = (header, index) => (jsx("span", Object.assign({ className: `${COMPONENT_NAME$3}__HeaderItem` }, { children: capitalize(header) }), `${COMPONENT_NAME$3}__HeaderItem-${index}`));
|
|
30171
|
+
const headersMarkup = headers ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$3}__HeadersMarkup` }, { children: headers.map(renderHeader) }), void 0)) : null;
|
|
30180
30172
|
const renderList = (listItems, index) => {
|
|
30181
30173
|
const selectedValue = selected ? selected[index] : undefined;
|
|
30182
|
-
return (jsx(List, { items: listItems, onChange: (value) => handleChange(value, index), selected: selectedValue }, `${COMPONENT_NAME$
|
|
30174
|
+
return (jsx(List, { items: listItems, onChange: (value) => handleChange(value, index), selected: selectedValue }, `${COMPONENT_NAME$3}__List-${index}`));
|
|
30183
30175
|
};
|
|
30184
|
-
const itemsListsMarkup = items ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30185
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
30176
|
+
const itemsListsMarkup = items ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$3}__ItemsListWrapper` }, { children: items.map(renderList) }), void 0)) : null;
|
|
30177
|
+
const className = cssClassName(COMPONENT_NAME$3, theme);
|
|
30186
30178
|
return (jsxs("div", Object.assign({ className: className }, { children: [headersMarkup, itemsListsMarkup] }), void 0));
|
|
30187
30179
|
};
|
|
30188
30180
|
|
|
30189
|
-
const COMPONENT_NAME$
|
|
30181
|
+
const COMPONENT_NAME$2 = 'TimeSelector';
|
|
30190
30182
|
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, }) => {
|
|
30191
30183
|
const { theme: themeValue } = useTheme();
|
|
30192
30184
|
const theme = themeProp || themeValue;
|
|
@@ -30277,15 +30269,15 @@ const TimeSelector = ({ plurals, singulars, value, disabled, error, helpText, la
|
|
|
30277
30269
|
const separator = index === Object.keys(singulars).length - 1 ? '' : ', ';
|
|
30278
30270
|
const min = getMaxMins()[field][0];
|
|
30279
30271
|
const max = getMaxMins()[field][1];
|
|
30280
|
-
return (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30272
|
+
return (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$2}__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));
|
|
30281
30273
|
};
|
|
30282
30274
|
const fieldsMarkup = Object.keys(singulars).map(renderField);
|
|
30283
|
-
const fieldClass = cssClassName(`${COMPONENT_NAME$
|
|
30284
|
-
const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30275
|
+
const fieldClass = cssClassName(`${COMPONENT_NAME$2}__Field`, (isFocused || isActive) && 'isFocused');
|
|
30276
|
+
const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$2}__LabelWrapper` }, { children: jsx(AlphaLabel, Object.assign({ isRequired: isRequired }, { children: label }), void 0) }), void 0)) : null;
|
|
30285
30277
|
const helpTextMarkup = helpText
|
|
30286
|
-
? helpText && (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30278
|
+
? helpText && (jsx("div", Object.assign({ className: `${COMPONENT_NAME$2}__HelpTextWrapper` }, { children: helpText }), void 0))
|
|
30287
30279
|
: null;
|
|
30288
|
-
const fieldMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30280
|
+
const fieldMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$2}__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));
|
|
30289
30281
|
const timePickerValue = useMemo(() => {
|
|
30290
30282
|
if (value) {
|
|
30291
30283
|
const { days, hours, minutes, seconds } = value;
|
|
@@ -30296,7 +30288,7 @@ const TimeSelector = ({ plurals, singulars, value, disabled, error, helpText, la
|
|
|
30296
30288
|
const timePickerHeaders = useMemo(() => [plurals.days, plurals.hours, plurals.minutes, plurals.seconds], [plurals]);
|
|
30297
30289
|
const timePickerMarkup = (jsx(TimePicker, { items: [daysList, hoursList, minutesList, secondsList], headers: timePickerHeaders, onChange: handleTimePickerChange, selected: timePickerValue, theme: theme }, void 0));
|
|
30298
30290
|
const popoverMarkup = (jsx(Popover$1, Object.assign({ activator: fieldMarkup, isActive: isActive, isFullWidth: true, onClose: handleClosePopover }, { children: timePickerMarkup }), void 0));
|
|
30299
|
-
const className = cssClassName(COMPONENT_NAME$
|
|
30291
|
+
const className = cssClassName(COMPONENT_NAME$2, theme, !value && 'isEmpty');
|
|
30300
30292
|
return (jsxs("div", Object.assign({ className: className }, { children: [popoverMarkup, helpTextMarkup] }), void 0));
|
|
30301
30293
|
};
|
|
30302
30294
|
function getTimeValue(value) {
|
|
@@ -30310,15 +30302,15 @@ function getTimeList(min, max) {
|
|
|
30310
30302
|
}));
|
|
30311
30303
|
}
|
|
30312
30304
|
|
|
30313
|
-
const COMPONENT_NAME$
|
|
30305
|
+
const COMPONENT_NAME$1 = 'FilterField';
|
|
30314
30306
|
const FilterField = ({ label, isRequired = false, field, onRemove, name, }) => {
|
|
30315
|
-
const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30316
|
-
const filterFieldMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30317
|
-
const removeButtonMarkup = onRemove && !isRequired ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30318
|
-
return (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$
|
|
30307
|
+
const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$1}__LabelWrapper` }, { children: label }), void 0)) : null;
|
|
30308
|
+
const filterFieldMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$1}__FieldWrapper`, id: name }, { children: field }), void 0));
|
|
30309
|
+
const removeButtonMarkup = onRemove && !isRequired ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$1}__RemoveButtonWrapper` }, { children: jsx("button", Object.assign({ type: 'button', className: `${COMPONENT_NAME$1}__RemoveButton`, onClick: onRemove }, { children: jsx(Icon, { name: 'X' }, void 0) }), void 0) }), void 0)) : null;
|
|
30310
|
+
return (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$1}` }, { children: [labelMarkup, filterFieldMarkup, removeButtonMarkup] }), void 0));
|
|
30319
30311
|
};
|
|
30320
30312
|
|
|
30321
|
-
const COMPONENT_NAME
|
|
30313
|
+
const COMPONENT_NAME = 'Filters';
|
|
30322
30314
|
const Filters = ({ filters = [], onApplyFilters, onRemoveFilter, appliedFilters, onCleanFilters, onAddFilter, addFilterButtonIcon, addFilterButtonLabel, clearButtonLabel, searchButtonLabel, selectedFilters = [], }) => {
|
|
30323
30315
|
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
|
|
30324
30316
|
const mainContainerRef = useRef(null);
|
|
@@ -30339,8 +30331,8 @@ const Filters = ({ filters = [], onApplyFilters, onRemoveFilter, appliedFilters,
|
|
|
30339
30331
|
label: filter.label,
|
|
30340
30332
|
}));
|
|
30341
30333
|
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;
|
|
30342
|
-
const secondaryActionsMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME
|
|
30343
|
-
const mainActionsMarkup = (jsxs("div", Object.assign({ className: `${COMPONENT_NAME
|
|
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));
|
|
30344
30336
|
const handleRemoveFilter = (filter) => {
|
|
30345
30337
|
onRemoveFilter === null || onRemoveFilter === void 0 ? void 0 : onRemoveFilter(filter);
|
|
30346
30338
|
};
|
|
@@ -30351,19 +30343,12 @@ const Filters = ({ filters = [], onApplyFilters, onRemoveFilter, appliedFilters,
|
|
|
30351
30343
|
const handleRemove = () => {
|
|
30352
30344
|
handleRemoveFilter(filter);
|
|
30353
30345
|
};
|
|
30354
|
-
return (jsx("div", Object.assign({ className: `${COMPONENT_NAME
|
|
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));
|
|
30355
30347
|
};
|
|
30356
|
-
const selectedFiltersMarkup = selectedFilters.length ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME
|
|
30357
|
-
const actionsContainerMarkup = (jsxs("div", Object.assign({ className: `${COMPONENT_NAME
|
|
30358
|
-
return (jsxs("div", Object.assign({ className: COMPONENT_NAME
|
|
30359
|
-
};
|
|
30360
|
-
|
|
30361
|
-
const COMPONENT_NAME = 'Link';
|
|
30362
|
-
const Link = ({ children, className: classNameProp, component, to, }) => {
|
|
30363
|
-
const Component = component;
|
|
30364
|
-
const className = cssClassName(COMPONENT_NAME, classNameProp);
|
|
30365
|
-
return (jsx(Component, Object.assign({ className: className, to: to }, { children: children }), void 0));
|
|
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));
|
|
30366
30351
|
};
|
|
30367
30352
|
|
|
30368
|
-
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,
|
|
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 };
|
|
30369
30354
|
//# sourceMappingURL=index.js.map
|