@geotab/zenith 3.7.0 → 3.8.0-beta.0

package/dist/filtersBar/components/filtersBarSearch/filtersBarSearch.js

@@ -9,11 +9,11 @@ exports.FiltersBarSearchDisplayName = "FiltersBarSearch";
 const FiltersBarSearch = ({ className, state, props, sidePanelTitle, useSidePanelView, onChange: onChangeState }) => {
     const inputId = (0, react_1.useId)();
     const filterBarLabelledId = (0, react_1.useId)();
-    const component = (0, jsx_runtime_1.jsx)(searchInputRaw_1.SearchInputRaw, Object.assign({}, props, { id: inputId, onChange: value => onChangeState({ value }), value: state.value, className: className }));
+    const component = ((0, jsx_runtime_1.jsx)(searchInputRaw_1.SearchInputRaw, Object.assign({}, props, { id: inputId, onChange: value => onChangeState({ value }), value: state.value, className: className })));
     if (!useSidePanelView) {
         return component;
     }
-    return (0, jsx_runtime_1.jsx)(sidePanelCell_1.SidePanelCell, { title: sidePanelTitle, role: "group", labelledBy: filterBarLabelledId, titleId: filterBarLabelledId, children: component });
+    return ((0, jsx_runtime_1.jsx)(sidePanelCell_1.SidePanelCell, { title: sidePanelTitle, role: "group", labelledBy: filterBarLabelledId, titleId: filterBarLabelledId, children: component }));
 };
 exports.FiltersBarSearch = FiltersBarSearch;
 exports.FiltersBarSearch.displayName = exports.FiltersBarSearchDisplayName;

package/dist/filtersBar/components/resetComponentButton.js

@@ -37,6 +37,7 @@ injectString("tr", "Reset", "S\u0131f\u0131rla");
 injectString("zh-Hans", "Reset", "\u91CD\u7F6E");
 injectString("zh-TW", "Reset", "\u91CD\u8A2D");
 injectString("ro-RO", "Reset", "Reseta\u021Bi");
