@itwin/itwinui-react 3.16.1 → 5.0.0-alpha.1

package/DEV-esm/core/Table/filters/DateRangeFilter/DateRangeFilter.js

@@ -1,111 +0,0 @@
-import * as React from 'react';
-import { useGlobals } from '../../../../utils/index.js';
-import { FilterButtonBar } from '../FilterButtonBar.js';
-import { BaseFilter } from '../BaseFilter.js';
-import { DatePickerInput } from './DatePickerInput.js';
-let defaultStrings = {
-  from: 'From',
-  to: 'To',
-};
-let defaultFormatDate = (date) => {
-  let formatter = new Intl.DateTimeFormat('en-us', {
-    month: 'short',
-    day: 'numeric',
-    year: 'numeric',
-  });
-  return formatter.format(date);
-};
-let defaultParseInput = (text) => {
-  if (/^[a-z]{3}\s\d{1,2},\s\d{4}$/gi.test(text)) return new Date(text);
-  return new Date('');
-};
-export const DateRangeFilter = (props) => {
-  let {
-    column,
-    translatedLabels,
-    setFilter,
-    clearFilter,
-    formatDate = defaultFormatDate,
-    parseInput = defaultParseInput,
-    placeholder = 'MMM dd, yyyy',
-    showYearSelection,
-  } = props;
-  useGlobals();
-  let translatedStrings = {
-    ...defaultStrings,
-    ...translatedLabels,
-  };
-  let [from, setFrom] = React.useState(
-    column.filterValue?.[0] ? new Date(column.filterValue?.[0]) : void 0,
-  );
-  let inputRef = React.useRef(null);
-  React.useEffect(() => {
-    if (inputRef.current) inputRef.current.focus();
-  }, []);
-  let onFromChange = React.useCallback((date) => {
-    setFrom((prevDate) => {
-      if (prevDate || !date) return date;
-      return new Date(
-        date.getFullYear(),
-        date.getMonth(),
-        date.getDate(),
-        0,
-        0,
-        0,
-        0,
-      );
-    });
-  }, []);
-  let [to, setTo] = React.useState(
-    column.filterValue?.[1] ? new Date(column.filterValue?.[1]) : void 0,
-  );
-  let onToChange = React.useCallback((date) => {
-    setTo((prevDate) => {
-      if (prevDate || !date) return date;
-      return new Date(
-        date.getFullYear(),
-        date.getMonth(),
-        date.getDate(),
-        23,
-        59,
-        59,
-        999,
-      );
-    });
-  }, []);
-  return React.createElement(
-    BaseFilter,
-    {
-      onSubmit: () => setFilter([from, to]),
-    },
-    React.createElement(DatePickerInput, {
-      ref: inputRef,
-      label: translatedStrings.from,
-      date: from,
-      onChange: onFromChange,
-      formatDate: formatDate,
-      parseInput: parseInput,
-      placeholder: placeholder,
-      selectedDate: to,
-      isFromOrTo: 'from',
-      localizedNames: translatedStrings.datePicker,
-      showYearSelection: showYearSelection,
-    }),
-    React.createElement(DatePickerInput, {
-      label: translatedStrings.to,
-      date: to,
-      onChange: onToChange,
-      formatDate: formatDate,
-      parseInput: parseInput,
-      placeholder: placeholder,
-      selectedDate: from,
-      isFromOrTo: 'to',
-      localizedNames: translatedStrings.datePicker,
-      showYearSelection: showYearSelection,
-    }),
-    React.createElement(FilterButtonBar, {
-      clearFilter: clearFilter,
-      translatedLabels: translatedLabels,
-    }),
-  );
-};

package/DEV-esm/core/Table/filters/FilterButtonBar.js

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { Box, useGlobals } from '../../../utils/index.js';
-import { Button } from '../../Buttons/Button.js';
-let defaultStrings = {
-  filter: 'Filter',
-  clear: 'Clear',
-};
-export const FilterButtonBar = (props) => {
-  let {
-    children,
-    setFilter,
-    clearFilter,
-    translatedLabels,
-    className,
-    style,
-    id,
-  } = props;
-  let translatedStrings = {
-    ...defaultStrings,
-    ...translatedLabels,
-  };
-  useGlobals();
-  return React.createElement(
-    Box,
-    {
-      className: cx('iui-button-bar', className),
-      style: style,
-      id: id,
-    },
-    children,
-    React.createElement(
-      Button,
-      {
-        type: 'submit',
-        styleType: 'high-visibility',
-        onClick: setFilter,
-      },
-      translatedStrings.filter,
-    ),
-    React.createElement(
-      Button,
-      {
-        onClick: clearFilter,
-      },
-      translatedStrings.clear,
-    ),
-  );
-};

