@sebgroup/green-react 2.1.0 → 2.2.0

package/README.md

@@ -42,7 +42,7 @@ yarn
 3. Start the Storybook
 
 ```bash
-yarn storybook react
+npx nx run react:storybook
 ```
 
 4. Start the test runner (or make sure your IDE runs the tests continuously)

package/index.esm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React, { useState, useEffect, useRef, useLayoutEffect, useMemo } from 'react';
+import React, { useState, useEffect, useRef, useLayoutEffect, useMemo, memo, useCallback } from 'react';
 import { randomId, createDatepicker, months, years, debounce, validateClassName, delay, sliderColors, getSliderTrackBackground, createStepper } from '@sebgroup/extract';
 import { getScopedTagName, GdsDropdown, GdsOption } from '@sebgroup/green-core';
 import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles';
@@ -2252,7 +2252,6 @@ const Dropdown = ({
   id,
   informationLabel,
   label,
-  loop,
   multiSelect,
   onChange,
   options,
@@ -2263,12 +2262,10 @@ const Dropdown = ({
   validator,
   value
 }) => {
-  const [selectedOption, setSelectedOption] = React.useState(options.find(o => o.value === value));
   const handleOnChange = e => {
-    var _a, _b;
+    var _a;
     if ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) {
-      setSelectedOption(options.find(o => o[_useValue] === e.detail.value));
-      onChange === null || onChange === void 0 ? void 0 : onChange((_b = e.detail) === null || _b === void 0 ? void 0 : _b.value);
+      onChange === null || onChange === void 0 ? void 0 : onChange(e.detail.value);
     }
   };
   // These adapter functions are used to maintain backwards compatibility with the old interface
@@ -2287,10 +2284,10 @@ const Dropdown = ({
       label: label,
       searchable: searchable,
       multiple: multiSelect,
-      value: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value,
       onchange: handleOnChange,
       invalid: (validator === null || validator === void 0 ? void 0 : validator.indicator) === 'error',
       compareWith: compareWithAdapter,
+      value: value,
       searchFilter: searchFilterAdapter
     }, {
       children: [informationLabel && jsx("span", Object.assign({
@@ -2307,8 +2304,7 @@ const Dropdown = ({
       }, {
         children: (texts === null || texts === void 0 ? void 0 : texts.placeholder) || 'Select'
       })), options.map(option => jsx(CoreOption, Object.assign({
-        value: option[_useValue],
-        selected: option.selected
+        value: option[_useValue]
       }, {
         children: option[_display]
       }), option[_useValue]))]
@@ -4247,6 +4243,61 @@ const RadioGroup = ({
   }));
 };
 
+const TextArea = /*#__PURE__*/memo(_a => {
+  var {
+      autoComplete = 'off',
+      expandableInfo,
+      expandableInfoButtonLabel,
+      id = randomId(),
+      label,
+      info,
+      onChange,
+      role,
+      rows = 4,
+      validator,
+      value,
+      'data-testid': dataTestId
+    } = _a,
+    props = __rest(_a, ["autoComplete", "expandableInfo", "expandableInfoButtonLabel", "id", "label", "info", "onChange", "role", "rows", "validator", "value", 'data-testid']);
+  const [uuid] = useState(id);
+  const [localValue, setLocalValue] = useState(value);
+  useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+  const localOnChange = useCallback(event => {
+    setLocalValue(event.target.value);
+    if (onChange) onChange(event);
+  }, [setLocalValue, onChange]);
+  const ariaDetails = [];
+  if (info) ariaDetails.push(`${uuid}_info`);
+  if (expandableInfo) ariaDetails.push(`gds-expandable-info-${uuid}`);
+  return jsx(FormItem, Object.assign({
+    expandableInfo: expandableInfo,
+    expandableInfoButtonLabel: expandableInfoButtonLabel,
+    inputId: uuid,
+    label: label,
+    labelInformation: info,
+    role: role,
+    validator: validator
+  }, {
+    children: jsx("div", Object.assign({
+      className: "gds-input-wrapper"
+    }, {
+      children: jsx("textarea", Object.assign({
+        "aria-describedby": ariaDetails.length > 0 ? ariaDetails.join(' ') : undefined,
+        autoComplete: autoComplete,
+        className: validator && validateClassName(validator.indicator),
+        id: uuid,
+        onChange: localOnChange,
+        role: role,
+        rows: rows,
+        value: localValue,
+        "data-testid": dataTestId
+      }, props))
+    }))
+  }));
+});
+
 const Flexbox = _a => {
   var {
       alignContent,
@@ -5040,6 +5091,7 @@ const Tabs = ({
 
 const ModalHeader = ({
   header: _header = '',
+  id,
   onClose
 }) => {
   const handleClose = event => {
@@ -5048,9 +5100,11 @@ const ModalHeader = ({
   return jsxs("div", Object.assign({
     className: "header"
   }, {
-    children: [jsx("h3", {
+    children: [jsx("h3", Object.assign({
+      id: id
+    }, {
       children: _header
-    }), jsxs("button", Object.assign({
+    })), jsxs("button", Object.assign({
       className: "close",
       onClick: handleClose
     }, {
@@ -5063,10 +5117,12 @@ const ModalHeader = ({
   }));
 };
 const ModalBody = ({
-  children
+  children,
+  id
 }) => {
   return jsx("div", Object.assign({
-    className: "body"
+    className: "body",
+    id: id
   }, {
     children: children
   }));
@@ -5105,38 +5161,59 @@ const ModalFooter = ({
 const Modal = _a => {
   var {
       type = 'default',
-      isOpen
+      id = randomId(),
+      isOpen,
+      size = 'sm'
     } = _a,
-    props = __rest(_a, ["type", "isOpen"]);
-  const modalContent = () => {
-    switch (type) {
-      case 'slideout':
-        {
-          return jsxs("aside", Object.assign({
-            role: "dialog"
-          }, {
-            children: [jsx(ModalHeader, Object.assign({}, props)), jsx(ModalBody, Object.assign({}, props)), jsx(ModalFooter, Object.assign({}, props))]
-          }));
-        }
-      case 'takeover':
-        {
-          return jsxs("main", Object.assign({
-            role: "dialog"
-          }, {
-            children: [jsx(ModalHeader, Object.assign({}, props)), jsx(ModalBody, Object.assign({}, props)), jsx(ModalFooter, Object.assign({}, props))]
-          }));
-        }
-      default:
-        {
-          return jsxs("section", Object.assign({
-            role: "dialog"
-          }, {
-            children: [jsx(ModalHeader, Object.assign({}, props)), jsx(ModalBody, Object.assign({}, props)), jsx(ModalFooter, Object.assign({}, props))]
-          }));
-        }
-    }
+    props = __rest(_a, ["type", "id", "isOpen", "size"]);
+  const [uuid, _] = useState(id);
+  if (!isOpen) return null;
+  const bodyId = `${uuid}_body`;
+  const headerId = `${uuid}_header`;
+  const dialogProps = {
+    id: uuid,
+    role: 'dialog',
+    "aria-modal": true,
+    "aria-labelledby": headerId,
+    "aria-describedby": bodyId
   };
-  return isOpen ? modalContent() : null;
+  switch (type) {
+    case 'slideout':
+      {
+        let className = undefined;
+        if (size === "lg") className = 'gds-slide-out--960';
+        if (size === "md") className = 'gds-slide-out--768';
+        return jsxs("aside", Object.assign({
+          className: className
+        }, dialogProps, {
+          children: [jsx(ModalHeader, Object.assign({
+            id: headerId
+          }, props)), jsx(ModalBody, Object.assign({
+            id: bodyId
+          }, props)), jsx(ModalFooter, Object.assign({}, props))]
+        }));
+      }
+    case 'takeover':
+      {
+        return jsxs("main", Object.assign({}, dialogProps, {
+          children: [jsx(ModalHeader, Object.assign({
+            id: headerId
+          }, props)), jsx(ModalBody, Object.assign({
+            id: bodyId
+          }, props)), jsx(ModalFooter, Object.assign({}, props))]
+        }));
+      }
+    default:
+      {
+        return jsxs("section", Object.assign({}, dialogProps, {
+          children: [jsx(ModalHeader, Object.assign({
+            id: headerId
+          }, props)), jsx(ModalBody, Object.assign({
+            id: bodyId
+          }, props)), jsx(ModalFooter, Object.assign({}, props))]
+        }));
+      }
+  }
 };
 
-export { Accordion, AlertRibbon as Alert, AlertRibbon, Badge, Button, ButtonGroup, Card, Checkbox, CoreDropdown, CoreOption, Datepicker, Dropdown, EmailInput, Flexbox, Form, FormItem, FormItems, Group, InPageWizardStepCard, Link, List$1 as List, Modal, Navbar, NumberInput, Option, OptionGroup, RadioButton, RadioGroup, RenderInput, Select, Slider, Stepper, Tab, Tabs, Text, TextInput, valueList$1 as ValueList };
+export { Accordion, AlertRibbon as Alert, AlertRibbon, Badge, Button, ButtonGroup, Card, Checkbox, CoreDropdown, CoreOption, Datepicker, Dropdown, EmailInput, Flexbox, Form, FormItem, FormItems, Group, InPageWizardStepCard, Link, List$1 as List, Modal, Navbar, NumberInput, Option, OptionGroup, RadioButton, RadioGroup, RenderInput, Select, Slider, Stepper, Tab, Tabs, Text, TextArea, TextInput, valueList$1 as ValueList };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@sebgroup/green-react",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
   "dependencies": {
-    "@sebgroup/green-core": "^1.0.2",
-    "@sebgroup/chlorophyll": "^2.1.0",
+    "@sebgroup/green-core": "^1.0.3",
+    "@sebgroup/chlorophyll": "^2.2.0",
     "@sebgroup/extract": "^2.0.0",
     "classnames": "^2.3.2"
   },

package/src/lib/dropdown/dropdown.d.ts

@@ -20,9 +20,7 @@ export interface DropdownArgs {
     id?: string;
     informationLabel?: string;
     label?: string;
-    loop?: boolean;
     multiSelect?: boolean;
-    onTouched?: () => void;
     options: DropdownOption[];
     searchFilter?: SearchFilter;
     searchable?: boolean;
@@ -32,12 +30,7 @@ export interface DropdownArgs {
     value?: any;
 }
 export interface DropdownTexts {
-    select?: string;
-    selected?: string;
     placeholder?: string;
-    searchPlaceholder?: string;
-    close?: string;
-    optionsDescription?: string;
 }
 export interface DropdownOption {
     label?: string;
@@ -52,5 +45,5 @@ export declare const CoreOption: import("@lit-labs/react").ReactWebComponent<Gds
 export interface DropdownProps extends DropdownArgs {
     onChange?: OnChange;
 }
-export declare const Dropdown: ({ compareWith, display, id, informationLabel, label, loop, multiSelect, onChange, options, searchFilter, searchable, texts, useValue, validator, value, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Dropdown: ({ compareWith, display, id, informationLabel, label, multiSelect, onChange, options, searchFilter, searchable, texts, useValue, validator, value, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
 export default Dropdown;

package/src/lib/form/index.d.ts

@@ -7,3 +7,4 @@ export * from './group/group';
 export * from './input/input';
 export * from './text/text';
 export * from './radioButton/radioGroup';
+export * from './textarea/textarea';

package/src/lib/form/textarea/textarea.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { IExpandableInformation, ILabelAndLabelInformation, IValidator } from '@sebgroup/extract';
+export interface ITextAreaProps extends IExpandableInformation, ILabelAndLabelInformation, React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
+    label: string;
+    info?: string;
+    validator?: IValidator | undefined;
+    value?: string;
+    'data-testid'?: string;
+}
+export declare const TextArea: import("react").MemoExoticComponent<({ autoComplete, expandableInfo, expandableInfoButtonLabel, id, label, info, onChange, role, rows, validator, value, "data-testid": dataTestId, ...props }: ITextAreaProps) => import("react/jsx-runtime").JSX.Element>;

package/src/lib/modal/modal.d.ts

@@ -8,10 +8,11 @@ export interface ModalProps {
     confirm?: string;
     dismiss?: string;
     size?: Size;
+    id?: string;
     isOpen?: boolean;
     onClose?: ModalEventListener;
     onConfirm?: ModalEventListener;
     onDismiss?: ModalEventListener;
 }
-export declare const Modal: ({ type, isOpen, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Modal: ({ type, id, isOpen, size, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Modal;