+injectString("ar-SA", "Reset", "\u0625\u0639\u0627\u062F\u0629 \u062A\u0639\u064A\u064A\u0646");
 const ResetButton = ({
   isDefaultState,
   onClick

package/dist/filtersBar/filtersBar.d.ts

@@ -21,7 +21,7 @@ export interface IFiltersBar extends IZenComponentProps {
     /**
      * @deprecated
      * @param onClearAllFilters - will be removed in the next major release
-    */
+     */
     onClearAllFilters?: () => void;
     children: ReactElement | (ReactElement | null)[];
     hideAllFiltersButton?: boolean;
@@ -29,17 +29,17 @@ export interface IFiltersBar extends IZenComponentProps {
     /**
      * @deprecated
      * @param selectedQuantity - will be removed in the next major release
-    */
+     */
     selectedQuantity?: number;
     /**
      * @deprecated
      * @param ignoreNewFunctionality - only for internal usage
-    */
+     */
     ignoreNewFunctionality?: boolean;
     /**
      * @deprecated
      * @param onUpdateNumberOfChangedFilters - will be removed in the next major release
-    */
+     */
     onUpdateNumberOfChangedFilters?: (newValue: number) => void;
     pillName?: string;
     pillIcon?: React.FC<IIcon>;

package/dist/filtersBar/filtersBar.js

@@ -27,10 +27,15 @@ const filtersBarDateInput_1 = require("./components/filtersBarDateInput/filtersB
 const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
 /* eslint-enable @typescript-eslint/naming-convention */
 exports.FiltersBarDisplayName = "FiltersBar";
-const getChildren = (children) => (!children
-    ? []
-    : (react_1.Children.count(children) === 1 ? [children] : children)).filter(c => !!c);
-const allowedComponents = [filtersBarSearch_1.FiltersBarSearch, filtersBarDropdown_1.FiltersBarDropdown, filtersBarGroupButton_1.FiltersBarGroupButton, filtersBarGroupsFilter_1.FiltersBarGroupsFilter, filtersBarPeriodPicker_1.FiltersBarPeriodPicker, filtersBarRange_1.FiltersBarRange];
+const getChildren = (children) => (!children ? [] : (react_1.Children.count(children) === 1 ? [children] : children)).filter(c => !!c);
+const allowedComponents = [
+    filtersBarSearch_1.FiltersBarSearch,
+    filtersBarDropdown_1.FiltersBarDropdown,
+    filtersBarGroupButton_1.FiltersBarGroupButton,
+    filtersBarGroupsFilter_1.FiltersBarGroupsFilter,
+    filtersBarPeriodPicker_1.FiltersBarPeriodPicker,
+    filtersBarRange_1.FiltersBarRange
+];
 const getAllowedChildren = (items) => items.reduce((acc, item) => {
     if (!item) {
         return acc;
@@ -42,7 +47,7 @@ const getAllowedChildren = (items) => items.reduce((acc, item) => {
 }, []);
 const getCurrentFiltersState = (children) => {
     const state = {};
-    react_1.Children.forEach(children, (child) => {
+    react_1.Children.forEach(children, child => {
         const childProps = child.props;
         state[childProps.id] = {};
         state[childProps.id].state = childProps.state;
@@ -95,7 +100,10 @@ const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFiltersBu
         }
     }, [stateFromChildren, sidePanelState]);
     (0, react_1.useEffect)(() => {
-        dispatchFiltersBarState({ type: filtersBarReducer_1.FiltersBarStateActionType.ChangeChildrenState, payload: { state: stateFromChildren, defaultStateFn: getDefaultFiltersState } });
+        dispatchFiltersBarState({
+            type: filtersBarReducer_1.FiltersBarStateActionType.ChangeChildrenState,
+            payload: { state: stateFromChildren, defaultStateFn: getDefaultFiltersState }
+        });
     }, [stateFromChildren, getDefaultFiltersState]);
     (0, react_1.useEffect)(() => {
         if (onUpdateNumberOfChangedFiltersFn) {
@@ -118,7 +126,7 @@ const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFiltersBu
                 dispatchSidePanelState({ type: sidePanelReducer_1.StateActionType.Reinitialize, payload: mergeStates(stateFromChildren, sidePanelState) });
                 return;
             }
-            react_1.Children.forEach(filterBarChildren, (child) => {
+            react_1.Children.forEach(filterBarChildren, child => {
                 if (typeof child === "object" && "props" in child) {
                     dispatchSidePanelState({ type: sidePanelReducer_1.StateActionType.Change, payload: { id: child.props.id, value: { state: child.props.state } } });
                 }
@@ -132,9 +140,12 @@ const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFiltersBu
     }, [toggleAllFilters, setFiltersBarToggleAllFiltersFn]);
     const toggleAllFiltersCallback = (0, react_1.useCallback)((value) => {
         if (!isAllFiltersVisible && value) {
-            react_1.Children.forEach(filterBarChildren, (child) => {
+            react_1.Children.forEach(filterBarChildren, child => {
                 if (typeof child === "object" && "props" in child) {
-                    dispatchSidePanelState({ type: sidePanelReducer_1.StateActionType.Change, payload: { id: child.props.id, value: { state: child.props.state } } });
+                    dispatchSidePanelState({
+                        type: sidePanelReducer_1.StateActionType.Change,
+                        payload: { id: child.props.id, value: { state: child.props.state } }
+                    });
                 }
             });
         }
@@ -146,12 +157,18 @@ const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFiltersBu
         var _a;
         if (onApplyAllFilters) {
             const newValue = value ? value : sidePanelState;
-            const newState = isSidePanel ? Object.keys(newValue).reduce((res, key) => {
-                var _a;
-                res[key] = { state: (_a = newValue[key]) === null || _a === void 0 ? void 0 : _a.state };
-                return res;
-            }, {}) : filtersBarState.childrenState;
-            isSidePanel && dispatchFiltersBarState({ type: filtersBarReducer_1.FiltersBarStateActionType.ChangeChildrenState, payload: { state: newState, defaultStateFn: getDefaultFiltersState } });
+            const newState = isSidePanel
+                ? Object.keys(newValue).reduce((res, key) => {
+                    var _a;
+                    res[key] = { state: (_a = newValue[key]) === null || _a === void 0 ? void 0 : _a.state };
+                    return res;
+                }, {})
+                : filtersBarState.childrenState;
+            isSidePanel &&
+                dispatchFiltersBarState({
+                    type: filtersBarReducer_1.FiltersBarStateActionType.ChangeChildrenState,
+                    payload: { state: newState, defaultStateFn: getDefaultFiltersState }
+                });
             dispatchFiltersBarState({ type: filtersBarReducer_1.FiltersBarStateActionType.UpdateNumber, payload: newState });
             onApplyAllFilters(newState);
             (_a = allFiltersRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -159,7 +176,10 @@ const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFiltersBu
     }, [onApplyAllFilters, sidePanelState, filtersBarState.childrenState, getDefaultFiltersState]);
     const handleClearClick = (0, react_1.useCallback)(() => {
         const defaultState = getDefaultFiltersState();
-        dispatchFiltersBarState({ type: filtersBarReducer_1.FiltersBarStateActionType.ChangeChildrenState, payload: { state: defaultState, defaultStateFn: getDefaultFiltersState } });
+        dispatchFiltersBarState({
+            type: filtersBarReducer_1.FiltersBarStateActionType.ChangeChildrenState,
+            payload: { state: defaultState, defaultStateFn: getDefaultFiltersState }
+        });
         dispatchFiltersBarState({ type: filtersBarReducer_1.FiltersBarStateActionType.UpdateNumber, payload: defaultState });
         filterBarChildren.forEach(child => {
             const changeHandler = child.props.onChange;
@@ -191,18 +211,32 @@ const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFiltersBu
     const sidePanel = (0, react_1.useMemo)(() => {
         const sidePanelChild = childrenArray.find(child => child && typeof child === "object" && "type" in child && child.type === filtersBarSidePanel_1.FiltersBarSidePanelContainer);
         if (!sidePanelChild) {
-            return (0, jsx_runtime_1.jsx)(filtersBarSidePanel_1.FiltersBarSidePanel, { parentElement: parentElement, isOpen: isAllFiltersVisible, triggerRef: isMobile ? mobileTriggerRef || emptyFiltersRef : allFiltersRef, getDefaultFiltersState: getDefaultFiltersState, onClosePanel: onClosePanel, state: sidePanelState, onApplyAllFilters: handleApplyAllFilters(true), dispatch: dispatchSidePanelState, pillName: pillName, pillIcon: pillIcon, pillType: pillType, children: filterBarChildren });
+            return ((0, jsx_runtime_1.jsx)(filtersBarSidePanel_1.FiltersBarSidePanel, { parentElement: parentElement, isOpen: isAllFiltersVisible, triggerRef: isMobile ? mobileTriggerRef || emptyFiltersRef : allFiltersRef, getDefaultFiltersState: getDefaultFiltersState, onClosePanel: onClosePanel, state: sidePanelState, onApplyAllFilters: handleApplyAllFilters(true), dispatch: dispatchSidePanelState, pillName: pillName, pillIcon: pillIcon, pillType: pillType, children: filterBarChildren }));
         }
         const sidePanelChildren = getAllowedChildren(getChildren(sidePanelChild.props.children));
-        return (0, jsx_runtime_1.jsx)(filtersBarSidePanel_1.FiltersBarSidePanel, { parentElement: parentElement, isOpen: isAllFiltersVisible, triggerRef: isMobile ? mobileTriggerRef || emptyFiltersRef : allFiltersRef, getDefaultFiltersState: getDefaultFiltersState, onClosePanel: onClosePanel, className: sidePanelChild.props.className, state: sidePanelChild.props.state, onApplyAllFilters: handleApplyAllFilters(true), dispatch: sidePanelChild.props.dispatch, pillName: pillName, pillIcon: pillIcon, pillType: pillType, children: sidePanelChildren });
-    }, [childrenArray, parentElement, isAllFiltersVisible, isMobile, mobileTriggerRef, getDefaultFiltersState, onClosePanel, handleApplyAllFilters,
-        pillName, pillIcon, pillType, sidePanelState, filterBarChildren]);
-    const noActions = (0, react_1.useMemo)(() => isAllFiltersButtonHidden && (selectedQuantity === undefined && filtersBarState.currentNumberOfChangedFilters === 0 || selectedQuantity === 0)
-        && (!isApplyButtonShown || onApplyAllFilters === undefined), [isAllFiltersButtonHidden, selectedQuantity, filtersBarState.currentNumberOfChangedFilters, isApplyButtonShown, onApplyAllFilters]);
+        return ((0, jsx_runtime_1.jsx)(filtersBarSidePanel_1.FiltersBarSidePanel, { parentElement: parentElement, isOpen: isAllFiltersVisible, triggerRef: isMobile ? mobileTriggerRef || emptyFiltersRef : allFiltersRef, getDefaultFiltersState: getDefaultFiltersState, onClosePanel: onClosePanel, className: sidePanelChild.props.className, state: sidePanelChild.props.state, onApplyAllFilters: handleApplyAllFilters(true), dispatch: sidePanelChild.props.dispatch, pillName: pillName, pillIcon: pillIcon, pillType: pillType, children: sidePanelChildren }));
+    }, [
+        childrenArray,
+        parentElement,
+        isAllFiltersVisible,
+        isMobile,
+        mobileTriggerRef,
+        getDefaultFiltersState,
+        onClosePanel,
+        handleApplyAllFilters,
+        pillName,
+        pillIcon,
+        pillType,
+        sidePanelState,
+        filterBarChildren
+    ]);
+    const noActions = (0, react_1.useMemo)(() => isAllFiltersButtonHidden &&
+        ((selectedQuantity === undefined && filtersBarState.currentNumberOfChangedFilters === 0) || selectedQuantity === 0) &&
+        (!isApplyButtonShown || onApplyAllFilters === undefined), [isAllFiltersButtonHidden, selectedQuantity, filtersBarState.currentNumberOfChangedFilters, isApplyButtonShown, onApplyAllFilters]);
     if (!isClientReady) {
         return null;
     }
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isMobile && (0, jsx_runtime_1.jsxs)("div", { ref: toolbarRef, className: (0, classNames_1.classNames)(["zen-filters-toolbar", noActions ? "zen-filters-toolbar--no-actions" : "", className !== null && className !== void 0 ? className : ""]), children: [(0, jsx_runtime_1.jsx)(filtersContainer_1.FiltersContainer, { children: filterBarChildren }), (0, jsx_runtime_1.jsx)(filtersBarActions_1.FiltersBarActions, { allFiltersRef: allFiltersRef, onShowAllFilters: () => toggleAllFiltersCallback(true), onClearFilters: handleClearClick, selectedQuantity: selectedQuantity !== undefined ? selectedQuantity : filtersBarState.currentNumberOfChangedFilters, selectedQuantityToDisplay: selectedQuantity !== undefined ? selectedQuantity : filtersBarState.numberOfChangedFilters, hideAllFiltersButton: isAllFiltersButtonHidden, onApplyButtonClick: onApplyAllFilters ? handleApplyAllFilters(false) : undefined, isApplyButtonShown: isApplyButtonShown })] }), !isAllFiltersButtonHidden ? sidePanel : null] });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isMobile && ((0, jsx_runtime_1.jsxs)("div", { ref: toolbarRef, className: (0, classNames_1.classNames)(["zen-filters-toolbar", noActions ? "zen-filters-toolbar--no-actions" : "", className !== null && className !== void 0 ? className : ""]), children: [(0, jsx_runtime_1.jsx)(filtersContainer_1.FiltersContainer, { children: filterBarChildren }), (0, jsx_runtime_1.jsx)(filtersBarActions_1.FiltersBarActions, { allFiltersRef: allFiltersRef, onShowAllFilters: () => toggleAllFiltersCallback(true), onClearFilters: handleClearClick, selectedQuantity: selectedQuantity !== undefined ? selectedQuantity : filtersBarState.currentNumberOfChangedFilters, selectedQuantityToDisplay: selectedQuantity !== undefined ? selectedQuantity : filtersBarState.numberOfChangedFilters, hideAllFiltersButton: isAllFiltersButtonHidden, onApplyButtonClick: onApplyAllFilters ? handleApplyAllFilters(false) : undefined, isApplyButtonShown: isApplyButtonShown })] })), !isAllFiltersButtonHidden ? sidePanel : null] }));
 };
 exports.FiltersBar = FiltersBar;
 exports.FiltersBar.Search = filtersBarSearch_1.FiltersBarSearch;
@@ -215,9 +249,6 @@ exports.FiltersBar.DateInput = filtersBarDateInput_1.FiltersBarDateInput;
 exports.FiltersBar.Range = filtersBarRange_1.FiltersBarRange;
 exports.FiltersBar.SidePanel = filtersBarSidePanel_1.FiltersBarSidePanelContainer;
 exports.FiltersBar.displayName = exports.FiltersBarDisplayName;
-exports.TRANSLATIONS = [...new Set([
-        ...filtersBarSidePanel_1.TRANSLATIONS,
-        ...filtersBarDropdown_1.TRANSLATIONS,
-        ...filtersBarPeriodPicker_1.TRANSLATIONS,
-        ...filtersBarRange_1.TRANSLATIONS
-    ]).values()];
+exports.TRANSLATIONS = [
+    ...new Set([...filtersBarSidePanel_1.TRANSLATIONS, ...filtersBarDropdown_1.TRANSLATIONS, ...filtersBarPeriodPicker_1.TRANSLATIONS, ...filtersBarRange_1.TRANSLATIONS]).values()
+];

package/dist/filtersBar/filtersBarActions/filtersBarActions.js

@@ -40,6 +40,7 @@ injectString("tr", "Filters", "Filtreler");
 injectString("zh-Hans", "Filters", "\u7B5B\u9009\u5668");
 injectString("zh-TW", "Filters", "\u7BE9\u9078\u689D\u4EF6");
 injectString("ro-RO", "Filters", "Filtre");
+injectString("ar-SA", "Filters", "\u0627\u0644\u062A\u0635\u0641\u064A\u0627\u062A");
 injectString("cs", "Clear", "Vymazat");
 injectString("da-DK", "Clear", "Ryd");
 injectString("de", "Clear", "L\xF6schen");
@@ -66,6 +67,7 @@ injectString("tr", "Clear", "Temizle");
 injectString("zh-Hans", "Clear", "\u6E05\u9664");
 injectString("zh-TW", "Clear", "\u6E05\u9664");
 injectString("ro-RO", "Clear", "\u0218terge\u021Bi");
+injectString("ar-SA", "Clear", "\u0645\u0633\u062D");
 injectString("cs", "Apply", "Pou\u017E\xEDt");
 injectString("da-DK", "Apply", "Anvend");
 injectString("de", "Apply", "Anwenden");
@@ -92,6 +94,7 @@ injectString("tr", "Apply", "Uygula");
 injectString("zh-Hans", "Apply", "\u5E94\u7528");
 injectString("zh-TW", "Apply", "\u5957\u7528");
 injectString("ro-RO", "Apply", "Aplica\u021Bi");
+injectString("ar-SA", "Apply", "\u062A\u0637\u0628\u064A\u0642");
 const FiltersBarActions = ({
   className,
   selectedQuantity,

package/dist/filtersBar/filtersBarProvider.js

@@ -19,7 +19,10 @@ const FiltersBarContextProvider = ({ value, children }) => {
             }, 0);
         }
     }, [value]);
-    return (0, jsx_runtime_1.jsx)(exports.FiltersBarContext.Provider, { value: { setFiltersBarToggleAllFiltersFn: setFiltersBarToggleFn, onUpdateNumberOfChangedFiltersFn: value.onUpdateNumberOfChangedFiltersFn }, children: children });
+    return ((0, jsx_runtime_1.jsx)(exports.FiltersBarContext.Provider, { value: {
+            setFiltersBarToggleAllFiltersFn: setFiltersBarToggleFn,
+            onUpdateNumberOfChangedFiltersFn: value.onUpdateNumberOfChangedFiltersFn
+        }, children: children }));
 };
 exports.FiltersBarContextProvider = FiltersBarContextProvider;
 const useFiltersBarComponent = () => {

package/dist/filtersBar/filtersBarProviderSearch.js

@@ -14,8 +14,7 @@ const SearchContextProvider = ({ value, children }) => {
         var _a;
         const prevProps = searchComponentRef.current === null || !searchComponentRef.current ? undefined : searchComponentRef.current.props;
         const nextProps = !searchComponent ? undefined : searchComponent.props;
-        const changedPropsNumber = prevProps && !nextProps || !prevProps && nextProps ? 1 :
-            (0, getNumberOfChangedFilters_1.getNumberOfChangedFilters)(prevProps || {}, nextProps || {});
+        const changedPropsNumber = (prevProps && !nextProps) || (!prevProps && nextProps) ? 1 : (0, getNumberOfChangedFilters_1.getNumberOfChangedFilters)(prevProps || {}, nextProps || {});
         searchComponentRef.current = searchComponent;
         if (changedPropsNumber > 0) {
             (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {

package/dist/filtersBar/filtersBarProviderTrigger.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 exports.TriggerContext = (0, react_1.createContext)({
     triggerComponent: null
 });
-const TriggerContextProvider = ({ value, children }) => (0, jsx_runtime_1.jsx)(exports.TriggerContext.Provider, { value: Object.assign({}, value), children: children });
+const TriggerContextProvider = ({ value, children }) => ((0, jsx_runtime_1.jsx)(exports.TriggerContext.Provider, { value: Object.assign({}, value), children: children }));
 exports.TriggerContextProvider = TriggerContextProvider;
 const useMobileTrigger = () => {
     const { triggerComponent } = (0, react_1.useContext)(exports.TriggerContext);

package/dist/filtersBar/filtersBarSidePanel/components/filtersBarSidePanelCheckboxGroup/filtersBarSidePanelCheckboxGroup.js

@@ -15,6 +15,6 @@ const FiltersBarSidePanelCheckboxGroup = ({ name, items, selectedItems, onChange
         onChange(Array.from(selectedItemsSet));
     }, [onChange, selectedItems]);
     const selectedItemsSet = new Set(selectedItems);
-    return (0, jsx_runtime_1.jsx)("div", { className: "zen-side-panel-checkbox-group", children: items.map((item, index) => (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { id: `${checkboxGroupName}_id_${index}`, className: "zen-side-panel-checkbox-group__checkbox", value: item.value, fullWidth: true, name: checkboxGroupName, disabled: item.disabled, title: item.title, checked: selectedItemsSet.has(item.value), onChange: onChangeHandler, children: item.children }, `${checkboxGroupName}_key_${index}`)) });
+    return ((0, jsx_runtime_1.jsx)("div", { className: "zen-side-panel-checkbox-group", children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { id: `${checkboxGroupName}_id_${index}`, className: "zen-side-panel-checkbox-group__checkbox", value: item.value, fullWidth: true, name: checkboxGroupName, disabled: item.disabled, title: item.title, checked: selectedItemsSet.has(item.value), onChange: onChangeHandler, children: item.children }, `${checkboxGroupName}_key_${index}`))) }));
 };
 exports.FiltersBarSidePanelCheckboxGroup = FiltersBarSidePanelCheckboxGroup;

package/dist/filtersBar/filtersBarSidePanel/components/filtersBarSidePanelDropdownWithCheckbox/filtersBarSidePanelDropdownWithCheckbox.js

@@ -7,14 +7,18 @@ const checkbox_1 = require("../../../../checkbox/checkbox");
 const dropdown_1 = require("../../../../dropdown/dropdown");
 const dropdownHelper_1 = require("../../../../dropdownRaw/dropdownHelper");
 const FiltersBarSidePanelDropdownWithCheckbox = ({ props, state, onChange, getData }) => {
-    const isFullSelectionMode = (0, react_1.useMemo)(() => "isAllSelected" in state && typeof (state).isAllSelected === "boolean", [state]);
+    const isFullSelectionMode = (0, react_1.useMemo)(() => "isAllSelected" in state && typeof state.isAllSelected === "boolean", [state]);
     const [checkboxValue, setCheckboxValue] = (0, react_1.useState)(state.isChecked);
     const [isCurrentAllSelected, setIsCurrentAllSelected] = (0, react_1.useState)(isFullSelectionMode ? state.isAllSelected : undefined);
     const [selection, setSelection] = (0, react_1.useState)(state.selected);
     const onChangeFullSelectionCheckboxFree = (0, react_1.useCallback)((newValue) => {
         setIsCurrentAllSelected(newValue.isAllSelected || false);
         setSelection(newValue.selected.map(el => el.id));
-        onChange({ selected: newValue.selected.map(el => el.id), isAllSelected: newValue.isAllSelected || false, isChecked: checkboxValue });
+        onChange({
+            selected: newValue.selected.map(el => el.id),
+            isAllSelected: newValue.isAllSelected || false,
+            isChecked: checkboxValue
+        });
     }, [onChange, checkboxValue]);
     const onChangeCheckboxFree = (0, react_1.useCallback)((newValue) => {
         setSelection(newValue.map(el => el.id));
@@ -24,27 +28,32 @@ const FiltersBarSidePanelDropdownWithCheckbox = ({ props, state, onChange, getDa
     const handleCheckboxChange = (0, react_1.useCallback)((event) => {
         setCheckboxValue(event.target.checked);
         if (isFullSelectionMode) {
-            onChange({ selected: selection, isAllSelected: isCurrentAllSelected || false, isChecked: event.target.checked });
+            onChange({
+                selected: selection,
+                isAllSelected: isCurrentAllSelected || false,
+                isChecked: event.target.checked
+            });
         }
         else {
             onChange({ selected: selection, isChecked: event.target.checked });
         }
     }, [isCurrentAllSelected, isFullSelectionMode, onChange, selection]);
     (0, react_1.useEffect)(() => {
-        if ((0, dropdownHelper_1.compareStringsArrays)(state.selected, selection)
-            && state.isAllSelected === (isFullSelectionMode ? isCurrentAllSelected : undefined)
-            && state.isChecked === checkboxValue) {
+        if ((0, dropdownHelper_1.compareStringsArrays)(state.selected, selection) &&
+            state.isAllSelected === (isFullSelectionMode ? isCurrentAllSelected : undefined) &&
+            state.isChecked === checkboxValue) {
             return;
         }
         isFullSelectionMode && setIsCurrentAllSelected(state.isAllSelected);
         setSelection(state.selected);
         setCheckboxValue(state.isChecked);
     }, [checkboxValue, isCurrentAllSelected, isFullSelectionMode, selection, state]);
-    const checkboxFreeComponent = isFullSelectionMode ? ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({}, props, { checkboxLabel: undefined, getData: customGetDataFn, value: { selected: Array.from(selection), isAllSelected: isCurrentAllSelected || false }, onChange: onChangeFullSelectionCheckboxFree, defaultValue: typeof props.defaultValue !== "undefined" ?
-            { selected: props.defaultValue.selected, isAllSelected: props.defaultValue.isAllSelected || false }
-            : undefined, multiselect: true, selectAllButton: true }))) : ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({}, props, { checkboxLabel: undefined, getData: customGetDataFn, value: Array.from(selection), onChange: onChangeCheckboxFree, defaultValue: typeof props.defaultValue !== "undefined" ?
-            props.defaultValue.selected
-            : undefined })));
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [checkboxFreeComponent, (0, jsx_runtime_1.jsx)("div", { className: "zen-filters-bar-dropdown-with-checkbox__side-panel-checkbox", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checkboxValue, onChange: handleCheckboxChange, children: props.checkboxLabel }) })] });
+    const checkboxFreeComponent = isFullSelectionMode ? ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({}, props, { checkboxLabel: undefined, getData: customGetDataFn, value: { selected: Array.from(selection), isAllSelected: isCurrentAllSelected || false }, onChange: onChangeFullSelectionCheckboxFree, defaultValue: typeof props.defaultValue !== "undefined"
+            ? {
+                selected: props.defaultValue.selected,
+                isAllSelected: props.defaultValue.isAllSelected || false
+            }
+            : undefined, multiselect: true, selectAllButton: true }))) : ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({}, props, { checkboxLabel: undefined, getData: customGetDataFn, value: Array.from(selection), onChange: onChangeCheckboxFree, defaultValue: typeof props.defaultValue !== "undefined" ? props.defaultValue.selected : undefined })));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [checkboxFreeComponent, (0, jsx_runtime_1.jsx)("div", { className: "zen-filters-bar-dropdown-with-checkbox__side-panel-checkbox", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checkboxValue, onChange: handleCheckboxChange, children: props.checkboxLabel }) })] }));
 };
 exports.FiltersBarSidePanelDropdownWithCheckbox = FiltersBarSidePanelDropdownWithCheckbox;

