@digital-ai/dot-components 2.23.0 → 2.24.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.
Files changed (32) hide show
  1. package/index.esm.js +77 -0
  2. package/package.json +1 -1
  3. package/src/lib/components/CommonProps.d.ts +4 -2
  4. package/src/lib/components/accordion/Accordion.d.ts +1 -1
  5. package/src/lib/components/alert-banner/AlertBanner.d.ts +1 -1
  6. package/src/lib/components/app-switcher/AppSwitcher.styles.d.ts +1 -1
  7. package/src/lib/components/app-toolbar/AppToolbar.styles.d.ts +1 -1
  8. package/src/lib/components/auto-complete/AutoComplete.d.ts +1 -1
  9. package/src/lib/components/button/CopyButton.d.ts +1 -1
  10. package/src/lib/components/button/IconButton.d.ts +1 -1
  11. package/src/lib/components/button-toggle/ButtonToggle.d.ts +1 -1
  12. package/src/lib/components/checkbox/Checkbox.d.ts +1 -1
  13. package/src/lib/components/chip/Chip.d.ts +1 -1
  14. package/src/lib/components/confirmation-dialog/ConfirmationDialog.d.ts +1 -1
  15. package/src/lib/components/date-picker/DatePicker.d.ts +1 -1
  16. package/src/lib/components/dialog/Dialog.d.ts +1 -1
  17. package/src/lib/components/draggable-list/DraggableList.d.ts +1 -1
  18. package/src/lib/components/drawer/Drawer.d.ts +1 -1
  19. package/src/lib/components/file-upload/FileUpload.d.ts +1 -1
  20. package/src/lib/components/inline-edit/InlineEdit.d.ts +1 -1
  21. package/src/lib/components/input-form-fields/InputSelect.d.ts +1 -1
  22. package/src/lib/components/input-form-fields/InputText.d.ts +1 -1
  23. package/src/lib/components/link/Link.d.ts +1 -1
  24. package/src/lib/components/list/ListItem.d.ts +1 -1
  25. package/src/lib/components/list/NestedList.styles.d.ts +1 -1
  26. package/src/lib/components/menu/Menu.d.ts +2 -0
  27. package/src/lib/components/progress-button/ProgressButton.d.ts +1 -1
  28. package/src/lib/components/radio/RadioButton.d.ts +1 -1
  29. package/src/lib/components/split-button/SplitButton.d.ts +1 -1
  30. package/src/lib/components/switch/Switch.d.ts +1 -1
  31. package/src/lib/components/tabs/Tabs.d.ts +1 -1
  32. package/src/lib/components/time-picker/TimePicker.d.ts +1 -1
