fix: Add all exports to index.ts

index.ts

@@ -1,5 +1,39 @@
-export type { GridBaseRow } from "./src/components/Grid";
-export { Grid } from "./src/components/Grid";
+export { UpdatingContext } from "./src/contexts/UpdatingContext";
 export { UpdatingContextProvider } from "./src/contexts/UpdatingContextProvider";
+export { GridContext } from "./src/contexts/GridContext";
 export { GridContextProvider } from "./src/contexts/GridContextProvider";
+
+export type { GridBaseRow } from "./src/components/Grid";
+export { Grid } from "./src/components/Grid";
 export { GridCell } from "./src/components/GridCell";
+export { GridIcon } from "./src/components/GridIcon";
+export { ComponentLoadingWrapper } from "./src/components/ComponentLoadingWrapper";
+export { GenericMultiEditCellClass } from "./src/components/GenericCellClass";
+export { GridLoadableCell } from "./src/components/GridLoadableCell";
+export { useGridPopoutHook } from "./src/components/GridPopoutHook";
+export { usePostSortRowsHook } from "./src/components/PostSortRowsHook";
+
+export { GridRendererGenericCell } from "./src/components/gridRender/GridRenderGenericCell";
+export { GridRenderPopoutMenuCell } from "./src/components/gridRender/GridRenderPopoutMenuCell";
+
+export { GridPopoutEditMultiSelect } from "./src/components/gridPopoverEdit/GridPopoutEditMultiSelect";
+export { GridPopoutMenu } from "./src/components/gridPopoverEdit/GridPopoutMenu";
+export { GridPopoverEditBearing } from "./src/components/gridPopoverEdit/GridPopoverEditBearing";
+export { GridPopoverEditDropDown } from "./src/components/gridPopoverEdit/GridPopoverEditDropDown";
+export { GridPopoverMessage } from "./src/components/gridPopoverEdit/GridPopoverMessage";
+
+export { GridHeaderSelect } from "./src/components/gridHeader/GridHeaderSelect";
+
+export { GridFormEditBearing } from "./src/components/gridForm/GridFormEditBearing";
+export { GridFormDropDown } from "./src/components/gridForm/GridFormDropDown";
+export { GridFormMessage } from "./src/components/gridForm/GridFormMessage";
+export { GridFormMultiSelect } from "./src/components/gridForm/GridFormMultiSelect";
+export { GridFormPopoutMenu } from "./src/components/gridForm/GridFormPopoutMenu";
+export { GridFormTextArea } from "./src/components/gridForm/GridFormTextArea";
+export { GridFormTextInput } from "./src/components/gridForm/GridFormTextInput";
+
+export { TextAreaInput } from "./src/lui/TextAreaInput";
+export { TextInputFormatted } from "./src/lui/TextInputFormatted";
+
+export * from "./src/utils/bearing";
+export * from "./src/utils/util";

rollup.config.ts

@@ -1,28 +1,28 @@
-import peerDepsExternal from 'rollup-plugin-peer-deps-external';
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import typescript from 'rollup-plugin-typescript2';
-import postcss from 'rollup-plugin-postcss';
-import copy from 'rollup-plugin-copy';
-import json from '@rollup/plugin-json';
+// @ts-ignore
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import typescript from "rollup-plugin-typescript2";
+import postcss from "rollup-plugin-postcss";
+import copy from "rollup-plugin-copy";
+import json from "@rollup/plugin-json";
 
