@sebgroup/green-react 1.0.0-beta.42 → 1.0.0-beta.43

package/index.d.ts

@@ -9,3 +9,4 @@ export * from './lib/link/link';
 export * from './lib/badge/badge';
 export * from './lib/stepper/stepper';
 export * from './lib/dropdown/dropdown';
+export * from './lib/datepicker/datepicker';

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useState, useLayoutEffect, useEffect, useMemo, useRef } from 'react';
-import { randomId, validateClassName, createStepper, createDropdown, dropdownValues } from '@sebgroup/extract';
+import { randomId, validateClassName, createStepper, createDropdown, dropdownValues, createDatepicker, months, years } from '@sebgroup/extract';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1094,15 +1094,15 @@ const ModalHeader = ({
   }, {
     children: [jsx("h3", {
       children: _header
-    }), jsx("button", Object.assign({
+    }), jsxs("button", Object.assign({
       className: "close",
       onClick: handleClose
     }, {
-      children: jsx("span", Object.assign({
+      children: [jsx("span", Object.assign({
         className: "sr-only"
       }, {
         children: "Close"
-      }))
+      })), jsx("i", {})]
     }))]
   }));
 };
@@ -1780,17 +1780,23 @@ function Alert({
     if (!isCloseable) {
       setCloseButton(null);
     } else {
-      if (closeText) setCloseButton(jsx(Button, Object.assign({
-        variant: "ghost"
+      if (closeText) setCloseButton(jsxs("button", Object.assign({
+        className: "close"
       }, {
-        children: jsx("span", Object.assign({
+        children: [jsx("span", Object.assign({
           className: "sr-only"
         }, {
           children: closeText
-        }))
-      })));else setCloseButton(jsx("button", {
+        })), jsx("i", {})]
+      })));else setCloseButton(jsxs("button", Object.assign({
         className: "close"
-      }));
+      }, {
+        children: [jsx("span", Object.assign({
+          className: "sr-only"
+        }, {
+          children: "Close"
+        })), jsx("i", {})]
+      })));
     }
   }, [isCloseable, closeText]);
   return jsxs("div", Object.assign({
@@ -2564,12 +2570,12 @@ function Badge(_a) {
   }, {
     children: [jsx("strong", {
       children: children
-    }), isCloseable && jsx("button", Object.assign({
+    }), isCloseable && jsxs("button", Object.assign({
       type: "button",
       className: "close",
       onClick: () => setIsClosed(true)
     }, {
-      children: closeText
+      children: [closeText, jsx("i", {})]
     }))]
   })) : null;
 }
@@ -2935,4 +2941,176 @@ const Dropdown = ({
   }));
 };
 
