ag-common 0.0.243 → 0.0.246

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

@@ -58,6 +58,7 @@ const DropItems = styled_components_1.default.div `
   &[data-open='true'] {
     display: flex;
   }
+  ${(0, common_1.bounce)('data-bounced')}
 `;
 const ListItemStyle = styled_components_1.default.div `
   z-index: 1;
@@ -70,14 +71,16 @@ const ListItemStyle = styled_components_1.default.div `
   overflow: hidden;
   justify-content: center;
   align-items: center;
-  &[data-selected='true'] {
-    opacity: 1 !important;
-    background-color: ${colours_1.colours.orangeRed} !important;
-  }
-  &[data-selected='false'] {
-    &:hover {
-      opacity: 0.9 !important;
-      background-color: ${colours_1.colours.orange} !important;
+  &[data-default='false'] {
+    &[data-selected='true'] {
+      opacity: 1 !important;
+      background-color: ${colours_1.colours.orangeRed} !important;
+    }
+    &[data-selected='false'] {
+      &:hover {
+        opacity: 0.9 !important;
+        background-color: ${colours_1.colours.orange} !important;
+      }
     }
   }
 
@@ -88,7 +91,7 @@ const ListItemStyle = styled_components_1.default.div `
     background-color: rgba(0, 0, 0, 0.2);
   }
 `;
-const ListItem = ({ render, onChange, selected, }) => (react_1.default.createElement(ListItemStyle, { "data-selected": selected, onClick: (e) => {
+const ListItem = ({ render, onChange, selected, defaultV = false, }) => (react_1.default.createElement(ListItemStyle, { "data-selected": selected, "data-default": defaultV, onClick: (e) => {
         if (!selected) {
             onChange === null || onChange === void 0 ? void 0 : onChange();
         }
@@ -99,8 +102,10 @@ function DropdownList(p) {
     const ref = (0, react_1.useRef)(null);
     const [state, setState] = (0, react_1.useState)(value);
     const [open, setOpen] = (0, react_1.useState)(false);
+    const [bounced, setBounced] = (0, react_1.useState)(false);
     (0, useOnClickOutside_1.useOnClickOutside)({ disabled: !open, ref, moveMouseOutside: false }, () => {
         setOpen(false);
+        setBounced(false);
     });
     (0, react_1.useEffect)(() => {
         const newv = value;
@@ -138,13 +143,18 @@ function DropdownList(p) {
     }, [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 }));
+    const openDisplay = p.children || (react_1.default.createElement(ListItem, { selected: true, render: defaultRender, key: defaultKey, defaultV: !p.value }));
+    (0, react_1.useEffect)(() => {
+        if (!bounced && open) {
+            setBounced(true);
+        }
+    }, [bounced, open]);
     return (react_1.default.createElement(SBase, { className: className, ref: ref, title: placeholder, onClick: (e) => {
             e.stopPropagation();
             e.preventDefault();
             setOpen(!open);
         } },
-        react_1.default.createElement(DropItems, { "data-open": open, style: style, shadow: shadow, maxHeight: maxHeight }, open &&
+        react_1.default.createElement(DropItems, { "data-open": open, style: style, shadow: shadow, maxHeight: maxHeight, "data-bounced": bounced }, 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));
 }

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

@@ -11,7 +11,6 @@ const Dots = (react_1.default.createElement("svg", { viewBox: "0 0 24 24", xmlns
     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;
-  background-color: white;
 `;
 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/Modal/index.js

@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = exports.ModalItem = void 0;
 const Close_1 = require("../Close");
 const useOnClickOutside_1 = require("../../helpers/useOnClickOutside");
+const styles_1 = require("../../styles");
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const FixedBackground = styled_components_1.default.div `
@@ -65,6 +66,7 @@ const ModalBase = styled_components_1.default.div `
   &[data-topposition='bottom'] {
     bottom: 0;
   }
+  ${(0, styles_1.bounce)('data-bounced')}
 `;
 exports.ModalItem = styled_components_1.default.div `
   display: flex;
@@ -78,6 +80,7 @@ const CloseStyled = (0, styled_components_1.default)(Close_1.Close) `
   z-index: 1;
 `;
 const Modal = ({ open, setOpen, children, position = 'left', topPosition = 'top', showCloseButton = true, closeOnMoveMouseOutside = false, className, closeOnClickOutside = true, }) => {
+    const [bounced, setBounced] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
     (0, useOnClickOutside_1.useOnClickOutside)({
         disabled: !open,
@@ -86,13 +89,19 @@ const Modal = ({ open, setOpen, children, position = 'left', topPosition = 'top'
     }, () => {
         if (closeOnClickOutside && open) {
             setOpen(false);
+            setBounced(false);
         }
     });
+    (0, react_1.useEffect)(() => {
+        if (!bounced && open) {
+            setBounced(true);
+        }
+    }, [open, bounced]);
     if (!open) {
         return react_1.default.createElement(react_1.default.Fragment, null);
     }
     return (react_1.default.createElement(FixedBackground, null,
-        react_1.default.createElement(ModalBase, { "data-position": position, "data-topposition": topPosition, ref: ref, className: className },
+        react_1.default.createElement(ModalBase, { "data-bounced": bounced, "data-position": position, "data-topposition": topPosition, ref: ref, className: className },
             showCloseButton && react_1.default.createElement(CloseStyled, { onClick: () => setOpen(false) }),
             children)));
 };

package/dist/ui/components/OpenApiCodeBlock/fetch/helpers/call.js

@@ -6,18 +6,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getFetchCall = void 0;
 const common_1 = require("../../helpers/common");
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const rb = react_1.default.createElement(react_1.default.Fragment, null, "}");
-const lb = react_1.default.createElement(react_1.default.Fragment, null, "{");
-const Lpad = styled_components_1.default.div `
-  padding-left: 0.5rem;
-`;
 const getFetchCall = (p, ops) => {
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(common_1.Highlight, null, "const"),
         "\u00A0response = ",
         react_1.default.createElement(common_1.Highlight, null, "await"),
         ' ',
-        react_1.default.createElement(common_1.Highlight2, null, "fetch")));
+        react_1.default.createElement(common_1.Highlight2, null, "fetch"),
+        "(",
+        react_1.default.createElement(common_1.Highlight, null,
+            "'",
+            ops.fullApiUrl,
+            "'"),
+        ",\u00A0 requestOptions);"));
 };
 exports.getFetchCall = getFetchCall;

package/dist/ui/styles/common.d.ts

@@ -14,3 +14,4 @@ export declare const noDrag: {
     onTouchStart: React.TouchEventHandler<HTMLDivElement>;
 };
 export declare const FullScreenPage: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const bounce: (bounceattr: string) => import("styled-components").FlattenSimpleInterpolation;

package/dist/ui/styles/common.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FullScreenPage = exports.noDrag = exports.Card = exports.FadeBottom = exports.CssTransparentBlock = exports.TextOverflowEllipsis = exports.NoTextSelect = exports.Shadow = exports.HardOutline = void 0;
+exports.bounce = exports.FullScreenPage = exports.noDrag = exports.Card = exports.FadeBottom = exports.CssTransparentBlock = exports.TextOverflowEllipsis = exports.NoTextSelect = exports.Shadow = exports.HardOutline = void 0;
 const colours_1 = require("./colours");
 const styled_components_1 = __importStar(require("styled-components"));
 const HardOutline = (colour) => (0, styled_components_1.css) `
@@ -116,3 +116,13 @@ exports.FullScreenPage = styled_components_1.default.div `
   align-content: flex-start;
   align-items: flex-start;
 `;
+const bounce = (bounceattr) => (0, styled_components_1.css) `
+  transition: opacity 0.2s ease,
+    transform 0.2s cubic-bezier(0.02, 1.5, 0.74, 1.23);
+  transform-origin: 50% 50%;
+  transform: translateY(-5px);
+  &[${bounceattr}='true'] {
+    transform: translateY(0);
+  }
+`;
+exports.bounce = bounce;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ag-common",
-  "version": "0.0.243",
+  "version": "0.0.246",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Andrei Gec <@andreigec> (https://gec.dev/)",
@@ -30,7 +30,7 @@
     "typescript": "4.x"
   },
   "devDependencies": {
-    "@babel/core": "7.17.9",
+    "@babel/core": "7.17.10",
     "@storybook/addon-actions": "6.4.22",
     "@storybook/addon-docs": "6.4.22",
     "@storybook/addon-essentials": "6.4.22",
@@ -40,14 +40,14 @@
     "@storybook/react": "6.4.22",
     "@storybook/theming": "6.4.22",
     "@types/jsonwebtoken": "8.5.8",
-    "@types/node": "17.0.29",
+    "@types/node": "17.0.32",
     "@types/react": "17.0.43",
     "@types/react-dom": "17.0.14",
     "@types/styled-components": "5.1.25",
-    "@typescript-eslint/eslint-plugin": "5.21.0",
-    "@typescript-eslint/parser": "5.21.0",
+    "@typescript-eslint/eslint-plugin": "5.23.0",
+    "@typescript-eslint/parser": "5.23.0",
     "cross-env": "7.0.3",
-    "eslint": "8.14.0",
+    "eslint": "8.15.0",
     "eslint-config-airbnb-typescript": "17.0.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-import": "2.26.0",