package/DEV-esm/core/Table/filters/FilterToggle.js

@@ -1,66 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import {
-  useGlobals,
-  SvgFilterHollow,
-  SvgFilter,
-} from '../../../utils/index.js';
-import { IconButton } from '../../Buttons/IconButton.js';
-import { Popover } from '../../Popover/Popover.js';
-export const FilterToggle = (props) => {
-  let { column, className, ...rest } = props;
-  useGlobals();
-  let [isVisible, setIsVisible] = React.useState(false);
-  let close = React.useCallback(() => setIsVisible(false), []);
-  let setFilter = React.useCallback(
-    (filterValue) => {
-      column.setFilter(filterValue);
-      close();
-    },
-    [close, column],
-  );
-  let clearFilter = React.useCallback(() => {
-    column.setFilter(void 0);
-    close();
-  }, [close, column]);
-  let isColumnFiltered =
-    null != column.filterValue && '' !== column.filterValue;
-  return React.createElement(
-    React.Fragment,
-    null,
-    column.canFilter &&
-      column.Filter &&
-      React.createElement(
-        Popover,
-        {
-          content: column.render('Filter', {
-            close,
-            setFilter,
-            clearFilter,
-          }),
-          placement: 'bottom-start',
-          visible: isVisible,
-          onVisibleChange: setIsVisible,
-          closeOnOutsideClick: true,
-          applyBackground: true,
-        },
-        React.createElement(
-          IconButton,
-          {
-            styleType: 'borderless',
-            isActive: isVisible || isColumnFiltered,
-            className: cx('iui-table-filter-button', className),
-            'aria-label': 'Filter',
-            onClick: (e) => {
-              e.stopPropagation();
-            },
-            'data-iui-shift': 'left',
-            ...rest,
-          },
-          isColumnFiltered
-            ? React.createElement(SvgFilter, null)
-            : React.createElement(SvgFilterHollow, null),
-        ),
-      ),
-  );
-};

package/DEV-esm/core/Table/filters/NumberRangeFilter/NumberRangeFilter.js

@@ -1,50 +0,0 @@
-import * as React from 'react';
-import { useGlobals } from '../../../../utils/index.js';
-import { FilterButtonBar } from '../FilterButtonBar.js';
-import { BaseFilter } from '../BaseFilter.js';
-import { LabeledInput } from '../../../LabeledInput/LabeledInput.js';
-let defaultStrings = {
-  from: 'From',
-  to: 'To',
-};
-export const NumberRangeFilter = (props) => {
-  let { column, translatedLabels, setFilter, clearFilter } = props;
-  useGlobals();
-  let translatedStrings = {
-    ...defaultStrings,
-    ...translatedLabels,
-  };
-  let inputRef = React.useRef(null);
-  React.useEffect(() => {
-    if (inputRef.current) inputRef.current.focus();
-  }, []);
-  let [from, setFrom] = React.useState(column.filterValue?.[0] ?? '');
-  let [to, setTo] = React.useState(column.filterValue?.[1] ?? '');
-  let parseInputValue = (value) =>
-    !value || isNaN(Number(value)) ? void 0 : Number(value);
-  return React.createElement(
-    BaseFilter,
-    {
-      onSubmit: () => setFilter([parseInputValue(from), parseInputValue(to)]),
-    },
-    React.createElement(LabeledInput, {
-      ref: inputRef,
-      label: translatedStrings.from,
-      value: from,
-      onChange: (e) => setFrom(e.target.value),
-      type: 'number',
-      displayStyle: 'inline',
-    }),
-    React.createElement(LabeledInput, {
-      label: translatedStrings.to,
-      value: to,
-      onChange: (e) => setTo(e.target.value),
-      type: 'number',
-      displayStyle: 'inline',
-    }),
-    React.createElement(FilterButtonBar, {
-      clearFilter: clearFilter,
-      translatedLabels: translatedLabels,
-    }),
-  );
-};

