@dnb/eufemia 10.71.2 → 10.72.0

package/es/components/step-indicator/style/themes/dnb-step-indicator-theme-sbanken.css

@@ -5,66 +5,9 @@
 /*
  * Utilities
  */
-.dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button {
-  --border-color: var(--sb-color-gray-light);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button {
-  --border-color: var(--sb-color-purple-alternative);
-  color: var(--sb-color-white);
-  background-color: var(--sb-color-purple-alternative);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__item--visited .dnb-button {
-  --border-color: var(--sb-color-purple-alternative);
-  color: var(--sb-color-purple-alternative);
-  background-color: var(--sb-color-green-light-2);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button {
-  cursor: text;
-  pointer-events: initial;
-  -webkit-user-select: initial;
-          user-select: initial;
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active {
-  color: var(--color-black-80);
-  background-color: var(--color-white);
-  --border-color: var(--color-black-20);
-  --border-width: 0.0625rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active {
-  --border-color: var(--color-black-80);
-  --border-width: 0.125rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__label, .dnb-step-indicator-wrapper .dnb-step-indicator__label.dnb-p {
-  font-size: var(--font-size-small);
-  margin-bottom: 0.5rem;
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status.dnb-button--secondary {
-  color: var(--sb-color-text);
-  background-color: var(--sb-color-yellow-light-3);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--error.dnb-button--secondary {
-  color: var(--sb-color-text);
-  background-color: var(--sb-color-magenta-light-2);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--info.dnb-button--secondary {
-  color: var(--sb-color-text);
-  background-color: var(--sb-color-violet-light-4);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-button__icon {
-  align-self: flex-start;
-  margin-top: 1rem;
-  margin-right: 0.25rem;
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__number, .dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status {
-  font-weight: var(--font-weight-basis);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status {
-  margin-top: 0.5rem;
-  font-size: var(--font-size-x-small);
-  line-height: var(--font-size-basis);
-  color: var(--color-black-80);
+.dnb-step-indicator {
+  --step-indicator-trigger-background: var(--sb-color-gray-light-3);
+  --step-indicator-check-bg: var(--sb-color-violet-light-4);
+  --step-indicator-check-color: var(--sb-color-violet);
+  --step-indicator-current-border: var(--sb-color-text);
 }

package/es/components/step-indicator/style/themes/dnb-step-indicator-theme-sbanken.min.css

@@ -1 +1 @@
-.dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button{--border-color:var(--sb-color-gray-light)}.dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button{--border-color:var(--sb-color-purple-alternative);background-color:var(--sb-color-purple-alternative);color:var(--sb-color-white)}.dnb-step-indicator-wrapper .dnb-step-indicator__item--visited .dnb-button{--border-color:var(--sb-color-purple-alternative);background-color:var(--sb-color-green-light-2);color:var(--sb-color-purple-alternative)}.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button{cursor:text;pointer-events:auto;-webkit-user-select:initial;user-select:auto}.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover{--border-color:var(--color-black-20);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-black-80)}.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover{--border-color:var(--color-black-80);--border-width:0.125rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-step-indicator-wrapper .dnb-step-indicator__label,.dnb-step-indicator-wrapper .dnb-step-indicator__label.dnb-p{font-size:var(--font-size-small);margin-bottom:.5rem}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status.dnb-button--secondary{background-color:var(--sb-color-yellow-light-3);color:var(--sb-color-text)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--error.dnb-button--secondary{background-color:var(--sb-color-magenta-light-2);color:var(--sb-color-text)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--info.dnb-button--secondary{background-color:var(--sb-color-violet-light-4);color:var(--sb-color-text)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-button__icon{align-self:flex-start;margin-right:.25rem;margin-top:1rem}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__number,.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status{font-weight:var(--font-weight-basis)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status{color:var(--color-black-80);font-size:var(--font-size-x-small);line-height:var(--font-size-basis);margin-top:.5rem}
+.dnb-step-indicator{--step-indicator-trigger-background:var(--sb-color-gray-light-3);--step-indicator-check-bg:var(--sb-color-violet-light-4);--step-indicator-check-color:var(--sb-color-violet);--step-indicator-current-border:var(--sb-color-text)}

package/es/components/step-indicator/style/themes/dnb-step-indicator-theme-sbanken.scss

@@ -5,93 +5,9 @@
 
 @import '../../../../style/core/utilities.scss';
 
-.dnb-step-indicator-wrapper .dnb-step-indicator {
-  &__item {
-    .dnb-button {
-      --border-color: var(--sb-color-gray-light);
-    }
-
-    &--current .dnb-button {
-      --border-color: var(--sb-color-purple-alternative);
-      color: var(--sb-color-white);
-      background-color: var(--sb-color-purple-alternative);
-    }
-
-    &--visited .dnb-button {
-      --border-color: var(--sb-color-purple-alternative);
-      color: var(--sb-color-purple-alternative);
-      background-color: var(--sb-color-green-light-2);
-    }
-
-    &--inactive .dnb-button {
-      cursor: text;
-      pointer-events: initial;
-      user-select: initial;
-
-      &.dnb-button--secondary,
-      &.dnb-button--secondary:hover,
-      &.dnb-button--secondary:focus,
-      &.dnb-button--secondary:active {
-        color: var(--color-black-80);
-        background-color: var(--color-white);
-
-        @include fakeBorder(var(--color-black-20), 0.0625rem, inset);
-      }
-    }
-
-    &--inactive.dnb-step-indicator__item--current {
-      .dnb-button {
-        &.dnb-button--secondary,
-        &.dnb-button--secondary:hover,
-        &.dnb-button--secondary:focus,
-        &.dnb-button--secondary:active {
-          @include fakeBorder(var(--color-black-80), 0.125rem, inset);
-        }
-      }
-    }
-  }
-
-  &__label,
-  &__label.dnb-p {
-    font-size: var(--font-size-small);
-    margin-bottom: 0.5rem;
-  }
-
-  &__button__status {
-    &.dnb-button--secondary {
-      color: var(--sb-color-text);
-      background-color: var(--sb-color-yellow-light-3);
-    }
-
-    &--error.dnb-button--secondary {
-      color: var(--sb-color-text);
-      background-color: var(--sb-color-magenta-light-2);
-    }
-
-    &--info.dnb-button--secondary {
-      color: var(--sb-color-text);
-      background-color: var(--sb-color-violet-light-4);
-    }
-
-    .dnb-button__icon {
-      align-self: flex-start;
-      margin-top: 1rem;
-      margin-right: 0.25rem;
-    }
-
-    .dnb-step-indicator__item-content {
-      &__number,
-      &__status {
-        font-weight: var(--font-weight-basis);
-      }
-
-      &__status {
-        margin-top: 0.5rem;
-
-        font-size: var(--font-size-x-small);
-        line-height: var(--font-size-basis);
-        color: var(--color-black-80);
-      }
-    }
-  }
+.dnb-step-indicator {
+  --step-indicator-trigger-background: var(--sb-color-gray-light-3);
+  --step-indicator-check-bg: var(--sb-color-violet-light-4);
+  --step-indicator-check-color: var(--sb-color-violet);
+  --step-indicator-current-border: var(--sb-color-text);
 }

package/es/components/step-indicator/style/themes/dnb-step-indicator-theme-ui.css

@@ -1,68 +1,4 @@
 /*
 * StepIndicator theme
 *
-*/
-/*
- * Utilities
- */
-.dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button {
-  font-weight: var(--font-weight-medium);
-  --border-color: var(--color-sea-green);
-  --border-width: 0.125rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__item--visited .dnb-button {
-  background-color: var(--color-pistachio);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button {
-  cursor: text;
-  pointer-events: initial;
-  -webkit-user-select: initial;
-          user-select: initial;
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active {
-  color: var(--color-black-80);
-  background-color: var(--color-white);
-  --border-color: var(--color-black-20);
-  --border-width: 0.0625rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active {
-  --border-color: var(--color-black-80);
-  --border-width: 0.125rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-html[data-whatinput=keyboard] .dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button:not([disabled], :active, :hover):focus {
-  color: var(--color-emerald-green);
-  background-color: var(--color-mint-green);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__label, .dnb-step-indicator-wrapper .dnb-step-indicator__label.dnb-p {
-  font-size: var(--font-size-small);
-  margin-bottom: 0.5rem;
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status.dnb-button--secondary {
-  background-color: var(--color-sand-yellow);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--error.dnb-button--secondary {
-  background-color: var(--color-fire-red-8);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--info.dnb-button--secondary {
-  background-color: var(--color-pistachio);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-button__icon {
-  align-self: flex-start;
-  margin-top: 1rem;
-  margin-right: 0.25rem;
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__number, .dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status {
-  font-weight: var(--font-weight-basis);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status {
-  margin-top: 0.5rem;
-  font-size: var(--font-size-x-small);
-  line-height: var(--font-size-basis);
-  color: var(--color-black-80);
-}
+*/

package/es/components/step-indicator/style/themes/dnb-step-indicator-theme-ui.min.css

@@ -1 +0,0 @@
-.dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button{--border-color:var(--color-sea-green);--border-width:0.125rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);font-weight:var(--font-weight-medium)}.dnb-step-indicator-wrapper .dnb-step-indicator__item--visited .dnb-button{background-color:var(--color-pistachio)}.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button{cursor:text;pointer-events:auto;-webkit-user-select:initial;user-select:auto}.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover{--border-color:var(--color-black-20);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-black-80)}.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover{--border-color:var(--color-black-80);--border-width:0.125rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button:not([disabled],:active,:hover):focus{background-color:var(--color-mint-green);color:var(--color-emerald-green)}.dnb-step-indicator-wrapper .dnb-step-indicator__label,.dnb-step-indicator-wrapper .dnb-step-indicator__label.dnb-p{font-size:var(--font-size-small);margin-bottom:.5rem}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status.dnb-button--secondary{background-color:var(--color-sand-yellow)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--error.dnb-button--secondary{background-color:var(--color-fire-red-8)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--info.dnb-button--secondary{background-color:var(--color-pistachio)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-button__icon{align-self:flex-start;margin-right:.25rem;margin-top:1rem}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__number,.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status{font-weight:var(--font-weight-basis)}.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status{color:var(--color-black-80);font-size:var(--font-size-x-small);line-height:var(--font-size-basis);margin-top:.5rem}

package/es/components/step-indicator/style/themes/dnb-step-indicator-theme-ui.scss

@@ -2,94 +2,3 @@
 * StepIndicator theme
 *
 */
-
-@import '../../../../style/core/utilities.scss';
-
-.dnb-step-indicator-wrapper .dnb-step-indicator {
-  &__item {
-    &--current .dnb-button {
-      font-weight: var(--font-weight-medium);
-
-      @include fakeBorder(var(--color-sea-green), 0.125rem, inset);
-    }
-
-    &--visited .dnb-button {
-      background-color: var(--color-pistachio);
-    }
-
-    &--inactive .dnb-button {
-      cursor: text;
-      pointer-events: initial;
-      user-select: initial;
-
-      &.dnb-button--secondary,
-      &.dnb-button--secondary:hover,
-      &.dnb-button--secondary:focus,
-      &.dnb-button--secondary:active {
-        color: var(--color-black-80);
-        background-color: var(--color-white);
-
-        @include fakeBorder(var(--color-black-20), 0.0625rem, inset);
-      }
-    }
-
-    &--inactive.dnb-step-indicator__item--current {
-      .dnb-button {
-        &.dnb-button--secondary,
-        &.dnb-button--secondary:hover,
-        &.dnb-button--secondary:focus,
-        &.dnb-button--secondary:active {
-          @include fakeBorder(var(--color-black-80), 0.125rem, inset);
-        }
-      }
-    }
-  }
-
-  html[data-whatinput='keyboard']
-    &__item--current
-    .dnb-button:not([disabled], :active, :hover):focus {
-    color: var(--color-emerald-green);
-    background-color: var(--color-mint-green);
-  }
-
-  &__label,
-  &__label.dnb-p {
-    font-size: var(--font-size-small);
-    margin-bottom: 0.5rem;
-  }
-
-  &__button__status {
-    &.dnb-button--secondary {
-      background-color: var(--color-sand-yellow);
-    }
-
-    &--error.dnb-button--secondary {
-      background-color: var(--color-fire-red-8);
-    }
-
-    &--info.dnb-button--secondary {
-      background-color: var(--color-pistachio);
-    }
-
-    .dnb-button__icon {
-      align-self: flex-start;
-      margin-top: 1rem;
-      margin-right: 0.25rem;
-    }
-
-    .dnb-step-indicator__item-content {
-      &__number,
-      &__status {
-        font-weight: var(--font-weight-basis);
-      }
-
-      &__status {
-        margin-top: 0.5rem;
-
-        font-size: var(--font-size-x-small);
-        line-height: var(--font-size-basis);
-        color: var(--color-black-80);
-      }
-    }
-  }
-}

package/es/elements/Element.d.ts

@@ -15,7 +15,14 @@ export type ElementInternalProps = {
 export type ElementProps = {
     skeleton?: SkeletonShow;
     skeletonMethod?: SkeletonMethods;
-    internalClass?: string;
+    /**
+     * As a string: replaces the default tag class `dnb-{TAG_NAME}` with a different class. Empty string does the same as default `undefined`.
+     *
+     * As a boolean: set it to `false` to disable the default tag class. `true` does the same as default `undefined`.
+     *
+     * Default: `undefined`
+     */
+    internalClass?: string | boolean;
     innerRef?: React.RefObject<HTMLElement> | React.ForwardedRef<unknown>;
     children?: React.ReactNode;
 } & SpacingProps;
@@ -26,7 +33,14 @@ export declare const defaultProps: {
 declare const Element: React.ForwardRefExoticComponent<{
     skeleton?: SkeletonShow;
     skeletonMethod?: SkeletonMethods;
-    internalClass?: string;
+    /**
+     * As a string: replaces the default tag class `dnb-{TAG_NAME}` with a different class. Empty string does the same as default `undefined`.
+     *
+     * As a boolean: set it to `false` to disable the default tag class. `true` does the same as default `undefined`.
+     *
+     * Default: `undefined`
+     */
+    internalClass?: string | boolean;
     innerRef?: React.RefObject<HTMLElement> | React.ForwardedRef<unknown>;
     children?: React.ReactNode;
 } & import("../shared/types").SpacingElementProps & {

package/es/elements/Element.js

@@ -33,7 +33,7 @@ function ElementInstance(localProps) {
     rest = _objectWithoutProperties(props, _excluded);
   const Tag = as;
   const attributes = rest;
-  const tagClass = internalClass || (typeof Tag === 'string' ? `dnb-${Tag}` : '');
+  const tagClass = internalClass === false ? '' : (internalClass === true ? undefined : internalClass) || (typeof Tag === 'string' ? `dnb-${Tag}` : '');
   const internalClassName = classnames(className, createSkeletonClass(skeletonMethod, skeleton, context), createSpacingClasses(attributes, typeof Tag === 'string' ? `dnb-${Tag}` : null), !new RegExp(`${tagClass}(\\s|$)`).test(String(className)) && tagClass);
   validateDOMAttributes(null, attributes);
   skeletonDOMAttributes(attributes, skeleton, context);

package/es/elements/Element.js.map

@@ -1 +1 @@
-{"version":3,"file":"Element.js","names":["React","classnames","Context","validateDOMAttributes","extendPropsWithContext","createSpacingClasses","createSkeletonClass","skeletonDOMAttributes","defaultProps","skeletonMethod","Element","forwardRef","props","ref","createElement","ElementInstance","_extends","innerRef","localProps","context","useContext","skeleton","className","internalClass","as","rest","_objectWithoutProperties","_excluded","Tag","attributes","tagClass","internalClassName","RegExp","test","String"],"sources":["../../../src/elements/Element.tsx"],"sourcesContent":["/**\n * This is mainly a Wrapper, to build more easily HTML Elements\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../shared/Context'\nimport {\n  validateDOMAttributes,\n  extendPropsWithContext,\n} from '../shared/component-helper'\nimport { createSpacingClasses } from '../components/space/SpacingHelper'\nimport {\n  createSkeletonClass,\n  skeletonDOMAttributes,\n  SkeletonMethods,\n} from '../components/skeleton/SkeletonHelper'\nimport type { SkeletonShow } from '../components/skeleton/Skeleton'\n\nimport type { DynamicElement, SpacingProps } from '../shared/types'\n\nexport type ElementInternalProps = {\n  /**\n   * Defines the Element Type, like \"div\"\n   */\n  as: DynamicElement<unknown>\n}\n\nexport type ElementProps = {\n  skeleton?: SkeletonShow\n  skeletonMethod?: SkeletonMethods\n  internalClass?: string\n  innerRef?: React.RefObject<HTMLElement> | React.ForwardedRef<unknown>\n  children?: React.ReactNode\n} & SpacingProps\n\nexport type ElementAllProps = ElementProps &\n  ElementInternalProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref' | 'as'>\n\ntype Attributes = Record<string, unknown>\n\nexport const defaultProps = {\n  skeletonMethod: 'font',\n}\n\nconst Element = React.forwardRef((props: ElementAllProps, ref) => {\n  return <ElementInstance innerRef={ref} {...props} />\n})\n\nfunction ElementInstance(localProps: ElementAllProps) {\n  const context = React.useContext(Context)\n  const props = extendPropsWithContext(localProps, defaultProps, {\n    skeleton: context?.skeleton,\n  })\n\n  const {\n    className,\n    internalClass,\n    as,\n    innerRef,\n    skeleton,\n    skeletonMethod,\n    ...rest\n  } = props\n\n  const Tag = as\n  const attributes = rest as Attributes\n\n  const tagClass =\n    internalClass || (typeof Tag === 'string' ? `dnb-${Tag}` : '')\n  const internalClassName = classnames(\n    !new RegExp(`${tagClass}(\\\\s|$)`).test(String(className)) && tagClass,\n    className,\n    createSkeletonClass(skeletonMethod, skeleton, context),\n    createSpacingClasses(\n      attributes,\n      typeof Tag === 'string' ? `dnb-${Tag}` : null\n    )\n  )\n\n  validateDOMAttributes(null, attributes)\n\n  skeletonDOMAttributes(attributes, skeleton, context)\n\n  if (typeof Tag !== 'function' && innerRef) {\n    attributes.ref = innerRef\n  }\n\n  return <Tag className={internalClassName} {...attributes} />\n}\n\nexport default Element\n"],"mappings":";;;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,OAAO,MAAM,mBAAmB;AACvC,SACEC,qBAAqB,EACrBC,sBAAsB,QACjB,4BAA4B;AACnC,SAASC,oBAAoB,QAAQ,mCAAmC;AACxE,SACEC,mBAAmB,EACnBC,qBAAqB,QAEhB,uCAAuC;AA0B9C,OAAO,MAAMC,YAAY,GAAG;EAC1BC,cAAc,EAAE;AAClB,CAAC;AAED,MAAMC,OAAO,GAAGV,KAAK,CAACW,UAAU,CAAC,CAACC,KAAsB,EAAEC,GAAG,KAAK;EAChE,OAAOb,KAAA,CAAAc,aAAA,CAACC,eAAe,EAAAC,QAAA;IAACC,QAAQ,EAAEJ;EAAI,GAAKD,KAAK,CAAG,CAAC;AACtD,CAAC,CAAC;AAEF,SAASG,eAAeA,CAACG,UAA2B,EAAE;EACpD,MAAMC,OAAO,GAAGnB,KAAK,CAACoB,UAAU,CAAClB,OAAO,CAAC;EACzC,MAAMU,KAAK,GAAGR,sBAAsB,CAACc,UAAU,EAAEV,YAAY,EAAE;IAC7Da,QAAQ,EAAEF,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEE;EACrB,CAAC,CAAC;EAEF,MAAM;MACJC,SAAS;MACTC,aAAa;MACbC,EAAE;MACFP,QAAQ;MACRI,QAAQ;MACRZ;IAEF,CAAC,GAAGG,KAAK;IADJa,IAAI,GAAAC,wBAAA,CACLd,KAAK,EAAAe,SAAA;EAET,MAAMC,GAAG,GAAGJ,EAAE;EACd,MAAMK,UAAU,GAAGJ,IAAkB;EAErC,MAAMK,QAAQ,GACZP,aAAa,KAAK,OAAOK,GAAG,KAAK,QAAQ,GAAG,OAAOA,GAAG,EAAE,GAAG,EAAE,CAAC;EAChE,MAAMG,iBAAiB,GAAG9B,UAAU,CAElCqB,SAAS,EACThB,mBAAmB,CAACG,cAAc,EAAEY,QAAQ,EAAEF,OAAO,CAAC,EACtDd,oBAAoB,CAClBwB,UAAU,EACV,OAAOD,GAAG,KAAK,QAAQ,GAAG,OAAOA,GAAG,EAAE,GAAG,IAC3C,CAAC,EAND,CAAC,IAAII,MAAM,CAAC,GAAGF,QAAQ,SAAS,CAAC,CAACG,IAAI,CAACC,MAAM,CAACZ,SAAS,CAAC,CAAC,IAAIQ,QAO/D,CAAC;EAED3B,qBAAqB,CAAC,IAAI,EAAE0B,UAAU,CAAC;EAEvCtB,qBAAqB,CAACsB,UAAU,EAAER,QAAQ,EAAEF,OAAO,CAAC;EAEpD,IAAI,OAAOS,GAAG,KAAK,UAAU,IAAIX,QAAQ,EAAE;IACzCY,UAAU,CAAChB,GAAG,GAAGI,QAAQ;EAC3B;EAEA,OAAOjB,KAAA,CAAAc,aAAA,CAACc,GAAG,EAAAZ,QAAA;IAACM,SAAS,EAAES;EAAkB,GAAKF,UAAU,CAAG,CAAC;AAC9D;AAEA,eAAenB,OAAO","ignoreList":[]}
+{"version":3,"file":"Element.js","names":["React","classnames","Context","validateDOMAttributes","extendPropsWithContext","createSpacingClasses","createSkeletonClass","skeletonDOMAttributes","defaultProps","skeletonMethod","Element","forwardRef","props","ref","createElement","ElementInstance","_extends","innerRef","localProps","context","useContext","skeleton","className","internalClass","as","rest","_objectWithoutProperties","_excluded","Tag","attributes","tagClass","undefined","internalClassName","RegExp","test","String"],"sources":["../../../src/elements/Element.tsx"],"sourcesContent":["/**\n * This is mainly a Wrapper, to build more easily HTML Elements\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../shared/Context'\nimport {\n  validateDOMAttributes,\n  extendPropsWithContext,\n} from '../shared/component-helper'\nimport { createSpacingClasses } from '../components/space/SpacingHelper'\nimport {\n  createSkeletonClass,\n  skeletonDOMAttributes,\n  SkeletonMethods,\n} from '../components/skeleton/SkeletonHelper'\nimport type { SkeletonShow } from '../components/skeleton/Skeleton'\n\nimport type { DynamicElement, SpacingProps } from '../shared/types'\n\nexport type ElementInternalProps = {\n  /**\n   * Defines the Element Type, like \"div\"\n   */\n  as: DynamicElement<unknown>\n}\n\nexport type ElementProps = {\n  skeleton?: SkeletonShow\n  skeletonMethod?: SkeletonMethods\n  /**\n   * As a string: replaces the default tag class `dnb-{TAG_NAME}` with a different class. Empty string does the same as default `undefined`.\n   *\n   * As a boolean: set it to `false` to disable the default tag class. `true` does the same as default `undefined`.\n   *\n   * Default: `undefined`\n   */\n  internalClass?: string | boolean\n  innerRef?: React.RefObject<HTMLElement> | React.ForwardedRef<unknown>\n  children?: React.ReactNode\n} & SpacingProps\n\nexport type ElementAllProps = ElementProps &\n  ElementInternalProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref' | 'as'>\n\ntype Attributes = Record<string, unknown>\n\nexport const defaultProps = {\n  skeletonMethod: 'font',\n}\n\nconst Element = React.forwardRef((props: ElementAllProps, ref) => {\n  return <ElementInstance innerRef={ref} {...props} />\n})\n\nfunction ElementInstance(localProps: ElementAllProps) {\n  const context = React.useContext(Context)\n  const props = extendPropsWithContext(localProps, defaultProps, {\n    skeleton: context?.skeleton,\n  })\n\n  const {\n    className,\n    internalClass,\n    as,\n    innerRef,\n    skeleton,\n    skeletonMethod,\n    ...rest\n  } = props\n\n  const Tag = as\n  const attributes = rest as Attributes\n\n  const tagClass =\n    internalClass === false\n      ? ''\n      : (internalClass === true ? undefined : internalClass) ||\n        (typeof Tag === 'string' ? `dnb-${Tag}` : '')\n\n  const internalClassName = classnames(\n    !new RegExp(`${tagClass}(\\\\s|$)`).test(String(className)) && tagClass,\n    className,\n    createSkeletonClass(skeletonMethod, skeleton, context),\n    createSpacingClasses(\n      attributes,\n      typeof Tag === 'string' ? `dnb-${Tag}` : null\n    )\n  )\n\n  validateDOMAttributes(null, attributes)\n\n  skeletonDOMAttributes(attributes, skeleton, context)\n\n  if (typeof Tag !== 'function' && innerRef) {\n    attributes.ref = innerRef\n  }\n\n  return <Tag className={internalClassName} {...attributes} />\n}\n\nexport default Element\n"],"mappings":";;;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,OAAO,MAAM,mBAAmB;AACvC,SACEC,qBAAqB,EACrBC,sBAAsB,QACjB,4BAA4B;AACnC,SAASC,oBAAoB,QAAQ,mCAAmC;AACxE,SACEC,mBAAmB,EACnBC,qBAAqB,QAEhB,uCAAuC;AAiC9C,OAAO,MAAMC,YAAY,GAAG;EAC1BC,cAAc,EAAE;AAClB,CAAC;AAED,MAAMC,OAAO,GAAGV,KAAK,CAACW,UAAU,CAAC,CAACC,KAAsB,EAAEC,GAAG,KAAK;EAChE,OAAOb,KAAA,CAAAc,aAAA,CAACC,eAAe,EAAAC,QAAA;IAACC,QAAQ,EAAEJ;EAAI,GAAKD,KAAK,CAAG,CAAC;AACtD,CAAC,CAAC;AAEF,SAASG,eAAeA,CAACG,UAA2B,EAAE;EACpD,MAAMC,OAAO,GAAGnB,KAAK,CAACoB,UAAU,CAAClB,OAAO,CAAC;EACzC,MAAMU,KAAK,GAAGR,sBAAsB,CAACc,UAAU,EAAEV,YAAY,EAAE;IAC7Da,QAAQ,EAAEF,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEE;EACrB,CAAC,CAAC;EAEF,MAAM;MACJC,SAAS;MACTC,aAAa;MACbC,EAAE;MACFP,QAAQ;MACRI,QAAQ;MACRZ;IAEF,CAAC,GAAGG,KAAK;IADJa,IAAI,GAAAC,wBAAA,CACLd,KAAK,EAAAe,SAAA;EAET,MAAMC,GAAG,GAAGJ,EAAE;EACd,MAAMK,UAAU,GAAGJ,IAAkB;EAErC,MAAMK,QAAQ,GACZP,aAAa,KAAK,KAAK,GACnB,EAAE,GACF,CAACA,aAAa,KAAK,IAAI,GAAGQ,SAAS,GAAGR,aAAa,MAClD,OAAOK,GAAG,KAAK,QAAQ,GAAG,OAAOA,GAAG,EAAE,GAAG,EAAE,CAAC;EAEnD,MAAMI,iBAAiB,GAAG/B,UAAU,CAElCqB,SAAS,EACThB,mBAAmB,CAACG,cAAc,EAAEY,QAAQ,EAAEF,OAAO,CAAC,EACtDd,oBAAoB,CAClBwB,UAAU,EACV,OAAOD,GAAG,KAAK,QAAQ,GAAG,OAAOA,GAAG,EAAE,GAAG,IAC3C,CAAC,EAND,CAAC,IAAIK,MAAM,CAAC,GAAGH,QAAQ,SAAS,CAAC,CAACI,IAAI,CAACC,MAAM,CAACb,SAAS,CAAC,CAAC,IAAIQ,QAO/D,CAAC;EAED3B,qBAAqB,CAAC,IAAI,EAAE0B,UAAU,CAAC;EAEvCtB,qBAAqB,CAACsB,UAAU,EAAER,QAAQ,EAAEF,OAAO,CAAC;EAEpD,IAAI,OAAOS,GAAG,KAAK,UAAU,IAAIX,QAAQ,EAAE;IACzCY,UAAU,CAAChB,GAAG,GAAGI,QAAQ;EAC3B;EAEA,OAAOjB,KAAA,CAAAc,aAAA,CAACc,GAAG,EAAAZ,QAAA;IAACM,SAAS,EAAEU;EAAkB,GAAKH,UAAU,CAAG,CAAC;AAC9D;AAEA,eAAenB,OAAO","ignoreList":[]}

package/es/elements/lib.d.ts

@@ -79,7 +79,7 @@ export declare const getElements: () => {
         } & {
             skeleton?: boolean;
             skeletonMethod?: import("../components/skeleton/SkeletonHelper").SkeletonMethods;
-            internalClass?: string;
+            internalClass?: string | boolean;
             innerRef?: import("react").ForwardedRef<unknown> | import("react").RefObject<HTMLElement>;
             children?: import("react").ReactNode;
         }): import("react/jsx-runtime").JSX.Element;

package/es/extensions/forms/Wizard/Container/DisplaySteps.d.ts

@@ -1,7 +1,7 @@
-export declare function DisplaySteps({ mode, variant, noAnimation, handleChange, sidebarId, }: {
+export declare function DisplaySteps({ mode, noAnimation, handleChange, expandedInitially, outset, }: {
     mode: any;
-    variant: any;
     noAnimation: any;
     handleChange: any;
-    sidebarId: any;
+    expandedInitially: any;
+    outset: any;
 }): import("react/jsx-runtime").JSX.Element;

package/es/extensions/forms/Wizard/Container/DisplaySteps.js

@@ -6,14 +6,14 @@ import StepIndicator from '../../../../components/StepIndicator';
 import { useTranslation } from '../../hooks';
 export function DisplaySteps({
   mode,
-  variant,
   noAnimation,
   handleChange,
-  sidebarId
+  expandedInitially,
+  outset
 }) {
+  var _getStepIndicatorStat;
   const [, forceUpdate] = useReducer(() => ({}), {});
   const {
-    id,
     activeIndexRef,
     stepsRef,
     updateTitlesRef,
@@ -24,8 +24,7 @@ export function DisplaySteps({
     forceUpdate();
   };
   const translations = useTranslation();
-  const sidebar_id = variant === 'drawer' && !sidebarId ? undefined : sidebarId !== null && sidebarId !== void 0 ? sidebarId : id;
-  const getTriggerStatus = useCallback(() => {
+  const getStepIndicatorStatus = useCallback(() => {
     if (!hasErrorInOtherStepRef.current) {
       return;
     }
@@ -41,12 +40,15 @@ export function DisplaySteps({
         status_state: 'warn'
       };
     }
+    return {};
   }, [hasErrorInOtherStepRef, hasInvalidStepsState, translations.Step.stepHasError]);
+  const {
+    status,
+    status_state
+  } = (_getStepIndicatorStat = getStepIndicatorStatus()) !== null && _getStepIndicatorStat !== void 0 ? _getStepIndicatorStat : {};
   return React.createElement("aside", {
     className: "dnb-forms-wizard-layout__indicator"
-  }, React.createElement(StepIndicator.Sidebar, {
-    sidebar_id: sidebar_id
-  }), React.createElement(StepIndicator, {
+  }, React.createElement(StepIndicator, {
     bottom: true,
     current_step: activeIndexRef.current,
     data: Array.from(stepsRef.current.values()).map(({
@@ -63,9 +65,11 @@ export function DisplaySteps({
     })),
     mode: mode,
     no_animation: noAnimation,
+    expandedInitially: expandedInitially,
     on_change: handleChange,
-    sidebar_id: sidebar_id,
-    triggerButtonProps: getTriggerStatus()
+    outset: outset,
+    status: status,
+    status_state: status_state
   }));
 }
 //# sourceMappingURL=DisplaySteps.js.map

package/es/extensions/forms/Wizard/Container/DisplaySteps.js.map

@@ -1 +1 @@
-{"version":3,"file":"DisplaySteps.js","names":["React","useCallback","useContext","useReducer","WizardContext","StepIndicator","useTranslation","DisplaySteps","mode","variant","noAnimation","handleChange","sidebarId","forceUpdate","id","activeIndexRef","stepsRef","updateTitlesRef","hasErrorInOtherStepRef","hasInvalidStepsState","current","translations","sidebar_id","undefined","getTriggerStatus","status","Step","stepHasError","status_state","createElement","className","Sidebar","bottom","current_step","data","Array","from","values","map","stringifiedTitle","title","inactive","statusState","no_animation","on_change","triggerButtonProps"],"sources":["../../../../../../src/extensions/forms/Wizard/Container/DisplaySteps.tsx"],"sourcesContent":["import React, { useCallback, useContext, useReducer } from 'react'\nimport WizardContext from '../Context'\nimport StepIndicator from '../../../../components/StepIndicator'\nimport { StepIndicatorItemProps } from '../../../../components/step-indicator/StepIndicatorItem'\nimport { useTranslation } from '../../hooks'\n\nexport function DisplaySteps({\n  mode,\n  variant,\n  noAnimation,\n  handleChange,\n  sidebarId,\n}) {\n  const [, forceUpdate] = useReducer(() => ({}), {})\n  const {\n    id,\n    activeIndexRef,\n    stepsRef,\n    updateTitlesRef,\n    hasErrorInOtherStepRef,\n    hasInvalidStepsState,\n  } = useContext(WizardContext) || {}\n  updateTitlesRef.current = () => {\n    forceUpdate()\n  }\n  const translations = useTranslation()\n\n  const sidebar_id =\n    variant === 'drawer' && !sidebarId ? undefined : sidebarId ?? id\n\n  const getTriggerStatus = useCallback(() => {\n    if (!hasErrorInOtherStepRef.current) {\n      return // stop here\n    }\n    if (hasInvalidStepsState(undefined, ['error'])) {\n      return {\n        status: translations.Step.stepHasError,\n        status_state: 'error',\n      } satisfies Omit<StepIndicatorItemProps, 'title' | 'currentItemNum'>\n    }\n    if (hasInvalidStepsState(undefined, ['unknown'])) {\n      return {\n        status: 'Unknown state',\n        status_state: 'warn',\n      } satisfies Omit<StepIndicatorItemProps, 'title' | 'currentItemNum'>\n    }\n  }, [\n    hasErrorInOtherStepRef,\n    hasInvalidStepsState,\n    translations.Step.stepHasError,\n  ])\n\n  return (\n    <aside className=\"dnb-forms-wizard-layout__indicator\">\n      <StepIndicator.Sidebar sidebar_id={sidebar_id} />\n      <StepIndicator\n        bottom\n        current_step={activeIndexRef.current}\n        data={Array.from(stepsRef.current.values()).map(\n          ({ stringifiedTitle, title, inactive, status, statusState }) =>\n            ({\n              title: stringifiedTitle || title,\n              inactive,\n              status,\n              status_state: statusState,\n            }) satisfies Omit<StepIndicatorItemProps, 'currentItemNum'>\n        )}\n        mode={mode}\n        no_animation={noAnimation}\n        on_change={handleChange}\n        sidebar_id={sidebar_id}\n        triggerButtonProps={getTriggerStatus()}\n      />\n    </aside>\n  )\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,UAAU,QAAQ,OAAO;AAClE,OAAOC,aAAa,MAAM,YAAY;AACtC,OAAOC,aAAa,MAAM,sCAAsC;AAEhE,SAASC,cAAc,QAAQ,aAAa;AAE5C,OAAO,SAASC,YAAYA,CAAC;EAC3BC,IAAI;EACJC,OAAO;EACPC,WAAW;EACXC,YAAY;EACZC;AACF,CAAC,EAAE;EACD,MAAM,GAAGC,WAAW,CAAC,GAAGV,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;EAClD,MAAM;IACJW,EAAE;IACFC,cAAc;IACdC,QAAQ;IACRC,eAAe;IACfC,sBAAsB;IACtBC;EACF,CAAC,GAAGjB,UAAU,CAACE,aAAa,CAAC,IAAI,CAAC,CAAC;EACnCa,eAAe,CAACG,OAAO,GAAG,MAAM;IAC9BP,WAAW,CAAC,CAAC;EACf,CAAC;EACD,MAAMQ,YAAY,GAAGf,cAAc,CAAC,CAAC;EAErC,MAAMgB,UAAU,GACdb,OAAO,KAAK,QAAQ,IAAI,CAACG,SAAS,GAAGW,SAAS,GAAGX,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIE,EAAE;EAElE,MAAMU,gBAAgB,GAAGvB,WAAW,CAAC,MAAM;IACzC,IAAI,CAACiB,sBAAsB,CAACE,OAAO,EAAE;MACnC;IACF;IACA,IAAID,oBAAoB,CAACI,SAAS,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE;MAC9C,OAAO;QACLE,MAAM,EAAEJ,YAAY,CAACK,IAAI,CAACC,YAAY;QACtCC,YAAY,EAAE;MAChB,CAAC;IACH;IACA,IAAIT,oBAAoB,CAACI,SAAS,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE;MAChD,OAAO;QACLE,MAAM,EAAE,eAAe;QACvBG,YAAY,EAAE;MAChB,CAAC;IACH;EACF,CAAC,EAAE,CACDV,sBAAsB,EACtBC,oBAAoB,EACpBE,YAAY,CAACK,IAAI,CAACC,YAAY,CAC/B,CAAC;EAEF,OACE3B,KAAA,CAAA6B,aAAA;IAAOC,SAAS,EAAC;EAAoC,GACnD9B,KAAA,CAAA6B,aAAA,CAACxB,aAAa,CAAC0B,OAAO;IAACT,UAAU,EAAEA;EAAW,CAAE,CAAC,EACjDtB,KAAA,CAAA6B,aAAA,CAACxB,aAAa;IACZ2B,MAAM;IACNC,YAAY,EAAElB,cAAc,CAACK,OAAQ;IACrCc,IAAI,EAAEC,KAAK,CAACC,IAAI,CAACpB,QAAQ,CAACI,OAAO,CAACiB,MAAM,CAAC,CAAC,CAAC,CAACC,GAAG,CAC7C,CAAC;MAAEC,gBAAgB;MAAEC,KAAK;MAAEC,QAAQ;MAAEhB,MAAM;MAAEiB;IAAY,CAAC,MACxD;MACCF,KAAK,EAAED,gBAAgB,IAAIC,KAAK;MAChCC,QAAQ;MACRhB,MAAM;MACNG,YAAY,EAAEc;IAChB,CAAC,CACL,CAAE;IACFlC,IAAI,EAAEA,IAAK;IACXmC,YAAY,EAAEjC,WAAY;IAC1BkC,SAAS,EAAEjC,YAAa;IACxBW,UAAU,EAAEA,UAAW;IACvBuB,kBAAkB,EAAErB,gBAAgB,CAAC;EAAE,CACxC,CACI,CAAC;AAEZ","ignoreList":[]}
+{"version":3,"file":"DisplaySteps.js","names":["React","useCallback","useContext","useReducer","WizardContext","StepIndicator","useTranslation","DisplaySteps","mode","noAnimation","handleChange","expandedInitially","outset","_getStepIndicatorStat","forceUpdate","activeIndexRef","stepsRef","updateTitlesRef","hasErrorInOtherStepRef","hasInvalidStepsState","current","translations","getStepIndicatorStatus","undefined","status","Step","stepHasError","status_state","createElement","className","bottom","current_step","data","Array","from","values","map","stringifiedTitle","title","inactive","statusState","no_animation","on_change"],"sources":["../../../../../../src/extensions/forms/Wizard/Container/DisplaySteps.tsx"],"sourcesContent":["import React, { useCallback, useContext, useReducer } from 'react'\nimport WizardContext from '../Context'\nimport StepIndicator from '../../../../components/StepIndicator'\nimport { StepIndicatorItemProps } from '../../../../components/step-indicator/StepIndicatorItem'\nimport { useTranslation } from '../../hooks'\n\nexport function DisplaySteps({\n  mode,\n  noAnimation,\n  handleChange,\n  expandedInitially,\n  outset,\n}) {\n  const [, forceUpdate] = useReducer(() => ({}), {})\n  const {\n    activeIndexRef,\n    stepsRef,\n    updateTitlesRef,\n    hasErrorInOtherStepRef,\n    hasInvalidStepsState,\n  } = useContext(WizardContext) || {}\n  updateTitlesRef.current = () => {\n    forceUpdate()\n  }\n  const translations = useTranslation()\n\n  const getStepIndicatorStatus = useCallback(() => {\n    if (!hasErrorInOtherStepRef.current) {\n      return // stop here\n    }\n    if (hasInvalidStepsState(undefined, ['error'])) {\n      return {\n        status: translations.Step.stepHasError,\n        status_state: 'error',\n      } satisfies Omit<StepIndicatorItemProps, 'title' | 'currentItemNum'>\n    }\n    if (hasInvalidStepsState(undefined, ['unknown'])) {\n      return {\n        status: 'Unknown state',\n        status_state: 'warn',\n      } satisfies Omit<StepIndicatorItemProps, 'title' | 'currentItemNum'>\n    }\n    return {}\n  }, [\n    hasErrorInOtherStepRef,\n    hasInvalidStepsState,\n    translations.Step.stepHasError,\n  ])\n\n  const { status, status_state } = getStepIndicatorStatus() ?? {}\n\n  return (\n    <aside className=\"dnb-forms-wizard-layout__indicator\">\n      <StepIndicator\n        bottom\n        current_step={activeIndexRef.current}\n        data={Array.from(stepsRef.current.values()).map(\n          ({ stringifiedTitle, title, inactive, status, statusState }) =>\n            ({\n              title: stringifiedTitle || title,\n              inactive,\n              status,\n              status_state: statusState,\n            }) satisfies Omit<StepIndicatorItemProps, 'currentItemNum'>\n        )}\n        mode={mode}\n        no_animation={noAnimation}\n        expandedInitially={expandedInitially}\n        on_change={handleChange}\n        outset={outset}\n        status={status}\n        status_state={status_state}\n      />\n    </aside>\n  )\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,UAAU,QAAQ,OAAO;AAClE,OAAOC,aAAa,MAAM,YAAY;AACtC,OAAOC,aAAa,MAAM,sCAAsC;AAEhE,SAASC,cAAc,QAAQ,aAAa;AAE5C,OAAO,SAASC,YAAYA,CAAC;EAC3BC,IAAI;EACJC,WAAW;EACXC,YAAY;EACZC,iBAAiB;EACjBC;AACF,CAAC,EAAE;EAAA,IAAAC,qBAAA;EACD,MAAM,GAAGC,WAAW,CAAC,GAAGX,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;EAClD,MAAM;IACJY,cAAc;IACdC,QAAQ;IACRC,eAAe;IACfC,sBAAsB;IACtBC;EACF,CAAC,GAAGjB,UAAU,CAACE,aAAa,CAAC,IAAI,CAAC,CAAC;EACnCa,eAAe,CAACG,OAAO,GAAG,MAAM;IAC9BN,WAAW,CAAC,CAAC;EACf,CAAC;EACD,MAAMO,YAAY,GAAGf,cAAc,CAAC,CAAC;EAErC,MAAMgB,sBAAsB,GAAGrB,WAAW,CAAC,MAAM;IAC/C,IAAI,CAACiB,sBAAsB,CAACE,OAAO,EAAE;MACnC;IACF;IACA,IAAID,oBAAoB,CAACI,SAAS,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE;MAC9C,OAAO;QACLC,MAAM,EAAEH,YAAY,CAACI,IAAI,CAACC,YAAY;QACtCC,YAAY,EAAE;MAChB,CAAC;IACH;IACA,IAAIR,oBAAoB,CAACI,SAAS,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE;MAChD,OAAO;QACLC,MAAM,EAAE,eAAe;QACvBG,YAAY,EAAE;MAChB,CAAC;IACH;IACA,OAAO,CAAC,CAAC;EACX,CAAC,EAAE,CACDT,sBAAsB,EACtBC,oBAAoB,EACpBE,YAAY,CAACI,IAAI,CAACC,YAAY,CAC/B,CAAC;EAEF,MAAM;IAAEF,MAAM;IAAEG;EAAa,CAAC,IAAAd,qBAAA,GAAGS,sBAAsB,CAAC,CAAC,cAAAT,qBAAA,cAAAA,qBAAA,GAAI,CAAC,CAAC;EAE/D,OACEb,KAAA,CAAA4B,aAAA;IAAOC,SAAS,EAAC;EAAoC,GACnD7B,KAAA,CAAA4B,aAAA,CAACvB,aAAa;IACZyB,MAAM;IACNC,YAAY,EAAEhB,cAAc,CAACK,OAAQ;IACrCY,IAAI,EAAEC,KAAK,CAACC,IAAI,CAAClB,QAAQ,CAACI,OAAO,CAACe,MAAM,CAAC,CAAC,CAAC,CAACC,GAAG,CAC7C,CAAC;MAAEC,gBAAgB;MAAEC,KAAK;MAAEC,QAAQ;MAAEf,MAAM;MAAEgB;IAAY,CAAC,MACxD;MACCF,KAAK,EAAED,gBAAgB,IAAIC,KAAK;MAChCC,QAAQ;MACRf,MAAM;MACNG,YAAY,EAAEa;IAChB,CAAC,CACL,CAAE;IACFhC,IAAI,EAAEA,IAAK;IACXiC,YAAY,EAAEhC,WAAY;IAC1BE,iBAAiB,EAAEA,iBAAkB;IACrC+B,SAAS,EAAEhC,YAAa;IACxBE,MAAM,EAAEA,MAAO;IACfY,MAAM,EAAEA,MAAO;IACfG,YAAY,EAAEA;EAAa,CAC5B,CACI,CAAC;AAEZ","ignoreList":[]}

package/es/extensions/forms/Wizard/Container/WizardContainer.d.ts

@@ -25,17 +25,29 @@ export type Props = ComponentProps & {
     onStepChange?: OnStepChange;
     /**
      * The sidebar variant.
+     * @deprecated there is only one variant available. This props has no effect
      */
     variant?: 'sidebar' | 'drawer';
+    /**
+     * @deprecated there is no longer a sidebar. This prop does nothing.
+     */
     sidebarId?: string;
     /**
      * If set to `true`, the wizard will not animate the steps.
      */
     noAnimation?: boolean;
+    /**
+     * Set to `true` to have the list be expanded initially. Defaults to `false`.
+     */
+    expandedInitially?: boolean;
     /**
      * If set to `true`, the wizard will not unmount the steps when navigating back and forth.
      */
     keepInDOM?: boolean;
+    /**
+     * Whether or not to break out (using negative margins) on larger screens. Defaults to `true`.
+     */
+    outset?: boolean;
     /**
      * If set to `true`, the wizard pre-render all steps so the props of each field is available in the data context.
      * Defaults to `true`.