package/index.esm.js CHANGED
@@ -155,6 +155,7 @@ const DotAccordion = ({
155
155
  ariaLabel,
156
156
  children,
157
157
  className,
158
+ 'data-pendoid': dataPendoId = rootClassName$16,
158
159
  'data-testid': dataTestId = 'dot-accordion',
159
160
  disabled: _disabled = false,
160
161
  expanded,
@@ -178,6 +179,7 @@ const DotAccordion = ({
178
179
  return jsxs(StyledAccordion, {
179
180
  "aria-label": ariaLabel,
180
181
  className: rootClasses,
182
+ "data-pendoid": dataPendoId,
181
183
  "data-testid": dataTestId,
182
184
  disabled: _disabled,
183
185
  elevation: elevation,
@@ -1349,6 +1351,7 @@ const DotAlertBanner = ({
1349
1351
  ariaLabel,
1350
1352
  children,
1351
1353
  className,
1354
+ 'data-pendoid': dataPendoId = rootClassName$13,
1352
1355
  'data-testid': dataTestId,
1353
1356
  onClose,
1354
1357
  roundedCorners: _roundedCorners = true,
@@ -1375,6 +1378,7 @@ const DotAlertBanner = ({
1375
1378
  classes: {
1376
1379
  root: rootClasses
1377
1380
  },
1381
+ "data-pendoid": dataPendoId,
1378
1382
  "data-testid": dataTestId,
1379
1383
  iconMapping: AlertBannerIconMapping,
1380
1384
  onClose: onClose,
@@ -2154,6 +2158,7 @@ const DotButton = /*#__PURE__*/forwardRef(({
2154
2158
  autoFocus: _autoFocus = false,
2155
2159
  children,
2156
2160
  className,
2161
+ 'data-pendoid': dataPendoId = rootClassName$11,
2157
2162
  'data-testid': dataTestId,
2158
2163
  disabled: _disabled = false,
2159
2164
  disableRipple: _disableRipple = false,
@@ -2198,6 +2203,7 @@ const DotButton = /*#__PURE__*/forwardRef(({
2198
2203
  root: rootClasses
2199
2204
  },
2200
2205
  color: color,
2206
+ "data-pendoid": dataPendoId,
2201
2207
  "data-testid": dataTestId,
2202
2208
  disableRipple: _disableRipple,
2203
2209
  disabled: _disabled,
@@ -2229,6 +2235,7 @@ const DotLink = ({
2229
2235
  children,
2230
2236
  className,
2231
2237
  color: _color = 'primary',
2238
+ 'data-pendoid': dataPendoId = rootClassName$10,
2232
2239
  'data-testid': dataTestId,
2233
2240
  href,
2234
2241
  onClick,
@@ -2265,6 +2272,7 @@ const DotLink = ({
2265
2272
  root: rootClasses
2266
2273
  },
2267
2274
  color: _color === 'initial' ? 'inherit' : _color,
2275
+ "data-pendoid": dataPendoId,
2268
2276
  "data-testid": dataTestId,
2269
2277
  href: href,
2270
2278
  onClick: onClick,
@@ -2547,6 +2555,7 @@ const DotMenuList = /*#__PURE__*/forwardRef(({
2547
2555
  ariaLabel: itemAriaLabel,
2548
2556
  children,
2549
2557
  classes,
2558
+ 'data-pendoid': dataPendoId = 'dot-menu-list-item',
2550
2559
  disabled,
2551
2560
  divider,
2552
2561
  height,
@@ -2574,6 +2583,7 @@ const DotMenuList = /*#__PURE__*/forwardRef(({
2574
2583
  autoFocus: hasAutoFocus,
2575
2584
  "aria-label": itemAriaLabel,
2576
2585
  className: menuItemClasses,
2586
+ "data-pendoid": dataPendoId,
2577
2587
  disabled: disabled,
2578
2588
  disableRipple: hasSubmenu,
2579
2589
  divider: divider,
@@ -2740,6 +2750,7 @@ const DotIconButton = ({
2740
2750
  ariaRole: _ariaRole = 'button',
2741
2751
  className,
2742
2752
  color: _color = 'inherit',
2753
+ 'data-pendoid': dataPendoId = rootClassName$U,
2743
2754
  'data-testid': dataTestId,
2744
2755
  disabled: _disabled = false,
2745
2756
  disableRipple: _disableRipple = false,
@@ -2761,6 +2772,7 @@ const DotIconButton = ({
2761
2772
  root: rootClasses
2762
2773
  },
2763
2774
  color: _color,
2775
+ "data-pendoid": dataPendoId,
2764
2776
  "data-testid": dataTestId,
2765
2777
  disableRipple: _disableRipple,
2766
2778
  disabled: _disabled,
@@ -2863,6 +2875,7 @@ const DotDrawer = ({
2863
2875
  ariaRole: _ariaRole = 'dialog',
2864
2876
  className,
2865
2877
  children,
2878
+ 'data-pendoid': dataPendoId = rootClassName$W,
2866
2879
  'data-testid': dataTestId,
2867
2880
  drawerBodyProps,
2868
2881
  drawerFooterProps,
@@ -2888,6 +2901,7 @@ const DotDrawer = ({
2888
2901
  const rootClasses = useStylesWithRootClass(rootClassName$W, className);
2889
2902
  const backdropEnabled = _variant === 'temporary' && !(ModalProps === null || ModalProps === void 0 ? void 0 : ModalProps.hideBackdrop);
2890
2903
  const headerExists = !!drawerHeaderProps;
2904
+ const bodyPendoId = drawerBodyProps ? drawerBodyProps['data-pendoid'] : 'drawer-body';
2891
2905
  const bodyTestId = drawerBodyProps ? drawerBodyProps[`data-testid`] : 'drawer-body';
2892
2906
  return jsxs(StyledDrawer, {
2893
2907
  ModalProps: ModalProps,
@@ -2902,6 +2916,7 @@ const DotDrawer = ({
2902
2916
  root: rootClasses,
2903
2917
  paper: 'dot-drawer-paper'
2904
2918
  },
2919
+ "data-pendoid": dataPendoId,
2905
2920
  "data-testid": dataTestId,
2906
2921
  height: height,
2907
2922
  onClose: handleClose,
@@ -2911,12 +2926,14 @@ const DotDrawer = ({
2911
2926
  width: _width,
2912
2927
  children: [drawerHeaderProps && jsx(DotDrawerHeader, {
2913
2928
  className: drawerHeaderProps.className,
2929
+ "data-pendoid": drawerHeaderProps['data-pendoid'],
2914
2930
  "data-testid": drawerHeaderProps[`data-testid`],
2915
2931
  onClose: handleClose,
2916
2932
  variant: _variant,
2917
2933
  children: drawerHeaderProps.children
2918
2934
  }), drawerBodyProps && jsx(DotDrawerBody, {
2919
2935
  className: drawerBodyProps === null || drawerBodyProps === void 0 ? void 0 : drawerBodyProps.className,
2936
+ "data-pendoid": bodyPendoId,
2920
2937
  "data-testid": bodyTestId,
2921
2938
  headerExists: headerExists,
2922
2939
  onClose: handleClose,
@@ -2924,6 +2941,7 @@ const DotDrawer = ({
2924
2941
  children: drawerBodyProps.children
2925
2942
  }), !drawerBodyProps && children, drawerFooterProps && jsx(DotDrawerFooter, {
2926
2943
  className: drawerFooterProps.className,
2944
+ "data-pendoid": drawerFooterProps['data-pendoid'],
2927
2945
  "data-testid": drawerFooterProps[`data-testid`],
2928
2946
  children: drawerFooterProps.children
2929
2947
  })]
@@ -3059,6 +3077,7 @@ const DotListItem = ({
3059
3077
  ariaRole: _ariaRole = 'listitem',
3060
3078
  className,
3061
3079
  component: _component = 'li',
3080
+ 'data-pendoid': dataPendoId = listItemRootClass,
3062
3081
  'data-testid': dataTestId,
3063
3082
  divider: _divider = false,
3064
3083
  endIcon,
@@ -3137,6 +3156,7 @@ const DotListItem = ({
3137
3156
  root: rootClasses
3138
3157
  },
3139
3158
  component: _component,
3159
+ "data-pendoid": dataPendoId,
3140
3160
  "data-testid": dataTestId,
3141
3161
  divider: _divider,
3142
3162
  href: onClick ? null : href,
@@ -3299,6 +3319,7 @@ const DotCopyButton = ({
3299
3319
  color: _color = 'inherit',
3300
3320
  copiedTooltip: _copiedTooltip = 'Copied!',
3301
3321
  copyTooltip: _copyTooltip = 'Copy to clipboard',
3322
+ 'data-pendoid': dataPendoId = rootClassName$R,
3302
3323
  'data-testid': dataTestId = 'dot-copy-button',
3303
3324
  disabled: _disabled = false,
3304
3325
  disableRipple: _disableRipple = false,
@@ -3353,6 +3374,7 @@ const DotCopyButton = ({
3353
3374
  ariaRole: _ariaRole,
3354
3375
  className: className,
3355
3376
  color: _color,
3377
+ "data-pendoid": dataPendoId,
3356
3378
  "data-testid": `${dataTestId}-button`,
3357
3379
  disabled: _disabled || timedDisabled,
3358
3380
  disableRipple: _disableRipple,
@@ -3434,6 +3456,7 @@ const DotInputText = ({
3434
3456
  autoFocus,
3435
3457
  className,
3436
3458
  defaultValue,
3459
+ 'data-pendoid': dataPendoId = rootClassName$15,
3437
3460
  'data-testid': dataTestId,
3438
3461
  disabled: _disabled = false,
3439
3462
  error: _error = false,
@@ -3584,6 +3607,7 @@ const DotInputText = ({
3584
3607
  },
3585
3608
  inputProps: {
3586
3609
  className: inputClassName,
3610
+ 'data-pendoid': dataPendoId,
3587
3611
  'data-testid': dataTestId,
3588
3612
  max,
3589
3613
  maxLength: maxLength,
@@ -4744,6 +4768,7 @@ const DotChip = ({
4744
4768
  charactersLimit: _charactersLimit = DEFAULT_CHARACTERS_LIMIT,
4745
4769
  children,
4746
4770
  className,
4771
+ 'data-pendoid': dataPendoId = rootClassName$J,
4747
4772
  'data-testid': dataTestId,
4748
4773
  disabled: _disabled = false,
4749
4774
  error: _error = false,
@@ -4774,6 +4799,7 @@ const DotChip = ({
4774
4799
  },
4775
4800
  clickable: _isClickable,
4776
4801
  color: "default",
4802
+ "data-pendoid": dataPendoId,
4777
4803
  "data-testid": dataTestId,
4778
4804
  disabled: _disabled,
4779
4805
  icon: avatar ? null : startIcon,
@@ -4852,6 +4878,7 @@ const DotAutoComplete = ({
4852
4878
  ariaLabel,
4853
4879
  autoFocus,
4854
4880
  className,
4881
+ 'data-pendoid': dataPendoId = rootClassName$K,
4855
4882
  'data-testid': dataTestId,
4856
4883
  defaultValue,
4857
4884
  dense: _dense = true,
@@ -5073,6 +5100,7 @@ const DotAutoComplete = ({
5073
5100
  root: rootClasses,
5074
5101
  inputRoot: inputRootClasses
5075
5102
  },
5103
+ "data-pendoid": dataPendoId,
5076
5104
  "data-testid": dataTestId,
5077
5105
  defaultValue: _multiple && isString$1(defaultValue) ? [defaultValue] : defaultValue,
5078
5106
  disabled: _disabled,
@@ -5548,6 +5576,7 @@ const DotButtonToggle = ({
5548
5576
  buttonOptions,
5549
5577
  className,
5550
5578
  color,
5579
+ 'data-pendoid': dataPendoId = rootClassName$G,
5551
5580
  'data-testid': dataTestId = 'dot-toggle',
5552
5581
  disableFocusRipple: _disableFocusRipple = false,
5553
5582
  disableRipple: _disableRipple = false,
@@ -5601,6 +5630,7 @@ const DotButtonToggle = ({
5601
5630
  root: rootClasses
5602
5631
  },
5603
5632
  color: color,
5633
+ "data-pendoid": dataPendoId,
5604
5634
  "data-testid": dataTestId,
5605
5635
  exclusive: _exclusive,
5606
5636
  onChange: onChange,
@@ -5747,6 +5777,7 @@ function DotCheckbox({
5747
5777
  ariaLabelledby,
5748
5778
  checked,
5749
5779
  className,
5780
+ 'data-pendoid': dataPendoId = rootClassName$D,
5750
5781
  'data-testid': dataTestId,
5751
5782
  disabled,
5752
5783
  disableRipple,
@@ -5771,6 +5802,7 @@ function DotCheckbox({
5771
5802
  root: rootClassName$C
5772
5803
  },
5773
5804
  color: "primary",
5805
+ "data-pendoid": dataPendoId,
5774
5806
  "data-testid": dataTestId,
5775
5807
  disableRipple: disableRipple,
5776
5808
  disabled: disabled,
@@ -5970,6 +6002,7 @@ const DotDialog = ({
5970
6002
  cancelButtonProps,
5971
6003
  cancelButtonVisible: _cancelButtonVisible = true,
5972
6004
  className,
6005
+ 'data-pendoid': dataPendoId = rootClassName$y,
5973
6006
  'data-testid': dataTestId,
5974
6007
  children,
5975
6008
  closeIconVisible,
@@ -6014,6 +6047,7 @@ const DotDialog = ({
6014
6047
  classes: {
6015
6048
  root: rootClasses
6016
6049
  },
6050
+ "data-pendoid": dataPendoId,
6017
6051
  "data-testid": dataTestId,
6018
6052
  onClose: handleClickAway,
6019
6053
  open: isOpen,
@@ -6039,6 +6073,7 @@ const DotDialog = ({
6039
6073
  children: [_cancelButtonVisible && jsx(DotButton, {
6040
6074
  autoFocus: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.autoFocus,
6041
6075
  className: cancelClasses,
6076
+ "data-pendoid": cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps['data-pendoid'],
6042
6077
  "data-testid": cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps['data-testid'],
6043
6078
  disableRipple: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.disableRipple,
6044
6079
  disabled: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.disabled,
@@ -6051,6 +6086,7 @@ const DotDialog = ({
6051
6086
  }), _hasPrimaryAction && jsx(DotButton, {
6052
6087
  autoFocus: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.autoFocus,
6053
6088
  className: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.className,
6089
+ "data-pendoid": submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps['data-pendoid'],
6054
6090
  "data-testid": submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps['data-testid'],
6055
6091
  disableRipple: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.disableRipple,
6056
6092
  disabled: submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.disabled,
@@ -6069,6 +6105,7 @@ const DotConfirmationDialog = ({
6069
6105
  ariaLabel,
6070
6106
  cancelButtonProps,
6071
6107
  className,
6108
+ 'data-pendoid': dataPendoId = 'dot-confirmation-dialog',
6072
6109
  'data-testid': dataTestId,
6073
6110
  message: _message = '',
6074
6111
  onCancel,
@@ -6085,6 +6122,7 @@ const DotConfirmationDialog = ({
6085
6122
  ariaLabel: ariaLabel,
6086
6123
  cancelButtonProps: cancelButtonProps,
6087
6124
  className: rootClasses,
6125
+ "data-pendoid": dataPendoId,
6088
6126
  "data-testid": dataTestId,
6089
6127
  onCancel: onCancel,
6090
6128
  onSubmit: onSubmit,
@@ -6583,6 +6621,7 @@ const DotInputSelect = ({
6583
6621
  ariaLabel,
6584
6622
  autoFocus,
6585
6623
  className,
6624
+ 'data-pendoid': dataPendoId = rootSelectClassName,
6586
6625
  'data-testid': dataTestId,
6587
6626
  defaultValue,
6588
6627
  disabled: _disabled = false,
@@ -6661,6 +6700,7 @@ const DotInputSelect = ({
6661
6700
  },
6662
6701
  inputProps: {
6663
6702
  'aria-label': ariaLabel,
6703
+ 'data-pendoid': dataPendoId,
6664
6704
  'data-testid': dataTestId,
6665
6705
  className: inputStyles,
6666
6706
  readOnly: _readOnly
@@ -6702,6 +6742,7 @@ const DotProgressButton = ({
6702
6742
  ariaLabel,
6703
6743
  children,
6704
6744
  className,
6745
+ 'data-pendoid': dataPendoId = rootClassName$t,
6705
6746
  'data-testid': dataTestId,
6706
6747
  disabled: _disabled = false,
6707
6748
  disableRipple: _disableRipple = false,
@@ -6721,6 +6762,7 @@ const DotProgressButton = ({
6721
6762
  return jsxs(StyledProgressButton, {
6722
6763
  ariaLabel: ariaLabel || tooltip,
6723
6764
  className: rootClasses,
6765
+ "data-pendoid": dataPendoId,
6724
6766
  "data-testid": dataTestId,
6725
6767
  disableRipple: _disableRipple,
6726
6768
  disabled: isButtonDisabled,
@@ -6753,6 +6795,7 @@ function DotRadioButton({
6753
6795
  ariaLabel,
6754
6796
  checked,
6755
6797
  className,
6798
+ 'data-pendoid': dataPendoId = rootClassName$D,
6756
6799
  'data-testid': dataTestId,
6757
6800
  disabled,
6758
6801
  id,
@@ -6776,6 +6819,7 @@ function DotRadioButton({
6776
6819
  root: rootClassName$s
6777
6820
  },
6778
6821
  color: "primary",
6822
+ "data-pendoid": dataPendoId,
6779
6823
  "data-testid": dataTestId,
6780
6824
  disabled: disabled,
6781
6825
  id: id,
@@ -6896,6 +6940,7 @@ const DotSwitch = ({
6896
6940
  checked,
6897
6941
  className,
6898
6942
  color,
6943
+ 'data-pendoid': dataPendoId = rootClassName$r,
6899
6944
  'data-testid': dataTestId,
6900
6945
  disabled: _disabled = false,
6901
6946
  id,
@@ -6922,6 +6967,7 @@ const DotSwitch = ({
6922
6967
  root: rootClasses
6923
6968
  },
6924
6969
  color: "primary",
6970
+ "data-pendoid": dataPendoId,
6925
6971
  "data-testid": dataTestId,
6926
6972
  disabled: _disabled,
6927
6973
  id: id,
@@ -7601,6 +7647,7 @@ const DotInlineEdit = ({
7601
7647
  bindings,
7602
7648
  charactersLimit,
7603
7649
  className,
7650
+ 'data-pendoid': dataPendoId = rootClassName$q,
7604
7651
  'data-testid': dataTestId,
7605
7652
  fullWidth: _fullWidth = true,
7606
7653
  hideActionButtons,
@@ -7750,6 +7797,7 @@ const DotInlineEdit = ({
7750
7797
  error: false,
7751
7798
  fullWidth: _fullWidth,
7752
7799
  inputProps: {
7800
+ 'data-pendoid': `${dataPendoId}-input`,
7753
7801
  'data-testid': `${dataTestId}-input`,
7754
7802
  className: 'dot-input',
7755
7803
  maxLength: charactersLimit === null || charactersLimit === void 0 ? void 0 : charactersLimit.maxLength
@@ -7766,6 +7814,7 @@ const DotInlineEdit = ({
7766
7814
  }), !hideActionButtons && jsxs("div", {
7767
7815
  className: editActionsClassName,
7768
7816
  children: [jsx(DotButton, {
7817
+ "data-pendoid": dataPendoId && `${dataPendoId}-cancel`,
7769
7818
  "data-testid": dataTestId && `${dataTestId}-cancel`,
7770
7819
  onClick: handleCancel,
7771
7820
  size: "small",
@@ -7775,6 +7824,7 @@ const DotInlineEdit = ({
7775
7824
  iconId: "close"
7776
7825
  })
7777
7826
  }), jsx(DotButton, {
7827
+ "data-pendoid": dataPendoId && `${dataPendoId}-save`,
7778
7828
  "data-testid": dataTestId && `${dataTestId}-save`,
7779
7829
  disabled: isSaveDisabled,
7780
7830
  onClick: handleSave,
@@ -7792,6 +7842,7 @@ const DotInlineEdit = ({
7792
7842
  "aria-expanded": editing ? true : false,
7793
7843
  "aria-label": ariaLabel,
7794
7844
  className: rootClasses,
7845
+ "data-pendoid": dataPendoId,
7795
7846
  "data-testid": dataTestId,
7796
7847
  fullWidth: _fullWidth,
7797
7848
  onBlur: !readOnly ? handleBlur : undefined,
@@ -8145,6 +8196,7 @@ const DotSplitButton = ({
8145
8196
  autoFocus: _autoFocus = false,
8146
8197
  ariaLabel,
8147
8198
  className,
8199
+ 'data-pendoid': dataPendoId = rootClassName$k,
8148
8200
  'data-testid': dataTestId,
8149
8201
  defaultMainOptionKey,
8150
8202
  disabled: _disabled = false,
@@ -8185,6 +8237,7 @@ const DotSplitButton = ({
8185
8237
  children: [jsx(DotButton, {
8186
8238
  autoFocus: _autoFocus,
8187
8239
  className: "label-button",
8240
+ "data-pendoid": dataPendoId,
8188
8241
  "data-testid": dataTestId,
8189
8242
  disableRipple: _disableRipple,
8190
8243
  disabled: isMainOptionDisabled,
@@ -8196,6 +8249,7 @@ const DotSplitButton = ({
8196
8249
  children: mainOptionChildren
8197
8250
  }), jsx(DotButton, {
8198
8251
  className: "expand-button",
8252
+ "data-pendoid": dataPendoId && `${dataPendoId}-expand`,
8199
8253
  "data-testid": dataTestId && `${dataTestId}-expand`,
8200
8254
  disableRipple: _disableRipple,
8201
8255
  disabled: isMenuButtonDisabled,
@@ -9804,6 +9858,7 @@ const DotTabs = ({
9804
9858
  centered: _centered = false,
9805
9859
  className,
9806
9860
  color,
9861
+ 'data-pendoid': dataPendoId = rootClassName$8,
9807
9862
  'data-testid': dataTestId,
9808
9863
  initialValue: _initialValue = 0,
9809
9864
  onChange,
@@ -9839,6 +9894,7 @@ const DotTabs = ({
9839
9894
  });
9840
9895
  const tabElement = jsx(Tab, {
9841
9896
  "aria-label": tab.ariaLabel,
9897
+ "data-pendoid": tab['data-pendoid'],
9842
9898
  "data-testid": tab['data-testid'],
9843
9899
  disableRipple: true,
9844
9900
  disabled: tab.disabled,
@@ -9853,6 +9909,7 @@ const DotTabs = ({
9853
9909
  classes: {
9854
9910
  root: rootClasses
9855
9911
  },
9912
+ "data-pendoid": dataPendoId,
9856
9913
  "data-testid": dataTestId,
9857
9914
  indicatorColor: "primary",
9858
9915
  onChange: handleChange,
@@ -10051,6 +10108,7 @@ const DotFileUpload = ({
10051
10108
  },
10052
10109
  buttonOnly: _buttonOnly = false,
10053
10110
  className,
10111
+ 'data-pendoid': dataPendoId = rootClassName$7,
10054
10112
  'data-testid': dataTestId,
10055
10113
  disabled,
10056
10114
  hideFilesList,
@@ -10117,6 +10175,7 @@ const DotFileUpload = ({
10117
10175
  children: [jsxs(StyledFileUpload, Object.assign({}, getRootProps(), {
10118
10176
  "aria-label": ariaLabel,
10119
10177
  className: rootClasses,
10178
+ "data-pendoid": dataPendoId,
10120
10179
  "data-testid": dataTestId,
10121
10180
  children: [jsx("input", Object.assign({}, getInputProps())), renderDropzoneContent({
10122
10181
  buttonProps: _buttonProps,
@@ -10248,6 +10307,7 @@ const ListGridLayout = WidthProvider(GridLayout);
10248
10307
  const DotDraggableList = ({
10249
10308
  ariaLabel,
10250
10309
  className,
10310
+ 'data-pendoid': dataPendoId = rootClassName$4,
10251
10311
  'data-testid': dataTestId,
10252
10312
  disableDrag,
10253
10313
  draggableHandle,
@@ -10273,6 +10333,7 @@ const DotDraggableList = ({
10273
10333
  return jsx(StyledDraggableList, {
10274
10334
  "aria-label": ariaLabel,
10275
10335
  className: rootClasses,
10336
+ "data-pendoid": dataPendoId,
10276
10337
  "data-testid": dataTestId,
10277
10338
  draggableHandle: draggableHandle,
10278
10339
  width: listWidth,
@@ -10293,6 +10354,7 @@ const DotDraggableList = ({
10293
10354
  children
10294
10355
  }) => {
10295
10356
  return jsx(ListItem, {
10357
+ "data-pendoid": dataPendoId && `${dataPendoId}-item`,
10296
10358
  "data-testid": dataTestId && `${dataTestId}-item`,
10297
10359
  button: true,
10298
10360
  children: renderNodeOrTypography(children),
@@ -10396,6 +10458,7 @@ const DotDatePicker = ({
10396
10458
  autoFocus: _autoFocus = false,
10397
10459
  className,
10398
10460
  closeOnSelect: _closeOnSelect = true,
10461
+ 'data-pendoid': dataPendoId = rootClassName$2,
10399
10462
  'data-testid': dataTestId,
10400
10463
  defaultValue,
10401
10464
  disableOpenPicker,
@@ -10492,10 +10555,12 @@ const DotDatePicker = ({
10492
10555
  };
10493
10556
  return jsx(StyledDatePickerContainer, {
10494
10557
  className: containerClasses,
10558
+ "data-pendoid": dataPendoId,
10495
10559
  "data-testid": dataTestId,
10496
10560
  children: jsxs(LocalizationProvider, {
10497
10561
  dateAdapter: AdapterDayjs,
10498
10562
  children: [persistentLabel && jsx(DotInputLabel, {
10563
+ 'data-pendoid': 'date-picker-persistent-label',
10499
10564
  'data-testid': 'date-picker-persistent-label',
10500
10565
  disabled,
10501
10566
  error,
@@ -10532,6 +10597,7 @@ const DotDatePicker = ({
10532
10597
  iconId: "error-solid"
10533
10598
  }), jsx(DotIconButton, {
10534
10599
  ariaLabel: "Open date picker",
10600
+ "data-pendoid": "date-picker-open-btn",
10535
10601
  "data-testid": "date-picker-open-btn",
10536
10602
  iconId: "calendar",
10537
10603
  onClick: pickerButtonProps.onClick,
@@ -10549,6 +10615,7 @@ const DotDatePicker = ({
10549
10615
  focused: isInputReadOnly ? false : undefined,
10550
10616
  inputProps: {
10551
10617
  className: 'dot-input',
10618
+ 'data-pendoid': 'dot-date-picker-input',
10552
10619
  'data-testid': 'dot-date-picker-input',
10553
10620
  onBlur
10554
10621
  },
@@ -10669,6 +10736,7 @@ const DotTimePicker = ({
10669
10736
  ariaLabel,
10670
10737
  autoFocus: _autoFocus = false,
10671
10738
  className,
10739
+ 'data-pendoid': dataPendoId = rootClassName$1,
10672
10740
  'data-testid': dataTestId,
10673
10741
  defaultValue,
10674
10742
  disableOpenPicker: _disableOpenPicker = false,
@@ -10839,6 +10907,7 @@ const DotTimePicker = ({
10839
10907
  const isSelected = pickerTime ? selectedPickerHour === hour : false;
10840
10908
  return jsx(DotButton, {
10841
10909
  className: "dot-picker-button",
10910
+ "data-pendoid": dataPendoId && `${dataPendoId}-hour-button-${hour}`,
10842
10911
  "data-testid": dataTestId && `${dataTestId}-hour-button-${hour}`,
10843
10912
  onClick: () => handleHourClick(hour),
10844
10913
  onKeyDown: handleTimeKeydown(hoursRef, index),
@@ -10851,6 +10920,7 @@ const DotTimePicker = ({
10851
10920
  const isSelected = pickerTime ? pickerTime.minute() === minute : false;
10852
10921
  return jsx(DotButton, {
10853
10922
  className: "dot-picker-button",
10923
+ "data-pendoid": dataPendoId && `${dataPendoId}-minute-button-${minute}`,
10854
10924
  "data-testid": dataTestId && `${dataTestId}-minute-button-${minute}`,
10855
10925
  type: isSelected ? 'primary' : 'text',
10856
10926
  onClick: () => handleMinuteClick(minute),
@@ -10862,12 +10932,14 @@ const DotTimePicker = ({
10862
10932
  const renderTimePickerActionButtons = () => jsxs("div", {
10863
10933
  className: "dot-time-picker-action-buttons",
10864
10934
  children: [jsx(DotButton, {
10935
+ "data-pendoid": dataPendoId && `${dataPendoId}-cancel`,
10865
10936
  "data-testid": dataTestId && `${dataTestId}-cancel`,
10866
10937
  onClick: handleCancel,
10867
10938
  size: "small",
10868
10939
  type: "text",
10869
10940
  children: "Cancel"
10870
10941
  }), jsx(DotButton, {
10942
+ "data-pendoid": dataPendoId && `${dataPendoId}-set`,
10871
10943
  "data-testid": dataTestId && `${dataTestId}-set`,
10872
10944
  onClick: handleSet,
10873
10945
  size: "small",
@@ -10880,6 +10952,7 @@ const DotTimePicker = ({
10880
10952
  ref: daytimeRef,
10881
10953
  children: [jsx(DotButton, {
10882
10954
  className: "dot-picker-button",
10955
+ "data-pendoid": dataPendoId && `${dataPendoId}-am-button`,
10883
10956
  "data-testid": dataTestId && `${dataTestId}-am-button`,
10884
10957
  onClick: () => handleDaytimeSelection(Daytime.AM),
10885
10958
  onKeyDown: handleTimeKeydown(daytimeRef, 0),
@@ -10888,6 +10961,7 @@ const DotTimePicker = ({
10888
10961
  children: Daytime.AM
10889
10962
  }, Daytime.AM), jsx(DotButton, {
10890
10963
  className: "dot-picker-button",
10964
+ "data-pendoid": dataPendoId && `${dataPendoId}-pm-button`,
10891
10965
  "data-testid": dataTestId && `${dataTestId}-pm-button`,
10892
10966
  onClick: () => handleDaytimeSelection(Daytime.PM),
10893
10967
  onKeyDown: handleTimeKeydown(daytimeRef, 1),
@@ -10914,6 +10988,7 @@ const DotTimePicker = ({
10914
10988
  });
10915
10989
  return jsxs(StyledTimePickerContainer, {
10916
10990
  className: containerClasses,
10991
+ "data-pendoid": dataPendoId,
10917
10992
  "data-testid": dataTestId,
10918
10993
  onKeyDown: handleTimePickerKeyDown,
10919
10994
  children: [jsxs(LocalizationProvider, {
@@ -10948,6 +11023,7 @@ const DotTimePicker = ({
10948
11023
  iconId: "error-solid"
10949
11024
  }), !_disableOpenPicker && !isComponentReadOnly && !disabled && jsx(DotIconButton, {
10950
11025
  ariaLabel: "Open time picker",
11026
+ "data-pendoid": dataPendoId && `${dataPendoId}-open-btn`,
10951
11027
  "data-testid": dataTestId && `${dataTestId}-open-btn`,
10952
11028
  iconId: "pending-clock",
10953
11029
  onClick: _event => handleTimePickerButtonClick(),
@@ -10957,6 +11033,7 @@ const DotTimePicker = ({
10957
11033
  },
10958
11034
  inputProps: {
10959
11035
  className: 'dot-input',
11036
+ 'data-pendoid': dataPendoId && `${dataPendoId}-input`,
10960
11037
  'data-testid': dataTestId && `${dataTestId}-input`,
10961
11038
  onBlur
10962
11039
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@digital-ai/dot-components",
3
- "version": "2.23.0",
3
+ "version": "2.24.0",
4
4
  "private": false,
5
5
  "license": "SEE LICENSE IN <LICENSE.md>",
6
6
  "contributors": [
@@ -4,8 +4,10 @@ export interface CommonProps {
4
4
  ariaLabel?: string;
5
5
  /** The ARIA role attribute of the element **/
6
6
  ariaRole?: AriaRoles;
7
- /** classes to be attributed to the root of the component */
7
+ /** classes to be attributed to the root of the component **/
8
8
  className?: string;
9
- /** data attribute passed through for testing purposes ONLY */
9
+ /** data attribute passed through for pendo purposes ONLY **/
10
+ 'data-pendoid'?: string;
11
+ /** data attribute passed through for testing purposes ONLY **/
10
12
  'data-testid'?: string;
11
13
  }
@@ -25,4 +25,4 @@ export interface AccordionProps extends CommonProps {
25
25
  /** The text within the expanded Accordion */
26
26
  summary: ReactNode | string;
27
27
  }
28
- export declare const DotAccordion: ({ actions, ariaLabel, children, className, "data-testid": dataTestId, disabled, expanded, hasElevation, onChange, square, startIcon, summary, noWrap, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
28
+ export declare const DotAccordion: ({ actions, ariaLabel, children, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, expanded, hasElevation, onChange, square, startIcon, summary, noWrap, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
@@ -16,4 +16,4 @@ export interface AlertBannerProps extends CommonProps {
16
16
  /** when specified, will control the text that is used inside the alert banner */
17
17
  textVariant?: TypographyVariant;
18
18
  }
19
- export declare const DotAlertBanner: ({ action, ariaLabel, children, className, "data-testid": dataTestId, onClose, roundedCorners, severity, textVariant, }: AlertBannerProps) => import("react/jsx-runtime").JSX.Element;
19
+ export declare const DotAlertBanner: ({ action, ariaLabel, children, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, onClose, roundedCorners, severity, textVariant, }: AlertBannerProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,2 +1,2 @@
1
1
  export declare const rootClassName = "dot-app-switcher";
2
- export declare const StyledAppSwitcher: import("styled-components").StyledComponent<({ anchor, ariaLabel, ariaRole, className, children, "data-testid": dataTestId, drawerBodyProps, drawerFooterProps, drawerHeaderProps, height, ModalProps, onClose, open, PaperProps, variant, width, }: import("../drawer/Drawer").DrawerProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
2
+ export declare const StyledAppSwitcher: import("styled-components").StyledComponent<({ anchor, ariaLabel, ariaRole, className, children, "data-pendoid": dataPendoId, "data-testid": dataTestId, drawerBodyProps, drawerFooterProps, drawerHeaderProps, height, ModalProps, onClose, open, PaperProps, variant, width, }: import("../drawer/Drawer").DrawerProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
@@ -1,4 +1,4 @@
1
1
  export declare const rootClassName = "dot-app-toolbar";
2
2
  export declare const denseClassName = "dense";
3
- export declare const StyledMainMenu: import("styled-components").StyledComponent<({ anchor, ariaLabel, ariaRole, className, children, "data-testid": dataTestId, drawerBodyProps, drawerFooterProps, drawerHeaderProps, height, ModalProps, onClose, open, PaperProps, variant, width, }: import("../drawer/Drawer").DrawerProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
3
+ export declare const StyledMainMenu: import("styled-components").StyledComponent<({ anchor, ariaLabel, ariaRole, className, children, "data-pendoid": dataPendoId, "data-testid": dataTestId, drawerBodyProps, drawerFooterProps, drawerHeaderProps, height, ModalProps, onClose, open, PaperProps, variant, width, }: import("../drawer/Drawer").DrawerProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
4
4
  export declare const StyledAppToolbar: import("styled-components").StyledComponent<"header", any, {}, never>;
@@ -86,4 +86,4 @@ export interface AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOp
86
86
  /** If true, the label will be displayed in a warning state. */
87
87
  warning?: boolean;
88
88
  }
89
- export declare const DotAutoComplete: <T extends AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, inputId, inputRef, inputValue, isOptionEqualToValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, readOnly, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
89
+ export declare const DotAutoComplete: <T extends AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, inputId, inputRef, inputValue, isOptionEqualToValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, readOnly, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
@@ -11,4 +11,4 @@ export interface CopyButtonProps extends CommonIconButtonProps {
11
11
  /** The content which will be copied to the clipboard */
12
12
  value: string;
13
13
  }
14
- export declare const DotCopyButton: ({ ariaLabel, ariaRole, className, color, copiedTooltip, copyTooltip, "data-testid": dataTestId, disabled, disableRipple, iconId, iconSize, onClick, shape, showCopiedIcon, size, tooltip, value, }: CopyButtonProps) => import("react/jsx-runtime").JSX.Element;
14
+ export declare const DotCopyButton: ({ ariaLabel, ariaRole, className, color, copiedTooltip, copyTooltip, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, disableRipple, iconId, iconSize, onClick, shape, showCopiedIcon, size, tooltip, value, }: CopyButtonProps) => import("react/jsx-runtime").JSX.Element;
@@ -26,4 +26,4 @@ export interface IconButtonProps extends CommonIconButtonProps {
26
26
  /** The icon to display on the button */
27
27
  iconId: string;
28
28
  }
29
- export declare const DotIconButton: ({ ariaLabel, ariaRole, className, color, "data-testid": dataTestId, disabled, disableRipple, iconId, iconSize, onClick, tooltip, shape, size, }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
29
+ export declare const DotIconButton: ({ ariaLabel, ariaRole, className, color, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, disableRipple, iconId, iconSize, onClick, tooltip, shape, size, }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
@@ -21,4 +21,4 @@ export interface ButtonToggleProps extends CommonProps {
21
21
  /** The value to associate with the button when selected in a ToggleButtonGroup */
22
22
  value?: ButtonToggleValue;
23
23
  }
24
- export declare const DotButtonToggle: ({ ariaLabel, buttonOptions, className, color, "data-testid": dataTestId, disableFocusRipple, disableRipple, exclusive, onChange, orientation, size, value, }: ButtonToggleProps) => import("react/jsx-runtime").JSX.Element;
24
+ export declare const DotButtonToggle: ({ ariaLabel, buttonOptions, className, color, "data-pendoid": dataPendoId, "data-testid": dataTestId, disableFocusRipple, disableRipple, exclusive, onChange, orientation, size, value, }: ButtonToggleProps) => import("react/jsx-runtime").JSX.Element;
@@ -9,4 +9,4 @@ export interface CheckboxProps extends RadioButtonProps {
9
9
  /** if true the checkbox will display with intermediate */
10
10
  indeterminate?: boolean;
11
11
  }
12
- export declare function DotCheckbox({ ariaLabel, ariaLabelledby, checked, className, 'data-testid': dataTestId, disabled, disableRipple, id, indeterminate, inputRef, label, labelPlacement, name, onChange, required, size, value, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
12
+ export declare function DotCheckbox({ ariaLabel, ariaLabelledby, checked, className, 'data-pendoid': dataPendoId, 'data-testid': dataTestId, disabled, disableRipple, id, indeterminate, inputRef, label, labelPlacement, name, onChange, required, size, value, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
@@ -26,4 +26,4 @@ export interface ChipProps extends CommonProps {
26
26
  /** The icon to display on the chip */
27
27
  startIcon?: ReactElement;
28
28
  }
29
- export declare const DotChip: ({ ariaLabel, avatar, charactersLimit, children, className, "data-testid": dataTestId, disabled, error, isClickable, isDeletable, onClick, onDelete, size, startIcon, }: ChipProps) => import("react/jsx-runtime").JSX.Element;
29
+ export declare const DotChip: ({ ariaLabel, avatar, charactersLimit, children, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, error, isClickable, isDeletable, onClick, onDelete, size, startIcon, }: ChipProps) => import("react/jsx-runtime").JSX.Element;
@@ -17,4 +17,4 @@ export interface ConfirmationDialogProps extends CommonProps {
17
17
  /** The dialog title */
18
18
  title?: ReactNode;
19
19
  }
20
- export declare const DotConfirmationDialog: ({ ariaLabel, cancelButtonProps, className, "data-testid": dataTestId, message, onCancel, onSubmit, submitButtonProps, open, title, }: ConfirmationDialogProps) => import("react/jsx-runtime").JSX.Element;
20
+ export declare const DotConfirmationDialog: ({ ariaLabel, cancelButtonProps, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, message, onCancel, onSubmit, submitButtonProps, open, title, }: ConfirmationDialogProps) => import("react/jsx-runtime").JSX.Element;
@@ -80,4 +80,4 @@ export interface DatePickerProps extends CommonProps {
80
80
  /** The selected value. Used when the component is controlled. Date in ISO 8601 format, ie: YYYY-MM-DD */
81
81
  value?: string;
82
82
  }
83
- export declare const DotDatePicker: ({ ariaLabel, autoFocus, className, closeOnSelect, "data-testid": dataTestId, defaultValue, disableOpenPicker, disablePast, disablePortal, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, focusInputOnPopperOpened, format, fullWidth, helperText, inputId, inputName, label, locale, maxDate, minDate, onAccept, onBlur, onChange, onClose, onError, onKeyDown, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
83
+ export declare const DotDatePicker: ({ ariaLabel, autoFocus, className, closeOnSelect, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, disableOpenPicker, disablePast, disablePortal, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, focusInputOnPopperOpened, format, fullWidth, helperText, inputId, inputName, label, locale, maxDate, minDate, onAccept, onBlur, onChange, onClose, onError, onKeyDown, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
@@ -39,4 +39,4 @@ export interface DialogProps extends CommonProps {
39
39
  /** dialog heading */
40
40
  title: ReactNode;
41
41
  }
42
- export declare const DotDialog: ({ ariaLabel, cancelButtonProps, cancelButtonVisible, className, "data-testid": dataTestId, children, closeIconVisible, closeOnClickAway, closeOnSubmit, hasPrimaryAction, onCancel, onSubmit, open, submitButtonProps, title, }: DialogProps) => import("react/jsx-runtime").JSX.Element;
42
+ export declare const DotDialog: ({ ariaLabel, cancelButtonProps, cancelButtonVisible, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, children, closeIconVisible, closeOnClickAway, closeOnSubmit, hasPrimaryAction, onCancel, onSubmit, open, submitButtonProps, title, }: DialogProps) => import("react/jsx-runtime").JSX.Element;
@@ -20,4 +20,4 @@ export interface DraggableListProps extends CommonProps {
20
20
  /** Width of the draggable list, defaults to '100%' */
21
21
  width?: number | string;
22
22
  }
23
- export declare const DotDraggableList: ({ ariaLabel, className, "data-testid": dataTestId, disableDrag, draggableHandle, items, onChange, rowHeight, width, }: DraggableListProps) => import("react/jsx-runtime").JSX.Element;
23
+ export declare const DotDraggableList: ({ ariaLabel, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, disableDrag, draggableHandle, items, onChange, rowHeight, width, }: DraggableListProps) => import("react/jsx-runtime").JSX.Element;
@@ -42,4 +42,4 @@ export interface DrawerProps extends CommonProps {
42
42
  /** The width of the drawer when anchor is 'left' or 'right' */
43
43
  width?: string;
44
44
  }
45
- export declare const DotDrawer: ({ anchor, ariaLabel, ariaRole, className, children, "data-testid": dataTestId, drawerBodyProps, drawerFooterProps, drawerHeaderProps, height, ModalProps, onClose, open, PaperProps, variant, width, }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
45
+ export declare const DotDrawer: ({ anchor, ariaLabel, ariaRole, className, children, "data-pendoid": dataPendoId, "data-testid": dataTestId, drawerBodyProps, drawerFooterProps, drawerHeaderProps, height, ModalProps, onClose, open, PaperProps, variant, width, }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
@@ -33,5 +33,5 @@ export interface FileUploadProps extends CommonProps {
33
33
  /** Optional callback which gets triggered when the file (from the list) is clicked. */
34
34
  onFileClick?: (file: ListItemFile) => void;
35
35
  }
36
- export declare const DotFileUpload: ({ accept, ariaLabel, ariaRole, buttonProps, buttonOnly, className, "data-testid": dataTestId, disabled, hideFilesList, maxFiles, maxSize, onChange, onDragEnter, onFileClick, }: FileUploadProps) => import("react/jsx-runtime").JSX.Element;
36
+ export declare const DotFileUpload: ({ accept, ariaLabel, ariaRole, buttonProps, buttonOnly, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, hideFilesList, maxFiles, maxSize, onChange, onDragEnter, onFileClick, }: FileUploadProps) => import("react/jsx-runtime").JSX.Element;
37
37
  export {};
@@ -36,4 +36,4 @@ export interface InlineEditProps extends CommonProps {
36
36
  /**
37
37
  * @experimental This component is still in development
38
38
  */
39
- export declare const DotInlineEdit: ({ ariaLabel, ariaRole, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, placeholder, readOnly, selectTextOnEdit, startEditable, tabIndex, tooltip, typography, value, }: InlineEditProps) => import("react/jsx-runtime").JSX.Element;
39
+ export declare const DotInlineEdit: ({ ariaLabel, ariaRole, bindings, charactersLimit, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, placeholder, readOnly, selectTextOnEdit, startEditable, tabIndex, tooltip, typography, value, }: InlineEditProps) => import("react/jsx-runtime").JSX.Element;
@@ -12,4 +12,4 @@ export interface InputSelectProps extends InputProps {
12
12
  /** options of select dropdown */
13
13
  options: Array<OptionType>;
14
14
  }
15
- export declare const DotInputSelect: ({ ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disabled, endIcon, endText, error, fullWidth, helperText, id, inputRef, label, name, onBlur, onChange, onFocus, onKeyDown, options, persistentLabel, readOnly, required, shrink, size, startIcon, success, value, warning, }: InputSelectProps) => import("react/jsx-runtime").JSX.Element;
15
+ export declare const DotInputSelect: ({ ariaLabel, autoFocus, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, disabled, endIcon, endText, error, fullWidth, helperText, id, inputRef, label, name, onBlur, onChange, onFocus, onKeyDown, options, persistentLabel, readOnly, required, shrink, size, startIcon, success, value, warning, }: InputSelectProps) => import("react/jsx-runtime").JSX.Element;
@@ -36,4 +36,4 @@ export interface EndIconProps {
36
36
  success?: boolean;
37
37
  warning?: boolean;
38
38
  }
39
- export declare const DotInputText: ({ autoComplete, autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, helperText, endIcon, endText, id, inputRef, label, max, maxLength, maxRows, min, minLength, minRows, multiline, name, onBlur, onChange, onClear, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, shrink, startIcon, size, success, type, value, warning, }: InputTextProps) => import("react/jsx-runtime").JSX.Element;
39
+ export declare const DotInputText: ({ autoComplete, autoFocus, className, defaultValue, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, helperText, endIcon, endText, id, inputRef, label, max, maxLength, maxRows, min, minLength, minRows, multiline, name, onBlur, onChange, onClear, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, shrink, startIcon, size, success, type, value, warning, }: InputTextProps) => import("react/jsx-runtime").JSX.Element;
@@ -27,4 +27,4 @@ export interface LinkProps extends CommonProps {
27
27
  /** underline the link */
28
28
  underline?: LinkUnderline;
29
29
  }
30
- export declare const DotLink: ({ ariaLabel, ariaRole, children, className, color, "data-testid": dataTestId, href, onClick, onMouseEnter, onPointerDown, rel, tabIndex, target, tooltip, underline, }: LinkProps) => import("react/jsx-runtime").JSX.Element;
30
+ export declare const DotLink: ({ ariaLabel, ariaRole, children, className, color, "data-pendoid": dataPendoId, "data-testid": dataTestId, href, onClick, onMouseEnter, onPointerDown, rel, tabIndex, target, tooltip, underline, }: LinkProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import { ListItemProps } from './utils/models';
2
- export declare const DotListItem: ({ ariaLabel, ariaRole, className, component, "data-testid": dataTestId, divider, endIcon, href, isOpened, onClick, onMenuLeave, items, menuPlacement, nestedDrawerLeftSpacing, nestedListType, primaryText, secondaryText, selected, startIcon, target, text, tooltip, tooltipPlacement, }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
2
+ export declare const DotListItem: ({ ariaLabel, ariaRole, className, component, "data-pendoid": dataPendoId, "data-testid": dataTestId, divider, endIcon, href, isOpened, onClick, onMenuLeave, items, menuPlacement, nestedDrawerLeftSpacing, nestedListType, primaryText, secondaryText, selected, startIcon, target, text, tooltip, tooltipPlacement, }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
@@ -1 +1 @@
1
- export declare const StyledDotDrawer: import("styled-components").StyledComponent<({ anchor, ariaLabel, ariaRole, className, children, "data-testid": dataTestId, drawerBodyProps, drawerFooterProps, drawerHeaderProps, height, ModalProps, onClose, open, PaperProps, variant, width, }: import("../drawer/Drawer").DrawerProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
1
+ export declare const StyledDotDrawer: import("styled-components").StyledComponent<({ anchor, ariaLabel, ariaRole, className, children, "data-pendoid": dataPendoId, "data-testid": dataTestId, drawerBodyProps, drawerFooterProps, drawerHeaderProps, height, ModalProps, onClose, open, PaperProps, variant, width, }: import("../drawer/Drawer").DrawerProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
@@ -36,6 +36,8 @@ export interface MenuItemProps {
36
36
  children?: ReactNode;
37
37
  /** Space delimited CSS classes to be attributed to the menu item */
38
38
  classes?: string;
39
+ /** data attribute passed through for pendo purposes ONLY **/
40
+ 'data-pendoid'?: string;
39
41
  /** If true, the item will be displayed in a disabled state. */
40
42
  disabled?: boolean;
41
43
  /** If true, a 1px light border is added to the bottom of the menu item. */
@@ -5,4 +5,4 @@ export interface ProgressButtonProps extends ButtonProps {
5
5
  /** Is spinner displayed */
6
6
  isLoading?: boolean;
7
7
  }
8
- export declare const DotProgressButton: ({ ariaLabel, children, className, "data-testid": dataTestId, disabled, disableRipple, fullWidth, isLoading, isSubmit, onClick, size, startIcon, tooltip, type, }: ProgressButtonProps) => import("react/jsx-runtime").JSX.Element;
8
+ export declare const DotProgressButton: ({ ariaLabel, children, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, disableRipple, fullWidth, isLoading, isSubmit, onClick, size, startIcon, tooltip, type, }: ProgressButtonProps) => import("react/jsx-runtime").JSX.Element;
@@ -28,4 +28,4 @@ export interface RadioButtonProps extends RadioButtonBaseProps {
28
28
  /** A function that should be executed when the value of the radio buttom changes */
29
29
  onChange?: (event: ChangeEvent<HTMLInputElement>, value: string) => void;
30
30
  }
31
- export declare function DotRadioButton({ ariaLabel, checked, className, 'data-testid': dataTestId, disabled, id, inputRef, label, labelPlacement, name, onChange, required, size, value, }: RadioButtonProps): import("react/jsx-runtime").JSX.Element;
31
+ export declare function DotRadioButton({ ariaLabel, checked, className, 'data-pendoid': dataPendoId, 'data-testid': dataTestId, disabled, id, inputRef, label, labelPlacement, name, onChange, required, size, value, }: RadioButtonProps): import("react/jsx-runtime").JSX.Element;
@@ -12,4 +12,4 @@ export interface SplitButtonProps extends BaseButtonProps {
12
12
  /**The options within the button dropdown */
13
13
  options: Array<MenuItemProps>;
14
14
  }
15
- export declare const DotSplitButton: ({ autoFocus, ariaLabel, className, "data-testid": dataTestId, defaultMainOptionKey, disabled, disablePortal, disableRipple, fullWidth, isSubmit, onOptionClick, options, size, tooltip, type, }: SplitButtonProps) => import("react/jsx-runtime").JSX.Element;
15
+ export declare const DotSplitButton: ({ autoFocus, ariaLabel, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultMainOptionKey, disabled, disablePortal, disableRipple, fullWidth, isSubmit, onOptionClick, options, size, tooltip, type, }: SplitButtonProps) => import("react/jsx-runtime").JSX.Element;
@@ -23,4 +23,4 @@ export interface SwitchProps extends CommonProps {
23
23
  /** controls the size of the switch 'medium', 'small' */
24
24
  size?: SwitchSize;
25
25
  }
26
- export declare const DotSwitch: ({ ariaLabel, checked, className, color, "data-testid": dataTestId, disabled, id, inputRef, label, labelPlacement, onChange, size, }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
26
+ export declare const DotSwitch: ({ ariaLabel, checked, className, color, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, id, inputRef, label, labelPlacement, onChange, size, }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
@@ -28,4 +28,4 @@ export interface TabsProps extends CommonProps {
28
28
  /** Determines additional display behavior of the tabs */
29
29
  variant?: TabsVariant;
30
30
  }
31
- export declare const DotTabs: ({ centered, className, color, "data-testid": dataTestId, initialValue, onChange, scrollButtons, tabs, variant, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
31
+ export declare const DotTabs: ({ centered, className, color, "data-pendoid": dataPendoId, "data-testid": dataTestId, initialValue, onChange, scrollButtons, tabs, variant, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
@@ -60,4 +60,4 @@ export interface TimePickerProps extends CommonProps {
60
60
  export declare const DEFAULT_PICKER_TIME_FORMAT = "HH:mm";
61
61
  export declare const DEFAULT_TIME_FORMAT = "HH:mm";
62
62
  export declare const DEFAULT_TIME = "01:00";
63
- export declare const DotTimePicker: ({ ampm, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disableOpenPicker, disableClickAwayListener, disabled, error, format, fullWidth, helperText, hideActionButtons, inputId, inputName, label, onAccept, onBlur, onCancel, onChange, onClose, onKeyDown, onOpen, onPopperTimeChange, open, persistentLabel, readOnly, required, value, }: TimePickerProps) => import("react/jsx-runtime").JSX.Element;
63
+ export declare const DotTimePicker: ({ ampm, ariaLabel, autoFocus, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, disableOpenPicker, disableClickAwayListener, disabled, error, format, fullWidth, helperText, hideActionButtons, inputId, inputName, label, onAccept, onBlur, onCancel, onChange, onClose, onKeyDown, onOpen, onPopperTimeChange, open, persistentLabel, readOnly, required, value, }: TimePickerProps) => import("react/jsx-runtime").JSX.Element;