ag-common 0.0.237 → 0.0.240

package/dist/api/helpers/validateOpenApi.d.ts

@@ -1,3 +1,4 @@
+import { TGetAndValidateToken } from './validations';
 import { User } from '../../ui/helpers/jwt';
 import { TLang } from '../../common/helpers/i18n';
 import { APIGatewayEvent, APIGatewayProxyResult } from '../types';
@@ -8,7 +9,8 @@ export declare type NextType<T> = ({ event, body, params, userProfile, lang, }:
     userProfile?: User;
     lang: TLang;
 }) => Promise<APIGatewayProxyResult>;
-export declare function validateOpenApi<T>({ event, next, authorized, schema, COGNITO_USER_POOL_ID, jwksRegion, }: {
+export declare function validateOpenApi<T>({ event, next, authorized, schema, COGNITO_USER_POOL_ID, jwksRegion, getAndValidateTokenOverride, }: {
+    getAndValidateTokenOverride?: TGetAndValidateToken;
     COGNITO_USER_POOL_ID: string;
     schema: any;
     event: APIGatewayEvent;

package/dist/api/helpers/validateOpenApi.js

@@ -43,7 +43,7 @@ const getOperation = ({ path, method, resource, schema, }) => {
     const pathParams = (re === null || re === void 0 ? void 0 : re.groups) && JSON.parse(JSON.stringify(re === null || re === void 0 ? void 0 : re.groups));
     return { operation, pathParams };
 };
-function validateOpenApi({ event, next, authorized, schema, COGNITO_USER_POOL_ID, jwksRegion = 'ap-southeast-2', }) {
+function validateOpenApi({ event, next, authorized, schema, COGNITO_USER_POOL_ID, jwksRegion = 'ap-southeast-2', getAndValidateTokenOverride, }) {
     var _a, _b, _c, _d, _e;
     return __awaiter(this, void 0, void 0, function* () {
         if (!schema) {
@@ -104,7 +104,8 @@ function validateOpenApi({ event, next, authorized, schema, COGNITO_USER_POOL_ID
         let error;
         const authHeader = ((_c = event.headers) === null || _c === void 0 ? void 0 : _c.Authorization) || ((_d = event.headers) === null || _d === void 0 ? void 0 : _d.authorization);
         if (authorized === true || (authorized === 'optional' && authHeader)) {
-            ({ error, userProfile } = yield (0, validations_1.getAndValidateToken)({
+            const vf = getAndValidateTokenOverride !== null && getAndValidateTokenOverride !== void 0 ? getAndValidateTokenOverride : validations_1.getAndValidateToken;
+            ({ error, userProfile } = yield vf({
                 tokenRaw: authHeader,
                 COGNITO_USER_POOL_ID,
                 jwksRegion,

package/dist/api/helpers/validations.d.ts

@@ -1,15 +1,16 @@
-import { error } from '../../common/helpers/log';
 import { User } from '../../ui/helpers/jwt';
 import { APIGatewayProxyResult } from '../types';
-export declare const getAndValidateToken: ({ tokenRaw, jwksRegion, COGNITO_USER_POOL_ID, }: {
+export interface IGetAndValidateToken {
     /**
      * default ap-southeast-2
      */
-    jwksRegion?: string | undefined;
-    tokenRaw?: string | undefined;
+    jwksRegion?: string;
+    tokenRaw?: string;
     COGNITO_USER_POOL_ID: string;
-}) => Promise<{
-    error?: APIGatewayProxyResult | undefined;
-    token?: string | undefined;
-    userProfile?: User | undefined;
+}
+export declare type TGetAndValidateToken = (p: IGetAndValidateToken) => Promise<{
+    error?: APIGatewayProxyResult;
+    token?: string;
+    userProfile?: User;
 }>;
+export declare const getAndValidateToken: TGetAndValidateToken;

package/dist/common/helpers/string.d.ts

@@ -60,3 +60,4 @@ export declare const chunkString: (str: string, length: number) => string[];
  * @param splitKeys eg &
  */
 export declare function stringToObject(raw: string, splitKeyValue: string, splitKeys: string): Record<string, string>;
+export declare const indexOfNumber: (str: string, char: string, num?: number) => number | undefined;

package/dist/common/helpers/string.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.stringToObject = exports.chunkString = exports.safeStringify = exports.containsInsensitive = exports.containsInsensitiveIndex = exports.replaceRemove = exports.toTitleCase = exports.niceUrl = exports.truncate = exports.trim = exports.trimSide = exports.csvJSON = exports.fromBase64 = exports.toBase64 = void 0;
+exports.indexOfNumber = exports.stringToObject = exports.chunkString = exports.safeStringify = exports.containsInsensitive = exports.containsInsensitiveIndex = exports.replaceRemove = exports.toTitleCase = exports.niceUrl = exports.truncate = exports.trim = exports.trimSide = exports.csvJSON = exports.fromBase64 = exports.toBase64 = void 0;
 const toBase64 = (str) => Buffer.from(str).toString('base64');
 exports.toBase64 = toBase64;
 const fromBase64 = (str) => Buffer.from(decodeURIComponent(str), 'base64').toString();
@@ -186,3 +186,14 @@ function stringToObject(raw, splitKeyValue, splitKeys) {
     return ret;
 }
 exports.stringToObject = stringToObject;
+const indexOfNumber = (str, char, num = 0) => {
+    let ret = -1;
+    for (let c = 0; c <= num; c += 1) {
+        ret = str.indexOf(char, ret + 1);
+    }
+    if (ret === -1) {
+        return undefined;
+    }
+    return ret;
+};
+exports.indexOfNumber = indexOfNumber;

package/dist/ui/components/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ICodeBlock } from './types';
+export declare const CodeBlock: <TDefaultApi>(p: ICodeBlock<TDefaultApi>) => JSX.Element;

package/dist/ui/components/CodeBlock/CodeBlock.js

@@ -0,0 +1,77 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeBlock = void 0;
+const common_1 = require("./helpers/common");
+const FlexRow_1 = require("../FlexRow");
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Base = styled_components_1.default.div `
+  display: flex;
+  flex-flow: column;
+  width: 100%;
+  flex-grow: 1;
+  border: solid 1px #333;
+  margin: 1rem;
+  padding: 1rem;
+`;
+const Verb = styled_components_1.default.div `
+  background-color: #333;
+  color: white;
+  margin-right: 0.5rem;
+  padding: 0.25rem;
+  font-size: 0.8rem;
+`;
+const ApiName = styled_components_1.default.div `
+  font-weight: bold;
+  font-size: 1.5rem;
+`;
+const BlockTitle = styled_components_1.default.div `
+  color: #333;
+  font-size: 1.2rem;
+  margin-top: 2rem;
+`;
+const Block = styled_components_1.default.div `
+  background-color: rgba(0, 0, 0, 0.1);
+  padding: 1rem;
+  margin-top: 0.5rem;
+`;
+const Curl = styled_components_1.default.div `
+  white-space: pre;
+`;
+const CodeBlock = (p) => {
+    var _a;
+    const { path, verb, error, headerLines, fullApiUrl, bodyLine, operation } = (0, common_1.getLines)(p);
+    if (error || !verb) {
+        return react_1.default.createElement(Base, null, error);
+    }
+    return (react_1.default.createElement(Base, null,
+        react_1.default.createElement(FlexRow_1.FlexRow, { center: 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"),
+        react_1.default.createElement(Block, null,
+            verb.toUpperCase(),
+            " ",
+            path),
+        react_1.default.createElement(BlockTitle, null, "Example Request"),
+        react_1.default.createElement(Block, null,
+            react_1.default.createElement(Curl, null,
+                "curl --request ",
+                verb.toUpperCase(),
+                "\u00A0\\",
+                react_1.default.createElement("br", null),
+                "--url ",
+                react_1.default.createElement(common_1.Highlight, null,
+                    "'",
+                    fullApiUrl,
+                    "'"),
+                "\u00A0\\",
+                react_1.default.createElement("br", null),
+                react_1.default.createElement(react_1.default.Fragment, null, headerLines),
+                react_1.default.createElement("br", null),
+                bodyLine))));
+};
+exports.CodeBlock = CodeBlock;

package/dist/ui/components/CodeBlock/helpers/common.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { ICodeBlock } from '../types';
+export declare const Highlight: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const Highlight2: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const getLines: <TDefaultApi>(p: ICodeBlock<TDefaultApi>) => {
+    error: string;
+    verb?: undefined;
+    path?: undefined;
+    headerLines?: undefined;
+    fullApiUrl?: undefined;
+    bodyLine?: undefined;
+    operation?: undefined;
+} | {
+    verb: string | undefined;
+    path: string | undefined;
+    error: undefined;
+    headerLines: JSX.Element[];
+    fullApiUrl: any;
+    bodyLine: JSX.Element;
+    operation: any;
+};

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

@@ -0,0 +1,107 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLines = exports.Highlight2 = exports.Highlight = void 0;
+const security_1 = require("./security");
+const string_1 = require("../../../../common/helpers/string");
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = __importDefault(require("react"));
+exports.Highlight = styled_components_1.default.span `
+  color: green;
+`;
+exports.Highlight2 = styled_components_1.default.span `
+  color: indianred;
+`;
+const getApiUrl = (p) => {
+    return p.schema.servers[0].url;
+};
+const getFunctionName = (p) => {
+    let ret = p.funcF.toString();
+    const i1 = ret.indexOf('.') + 1;
+    const i2 = (0, string_1.indexOfNumber)(ret, '(', 1);
+    ret = ret.substring(i1, i2);
+    return ret;
+};
+const getOperation = (p) => {
+    let path;
+    let verb;
+    const func = getFunctionName(p);
+    Object.entries(p.schema.paths).forEach(([pathN, ops]) => 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Object.entries(ops).forEach(([verbN, op]) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (op.operationId === func) {
+            path = pathN;
+            verb = verbN;
+        }
+    }));
+    if (!path || !verb) {
+        return { error: 'operation not found' };
+    }
+    const operation = p.schema.paths[path][verb];
+    return { operation, verb, path };
+};
+const getBody = (p) => {
+    const body = p.funcF.toString();
+    const bstart = (0, string_1.indexOfNumber)(body, '(', 1);
+    const bend = !bstart ? undefined : body.lastIndexOf(')');
+    if (!bstart || !bend) {
+        return { content: react_1.default.createElement(react_1.default.Fragment, null), header: react_1.default.createElement(react_1.default.Fragment, null) };
+    }
+    const slice = body.substring(bstart + 1, bend);
+    const json = slice.replace(/([a-zA-Z0-9-]+[^"]):/gim, '"$1":');
+    const nice = JSON.stringify(JSON.parse(json), null, 2);
+    const content = (react_1.default.createElement(react_1.default.Fragment, null,
+        "-d @- <<'EOF'",
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(exports.Highlight2, null, nice),
+        react_1.default.createElement("br", null),
+        "EOF"));
+    const header = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("span", null, "--header "),
+        react_1.default.createElement(exports.Highlight, null,
+            react_1.default.createElement(exports.Highlight, null, "'Content-Type: application/json'"))));
+    return {
+        content,
+        header,
+    };
+};
+const getLines = (p) => {
+    var _a, _b;
+    const ops = getOperation(p);
+    if (ops.error) {
+        return { error: ops.error };
+    }
+    const { operation, path, verb } = ops;
+    const apiUrl = getApiUrl(p);
+    const fullApiUrl = apiUrl + path;
+    const secline = (0, security_1.getSecurityLine)(p, { operation });
+    if (secline.error) {
+        return { error: secline.error };
+    }
+    const bodyLines = (_a = getBody(p)) !== null && _a !== void 0 ? _a : undefined;
+    const headerLines = [];
+    if (secline.content) {
+        headerLines.push(secline.content);
+        headerLines.push(react_1.default.createElement(react_1.default.Fragment, null,
+            ' ',
+            "\\",
+            react_1.default.createElement("br", null)));
+    }
+    if (bodyLines.header) {
+        headerLines.push(bodyLines.header);
+        headerLines.push(react_1.default.createElement(react_1.default.Fragment, null, " \\"));
+    }
+    return {
+        verb,
+        path,
+        error: undefined,
+        headerLines,
+        fullApiUrl,
+        bodyLine: (_b = bodyLines === null || bodyLines === void 0 ? void 0 : bodyLines.content) !== null && _b !== void 0 ? _b : undefined,
+        operation,
+    };
+};
+exports.getLines = getLines;

package/dist/ui/components/CodeBlock/helpers/security.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ICodeBlock } from '../types';
+export declare const getSecurityLine: <TDefaultApi>(p: ICodeBlock<TDefaultApi>, { operation }: {
+    operation: any;
+}) => {
+    error?: string;
+    content: JSX.Element;
+};

package/dist/ui/components/CodeBlock/helpers/security.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSecurityLine = void 0;
+const common_1 = require("./common");
+const string_1 = require("../../../../common/helpers/string");
+const react_1 = __importDefault(require("react"));
+const getSecurityLine = (p, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+{ operation }) => {
+    var _a;
+    const security1 = (_a = operation.security) === null || _a === void 0 ? void 0 : _a[0];
+    const security2 = !security1 ? undefined : Object.keys(security1)[0];
+    const security = !security2
+        ? undefined
+        : p.schema.components.securitySchemes[security2];
+    if (security) {
+        if (security.in !== 'header') {
+            return { error: 'not supported sec in', content: react_1.default.createElement(react_1.default.Fragment, null) };
+        }
+        return {
+            content: (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("span", null, "--header "),
+                react_1.default.createElement(common_1.Highlight, null,
+                    "'",
+                    (0, string_1.toTitleCase)(security.name),
+                    ":",
+                    ' ',
+                    react_1.default.createElement(common_1.Highlight2, null, p.apiKey || '(API KEY)'),
+                    "'"))),
+        };
+    }
+    return { content: react_1.default.createElement(react_1.default.Fragment, null) };
+};
+exports.getSecurityLine = getSecurityLine;

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

@@ -0,0 +1,2 @@
+export * from './CodeBlock';
+export * from './types';

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

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CodeBlock"), exports);
+__exportStar(require("./types"), exports);

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

@@ -0,0 +1,9 @@
+export interface ICodeBlock<TDefaultApi> {
+    /**
+     * openapi schema. eg
+     * const schema: any = require('common/openapi.generated').default;
+     */
+    schema: any;
+    apiKey?: string;
+    funcF: (f: TDefaultApi) => Promise<any>;
+}

package/dist/ui/components/CodeBlock/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -24,11 +24,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownList = void 0;
-const Icon_1 = require("../Icon");
 const dom_1 = require("../../helpers/dom");
 const common_1 = require("../../styles/common");
 const useOnClickOutside_1 = require("../../helpers/useOnClickOutside");
 const colours_1 = require("../../styles/colours");
+const KebabDots_1 = require("../KebabDots");
 const styled_components_1 = __importStar(require("styled-components"));
 const react_1 = __importStar(require("react"));
 const SBase = styled_components_1.default.div `
@@ -43,13 +43,12 @@ const SBase = styled_components_1.default.div `
 const DropItems = styled_components_1.default.div `
   flex-flow: column;
   z-index: 5;
-
   display: none;
-
   background-color: white;
   cursor: default;
   width: 100%;
-  max-width: 95vw;
+  position: absolute;
+  ${({ shadow }) => shadow && (0, common_1.Shadow)(shadow)}
   ${({ maxHeight }) => maxHeight &&
     (0, styled_components_1.css) `
       max-height: ${maxHeight};
@@ -59,25 +58,19 @@ const DropItems = styled_components_1.default.div `
   &[data-open='true'] {
     display: flex;
   }
-  &[data-defaultopen='false'] {
-    position: absolute;
-    ${({ shadow }) => shadow && (0, common_1.Shadow)(shadow)}
-  }
-`;
-const Dots = (react_1.default.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fillRule: "evenodd", clipRule: "evenodd" },
-    react_1.default.createElement("path", { d: "M16 12a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 0117 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 0110 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 013 12z" })));
-const IconStyled = (0, styled_components_1.default)(Icon_1.Icon) `
-  position: absolute;
 `;
-const SList = styled_components_1.default.div `
+const ListItemStyle = styled_components_1.default.div `
   z-index: 1;
   font-weight: 500;
   padding-left: 0.5rem;
   flex-grow: 1;
   padding: 1rem;
   cursor: pointer;
+  display: flex;
+  overflow: hidden;
+  justify-content: center;
+  align-items: center;
   &[data-selected='true'] {
-    cursor: default;
     opacity: 1 !important;
     background-color: ${colours_1.colours.orangeRed} !important;
   }
@@ -95,20 +88,18 @@ const SList = styled_components_1.default.div `
     background-color: rgba(0, 0, 0, 0.2);
   }
 `;
-const List = ({ options, renderF, onChange, state, }) => {
-    return (react_1.default.createElement(react_1.default.Fragment, null, options.map((s, i) => (react_1.default.createElement(SList, { key: renderF(s), "data-selected": s === state, onClick: (e) => {
-            if (s !== state) {
-                onChange(s, i);
-            }
-            e.preventDefault();
-        } }, renderF(s))))));
-};
+const ListItem = ({ render, onChange, selected, }) => (react_1.default.createElement(ListItemStyle, { "data-selected": selected, onClick: (e) => {
+        if (!selected) {
+            onChange === null || onChange === void 0 ? void 0 : onChange();
+        }
+        e.preventDefault();
+    } }, render));
 function DropdownList(p) {
-    const { options, value, placeholder, className, renderF, children, shadow = '#555', maxHeight = '50vh', defaultOpen = false, } = p;
+    const { options, value, placeholder, className, renderF, shadow = '#555', maxHeight = '50vh', } = p;
     const ref = (0, react_1.useRef)(null);
     const [state, setState] = (0, react_1.useState)(value);
-    const [open, setOpen] = (0, react_1.useState)(defaultOpen);
-    (0, useOnClickOutside_1.useOnClickOutside)({ disabled: !open || defaultOpen, ref, moveMouseOutside: false }, () => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    (0, useOnClickOutside_1.useOnClickOutside)({ disabled: !open, ref, moveMouseOutside: false }, () => {
         setOpen(false);
     });
     (0, react_1.useEffect)(() => {
@@ -122,7 +113,7 @@ function DropdownList(p) {
         var _a, _b, _c, _d;
         const maxLen = Math.max(...options.map((s) => renderF(s).length));
         const newStyle = {
-            width: defaultOpen ? '100%' : `calc(${maxLen}ch + 2rem)`,
+            minWidth: `calc(${maxLen}ch + 2rem)`,
         };
         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;
@@ -130,7 +121,7 @@ function DropdownList(p) {
             newStyle.left = '0';
         }
         else {
-            newStyle.right = '1rem';
+            newStyle.right = '0';
         }
         const b = (_d = (_c = ref === null || ref === void 0 ? void 0 : ref.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()) !== null && _d !== void 0 ? _d : { bottom: 0 };
         const ih = typeof window !== 'undefined' ? window.innerHeight : 0;
@@ -139,26 +130,22 @@ function DropdownList(p) {
             newStyle.bottom = '1rem';
         }
         else {
-            newStyle.top = '100%';
+            newStyle.top = '0';
         }
         if (JSON.stringify(style) !== JSON.stringify(newStyle)) {
             setStyle(newStyle);
         }
-    }, [defaultOpen, open, options, renderF, style]);
+    }, [open, options, renderF, style]);
+    const defaultRender = !p.value ? react_1.default.createElement(KebabDots_1.KebabDots, null) : react_1.default.createElement(react_1.default.Fragment, null, p.renderF(p.value));
+    const defaultKey = !p.value ? '(noval)' : p.renderF(p.value);
+    const openDisplay = p.children || (react_1.default.createElement(ListItem, { selected: true, render: defaultRender, key: defaultKey }));
     return (react_1.default.createElement(SBase, { className: className, ref: ref, title: placeholder, onClick: (e) => {
-            if (defaultOpen) {
-                return;
-            }
             e.stopPropagation();
             e.preventDefault();
             setOpen(!open);
         } },
-        react_1.default.createElement(DropItems, { "data-defaultopen": p.defaultOpen, "data-open": open, style: style, shadow: shadow, maxHeight: maxHeight }, open && react_1.default.createElement(List, Object.assign({}, p, { state: state }))),
-        children ||
-            (!defaultOpen && (react_1.default.createElement(IconStyled, { width: "2rem", height: "2rem", onClick: (e) => {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    setOpen(!open);
-                } }, Dots)))));
+        react_1.default.createElement(DropItems, { "data-open": open, style: style, shadow: shadow, maxHeight: maxHeight }, open &&
+            options.map((s, i) => (react_1.default.createElement(ListItem, { key: p.renderF(s), render: p.renderF(s), onChange: () => p.onChange(s, i), selected: s === state })))),
+        openDisplay));
 }
 exports.DropdownList = DropdownList;

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

@@ -1,12 +1,23 @@
 /// <reference types="react" />
 export interface IDropdownList<T> {
+    /**
+     * all items that can be in dropdown
+     */
     options: T[];
+    /**
+     * selected item from options.
+     */
     value?: T;
     onChange: (v: T, index: number) => void;
+    /**
+     * placeholder title for list
+     */
     placeholder?: string;
     className?: string;
+    /**
+     * function to render value
+     */
     renderF: (v: T) => string;
-    children?: JSX.Element;
     /**
      * colour of dropdown shadow. default #555
      */
@@ -16,7 +27,7 @@ export interface IDropdownList<T> {
      */
     maxHeight?: string;
     /**
-     * if true, will show expanded. default false
+     * if not provided, will default display value, then kebab dots
      */
-    defaultOpen?: boolean;
+    children?: JSX.Element;
 }

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const KebabDots: ({ onClick }: {
+    onClick?: (() => Promise<void>) | undefined;
+}) => JSX.Element;

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

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KebabDots = void 0;
+const Icon_1 = require("../Icon");
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Dots = (react_1.default.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fillRule: "evenodd", clipRule: "evenodd" },
+    react_1.default.createElement("path", { d: "M16 12a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 0117 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 0110 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 013 12z" })));
+const IconStyled = (0, styled_components_1.default)(Icon_1.Icon) `
+  position: absolute;
+`;
+const KebabDots = ({ onClick }) => (react_1.default.createElement(IconStyled, { width: "2rem", height: "2rem", onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick() }, Dots));
+exports.KebabDots = KebabDots;

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

@@ -2,13 +2,14 @@ export * from './BorderGradient';
 export * from './Button';
 export * from './Chevron';
 export * from './Close';
+export * from './CodeBlock';
 export * from './Confirm/Dialog';
-export * from './Dropdown';
 export * from './DropdownList';
 export * from './FlexColumn';
 export * from './FlexRow';
 export * from './HeadersRaw';
 export * from './Icon';
+export * from './KebabDots';
 export * from './Loader';
 export * from './LoginButton';
 export * from './LogoutButton';

package/dist/ui/components/index.js

@@ -18,13 +18,14 @@ __exportStar(require("./BorderGradient"), exports);
 __exportStar(require("./Button"), exports);
 __exportStar(require("./Chevron"), exports);
 __exportStar(require("./Close"), exports);
+__exportStar(require("./CodeBlock"), exports);
 __exportStar(require("./Confirm/Dialog"), exports);
-__exportStar(require("./Dropdown"), exports);
 __exportStar(require("./DropdownList"), exports);
 __exportStar(require("./FlexColumn"), exports);
 __exportStar(require("./FlexRow"), exports);
 __exportStar(require("./HeadersRaw"), exports);
 __exportStar(require("./Icon"), exports);
+__exportStar(require("./KebabDots"), exports);
 __exportStar(require("./Loader"), exports);
 __exportStar(require("./LoginButton"), exports);
 __exportStar(require("./LogoutButton"), exports);

package/package.json

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

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

@@ -1,12 +0,0 @@
-import React from 'react';
-export declare const DropdownModal: (p: {
-    options: (string | JSX.Element)[];
-    onSelect?: ((i: number, e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-    position?: "left" | "right" | undefined;
-    topPosition?: "top" | "bottom" | undefined;
-    open: boolean;
-    setOpen: (b: boolean) => void;
-    closeOnMoveMouseOutside?: boolean | undefined;
-    showCloseButton?: boolean | undefined;
-    className?: string | undefined;
-}) => JSX.Element;

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

@@ -1,20 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropdownModal = void 0;
-const Modal_1 = require("../Modal");
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const ModalDropdownStyled = (0, styled_components_1.default)(Modal_1.Modal) `
-  flex-flow: column;
-`;
-const DropdownModal = (p) => (react_1.default.createElement(ModalDropdownStyled, Object.assign({}, p, { className: p.className }), p.options.map((option, index) => (react_1.default.createElement(Modal_1.ModalItem, { key: option, onClick: (e) => {
-        var _a;
-        e.stopPropagation();
-        e.preventDefault();
-        (_a = p.onSelect) === null || _a === void 0 ? void 0 : _a.call(p, index, e);
-        p.setOpen(false);
-    } }, option)))));
-exports.DropdownModal = DropdownModal;

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

@@ -1,13 +0,0 @@
-import React from 'react';
-export declare const Dropdown: ({ options, position, topPosition, onSelect, className, enableHoverOpen, children, }: {
-    className?: string | undefined;
-    options: (string | JSX.Element)[];
-    topPosition?: "top" | "bottom" | undefined;
-    position?: "left" | "right" | undefined;
-    onSelect: (i: number, e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    enableHoverOpen?: boolean | undefined;
-    /**
-     * if not provided, will show ... dots to click to open (default)
-     */
-    children?: JSX.Element | undefined;
-}) => JSX.Element;

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

@@ -1,70 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dropdown = void 0;
-const Modal_1 = require("./Modal");
-const common_1 = require("../../styles/common");
-const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const Base = styled_components_1.default.div `
-  cursor: pointer;
-`;
-const Dots = (react_1.default.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fillRule: "evenodd", clipRule: "evenodd" },
-    react_1.default.createElement("path", { d: "M16 12a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 0117 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 0110 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 013 12z" })));
-const Icon = styled_components_1.default.div `
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  align-items: center;
-  &[data-fixedsize='true'] {
-    width: 1.5rem;
-    height: 1.5rem;
-    top: -0.5rem;
-    right: -0.5rem;
-    position: absolute;
-  }
-  border: solid 1px #ccc;
-  border-radius: 50%;
-  background-color: white;
-`;
-const Dropdown = ({ options, position = 'left', topPosition, onSelect, className, enableHoverOpen = false, children, }) => {
-    const [open, setOpen] = (0, react_1.useState)(false);
-    const child = !children ? (react_1.default.createElement(Icon, { "data-fixedsize": true, onClick: (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            setOpen(!open);
-        } }, Dots)) : (react_1.default.createElement("div", { tabIndex: -1, role: "button", onKeyDown: (e) => e.key === 'Enter' && setOpen(!open), "data-fixedsize": false, onClick: (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            setOpen(!open);
-        } }, children));
-    return (react_1.default.createElement(Base, Object.assign({ onKeyPress: (e) => e.key === 'Enter' && setOpen(!open), onMouseEnter: () => enableHoverOpen && setOpen(true), onMouseLeave: () => enableHoverOpen && setOpen(false), className: className }, common_1.noDrag),
-        child,
-        react_1.default.createElement(Modal_1.DropdownModal, { position: position, topPosition: topPosition, options: options, open: open, setOpen: setOpen, onSelect: onSelect, showCloseButton: false })));
-};
-exports.Dropdown = Dropdown;