@digital-ai/dot-components 2.6.0 → 2.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGE_LOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # Changelog
2
2
 
3
+ ## [2.7.0](https://www.npmjs.com/package/@digital-ai/dot-components) (04/14/2023)
4
+
5
+ [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.6.1...2.7.0)
6
+
7
+ **Features:**
8
+
9
+ - S-91919: `DotDatePicker`, `DotTimePicker`: expose `onBlur` prop [\#1443](https://github.com/digital-ai/dot-components/pull/1443) ([dmiletic85](https://github.com/dmiletic85))
10
+ - S-91870 `DotButton`: expose `tabIndex` prop [\#1439](https://github.com/digital-ai/dot-components/pull/1439) ([dmiletic85](https://github.com/dmiletic85))
11
+
12
+ **Fixed bugs:**
13
+
14
+ - D-24793: `DotTimePicker` - set clock instead of calendar icon [\#1444](https://github.com/digital-ai/dot-components/pull/1444) ([dmiletic85](https://github.com/dmiletic85))
15
+
16
+ ## [2.6.1](https://www.npmjs.com/package/@digital-ai/dot-components) (04/06/2023)
17
+
18
+ [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.6.0...2.6.1)
19
+
20
+ **Fixed bugs:**
21
+
22
+ - D-24672: update icon alignment in sidebar [\#1436](https://github.com/digital-ai/dot-components/pull/1436) ([CWSites](https://github.com/CWSites))
23
+
3
24
  ## [2.6.0](https://www.npmjs.com/package/@digital-ai/dot-components) (04/05/2023)
4
25
 
5
26
  [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.5.5...2.6.0)
@@ -343,6 +364,7 @@
343
364
 
344
365
  **Fixed bugs:**
345
366
 
367
+ - S-86692: component cleanup [\#1238](https://github.com/digital-ai/dot-components/pull/1238) ([CWSites](https://github.com/CWSites))
346
368
  - S-84151: fix e2e tests for Release 2.0 [\#1146](https://github.com/digital-ai/dot-components/pull/1146) ([CWSites](https://github.com/CWSites))
347
369
 
348
370
  **Misc:**
@@ -373,12 +395,12 @@
373
395
 
374
396
  **Fixed bugs:**
375
397
 
376
- - S-86692: component cleanup [\#1238](https://github.com/digital-ai/dot-components/pull/1238) ([CWSites](https://github.com/CWSites))
377
398
  - D-20931: `DotAccordion` - display top border correctly when expanded [\#1232](https://github.com/digital-ai/dot-components/pull/1232) ([CWSites](https://github.com/CWSites))
378
399
  - D-22087: `DotRadioGroup` / `DotCheckboxGroup` helper texts do not follow the same styles as other helper texts [\#1225](https://github.com/digital-ai/dot-components/pull/1225) ([dmiletic85](https://github.com/dmiletic85))
379
400
 
380
401
  **Misc:**
381
402
 
403
+ - 28 jully 2022 icon update [\#1231](https://github.com/digital-ai/dot-components/pull/1231) ([BojanKocijan](https://github.com/BojanKocijan))
382
404
  - Issue \#1196: `eslint` and `tsconfig` changes [\#1221](https://github.com/digital-ai/dot-components/pull/1221) ([CWSites](https://github.com/CWSites))
383
405
 
384
406
  ## [1.20.0](https://www.npmjs.com/package/@digital-ai/dot-components) (07/23/2022)
@@ -397,11 +419,6 @@
397
419
 
398
420
  - D-20378: update input margin to account for helper text [\#1212](https://github.com/digital-ai/dot-components/pull/1212) ([CWSites](https://github.com/CWSites))
399
421
  - D-21918: Update `DotAlertBanner` to match Figma [\#1208](https://github.com/digital-ai/dot-components/pull/1208) ([CWSites](https://github.com/CWSites))
400
- - D-21972: Adds props for custom tooltip position in ListItemProps [\#1207](https://github.com/digital-ai/dot-components/pull/1207) ([s-zimm](https://github.com/s-zimm))
401
-
402
- **Misc:**
403
-
404
- - 28 jully 2022 icon update [\#1231](https://github.com/digital-ai/dot-components/pull/1231) ([BojanKocijan](https://github.com/BojanKocijan))
405
422
 
406
423
  ## [1.19.1](https://www.npmjs.com/package/@digital-ai/dot-components) (07/18/2022)
407
424
 
@@ -413,6 +430,7 @@
413
430
  - D-20693: `DotSidebar` updates to match Figma [\#1214](https://github.com/digital-ai/dot-components/pull/1214) ([CWSites](https://github.com/CWSites))
414
431
  - D-20329: add href to application logo [\#1213](https://github.com/digital-ai/dot-components/pull/1213) ([CWSites](https://github.com/CWSites))
415
432
  - D-20404: update table border color [\#1211](https://github.com/digital-ai/dot-components/pull/1211) ([CWSites](https://github.com/CWSites))
433
+ - D-21972: Adds props for custom tooltip position in ListItemProps [\#1207](https://github.com/digital-ai/dot-components/pull/1207) ([s-zimm](https://github.com/s-zimm))
416
434
 
417
435
  ## [1.19.0](https://www.npmjs.com/package/@digital-ai/dot-components) (07/11/2022)
418
436
 
@@ -438,6 +456,7 @@
438
456
  **Fixed bugs:**
439
457
 
440
458
  - D-21609: `DotAutocomplete` allow `null` as value [\#1195](https://github.com/digital-ai/dot-components/pull/1195) ([dmiletic85](https://github.com/dmiletic85))
459
+ - D-21606 `DotAutcomplete` loading spinner is in wrong position when `freesolo` is not enabled [\#1194](https://github.com/digital-ai/dot-components/pull/1194) ([angel-git](https://github.com/angel-git))
441
460
  - D-21577: `DraggableList` improvements and bug fixes [\#1190](https://github.com/digital-ai/dot-components/pull/1190) ([dmiletic85](https://github.com/dmiletic85))
442
461
 
443
462
  **Misc:**
@@ -968,6 +987,7 @@
968
987
 
969
988
  - Patch release [\#780](https://github.com/digital-ai/dot-components/pull/780) ([TheKeithStewart](https://github.com/TheKeithStewart))
970
989
  - S-79985: temporarily remove react-jsonschema-form from library [\#776](https://github.com/digital-ai/dot-components/pull/776) ([TheKeithStewart](https://github.com/TheKeithStewart))
990
+ - Add submitButtonProps prop to DotJsonSchemaForm component [\#775](https://github.com/digital-ai/dot-components/pull/775) ([selsemore](https://github.com/selsemore))
971
991
  - S-76893: Webpack 4 - update peer dependencies [\#768](https://github.com/digital-ai/dot-components/pull/768) ([CWSites](https://github.com/CWSites))
972
992
  - S-79957: improve husky [\#765](https://github.com/digital-ai/dot-components/pull/765) ([CWSites](https://github.com/CWSites))
973
993
 
@@ -987,7 +1007,6 @@
987
1007
 
988
1008
  **Misc:**
989
1009
 
990
- - Add submitButtonProps prop to DotJsonSchemaForm component [\#775](https://github.com/digital-ai/dot-components/pull/775) ([selsemore](https://github.com/selsemore))
991
1010
  - Next \[PATCH\] Release [\#762](https://github.com/digital-ai/dot-components/pull/762) ([CWSites](https://github.com/CWSites))
992
1011
  - S-79458: `Sidebar` apply agility specific updates to theme only [\#755](https://github.com/digital-ai/dot-components/pull/755) ([CWSites](https://github.com/CWSites))
993
1012
 
package/index.esm.js CHANGED
@@ -1730,6 +1730,7 @@ const DotButton = /*#__PURE__*/forwardRef(({
1730
1730
  onClick,
1731
1731
  size: _size = 'medium',
1732
1732
  startIcon,
1733
+ tabIndex,
1733
1734
  tooltip,
1734
1735
  type: _type = 'primary'
1735
1736
  }, ref) => {
@@ -1773,6 +1774,7 @@ const DotButton = /*#__PURE__*/forwardRef(({
1773
1774
  ref: ref,
1774
1775
  size: _size,
1775
1776
  startIcon: startIcon,
1777
+ tabIndex: tabIndex,
1776
1778
  type: _isSubmit ? 'submit' : 'button',
1777
1779
  variant: variant
1778
1780
  }, {
@@ -3729,7 +3731,7 @@ const StyledSidebar = styled.aside.withConfig({
3729
3731
  componentId: "l3atb4-0"
3730
3732
  })(["", ""], ({
3731
3733
  theme
3732
- }) => css(["&.", "{align-items:stretch;background:", ";border-width:0 1px;border-style:solid;border-color:", ";box-sizing:border-box;color:", ";display:flex;height:100%;flex-direction:column;justify-content:space-between;letter-spacing:0.01em;-o-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;-moz-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;-webkit-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;header{align-items:center;border-bottom:1px solid;border-bottom-color:", ";display:flex;height:40px;flex-shrink:0;overflow:hidden;padding:", ";white-space:nowrap;&.app-logo{box-sizing:border-box;.dot-app-logo{svg,img{max-width:100%;}}}.dot-avatar{margin-right:", ";}}.go-back{align-items:center;border-bottom:1px solid;border-bottom-color:", ";display:flex;.go-back-button{margin:", ";background-color:", ";&:hover{background-color:", ";}&:focus-visible{box-shadow:0 0 0 2px ", ",0 0 0 4px ", ";}}.back-button-text{margin-right:", ";}}hr.MuiDivider-root{border-color:", ";margin:", ";}.MuiListSubheader-root{border-bottom:1px solid ", ";margin:", ";.dot-typography{display:block;margin:0;padding:", ";}}ul.side-nav{background:transparent;flex-grow:2;overflow-x:hidden;overflow-y:auto;padding:0;width:auto;.dot-nested-list{background:transparent;}.", "{.dot-drawer-paper{padding:", ";overflow-y:auto;border-right:1px solid ", ";box-shadow:0 0 5px 0 rgba(0,0,0,0.15);}.MuiTypography-root.MuiTypography-subtitle2{line-height:40px;}.", "{margin:0;padding-left:", ";}}.dot-list-item{height:44px;padding:0;&.Mui-focusVisible{box-shadow:inset 0 0 0 2px ", ";border:2px solid ", ";}&.open{border:'none';}.dot-list-item-link .dot-icon{margin-right:", ";}.dot-icon{border-radius:50%;height:40px;margin:", ";width:40px;}.dot-typography{white-space:nowrap;}}}.toggle-nav{border-top:1px solid;border-top-color:", ";padding:", ";text-align:right;.dot-icon{transform:rotate(0deg);-o-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;-moz-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;-webkit-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;}}.powered-by{border-top:1px solid;border-top-color:", ";color:", ";display:flex;flex-direction:column;flex-shrink:0;font-size:12px;overflow:hidden;padding:", ";p.desc{white-space:nowrap;}.company-name{margin-top:", ";}.d-icon{display:none;}}&.collapsed{overflow:hidden;width:58px;-o-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;-moz-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;-webkit-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;li.MuiListSubheader-root .dot-typography,.go-back .MuiTypography-root,.MuiListItem-divider .dot-list-item-link,.child,.powered-by .company-name,.powered-by p.desc{display:none;}.dot-nested-drawer li.MuiListSubheader-root .dot-typography,.powered-by .d-icon{display:block;}header .dot-app-logo{text-align:center;}ul.side-nav{width:56px;.dot-list-item{margin-left:0;}.toggle-nav{align-self:center;}}.powered-by{align-items:center;}}}"], rootClassName$M, theme.palette.layer.n50, theme.palette.layer.n100, theme.palette.grey[700], theme.palette.layer.n100, theme.spacing(1, 2), theme.spacing(1), theme.palette.layer.n100, theme.spacing(0.5, 1), theme.palette.layer.n100, theme.palette.layer.n200, theme.palette.layer.n0, theme.palette.layer.n900, theme.spacing(2.5), theme.palette.layer.n100, theme.spacing(1, 0), theme.palette.layer.n100, theme.spacing(0, 0, 1), theme.spacing(1.5, 2), nestedDrawerClassName, theme.spacing(2), theme.palette.layer.n100, listItemRootClass, theme.spacing(2), theme.palette.layer.n0, theme.palette.layer.n900, theme.spacing(1), theme.spacing(0, 1), theme.palette.layer.n100, theme.spacing(1), theme.palette.layer.n100, theme.palette.grey[400], theme.spacing(1), theme.spacing(1)));
3734
+ }) => css(["&.", "{align-items:stretch;background:", ";border-width:0 1px;border-style:solid;border-color:", ";box-sizing:border-box;color:", ";display:flex;height:100%;flex-direction:column;justify-content:space-between;letter-spacing:0.01em;-o-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;-moz-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;-webkit-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;header{align-items:center;border-bottom:1px solid;border-bottom-color:", ";display:flex;height:40px;flex-shrink:0;overflow:hidden;padding:", ";white-space:nowrap;&.app-logo{box-sizing:border-box;.dot-app-logo{svg,img{max-width:100%;}}}.dot-avatar{margin-right:", ";}}.go-back{align-items:center;border-bottom:1px solid;border-bottom-color:", ";display:flex;.go-back-button{margin:", ";background-color:", ";&:hover{background-color:", ";}&:focus-visible{box-shadow:0 0 0 2px ", ",0 0 0 4px ", ";}}.back-button-text{margin-right:", ";}}hr.MuiDivider-root{border-color:", ";margin:", ";}.MuiListSubheader-root{border-bottom:1px solid ", ";margin:", ";.dot-typography{display:block;margin:0;padding:", ";}}ul.side-nav{background:transparent;flex-grow:2;overflow-x:hidden;overflow-y:auto;padding:0;width:auto;.dot-nested-list{background:transparent;}.", "{.dot-drawer-paper{padding:", ";overflow-y:auto;border-right:1px solid ", ";box-shadow:0 0 5px 0 rgba(0,0,0,0.15);}.MuiTypography-root.MuiTypography-subtitle2{line-height:40px;}.", "{margin:0;padding-left:", ";}}.dot-list-item{height:44px;padding:0;&.Mui-focusVisible{box-shadow:inset 0 0 0 2px ", ";border:2px solid ", ";}&.open{border:'none';}.dot-list-item-link .dot-icon{margin-right:", ";}.dot-icon{border-radius:50%;display:flex;height:40px;margin:", ";width:40px;}.dot-typography{white-space:nowrap;}}}.toggle-nav{border-top:1px solid;border-top-color:", ";padding:", ";text-align:right;.dot-icon{transform:rotate(0deg);-o-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;-moz-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;-webkit-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;}}.powered-by{border-top:1px solid;border-top-color:", ";color:", ";display:flex;flex-direction:column;flex-shrink:0;font-size:12px;overflow:hidden;padding:", ";p.desc{white-space:nowrap;}.company-name{margin-top:", ";}.d-icon{display:none;}}&.collapsed{overflow:hidden;width:58px;-o-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;-moz-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;-webkit-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;li.MuiListSubheader-root .dot-typography,.go-back .MuiTypography-root,.MuiListItem-divider .dot-list-item-link,.child,.powered-by .company-name,.powered-by p.desc{display:none;}.dot-nested-drawer li.MuiListSubheader-root .dot-typography,.powered-by .d-icon{display:block;}header .dot-app-logo{text-align:center;}ul.side-nav{width:56px;.dot-list-item{margin-left:0;}.toggle-nav{align-self:center;}}.powered-by{align-items:center;}}}"], rootClassName$M, theme.palette.layer.n50, theme.palette.layer.n100, theme.palette.grey[700], theme.palette.layer.n100, theme.spacing(1, 2), theme.spacing(1), theme.palette.layer.n100, theme.spacing(0.5, 1), theme.palette.layer.n100, theme.palette.layer.n200, theme.palette.layer.n0, theme.palette.layer.n900, theme.spacing(2.5), theme.palette.layer.n100, theme.spacing(1, 0), theme.palette.layer.n100, theme.spacing(0, 0, 1), theme.spacing(1.5, 2), nestedDrawerClassName, theme.spacing(2), theme.palette.layer.n100, listItemRootClass, theme.spacing(2), theme.palette.layer.n0, theme.palette.layer.n900, theme.spacing(1), theme.spacing(0, 1), theme.palette.layer.n100, theme.spacing(1), theme.palette.layer.n100, theme.palette.grey[400], theme.spacing(1), theme.spacing(1)));
3733
3735
 
3734
3736
  const rootClassName$L = 'dot-truncate-with-tooltip';
3735
3737
  const StyledTruncateWithTooltip = styled(Tooltip).withConfig({
@@ -9492,6 +9494,7 @@ const DotDatePicker = ({
9492
9494
  label,
9493
9495
  locale,
9494
9496
  onAccept,
9497
+ onBlur,
9495
9498
  onChange,
9496
9499
  onClose,
9497
9500
  onError,
@@ -9587,7 +9590,8 @@ const DotDatePicker = ({
9587
9590
  focused: _readOnly ? false : undefined,
9588
9591
  inputProps: {
9589
9592
  className: 'dot-input',
9590
- 'data-testid': 'dot-date-picker-input'
9593
+ 'data-testid': 'dot-date-picker-input',
9594
+ onBlur
9591
9595
  },
9592
9596
  fullWidth: _fullWidth,
9593
9597
  name: inputName
@@ -9701,6 +9705,8 @@ const DotTimePicker = ({
9701
9705
  inputId,
9702
9706
  inputName,
9703
9707
  label,
9708
+ onAccept,
9709
+ onBlur,
9704
9710
  onChange,
9705
9711
  onClose,
9706
9712
  onOpen,
@@ -9780,6 +9786,7 @@ const DotTimePicker = ({
9780
9786
  onChange === null || onChange === void 0 ? void 0 : onChange(pickerTime.format(timeFormat), {
9781
9787
  validationError: null
9782
9788
  });
9789
+ onAccept === null || onAccept === void 0 ? void 0 : onAccept(pickerTime.format(timeFormat));
9783
9790
  };
9784
9791
  const scrollToSelectedTime = () => {
9785
9792
  if (!(hoursRef === null || hoursRef === void 0 ? void 0 : hoursRef.current) || !(minutesRef === null || minutesRef === void 0 ? void 0 : minutesRef.current)) return;
@@ -9835,7 +9842,7 @@ const DotTimePicker = ({
9835
9842
  iconId: "error-solid"
9836
9843
  }, void 0), !_disableOpenPicker && !_readOnly && !disabled && jsx(DotIconButton, {
9837
9844
  "data-testid": dataTestId && `${dataTestId}-open-btn`,
9838
- iconId: "calendar",
9845
+ iconId: "pending-clock",
9839
9846
  onClick: _event => handleTimePickerButtonClick(),
9840
9847
  size: "small"
9841
9848
  }, void 0)]
@@ -9843,7 +9850,8 @@ const DotTimePicker = ({
9843
9850
  },
9844
9851
  inputProps: {
9845
9852
  className: 'dot-input',
9846
- 'data-testid': dataTestId && `${dataTestId}-input`
9853
+ 'data-testid': dataTestId && `${dataTestId}-input`,
9854
+ onBlur
9847
9855
  },
9848
9856
  fullWidth: _fullWidth,
9849
9857
  name: inputName
package/index.umd.js CHANGED
@@ -1957,6 +1957,7 @@
1957
1957
  _g = _a.size,
1958
1958
  size = _g === void 0 ? 'medium' : _g,
1959
1959
  startIcon = _a.startIcon,
1960
+ tabIndex = _a.tabIndex,
1960
1961
  tooltip = _a.tooltip,
1961
1962
  _h = _a.type,
1962
1963
  type = _h === void 0 ? 'primary' : _h;
@@ -2002,6 +2003,7 @@
2002
2003
  ref: ref,
2003
2004
  size: size,
2004
2005
  startIcon: startIcon,
2006
+ tabIndex: tabIndex,
2005
2007
  type: isSubmit ? 'submit' : 'button',
2006
2008
  variant: variant
2007
2009
  }, {
@@ -4102,7 +4104,7 @@
4102
4104
  componentId: "l3atb4-0"
4103
4105
  })(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
4104
4106
  var theme = _a.theme;
4105
- return styled.css(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n &.", " {\n align-items: stretch;\n background: ", ";\n border-width: 0 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n height: 100%;\n flex-direction: column;\n justify-content: space-between;\n letter-spacing: 0.01em;\n -o-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -moz-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -webkit-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n header {\n align-items: center;\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n display: flex;\n height: 40px;\n flex-shrink: 0;\n overflow: hidden;\n padding: ", ";\n white-space: nowrap;\n\n &.app-logo {\n box-sizing: border-box;\n\n .dot-app-logo {\n svg,\n img {\n max-width: 100%;\n }\n }\n }\n\n .dot-avatar {\n margin-right: ", ";\n }\n }\n\n .go-back {\n align-items: center;\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n display: flex;\n\n .go-back-button {\n margin: ", ";\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 2px ", ",\n 0 0 0 4px ", ";\n }\n }\n\n .back-button-text {\n margin-right: ", ";\n }\n }\n\n hr.MuiDivider-root {\n border-color: ", ";\n margin: ", ";\n }\n\n .MuiListSubheader-root {\n border-bottom: 1px solid ", ";\n margin: ", ";\n\n .dot-typography {\n display: block;\n margin: 0;\n padding: ", ";\n }\n }\n\n ul.side-nav {\n background: transparent;\n flex-grow: 2;\n overflow-x: hidden;\n overflow-y: auto;\n padding: 0;\n width: auto;\n\n .dot-nested-list {\n background: transparent;\n }\n\n .", " {\n .dot-drawer-paper {\n padding: ", ";\n overflow-y: auto;\n border-right: 1px solid ", ";\n box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);\n }\n\n .MuiTypography-root.MuiTypography-subtitle2 {\n line-height: 40px;\n }\n\n .", " {\n margin: 0;\n padding-left: ", ";\n }\n }\n\n .dot-list-item {\n height: 44px;\n padding: 0;\n\n &.Mui-focusVisible {\n box-shadow: inset 0 0 0 2px ", ";\n border: 2px solid ", ";\n }\n\n &.open {\n border: 'none';\n }\n\n .dot-list-item-link .dot-icon {\n margin-right: ", ";\n }\n\n .dot-icon {\n border-radius: 50%;\n height: 40px;\n margin: ", ";\n width: 40px;\n }\n\n .dot-typography {\n white-space: nowrap;\n }\n }\n }\n\n .toggle-nav {\n border-top: 1px solid;\n border-top-color: ", ";\n padding: ", ";\n text-align: right;\n\n .dot-icon {\n transform: rotate(0deg);\n -o-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n -moz-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n -webkit-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n }\n }\n\n .powered-by {\n border-top: 1px solid;\n border-top-color: ", ";\n color: ", ";\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n font-size: 12px;\n overflow: hidden;\n padding: ", ";\n\n p.desc {\n white-space: nowrap;\n }\n\n .company-name {\n margin-top: ", ";\n }\n\n .d-icon {\n display: none;\n }\n }\n\n &.collapsed {\n overflow: hidden;\n width: 58px;\n -o-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -moz-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -webkit-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n li.MuiListSubheader-root .dot-typography,\n .go-back .MuiTypography-root,\n .MuiListItem-divider .dot-list-item-link,\n .child,\n .powered-by .company-name,\n .powered-by p.desc {\n display: none;\n }\n\n .dot-nested-drawer li.MuiListSubheader-root .dot-typography,\n .powered-by .d-icon {\n display: block;\n }\n\n header .dot-app-logo {\n text-align: center;\n }\n\n ul.side-nav {\n width: 56px;\n .dot-list-item {\n margin-left: 0;\n }\n\n .toggle-nav {\n align-self: center;\n }\n }\n\n .powered-by {\n align-items: center;\n }\n }\n }\n "], ["\n &.", " {\n align-items: stretch;\n background: ", ";\n border-width: 0 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n height: 100%;\n flex-direction: column;\n justify-content: space-between;\n letter-spacing: 0.01em;\n -o-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -moz-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -webkit-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n header {\n align-items: center;\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n display: flex;\n height: 40px;\n flex-shrink: 0;\n overflow: hidden;\n padding: ", ";\n white-space: nowrap;\n\n &.app-logo {\n box-sizing: border-box;\n\n .dot-app-logo {\n svg,\n img {\n max-width: 100%;\n }\n }\n }\n\n .dot-avatar {\n margin-right: ", ";\n }\n }\n\n .go-back {\n align-items: center;\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n display: flex;\n\n .go-back-button {\n margin: ", ";\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 2px ", ",\n 0 0 0 4px ", ";\n }\n }\n\n .back-button-text {\n margin-right: ", ";\n }\n }\n\n hr.MuiDivider-root {\n border-color: ", ";\n margin: ", ";\n }\n\n .MuiListSubheader-root {\n border-bottom: 1px solid ", ";\n margin: ", ";\n\n .dot-typography {\n display: block;\n margin: 0;\n padding: ", ";\n }\n }\n\n ul.side-nav {\n background: transparent;\n flex-grow: 2;\n overflow-x: hidden;\n overflow-y: auto;\n padding: 0;\n width: auto;\n\n .dot-nested-list {\n background: transparent;\n }\n\n .", " {\n .dot-drawer-paper {\n padding: ", ";\n overflow-y: auto;\n border-right: 1px solid ", ";\n box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);\n }\n\n .MuiTypography-root.MuiTypography-subtitle2 {\n line-height: 40px;\n }\n\n .", " {\n margin: 0;\n padding-left: ", ";\n }\n }\n\n .dot-list-item {\n height: 44px;\n padding: 0;\n\n &.Mui-focusVisible {\n box-shadow: inset 0 0 0 2px ", ";\n border: 2px solid ", ";\n }\n\n &.open {\n border: 'none';\n }\n\n .dot-list-item-link .dot-icon {\n margin-right: ", ";\n }\n\n .dot-icon {\n border-radius: 50%;\n height: 40px;\n margin: ", ";\n width: 40px;\n }\n\n .dot-typography {\n white-space: nowrap;\n }\n }\n }\n\n .toggle-nav {\n border-top: 1px solid;\n border-top-color: ", ";\n padding: ", ";\n text-align: right;\n\n .dot-icon {\n transform: rotate(0deg);\n -o-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n -moz-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n -webkit-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n }\n }\n\n .powered-by {\n border-top: 1px solid;\n border-top-color: ", ";\n color: ", ";\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n font-size: 12px;\n overflow: hidden;\n padding: ", ";\n\n p.desc {\n white-space: nowrap;\n }\n\n .company-name {\n margin-top: ", ";\n }\n\n .d-icon {\n display: none;\n }\n }\n\n &.collapsed {\n overflow: hidden;\n width: 58px;\n -o-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -moz-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -webkit-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n li.MuiListSubheader-root .dot-typography,\n .go-back .MuiTypography-root,\n .MuiListItem-divider .dot-list-item-link,\n .child,\n .powered-by .company-name,\n .powered-by p.desc {\n display: none;\n }\n\n .dot-nested-drawer li.MuiListSubheader-root .dot-typography,\n .powered-by .d-icon {\n display: block;\n }\n\n header .dot-app-logo {\n text-align: center;\n }\n\n ul.side-nav {\n width: 56px;\n .dot-list-item {\n margin-left: 0;\n }\n\n .toggle-nav {\n align-self: center;\n }\n }\n\n .powered-by {\n align-items: center;\n }\n }\n }\n "])), rootClassName$M, theme.palette.layer.n50, theme.palette.layer.n100, theme.palette.grey[700], theme.palette.layer.n100, theme.spacing(1, 2), theme.spacing(1), theme.palette.layer.n100, theme.spacing(0.5, 1), theme.palette.layer.n100, theme.palette.layer.n200, theme.palette.layer.n0, theme.palette.layer.n900, theme.spacing(2.5), theme.palette.layer.n100, theme.spacing(1, 0), theme.palette.layer.n100, theme.spacing(0, 0, 1), theme.spacing(1.5, 2), nestedDrawerClassName, theme.spacing(2), theme.palette.layer.n100, listItemRootClass, theme.spacing(2), theme.palette.layer.n0, theme.palette.layer.n900, theme.spacing(1), theme.spacing(0, 1), theme.palette.layer.n100, theme.spacing(1), theme.palette.layer.n100, theme.palette.grey[400], theme.spacing(1), theme.spacing(1));
4107
+ return styled.css(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n &.", " {\n align-items: stretch;\n background: ", ";\n border-width: 0 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n height: 100%;\n flex-direction: column;\n justify-content: space-between;\n letter-spacing: 0.01em;\n -o-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -moz-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -webkit-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n header {\n align-items: center;\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n display: flex;\n height: 40px;\n flex-shrink: 0;\n overflow: hidden;\n padding: ", ";\n white-space: nowrap;\n\n &.app-logo {\n box-sizing: border-box;\n\n .dot-app-logo {\n svg,\n img {\n max-width: 100%;\n }\n }\n }\n\n .dot-avatar {\n margin-right: ", ";\n }\n }\n\n .go-back {\n align-items: center;\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n display: flex;\n\n .go-back-button {\n margin: ", ";\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 2px ", ",\n 0 0 0 4px ", ";\n }\n }\n\n .back-button-text {\n margin-right: ", ";\n }\n }\n\n hr.MuiDivider-root {\n border-color: ", ";\n margin: ", ";\n }\n\n .MuiListSubheader-root {\n border-bottom: 1px solid ", ";\n margin: ", ";\n\n .dot-typography {\n display: block;\n margin: 0;\n padding: ", ";\n }\n }\n\n ul.side-nav {\n background: transparent;\n flex-grow: 2;\n overflow-x: hidden;\n overflow-y: auto;\n padding: 0;\n width: auto;\n\n .dot-nested-list {\n background: transparent;\n }\n\n .", " {\n .dot-drawer-paper {\n padding: ", ";\n overflow-y: auto;\n border-right: 1px solid ", ";\n box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);\n }\n\n .MuiTypography-root.MuiTypography-subtitle2 {\n line-height: 40px;\n }\n\n .", " {\n margin: 0;\n padding-left: ", ";\n }\n }\n\n .dot-list-item {\n height: 44px;\n padding: 0;\n\n &.Mui-focusVisible {\n box-shadow: inset 0 0 0 2px ", ";\n border: 2px solid ", ";\n }\n\n &.open {\n border: 'none';\n }\n\n .dot-list-item-link .dot-icon {\n margin-right: ", ";\n }\n\n .dot-icon {\n border-radius: 50%;\n display: flex;\n height: 40px;\n margin: ", ";\n width: 40px;\n }\n\n .dot-typography {\n white-space: nowrap;\n }\n }\n }\n\n .toggle-nav {\n border-top: 1px solid;\n border-top-color: ", ";\n padding: ", ";\n text-align: right;\n\n .dot-icon {\n transform: rotate(0deg);\n -o-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n -moz-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n -webkit-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n }\n }\n\n .powered-by {\n border-top: 1px solid;\n border-top-color: ", ";\n color: ", ";\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n font-size: 12px;\n overflow: hidden;\n padding: ", ";\n\n p.desc {\n white-space: nowrap;\n }\n\n .company-name {\n margin-top: ", ";\n }\n\n .d-icon {\n display: none;\n }\n }\n\n &.collapsed {\n overflow: hidden;\n width: 58px;\n -o-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -moz-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -webkit-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n li.MuiListSubheader-root .dot-typography,\n .go-back .MuiTypography-root,\n .MuiListItem-divider .dot-list-item-link,\n .child,\n .powered-by .company-name,\n .powered-by p.desc {\n display: none;\n }\n\n .dot-nested-drawer li.MuiListSubheader-root .dot-typography,\n .powered-by .d-icon {\n display: block;\n }\n\n header .dot-app-logo {\n text-align: center;\n }\n\n ul.side-nav {\n width: 56px;\n .dot-list-item {\n margin-left: 0;\n }\n\n .toggle-nav {\n align-self: center;\n }\n }\n\n .powered-by {\n align-items: center;\n }\n }\n }\n "], ["\n &.", " {\n align-items: stretch;\n background: ", ";\n border-width: 0 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n height: 100%;\n flex-direction: column;\n justify-content: space-between;\n letter-spacing: 0.01em;\n -o-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -moz-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -webkit-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n header {\n align-items: center;\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n display: flex;\n height: 40px;\n flex-shrink: 0;\n overflow: hidden;\n padding: ", ";\n white-space: nowrap;\n\n &.app-logo {\n box-sizing: border-box;\n\n .dot-app-logo {\n svg,\n img {\n max-width: 100%;\n }\n }\n }\n\n .dot-avatar {\n margin-right: ", ";\n }\n }\n\n .go-back {\n align-items: center;\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n display: flex;\n\n .go-back-button {\n margin: ", ";\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 2px ", ",\n 0 0 0 4px ", ";\n }\n }\n\n .back-button-text {\n margin-right: ", ";\n }\n }\n\n hr.MuiDivider-root {\n border-color: ", ";\n margin: ", ";\n }\n\n .MuiListSubheader-root {\n border-bottom: 1px solid ", ";\n margin: ", ";\n\n .dot-typography {\n display: block;\n margin: 0;\n padding: ", ";\n }\n }\n\n ul.side-nav {\n background: transparent;\n flex-grow: 2;\n overflow-x: hidden;\n overflow-y: auto;\n padding: 0;\n width: auto;\n\n .dot-nested-list {\n background: transparent;\n }\n\n .", " {\n .dot-drawer-paper {\n padding: ", ";\n overflow-y: auto;\n border-right: 1px solid ", ";\n box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);\n }\n\n .MuiTypography-root.MuiTypography-subtitle2 {\n line-height: 40px;\n }\n\n .", " {\n margin: 0;\n padding-left: ", ";\n }\n }\n\n .dot-list-item {\n height: 44px;\n padding: 0;\n\n &.Mui-focusVisible {\n box-shadow: inset 0 0 0 2px ", ";\n border: 2px solid ", ";\n }\n\n &.open {\n border: 'none';\n }\n\n .dot-list-item-link .dot-icon {\n margin-right: ", ";\n }\n\n .dot-icon {\n border-radius: 50%;\n display: flex;\n height: 40px;\n margin: ", ";\n width: 40px;\n }\n\n .dot-typography {\n white-space: nowrap;\n }\n }\n }\n\n .toggle-nav {\n border-top: 1px solid;\n border-top-color: ", ";\n padding: ", ";\n text-align: right;\n\n .dot-icon {\n transform: rotate(0deg);\n -o-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n -moz-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n -webkit-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n }\n }\n\n .powered-by {\n border-top: 1px solid;\n border-top-color: ", ";\n color: ", ";\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n font-size: 12px;\n overflow: hidden;\n padding: ", ";\n\n p.desc {\n white-space: nowrap;\n }\n\n .company-name {\n margin-top: ", ";\n }\n\n .d-icon {\n display: none;\n }\n }\n\n &.collapsed {\n overflow: hidden;\n width: 58px;\n -o-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -moz-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -webkit-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n li.MuiListSubheader-root .dot-typography,\n .go-back .MuiTypography-root,\n .MuiListItem-divider .dot-list-item-link,\n .child,\n .powered-by .company-name,\n .powered-by p.desc {\n display: none;\n }\n\n .dot-nested-drawer li.MuiListSubheader-root .dot-typography,\n .powered-by .d-icon {\n display: block;\n }\n\n header .dot-app-logo {\n text-align: center;\n }\n\n ul.side-nav {\n width: 56px;\n .dot-list-item {\n margin-left: 0;\n }\n\n .toggle-nav {\n align-self: center;\n }\n }\n\n .powered-by {\n align-items: center;\n }\n }\n }\n "])), rootClassName$M, theme.palette.layer.n50, theme.palette.layer.n100, theme.palette.grey[700], theme.palette.layer.n100, theme.spacing(1, 2), theme.spacing(1), theme.palette.layer.n100, theme.spacing(0.5, 1), theme.palette.layer.n100, theme.palette.layer.n200, theme.palette.layer.n0, theme.palette.layer.n900, theme.spacing(2.5), theme.palette.layer.n100, theme.spacing(1, 0), theme.palette.layer.n100, theme.spacing(0, 0, 1), theme.spacing(1.5, 2), nestedDrawerClassName, theme.spacing(2), theme.palette.layer.n100, listItemRootClass, theme.spacing(2), theme.palette.layer.n0, theme.palette.layer.n900, theme.spacing(1), theme.spacing(0, 1), theme.palette.layer.n100, theme.spacing(1), theme.palette.layer.n100, theme.palette.grey[400], theme.spacing(1), theme.spacing(1));
4106
4108
  });
4107
4109
  var templateObject_1$P, templateObject_2$M;
4108
4110
 
@@ -10323,6 +10325,7 @@
10323
10325
  label = _a.label,
10324
10326
  locale = _a.locale,
10325
10327
  onAccept = _a.onAccept,
10328
+ onBlur = _a.onBlur,
10326
10329
  onChange = _a.onChange,
10327
10330
  onClose = _a.onClose,
10328
10331
  onError = _a.onError,
@@ -10423,7 +10426,8 @@
10423
10426
  focused: readOnly ? false : undefined,
10424
10427
  inputProps: {
10425
10428
  className: 'dot-input',
10426
- 'data-testid': 'dot-date-picker-input'
10429
+ 'data-testid': 'dot-date-picker-input',
10430
+ onBlur: onBlur
10427
10431
  },
10428
10432
  fullWidth: fullWidth,
10429
10433
  name: inputName
@@ -10554,6 +10558,8 @@
10554
10558
  inputId = _a.inputId,
10555
10559
  inputName = _a.inputName,
10556
10560
  label = _a.label,
10561
+ onAccept = _a.onAccept,
10562
+ onBlur = _a.onBlur,
10557
10563
  onChange = _a.onChange,
10558
10564
  onClose = _a.onClose,
10559
10565
  onOpen = _a.onOpen,
@@ -10640,6 +10646,7 @@
10640
10646
  onChange === null || onChange === void 0 ? void 0 : onChange(pickerTime.format(timeFormat), {
10641
10647
  validationError: null
10642
10648
  });
10649
+ onAccept === null || onAccept === void 0 ? void 0 : onAccept(pickerTime.format(timeFormat));
10643
10650
  };
10644
10651
  var scrollToSelectedTime = function scrollToSelectedTime() {
10645
10652
  if (!(hoursRef === null || hoursRef === void 0 ? void 0 : hoursRef.current) || !(minutesRef === null || minutesRef === void 0 ? void 0 : minutesRef.current)) return;
@@ -10695,7 +10702,7 @@
10695
10702
  iconId: "error-solid"
10696
10703
  }, void 0), !disableOpenPicker && !readOnly && !disabled && jsxRuntime.jsx(DotIconButton, {
10697
10704
  "data-testid": dataTestId && dataTestId + "-open-btn",
10698
- iconId: "calendar",
10705
+ iconId: "pending-clock",
10699
10706
  onClick: function (_event) {
10700
10707
  return handleTimePickerButtonClick();
10701
10708
  },
@@ -10705,7 +10712,8 @@
10705
10712
  },
10706
10713
  inputProps: {
10707
10714
  className: 'dot-input',
10708
- 'data-testid': dataTestId && dataTestId + "-input"
10715
+ 'data-testid': dataTestId && dataTestId + "-input",
10716
+ onBlur: onBlur
10709
10717
  },
10710
10718
  fullWidth: fullWidth,
10711
10719
  name: inputName
@@ -7,6 +7,8 @@ export interface ButtonProps extends BaseButtonProps {
7
7
  endIcon?: ReactNode;
8
8
  /** Icon placed before the children. */
9
9
  startIcon?: ReactNode;
10
+ /** Tab order for the button. */
11
+ tabIndex?: number;
10
12
  }
11
13
  /** This component wraps the Button component from @material-ui. */
12
14
  export declare const DotButton: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
@@ -1,7 +1,7 @@
1
- /// <reference types="react" />
2
- import { ComponentMeta } from '@storybook/react';
1
+ import { ComponentMeta, Story } from '@storybook/react';
3
2
  import { ButtonProps } from './Button';
4
- declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>>;
3
+ import React from 'react';
4
+ declare const _default: ComponentMeta<React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>>;
5
5
  export default _default;
6
6
  export declare const Default: any;
7
7
  export declare const WithStartIcon: any;
@@ -9,3 +9,4 @@ export declare const WithEndIcon: any;
9
9
  export declare const WithDestructiveType: any;
10
10
  export declare const WithOutlinedType: any;
11
11
  export declare const WithTextType: any;
12
+ export declare const WithTabbableLinkAsChildren: Story<ButtonProps>;
@@ -0,0 +1,2 @@
1
+ export declare const buttonWithLinkClassName = "dot-button-with-link";
2
+ export declare const StyledButtonWithLink: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -1,4 +1,4 @@
1
- import { ReactNode } from 'react';
1
+ import { FocusEvent, ReactNode } from 'react';
2
2
  import { PickersDayProps } from '@mui/x-date-pickers';
3
3
  import { FieldChangeHandlerContext } from '@mui/x-date-pickers/internals';
4
4
  import { CommonProps } from '../CommonProps';
@@ -39,6 +39,8 @@ export interface DatePickerProps extends CommonProps {
39
39
  locale?: DatePickerLocale;
40
40
  /** Callback fired when the value is accepted. */
41
41
  onAccept?: (value: string) => void;
42
+ /** A function that should be executed when the input loses focus */
43
+ onBlur?: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement, Element>) => void;
42
44
  /** Callback fired when the value changes. */
43
45
  onChange?: (value: string, context: FieldChangeHandlerContext<string>) => void;
44
46
  /** Callback fired when the popup requests to be closed. Use in controlled mode (see `open`). */
@@ -65,4 +67,4 @@ export interface DatePickerProps extends CommonProps {
65
67
  /** The selected value. Used when the component is controlled. */
66
68
  value?: string;
67
69
  }
68
- export declare const DotDatePicker: ({ ariaLabel, autoFocus, className, closeOnSelect, "data-testid": dataTestId, disableOpenPicker, disablePast, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, format, fullWidth, helperText, inputId, inputName, label, locale, onAccept, onChange, onClose, onError, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, }: DatePickerProps) => JSX.Element;
70
+ export declare const DotDatePicker: ({ ariaLabel, autoFocus, className, closeOnSelect, "data-testid": dataTestId, disableOpenPicker, disablePast, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, format, fullWidth, helperText, inputId, inputName, label, locale, onAccept, onBlur, onChange, onClose, onError, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, }: DatePickerProps) => JSX.Element;
@@ -1,6 +1,6 @@
1
1
  import { ComponentMeta, Story } from '@storybook/react';
2
2
  import { DatePickerProps } from './';
3
- declare const _default: ComponentMeta<({ ariaLabel, autoFocus, className, closeOnSelect, "data-testid": dataTestId, disableOpenPicker, disablePast, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, format, fullWidth, helperText, inputId, inputName, label, locale, onAccept, onChange, onClose, onError, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, }: DatePickerProps) => JSX.Element>;
3
+ declare const _default: ComponentMeta<({ ariaLabel, autoFocus, className, closeOnSelect, "data-testid": dataTestId, disableOpenPicker, disablePast, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, format, fullWidth, helperText, inputId, inputName, label, locale, onAccept, onBlur, onChange, onClose, onError, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, }: DatePickerProps) => JSX.Element>;
4
4
  export default _default;
5
5
  export declare const Default: DatePickerProps;
6
6
  export declare const WithHelperText: any;
@@ -18,3 +18,4 @@ export declare const WithFullWidth: any;
18
18
  export declare const WithoutClearButton: any;
19
19
  export declare const WithControlledMode: Story<DatePickerProps>;
20
20
  export declare const WithLocaleConfiguration: Story<DatePickerProps>;
21
+ export declare const WithChangeOnBlur: Story<DatePickerProps>;
@@ -1,4 +1,6 @@
1
1
  export declare const datePickerWithControlledModeClassName = "dot-date-picker-with-controlled-mode";
2
2
  export declare const datePickerWithLocaleClassName = "dot-date-picker-with-locale";
3
+ export declare const datePickerWithBlurClassName = "dot-date-picker-with-blur";
3
4
  export declare const StyledDatePickerWithControlledMode: import("styled-components").StyledComponent<"div", any, {}, never>;
5
+ export declare const StyledDatePickerWithChangeOnBlur: import("styled-components").StyledComponent<"div", any, {}, never>;
4
6
  export declare const StyledDatePickerWithLocale: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -2,7 +2,7 @@ import { ComponentMeta, Story } from '@storybook/react';
2
2
  import { SidebarProps } from './Sidebar';
3
3
  declare const _default: ComponentMeta<({ appLogo, appLogoSmall, ariaLabel, backItem, brandDesc, children, className, collapsable, "data-testid": dataTestId, displayAppLogo, displayBrand, goBack, navItems, nestedListType, onCollapseChange, open, title, titleAvatarProps, width, }: SidebarProps) => JSX.Element>;
4
4
  export default _default;
5
- export declare const Default: Story<SidebarProps>;
6
- export declare const WithReactRouter: Story<SidebarProps>;
7
- export declare const WithTooltipsWhenCollapsed: Story<SidebarProps>;
8
- export declare const WithBackItem: Story<SidebarProps>;
5
+ export declare const Default: Story;
6
+ export declare const WithReactRouter: Story;
7
+ export declare const WithTooltipsWhenCollapsed: Story;
8
+ export declare const WithBackItem: Story;
@@ -2,7 +2,7 @@ import { MouseEvent } from 'react';
2
2
  import { ListItemProps } from '../list/utils/models';
3
3
  export declare const childElement: JSX.Element;
4
4
  export declare const getNavigationItems: (isSelected: (key: number) => boolean, handleClick: (key: number) => void) => ({
5
- startIconId: string;
5
+ startIcon: JSX.Element;
6
6
  onClick: import("@storybook/addon-actions").HandlerFunction;
7
7
  items: ({
8
8
  text: string;
@@ -24,7 +24,6 @@ export declare const getNavigationItems: (isSelected: (key: number) => boolean,
24
24
  selected?: undefined;
25
25
  })[];
26
26
  text: string;
27
- startIcon?: undefined;
28
27
  endIconId?: undefined;
29
28
  selected?: undefined;
30
29
  divider?: undefined;
@@ -44,7 +43,6 @@ export declare const getNavigationItems: (isSelected: (key: number) => boolean,
44
43
  })[];
45
44
  startIcon: JSX.Element;
46
45
  text: string;
47
- startIconId?: undefined;
48
46
  onClick?: undefined;
49
47
  endIconId?: undefined;
50
48
  selected?: undefined;
@@ -55,16 +53,14 @@ export declare const getNavigationItems: (isSelected: (key: number) => boolean,
55
53
  onClick: (_event: MouseEvent) => void;
56
54
  selected: boolean;
57
55
  text: string;
58
- startIconId?: undefined;
59
56
  items?: undefined;
60
57
  divider?: undefined;
61
58
  } | {
62
59
  text: string;
63
60
  divider: boolean;
64
- startIconId?: undefined;
61
+ startIcon?: undefined;
65
62
  onClick?: undefined;
66
63
  items?: undefined;
67
- startIcon?: undefined;
68
64
  endIconId?: undefined;
69
65
  selected?: undefined;
70
66
  } | {
@@ -72,17 +68,15 @@ export declare const getNavigationItems: (isSelected: (key: number) => boolean,
72
68
  onClick: (_event: MouseEvent) => void;
73
69
  selected: boolean;
74
70
  text: string;
75
- startIconId?: undefined;
76
71
  items?: undefined;
77
72
  endIconId?: undefined;
78
73
  divider?: undefined;
79
74
  } | {
80
75
  divider: boolean;
81
- startIconId?: undefined;
76
+ startIcon?: undefined;
82
77
  onClick?: undefined;
83
78
  items?: undefined;
84
79
  text?: undefined;
85
- startIcon?: undefined;
86
80
  endIconId?: undefined;
87
81
  selected?: undefined;
88
82
  })[];
@@ -1,4 +1,4 @@
1
- import { ReactNode } from 'react';
1
+ import { FocusEvent, ReactNode } from 'react';
2
2
  import { FieldChangeHandlerContext } from '@mui/x-date-pickers/internals';
3
3
  import { CommonProps } from '../CommonProps';
4
4
  export interface TimePickerProps extends CommonProps {
@@ -25,6 +25,10 @@ export interface TimePickerProps extends CommonProps {
25
25
  inputName?: string;
26
26
  /** The label content. */
27
27
  label?: string;
28
+ /** Callback fired when the value is changed from the popper. */
29
+ onAccept?: (value: string) => void;
30
+ /** A function that should be executed when the input loses focus */
31
+ onBlur?: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement, Element>) => void;
28
32
  /** Callback fired when the value changes. */
29
33
  onChange?: (value: string, context: FieldChangeHandlerContext<string>) => void;
30
34
  /** Callback fired when the popup requests to be closed. Use in controlled mode (see `open`). */
@@ -45,4 +49,4 @@ export interface TimePickerProps extends CommonProps {
45
49
  export declare const DEFAULT_PICKER_TIME_FORMAT = "hh:mm";
46
50
  export declare const DEFAULT_TIME_FORMAT = "hh:mm A";
47
51
  export declare const DEFAULT_TIME = "01:00";
48
- export declare const DotTimePicker: ({ ampm, ariaLabel, autoFocus, className, "data-testid": dataTestId, disableOpenPicker, disabled, error, format, fullWidth, helperText, hideActionButtons, inputId, inputName, label, onChange, onClose, onOpen, open, persistentLabel, readOnly, required, value, }: TimePickerProps) => JSX.Element;
52
+ export declare const DotTimePicker: ({ ampm, ariaLabel, autoFocus, className, "data-testid": dataTestId, disableOpenPicker, disabled, error, format, fullWidth, helperText, hideActionButtons, inputId, inputName, label, onAccept, onBlur, onChange, onClose, onOpen, open, persistentLabel, readOnly, required, value, }: TimePickerProps) => JSX.Element;
@@ -1,6 +1,6 @@
1
1
  import { ComponentMeta, Story } from '@storybook/react';
2
2
  import { TimePickerProps } from './';
3
- declare const _default: ComponentMeta<({ ampm, ariaLabel, autoFocus, className, "data-testid": dataTestId, disableOpenPicker, disabled, error, format, fullWidth, helperText, hideActionButtons, inputId, inputName, label, onChange, onClose, onOpen, open, persistentLabel, readOnly, required, value, }: TimePickerProps) => JSX.Element>;
3
+ declare const _default: ComponentMeta<({ ampm, ariaLabel, autoFocus, className, "data-testid": dataTestId, disableOpenPicker, disabled, error, format, fullWidth, helperText, hideActionButtons, inputId, inputName, label, onAccept, onBlur, onChange, onClose, onOpen, open, persistentLabel, readOnly, required, value, }: TimePickerProps) => JSX.Element>;
4
4
  export default _default;
5
5
  export declare const Default: TimePickerProps;
6
6
  export declare const WithAutoFocus: any;
@@ -18,3 +18,4 @@ export declare const WithOpenedTimePopper: any;
18
18
  export declare const WithControlledMode: Story<TimePickerProps>;
19
19
  export declare const WithHourFormatPicker: Story<TimePickerProps>;
20
20
  export declare const WithOutsideTimeSetter: Story<TimePickerProps>;
21
+ export declare const WithChangeOnBlur: Story<TimePickerProps>;
@@ -1,6 +1,8 @@
1
1
  export declare const timePickerWithControlledModeClassName = "dot-time-picker-with-controlled-mode";
2
2
  export declare const timePickerWithHourFormatPickerClassName = "dot-time-picker-with-hour-format-picker";
3
3
  export declare const timePickerWithOutsideTimeSetterClassName = "dot-time-picker-with-outside-time-setter";
4
+ export declare const timePickerWithBlurClassName = "dot-time-picker-with-blur";
4
5
  export declare const StyledTimePickerWithControlledMode: import("styled-components").StyledComponent<"div", any, {}, never>;
5
6
  export declare const StyledTimePickerWithHourFormatPicker: import("styled-components").StyledComponent<"div", any, {}, never>;
6
7
  export declare const StyledTimePickerWithOutsideTimeSetter: import("styled-components").StyledComponent<"div", any, {}, never>;
8
+ export declare const StyledTimePickerWithChangeOnBlur: import("styled-components").StyledComponent<"div", any, {}, never>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@digital-ai/dot-components",
3
- "version": "2.6.0",
3
+ "version": "2.7.0",
4
4
  "private": false,
5
5
  "license": "SEE LICENSE IN <LICENSE.md>",
6
6
  "contributors": [