@digital-ai/dot-components 1.16.1 → 1.17.2
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/CHANGE_LOG.md +45 -1
- package/index.esm.js +101 -52
- package/index.umd.js +96 -47
- package/lib/components/button-toggle/ButtonToggle.stories.data.d.ts +3 -0
- package/lib/components/button-toggle/utils/models.d.ts +1 -0
- package/lib/components/inline-edit/InlineEdit.d.ts +3 -1
- package/lib/components/input-form-fields/InputText.d.ts +6 -1
- package/lib/components/list/List.d.ts +1 -1
- package/package.json +1 -1
package/CHANGE_LOG.md
CHANGED
|
@@ -1,5 +1,49 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [1.17.2](https://github.com/digital-ai/dot-components/tree/1.17.2) (06/10/2022)
|
|
4
|
+
|
|
5
|
+
[Full Changelog](https://github.com/digital-ai/dot-components/compare/1.17.1...1.17.2)
|
|
6
|
+
|
|
7
|
+
**Features:**
|
|
8
|
+
|
|
9
|
+
- `InlineEdit` component should provide a tooltip out the box [\#1179](https://github.com/digital-ai/dot-components/issues/1179)
|
|
10
|
+
- S-84117: As a customer admin, I want the IdP creation flow to be more intuitive, as I find the existing user flow a little overwhelming [\#1185](https://github.com/digital-ai/dot-components/pull/1185) ([ryangamble](https://github.com/ryangamble))
|
|
11
|
+
- S-85283: `InlineEdit` component should provide a tooltip out the box [\#1181](https://github.com/digital-ai/dot-components/pull/1181) ([dmiletic85](https://github.com/dmiletic85))
|
|
12
|
+
|
|
13
|
+
**Fixed bugs:**
|
|
14
|
+
|
|
15
|
+
- Sidebar drawer/expanded does not have a data-testid prop supplied [\#1162](https://github.com/digital-ai/dot-components/issues/1162)
|
|
16
|
+
- D-21245: make sure `data-testid` is passed to nested lists [\#1182](https://github.com/digital-ai/dot-components/pull/1182) ([CWSites](https://github.com/CWSites))
|
|
17
|
+
- D-21267: adjust color of helper text [\#1174](https://github.com/digital-ai/dot-components/pull/1174) ([CWSites](https://github.com/CWSites))
|
|
18
|
+
|
|
19
|
+
## [1.17.1](https://github.com/digital-ai/dot-components/tree/1.17.1) (05/19/2022)
|
|
20
|
+
|
|
21
|
+
[Full Changelog](https://github.com/digital-ai/dot-components/compare/1.17.0...1.17.1)
|
|
22
|
+
|
|
23
|
+
**Fixed bugs:**
|
|
24
|
+
|
|
25
|
+
- `DotButtonToggle`: Button size is not respected after tooltip change [\#1170](https://github.com/digital-ai/dot-components/issues/1170)
|
|
26
|
+
- D-21287: `DotButtonToggle`: Button size is not respected after tooltip change [\#1171](https://github.com/digital-ai/dot-components/pull/1171) ([dmiletic85](https://github.com/dmiletic85))
|
|
27
|
+
|
|
28
|
+
## [1.17.0](https://github.com/digital-ai/dot-components/tree/1.17.0) (05/18/2022)
|
|
29
|
+
|
|
30
|
+
[Full Changelog](https://github.com/digital-ai/dot-components/compare/1.16.1...1.17.0)
|
|
31
|
+
|
|
32
|
+
**Features:**
|
|
33
|
+
|
|
34
|
+
- `DotButtonToggle`: Add tooltip support [\#1164](https://github.com/digital-ai/dot-components/issues/1164)
|
|
35
|
+
- S-84947: `DotButtonToggle`: Add tooltip support [\#1166](https://github.com/digital-ai/dot-components/pull/1166) ([dmiletic85](https://github.com/dmiletic85))
|
|
36
|
+
|
|
37
|
+
**Fixed bugs:**
|
|
38
|
+
|
|
39
|
+
- `helperText` on input fields shouldn't be bold [\#1165](https://github.com/digital-ai/dot-components/issues/1165)
|
|
40
|
+
- `DotMenu` popup appears to be flickering on Safari [\#1123](https://github.com/digital-ai/dot-components/issues/1123)
|
|
41
|
+
- D-21265: `helperText` on input fields shouldn't be bold [\#1167](https://github.com/digital-ai/dot-components/pull/1167) ([dmiletic85](https://github.com/dmiletic85))
|
|
42
|
+
|
|
43
|
+
**Merged pull requests:**
|
|
44
|
+
|
|
45
|
+
- update release template with task for marking stories as done [\#1161](https://github.com/digital-ai/dot-components/pull/1161) ([CWSites](https://github.com/CWSites))
|
|
46
|
+
|
|
3
47
|
## [1.16.1](https://github.com/digital-ai/dot-components/tree/1.16.1) (05/12/2022)
|
|
4
48
|
|
|
5
49
|
[Full Changelog](https://github.com/digital-ai/dot-components/compare/1.16.0...1.16.1)
|
|
@@ -847,7 +891,6 @@
|
|
|
847
891
|
- S-78497: Add 'page' prop to DotTable [\#662](https://github.com/digital-ai/dot-components/pull/662) ([selsemore](https://github.com/selsemore))
|
|
848
892
|
- Issue \#632: Add aria-label property [\#659](https://github.com/digital-ai/dot-components/pull/659) ([dmiletic85](https://github.com/dmiletic85))
|
|
849
893
|
- S-78464: SonarQube [\#657](https://github.com/digital-ai/dot-components/pull/657) ([CWSites](https://github.com/CWSites))
|
|
850
|
-
- S-78388: Export interfaces and types needed for table pagination and sorting [\#654](https://github.com/digital-ai/dot-components/pull/654) ([selsemore](https://github.com/selsemore))
|
|
851
894
|
- S-77872: gather test coverage in sonarcloud [\#653](https://github.com/digital-ai/dot-components/pull/653) ([CWSites](https://github.com/CWSites))
|
|
852
895
|
|
|
853
896
|
## [1.0.8](https://github.com/digital-ai/dot-components/tree/1.0.8) (08/23/2021)
|
|
@@ -860,6 +903,7 @@
|
|
|
860
903
|
|
|
861
904
|
**Merged pull requests:**
|
|
862
905
|
|
|
906
|
+
- S-78388: Export interfaces and types needed for table pagination and sorting [\#654](https://github.com/digital-ai/dot-components/pull/654) ([selsemore](https://github.com/selsemore))
|
|
863
907
|
- add export back to component library [\#652](https://github.com/digital-ai/dot-components/pull/652) ([CWSites](https://github.com/CWSites))
|
|
864
908
|
- add back missing items from export [\#651](https://github.com/digital-ai/dot-components/pull/651) ([TheKeithStewart](https://github.com/TheKeithStewart))
|
|
865
909
|
|
package/index.esm.js
CHANGED
|
@@ -2084,6 +2084,7 @@ const DotListItem = ({
|
|
|
2084
2084
|
}, showStartIcon && renderListItemStartIcon(), renderListItemText()), showEndIcon && renderListItemEndIcon())), hasChildren && /*#__PURE__*/React__default.createElement(NestedList, {
|
|
2085
2085
|
anchorEl: anchorEl,
|
|
2086
2086
|
ariaLabel: "nested list",
|
|
2087
|
+
"data-testid": "nestedList",
|
|
2087
2088
|
items: _items2,
|
|
2088
2089
|
menuPlacement: menuPlacement,
|
|
2089
2090
|
nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
|
|
@@ -2095,6 +2096,7 @@ const DotListItem = ({
|
|
|
2095
2096
|
const NestedList = ({
|
|
2096
2097
|
ariaLabel,
|
|
2097
2098
|
anchorEl,
|
|
2099
|
+
'data-testid': dataTestId,
|
|
2098
2100
|
items,
|
|
2099
2101
|
menuPlacement,
|
|
2100
2102
|
nestedDrawerLeftSpacing,
|
|
@@ -2121,6 +2123,7 @@ const NestedList = ({
|
|
|
2121
2123
|
ariaLabel: ariaLabel,
|
|
2122
2124
|
className: nestedListClassName,
|
|
2123
2125
|
component: "div",
|
|
2126
|
+
"data-testid": dataTestId,
|
|
2124
2127
|
disablePadding: true,
|
|
2125
2128
|
items: items,
|
|
2126
2129
|
key: parentItemIndex
|
|
@@ -2145,6 +2148,7 @@ const NestedList = ({
|
|
|
2145
2148
|
}, /*#__PURE__*/React__default.createElement(StyledListItem, {
|
|
2146
2149
|
className: flyoutItemClasses,
|
|
2147
2150
|
component: href && !onClick ? 'a' : null,
|
|
2151
|
+
"data-testid": `${dataTestId}-item-${index}`,
|
|
2148
2152
|
href: href,
|
|
2149
2153
|
key: `${parentItemIndex}-${index}`,
|
|
2150
2154
|
onClick: onClick,
|
|
@@ -2162,6 +2166,7 @@ const NestedList = ({
|
|
|
2162
2166
|
anchorEl: anchorEl,
|
|
2163
2167
|
ariaLabel: ariaLabel,
|
|
2164
2168
|
className: flyoutMenuClassName,
|
|
2169
|
+
"data-testid": dataTestId,
|
|
2165
2170
|
id: CreateUUID(),
|
|
2166
2171
|
key: parentItemIndex,
|
|
2167
2172
|
menuItemHeight: "auto",
|
|
@@ -2188,6 +2193,7 @@ const NestedList = ({
|
|
|
2188
2193
|
ariaLabel: ariaLabel,
|
|
2189
2194
|
className: nestedListClassName,
|
|
2190
2195
|
component: "div",
|
|
2196
|
+
"data-testid": dataTestId,
|
|
2191
2197
|
disablePadding: true,
|
|
2192
2198
|
items: items,
|
|
2193
2199
|
key: parentItemIndex,
|
|
@@ -2678,7 +2684,7 @@ const StyledTextField = styled(TextField).withConfig({
|
|
|
2678
2684
|
})(["", ""], ({
|
|
2679
2685
|
theme,
|
|
2680
2686
|
InputProps
|
|
2681
|
-
}) => css(["&.", "{.MuiInputBase-root{background:", "}.MuiInputBase-input{box-sizing:content-box;}.MuiOutlinedInput-notchedOutline{border-color:", "}.MuiOutlinedInput-input{padding:", ";}.MuiOutlinedInput-inputMarginDense{padding-top:10.5px;padding-bottom:10.5px;}.MuiOutlinedInput-inputMultiline{padding:0;}}&.", ",&.", "{.dot-adornment-icon .dot-icon i{margin-top:-2px;}.MuiFormLabel-root.Mui-focused{color:", "}select.dot-select{background:", ";}.MuiSelect-select:focus{background-color:transparent;}.Mui-error .", "{color:", ";}.MuiSelect-icon{right:", ";}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.MuiInputLabel-outlined.MuiInputLabel-shrink{color:", ";}.", "{color:", ";}}.MuiOutlinedInput-adornedStart{padding-left:12px;}.MuiOutlinedInput-adornedEnd{padding-right:12px;}.MuiFormHelperText-root{font-size:", "px;margin:", ";display:flex;align-items:flex-end;&:not(.Mui-error){color:", ";}}.Mui-focused .MuiOutlinedInput-notchedOutline{border-color:", ";}"], rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n0, theme.palette.product === 'agility' && theme.palette.layer.n100, InputProps.startAdornment ? `18px 12px 18px 0px` : `18px 12px`, rootSelectClassName, rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n700, theme.palette.product === 'agility' && theme.palette.layer.n0, adornmentIconClassName, theme.palette.error[500], InputProps.endAdornment ? `44px` : `12px`, warningClassName, theme.palette.warning[500], theme.palette.grey[700], adornmentIconClassName, theme.palette.warning[500], theme.typography.body2.fontSize, theme.spacing(0, 0, 0, 2), theme.palette.grey[
|
|
2687
|
+
}) => css(["&.", "{.MuiInputBase-root{background:", "}.MuiInputBase-input{box-sizing:content-box;}.MuiOutlinedInput-notchedOutline{border-color:", "}.MuiOutlinedInput-input{padding:", ";}.MuiOutlinedInput-inputMarginDense{padding-top:10.5px;padding-bottom:10.5px;}.MuiOutlinedInput-inputMultiline{padding:0;}}&.", ",&.", "{.dot-adornment-icon .dot-icon i{margin-top:-2px;}.MuiFormLabel-root.Mui-focused{color:", "}select.dot-select{background:", ";}.MuiSelect-select:focus{background-color:transparent;}.Mui-error .", "{color:", ";}.MuiSelect-icon{right:", ";}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.MuiInputLabel-outlined.MuiInputLabel-shrink{color:", ";}.", "{color:", ";}}.MuiOutlinedInput-adornedStart{padding-left:12px;}.MuiOutlinedInput-adornedEnd{padding-right:12px;}.MuiFormHelperText-root{font-family:", ";font-size:", "px;margin:", ";display:flex;align-items:flex-end;&:not(.Mui-error){color:", ";}}.Mui-focused .MuiOutlinedInput-notchedOutline{border-color:", ";}"], rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n0, theme.palette.product === 'agility' && theme.palette.layer.n100, InputProps.startAdornment ? `18px 12px 18px 0px` : `18px 12px`, rootSelectClassName, rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n700, theme.palette.product === 'agility' && theme.palette.layer.n0, adornmentIconClassName, theme.palette.error[500], InputProps.endAdornment ? `44px` : `12px`, warningClassName, theme.palette.warning[500], theme.palette.grey[700], adornmentIconClassName, theme.palette.warning[500], theme.typography.body2.fontFamily, theme.typography.body2.fontSize, theme.spacing(0, 0, 0, 2), theme.palette.grey[400], theme.palette.product === 'agility' && agilityGreen));
|
|
2682
2688
|
|
|
2683
2689
|
const rootClassName$F = 'dot-button';
|
|
2684
2690
|
const StyledButton = styled(Button).withConfig({
|
|
@@ -3510,13 +3516,50 @@ const DotBreadcrumbs = ({
|
|
|
3510
3516
|
}));
|
|
3511
3517
|
};
|
|
3512
3518
|
|
|
3519
|
+
/*! *****************************************************************************
|
|
3520
|
+
Copyright (c) Microsoft Corporation.
|
|
3521
|
+
|
|
3522
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
3523
|
+
purpose with or without fee is hereby granted.
|
|
3524
|
+
|
|
3525
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
3526
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
3527
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
3528
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
3529
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
3530
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
3531
|
+
PERFORMANCE OF THIS SOFTWARE.
|
|
3532
|
+
***************************************************************************** */
|
|
3533
|
+
|
|
3534
|
+
function __rest(s, e) {
|
|
3535
|
+
var t = {};
|
|
3536
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
3537
|
+
t[p] = s[p];
|
|
3538
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
3539
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
3540
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
3541
|
+
t[p[i]] = s[p[i]];
|
|
3542
|
+
}
|
|
3543
|
+
return t;
|
|
3544
|
+
}
|
|
3545
|
+
|
|
3546
|
+
function __awaiter(thisArg, _arguments, P, generator) {
|
|
3547
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3548
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
3549
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
3550
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
3551
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
3552
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
3553
|
+
});
|
|
3554
|
+
}
|
|
3555
|
+
|
|
3513
3556
|
const rootClassName$C = 'dot-button-toggle';
|
|
3514
3557
|
const StyledToggleButtonGroup = styled(ToggleButtonGroup).withConfig({
|
|
3515
3558
|
displayName: "ButtonTogglestyles__StyledToggleButtonGroup",
|
|
3516
3559
|
componentId: "sc-1oh4ljv-0"
|
|
3517
3560
|
})(["", ""], ({
|
|
3518
3561
|
theme
|
|
3519
|
-
}) => css(["&.", "{.dot-icon{+ p{margin-left:", "px;}i{height:auto;}}.MuiToggleButton-label{color:", ";p{margin-bottom:0;}}.MuiToggleButtonGroup-groupedHorizontal{border:1px solid ", ";border-radius:
|
|
3562
|
+
}) => css(["&.", "{.dot-icon{+ p{margin-left:", "px;}i{height:auto;}}.MuiToggleButton-label{color:", ";p{margin-bottom:0;}}.MuiToggleButtonGroup-groupedHorizontal{border:1px solid ", ";border-radius:0;:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px;margin-left:0;}:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;margin-right:0;}}}.MuiButtonBase-root{&.Mui-disabled p,&.Mui-disabled .dot-icon{color:", ";}}"], rootClassName$C, theme.spacing(1), theme.palette.layer.n700, theme.palette.layer.n300, theme.palette.grey[200]));
|
|
3520
3563
|
|
|
3521
3564
|
const DotButtonToggle = ({
|
|
3522
3565
|
ariaLabel,
|
|
@@ -3532,6 +3575,37 @@ const DotButtonToggle = ({
|
|
|
3532
3575
|
value
|
|
3533
3576
|
}) => {
|
|
3534
3577
|
const rootClasses = useStylesWithRootClass(rootClassName$C, className);
|
|
3578
|
+
|
|
3579
|
+
const renderToggleButton = ({
|
|
3580
|
+
ariaLabel: optionAriaLabel,
|
|
3581
|
+
className: optionClassName,
|
|
3582
|
+
disabled: optionDisabled,
|
|
3583
|
+
iconId: optionIconId,
|
|
3584
|
+
text: optionText,
|
|
3585
|
+
tooltip: optionTooltip,
|
|
3586
|
+
value: optionValue
|
|
3587
|
+
}, key) => {
|
|
3588
|
+
const commonProps = {
|
|
3589
|
+
'aria-label': optionAriaLabel,
|
|
3590
|
+
className: optionClassName,
|
|
3591
|
+
disableFocusRipple: _disableFocusRipple,
|
|
3592
|
+
disableRipple: _disableRipple,
|
|
3593
|
+
disabled: optionDisabled,
|
|
3594
|
+
key,
|
|
3595
|
+
value: optionValue
|
|
3596
|
+
};
|
|
3597
|
+
const children = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, optionIconId && /*#__PURE__*/React__default.createElement(DotIcon, {
|
|
3598
|
+
className: "dot-toggle-icon",
|
|
3599
|
+
iconId: optionIconId
|
|
3600
|
+
}), optionText && /*#__PURE__*/React__default.createElement(DotTypography, null, optionText));
|
|
3601
|
+
return optionTooltip ? /*#__PURE__*/React__default.createElement(TooltipToggleButton, Object.assign({}, commonProps, {
|
|
3602
|
+
CustomTooltipProps: {
|
|
3603
|
+
title: optionTooltip
|
|
3604
|
+
},
|
|
3605
|
+
value: optionValue
|
|
3606
|
+
}), children) : /*#__PURE__*/React__default.createElement(ToggleButton, Object.assign({}, commonProps), children);
|
|
3607
|
+
};
|
|
3608
|
+
|
|
3535
3609
|
return /*#__PURE__*/React__default.createElement(StyledToggleButtonGroup, {
|
|
3536
3610
|
"aria-label": ariaLabel,
|
|
3537
3611
|
classes: {
|
|
@@ -3544,28 +3618,21 @@ const DotButtonToggle = ({
|
|
|
3544
3618
|
size: _size,
|
|
3545
3619
|
value: value
|
|
3546
3620
|
}, buttonOptions.map((option, key) => {
|
|
3547
|
-
|
|
3548
|
-
ariaLabel: optionAriaLabel,
|
|
3549
|
-
className: optionClassName,
|
|
3550
|
-
disabled: optionDisabled,
|
|
3551
|
-
iconId: optionIconId,
|
|
3552
|
-
text: optionText,
|
|
3553
|
-
value: optionValue
|
|
3554
|
-
} = option;
|
|
3555
|
-
return /*#__PURE__*/React__default.createElement(ToggleButton, {
|
|
3556
|
-
"aria-label": optionAriaLabel,
|
|
3557
|
-
className: optionClassName,
|
|
3558
|
-
disableFocusRipple: _disableFocusRipple,
|
|
3559
|
-
disableRipple: _disableRipple,
|
|
3560
|
-
disabled: optionDisabled,
|
|
3561
|
-
key: key,
|
|
3562
|
-
value: optionValue
|
|
3563
|
-
}, optionIconId && /*#__PURE__*/React__default.createElement(DotIcon, {
|
|
3564
|
-
className: "dot-toggle-icon",
|
|
3565
|
-
iconId: optionIconId
|
|
3566
|
-
}), optionText && /*#__PURE__*/React__default.createElement(DotTypography, null, optionText));
|
|
3621
|
+
return renderToggleButton(option, key);
|
|
3567
3622
|
}));
|
|
3568
3623
|
};
|
|
3624
|
+
/** Catch props and forward to ToggleButton */
|
|
3625
|
+
|
|
3626
|
+
const TooltipToggleButton = /*#__PURE__*/forwardRef((_a, ref) => {
|
|
3627
|
+
var {
|
|
3628
|
+
CustomTooltipProps
|
|
3629
|
+
} = _a,
|
|
3630
|
+
props = __rest(_a, ["CustomTooltipProps"]);
|
|
3631
|
+
|
|
3632
|
+
return /*#__PURE__*/React__default.createElement(Tooltip, Object.assign({}, CustomTooltipProps), /*#__PURE__*/React__default.createElement(ToggleButton, Object.assign({
|
|
3633
|
+
ref: ref
|
|
3634
|
+
}, props)));
|
|
3635
|
+
});
|
|
3569
3636
|
|
|
3570
3637
|
const DotCard = ({
|
|
3571
3638
|
ariaLabel,
|
|
@@ -4508,6 +4575,7 @@ const getInitialState = value => ({
|
|
|
4508
4575
|
});
|
|
4509
4576
|
|
|
4510
4577
|
const DotInputText = ({
|
|
4578
|
+
autoComplete: _autoComplete = 'off',
|
|
4511
4579
|
autoFocus,
|
|
4512
4580
|
className,
|
|
4513
4581
|
defaultValue,
|
|
@@ -4596,7 +4664,7 @@ const DotInputText = ({
|
|
|
4596
4664
|
}, endAdornmentIcon)
|
|
4597
4665
|
},
|
|
4598
4666
|
"aria-label": name,
|
|
4599
|
-
autoComplete:
|
|
4667
|
+
autoComplete: _autoComplete,
|
|
4600
4668
|
autoFocus: autoFocus,
|
|
4601
4669
|
classes: {
|
|
4602
4670
|
root: rootStyles
|
|
@@ -5563,31 +5631,6 @@ const DotDynamicForm = ({
|
|
|
5563
5631
|
}, buildFormControls(config.controls));
|
|
5564
5632
|
};
|
|
5565
5633
|
|
|
5566
|
-
/*! *****************************************************************************
|
|
5567
|
-
Copyright (c) Microsoft Corporation.
|
|
5568
|
-
|
|
5569
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
5570
|
-
purpose with or without fee is hereby granted.
|
|
5571
|
-
|
|
5572
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
5573
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
5574
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
5575
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
5576
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
5577
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
5578
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
5579
|
-
***************************************************************************** */
|
|
5580
|
-
|
|
5581
|
-
function __awaiter(thisArg, _arguments, P, generator) {
|
|
5582
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
5583
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5584
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5585
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
5586
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
5587
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
5588
|
-
});
|
|
5589
|
-
}
|
|
5590
|
-
|
|
5591
5634
|
const rootClassName$n = 'dot-inline-edit';
|
|
5592
5635
|
const editModeClassName = 'dot-edit-mode';
|
|
5593
5636
|
const viewModeClassName = 'dot-view-mode';
|
|
@@ -5690,6 +5733,7 @@ const DotInlineEdit = ({
|
|
|
5690
5733
|
onChange,
|
|
5691
5734
|
onEditStateChange,
|
|
5692
5735
|
readOnly,
|
|
5736
|
+
tooltip,
|
|
5693
5737
|
typography: _typography = 'body1',
|
|
5694
5738
|
value: _value = ''
|
|
5695
5739
|
}) => {
|
|
@@ -5773,10 +5817,7 @@ const DotInlineEdit = ({
|
|
|
5773
5817
|
|
|
5774
5818
|
const renderViewMode = () => {
|
|
5775
5819
|
const viewModeClasses = useStylesWithRootClass(viewModeClassName, readOnly ? readOnlyClassName : '');
|
|
5776
|
-
|
|
5777
|
-
className: viewModeClasses,
|
|
5778
|
-
"data-testid": dataTestId && `${dataTestId}-view-mode-wrapper`
|
|
5779
|
-
}, /*#__PURE__*/React__default.createElement(DotTypography, {
|
|
5820
|
+
const viewModeChildren = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DotTypography, {
|
|
5780
5821
|
className: "dot-view-mode-typography",
|
|
5781
5822
|
"data-testid": dataTestId && `${dataTestId}-view-mode-typography`,
|
|
5782
5823
|
variant: _typography
|
|
@@ -5785,6 +5826,14 @@ const DotInlineEdit = ({
|
|
|
5785
5826
|
"data-testid": dataTestId && `${dataTestId}-edit-icon`,
|
|
5786
5827
|
iconId: "edit"
|
|
5787
5828
|
}));
|
|
5829
|
+
return tooltip ? /*#__PURE__*/React__default.createElement(DotTooltip, {
|
|
5830
|
+
title: tooltip,
|
|
5831
|
+
className: viewModeClasses,
|
|
5832
|
+
"data-testid": dataTestId && `${dataTestId}-view-mode-tooltip-wrapper`
|
|
5833
|
+
}, viewModeChildren) : /*#__PURE__*/React__default.createElement("div", {
|
|
5834
|
+
className: viewModeClasses,
|
|
5835
|
+
"data-testid": dataTestId && `${dataTestId}-view-mode-wrapper`
|
|
5836
|
+
}, viewModeChildren);
|
|
5788
5837
|
};
|
|
5789
5838
|
|
|
5790
5839
|
const renderEditMode = () => {
|
package/index.umd.js
CHANGED
|
@@ -55,6 +55,18 @@
|
|
|
55
55
|
return __assign.apply(this, arguments);
|
|
56
56
|
};
|
|
57
57
|
|
|
58
|
+
function __rest(s, e) {
|
|
59
|
+
var t = {};
|
|
60
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
61
|
+
t[p] = s[p];
|
|
62
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
63
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
64
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
65
|
+
t[p[i]] = s[p[i]];
|
|
66
|
+
}
|
|
67
|
+
return t;
|
|
68
|
+
}
|
|
69
|
+
|
|
58
70
|
function __awaiter(thisArg, _arguments, P, generator) {
|
|
59
71
|
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
60
72
|
return new (P || (P = Promise))(function (resolve, reject) {
|
|
@@ -2288,6 +2300,7 @@
|
|
|
2288
2300
|
}, showStartIcon && renderListItemStartIcon(), renderListItemText()), showEndIcon && renderListItemEndIcon())), hasChildren && /*#__PURE__*/React__default["default"].createElement(NestedList, {
|
|
2289
2301
|
anchorEl: anchorEl,
|
|
2290
2302
|
ariaLabel: "nested list",
|
|
2303
|
+
"data-testid": "nestedList",
|
|
2291
2304
|
items: items,
|
|
2292
2305
|
menuPlacement: menuPlacement,
|
|
2293
2306
|
nestedDrawerLeftSpacing: nestedDrawerLeftSpacing,
|
|
@@ -2299,6 +2312,7 @@
|
|
|
2299
2312
|
var NestedList = function NestedList(_a) {
|
|
2300
2313
|
var ariaLabel = _a.ariaLabel,
|
|
2301
2314
|
anchorEl = _a.anchorEl,
|
|
2315
|
+
dataTestId = _a["data-testid"],
|
|
2302
2316
|
items = _a.items,
|
|
2303
2317
|
menuPlacement = _a.menuPlacement,
|
|
2304
2318
|
nestedDrawerLeftSpacing = _a.nestedDrawerLeftSpacing,
|
|
@@ -2324,6 +2338,7 @@
|
|
|
2324
2338
|
ariaLabel: ariaLabel,
|
|
2325
2339
|
className: nestedListClassName,
|
|
2326
2340
|
component: "div",
|
|
2341
|
+
"data-testid": dataTestId,
|
|
2327
2342
|
disablePadding: true,
|
|
2328
2343
|
items: items,
|
|
2329
2344
|
key: parentItemIndex
|
|
@@ -2346,6 +2361,7 @@
|
|
|
2346
2361
|
}, /*#__PURE__*/React__default["default"].createElement(StyledListItem, {
|
|
2347
2362
|
className: flyoutItemClasses,
|
|
2348
2363
|
component: href && !onClick ? 'a' : null,
|
|
2364
|
+
"data-testid": dataTestId + "-item-" + index,
|
|
2349
2365
|
href: href,
|
|
2350
2366
|
key: parentItemIndex + "-" + index,
|
|
2351
2367
|
onClick: onClick,
|
|
@@ -2363,6 +2379,7 @@
|
|
|
2363
2379
|
anchorEl: anchorEl,
|
|
2364
2380
|
ariaLabel: ariaLabel,
|
|
2365
2381
|
className: flyoutMenuClassName,
|
|
2382
|
+
"data-testid": dataTestId,
|
|
2366
2383
|
id: CreateUUID(),
|
|
2367
2384
|
key: parentItemIndex,
|
|
2368
2385
|
menuItemHeight: "auto",
|
|
@@ -2389,6 +2406,7 @@
|
|
|
2389
2406
|
ariaLabel: ariaLabel,
|
|
2390
2407
|
className: nestedListClassName,
|
|
2391
2408
|
component: "div",
|
|
2409
|
+
"data-testid": dataTestId,
|
|
2392
2410
|
disablePadding: true,
|
|
2393
2411
|
items: items,
|
|
2394
2412
|
key: parentItemIndex,
|
|
@@ -2917,7 +2935,7 @@
|
|
|
2917
2935
|
})(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
2918
2936
|
var theme = _a.theme,
|
|
2919
2937
|
InputProps = _a.InputProps;
|
|
2920
|
-
return styled.css(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n &.", " {\n .MuiInputBase-root {\n background: ", "\n }\n .MuiInputBase-input {\n box-sizing: content-box;\n }\n .MuiOutlinedInput-notchedOutline {\n border-color: ", "\n }\n .MuiOutlinedInput-input {\n padding: ", ";\n }\n .MuiOutlinedInput-inputMarginDense {\n padding-top: 10.5px;\n padding-bottom: 10.5px;\n }\n .MuiOutlinedInput-inputMultiline {\n padding: 0;\n }\n }\n &.", ", &.", " {\n .dot-adornment-icon .dot-icon i {\n margin-top: -2px;\n }\n .MuiFormLabel-root.Mui-focused {\n color: ", "\n }\n select.dot-select {\n background: ", ";\n }\n .MuiSelect-select:focus {\n background-color: transparent;\n }\n .Mui-error .", " {\n color: ", ";\n }\n .MuiSelect-icon {\n right: ", ";\n }\n &.", " {\n .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n .", " {\n color: ", ";\n }\n }\n .MuiOutlinedInput-adornedStart {\n padding-left: 12px;\n }\n .MuiOutlinedInput-adornedEnd {\n padding-right: 12px;\n }\n .MuiFormHelperText-root {\n font-size: ", "px;\n margin: ", ";\n display: flex;\n align-items: flex-end;\n &:not(.Mui-error) {\n color: ", ";\n }\n }\n .Mui-focused .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n "], ["\n &.", " {\n .MuiInputBase-root {\n background: ", "\n }\n .MuiInputBase-input {\n box-sizing: content-box;\n }\n .MuiOutlinedInput-notchedOutline {\n border-color: ", "\n }\n .MuiOutlinedInput-input {\n padding: ", ";\n }\n .MuiOutlinedInput-inputMarginDense {\n padding-top: 10.5px;\n padding-bottom: 10.5px;\n }\n .MuiOutlinedInput-inputMultiline {\n padding: 0;\n }\n }\n &.", ", &.", " {\n .dot-adornment-icon .dot-icon i {\n margin-top: -2px;\n }\n .MuiFormLabel-root.Mui-focused {\n color: ", "\n }\n select.dot-select {\n background: ", ";\n }\n .MuiSelect-select:focus {\n background-color: transparent;\n }\n .Mui-error .", " {\n color: ", ";\n }\n .MuiSelect-icon {\n right: ", ";\n }\n &.", " {\n .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n .", " {\n color: ", ";\n }\n }\n .MuiOutlinedInput-adornedStart {\n padding-left: 12px;\n }\n .MuiOutlinedInput-adornedEnd {\n padding-right: 12px;\n }\n .MuiFormHelperText-root {\n font-size: ", "px;\n margin: ", ";\n display: flex;\n align-items: flex-end;\n &:not(.Mui-error) {\n color: ", ";\n }\n }\n .Mui-focused .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n "])), rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n0, theme.palette.product === 'agility' && theme.palette.layer.n100, InputProps.startAdornment ? "18px 12px 18px 0px" : "18px 12px", rootSelectClassName, rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n700, theme.palette.product === 'agility' && theme.palette.layer.n0, adornmentIconClassName, theme.palette.error[500], InputProps.endAdornment ? "44px" : "12px", warningClassName, theme.palette.warning[500], theme.palette.grey[700], adornmentIconClassName, theme.palette.warning[500], theme.typography.body2.fontSize, theme.spacing(0, 0, 0, 2), theme.palette.grey[
|
|
2938
|
+
return styled.css(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n &.", " {\n .MuiInputBase-root {\n background: ", "\n }\n .MuiInputBase-input {\n box-sizing: content-box;\n }\n .MuiOutlinedInput-notchedOutline {\n border-color: ", "\n }\n .MuiOutlinedInput-input {\n padding: ", ";\n }\n .MuiOutlinedInput-inputMarginDense {\n padding-top: 10.5px;\n padding-bottom: 10.5px;\n }\n .MuiOutlinedInput-inputMultiline {\n padding: 0;\n }\n }\n &.", ", &.", " {\n .dot-adornment-icon .dot-icon i {\n margin-top: -2px;\n }\n .MuiFormLabel-root.Mui-focused {\n color: ", "\n }\n select.dot-select {\n background: ", ";\n }\n .MuiSelect-select:focus {\n background-color: transparent;\n }\n .Mui-error .", " {\n color: ", ";\n }\n .MuiSelect-icon {\n right: ", ";\n }\n &.", " {\n .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n .", " {\n color: ", ";\n }\n }\n .MuiOutlinedInput-adornedStart {\n padding-left: 12px;\n }\n .MuiOutlinedInput-adornedEnd {\n padding-right: 12px;\n }\n .MuiFormHelperText-root {\n font-family: ", ";\n font-size: ", "px;\n margin: ", ";\n display: flex;\n align-items: flex-end;\n &:not(.Mui-error) {\n color: ", ";\n }\n }\n .Mui-focused .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n "], ["\n &.", " {\n .MuiInputBase-root {\n background: ", "\n }\n .MuiInputBase-input {\n box-sizing: content-box;\n }\n .MuiOutlinedInput-notchedOutline {\n border-color: ", "\n }\n .MuiOutlinedInput-input {\n padding: ", ";\n }\n .MuiOutlinedInput-inputMarginDense {\n padding-top: 10.5px;\n padding-bottom: 10.5px;\n }\n .MuiOutlinedInput-inputMultiline {\n padding: 0;\n }\n }\n &.", ", &.", " {\n .dot-adornment-icon .dot-icon i {\n margin-top: -2px;\n }\n .MuiFormLabel-root.Mui-focused {\n color: ", "\n }\n select.dot-select {\n background: ", ";\n }\n .MuiSelect-select:focus {\n background-color: transparent;\n }\n .Mui-error .", " {\n color: ", ";\n }\n .MuiSelect-icon {\n right: ", ";\n }\n &.", " {\n .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n .", " {\n color: ", ";\n }\n }\n .MuiOutlinedInput-adornedStart {\n padding-left: 12px;\n }\n .MuiOutlinedInput-adornedEnd {\n padding-right: 12px;\n }\n .MuiFormHelperText-root {\n font-family: ", ";\n font-size: ", "px;\n margin: ", ";\n display: flex;\n align-items: flex-end;\n &:not(.Mui-error) {\n color: ", ";\n }\n }\n .Mui-focused .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n "])), rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n0, theme.palette.product === 'agility' && theme.palette.layer.n100, InputProps.startAdornment ? "18px 12px 18px 0px" : "18px 12px", rootSelectClassName, rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n700, theme.palette.product === 'agility' && theme.palette.layer.n0, adornmentIconClassName, theme.palette.error[500], InputProps.endAdornment ? "44px" : "12px", warningClassName, theme.palette.warning[500], theme.palette.grey[700], adornmentIconClassName, theme.palette.warning[500], theme.typography.body2.fontFamily, theme.typography.body2.fontSize, theme.spacing(0, 0, 0, 2), theme.palette.grey[400], theme.palette.product === 'agility' && agilityGreen);
|
|
2921
2939
|
});
|
|
2922
2940
|
var templateObject_1$J, templateObject_2$H, templateObject_3$7;
|
|
2923
2941
|
|
|
@@ -3840,7 +3858,7 @@
|
|
|
3840
3858
|
componentId: "sc-1oh4ljv-0"
|
|
3841
3859
|
})(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
3842
3860
|
var theme = _a.theme;
|
|
3843
|
-
return styled.css(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n &.", " {\n .dot-icon {\n + p {\n margin-left: ", "px;\n }\n i {\n height: auto;\n }\n }\n .MuiToggleButton-label {\n color: ", ";\n p {\n margin-bottom: 0;\n }\n }\n .MuiToggleButtonGroup-groupedHorizontal {\n border: 1px solid ", ";\n border-radius:
|
|
3861
|
+
return styled.css(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n &.", " {\n .dot-icon {\n + p {\n margin-left: ", "px;\n }\n i {\n height: auto;\n }\n }\n .MuiToggleButton-label {\n color: ", ";\n p {\n margin-bottom: 0;\n }\n }\n .MuiToggleButtonGroup-groupedHorizontal {\n border: 1px solid ", ";\n border-radius: 0;\n\n :first-child {\n border-top-left-radius: 4px;\n border-bottom-left-radius: 4px;\n margin-left: 0;\n }\n :last-child {\n border-top-right-radius: 4px;\n border-bottom-right-radius: 4px;\n margin-right: 0;\n }\n }\n }\n\n .MuiButtonBase-root {\n &.Mui-disabled p,\n &.Mui-disabled .dot-icon {\n color: ", ";\n }\n }\n "], ["\n &.", " {\n .dot-icon {\n + p {\n margin-left: ", "px;\n }\n i {\n height: auto;\n }\n }\n .MuiToggleButton-label {\n color: ", ";\n p {\n margin-bottom: 0;\n }\n }\n .MuiToggleButtonGroup-groupedHorizontal {\n border: 1px solid ", ";\n border-radius: 0;\n\n :first-child {\n border-top-left-radius: 4px;\n border-bottom-left-radius: 4px;\n margin-left: 0;\n }\n :last-child {\n border-top-right-radius: 4px;\n border-bottom-right-radius: 4px;\n margin-right: 0;\n }\n }\n }\n\n .MuiButtonBase-root {\n &.Mui-disabled p,\n &.Mui-disabled .dot-icon {\n color: ", ";\n }\n }\n "])), rootClassName$C, theme.spacing(1), theme.palette.layer.n700, theme.palette.layer.n300, theme.palette.grey[200]);
|
|
3844
3862
|
});
|
|
3845
3863
|
var templateObject_1$F, templateObject_2$D;
|
|
3846
3864
|
|
|
@@ -3863,6 +3881,36 @@
|
|
|
3863
3881
|
size = _g === void 0 ? 'medium' : _g,
|
|
3864
3882
|
value = _a.value;
|
|
3865
3883
|
var rootClasses = useStylesWithRootClass(rootClassName$C, className);
|
|
3884
|
+
|
|
3885
|
+
var renderToggleButton = function renderToggleButton(_a, key) {
|
|
3886
|
+
var optionAriaLabel = _a.ariaLabel,
|
|
3887
|
+
optionClassName = _a.className,
|
|
3888
|
+
optionDisabled = _a.disabled,
|
|
3889
|
+
optionIconId = _a.iconId,
|
|
3890
|
+
optionText = _a.text,
|
|
3891
|
+
optionTooltip = _a.tooltip,
|
|
3892
|
+
optionValue = _a.value;
|
|
3893
|
+
var commonProps = {
|
|
3894
|
+
'aria-label': optionAriaLabel,
|
|
3895
|
+
className: optionClassName,
|
|
3896
|
+
disableFocusRipple: disableFocusRipple,
|
|
3897
|
+
disableRipple: disableRipple,
|
|
3898
|
+
disabled: optionDisabled,
|
|
3899
|
+
key: key,
|
|
3900
|
+
value: optionValue
|
|
3901
|
+
};
|
|
3902
|
+
var children = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, optionIconId && /*#__PURE__*/React__default["default"].createElement(DotIcon, {
|
|
3903
|
+
className: "dot-toggle-icon",
|
|
3904
|
+
iconId: optionIconId
|
|
3905
|
+
}), optionText && /*#__PURE__*/React__default["default"].createElement(DotTypography, null, optionText));
|
|
3906
|
+
return optionTooltip ? /*#__PURE__*/React__default["default"].createElement(TooltipToggleButton, __assign({}, commonProps, {
|
|
3907
|
+
CustomTooltipProps: {
|
|
3908
|
+
title: optionTooltip
|
|
3909
|
+
},
|
|
3910
|
+
value: optionValue
|
|
3911
|
+
}), children) : /*#__PURE__*/React__default["default"].createElement(lab.ToggleButton, __assign({}, commonProps), children);
|
|
3912
|
+
};
|
|
3913
|
+
|
|
3866
3914
|
return /*#__PURE__*/React__default["default"].createElement(StyledToggleButtonGroup, {
|
|
3867
3915
|
"aria-label": ariaLabel,
|
|
3868
3916
|
classes: {
|
|
@@ -3875,26 +3923,19 @@
|
|
|
3875
3923
|
size: size,
|
|
3876
3924
|
value: value
|
|
3877
3925
|
}, buttonOptions.map(function (option, key) {
|
|
3878
|
-
|
|
3879
|
-
optionClassName = option.className,
|
|
3880
|
-
optionDisabled = option.disabled,
|
|
3881
|
-
optionIconId = option.iconId,
|
|
3882
|
-
optionText = option.text,
|
|
3883
|
-
optionValue = option.value;
|
|
3884
|
-
return /*#__PURE__*/React__default["default"].createElement(lab.ToggleButton, {
|
|
3885
|
-
"aria-label": optionAriaLabel,
|
|
3886
|
-
className: optionClassName,
|
|
3887
|
-
disableFocusRipple: disableFocusRipple,
|
|
3888
|
-
disableRipple: disableRipple,
|
|
3889
|
-
disabled: optionDisabled,
|
|
3890
|
-
key: key,
|
|
3891
|
-
value: optionValue
|
|
3892
|
-
}, optionIconId && /*#__PURE__*/React__default["default"].createElement(DotIcon, {
|
|
3893
|
-
className: "dot-toggle-icon",
|
|
3894
|
-
iconId: optionIconId
|
|
3895
|
-
}), optionText && /*#__PURE__*/React__default["default"].createElement(DotTypography, null, optionText));
|
|
3926
|
+
return renderToggleButton(option, key);
|
|
3896
3927
|
}));
|
|
3897
3928
|
};
|
|
3929
|
+
/** Catch props and forward to ToggleButton */
|
|
3930
|
+
|
|
3931
|
+
var TooltipToggleButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
3932
|
+
var CustomTooltipProps = _a.CustomTooltipProps,
|
|
3933
|
+
props = __rest(_a, ["CustomTooltipProps"]);
|
|
3934
|
+
|
|
3935
|
+
return /*#__PURE__*/React__default["default"].createElement(core.Tooltip, __assign({}, CustomTooltipProps), /*#__PURE__*/React__default["default"].createElement(lab.ToggleButton, __assign({
|
|
3936
|
+
ref: ref
|
|
3937
|
+
}, props)));
|
|
3938
|
+
});
|
|
3898
3939
|
|
|
3899
3940
|
var DotCard = function DotCard(_a) {
|
|
3900
3941
|
var ariaLabel = _a.ariaLabel,
|
|
@@ -4889,24 +4930,26 @@
|
|
|
4889
4930
|
};
|
|
4890
4931
|
|
|
4891
4932
|
var DotInputText = function DotInputText(_a) {
|
|
4892
|
-
var
|
|
4933
|
+
var _b = _a.autoComplete,
|
|
4934
|
+
autoComplete = _b === void 0 ? 'off' : _b,
|
|
4935
|
+
autoFocus = _a.autoFocus,
|
|
4893
4936
|
className = _a.className,
|
|
4894
4937
|
defaultValue = _a.defaultValue,
|
|
4895
4938
|
dataTestId = _a["data-testid"],
|
|
4896
|
-
|
|
4897
|
-
disabled =
|
|
4898
|
-
|
|
4899
|
-
error =
|
|
4900
|
-
|
|
4901
|
-
fullWidth =
|
|
4939
|
+
_c = _a.disabled,
|
|
4940
|
+
disabled = _c === void 0 ? false : _c,
|
|
4941
|
+
_d = _a.error,
|
|
4942
|
+
error = _d === void 0 ? false : _d,
|
|
4943
|
+
_e = _a.fullWidth,
|
|
4944
|
+
fullWidth = _e === void 0 ? true : _e,
|
|
4902
4945
|
hasDebounce = _a.hasDebounce,
|
|
4903
4946
|
helperText = _a.helperText,
|
|
4904
4947
|
endIcon = _a.endIcon,
|
|
4905
4948
|
id = _a.id,
|
|
4906
4949
|
inputRef = _a.inputRef,
|
|
4907
4950
|
label = _a.label,
|
|
4908
|
-
|
|
4909
|
-
multiline =
|
|
4951
|
+
_f = _a.multiline,
|
|
4952
|
+
multiline = _f === void 0 ? false : _f,
|
|
4910
4953
|
name = _a.name,
|
|
4911
4954
|
onBlur = _a.onBlur,
|
|
4912
4955
|
onChange = _a.onChange,
|
|
@@ -4914,25 +4957,25 @@
|
|
|
4914
4957
|
onKeyDown = _a.onKeyDown,
|
|
4915
4958
|
onMouseUp = _a.onMouseUp,
|
|
4916
4959
|
placeholder = _a.placeholder,
|
|
4917
|
-
|
|
4918
|
-
readOnly =
|
|
4919
|
-
|
|
4920
|
-
required =
|
|
4960
|
+
_g = _a.readOnly,
|
|
4961
|
+
readOnly = _g === void 0 ? false : _g,
|
|
4962
|
+
_h = _a.required,
|
|
4963
|
+
required = _h === void 0 ? false : _h,
|
|
4921
4964
|
rows = _a.rows,
|
|
4922
4965
|
rowsMax = _a.rowsMax,
|
|
4923
4966
|
startIcon = _a.startIcon,
|
|
4924
|
-
|
|
4925
|
-
size =
|
|
4926
|
-
|
|
4927
|
-
type =
|
|
4967
|
+
_j = _a.size,
|
|
4968
|
+
size = _j === void 0 ? 'small' : _j,
|
|
4969
|
+
_k = _a.type,
|
|
4970
|
+
type = _k === void 0 ? 'text' : _k,
|
|
4928
4971
|
value = _a.value,
|
|
4929
|
-
|
|
4930
|
-
warning =
|
|
4972
|
+
_l = _a.warning,
|
|
4973
|
+
warning = _l === void 0 ? false : _l;
|
|
4931
4974
|
var hasWarning = !error && warning ? warningClassName : ''; // This state is used only with debounce feature enabled
|
|
4932
4975
|
|
|
4933
|
-
var
|
|
4934
|
-
inputTextState =
|
|
4935
|
-
setInputTextState =
|
|
4976
|
+
var _m = React.useState(hasDebounce && getInitialState(value)),
|
|
4977
|
+
inputTextState = _m[0],
|
|
4978
|
+
setInputTextState = _m[1];
|
|
4936
4979
|
|
|
4937
4980
|
var renderIcon = function renderIcon(iconType) {
|
|
4938
4981
|
return /*#__PURE__*/React__default["default"].createElement(DotIcon, {
|
|
@@ -4989,7 +5032,7 @@
|
|
|
4989
5032
|
}, endAdornmentIcon)
|
|
4990
5033
|
},
|
|
4991
5034
|
"aria-label": name,
|
|
4992
|
-
autoComplete:
|
|
5035
|
+
autoComplete: autoComplete,
|
|
4993
5036
|
autoFocus: autoFocus,
|
|
4994
5037
|
classes: {
|
|
4995
5038
|
root: rootStyles
|
|
@@ -6086,6 +6129,7 @@
|
|
|
6086
6129
|
onChange = _a.onChange,
|
|
6087
6130
|
onEditStateChange = _a.onEditStateChange,
|
|
6088
6131
|
readOnly = _a.readOnly,
|
|
6132
|
+
tooltip = _a.tooltip,
|
|
6089
6133
|
_c = _a.typography,
|
|
6090
6134
|
typography = _c === void 0 ? 'body1' : _c,
|
|
6091
6135
|
_d = _a.value,
|
|
@@ -6267,10 +6311,7 @@
|
|
|
6267
6311
|
|
|
6268
6312
|
var renderViewMode = function renderViewMode() {
|
|
6269
6313
|
var viewModeClasses = useStylesWithRootClass(viewModeClassName, readOnly ? readOnlyClassName : '');
|
|
6270
|
-
|
|
6271
|
-
className: viewModeClasses,
|
|
6272
|
-
"data-testid": dataTestId && dataTestId + "-view-mode-wrapper"
|
|
6273
|
-
}, /*#__PURE__*/React__default["default"].createElement(DotTypography, {
|
|
6314
|
+
var viewModeChildren = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DotTypography, {
|
|
6274
6315
|
className: "dot-view-mode-typography",
|
|
6275
6316
|
"data-testid": dataTestId && dataTestId + "-view-mode-typography",
|
|
6276
6317
|
variant: typography
|
|
@@ -6279,6 +6320,14 @@
|
|
|
6279
6320
|
"data-testid": dataTestId && dataTestId + "-edit-icon",
|
|
6280
6321
|
iconId: "edit"
|
|
6281
6322
|
}));
|
|
6323
|
+
return tooltip ? /*#__PURE__*/React__default["default"].createElement(DotTooltip, {
|
|
6324
|
+
title: tooltip,
|
|
6325
|
+
className: viewModeClasses,
|
|
6326
|
+
"data-testid": dataTestId && dataTestId + "-view-mode-tooltip-wrapper"
|
|
6327
|
+
}, viewModeChildren) : /*#__PURE__*/React__default["default"].createElement("div", {
|
|
6328
|
+
className: viewModeClasses,
|
|
6329
|
+
"data-testid": dataTestId && dataTestId + "-view-mode-wrapper"
|
|
6330
|
+
}, viewModeChildren);
|
|
6282
6331
|
};
|
|
6283
6332
|
|
|
6284
6333
|
var renderEditMode = function renderEditMode() {
|
|
@@ -19,6 +19,8 @@ export interface InlineEditProps extends CommonProps {
|
|
|
19
19
|
onEditStateChange?: (editing: boolean) => void;
|
|
20
20
|
/** If true, component will behave like a regular text (editing functionality will be disabled). */
|
|
21
21
|
readOnly?: boolean;
|
|
22
|
+
/** Tooltip text displayed on hover */
|
|
23
|
+
tooltip?: string;
|
|
22
24
|
/** Typography variant to be used */
|
|
23
25
|
typography?: TypographyVariant;
|
|
24
26
|
/** default value that is displayed on load */
|
|
@@ -27,4 +29,4 @@ export interface InlineEditProps extends CommonProps {
|
|
|
27
29
|
/**
|
|
28
30
|
* @experimental This component is still in development
|
|
29
31
|
*/
|
|
30
|
-
export declare const DotInlineEdit: ({ ariaLabel, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, typography, value, }: InlineEditProps) => JSX.Element;
|
|
32
|
+
export declare const DotInlineEdit: ({ ariaLabel, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, tooltip, typography, value, }: InlineEditProps) => JSX.Element;
|
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
import { InputProps } from './InputFormFields.propTypes';
|
|
3
3
|
export declare const DELAY_MS = 300;
|
|
4
4
|
export interface InputTextProps extends InputProps {
|
|
5
|
+
/** The HTML autocomplete property to pass along to the input tag. Used for
|
|
6
|
+
controlling autofill behavior in forms. This property follows this HTML spec:
|
|
7
|
+
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
|
|
8
|
+
**/
|
|
9
|
+
autoComplete?: string;
|
|
5
10
|
/** If true, the input will use debounce functionality. **/
|
|
6
11
|
hasDebounce?: boolean;
|
|
7
12
|
/** if multiline it wil render multiple lines */
|
|
@@ -17,4 +22,4 @@ export interface InputTextProps extends InputProps {
|
|
|
17
22
|
/** value of the InputText */
|
|
18
23
|
value?: string;
|
|
19
24
|
}
|
|
20
|
-
export declare const DotInputText: ({ autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, fullWidth, hasDebounce, helperText, endIcon, id, inputRef, label, multiline, name, onBlur, onChange, onFocus, onKeyDown, onMouseUp, placeholder, readOnly, required, rows, rowsMax, startIcon, size, type, value, warning, }: InputTextProps) => JSX.Element;
|
|
25
|
+
export declare const DotInputText: ({ autoComplete, autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, fullWidth, hasDebounce, helperText, endIcon, id, inputRef, label, multiline, name, onBlur, onChange, onFocus, onKeyDown, onMouseUp, placeholder, readOnly, required, rows, rowsMax, startIcon, size, type, value, warning, }: InputTextProps) => JSX.Element;
|
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
import { ListItemProps, ListProps, NestedListProps } from './utils/models';
|
|
3
3
|
export declare const DotList: ({ ariaLabel, children, className, component, "data-testid": dataTestId, dense, disablePadding, items, menuPlacement, nestedDrawerLeftSpacing, nestedListType, width, }: ListProps) => JSX.Element;
|
|
4
4
|
export declare const DotListItem: ({ ariaLabel, className, component, "data-testid": dataTestId, divider, endIcon, endIconId, href, isOpened, onClick, onMenuLeave, index, items, menuPlacement, nestedDrawerLeftSpacing, nestedListType, primaryText, secondaryText, selected, startIcon, startIconId, target, text, title, tooltip, }: ListItemProps) => JSX.Element;
|
|
5
|
-
export declare const NestedList: ({ ariaLabel, anchorEl, items, menuPlacement, nestedDrawerLeftSpacing, onMenuLeave, open, parentItemIndex, type, }: NestedListProps) => JSX.Element;
|
|
5
|
+
export declare const NestedList: ({ ariaLabel, anchorEl, "data-testid": dataTestId, items, menuPlacement, nestedDrawerLeftSpacing, onMenuLeave, open, parentItemIndex, type, }: NestedListProps) => JSX.Element;
|