@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/esm/baseui/select/value.js

@@ -1,10 +1,16 @@
 import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StyledSingleValue } from './styled-components';
-import { getOverrides } from '../helpers/overrides';
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export default function Value(props) {
-    var _a = props.overrides, overrides = _a === void 0 ? {} : _a, restProps = __rest(props, ["overrides"]);
-    var _b = __read(getOverrides(overrides.SingleValue, StyledSingleValue), 2), SingleValue = _b[0], singleValueProps = _b[1];
-    return (_jsx(SingleValue, __assign({}, restProps, singleValueProps, { children: props.children }), void 0));
-}
+import { useOverrides } from '../../overrides';
+import { StatefulTooltip } from '../../tooltip';
+import { useTruncateWithTooltip } from '../../truncateWithTooltip/hooks/useTruncateWithTooltip';
+import { Box } from '../../box';
+import { INITIAL_STATE } from '../../truncateWithTooltip/TruncateWithTooltip';
+var Value = function (props) {
+    var _a = props.overrides, overrides = _a === void 0 ? {} : _a, noTooltipOnTruncation = props.noTooltipOnTruncation, restProps = __rest(props, ["overrides", "noTooltipOnTruncation"]);
+    var _b = __read(useOverrides(overrides.SingleValue, StyledSingleValue), 2), SingleValue = _b[0], _c = _b[1], onMouseEnter = _c.onMouseEnter, onMouseLeave = _c.onMouseLeave, singleValueProps = __rest(_c, ["onMouseEnter", "onMouseLeave"]);
+    var _d = useTruncateWithTooltip(noTooltipOnTruncation, onMouseEnter, onMouseLeave), mouseEventProps = _d.mouseEventProps, renderTooltip = _d.renderTooltip, elementRef = _d.elementRef;
+    var el = (_jsx(SingleValue, __assign({ ref: elementRef }, mouseEventProps, restProps, singleValueProps, { children: props.children })));
+    return renderTooltip ? (_jsx(StatefulTooltip, __assign({ initialState: INITIAL_STATE, content: _jsx(Box, __assign({ "data-testid": "tooltip", className: "max-w-2xl break-words" }, { children: props.children })), placement: "bottom", accessibilityType: "tooltip" }, mouseEventProps, { children: el }))) : (el);
+};
+export default Value;

package/esm/baseui/timepicker/timepicker.d.ts

@@ -3,6 +3,7 @@ import type { OnChangeParams, Option } from '../select';
 import { filterOptions } from '../select';
 import DateHelpers from '../datepicker/utils/date-helpers';
 import type { TimePickerDefaultProps, TimePickerProps, TimePickerState } from './types';
