@innovaccer/design-system 2.17.0 → 2.18.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/CHANGELOG.md +43 -0
- package/css/dist/index.css +52 -25
- package/css/dist/index.css.map +1 -1
- package/css/src/components/avatar.css +1 -1
- package/css/src/components/calendar.css +5 -5
- package/css/src/components/chipInput.css +42 -18
- package/css/src/components/toast.css +1 -1
- package/css/src/core/typography.css +3 -0
- package/dist/.lib/tsconfig.type.tsbuildinfo +22 -22
- package/dist/core/accessibility/utils/useAccessibilityProps.d.ts +3 -1
- package/dist/core/components/atoms/_chip/index.d.ts +1 -0
- package/dist/core/components/atoms/chip/Chip.d.ts +1 -0
- package/dist/core/components/organisms/grid/Cell.d.ts +1 -0
- package/dist/core/components/organisms/grid/GridNestedRow.d.ts +2 -0
- package/dist/index.esm.js +121 -93
- package/dist/index.js +85 -62
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.br +0 -0
- package/dist/index.umd.js.gz +0 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
|
|
2
2
|
/**
|
|
3
|
-
* Generated on:
|
|
3
|
+
* Generated on: 1691474887429
|
|
4
4
|
* Package: @innovaccer/design-system
|
|
5
|
-
* Version: v2.
|
|
5
|
+
* Version: v2.18.0
|
|
6
6
|
* License: MIT
|
|
7
7
|
* Docs: https://innovaccer.github.io/design-system
|
|
8
8
|
*/
|
|
@@ -2269,12 +2269,13 @@
|
|
|
2269
2269
|
_onKeyDown = _a.onKeyDown,
|
|
2270
2270
|
_b = _a.role,
|
|
2271
2271
|
role = _b === void 0 ? 'button' : _b,
|
|
2272
|
-
|
|
2272
|
+
tabIndex = _a.tabIndex,
|
|
2273
|
+
rest = __rest(_a, ["onClick", "onKeyDown", "role", "tabIndex"]);
|
|
2273
2274
|
|
|
2274
2275
|
return __assign({}, onClick ? {
|
|
2275
2276
|
onClick: onClick,
|
|
2276
2277
|
role: role,
|
|
2277
|
-
tabIndex: 0,
|
|
2278
|
+
tabIndex: tabIndex || 0,
|
|
2278
2279
|
'aria-label': rest['aria-label'],
|
|
2279
2280
|
onKeyDown: function onKeyDown(e) {
|
|
2280
2281
|
if (_onKeyDown) {
|
|
@@ -2294,6 +2295,7 @@
|
|
|
2294
2295
|
}
|
|
2295
2296
|
} : {
|
|
2296
2297
|
role: role,
|
|
2298
|
+
tabIndex: tabIndex,
|
|
2297
2299
|
'aria-label': rest['aria-label']
|
|
2298
2300
|
});
|
|
2299
2301
|
};
|
|
@@ -2396,7 +2398,8 @@
|
|
|
2396
2398
|
className = props.className,
|
|
2397
2399
|
selected = props.selected,
|
|
2398
2400
|
onClose = props.onClose,
|
|
2399
|
-
onClick = props.onClick
|
|
2401
|
+
onClick = props.onClick,
|
|
2402
|
+
labelPrefix = props.labelPrefix;
|
|
2400
2403
|
var baseProps = extractBaseProps(props);
|
|
2401
2404
|
|
|
2402
2405
|
var iconClass = function iconClass(align) {
|
|
@@ -2430,11 +2433,16 @@
|
|
|
2430
2433
|
|
|
2431
2434
|
var renderLabel = function renderLabel() {
|
|
2432
2435
|
if (typeof label === 'string') {
|
|
2433
|
-
return /*#__PURE__*/React__namespace.createElement(Text, {
|
|
2436
|
+
return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, labelPrefix && /*#__PURE__*/React__namespace.createElement(Text, {
|
|
2437
|
+
"data-test": "DesignSystem-GenericChip--LabelPrefix",
|
|
2438
|
+
weight: "medium",
|
|
2439
|
+
color: textColor,
|
|
2440
|
+
className: "Chip-text mr-3"
|
|
2441
|
+
}, labelPrefix), /*#__PURE__*/React__namespace.createElement(Text, {
|
|
2434
2442
|
"data-test": "DesignSystem-GenericChip--Text",
|
|
2435
2443
|
color: textColor,
|
|
2436
2444
|
className: "Chip-text"
|
|
2437
|
-
}, label);
|
|
2445
|
+
}, label));
|
|
2438
2446
|
}
|
|
2439
2447
|
|
|
2440
2448
|
return label;
|
|
@@ -2478,7 +2486,8 @@
|
|
|
2478
2486
|
onClose = props.onClose,
|
|
2479
2487
|
onClick = props.onClick,
|
|
2480
2488
|
name = props.name,
|
|
2481
|
-
className = props.className
|
|
2489
|
+
className = props.className,
|
|
2490
|
+
labelPrefix = props.labelPrefix;
|
|
2482
2491
|
var baseProps = extractBaseProps(props);
|
|
2483
2492
|
|
|
2484
2493
|
var onCloseHandler = function onCloseHandler() {
|
|
@@ -2505,7 +2514,8 @@
|
|
|
2505
2514
|
className: chipClass,
|
|
2506
2515
|
onClose: onCloseHandler,
|
|
2507
2516
|
onClick: onClickHandler,
|
|
2508
|
-
name: name
|
|
2517
|
+
name: name,
|
|
2518
|
+
labelPrefix: labelPrefix
|
|
2509
2519
|
}));
|
|
2510
2520
|
};
|
|
2511
2521
|
Chip.displayName = 'Chip';
|
|
@@ -2990,7 +3000,8 @@
|
|
|
2990
3000
|
showTodayDate = _b === void 0 ? true : _b,
|
|
2991
3001
|
_c = _a.children,
|
|
2992
3002
|
children = _c === void 0 ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null) : _c,
|
|
2993
|
-
|
|
3003
|
+
view = _a.view,
|
|
3004
|
+
rest = __rest(_a, ["date", "open", "position", "inputFormat", "outputFormat", "inputOptions", "validators", "withInput", "disabledBefore", "disabledAfter", "onDateChange", "closeOnSelect", "size", "showTodayDate", "children", "view"]);
|
|
2994
3005
|
|
|
2995
3006
|
var date = this.state.date;
|
|
2996
3007
|
var months = config.months;
|
|
@@ -3014,16 +3025,23 @@
|
|
|
3014
3025
|
return !isTodayDateDisabled;
|
|
3015
3026
|
};
|
|
3016
3027
|
|
|
3028
|
+
var todayChipClass = classNames__default["default"]({
|
|
3029
|
+
'd-flex justify-content-center': true,
|
|
3030
|
+
'pb-5': size === 'small',
|
|
3031
|
+
'pb-6': size === 'large',
|
|
3032
|
+
'pt-3': size === 'large' && view === 'year'
|
|
3033
|
+
});
|
|
3017
3034
|
return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
|
|
3018
3035
|
className: "d-flex"
|
|
3019
3036
|
}, children, /*#__PURE__*/React__namespace.createElement(Calendar, __assign({}, rest, {
|
|
3020
3037
|
size: size,
|
|
3021
3038
|
date: currDate,
|
|
3039
|
+
view: view,
|
|
3022
3040
|
disabledBefore: dateDisabledBefore,
|
|
3023
3041
|
disabledAfter: dateDisabledAfter,
|
|
3024
3042
|
onDateChange: this.onDateChangeHandler
|
|
3025
3043
|
}))), showTodayDate && /*#__PURE__*/React__namespace.createElement("div", {
|
|
3026
|
-
className:
|
|
3044
|
+
className: todayChipClass,
|
|
3027
3045
|
"data-test": "DesignSystem-Select--TodaysDate-wrapper"
|
|
3028
3046
|
}, /*#__PURE__*/React__namespace.createElement(Chip, {
|
|
3029
3047
|
label: "Today, " + todayMonthAndDate,
|
|
@@ -6299,6 +6317,7 @@
|
|
|
6299
6317
|
'd-flex flex-column flex-grow-1': true
|
|
6300
6318
|
}, className);
|
|
6301
6319
|
}, [className]);
|
|
6320
|
+
var isValueEqualPlaceholder = value === defaultPlaceholderValue;
|
|
6302
6321
|
return /*#__PURE__*/React__namespace.createElement("div", {
|
|
6303
6322
|
className: classes,
|
|
6304
6323
|
"data-test": "DesignSystem-InputMask--Wrapper"
|
|
@@ -6308,7 +6327,7 @@
|
|
|
6308
6327
|
required: required,
|
|
6309
6328
|
onFocus: onFocusHandler,
|
|
6310
6329
|
onChange: onChangeHandler,
|
|
6311
|
-
onClear: onClearHandler,
|
|
6330
|
+
onClear: !isValueEqualPlaceholder ? onClearHandler : undefined,
|
|
6312
6331
|
onBlur: onBlurHandler,
|
|
6313
6332
|
onPaste: onPasteHandler,
|
|
6314
6333
|
autoComplete: 'off',
|
|
@@ -6388,7 +6407,7 @@
|
|
|
6388
6407
|
"data-test": "DesignSystem-Label--Text",
|
|
6389
6408
|
className: classes,
|
|
6390
6409
|
componentType: "label"
|
|
6391
|
-
}, rest), children
|
|
6410
|
+
}, rest), children, renderInfo(required, optional), info && renderIndicator(info)));
|
|
6392
6411
|
};
|
|
6393
6412
|
Label.displayName = 'Label';
|
|
6394
6413
|
|
|
@@ -8488,7 +8507,7 @@
|
|
|
8488
8507
|
}, [value]);
|
|
8489
8508
|
var ChipInputClass = classNames__default["default"]((_a = {
|
|
8490
8509
|
ChipInput: true
|
|
8491
|
-
}, _a['ChipInput--disabled'] = disabled, _a['ChipInput--withChips'] = chips.length > 0, _a), className);
|
|
8510
|
+
}, _a['ChipInput--disabled'] = disabled, _a['ChipInput--withChips'] = chips && chips.length > 0, _a), className);
|
|
8492
8511
|
|
|
8493
8512
|
var onUpdateChips = function onUpdateChips(updatedChips) {
|
|
8494
8513
|
if (onChange) onChange(updatedChips);
|
|
@@ -8574,7 +8593,7 @@
|
|
|
8574
8593
|
type: type,
|
|
8575
8594
|
disabled: disabled,
|
|
8576
8595
|
key: index,
|
|
8577
|
-
className: "my-
|
|
8596
|
+
className: "my-3 mx-2",
|
|
8578
8597
|
onClick: function onClick() {
|
|
8579
8598
|
return _onClick && _onClick(chip, index);
|
|
8580
8599
|
},
|
|
@@ -8583,11 +8602,15 @@
|
|
|
8583
8602
|
}
|
|
8584
8603
|
}, rest));
|
|
8585
8604
|
});
|
|
8586
|
-
return /*#__PURE__*/React__namespace.createElement("div",
|
|
8605
|
+
return /*#__PURE__*/React__namespace.createElement("div", {
|
|
8606
|
+
"data-test": "DesignSystem-ChipInput--Border",
|
|
8607
|
+
className: "ChipInput-border"
|
|
8608
|
+
}, /*#__PURE__*/React__namespace.createElement("div", __assign({
|
|
8587
8609
|
"data-test": "DesignSystem-ChipInput"
|
|
8588
8610
|
}, baseProps, {
|
|
8589
8611
|
className: ChipInputClass,
|
|
8590
|
-
onClick: onClickHandler
|
|
8612
|
+
onClick: onClickHandler,
|
|
8613
|
+
tabIndex: disabled ? -1 : 0
|
|
8591
8614
|
}), /*#__PURE__*/React__namespace.createElement("div", {
|
|
8592
8615
|
className: "ChipInput-wrapper"
|
|
8593
8616
|
}, chips && chips.length > 0 && chipComponents, /*#__PURE__*/React__namespace.createElement("input", {
|
|
@@ -8595,7 +8618,7 @@
|
|
|
8595
8618
|
ref: inputRef,
|
|
8596
8619
|
className: "ChipInput-input",
|
|
8597
8620
|
autoFocus: autoFocus,
|
|
8598
|
-
placeholder: placeholder,
|
|
8621
|
+
placeholder: chips && chips.length > 0 ? '' : placeholder,
|
|
8599
8622
|
disabled: disabled,
|
|
8600
8623
|
value: inputValue,
|
|
8601
8624
|
onBlur: onBlur,
|
|
@@ -8605,10 +8628,11 @@
|
|
|
8605
8628
|
})), chips.length > 0 && /*#__PURE__*/React__namespace.createElement(Icon, {
|
|
8606
8629
|
"data-test": "DesignSystem-ChipInput--Icon",
|
|
8607
8630
|
name: "close",
|
|
8608
|
-
appearance:
|
|
8631
|
+
appearance: disabled ? 'disabled' : 'subtle',
|
|
8609
8632
|
className: "ChipInput-icon",
|
|
8610
|
-
onClick: onDeleteAllHandler
|
|
8611
|
-
|
|
8633
|
+
onClick: onDeleteAllHandler,
|
|
8634
|
+
tabIndex: disabled ? -1 : 0
|
|
8635
|
+
})));
|
|
8612
8636
|
};
|
|
8613
8637
|
ChipInput.displayName = 'ChipInput';
|
|
8614
8638
|
ChipInput.defaultProps = {
|
|
@@ -10520,15 +10544,10 @@
|
|
|
10520
10544
|
position: "right",
|
|
10521
10545
|
className: "px-6 py-6 d-flex align-items-center",
|
|
10522
10546
|
on: "hover"
|
|
10523
|
-
}, /*#__PURE__*/React__namespace.createElement(
|
|
10524
|
-
|
|
10525
|
-
|
|
10526
|
-
|
|
10527
|
-
}), /*#__PURE__*/React__namespace.createElement(Text, {
|
|
10528
|
-
"data-test": "DesignSystem-EditableInput--ErrorPopper",
|
|
10529
|
-
appearance: "destructive",
|
|
10530
|
-
weight: "medium"
|
|
10531
|
-
}, errorMessage)) : inputComponent;
|
|
10547
|
+
}, /*#__PURE__*/React__namespace.createElement(InlineMessage, {
|
|
10548
|
+
appearance: "alert",
|
|
10549
|
+
description: errorMessage
|
|
10550
|
+
})) : inputComponent;
|
|
10532
10551
|
}
|
|
10533
10552
|
|
|
10534
10553
|
return /*#__PURE__*/React__namespace.createElement("div", {
|
|
@@ -13426,22 +13445,6 @@
|
|
|
13426
13445
|
}));
|
|
13427
13446
|
var GridProvider = context.Provider;
|
|
13428
13447
|
|
|
13429
|
-
var GridNestedRow = function GridNestedRow(props) {
|
|
13430
|
-
var context$1 = React__namespace.useContext(context);
|
|
13431
|
-
var schema = context$1.schema,
|
|
13432
|
-
loading = context$1.loading,
|
|
13433
|
-
nestedRowRenderer = context$1.nestedRowRenderer;
|
|
13434
|
-
var data = props.data,
|
|
13435
|
-
rowIndex = props.rowIndex;
|
|
13436
|
-
if (nestedRowRenderer) return nestedRowRenderer({
|
|
13437
|
-
data: data,
|
|
13438
|
-
schema: schema,
|
|
13439
|
-
loading: loading,
|
|
13440
|
-
rowIndex: rowIndex
|
|
13441
|
-
});
|
|
13442
|
-
return null;
|
|
13443
|
-
};
|
|
13444
|
-
|
|
13445
13448
|
var HeaderCell = function HeaderCell(props) {
|
|
13446
13449
|
var context$1 = React__namespace.useContext(context);
|
|
13447
13450
|
var schema = props.schema,
|
|
@@ -13626,7 +13629,8 @@
|
|
|
13626
13629
|
schema = props.schema,
|
|
13627
13630
|
expandedState = props.expandedState,
|
|
13628
13631
|
rowIndex = props.rowIndex,
|
|
13629
|
-
colIndex = props.colIndex
|
|
13632
|
+
colIndex = props.colIndex,
|
|
13633
|
+
nestedRowData = props.nestedRowData;
|
|
13630
13634
|
var size = context$1.size,
|
|
13631
13635
|
loading = context$1.loading,
|
|
13632
13636
|
nestedRows = context$1.nestedRows;
|
|
@@ -13641,20 +13645,15 @@
|
|
|
13641
13645
|
loading: loading,
|
|
13642
13646
|
expanded: expanded
|
|
13643
13647
|
};
|
|
13644
|
-
var nestedProps = {
|
|
13645
|
-
data: data,
|
|
13646
|
-
rowIndex: rowIndex
|
|
13647
|
-
};
|
|
13648
|
-
var isNestedRowDisabled = !GridNestedRow(nestedProps);
|
|
13649
13648
|
return /*#__PURE__*/React__namespace.createElement("div", {
|
|
13650
13649
|
className: "Grid-cellContent"
|
|
13651
|
-
}, colIndex === 0 && nestedRows && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null,
|
|
13650
|
+
}, colIndex === 0 && nestedRows && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, nestedRowData ? /*#__PURE__*/React__namespace.createElement(Icon, {
|
|
13652
13651
|
className: 'Grid-nestedRowTrigger',
|
|
13653
13652
|
name: expanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down',
|
|
13654
13653
|
size: 20,
|
|
13655
13654
|
appearance: 'default',
|
|
13656
13655
|
onClick: function onClick(e) {
|
|
13657
|
-
if (
|
|
13656
|
+
if (nestedRowData) {
|
|
13658
13657
|
e.stopPropagation();
|
|
13659
13658
|
setExpanded(!expanded);
|
|
13660
13659
|
}
|
|
@@ -13680,7 +13679,8 @@
|
|
|
13680
13679
|
onMenuChange = _a.onMenuChange,
|
|
13681
13680
|
onFilterChange = _a.onFilterChange,
|
|
13682
13681
|
updateColumnSchema = _a.updateColumnSchema,
|
|
13683
|
-
reorderColumn = _a.reorderColumn
|
|
13682
|
+
reorderColumn = _a.reorderColumn,
|
|
13683
|
+
nestedRowData = _a.nestedRowData;
|
|
13684
13684
|
var draggable = context$1.draggable,
|
|
13685
13685
|
separator = context$1.separator,
|
|
13686
13686
|
nestedRows = context$1.nestedRows,
|
|
@@ -13778,7 +13778,8 @@
|
|
|
13778
13778
|
colIndex: colIndex,
|
|
13779
13779
|
data: data,
|
|
13780
13780
|
schema: schema,
|
|
13781
|
-
expandedState: expandedState
|
|
13781
|
+
expandedState: expandedState,
|
|
13782
|
+
nestedRowData: nestedRowData
|
|
13782
13783
|
}));
|
|
13783
13784
|
};
|
|
13784
13785
|
|
|
@@ -13854,6 +13855,24 @@
|
|
|
13854
13855
|
}, renderSchema(leftPinnedSchema, !!leftPinnedSchema.length, 'left'), renderSchema(unpinnedSchema, !leftPinnedSchema.length && !!unpinnedSchema.length), renderSchema(rightPinnedSchema, false, 'right')));
|
|
13855
13856
|
};
|
|
13856
13857
|
|
|
13858
|
+
var GridNestedRow = function GridNestedRow(props) {
|
|
13859
|
+
var context$1 = React__namespace.useContext(context);
|
|
13860
|
+
var schema = context$1.schema,
|
|
13861
|
+
loading = context$1.loading,
|
|
13862
|
+
nestedRowRenderer = context$1.nestedRowRenderer;
|
|
13863
|
+
var data = props.data,
|
|
13864
|
+
rowIndex = props.rowIndex,
|
|
13865
|
+
expanded = props.expanded;
|
|
13866
|
+
if (nestedRowRenderer) return nestedRowRenderer({
|
|
13867
|
+
data: data,
|
|
13868
|
+
schema: schema,
|
|
13869
|
+
loading: loading,
|
|
13870
|
+
rowIndex: rowIndex,
|
|
13871
|
+
expanded: expanded
|
|
13872
|
+
});
|
|
13873
|
+
return null;
|
|
13874
|
+
};
|
|
13875
|
+
|
|
13857
13876
|
var GridRow = function GridRow(props) {
|
|
13858
13877
|
var context$1 = React__namespace.useContext(context);
|
|
13859
13878
|
var type = context$1.type,
|
|
@@ -13895,6 +13914,12 @@
|
|
|
13895
13914
|
var unpinnedSchema = schema.filter(function (s) {
|
|
13896
13915
|
return !s.hidden && !s.pinned;
|
|
13897
13916
|
});
|
|
13917
|
+
var nestedProps = {
|
|
13918
|
+
data: data,
|
|
13919
|
+
rowIndex: rI,
|
|
13920
|
+
expanded: expanded
|
|
13921
|
+
};
|
|
13922
|
+
var nestedRowData = GridNestedRow(nestedProps);
|
|
13898
13923
|
|
|
13899
13924
|
var renderCheckbox = function renderCheckbox(show) {
|
|
13900
13925
|
if (!show || !withCheckbox) return null;
|
|
@@ -13932,7 +13957,8 @@
|
|
|
13932
13957
|
firstCell: !index,
|
|
13933
13958
|
schema: s,
|
|
13934
13959
|
data: data,
|
|
13935
|
-
expandedState: [expanded, setExpanded]
|
|
13960
|
+
expandedState: [expanded, setExpanded],
|
|
13961
|
+
nestedRowData: nestedRowData
|
|
13936
13962
|
});
|
|
13937
13963
|
}));
|
|
13938
13964
|
}
|
|
@@ -13952,10 +13978,7 @@
|
|
|
13952
13978
|
ref: rowRef
|
|
13953
13979
|
}, renderSchema(leftPinnedSchema, !!leftPinnedSchema.length, 'left'), renderSchema(unpinnedSchema, !leftPinnedSchema.length && !!unpinnedSchema.length), renderSchema(rightPinnedSchema, false, 'right')), nestedRows && expanded && /*#__PURE__*/React__namespace.createElement("div", {
|
|
13954
13980
|
className: "Grid-nestedRow"
|
|
13955
|
-
},
|
|
13956
|
-
data: data,
|
|
13957
|
-
rowIndex: rI
|
|
13958
|
-
})));
|
|
13981
|
+
}, nestedRowData));
|
|
13959
13982
|
};
|
|
13960
13983
|
GridRow.defaultProps = {
|
|
13961
13984
|
data: {}
|
|
@@ -16132,7 +16155,7 @@
|
|
|
16132
16155
|
iconAlign: 'left'
|
|
16133
16156
|
};
|
|
16134
16157
|
|
|
16135
|
-
var version = "2.
|
|
16158
|
+
var version = "2.18.0";
|
|
16136
16159
|
|
|
16137
16160
|
exports.Avatar = Avatar;
|
|
16138
16161
|
exports.AvatarGroup = AvatarGroup;
|