-export { Alert, Badge, Button, ButtonGroup, Card, Checkbox, Dropdown, EmailInput, Flexbox, Form, FormItems, Group, Link, List, Modal, Navbar, NumberInput, RadioButton, RadioGroup, RenderInput, Stepper, Text, TextInput };
+const useDatepicker = (datepickerRef, datepickerDialogRef, dateInputRef, datepickerTriggerRef, options = {}) => {
+  const dataStub = {
+    formattedSelectedDate: '',
+    calendar: {
+      headers: [],
+      calendarGrid: []
+    }
+  };
+  const [data, setData] = useState(dataStub);
+  const [state, setState] = useState({
+    isActive: false
+  });
+  const datepickerStub = {};
+  const [datepicker, setDatepicker] = useState(datepickerStub);
+  useEffect(() => {
+    if (!datepicker.open && datepickerRef.current && datepickerDialogRef.current && dateInputRef.current && datepickerTriggerRef.current) {
+      setDatepicker(createDatepicker((data, state) => {
+        if (data) setData(data);
+        if (state) setState(state);
+      }, options, datepickerRef.current, datepickerDialogRef.current, dateInputRef.current, datepickerTriggerRef.current));
+    }
+  }, [datepicker, datepickerRef, datepickerDialogRef, dateInputRef, options]);
+  return {
+    datepicker,
+    data,
+    state
+  };
+};
+
+const Datepicker = (options = {}) => {
+  const [uuid] = useState(randomId());
+  const id = `sgr-datepicker-${uuid}`;
+  const datepickerRef = useRef(null);
+  const datepickerTriggerRef = useRef(null);
+  const datepickerDialogRef = useRef(null);
+  const dateInputRef = useRef(null);
+  const {
+    datepicker,
+    data,
+    state
+  } = useDatepicker(datepickerRef, datepickerDialogRef, dateInputRef, datepickerTriggerRef, options);
+  useEffect(() => {
+    var _a;
+
+    const selDateSub = (_a = datepicker.selectedDate$) === null || _a === void 0 ? void 0 : _a.subscribe(newDate => options.onChange && options.onChange(newDate));
+    return () => selDateSub === null || selDateSub === void 0 ? void 0 : selDateSub.unsubscribe();
+  }, [datepicker]);
+
+  const classNames = day => Object.entries({
+    disabled: !day.currentMonth,
+    'sg-date-today': day.today // 'sg-date-holiday': day.holiday,
+
+  }).map(([className, add]) => add ? className : '').join(' ');
+
+  return jsxs(Fragment, {
+    children: [jsxs("div", Object.assign({
+      className: "form-group"
+    }, {
+      children: [jsx("label", Object.assign({
+        htmlFor: id
+      }, {
+        children: "Date"
+      })), jsxs("div", Object.assign({
+        className: "group",
+        ref: datepickerRef
+      }, {
+        children: [jsx("input", {
+          ref: dateInputRef,
+          id: id,
+          type: "text",
+          placeholder: "yyyy-mm-dd",
+          value: data.formattedSelectedDate,
+          onChange: e => datepicker.select(e.target.value)
+        }), jsx("button", Object.assign({
+          ref: datepickerTriggerRef,
+          type: "button",
+          className: "primary",
+          onClick: () => datepicker.toggle()
+        }, {
+          children: jsx("i", Object.assign({
+            className: "sg-icon sg-icon-calendar"
+          }, {
+            children: "Select date"
+          }))
+        }))]
+      })), jsx("span", Object.assign({
+        className: "form-info"
+      }, {
+        children: "Select a date"
+      }))]
+    })), jsx("div", Object.assign({
+      ref: datepickerDialogRef,
+      className: `popover popover-datepicker ${state.isActive ? 'active' : ''}`,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Choose Date"
+    }, {
+      children: state.isActive && jsxs("div", Object.assign({
+        className: "sg-date"
+      }, {
+        children: [jsxs("header", {
+          children: [jsx("button", Object.assign({
+            className: "link",
+            onClick: () => datepicker.sub(1, 'months')
+          }, {
+            children: jsx("i", Object.assign({
+              className: "sg-icon sg-icon-previous"
+            }, {
+              children: "Previous month"
+            }))
+          })), jsx(Dropdown, {
+            options: months({}),
+            texts: {
+              placeholder: data.monthName
+            }
+          }), jsx(Dropdown, {
+            options: years({}),
+            texts: {
+              placeholder: data.year + ''
+            }
+          }), jsx("button", Object.assign({
+            className: "link",
+            onClick: () => datepicker.add(1, 'months')
+          }, {
+            children: jsx("i", Object.assign({
+              className: "sg-icon sg-icon-next"
+            }, {
+              children: "Next month"
+            }))
+          }))]
+        }), jsx("main", {
+          children: jsxs("table", Object.assign({
+            role: "grid"
+          }, {
+            children: [jsx("thead", {
+              children: jsx("tr", {
+                children: data.calendar.headers.map((header, ix) => jsx("th", Object.assign({
+                  scope: "col",
+                  abbr: header.abbr,
+                  className: header.type === 'week' ? 'sg-week-header' : 'sg-day-header'
+                }, {
+                  children: header.displayText
+                }), `week_${ix}`))
+              })
+            }), jsx("tbody", {
+              children: data.calendar.calendarGrid.map((week, ix) => jsxs("tr", {
+                children: [data.calendar.weekNumbers ? jsx("th", Object.assign({
+                  className: "sg-week-number"
+                }, {
+                  children: data.calendar.weekNumbers[ix]
+                })) : '', week.map(day => jsx("td", Object.assign({
+                  "data-date": day.formattedDate,
+                  className: classNames(day),
+                  title: day.today ? 'Today' : '',
+                  tabIndex: day.highlighted || day.selected && !(data === null || data === void 0 ? void 0 : data.highlightedDate) || day.today && !(data === null || data === void 0 ? void 0 : data.highlightedDate) && !(data === null || data === void 0 ? void 0 : data.selectedDate) ? 0 : -1,
+                  role: day.selected ? 'gridcell' : undefined,
+                  "aria-selected": day.selected && !(data === null || data === void 0 ? void 0 : data.highlightedDate) ? true : undefined,
+                  onClick: () => {
+                    day.currentMonth && datepicker.select(day.date);
+                  }
+                }, {
+                  children: day.day
+                }), day.day))]
+              }, `week_${ix}`))
+            })]
+          }))
+        })]
+      }))
+    }))]
+  });
+};
+
+export { Alert, Badge, Button, ButtonGroup, Card, Checkbox, Datepicker, Dropdown, EmailInput, Flexbox, Form, FormItems, Group, Link, List, Modal, Navbar, NumberInput, RadioButton, RadioGroup, RenderInput, Stepper, Text, TextInput };

