@itwin/itwinui-react 3.11.3 → 3.12.1

package/esm/core/Table/columns/actionColumn.js

@@ -1,7 +1,3 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Checkbox } from '../../Checkbox/Checkbox.js';
 import { SvgColumnManager } from '../../../utils/index.js';
@@ -12,79 +8,94 @@ import { tableResizeStartAction } from '../Table.js';
 import { SELECTION_CELL_ID } from './selectionColumn.js';
 import { EXPANDER_CELL_ID } from './expanderColumn.js';
 const ACTION_CELL_ID = 'iui-table-action';
-/**
- * Action column that adds column manager to the Table header.
- * It is recommended to add this column to the end of the Table
- * and to override its `Cell` prop with your row actions menu.
- * @example
- * {
- *   ...ActionColumn({ columnManager: true }),
- *   Cell: () => (
- *     <DropdownMenu menuItems={menuItems}>
- *       <IconButton
- *         styleType='borderless'
- *         onClick={(e) => e.stopPropagation()}
- *       >
- *         <SvgMore />
- *       </IconButton>
- *     </DropdownMenu>
- *   ),
- * },
- */
-export const ActionColumn = ({ columnManager = false, } = {}) => {
-    return {
-        id: ACTION_CELL_ID,
-        disableResizing: true,
-        disableGroupBy: true,
-        minWidth: 48,
-        width: 48,
-        maxWidth: 48,
-        columnClassName: 'iui-slot',
-        cellClassName: 'iui-slot',
-        disableReordering: true,
-        Header: ({ allColumns, dispatch, state }) => {
-            const [isOpen, setIsOpen] = React.useState(false);
-            const buttonRef = React.useRef(null);
-            if (!columnManager) {
-                return null;
-            }
-            const defaultColumnIds = [
-                SELECTION_CELL_ID,
-                EXPANDER_CELL_ID,
-                ACTION_CELL_ID,
-            ];
-            const headerCheckBoxes = () => allColumns
-                //Filters out any default columns made such as selection and expansion
-                .filter(({ id }) => !defaultColumnIds.includes(id))
-                .map((column) => {
-                const { checked } = column.getToggleHiddenProps();
-                const onClick = () => {
-                    column.toggleHidden(checked);
-                    // If no column was resized then leave table resize handling to the flexbox
-                    if (Object.keys(state.columnResizing.columnWidths).length === 0) {
-                        return;
-                    }
-                    // Triggers an update to resize the widths of all visible columns
-                    dispatch({ type: tableResizeStartAction });
-                    // If some columns were resized and some columns visibility was enabled, then horizontal scrollbar appears
-                    // and table is scrolled to the very left which means our visibility dropdown menu is not visible.
-                    // So for better UX we need to scroll to that dropdown menu.
-                    queueMicrotask(() => {
-                        buttonRef.current?.scrollIntoView({ block: 'nearest' });
-                    });
-                };
-                return (React.createElement(MenuItem, { key: column.id, startIcon: React.createElement(Checkbox, { checked: checked, disabled: column.disableToggleVisibility, onClick: (e) => e.stopPropagation(), onChange: onClick, "aria-labelledby": `iui-column-${column.id}` }), onClick: onClick, disabled: column.disableToggleVisibility },
-                    React.createElement("div", { id: `iui-column-${column.id}` }, column.render('Header'))));
-            });
-            const dropdownMenuProps = typeof columnManager !== 'boolean'
-                ? columnManager.dropdownMenuProps
-                : {};
-            return (React.createElement(DropdownMenu, { ...dropdownMenuProps, menuItems: headerCheckBoxes, onVisibleChange: (open) => {
-                    setIsOpen(open);
-                    dropdownMenuProps?.onVisibleChange?.(open);
-                } },
-                React.createElement(IconButton, { styleType: 'borderless', isActive: isOpen, ref: buttonRef },
-                    React.createElement(SvgColumnManager, null))));
+export const ActionColumn = ({ columnManager = false } = {}) => {
+  return {
+    id: ACTION_CELL_ID,
+    disableResizing: true,
+    disableGroupBy: true,
+    minWidth: 48,
+    width: 48,
+    maxWidth: 48,
+    columnClassName: 'iui-slot',
+    cellClassName: 'iui-slot',
+    disableReordering: true,
+    Header: ({ allColumns, dispatch, state }) => {
+      const [isOpen, setIsOpen] = React.useState(false);
+      const buttonRef = React.useRef(null);
+      if (!columnManager) {
+        return null;
+      }
+      const defaultColumnIds = [
+        SELECTION_CELL_ID,
+        EXPANDER_CELL_ID,
+        ACTION_CELL_ID,
+      ];
+      const headerCheckBoxes = () =>
+        allColumns
+          .filter(({ id }) => !defaultColumnIds.includes(id))
+          .map((column) => {
+            const { checked } = column.getToggleHiddenProps();
+            const onClick = () => {
+              column.toggleHidden(checked);
+              if (Object.keys(state.columnResizing.columnWidths).length === 0) {
+                return;
+              }
+              dispatch({
+                type: tableResizeStartAction,
+              });
+              queueMicrotask(() => {
+                buttonRef.current?.scrollIntoView({
+                  block: 'nearest',
+                });
+              });
+            };
+            return React.createElement(
+              MenuItem,
+              {
+                key: column.id,
+                startIcon: React.createElement(Checkbox, {
+                  checked: checked,
+                  disabled: column.disableToggleVisibility,
+                  onClick: (e) => e.stopPropagation(),
+                  onChange: onClick,
+                  'aria-labelledby': `iui-column-${column.id}`,
+                }),
+                onClick: onClick,
+                disabled: column.disableToggleVisibility,
+              },
+              React.createElement(
+                'div',
+                {
+                  id: `iui-column-${column.id}`,
+                },
+                column.render('Header'),
+              ),
+            );
+          });
+      const dropdownMenuProps =
+        typeof columnManager !== 'boolean'
+          ? columnManager.dropdownMenuProps
+          : {};
+      return React.createElement(
+        DropdownMenu,
+        {
+          ...dropdownMenuProps,
+          menuItems: headerCheckBoxes,
+          onVisibleChange: (open) => {
+            setIsOpen(open);
+            dropdownMenuProps?.onVisibleChange?.(open);
+          },
         },
-    };
+        React.createElement(
+          IconButton,
+          {
+            styleType: 'borderless',
+            isActive: isOpen,
+            ref: buttonRef,
+          },
+          React.createElement(SvgColumnManager, null),
+        ),
+      );
+    },
+  };
 };

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

@@ -26,9 +26,9 @@ export declare const EXPANDER_CELL_ID = "iui-table-expander";
  */
 export declare const ExpanderColumn: <T extends Record<string, unknown>>(props?: {
     /** Function that returns expanded content. If row doesn't have it, then should return `false`/`null`. */
-    subComponent?: ((row: Row<T>) => React.ReactNode) | undefined;
+    subComponent?: (row: Row<T>) => React.ReactNode;
     /** Function that returns whether expander is disabled */
-    isDisabled?: ((rowData: T) => boolean) | undefined;
+    isDisabled?: (rowData: T) => boolean;
 }) => {
     id: string;
     disableResizing: boolean;

package/esm/core/Table/columns/expanderColumn.js

@@ -1,59 +1,46 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { SvgChevronRight } from '../../../utils/index.js';
 import { IconButton } from '../../Buttons/IconButton.js';
 import { DefaultCell } from '../cells/index.js';
 export const EXPANDER_CELL_ID = 'iui-table-expander';
-/**
- * Expander column that adds sub-content expander column to the Table.
- * It is recommended to use it as the first column or after selection column.
- * @example
- * const subComponent = useCallback(
- *   (row: Row) => (
- *     <div style={{ padding: 16 }}>
- *       <Text variant='leading'>Extra information</Text>
- *       <pre>
- *         <code>{JSON.stringify({ values: row.values }, null, 2)}</code>
- *       </pre>
- *     </div>
- *   ),
- *   [],
- * );
- * const isExpanderDisabled = useCallback((rowData) => {
- *   return rowData.name === 'Name2';
- * }, []);
- * const columns = useMemo(() => [
- *   ExpanderColumn({ subComponent, isDisabled: isExpanderDisabled }),
- *   // Rest of your columns
- * ], [isExpanderDisabled, subComponent]);
- */
 export const ExpanderColumn = (props = {}) => {
-    const { subComponent, isDisabled } = props;
-    return {
-        id: EXPANDER_CELL_ID,
-        disableResizing: true,
-        disableGroupBy: true,
-        disableReordering: true,
-        minWidth: 48,
-        width: 48,
-        maxWidth: 48,
-        columnClassName: 'iui-slot',
-        cellClassName: 'iui-slot',
-        Cell: (props) => {
-            const { row } = props;
-            if (!subComponent?.(row)) {
-                return null;
-            }
-            else {
-                return (React.createElement(IconButton, { className: 'iui-table-row-expander', styleType: 'borderless', size: 'small', onClick: (e) => {
-                        e.stopPropagation();
-                        row.toggleRowExpanded();
-                    }, disabled: isDisabled?.(props.row.original), "aria-expanded": row.isExpanded }, React.createElement(SvgChevronRight, null)));
-            }
-        },
-        cellRenderer: (props) => (React.createElement(DefaultCell, { ...props, isDisabled: (rowData) => !!isDisabled?.(rowData) })),
-    };
+  const { subComponent, isDisabled } = props;
+  return {
+    id: EXPANDER_CELL_ID,
+    disableResizing: true,
+    disableGroupBy: true,
+    disableReordering: true,
+    minWidth: 48,
+    width: 48,
+    maxWidth: 48,
+    columnClassName: 'iui-slot',
+    cellClassName: 'iui-slot',
+    Cell: (props) => {
+      const { row } = props;
+      if (!subComponent?.(row)) {
+        return null;
+      } else {
+        return React.createElement(
+          IconButton,
+          {
+            className: 'iui-table-row-expander',
+            styleType: 'borderless',
+            size: 'small',
+            onClick: (e) => {
+              e.stopPropagation();
+              row.toggleRowExpanded();
+            },
+            disabled: isDisabled?.(props.row.original),
+            'aria-expanded': row.isExpanded,
+          },
+          React.createElement(SvgChevronRight, null),
+        );
+      }
+    },
+    cellRenderer: (props) =>
+      React.createElement(DefaultCell, {
+        ...props,
+        isDisabled: (rowData) => !!isDisabled?.(rowData),
+      }),
+  };
 };

package/esm/core/Table/columns/index.js

@@ -1,7 +1,3 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 export { ActionColumn } from './actionColumn.js';
 export { SELECTION_CELL_ID, SelectionColumn } from './selectionColumn.js';
 export { EXPANDER_CELL_ID, ExpanderColumn } from './expanderColumn.js';

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

@@ -15,8 +15,8 @@ export declare const SELECTION_CELL_ID = "iui-table-checkbox-selector";
  */
 export declare const SelectionColumn: <T extends Record<string, unknown>>(props?: {
     /** Function that returns whether row checkbox should be disabled. */
-    isDisabled?: ((rowData: T) => boolean) | undefined;
-    density?: "default" | "condensed" | "extra-condensed" | undefined;
+    isDisabled?: (rowData: T) => boolean;
+    density?: "default" | "condensed" | "extra-condensed";
 }) => {
     id: string;
     disableResizing: boolean;

package/esm/core/Table/columns/selectionColumn.js

@@ -1,54 +1,70 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Checkbox } from '../../Checkbox/Checkbox.js';
 import { DefaultCell } from '../cells/index.js';
 export const SELECTION_CELL_ID = 'iui-table-checkbox-selector';
-/**
- * Selection column that adds selection checkbox column to the Table.
- * It is recommended to use it as the first column.
- * @example
- * const isCheckboxDisabled = useCallback((rowData) => {
- *   return rowData.name === 'Name1';
- * }, []);
- * const columns = useMemo(() => [
- *   SelectionColumn({ isDisabled: isCheckboxDisabled }),
- *   // Rest of your columns
- * ], [isCheckboxDisabled]);
- */
 export const SelectionColumn = (props = {}) => {
-    const { isDisabled, density } = props;
-    const densityWidth = density === 'condensed' ? 42 : density === 'extra-condensed' ? 34 : 48;
-    return {
-        id: SELECTION_CELL_ID,
-        disableResizing: true,
-        disableGroupBy: true,
-        disableReordering: true,
-        minWidth: densityWidth,
-        width: densityWidth,
-        maxWidth: densityWidth,
-        columnClassName: 'iui-slot',
-        cellClassName: 'iui-slot',
-        Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, preFilteredFlatRows, state, }) => {
-            const disabled = preFilteredFlatRows.every((row) => isDisabled?.(row.original));
-            const checked = preFilteredFlatRows.every((row) => state.selectedRowIds[row.id] || isDisabled?.(row.original));
-            const indeterminate = !checked && Object.keys(state.selectedRowIds).length > 0;
-            return (React.createElement(Checkbox, { ...getToggleAllRowsSelectedProps(), style: {}, title: '' // Removes default title that comes from react-table
-                , checked: checked && !disabled, indeterminate: indeterminate, disabled: disabled, onChange: () => toggleAllRowsSelected(!rows.some((row) => row.isSelected)) }));
+  const { isDisabled, density } = props;
+  const densityWidth =
+    density === 'condensed' ? 42 : density === 'extra-condensed' ? 34 : 48;
+  return {
+    id: SELECTION_CELL_ID,
+    disableResizing: true,
+    disableGroupBy: true,
+    disableReordering: true,
+    minWidth: densityWidth,
+    width: densityWidth,
+    maxWidth: densityWidth,
+    columnClassName: 'iui-slot',
+    cellClassName: 'iui-slot',
+    Header: ({
+      getToggleAllRowsSelectedProps,
+      toggleAllRowsSelected,
+      rows,
+      preFilteredFlatRows,
+      state,
+    }) => {
+      const disabled = preFilteredFlatRows.every((row) =>
+        isDisabled?.(row.original),
+      );
+      const checked = preFilteredFlatRows.every(
+        (row) => state.selectedRowIds[row.id] || isDisabled?.(row.original),
+      );
+      const indeterminate =
+        !checked && Object.keys(state.selectedRowIds).length > 0;
+      return React.createElement(Checkbox, {
+        ...getToggleAllRowsSelectedProps(),
+        style: {},
+        title: '',
+        checked: checked && !disabled,
+        indeterminate: indeterminate,
+        disabled: disabled,
+        onChange: () =>
+          toggleAllRowsSelected(!rows.some((row) => row.isSelected)),
+      });
+    },
+    Cell: ({ row, selectSubRows = true }) =>
+      React.createElement(Checkbox, {
+        ...row.getToggleRowSelectedProps(),
+        style: {},
+        title: '',
+        disabled: isDisabled?.(row.original),
+        onClick: (e) => e.stopPropagation(),
+        onChange: () => {
+          if (row.subRows.length > 0 && selectSubRows) {
+            row.toggleRowSelected(
+              !row.subRows.every(
+                (subRow) => subRow.isSelected || isDisabled?.(subRow.original),
+              ),
+            );
+          } else {
+            row.toggleRowSelected();
+          }
         },
-        Cell: ({ row, selectSubRows = true }) => (React.createElement(Checkbox, { ...row.getToggleRowSelectedProps(), style: {}, title: '' // Removes default title that comes from react-table
-            , disabled: isDisabled?.(row.original), onClick: (e) => e.stopPropagation(), onChange: () => {
-                if (row.subRows.length > 0 && selectSubRows) {
-                    //This code ignores any sub-rows that are not currently available(i.e disabled or filtered out).
-                    //If all available sub-rows are selected, then it deselects them all, otherwise it selects them all.
-                    row.toggleRowSelected(!row.subRows.every((subRow) => subRow.isSelected || isDisabled?.(subRow.original)));
-                }
-                else {
-                    row.toggleRowSelected();
-                }
-            } })),
-        cellRenderer: (props) => (React.createElement(DefaultCell, { ...props, isDisabled: (rowData) => !!isDisabled?.(rowData) })),
-    };
+      }),
+    cellRenderer: (props) =>
+      React.createElement(DefaultCell, {
+        ...props,
+        isDisabled: (rowData) => !!isDisabled?.(rowData),
+      }),
+  };
 };

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

@@ -1,30 +1,19 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
 import { Box, useGlobals } from '../../../utils/index.js';
-/**
- * Filter wrapper that should be used when creating custom filters.
- * @example
- * <BaseFilter>
- *   <Input
- *     value={text}
- *     onChange={(e) => setText(e.target.value)}
- *   />
- *   <FilterButtonBar
- *     setFilter={() => setFilter(text)}
- *     clearFilter={clearFilter}
- *   />
- * </BaseFilter>
- */
 export const BaseFilter = (props) => {
-    const { children, className, style, id } = props;
-    useGlobals();
-    return (React.createElement(Box, { className: cx('iui-table-column-filter', className), style: style, 
-        // Prevents from triggering sort
-        onClick: (e) => {
-            e.stopPropagation();
-        }, id: id }, children));
+  const { children, className, style, id } = props;
+  useGlobals();
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-table-column-filter', className),
+      style: style,
+      onClick: (e) => {
+        e.stopPropagation();
+      },
+      id: id,
+    },
+    children,
+  );
 };

