@elliemae/ds-basic 3.50.1-next.9 → 3.51.0-beta.1

package/dist/styles/components/packages/ds-basic/styles/dist-index.scss

@@ -42,6 +42,7 @@
 @import 'packages/ds-page-header/DSPageHeader';
 @import 'packages/ds-pills/DSPills';
 @import 'packages/ds-zoom/DSZoom';
+@import 'packages/ds-indeterminate-progress-indicator/DSIndeterminateProgressIndicator';
 @import 'packages/ds-page-number/DSPageNumber';
 @import 'packages/ds-zipcode-search/DSZipCodeSearch';
 @import 'packages/ds-circular-progress-indicator/DSCircularProgressIndicator';

package/dist/styles/components/packages/{ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-card → ds-card}/DSCard.scss

@@ -17,7 +17,6 @@ $el-pull-right: #{$el-header}__pull-right;
 
   .#{$el-header} {
     color: color(neutral, 600);
-    background: color(neutral, 050);
     padding: 6px 15px;
     border-bottom: 1px solid transparent;
     @include border-radius(0);

package/dist/styles/components/packages/ds-codeeditor/DSCodeEditor.scss

@@ -0,0 +1 @@
+@import './components/DSCodeEditorImpl';

package/dist/styles/components/packages/ds-codeeditor/components/DSCodeEditorImpl.scss

@@ -0,0 +1,69 @@
+$el-container: #{$prefix}-code-editor;
+$el-file-name: #{$el-container}-file-name;
+$el-find-replace-btn: #{$el-container}-find-replace-btn;
+$el-next-back-btn: #{$el-container}-next-back-btn;
+$el-find: #{$el-container}-find;
+$el-replace: #{$el-container}-replace;
+$el-replace-btns: #{$el-container}-replace-btns;
+$options-group: #{$el-container}-options-group;
+
+// dimsum components
+$ds-checkbox: #{$prefix}-form-element-checkbox;
+
+.#{$el-file-name} {
+	padding-bottom: space(s);
+	border-bottom: 1px solid color(neutral, 050);
+}
+
+.#{$el-find-replace-btn} {
+    display: flex;
+    margin-top: space(s);
+    margin-bottom: space(s);
+
+    .em-ds-button:first-child {
+    	margin-right: space(s);
+    }
+}
+
+.#{$el-next-back-btn},
+.#{$el-replace-btns} {
+	display: flex;
+}
+
+.#{$el-replace},
+.#{$el-replace-btns} {
+	margin-top: space(s);
+}
+
+.#{$el-replace-btns} {
+	margin-bottom: space(s);
+	.em-ds-button:first-child {
+    	margin-right: space(s);
+    }
+}
+
+.#{$el-find} {
+	align-items: baseline;
+	.em-ds-input {
+		margin-right: space(xs);
+	}
+	.em-ds-form-element-checkbox {
+		flex: 0.5;
+
+		.em-ds-form-element-checkbox__input-button {
+			margin-right: space(xs);
+		}
+	}
+}
+
+.#{$options-group} {
+	padding: 0 space(xs);
+	display: flex;
+	.#{$ds-checkbox}:not(:last-child) {
+		margin-right: space(s);
+	}
+}
+
+.ace_editor {
+	width: 100% !important;
+}

package/dist/styles/components/packages/ds-dropdownmenu/DSDropdownMenu.scss

@@ -18,7 +18,7 @@ $border-radius: $theme-base-border-radius;
 }
 .#{$menu-container}-s {
   &--is-root {
-    margin: space(xxs) 0
+    margin: space(xxs) 0;
   }
   border: 1px solid color(neutral, 200);
   margin: 0;
@@ -33,7 +33,7 @@ $border-radius: $theme-base-border-radius;
   @include box-shadow(depth(200));
 
   .#{$select-container}__control {
-    margin: 0 space(xs)
+    margin: 0 space(xs);
   }
 
   .#{$select-container}__option {
