@onehat/ui 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.2.0",
+	"version": "0.2.2",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",

package/src/Components/Accordion/Accordion.js

@@ -7,8 +7,8 @@ import {
 	ScrollView,
 	Text,
 } from 'native-base';
-import inArray from '../../Functions/inArray';
-import emptyFn from '../../Functions/emptyFn';
+import inArray from '../../Functions/inArray.js';
+import emptyFn from '../../Functions/emptyFn.js';
 import _ from 'lodash';
 
 // The Accordion has two modes.

package/src/Components/Buttons/BackButton.js

@@ -3,12 +3,10 @@ import {
 	Pressable,
 	Text,
 } from 'native-base';
-import AngleLeft from '../Icons/AngleLeft';
-import { goBack } from '../../RootNavigation'; 
-import testProps from '../../Functions/testProps';
+import AngleLeft from '../Icons/AngleLeft.js';
 
 export default function BackButton(props) {
-	return <Pressable onPress={props.goBack || goBack} flexDirection="row" justifyContent="flex-start" alignItems="center" pr={5} {...testProps('backBtn')}>
+	return <Pressable flexDirection="row" justifyContent="flex-start" alignItems="center" pr={5} {...props}>
 				<Icon as={AngleLeft} color="#2563eb" size="sm" />
 				<Text fontSize={20} color="#2563eb" left={-1}>Back</Text>
 			</Pressable>;

package/src/Components/Container/Container.js

@@ -6,8 +6,8 @@ import {
 import {
 	HORIZONTAL,
 	VERTICAL,
-} from '../../Constants/Directions';
-import Splitter from './Splitter';
+} from '../../Constants/Directions.js';
+import Splitter from './Splitter.js';
 
 export default function Container(props) {
 	const {

package/src/Components/Container/Splitter.js

@@ -6,9 +6,9 @@ import {
 import {
 	HORIZONTAL,
 	VERTICAL,
-} from '../../Constants/Directions';
-import styles from '../../Styles/StyleSheets';
-import withDraggable from '../Hoc/withDraggable';
+} from '../../Constants/Directions.js';
+import styles from '../../Styles/StyleSheets.js';
+import withDraggable from '../Hoc/withDraggable.js';
 
 // Note on modes:
 // HORIZONTAL means the Splitter moves along the X axis.

package/src/Components/Filter/DateRange.js

@@ -3,9 +3,9 @@ import {
 	Row,
 	Text,
 } from 'native-base';
-import Date from '../Form/Field/Date';
-import withTooltip from '../Hoc/withTooltip';
-import withValue from '../Hoc/withValue';
+import Date from '../Form/Field/Date.js';
+import withTooltip from '../Hoc/withTooltip.js';
+import withValue from '../Hoc/withValue.js';
 import _ from 'lodash';
 
 const

package/src/Components/Filter/NumberRange.js

@@ -3,9 +3,9 @@ import {
 	Row,
 	Text,
 } from 'native-base';
-import Number from '../Form/Field/Number';
-import withTooltip from '../Hoc/withTooltip';
-import withValue from '../Hoc/withValue';
+import Number from '../Form/Field/Number.js';
+import withTooltip from '../Hoc/withTooltip.js';
+import withValue from '../Hoc/withValue.js';
 import _ from 'lodash';
 
 	const

package/src/Components/Form/Field/CKEditor/CKEditor.js

@@ -4,11 +4,11 @@ import {
 } from 'native-base';
 import {
 	AUTO_SUBMIT_DELAY,
-} from '../../../../Constants/Input';
-import Editor from 'ckeditor5-custom-build/build/ckeditor'; // built using https://ckeditor.com/ckeditor-5/online-builder/
+} from '../../../../Constants/Input.js';
+import Editor from 'ckeditor5-custom-build/build/ckeditor.js'; // built using https://ckeditor.com/ckeditor-5/online-builder/
 import { CKEditor } from '@ckeditor/ckeditor5-react'; // https://ckeditor.com/docs/ckeditor5/latest/installation/frameworks/react.html
-import withValue from '../../../Hoc/withValue';
-import withTooltip from '../../../Hoc/withTooltip';
+import withValue from '../../../Hoc/withValue.js';
+import withTooltip from '../../../Hoc/withTooltip.js';
 import './styles.css';
 
 const

package/src/Components/Form/Field/CheckboxGroup/ArrayCheckboxGroup.js

@@ -1,4 +1,4 @@
-import CheckboxGroup from './CheckboxGroup';
+import CheckboxGroup from './CheckboxGroup.js';
 
 // This is a building block for other CheckboxGroups,
 // which store their data as a JSON array, not a data repository.

package/src/Components/Form/Field/CheckboxGroup/CheckboxGroup.js

@@ -4,9 +4,9 @@ import {
 	Checkbox,
 	Row,
 } from 'native-base';
-import withData from '../../../Hoc/withData';
-import withValue from '../../../Hoc/withValue';
-import withTooltip from '../../../Hoc/withTooltip';
+import withData from '../../../Hoc/withData.js';
+import withValue from '../../../Hoc/withValue.js';
+import withTooltip from '../../../Hoc/withTooltip.js';
 import _ from 'lodash';
 
 const

package/src/Components/Form/Field/Color.js

@@ -9,12 +9,12 @@ import {
 import { SketchPicker } from 'react-color';
 import {
 	UI_MODE_WEB,
-} from '../../../Constants/UiModes';
-import UiConfig from '../../../UiConfig';
-import Input from '../Field/Input';
-import styles from '../../../Constants/Styles';
-import withValue from '../../Hoc/withValue';
-import emptyFn from '../../../Functions/emptyFn';
+} from '../../../Constants/UiModes.js';
+import UiConfig from '../../../UiConfig.js';
+import Input from '../Field/Input.js';
+import styles from '../../../Constants/Styles.js';
+import withValue from '../../Hoc/withValue.js';
+import emptyFn from '../../../Functions/emptyFn.js';
 import _ from 'lodash';
 
 export function ColorElement(props) {

package/src/Components/Form/Field/Combo/ArrayCombo.js

@@ -1,4 +1,4 @@
-import Combo from './Combo';
+import Combo from './Combo.js';
 
 // This is a building block for other combos,
 // which store their data as a JSON array, not a data repository.

package/src/Components/Form/Field/Combo/BooleanCombo.js

@@ -1,4 +1,4 @@
-import ArrayCombo from './ArrayCombo';
+import ArrayCombo from './ArrayCombo.js';
 
 const
 	trueFalseData = [

package/src/Components/Form/Field/Combo/Combo.js

@@ -9,18 +9,18 @@ import {
 } from 'native-base';
 import {
 	UI_MODE_WEB,
-} from '../../../../Constants/UiModes';
-import UiConfig from '../../../../UiConfig';
-import Input from '../Input';
-import styles from '../../../../Constants/Styles';
-import withData from '../../../Hoc/withData';
-import withEvents from '../../../Hoc/withEvents';
-import withSelection from '../../../Hoc/withSelection';
-import withValue from '../../../Hoc/withValue';
-import emptyFn from '../../../../Functions/emptyFn';
-import { Grid } from '../../../Grid/Grid';
-import IconButton from '../../../Buttons/IconButton';
-import CaretDown from '../../../Icons/CaretDown';
+} from '../../../../Constants/UiModes.js';
+import UiConfig from '../../../../UiConfig.js';
+import Input from '../Input.js';
+import styles from '../../../../Constants/Styles.js';
+import withData from '../../../Hoc/withData.js';
+import withEvents from '../../../Hoc/withEvents.js';
+import withSelection from '../../../Hoc/withSelection.js';
+import withValue from '../../../Hoc/withValue.js';
+import emptyFn from '../../../../Functions/emptyFn.js';
+import { Grid } from '../../../Grid/Grid.js';
+import IconButton from '../../../Buttons/IconButton.js';
+import CaretDown from '../../../Icons/CaretDown.js';
 import _ from 'lodash';
 
 // Combo requires the use of HOC withSelection() whenever it's used.

package/src/Components/Form/Field/Combo/ComboEditor.js

@@ -1,10 +1,10 @@
-import withAlert from '../../../Hoc/withAlert';
-import withData from '../../../Hoc/withData';
-import withPresetButtons from '../../../Hoc/withPresetButtons';
-import withSelection from '../../../Hoc/withSelection';
-import withValue from '../../../Hoc/withValue';
-import withWindowedEditor from '../../../Hoc/withWindowedEditor';
-import { Combo } from './Combo';
+import withAlert from '../../../Hoc/withAlert.js';
+import withData from '../../../Hoc/withData.js';
+import withPresetButtons from '../../../Hoc/withPresetButtons.js';
+import withSelection from '../../../Hoc/withSelection.js';
+import withValue from '../../../Hoc/withValue.js';
+import withWindowedEditor from '../../../Hoc/withWindowedEditor.js';
+import { Combo } from './Combo.js';
 
 export default
 				// withAlert(

package/src/Components/Form/Field/Combo/IntervalsCombo.js

@@ -1,4 +1,4 @@
-import ArrayCombo from './ArrayCombo';
+import ArrayCombo from './ArrayCombo.js';
 
 const data = [
 	['+1 day', 'Daily'], 

package/src/Components/Form/Field/Combo/MonthsCombo.js

@@ -1,4 +1,4 @@
-import ArrayCombo from './ArrayCombo';
+import ArrayCombo from './ArrayCombo.js';
 
 const data = [
 	[ 1, 'January', ],

package/src/Components/Form/Field/Combo/PageSizeCombo.js

@@ -2,7 +2,7 @@ import { useMemo, } from 'react';
 import {
 	Row,
 } from 'native-base';
-import ArrayCombo from './ArrayCombo';
+import ArrayCombo from './ArrayCombo.js';
 
 export default function PageSizeCombo(props) {
 	const {

package/src/Components/Form/Field/Combo/Tag.js

@@ -1,7 +1,7 @@
 import {
 	SELECTION_MODE_MULTI,
-} from '../../../../Constants/Selection';
-import Combo from './Combo';
+} from '../../../../Constants/Selection.js';
+import Combo from './Combo.js';
 
 export default function Tag(props) {
 	return <Combo

package/src/Components/Form/Field/Combo/TimezonesCombo.js

@@ -1,4 +1,4 @@
-import ArrayCombo from './ArrayCombo';
+import ArrayCombo from './ArrayCombo.js';
 
 const data = [
 	['null', 'N/A'],

package/src/Components/Form/Field/Combo/YearsCombo.js

@@ -1,5 +1,5 @@
 import { useState, useEffect, } from 'react';
-import ArrayCombo from './ArrayCombo';
+import ArrayCombo from './ArrayCombo.js';
 import moment from 'moment';
 
 

package/src/Components/Form/Field/Date.js

@@ -11,7 +11,7 @@ import {
 	DATE,
 	TIME,
 	DATETIME,
-} from '../../../Constants/Date';
+} from '../../../Constants/Date.js';
 // import DateTimePickerModal from 'react-native-modal-datetime-picker'; // https://github.com/mmazzarolo/react-native-modal-datetime-picker
 // import DateTimePicker from '@react-native-community/datetimepicker'; // https://github.com/react-native-datetimepicker/datetimepicker
 import Datetime from 'react-datetime'; // https://www.npmjs.com/package/react-datetime
@@ -19,16 +19,16 @@ import 'react-datetime/css/react-datetime.css';
 import './datetime.css';
 import {
 	UI_MODE_WEB,
-} from '../../../Constants/UiModes';
-import UiConfig from '../../../UiConfig';
-import Formatters from '@onehat/data/src/Util/Formatters';
-import Parsers from '@onehat/data/src/Util/Parsers';
-import Input from '../Field/Input';
-import IconButton from '../../Buttons/IconButton';
-import withValue from '../../Hoc/withValue';
-import emptyFn from '../../../Functions/emptyFn';
-import Calendar from '../../Icons/Calendar';
-import styles from '../../../Constants/Styles';
+} from '../../../Constants/UiModes.js';
+import UiConfig from '../../../UiConfig.js';
+import Formatters from '@onehat/data/src/Util/Formatters.js';
+import Parsers from '@onehat/data/src/Util/Parsers.js';
+import Input from '../Field/Input.js';
+import IconButton from '../../Buttons/IconButton.js';
+import withValue from '../../Hoc/withValue.js';
+import emptyFn from '../../../Functions/emptyFn.js';
+import Calendar from '../../Icons/Calendar.js';
+import styles from '../../../Constants/Styles.js';
 import _ from 'lodash';
 
 export function DateElement(props) {

package/src/Components/Form/Field/DisplayField.js

@@ -2,9 +2,9 @@ import React from 'react';
 import {
 	Text,
 } from 'native-base';
-import styles from '../../../Constants/Styles';
-import withTooltip from '../../Hoc/withTooltip';
-import withValue from '../../Hoc/withValue';
+import styles from '../../../Constants/Styles.js';
+import withTooltip from '../../Hoc/withTooltip.js';
+import withValue from '../../Hoc/withValue.js';
 
 const
 	DisplayElement = (props) => {

package/src/Components/Form/Field/File.js

@@ -9,17 +9,17 @@ import {
 import {
 	UI_MODE_WEB,
 	UI_MODE_REACT_NATIVE,
-} from '../../../Constants/UiModes';
-import UiConfig from '../../../UiConfig';
-import styles from '../../../Constants/Styles';
+} from '../../../Constants/UiModes.js';
+import UiConfig from '../../../UiConfig.js';
+import styles from '../../../Constants/Styles.js';
 import {
 	FILE_MODE_IMAGE,
 	FILE_MODE_FILE,
-} from '../../../Constants/File';
-import IconButton from '../../Buttons/IconButton';
-import withValue from '../../Hoc/withValue';
-import File from '../../Icons/File';
-import Trash from '../../Icons/Trash';
+} from '../../../Constants/File.js';
+import IconButton from '../../Buttons/IconButton.js';
+import withValue from '../../Hoc/withValue.js';
+import File from '../../Icons/File.js';
+import Trash from '../../Icons/Trash.js';
 import _ from 'lodash';
 
 // NOTES: Since this arrangement of form and fields has only a single value per field, 

package/src/Components/Form/Field/Input.js

@@ -5,9 +5,9 @@ import {
 } from 'native-base';
 import {
 	AUTO_SUBMIT_DELAY,
-} from '../../../Constants/Input';
-import styles from '../../../Constants/Styles';
-import withValue from '../../Hoc/withValue';
+} from '../../../Constants/Input.js';
+import styles from '../../../Constants/Styles.js';
+import withValue from '../../Hoc/withValue.js';
 import _ from 'lodash';
 
 function InputElement(props) {

package/src/Components/Form/Field/Number.js

@@ -7,13 +7,13 @@ import {
 } from 'native-base';
 import {
 	AUTO_SUBMIT_DELAY,
-} from '../../../Constants/Input';
-import styles from '../../../Constants/Styles';
-import IconButton from '../../Buttons/IconButton';
-import withTooltip from '../../Hoc/withTooltip';
-import withValue from '../../Hoc/withValue';
-import Plus from '../../Icons/Plus';
-import Minus from '../../Icons/Minus';
+} from '../../../Constants/Input.js';
+import styles from '../../../Constants/Styles.js';
+import IconButton from '../../Buttons/IconButton.js';
+import withTooltip from '../../Hoc/withTooltip.js';
+import withValue from '../../Hoc/withValue.js';
+import Plus from '../../Icons/Plus.js';
+import Minus from '../../Icons/Minus.js';
 import _ from 'lodash';
 
 const InputWithTooltip = withTooltip(Input);

package/src/Components/Form/Field/RadioGroup/ArrayRadioGroup.js

@@ -1,4 +1,4 @@
-import RadioGroup from './RadioGroup';
+import RadioGroup from './RadioGroup.js';
 
 // This is a building block for other RadioGroups,
 // which store their data as a JSON array, not a data repository.

package/src/Components/Form/Field/RadioGroup/RadioGroup.js

@@ -4,9 +4,9 @@ import {
 	Radio,
 	Row,
 } from 'native-base';
-import withData from '../../../Hoc/withData';
-import withValue from '../../../Hoc/withValue';
-import withTooltip from '../../../Hoc/withTooltip';
+import withData from '../../../Hoc/withData.js';
+import withValue from '../../../Hoc/withValue.js';
+import withTooltip from '../../../Hoc/withTooltip.js';
 import _ from 'lodash';
 
 const

package/src/Components/Form/Field/Tag.js

@@ -1,7 +1,7 @@
 import {
 	SELECTION_MODE_MULTI,
-} from '../../../Constants/Selection';
-import Combo from './Combo/Combo';
+} from '../../../Constants/Selection.js';
+import Combo from './Combo/Combo.js';
 
 export default function Tag(props) {
 	return <Combo

package/src/Components/Form/Field/Text.js

@@ -2,9 +2,9 @@ import React from 'react';
 import {
 	Text,
 } from 'native-base';
-import styles from '../../../Constants/Styles';
-import withTooltip from '../../Hoc/withTooltip';
-import withValue from '../../Hoc/withValue';
+import styles from '../../../Constants/Styles.js';
+import withTooltip from '../../Hoc/withTooltip.js';
+import withValue from '../../Hoc/withValue.js';
 
 const
 	TextElement = (props) => {

package/src/Components/Form/Field/TextArea.js

@@ -2,9 +2,9 @@ import React from 'react';
 import {
 	TextArea,
 } from 'native-base';
-import styles from '../../../Constants/Styles';
-import withTooltip from '../../Hoc/withTooltip';
-import withValue from '../../Hoc/withValue';
+import styles from '../../../Constants/Styles.js';
+import withTooltip from '../../Hoc/withTooltip.js';
+import withValue from '../../Hoc/withValue.js';
 
 const
 	TextAreaElement = (props) => {

package/src/Components/Form/Field/Toggle.js

@@ -2,9 +2,9 @@ import React from 'react';
 import {
 	Switch,
 } from 'native-base';
-import styles from '../../../Constants/Styles';
-import withTooltip from '../../Hoc/withTooltip';
-import withValue from '../../Hoc/withValue';
+import styles from '../../../Constants/Styles.js';
+import withTooltip from '../../Hoc/withTooltip.js';
+import withValue from '../../Hoc/withValue.js';
 
 const
 	ToggleElement = (props) => {

package/src/Components/Form/FieldSet.js

@@ -5,10 +5,10 @@ import {
 	Row,
 	Text,
 } from 'native-base';
-import styles from '../../Constants/Styles';
-import IconButton from '../Buttons/IconButton';
-import CaretUp from '../Icons/CaretUp';
-import CaretDown from '../Icons/CaretDown';
+import styles from '../../Constants/Styles.js';
+import IconButton from '../Buttons/IconButton.js';
+import CaretUp from '../Icons/CaretUp.js';
+import CaretDown from '../Icons/CaretDown.js';
 
 export default function FieldSet(props) {
 	const {

package/src/Components/Form/FiltersForm.js

@@ -7,7 +7,7 @@ import {
 	ScrollView,
 	Text,
 } from 'native-base';
-import Form from './Form';
+import Form from './Form.js';
 import _ from 'lodash';
 
 

package/src/Components/Form/Form.js

@@ -13,20 +13,20 @@ import {
 	EDITOR_TYPE_WINDOWED,
 	EDITOR_TYPE_SMART,
 	EDITOR_TYPE_PLAIN,
-} from '../../Constants/EditorTypes';
+} from '../../Constants/EditorTypes.js';
 import { useForm, Controller } from 'react-hook-form'; // https://react-hook-form.com/api/
 import * as yup from 'yup'; // https://github.com/jquense/yup#string
 import { yupResolver } from '@hookform/resolvers/yup';
-import useForceUpdate from '../../Hooks/useForceUpdate';
-import withAlert from '../Hoc/withAlert';
-import withEditor from '../Hoc/withEditor';
-import inArray from '../../Functions/inArray';
-import getComponentFromType from '../../Functions/getComponentFromType';
-import IconButton from '../Buttons/IconButton';
-import Rotate from '../Icons/Rotate';
-import Pencil from '../Icons/Pencil';
-import Footer from '../Panel/Footer';
-import Label from '../Form/Label';
+import useForceUpdate from '../../Hooks/useForceUpdate.js';
+import withAlert from '../Hoc/withAlert.js';
+import withEditor from '../Hoc/withEditor.js';
+import inArray from '../../Functions/inArray.js';
+import getComponentFromType from '../../Functions/getComponentFromType.js';
+import IconButton from '../Buttons/IconButton.js';
+import Rotate from '../Icons/Rotate.js';
+import Pencil from '../Icons/Pencil.js';
+import Footer from '../Panel/Footer.js';
+import Label from '../Form/Label.js';
 import _ from 'lodash';
 
 // TODO: memoize field Components

package/src/Components/Form/Label.js

@@ -2,7 +2,7 @@ import {
 	Row,
 	Text,
 } from 'native-base';
-import styles from '../../Constants/Styles';
+import styles from '../../Constants/Styles.js';
 
 export default function Label(props) {
 	const {

package/src/Components/Grid/Grid.js

@@ -10,38 +10,38 @@ import {
 import {
 	SELECTION_MODE_SINGLE,
 	SELECTION_MODE_MULTI,
-} from '../../Constants/Selection';
-import styles from '../../Constants/Styles';
+} from '../../Constants/Selection.js';
+import styles from '../../Constants/Styles.js';
 import {
 	v4 as uuid,
 } from 'uuid';
 import {
 	VERTICAL,
-} from '../../Constants/Directions';
+} from '../../Constants/Directions.js';
 import {
 	DROP_POSITION_BEFORE,
 	DROP_POSITION_AFTER,
-} from '../../Constants/Grid';
-import useForceUpdate from '../../Hooks/useForceUpdate';
-import withContextMenu from '../Hoc/withContextMenu';
-import withAlert from '../Hoc/withAlert';
-import withData from '../Hoc/withData';
-import withEvents from '../Hoc/withEvents';
-import withFilters from '../Hoc/withFilters';
-import withPresetButtons from '../Hoc/withPresetButtons';
-import withMultiSelection from '../Hoc/withMultiSelection';
-import withSelection from '../Hoc/withSelection';
-import withWindowedEditor from '../Hoc/withWindowedEditor';
-import withInlineEditor from '../Hoc/withInlineEditor';
-import testProps from '../../Functions/testProps';
-import GridHeaderRow from './GridHeaderRow';
-import GridRow, { ReorderableGridRow } from './GridRow';
-import IconButton from '../Buttons/IconButton';
-import PaginationToolbar from '../Toolbar/PaginationToolbar';
-import NoRecordsFound from './NoRecordsFound';
-import Toolbar from '../Toolbar/Toolbar';
-import NoReorderRows from '../Icons/NoReorderRows';
-import ReorderRows from '../Icons/ReorderRows';
+} from '../../Constants/Grid.js';
+import useForceUpdate from '../../Hooks/useForceUpdate.js';
+import withContextMenu from '../Hoc/withContextMenu.js';
+import withAlert from '../Hoc/withAlert.js';
+import withData from '../Hoc/withData.js';
+import withEvents from '../Hoc/withEvents.js';
+import withFilters from '../Hoc/withFilters.js';
+import withPresetButtons from '../Hoc/withPresetButtons.js';
+import withMultiSelection from '../Hoc/withMultiSelection.js';
+import withSelection from '../Hoc/withSelection.js';
+import withWindowedEditor from '../Hoc/withWindowedEditor.js';
+import withInlineEditor from '../Hoc/withInlineEditor.js';
+import testProps from '../../Functions/testProps.js';
+import GridHeaderRow from './GridHeaderRow.js';
+import GridRow, { ReorderableGridRow } from './GridRow.js';
+import IconButton from '../Buttons/IconButton.js';
+import PaginationToolbar from '../Toolbar/PaginationToolbar.js';
+import NoRecordsFound from './NoRecordsFound.js';
+import Toolbar from '../Toolbar/Toolbar.js';
+import NoReorderRows from '../Icons/NoReorderRows.js';
+import ReorderRows from '../Icons/ReorderRows.js';
 import _ from 'lodash';
 
 // Grid requires the use of HOC withSelection() whenever it's used.

package/src/Components/Grid/GridHeaderRow.js

@@ -8,21 +8,21 @@ import {
 import {
 	SORT_ASCENDING,
 	SORT_DESCENDING,
-} from '../../Constants/Grid';
+} from '../../Constants/Grid.js';
 import {
 	HORIZONTAL,
-} from '../../Constants/Directions';
+} from '../../Constants/Directions.js';
 import {
 	UI_MODE_WEB,
-} from '../../Constants/UiModes';
-import UiConfig from '../../UiConfig';
-import styles from '../../Constants/Styles';
-import useBlocking from '../../Hooks/useBlocking';
-import AngleRight from '../Icons/AngleRight';
-import HeaderReorderHandle from './HeaderReorderHandle';
-import HeaderResizeHandle from './HeaderResizeHandle';
-import SortDown from '../Icons/SortDown';
-import SortUp from '../Icons/SortUp';
+} from '../../Constants/UiModes.js';
+import UiConfig from '../../UiConfig.js';
+import styles from '../../Constants/Styles.js';
+import useBlocking from '../../Hooks/useBlocking.js';
+import AngleRight from '../Icons/AngleRight.js';
+import HeaderReorderHandle from './HeaderReorderHandle.js';
+import HeaderResizeHandle from './HeaderResizeHandle.js';
+import SortDown from '../Icons/SortDown.js';
+import SortUp from '../Icons/SortUp.js';
 import _ from 'lodash';
 
 // This was broken out from Grid simply so we can memoize it