+export declare function insertIf(condition: boolean, ...elements: any[]): any[];
 declare class TimePicker<T = Date> extends React.Component<TimePickerProps<T>, TimePickerState> {
     static defaultProps: TimePickerDefaultProps;
     dateHelpers: DateHelpers<T>;
@@ -14,7 +15,7 @@ declare class TimePicker<T = Date> extends React.Component<TimePickerProps<T>, T
     componentDidMount(): void;
     componentDidUpdate(prevProps: TimePickerProps<T>): void;
     onChange: (params: OnChangeParams) => void;
-    secondsToLabel: (seconds: number, format?: "12" | "24" | undefined) => string;
+    secondsToLabel: (seconds: number, format?: '12' | '24', langCode?: string) => string;
     /**
      * Converts a time string, e.g. 10:00, to one or more possible TimePicker
      * options representing that time.
@@ -22,13 +23,13 @@ declare class TimePicker<T = Date> extends React.Component<TimePickerProps<T>, T
     stringToOptions: (a: string, format?: '12' | '24') => Array<Option>;
     handleChange: (seconds: number) => void;
     setTime: (d: T | undefined | null, c: number, b: number, a: number) => T;
-    getTimeWindowInSeconds: (step: number) => {
+    getTimeWindowInSeconds: () => {
         start: number;
         end: number;
     };
-    buildSteps: () => never[];
+    buildSteps: () => number[];
     creatableFilterOptions: typeof filterOptions;
-    buildSelectedOption: (b: T, a: '12' | undefined | null | '24') => Option;
+    buildSelectedOption: (b: T, a: '12' | undefined | null | '24', langCode?: string) => Option;
     render(): import("react/jsx-runtime").JSX.Element;
 }
 export default TimePicker;

package/esm/baseui/timepicker/timepicker.js

@@ -1,4 +1,4 @@
-import { __assign, __extends, __read } from "tslib";
+import { __assign, __extends, __read, __spreadArray } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 /*
 Copyright (c) Uber Technologies, Inc.
@@ -7,15 +7,40 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
-import { getOverrides, mergeOverrides } from '../helpers/overrides';
-import { LocaleContext } from '../locale';
+import _find from 'lodash/find';
+import { getOverrides, mergeOverrides } from '../../overrides';
 import { filterOptions, Select } from '../select';
 import DateHelpers from '../datepicker/utils/date-helpers';
 import dateFnsAdapter from '../datepicker/utils/date-fns-adapter';
+import { LocaleConsumer } from '../../locale';
 var MINUTE = 60;
 var HOUR = MINUTE * 60;
 var DAY = HOUR * 24;
 var NOON = DAY / 2;
+export function insertIf(condition) {
+    var elements = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        elements[_i - 1] = arguments[_i];
+    }
+    return condition ? elements : [];
+}
+var convertOptionToMilliseconds = function (_a) {
+    var hours = _a.hours, minutes = _a.minutes;
+    var hoursInMilliseconds = hours * 60 * 60 * 1000;
+    var minutesInMilliseconds = minutes * 60 * 1000;
+    return hoursInMilliseconds + minutesInMilliseconds;
+};
+var checkOptionInRange = function (_a, timeRanges) {
+    var hours = _a.hours, minutes = _a.minutes;
+    if (!timeRanges) {
+        return true;
+    }
+    var ms = convertOptionToMilliseconds({ hours: hours, minutes: minutes });
+    return !!_find(timeRanges, function (_a) {
+        var from = _a.from, upto = _a.upto;
+        return ms >= from && ms <= upto;
+    });
+};
 var TimePicker = /** @class */ (function (_super) {
     __extends(TimePicker, _super);
     function TimePicker(props) {
@@ -30,12 +55,11 @@ var TimePicker = /** @class */ (function (_super) {
                 }
                 return;
             }
-            var seconds = typeof params.value[0].id === 'string' ? parseInt(params.value[0].id, 10) : params.value[0].id || 0;
+            var seconds = typeof params.value[0].id === 'string' ? parseInt(params.value[0].id) : params.value[0].id || 0;
             _this.handleChange(seconds);
         };
-        _this.secondsToLabel = function (seconds, format) {
+        _this.secondsToLabel = function (seconds, format, langCode) {
             var _a = __read(_this.dateHelpers.secondsToHourMinute(seconds), 2), hours = _a[0], minutes = _a[1];
-            // @ts-ignore
             var zeroPrefix = function (n) { return (n < 10 ? "0".concat(n) : n); };
             if (format === '12') {
                 var isAfterNoon = seconds >= NOON;
@@ -45,7 +69,17 @@ var TimePicker = /** @class */ (function (_super) {
                 if (hours === 0) {
                     hours = 12;
                 }
-                return "".concat(hours, ":").concat(zeroPrefix(minutes), " ").concat(isAfterNoon ? 'PM' : 'AM');
+                var amPm = '';
+                if (langCode) {
+                    var date = new Date(2000, 0, 1, isAfterNoon ? 13 : 1, 0);
+                    var formatter = new Intl.DateTimeFormat(langCode, { hour: 'numeric', hour12: true });
+                    var dayPeriod = formatter.formatToParts(date).find(function (part) { return part.type === 'dayPeriod'; });
+                    amPm = (dayPeriod === null || dayPeriod === void 0 ? void 0 : dayPeriod.value) || (isAfterNoon ? 'PM' : 'AM');
+                }
+                else {
+                    amPm = isAfterNoon ? 'PM' : 'AM';
+                }
+                return "".concat(hours, ":").concat(zeroPrefix(minutes), " ").concat(amPm);
             }
             return "".concat(zeroPrefix(hours), ":").concat(zeroPrefix(minutes));
         };
@@ -53,6 +87,7 @@ var TimePicker = /** @class */ (function (_super) {
          * Converts a time string, e.g. 10:00, to one or more possible TimePicker
          * options representing that time.
          */
+        // eslint-disable-next-line max-statements -- function is required
         _this.stringToOptions = function (str, format) {
             if (format === void 0) { format = '12'; }
             // leading zero is optional, AM/PM is optional
@@ -69,8 +104,8 @@ var TimePicker = /** @class */ (function (_super) {
             var hoursMinutes = [];
             switch (format) {
                 case '24': {
-                    // @ts-ignore
-                    hoursMinutes = [{ hours: hours, minutes: minutes }];
+                    var option = { hours: hours, minutes: minutes };
+                    hoursMinutes = __spreadArray([], __read(insertIf(checkOptionInRange(option, _this.props.timeRanges), option)), false);
                     break;
                 }
                 case '12':
@@ -79,24 +114,21 @@ var TimePicker = /** @class */ (function (_super) {
                     var meridiem = match[3];
                     // if there's no AM/PM, add both AM and PM options
                     if (!meridiem) {
-                        hoursMinutes = [
-                            // @ts-ignore
-                            { hours: twelveHours, minutes: minutes },
-                            // @ts-ignore
-                            { hours: twelveHours + 12, minutes: minutes },
-                        ];
+                        var beforeNoon = { hours: twelveHours, minutes: minutes };
+                        var afterNoon = { hours: twelveHours + 12, minutes: minutes };
+                        hoursMinutes = __spreadArray(__spreadArray([], __read(insertIf(checkOptionInRange(beforeNoon, _this.props.timeRanges), beforeNoon)), false), __read(insertIf(checkOptionInRange(afterNoon, _this.props.timeRanges), afterNoon)), false);
                     }
                     else {
                         var twentyFourHours = meridiem.toLowerCase()[0] === 'a' ? twelveHours : twelveHours + 12;
-                        // @ts-ignore
-                        hoursMinutes = [{ hours: twentyFourHours, minutes: minutes }];
+                        var option = { hours: twentyFourHours, minutes: minutes };
+                        hoursMinutes = __spreadArray([], __read(insertIf(checkOptionInRange(option, _this.props.timeRanges), option)), false);
                     }
                     break;
                 }
             }
             return hoursMinutes.map(function (_a) {
-                var hours = _a.hours, minutes = _a.minutes;
-                var secs = hours * 3600 + minutes * 60;
+                var _hours = _a.hours, _minutes = _a.minutes;
+                var secs = _hours * 3600 + _minutes * 60;
                 return { id: secs, label: _this.secondsToLabel(secs, format) };
             });
         };
@@ -110,9 +142,7 @@ var TimePicker = /** @class */ (function (_super) {
             var date = _this.props.adapter.startOfDay(_this.props.adapter.date(val || undefined));
             return setSeconds(setMinutes(setHours(date, hours), minutes), seconds);
         };
-        _this.getTimeWindowInSeconds = function (
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        step) {
+        _this.getTimeWindowInSeconds = function () {
             var _a = _this.props, min = _a.minTime, max = _a.maxTime, ignoreMinMaxDateComponent = _a.ignoreMinMaxDateComponent;
             var dayStart = _this.setTime(_this.props.value, 0, 0, 0);
             var dayEnd = _this.setTime(_this.props.value, 24, 0, 0);
@@ -140,25 +170,38 @@ var TimePicker = /** @class */ (function (_super) {
                 end: (maxDate - midnightDate) / 1000,
             };
         };
+        // eslint-disable-next-line max-statements -- required for performing validation
         _this.buildSteps = function () {
-            var _a = _this.props.step, step = _a === void 0 ? 900 : _a;
-            var timeWindow = _this.getTimeWindowInSeconds(step);
+            var _a = _this.props, _b = _a.step, step = _b === void 0 ? 900 : _b, timeRanges = _a.timeRanges, value = _a.value;
+            var timeWindow = _this.getTimeWindowInSeconds();
             var stepCount = (timeWindow.end - timeWindow.start) / step;
             if (process.env.NODE_ENV !== 'production' && stepCount > 500) {
-                // eslint-disable-next-line no-console
+                // eslint-disable-next-line no-console -- will not appear in production
                 console.warn("Provided step value (".concat(step, ") results in ").concat(stepCount, " steps. Performance may suffer when more than 500 elements are rendered."));
             }
             if (!Number.isInteger(stepCount)) {
                 var previousStepCount = stepCount;
                 stepCount = Math.round(stepCount);
                 if (process.env.NODE_ENV !== 'production') {
-                    // eslint-disable-next-line no-console
+                    // eslint-disable-next-line no-console -- will not appear in production
                     console.warn("Provided step value (".concat(step, ") does not spread evenly across a day. Rounding from ").concat(previousStepCount, " total steps to ").concat(stepCount, "."));
                 }
             }
             var options = [];
+            if (timeRanges) {
+                var sortedTimeRanges = timeRanges.sort(function (_a, _b) {
+                    var from1 = _a.from;
+                    var from2 = _b.from;
+                    return (from2 > from1 ? -1 : 1);
+                });
+                sortedTimeRanges.forEach(function (timeRange) {
+                    for (var i = timeRange.from / 1000; i < timeRange.upto / 1000; i += step) {
+                        options.push(i);
+                    }
+                });
+                return options;
+            }
             for (var i = timeWindow.start; i < timeWindow.end; i += step) {
-                // @ts-ignore
                 options.push(i);
             }
             return options;
@@ -170,13 +213,10 @@ var TimePicker = /** @class */ (function (_super) {
             }
             return filterOptions(options, filterValue, excludeOptions, newProps);
         };
-        _this.buildSelectedOption = function (value, format) {
+        _this.buildSelectedOption = function (value, format, langCode) {
             if (format === void 0) { format = '12'; }
             var secs = _this.dateHelpers.dateToSeconds(value);
-            return {
-                id: secs,
-                label: _this.secondsToLabel(secs, format || '12'),
-            };
+            return { id: secs, label: _this.secondsToLabel(secs, format || '12', langCode) };
         };
         _this.dateHelpers = new DateHelpers(props.adapter);
         return _this;
@@ -217,34 +257,52 @@ var TimePicker = /** @class */ (function (_super) {
         var adapterChanged = prevProps.adapter !== this.props.adapter;
         var minTimeChange = prevProps.minTime !== this.props.minTime;
         var maxTimeChange = prevProps.maxTime !== this.props.maxTime;
+        var timeRangesChanged = prevProps.timeRanges !== this.props.timeRanges;
         if (adapterChanged) {
             this.dateHelpers = new DateHelpers(this.props.adapter);
         }
-        if (formatChanged || stepChanged || minTimeChange || maxTimeChange) {
+        if (formatChanged || stepChanged || minTimeChange || maxTimeChange || timeRangesChanged) {
             var steps = this.buildSteps();
+            // eslint-disable-next-line react/no-did-update-set-state -- baseui migration
             this.setState({ steps: steps });
         }
         if (prevProps.value && !this.props.value) {
+            // eslint-disable-next-line react/no-did-update-set-state -- baseui migration
             this.setState({ value: null });
         }
     };
     TimePicker.prototype.render = function () {
         var _this = this;
-        var _a = this.props, format = _a.format, _b = _a.overrides, overrides = _b === void 0 ? {} : _b, adapter = _a.adapter;
-        var _c = __read(getOverrides(overrides.Select, Select), 2), OverriddenSelect = _c[0], selectProps = _c[1];
-        selectProps.overrides = mergeOverrides({ Dropdown: { style: { maxHeight: '126px' } } }, selectProps.overrides);
-        var value = this.props.value && adapter.isValid(this.props.value)
-            ? this.buildSelectedOption(this.props.value, this.props.format)
-            : this.state.value;
-        return (_jsx(LocaleContext.Consumer, { children: function (locale) {
-                var ariaLabel = format === '12' ? locale.datepicker.timePickerAriaLabel12Hour : locale.datepicker.timePickerAriaLabel24Hour;
-                return (_jsx(OverriddenSelect, __assign({ "aria-label": ariaLabel, disabled: _this.props.disabled, error: _this.props.error, positive: _this.props.positive, size: _this.props.size, placeholder: _this.props.placeholder || 'HH:mm', options: _this.state.steps.map(function (n) { return ({
+        var _a;
+        var _b = this.props, format = _b.format, _c = _b.overrides, overrides = _c === void 0 ? {} : _c, adapter = _b.adapter;
+        var _d = __read(getOverrides((_a = mergeOverrides({
+            Select: {
+                props: {
+                    overrides: {
+                        Input: {
+                            className: 'placeholder:text-transparent',
+                        },
+                        Placeholder: {
+                            className: 'grow-0 basis-auto',
+                        },
+                    },
+                },
+            },
+        }, overrides)) === null || _a === void 0 ? void 0 : _a.Select, Select), 2), OverriddenSelect = _d[0], selectProps = _d[1];
+        var defaultPlaceholder = format === '12' ? 'hh:mm am' : 'hh:mm';
+        return (_jsx(LocaleConsumer, { children: function (_a) {
+                var timeRangePicker = _a.timeRangePicker, langCode = _a.langCode;
+                var value = _this.props.value && adapter.isValid(_this.props.value)
+                    ? _this.buildSelectedOption(_this.props.value, _this.props.format, langCode)
+                    : _this.state.value;
+                var ariaLabel = format === '12' ? timeRangePicker.timePickerAriaLabel12Hour : timeRangePicker.timePickerAriaLabel24Hour;
+                return (_jsx(OverriddenSelect, __assign({ "aria-label": ariaLabel, disabled: _this.props.disabled, error: _this.props.error, positive: _this.props.positive, size: _this.props.size, placeholder: _this.props.placeholder || defaultPlaceholder, options: _this.state.steps.map(function (n) { return ({
                         id: n,
-                        label: _this.secondsToLabel(n, _this.props.format),
+                        label: _this.secondsToLabel(n, _this.props.format, langCode),
                     }); }), filterOptions: _this.props.creatable ? _this.creatableFilterOptions : undefined, onChange: _this.onChange, 
                     // if value is defined, it should be an array type
-                    value: value ? [value] : value, clearable: false, backspaceRemoves: false, valueKey: "label" }, selectProps), void 0));
-            } }, void 0));
+                    value: value ? [value] : value, clearable: false, backspaceRemoves: false, valueKey: "label" }, selectProps)));
+            } }));
     };
     TimePicker.defaultProps = {
         format: '12',

package/esm/baseui/timepicker/types.d.ts

@@ -1,11 +1,13 @@
-import type { Override } from '../helpers/overrides';
+import type { Override } from '../../overrides';
 import type { Option } from '../select';
 import type { Size } from '../input';
 import type { DateIOAdapter } from '../datepicker/utils/types';
-export declare type TimePickerOverrides = {
-    Select?: Override;
+import { TimeRange } from '../datepicker/types';
+export type TimePickerOverrides = {
+    Select?: Override<Record<string, any>>;
 };
-export declare type TimePickerProps<T = Date> = {
+export type TimePickerProps<T = Date> = {
+    timeRanges?: Array<TimeRange>;
     /** Render options in AM/PM format or 24 hour format. Defaults to 12 hour. */
     adapter: DateIOAdapter<T>;
     format?: '12' | '24';
@@ -39,13 +41,13 @@ export declare type TimePickerProps<T = Date> = {
      */
     ignoreMinMaxDateComponent?: boolean;
 };
-export declare type TimePickerState = {
+export type TimePickerState = {
     /** List of times (in seconds) displayed in the dropdown menu. */
     steps: number[];
     /** Internal value of the selected time as an integer since midnight (0) */
     value: Option | undefined | null;
 };
-export declare type TimePickerDefaultProps = {
+export type TimePickerDefaultProps = {
     format: '12';
     step: 900;
     creatable: false;

package/esm/baseui/tree-view/index.d.ts

@@ -8,4 +8,4 @@ export { default as TreeLabel } from './tree-label';
 export { default as TreeLabelInteractable } from './tree-label-interactable';
 export { toggleIsExpanded };
 /** @deprecated use TreeNodeData instead. To be removed in future versions.*/
-export declare type TreeNode<T = any> = TreeNodeData<T>;
+export type TreeNode<T = any> = TreeNodeData<T>;

package/esm/baseui/tree-view/stateful-container.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { StatefulContainerProps, TreeNodeData } from './types';
-declare type StateType = {
+type StateType = {
     data: TreeNodeData[];
 };
 export default class StatefulContainer extends React.Component<StatefulContainerProps, StateType> {

package/esm/baseui/tree-view/stateful-tree-view.js

@@ -3,5 +3,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import StatefulContainer from './stateful-container';
 import TreeView from './tree-view';
 export default function StatefulTreeView(props) {
-    return (_jsx(StatefulContainer, __assign({}, props, { children: function (treeViewProps) { return _jsx(TreeView, __assign({}, treeViewProps), void 0); } }), void 0));
+    return _jsx(StatefulContainer, __assign({}, props, { children: function (treeViewProps) { return _jsx(TreeView, __assign({}, treeViewProps)); } }));
 }

package/esm/baseui/tree-view/styled-components.d.ts

@@ -1,6 +1,6 @@
-export declare const StyledTreeItemList: import("../../style/styled").StyledComponent;
-export declare const StyledTreeItem: import("../../style/styled").StyledComponent;
-export declare const StyledItemContent: import("../../style/styled").StyledComponent;
-export declare const StyledIconContainer: import("../../style/styled").StyledComponent;
-export declare const StyledNoIconContainer: import("../../style/styled").StyledComponent;
-export declare const StyledLabelInteractable: import("../../style/styled").StyledComponent;
+export declare const StyledTreeItemList: import("../../style").StyledComponent;
+export declare const StyledTreeItem: import("../../style").StyledComponent;
+export declare const StyledItemContent: import("../../style").StyledComponent;
+export declare const StyledIconContainer: import("../../style").StyledComponent;
+export declare const StyledNoIconContainer: import("../../style").StyledComponent;
+export declare const StyledLabelInteractable: import("../../style").StyledComponent;

package/esm/baseui/tree-view/styled-components.js

@@ -5,31 +5,29 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import { styled } from '../../style';
-export var StyledTreeItemList = styled('ul', 'my-0 overflow-auto py-0 relative outline-none', function (_, _a) {
+import cx from '../../classNames';
+export var StyledTreeItemList = styled('ul', 'my-0 overflow-auto py-0 relative outline-none border-0', function (_, _a) {
     var $indentGuides = _a.$indentGuides, $isChildNode = _a.$isChildNode, _b = _a.$expanded, $expanded = _b === void 0 ? true : _b;
-    return {
-        marginLeft: $isChildNode ? '14px' : 0,
-        paddingLeft: $isChildNode ? '6px' : 0,
-        display: $expanded ? 'block' : 'none',
-        borderLeftWidth: $indentGuides && $isChildNode ? '1px' : 'none',
-        borderLeftStyle: $indentGuides && $isChildNode ? 'solid' : 'none',
-        borderLeftColor: $indentGuides && $isChildNode ? 'transparent' : 'none',
-    };
+    return cx([
+        $isChildNode ? 'ml-3.5' : 'ml-0',
+        $isChildNode ? 'pl-1.5' : 'pl-0',
+        $expanded ? 'block' : 'hidden',
+        $indentGuides && $isChildNode ? 'border-l-1' : 'border-l-0',
+        $indentGuides && $isChildNode ? 'border-solid' : 'border-none',
+        $indentGuides && $isChildNode ? 'border-l-transparent' : '',
+    ]);
 });
 StyledTreeItemList.displayName = 'StyledTreeItemList';
 export var StyledTreeItem = styled('li', 'm-0 overflow-auto p-0 relative outline-none', function (_, _a) {
     var $isLeafNode = _a.$isLeafNode;
-    return ({
-        cursor: $isLeafNode ? 'auto' : 'pointer',
-    });
+    return $isLeafNode ? 'cursor-auto' : 'cursor-pointer';
 });
 StyledTreeItem.displayName = 'StyledTreeItem';
-export var StyledItemContent = styled('div', 'text-14 leading-10 px-1.5 py-1 items-center flex border-box m-0', {
-    outlineOffset: '-3px',
-});
+export var StyledItemContent = styled('div', 'text-14 leading-6.25 px-1.5 py-1 items-center flex border-box m-0 -outline-offset-3');
 StyledItemContent.displayName = 'StyledItemContent';
 export var StyledIconContainer = styled('div', 'flex items-center my-0 mr-1.5 h-4 w-4 justify-center');
 StyledIconContainer.displayName = 'StyledIconContainer';
+// @ts-expect-error TS(2345): Argument of type '() => { height: string; }' is no... Remove this comment to see the full error message
 export var StyledNoIconContainer = styled('div', 'my-0 w-0 mr-1.5 items-center flex justify-center', function () { return ({
     height: '1em',
 }); });

package/esm/baseui/tree-view/tree-label-interactable.d.ts

@@ -1,8 +1,8 @@
-import type { Override } from '../helpers/overrides';
+import { Overrides } from '../../overrides';
 import type { ComponentType, PropsWithChildren } from 'react';
 declare const TreeLabelInteractable: ComponentType<PropsWithChildren<{
     overrides?: {
-        LabelInteractable: Override;
+        LabelInteractable: Overrides<Record<string, any>>;
     };
 }>>;
 export default TreeLabelInteractable;

package/esm/baseui/tree-view/tree-label-interactable.js

@@ -1,10 +1,10 @@
-import { __assign, __rest } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StyledLabelInteractable } from './styled-components';
-import { getOverride } from '../helpers/overrides';
+import { getOverrides } from '../../overrides';
 var TreeLabelInteractable = function (_a) {
     var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, props = __rest(_a, ["overrides"]);
-    var LabelInteractable = getOverride(overrides.LabelInteractable) || StyledLabelInteractable;
+    var _c = __read(getOverrides(overrides.LabelInteractable, StyledLabelInteractable), 1), LabelInteractable = _c[0];
     return (
     // $FlowExpectedError[cannot-spread-inexact]
     _jsx(LabelInteractable
@@ -13,6 +13,6 @@ var TreeLabelInteractable = function (_a) {
         // @ts-ignore
         onClick: function (e) { return e.stopPropagation(); }, 
         // @ts-ignore
-        onKeyDown: function (e) { return e.stopPropagation(); } }, props), void 0));
+        onKeyDown: function (e) { return e.stopPropagation(); } }, props)));
 };
 export default TreeLabelInteractable;

package/esm/baseui/tree-view/tree-label.js

@@ -3,8 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { StyledIconContainer, StyledItemContent } from './styled-components';
 import ChevronRight from '../../icon/components/chevron-right';
 import ChevronDown from '../../icon/components/chevron-down';
-import { getOverride, getOverrideProps, getOverrides } from '../helpers/overrides';
 import { Box } from '../../box';
+import { useOverrides } from '../../overrides';
 var TreeLabel = function (_a) {
     var hasChildren = _a.hasChildren, isExpanded = _a.isExpanded, label = _a.label, _b = _a.overrides, overrides = _b === void 0 ? {} : _b, node = _a.node, isSelected = _a.isSelected, isFocusVisible = _a.isFocusVisible, props = __rest(_a, ["hasChildren", "isExpanded", "label", "overrides", "node", "isSelected", "isFocusVisible"]);
     var sharedProps = {
@@ -14,13 +14,13 @@ var TreeLabel = function (_a) {
         $hasChildren: !!hasChildren,
     };
     var IconContainerOverride = overrides.IconContainer, ExpandIconOverride = overrides.ExpandIcon, CollapseIconOverride = overrides.CollapseIcon, LeafIconContainerOverride = overrides.LeafIconContainer, LeafIconOverride = overrides.LeafIcon, TreeItemContentOverride = overrides.TreeItemContent;
-    var IconContainer = getOverride(IconContainerOverride) || StyledIconContainer;
-    var _c = __read(getOverrides(ExpandIconOverride, ChevronRight), 2), Right = _c[0], RightProps = _c[1];
-    var CollapseIcon = getOverride(CollapseIconOverride) || ChevronDown;
-    var LeafIconContainer = getOverride(LeafIconContainerOverride) || StyledIconContainer;
-    var TreeItemContent = getOverride(TreeItemContentOverride) || StyledItemContent;
+    var _c = __read(useOverrides(IconContainerOverride, StyledIconContainer), 2), IconContainer = _c[0], iconContainerProps = _c[1];
+    var _d = __read(useOverrides(ExpandIconOverride, ChevronRight), 2), Right = _d[0], RightProps = _d[1];
+    var _e = __read(useOverrides(CollapseIconOverride, ChevronDown), 2), CollapseIcon = _e[0], collpaseProps = _e[1];
+    var _f = __read(useOverrides(LeafIconContainerOverride, StyledIconContainer), 2), LeafIconContainer = _f[0], leftIconContainerProps = _f[1];
+    var _g = __read(useOverrides(TreeItemContentOverride, StyledItemContent), 1), TreeItemContent = _g[0];
     return (
     // $FlowExpectedError[cannot-spread-inexact]
-    _jsxs(TreeItemContent, __assign({}, sharedProps, props, { children: [hasChildren && (_jsx(IconContainer, __assign({}, sharedProps, getOverrideProps(IconContainerOverride), { children: !isExpanded ? (_jsx(Right, __assign({ size: 8 }, sharedProps, RightProps), void 0)) : (_jsx(CollapseIcon, __assign({ size: 8 }, sharedProps, getOverrideProps(CollapseIconOverride)), void 0)) }), void 0)), !hasChildren && (_jsx(LeafIconContainer, __assign({}, sharedProps, getOverrideProps(LeafIconContainerOverride), { children: _jsx(Box, { className: "h-4 w-4 bg-white" }, void 0) }), void 0)), typeof label === 'function' ? label(node) : label] }), void 0));
+    _jsxs(TreeItemContent, __assign({}, sharedProps, props, { children: [hasChildren && (_jsx(IconContainer, __assign({}, sharedProps, iconContainerProps, { children: !isExpanded ? (_jsx(Right, __assign({ size: 8 }, sharedProps, RightProps))) : (_jsx(CollapseIcon, __assign({ size: 8 }, sharedProps, collpaseProps))) }))), !hasChildren && (_jsx(LeafIconContainer, __assign({}, sharedProps, leftIconContainerProps, { children: _jsx(Box, { className: "h-4 w-4" }) }))), typeof label === 'function' ? label(node) : label] })));
 };
 export default TreeLabel;

package/esm/baseui/tree-view/tree-node.js

@@ -1,4 +1,4 @@
-import { __assign, __extends } from "tslib";
+import { __assign, __extends, __read } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /*
 Copyright (c) Uber Technologies, Inc.
@@ -9,7 +9,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import { StyledTreeItemList, StyledTreeItem } from './styled-components';
 import StyledTreeLabel from './tree-label';
-import { getOverride, getOverrideProps } from '../helpers/overrides';
+import { getOverrides } from '../../overrides';
 var TreeNode = /** @class */ (function (_super) {
     __extends(TreeNode, _super);
     function TreeNode() {
@@ -38,14 +38,15 @@ var TreeNode = /** @class */ (function (_super) {
         this.props.removeRef(this.props.getId(this.props.node));
     };
     TreeNode.prototype.render = function () {
-        var _a = this.props, indentGuides = _a.indentGuides, node = _a.node, getId = _a.getId, onToggle = _a.onToggle, _b = _a.overrides, overrides = _b === void 0 ? {} : _b, renderAll = _a.renderAll, selectedNodeId = _a.selectedNodeId, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, addRef = _a.addRef, removeRef = _a.removeRef, isFocusVisible = _a.isFocusVisible;
+        var _a;
+        var _b = this.props, indentGuides = _b.indentGuides, node = _b.node, getId = _b.getId, onToggle = _b.onToggle, _c = _b.overrides, overrides = _c === void 0 ? {} : _c, renderAll = _b.renderAll, selectedNodeId = _b.selectedNodeId, onKeyDown = _b.onKeyDown, onFocus = _b.onFocus, onBlur = _b.onBlur, addRef = _b.addRef, removeRef = _b.removeRef, isFocusVisible = _b.isFocusVisible;
         var children = node.children, isExpanded = node.isExpanded, label = node.label;
-        var hasChildren = children && children.length !== 0;
+        var hasChildren = (_a = (children && children.length !== 0)) !== null && _a !== void 0 ? _a : false;
         var TreeItemListOverride = overrides.TreeItemList, TreeItemOverride = overrides.TreeItem, TreeLabelOverride = overrides.TreeLabel;
-        var TreeItemList = getOverride(TreeItemListOverride) || StyledTreeItemList;
-        var TreeItem = getOverride(TreeItemOverride) || StyledTreeItem;
-        var TreeLabel = getOverride(TreeLabelOverride) || StyledTreeLabel;
-        return (_jsxs(TreeItem, __assign({ role: "treeitem", ref: this.treeItemRef, "data-nodeid": getId(node), tabIndex: selectedNodeId === getId(node) ? 0 : -1, onKeyDown: function (e) { return onKeyDown && onKeyDown(e, node); }, onBlur: onBlur, onFocus: this.onFocus, "aria-expanded": isExpanded, "$isLeafNode": !hasChildren }, getOverrideProps(TreeItemOverride), { children: [_jsx(TreeLabel, __assign({ onClick: this.onToggle, node: node, hasChildren: hasChildren, isExpanded: isExpanded, isSelected: selectedNodeId === getId(node), isFocusVisible: isFocusVisible, label: label, overrides: overrides }, getOverrideProps(TreeLabelOverride)), void 0), children && (isExpanded || renderAll) && (_jsx(TreeItemList, __assign({ role: "group", "$indentGuides": !!indentGuides, "$isChildNode": true, "$expanded": !!isExpanded }, getOverrideProps(TreeItemListOverride), { children: children.map(function (node, index) { return (_jsx(TreeNode, { indentGuides: !!indentGuides, renderAll: renderAll, node: node, getId: getId, onToggle: onToggle, overrides: overrides, selectedNodeId: selectedNodeId, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur, addRef: addRef, removeRef: removeRef, isFocusVisible: isFocusVisible }, index)); }) }), void 0))] }), void 0));
+        var _d = __read(getOverrides(TreeItemListOverride, StyledTreeItemList), 2), TreeItemList = _d[0], treeItemListProps = _d[1];
+        var _e = __read(getOverrides(TreeItemOverride, StyledTreeItem), 2), TreeItem = _e[0], treeItemProps = _e[1];
+        var _f = __read(getOverrides(TreeLabelOverride, StyledTreeLabel), 2), TreeLabel = _f[0], treeLabelProps = _f[1];
+        return (_jsxs(TreeItem, __assign({ role: "treeitem", ref: this.treeItemRef, "data-nodeid": getId(node), tabIndex: selectedNodeId === getId(node) ? 0 : -1, onKeyDown: function (e) { return onKeyDown && onKeyDown(e, node); }, onBlur: onBlur, onFocus: this.onFocus, "aria-expanded": isExpanded, "$isLeafNode": !hasChildren, "$node": node }, treeItemProps, { children: [_jsx(TreeLabel, __assign({ onClick: this.onToggle, node: node, hasChildren: hasChildren, isExpanded: isExpanded, isSelected: selectedNodeId === getId(node), isFocusVisible: isFocusVisible, label: label, overrides: overrides }, treeLabelProps)), children && (isExpanded || renderAll) && (_jsx(TreeItemList, __assign({ role: "group", "$indentGuides": !!indentGuides, "$isChildNode": true, "$expanded": !!isExpanded }, treeItemListProps, { children: children.map(function (childNode, index) { return (_jsx(TreeNode, { indentGuides: !!indentGuides, renderAll: renderAll, node: childNode, getId: getId, onToggle: onToggle, overrides: overrides, selectedNodeId: selectedNodeId, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur, addRef: addRef, removeRef: removeRef, isFocusVisible: isFocusVisible }, getId(childNode))); }) })))] })));
     };
     return TreeNode;
 }(React.Component));

package/esm/baseui/tree-view/tree-view.js

@@ -11,15 +11,15 @@ import TreeNode from './tree-node';
 import { StyledTreeItemList } from './styled-components';
 import { getPrevId, getNextId, getParentId, getFirstChildId, getEndId, getExpandableSiblings, defaultGetId, getCharMatchId, } from './utils';
 import { isFocusVisible } from '../utils/focusVisible';
-import { getOverride, getOverrideProps } from '../helpers/overrides';
+import { useOverrides } from '../../overrides';
 export default function TreeView(props) {
     var data = props.data, _a = props.indentGuides, indentGuides = _a === void 0 ? false : _a, onToggle = props.onToggle, _b = props.overrides, overrides = _b === void 0 ? {} : _b, renderAll = props.renderAll, _c = props.getId, getId = _c === void 0 ? defaultGetId : _c;
     var RootOverride = overrides.Root;
-    var Root = getOverride(RootOverride) || StyledTreeItemList;
+    var _d = __read(useOverrides(RootOverride, StyledTreeItemList), 2), Root = _d[0], rootProps = _d[1];
     var firstId = data.length > 0 ? getId(data[0]) : 0;
-    var _d = __read(React.useState(firstId), 2), selectedNodeId = _d[0], setSelectedNodeId = _d[1];
-    var _e = __read(React.useState(false), 2), focusVisible = _e[0], setFocusVisible = _e[1];
-    var _f = __read(React.useState(''), 2), typeAheadChars = _f[0], setTypeAheadChars = _f[1];
+    var _e = __read(React.useState(firstId), 2), selectedNodeId = _e[0], setSelectedNodeId = _e[1];
+    var _f = __read(React.useState(false), 2), focusVisible = _f[0], setFocusVisible = _f[1];
+    var _g = __read(React.useState(''), 2), typeAheadChars = _g[0], setTypeAheadChars = _g[1];
     var timeOutRef = React.useRef(null);
     var treeItemRefs = {};
     var focusTreeItem = function (id) {
@@ -115,12 +115,12 @@ export default function TreeView(props) {
             setFocusVisible(false);
         }
     };
-    return (_jsx(Root, __assign({ role: "tree" }, getOverrideProps(RootOverride), { children: data.map(function (node) { return (_jsx(TreeNode, { indentGuides: indentGuides, node: node, getId: getId, onToggle: function (node) {
+    return (_jsx(Root, __assign({ role: "tree" }, rootProps, { children: data.map(function (node) { return (_jsx(TreeNode, { indentGuides: indentGuides, node: node, getId: getId, onToggle: function (node) {
                 onToggle && onToggle(node);
                 focusTreeItem(getId(node));
             }, overrides: overrides, renderAll: renderAll, selectedNodeId: selectedNodeId, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur, addRef: function (id, ref) {
                 treeItemRefs[id] = ref;
             }, removeRef: function (id) {
                 delete treeItemRefs[id];
-            }, isFocusVisible: focusVisible }, getId(node))); }) }), void 0));
+            }, isFocusVisible: focusVisible }, getId(node))); }) })));
 }