package/dist/filtersBar/filtersBarSidePanel/components/filtersBarSidePanelRadioGroup/filtersBarSidePanelRadioGroup.js

@@ -6,6 +6,6 @@ const radioGroupRaw_1 = require("../../../../radioGroupRaw/radioGroupRaw");
 const react_1 = require("react");
 const FiltersBarSidePanelRadioGroup = (props) => {
     const name = (0, react_1.useId)();
-    return (0, jsx_runtime_1.jsx)("div", { className: "zen-side-panel-radio-group", children: (0, jsx_runtime_1.jsx)(radioGroupRaw_1.RadioGroupRaw, Object.assign({}, props, { className: "zen-side-panel-radio-group__item", fullWidth: true, name: name })) });
+    return ((0, jsx_runtime_1.jsx)("div", { className: "zen-side-panel-radio-group", children: (0, jsx_runtime_1.jsx)(radioGroupRaw_1.RadioGroupRaw, Object.assign({}, props, { className: "zen-side-panel-radio-group__item", fullWidth: true, name: name })) }));
 };
 exports.FiltersBarSidePanelRadioGroup = FiltersBarSidePanelRadioGroup;

package/dist/filtersBar/filtersBarSidePanel/components/filtersBarSidePanelRange/filtersBarSidePanelRange.js

