@sebgroup/green-react 3.3.0 → 3.4.1

package/README.md

@@ -1,8 +1,12 @@
-# `@sebgroup/green-react`
+<div align="center">
+<img width="600" alt="green-react" src="https://github.com/sebgroup/green/assets/11420341/ad4c9fe3-137f-4230-9ea7-a4de87752aa9">
+<h1>@sebgroup/green-react</h1>
+<p>
+React components with SEB's look and feel.
+</p>
+</div>
 
-> TODO: description
-
-## Install \*
+## Install
 
 ```bash
 npm install --save @sebgroup/green-react
@@ -12,17 +16,18 @@ npm install --save @sebgroup/green-react
 yarn add @sebgroup/green-react
 ```
 
-## Usage \*
+## Use
 
-```
-const greenReact = require('@sebgroup/green-react');
+```tsx
+import { Button } from '@sebgroup/green-react'
 
-// TODO: DEMONSTRATE API
+// Use in your JSX
+<Button>A Green React Button!</Button>
 ```
 
 ### Components
 
-View all components in the Storybook
+View all components in the [React Storybook](https://sebgroup.github.io/green/latest/react/)
 
 ## Develop \*
 
@@ -57,5 +62,3 @@ yarn test react --watch
    1. Test
    2. Code
    3. Refactor
-
-## Commands \*

package/index.esm.js

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { useState, useEffect, useRef, useLayoutEffect, useMemo, forwardRef, useCallback, useId } from 'react';
 import { randomId, validateClassName, debounce, delay, sliderColors, getSliderTrackBackground } from '@sebgroup/extract';
 import { createComponent } from '@lit/react';
-import { getScopedTagName, GdsDatepicker, GdsContextMenu, GdsMenuItem, GdsMenuHeading, GdsDropdown, GdsOption } from '@sebgroup/green-core';
+import { getScopedTagName, GdsDatepicker, GdsContextMenu, GdsMenuItem, GdsMenuHeading, GdsDropdown, GdsOption, GdsGroupedList } from '@sebgroup/green-core';
 import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles';
 import classNames from 'classnames';
 
@@ -2315,8 +2315,7 @@ const Dropdown = _a => {
     } = _a,
     props = __rest(_a, ["compareWith", "display", "id", "informationLabel", "label", "multiSelect", "onChange", "options", "searchFilter", "searchable", "texts", "useValue", "validator", "value", "syncPopoverWidth"]);
   const handleOnChange = e => {
-    var _a;
-    if ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) {
+    if ('value' in e.detail) {
       onChange === null || onChange === void 0 ? void 0 : onChange(e.detail.value);
     }
   };
@@ -4446,7 +4445,7 @@ const Link = _a => {
   }));
 };
 
-const ListItem = _a => {
+const ListItem$1 = _a => {
   var {
       listType,
       tableRowData,
@@ -4480,7 +4479,7 @@ const List$1 = _a => {
     props = __rest(_a, ["listType", "tableCaption", "tableData", "children"]);
   if (listType === 'ordered') {
     return jsx("ol", Object.assign({}, props, {
-      children: children === null || children === void 0 ? void 0 : children.map((child, index) => jsx(ListItem, {
+      children: children === null || children === void 0 ? void 0 : children.map((child, index) => jsx(ListItem$1, {
         children: child
       }, index))
     }));
@@ -4488,7 +4487,7 @@ const List$1 = _a => {
     return jsx("ul", Object.assign({}, props, {
       className: listType
     }, {
-      children: children === null || children === void 0 ? void 0 : children.map((child, index) => jsx(ListItem, {
+      children: children === null || children === void 0 ? void 0 : children.map((child, index) => jsx(ListItem$1, {
         children: child
       }, index))
     }));
@@ -4499,7 +4498,7 @@ const List$1 = _a => {
       }, {
         children: tableCaption
       })), jsx("dl", {
-        children: tableData === null || tableData === void 0 ? void 0 : tableData.map((data, index) => jsx(ListItem, {
+        children: tableData === null || tableData === void 0 ? void 0 : tableData.map((data, index) => jsx(ListItem$1, {
           listType: listType,
           tableRowData: data
         }, index))
@@ -4548,6 +4547,18 @@ var valueList$1 = /*#__PURE__*/Object.freeze({
 	'default': valueList
 });
 
+registerTransitionalStyles();
+const GroupedList = createComponent({
+  tagName: getScopedTagName('gds-grouped-list'),
+  elementClass: GdsGroupedList,
+  react: React
+});
+const ListItem = createComponent({
+  tagName: getScopedTagName('gds-list-item'),
+  elementClass: GdsGroupedList,
+  react: React
+});
+
 //TODO: Add variants
 const Navbar = ({
   children,
@@ -6494,4 +6505,4 @@ const Table = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((_a, ref) =
   }));
 }));
 
-export { Accordion, AlertRibbon as Alert, AlertRibbon, Badge, Button, ButtonGroup, Card, Checkbox, ContextMenu, CoreDatepicker, CoreDropdown, CoreMenuHeading, CoreOption, Datepicker, Dropdown, EmailInput, Flexbox, Form, FormItem, FormItems, Group, IconButton, InPageWizardStepCard, Input, Link, List$1 as List, MenuItem, Modal, Navbar, NumberInput, Option, OptionGroup, RadioButton, RadioGroup, Select, Slider, SortDirection, Stepper, Tab, Table, TableBody, TableCell, TableContext, TableHeader, TableHeaderCell, TableRow, Tabs, Text, TextArea, TextInput, valueList$1 as ValueList, filterArrayByColumns, onRowSelect, paginate, searchTextByColumns, sortArray, sumCols, useTableContext };
+export { Accordion, AlertRibbon as Alert, AlertRibbon, Badge, Button, ButtonGroup, Card, Checkbox, ContextMenu, CoreDatepicker, CoreDropdown, CoreMenuHeading, CoreOption, Datepicker, Dropdown, EmailInput, Flexbox, Form, FormItem, FormItems, Group, GroupedList, IconButton, InPageWizardStepCard, Input, Link, List$1 as List, ListItem, MenuItem, Modal, Navbar, NumberInput, Option, OptionGroup, RadioButton, RadioGroup, Select, Slider, SortDirection, Stepper, Tab, Table, TableBody, TableCell, TableContext, TableHeader, TableHeaderCell, TableRow, Tabs, Text, TextArea, TextInput, valueList$1 as ValueList, filterArrayByColumns, onRowSelect, paginate, searchTextByColumns, sortArray, sumCols, useTableContext };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@sebgroup/green-react",
-  "version": "3.3.0",
+  "version": "3.4.1",
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
   "dependencies": {
-    "@sebgroup/green-core": "^1.7.0",
-    "@sebgroup/chlorophyll": "^3.1.0",
+    "@sebgroup/green-core": "^1.8.0",
+    "@sebgroup/chlorophyll": "^3.1.1",
     "@sebgroup/extract": "^3.0.1",
     "@lit/react": "^1.0.2",
     "classnames": "^2.3.2"

package/src/index.d.ts

@@ -10,6 +10,7 @@ export * from './lib/layout';
 export * from './lib/in-page-wizard';
 export * from './lib/link/link';
 export * from './lib/list';
+export * from './lib/grouped-list/grouped-list';
 export * from './lib/navbar/navbar';
 export * from './lib/select';
 export * from './lib/slider';

package/src/lib/grouped-list/grouped-list.d.ts

@@ -0,0 +1,3 @@
+import { GdsGroupedList } from '@sebgroup/green-core';
+export declare const GroupedList: import("@lit/react").ReactWebComponent<GdsGroupedList, {}>;
+export declare const ListItem: import("@lit/react").ReactWebComponent<GdsGroupedList, {}>;