@dnb/eufemia 10.7.0 → 10.9.0

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

@@ -8,6 +8,13 @@
 @import '../../../style/core/utilities.scss';
 
 .dnb-skeleton {
+  --skeleton-delay: 5s;
+
+  img,
+  video {
+    filter: brightness(0%) contrast(0%) opacity(0.5);
+  }
+
   &--block {
     display: block;
   }
@@ -53,6 +60,24 @@
     box-shadow: none !important;
   }
 
+  &--shape#{&}::before {
+    background-color: var(--skeleton-color) !important; // to take presence
+  }
+
+  &--shape#{&}::after {
+    background-image: repeating-linear-gradient(
+      -45deg,
+      var(--skeleton-color--contrast) 1px 2px,
+      transparent 0 6px
+    ) !important;
+    background-repeat: repeat !important;
+    background-size: 100% !important; // to take presence
+
+    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
+    animation: skeletonLinearAnimation 1.5s linear infinite
+      var(--skeleton-delay);
+  }
+
   &--code,
   &--font {
     pre,
@@ -75,6 +100,10 @@
 
     font-family: var(--font-family-default) !important;
     font-style: unset !important;
+
+    &::marker {
+      color: var(--skeleton-color);
+    }
   }
 
   &--font,
@@ -87,6 +116,19 @@
     -webkit-text-fill-color: transparent !important;
     background-clip: text !important;
 
+    background-image: repeating-linear-gradient(
+      -45deg,
+      var(--skeleton-color--contrast) 1px 2px,
+      transparent 0 6px
+    ) !important;
+
+    --border-color: var(--skeleton-color);
+    background-color: var(--skeleton-color) !important;
+
+    background-position-x: 30rem;
+    animation: skeletonFontAnimation 5s linear infinite
+      var(--skeleton-delay);
+
     html[data-visual-test] & {
       animation: none !important;
     }
@@ -120,12 +162,37 @@
   }
 }
 
+@keyframes skeletonLinearAnimation {
+  0% {
+    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
+  }
+
+  50% {
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+  }
+
+  100% {
+    clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
+  }
+}
+
+@keyframes skeletonFontAnimation {
+  0% {
+    background-position-x: 30rem;
+  }
+
+  100% {
+    background-position-x: -30rem;
+  }
+}
+
 $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 +205,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 +219,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 +231,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/skeleton/style/themes/dnb-skeleton-theme-sbanken.css

@@ -0,0 +1,7 @@
+/*
+ * No theme is provided
+ *
+ * Theming variables for the Skeleton component is required globally
+ * and is thus defined in src/style/themes/theme-sbanken/customisations.scss
+ *
+ */

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

@@ -0,0 +1,7 @@
+/*
+ * No theme is provided
+ *
+ * Theming variables for the Skeleton component is required globally
+ * and is thus defined in src/style/themes/theme-sbanken/customisations.scss
+ *
+ */

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

@@ -1,62 +1,7 @@
 /*
- * Skeleton Theme
+ * No theme is provided
  *
- */
-:root {
-  --skeleton-color: var(--color-black-8);
-  --skeleton-color--contrast: var(--color-white);
-}
-
-.dnb-skeleton {
-  --skeleton-delay: 5s;
-}
-.dnb-skeleton img,
-.dnb-skeleton video {
-  filter: brightness(0%) contrast(0%) opacity(0.5);
-}
-.dnb-skeleton--shape.dnb-skeleton::before {
-  background-color: var(--skeleton-color) !important;
-}
-.dnb-skeleton--shape.dnb-skeleton::after {
-  background-image: repeating-linear-gradient(-45deg, var(--skeleton-color--contrast) 1px, var(--skeleton-color--contrast) 2px, transparent 0, transparent 6px) !important;
-  background-image: repeating-linear-gradient(-45deg, var(--skeleton-color--contrast) 1px 2px, transparent 0 6px) !important;
-  background-repeat: repeat !important;
-  background-size: 100% !important;
-  -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
-          clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
-  animation: skeletonLinearAnimation 1.5s linear infinite var(--skeleton-delay);
-}
-.dnb-skeleton--font-only::marker, .dnb-skeleton--font::marker, .dnb-skeleton--font .dnb-skeleton--show-font::marker, .dnb-skeleton--font .dnb-p::marker {
-  color: var(--skeleton-color);
-}
-.dnb-skeleton--font, .dnb-skeleton--font .dnb-skeleton--show-font, .dnb-skeleton--font .dnb-p {
-  background-image: repeating-linear-gradient(-45deg, var(--skeleton-color--contrast) 1px, var(--skeleton-color--contrast) 2px, transparent 0, transparent 6px) !important;
-  background-image: repeating-linear-gradient(-45deg, var(--skeleton-color--contrast) 1px 2px, transparent 0 6px) !important;
-  --border-color: var(--skeleton-color);
-  background-color: var(--skeleton-color) !important;
-  background-position-x: 30rem;
-  animation: skeletonFontAnimation 5s linear infinite var(--skeleton-delay);
-}
-
-@keyframes skeletonLinearAnimation {
-  0% {
-    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
-            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
-  }
-  50% {
-    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
-            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
-  }
-  100% {
-    -webkit-clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
-            clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
-  }
-}
-@keyframes skeletonFontAnimation {
-  0% {
-    background-position-x: 30rem;
-  }
-  100% {
-    background-position-x: -30rem;
-  }
-}
+ * Theming variables for the Skeleton component is required globally
+ * and is thus defined in src/style/themes/theme-ui/ui-theme-basis.scss
+ *
+ */

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