@@ -35,6 +35,7 @@ injectString("tr", "Min", "Min.");
 injectString("zh-Hans", "Min", "\u6700\u5C0F");
 injectString("zh-TW", "Min", "\u6700\u5C0F");
 injectString("ro-RO", "Min", "Min.");
+injectString("ar-SA", "Min", "\u0627\u0644\u062D\u062F \u0627\u0644\u0623\u062F\u0646\u0649");
 injectString("cs", "Max", "Max.");
 injectString("da-DK", "Max", "Maks");
 injectString("de", "Max", "Max");
@@ -61,6 +62,7 @@ injectString("tr", "Max", "Maks.");
 injectString("zh-Hans", "Max", "\u6700\u5927");
 injectString("zh-TW", "Max", "\u6700\u5927");
 injectString("ro-RO", "Max", "Max.");
+injectString("ar-SA", "Max", "\u0627\u0644\u062D\u062F \u0627\u0644\u0623\u0642\u0635\u0649");
 const classNames_1 = require("../../../../commonHelpers/classNames/classNames");
 const rangeHelper_1 = require("../../../../rangeRaw/utils/rangeHelper");
 const useLanguage_1 = require("../../../../utils/localization/useLanguage");
@@ -84,6 +86,7 @@ const FiltersBarSidePanelRange = ({
 }) => {
   const generatedId = (0, react_1.useId)();
   const intId = id || generatedId;
+  const rangeErrorId = `${intId}-error`;
   const [currentValue, setCurrentValue] = (0, react_1.useState)(value);
   const [errorType, setErrorType] = (0, react_1.useState)(undefined);
   const prevValueRef = (0, react_1.useRef)(value);
@@ -158,11 +161,13 @@ const FiltersBarSidePanelRange = ({
   return (0, jsx_runtime_1.jsxs)("div", {
     ref: setFieldsContainerRef,
     id: intId,
+    "aria-describedby": errorType !== undefined && directionState === "row" ? rangeErrorId : undefined,
     className: (0, classNames_1.classNames)(["zen-filters-bar-side-panel-range", className || ""]),
     children: [(0, jsx_runtime_1.jsxs)("div", {
       className: rangeFieldContainerClasses,
       children: [memoizedMinRangeField, memoizedMaxRangeField]
     }), errorType !== undefined && directionState === "row" ? (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, {
+      id: rangeErrorId,
       className: "zen-filters-bar-side-panel-range__error",
       error: [(0, rangeHelper_1.getErrorString)("min", currentValue.min, translate, errorType, min, max) || "", (0, rangeHelper_1.getErrorString)("max", currentValue.max, translate, errorType, min, max) || ""]
     }) : null]

package/dist/filtersBar/filtersBarSidePanel/filtersBarSidePanel.js

@@ -50,6 +50,7 @@ injectString("tr", "Reset All", "T\xFCm\xFCn\xFC s\u0131f\u0131rla");
 injectString("zh-Hans", "Reset All", "\u5168\u90E8\u91CD\u7F6E");
 injectString("zh-TW", "Reset All", "\u5168\u90E8\u91CD\u8A2D");
 injectString("ro-RO", "Reset All", "Reseta\u021Bi tot");
+injectString("ar-SA", "Reset All", "\u0625\u0639\u0627\u062F\u0629 \u062A\u0639\u064A\u064A\u0646 \u0627\u0644\u0643\u0644");
 injectString("cs", "Cancel", "Zru\u0161it");
 injectString("da-DK", "Cancel", "Annuller");
 injectString("de", "Cancel", "Abbrechen");
@@ -76,6 +77,7 @@ injectString("tr", "Cancel", "\u0130ptal");
 injectString("zh-Hans", "Cancel", "\u53D6\u6D88");
 injectString("zh-TW", "Cancel", "\u53D6\u6D88");
 injectString("ro-RO", "Cancel", "Anula\u021Bi");
+injectString("ar-SA", "Cancel", "\u0625\u0644\u063A\u0627\u0621");
 injectString("cs", "Apply", "Pou\u017E\xEDt");
 injectString("da-DK", "Apply", "Anvend");
 injectString("de", "Apply", "Anwenden");
@@ -102,6 +104,7 @@ injectString("tr", "Apply", "Uygula");
 injectString("zh-Hans", "Apply", "\u5E94\u7528");
 injectString("zh-TW", "Apply", "\u5957\u7528");
 injectString("ro-RO", "Apply", "Aplica\u021Bi");
+injectString("ar-SA", "Apply", "\u062A\u0637\u0628\u064A\u0642");
 injectString("cs", "All Filters", "V\u0161echny filtry");
 injectString("da-DK", "All Filters", "Alle filtre");
 injectString("de", "All Filters", "Alle Filter");
@@ -128,6 +131,7 @@ injectString("tr", "All Filters", "T\xFCm Filtreler");
 injectString("zh-Hans", "All Filters", "\u6240\u6709\u7B5B\u9009\u5668");
 injectString("zh-TW", "All Filters", "\u6240\u6709\u7BE9\u9078\u5668");
 injectString("ro-RO", "All Filters", "Toate filtrele");
+injectString("ar-SA", "All Filters", "\u062C\u0645\u064A\u0639 \u0627\u0644\u062A\u0635\u0641\u064A\u0627\u062A");
 injectString("cs", "Close", "Zav\u0159\xEDt");
 injectString("da-DK", "Close", "Luk");
 injectString("de", "Close", "Schlie\xDFen");
@@ -154,6 +158,7 @@ injectString("tr", "Close", "Kapat");
 injectString("zh-Hans", "Close", "\u5173\u95ED");
 injectString("zh-TW", "Close", "\u95DC\u9589");
 injectString("ro-RO", "Close", "\xCEnchide\u021Bi");
+injectString("ar-SA", "Close", "\u0625\u063A\u0644\u0627\u0642");
 const useUniqueId_1 = require("../../commonHelpers/useUniqueId");
 const useBodyScroll_1 = require("../../utils/useBodyScroll");
 const footerButtons_1 = require("../../footerButtons/footerButtons");

package/dist/filtersBar/filtersBarSidePanel/hooks/useDirection.js

@@ -20,7 +20,9 @@ const useDirection = (direction) => {
         const senseText = senseTexts[0];
         const labelMin = labels[0];
         const labelMax = labels[1];
-        if (((senseText && senseText.textContent || "").length > 3) || (labelMin.textContent || "").length > 3 || (labelMax.textContent || "").length > 3) {
+        if (((senseText && senseText.textContent) || "").length > 3 ||
+            (labelMin.textContent || "").length > 3 ||
+            (labelMax.textContent || "").length > 3) {
             setDirectionState("column");
         }
         else {

package/dist/filtersBar/filtersContainer/filtersContainer.js

@@ -41,6 +41,7 @@ injectString("tr", "Scroll left", "Sola kayd\u0131r");
 injectString("zh-Hans", "Scroll left", "\u5411\u5DE6\u6EDA\u52A8");
 injectString("zh-TW", "Scroll left", "\u5411\u5DE6\u6372\u52D5");
 injectString("ro-RO", "Scroll left", "Derula\u021Bi la st\xE2nga");
+injectString("ar-SA", "Scroll left", "\u0627\u0644\u062A\u0645\u0631\u064A\u0631 \u0644\u0644\u064A\u0633\u0627\u0631");
 injectString("cs", "Scroll right", "P\u0159ej\xEDt doprava");
 injectString("da-DK", "Scroll right", "Rul til h\xF8jre");
 injectString("de", "Scroll right", "Nach rechts scrollen");
@@ -67,6 +68,7 @@ injectString("tr", "Scroll right", "Sa\u011Fa Kayd\u0131r");
 injectString("zh-Hans", "Scroll right", "\u5411\u53F3\u6EDA\u52A8");
 injectString("zh-TW", "Scroll right", "\u5411\u53F3\u6372\u52D5");
 injectString("ro-RO", "Scroll right", "Derula\u021Bi la dreapta");
+injectString("ar-SA", "Scroll right", "\u0627\u0644\u062A\u0645\u0631\u064A\u0631 \u0644\u0644\u064A\u0645\u064A\u0646");
 const getScrollButtonType = element => {
   const scrollLeft = element.scrollLeft;
   const scrollWidth = element.scrollWidth;

package/dist/filtersBar/utils/getNumberOfChangedFilters.js

@@ -6,8 +6,8 @@ const isElementsEqual_1 = require("../../utils/compareElementsUtils/isElementsEq
 function getNumberOfChangedFilters(defaultState, newState) {
     let changes = 0;
     Object.keys(defaultState).forEach(key => {
-        const oldValue = (defaultState)[key];
-        const newValue = (newState)[key];
+        const oldValue = defaultState[key];
+        const newValue = newState[key];
         if (!newValue) {
             // If the new value is not set, then the component is not visible, ignore it
             return;

package/dist/footerButtons/footerButtons.js

@@ -33,7 +33,9 @@ const getChildren = (children) => {
     if (!children) {
         return undefined;
     }
-    return (react_1.default.Children.count(children) === 1 ? [children] : react_1.default.Children.toArray(children).filter((child) => react_1.default.isValidElement(child)));
+    return (react_1.default.Children.count(children) === 1
+        ? [children]
+        : react_1.default.Children.toArray(children).filter((child) => react_1.default.isValidElement(child)));
 };
 const FooterButtons = ({ className, children, isSticky = false, ref }) => {
     const footerButtonsId = (0, useUniqueId_1.useUniqueId)();
@@ -54,7 +56,12 @@ const FooterButtons = ({ className, children, isSticky = false, ref }) => {
         });
         return clonedElements;
     }, [children, footerButtonsId]);
-    const containerClassNames = (0, classNames_1.classNames)(["zen-footer-buttons", isSticky && driveComponentClassName ? "zen-footer-buttons--sticky" : "", driveComponentClassName || "", className || ""]);
+    const containerClassNames = (0, classNames_1.classNames)([
+        "zen-footer-buttons",
+        isSticky && driveComponentClassName ? "zen-footer-buttons--sticky" : "",
+        driveComponentClassName || "",
+        className || ""
+    ]);
     return ((0, jsx_runtime_1.jsx)("div", { className: containerClassNames, ref: ref, children: childrenArray }));
 };
 exports.FooterButtons = FooterButtons;

package/dist/formField/components/formFieldAdditionalInfo.js

@@ -4,7 +4,5 @@ exports.FormFieldAdditionalInfo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const formFieldAssistiveError_1 = require("./formFieldAssistiveError");
 const formFieldCounter_1 = require("./formFieldCounter");
-const FormFieldAdditionalInfo = ({ assistiveId, errorId, counterId, driveTextClass, error, assistive, counter, showAdditionalInfo }) => showAdditionalInfo ?
-    (0, jsx_runtime_1.jsxs)("div", { className: "zen-form-field__secondary", children: [(0, jsx_runtime_1.jsx)(formFieldAssistiveError_1.FormFieldAssistiveError, { assistiveId: assistiveId, errorId: errorId, driveTextClass: driveTextClass, value: error, assistive: assistive }), (0, jsx_runtime_1.jsx)(formFieldCounter_1.FormFieldCounter, { id: counterId, value: counter })] })
-    : null;
+const FormFieldAdditionalInfo = ({ assistiveId, errorId, counterId, driveTextClass, error, assistive, counter, showAdditionalInfo }) => showAdditionalInfo ? ((0, jsx_runtime_1.jsxs)("div", { className: "zen-form-field__secondary", children: [(0, jsx_runtime_1.jsx)(formFieldAssistiveError_1.FormFieldAssistiveError, { assistiveId: assistiveId, errorId: errorId, driveTextClass: driveTextClass, value: error, assistive: assistive }), (0, jsx_runtime_1.jsx)(formFieldCounter_1.FormFieldCounter, { id: counterId, value: counter })] })) : null;
 exports.FormFieldAdditionalInfo = FormFieldAdditionalInfo;

package/dist/formField/components/formFieldAssistiveError.js

@@ -4,9 +4,5 @@ exports.FormFieldAssistiveError = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const formFieldError_1 = require("../../formFieldError/formFieldError");
-const FormFieldAssistiveError = ({ assistiveId, errorId, driveTextClass, value, assistive }) => (0, jsx_runtime_1.jsx)("div", { id: assistiveId || errorId, className: (0, classNames_1.classNames)([
-        "zen-form-field__text",
-        driveTextClass || "",
-        value ? "zen-form-field__text--error" : ""
-    ]), children: value ? (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: value }) : assistive });
+const FormFieldAssistiveError = ({ assistiveId, errorId, driveTextClass, value, assistive }) => ((0, jsx_runtime_1.jsx)("div", { id: assistiveId || errorId, className: (0, classNames_1.classNames)(["zen-form-field__text", driveTextClass || "", value ? "zen-form-field__text--error" : ""]), children: value ? (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: value }) : assistive }));
 exports.FormFieldAssistiveError = FormFieldAssistiveError;

package/dist/formField/components/formFieldCounter.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormFieldCounter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
-const FormFieldCounter = ({ value, id }) => value ? (0, jsx_runtime_1.jsx)("div", { id: id, "aria-live": "polite", className: (0, classNames_1.classNames)(["zen-form-field__length"]), children: value }) : null;
+const FormFieldCounter = ({ value, id }) => value ? ((0, jsx_runtime_1.jsx)("div", { id: id, "aria-live": "polite", className: (0, classNames_1.classNames)(["zen-form-field__length"]), children: value })) : null;
 exports.FormFieldCounter = FormFieldCounter;

package/dist/formField/components/formFieldWithLabel.js

@@ -17,14 +17,14 @@ const FormFieldWithLabel = ({ props, wrapperComponent }) => {
     // Form component
     if (isFormSection) {
         if (!hasCustomWidth) {
-            return (0, jsx_runtime_1.jsxs)("div", { className: classes, children: [props.label && (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { className: labelClasses, id: id, value: props.label, tooltip: props.tooltip }), (0, jsx_runtime_1.jsx)("div", { className: props.controlClassesName, children: container })] });
+            return ((0, jsx_runtime_1.jsxs)("div", { className: classes, children: [props.label && (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { className: labelClasses, id: id, value: props.label, tooltip: props.tooltip }), (0, jsx_runtime_1.jsx)("div", { className: props.controlClassesName, children: container })] }));
         }
-        return (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: classes, style: widthObj, children: [props.label && (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { className: labelClasses, id: id, value: props.label, tooltip: props.tooltip }), (0, jsx_runtime_1.jsx)("div", { className: props.controlClassesName, children: container })] }), trailing && (0, jsx_runtime_1.jsx)(trailingComponent_1.TrailingComponent, { id: trailingId, value: trailing, hasAdditionalInfo: !!showAdditionalInfo })] });
+        return ((0, jsx_runtime_1.jsxs)("div", { style: { display: "flex" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: classes, style: widthObj, children: [props.label && (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { className: labelClasses, id: id, value: props.label, tooltip: props.tooltip }), (0, jsx_runtime_1.jsx)("div", { className: props.controlClassesName, children: container })] }), trailing && (0, jsx_runtime_1.jsx)(trailingComponent_1.TrailingComponent, { id: trailingId, value: trailing, hasAdditionalInfo: !!showAdditionalInfo })] }));
     }
     // Standalone component
     if (!hasCustomWidth) {
-        return (0, jsx_runtime_1.jsxs)("div", { className: classes, children: [props.label && (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { className: labelClasses, id: id, value: props.label, tooltip: props.tooltip }), (0, jsx_runtime_1.jsx)("div", { className: props.controlClassesName, children: container })] });
+        return ((0, jsx_runtime_1.jsxs)("div", { className: classes, children: [props.label && (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { className: labelClasses, id: id, value: props.label, tooltip: props.tooltip }), (0, jsx_runtime_1.jsx)("div", { className: props.controlClassesName, children: container })] }));
     }
-    return (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: classes, children: [props.label && (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { className: labelClasses, id: id, value: props.label, tooltip: props.tooltip }), (0, jsx_runtime_1.jsx)("div", { style: widthObj, className: props.controlClassesName, children: container })] }), trailing && (0, jsx_runtime_1.jsx)(trailingComponent_1.TrailingComponent, { id: trailingId, value: trailing, hasAdditionalInfo: !!showAdditionalInfo })] });
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: "flex" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: classes, children: [props.label && (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { className: labelClasses, id: id, value: props.label, tooltip: props.tooltip }), (0, jsx_runtime_1.jsx)("div", { style: widthObj, className: props.controlClassesName, children: container })] }), trailing && (0, jsx_runtime_1.jsx)(trailingComponent_1.TrailingComponent, { id: trailingId, value: trailing, hasAdditionalInfo: !!showAdditionalInfo })] }));
 };
 exports.FormFieldWithLabel = FormFieldWithLabel;

