@tylertech/forge 3.1.2 → 3.1.3

package/dist/vscode.html-custom-data.json

@@ -2899,6 +2899,11 @@
           "name": "noninteractive",
           "description": "Controls whether the list item will automatically attach itself to interactive slotted elements or not.",
           "values": []
+        },
+        {
+          "name": "focus-propagation",
+          "description": "Controls whether the interactive element will receive focus if a non-interactive element is clicked within the list item.",
+          "values": []
         }
       ],
       "references": []

package/esm/date-range-picker/date-range-picker-adapter.js

@@ -22,8 +22,10 @@ export class DateRangePickerAdapter extends BaseDatePickerAdapter {
         if (!this._fromInputElement || !this._fromInputElement) {
             throw new Error(`The ${DATE_RANGE_PICKER_CONSTANTS.elementName} requires two inputs`);
         }
-        const separator = this._createInputSeparator();
-        this._fromInputElement.insertAdjacentElement('afterend', separator);
+        if (!this._component.querySelector(`[${FIELD_CONSTANTS.attributes.MULTI_INPUT_SEPARATOR}]`)) {
+            const separator = this._createInputSeparator();
+            this._fromInputElement.insertAdjacentElement('afterend', separator);
+        }
     }
     _initializeCalendarDropdown() {
         const targetElement = this._getDefaultTargetElement();

package/esm/list/list-item/list-item-constants.d.ts

@@ -15,6 +15,7 @@ export declare const LIST_ITEM_CONSTANTS: {
         THREE_LINE: string;
         WRAP: string;
         NONINTERACTIVE: string;
+        FOCUS_PROPAGATION: string;
     };
     attributes: {
         SELECTED: string;
@@ -26,6 +27,7 @@ export declare const LIST_ITEM_CONSTANTS: {
         THREE_LINE: string;
         WRAP: string;
         NONINTERACTIVE: string;
+        FOCUS_PROPAGATION: string;
     };
     classes: {
         ROOT: string;
@@ -47,7 +49,11 @@ export declare const LIST_ITEM_CONSTANTS: {
     events: {
         SELECT: string;
     };
+    defaults: {
+        FOCUS_PROPAGATION: ListItemFocusPropagation;
+    };
 };
 export interface IListItemSelectEventData<T = any> {
     value: T;
 }
+export type ListItemFocusPropagation = 'allow' | 'off';

package/esm/list/list-item/list-item-constants.js

@@ -14,7 +14,8 @@ const observedAttributes = {
     TWO_LINE: 'two-line',
     THREE_LINE: 'three-line',
     WRAP: 'wrap',
-    NONINTERACTIVE: 'noninteractive'
+    NONINTERACTIVE: 'noninteractive',
+    FOCUS_PROPAGATION: 'focus-propagation'
 };
 const attributes = {
     ...observedAttributes
@@ -39,6 +40,9 @@ const selectors = {
 const events = {
     SELECT: `${elementName}-select`
 };
+const defaults = {
+    FOCUS_PROPAGATION: 'allow'
+};
 export const LIST_ITEM_CONSTANTS = {
     elementName,
     observedAttributes,
@@ -46,5 +50,6 @@ export const LIST_ITEM_CONSTANTS = {
     classes,
     selectors,
     ids,
-    events
+    events,
+    defaults
 };

package/esm/list/list-item/list-item-core.d.ts

@@ -4,6 +4,7 @@
  * License: Apache-2.0
  */
 import { IListItemAdapter } from './list-item-adapter';
+import { ListItemFocusPropagation } from './list-item-constants';
 export interface IListItemCore {
     selected: boolean;
     active: boolean;
@@ -14,6 +15,7 @@ export interface IListItemCore {
     threeLine: boolean;
     wrap: boolean;
     noninteractive: boolean;
+    focusPropagation: ListItemFocusPropagation;
 }
 export declare class ListItemCore implements IListItemCore {
     private _adapter;
@@ -26,6 +28,7 @@ export declare class ListItemCore implements IListItemCore {
     private _threeLine;
     private _wrap;
     private _noninteractive;
+    private _focusPropagation;
     private _interactiveStateChangeListener;
     private _mousedownListener;
     private _clickListener;
@@ -57,4 +60,6 @@ export declare class ListItemCore implements IListItemCore {
     set wrap(value: boolean);
     get noninteractive(): boolean;
     set noninteractive(value: boolean);
+    get focusPropagation(): ListItemFocusPropagation;
+    set focusPropagation(value: ListItemFocusPropagation);
 }

package/esm/list/list-item/list-item-core.js

@@ -15,6 +15,7 @@ export class ListItemCore {
         this._threeLine = false;
         this._wrap = false;
         this._noninteractive = false;
+        this._focusPropagation = LIST_ITEM_CONSTANTS.defaults.FOCUS_PROPAGATION;
         this._interactiveStateChangeListener = this._onInteractiveStateChange.bind(this);
         this._mousedownListener = this._onMousedown.bind(this);
         this._clickListener = this._onClick.bind(this);
@@ -35,7 +36,7 @@ export class ListItemCore {
     _onMousedown(evt) {
         const composedElements = evt.composedPath().filter((el) => el.nodeType === Node.ELEMENT_NODE);
         const fromInteractiveElement = composedElements.some(el => el === this._adapter.interactiveElement);
-        if (!fromInteractiveElement) {
+        if (this._focusPropagation === 'off' || !fromInteractiveElement) {
             evt.preventDefault();
         }
     }
@@ -104,7 +105,9 @@ export class ListItemCore {
         this._dispatchSelectEvent();
     }
     _clickInteractiveElement() {
-        this._adapter.interactiveElement?.focus();
+        if (this._focusPropagation === 'allow') {
+            this._adapter.interactiveElement?.focus();
+        }
         this._adapter.tempDeactivateFocusIndicator(); // Workaround until we can call `focus({ focusVisible: false })` to prevent focus ring from showing
         this._adapter.interactiveElement?.click();
     }
@@ -227,4 +230,16 @@ export class ListItemCore {
             this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.NONINTERACTIVE, this._noninteractive);
         }
     }
+    get focusPropagation() {
+        return this._focusPropagation;
+    }
+    set focusPropagation(value) {
+        if (!['allow', 'off'].includes(value)) {
+            value = LIST_ITEM_CONSTANTS.defaults.FOCUS_PROPAGATION;
+        }
+        if (this._focusPropagation !== value) {
+            this._focusPropagation = value;
+            this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.FOCUS_PROPAGATION, this._focusPropagation !== LIST_ITEM_CONSTANTS.defaults.FOCUS_PROPAGATION, this._focusPropagation);
+        }
+    }
 }

package/esm/list/list-item/list-item.d.ts

@@ -3,7 +3,7 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { IListItemSelectEventData } from './list-item-constants';
+import { IListItemSelectEventData, ListItemFocusPropagation } from './list-item-constants';
 import { IWithElementInternals } from '../../core/mixins/internals/with-element-internals';
 import { IWithDefaultAria } from '../../core/mixins/internals/with-default-aria';
 import { BaseComponent } from '../../core/base/base-component';
@@ -17,6 +17,7 @@ export interface IListItemProperties<T = unknown> {
     threeLine: boolean;
     wrap: boolean;
     noninteractive: boolean;
+    focusPropagation: ListItemFocusPropagation;
 }
 export interface IListItemComponent<T = unknown> extends IListItemProperties<T>, IWithElementInternals, IWithDefaultAria {
 }
@@ -43,6 +44,7 @@ declare const ListItemComponent_base: import("../..").AbstractConstructor<import
  * @property {boolean} [threeLine=false] - Sets the list item height to support at least three lines of text.
  * @property {boolean} [wrap=false] - Sets the list item to wrap its text content.
  * @property {boolean} [noninteractive=false] - Controls whether the list item will automatically attach itself to interactive slotted elements or not.
+ * @property {boolean} [focusPropagation="allow"] - Controls whether the interactive element will receive focus if a non-interactive element is clicked within the list item.
  *
  * @attribute {boolean} [selected=false] - Applies the selected state to the list item.
  * @attribute {boolean} [active=false] - Applies the active state to the list item by emulating its focused state.
@@ -53,6 +55,7 @@ declare const ListItemComponent_base: import("../..").AbstractConstructor<import
  * @attribute {boolean} [three-line=false] - Sets the list item height to support at least three lines of text.
  * @attribute {boolean} [wrap=false] - Sets the list item to wrap its text content.
  * @attribute {boolean} [noninteractive=false] - Controls whether the list item will automatically attach itself to interactive slotted elements or not.
+ * @attribute {boolean} [focus-propagation="allow"] - Controls whether the interactive element will receive focus if a non-interactive element is clicked within the list item.
  *
  * @event {CustomEvent<IListItemSelectEventData>} forge-list-item-select - Fires when the list item is selected.
  *
@@ -128,5 +131,6 @@ export declare class ListItemComponent extends ListItemComponent_base implements
     threeLine: boolean;
     wrap: boolean;
     noninteractive: boolean;
+    focusPropagation: ListItemFocusPropagation;
 }
 export {};

package/esm/list/list-item/list-item.js

@@ -29,6 +29,7 @@ const styles = ':host{--_list-item-indent:var(--forge-list-item-indent, var(--fo
  * @property {boolean} [threeLine=false] - Sets the list item height to support at least three lines of text.
  * @property {boolean} [wrap=false] - Sets the list item to wrap its text content.
  * @property {boolean} [noninteractive=false] - Controls whether the list item will automatically attach itself to interactive slotted elements or not.
+ * @property {boolean} [focusPropagation="allow"] - Controls whether the interactive element will receive focus if a non-interactive element is clicked within the list item.
  *
  * @attribute {boolean} [selected=false] - Applies the selected state to the list item.
  * @attribute {boolean} [active=false] - Applies the active state to the list item by emulating its focused state.
@@ -39,6 +40,7 @@ const styles = ':host{--_list-item-indent:var(--forge-list-item-indent, var(--fo
  * @attribute {boolean} [three-line=false] - Sets the list item height to support at least three lines of text.
  * @attribute {boolean} [wrap=false] - Sets the list item to wrap its text content.
  * @attribute {boolean} [noninteractive=false] - Controls whether the list item will automatically attach itself to interactive slotted elements or not.
+ * @attribute {boolean} [focus-propagation="allow"] - Controls whether the interactive element will receive focus if a non-interactive element is clicked within the list item.
  *
  * @event {CustomEvent<IListItemSelectEventData>} forge-list-item-select - Fires when the list item is selected.
  *
@@ -142,6 +144,9 @@ let ListItemComponent = class ListItemComponent extends WithElementInternals(Wit
             case LIST_ITEM_CONSTANTS.observedAttributes.NONINTERACTIVE:
                 this.noninteractive = coerceBoolean(newValue);
                 break;
+            case LIST_ITEM_CONSTANTS.observedAttributes.FOCUS_PROPAGATION:
+                this.focusPropagation = newValue;
+                break;
         }
     }
 };
@@ -172,6 +177,9 @@ __decorate([
 __decorate([
     coreProperty()
 ], ListItemComponent.prototype, "noninteractive", void 0);
+__decorate([
+    coreProperty()
+], ListItemComponent.prototype, "focusPropagation", void 0);
 ListItemComponent = __decorate([
     customElement({
         name: LIST_ITEM_CONSTANTS.elementName,

package/esm/list-dropdown/list-dropdown-utils.js

@@ -152,6 +152,7 @@ export function createListItems(config, listElement, options, startIndex = 0, re
             }
             let listItemElement = document.createElement('forge-list-item');
             listItemElement.value = option.value;
+            listItemElement.focusPropagation = 'off';
             listItemElement.setAttribute('role', 'presentation');
             const buttonElement = document.createElement('button');
             buttonElement.type = 'button';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {