ag-common 0.0.547 → 0.0.549

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

@@ -10,9 +10,5 @@ export interface ISidebar {
      * optionally pass in SSR cookiedocument
      */
     cookieDocument?: string;
-    /**
-     * default 15rem
-     */
-    width?: string;
 }
-export declare const Sidebar: ({ children, className, key, cookieDocument, width, }: ISidebar) => React.JSX.Element;
+export declare const Sidebar: ({ children, className, key, cookieDocument, }: ISidebar) => React.JSX.Element;

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

@@ -1,23 +1,59 @@
 "use strict";
 'use client';
+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.Sidebar = void 0;
 const styled_1 = __importDefault(require("@emotion/styled"));
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
+const helpers_1 = require("../../helpers");
 const use_1 = require("../../helpers/cookie/use");
 const common_1 = require("../../styles/common");
+const media_1 = require("../../styles/media");
 const Chevron_1 = require("../Chevron");
 const Base = styled_1.default.div `
   position: relative;
   transition: all 200ms;
   border-right: solid 1px #ccc;
   padding-left: 0.5rem;
-  //width set in style
+  height: 100vh;
 
+  &[data-open='true'] {
+    width: 80vw;
+    max-width: 30rem;
+    @media ${media_1.smallScreen} {
+      max-width: unset;
+      position: fixed;
+      top: 0;
+      left: 0;
+    }
+  }
   &[data-open='false'] {
+    width: 0.5rem;
     background-color: rgba(0, 0, 0, 0.1);
     cursor: pointer;
     &:hover,
@@ -37,14 +73,15 @@ const Base = styled_1.default.div `
   }
 `;
 const ContentBlock = styled_1.default.div `
-  height: 100%;
-  left: -18rem;
+  left: -30rem;
   transition: left 200ms;
+  height: 100%;
   &[data-open='false'] {
     position: absolute;
     top: 0;
     z-index: 1;
-    //width set in style
+    width: 80vw;
+    max-width: 30rem;
   }
 `;
 const Content = styled_1.default.div `
@@ -56,12 +93,13 @@ const Content = styled_1.default.div `
   &[data-open='false'] {
     filter: drop-shadow(1px 1px 0.5rem #555);
     border-radius: 1rem;
+    background-color: rgba(255, 255, 255, 0.1);
   }
 `;
 const Hamburger = styled_1.default.div `
   position: absolute;
   transition: all 200ms;
-  z-index: 1;
+  z-index: 2;
   &[data-open='false'] {
     top: 0.5rem;
     left: 0.25rem;
@@ -88,16 +126,23 @@ const ChevronStyled = (0, styled_1.default)(Chevron_1.Chevron) `
     fill: #555;
   }
 `;
-const Sidebar = ({ children, className, key = 'sidebar', cookieDocument, width = '15rem', }) => {
+const Sidebar = ({ children, className, key = 'sidebar', cookieDocument, }) => {
+    const ref = (0, react_1.useRef)(null);
     const [open, setOpen] = (0, use_1.useCookieBoolean)({
         name: key,
         defaultValue: false,
         cookieDocument: cookieDocument,
     });
-    return (react_1.default.createElement(Base, { "data-type": "sidebar", className: className, "data-open": open, onClick: () => !open && setOpen(true), "data-hover": true, style: { width: !open ? '0.5rem' : width } },
+    (0, helpers_1.useOnClickOutside)({ ref }, () => {
+        if (!open || window.innerWidth > media_1.smallScreenPx) {
+            return;
+        }
+        setOpen(false);
+    });
+    return (react_1.default.createElement(Base, { "data-type": "sidebar", className: className, "data-open": open, onClick: () => !open && setOpen(true), "data-hover": true, ref: ref },
         react_1.default.createElement(Hamburger, { "data-open": open, onClick: () => setOpen(!open), "data-hover": true },
             react_1.default.createElement(ChevronStyled, { point: open ? 'left' : 'right', width: "100%" })),
-        react_1.default.createElement(ContentBlock, { "data-type": "content-block", "data-open": open, style: { width: !open ? width : undefined } },
+        react_1.default.createElement(ContentBlock, { "data-type": "content-block", "data-open": open },
             react_1.default.createElement(Content, { "data-type": "content", "data-open": open, onClick: (e) => {
                     e.stopPropagation();
                 } }, children))));

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

@@ -16,7 +16,7 @@ export declare const Timeline: ({ lineColour, items, onClick, maxCircleSize, cla
     items: ITimelineItem[];
     onClick?: ((p: ITimelineItem) => void) | undefined;
     className?: string | undefined;
-    /** used for behind icons. default white */
+    /** used for behind icons. default inherit */
     bgColour?: string | undefined;
     /** if true, will show titles under timeline. default true */
     showTitles?: boolean | undefined;

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

@@ -14,6 +14,7 @@ const Icon_1 = require("../Icon");
 const Base = styled_1.default.div `
   width: 100%;
   overflow: hidden;
+  background-color: inherit;
 `;
 const Row = styled_1.default.div `
   display: flex;
@@ -24,6 +25,8 @@ const Row = styled_1.default.div `
   position: relative;
   width: 100%;
   height: 100%;
+  background-color: inherit;
+  z-index: 0;
 `;
 const Line = styled_1.default.div `
   position: absolute;
@@ -34,7 +37,7 @@ const Line = styled_1.default.div `
   z-index: -1;
 `;
 const Item = styled_1.default.div `
-  background-color: transparent;
+  background-color: inherit;
   width: fit-content;
   height: 100%;
   display: flex;
@@ -43,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 = 'white', showTitles = true, }) => {
+const Timeline = ({ lineColour = '#ccc', items, onClick, maxCircleSize = 'min(5vw,3rem)', className, bgColour = 'inherit', 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 },

package/dist/ui/helpers/useOnClickOutside.d.ts

@@ -1,11 +1,12 @@
 import type { RefObject } from 'react';
 type Event = MouseEvent | TouchEvent;
 export declare function useOnClickOutside<T extends HTMLElement = HTMLElement>(p: {
+    ref: RefObject<T>;
     /**
      * default false
      */
     disabled?: boolean;
-    ref: RefObject<T>;
+    /** if true, will also consider moving mouse outside div. default false */
     moveMouseOutside?: boolean;
 }, handler: (event: Event) => void): void;
 export {};

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.547",
+  "version": "0.0.549",
   "name": "ag-common",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",