@sebgroup/green-react 1.0.0-beta.2 → 1.0.0-beta.3

package/lib/dropdown/hooks.d.ts

@@ -1,19 +1,19 @@
-import { DropdownOption } from '@sebgroup/extract';
-import { HTMLAttributes } from 'react';
+import { DropdownHandler, DropdownOption } from '@sebgroup/extract';
+import { HTMLAttributes, RefObject } from 'react';
 interface HookArgs {
     id?: string;
     text?: string;
     options: DropdownOption[];
     loop?: boolean;
+    togglerRef: RefObject<HTMLElement>;
+    listboxRef: RefObject<HTMLElement>;
 }
 declare type Props = HTMLAttributes<HTMLElement>;
 interface HookResult {
+    dropdown?: DropdownHandler;
     togglerProps: Props;
     listboxProps: Props;
     listItems: Props[];
-    activate: () => void;
-    deactivate: () => void;
-    close: () => void;
 }
-export declare const useDropdown: ({ id, text, options, loop }: HookArgs) => HookResult;
+export declare const useDropdown: ({ id, text, options, loop, togglerRef, listboxRef }: HookArgs) => HookResult;
 export {};

package/lib/layout/flexbox.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+interface FlexboxProps {
+    alignContent?: 'start' | 'between' | 'center' | 'stretch' | 'around' | 'end';
+    alignItems?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+    alignSelf?: 'auto' | 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+    justifyContent?: 'start' | 'between' | 'center' | 'evenly' | 'around' | 'end';
+}
+export declare const Flexbox: ({ alignContent, alignItems, alignSelf, children, justifyContent, }: PropsWithChildren<FlexboxProps>) => JSX.Element;
+export default Flexbox;

package/lib/layout/index.d.ts

@@ -1 +1,2 @@
+export * from './flexbox';
 export * from './group';

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@sebgroup/green-react",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "@popperjs/core": "^2.11.0",
     "rxjs": "^6.6.7",
     "merge": "^2.1.1"
   },
   "dependencies": {
-    "@sebgroup/chlorophyll": "1.0.0-beta.2",
-    "@sebgroup/extract": "1.0.0-beta.2",
-    "react-popper": "^2.2.5"
+    "@sebgroup/chlorophyll": "^1.0.0-beta.3",
+    "@sebgroup/extract": "^1.0.0-beta.3"
   },
   "description": "React components built on top of @sebgroup/chlorophyll.",
   "repository": {

package/react.esm.js

@@ -1108,38 +1108,6 @@ const Modal = _a => {
   }), void 0);
 };
 
-function Group({
-  children
-}) {
-  return jsx("div", Object.assign({
-    className: "group"
-  }, {
-    children: children
-  }), void 0);
-}
-
-function Card({
-  children,
-  headline,
-  buttons
-}) {
-  return jsx("section", Object.assign({
-    className: "card"
-  }, {
-    children: jsxs("div", Object.assign({
-      className: "card-body"
-    }, {
-      children: [headline && jsx("h2", {
-        children: headline
-      }, void 0), jsx("p", {
-        children: children
-      }, void 0), buttons && jsx("footer", {
-        children: buttons
-      }, void 0)]
-    }), void 0)
-  }), void 0);
-}
-
 var DESCRIPTORS = descriptors;
 var definePropertyModule$1 = objectDefineProperty;
 var anObject$2 = anObject$5;
@@ -1648,6 +1616,68 @@ for (var COLLECTION_NAME in DOMIterables) {
 
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
+const Flexbox = ({
+  alignContent,
+  alignItems,
+  alignSelf,
+  children,
+  justifyContent
+}) => {
+  const [classes, setClasses] = useState(['d-flex']);
+  const [className, setClassName] = useState('d-flex'); // update className when classes change
+
+  useEffect(() => {
+    const newClassName = classes.join(' ');
+    if (newClassName !== className) setClassName(newClassName);
+  }, [classes, className]); // update classes when props change
+
+  useEffect(() => {
+    const newClasses = ['d-flex'];
+    if (alignItems) newClasses.push(`align-items-${alignItems}`);
+    if (alignContent) newClasses.push(`align-content-${alignContent}`);
+    if (alignSelf) newClasses.push(`align-content-${alignSelf}`);
+    if (justifyContent) newClasses.push(`justify-content-${justifyContent}`);
+    setClasses(newClasses);
+  }, [alignContent, alignItems, alignSelf, justifyContent]);
+  return jsx("div", Object.assign({
+    className: className
+  }, {
+    children: children
+  }), void 0);
+};
+
+function Group({
+  children
+}) {
+  return jsx("div", Object.assign({
+    className: "group"
+  }, {
+    children: children
+  }), void 0);
+}
+
+function Card({
+  children,
+  headline,
+  buttons
+}) {
+  return jsx("section", Object.assign({
+    className: "card"
+  }, {
+    children: jsxs("div", Object.assign({
+      className: "card-body"
+    }, {
+      children: [headline && jsx("h2", {
+        children: headline
+      }, void 0), jsx("p", {
+        children: children
+      }, void 0), buttons && jsx("footer", {
+        children: buttons
+      }, void 0)]
+    }), void 0)
+  }), void 0);
+}
+
 function Alert({
   type,
   heading,
@@ -1950,4 +1980,4 @@ const Checkbox = _a => {
   }), void 0);
 };
 
-export { Alert, Button, ButtonGroup, Card, Checkbox, EmailInput, Form, Group, Modal, NumberInput, TextInput };
+export { Alert, Button, ButtonGroup, Card, Checkbox, EmailInput, Flexbox, Form, Group, Modal, NumberInput, TextInput };

package/react.umd.js

@@ -145,6 +145,42 @@
       }), void 0);
     };
 
+    var Flexbox = function Flexbox(_a) {
+      var alignContent = _a.alignContent,
+          alignItems = _a.alignItems,
+          alignSelf = _a.alignSelf,
+          children = _a.children,
+          justifyContent = _a.justifyContent;
+
+      var _b = react.useState(['d-flex']),
+          classes = _b[0],
+          setClasses = _b[1];
+
+      var _c = react.useState('d-flex'),
+          className = _c[0],
+          setClassName = _c[1]; // update className when classes change
+
+
+      react.useEffect(function () {
+        var newClassName = classes.join(' ');
+        if (newClassName !== className) setClassName(newClassName);
+      }, [classes, className]); // update classes when props change
+
+      react.useEffect(function () {
+        var newClasses = ['d-flex'];
+        if (alignItems) newClasses.push("align-items-" + alignItems);
+        if (alignContent) newClasses.push("align-content-" + alignContent);
+        if (alignSelf) newClasses.push("align-content-" + alignSelf);
+        if (justifyContent) newClasses.push("justify-content-" + justifyContent);
+        setClasses(newClasses);
+      }, [alignContent, alignItems, alignSelf, justifyContent]);
+      return jsxRuntime.jsx("div", __assign({
+        className: className
+      }, {
+        children: children
+      }), void 0);
+    };
+
     function Group(_a) {
       var children = _a.children;
       return jsxRuntime.jsx("div", __assign({
@@ -1408,6 +1444,7 @@
     exports.Card = Card;
     exports.Checkbox = Checkbox;
     exports.EmailInput = EmailInput;
+    exports.Flexbox = Flexbox;
     exports.Form = Form;
     exports.Group = Group;
     exports.Modal = Modal;