@linzjs/step-ag-grid 17.4.9 → 17.5.0

package/dist/GridTheme.scss

@@ -10,18 +10,21 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     themes: (
       'step-compact.theme-specific': (
         extend-theme: alpine,
-        --ag-row-height: 36px,
-        --ag-header-height: 36px,
-        --ag-font-size: calc($grid-base-font-size - 2px),
+        row-height: 36px,
+        header-height: 36px,
+        font-size: calc($grid-base-font-size - 2px),
       ),
       'step-default.theme-specific': (
         extend-theme: alpine,
-        --ag-row-height: 40px,
-        --ag-header-height: 40px,
-        --ag-font-size: calc($grid-base-font-size),
+        row-height: 40px,
+        header-height: 40px,
+        font-size: calc($grid-base-font-size),
       ),
     ),
 
+    input-focus-border-color: lui.$sea,
+    borders-input: 1px solid,
+    input-border-color: lui.$silver,
     alpine-active-color: lui.$sea,
     background-color: lui.$white,
     border-color: lui.$dew,
@@ -49,6 +52,10 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
 
 .ag-theme-step-default.theme-specific,
 .ag-theme-step-compact.theme-specific {
+  .ag-text-area-input:focus {
+    border-color: lui.$sea;
+  }
+
   .ag-cell[col-id="selection"] {
     display: flex; // Fix that when you click below checkbox it doesn't process a click
   }

package/dist/src/components/Grid.d.ts

@@ -64,8 +64,12 @@ export interface GridProps {
      * Whether to select row on context menu.
      */
     contextMenuSelectRow?: boolean;
+    /**
+     * Defaults to false.
+     */
+    singleClickEdit?: boolean;
 }
 /**
  * Wrapper for AgGrid to add commonly used functionality.
  */
-export declare const Grid: ({ "data-testid": dataTestId, rowSelection, suppressColumnVirtualization, theme, sizeColumns, selectColumnPinned, contextMenuSelectRow, rowHeight, ...params }: GridProps) => ReactElement;
+export declare const Grid: ({ "data-testid": dataTestId, rowSelection, suppressColumnVirtualization, theme, sizeColumns, selectColumnPinned, contextMenuSelectRow, singleClickEdit, rowHeight, ...params }: GridProps) => ReactElement;

package/dist/step-ag-grid.cjs.js

@@ -2344,7 +2344,7 @@ const useGridContextMenu = ({ contextMenuSelectRow, contextMenu: ContextMenu, })
 /**
  * Wrapper for AgGrid to add commonly used functionality.
  */
-const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressColumnVirtualization = true, theme = "ag-theme-step-default", sizeColumns = "auto", selectColumnPinned = null, contextMenuSelectRow = false, rowHeight = theme === "ag-theme-step-default" ? 40 : theme === "ag-theme-step-compact" ? 36 : undefined, ...params }) => {
+const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressColumnVirtualization = true, theme = "ag-theme-step-default", sizeColumns = "auto", selectColumnPinned = null, contextMenuSelectRow = false, singleClickEdit = false, rowHeight = theme === "ag-theme-step-default" ? 40 : theme === "ag-theme-step-compact" ? 36 : undefined, ...params }) => {
     const { gridReady, setApis, ensureRowVisible, getFirstRowId, selectRowsById, focusByRowById, ensureSelectedRowIsVisible, autoSizeColumns, sizeColumnsToFit, externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync, isExternalFilterPresent, doesExternalFilterPass, setOnCellEditingComplete, getColDef, } = React.useContext(GridContext);
     const { checkUpdating, updatedDep, updatingCols } = React.useContext(GridUpdatingContext);
     const { prePopupOps } = React.useContext(GridContext);
@@ -2648,10 +2648,10 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
      * Handle single click edits
      */
     const onCellClicked = React.useCallback((event) => {
-        if (event.colDef?.cellRendererParams?.singleClickEdit) {
+        if (event.colDef?.cellRendererParams?.singleClickEdit ?? singleClickEdit) {
             startCellEditing(event);
         }
-    }, [startCellEditing]);
+    }, [singleClickEdit, startCellEditing]);
     /**
      * If cell has an edit action invoke it (if editable)
      */
@@ -3268,11 +3268,11 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$2 = ".helpText{color:#6b6966;font-size:.75rem;font-weight:400}";
+var css_248z$2 = ".FormError-helpText{color:#6b6966;font-size:.75rem;font-weight:400}";
 styleInject(css_248z$2);
 
 const FormError = (props) => {
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.error && (jsxRuntime.jsx("span", { className: "LuiTextInput-error", style: { paddingLeft: 0 }, children: props.error })), props.helpText && !props.error && jsxRuntime.jsx("span", { className: "helpText", children: props.helpText })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.error && (jsxRuntime.jsx("span", { className: "LuiTextInput-error", style: { paddingLeft: 0 }, children: props.error })), props.helpText && !props.error && jsxRuntime.jsx("span", { className: "FormError-helpText", children: props.helpText })] }));
 };
 
 function escapeStringRegexp(string) {
@@ -3648,11 +3648,11 @@ const GridFormDropDown = (props) => {
                         })] }) })] }));
 };
 
-var css_248z$1 = ".LuiTextInput{margin-bottom:0}.LuiTextInput-formatted{color:#beb9b4;line-height:48px;position:absolute;right:14px;top:0}";
+var css_248z$1 = ".LuiTextInput.GridLuiTextInput{margin-bottom:0}.LuiTextInput-formatted{color:#beb9b4;line-height:48px;position:absolute;right:14px;top:0}";
 styleInject(css_248z$1);
 
 const TextInputFormatted = (props) => {
-    return (jsxRuntime.jsxs("div", { className: clsx("LuiTextInput Grid-popoverContainer", props.error && "hasError", props.className), children: [jsxRuntime.jsxs("span", { className: "LuiTextInput-inputWrapper", children: [jsxRuntime.jsx("input", { type: "text", spellCheck: true, defaultValue: props.value, ...lodashEs.omit(props, ["error", "value", "helpText", "formatted", "className", "allowTabToSave"]), className: "LuiTextInput-input", onMouseEnter: (e) => {
+    return (jsxRuntime.jsxs("div", { className: clsx("LuiTextInput GridLuiTextInput Grid-popoverContainer", props.error && "hasError", props.className), children: [jsxRuntime.jsxs("span", { className: "LuiTextInput-inputWrapper", children: [jsxRuntime.jsx("input", { type: "text", spellCheck: true, defaultValue: props.value, ...lodashEs.omit(props, ["error", "value", "helpText", "formatted", "className", "allowTabToSave"]), className: "LuiTextInput-input", onMouseEnter: (e) => {
                             e.currentTarget.focus();
                             props.onMouseEnter && props.onMouseEnter(e);
                         }, "data-allowtabtosave": props.allowTabToSave }), jsxRuntime.jsx("span", { className: "LuiTextInput-formatted", children: props.formatted })] }), jsxRuntime.jsx(FormError, { error: props.error, helpText: props.helpText })] }));