@itwin/itwinui-react 3.17.0-dev.2 → 3.17.1

package/esm/core/Menu/MenuItem.d.ts

@@ -32,21 +32,21 @@ export type MenuItemProps = {
     /**
      * SVG icon component shown on the left.
      */
-    startIcon?: JSX.Element;
+    startIcon?: React.JSX.Element;
     /**
      * @deprecated Use startIcon.
      * SVG icon component shown on the left.
      */
-    icon?: JSX.Element;
+    icon?: React.JSX.Element;
     /**
      * SVG icon component shown on the right.
      */
-    endIcon?: JSX.Element;
+    endIcon?: React.JSX.Element;
     /**
      * @deprecated Use endIcon.
      * SVG icon component shown on the right.
      */
-    badge?: JSX.Element;
+    badge?: React.JSX.Element;
     /**
      * ARIA role. For menu item use 'menuitem', for select item use 'option'.
      * @default 'menuitem'
@@ -55,7 +55,7 @@ export type MenuItemProps = {
     /**
      * Items to be shown in the submenu when hovered over the item.
      */
-    subMenuItems?: JSX.Element[];
+    subMenuItems?: React.JSX.Element[];
     /**
      * Content of the menu item.
      */

package/esm/core/Overlay/Overlay.js

@@ -17,7 +17,7 @@ let OverlayHiddenContent = React.forwardRef((props, ref) => {
   return React.createElement(
     Box,
     {
-      inert: '',
+      inert: 'true',
       ref: ref,
       ...rest,
     },

package/esm/core/Panels/Panels.d.ts

@@ -46,7 +46,7 @@ type PanelProps = {
 };
 type PanelTriggerProps = {
     for: string;
-    children: React.ReactElement;
+    children: React.ReactElement<any>;
 };
 type PanelHeaderProps = {
     titleProps?: React.ComponentProps<typeof Text>;
@@ -134,7 +134,7 @@ export declare const Panels: {
      * </ListItem>
      */
     Trigger: {
-        (props: PanelTriggerProps): string | number | true | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null;
+        (props: PanelTriggerProps): string | number | bigint | true | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null;
         displayName: string;
     };
     /**

package/esm/core/Panels/Panels.js

@@ -132,7 +132,7 @@ let Panel = React.forwardRef((props, forwardedRef) => {
           className: cx('iui-panel', className),
           'aria-labelledby': `${id}-header-title`,
           role: 'group',
-          inert: isInert ? '' : void 0,
+          inert: isInert ? 'true' : void 0,
           'data-iui-transitioning': isTransitioning ? 'true' : void 0,
           ...rest,
         },

package/esm/core/Popover/Popover.d.ts

@@ -142,7 +142,7 @@ export declare const usePopover: (options: PopoverOptions & PopoverInternalProps
         events: import("@floating-ui/react").FloatingEvents;
         dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
         nodeId: string | undefined;
-        floatingId: string;
+        floatingId: string | undefined;
         refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
         elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     };

package/esm/core/Popover/Popover.js

@@ -321,7 +321,7 @@ let PopoverPortal = ({ children, portal = true }) => {
     FloatingPortal,
     {
       key: portalTo?.id,
-      root: portalTo,
+      root: portalTo ?? void 0,
     },
     React.createElement(DisplayContents, null),
     children,

package/esm/core/RadioTiles/RadioTile.d.ts

@@ -4,7 +4,7 @@ type RadioTileProps = {
     /**
      * Icon to be used.
      */
-    icon?: JSX.Element;
+    icon?: React.JSX.Element;
     /**
      * Label of the Radio tile.
      */

package/esm/core/Select/Select.d.ts

@@ -68,7 +68,7 @@ import { usePopover } from '../Popover/Popover.js';
  */
 export declare const Select: <T>(props: SelectProps<T> & {
     ref?: React.ForwardedRef<HTMLElement>;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export type SelectProps<T> = Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'placeholder' | 'value' | 'defaultValue'> & (({
     /**
      * If true, the native `<select>` element will be rendered.
@@ -170,7 +170,7 @@ export type CustomSelectProps<T> = SelectCommonProps & {
     /**
      * Custom renderer for an item in the dropdown list. `MenuItem` item props are going to be populated if not provided.
      */
-    itemRenderer?: (option: SelectOption<T>, itemProps: ItemRendererProps) => JSX.Element;
+    itemRenderer?: (option: SelectOption<T>, itemProps: ItemRendererProps) => React.JSX.Element;
     /**
      * Custom class for menu.
      */
@@ -211,7 +211,7 @@ export type SelectMultipleTypeProps<T> = {
      * Custom renderer for the selected item in select.
      * If `multiple` is enabled, it will give array of options to render.
      */
-    selectedItemRenderer?: (option: SelectOption<T>) => JSX.Element;
+    selectedItemRenderer?: (option: SelectOption<T>) => React.JSX.Element;
     /**
      * Selected option value.
      * If `multiple` is enabled, it is an array of values.
@@ -225,7 +225,7 @@ export type SelectMultipleTypeProps<T> = {
     onChange?: (value: T) => void;
 } | {
     multiple: true;
-    selectedItemRenderer?: (options: SelectOption<T>[]) => JSX.Element;
+    selectedItemRenderer?: (options: SelectOption<T>[]) => React.JSX.Element;
     value?: T[];
     onChange?: (value: T, event: SelectValueChangeEvent) => void;
 };
@@ -263,11 +263,11 @@ export type SelectOption<T> = {
      * @deprecated Use startIcon
      * SVG icon component shown on the left.
      */
-    icon?: JSX.Element;
+    icon?: React.JSX.Element;
     /**
      * SVG icon component shown on the left.
      */
-    startIcon?: JSX.Element;
+    startIcon?: React.JSX.Element;
     /**
      * Item is disabled.
      */

package/esm/core/SideNavigation/SideNavigation.d.ts

@@ -40,7 +40,7 @@ type SideNavigationProps = {
      *   isSubmenuOpen={true}
      * />
      */
-    submenu?: JSX.Element;
+    submenu?: React.JSX.Element;
     /**
      * Set to true to display the provided `submenu`.
      *

package/esm/core/SideNavigation/SideNavigation.js

@@ -2,6 +2,8 @@ import * as React from 'react';
 import cx from 'classnames';
 import { SvgChevronRight, Box, useControlledState } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
+import { FloatingDelayGroup } from '@floating-ui/react';
+import { defaultTooltipDelay } from '../Tooltip/Tooltip.js';
 export const SidenavExpandedContext = React.createContext(void 0);
 export const SideNavigation = React.forwardRef((props, forwardedRef) => {
   let {
@@ -47,47 +49,53 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => {
         ref: forwardedRef,
       },
       React.createElement(
-        Box,
+        FloatingDelayGroup,
         {
-          as: 'div',
-          className: cx(
-            'iui-side-navigation',
-            {
-              'iui-expanded': isExpanded,
-              'iui-collapsed': !isExpanded,
-            },
-            className,
-          ),
-          ...rest,
+          delay: defaultTooltipDelay,
         },
-        'top' === expanderPlacement && ExpandButton,
         React.createElement(
           Box,
           {
             as: 'div',
-            ...contentProps,
-            className: cx('iui-sidenav-content', contentProps?.className),
+            className: cx(
+              'iui-side-navigation',
+              {
+                'iui-expanded': isExpanded,
+                'iui-collapsed': !isExpanded,
+              },
+              className,
+            ),
+            ...rest,
           },
+          'top' === expanderPlacement && ExpandButton,
           React.createElement(
             Box,
             {
               as: 'div',
-              ...topProps,
-              className: cx('iui-top', topProps?.className),
-            },
-            items,
-          ),
-          React.createElement(
-            Box,
-            {
-              as: 'div',
-              ...bottomProps,
-              className: cx('iui-bottom', bottomProps?.className),
+              ...contentProps,
+              className: cx('iui-sidenav-content', contentProps?.className),
             },
-            secondaryItems,
+            React.createElement(
+              Box,
+              {
+                as: 'div',
+                ...topProps,
+                className: cx('iui-top', topProps?.className),
+              },
+              items,
+            ),
+            React.createElement(
+              Box,
+              {
+                as: 'div',
+                ...bottomProps,
+                className: cx('iui-bottom', bottomProps?.className),
+              },
+              secondaryItems,
+            ),
           ),
+          'bottom' === expanderPlacement && ExpandButton,
         ),
-        'bottom' === expanderPlacement && ExpandButton,
       ),
       submenu && isSubmenuOpen ? submenu : null,
     ),

package/esm/core/Slider/Slider.js

@@ -3,6 +3,8 @@ import * as React from 'react';
 import { getBoundedValue, useEventListener, Box } from '../../utils/index.js';
 import { Track } from './Track.js';
 import { Thumb } from './Thumb.js';
+import { FloatingDelayGroup } from '@floating-ui/react';
+import { defaultTooltipDelay } from '../Tooltip/Tooltip.js';
 let getPercentageOfRectangle = (rect, pointerX, pointerY, orientation) => {
   if ('horizontal' === orientation) {
     let position = getBoundedValue(pointerX, rect.left, rect.right);
@@ -284,47 +286,53 @@ export const Slider = React.forwardRef((props, ref) => {
         minValueLabel,
       ),
     React.createElement(
-      Box,
+      FloatingDelayGroup,
       {
-        ref: containerRef,
-        ...trackContainerProps,
-        className: cx(
-          'iui-slider',
-          {
-            'iui-grabbing': void 0 !== activeThumbIndex,
-          },
-          trackContainerProps?.className,
-        ),
-        onPointerDown: handlePointerDownOnSlider,
+        delay: defaultTooltipDelay,
       },
-      currentValues.map((thumbValue, index) => {
-        let [minVal, maxVal] = getAllowableThumbRange(index);
-        let thisThumbProps = thumbProps?.(index);
-        return React.createElement(Thumb, {
-          key: thisThumbProps?.id ?? index,
-          index: index,
-          disabled: disabled,
-          isActive: activeThumbIndex === index,
-          onThumbActivated: onThumbActivated,
-          onThumbValueChanged: onThumbValueChanged,
-          minVal: minVal,
-          maxVal: maxVal,
-          value: thumbValue,
-          tooltipProps: generateTooltipProps(index, thumbValue),
-          thumbProps: thisThumbProps,
-          step: step,
+      React.createElement(
+        Box,
+        {
+          ref: containerRef,
+          ...trackContainerProps,
+          className: cx(
+            'iui-slider',
+            {
+              'iui-grabbing': void 0 !== activeThumbIndex,
+            },
+            trackContainerProps?.className,
+          ),
+          onPointerDown: handlePointerDownOnSlider,
+        },
+        currentValues.map((thumbValue, index) => {
+          let [minVal, maxVal] = getAllowableThumbRange(index);
+          let thisThumbProps = thumbProps?.(index);
+          return React.createElement(Thumb, {
+            key: thisThumbProps?.id ?? index,
+            index: index,
+            disabled: disabled,
+            isActive: activeThumbIndex === index,
+            onThumbActivated: onThumbActivated,
+            onThumbValueChanged: onThumbValueChanged,
+            minVal: minVal,
+            maxVal: maxVal,
+            value: thumbValue,
+            tooltipProps: generateTooltipProps(index, thumbValue),
+            thumbProps: thisThumbProps,
+            step: step,
+            sliderMin: min,
+            sliderMax: max,
+          });
+        }),
+        React.createElement(Track, {
+          trackDisplayMode: trackDisplay,
           sliderMin: min,
           sliderMax: max,
-        });
-      }),
-      React.createElement(Track, {
-        trackDisplayMode: trackDisplay,
-        sliderMin: min,
-        sliderMax: max,
-        values: currentValues,
-        orientation: orientation,
-        ...trackProps,
-      }),
+          values: currentValues,
+          orientation: orientation,
+          ...trackProps,
+        }),
+      ),
     ),
     tickMarkArea,
     maxValueLabel &&

package/esm/core/StatusMessage/StatusMessage.d.ts

@@ -8,7 +8,7 @@ type StatusMessageProps = {
      * - It will default to the `status` icon, if `status` is set.
      * - If `startIcon` is set to `null`, no icon will be displayed, even if `status` is set.
      */
-    startIcon?: JSX.Element | null;
+    startIcon?: React.JSX.Element | null;
     /**
      * Message content.
      */

package/esm/core/Stepper/Stepper.js

@@ -2,6 +2,8 @@ import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
 import { StepperStep } from './StepperStep.js';
+import { FloatingDelayGroup } from '@floating-ui/react';
+import { defaultTooltipDelay } from '../Tooltip/Tooltip.js';
 let defaultStepperLocalization = {
   stepsCountLabel: (currentStep, totalSteps) =>
     `Step ${currentStep} of ${totalSteps}:`,
@@ -33,29 +35,35 @@ export const Stepper = React.forwardRef((props, ref) => {
       ...rest,
     },
     React.createElement(
-      'ol',
-      null,
-      steps.map((s, index) => {
-        let thisStepProps = stepProps?.(index);
-        let thisTrackContentProps = trackContentProps?.(index);
-        let thisCircleProps = circleProps?.(index);
-        let thisNameProps = nameProps?.(index);
-        return React.createElement(StepperStep, {
-          stepProps: thisStepProps,
-          trackContentProps: thisTrackContentProps,
-          circleProps: thisCircleProps,
-          nameProps: thisNameProps,
-          key: index,
-          index: index,
-          title: 'long' === type ? '' : s.name,
-          currentStepNumber: boundedCurrentStep,
-          totalSteps: steps.length,
-          type: type,
-          onClick: onStepClick,
-          description: s.description,
-          stepContent: s.stepContent,
-        });
-      }),
+      FloatingDelayGroup,
+      {
+        delay: defaultTooltipDelay,
+      },
+      React.createElement(
+        'ol',
+        null,
+        steps.map((s, index) => {
+          let thisStepProps = stepProps?.(index);
+          let thisTrackContentProps = trackContentProps?.(index);
+          let thisCircleProps = circleProps?.(index);
+          let thisNameProps = nameProps?.(index);
+          return React.createElement(StepperStep, {
+            stepProps: thisStepProps,
+            trackContentProps: thisTrackContentProps,
+            circleProps: thisCircleProps,
+            nameProps: thisNameProps,
+            key: index,
+            index: index,
+            title: 'long' === type ? '' : s.name,
+            currentStepNumber: boundedCurrentStep,
+            totalSteps: steps.length,
+            type: type,
+            onClick: onStepClick,
+            description: s.description,
+            stepContent: s.stepContent,
+          });
+        }),
+      ),
     ),
     'long' === type &&
       React.createElement(

package/esm/core/Table/Table.d.ts

@@ -270,6 +270,6 @@ export type TableProps<T extends Record<string, unknown> = Record<string, unknow
  * />
  */
 export declare const Table: {
-    <T extends Record<string, unknown> = Record<string, unknown>>(props: TableProps<T>): JSX.Element;
+    <T extends Record<string, unknown> = Record<string, unknown>>(props: TableProps<T>): React.JSX.Element;
     displayName: string;
 };

package/esm/core/Table/Table.js

@@ -110,7 +110,7 @@ export const Table = (props) => {
     ...rest
   } = props;
   useGlobals();
-  let ownerDocument = React.useRef();
+  let ownerDocument = React.useRef(void 0);
   let defaultColumn = React.useMemo(
     () => ({
       maxWidth: 0,
@@ -615,7 +615,10 @@ export const Table = (props) => {
             },
             React.createElement(
               Box,
-              headerGroupProps,
+              {
+                ...headerGroupProps,
+                key: headerGroupProps.key,
+              },
               headerGroup.headers.map((column, index) => {
                 let dragAndDropProps = column.getDragAndDropProps();
                 return React.createElement(ColumnHeader, {

package/esm/core/Table/TableExpandableContentMemoized.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import type { VirtualItem } from '@tanstack/react-virtual';
 type TableExpandableContentProps = {
     children: React.ReactNode;
-    virtualItem?: VirtualItem<Element>;
+    virtualItem?: VirtualItem;
     isDisabled?: boolean;
 };
-export declare const TableExpandableContentMemoized: React.MemoExoticComponent<PolymorphicForwardRefComponent<"div", TableExpandableContentProps>>;
+export declare const TableExpandableContentMemoized: React.NamedExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "as" | keyof TableExpandableContentProps> & TableExpandableContentProps & {
+    as?: "div" | undefined;
+}>;
 export {};

package/esm/core/Table/TableRowMemoized.d.ts

@@ -27,7 +27,7 @@ export declare const TableRow: <T extends Record<string, unknown>>(props: {
     scrollContainerRef: HTMLDivElement | null;
     tableRowRef?: React.Ref<HTMLDivElement>;
     density?: "default" | "condensed" | "extra-condensed";
-    virtualItem?: VirtualItem<Element>;
+    virtualItem?: VirtualItem;
     virtualizer?: Virtualizer<Element, Element>;
 }) => React.JSX.Element;
 export declare const TableRowMemoized: typeof TableRow;

package/esm/core/Table/TableRowMemoized.js

@@ -82,6 +82,7 @@ export const TableRow = (props) => {
       Box,
       {
         ...mergedProps,
+        key: mergedProps.key,
         ref: refs,
         onClick: (event) => {
           mergedProps?.onClick?.(event);

package/esm/core/Table/cells/DefaultCell.d.ts

@@ -4,11 +4,11 @@ export type DefaultCellProps<T extends Record<string, unknown>> = {
     /**
      * Custom icon to be displayed at the beginning of the cell.
      */
-    startIcon?: JSX.Element;
+    startIcon?: React.JSX.Element;
     /**
      * Custom icon to be displayed at the end of the cell.
      */
-    endIcon?: JSX.Element;
+    endIcon?: React.JSX.Element;
     /**
      * Status of the cell.
      */

package/esm/core/Table/cells/DefaultCell.js

@@ -28,10 +28,12 @@ export const DefaultCell = (props) => {
     clamp = 'string' == typeof cellProps.value && !isCustomCell,
     ...rest
   } = props;
+  let { key: cellElementKey, ...cellElementPropsRest } = cellElementProps;
   return React.createElement(
     Box,
     {
-      ...cellElementProps,
+      ...cellElementPropsRest,
+      key: cellElementKey,
       ...rest,
       className: cx(cellElementClassName, className),
       'aria-disabled': isDisabled?.(cellProps.row.original) || void 0,
@@ -43,22 +45,31 @@ export const DefaultCell = (props) => {
     },
     React.createElement(
       ShadowRoot,
-      null,
+      {
+        key: `${cellElementKey}-shadow-root`,
+      },
       React.createElement('slot', {
         name: 'start',
+        key: `${cellElementKey}-shadow-root-start`,
       }),
       clamp
         ? React.createElement(
             LineClamp,
-            null,
+            {
+              key: `${cellElementKey}-shadow-root-slot`,
+            },
             React.createElement('slot', null),
           )
-        : React.createElement('slot', null),
+        : React.createElement('slot', {
+            key: `${cellElementKey}-shadow-root-slot`,
+          }),
       React.createElement('slot', {
         name: 'end',
+        key: `${cellElementKey}-shadow-root-end`,
       }),
       React.createElement('slot', {
         name: 'shadows',
+        key: `${cellElementKey}-shadow-root-shadows`,
       }),
     ),
     startIcon &&
@@ -67,6 +78,7 @@ export const DefaultCell = (props) => {
         {
           className: 'iui-table-cell-start-icon',
           slot: 'start',
+          key: `${cellElementKey}-start`,
         },
         startIcon,
       ),
@@ -77,6 +89,7 @@ export const DefaultCell = (props) => {
         {
           className: 'iui-table-cell-end-icon',
           slot: 'end',
+          key: `${cellElementKey}-end`,
         },
         endIcon,
       ),

package/esm/core/Table/filters/defaultFilterFunctions.js

@@ -14,10 +14,9 @@ let exactText = (rows, ids, filterValue) =>
   rows.filter((row) =>
     ids.some((id) => {
       let rowValue = row.values[id];
-      return (
-        void 0 === rowValue ||
-        String(rowValue).toLowerCase() === String(filterValue).toLowerCase()
-      );
+      return void 0 !== rowValue
+        ? String(rowValue).toLowerCase() === String(filterValue).toLowerCase()
+        : true;
     }),
   );
 exactText.autoRemove = (val) => !val;
@@ -25,7 +24,9 @@ let exactTextCase = (rows, ids, filterValue) =>
   rows.filter((row) =>
     ids.some((id) => {
       let rowValue = row.values[id];
-      return void 0 === rowValue || String(rowValue) === String(filterValue);
+      return void 0 !== rowValue
+        ? String(rowValue) === String(filterValue)
+        : true;
     }),
   );
 exactTextCase.autoRemove = (val) => !val;

package/esm/core/Table/hooks/useResizeColumns.d.ts

@@ -32,6 +32,6 @@
 import type * as React from 'react';
 import type { Hooks } from '../../../react-table/react-table.js';
 export declare const useResizeColumns: {
-    <T extends Record<string, unknown>>(ownerDocument: React.RefObject<Document | undefined>): (hooks: Hooks<T>) => void;
+    <T extends Record<string, unknown>>(ownerDocument: React.RefObject<Document | undefined | null>): (hooks: Hooks<T>) => void;
     pluginName: string;
 };

package/esm/core/Table/hooks/useResizeColumns.js

@@ -77,9 +77,11 @@ let defaultGetResizerProps =
       let events = isTouchEvent(e)
         ? handlersAndEvents.touch
         : handlersAndEvents.mouse;
-      let passiveIfSupported = !!passiveEventSupported() && {
-        passive: false,
-      };
+      let passiveIfSupported = passiveEventSupported()
+        ? {
+            passive: false,
+          }
+        : false;
       ownerDocument.current?.addEventListener(
         events.moveEvent,
         events.moveHandler,
@@ -279,7 +281,7 @@ let useInstanceBeforeDimensions = (instance) => {
         ? getPreviousResizableHeader(header, instance)
         : getNextResizableHeader(header, instance);
     header.canResize =
-      null == header.disableResizing || !header.disableResizing;
+      null != header.disableResizing ? !header.disableResizing : true;
     if ('fit' === columnResizeMode)
       header.isResizerVisible =
         (header.canResize && !!nextResizableHeader) ||

package/esm/core/Tabs/Tabs.d.ts

@@ -160,7 +160,7 @@ type TabLegacyProps = {
     /**
      * Svg icon shown before the labels.
      */
-    startIcon?: JSX.Element;
+    startIcon?: React.JSX.Element;
     /**
      * Control whether the tab is disabled.
      */
@@ -265,9 +265,7 @@ export declare const Tabs: PolymorphicForwardRefComponent<"div", TabsLegacyProps
     /**
      * Tab icon subcomponent which places an icon on the left side of the tab.
      */
-    TabIcon: PolymorphicForwardRefComponent<"span", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-    }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
+    TabIcon: PolymorphicForwardRefComponent<"span", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
         size?: "auto" | "small" | "medium" | "large" | import("../../utils/types.js").AnyString;
         fill?: "default" | "positive" | "informational" | "negative" | "warning" | import("../../utils/types.js").AnyString;
         padded?: boolean;