@@ -46,7 +46,7 @@ $border-radius: $theme-base-border-radius;
   margin: space(xs) 0;
   small {
     padding: 0 space(s);
-    color: color(neutral, 500)
+    color: color(neutral, 500);
   }
   &:after {
     content: '';
@@ -74,12 +74,14 @@ $border-radius: $theme-base-border-radius;
   &__selectable-container {
     padding-right: space(xs);
     min-width: space(m);
-    svg, svg:not([fill]) {
+    svg,
+    svg:not([fill]) {
       @include icon(s, color(brand-primary, 600));
     }
   }
 
-  &:hover, &--active {
+  &:hover,
+  &--active {
     background-color: color(brand-primary, 200);
   }
 
@@ -106,7 +108,8 @@ $border-radius: $theme-base-border-radius;
   &--selected {
     background: color(brand-primary, 600);
     color: color(neutral, 000);
-    svg, svg:not([fill]) {
+    svg,
+    svg:not([fill]) {
       fill: color(neutral, 000);
     }
   }
@@ -114,11 +117,11 @@ $border-radius: $theme-base-border-radius;
   &:active {
     background-color: color(brand-primary, 600);
     color: color(neutral, 000);
-    svg, svg:not([fill]) {
+    svg,
+    svg:not([fill]) {
       fill: color(neutral, 000);
     }
   }
-
 }
 
 .#{$menu-select-container} {

package/dist/styles/components/packages/{ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-imagelibrarymodal → ds-imagelibrarymodal}/DSImageLibraryModal.scss

@@ -56,9 +56,7 @@ $el-body-wrapper: #{$el-container}__body-wrapper;
         text-align: center;
         font-size: font-size(600);
       }
-      img,
-      .#{$el-icon},
-      .#{$spinner-container} {
+      img, .#{$el-icon}, .#{$spinner-container} {
         margin: auto;
         width: 100%;
         height: 85%;
@@ -85,4 +83,4 @@ $el-body-wrapper: #{$el-container}__body-wrapper;
       }
     }
   }
-}
+}

package/dist/styles/components/packages/{ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-portal → ds-portal}/DSPortal.scss

@@ -7,4 +7,4 @@ $el-container: #{$prefix}-portal;
   top: 0;
   left: 0;
   right: 0;
-}
+}

package/dist/styles/dist-index.scss

@@ -42,6 +42,7 @@
 @import 'packages/ds-page-header/DSPageHeader';
 @import 'packages/ds-pills/DSPills';
 @import 'packages/ds-zoom/DSZoom';
+@import 'packages/ds-indeterminate-progress-indicator/DSIndeterminateProgressIndicator';
 @import 'packages/ds-page-number/DSPageNumber';
 @import 'packages/ds-zipcode-search/DSZipCodeSearch';
 @import 'packages/ds-circular-progress-indicator/DSCircularProgressIndicator';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-basic",
