ag-common 0.0.236 → 0.0.239

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

@@ -3,7 +3,6 @@ export * from './Button';
 export * from './Chevron';
 export * from './Close';
 export * from './Confirm/Dialog';
-export * from './Dropdown';
 export * from './DropdownList';
 export * from './FlexColumn';
 export * from './FlexRow';

package/dist/ui/components/index.js

@@ -19,7 +19,6 @@ __exportStar(require("./Button"), exports);
 __exportStar(require("./Chevron"), exports);
 __exportStar(require("./Close"), exports);
 __exportStar(require("./Confirm/Dialog"), exports);
-__exportStar(require("./Dropdown"), exports);
 __exportStar(require("./DropdownList"), exports);
 __exportStar(require("./FlexColumn"), exports);
 __exportStar(require("./FlexRow"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ag-common",
-  "version": "0.0.236",
+  "version": "0.0.239",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Andrei Gec <@andreigec> (https://gec.dev/)",
@@ -23,8 +23,8 @@
     "jwks-rsa": "2.x",
     "node-cache": "5.x",
     "openapi-request-validator": "11.0.0",
-    "react": "18.0.0",
-    "react-dom": "18.0.0",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
     "react-hot-toast": "2.x",
     "styled-components": "5.x",
     "typescript": "4.x"
@@ -40,21 +40,21 @@
     "@storybook/react": "6.4.22",
     "@storybook/theming": "6.4.22",
     "@types/jsonwebtoken": "8.5.8",
-    "@types/node": "17.0.25",
+    "@types/node": "17.0.29",
     "@types/react": "17.0.43",
     "@types/react-dom": "17.0.14",
     "@types/styled-components": "5.1.25",
-    "@typescript-eslint/eslint-plugin": "5.20.0",
-    "@typescript-eslint/parser": "5.20.0",
+    "@typescript-eslint/eslint-plugin": "5.21.0",
+    "@typescript-eslint/parser": "5.21.0",
     "cross-env": "7.0.3",
-    "eslint": "8.13.0",
+    "eslint": "8.14.0",
     "eslint-config-airbnb-typescript": "17.0.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-jsx-a11y": "6.5.1",
     "eslint-plugin-prettier": "4.0.0",
     "eslint-plugin-react": "7.29.4",
-    "eslint-plugin-react-hooks": "4.4.0",
+    "eslint-plugin-react-hooks": "4.5.0",
     "prettier": "2.6.2",
     "rimraf": "3.0.2"
   },

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;