package/esm/core/Table/filters/DateRangeFilter/DatePickerInput.js

@@ -1,7 +1,3 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { SvgCalendar, isBefore, useId } from '../../../../utils/index.js';
 import { DatePicker } from '../../../DatePicker/DatePicker.js';
@@ -10,46 +6,120 @@ import { Label } from '../../../Label/Label.js';
 import { InputWithDecorations } from '../../../InputWithDecorations/InputWithDecorations.js';
 import { Popover } from '../../../Popover/Popover.js';
 export const DatePickerInput = React.forwardRef((props, forwardedRef) => {
-    const uid = useId();
-    const { onChange, date, parseInput, formatDate, label, required, disabled, isFromOrTo, selectedDate, wrapperProps, labelProps, inputWrapperProps, id = uid, localizedNames, showYearSelection, ...rest } = props;
-    const isDateDisabled = (date) => {
-        if (isFromOrTo === 'to') {
-            return isBefore(date, selectedDate);
-        }
-        else {
-            return isBefore(selectedDate, date);
-        }
-    };
-    const buttonRef = React.useRef(null);
-    const [inputValue, setInputValue] = React.useState('');
-    React.useEffect(() => {
-        if (date && !isNaN(date.valueOf())) {
-            setInputValue(formatDate(date));
-        }
-    }, [date, formatDate]);
-    const [isVisible, setIsVisible] = React.useState(false);
-    const close = React.useCallback(() => setIsVisible(false), []);
-    const onDateSelected = React.useCallback((date) => {
-        onChange(date);
-        close();
-        buttonRef.current?.focus();
-    }, [close, onChange]);
-    const onInputChange = React.useCallback((event) => {
-        const value = event.target.value;
-        setInputValue(value);
-        if (!value) {
-            onChange(undefined);
-        }
-        const parsedDate = parseInput(value);
-        if (parsedDate && !isNaN(parsedDate.valueOf())) {
-            onChange(parsedDate);
-        }
-    }, [onChange, parseInput]);
-    return (React.createElement(InputGrid, { labelPlacement: 'inline', ...wrapperProps },
-        React.createElement(Label, { as: 'label', required: required, disabled: disabled, htmlFor: id, ...labelProps }, label),
-        React.createElement(InputWithDecorations, { ...inputWrapperProps },
-            React.createElement(InputWithDecorations.Input, { id: id, value: inputValue, onChange: onInputChange, required: required, disabled: disabled, ref: forwardedRef, ...rest }),
-            React.createElement(Popover, { content: React.createElement(DatePicker, { date: date, onChange: onDateSelected, setFocus: true, isDateDisabled: isDateDisabled, localizedNames: localizedNames, applyBackground: false, showDatesOutsideMonth: false, showYearSelection: showYearSelection }), placement: 'bottom-end', visible: isVisible, onVisibleChange: setIsVisible, closeOnOutsideClick: true, applyBackground: true },
-                React.createElement(InputWithDecorations.Button, { "aria-label": 'Date picker', ref: buttonRef },
-                    React.createElement(SvgCalendar, null))))));
+  const uid = useId();
+  const {
+    onChange,
+    date,
+    parseInput,
+    formatDate,
+    label,
+    required,
+    disabled,
+    isFromOrTo,
+    selectedDate,
+    wrapperProps,
+    labelProps,
+    inputWrapperProps,
+    id = uid,
+    localizedNames,
+    showYearSelection,
+    ...rest
+  } = props;
+  const isDateDisabled = (date) => {
+    if (isFromOrTo === 'to') {
+      return isBefore(date, selectedDate);
+    } else {
+      return isBefore(selectedDate, date);
+    }
+  };
+  const buttonRef = React.useRef(null);
+  const [inputValue, setInputValue] = React.useState('');
+  React.useEffect(() => {
+    if (date && !isNaN(date.valueOf())) {
+      setInputValue(formatDate(date));
+    }
+  }, [date, formatDate]);
+  const [isVisible, setIsVisible] = React.useState(false);
+  const close = React.useCallback(() => setIsVisible(false), []);
+  const onDateSelected = React.useCallback(
+    (date) => {
+      onChange(date);
+      close();
+      buttonRef.current?.focus();
+    },
+    [close, onChange],
+  );
+  const onInputChange = React.useCallback(
+    (event) => {
+      const value = event.target.value;
+      setInputValue(value);
+      if (!value) {
+        onChange(undefined);
+      }
+      const parsedDate = parseInput(value);
+      if (parsedDate && !isNaN(parsedDate.valueOf())) {
+        onChange(parsedDate);
+      }
+    },
+    [onChange, parseInput],
+  );
+  return React.createElement(
+    InputGrid,
+    {
+      labelPlacement: 'inline',
+      ...wrapperProps,
+    },
+    React.createElement(
+      Label,
+      {
+        as: 'label',
+        required: required,
+        disabled: disabled,
+        htmlFor: id,
+        ...labelProps,
+      },
+      label,
+    ),
+    React.createElement(
+      InputWithDecorations,
+      inputWrapperProps,
+      React.createElement(InputWithDecorations.Input, {
+        id: id,
+        value: inputValue,
+        onChange: onInputChange,
+        required: required,
+        disabled: disabled,
+        ref: forwardedRef,
+        ...rest,
+      }),
+      React.createElement(
+        Popover,
+        {
+          content: React.createElement(DatePicker, {
+            date: date,
+            onChange: onDateSelected,
+            setFocus: true,
+            isDateDisabled: isDateDisabled,
+            localizedNames: localizedNames,
+            applyBackground: false,
+            showDatesOutsideMonth: false,
+            showYearSelection: showYearSelection,
+          }),
+          placement: 'bottom-end',
+          visible: isVisible,
+          onVisibleChange: setIsVisible,
+          closeOnOutsideClick: true,
+          applyBackground: true,
+        },
+        React.createElement(
+          InputWithDecorations.Button,
+          {
+            'aria-label': 'Date picker',
+            ref: buttonRef,
+          },
+          React.createElement(SvgCalendar, null),
+        ),
+      ),
+    ),
+  );
 });