package/index.umd.js

@@ -1100,15 +1100,15 @@
 	  }, {
 	    children: [jsxRuntime.jsx("h3", {
 	      children: _header
-	    }), jsxRuntime.jsx("button", Object.assign({
+	    }), jsxRuntime.jsxs("button", Object.assign({
 	      className: "close",
 	      onClick: handleClose
 	    }, {
-	      children: jsxRuntime.jsx("span", Object.assign({
+	      children: [jsxRuntime.jsx("span", Object.assign({
 	        className: "sr-only"
 	      }, {
 	        children: "Close"
-	      }))
+	      })), jsxRuntime.jsx("i", {})]
 	    }))]
 	  }));
 	};
@@ -1786,17 +1786,23 @@
 	    if (!isCloseable) {
 	      setCloseButton(null);
 	    } else {
-	      if (closeText) setCloseButton(jsxRuntime.jsx(Button, Object.assign({
-	        variant: "ghost"
+	      if (closeText) setCloseButton(jsxRuntime.jsxs("button", Object.assign({
+	        className: "close"
 	      }, {
-	        children: jsxRuntime.jsx("span", Object.assign({
+	        children: [jsxRuntime.jsx("span", Object.assign({
 	          className: "sr-only"
 	        }, {
 	          children: closeText
-	        }))
-	      })));else setCloseButton(jsxRuntime.jsx("button", {
+	        })), jsxRuntime.jsx("i", {})]
+	      })));else setCloseButton(jsxRuntime.jsxs("button", Object.assign({
 	        className: "close"
-	      }));
+	      }, {
+	        children: [jsxRuntime.jsx("span", Object.assign({
+	          className: "sr-only"
+	        }, {
+	          children: "Close"
+	        })), jsxRuntime.jsx("i", {})]
+	      })));
 	    }
 	  }, [isCloseable, closeText]);
 	  return jsxRuntime.jsxs("div", Object.assign({
@@ -2570,12 +2576,12 @@
 	  }, {
 	    children: [jsxRuntime.jsx("strong", {
 	      children: children
-	    }), isCloseable && jsxRuntime.jsx("button", Object.assign({
+	    }), isCloseable && jsxRuntime.jsxs("button", Object.assign({
 	      type: "button",
 	      className: "close",
 	      onClick: () => setIsClosed(true)
 	    }, {
-	      children: closeText
+	      children: [closeText, jsxRuntime.jsx("i", {})]
 	    }))]
 	  })) : null;
 	}
@@ -2941,12 +2947,185 @@
 	  }));
 	};
 