@@ -1 +0,0 @@
-:root{--skeleton-color:var(--color-black-8);--skeleton-color--contrast:var(--color-white)}.dnb-skeleton{--skeleton-delay:5s}.dnb-skeleton img,.dnb-skeleton video{filter:brightness(0) contrast(0) opacity(.5)}.dnb-skeleton--shape.dnb-skeleton:before{background-color:var(--skeleton-color)!important}.dnb-skeleton--shape.dnb-skeleton:after{animation:skeletonLinearAnimation 1.5s linear infinite var(--skeleton-delay);background-image:repeating-linear-gradient(-45deg,var(--skeleton-color--contrast) 1px,var(--skeleton-color--contrast) 2px,transparent 0,transparent 6px)!important;background-image:repeating-linear-gradient(-45deg,var(--skeleton-color--contrast) 1px 2px,transparent 0 6px)!important;background-repeat:repeat!important;background-size:100%!important;-webkit-clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}.dnb-skeleton--font .dnb-p::marker,.dnb-skeleton--font .dnb-skeleton--show-font::marker,.dnb-skeleton--font-only::marker,.dnb-skeleton--font::marker{color:var(--skeleton-color)}.dnb-skeleton--font,.dnb-skeleton--font .dnb-p,.dnb-skeleton--font .dnb-skeleton--show-font{--border-color:var(--skeleton-color);animation:skeletonFontAnimation 5s linear infinite var(--skeleton-delay);background-color:var(--skeleton-color)!important;background-image:repeating-linear-gradient(-45deg,var(--skeleton-color--contrast) 1px,var(--skeleton-color--contrast) 2px,transparent 0,transparent 6px)!important;background-image:repeating-linear-gradient(-45deg,var(--skeleton-color--contrast) 1px 2px,transparent 0 6px)!important;background-position-x:30rem}@keyframes skeletonLinearAnimation{0%{-webkit-clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}50%{-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}to{-webkit-clip-path:polygon(0 0,0 0,0 100%,0 100%);clip-path:polygon(0 0,0 0,0 100%,0 100%)}}@keyframes skeletonFontAnimation{0%{background-position-x:30rem}to{background-position-x:-30rem}}

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

@@ -1,89 +1,7 @@
 /*
- * Skeleton Theme
+ * No theme is provided
+ *
+ * Theming variables for the Skeleton component is required globally
+ * and is thus defined in src/style/themes/theme-ui/ui-theme-basis.scss
  *
  */
-
-:root {
-  --skeleton-color: var(--color-black-8);
-  --skeleton-color--contrast: var(--color-white);
-}
-
-.dnb-skeleton {
-  --skeleton-delay: 5s;
-
-  img,
-  video {
-    filter: brightness(0%) contrast(0%) opacity(0.5);
-  }
-
-  &--shape#{&}::before {
-    background-color: var(--skeleton-color) !important; // to take presence
-  }
-
-  &--shape#{&}::after {
-    background-image: repeating-linear-gradient(
-      -45deg,
-      var(--skeleton-color--contrast) 1px 2px,
-      transparent 0 6px
-    ) !important;
-    background-repeat: repeat !important;
-    background-size: 100% !important; // to take presence
-
-    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
-    animation: skeletonLinearAnimation 1.5s linear infinite
-      var(--skeleton-delay);
-  }
-
-  // Font
-  &--font-only,
-  &--font,
-  &--font &--show-font,
-  &--font .dnb-p {
-    // Additional changes
-    &::marker {
-      color: var(--skeleton-color);
-    }
-  }
-
-  // Font
-  &--font,
-  &--font &--show-font,
-  &--font .dnb-p {
-    background-image: repeating-linear-gradient(
-      -45deg,
-      var(--skeleton-color--contrast) 1px 2px,
-      transparent 0 6px
-    ) !important;
-
-    --border-color: var(--skeleton-color);
-    background-color: var(--skeleton-color) !important;
-
-    background-position-x: 30rem;
-    animation: skeletonFontAnimation 5s linear infinite
-      var(--skeleton-delay);
-  }
-}
-
-@keyframes skeletonLinearAnimation {
-  0% {
-    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
-  }
-
-  50% {
-    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
-  }
-
-  100% {
-    clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
-  }
-}
-
-@keyframes skeletonFontAnimation {
-  0% {
-    background-position-x: 30rem;
-  }
-
-  100% {
-    background-position-x: -30rem;
-  }
-}

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

@@ -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

@@ -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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"}
+{"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

@@ -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;