package/dist/formField/components/formFieldWithoutLabel.js

@@ -9,8 +9,8 @@ const FormFieldWithoutLabel = ({ props, wrapperComponent }) => {
     const { hasCustomWidth, widthObj, trailing, trailingId, showAdditionalInfo, classes } = (0, useFormFieldProps_1.useFormFieldProps)(props, wrapperComponent);
     const container = (0, useContainer_1.useContainer)(props, wrapperComponent);
     if (!hasCustomWidth) {
-        return (0, jsx_runtime_1.jsx)("div", { className: classes, style: widthObj, children: container });
+        return ((0, jsx_runtime_1.jsx)("div", { className: classes, style: widthObj, children: container }));
     }
-    return (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { className: classes, style: widthObj, children: container }), trailing && (0, jsx_runtime_1.jsx)(trailingComponent_1.TrailingComponent, { id: trailingId, value: trailing, hasAdditionalInfo: !!showAdditionalInfo })] });
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { className: classes, style: widthObj, children: container }), trailing && (0, jsx_runtime_1.jsx)(trailingComponent_1.TrailingComponent, { id: trailingId, value: trailing, hasAdditionalInfo: !!showAdditionalInfo })] }));
 };
 exports.FormFieldWithoutLabel = FormFieldWithoutLabel;