package/DEV-esm/core/Table/filters/TextFilter/TextFilter.js

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { useGlobals } from '../../../../utils/index.js';
-import { Input } from '../../../Input/Input.js';
-import { FilterButtonBar } from '../FilterButtonBar.js';
-import { BaseFilter } from '../BaseFilter.js';
-export const TextFilter = (props) => {
-  let { column, translatedLabels, setFilter, clearFilter } = props;
-  useGlobals();
-  let [text, setText] = React.useState(column.filterValue ?? '');
-  let inputRef = React.useRef(null);
-  React.useEffect(() => {
-    if (inputRef.current) inputRef.current.focus();
-  }, []);
-  return React.createElement(
-    BaseFilter,
-    {
-      onSubmit: () => setFilter(text),
-    },
-    React.createElement(Input, {
-      ref: inputRef,
-      value: text,
-      onChange: (e) => setText(e.target.value),
-      required: true,
-    }),
-    React.createElement(FilterButtonBar, {
-      clearFilter: clearFilter,
-      translatedLabels: translatedLabels,
-    }),
-  );
-};

package/DEV-esm/core/Table/filters/customFilterFunctions.js

@@ -1,21 +0,0 @@
-let isValidDate = (date) => !!date && !isNaN(date.valueOf());
-let betweenDate = (rows, ids, filterValue) => {
-  let [min, max] = filterValue || [];
-  let MAX_DATE_VALUE = 8640000000000000;
-  let minValue = isValidDate(min) ? min : new Date(-MAX_DATE_VALUE);
-  let maxValue = isValidDate(max) ? max : new Date(MAX_DATE_VALUE);
-  return rows.filter((row) =>
-    ids.some((id) => {
-      let rowValue = row.values[id];
-      return (
-        rowValue.valueOf() >= minValue.valueOf() &&
-        rowValue.valueOf() <= maxValue.valueOf()
-      );
-    }),
-  );
-};
-betweenDate.autoRemove = (val) =>
-  !val || (!isValidDate(val[0]) && !isValidDate(val[1]));
-export const customFilterFunctions = {
-  betweenDate,
-};

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

@@ -1,115 +0,0 @@
-let text = (rows, ids, filterValue) => {
-  rows = rows.filter((row) =>
-    ids.some((id) => {
-      let rowValue = row.values[id];
-      return String(rowValue)
-        .toLowerCase()
-        .includes(String(filterValue).toLowerCase());
-    }),
-  );
-  return rows;
-};
-text.autoRemove = (val) => !val;
-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()
-      );
-    }),
-  );
-exactText.autoRemove = (val) => !val;
-let exactTextCase = (rows, ids, filterValue) =>
-  rows.filter((row) =>
-    ids.some((id) => {
-      let rowValue = row.values[id];
-      return void 0 === rowValue || String(rowValue) === String(filterValue);
-    }),
-  );
-exactTextCase.autoRemove = (val) => !val;
-let includes = (rows, ids, filterValue) =>
-  rows.filter((row) =>
-    ids.some((id) => {
-      let rowValue = row.values[id];
-      return rowValue.includes(filterValue);
-    }),
-  );
-includes.autoRemove = (val) => !val || !val.length;
-let includesAll = (rows, ids, filterValue) =>
-  rows.filter((row) =>
-    ids.some((id) => {
-      let rowValue = row.values[id];
-      return (
-        rowValue &&
-        rowValue.length &&
-        filterValue.every((val) => rowValue.includes(val))
-      );
-    }),
-  );
-includesAll.autoRemove = (val) => !val || !val.length;
-let includesSome = (rows, ids, filterValue) =>
-  rows.filter((row) =>
-    ids.some((id) => {
-      let rowValue = row.values[id];
-      return (
-        rowValue &&
-        rowValue.length &&
-        filterValue.some((val) => rowValue.includes(val))
-      );
-    }),
-  );
-includesSome.autoRemove = (val) => !val || !val.length;
-let includesValue = (rows, ids, filterValue) =>
-  rows.filter((row) =>
-    ids.some((id) => {
-      let rowValue = row.values[id];
-      return filterValue.includes(rowValue);
-    }),
-  );
-includesValue.autoRemove = (val) => !val || !val.length;
-let exact = (rows, ids, filterValue) =>
-  rows.filter((row) =>
-    ids.some((id) => {
-      let rowValue = row.values[id];
-      return rowValue === filterValue;
-    }),
-  );
-exact.autoRemove = (val) => void 0 === val;
-let equals = (rows, ids, filterValue) =>
-  rows.filter((row) =>
-    ids.some((id) => {
-      let rowValue = row.values[id];
-      return rowValue == filterValue;
-    }),
-  );
-equals.autoRemove = (val) => null == val;
-let between = (rows, ids, filterValue) => {
-  let [min, max] = filterValue || [];
-  min = 'number' == typeof min ? min : -1 / 0;
-  max = 'number' == typeof max ? max : 1 / 0;
-  if (min > max) {
-    let temp = min;
-    min = max;
-    max = temp;
-  }
-  return rows.filter((row) =>
-    ids.some((id) => {
-      let rowValue = row.values[id];
-      return rowValue >= min && rowValue <= max;
-    }),
-  );
-};
-between.autoRemove = (val) =>
-  !val || ('number' != typeof val[0] && 'number' != typeof val[1]);
-export const defaultFilterFunctions = {
-  text,
-  exactText,
-  exactTextCase,
-  includes,
-  includesAll,
-  includesSome,
-  includesValue,
-  between,
-};

