@itwin/itwinui-react 3.11.3 → 3.12.0

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

@@ -1,81 +1,89 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectionColumn = exports.SELECTION_CELL_ID = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const Checkbox_js_1 = require("../../Checkbox/Checkbox.js");
-const index_js_1 = require("../cells/index.js");
-exports.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]);
- */
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
+    });
+}
+_export(exports, {
+  SELECTION_CELL_ID: function () {
+    return SELECTION_CELL_ID;
+  },
+  SelectionColumn: function () {
+    return SelectionColumn;
+  },
+});
+const _jsxruntime = require('react/jsx-runtime');
+const _Checkbox = require('../../Checkbox/Checkbox.js');
+const _index = require('../cells/index.js');
+const SELECTION_CELL_ID = 'iui-table-checkbox-selector';
 const SelectionColumn = (props = {}) => {
-    const { isDisabled, density } = props;
-    const densityWidth = density === 'condensed' ? 42 : density === 'extra-condensed' ? 34 : 48;
-    return {
-        id: exports.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_js_1.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 (0, _jsxruntime.jsx)(_Checkbox.Checkbox, {
+        ...getToggleAllRowsSelectedProps(),
+        style: {},
+        title: '',
+        checked: checked && !disabled,
+        indeterminate: indeterminate,
+        disabled: disabled,
+        onChange: () =>
+          toggleAllRowsSelected(!rows.some((row) => row.isSelected)),
+      });
+    },
+    Cell: ({ row, selectSubRows = true }) =>
+      (0, _jsxruntime.jsx)(_Checkbox.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_js_1.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(index_js_1.DefaultCell, { ...props, isDisabled: (rowData) => !!isDisabled?.(rowData) })),
-    };
+      }),
+    cellRenderer: (props) =>
+      (0, _jsxruntime.jsx)(_index.DefaultCell, {
+        ...props,
+        isDisabled: (rowData) => !!isDisabled?.(rowData),
+      }),
+  };
 };
-exports.SelectionColumn = SelectionColumn;

package/cjs/core/Table/filters/BaseFilter.d.ts

@@ -20,4 +20,4 @@ export type BaseFilterProps = {
  *   />
  * </BaseFilter>
  */
-export declare const BaseFilter: (props: BaseFilterProps) => React.JSX.Element;
+export declare const BaseFilter: (props: BaseFilterProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,60 +1,29 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BaseFilter = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../../../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>
- */
+Object.defineProperty(exports, 'BaseFilter', {
+  enumerable: true,
+  get: function () {
+    return BaseFilter;
+  },
+});
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _jsxruntime = require('react/jsx-runtime');
+const _react = _interop_require_wildcard._(require('react'));
+const _classnames = _interop_require_default._(require('classnames'));
+const _index = require('../../../utils/index.js');
 const BaseFilter = (props) => {
-    const { children, className, style, id } = props;
-    (0, index_js_1.useGlobals)();
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-table-column-filter', className), style: style, 
-        // Prevents from triggering sort
-        onClick: (e) => {
-            e.stopPropagation();
-        }, id: id }, children));
+  const { children, className, style, id } = props;
+  (0, _index.useGlobals)();
+  return (0, _jsxruntime.jsx)(_index.Box, {
+    className: (0, _classnames.default)('iui-table-column-filter', className),
+    style: style,
+    onClick: (e) => {
+      e.stopPropagation();
+    },
+    id: id,
+    children: children,
+  });
 };
-exports.BaseFilter = BaseFilter;

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

