@digital-ai/dot-components 2.11.1 → 2.11.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGE_LOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # Changelog
2
2
 
3
+ ## [2.11.2](https://www.npmjs.com/package/@digital-ai/dot-components) (07/18/2023)
4
+
5
+ [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.11.1...2.11.2)
6
+
7
+ **Fixed bugs:**
8
+
9
+ - D-25273: Fix action bar placement [\#1562](https://github.com/digital-ai/dot-components/pull/1562) ([ryangamble](https://github.com/ryangamble))
10
+ - \#1556 Show placeholder when values are empty [\#1560](https://github.com/digital-ai/dot-components/pull/1560) ([angel-git](https://github.com/angel-git))
11
+
3
12
  ## [2.11.1](https://www.npmjs.com/package/@digital-ai/dot-components) (07/18/2023)
4
13
 
5
14
  [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.11.0...2.11.1)
@@ -30,6 +39,7 @@
30
39
  - S-84554: Update typography to latest Figma [\#1551](https://github.com/digital-ai/dot-components/pull/1551) ([CWSites](https://github.com/CWSites))
31
40
  - S-91993: Address a11y issues raised by Storybook [\#1549](https://github.com/digital-ai/dot-components/pull/1549) ([CWSites](https://github.com/CWSites))
32
41
  - D-25843: update dot-icons to be greater than 1.0.11 [\#1543](https://github.com/digital-ai/dot-components/pull/1543) ([CWSites](https://github.com/CWSites))
42
+ - `master` \> `develop` [\#1532](https://github.com/digital-ai/dot-components/pull/1532) ([angel-git](https://github.com/angel-git))
33
43
 
34
44
  ## [1.21.12](https://www.npmjs.com/package/@digital-ai/dot-components) (07/14/2023)
35
45
 
@@ -53,7 +63,6 @@
53
63
  - S-91990: LinearProgress add aria-label [\#1537](https://github.com/digital-ai/dot-components/pull/1537) ([CWSites](https://github.com/CWSites))
54
64
  - S-91989: remove default aria-label, add link label to missing link [\#1536](https://github.com/digital-ai/dot-components/pull/1536) ([CWSites](https://github.com/CWSites))
55
65
  - S-91989: update link to have aria-label [\#1534](https://github.com/digital-ai/dot-components/pull/1534) ([CWSites](https://github.com/CWSites))
56
- - `master` \> `develop` [\#1532](https://github.com/digital-ai/dot-components/pull/1532) ([angel-git](https://github.com/angel-git))
57
66
 
58
67
  ## [2.10.1](https://www.npmjs.com/package/@digital-ai/dot-components) (06/29/2023)
59
68
 
@@ -628,7 +637,6 @@
628
637
  **Fixed bugs:**
629
638
 
630
639
  - 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))
631
- - D-20404: update table border color [\#1211](https://github.com/digital-ai/dot-components/pull/1211) ([CWSites](https://github.com/CWSites))
632
640
  - D-21918: Update `DotAlertBanner` to match Figma [\#1208](https://github.com/digital-ai/dot-components/pull/1208) ([CWSites](https://github.com/CWSites))
633
641
 
634
642
  ## [1.19.1](https://www.npmjs.com/package/@digital-ai/dot-components) (07/18/2022)
@@ -640,6 +648,7 @@
640
648
  - D-22029: `DotAutocomplete`: fix id attribute on input [\#1217](https://github.com/digital-ai/dot-components/pull/1217) ([angel-git](https://github.com/angel-git))
641
649
  - D-20693: `DotSidebar` updates to match Figma [\#1214](https://github.com/digital-ai/dot-components/pull/1214) ([CWSites](https://github.com/CWSites))
642
650
  - D-20329: add href to application logo [\#1213](https://github.com/digital-ai/dot-components/pull/1213) ([CWSites](https://github.com/CWSites))
651
+ - D-20404: update table border color [\#1211](https://github.com/digital-ai/dot-components/pull/1211) ([CWSites](https://github.com/CWSites))
643
652
  - 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))
644
653
 
645
654
  ## [1.19.0](https://www.npmjs.com/package/@digital-ai/dot-components) (07/11/2022)
@@ -792,6 +801,8 @@
792
801
  - S-82899: `DotCheckbox`: Add more Storybook examples [\#1090](https://github.com/digital-ai/dot-components/pull/1090) ([dmiletic85](https://github.com/dmiletic85))
793
802
  - S-82453: `TruncateWithTooltip`: Create new component [\#1072](https://github.com/digital-ai/dot-components/pull/1072) ([dmiletic85](https://github.com/dmiletic85))
794
803
  - S-82519: `Snackbar` Allow positioning [\#1064](https://github.com/digital-ai/dot-components/pull/1064) ([dmiletic85](https://github.com/dmiletic85))
804
+ - S-82617: `DotInputText` Expose mouse up event [\#1063](https://github.com/digital-ai/dot-components/pull/1063) ([dmiletic85](https://github.com/dmiletic85))
805
+ - S-76904: `InlineEdit` improvements [\#1053](https://github.com/digital-ai/dot-components/pull/1053) ([dmiletic85](https://github.com/dmiletic85))
795
806
  - S-82059: `DraggableList`: Create and export the component [\#1003](https://github.com/digital-ai/dot-components/pull/1003) ([dmiletic85](https://github.com/dmiletic85))
796
807
 
797
808
  **Fixed bugs:**
@@ -816,10 +827,6 @@
816
827
 
817
828
  [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.11.1...1.11.2)
818
829
 
819
- **Features:**
820
-
821
- - S-82617: `DotInputText` Expose mouse up event [\#1063](https://github.com/digital-ai/dot-components/pull/1063) ([dmiletic85](https://github.com/dmiletic85))
822
-
823
830
  **Misc:**
824
831
 
825
832
  - March14th2022 update [\#1058](https://github.com/digital-ai/dot-components/pull/1058) ([BojanKocijan](https://github.com/BojanKocijan))
@@ -1076,6 +1083,7 @@
1076
1083
  **Fixed bugs:**
1077
1084
 
1078
1085
  - D-19294: Fix broken expand/collapse for uncontrolled accordion [\#866](https://github.com/digital-ai/dot-components/pull/866) ([selsemore](https://github.com/selsemore))
1086
+ - \#841 Fix DotDynamicForm initial form state for controls with initialValue false [\#842](https://github.com/digital-ai/dot-components/pull/842) ([selsemore](https://github.com/selsemore))
1079
1087
 
1080
1088
  **Misc:**
1081
1089
 
@@ -1121,8 +1129,8 @@
1121
1129
 
1122
1130
  **Fixed bugs:**
1123
1131
 
1124
- - \#841 Fix DotDynamicForm initial form state for controls with initialValue false [\#842](https://github.com/digital-ai/dot-components/pull/842) ([selsemore](https://github.com/selsemore))
1125
1132
  - D-19189: Extended sidenav drawer should collapse when another drawer option is clicked [\#830](https://github.com/digital-ai/dot-components/pull/830) ([dmiletic85](https://github.com/dmiletic85))
1133
+ - D-19148: Input elements not displaying correctly when `border-box` is used in consumer components [\#812](https://github.com/digital-ai/dot-components/pull/812) ([dmiletic85](https://github.com/dmiletic85))
1126
1134
 
1127
1135
  **Misc:**
1128
1136
 
@@ -1158,7 +1166,6 @@
1158
1166
 
1159
1167
  - \#795 Address AlertBanner style issues [\#815](https://github.com/digital-ai/dot-components/pull/815) ([angel-git](https://github.com/angel-git))
1160
1168
  - D-19138: Remove margin-bottom from breadcrumbs [\#813](https://github.com/digital-ai/dot-components/pull/813) ([angel-git](https://github.com/angel-git))
1161
- - D-19148: Input elements not displaying correctly when `border-box` is used in consumer components [\#812](https://github.com/digital-ai/dot-components/pull/812) ([dmiletic85](https://github.com/dmiletic85))
1162
1169
  - \[D-18631\]\[D-18632\]\[D-18802\]:Focus state of avatar button and sidebar list item and inaccurate count of nav item [\#804](https://github.com/digital-ai/dot-components/pull/804) ([monapatel91](https://github.com/monapatel91))
1163
1170
 
1164
1171
  **Misc:**
@@ -1302,6 +1309,7 @@
1302
1309
  - S-79291: update nested dependencies [\#700](https://github.com/digital-ai/dot-components/pull/700) ([CWSites](https://github.com/CWSites))
1303
1310
  - S-78832: Agility icon & badge updates [\#698](https://github.com/digital-ai/dot-components/pull/698) ([CWSites](https://github.com/CWSites))
1304
1311
  - S-79251: add workflow for sonarqube scan when code merged to develop [\#697](https://github.com/digital-ai/dot-components/pull/697) ([CWSites](https://github.com/CWSites))
1312
+ - S-76906: table action column [\#692](https://github.com/digital-ai/dot-components/pull/692) ([monapatel91](https://github.com/monapatel91))
1305
1313
 
1306
1314
  ## [1.1.0](https://www.npmjs.com/package/@digital-ai/dot-components) (09/29/2021)
1307
1315
 
@@ -1311,7 +1319,6 @@
1311
1319
 
1312
1320
  - MINOR release [\#695](https://github.com/digital-ai/dot-components/pull/695) ([CWSites](https://github.com/CWSites))
1313
1321
  - pass value to tab [\#694](https://github.com/digital-ai/dot-components/pull/694) ([kmmarsh](https://github.com/kmmarsh))
1314
- - S-76906: table action column [\#692](https://github.com/digital-ai/dot-components/pull/692) ([monapatel91](https://github.com/monapatel91))
1315
1322
  - S-78831: update AppToolbar component for Agility [\#691](https://github.com/digital-ai/dot-components/pull/691) ([CWSites](https://github.com/CWSites))
1316
1323
 
1317
1324
  ## [1.0.12](https://www.npmjs.com/package/@digital-ai/dot-components) (09/23/2021)
package/index.esm.js CHANGED
@@ -4383,6 +4383,13 @@ const getChipsFromAutocomplete = ({
4383
4383
  });
4384
4384
  };
4385
4385
  const checkIfDuplicateItem = (itemText, autocompleteOptions) => autocompleteOptions.some(autocompleteOption => autocompleteOption.title === itemText);
4386
+ const isEmptyValue = value => {
4387
+ if (Array.isArray(value)) {
4388
+ return value.length === 0;
4389
+ } else {
4390
+ return !value;
4391
+ }
4392
+ };
4386
4393
 
4387
4394
  function ariaLabelOrAlternates(ariaLabel, label, placeholder) {
4388
4395
  return ariaLabel || label || placeholder;
@@ -4431,7 +4438,7 @@ const DotAutoComplete = ({
4431
4438
  value,
4432
4439
  warning: _warning = false
4433
4440
  }) => {
4434
- const [showPlaceholder, setShowPlaceholder] = useState(!value && !defaultValue);
4441
+ const [showPlaceholder, setShowPlaceholder] = useState(isEmptyValue(value) && isEmptyValue(defaultValue));
4435
4442
  const [isOpened, setIsOpened] = useState(false);
4436
4443
  const [inputText, setInputText] = useState('');
4437
4444
  // Used for focus management while popper is opened
@@ -7820,14 +7827,14 @@ const StyledStepper = styled.div.withConfig({
7820
7827
  componentId: "sc-1qka0yq-0"
7821
7828
  })(["", ""], ({
7822
7829
  theme
7823
- }) => css(["&.", "{display:flex;align-items:flex-start;padding:0;width:100%;&.left{flex-direction:row;.", "{border-left:1px solid ", ";}}&.right{flex-direction:row-reverse;.", "{border-right:1px solid ", ";}}.", "{padding:", ";&.MuiStepper-horizontal{padding:0;display:flex;flex-direction:column;}.MuiStep-root{width:315px;.dot-icon{display:flex;background:", ";border-radius:50%;color:", ";height:28px;width:28px;}.dot-typography{color:", ";}.MuiStepContent-root{border-left-color:", ";}&.MuiStep-horizontal{padding:", ";.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}.dot-typography{color:", ";}.horizontal-step-description{color:", ";}&:hover{cursor:pointer;}&.completed{.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}}&.active{background:", ";}&.error{.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}}&.in-progress{.dot-avatar i:before{color:", ";}}}&.MuiStep-vertical{&.completed{.dot-typography,.dot-icon{color:", ";}}&.active{.dot-icon{background:", ";color:", ";}.step-label.dot-typography{color:", ";}.dot-typography{color:", ";}}&.error{.dot-typography{color:", ";}.dot-icon{background:", ";border:1px solid ", ";color:", ";}}}&.disabled{.dot-icon{color:", ";}.dot-typography{color:", ";}}&:last-of-type .MuiStepContent-root{border-left-color:transparent;}}}.", "{width:100%;.step-content-container{padding:", ";}}}"], rootClassName$i, contentClassName, theme.palette.layer.n200, contentClassName, theme.palette.layer.n200, stepListClassName, theme.spacing(3), theme.palette.primary['50'], theme.palette.primary['50'], theme.palette.layer.n300, theme.palette.layer.n300, theme.spacing(1), theme.palette.layer.n300, theme.palette.layer.n100, theme.palette.layer.n500, theme.palette.layer.n400, theme.palette.secondary['500'], theme.palette.secondary['50'], theme.palette.layer['n50'], theme.palette.error['500'], theme.palette.error['50'], theme.palette.primary['400'], theme.palette.layer.n700, theme.palette.primary['400'], theme.palette.layer.n0, theme.palette.primary['500'], theme.palette.layer.n700, theme.palette.error.main, theme.palette.layer.n0, theme.palette.error.main, theme.palette.error.main, theme.palette.primary['50'], theme.palette.layer.n300, contentClassName, theme.spacing(3, 3, 2, 3)));
7830
+ }) => css(["&.", "{display:flex;align-items:flex-start;padding:0;width:100%;&.left{flex-direction:row;}&.right{flex-direction:row-reverse;}.", "{padding:", ";&.MuiStepper-horizontal{padding:0;display:flex;flex-direction:column;}.MuiStep-root{width:315px;.dot-icon{display:flex;background:", ";border-radius:50%;color:", ";height:28px;width:28px;}.dot-typography{color:", ";}.MuiStepContent-root{border-left-color:", ";}&.MuiStep-horizontal{padding:", ";.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}.dot-typography{color:", ";}.horizontal-step-description{color:", ";}&:hover{cursor:pointer;}&.completed{.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}}&.active{background:", ";}&.error{.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}}&.in-progress{.dot-avatar i:before{color:", ";}}}&.MuiStep-vertical{&.completed{.dot-typography,.dot-icon{color:", ";}}&.active{.dot-icon{background:", ";color:", ";}.step-label.dot-typography{color:", ";}.dot-typography{color:", ";}}&.error{.dot-typography{color:", ";}.dot-icon{background:", ";border:1px solid ", ";color:", ";}}}&.disabled{.dot-icon{color:", ";}.dot-typography{color:", ";}}&:last-of-type .MuiStepContent-root{border-left-color:transparent;}}}.", "{width:100%;.step-content-container{padding:", ";}}}"], rootClassName$i, stepListClassName, theme.spacing(3), theme.palette.primary['50'], theme.palette.primary['50'], theme.palette.layer.n300, theme.palette.layer.n300, theme.spacing(1), theme.palette.layer.n300, theme.palette.layer.n100, theme.palette.layer.n500, theme.palette.layer.n400, theme.palette.secondary['500'], theme.palette.secondary['50'], theme.palette.layer['n50'], theme.palette.error['500'], theme.palette.error['50'], theme.palette.primary['400'], theme.palette.layer.n700, theme.palette.primary['400'], theme.palette.layer.n0, theme.palette.primary['500'], theme.palette.layer.n700, theme.palette.error.main, theme.palette.layer.n0, theme.palette.error.main, theme.palette.error.main, theme.palette.primary['50'], theme.palette.layer.n300, contentClassName, theme.spacing(3, 3, 2, 3)));
7824
7831
  const ScrollbarContainer = styled.div.withConfig({
7825
7832
  displayName: "Stepperstyles__ScrollbarContainer",
7826
7833
  componentId: "sc-1qka0yq-1"
7827
7834
  })(["", ""], ({
7828
7835
  theme,
7829
7836
  offset
7830
- }) => css(["height:", ";overflow-y:auto;&.center-content{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;}"], `calc(100vh - ${offset}px)`));
7837
+ }) => css(["height:", ";overflow-y:auto;&.left{border-right:1px solid ", ";}&.right{border-left:1px solid ", ";}&.center-content{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;}"], `calc(100vh - ${offset}px)`, theme.palette.layer.n200, theme.palette.layer.n200));
7831
7838
  const StepContentWrapper = styled.div.withConfig({
7832
7839
  displayName: "Stepperstyles__StepContentWrapper",
7833
7840
  componentId: "sc-1qka0yq-2"
@@ -7891,7 +7898,7 @@ const DotStepper = ({
7891
7898
  const displayCancelButton = !!(!displayInitialContent && !displayFinalContent && onCancel);
7892
7899
  const isLastStep = currentStep === steps.length && !finalContent || currentStep > steps.length && finalContent;
7893
7900
  const rootClasses = useStylesWithRootClass(rootClassName$i, _stepsPosition, className);
7894
- const centerContentClass = displayInitialContent || displayFinalContent ? 'center-content' : '';
7901
+ const stepContentClasses = displayInitialContent || displayFinalContent ? 'center-content' : '';
7895
7902
  const stickyBottomClasses = useStylesWithRootClass(isStickyBottom ? 'with-top-border' : '');
7896
7903
  const actionsClasses = useStylesWithRootClass('actions', displayInitialContent || displayFinalContent ? 'center-actions' : '');
7897
7904
  useEffect(() => {
@@ -7978,15 +7985,15 @@ const DotStepper = ({
7978
7985
  }
7979
7986
  };
7980
7987
  const renderContent = () => {
7981
- return jsxs("div", Object.assign({
7988
+ return jsx("div", Object.assign({
7982
7989
  className: contentClassName,
7983
7990
  ref: stepperContentRef
7984
7991
  }, {
7985
- children: [jsx(ScrollbarContainer, Object.assign({
7986
- offset: _offset + 81,
7987
- className: centerContentClass
7992
+ children: jsxs(ScrollbarContainer, Object.assign({
7993
+ offset: _offset,
7994
+ className: stepContentClasses
7988
7995
  }, {
7989
- children: jsx(CssGrid, Object.assign({
7996
+ children: [jsx(CssGrid, Object.assign({
7990
7997
  className: "step-content-container"
7991
7998
  }, {
7992
7999
  children: jsx(CssCell, Object.assign({}, defaultCellProps, {
@@ -7994,56 +8001,57 @@ const DotStepper = ({
7994
8001
  }, {
7995
8002
  children: getStepContent(currentStep)
7996
8003
  }), void 0)
7997
- }), void 0)
7998
- }), void 0), jsx(StepActionsContainer, Object.assign({
7999
- className: stickyBottomClasses,
8000
- ref: actionsRef,
8001
- displayCancelButton: displayCancelButton
8002
- }, {
8003
- children: jsx(CssGrid, {
8004
- children: jsx(CssCell, Object.assign({}, defaultCellProps, {
8005
- className: actionsClasses,
8006
- lg: {
8007
- start: 4,
8008
- span: 6
8009
- }
8010
- }, {
8011
- children: jsxs(Fragment, {
8012
- children: [displayCancelButton && jsx(DotButton, Object.assign({
8013
- className: "cancel-stepper",
8014
- onClick: onCancel,
8015
- type: "text",
8016
- "data-testid": "stepper-cancel-button"
8017
- }, {
8018
- children: "Cancel"
8019
- }), void 0), jsxs("div", Object.assign({
8020
- className: "navigation-buttons"
8021
- }, {
8022
- children: [!displayInitialContent && currentStep !== 1 && jsx(DotButton, Object.assign({
8023
- onClick: handleBack,
8024
- type: "outlined",
8025
- "data-testid": "stepper-previous-button"
8004
+ }), void 0), jsx(StepActionsContainer, Object.assign({
8005
+ className: stickyBottomClasses,
8006
+ ref: actionsRef,
8007
+ displayCancelButton: displayCancelButton
8008
+ }, {
8009
+ children: jsx(CssGrid, {
8010
+ children: jsx(CssCell, Object.assign({}, defaultCellProps, {
8011
+ className: actionsClasses,
8012
+ lg: {
8013
+ start: 4,
8014
+ span: 6
8015
+ }
8016
+ }, {
8017
+ children: jsxs(Fragment, {
8018
+ children: [displayCancelButton && jsx(DotButton, Object.assign({
8019
+ className: "cancel-stepper",
8020
+ onClick: onCancel,
8021
+ type: "text",
8022
+ "data-testid": "stepper-cancel-button"
8026
8023
  }, {
8027
- children: "Previous"
8028
- }), void 0), jsx(DotButton, Object.assign({
8029
- onClick: handleNext,
8030
- disabled: _nextStepDisabled,
8031
- "data-testid": "stepper-next-button"
8024
+ children: "Cancel"
8025
+ }), void 0), jsxs("div", Object.assign({
8026
+ className: "navigation-buttons"
8032
8027
  }, {
8033
- children: isLastStep ? _submitButtonText : _nextButtonText
8028
+ children: [!displayInitialContent && currentStep !== 1 && jsx(DotButton, Object.assign({
8029
+ onClick: handleBack,
8030
+ type: "outlined",
8031
+ "data-testid": "stepper-previous-button"
8032
+ }, {
8033
+ children: "Previous"
8034
+ }), void 0), jsx(DotButton, Object.assign({
8035
+ onClick: handleNext,
8036
+ disabled: _nextStepDisabled,
8037
+ "data-testid": "stepper-next-button"
8038
+ }, {
8039
+ children: isLastStep ? _submitButtonText : _nextButtonText
8040
+ }), void 0)]
8034
8041
  }), void 0)]
8035
- }), void 0)]
8036
- }, void 0)
8037
- }), void 0)
8038
- }, void 0)
8039
- }), void 0)]
8042
+ }, void 0)
8043
+ }), void 0)
8044
+ }, void 0)
8045
+ }), void 0)]
8046
+ }), void 0)
8040
8047
  }), void 0);
8041
8048
  };
8042
8049
  return jsxs(StyledStepper, Object.assign({
8043
8050
  className: rootClasses
8044
8051
  }, {
8045
8052
  children: [jsx(ScrollbarContainer, Object.assign({
8046
- offset: _offset
8053
+ offset: _offset,
8054
+ className: _stepsPosition
8047
8055
  }, {
8048
8056
  children: jsx(Stepper, Object.assign({
8049
8057
  activeStep: currentStep,
package/index.umd.js CHANGED
@@ -4830,6 +4830,13 @@
4830
4830
  return autocompleteOption.title === itemText;
4831
4831
  });
4832
4832
  };
4833
+ var isEmptyValue = function isEmptyValue(value) {
4834
+ if (Array.isArray(value)) {
4835
+ return value.length === 0;
4836
+ } else {
4837
+ return !value;
4838
+ }
4839
+ };
4833
4840
 
4834
4841
  function ariaLabelOrAlternates(ariaLabel, label, placeholder) {
4835
4842
  return ariaLabel || label || placeholder;
@@ -4890,7 +4897,7 @@
4890
4897
  value = _a.value,
4891
4898
  _p = _a.warning,
4892
4899
  warning = _p === void 0 ? false : _p;
4893
- var _q = React.useState(!value && !defaultValue),
4900
+ var _q = React.useState(isEmptyValue(value) && isEmptyValue(defaultValue)),
4894
4901
  showPlaceholder = _q[0],
4895
4902
  setShowPlaceholder = _q[1];
4896
4903
  var _r = React.useState(false),
@@ -8502,15 +8509,15 @@
8502
8509
  componentId: "sc-1qka0yq-0"
8503
8510
  })(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
8504
8511
  var theme = _a.theme;
8505
- return styled.css(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n &.", " {\n display: flex;\n align-items: flex-start;\n padding: 0;\n width: 100%;\n\n &.left {\n flex-direction: row;\n .", " {\n border-left: 1px solid ", ";\n }\n }\n\n &.right {\n flex-direction: row-reverse;\n .", " {\n border-right: 1px solid ", ";\n }\n }\n\n .", " {\n padding: ", ";\n\n &.MuiStepper-horizontal {\n padding: 0;\n display: flex;\n flex-direction: column;\n }\n\n .MuiStep-root {\n width: 315px;\n\n .dot-icon {\n display: flex;\n background: ", ";\n border-radius: 50%;\n color: ", ";\n height: 28px;\n width: 28px;\n }\n\n .dot-typography {\n color: ", ";\n }\n\n .MuiStepContent-root {\n border-left-color: ", ";\n }\n\n &.MuiStep-horizontal {\n padding: ", ";\n\n .dot-avatar i:before {\n color: ", ";\n }\n .dot-avatar,\n .dot-icon {\n background: ", ";\n }\n .dot-typography {\n color: ", ";\n }\n .horizontal-step-description {\n color: ", ";\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &.completed {\n .dot-avatar i:before {\n color: ", ";\n }\n .dot-avatar,\n .dot-icon {\n background: ", ";\n }\n }\n\n &.active {\n background: ", ";\n }\n\n &.error {\n .dot-avatar i:before {\n color: ", ";\n }\n .dot-avatar,\n .dot-icon {\n background: ", ";\n }\n }\n\n &.in-progress {\n .dot-avatar i:before {\n color: ", ";\n }\n }\n }\n\n &.MuiStep-vertical {\n &.completed {\n .dot-typography,\n .dot-icon {\n color: ", ";\n }\n }\n\n &.active {\n .dot-icon {\n background: ", ";\n color: ", ";\n }\n .step-label.dot-typography {\n color: ", ";\n }\n .dot-typography {\n color: ", ";\n }\n }\n\n &.error {\n .dot-typography {\n color: ", ";\n }\n\n .dot-icon {\n background: ", ";\n border: 1px solid ", ";\n color: ", ";\n }\n }\n }\n\n &.disabled {\n .dot-icon {\n color: ", ";\n }\n .dot-typography {\n color: ", ";\n }\n }\n\n &:last-of-type .MuiStepContent-root {\n border-left-color: transparent;\n }\n }\n }\n\n .", " {\n width: 100%;\n\n .step-content-container {\n padding: ", ";\n }\n }\n }\n "], ["\n &.", " {\n display: flex;\n align-items: flex-start;\n padding: 0;\n width: 100%;\n\n &.left {\n flex-direction: row;\n .", " {\n border-left: 1px solid ", ";\n }\n }\n\n &.right {\n flex-direction: row-reverse;\n .", " {\n border-right: 1px solid ", ";\n }\n }\n\n .", " {\n padding: ", ";\n\n &.MuiStepper-horizontal {\n padding: 0;\n display: flex;\n flex-direction: column;\n }\n\n .MuiStep-root {\n width: 315px;\n\n .dot-icon {\n display: flex;\n background: ", ";\n border-radius: 50%;\n color: ", ";\n height: 28px;\n width: 28px;\n }\n\n .dot-typography {\n color: ", ";\n }\n\n .MuiStepContent-root {\n border-left-color: ", ";\n }\n\n &.MuiStep-horizontal {\n padding: ", ";\n\n .dot-avatar i:before {\n color: ", ";\n }\n .dot-avatar,\n .dot-icon {\n background: ", ";\n }\n .dot-typography {\n color: ", ";\n }\n .horizontal-step-description {\n color: ", ";\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &.completed {\n .dot-avatar i:before {\n color: ", ";\n }\n .dot-avatar,\n .dot-icon {\n background: ", ";\n }\n }\n\n &.active {\n background: ", ";\n }\n\n &.error {\n .dot-avatar i:before {\n color: ", ";\n }\n .dot-avatar,\n .dot-icon {\n background: ", ";\n }\n }\n\n &.in-progress {\n .dot-avatar i:before {\n color: ", ";\n }\n }\n }\n\n &.MuiStep-vertical {\n &.completed {\n .dot-typography,\n .dot-icon {\n color: ", ";\n }\n }\n\n &.active {\n .dot-icon {\n background: ", ";\n color: ", ";\n }\n .step-label.dot-typography {\n color: ", ";\n }\n .dot-typography {\n color: ", ";\n }\n }\n\n &.error {\n .dot-typography {\n color: ", ";\n }\n\n .dot-icon {\n background: ", ";\n border: 1px solid ", ";\n color: ", ";\n }\n }\n }\n\n &.disabled {\n .dot-icon {\n color: ", ";\n }\n .dot-typography {\n color: ", ";\n }\n }\n\n &:last-of-type .MuiStepContent-root {\n border-left-color: transparent;\n }\n }\n }\n\n .", " {\n width: 100%;\n\n .step-content-container {\n padding: ", ";\n }\n }\n }\n "])), rootClassName$i, contentClassName, theme.palette.layer.n200, contentClassName, theme.palette.layer.n200, stepListClassName, theme.spacing(3), theme.palette.primary['50'], theme.palette.primary['50'], theme.palette.layer.n300, theme.palette.layer.n300, theme.spacing(1), theme.palette.layer.n300, theme.palette.layer.n100, theme.palette.layer.n500, theme.palette.layer.n400, theme.palette.secondary['500'], theme.palette.secondary['50'], theme.palette.layer['n50'], theme.palette.error['500'], theme.palette.error['50'], theme.palette.primary['400'], theme.palette.layer.n700, theme.palette.primary['400'], theme.palette.layer.n0, theme.palette.primary['500'], theme.palette.layer.n700, theme.palette.error.main, theme.palette.layer.n0, theme.palette.error.main, theme.palette.error.main, theme.palette.primary['50'], theme.palette.layer.n300, contentClassName, theme.spacing(3, 3, 2, 3));
8512
+ return styled.css(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n &.", " {\n display: flex;\n align-items: flex-start;\n padding: 0;\n width: 100%;\n\n &.left {\n flex-direction: row;\n }\n\n &.right {\n flex-direction: row-reverse;\n }\n\n .", " {\n padding: ", ";\n\n &.MuiStepper-horizontal {\n padding: 0;\n display: flex;\n flex-direction: column;\n }\n\n .MuiStep-root {\n width: 315px;\n\n .dot-icon {\n display: flex;\n background: ", ";\n border-radius: 50%;\n color: ", ";\n height: 28px;\n width: 28px;\n }\n\n .dot-typography {\n color: ", ";\n }\n\n .MuiStepContent-root {\n border-left-color: ", ";\n }\n\n &.MuiStep-horizontal {\n padding: ", ";\n\n .dot-avatar i:before {\n color: ", ";\n }\n .dot-avatar,\n .dot-icon {\n background: ", ";\n }\n .dot-typography {\n color: ", ";\n }\n .horizontal-step-description {\n color: ", ";\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &.completed {\n .dot-avatar i:before {\n color: ", ";\n }\n .dot-avatar,\n .dot-icon {\n background: ", ";\n }\n }\n\n &.active {\n background: ", ";\n }\n\n &.error {\n .dot-avatar i:before {\n color: ", ";\n }\n .dot-avatar,\n .dot-icon {\n background: ", ";\n }\n }\n\n &.in-progress {\n .dot-avatar i:before {\n color: ", ";\n }\n }\n }\n\n &.MuiStep-vertical {\n &.completed {\n .dot-typography,\n .dot-icon {\n color: ", ";\n }\n }\n\n &.active {\n .dot-icon {\n background: ", ";\n color: ", ";\n }\n .step-label.dot-typography {\n color: ", ";\n }\n .dot-typography {\n color: ", ";\n }\n }\n\n &.error {\n .dot-typography {\n color: ", ";\n }\n\n .dot-icon {\n background: ", ";\n border: 1px solid ", ";\n color: ", ";\n }\n }\n }\n\n &.disabled {\n .dot-icon {\n color: ", ";\n }\n .dot-typography {\n color: ", ";\n }\n }\n\n &:last-of-type .MuiStepContent-root {\n border-left-color: transparent;\n }\n }\n }\n\n .", " {\n width: 100%;\n\n .step-content-container {\n padding: ", ";\n }\n }\n }\n "], ["\n &.", " {\n display: flex;\n align-items: flex-start;\n padding: 0;\n width: 100%;\n\n &.left {\n flex-direction: row;\n }\n\n &.right {\n flex-direction: row-reverse;\n }\n\n .", " {\n padding: ", ";\n\n &.MuiStepper-horizontal {\n padding: 0;\n display: flex;\n flex-direction: column;\n }\n\n .MuiStep-root {\n width: 315px;\n\n .dot-icon {\n display: flex;\n background: ", ";\n border-radius: 50%;\n color: ", ";\n height: 28px;\n width: 28px;\n }\n\n .dot-typography {\n color: ", ";\n }\n\n .MuiStepContent-root {\n border-left-color: ", ";\n }\n\n &.MuiStep-horizontal {\n padding: ", ";\n\n .dot-avatar i:before {\n color: ", ";\n }\n .dot-avatar,\n .dot-icon {\n background: ", ";\n }\n .dot-typography {\n color: ", ";\n }\n .horizontal-step-description {\n color: ", ";\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &.completed {\n .dot-avatar i:before {\n color: ", ";\n }\n .dot-avatar,\n .dot-icon {\n background: ", ";\n }\n }\n\n &.active {\n background: ", ";\n }\n\n &.error {\n .dot-avatar i:before {\n color: ", ";\n }\n .dot-avatar,\n .dot-icon {\n background: ", ";\n }\n }\n\n &.in-progress {\n .dot-avatar i:before {\n color: ", ";\n }\n }\n }\n\n &.MuiStep-vertical {\n &.completed {\n .dot-typography,\n .dot-icon {\n color: ", ";\n }\n }\n\n &.active {\n .dot-icon {\n background: ", ";\n color: ", ";\n }\n .step-label.dot-typography {\n color: ", ";\n }\n .dot-typography {\n color: ", ";\n }\n }\n\n &.error {\n .dot-typography {\n color: ", ";\n }\n\n .dot-icon {\n background: ", ";\n border: 1px solid ", ";\n color: ", ";\n }\n }\n }\n\n &.disabled {\n .dot-icon {\n color: ", ";\n }\n .dot-typography {\n color: ", ";\n }\n }\n\n &:last-of-type .MuiStepContent-root {\n border-left-color: transparent;\n }\n }\n }\n\n .", " {\n width: 100%;\n\n .step-content-container {\n padding: ", ";\n }\n }\n }\n "])), rootClassName$i, stepListClassName, theme.spacing(3), theme.palette.primary['50'], theme.palette.primary['50'], theme.palette.layer.n300, theme.palette.layer.n300, theme.spacing(1), theme.palette.layer.n300, theme.palette.layer.n100, theme.palette.layer.n500, theme.palette.layer.n400, theme.palette.secondary['500'], theme.palette.secondary['50'], theme.palette.layer['n50'], theme.palette.error['500'], theme.palette.error['50'], theme.palette.primary['400'], theme.palette.layer.n700, theme.palette.primary['400'], theme.palette.layer.n0, theme.palette.primary['500'], theme.palette.layer.n700, theme.palette.error.main, theme.palette.layer.n0, theme.palette.error.main, theme.palette.error.main, theme.palette.primary['50'], theme.palette.layer.n300, contentClassName, theme.spacing(3, 3, 2, 3));
8506
8513
  });
8507
8514
  var ScrollbarContainer = styled__default["default"].div.withConfig({
8508
8515
  displayName: "Stepperstyles__ScrollbarContainer",
8509
8516
  componentId: "sc-1qka0yq-1"
8510
8517
  })(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
8511
- _a.theme;
8512
- var offset = _a.offset;
8513
- return styled.css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n height: ", ";\n overflow-y: auto;\n\n &.center-content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n }\n "], ["\n height: ", ";\n overflow-y: auto;\n\n &.center-content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n }\n "])), "calc(100vh - " + offset + "px)");
8518
+ var theme = _a.theme,
8519
+ offset = _a.offset;
8520
+ return styled.css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n height: ", ";\n overflow-y: auto;\n\n &.left {\n border-right: 1px solid ", ";\n }\n &.right {\n border-left: 1px solid ", ";\n }\n &.center-content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n }\n "], ["\n height: ", ";\n overflow-y: auto;\n\n &.left {\n border-right: 1px solid ", ";\n }\n &.right {\n border-left: 1px solid ", ";\n }\n &.center-content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n }\n "])), "calc(100vh - " + offset + "px)", theme.palette.layer.n200, theme.palette.layer.n200);
8514
8521
  });
8515
8522
  var StepContentWrapper = styled__default["default"].div.withConfig({
8516
8523
  displayName: "Stepperstyles__StepContentWrapper",
@@ -8589,7 +8596,7 @@
8589
8596
  var displayCancelButton = !!(!displayInitialContent && !displayFinalContent && onCancel);
8590
8597
  var isLastStep = currentStep === steps.length && !finalContent || currentStep > steps.length && finalContent;
8591
8598
  var rootClasses = useStylesWithRootClass(rootClassName$i, stepsPosition, className);
8592
- var centerContentClass = displayInitialContent || displayFinalContent ? 'center-content' : '';
8599
+ var stepContentClasses = displayInitialContent || displayFinalContent ? 'center-content' : '';
8593
8600
  var stickyBottomClasses = useStylesWithRootClass(isStickyBottom ? 'with-top-border' : '');
8594
8601
  var actionsClasses = useStylesWithRootClass('actions', displayInitialContent || displayFinalContent ? 'center-actions' : '');
8595
8602
  React.useEffect(function () {
@@ -8689,15 +8696,15 @@
8689
8696
  }
8690
8697
  };
8691
8698
  var renderContent = function renderContent() {
8692
- return jsxRuntime.jsxs("div", __assign({
8699
+ return jsxRuntime.jsx("div", __assign({
8693
8700
  className: contentClassName,
8694
8701
  ref: stepperContentRef
8695
8702
  }, {
8696
- children: [jsxRuntime.jsx(ScrollbarContainer, __assign({
8697
- offset: offset + 81,
8698
- className: centerContentClass
8703
+ children: jsxRuntime.jsxs(ScrollbarContainer, __assign({
8704
+ offset: offset,
8705
+ className: stepContentClasses
8699
8706
  }, {
8700
- children: jsxRuntime.jsx(CssGrid, __assign({
8707
+ children: [jsxRuntime.jsx(CssGrid, __assign({
8701
8708
  className: "step-content-container"
8702
8709
  }, {
8703
8710
  children: jsxRuntime.jsx(CssCell, __assign({}, defaultCellProps, {
@@ -8705,56 +8712,57 @@
8705
8712
  }, {
8706
8713
  children: getStepContent(currentStep)
8707
8714
  }), void 0)
8708
- }), void 0)
8709
- }), void 0), jsxRuntime.jsx(StepActionsContainer, __assign({
8710
- className: stickyBottomClasses,
8711
- ref: actionsRef,
8712
- displayCancelButton: displayCancelButton
8713
- }, {
8714
- children: jsxRuntime.jsx(CssGrid, {
8715
- children: jsxRuntime.jsx(CssCell, __assign({}, defaultCellProps, {
8716
- className: actionsClasses,
8717
- lg: {
8718
- start: 4,
8719
- span: 6
8720
- }
8721
- }, {
8722
- children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
8723
- children: [displayCancelButton && jsxRuntime.jsx(DotButton, __assign({
8724
- className: "cancel-stepper",
8725
- onClick: onCancel,
8726
- type: "text",
8727
- "data-testid": "stepper-cancel-button"
8728
- }, {
8729
- children: "Cancel"
8730
- }), void 0), jsxRuntime.jsxs("div", __assign({
8731
- className: "navigation-buttons"
8732
- }, {
8733
- children: [!displayInitialContent && currentStep !== 1 && jsxRuntime.jsx(DotButton, __assign({
8734
- onClick: handleBack,
8735
- type: "outlined",
8736
- "data-testid": "stepper-previous-button"
8715
+ }), void 0), jsxRuntime.jsx(StepActionsContainer, __assign({
8716
+ className: stickyBottomClasses,
8717
+ ref: actionsRef,
8718
+ displayCancelButton: displayCancelButton
8719
+ }, {
8720
+ children: jsxRuntime.jsx(CssGrid, {
8721
+ children: jsxRuntime.jsx(CssCell, __assign({}, defaultCellProps, {
8722
+ className: actionsClasses,
8723
+ lg: {
8724
+ start: 4,
8725
+ span: 6
8726
+ }
8727
+ }, {
8728
+ children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
8729
+ children: [displayCancelButton && jsxRuntime.jsx(DotButton, __assign({
8730
+ className: "cancel-stepper",
8731
+ onClick: onCancel,
8732
+ type: "text",
8733
+ "data-testid": "stepper-cancel-button"
8737
8734
  }, {
8738
- children: "Previous"
8739
- }), void 0), jsxRuntime.jsx(DotButton, __assign({
8740
- onClick: handleNext,
8741
- disabled: nextStepDisabled,
8742
- "data-testid": "stepper-next-button"
8735
+ children: "Cancel"
8736
+ }), void 0), jsxRuntime.jsxs("div", __assign({
8737
+ className: "navigation-buttons"
8743
8738
  }, {
8744
- children: isLastStep ? submitButtonText : nextButtonText
8739
+ children: [!displayInitialContent && currentStep !== 1 && jsxRuntime.jsx(DotButton, __assign({
8740
+ onClick: handleBack,
8741
+ type: "outlined",
8742
+ "data-testid": "stepper-previous-button"
8743
+ }, {
8744
+ children: "Previous"
8745
+ }), void 0), jsxRuntime.jsx(DotButton, __assign({
8746
+ onClick: handleNext,
8747
+ disabled: nextStepDisabled,
8748
+ "data-testid": "stepper-next-button"
8749
+ }, {
8750
+ children: isLastStep ? submitButtonText : nextButtonText
8751
+ }), void 0)]
8745
8752
  }), void 0)]
8746
- }), void 0)]
8747
- }, void 0)
8748
- }), void 0)
8749
- }, void 0)
8750
- }), void 0)]
8753
+ }, void 0)
8754
+ }), void 0)
8755
+ }, void 0)
8756
+ }), void 0)]
8757
+ }), void 0)
8751
8758
  }), void 0);
8752
8759
  };
8753
8760
  return jsxRuntime.jsxs(StyledStepper, __assign({
8754
8761
  className: rootClasses
8755
8762
  }, {
8756
8763
  children: [jsxRuntime.jsx(ScrollbarContainer, __assign({
8757
- offset: offset
8764
+ offset: offset,
8765
+ className: stepsPosition
8758
8766
  }, {
8759
8767
  children: jsxRuntime.jsx(material.Stepper, __assign({
8760
8768
  activeStep: currentStep,
@@ -10,3 +10,4 @@ export interface GetChipsFromAutocompleteProps {
10
10
  }
11
11
  export declare const getChipsFromAutocomplete: ({ chipSize, getTagProps, isReadOnly, values, }: GetChipsFromAutocompleteProps) => JSX.Element[];
12
12
  export declare const checkIfDuplicateItem: (itemText: string, autocompleteOptions: AutoCompleteOption[]) => boolean;
13
+ export declare const isEmptyValue: (value: AutoCompleteValue) => boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@digital-ai/dot-components",
3
- "version": "2.11.1",
3
+ "version": "2.11.2",
4
4
  "private": false,
5
5
  "license": "SEE LICENSE IN <LICENSE.md>",
6
6
  "contributors": [