@sebgroup/green-react 0.1.0 → 0.2.0

package/index.d.ts

@@ -8,6 +8,7 @@ export * from './lib/navbar/navbar';
 export * from './lib/link/link';
 export * from './lib/badge/badge';
 export * from './lib/stepper/stepper';
+export * from './lib/select';
 export * from './lib/dropdown/dropdown';
 export * from './lib/datepicker/datepicker';
 export { AlertRibbon as Alert } from './lib/alert-ribbon/alert-ribbon';

package/index.esm.js

@@ -1767,7 +1767,7 @@ function Card({
   }));
 }
 
-const squareExclamationIcon = jsx("svg", Object.assign({
+const SquareExclamation = jsx("svg", Object.assign({
   viewBox: "0 0 24 24",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
@@ -1782,7 +1782,7 @@ const squareExclamationIcon = jsx("svg", Object.assign({
   })
 }));
 
-const squareInfoIcon = jsx("svg", Object.assign({
+const SquareInfo = jsx("svg", Object.assign({
   viewBox: "0 0 24 24",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
@@ -1793,7 +1793,7 @@ const squareInfoIcon = jsx("svg", Object.assign({
   })
 }));
 
-const checkIcon = jsx("svg", Object.assign({
+const Check = jsx("svg", Object.assign({
   width: "24",
   height: "24",
   viewBox: "0 0 24 24",
@@ -1806,6 +1806,17 @@ const checkIcon = jsx("svg", Object.assign({
   })
 }));
 
+const ChevronDown = jsx("svg", Object.assign({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 448 512"
+}, {
+  children: jsx("path", {
+    d: "M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z"
+  })
+}));
+
 function AlertRibbon({
   type,
   header,
@@ -1847,13 +1858,13 @@ function AlertRibbon({
     switch (type) {
       case "danger":
       case "warning":
-        return squareExclamationIcon;
+        return SquareExclamation;
 
       case "success":
-        return checkIcon;
+        return Check;
 
       default:
-        return squareInfoIcon;
+        return SquareInfo;
     }
   };
 
@@ -2802,6 +2813,87 @@ function Stepper(_a) {
   }));
 }
 
+const Select = /*#__PURE__*/React.forwardRef(({
+  id,
+  className,
+  children,
+  validator,
+  label,
+  labelInformation,
+  defaultValue,
+  value,
+  testId,
+  onChange,
+  onSelect
+}, ref) => {
+  const selectId = id !== null && id !== void 0 ? id : randomId();
+  const validatorClassName = validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator);
+  return jsx(Fragment, {
+    children: jsx("div", Object.assign({
+      className: `form-group ${validator && 'validated'}`
+    }, {
+      children: jsxs("div", Object.assign({
+        className: "gds--select"
+      }, {
+        children: [label && jsx("label", Object.assign({
+          htmlFor: selectId
+        }, {
+          children: label
+        })), labelInformation && jsx("div", Object.assign({
+          className: "form-info"
+        }, {
+          children: labelInformation
+        })), jsxs("div", Object.assign({
+          className: `gsd--select-wrapper ${validatorClassName}`
+        }, {
+          children: [jsx("select", Object.assign({
+            id: selectId,
+            "data-testid": testId,
+            className: className,
+            defaultValue: defaultValue,
+            value: value,
+            ref: ref,
+            onChange: event => {
+              onChange && onChange(event);
+            }
+          }, {
+            children: children
+          })), ChevronDown]
+        })), (validator === null || validator === void 0 ? void 0 : validator.message) && jsx("div", Object.assign({
+          className: "form-info"
+        }, {
+          children: validator.message
+        }))]
+      }))
+    }))
+  });
+});
+const Option = _a => {
+  var {
+    value,
+    children
+  } = _a,
+      rest = __rest(_a, ["value", "children"]);
+
+  return jsx("option", Object.assign({
+    value: value
+  }, rest, {
+    children: children
+  }));
+};
+const OptionGroup = ({
+  label,
+  disabled,
+  children
+}) => {
+  return jsx("optgroup", Object.assign({
+    label: label,
+    disabled: disabled
+  }, {
+    children: children
+  }));
+};
+
 const useDropdown = ({
   id,
   value,
@@ -3232,4 +3324,4 @@ const Datepicker = (options = {}) => {
   });
 };
 
-export { AlertRibbon as Alert, AlertRibbon, Badge, Button, ButtonGroup, Card, Checkbox, Datepicker, Dropdown, EmailInput, Flexbox, Form, FormItems, Group, Link, List, Modal, Navbar, NumberInput, RadioButton, RadioGroup, RenderInput, Stepper, Text, TextInput };
+export { AlertRibbon as Alert, AlertRibbon, Badge, Button, ButtonGroup, Card, Checkbox, Datepicker, Dropdown, EmailInput, Flexbox, Form, FormItems, Group, Link, List, Modal, Navbar, NumberInput, Option, OptionGroup, RadioButton, RadioGroup, RenderInput, Select, Stepper, Text, TextInput };

package/index.umd.js

@@ -1773,7 +1773,7 @@
 	  }));
 	}
 
-	const squareExclamationIcon = jsxRuntime.jsx("svg", Object.assign({
+	const SquareExclamation = jsxRuntime.jsx("svg", Object.assign({
 	  viewBox: "0 0 24 24",
 	  fill: "none",
 	  xmlns: "http://www.w3.org/2000/svg",
@@ -1788,7 +1788,7 @@
 	  })
 	}));
 
-	const squareInfoIcon = jsxRuntime.jsx("svg", Object.assign({
+	const SquareInfo = jsxRuntime.jsx("svg", Object.assign({
 	  viewBox: "0 0 24 24",
 	  fill: "none",
 	  xmlns: "http://www.w3.org/2000/svg"
@@ -1799,7 +1799,7 @@
 	  })
 	}));
 
-	const checkIcon = jsxRuntime.jsx("svg", Object.assign({
+	const Check = jsxRuntime.jsx("svg", Object.assign({
 	  width: "24",
 	  height: "24",
 	  viewBox: "0 0 24 24",
@@ -1812,6 +1812,17 @@
 	  })
 	}));
 
+	const ChevronDown = jsxRuntime.jsx("svg", Object.assign({
+	  xmlns: "http://www.w3.org/2000/svg",
+	  width: "24",
+	  height: "24",
+	  viewBox: "0 0 448 512"
+	}, {
+	  children: jsxRuntime.jsx("path", {
+	    d: "M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z"
+	  })
+	}));
+
 	function AlertRibbon({
 	  type,
 	  header,
@@ -1853,13 +1864,13 @@
 	    switch (type) {
 	      case "danger":
 	      case "warning":
-	        return squareExclamationIcon;
+	        return SquareExclamation;
 
 	      case "success":
-	        return checkIcon;
+	        return Check;
 
 	      default:
-	        return squareInfoIcon;
+	        return SquareInfo;
 	    }
 	  };
 
@@ -2808,6 +2819,87 @@
 	  }));
 	}
 
+	const Select = /*#__PURE__*/React__default["default"].forwardRef(({
+	  id,
+	  className,
+	  children,
+	  validator,
+	  label,
+	  labelInformation,
+	  defaultValue,
+	  value,
+	  testId,
+	  onChange,
+	  onSelect
+	}, ref) => {
+	  const selectId = id !== null && id !== void 0 ? id : extract.randomId();
+	  const validatorClassName = extract.validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator);
+	  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+	    children: jsxRuntime.jsx("div", Object.assign({
+	      className: `form-group ${validator && 'validated'}`
+	    }, {
+	      children: jsxRuntime.jsxs("div", Object.assign({
+	        className: "gds--select"
+	      }, {
+	        children: [label && jsxRuntime.jsx("label", Object.assign({
+	          htmlFor: selectId
+	        }, {
+	          children: label
+	        })), labelInformation && jsxRuntime.jsx("div", Object.assign({
+	          className: "form-info"
+	        }, {
+	          children: labelInformation
+	        })), jsxRuntime.jsxs("div", Object.assign({
+	          className: `gsd--select-wrapper ${validatorClassName}`
+	        }, {
+	          children: [jsxRuntime.jsx("select", Object.assign({
+	            id: selectId,
+	            "data-testid": testId,
+	            className: className,
+	            defaultValue: defaultValue,
+	            value: value,
+	            ref: ref,
+	            onChange: event => {
+	              onChange && onChange(event);
+	            }
+	          }, {
+	            children: children
+	          })), ChevronDown]
+	        })), (validator === null || validator === void 0 ? void 0 : validator.message) && jsxRuntime.jsx("div", Object.assign({
+	          className: "form-info"
+	        }, {
+	          children: validator.message
+	        }))]
+	      }))
+	    }))
+	  });
+	});
+	const Option = _a => {
+	  var {
+	    value,
+	    children
+	  } = _a,
+	      rest = __rest(_a, ["value", "children"]);
+
+	  return jsxRuntime.jsx("option", Object.assign({
+	    value: value
+	  }, rest, {
+	    children: children
+	  }));
+	};
+	const OptionGroup = ({
+	  label,
+	  disabled,
+	  children
+	}) => {
+	  return jsxRuntime.jsx("optgroup", Object.assign({
+	    label: label,
+	    disabled: disabled
+	  }, {
+	    children: children
+	  }));
+	};
+
 	const useDropdown = ({
 	  id,
 	  value,
@@ -3257,9 +3349,12 @@
 	exports.Modal = Modal;
 	exports.Navbar = Navbar;
 	exports.NumberInput = NumberInput;
+	exports.Option = Option;
+	exports.OptionGroup = OptionGroup;
 	exports.RadioButton = RadioButton;
 	exports.RadioGroup = RadioGroup;
 	exports.RenderInput = RenderInput;
+	exports.Select = Select;
 	exports.Stepper = Stepper;
 	exports.Text = Text;
 	exports.TextInput = TextInput;

package/lib/icons/check.d.ts

@@ -1 +1 @@
-export declare const checkIcon: JSX.Element;
+export declare const Check: JSX.Element;

package/lib/icons/chevronDown.d.ts

@@ -0,0 +1 @@
+export declare const ChevronDown: JSX.Element;

package/lib/icons/index.d.ts

@@ -1,3 +1,4 @@
 export * from './square-exclamation';
 export * from './square-info';
 export * from './check';
+export * from './chevronDown';

package/lib/icons/square-exclamation.d.ts

@@ -1 +1 @@
-export declare const squareExclamationIcon: JSX.Element;
+export declare const SquareExclamation: JSX.Element;

package/lib/icons/square-info.d.ts

@@ -1 +1 @@
-export declare const squareInfoIcon: JSX.Element;
+export declare const SquareInfo: JSX.Element;

package/lib/select/index.d.ts

@@ -0,0 +1 @@
+export * from './select';

package/lib/select/select.d.ts

@@ -0,0 +1,42 @@
+import React, { ReactNode } from 'react';
+import { IValidator } from '@sebgroup/extract';
+export interface SelectProps {
+    id?: string;
+    className?: string;
+    label?: string;
+    labelInformation?: string;
+    children: ReactNode;
+    validator?: IValidator;
+    onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+    onSelect?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+    defaultValue?: string | number;
+    value?: string | number;
+    testId?: string;
+}
+export interface OptionProps {
+    children: string;
+    value: string | number;
+    disabled?: boolean;
+    invalid?: boolean;
+    autocomplete?: string;
+    autofocus?: boolean;
+    form?: string;
+    name?: string;
+    required?: boolean;
+    size?: number;
+    selected?: boolean;
+}
+export interface OptionGroupProps {
+    label: string;
+    children: React.ReactElement<OptionProps> | React.ReactElement<OptionProps>[];
+    disabled?: boolean;
+}
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+export declare const Option: ({ value, children, ...rest }: OptionProps) => JSX.Element;
+export declare const OptionGroup: ({ label, disabled, children, }: OptionGroupProps) => JSX.Element;
+declare const _default: {
+    Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+    Option: ({ value, children, ...rest }: OptionProps) => JSX.Element;
+    OptionGroup: ({ label, disabled, children, }: OptionGroupProps) => JSX.Element;
+};
+export default _default;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sebgroup/green-react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
   "dependencies": {
-    "@sebgroup/chlorophyll": "^0.1.0",
+    "@sebgroup/chlorophyll": "^0.2.0",
     "@sebgroup/extract": "^0.0.1"
   },
   "description": "React components built on top of @sebgroup/chlorophyll.",