-  "version": "3.50.1-next.9",
+  "version": "3.51.0-beta.1",
   "license": "MIT",
   "description": "EllieMae UI Design System Library",
   "files": [
@@ -22,8 +22,8 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "pnpm": ">=6",
-    "node": ">=16"
+    "pnpm": ">=9",
+    "node": ">=22"
   },
   "author": "ICE MT",
   "jestSonar": {
@@ -33,7 +33,7 @@
     "indent": 4
   },
   "devDependencies": {
-    "@elliemae/pui-cli": "9.0.0-next.31",
+    "@elliemae/pui-cli": "9.0.0-next.55",
     "cssnano": "~5.1.15",
     "gulp": "~4.0.2",
     "gulp-rename": "~2.0.0",
@@ -43,12 +43,12 @@
     "postcss-focus-within": "~5.0.4",
     "postcss-styled": "~0.34.0",
     "postcss-syntax": "~0.36.2",
-    "@elliemae/ds-monorepo-devops": "3.50.1-next.9"
+    "@elliemae/ds-monorepo-devops": "3.51.0-beta.1"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "publishConfig": {
     "access": "public",
@@ -61,7 +61,7 @@
     "prebuild:css": "gulp copySCSSFiles && pnpm run compile:scss",
     "build:css": "postcss ./dist/css/dimsum.css -u autoprefixer -b \"> 0.5% in US, not ie 11, not dead\" -r --no-map && postcss ./dist/css/dimsum.css -m -u cssnano -o ./dist/css/dimsum.min.css",
     "prebuild": "exit 0",
-    "build": "pnpm run build:css",
+    "build": "node ./copyPrebuiltFilesInDist.mjs",
     "dev": "exit 0",
     "checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
   }

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/base/_elements/_elements.scss

@@ -1,65 +0,0 @@
-$primary-text-color: color(neutral, 900);
-
-:root {
-  font-family: $theme-font-family;
-  font-size: $theme-base-font-size;
-  color: $primary-text-color;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-}
-
-h1 {
-  @include h1-text-style;
-}
-
-h2 {
-  @include h2-text-style;
-}
-
-h3 {
-  @include h3-text-style;
-}
-
-h4 {
-  @include h4-text-style;
-}
-
-p {
-  @include body-text-style;
-}
-
-a {
-  @include link-text-style;
-}
-
-.#{$prefix}-h1-text-style {
-  @include h1-text-style;
-}
-
-.#{$prefix}-h2-text-style {
-  @include h2-text-style;
-}
-
-.#{$prefix}-h3-text-style {
-  @include h3-text-style;
-}
-
-.#{$prefix}-h4-text-style {
-  @include h4-text-style;
-}
-
-.#{$prefix}-section-header-text-style {
-  @include section-header-text-style;
-}
-
-.#{$prefix}-body-text-style {
-  @include body-text-style;
-}
-
-.#{$prefix}-body-small-text-style {
-  @include body-small-text-style;
-}
-
-.#{$prefix}-link-text-style {
-  @include link-text-style;
-}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/base/_generic/_general-functions.scss