-const packageJson = require('./package.json');
-const outputDir = 'dist';
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const packageJson = require("./package.json");
+const outputDir = "dist";
 
 export default {
-  input: 'index.ts',
-  external: [
-    'ag-grid-community',
-  ],
+  input: "index.ts",
+  external: ["ag-grid-community"],
   output: [
     {
       file: packageJson.main,
-      format: 'cjs',
+      format: "cjs",
       sourcemap: true,
     },
     {
       file: packageJson.module,
-      format: 'esm',
+      format: "esm",
       sourcemap: true,
     },
   ],
@@ -36,11 +36,11 @@ export default {
     copy({
       targets: [
         {
-          src: 'src/scss',
+          src: "src/scss",
           dest: `${outputDir}`,
         },
         {
-          src: 'src/assets',
+          src: "src/assets",
           dest: `${outputDir}`,
         },
       ],

src/components/Grid.scss

@@ -28,3 +28,11 @@
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
+
+.Grid-popoverContainer {
+  padding: 4px 8px;
+}
+
+.Grid-popoverContainerList {
+  padding: 4px 4px;
+}

src/components/Grid.tsx

@@ -9,7 +9,7 @@ import { CellEvent, GridReadyEvent, SelectionChangedEvent } from "ag-grid-commun
 import { GridOptions } from "ag-grid-community/dist/lib/entities/gridOptions";
 import { difference, last, xorBy } from "lodash-es";
 import { GridContext } from "../contexts/GridContext";
-import { usePostSortRowsHook } from "./PostSortRowHook";
+import { usePostSortRowsHook } from "./PostSortRowsHook";
 import { isNotEmpty } from "../utils/util";
 import { GridHeaderSelect } from "./gridHeader/GridHeaderSelect";
 import { UpdatingContext } from "../contexts/UpdatingContext";

src/components/GridCell.tsx

@@ -2,7 +2,7 @@ import { useCallback, useContext, useMemo, useState } from "react";
 import { GridBaseRow } from "./Grid";
 import { GridContext } from "../contexts/GridContext";
 import { GenericMultiEditCellClass } from "./GenericCellClass";
-import { GenericCellRendererParams, GridGenericCellRendererComponent } from "./gridRender/GridRenderGenericCell";
+import { GenericCellRendererParams, GridRendererGenericCell } from "./gridRender/GridRenderGenericCell";
 import { ColDef, ICellEditorParams } from "ag-grid-community";
 
 export interface GridFormProps<RowType extends GridBaseRow> {
@@ -35,7 +35,7 @@ export const GridCell = <RowType extends GridBaseRow, FormProps extends GenericC
   props: GenericCellEditorColDef<RowType, FormProps>,
 ): ColDef => {
   return {
-    cellRenderer: props.cellRenderer ?? GridGenericCellRendererComponent,
+    cellRenderer: props.cellRenderer ?? GridRendererGenericCell,
     sortable: !!(props?.field || props?.valueGetter),
     resizable: true,
     ...(props.cellEditorParams && {

src/components/GridPopoutHook.tsx

@@ -72,6 +72,7 @@ export const useGridPopoutHook = <RowType extends GridBaseRow>(
         document.removeEventListener("click", handleScreenMouseEvent, true);
       };
     }
+    return () => {};
   }, [handleScreenMouseDown, handleScreenMouseEvent, isOpen]);
 
   const popoutWrapper = useCallback(

src/components/gridForm/GridFormEditBearing.tsx

@@ -41,7 +41,7 @@ export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridForm
   const { popoutWrapper, triggerSave } = useGridPopoutHook(props, save);
 
   return popoutWrapper(
-    <div className={"GridFormEditBearing-input"}>
+    <div className={"GridFormEditBearing-input Grid-popoverContainer"}>
       <TextInputFormatted
         value={value ?? ""}
         onChange={(e) => {

src/components/gridForm/GridFormMessage.tsx

@@ -26,7 +26,9 @@ export const GridFormMessage = <RowType extends GridBaseRow>(props: GridFormProp
 
   return popoutWrapper(
     <ComponentLoadingWrapper loading={message === null}>
-      <div style={{ maxWidth: 400, padding: 16 }}>{message}</div>
+      <div style={{ maxWidth: 400 }} className={"Grid-popoverContainer"}>
+        {message}
+      </div>
     </ComponentLoadingWrapper>,
   );
 };

src/components/gridForm/GridFormMultiSelect.tsx

@@ -107,7 +107,7 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
 
   return popoutWrapper(
     <ComponentLoadingWrapper loading={!options}>
-      <>
+      <div className={"Grid-popoverContainerList"}>
         {options && formProps.filtered && (
           <>
             <FocusableItem className={"filter-item"}>
@@ -174,7 +174,7 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
             </>
           ),
         )}
-      </>
+      </div>
     </ComponentLoadingWrapper>,
   );
 };

src/components/gridForm/GridFormPopoutMenu.tsx

@@ -70,7 +70,7 @@ export const GridFormPopoutMenu = <RowType extends GridBaseRow>(props: GridFormP
   const { popoutWrapper } = useGridPopoutHook(props);
   return popoutWrapper(
     <ComponentLoadingWrapper loading={!filteredOptions}>
-      <>
+      <div className={"Grid-popoverContainerList"}>
         {options?.map((item, index) =>
           item.label === MenuSeparator ? (
             <MenuDivider key={`$$divider_${index}`} />
@@ -84,7 +84,7 @@ export const GridFormPopoutMenu = <RowType extends GridBaseRow>(props: GridFormP
             </MenuItem>
           ),
         )}
-      </>
+      </div>
     </ComponentLoadingWrapper>,
   );
 };

src/components/gridForm/GridFormTextArea.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useState } from "react";
 import { GenericCellEditorParams, GridFormProps } from "../GridCell";
-import { TextAreaInput } from "../../lui/TextArea";
+import { TextAreaInput } from "../../lui/TextAreaInput";
 import { useGridPopoutHook } from "../GridPopoutHook";
 import { GridBaseRow } from "../Grid";
 
@@ -23,6 +23,7 @@ export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormPro
     if (formProps.maxlength && value.length > formProps.maxlength) {
       return `Text must be no longer than ${formProps.maxlength} characters`;
     }
+    return null;
   }, [formProps.maxlength, formProps.required, value.length]);
 
   const save = useCallback(

src/components/gridForm/GridFormTextInput.tsx

@@ -23,6 +23,7 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormPr
     if (formProps.maxlength && value.length > formProps.maxlength) {
       return `Text must be no longer than ${formProps.maxlength} characters`;
     }
+    return null;
   }, [formProps.maxlength, formProps.required, value.length]);
 
   const save = useCallback(

src/components/gridPopoverEdit/GridPopoutEditMultiSelect.ts

@@ -1,5 +1,5 @@
 import { GenericMultiEditCellClass } from "../GenericCellClass";
-import { GenericCellColDef, GridGenericCellRendererComponent } from "../gridRender/GridRenderGenericCell";
+import { GenericCellColDef, GridRendererGenericCell } from "../gridRender/GridRenderGenericCell";
 import { GridCell } from "../GridCell";
 import { GridBaseRow } from "../Grid";
 import { GridFormMultiSelect, GridFormMultiSelectProps } from "../gridForm/GridFormMultiSelect";
@@ -10,7 +10,7 @@ export const GridPopoutEditMultiSelect = <RowType extends GridBaseRow, ValueType
   GridCell<RowType, GridFormMultiSelectProps<RowType, ValueType>>({
     initialWidth: 65,
     maxWidth: 150,
-    cellRenderer: GridGenericCellRendererComponent,
+    cellRenderer: GridRendererGenericCell,
     cellClass: colDef.cellEditor?.multiEdit ? GenericMultiEditCellClass : undefined,
     ...colDef,
     ...(colDef?.cellEditorParams && {

src/components/gridPopoverEdit/GridPopoverEditBearing.ts

@@ -1,5 +1,5 @@
 import { GenericMultiEditCellClass } from "../GenericCellClass";
-import { GenericCellColDef, GridGenericCellRendererComponent } from "../gridRender/GridRenderGenericCell";
+import { GenericCellColDef, GridRendererGenericCell } from "../gridRender/GridRenderGenericCell";
 import { bearingValueFormatter } from "../../utils/bearing";
 import { GridCell } from "../GridCell";
 import { GridFormEditBearing, GridFormEditBearingProps } from "../gridForm/GridFormEditBearing";
@@ -12,7 +12,7 @@ export const GridPopoverEditBearing = <RowType extends GridBaseRow>(
     initialWidth: 65,
     maxWidth: 150,
     valueFormatter: bearingValueFormatter,
-    cellRenderer: GridGenericCellRendererComponent,
+    cellRenderer: GridRendererGenericCell,
     cellClass: colDef.cellEditorParams?.multiEdit ? GenericMultiEditCellClass : undefined,
     ...colDef,
     ...(colDef?.cellEditorParams && {

src/components/gridPopoverEdit/GridPopoverEditDropDown.ts

@@ -1,16 +1,16 @@
 import { GenericMultiEditCellClass } from "../GenericCellClass";
-import { GenericCellColDef, GridGenericCellRendererComponent } from "../gridRender/GridRenderGenericCell";
+import { GenericCellColDef, GridRendererGenericCell } from "../gridRender/GridRenderGenericCell";
 import { GridCell } from "../GridCell";
 import { GridBaseRow } from "../Grid";
 import { GridFormDropDown, GridFormPopoutDropDownProps } from "../gridForm/GridFormDropDown";
 
-export const GridPopoutEditDropDown = <RowType extends GridBaseRow, ValueType>(
+export const GridPopoverEditDropDown = <RowType extends GridBaseRow, ValueType>(
   colDef: GenericCellColDef<RowType, GridFormPopoutDropDownProps<RowType, ValueType>>,
 ) =>
   GridCell<RowType, GridFormPopoutDropDownProps<RowType, ValueType>>({
     initialWidth: 65,
     maxWidth: 150,
-    cellRenderer: GridGenericCellRendererComponent,
+    cellRenderer: GridRendererGenericCell,
     cellClass: colDef.cellEditor?.multiEdit ? GenericMultiEditCellClass : undefined,
     ...colDef,
     ...(colDef?.cellEditorParams && {

src/components/gridRender/GridRenderGenericCell.tsx

@@ -20,7 +20,7 @@ export interface GenericCellRendererParams {
   info?: (props: ICellRendererParams) => string | boolean | undefined;
 }
 
-export const GridGenericCellRendererComponent = (props: ICellRendererParams): JSX.Element => {
+export const GridRendererGenericCell = (props: ICellRendererParams): JSX.Element => {
   const { checkUpdating } = useContext(UpdatingContext);
 
   const cellRendererParams = props.colDef?.cellRendererParams as GenericCellRendererParams | undefined;

src/lui/TextArea.tsx → src/lui/TextAreaInput.tsx

@@ -14,7 +14,7 @@ export interface LuiTextAreaInputProps {
   inputProps?: InputHTMLAttributes<HTMLTextAreaElement>;
   onChange?: ChangeEventHandler<HTMLTextAreaElement>;
   value: string;
-  error?: string | boolean;
+  error?: string | boolean | null;
 }
 
 export const TextAreaInput = (props: LuiTextAreaInputProps) => {
@@ -23,7 +23,7 @@ export const TextAreaInput = (props: LuiTextAreaInputProps) => {
   return (
     <div
       className={clsx(
-        "LuiTextAreaInput",
+        "LuiTextAreaInput Grid-popoverContainer",
         props.inputProps?.disabled ? "isDisabled" : "",
         props?.error ? "hasError" : "",
       )}

src/lui/TextInputFormatted.tsx

@@ -8,8 +8,8 @@ import { LuiIcon } from "@linzjs/lui";
 export interface LuiTextInputProps {
   onChange?: ChangeEventHandler<HTMLInputElement>;
   inputProps?: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-  error?: string;
-  warning?: string;
+  error?: string | boolean | null;
+  warning?: string | boolean | null;
 
   className?: string;
   value: string;
@@ -21,7 +21,14 @@ export interface LuiTextInputProps {
 
 export const TextInputFormatted = (props: LuiTextInputProps): JSX.Element => {
   return (
-    <div className={clsx("LuiTextInput", props.error && "hasError", props.warning && "hasWarning", props.className)}>
+    <div
+      className={clsx(
+        "LuiTextInput Grid-popoverContainer",
+        props.error && "hasError",
+        props.warning && "hasWarning",
+        props.className,
+      )}
+    >
       <span className="LuiTextInput-inputWrapper">
         <input
           type={"text"}

src/stories/components/FormTest.scss

@@ -1,4 +1,10 @@
 
-.FormTest .LuiTextInput-input {
+.FormTest {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  gap: 12px;
+}
+
+.FormTest-textInput {
   width: 100px;
 }

src/stories/components/FormTest.tsx

@@ -36,10 +36,16 @@ export const FormTest = <RowType extends GridBaseRow>(props: GridFormProps<RowTy
   const { popoutWrapper } = useGridPopoutHook(props, save);
 
   return popoutWrapper(
-    <div style={{ display: "flex", flexDirection: "row" }} className={"FormTest"}>
-      <LuiTextInput label={"Name type"} value={nameType} onChange={(e) => setNameType(e.target.value)} />
-      <LuiTextInput label={"Number"} value={numba} onChange={(e) => setNumba(e.target.value)} />
-      <LuiTextInput label={"Plan"} value={plan} onChange={(e) => setPlan(e.target.value)} />
+    <div style={{ display: "flex", flexDirection: "row" }} className={"FormTest Grid-popoverContainer"}>
+      <div className={"FormTest-textInput"}>
+        <LuiTextInput label={"Name type"} value={nameType} onChange={(e) => setNameType(e.target.value)} />
+      </div>
+      <div className={"FormTest-textInput"}>
+        <LuiTextInput label={"Number"} value={numba} onChange={(e) => setNumba(e.target.value)} />
+      </div>
+      <div className={"FormTest-textInput"}>
+        <LuiTextInput label={"Plan"} value={plan} onChange={(e) => setPlan(e.target.value)} />
+      </div>
     </div>,
   );
 };