@@ -1,81 +1,134 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+Object.defineProperty(exports, 'DatePickerInput', {
+  enumerable: true,
+  get: function () {
+    return DatePickerInput;
+  },
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DatePickerInput = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const index_js_1 = require("../../../../utils/index.js");
-const DatePicker_js_1 = require("../../../DatePicker/DatePicker.js");
-const InputGrid_js_1 = require("../../../InputGrid/InputGrid.js");
-const Label_js_1 = require("../../../Label/Label.js");
-const InputWithDecorations_js_1 = require("../../../InputWithDecorations/InputWithDecorations.js");
-const Popover_js_1 = require("../../../Popover/Popover.js");
-exports.DatePickerInput = React.forwardRef((props, forwardedRef) => {
-    const uid = (0, index_js_1.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 (0, index_js_1.isBefore)(date, selectedDate);
-        }
-        else {
-            return (0, index_js_1.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_js_1.InputGrid, { labelPlacement: 'inline', ...wrapperProps },
-        React.createElement(Label_js_1.Label, { as: 'label', required: required, disabled: disabled, htmlFor: id, ...labelProps }, label),
-        React.createElement(InputWithDecorations_js_1.InputWithDecorations, { ...inputWrapperProps },
-            React.createElement(InputWithDecorations_js_1.InputWithDecorations.Input, { id: id, value: inputValue, onChange: onInputChange, required: required, disabled: disabled, ref: forwardedRef, ...rest }),
-            React.createElement(Popover_js_1.Popover, { content: React.createElement(DatePicker_js_1.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_js_1.InputWithDecorations.Button, { "aria-label": 'Date picker', ref: buttonRef },
-                    React.createElement(index_js_1.SvgCalendar, null))))));
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _jsxruntime = require('react/jsx-runtime');
+const _react = _interop_require_wildcard._(require('react'));
+const _index = require('../../../../utils/index.js');
+const _DatePicker = require('../../../DatePicker/DatePicker.js');
+const _InputGrid = require('../../../InputGrid/InputGrid.js');
+const _Label = require('../../../Label/Label.js');
+const _InputWithDecorations = require('../../../InputWithDecorations/InputWithDecorations.js');
+const _Popover = require('../../../Popover/Popover.js');
+const DatePickerInput = _react.forwardRef((props, forwardedRef) => {
+  const uid = (0, _index.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 (0, _index.isBefore)(date, selectedDate);
+    } else {
+      return (0, _index.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 (0, _jsxruntime.jsxs)(_InputGrid.InputGrid, {
+    labelPlacement: 'inline',
+    ...wrapperProps,
+    children: [
+      (0, _jsxruntime.jsx)(_Label.Label, {
+        as: 'label',
+        required: required,
+        disabled: disabled,
+        htmlFor: id,
+        ...labelProps,
+        children: label,
+      }),
+      (0, _jsxruntime.jsxs)(_InputWithDecorations.InputWithDecorations, {
+        ...inputWrapperProps,
+        children: [
+          (0, _jsxruntime.jsx)(
+            _InputWithDecorations.InputWithDecorations.Input,
+            {
+              id: id,
+              value: inputValue,
+              onChange: onInputChange,
+              required: required,
+              disabled: disabled,
+              ref: forwardedRef,
+              ...rest,
+            },
+          ),
+          (0, _jsxruntime.jsx)(_Popover.Popover, {
+            content: (0, _jsxruntime.jsx)(_DatePicker.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,
+            children: (0, _jsxruntime.jsx)(
+              _InputWithDecorations.InputWithDecorations.Button,
+              {
+                'aria-label': 'Date picker',
+                ref: buttonRef,
+                children: (0, _jsxruntime.jsx)(_index.SvgCalendar, {}),
+              },
+            ),
+          }),
+        ],
+      }),
+    ],
+  });
 });

package/cjs/core/Table/filters/DateRangeFilter/DateRangeFilter.d.ts

@@ -14,4 +14,4 @@ export type DateRangeFilterProps<T extends Record<string, unknown>> = TableFilte
     placeholder?: string;
     translatedLabels?: DateRangeTranslation & FilterButtonBarTranslation;
 } & Pick<React.ComponentProps<typeof DatePickerInput>, 'showYearSelection'>;
-export declare const DateRangeFilter: <T extends Record<string, unknown>>(props: DateRangeFilterProps<T>) => React.JSX.Element;
+export declare const DateRangeFilter: <T extends Record<string, unknown>>(props: DateRangeFilterProps<T>) => import("react/jsx-runtime").JSX.Element;