Merge branch 'main' into 842-ids-tabs-draggable-styling

.vscode/spellright.dict

@@ -42,7 +42,6 @@ Changelog
 Veracode
 Snyk
 Emptymessage
-Renderloop
 Searchfield
 Skiplink
 Sparkline

doc/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### 1.0.0-beta.2 Fixes
 
+- `[General]` Removed IdsRenderLoop and replaced its usage with timeout functions, async/await, and CSS animations. ([#897](https://github.com/infor-design/enterprise-wc/issues/897))
 - `[AppMenu]` Removed the logo from the app menu component by design request. ([#851](https://github.com/infor-design/enterprise-wc/pull/v))
 - `[Autocomplete]` Fixed the popup position when autocomplete results changing. ([#908](https://github.com/infor-design/enterprise-wc/issues/908))
 - `[BarChart]` Added support for grouped and fixed grid lines. ([#859](https://github.com/infor-design/enterprise-wc/issues/859))
@@ -111,7 +112,7 @@ For more details on breaking changes see each component in the individual README
 - `[Progress (Chart)]` A new component that combines various similar chart types (Completion, Targeted Achievement, etc) has been added. See the [README](https://github.com/infor-design/enterprise-wc/tree/main/src/components/ids-progress-chart/README.md#converting-from-previous-versions-breaking-changes) for details. ([#268](https://github.com/infor-design/enterprise-wc/issues/268))
 - `[Radio]` The Radio component has been converted. See the [README](https://github.com/infor-design/enterprise-wc/tree/main/src/components/ids-radio/README.md#converting-from-previous-versions-breaking-changes) for details. ([#169](https://github.com/infor-design/enterprise-wc/issues/169))
 - `[Rating]` The Rating component has been converted. See the [README](https://github.com/infor-design/enterprise-wc/tree/main/src/components/ids-rating/README.md#converting-from-previous-versions-breaking-changes) for details. ([#119](https://github.com/infor-design/enterprise-wc/issues/119))
-- `[RenderLoop]` The RenderLoop component has been implemented as a mixin. See the [README](https://github.com/infor-design/enterprise-wc/tree/main/src/components/ids-render-loop/README.md#converting-from-previous-versions-breaking-changes) for details. ([#172](https://github.com/infor-design/enterprise-wc/issues/172))
+- `[RenderLoop]` The RenderLoop component has been implemented as a mixin. ([#172](https://github.com/infor-design/enterprise-wc/issues/172))
 - `[ScrollView]` A new component that replaces Circle Pager from the previous version and adds touch gestures like swiping. See the [README](https://github.com/infor-design/enterprise-wc/tree/main/src/components/ids-scroll-view/README.md#converting-from-previous-versions-breaking-changes) for details. ([#199](https://github.com/infor-design/enterprise-wc/issues/199))
 - `[Search Field]` The Search Field component has been converted.  See the [README](https://github.com/infor-design/enterprise-wc/tree/main/src/components/ids-search-field/README.md#converting-from-previous-versions-breaking-changes) for details. ([#314](https://github.com/infor-design/enterprise-wc/issues/314))
 - `[Separator]` A new component was created for use in IdsToolbar and IdsMenu to visually separate content. See the [README](https://github.com/infor-design/enterprise-wc/tree/main/src/components/ids-separator/README.md#converting-from-previous-versions-breaking-changes) for details. *(N/A)*

doc/CHECKLIST.md

@@ -113,7 +113,6 @@ Will get a checkbox at minimum viable product. The rest of the details are cover
  - [ ] Radar (ids-radar-chart) skipping until needed
  - [x] Radios (ids-radio)
  - [x] Rating (ids-rating)
- - [x] Renderloop (mixin)
  - [ ] Scatterplot (ids-scatter-plot-chart)
  - [x] Searchfield (ids-search-field)
  - [ ] Sign-in (ids-layouts)

doc/COMPONENTS.md

@@ -546,7 +546,7 @@ Then recheck coverage and tests the rest of the functionality. Like events and m
 
 Keep in mind that you can cover with both an e2e or functional test. The coverage is combined. Jest tests are preferred for API tests. e2e tests should be done for in browser tests or things that JSDOM/Jest cannot support.
 
-You may need to add ignores for some situations because jest runs in JSDOM which is virtual it cant do somethings. Some of these cases is RenderLoops, MutationObserver, ResizeObserver, IntersectionObserver ect. You can cover this with an e2e test instead.
+You may need to add ignores for some situations because jest runs in JSDOM which is virtual it cant do somethings. Some of these cases are MutationObserver, ResizeObserver, IntersectionObserver ect. You can cover this with an e2e test instead.
 
 You also might need to debug tests. More information on that [can be found here.](https://github.com/infor-design/enterprise-wc/blob/main/doc/TESTING.md#debugging-functional-tests)
 

src/components/ids-calendar/ids-calendar.ts

@@ -984,8 +984,7 @@ export default class IdsCalendar extends Base {
 
     if (!end) {
       const date = this.date;
-      date.setMonth(date.getMonth() + 1);
-      date.setDate(0);
+      date.setMonth(date.getMonth() + 1, 0);
       return date;
     }
 

src/components/ids-demo-app/demos/index.ts

@@ -65,7 +65,6 @@ import processIndicatorYaml from '../../ids-process-indicator/demos/index.yaml';
 import progressBarYaml from '../../ids-progress-bar/demos/index.yaml';
 import progressChartYaml from '../../ids-progress-chart/demos/index.yaml';
 import radioYaml from '../../ids-radio/demos/index.yaml';
-import renderLoopYaml from '../../ids-render-loop/demos/index.yaml';
 import ratingYaml from '../../ids-rating/demos/index.yaml';
 import scrollViewYaml from '../../ids-scroll-view/demos/index.yaml';
 import searchFieldYaml from '../../ids-search-field/demos/index.yaml';
@@ -182,7 +181,6 @@ addYaml(progressBarYaml);
 addYaml(progressChartYaml);
 addYaml(radioYaml);
 addYaml(ratingYaml);
-addYaml(renderLoopYaml);
 addYaml(scrollViewYaml);
 addYaml(searchFieldYaml);
 addYaml(separatorYaml);

src/components/ids-modal/ids-modal.ts

@@ -6,8 +6,7 @@ import Base from './ids-modal-base';
 
 import { stringToBool } from '../../utils/ids-string-utils/ids-string-utils';
 import { waitForTransitionEnd } from '../../utils/ids-dom-utils/ids-dom-utils';
-import renderLoop from '../ids-render-loop/ids-render-loop-global';
-import IdsRenderLoopItem from '../ids-render-loop/ids-render-loop-item';
+import { cssTransitionTimeout } from '../../utils/ids-timer-utils/ids-timer-utils';
 
 import zCounter from './ids-modal-z-counter';
 import '../ids-popup/ids-popup';
@@ -19,10 +18,6 @@ import styles from './ids-modal.scss';
 
 type IdsModalFullsizeAttributeValue = null | 'null' | '' | keyof Breakpoints | 'always';
 
-// When a user clicks the Modal Buttons, this is the delay between
-// the click and the "hiding" of the Modal.
-const dismissTimeout = 200;
-
 /**
  * IDS Modal Component
  * @type {IdsModal}
@@ -83,11 +78,11 @@ export default class IdsModal extends Base {
     this.attachEventHandlers();
     this.shouldUpdate = true;
     this.#setFullsizeDefault();
+    this.#setFocusIfVisible();
   }
 
   disconnectedCallback(): void {
     super.disconnectedCallback?.();
-    window.removeEventListener('DOMContentLoaded', this.#onDOMContentLoaded);
     this.#clearBreakpointResponse();
   }
 
@@ -563,19 +558,12 @@ export default class IdsModal extends Base {
   }
 
   /**
-   * @property {Function} onDOMContentLoaded runs calculation-sensitive routines when the entire DOM has loaded
+   * @property {Function} setFocusIfVisible runs calculation-sensitive routines when the entire DOM has loaded
    */
-  #onDOMContentLoaded = () => {
+  #setFocusIfVisible = async () => {
     this.visible = this.getAttribute('visible');
     if (this.visible) {
-      // Fixes a Chrome Bug where time staggering is needed for focus to occur
-      const timeoutCallback = () => {
-        this.setFocus('last');
-      };
-      renderLoop.register(new IdsRenderLoopItem({
-        duration: 30,
-        timeoutCallback
-      }));
+      this.setFocus('last');
     }
   };
 
@@ -605,8 +593,6 @@ export default class IdsModal extends Base {
       }
     });
 
-    window.addEventListener('DOMContentLoaded', this.#onDOMContentLoaded);
-
     // Set up all the events specifically-related to the "trigger" type
     this.refreshTriggerEvents();
   }
@@ -615,24 +601,19 @@ export default class IdsModal extends Base {
    * Handles when Modal Button is clicked.
    * @param {any} e the original event object
    */
-  handleButtonClick(e: any): void {
-    const timeoutCallback = () => {
-      if (typeof this.onButtonClick === 'function') {
-        this.onButtonClick(e.target);
-      }
-      // If this IdsModalButton has a `cancel` prop, treat
-      // it as a `cancel` button and hide.
-      const modalBtn = e.target.closest('ids-modal-button');
-      if (modalBtn?.cancel) {
-        this.hide();
-      }
-    };
+  async handleButtonClick(e: any): Promise<void> {
+    await cssTransitionTimeout(200);
 
-    // Run click handler on a staggered interval
-    renderLoop.register(new IdsRenderLoopItem({
-      duration: dismissTimeout,
-      timeoutCallback
-    }));
+    if (typeof this.onButtonClick === 'function') {
+      this.onButtonClick(e.target);
+    }
+
+    // If this IdsModalButton has a `cancel` prop, treat
+    // it as a `cancel` button and hide.
+    const modalBtn = e.target.closest('ids-modal-button');
+    if (modalBtn?.cancel) {
+      this.hide();
+    }
   }
 
   /**