@sebgroup/green-react 1.9.3 → 1.10.0

package/index.js

@@ -2321,6 +2321,9 @@ const Datepicker = (options = {}) => {
   const datepickerTriggerRef = useRef(null);
   const datepickerDialogRef = useRef(null);
   const dateInputRef = useRef(null);
+  options = Object.assign({
+    label: 'Date'
+  }, options);
   const {
     datepicker,
     data,
@@ -2343,7 +2346,7 @@ const Datepicker = (options = {}) => {
       children: [jsx("label", Object.assign({
         htmlFor: id
       }, {
-        children: "Date"
+        children: options.label
       })), jsxs("div", Object.assign({
         className: "group",
         ref: datepickerRef
@@ -2397,13 +2400,15 @@ const Datepicker = (options = {}) => {
             display: "key",
             texts: {
               placeholder: data.monthName
-            }
+            },
+            onChange: datepicker.setMonth
           }), jsx(Dropdown, {
             options: years({}),
             display: "key",
             texts: {
               placeholder: data.year + ''
-            }
+            },
+            onChange: datepicker.setYear
           }), jsx("button", Object.assign({
             className: "link",
             onClick: () => datepicker.add(1, 'months')
@@ -3855,6 +3860,7 @@ $({ global: true, forced: parseInt != $parseInt }, {
   parseInt: $parseInt
 });
 
+const Tab = props => null;
 const Tabs = ({
   list,
   onTabChange,
@@ -3870,10 +3876,10 @@ const Tabs = ({
     }
   };
   return jsxs(Fragment, {
-    children: [jsx("nav", Object.assign({
+    children: [jsxs("nav", Object.assign({
       role: "tablist"
     }, {
-      children: list === null || list === void 0 ? void 0 : list.map((value, index) => jsx("a", Object.assign({
+      children: [!children && (list === null || list === void 0 ? void 0 : list.map((value, index) => jsx("a", Object.assign({
         href: value.disabled ? undefined : value.href || '#',
         onClick: onClick,
         role: "tab",
@@ -3882,14 +3888,28 @@ const Tabs = ({
         "aria-selected": selectedTab === index
       }, {
         children: value.text
-      }), index))
-    })), jsx("section", {
-      children: list === null || list === void 0 ? void 0 : list.map((value, index) => jsx("article", Object.assign({
+      }), index))), children === null || children === void 0 ? void 0 : children.map((tab, index) => jsx("a", Object.assign({
+        href: tab.props.disabled ? undefined : tab.props.href || '#',
+        onClick: onClick,
+        role: "tab",
+        "data-index-number": index,
+        "aria-disabled": tab.props.disabled,
+        "aria-selected": selectedTab === index
+      }, {
+        children: tab.props.title
+      }), index))]
+    })), jsxs("section", {
+      children: [!children && (list === null || list === void 0 ? void 0 : list.map((value, index) => jsx("article", Object.assign({
         role: "tabpanel",
         "aria-hidden": selectedTab !== index
       }, {
         children: value.text
-      }), index))
+      }), index))), children === null || children === void 0 ? void 0 : children.map((tab, index) => jsx("article", Object.assign({
+        role: "tabpanel",
+        "aria-hidden": selectedTab !== index
+      }, {
+        children: tab.props.children
+      }), index))]
     })]
   });
 };
@@ -3995,4 +4015,4 @@ const Modal = _a => {
   return isOpen ? modalContent() : null;
 };
 
-export { Accordion, AlertRibbon as Alert, AlertRibbon, Badge, Button, ButtonGroup, Card, Checkbox, Datepicker, Dropdown, EmailInput, Flexbox, Form, FormItem, FormItems, Group, Link, List$1 as List, Modal, Navbar, NumberInput, Option, OptionGroup, RadioButton, RadioGroup, RenderInput, Select, Slider, Stepper, Tabs, Text, TextInput, valueList$1 as ValueList };
+export { Accordion, AlertRibbon as Alert, AlertRibbon, Badge, Button, ButtonGroup, Card, Checkbox, Datepicker, Dropdown, EmailInput, Flexbox, Form, FormItem, FormItems, Group, Link, List$1 as List, Modal, Navbar, NumberInput, Option, OptionGroup, RadioButton, RadioGroup, RenderInput, Select, Slider, Stepper, Tab, Tabs, Text, TextInput, valueList$1 as ValueList };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@sebgroup/green-react",
-  "version": "1.9.3",
+  "version": "1.10.0",
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
   "dependencies": {
-    "@sebgroup/chlorophyll": "^1.10.2",
-    "@sebgroup/extract": "^1.3.2",
+    "@sebgroup/chlorophyll": "^1.10.3",
+    "@sebgroup/extract": "^1.3.4",
     "classnames": "^2.3.2"
   },
   "description": "React components built on top of @sebgroup/chlorophyll.",

package/src/lib/tabs/tabs.d.ts

@@ -1,13 +1,24 @@
-import { ReactNode } from 'react';
+import { ReactNode, ReactElement, PropsWithChildren } from 'react';
 export interface IList {
     text?: string;
     href?: string;
     disabled?: boolean;
 }
 interface TabsProps {
+    /**
+     * **Deprecated**
+     * @deprecated use `<Tab>` child components instead
+     */
     list?: IList[];
     onTabChange?: (index: number) => void;
-    children?: ReactNode[];
+    children?: ReactElement<TabProps>[];
 }
+export interface TabProps {
+    title: string;
+    disabled?: boolean;
+    href?: string;
+    children?: ReactNode;
+}
+export declare const Tab: (props: PropsWithChildren<TabProps>) => null;
 export declare const Tabs: ({ list, onTabChange, children }: TabsProps) => JSX.Element;
 export default Tabs;