@@ -1,210 +0,0 @@
-$default-browser-font-size: 16px;
-
-/// Returns the value in rem for a given pixel value.
-/// @param {Number} $value - The pixel value to be converted.
-/// @return {Number} The converted value in rem.
-
-@function rem($value) {
-  $unit: unit($value);
-
-  @if $value == 0 {
-    @return 0;
-  } @else if $unit == 'rem' {
-    @return $value;
-  } @else if $unit == 'px' {
-    @return $value / $theme-base-font-size * 1rem;
-  } @else if $unit == 'em' {
-    @return $unit / 1em * 1rem;
-  } @else {
-    @error 'Value must be in px, em, or rem.';
-  }
-}
-
-/// Returns the value in ems for a given pixel value. Note that this
-/// only works for elements that have had no font-size changes.
-/// @param {Number} $value - The pixel value to be converted.
-/// @return {Number} The converted value in ems.
-
-@function em($value) {
-  $unit: unit($value);
-
-  @if $value == 0 {
-    @return 0;
-  } @else if $unit == 'em' {
-    @return $value;
-  } @else if $unit == 'rem' {
-    @return $value / 1rem * 1em * ($theme-base-font-size / $default-browser-font-size);
-  } @else if $unit == 'px' {
-    @return $value / $default-browser-font-size * 1em;
-  } @else {
-    @error 'Value must be in px, rem, or em.';
-  }
-}
-
-///
-/// Returns whether `$list` contains `$value`.
-/// @ignore Documentation: http://at-import.github.io/SassyLists/documentation/#function-sl-contain
-/// @param {List}    $list  - list to check
-/// @param {*}       $value - value to look for
-/// @example
-/// sl-contain(a b c, a)
-/// // true
-/// @example
-/// sl-contain(a b c, z)
-/// // false
-/// @return {Bool}
-
-@function contain($list, $value) {
-  @return not not index($list, $value);
-}
-
-///
-/// @requires sl-contain
-/// @alias sl-contain
-///
-
-@function include($list, $value) {
-  @return contain($list, $value);
-}
-
-/// Removes the unit (e.g. px, em, rem) from a value, returning the number only.
-///
-/// @param {Number} $num - Number to strip unit from.
-///
-/// @returns {Number} The same number, sans unit.
-@function strip-unit($num) {
-  @return $num / ($num * 0 + 1);
-}
-
-/// Converts one or more pixel values into matching rem values.
-///
-/// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.
-/// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base.
-///
-/// @returns {List} A list of converted values.
-@function rem-calc($values, $base: null) {
-  $rem-values: ();
-  $count: length($values);
-
-  // If no base is defined, defer to the global font size
-  @if $base == null {
-    $base: $global-font-size;
-  }
-
-  // If the base font size is a %, then multiply it by 16px
-  // This is because 100% font size = 16px in most all browsers
-  @if unit($base) == '%' {
-    $base: ($base / 100%) * 16px;
-  }
-
-  // Using rem as base allows correct scaling
-  @if unit($base) == 'rem' {
-    $base: strip-unit($base) * 16px;
-  }
-
-  @if $count == 1 {
-    @return -zf-to-rem($values, $base);
-  }
-
-  @for $i from 1 through $count {
-    $rem-values: append($rem-values, -zf-to-rem(nth($values, $i), $base));
-  }
-
-  @return $rem-values;
-}
-
-// Converts a unitless, pixel, or rem value to em, for use in breakpoints.
-@function -zf-bp-to-em($value) {
-  // Pixel and unitless values are converted to rems
-  @if unit($value) == 'px' or unitless($value) {
-    $value: rem-calc($value, $base: 16px);
-  }
-
-  // Then the value is converted to ems
-  @return strip-unit($value) * 1em;
-}
-
-/// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$global-font-size` variable.
-/// @access private
-///
-/// @param {Number} $value - Pixel value to convert.
-/// @param {Number} $base [null] - Base for pixel conversion.
-///
-/// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is.
-@function -zf-to-rem($value, $base: null) {
-  // Check if the value is a number
-  @if type-of($value) != 'number' {
-    @warn inspect($value) + ' was passed to rem-calc(), which is not a number.';
-    @return $value;
-  }
-
-  // Transform em into rem if someone hands over 'em's
-  @if unit($value) == 'em' {
-    $value: strip-unit($value) * 1rem;
-  }
-
-  // Calculate rem if units for $value is not rem or em
-  @if unit($value) != 'rem' {
-    $value: strip-unit($value) / strip-unit($base) * 1rem;
-  }
-
-  // Turn 0rem into 0
-  @if $value == 0rem {
-    $value: 0;
-  }
-
-  @return $value;
-}
-
-/// Converts a pixel, percentage, rem or em value to a unitless value based on a given font size. Ideal for working out unitless line heights.
-///
-/// @param {Number} $value - Value to convert to a unitless line height
-/// @param {Number} $base - The font size to use to work out the line height - defaults to $global-font-size
-///
-/// @return {Number} - Unitless number
-@function unitless-calc($value, $base: null) {
-  // If no base is defined, defer to the global font size
-  @if $base == null {
-    $base: $global-font-size;
-  }
-
-  // First, lets convert our $base to pixels
-
-  // If the base font size is a %, then multiply it by 16px
-  @if unit($base) == '%' {
-    $base: ($base / 100%) * 16px;
-  }
-
-  @if unit($base) == 'rem' {
-    $base: strip-unit($base) * 16px;
-  }
-
-  @if unit($base) == 'em' {
-    $base: strip-unit($base) * 16px;
-  }
-
-  // Now lets convert our value to pixels too
-  @if unit($value) == '%' {
-    $value: ($value / 100%) * $base;
-  }
-
-  @if unit($value) == 'rem' {
-    $value: strip-unit($value) * $base;
-  }
-
-  @if unit($value) == 'em' {
-    $value: strip-unit($value) * $base;
-  }
-
-  // 'px'
-  @if unit($value) == 'px' {
-    @return strip-unit($value) / strip-unit($base);
-  }
-
-  // assume that line-heights greatern then 10 are meant to be absolute in 'px'
-  @if unitless($value) and ($value > 10) {
-    @return $value / strip-unit($base);
-  }
-
-  @return $value;
-}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/base/_generic/_generic-dir.scss

@@ -1,2 +0,0 @@
-@import './_normalize.scss';
-@import './general-functions.scss';