@carbon/ibm-products
Version:
Carbon for IBM Products
88 lines (83 loc) • 3.9 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { pkg } from '../../../settings.js';
const blockClass = `${pkg.prefix}--condition-builder`;
const NON_HIERARCHICAL_VARIANT = 'Non-Hierarchical';
const HIERARCHICAL_VARIANT = 'Hierarchical';
const focusThisField = (evt, conditionBuilderRef) => {
if (evt) {
setTimeout(() => {
manageTabIndexAndFocus(evt.target.closest('[role="gridcell"]')?.querySelector('button'), conditionBuilderRef);
evt.target.closest('[role="gridcell"]')?.querySelector('button')?.click();
evt.target.closest('[role="gridcell"]')?.querySelector('button')?.focus();
}, 0);
}
};
const focusThisItem = (currentElement, conditionBuilderRef) => {
setTimeout(() => {
manageTabIndexAndFocus(currentElement, conditionBuilderRef);
}, 0);
};
const traverseClockVise = (eachElem, index, allElements, rotate, trapFocus, conditionBuilderRef) => {
if (eachElem == document.activeElement) {
if (index !== allElements.length - 1) {
focusThisItem(allElements[index + 1], conditionBuilderRef);
} else {
focusThisItem(allElements[rotate ? 0 : allElements.length - 1], conditionBuilderRef);
}
} else if (Array.from(allElements).indexOf(document.activeElement) == -1 && trapFocus) {
focusThisItem(allElements[0], conditionBuilderRef);
}
};
const traverseReverse = (eachElem, index, allElements, rotate, trapFocus, conditionBuilderRef) => {
if (eachElem == document.activeElement) {
if (index !== 0) {
focusThisItem(allElements[index - 1], conditionBuilderRef);
} else {
focusThisItem(allElements[rotate ? allElements.length - 1 : 0], conditionBuilderRef);
}
} else if (Array.from(allElements).indexOf(document.activeElement) == -1 && trapFocus) {
focusThisItem(allElements[allElements.length - 1], conditionBuilderRef);
}
};
const checkForHoldingKey = (evt, key) => {
return evt[key];
};
const checkIsValid = item => {
return item && item !== 'INVALID';
};
const manageTabIndexAndFocus = (currentElement, conditionBuilderRef) => {
const contentContainer = currentElement?.closest(`.${blockClass}__content-container`) ?? currentElement?.closest(`.${blockClass}__actions-container`);
contentContainer && Array.from(contentContainer.querySelectorAll('[tabindex="0"]')).map(element => element?.setAttribute('tabindex', '-1'));
currentElement?.setAttribute('tabindex', '0');
conditionBuilderRef.current?.querySelector(`.${blockClass}__statement-button`)?.setAttribute('tabindex', '1');
currentElement?.focus();
};
const getValue = (type, value, config) => {
if (config?.valueFormatter && ['custom'].includes(type)) {
return config.valueFormatter(value);
} else if (type === 'option') {
if (value && typeof value !== 'string') {
const selectedValues = Array.isArray(value) ? value : [value];
return selectedValues.map(option => option.label).join(', ');
}
return value;
} else {
return value;
}
};
//check if the operator is configured as multiSelect in the input configuration or operator is on of
const checkForMultiSelectOperator = (condition, config) => {
return condition?.operator === 'oneOf' || config?.operators?.find(operator => condition?.operator === operator.id && operator.isMultiSelect);
};
//this will close the popover on escape key on search box
const onKeyDownHandlerForSearch = (evt, conditionBuilderRef) => {
if (!evt.currentTarget.value && evt.key === 'Escape') {
focusThisField(evt, conditionBuilderRef);
}
};
export { HIERARCHICAL_VARIANT, NON_HIERARCHICAL_VARIANT, blockClass, checkForHoldingKey, checkForMultiSelectOperator, checkIsValid, focusThisField, focusThisItem, getValue, manageTabIndexAndFocus, onKeyDownHandlerForSearch, traverseClockVise, traverseReverse };