@sebgroup/green-react 1.0.0-beta.29 → 1.0.0-beta.33

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 } from '@sebgroup/extract';
+import { randomId, validateClassName, createStepper, createDropdown, dropdownValues } from '@sebgroup/extract';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -2624,7 +2624,8 @@ function Stepper(_a) {
 
   const [stepper, data] = useStepper(props);
   useEffect(() => {
-    if (onChange && data.value) onChange(data.value);
+    if (typeof data.value === 'undefined') return;
+    if (onChange) onChange(data.value);
   }, [data.value]);
 
   const onChangeEvent = e => {
@@ -2860,6 +2861,18 @@ const Dropdown = ({
     onChange,
     validator
   });
+
+  const getListBoxProps = props => {
+    var _a, _b, _c;
+
+    if (Object.keys(props).length === 0) return {
+      role: 'listbox',
+      tabIndex: -1,
+      className: (_c = (_b = (_a = dropdownValues.elements) === null || _a === void 0 ? void 0 : _a.listbox) === null || _b === void 0 ? void 0 : _b.classes) === null || _c === void 0 ? void 0 : _c.join(' ')
+    };
+    return props;
+  };
+
   return jsxs("div", Object.assign({
     className: "form-group"
   }, {
@@ -2871,7 +2884,7 @@ const Dropdown = ({
       children: jsx("span", {
         children: togglerProps.children
       })
-    })), jsxs("div", Object.assign({}, listboxProps, {
+    })), jsxs("div", Object.assign({}, getListBoxProps(listboxProps), {
       ref: listboxRef
     }, {
       children: [jsx("button", Object.assign({

package/index.umd.js

@@ -2630,7 +2630,8 @@
 
 	  const [stepper, data] = useStepper(props);
 	  React.useEffect(() => {
-	    if (onChange && data.value) onChange(data.value);
+	    if (typeof data.value === 'undefined') return;
+	    if (onChange) onChange(data.value);
 	  }, [data.value]);
 
 	  const onChangeEvent = e => {
@@ -2866,6 +2867,18 @@
 	    onChange,
 	    validator
 	  });
+
+	  const getListBoxProps = props => {
+	    var _a, _b, _c;
+
+	    if (Object.keys(props).length === 0) return {
+	      role: 'listbox',
+	      tabIndex: -1,
+	      className: (_c = (_b = (_a = extract.dropdownValues.elements) === null || _a === void 0 ? void 0 : _a.listbox) === null || _b === void 0 ? void 0 : _b.classes) === null || _c === void 0 ? void 0 : _c.join(' ')
+	    };
+	    return props;
+	  };
+
 	  return jsxRuntime.jsxs("div", Object.assign({
 	    className: "form-group"
 	  }, {
@@ -2877,7 +2890,7 @@
 	      children: jsxRuntime.jsx("span", {
 	        children: togglerProps.children
 	      })
-	    })), jsxRuntime.jsxs("div", Object.assign({}, listboxProps, {
+	    })), jsxRuntime.jsxs("div", Object.assign({}, getListBoxProps(listboxProps), {
 	      ref: listboxRef
 	    }, {
 	      children: [jsxRuntime.jsx("button", Object.assign({

package/package.json

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