package/dist/formField/components/isOldFormFieldComponent.js

@@ -1,12 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isOldFormFieldComponent = exports.OLD_FORM_FIELD_COMPONENTS = void 0;
-exports.OLD_FORM_FIELD_COMPONENTS = [
-    "SearchInputRaw",
-    "SelectRaw",
-    "StepperRaw",
-    "TextAreaInput",
-    "TextInputRaw"
-];
+exports.OLD_FORM_FIELD_COMPONENTS = ["SearchInputRaw", "SelectRaw", "StepperRaw", "TextAreaInput", "TextInputRaw"];
 const isOldFormFieldComponent = (component) => exports.OLD_FORM_FIELD_COMPONENTS.includes((component === null || component === void 0 ? void 0 : component.displayName) || "") || exports.OLD_FORM_FIELD_COMPONENTS.includes((component === null || component === void 0 ? void 0 : component.name) || "");
 exports.isOldFormFieldComponent = isOldFormFieldComponent;

package/dist/formField/components/trailingComponent.js

@@ -10,8 +10,8 @@ const TrailingComponent = ({ id, value, hasAdditionalInfo, hasCustomWidth }) =>
         return null;
     }
     if (hasAdditionalInfo) {
-        return (0, jsx_runtime_1.jsx)("div", { className: "zen-form-field__trailing-wrapper", children: (0, jsx_runtime_1.jsx)("span", { className: "zen-form-field__trailing-text", id: id, children: value }) });
+        return ((0, jsx_runtime_1.jsx)("div", { className: "zen-form-field__trailing-wrapper", children: (0, jsx_runtime_1.jsx)("span", { className: "zen-form-field__trailing-text", id: id, children: value }) }));
     }
-    return (0, jsx_runtime_1.jsx)("span", { className: "zen-form-field__trailing-text", id: id, children: value });
+    return ((0, jsx_runtime_1.jsx)("span", { className: "zen-form-field__trailing-text", id: id, children: value }));
 };
 exports.TrailingComponent = TrailingComponent;