@sprinklrjs/spaceweb 14.12.0 → 14.12.2

package/asyncSelect/hooks/useAsyncOptionHandlers.js

@@ -11,6 +11,7 @@ var uniqueId_1 = tslib_1.__importDefault(require("lodash/uniqueId"));
 var select_1 = require("../../select");
 //hooks
 var useLatest_1 = require("../../hooks/useLatest");
+var useUpdateEffect_1 = tslib_1.__importDefault(require("../../hooks/useUpdateEffect"));
 var helpers_1 = require("../helpers");
 var constants_1 = require("../../select/constants");
 var useAsyncOptionHandlers = function (_a) {
@@ -135,12 +136,12 @@ var useAsyncOptionHandlers = function (_a) {
             return ({ group: id, pageNumber: 0 });
         }));
     }, [fetchOptions, groupConfig, minimumInputRef, resetAsyncSelectState, setIsLoading]);
-    (0, react_1.useEffect)(function () {
+    (0, useUpdateEffect_1.default)(function () {
         if (!refetchOnGroupConfigChange) {
             return;
         }
         groupConfigIdRef.current = (0, uniqueId_1.default)();
-        if (inputValueRef.current && inputValueRef.current.length >= minimumInputRef.current) {
+        if (inputValueRef.current.length >= minimumInputRef.current) {
             setIsLoading(true);
             resetAsyncSelectState();
             fetchOptions(groupConfig.map(function (_a) {

package/baseui/layer/tether.js

@@ -122,7 +122,7 @@ var Tether = /** @class */ (function (_super) {
         var modifiers = popperOptions.modifiers, restOptions = tslib_1.__rest(popperOptions, ["modifiers"]);
         if (!this.props.anchorRef || !this.props.popperRef)
             return;
-        var popperInitOptions = tslib_1.__assign(tslib_1.__assign({ 
+        var popperInitOptions = tslib_1.__assign({ 
             // Recommended placement (popper may ignore if it causes a viewport overflow, etc)
             placement: (0, utils_1.toPopperPlacement)(placement), modifiers: tslib_1.__assign({ 
                 // Passing the arrow ref will measure the arrow when calculating styles
@@ -140,7 +140,7 @@ var Tether = /** @class */ (function (_super) {
                     enabled: true,
                     fn: this.onPopperUpdate,
                     order: 900,
-                }, preventOverflow: { enabled: true } }, modifiers) }, restOptions), { positionFixed: this.props.positionFixed });
+                }, preventOverflow: { enabled: true } }, modifiers), positionFixed: this.props.positionFixed }, restOptions);
         this.popper = new popper_js_1.default(this.props.anchorRef, this.props.popperRef, popperInitOptions);
     };
     Tether.prototype.destroyPopover = function () {
@@ -153,13 +153,13 @@ var Tether = /** @class */ (function (_super) {
         return this.props.children || null;
     };
     Tether.defaultProps = {
-        // @ts-ignore
+        // @ts-ignore -- To be fixed in the baseui move
         anchorRef: null,
-        // @ts-ignore
+        // @ts-ignore -- To be fixed in the baseui move
         onPopperUpdate: function () { return null; },
         // this placement should only be used only for Popper.js configuration
         placement: constants_1.TETHER_PLACEMENT.auto,
-        // @ts-ignore
+        // @ts-ignore -- To be fixed in the baseui move
         popperRef: null,
         popperOptions: {},
         positionFixed: false,

package/esm/asyncSelect/hooks/useAsyncOptionHandlers.js

@@ -2,12 +2,13 @@ import { __assign, __awaiter, __generator, __read, __spreadArray } from "tslib";
 /**
  *  Created by Aneree on 15/01/21.
  */
-import { useRef, useCallback, useState, useEffect } from 'react';
+import { useRef, useCallback, useState } from 'react';
 import _uniqueId from 'lodash/uniqueId';
 //components
 import { LOADING_KEY } from '../../select';
 //hooks
 import { useLatest } from '../../hooks/useLatest';
+import useUpdateEffect from '../../hooks/useUpdateEffect';
 import { shouldPaginate, initGroupOptions, arrayToGroupedOptions } from '../helpers';
 import { UNGROUPED_ID } from '../../select/constants';
 var useAsyncOptionHandlers = function (_a) {
@@ -132,12 +133,12 @@ var useAsyncOptionHandlers = function (_a) {
             return ({ group: id, pageNumber: 0 });
         }));
     }, [fetchOptions, groupConfig, minimumInputRef, resetAsyncSelectState, setIsLoading]);
-    useEffect(function () {
+    useUpdateEffect(function () {
         if (!refetchOnGroupConfigChange) {
             return;
         }
         groupConfigIdRef.current = _uniqueId();
-        if (inputValueRef.current && inputValueRef.current.length >= minimumInputRef.current) {
+        if (inputValueRef.current.length >= minimumInputRef.current) {
             setIsLoading(true);
             resetAsyncSelectState();
             fetchOptions(groupConfig.map(function (_a) {

package/esm/baseui/layer/tether.js

@@ -120,7 +120,7 @@ var Tether = /** @class */ (function (_super) {
         var modifiers = popperOptions.modifiers, restOptions = __rest(popperOptions, ["modifiers"]);
         if (!this.props.anchorRef || !this.props.popperRef)
             return;
-        var popperInitOptions = __assign(__assign({ 
+        var popperInitOptions = __assign({ 
             // Recommended placement (popper may ignore if it causes a viewport overflow, etc)
             placement: toPopperPlacement(placement), modifiers: __assign({ 
                 // Passing the arrow ref will measure the arrow when calculating styles
@@ -138,7 +138,7 @@ var Tether = /** @class */ (function (_super) {
                     enabled: true,
                     fn: this.onPopperUpdate,
                     order: 900,
-                }, preventOverflow: { enabled: true } }, modifiers) }, restOptions), { positionFixed: this.props.positionFixed });
+                }, preventOverflow: { enabled: true } }, modifiers), positionFixed: this.props.positionFixed }, restOptions);
         this.popper = new Popper(this.props.anchorRef, this.props.popperRef, popperInitOptions);
     };
     Tether.prototype.destroyPopover = function () {
@@ -151,13 +151,13 @@ var Tether = /** @class */ (function (_super) {
         return this.props.children || null;
     };
     Tether.defaultProps = {
-        // @ts-ignore
+        // @ts-ignore -- To be fixed in the baseui move
         anchorRef: null,
-        // @ts-ignore
+        // @ts-ignore -- To be fixed in the baseui move
         onPopperUpdate: function () { return null; },
         // this placement should only be used only for Popper.js configuration
         placement: TETHER_PLACEMENT.auto,
-        // @ts-ignore
+        // @ts-ignore -- To be fixed in the baseui move
         popperRef: null,
         popperOptions: {},
         positionFixed: false,

package/esm/input/base-input.js

@@ -141,7 +141,7 @@ var BaseInput = function (_a) {
     var hasScroll = inputRef.current && inputRef.current.scrollHeight > inputRef.current.clientHeight;
     var charCount = typeof value === 'string' ? value.length : 0;
     var ariaLabel = 'Clear value';
-    return (_jsxs(InputContainer, __assign({ "data-spaceweb": "base-input" }, sharedProps, inputContainerProps, { children: [_jsx(Before, __assign({}, sharedProps, beforeProps)), _jsx(Input, __assign({ ref: inputRef, "aria-activedescendant": props['aria-activedescendant'], "aria-autocomplete": props['aria-autocomplete'], "aria-controls": props['aria-controls'], "aria-errormessage": props['aria-errormessage'], "aria-haspopup": props['aria-haspopup'], "aria-label": props['aria-label'], "aria-labelledby": props['aria-labelledby'], "aria-describedby": props['aria-describedby'], "aria-required": props['aria-required'], "aria-invalid": props['aria-invalid'], autoComplete: _autoComplete, disabled: disabled, readOnly: readOnly, id: id, inputMode: inputMode, maxLength: maxLength, name: name, onBlur: handleOnBlur, onChange: handleChange, onFocus: handleOnFocus, onKeyDown: handleKeyDown, onScroll: handleBoxShadow, onKeyPress: onKeyPress, onKeyUp: onKeyUp, pattern: pattern, placeholder: placeholder, type: getInputType(), required: required, role: role, value: value, min: min, max: max, step: step, draggable: draggable, onDragStart: draggable ? handleOnDragStart : undefined, rows: type === CUSTOM_INPUT_TYPE.textarea ? rows : null }, sharedProps, inputProps)), showClearIcon ? (_jsx(ClearIconContainer, __assign({ "$alignTop": type === CUSTOM_INPUT_TYPE.textarea }, sharedProps, clearIconContainerProps, { children: _jsx(ClearIcon, __assign({ title: ariaLabel, "aria-label": ariaLabel, onClick: onClearIconClick, onKeyDown: function (event) {
+    return (_jsxs(InputContainer, __assign({ "data-spaceweb": "base-input" }, sharedProps, inputContainerProps, { children: [_jsx(Before, __assign({}, sharedProps, beforeProps)), _jsx(Input, __assign({ ref: inputRef, "aria-activedescendant": props['aria-activedescendant'], "aria-autocomplete": props['aria-autocomplete'], "aria-controls": props['aria-controls'], "aria-errormessage": props['aria-errormessage'], "aria-haspopup": props['aria-haspopup'], "aria-label": props['aria-label'], "aria-labelledby": props['aria-labelledby'], "aria-describedby": props['aria-describedby'], "aria-required": props['aria-required'], "aria-invalid": props['aria-invalid'], "aria-expanded": props['aria-expanded'], autoComplete: _autoComplete, disabled: disabled, readOnly: readOnly, id: id, inputMode: inputMode, maxLength: maxLength, name: name, onBlur: handleOnBlur, onChange: handleChange, onFocus: handleOnFocus, onKeyDown: handleKeyDown, onScroll: handleBoxShadow, onKeyPress: onKeyPress, onKeyUp: onKeyUp, pattern: pattern, placeholder: placeholder, type: getInputType(), required: required, role: role, value: value, min: min, max: max, step: step, draggable: draggable, onDragStart: draggable ? handleOnDragStart : undefined, rows: type === CUSTOM_INPUT_TYPE.textarea ? rows : null }, sharedProps, inputProps)), showClearIcon ? (_jsx(ClearIconContainer, __assign({ "$alignTop": type === CUSTOM_INPUT_TYPE.textarea }, sharedProps, clearIconContainerProps, { children: _jsx(ClearIcon, __assign({ title: ariaLabel, "aria-label": ariaLabel, onClick: onClearIconClick, onKeyDown: function (event) {
                         if (event.key && (event.key === 'Enter' || event.key === ' ')) {
                             event.preventDefault();
                             onClearIconClick();

package/esm/list/divider.js

@@ -4,15 +4,17 @@ import { forwardRef } from 'react';
 import { useOverrides } from '../overrides';
 import ListItem from './list-item';
 import { StyledListItemDivider } from './styled-component';
+import { omitContainerAriaProps } from './utils';
 var Divider = forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.first, first = _b === void 0 ? false : _b, _c = _a.overrides, overrides = _c === void 0 ? {} : _c, className = _a.className, restProps = __rest(_a, ["children", "first", "overrides", "className"]);
     var _d = __read(useOverrides(overrides.Separator, StyledListItemDivider), 2), Separator = _d[0], separatorProps = _d[1];
     var _e = __read(useOverrides(overrides.SubHeader, ListItem), 2), SubHeader = _e[0], subHeaderProps = _e[1];
+    var propsWithoutContainerAria = omitContainerAriaProps(restProps);
     return children ? (_jsx(SubHeader, __assign({ className: [
             'spr-border-primary border-solid border-b-0 border-l-0 border-r-0 mx-0 rounded-0',
             first ? 'border-t-0 pt-0' : 'border-t',
             className,
-        ], "aria-disabled": true }, restProps, subHeaderProps, { ref: ref }, { children: children }))) : (_jsx(Separator, __assign({ "data-spaceweb": "divider", "aria-disabled": true, className: className }, restProps, { ref: ref }, separatorProps)));
+        ], role: "presentation" }, propsWithoutContainerAria, subHeaderProps, { ref: ref }, { children: children }))) : (_jsx(Separator, __assign({ "data-spaceweb": "divider", role: "presentation", className: className }, propsWithoutContainerAria, { ref: ref }, separatorProps)));
 });
 Divider.displayName = 'Divider';
 export default Divider;

package/esm/list/list.js

@@ -6,19 +6,19 @@ import { useOverrides } from '../overrides';
 import useCombinedRef, { combineRefs } from '../hooks/useCombinedRef';
 import { LIST_MIN_WIDTH, StyledList } from './styled-component';
 import { Box } from '../box';
-import { customRangeExtractor, measureElement } from './utils';
+import { customRangeExtractor, measureElement, splitA11yProps, isPresentationalRole } from './utils';
 import { DEFAULT_LIST_ITEM_HEIGHT, DEFAULT_OVER_SCAN_COUNT } from './constants';
 import { useStyle } from '../style';
 var getCloneElement = function (item, virtualRow, totalCount) {
     var _a, _b;
-    return React.cloneElement(item, {
-        style: [{ '--sw-translate-y': "".concat(virtualRow.start, "px") }, item.props.style],
-        className: ['w-full absolute top-0 left-0 box-border translate-y-[--sw-translate-y]'],
+    return React.cloneElement(item, __assign({ style: [{ '--sw-translate-y': "".concat(virtualRow.start, "px") }, item.props.style], className: ['w-full absolute top-0 left-0 box-border translate-y-[--sw-translate-y]'], 
         // @ts-expect-error TS(2339): Property 'ref' does not exist on type 'ReactElemen... Remove this comment to see the full error message
-        ref: combineRefs(virtualRow.measureElement, item.ref),
-        'aria-posinset': (_a = item.props['aria-posinset']) !== null && _a !== void 0 ? _a : virtualRow.index + 1,
-        'aria-setsize': (_b = item.props['aria-setsize']) !== null && _b !== void 0 ? _b : totalCount,
-    });
+        ref: combineRefs(virtualRow.measureElement, item.ref) }, (isPresentationalRole(item.props.role)
+        ? {}
+        : {
+            'aria-posinset': (_a = item.props['aria-posinset']) !== null && _a !== void 0 ? _a : virtualRow.index + 1,
+            'aria-setsize': (_b = item.props['aria-setsize']) !== null && _b !== void 0 ? _b : totalCount,
+        })));
 };
 var List = React.forwardRef(function (_a, forwardedRef) {
     var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, children = _a.children, virtual = _a.virtual, scrollElement = _a.scrollElement, _c = _a.overscanCount, overscanCount = _c === void 0 ? DEFAULT_OVER_SCAN_COUNT : _c, _d = _a.estimateItemSize, estimateItemSize = _d === void 0 ? DEFAULT_LIST_ITEM_HEIGHT : _d, _e = _a.role, role = _e === void 0 ? 'list' : _e, autoScrollToSelectedItem = _a.autoScrollToSelectedItem, style = _a.style, className = _a.className, _f = _a.keepFirstItemMounted, keepFirstItemMounted = _f === void 0 ? false : _f, restProps = __rest(_a, ["overrides", "children", "virtual", "scrollElement", "overscanCount", "estimateItemSize", "role", "autoScrollToSelectedItem", "style", "className", "keepFirstItemMounted"]);
@@ -50,13 +50,10 @@ var List = React.forwardRef(function (_a, forwardedRef) {
         // eslint-disable-next-line react-hooks/exhaustive-deps -- scrollToIndex on mount only
     }, []);
     if (virtual) {
-        return (_jsx(Root, __assign({ "data-spaceweb": "list", "$as": "div", role: role }, restProps, rootProps, { ref: combinedRef, style: [{ '--sw-min-width': px2rem(LIST_MIN_WIDTH) }, style, rootProps === null || rootProps === void 0 ? void 0 : rootProps.style], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { children: _jsx(Box
-            // NOTE: resetting margin and padding here. should be removed when normalize css merges
-            , __assign({ 
-                // NOTE: resetting margin and padding here. should be removed when normalize css merges
-                className: "w-full relative p-0 m-0", style: {
+        var _h = splitA11yProps(restProps), a11yProps = _h.a11yProps, otherProps = _h.otherProps;
+        return (_jsx(Root, __assign({ "data-spaceweb": "list", "$as": "div" }, otherProps, rootProps, { ref: combinedRef, style: [{ '--sw-min-width': px2rem(LIST_MIN_WIDTH) }, style, rootProps === null || rootProps === void 0 ? void 0 : rootProps.style], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { children: _jsx(Box, __assign({ className: "w-full relative p-0", style: {
                     height: "".concat(rowVirtualizer.getTotalSize(), "px"),
-                }, "$as": "ul" }, { children: rowVirtualizer
+                }, "$as": "ul", role: role }, a11yProps, { children: rowVirtualizer
                     .getVirtualItems()
                     .map(function (virtualRow) { return getCloneElement(childrenArr[virtualRow.index], virtualRow, childrenArr.length); }) })) })));
     }

package/esm/list/utils.d.ts

@@ -4,3 +4,11 @@ export declare const measureElement: typeof measureElementType;
  * Keeps the first item mounted even when it falls outside the range.
  */
 export declare const customRangeExtractor: (range: Range) => number[];
+export declare const splitA11yProps: (props: Record<string, unknown>) => {
+    a11yProps: Record<string, unknown>;
+    otherProps: Record<string, unknown>;
+};
+export declare const isPresentationalRole: (role?: string | null) => boolean;
+export declare const omitContainerAriaProps: ({ "aria-posinset": _ariaPosInSet, "aria-setsize": _ariaSetSize, ...rest }: Record<string, unknown>) => {
+    [x: string]: unknown;
+};

package/esm/list/utils.js

@@ -1,4 +1,4 @@
-import { __read, __spreadArray } from "tslib";
+import { __read, __rest, __spreadArray, __values } from "tslib";
 import { defaultRangeExtractor } from '@tanstack/react-virtual';
 var parseMeasurement = function (str) { return parseFloat(str) || 0; };
 // by default react-virtual uses getBoundingClientRect to calculate dimensions.
@@ -23,3 +23,30 @@ export var customRangeExtractor = function (range) {
     // Otherwise, prepend the first item to the default indices.
     return __spreadArray([0], __read(defaultIndices), false);
 };
+var isA11yProp = function (key) { return key === 'id' || key === 'tabIndex' || key.startsWith('aria-'); };
+export var splitA11yProps = function (props) {
+    var e_1, _a;
+    var a11yProps = {};
+    var otherProps = {};
+    try {
+        for (var _b = __values(Object.entries(props)), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var _d = __read(_c.value, 2), key = _d[0], value = _d[1];
+            (isA11yProp(key) ? a11yProps : otherProps)[key] = value;
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return { a11yProps: a11yProps, otherProps: otherProps };
+};
+export var isPresentationalRole = function (role) {
+    return role === 'presentation' || role === 'none' || role === 'separator';
+};
+export var omitContainerAriaProps = function (_a) {
+    var _ariaPosInSet = _a["aria-posinset"], _ariaSetSize = _a["aria-setsize"], rest = __rest(_a, ['aria-posinset', 'aria-setsize']);
+    return rest;
+};