package/DEV-esm/core/Table/filters/index.js

@@ -1,4 +0,0 @@
-export { BaseFilter } from './BaseFilter.js';
-export { tableFilters } from './tableFilters.js';
-export { FilterButtonBar } from './FilterButtonBar.js';
-export { FilterToggle } from './FilterToggle.js';

package/DEV-esm/core/Table/filters/tableFilters.js

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import { DateRangeFilter } from './DateRangeFilter/DateRangeFilter.js';
-import { NumberRangeFilter } from './NumberRangeFilter/NumberRangeFilter.js';
-import { TextFilter } from './TextFilter/TextFilter.js';
-export const tableFilters = {
-  TextFilter: (translatedLabels) => (props) =>
-    React.createElement(TextFilter, {
-      ...props,
-      translatedLabels: translatedLabels,
-    }),
-  DateRangeFilter: (options) => (props) =>
-    React.createElement(DateRangeFilter, {
-      ...props,
-      ...options,
-    }),
-  NumberRangeFilter: (translatedLabels) => (props) =>
-    React.createElement(NumberRangeFilter, {
-      ...props,
-      translatedLabels: translatedLabels,
-    }),
-};

package/DEV-esm/core/Table/filters/types.js

@@ -1 +0,0 @@
-export {};

package/DEV-esm/core/Table/hooks/index.js

@@ -1,8 +0,0 @@
-export { useExpanderCell } from './useExpanderCell.js';
-export { useSelectionCell } from './useSelectionCell.js';
-export { useSubRowFiltering } from './useSubRowFiltering.js';
-export { useSubRowSelection } from './useSubRowSelection.js';
-export { useResizeColumns } from './useResizeColumns.js';
-export { useColumnDragAndDrop } from './useColumnDragAndDrop.js';
-export { useScrollToRow } from './useScrollToRow.js';
-export { useStickyColumns } from './useStickyColumns.js';

package/DEV-esm/core/Table/hooks/useColumnDragAndDrop.js