+	const useDatepicker = (datepickerRef, datepickerDialogRef, dateInputRef, datepickerTriggerRef, options = {}) => {
+	  const dataStub = {
+	    formattedSelectedDate: '',
+	    calendar: {
+	      headers: [],
+	      calendarGrid: []
+	    }
+	  };
+	  const [data, setData] = React.useState(dataStub);
+	  const [state, setState] = React.useState({
+	    isActive: false
+	  });
+	  const datepickerStub = {};
+	  const [datepicker, setDatepicker] = React.useState(datepickerStub);
+	  React.useEffect(() => {
+	    if (!datepicker.open && datepickerRef.current && datepickerDialogRef.current && dateInputRef.current && datepickerTriggerRef.current) {
+	      setDatepicker(extract.createDatepicker((data, state) => {
+	        if (data) setData(data);
+	        if (state) setState(state);
+	      }, options, datepickerRef.current, datepickerDialogRef.current, dateInputRef.current, datepickerTriggerRef.current));
+	    }
+	  }, [datepicker, datepickerRef, datepickerDialogRef, dateInputRef, options]);
+	  return {
+	    datepicker,
+	    data,
+	    state
+	  };
+	};
+
+	const Datepicker = (options = {}) => {
+	  const [uuid] = React.useState(extract.randomId());
+	  const id = `sgr-datepicker-${uuid}`;
+	  const datepickerRef = React.useRef(null);
+	  const datepickerTriggerRef = React.useRef(null);
+	  const datepickerDialogRef = React.useRef(null);
+	  const dateInputRef = React.useRef(null);
+	  const {
+	    datepicker,
+	    data,
+	    state
+	  } = useDatepicker(datepickerRef, datepickerDialogRef, dateInputRef, datepickerTriggerRef, options);
+	  React.useEffect(() => {
+	    var _a;
+
+	    const selDateSub = (_a = datepicker.selectedDate$) === null || _a === void 0 ? void 0 : _a.subscribe(newDate => options.onChange && options.onChange(newDate));
+	    return () => selDateSub === null || selDateSub === void 0 ? void 0 : selDateSub.unsubscribe();
+	  }, [datepicker]);
+
+	  const classNames = day => Object.entries({
+	    disabled: !day.currentMonth,
+	    'sg-date-today': day.today // 'sg-date-holiday': day.holiday,
+
+	  }).map(([className, add]) => add ? className : '').join(' ');
+
+	  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+	    children: [jsxRuntime.jsxs("div", Object.assign({
+	      className: "form-group"
+	    }, {
+	      children: [jsxRuntime.jsx("label", Object.assign({
+	        htmlFor: id
+	      }, {
+	        children: "Date"
+	      })), jsxRuntime.jsxs("div", Object.assign({
+	        className: "group",
+	        ref: datepickerRef
+	      }, {
+	        children: [jsxRuntime.jsx("input", {
+	          ref: dateInputRef,
+	          id: id,
+	          type: "text",
+	          placeholder: "yyyy-mm-dd",
+	          value: data.formattedSelectedDate,
+	          onChange: e => datepicker.select(e.target.value)
+	        }), jsxRuntime.jsx("button", Object.assign({
+	          ref: datepickerTriggerRef,
+	          type: "button",
+	          className: "primary",
+	          onClick: () => datepicker.toggle()
+	        }, {
+	          children: jsxRuntime.jsx("i", Object.assign({
+	            className: "sg-icon sg-icon-calendar"
+	          }, {
+	            children: "Select date"
+	          }))
+	        }))]
+	      })), jsxRuntime.jsx("span", Object.assign({
+	        className: "form-info"
+	      }, {
+	        children: "Select a date"
+	      }))]
+	    })), jsxRuntime.jsx("div", Object.assign({
+	      ref: datepickerDialogRef,
+	      className: `popover popover-datepicker ${state.isActive ? 'active' : ''}`,
+	      role: "dialog",
+	      "aria-modal": "true",
+	      "aria-label": "Choose Date"
+	    }, {
+	      children: state.isActive && jsxRuntime.jsxs("div", Object.assign({
+	        className: "sg-date"
+	      }, {
+	        children: [jsxRuntime.jsxs("header", {
+	          children: [jsxRuntime.jsx("button", Object.assign({
+	            className: "link",
+	            onClick: () => datepicker.sub(1, 'months')
+	          }, {
+	            children: jsxRuntime.jsx("i", Object.assign({
+	              className: "sg-icon sg-icon-previous"
+	            }, {
+	              children: "Previous month"
+	            }))
+	          })), jsxRuntime.jsx(Dropdown, {
+	            options: extract.months({}),
+	            texts: {
+	              placeholder: data.monthName
+	            }
+	          }), jsxRuntime.jsx(Dropdown, {
+	            options: extract.years({}),
+	            texts: {
+	              placeholder: data.year + ''
+	            }
+	          }), jsxRuntime.jsx("button", Object.assign({
+	            className: "link",
+	            onClick: () => datepicker.add(1, 'months')
+	          }, {
+	            children: jsxRuntime.jsx("i", Object.assign({
+	              className: "sg-icon sg-icon-next"
+	            }, {
+	              children: "Next month"
+	            }))
+	          }))]
+	        }), jsxRuntime.jsx("main", {
+	          children: jsxRuntime.jsxs("table", Object.assign({
+	            role: "grid"
+	          }, {
+	            children: [jsxRuntime.jsx("thead", {
+	              children: jsxRuntime.jsx("tr", {
+	                children: data.calendar.headers.map((header, ix) => jsxRuntime.jsx("th", Object.assign({
+	                  scope: "col",
+	                  abbr: header.abbr,
+	                  className: header.type === 'week' ? 'sg-week-header' : 'sg-day-header'
+	                }, {
+	                  children: header.displayText
+	                }), `week_${ix}`))
+	              })
+	            }), jsxRuntime.jsx("tbody", {
+	              children: data.calendar.calendarGrid.map((week, ix) => jsxRuntime.jsxs("tr", {
+	                children: [data.calendar.weekNumbers ? jsxRuntime.jsx("th", Object.assign({
+	                  className: "sg-week-number"
+	                }, {
+	                  children: data.calendar.weekNumbers[ix]
+	                })) : '', week.map(day => jsxRuntime.jsx("td", Object.assign({
+	                  "data-date": day.formattedDate,
+	                  className: classNames(day),
+	                  title: day.today ? 'Today' : '',
+	                  tabIndex: day.highlighted || day.selected && !(data === null || data === void 0 ? void 0 : data.highlightedDate) || day.today && !(data === null || data === void 0 ? void 0 : data.highlightedDate) && !(data === null || data === void 0 ? void 0 : data.selectedDate) ? 0 : -1,
+	                  role: day.selected ? 'gridcell' : undefined,
+	                  "aria-selected": day.selected && !(data === null || data === void 0 ? void 0 : data.highlightedDate) ? true : undefined,
+	                  onClick: () => {
+	                    day.currentMonth && datepicker.select(day.date);
+	                  }
+	                }, {
+	                  children: day.day
+	                }), day.day))]
+	              }, `week_${ix}`))
+	            })]
+	          }))
+	        })]
+	      }))
+	    }))]
+	  });
+	};
+
 	exports.Alert = Alert;
 	exports.Badge = Badge;
 	exports.Button = Button;
 	exports.ButtonGroup = ButtonGroup;
 	exports.Card = Card;
 	exports.Checkbox = Checkbox;
