@brightspace-ui/core 3.155.2 → 3.155.4

package/components/filter/filter-overflow-group.js

@@ -3,7 +3,6 @@ import './filter-tags.js';
 import { css, html, LitElement } from 'lit';
 import { OVERFLOW_CLASS, OverflowGroupMixin } from '../overflow-group/overflow-group-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 function createFilterItem(node) {
 	const dimensionSets = node.querySelectorAll('d2l-filter-dimension-set');
@@ -15,7 +14,7 @@ function createFilterItem(node) {
  * A component that can be used to display a group of filters that will be put into an overflow filter when they no longer fit on the first line of their container
  * @slot - d2l-filters to be added to the container
 */
-class FilterOverflowGroup extends OverflowGroupMixin(RtlMixin(LitElement)) {
+class FilterOverflowGroup extends OverflowGroupMixin(LitElement) {
 
 	static get properties() {
 		return {
@@ -31,11 +30,7 @@ class FilterOverflowGroup extends OverflowGroupMixin(RtlMixin(LitElement)) {
 	static get styles() {
 		return [super.styles, css`
 			::slotted(d2l-filter) {
-				margin-right: 0.3rem;
-			}
-			:host([dir="rtl"]) ::slotted(d2l-filter) {
-				margin-left: 0.3rem;
-				margin-right: 0;
+				margin-inline-end: 0.3rem;
 			}
 		`];
 	}

package/components/filter/filter.js

@@ -32,7 +32,6 @@ import { getFlag } from '../../helpers/flags.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SubscriberRegistryController } from '../../controllers/subscriber/subscriberControllers.js';
 
 const ARROWLEFT_KEY_CODE = 37;
@@ -72,7 +71,7 @@ function addSpaceListener() {
  * @fires d2l-filter-dimension-search - Dispatched when a dimension that supports searching and has the "manual" search-type is searched
  * @fires d2l-filter-dimension-load-more - Dispatched when a dimension load more pager clicked
  */
-class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
+class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 
 	static get properties() {
 		return {
@@ -125,13 +124,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 
 			d2l-input-search {
 				flex: 1 0;
-				margin-left: 0.3rem;
-				margin-right: 0.6rem;
-			}
-
-			:host([dir="rtl"]) d2l-input-search {
-				margin-left: 0.6rem;
-				margin-right: 0.3rem;
+				margin-inline: 0.3rem 0.6rem;
 			}
 
 			.d2l-filter-dimension-select-all {
@@ -145,7 +138,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 
 			.d2l-filter-dimension-header-text {
 				flex-grow: 1;
-				padding-right: calc(2rem + 2px);
+				padding-inline-end: calc(2rem + 2px);
 				text-align: center;
 				${overflowClipEnabled ? overflowEllipsisDeclarations : css`
 					overflow: hidden;
@@ -153,10 +146,6 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 					white-space: nowrap;
 				`}
 			}
-			:host([dir="rtl"]) .d2l-filter-dimension-header-text {
-				padding-left: calc(2rem + 2px);
-				padding-right: 0;
-			}
 
 			.d2l-filter-dimension-set-value {
 				align-items: center;

package/components/selection/selection-mixin.js

@@ -1,7 +1,6 @@
 import { getFirstFocusableDescendant, getLastFocusableDescendant, getNextFocusable, getPreviousFocusable } from '../../helpers/focus.js';
 import { CollectionMixin } from '../../mixins/collection/collection-mixin.js';
 import { isComposedAncestor } from '../../helpers/dom.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 const keyCodes = {
 	DOWN: 40,
@@ -50,7 +49,7 @@ export class SelectionInfo {
 
 }
 
-export const SelectionMixin = superclass => class extends RtlMixin(CollectionMixin(superclass)) {
+export const SelectionMixin = superclass => class extends CollectionMixin(superclass) {
 
 	static get properties() {
 		return {
@@ -193,7 +192,8 @@ export const SelectionMixin = superclass => class extends RtlMixin(CollectionMix
 			}
 		};
 
-		const forward = (this.dir !== 'rtl' && e.keyCode === keyCodes.RIGHT) || (this.dir === 'rtl' && e.keyCode === keyCodes.LEFT) || (e.keyCode === keyCodes.DOWN);
+		const isRtl = (document.documentElement.getAttribute('dir') === 'rtl');
+		const forward = (!isRtl && e.keyCode === keyCodes.RIGHT) || (isRtl && e.keyCode === keyCodes.LEFT) || (e.keyCode === keyCodes.DOWN);
 
 		// first try to find next/previous selection-input relative to the event target within the selection component sub-tree that also belongs to the selection component
 		let focusable = forward ? getNextFocusable(target, false, true, true) : getPreviousFocusable(target, false, true, true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.155.2",
+  "version": "3.155.4",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",