@@ -1,114 +0,0 @@
-import { actions, makePropGetter, useGetLatest } from 'react-table';
-import { styles } from '../../../styles.js';
-let leftClassName = styles['iui-table-reorder-column-left'];
-let rightClassName = styles['iui-table-reorder-column-right'];
-let REORDER_ACTIONS = {
-  columnDragStart: 'columnDragStart',
-  columnDragEnd: 'columnDragEnd',
-};
-export const useColumnDragAndDrop = (isEnabled) => (hooks) => {
-  hooks.getDragAndDropProps = [defaultGetDragAndDropProps(isEnabled)];
-  hooks.stateReducers.push(reducer);
-  hooks.useInstance.push(useInstance);
-};
-let defaultGetDragAndDropProps =
-  (isEnabled) =>
-  (props, { instance, header }) => {
-    if (!isEnabled || header.disableReordering) return props;
-    let onDragStart = () => {
-      instance.dispatch({
-        type: REORDER_ACTIONS.columnDragStart,
-        columnIndex: instance.flatHeaders.indexOf(header),
-      });
-    };
-    let setOnDragColumnStyle = (event, position) => {
-      let columnElement = event.currentTarget;
-      if ('left' === position) {
-        columnElement.classList.remove(rightClassName);
-        columnElement.classList.add(leftClassName);
-      } else if ('right' === position) {
-        columnElement.classList.remove(leftClassName);
-        columnElement.classList.add(rightClassName);
-      } else {
-        columnElement.classList.remove(leftClassName);
-        columnElement.classList.remove(rightClassName);
-      }
-    };
-    let reorderColumns = (tableColumns, srcIndex, dstIndex) => {
-      let newTableColumns = [...tableColumns];
-      let [removed] = newTableColumns.splice(srcIndex, 1);
-      newTableColumns.splice(dstIndex, 0, removed);
-      return newTableColumns;
-    };
-    let onDragOver = (event) => {
-      event.preventDefault();
-      let headerIndex = instance.flatHeaders.indexOf(header);
-      if (instance.state.columnReorderStartIndex !== headerIndex)
-        setOnDragColumnStyle(
-          event,
-          instance.state.columnReorderStartIndex > headerIndex
-            ? 'left'
-            : 'right',
-        );
-    };
-    let onDragLeave = (event) => {
-      setOnDragColumnStyle(event);
-    };
-    let onDrop = (event) => {
-      event.preventDefault();
-      setOnDragColumnStyle(event);
-      let columnIds = instance.allColumns.map((x) => x.id);
-      let srcIndex = instance.state.columnReorderStartIndex;
-      let dstIndex = columnIds.findIndex((x) => x === header.id);
-      if (srcIndex === dstIndex || -1 === srcIndex || -1 === dstIndex) return;
-      instance.setColumnOrder(reorderColumns(columnIds, srcIndex, dstIndex));
-      instance.dispatch({
-        type: REORDER_ACTIONS.columnDragEnd,
-        columnIndex: -1,
-      });
-    };
-    return [
-      props,
-      {
-        draggable: true,
-        onDragStart,
-        onDragOver,
-        onDragLeave,
-        onDrop,
-      },
-    ];
-  };
-let reducer = (newState, action) => {
-  switch (action.type) {
-    case actions.init:
-      return {
-        ...newState,
-        columnReorderStartIndex: -1,
-      };
-    case REORDER_ACTIONS.columnDragStart:
-      return {
-        ...newState,
-        columnReorderStartIndex: action.columnIndex,
-      };
-    case REORDER_ACTIONS.columnDragEnd:
-      return {
-        ...newState,
-        columnReorderStartIndex: -1,
-      };
-    default:
-      return newState;
-  }
-};
-let useInstance = (instance) => {
-  let { flatHeaders, getHooks } = instance;
-  let getInstance = useGetLatest(instance);
-  flatHeaders.forEach((header) => {
-    header.getDragAndDropProps = makePropGetter(
-      getHooks().getDragAndDropProps,
-      {
-        instance: getInstance(),
-        header,
-      },
-    );
-  });
-};

package/DEV-esm/core/Table/hooks/useExpanderCell.js

@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { ExpanderColumn, EXPANDER_CELL_ID } from '../columns/index.js';
-export const useExpanderCell =
-  (subComponent, expanderCell, isRowDisabled) => (hooks) => {
-    if (!subComponent) return;
-    hooks.allColumns.push((columns) => {
-      let hasExpanderColumn = columns.find((c) => c.id === EXPANDER_CELL_ID);
-      if (hasExpanderColumn) return columns;
-      let expanderColumn = ExpanderColumn({
-        subComponent,
-        isDisabled: isRowDisabled,
-      });
-      return [
-        {
-          ...expanderColumn,
-          Cell: expanderCell
-            ? (cellProps) =>
-                React.createElement(
-                  React.Fragment,
-                  null,
-                  expanderCell(cellProps),
-                )
-            : expanderColumn.Cell,
-        },
-        ...columns,
-      ];
-    });
-  };