+	exports.Datepicker = Datepicker;
 	exports.Dropdown = Dropdown;
 	exports.EmailInput = EmailInput;
 	exports.Flexbox = Flexbox;

package/lib/accordion/accordion-item.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+interface AccordionItemProps {
+    item: AccordionItemInterface;
+    index: number;
+    uuid: string;
+}
+export interface AccordionItemInterface {
+    label: string;
+    labelElementLevel: 2 | 3 | 4 | 5 | 6;
+    subLabel?: string;
+    content: JSX.Element;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onOpen?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onClose?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+declare const AccordionItem: ({ item, index, uuid }: AccordionItemProps) => JSX.Element;
+export default AccordionItem;

package/lib/accordion/accordion.d.ts

@@ -0,0 +1,6 @@
+import { AccordionItemInterface } from "./accordion-item";
+export interface AccordionInterface {
+    items: AccordionItemInterface[];
+}
+declare const Accordion: ({ items }: AccordionInterface) => JSX.Element;
+export default Accordion;

package/lib/alert/alert.d.ts

@@ -1,5 +1,5 @@
-import { AlertType } from '@sebgroup/extract';
 import { ReactNode } from 'react';
+import { AlertType } from '@sebgroup/extract';
 export interface AlertProps {
     children: ReactNode;
     type: AlertType;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@sebgroup/green-react",
-  "version": "1.0.0-beta.42",
+  "version": "1.0.0-beta.43",
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
   "dependencies": {
-    "@sebgroup/chlorophyll": "^1.0.0-beta.43",
-    "@sebgroup/extract": "^1.0.0-beta.42"
+    "@sebgroup/chlorophyll": "^1.0.0-beta.44",
+    "@sebgroup/extract": "^1.0.0-beta.43"
   },
   "description": "React components built on top of @sebgroup/chlorophyll.",
   "repository": {