npm - @dnb/eufemia - Versions diffs - 10.6.0 → 10.8.0 - Mend

@dnb/eufemia 10.6.0 → 10.8.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 (1125) hide show

package/es/components/section/style/themes/dnb-section-theme-ui.css CHANGED Viewed

@@ -9,6 +9,15 @@
 /*
  * Utilities
  */
+.dnb-section {
+  /** deprecated: default should be white in v11 */
+  /** deprecated */
+  /** deprecated */
+  /** deprecated */
+  /** deprecated */
+  /** deprecated */
+  /** deprecated */
+}
 .dnb-section--divider {
   color: var(--color-black-80);
 }
@@ -19,10 +28,10 @@
 .dnb-section--transparent::after {
   color: transparent;
 }
-.dnb-section--mint-green-12 {
+.dnb-section--mint-green-12, .dnb-section--default {
   color: var(--color-black-80);
 }
-.dnb-section--mint-green-12::after {
+.dnb-section--mint-green-12::after, .dnb-section--default::after {
   color: var(--color-mint-green-12);
 }
 .dnb-section--white {
@@ -43,16 +52,16 @@
 .dnb-section--lavender::after {
   color: var(--color-lavender);
 }
-.dnb-section--sand-yellow {
+.dnb-section--sand-yellow, .dnb-section--warning {
   color: var(--color-black-80);
 }
-.dnb-section--sand-yellow::after {
+.dnb-section--sand-yellow::after, .dnb-section--warning::after {
   color: var(--color-sand-yellow);
 }
-.dnb-section--pistachio {
+.dnb-section--pistachio, .dnb-section--info {
   color: var(--color-black-80);
 }
-.dnb-section--pistachio::after {
+.dnb-section--pistachio::after, .dnb-section--info::after {
   color: var(--color-pistachio);
 }
 .dnb-section--black-3 {
@@ -79,25 +88,31 @@
 .dnb-section--fire-red::after {
   color: var(--color-fire-red);
 }
-.dnb-section--fire-red-8 {
+.dnb-section--fire-red-8, .dnb-section--error {
   color: var(--color-black-80);
 }
-.dnb-section--fire-red-8::after {
+.dnb-section--fire-red-8::after, .dnb-section--error::after {
   color: var(--color-fire-red-8);
 }
-.dnb-section--fire-red .dnb-anchor, .dnb-section--emerald-green .dnb-anchor, .dnb-section--sea-green .dnb-anchor {
+.dnb-section--success {
+  color: var(--color-white);
+}
+.dnb-section--success::after {
+  color: var(--color-success-green);
+}
+.dnb-section--fire-red .dnb-anchor, .dnb-section--emerald-green .dnb-anchor, .dnb-section--sea-green .dnb-anchor, .dnb-section--success .dnb-anchor {
   color: var(--color-white);
 }
-.dnb-section--fire-red .dnb-anchor:hover, .dnb-section--emerald-green .dnb-anchor:hover, .dnb-section--sea-green .dnb-anchor:hover {
+.dnb-section--fire-red .dnb-anchor:hover, .dnb-section--emerald-green .dnb-anchor:hover, .dnb-section--sea-green .dnb-anchor:hover, .dnb-section--success .dnb-anchor:hover {
   color: var(--color-emerald-green);
   box-shadow: inset 100vw 100vw 0 0 var(--color-white), -0.125em 0 0 0 var(--color-white), 0.125em 0 0 0 var(--color-white);
 }
-.dnb-section--fire-red .dnb-anchor:active, .dnb-section--emerald-green .dnb-anchor:active, .dnb-section--sea-green .dnb-anchor:active {
+.dnb-section--fire-red .dnb-anchor:active, .dnb-section--emerald-green .dnb-anchor:active, .dnb-section--sea-green .dnb-anchor:active, .dnb-section--success .dnb-anchor:active {
   color: var(--color-white);
   background-color: transparent;
   box-shadow: inset 100vw 100vw 0 0 transparent, -0.125em 0 0 0 transparent, 0.125em 0 0 0 transparent;
 }
-.dnb-section--fire-red .dnb-anchor.focus-visible, .dnb-section--emerald-green .dnb-anchor.focus-visible, .dnb-section--sea-green .dnb-anchor.focus-visible {
+.dnb-section--fire-red .dnb-anchor.focus-visible, .dnb-section--emerald-green .dnb-anchor.focus-visible, .dnb-section--sea-green .dnb-anchor.focus-visible, .dnb-section--success .dnb-anchor.focus-visible {
   color: var(--color-white);
   background-color: transparent;
   outline: none;
@@ -106,7 +121,7 @@
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
-.dnb-section--fire-red .dnb-anchor:focus-visible, .dnb-section--emerald-green .dnb-anchor:focus-visible, .dnb-section--sea-green .dnb-anchor:focus-visible {
+.dnb-section--fire-red .dnb-anchor:focus-visible, .dnb-section--emerald-green .dnb-anchor:focus-visible, .dnb-section--sea-green .dnb-anchor:focus-visible, .dnb-section--success .dnb-anchor:focus-visible {
   color: var(--color-white);
   background-color: transparent;
   outline: none;

package/es/components/section/style/themes/dnb-section-theme-ui.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- .dnb-section--divider{color:var(--color-black-80)}.dnb-section--divider:after{box-shadow:99vw 0 0 0 currentcolor,198vw 0 0 0 currentcolor,297vw 0 0 0 currentcolor,396vw 0 0 0 currentcolor,0 .0625rem 0 0 var(--color-mint-green-50),99vw .0625rem 0 0 var(--color-mint-green-50),0 -.0625rem 0 0 var(--color-mint-green-50),99vw -.0625rem 0 0 var(--color-mint-green-50),198vw .0625rem 0 0 var(--color-mint-green-50),198vw -.0625rem 0 0 var(--color-mint-green-50);color:var(--color-white)}.dnb-section--transparent:after{color:transparent}.dnb-section--mint-green-12{color:var(--color-black-80)}.dnb-section--mint-green-12:after{color:var(--color-mint-green-12)}.dnb-section--white{color:var(--color-black-80)}.dnb-section--white:after{color:var(--color-white)}.dnb-section--mint-green{color:var(--color-black-80)}.dnb-section--mint-green:after{color:var(--color-mint-green)}.dnb-section--lavender{color:var(--color-black-80)}.dnb-section--lavender:after{color:var(--color-lavender)}.dnb-section--sand-yellow{color:var(--color-black-80)}.dnb-section--sand-yellow:after{color:var(--color-sand-yellow)}.dnb-section--pistachio{color:var(--color-black-80)}.dnb-section--pistachio:after{color:var(--color-pistachio)}.dnb-section--black-3{color:var(--color-black-80)}.dnb-section--black-3:after{color:var(--color-black-3)}.dnb-section--emerald-green{color:var(--color-mint-green)}.dnb-section--emerald-green:after{color:var(--color-emerald-green)}.dnb-section--sea-green{color:var(--color-white)}.dnb-section--sea-green:after{color:var(--color-sea-green)}.dnb-section--fire-red{color:var(--color-white)}.dnb-section--fire-red:after{color:var(--color-fire-red)}.dnb-section--fire-red-8{color:var(--color-black-80)}.dnb-section--fire-red-8:after{color:var(--color-fire-red-8)}.dnb-section--emerald-green .dnb-anchor,.dnb-section--fire-red .dnb-anchor,.dnb-section--sea-green .dnb-anchor{color:var(--color-white)}.dnb-section--emerald-green .dnb-anchor:hover,.dnb-section--fire-red .dnb-anchor:hover,.dnb-section--sea-green .dnb-anchor:hover{box-shadow:inset 100vw 100vw 0 0 var(--color-white),-.125em 0 0 0 var(--color-white),.125em 0 0 0 var(--color-white);color:var(--color-emerald-green)}.dnb-section--emerald-green .dnb-anchor:active,.dnb-section--fire-red .dnb-anchor:active,.dnb-section--sea-green .dnb-anchor:active{background-color:transparent;box-shadow:inset 100vw 100vw 0 0 transparent,-.125em 0 0 0 transparent,.125em 0 0 0 transparent;color:var(--color-white)}.dnb-section--emerald-green .dnb-anchor.focus-visible,.dnb-section--fire-red .dnb-anchor.focus-visible,.dnb-section--sea-green .dnb-anchor.focus-visible{--border-color:var(--color-white);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white);outline:none}.dnb-section--emerald-green .dnb-anchor:focus-visible,.dnb-section--fire-red .dnb-anchor:focus-visible,.dnb-section--sea-green .dnb-anchor:focus-visible{--border-color:var(--color-white);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white);outline:none}.dnb-section--emerald-green .dnb-button--tertiary,.dnb-section--emerald-green .dnb-button--tertiary:hover,.dnb-section--fire-red .dnb-button--tertiary,.dnb-section--fire-red .dnb-button--tertiary:hover,.dnb-section--sea-green .dnb-button--tertiary,.dnb-section--sea-green .dnb-button--tertiary:hover{color:var(--color-white)}.dnb-section--emerald-green .dnb-button--tertiary:hover .dnb-button__text:after,.dnb-section--fire-red .dnb-button--tertiary:hover .dnb-button__text:after,.dnb-section--sea-green .dnb-button--tertiary:hover .dnb-button__text:after{color:var(--color-white)!important}.dnb-section--emerald-green .dnb-button--tertiary:focus,.dnb-section--fire-red .dnb-button--tertiary:focus,.dnb-section--sea-green .dnb-button--tertiary:focus{color:var(--color-white)}.dnb-section--emerald-green .dnb-button--tertiary:focus:before,.dnb-section--fire-red .dnb-button--tertiary:focus:before,.dnb-section--sea-green .dnb-button--tertiary:focus:before{outline:none}html[data-whatinput=keyboard] .dnb-section--emerald-green .dnb-button--tertiary:focus:before,html[data-whatinput=keyboard] .dnb-section--fire-red .dnb-button--tertiary:focus:before,html[data-whatinput=keyboard] .dnb-section--sea-green .dnb-button--tertiary:focus:before{--border-color:var(--color-white);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-section--fire-red ::selection,.dnb-section--mint-green ::selection{background-color:var(--color-white)}
1	+ .dnb-section--divider{color:var(--color-black-80)}.dnb-section--divider:after{box-shadow:99vw 0 0 0 currentcolor,198vw 0 0 0 currentcolor,297vw 0 0 0 currentcolor,396vw 0 0 0 currentcolor,0 .0625rem 0 0 var(--color-mint-green-50),99vw .0625rem 0 0 var(--color-mint-green-50),0 -.0625rem 0 0 var(--color-mint-green-50),99vw -.0625rem 0 0 var(--color-mint-green-50),198vw .0625rem 0 0 var(--color-mint-green-50),198vw -.0625rem 0 0 var(--color-mint-green-50);color:var(--color-white)}.dnb-section--transparent:after{color:transparent}.dnb-section--default,.dnb-section--mint-green-12{color:var(--color-black-80)}.dnb-section--default:after,.dnb-section--mint-green-12:after{color:var(--color-mint-green-12)}.dnb-section--white{color:var(--color-black-80)}.dnb-section--white:after{color:var(--color-white)}.dnb-section--mint-green{color:var(--color-black-80)}.dnb-section--mint-green:after{color:var(--color-mint-green)}.dnb-section--lavender{color:var(--color-black-80)}.dnb-section--lavender:after{color:var(--color-lavender)}.dnb-section--sand-yellow,.dnb-section--warning{color:var(--color-black-80)}.dnb-section--sand-yellow:after,.dnb-section--warning:after{color:var(--color-sand-yellow)}.dnb-section--info,.dnb-section--pistachio{color:var(--color-black-80)}.dnb-section--info:after,.dnb-section--pistachio:after{color:var(--color-pistachio)}.dnb-section--black-3{color:var(--color-black-80)}.dnb-section--black-3:after{color:var(--color-black-3)}.dnb-section--emerald-green{color:var(--color-mint-green)}.dnb-section--emerald-green:after{color:var(--color-emerald-green)}.dnb-section--sea-green{color:var(--color-white)}.dnb-section--sea-green:after{color:var(--color-sea-green)}.dnb-section--fire-red{color:var(--color-white)}.dnb-section--fire-red:after{color:var(--color-fire-red)}.dnb-section--error,.dnb-section--fire-red-8{color:var(--color-black-80)}.dnb-section--error:after,.dnb-section--fire-red-8:after{color:var(--color-fire-red-8)}.dnb-section--success{color:var(--color-white)}.dnb-section--success:after{color:var(--color-success-green)}.dnb-section--emerald-green .dnb-anchor,.dnb-section--fire-red .dnb-anchor,.dnb-section--sea-green .dnb-anchor,.dnb-section--success .dnb-anchor{color:var(--color-white)}.dnb-section--emerald-green .dnb-anchor:hover,.dnb-section--fire-red .dnb-anchor:hover,.dnb-section--sea-green .dnb-anchor:hover,.dnb-section--success .dnb-anchor:hover{box-shadow:inset 100vw 100vw 0 0 var(--color-white),-.125em 0 0 0 var(--color-white),.125em 0 0 0 var(--color-white);color:var(--color-emerald-green)}.dnb-section--emerald-green .dnb-anchor:active,.dnb-section--fire-red .dnb-anchor:active,.dnb-section--sea-green .dnb-anchor:active,.dnb-section--success .dnb-anchor:active{background-color:transparent;box-shadow:inset 100vw 100vw 0 0 transparent,-.125em 0 0 0 transparent,.125em 0 0 0 transparent;color:var(--color-white)}.dnb-section--emerald-green .dnb-anchor.focus-visible,.dnb-section--fire-red .dnb-anchor.focus-visible,.dnb-section--sea-green .dnb-anchor.focus-visible,.dnb-section--success .dnb-anchor.focus-visible{--border-color:var(--color-white);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white);outline:none}.dnb-section--emerald-green .dnb-anchor:focus-visible,.dnb-section--fire-red .dnb-anchor:focus-visible,.dnb-section--sea-green .dnb-anchor:focus-visible,.dnb-section--success .dnb-anchor:focus-visible{--border-color:var(--color-white);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white);outline:none}.dnb-section--emerald-green .dnb-button--tertiary,.dnb-section--emerald-green .dnb-button--tertiary:hover,.dnb-section--fire-red .dnb-button--tertiary,.dnb-section--fire-red .dnb-button--tertiary:hover,.dnb-section--sea-green .dnb-button--tertiary,.dnb-section--sea-green .dnb-button--tertiary:hover{color:var(--color-white)}.dnb-section--emerald-green .dnb-button--tertiary:hover .dnb-button__text:after,.dnb-section--fire-red .dnb-button--tertiary:hover .dnb-button__text:after,.dnb-section--sea-green .dnb-button--tertiary:hover .dnb-button__text:after{color:var(--color-white)!important}.dnb-section--emerald-green .dnb-button--tertiary:focus,.dnb-section--fire-red .dnb-button--tertiary:focus,.dnb-section--sea-green .dnb-button--tertiary:focus{color:var(--color-white)}.dnb-section--emerald-green .dnb-button--tertiary:focus:before,.dnb-section--fire-red .dnb-button--tertiary:focus:before,.dnb-section--sea-green .dnb-button--tertiary:focus:before{outline:none}html[data-whatinput=keyboard] .dnb-section--emerald-green .dnb-button--tertiary:focus:before,html[data-whatinput=keyboard] .dnb-section--fire-red .dnb-button--tertiary:focus:before,html[data-whatinput=keyboard] .dnb-section--sea-green .dnb-button--tertiary:focus:before{--border-color:var(--color-white);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-section--fire-red ::selection,.dnb-section--mint-green ::selection{background-color:var(--color-white)}

package/es/components/section/style/themes/dnb-section-theme-ui.scss CHANGED Viewed

@@ -11,8 +11,11 @@
     &::after {
       color: var(--color-white);
-      box-shadow: 99vw 0 0 0 currentcolor, 198vw 0 0 0 currentcolor,
-        297vw 0 0 0 currentcolor, 396vw 0 0 0 currentcolor,
+      box-shadow:
+        99vw 0 0 0 currentcolor,
+        198vw 0 0 0 currentcolor,
+        297vw 0 0 0 currentcolor,
+        396vw 0 0 0 currentcolor,
         0 0.0625rem 0 0 var(--color-mint-green-50),
         99vw 0.0625rem 0 0 var(--color-mint-green-50),
         0 -0.0625rem 0 0 var(--color-mint-green-50),
@@ -28,7 +31,9 @@
     }
   }
-  &--mint-green-12 {
+  /** deprecated: default should be white in v11 */
+  &--mint-green-12,
+  &--default {
     color: var(--color-black-80);
     &::after {
@@ -44,6 +49,7 @@
     }
   }
+  /** deprecated */
   &--mint-green {
     color: var(--color-black-80);
@@ -52,6 +58,7 @@
     }
   }
+  /** deprecated */
   &--lavender {
     color: var(--color-black-80);
@@ -60,7 +67,8 @@
     }
   }
-  &--sand-yellow {
+  &--sand-yellow,/** deprecated */
+  &--warning {
     color: var(--color-black-80);
     &::after {
@@ -68,7 +76,8 @@
     }
   }
-  &--pistachio {
+  &--pistachio,/** deprecated */
+  &--info {
     color: var(--color-black-80);
     &::after {
@@ -76,6 +85,7 @@
     }
   }
+  /** deprecated */
   &--black-3 {
     color: var(--color-black-80);
@@ -84,6 +94,7 @@
     }
   }
+  /** deprecated */
   &--emerald-green {
     color: var(--color-mint-green);
@@ -92,6 +103,7 @@
     }
   }
+  /** deprecated */
   &--sea-green {
     color: var(--color-white);
@@ -100,6 +112,7 @@
     }
   }
+  /** deprecated */
   &--fire-red {
     color: var(--color-white);
@@ -108,7 +121,8 @@
     }
   }
-  &--fire-red-8 {
+  &--fire-red-8,/** deprecated */
+  &--error {
     color: var(--color-black-80);
     &::after {
@@ -116,16 +130,25 @@
     }
   }
+  &--success {
+    color: var(--color-white);
+    &::after {
+      color: var(--color-success-green);
+    }
+  }
   // Contrast styles
-  &--fire-red .dnb-anchor,
-  &--emerald-green .dnb-anchor,
-  &--sea-green .dnb-anchor {
+  &--fire-red .dnb-anchor,/** deprecated */
+  &--emerald-green .dnb-anchor,/** deprecated */
+  &--sea-green .dnb-anchor,/** deprecated */
+  &--success .dnb-anchor {
     @include useAnchorContrastStyle();
   }
-  &--fire-red .dnb-button--tertiary,
-  &--emerald-green .dnb-button--tertiary,
-  &--sea-green .dnb-button--tertiary {
+  &--fire-red .dnb-button--tertiary,/** deprecated */
+  &--emerald-green .dnb-button--tertiary,/** deprecated */
+  &--sea-green .dnb-button--tertiary /** deprecated */ {
     color: var(--color-white);
     &:hover {
@@ -146,8 +169,8 @@
   }
   // contrast color
-  &--fire-red,
-  &--mint-green {
+  &--fire-red,/** deprecated */
+  &--mint-green /** deprecated */ {
     ::selection {
       background-color: var(--color-white);
     }

package/es/components/skeleton/style/dnb-skeleton.scss CHANGED Viewed

@@ -125,7 +125,8 @@ $fonts-path: '../../assets/fonts/dnb' !default;
 // Skeleton-Regular
 @font-face {
   font-family: DNBSkeleton;
-  src: url('#{$fonts-path}/skeleton/DNB-Skeleton-Regular.woff2')
+  src:
+    url('#{$fonts-path}/skeleton/DNB-Skeleton-Regular.woff2')
       format('woff2'),
     url('#{$fonts-path}/skeleton/DNB-Skeleton-Regular.woff') format('woff'),
     url('#{$fonts-path}/skeleton/DNB-Skeleton-Regular.ttf')
@@ -138,7 +139,8 @@ $fonts-path: '../../assets/fonts/dnb' !default;
 // Skeleton-Medium
 @font-face {
   font-family: DNBSkeleton;
-  src: url('#{$fonts-path}/skeleton/DNB-Skeleton-Medium.woff2')
+  src:
+    url('#{$fonts-path}/skeleton/DNB-Skeleton-Medium.woff2')
       format('woff2'),
     url('#{$fonts-path}/skeleton/DNB-Skeleton-Medium.woff') format('woff'),
     url('#{$fonts-path}/skeleton/DNB-Skeleton-Medium.ttf')
@@ -151,8 +153,8 @@ $fonts-path: '../../assets/fonts/dnb' !default;
 // Skeleton-Bold
 @font-face {
   font-family: DNBSkeleton;
-  src: url('#{$fonts-path}/skeleton/DNB-Skeleton-Bold.woff2')
-      format('woff2'),
+  src:
+    url('#{$fonts-path}/skeleton/DNB-Skeleton-Bold.woff2') format('woff2'),
     url('#{$fonts-path}/skeleton/DNB-Skeleton-Bold.woff') format('woff'),
     url('#{$fonts-path}/skeleton/DNB-Skeleton-Bold.ttf') format('truetype');
   font-weight: 600;
@@ -163,7 +165,8 @@ $fonts-path: '../../assets/fonts/dnb' !default;
 // Mono-Skeleton
 @font-face {
   font-family: DNBMonoSkeleton;
-  src: url('#{$fonts-path}/skeleton/DNBMono-Skeleton-Regular.woff2')
+  src:
+    url('#{$fonts-path}/skeleton/DNBMono-Skeleton-Regular.woff2')
       format('woff2'),
     url('#{$fonts-path}/skeleton/DNBMono-Skeleton-Regular.woff')
       format('woff'),

package/es/components/slider/style/dnb-slider.scss CHANGED Viewed

@@ -199,8 +199,10 @@
   &__state--animate &__thumb,
   &__state--animate &__line {
-    transition: left 250ms var(--easing-default),
-      top 250ms var(--easing-default), bottom 250ms var(--easing-default),
+    transition:
+      left 250ms var(--easing-default),
+      top 250ms var(--easing-default),
+      bottom 250ms var(--easing-default),
       right 250ms var(--easing-default),
       box-shadow 250ms var(--easing-default);
   }

package/es/components/space/SpacingUtils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SpacingUtils.js","names":["warn","spacingDefaultProps","space","top","right","bottom","left","spacePatterns","small","medium","large","globalThis","CALC_CACHE","calc","types","hash","join","result","forEach","rawTypes","createTypeModifiers","type","push","length","createSpacingClasses","props","Element","p","Object","isFrozen","_objectSpread","i","isValidSpaceProp","entries","reduce","acc","direction","cur","String","typeModifiers","sum","sumTypes","nearestTypes","findNearestTypes","map","isInline","translateSpace","test","replace","splitTypes","split","clean","t","filter","r","firstLetter","parseFloat","num","foundType","findType","found","findTypeAll","listOfSpacePatterns","find","k","v","multiply","res","near","reverse","includes","nearNum","nearType","leftOver","foundMoreTypes","index","indexOf","propName","removeSpaceProps","elementName"],"sources":["../../../../src/components/space/SpacingUtils.ts"],"sourcesContent":["/*\n Space helper\n \n /\n\nimport { warn } from '../../shared/component-helper'\n\nimport type {\n SpaceType,\n SpacingUnknownProps,\n SpacingProps,\n SpaceTypesPositiveValuesType,\n SpaceTypesPositiveRemValuesType,\n SpaceStringTypes,\n} from './types'\n\ntype SpaceNumber = number\n\nexport const spacingDefaultProps: SpacingProps = {\n space: null,\n top: null,\n right: null,\n bottom: null,\n left: null,\n}\n// IMPORTANT: Keep the shorthand after the long type names\nexport const spacePatterns: Record<\n SpaceTypesPositiveValuesType,\n SpaceTypesPositiveRemValuesType\n> = {\n 'xx-small': 0.25,\n 'x-small': 0.5,\n small: 1,\n medium: 1.5,\n large: 2,\n 'x-large': 3,\n 'xx-large': 3.5,\n 'xx-large-x2': 7,\n}\n\n/*\n Helper function to generate a calc(var(--spacing-large) + var(--spacing-small))\n \n @param types 'small', '16px', '1rem'\n * @returns e.g. calc(var(--spacing-large) + var(--spacing-small))\n /\nglobalThis.CALC_CACHE = {}\nexport const calc = (...types: Array<SpaceType>) => {\n const hash = types.join('\|')\n if (globalThis.CALC_CACHE[hash]) {\n return globalThis.CALC_CACHE[hash]\n }\n\n const result: Array<string> = []\n\n types.forEach((rawTypes) => {\n createTypeModifiers(rawTypes as SpaceType).forEach((type) => {\n result.push(`var(--spacing-${type})`)\n })\n })\n\n return result.length\n ? (globalThis.CALC_CACHE[hash] = `calc(${result.join(' + ')})`)\n : null\n}\n\n/\n Creates a valid space CSS class out from given space types\n \n @param props\n * @param Element to check if it should be handled as inline\n * @returns \"dnb-space__large dnb-space__small\"\n /\nexport const createSpacingClasses = (\n props:\n \| SpacingProps\n /\n To support typical not defined props form components\n /\n \| SpacingUnknownProps,\n Element = null\n) => {\n const p = Object.isFrozen(props) ? { ...props } : props\n\n if (typeof p.space !== 'undefined') {\n if (\n typeof p.space === 'string' \|\|\n typeof p.space === 'number' \|\|\n (typeof p.space === 'boolean' && p.space)\n ) {\n p.top = p.right = p.bottom = p.left = p.space\n }\n if (typeof p.space === 'object') {\n for (const i in p.space) {\n if (!p[i] && isValidSpaceProp(i)) {\n p[i] = p.space[i]\n }\n }\n }\n delete p.space\n }\n\n return Object.entries(p).reduce((acc, [direction, cur]) => {\n if (isValidSpaceProp(direction)) {\n if (String(cur) === '0' \|\| String(cur) === 'false') {\n acc.push(`dnb-space__${direction}--zero`)\n } else if (cur) {\n const typeModifiers = createTypeModifiers(cur as SpaceType)\n\n // get the total sum\n const sum = sumTypes(typeModifiers)\n if (sum > 10) {\n warn(\n `Spacing of more than 10rem is not supported! You used ${sum} / (${typeModifiers.join(\n ','\n )})`\n )\n } else {\n // auto combine classes\n const nearestTypes = findNearestTypes(sum, true)\n\n acc = [\n ...acc,\n ...nearestTypes.map(\n (type) => `dnb-space__${direction}--${type}`\n ),\n ]\n }\n }\n } else if (direction === 'no_collapse') {\n acc.push('dnb-space--no-collapse')\n if (Element && isInline(Element)) {\n acc.push('dnb-space--inline')\n }\n }\n\n return acc\n }, [])\n}\n\n// @internal splits types by given string\nexport const translateSpace = (type: SpaceType) => {\n if (/-x2$/.test(String(type))) {\n return spacePatterns[String(type).replace(/-x2$/, '')] 2\n }\n return spacePatterns[String(type)] \|\| 0\n}\n\n// @internal Splits a string of: \"large x-small\" into an array of the same\nexport const splitTypes = (types: SpaceType \| Array<SpaceType>) => {\n if (typeof types === 'string') {\n const test = (types as SpaceStringTypes).split(/ /g)\n return clean(test as Array<SpaceStringTypes>)\n } else if (typeof types === 'boolean') {\n return ['small' as SpaceTypesPositiveValuesType]\n } else if (typeof types === 'number') {\n return [types]\n }\n\n return clean(types) \|\| null\n\n function clean(t: Array<SpaceType> \| Array<SpaceStringTypes>) {\n return t?.filter((r) => r && String(r).length > 0)\n }\n}\n\n// @internal Sums e.g. \"large\" + \"x-small\" to be = 2.5rem\nexport const sumTypes = (types: SpaceType \| Array<SpaceType>) =>\n splitTypes(types)\n .map((type) => translateSpace(type))\n .reduce((acc, cur) => {\n if (cur > 0) {\n acc += cur\n } else if (cur < 0) {\n acc -= cur\n }\n return acc\n }, 0)\n\n// @internal Returns an array with modifiers e.g. [\"large\", \"x-small\"]\nexport const createTypeModifiers = (\n types: SpaceType\n): Array<SpaceType> => {\n return (splitTypes(types) \|\| []).reduce((acc, type) => {\n if (type) {\n const firstLetter = String(type)[0]\n if (parseFloat(firstLetter) > -1) {\n // can be \"2rem\" or \"32px\" - but we want only a number\n let num = parseFloat(String(type))\n\n // check if we got pixels\n if (num >= 8 && /[0-9]px/.test(String(type))) {\n num = num / 16\n }\n\n // check if the type exists in our extensions\n const foundType = findType(num)\n\n // get the type\n if (foundType) {\n type = foundType\n } else {\n findNearestTypes(num).forEach((type) => {\n if (type) {\n acc.push(type)\n }\n })\n }\n }\n\n if (!(parseFloat(String(type)) > 0)) {\n acc.push(type)\n }\n }\n return acc\n }, [])\n}\n\n// @internal Finds from \"2.0\" the equivalent type \"large\"\nexport const findType = (num: SpaceNumber): SpaceType => {\n const found = findTypeAll(num)\n\n // get the type\n if (found) {\n return found[0]\n }\n\n return null\n}\n\n// @internal Finds from \"2.0\" the equivalent type \"large\" and returns all results\nexport const findTypeAll = (\n num: SpaceNumber\n): Array<\n SpaceTypesPositiveValuesType \| SpaceTypesPositiveRemValuesType\n> => {\n const listOfSpacePatterns = Object.entries(spacePatterns) as [\n SpaceTypesPositiveValuesType,\n SpaceTypesPositiveRemValuesType\n ][]\n const found =\n listOfSpacePatterns.find(([k, v]) => k && v === num) \|\| null\n return found\n}\n\n// @internal Finds from e.g. a value of \"2.5rem\" the nearest type = [\"large\", \"x-small\"]\nexport const findNearestTypes = (num: SpaceNumber, multiply = false) => {\n let res = []\n\n const near = Object.entries(spacePatterns)\n .reverse()\n .filter((k) => (multiply ? true : !k[0].includes('-x'))) // e.g. -x2\n .find(([k, v]) => k && num >= v)\n const nearNum = (near && near[1]) \|\| num\n const types = findTypeAll(nearNum)\n\n if (types) {\n const nearType = types[0]\n res.push(nearType)\n const leftOver = num - parseFloat(String(types[1]))\n const foundMoreTypes = findNearestTypes(leftOver, multiply)\n\n // if the value already exists, then replace it with an x2\n foundMoreTypes.forEach((type) => {\n const index = res.indexOf(type)\n if (index !== -1) {\n res[index] = multiply ? `${type}-x2` : type\n }\n })\n\n res = [...res, ...foundMoreTypes]\n }\n\n return res\n}\n\n// @internal Checks if a space prop is a valid string like \"top\"\nexport const isValidSpaceProp = (propName: string) =>\n propName && ['top', 'right', 'bottom', 'left'].includes(propName)\n\nexport const removeSpaceProps = (\n props: SpacingProps \| SpacingUnknownProps\n) => {\n const p = Object.isFrozen(props) ? { ...props } : props\n for (const i in p) {\n if (isValidSpaceProp(i)) {\n delete p[i]\n }\n }\n return p\n}\n\nexport const isInline = (elementName: string) => {\n switch (elementName) {\n case 'h1':\n case 'h2':\n case 'h3':\n case 'h4':\n case 'h5':\n case 'h6':\n case 'p':\n return true\n }\n\n return false\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"SpacingUtils.js","names":["warn","spacingDefaultProps","space","top","right","bottom","left","spacePatterns","small","medium","large","globalThis","CALC_CACHE","calc","types","hash","join","result","forEach","rawTypes","createTypeModifiers","type","push","length","createSpacingClasses","props","Element","p","Object","isFrozen","_objectSpread","i","isValidSpaceProp","entries","reduce","acc","direction","cur","String","typeModifiers","sum","sumTypes","nearestTypes","findNearestTypes","map","isInline","translateSpace","test","replace","splitTypes","split","clean","t","filter","r","firstLetter","parseFloat","num","foundType","findType","found","findTypeAll","listOfSpacePatterns","find","k","v","multiply","res","near","reverse","includes","nearNum","nearType","leftOver","foundMoreTypes","index","indexOf","propName","removeSpaceProps","elementName"],"sources":["../../../../src/components/space/SpacingUtils.ts"],"sourcesContent":["/*\n Space helper\n \n /\n\nimport { warn } from '../../shared/component-helper'\n\nimport type {\n SpaceType,\n SpacingUnknownProps,\n SpacingProps,\n SpaceTypesPositiveValuesType,\n SpaceTypesPositiveRemValuesType,\n SpaceStringTypes,\n} from './types'\n\ntype SpaceNumber = number\n\nexport const spacingDefaultProps: SpacingProps = {\n space: null,\n top: null,\n right: null,\n bottom: null,\n left: null,\n}\n// IMPORTANT: Keep the shorthand after the long type names\nexport const spacePatterns: Record<\n SpaceTypesPositiveValuesType,\n SpaceTypesPositiveRemValuesType\n> = {\n 'xx-small': 0.25,\n 'x-small': 0.5,\n small: 1,\n medium: 1.5,\n large: 2,\n 'x-large': 3,\n 'xx-large': 3.5,\n 'xx-large-x2': 7,\n}\n\n/*\n Helper function to generate a calc(var(--spacing-large) + var(--spacing-small))\n \n @param types 'small', '16px', '1rem'\n * @returns e.g. calc(var(--spacing-large) + var(--spacing-small))\n /\nglobalThis.CALC_CACHE = {}\nexport const calc = (...types: Array<SpaceType>) => {\n const hash = types.join('\|')\n if (globalThis.CALC_CACHE[hash]) {\n return globalThis.CALC_CACHE[hash]\n }\n\n const result: Array<string> = []\n\n types.forEach((rawTypes) => {\n createTypeModifiers(rawTypes as SpaceType).forEach((type) => {\n result.push(`var(--spacing-${type})`)\n })\n })\n\n return result.length\n ? (globalThis.CALC_CACHE[hash] = `calc(${result.join(' + ')})`)\n : null\n}\n\n/\n Creates a valid space CSS class out from given space types\n \n @param props\n * @param Element to check if it should be handled as inline\n * @returns \"dnb-space__large dnb-space__small\"\n /\nexport const createSpacingClasses = (\n props:\n \| SpacingProps\n /\n To support typical not defined props form components\n /\n \| SpacingUnknownProps,\n Element = null\n) => {\n const p = Object.isFrozen(props) ? { ...props } : props\n\n if (typeof p.space !== 'undefined') {\n if (\n typeof p.space === 'string' \|\|\n typeof p.space === 'number' \|\|\n (typeof p.space === 'boolean' && p.space)\n ) {\n p.top = p.right = p.bottom = p.left = p.space\n }\n if (typeof p.space === 'object') {\n for (const i in p.space) {\n if (!p[i] && isValidSpaceProp(i)) {\n p[i] = p.space[i]\n }\n }\n }\n delete p.space\n }\n\n return Object.entries(p).reduce((acc, [direction, cur]) => {\n if (isValidSpaceProp(direction)) {\n if (String(cur) === '0' \|\| String(cur) === 'false') {\n acc.push(`dnb-space__${direction}--zero`)\n } else if (cur) {\n const typeModifiers = createTypeModifiers(cur as SpaceType)\n\n // get the total sum\n const sum = sumTypes(typeModifiers)\n if (sum > 10) {\n warn(\n `Spacing of more than 10rem is not supported! You used ${sum} / (${typeModifiers.join(\n ','\n )})`\n )\n } else {\n // auto combine classes\n const nearestTypes = findNearestTypes(sum, true)\n\n acc = [\n ...acc,\n ...nearestTypes.map(\n (type) => `dnb-space__${direction}--${type}`\n ),\n ]\n }\n }\n } else if (direction === 'no_collapse') {\n acc.push('dnb-space--no-collapse')\n if (Element && isInline(Element)) {\n acc.push('dnb-space--inline')\n }\n }\n\n return acc\n }, [])\n}\n\n// @internal splits types by given string\nexport const translateSpace = (type: SpaceType) => {\n if (/-x2$/.test(String(type))) {\n return spacePatterns[String(type).replace(/-x2$/, '')] 2\n }\n return spacePatterns[String(type)] \|\| 0\n}\n\n// @internal Splits a string of: \"large x-small\" into an array of the same\nexport const splitTypes = (types: SpaceType \| Array<SpaceType>) => {\n if (typeof types === 'string') {\n const test = (types as SpaceStringTypes).split(/ /g)\n return clean(test as Array<SpaceStringTypes>)\n } else if (typeof types === 'boolean') {\n return ['small' as SpaceTypesPositiveValuesType]\n } else if (typeof types === 'number') {\n return [types]\n }\n\n return clean(types) \|\| null\n\n function clean(t: Array<SpaceType> \| Array<SpaceStringTypes>) {\n return t?.filter((r) => r && String(r).length > 0)\n }\n}\n\n// @internal Sums e.g. \"large\" + \"x-small\" to be = 2.5rem\nexport const sumTypes = (types: SpaceType \| Array<SpaceType>) =>\n splitTypes(types)\n .map((type) => translateSpace(type))\n .reduce((acc, cur) => {\n if (cur > 0) {\n acc += cur\n } else if (cur < 0) {\n acc -= cur\n }\n return acc\n }, 0)\n\n// @internal Returns an array with modifiers e.g. [\"large\", \"x-small\"]\nexport const createTypeModifiers = (\n types: SpaceType\n): Array<SpaceType> => {\n return (splitTypes(types) \|\| []).reduce((acc, type) => {\n if (type) {\n const firstLetter = String(type)[0]\n if (parseFloat(firstLetter) > -1) {\n // can be \"2rem\" or \"32px\" - but we want only a number\n let num = parseFloat(String(type))\n\n // check if we got pixels\n if (num >= 8 && /[0-9]px/.test(String(type))) {\n num = num / 16\n }\n\n // check if the type exists in our extensions\n const foundType = findType(num)\n\n // get the type\n if (foundType) {\n type = foundType\n } else {\n findNearestTypes(num).forEach((type) => {\n if (type) {\n acc.push(type)\n }\n })\n }\n }\n\n if (!(parseFloat(String(type)) > 0)) {\n acc.push(type)\n }\n }\n return acc\n }, [])\n}\n\n// @internal Finds from \"2.0\" the equivalent type \"large\"\nexport const findType = (num: SpaceNumber): SpaceType => {\n const found = findTypeAll(num)\n\n // get the type\n if (found) {\n return found[0]\n }\n\n return null\n}\n\n// @internal Finds from \"2.0\" the equivalent type \"large\" and returns all results\nexport const findTypeAll = (\n num: SpaceNumber\n): Array<\n SpaceTypesPositiveValuesType \| SpaceTypesPositiveRemValuesType\n> => {\n const listOfSpacePatterns = Object.entries(spacePatterns) as [\n SpaceTypesPositiveValuesType,\n SpaceTypesPositiveRemValuesType,\n ][]\n const found =\n listOfSpacePatterns.find(([k, v]) => k && v === num) \|\| null\n return found\n}\n\n// @internal Finds from e.g. a value of \"2.5rem\" the nearest type = [\"large\", \"x-small\"]\nexport const findNearestTypes = (num: SpaceNumber, multiply = false) => {\n let res = []\n\n const near = Object.entries(spacePatterns)\n .reverse()\n .filter((k) => (multiply ? true : !k[0].includes('-x'))) // e.g. -x2\n .find(([k, v]) => k && num >= v)\n const nearNum = (near && near[1]) \|\| num\n const types = findTypeAll(nearNum)\n\n if (types) {\n const nearType = types[0]\n res.push(nearType)\n const leftOver = num - parseFloat(String(types[1]))\n const foundMoreTypes = findNearestTypes(leftOver, multiply)\n\n // if the value already exists, then replace it with an x2\n foundMoreTypes.forEach((type) => {\n const index = res.indexOf(type)\n if (index !== -1) {\n res[index] = multiply ? `${type}-x2` : type\n }\n })\n\n res = [...res, ...foundMoreTypes]\n }\n\n return res\n}\n\n// @internal Checks if a space prop is a valid string like \"top\"\nexport const isValidSpaceProp = (propName: string) =>\n propName && ['top', 'right', 'bottom', 'left'].includes(propName)\n\nexport const removeSpaceProps = (\n props: SpacingProps \| SpacingUnknownProps\n) => {\n const p = Object.isFrozen(props) ? { ...props } : props\n for (const i in p) {\n if (isValidSpaceProp(i)) {\n delete p[i]\n }\n }\n return p\n}\n\nexport const isInline = (elementName: string) => {\n switch (elementName) {\n case 'h1':\n case 'h2':\n case 'h3':\n case 'h4':\n case 'h5':\n case 'h6':\n case 'p':\n return true\n }\n\n return false\n}\n"],"mappings":"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"}

package/es/components/step-indicator/StepIndicator.d.ts CHANGED Viewed

@@ -1,79 +1,93 @@
-import * as React from 'react';
+/**
+ * Web StepIndicator Component
+ *
+ */
+import React from 'react';
+import StepIndicatorSidebar from './StepIndicatorSidebar';
+import { StepIndicatorContextValues } from './StepIndicatorContext';
 import type { SpacingProps } from '../../shared/types';
 import type { SkeletonShow } from '../Skeleton';
-import type { StepIndicatorItemProps } from './StepIndicatorItem';
-import StepIndicatorSidebar from './StepIndicatorSidebar';
+import type { StepIndicatorItemProps, StepItemWrapper } from './StepIndicatorItem';
 export type StepIndicatorMode = 'static' | 'strict' | 'loose';
-export type StepIndicatorData =
-  | string
-  | string[]
-  | Pick<
-      StepIndicatorItemProps,
-      | 'title'
-      | 'is_current'
-      | 'inactive'
-      | 'disabled'
-      | 'status'
-      | 'status_state'
-      | 'on_click'
-      | 'on_render'
-    >[];
-export type StepIndicatorCurrentStep = string | number;
-export type StepIndicatorChildren =
-  | React.ReactNode
-  | ((...args: any[]) => any);
-export interface StepIndicatorProps
-  extends Omit<React.HTMLProps<HTMLAnchorElement>, 'ref'>,
-    SpacingProps {
-  /**
-   * <em>(required)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
-   */
-  sidebar_id?: string;
-  /**
-   * <em>(required)</em> defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.
-   */
-  mode?: StepIndicatorMode;
-  /**
-   * <em>(required)</em> defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above.
-   */
-  data?: StepIndicatorData;
-  /**
-   * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
-   */
-  on_click?: (...args: any[]) => any;
-  overview_title?: string;
-  step_title_extended?: string;
-  step_title?: string;
-  /**
-   * Defines the active number marked step starting by 0. Defaults to `0`.
-   */
-  current_step?: StepIndicatorCurrentStep;
-  /**
-   * Define whether to show automatically counted numbers or not. Defaults to `false`.
-   */
-  hide_numbers?: boolean;
-  /**
-   * Callback function to manipulate or wrap every item. Has to return a React Node. You receive an object you can use in your custom HOC `{ StepItem, element, attributes, props, context }`.
-   */
-  on_item_render?: (...args: any[]) => any;
-  /**
-   * If set to `true`, the height animation on the step items and the drawer button will be omitted. Defaults to `false`.
-   */
-  no_animation?: boolean;
-  skeleton?: SkeletonShow;
-  class?: string;
-  className?: string;
-  children?: StepIndicatorChildren;
-  /**
-   * Will be called once the user visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step }`.
-   */
-  on_change?: (...args: any[]) => any;
-}
-export default class StepIndicator extends React.Component<
-  StepIndicatorProps,
-  any
-> {
-  static defaultProps: object;
-  static Sidebar = StepIndicatorSidebar;
-  render(): JSX.Element;
+export type StepIndicatorDataItem = Pick<StepIndicatorItemProps, 'title' | 'is_current' | 'inactive' | 'disabled' | 'status' | 'status_state' | 'on_click' | 'on_render'>;
+export type StepIndicatorData = string | string[] | StepIndicatorDataItem[];
+export type StepIndicatorMouseEvent = {
+    event: React.MouseEvent<HTMLButtonElement>;
+    item: StepIndicatorItemProps;
+    currentStep: number;
+    current_step: number;
+};
+export type StepIndicatorRenderCallback = {
+    StepItem: typeof StepItemWrapper;
+    element: React.ReactNode;
+    attributes: React.HTMLProps<HTMLElement>;
+    props: StepIndicatorItemProps;
+    context: StepIndicatorContextValues;
+};
+export type StepIndicatorProps = Omit<React.HTMLProps<HTMLAnchorElement>, 'ref' | 'data'> & SpacingProps & {
+    /**
+     * <em>(required with `<StepIndicator.Sidebar />`)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
+     */
+    sidebar_id?: string;
+    /**
+     * <em>(required)</em> defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.
+     */
+    mode: StepIndicatorMode;
+    /**
+     * <em>(required)</em> defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above.
+     */
+    data: StepIndicatorData;
+    /**
+     *  The title shown inside the `<StepIndicatorModal />` supplemental screen reader text for the `<StepIndicatorTriggerButton />`
+     *  Defaults to `Steps Overview`
+     */
+    overview_title?: string;
+    /**
+     *  The label for `<StepIndicatorTriggerButton />` and supplemental screen reader text for `<StepIndicatorItem />`
+     *  This value need to contain `%step` and `%count` if you want to display the current step and total amount of steps
+     * `%step` is used to place the current step into the text
+     * `%count` is used to place the step total into the text
+     *  Defaults to `Step %step of %count`
+     */
+    step_title?: string;
+    /**
+     *  A descriptive label used in `<StepIndicatorModal />`
+     *  This value need to contain `%step` and `%count` if you want to display the current step and total amount of steps
+     * `%step` is used to place the current step into the text
+     * `%count` is used to place the step total into the text
+     *  Defaults to `You are on step %step of %count`
+     */
+    step_title_extended?: string;
+    /**
+     * Defines the active number marked step starting by 0. Defaults to `0`.
+     */
+    current_step?: number;
+    /**
+     * Define whether to show automatically counted numbers or not. Defaults to `false`.
+     */
+    hide_numbers?: boolean;
+    /**
+     * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step, currentStep }`.
+     */
+    on_click?: ({ event, item, current_step, currentStep, }: StepIndicatorMouseEvent) => void;
+    /**
+     * Callback function to manipulate or wrap every item. Has to return a React Node. You receive an object you can use in your custom HOC `{ StepItem, element, attributes, props, context }`.
+     */
+    on_item_render?: ({ StepItem, element, attributes, props, context, }: StepIndicatorRenderCallback) => React.ReactNode;
+    /**
+     * Will be called once the user visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step, currentStep }`.
+     */
+    on_change?: ({ event, item, current_step, currentStep, }: StepIndicatorMouseEvent) => void;
+    /**
+     * If set to `true`, the height animation on the step items and the drawer button will be omitted. Defaults to `false`.
+     */
+    no_animation?: boolean;
+    skeleton?: SkeletonShow;
+    className?: string;
+    children?: React.ReactNode;
+};
+declare function StepIndicator({ data, skeleton, current_step, hide_numbers, no_animation, ...restOfProps }: StepIndicatorProps): import("react/jsx-runtime").JSX.Element;
+declare namespace StepIndicator {
+    var Sidebar: typeof StepIndicatorSidebar;
 }
+export default StepIndicator;

package/es/components/step-indicator/StepIndicator.js CHANGED Viewed

@@ -1,38 +1,42 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _div;
+const _excluded = ["data", "skeleton", "current_step", "hide_numbers", "no_animation"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React from 'react';
-import PropTypes from 'prop-types';
 import { makeUniqueId, warn } from '../../shared/component-helper';
 import StepIndicatorSidebar from './StepIndicatorSidebar';
 import StepIndicatorModal from './StepIndicatorModal';
 import { StepIndicatorProvider } from './StepIndicatorContext';
-import { stepIndicatorPropTypes, stepIndicatorDefaultProps } from './StepIndicatorProps';
-export default class StepIndicator extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      sidebar_id: props.internalId || props.sidebar_id || makeUniqueId()
-    };
-  }
-  render() {
-    if (!this.props.sidebar_id && this.props.mode) {
-      warn('StepIndicator needs an unique "sidebar_id" property, also on the <StepIndicator.Sidebar... />');
-    }
-    return React.createElement(StepIndicatorProvider, _extends({}, this.props, {
-      sidebar_id: this.state.sidebar_id
-    }), _div || (_div = React.createElement("div", {
-      className: "dnb-step-indicator-wrapper"
-    }, React.createElement(StepIndicatorModal, null))));
+import { stepIndicatorDefaultProps } from './StepIndicatorProps';
+function StepIndicator(_ref) {
+  let {
+      data = stepIndicatorDefaultProps.data,
+      skeleton = stepIndicatorDefaultProps.skeleton,
+      current_step = stepIndicatorDefaultProps.current_step,
+      hide_numbers = stepIndicatorDefaultProps.hide_numbers,
+      no_animation = stepIndicatorDefaultProps.no_animation
+    } = _ref,
+    restOfProps = _objectWithoutProperties(_ref, _excluded);
+  const props = _objectSpread({
+    data,
+    skeleton,
+    current_step,
+    hide_numbers,
+    no_animation
+  }, restOfProps);
+  const sidebarId = props.sidebar_id || makeUniqueId();
+  if (!props.sidebar_id && props.mode) {
+    warn('StepIndicator needs an unique "sidebar_id" property, also on the <StepIndicator.Sidebar... />');
   }
+  return React.createElement(StepIndicatorProvider, _extends({}, props, {
+    sidebar_id: sidebarId
+  }), _div || (_div = React.createElement("div", {
+    className: "dnb-step-indicator-wrapper"
+  }, React.createElement(StepIndicatorModal, null))));
 }
-_defineProperty(StepIndicator, "Sidebar", StepIndicatorSidebar);
-_defineProperty(StepIndicator, "defaultProps", _objectSpread({
-  sidebar_id: null
-}, stepIndicatorDefaultProps));
-process.env.NODE_ENV !== "production" ? StepIndicator.propTypes = _objectSpread({
-  sidebar_id: PropTypes.string
-}, stepIndicatorPropTypes) : void 0;
+StepIndicator.Sidebar = StepIndicatorSidebar;
+export default StepIndicator;
 //# sourceMappingURL=StepIndicator.js.map