ag-common 0.0.551 → 0.0.553

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

@@ -1,11 +1,12 @@
 import React from 'react';
-export declare const Accordion: ({ title, children, open, setOpen, chevronColour, className, }: {
+export interface IAccordion {
     children: string | JSX.Element | JSX.Element[];
     title: string;
     /** controlled component if provided */
-    open?: boolean | undefined;
+    open?: boolean;
     /** called when openness changes */
-    setOpen?: ((open: boolean) => void) | undefined;
-    chevronColour?: string | undefined;
-    className?: string | undefined;
-}) => React.JSX.Element;
+    setOpen?: (open: boolean) => void;
+    chevronColour?: string;
+    className?: string;
+}
+export declare const Accordion: ({ title, children, open, setOpen, chevronColour, className, }: IAccordion) => React.JSX.Element;

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

@@ -9,7 +9,7 @@ export interface IBorderGradient {
     radius?: string;
     left?: string;
     right?: string;
-    children: JSX.Element | (JSX.Element | string | number | undefined)[];
+    children: React.ReactNode;
     padding?: string;
     onClick?: (e: IOnClick) => void;
     href?: string;

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

@@ -11,6 +11,7 @@ const react_2 = __importDefault(require("react"));
 const object_1 = require("../../../common/helpers/object");
 const colours_1 = require("../../styles/colours");
 const BGcss = (0, react_1.css) `
+  max-height: calc(100% - 6px);
   display: flex;
   border: 0;
   padding: 3px;

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

@@ -37,7 +37,5 @@ const Base = styled_1.default.div `
     transform: rotate(-45deg);
   }
 `;
-const Close = (p) => {
-    return (react_1.default.createElement(Base, Object.assign({}, (0, dom_1.filterDataProps)(p), { className: p.className, onClick: (e) => { var _a; return (_a = p.onClick) === null || _a === void 0 ? void 0 : _a.call(p, e); } })));
-};
+const Close = (p) => (react_1.default.createElement(Base, Object.assign({}, (0, dom_1.filterDataProps)(p), { className: p.className, onClick: (e) => { var _a; return (_a = p.onClick) === null || _a === void 0 ? void 0 : _a.call(p, e); } })));
 exports.Close = Close;

package/dist/ui/components/DropdownList/Base.js

@@ -43,6 +43,7 @@ const Base = styled_1.default.div `
   justify-content: space-between;
   cursor: pointer;
   flex-grow: 0;
+  max-height: 100%;
 `;
 const DropItems = styled_1.default.div `
   flex-flow: column;
@@ -65,6 +66,7 @@ const ListItemStyle = styled_1.default.div `
   padding-left: 0.5rem;
   flex-grow: 1;
   padding: 1rem;
+  height: calc(100% - 2rem);
   cursor: pointer;
   display: flex;
   overflow: hidden;
@@ -120,6 +122,8 @@ function DropdownList(p) {
         const maxLen = 20;
         const newStyle = {
             minWidth: `calc(${maxLen}ch + 2rem)`,
+            filter: `drop-shadow(1px 1px 0.5rem ${shadow})`,
+            maxHeight,
         };
         const minPx = (0, dom_1.convertRemToPixels)(2 + maxLen / 2);
         const offsetLeft = (_b = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetLeft) !== null && _b !== void 0 ? _b : 0;
@@ -138,8 +142,6 @@ function DropdownList(p) {
         else {
             newStyle.top = '0';
         }
-        newStyle.filter = `drop-shadow(1px 1px 0.5rem ${shadow})`;
-        newStyle.maxHeight = maxHeight;
         if (JSON.stringify(style) !== JSON.stringify(newStyle)) {
             setStyle(newStyle);
         }

package/dist/ui/components/OpenApiCodeBlock/OpenApiCodeBlock.js

@@ -14,11 +14,12 @@ const common_1 = require("./helpers/common");
 const Base = styled_1.default.div `
   display: flex;
   flex-flow: column;
-  width: calc(100% - 4rem);
+  width: calc(100% - 2rem);
   flex-grow: 1;
   border: solid 1px #333;
-  margin: 1rem;
   padding: 1rem;
+  overflow-y: auto;
+  max-height: calc(100% - 2rem);
 `;
 const Verb = styled_1.default.div `
   background-color: #333;
