ag-common 0.0.385 → 0.0.387

package/dist/ui/components/Button/index.d.ts

@@ -6,7 +6,7 @@ export interface IButton {
     disabled?: boolean;
     className?: string;
     onClick?: MouseEventHandler<HTMLButtonElement>;
-    onKeyPress?: KeyboardEventHandler<HTMLButtonElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
     children: string | JSX.Element;
     href?: string;
     colourTheme?: 'green' | 'red';

package/dist/ui/components/Chevron/index.js

@@ -38,7 +38,7 @@ const Chevron = ({ width = '1.2rem', className, colour = 'black', onToggle, poin
             rotate = 0;
         }
     }
-    return (react_1.default.createElement(Base, { className: className, onClick: () => onToggle === null || onToggle === void 0 ? void 0 : onToggle(), onTouchStart: () => onToggle === null || onToggle === void 0 ? void 0 : onToggle(), onKeyPress: (e) => e.key === 'Enter' && (onToggle === null || onToggle === void 0 ? void 0 : onToggle()) },
+    return (react_1.default.createElement(Base, { className: className, onClick: () => onToggle === null || onToggle === void 0 ? void 0 : onToggle(), onTouchStart: () => onToggle === null || onToggle === void 0 ? void 0 : onToggle(), onKeyDown: (e) => e.key === 'Enter' && (onToggle === null || onToggle === void 0 ? void 0 : onToggle()) },
         react_1.default.createElement(IconStyled, { rotate: rotate, fill: colour, width: width, height: width }, ChevronRight_1.ChevronRight)));
 };
 exports.Chevron = Chevron;

package/dist/ui/components/Search/SearchBox.d.ts

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+import React from 'react';
+import { IRefTextEdit } from '../TextEdit';
 export interface ISearchBox {
     placeholderText?: string;
     searchText: string;
@@ -6,4 +7,4 @@ export interface ISearchBox {
     defaultValue?: string;
     className?: string;
 }
-export declare const SearchBox: (p: ISearchBox) => JSX.Element;
+export declare const SearchBox: React.ForwardRefExoticComponent<ISearchBox & React.RefAttributes<IRefTextEdit>>;

package/dist/ui/components/Search/SearchBox.js

@@ -50,10 +50,11 @@ const Base = styled_1.default.div `
     width: 100%;
   }
 `;
-const Icon = styled_1.default.div `
+const MagnifyIcon = styled_1.default.div `
   width: 1.5rem;
   height: 1.5rem;
   margin-right: 0.5rem;
+  cursor: pointer;
 `;
 const CrossIconStyled = (0, styled_1.default)(icons_1.CrossIcon) `
   position: absolute;
@@ -62,21 +63,32 @@ const CrossIconStyled = (0, styled_1.default)(icons_1.CrossIcon) `
     right: 2rem;
   }
 `;
-const SearchBox = (p) => {
+exports.SearchBox = (0, react_1.forwardRef)((p, ref) => {
     const textEditRef = (0, react_1.createRef)();
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        setValue: (v) => {
+            var _a, _b;
+            const value = (_a = textEditRef.current) === null || _a === void 0 ? void 0 : _a.getValue();
+            if (v === value) {
+                return;
+            }
+            (_b = textEditRef.current) === null || _b === void 0 ? void 0 : _b.setValue(v);
+        },
+        focus: () => { var _a; return (_a = textEditRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+        getValue: () => { var _a; return (_a = textEditRef.current) === null || _a === void 0 ? void 0 : _a.getValue(); },
+    }));
     (0, react_1.useEffect)(() => {
         var _a;
-        (_a = textEditRef.current) === null || _a === void 0 ? void 0 : _a.setValue(p.searchText);
+        (_a = textEditRef === null || textEditRef === void 0 ? void 0 : textEditRef.current) === null || _a === void 0 ? void 0 : _a.setValue(p.searchText);
     }, [p.searchText, textEditRef]);
     return (react_1.default.createElement(Base, Object.assign({ "data-type": "search", className: p.className }, (0, helpers_1.filterDataProps)(p)),
-        react_1.default.createElement(TextEdit_1.TextEdit, { ref: textEditRef, placeholder: p.placeholderText, defaultEditing: { focus: true }, singleLine: true, leftContent: react_1.default.createElement(Icon, null,
+        react_1.default.createElement(TextEdit_1.TextEdit, { ref: textEditRef, placeholder: p.placeholderText, defaultEditing: { focus: true }, singleLine: true, leftContent: react_1.default.createElement(MagnifyIcon, { onClick: () => { var _a; return p.setSearchText(((_a = textEditRef === null || textEditRef === void 0 ? void 0 : textEditRef.current) === null || _a === void 0 ? void 0 : _a.getValue()) || '', true); } },
                 react_1.default.createElement(icons_1.Magnify, null)), noGrow: true, allowUndo: false, onClickOutsideWithNoValue: null, onSubmit: (v, enterPressed) => (0, helpers_1.debounce)(() => {
                 p.setSearchText(v, enterPressed);
             }, { key: 'pagesearch', time: 200 }), defaultValue: p.defaultValue }),
         p.searchText && (react_1.default.createElement(CrossIconStyled, { onClick: () => {
                 var _a;
                 (_a = textEditRef.current) === null || _a === void 0 ? void 0 : _a.setValue('');
-                p.setSearchText('', false);
+                p.setSearchText('', true);
             } }))));
-};
-exports.SearchBox = SearchBox;
+});

package/dist/ui/components/TextEdit/CheckboxEdit.js

@@ -60,7 +60,7 @@ const CheckboxEdit = ({ defaultValue, onSubmit, noGrow = false, allowUndo = true
                 else {
                     onSubmit(!value);
                 }
-            }, onKeyPress: (e) => e.key === 'Enter' && value !== defaultValue && onSubmit(value) }),
+            }, onKeyDown: (e) => e.key === 'Enter' && value !== defaultValue && onSubmit(value) }),
         allowUndo && value !== defaultValue && (react_1.default.createElement(Icons, { center: true, enableOverflow: true },
             react_1.default.createElement(common_2.IconD, { style: common_2.iconLeft, onClick: () => value !== defaultValue && onSubmit(value) },
                 react_1.default.createElement(Save_1.Save, null)),

package/dist/ui/components/TextEdit/TextEdit.js

@@ -103,10 +103,8 @@ exports.TextEdit = (0, react_2.forwardRef)((p, ref) => {
             }
             setValue(v);
         },
-        focus: () => {
-            var _a, _b;
-            (_b = (_a = taref.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
-        },
+        focus: () => { var _a; return (_a = taref.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+        getValue: () => { var _a; return (_a = taref.current) === null || _a === void 0 ? void 0 : _a.value; },
     }));
     (0, useOnClickOutside_1.useOnClickOutside)({
         disabled: p.onClickOutsideWithNoValue === null || disableEdit,

package/dist/ui/components/TextEdit/types.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 export interface IRefTextEdit {
     /** Set the internal value of the typed string. Can be used to clear externally */
     setValue: React.Dispatch<React.SetStateAction<string>>;
+    getValue: () => string | undefined;
+    focus: () => void;
 }
 export interface ITextEdit {
     /**

package/dist/ui/components/TextWithButton/index.js

@@ -71,7 +71,7 @@ const TextWithButton = ({ submitText = 'Submit', placeholder, validateF, onSubmi
     const [value, setValue] = (0, react_1.useState)('');
     const valid = !validateF ? true : validateF(value);
     return (react_1.default.createElement(Base, null,
-        react_1.default.createElement(Input, { "data-type": "input", "data-valid": valid, placeholder: placeholder, value: value, onChange: (s) => setValue(s.target.value), onKeyPress: (e) => e.key === 'Enter' && valid && onSubmit(value) }),
+        react_1.default.createElement(Input, { "data-type": "input", "data-valid": valid, placeholder: placeholder, value: value, onChange: (s) => setValue(s.target.value), onKeyDown: (e) => e.key === 'Enter' && valid && onSubmit(value) }),
         react_1.default.createElement(Button, { "data-type": "button", "data-valid": valid, disabled: !valid, onClick: () => valid && onSubmit(value) }, submitText)));
 };
 exports.TextWithButton = TextWithButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ag-common",
-  "version": "0.0.385",
+  "version": "0.0.387",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Andrei Gec <@andreigec> (https://gec.dev/)",