@@ -49,7 +50,7 @@ const OpenApiCodeBlock = (p) => {
     }
     const { verb, operation, path } = ops;
     return (react_1.default.createElement(Base, null,
-        react_1.default.createElement(FlexRow_1.FlexRow, { center: true },
+        react_1.default.createElement(FlexRow_1.FlexRow, { center: true, noGrow: true },
             react_1.default.createElement(Verb, null, verb),
             react_1.default.createElement(ApiName, null, (_a = operation.description) !== null && _a !== void 0 ? _a : path)),
         react_1.default.createElement(BlockTitle, null, "Definition"),

package/dist/ui/components/OpenApiCodeBlock/helpers/common.js

@@ -8,7 +8,6 @@ exports.getSecurity = exports.getBodyJson = exports.getOperation = exports.Highl
 const styled_1 = __importDefault(require("@emotion/styled"));
 exports.Highlight = styled_1.default.span `
   color: green;
-  text-transform: capitalize;
 `;
 exports.Highlight2 = styled_1.default.span `
   color: indianred;
@@ -29,7 +28,7 @@ const getApiUrl = (p) => {
 const getFunctionName = (p) => {
     let ret = p.funcF.toString();
     const i1 = ret.indexOf('.') + 1;
-    const i2 = indexOfNumber(ret, '(', 1);
+    const i2 = ret.indexOf('(', i1);
     ret = ret.substring(i1, i2);
     return ret;
 };

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

@@ -1,10 +1,5 @@
 import React from 'react';
-import type { IRefTextEdit } from '../TextEdit/types';
-import type { ISearchDialog, TSearchModalRes } from './types';
-type ISearchBase<T> = ISearchDialog<T> & {
-    onSearchTextChange?: (v: string) => void;
-    onSelectItem?: (v: TSearchModalRes<T>) => void;
-    textBoxRef?: React.RefObject<IRefTextEdit>;
-};
+import type { ISearchDialog } from './types';
+type ISearchBase<T> = ISearchDialog<T>;
 export declare const SearchBase: <T>(p: ISearchBase<T>) => React.JSX.Element;
 export {};

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

@@ -38,6 +38,10 @@ const Base = styled_1.default.div `
   flex-flow: column;
   flex-grow: 1;
   width: 100%;
+  height: calc(100% - 1rem);
+  @media ${styles_1.smallScreen} {
+    height: calc(100% - 0.5rem);
+  }
 `;
 const Content = styled_1.default.div `
   width: calc(100% - 2rem);
@@ -46,7 +50,7 @@ const Content = styled_1.default.div `
   flex-flow: column;
   justify-content: flex-start;
   align-items: center;
-  max-height: calc(100vh - 20rem);
+  max-height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
 
@@ -57,16 +61,27 @@ const Content = styled_1.default.div `
   @media ${styles_1.smallScreen} {
     margin: 0;
     width: calc(100% - 0.5rem);
-    margin-top: 1rem;
   }
 `;
-const Row = styled_1.default.div `
+const RowCount = styled_1.default.div `
   width: 100%;
+  text-align: center;
+  width: fit-content;
+  text-decoration-color: currentcolor;
+  text-decoration: underline;
+
+  &[data-top='true'] {
+    padding-bottom: 0.5rem;
+  }
+  &[data-top='false'] {
+    padding-top: 0.5rem;
+  }
 `;
 const SearchBase = (p) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     const { maxDisplayItems = 1000 } = p;
-    const [searchText, setSearchText] = (0, react_1.useState)((_a = p.defaultValue) !== null && _a !== void 0 ? _a : '');
+    const rowCountOptDisplay = (_b = (_a = p === null || p === void 0 ? void 0 : p.rowCountOpt) === null || _a === void 0 ? void 0 : _a.display) !== null && _b !== void 0 ? _b : 'bottom';
+    const [searchText, setSearchText] = (0, react_1.useState)((_c = p.defaultValue) !== null && _c !== void 0 ? _c : '');
     (0, react_1.useImperativeHandle)(p.textBoxRef, () => ({
         setValue: (v) => {
             var _a, _b;
@@ -93,7 +108,7 @@ const SearchBase = (p) => {
     const filteredItemsRaw = p.displayItems.filter((i) => p.willDisplayItem(searchText, i));
     const { part: filteredItems } = (0, array_1.take)(filteredItemsRaw, maxDisplayItems < 0 ? filteredItemsRaw.length : maxDisplayItems);
     const outdiff = filteredItems.length !== p.displayItems.length;
-    const showText = (_d = (_c = (_b = p.texts) === null || _b === void 0 ? void 0 : _b.totalItems) === null || _c === void 0 ? void 0 : _c.call(_b, filteredItems.length, p.displayItems.length)) !== null && _d !== void 0 ? _d : `Showing ${filteredItems.length} out of ${p.displayItems.length} total
+    const showText = (_f = (_e = (_d = p.texts) === null || _d === void 0 ? void 0 : _d.totalItems) === null || _e === void 0 ? void 0 : _e.call(_d, filteredItems.length, p.displayItems.length)) !== null && _f !== void 0 ? _f : `Showing ${filteredItems.length} out of ${p.displayItems.length} total
   items`;
     return (react_1.default.createElement(Base, { className: p.className },
         react_1.default.createElement(SearchBox_1.SearchBox, Object.assign({}, p, { searchText: searchText, setSearchText: (t) => {
@@ -102,10 +117,11 @@ const SearchBase = (p) => {
                 (_a = p.onSearchTextChange) === null || _a === void 0 ? void 0 : _a.call(p, t);
             }, textBoxRef: divRef })),
         react_1.default.createElement(Content, { "data-hasitems": !!filteredItems.length, "data-type": "content" },
+            rowCountOptDisplay === 'top' && outdiff && (react_1.default.createElement(RowCount, { "data-top": "true" }, showText)),
             filteredItems.map((item, index) => (0, react_1.cloneElement)(p.renderItem({ searchText, item, index }), {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 onClick: (e) => resWrap(item, e.target),
             })),
-            outdiff && react_1.default.createElement(Row, null, showText))));
+            rowCountOptDisplay === 'bottom' && outdiff && (react_1.default.createElement(RowCount, { "data-top": "false" }, showText)))));
 };
 exports.SearchBase = SearchBase;

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

@@ -4,4 +4,4 @@ import type { ISearchDialog, TSearchModalRes } from './types';
  * @param p
  * @returns
  */
-export declare const SearchDialog: <T>(p: ISearchDialog<T>) => Promise<TSearchModalRes<T>>;
+export declare const SearchDialog: <T>(p: ISearchDialog<T>) => Promise<TSearchModalRes<T> | undefined>;

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

@@ -1,8 +1,3 @@
 import React from 'react';
-import type { IRefTextEdit } from '../TextEdit/types';
-import type { ISearchInline, TSearchModalRes } from './types';
-export declare const SearchInline: <T>(p: ISearchInline<T> & {
-    onSelectItem?: ((v: TSearchModalRes<T>) => void) | undefined;
-    onSearchTextChange?: ((v: string) => void) | undefined;
-    textBoxRef?: React.RefObject<IRefTextEdit> | undefined;
-}) => React.JSX.Element;
+import type { ISearchInline } from './types';
+export declare const SearchInline: <T>(p: ISearchInline<T>) => React.JSX.Element;

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

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchInline = void 0;
 const react_1 = __importDefault(require("react"));
 const Base_1 = require("./Base");
-const SearchInline = (p) => react_1.default.createElement(Base_1.SearchBase, Object.assign({}, p));
+const SearchInline = (p) => (react_1.default.createElement(Base_1.SearchBase, Object.assign({}, p)));
 exports.SearchInline = SearchInline;

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

@@ -1,5 +1,3 @@
 import React from 'react';
-import type { ISearchModal, TSearchModalRes } from './types';
-export declare const SearchModal: <T>(p: ISearchModal<T> & {
-    onSelectItem: (v: TSearchModalRes<T>) => void;
-}) => React.JSX.Element;
+import type { ISearchModal } from './types';
+export declare const SearchModal: <T>(p: ISearchModal<T>) => React.JSX.Element;

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

@@ -23,6 +23,6 @@ const ModalStyled = (0, styled_1.default)(Modal_1.Modal) `
     max-width: 95vw;
   }
 `;
-const SearchModal = (p) => (react_1.default.createElement(ModalStyled, { position: "center", topPosition: "center", open: true, setOpen: () => p.onSelectItem(undefined), showCloseButton: false, closeOnClickOutside: true },
+const SearchModal = (p) => (react_1.default.createElement(ModalStyled, { position: "center", topPosition: "center", open: true, setOpen: () => { var _a; return (_a = p === null || p === void 0 ? void 0 : p.onSelectItem) === null || _a === void 0 ? void 0 : _a.call(p, undefined); }, showCloseButton: false, closeOnClickOutside: true },
     react_1.default.createElement(Base_1.SearchBase, Object.assign({}, p))));
 exports.SearchModal = SearchModal;

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

@@ -49,6 +49,7 @@ const Base = styled_1.default.div `
     padding: 0.5rem;
     margin: 0;
     width: calc(100% - 1rem);
+    max-height: calc(100% - 1rem);
   }
 `;
 const MagnifyIcon = styled_1.default.div `

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

@@ -3,5 +3,4 @@ export * from './Base';
 export * from './Dialog';
 export * from './Inline';
 export * from './Modal';
-export * from './SearchBox';
 export * from './types';

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

@@ -19,5 +19,4 @@ __exportStar(require("./Base"), exports);
 __exportStar(require("./Dialog"), exports);
 __exportStar(require("./Inline"), exports);
 __exportStar(require("./Modal"), exports);
-__exportStar(require("./SearchBox"), exports);
 __exportStar(require("./types"), exports);

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

@@ -1,4 +1,10 @@
 /// <reference types="react" />
+import type { IRefTextEdit } from '../TextEdit/types';
+export type TSearchModalRes<T> = {
+    foundItem: T;
+    searchText: string;
+    target: EventTarget;
+};
 export interface ISearchDialog<T> {
     defaultValue?: string;
     placeholderText?: string;
@@ -32,11 +38,13 @@ export interface ISearchDialog<T> {
          */
         totalItems?: (showing: number, outof: number) => string;
     };
+    onSearchTextChange?: (v: string) => void;
+    onSelectItem?: (v: TSearchModalRes<T> | undefined) => void;
+    textBoxRef?: React.RefObject<IRefTextEdit>;
+    rowCountOpt?: {
+        /** if provided will change position of row count when some lines are hidden. default bottom */
+        display?: 'bottom' | 'top' | 'off';
+    };
 }
-export type TSearchModalRes<T> = undefined | {
-    foundItem: T;
-    searchText: string;
-    target: EventTarget;
-};
-export type ISearchModal<T> = ISearchDialog<T>;
 export type ISearchInline<T> = ISearchDialog<T>;
+export type ISearchModal<T> = ISearchDialog<T>;

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

@@ -9,15 +9,14 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = __importDefault(require("react"));
 const math_1 = require("../../../common/helpers/math");
 const Base = styled_1.default.div `
-  width: calc(100% - 2px - 1rem);
-  height: 100%;
+  width: calc(100% - 1rem - 2px);
+  height: calc(100% - 1rem - 2px);
   border: solid 1px #666;
   border-radius: 0.5rem;
   padding: 0.5rem;
 `;
 const Points = styled_1.default.div `
   position: relative;
-
   width: 100%;
   height: 100%;
 `;

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

@@ -12,6 +12,8 @@ const Base = styled_1.default.div `
   display: flex;
   flex-flow: column;
   width: 100%;
+  max-height: 100%;
+  overflow-y: auto;
 `;
 const TableRow = styled_1.default.div `
   display: flex;

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

@@ -1,13 +1,14 @@
 import React from 'react';
-export declare const CheckboxEdit: ({ defaultValue, onSubmit, noGrow, allowUndo, rightSpan, className, }: {
-    className?: string | undefined;
+export interface ICheckboxEdit {
+    className?: string;
     defaultValue: boolean;
     onSubmit: (val: boolean) => void;
-    noGrow?: boolean | undefined;
+    noGrow?: boolean;
     /**
      * if true, will add undo button after changes. if false, will submit after every keypress. default true
      */
-    allowUndo?: boolean | undefined;
+    allowUndo?: boolean;
     /** display to right of CB */
     rightSpan?: React.ReactNode;
-}) => React.JSX.Element;
+}
+export declare const CheckboxEdit: ({ defaultValue, onSubmit, noGrow, allowUndo, rightSpan, className, }: ICheckboxEdit) => React.JSX.Element;

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

@@ -1,9 +1,10 @@
 import React from 'react';
-export declare const TextWithButton: ({ submitText, placeholder, validateF, onSubmit, }: {
+export interface ITextWithButton {
     /** default "Submit" */
-    submitText?: string | undefined;
-    placeholder?: string | undefined;
+    submitText?: string;
+    placeholder?: string;
     /** if provided will validate and block submission accordingly */
-    validateF?: ((s: string) => boolean) | undefined;
+    validateF?: (s: string) => boolean;
     onSubmit: (s: string) => void;
-}) => React.JSX.Element;
+}
+export declare const TextWithButton: ({ submitText, placeholder, validateF, onSubmit, }: ITextWithButton) => React.JSX.Element;

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

@@ -33,6 +33,7 @@ const react_1 = __importStar(require("react"));
 const Base = styled_1.default.div `
   display: flex;
   flex-flow: row;
+  max-height: 100%;
 `;
 const Input = styled_1.default.input `
   flex-grow: 1;

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

@@ -8,16 +8,15 @@ export type ITimelineItem = {
     checked: false;
     disabled?: boolean;
 });
-export declare const Timeline: ({ lineColour, items, onClick, maxCircleSize, className, bgColour, showTitles, }: {
+export interface ITimeline {
     /** default min(5vw,3rem) */
-    maxCircleSize?: string | undefined;
+    maxCircleSize?: string;
     /** default #ccc */
-    lineColour?: string | undefined;
+    lineColour?: string;
     items: ITimelineItem[];
-    onClick?: ((p: ITimelineItem) => void) | undefined;
-    className?: string | undefined;
-    /** used for behind icons. default inherit */
-    bgColour?: string | undefined;
+    onClick?: (p: ITimelineItem) => void;
+    className?: string;
     /** if true, will show titles under timeline. default true */
-    showTitles?: boolean | undefined;
-}) => React.JSX.Element;
+    showTitles?: boolean;
+}
+export declare const Timeline: ({ lineColour, items, onClick, maxCircleSize, className, showTitles, }: ITimeline) => React.JSX.Element;

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

@@ -46,7 +46,7 @@ const Item = styled_1.default.div `
 const Title = styled_1.default.span `
   text-align: center;
 `;
-const Timeline = ({ lineColour = '#ccc', items, onClick, maxCircleSize = 'min(5vw,3rem)', className, bgColour = 'inherit', showTitles = true, }) => {
+const Timeline = ({ lineColour = '#ccc', items, onClick, maxCircleSize = 'min(5vw,3rem)', className, showTitles = true, }) => {
     const firstFalse = items.findIndex((i) => !i.checked && !i.disabled);
     const lastTrue = (0, array_1.findLastIndex)(items, (i) => i.checked);
     return (react_1.default.createElement(Base, { className: className },
@@ -58,7 +58,7 @@ const Timeline = ({ lineColour = '#ccc', items, onClick, maxCircleSize = 'min(5v
                     react_1.default.createElement(Icon_1.Icon, { style: {
                             maxWidth: maxCircleSize,
                             cursor: enabled ? 'pointer' : 'default',
-                        }, onClick: () => enabled && (onClick === null || onClick === void 0 ? void 0 : onClick(p)) }, p.checked ? (react_1.default.createElement(icons_1.Checkmark, { style: { fill: '#60b515', backgroundColor: bgColour } })) : index !== firstFalse ? (react_1.default.createElement(Circle_1.Circle, { style: { fill: '#007cbb', backgroundColor: bgColour }, dotted: p.disabled })) : (react_1.default.createElement(icons_1.CircleDot, { style: { fill: '#007cbb', backgroundColor: bgColour } })))));
+                        }, onClick: () => enabled && (onClick === null || onClick === void 0 ? void 0 : onClick(p)) }, p.checked ? (react_1.default.createElement(icons_1.Checkmark, { style: { fill: '#60b515', backgroundColor: 'inherit' } })) : index !== firstFalse ? (react_1.default.createElement(Circle_1.Circle, { style: { fill: '#007cbb', backgroundColor: 'inherit' }, dotted: p.disabled })) : (react_1.default.createElement(icons_1.CircleDot, { style: { fill: '#007cbb', backgroundColor: 'inherit' } })))));
             })),
         showTitles && items.find((i) => i.title) && (react_1.default.createElement(Row, { style: { marginTop: '1rem' } }, items.map(({ title, key }) => (react_1.default.createElement(Title, { key: key, style: {
                 width: `${100 / items.length}%`,

package/dist/ui/components/TreeChart/base.js

@@ -36,8 +36,8 @@ const common_1 = require("../../styles/common");
 const helpers_1 = require("./helpers");
 const Base = styled_1.default.div `
   border: solid 1px #ccc;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+  max-height: 100%;
+  overflow-y: auto;
 `;
 const NodeChildren = styled_1.default.div `
   display: flex;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.551",
+  "version": "0.0.553",
   "name": "ag-common",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -58,7 +58,7 @@
     "@types/react": "18.2.34",
     "@types/react-dom": "18.2.14",
     "cross-env": "7.0.3",
-    "eslint-config-e7npm": "0.0.50",
+    "eslint-config-e7npm": "0.0.51",
     "jest": "29.7.0",
     "rimraf": "5.0.5",
     "storybook": "7.5.2",