@sebgroup/green-react 3.16.0 → 3.18.0

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

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

package/src/lib/form/button/index.js

@@ -0,0 +1,4 @@
+export { Button } from './button.js';
+import '../../../../_tslib.js';
+import 'react/jsx-runtime';
+import 'classnames';

package/src/lib/form/buttonGroup/buttonGroup.js

@@ -0,0 +1,52 @@
+import { _ as _slicedToArray } from '../../../../_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { Button } from '../button/button.js';
+import '../../../../_tslib.js';
+import '@sebgroup/extract';
+import classNames from 'classnames';
+import { Group } from '../group/group.js';
+
+var ButtonGroup = function ButtonGroup(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    selectedIndex = _ref.selectedIndex,
+    variant = _ref.variant,
+    id = _ref.id;
+  var _useState = useState(selectedIndex),
+    _useState2 = _slicedToArray(_useState, 2),
+    selected = _useState2[0],
+    setSelected = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    buttons = _useState4[0],
+    setButtons = _useState4[1];
+  useEffect(function () {
+    var buttonProps = (children instanceof Array ? children : [children]).filter(function (b) {
+      return b && b.props;
+    }).map(function (b, ix) {
+      var bp = b.props;
+      var props = Object.assign(Object.assign({}, bp), {
+        variant: variant,
+        key: bp.key || "btn_".concat(ix),
+        active: ix === selected,
+        onClick: function onClick(e) {
+          setSelected(ix);
+          if (bp.onClick) bp.onClick(e);
+        },
+        className: classNames(bp.className, className)
+      });
+      return props;
+    });
+    setButtons(buttonProps);
+  }, [children, selected, variant, className]);
+  return jsx(Group, {
+    "data-label": "button-group",
+    id: id,
+    children: buttons.map(function (props) {
+      return jsx(Button, Object.assign({}, props), props.key);
+    })
+  });
+};
+
+export { ButtonGroup, ButtonGroup as default };

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

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

package/src/lib/form/buttonGroup/index.js

@@ -0,0 +1,9 @@
+export { ButtonGroup } from './buttonGroup.js';
+import '../../../../_rollupPluginBabelHelpers.js';
+import 'react/jsx-runtime';
+import 'react';
+import '../button/button.js';
+import '../../../../_tslib.js';
+import 'classnames';
+import '@sebgroup/extract';
+import '../group/group.js';

package/src/lib/form/checkbox/checkbox.js

@@ -0,0 +1,48 @@
+import { _ as _slicedToArray, a as _defineProperty } from '../../../../_rollupPluginBabelHelpers.js';
+import { _ as __rest } from '../../../../_tslib.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { randomId, validateClassName } from '@sebgroup/extract';
+import classNames from 'classnames';
+import { useState } from 'react';
+
+var Checkbox = function Checkbox(_a) {
+  var ariaDescribedBy = _a['aria-describedby'],
+    _a$id = _a.id,
+    id = _a$id === void 0 ? randomId() : _a$id,
+    label = _a.label,
+    validator = _a.validator,
+    testId = _a.testId,
+    required = _a.required,
+    className = _a.className,
+    props = __rest(_a, ['aria-describedby', "id", "label", "validator", "testId", "required", "className"]);
+  var _useState = useState(id),
+    _useState2 = _slicedToArray(_useState, 1),
+    uuid = _useState2[0];
+  var validationClassName = validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator);
+  var labelClassNames = classNames('form-control', _defineProperty({}, validationClassName, validator));
+  var inputClassNames = classNames(className, _defineProperty({}, validationClassName, validator));
+  var describedBy = classNames(ariaDescribedBy, _defineProperty({}, "".concat(uuid, "_message"), (validator === null || validator === void 0 ? void 0 : validator.message) !== undefined && validator.message.length > 0));
+  return jsxs("div", {
+    className: "form-group",
+    children: [jsxs("label", {
+      htmlFor: uuid,
+      className: labelClassNames,
+      children: [label, jsx("input", Object.assign({
+        "aria-describedby": describedBy || undefined,
+        "aria-invalid": (validator === null || validator === void 0 ? void 0 : validator.indicator) === 'error',
+        "aria-required": required,
+        className: inputClassNames || undefined,
+        type: "checkbox",
+        "data-testid": testId,
+        id: uuid,
+        required: required
+      }, props)), jsx("i", {})]
+    }), validator && jsx("span", {
+      className: "form-info",
+      id: "".concat(uuid, "_message"),
+      children: validator.message
+    })]
+  });
+};
+
+export { Checkbox };

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

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

package/src/lib/form/checkbox/index.js

@@ -0,0 +1,7 @@
+export { Checkbox } from './checkbox.js';
+import '../../../../_rollupPluginBabelHelpers.js';
+import '../../../../_tslib.js';
+import 'react/jsx-runtime';
+import '@sebgroup/extract';
+import 'classnames';
+import 'react';

package/src/lib/form/form.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { FormProvider } from './formContext.js';
+import '../../../_rollupPluginBabelHelpers.js';
+import '../../../_tslib.js';
+import 'react';
+import './validateInput.js';
+
+var Form = function Form(props) {
+  return jsx(FormProvider, Object.assign({}, props));
+};
+
+export { Form, Form as default };

package/src/lib/form/formContext.js

@@ -0,0 +1,71 @@
+import { _ as _slicedToArray } from '../../../_rollupPluginBabelHelpers.js';
+import { _ as __rest } from '../../../_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { validateInputValue } from './validateInput.js';
+
+var FormContext = /*#__PURE__*/React.createContext({});
+var useFormContext = function useFormContext() {
+  return React.useContext(FormContext);
+};
+var FormProvider = function FormProvider(_a) {
+  var children = _a.children,
+    _a$direction = _a.direction,
+    direction = _a$direction === void 0 ? 'vertical' : _a$direction,
+    _a$formSize = _a.formSize,
+    formSize = _a$formSize === void 0 ? 'md' : _a$formSize;
+    _a.onSubmit;
+    var onFormSubmit = _a.onFormSubmit,
+    props = __rest(_a, ["children", "direction", "formSize", "onSubmit", "onFormSubmit"]);
+  /* eslint-disable-next-line */
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    values = _React$useState2[0],
+    setValues = _React$useState2[1];
+  /* eslint-disable-next-line */
+  var _React$useState3 = React.useState(),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    errors = _React$useState4[0],
+    setErrors = _React$useState4[1];
+  /* eslint-disable-next-line */
+  var _React$useState5 = React.useState({}),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    fields = _React$useState6[0],
+    setFields = _React$useState6[1];
+  var formSubmit = function formSubmit(event) {
+    var hasError = false;
+    event.preventDefault();
+    Object.keys(fields).forEach(function (key) {
+      var errorMessage = validateInputValue({
+        name: key,
+        value: values === null || values === void 0 ? void 0 : values[key]
+      }, fields[key], setErrors);
+      hasError = hasError || !!errorMessage;
+    });
+    if (!hasError) {
+      onFormSubmit && onFormSubmit(values);
+    }
+  };
+  var resetForm = function resetForm() {
+    setValues({});
+    setErrors({});
+  };
+  return jsx(FormContext.Provider, {
+    value: {
+      setValues: setValues,
+      setErrors: setErrors,
+      setFields: setFields,
+      errors: errors,
+      values: values
+    },
+    children: jsx("form", Object.assign({
+      className: [direction, "size-".concat(formSize)].join(' '),
+      onSubmit: formSubmit
+    }, props, {
+      onReset: resetForm,
+      children: children
+    }))
+  });
+};
+
+export { FormContext, FormProvider, useFormContext };

package/src/lib/form/formItems.js

@@ -0,0 +1,91 @@
+import { a as _defineProperty } from '../../../_rollupPluginBabelHelpers.js';
+import React from 'react';
+import { useFormContext } from './formContext.js';
+import { validateInputValue } from './validateInput.js';
+import '../../../_tslib.js';
+import 'react/jsx-runtime';
+
+var FormItems = function FormItems(_ref) {
+  var children = _ref.children,
+    name = _ref.name,
+    validate = _ref.validate,
+    _onFormItemsChanged = _ref.onChange;
+  var _useFormContext = useFormContext(),
+    values = _useFormContext.values,
+    setValues = _useFormContext.setValues,
+    setErrors = _useFormContext.setErrors,
+    setFields = _useFormContext.setFields,
+    errors = _useFormContext.errors;
+  React.useEffect(function () {
+    /* eslint-disable-next-line */
+    setFields(function (fields) {
+      return Object.assign(Object.assign({}, fields), _defineProperty({}, name, validate === null || validate === void 0 ? void 0 : validate.rules));
+    });
+    /* eslint-disable-next-line */
+    var removeValues = function removeValues(values) {
+      /* eslint-disable-next-line */
+      var newValues = Object.assign({}, values);
+      delete newValues[name];
+      return newValues;
+    };
+    return function () {
+      /* eslint-disable-next-line */
+      setFields(function (fields) {
+        return removeValues(fields);
+      });
+      /* eslint-disable-next-line */
+      setValues(function (values) {
+        return removeValues(values);
+      });
+      /* eslint-disable-next-line */
+      setErrors(function (errors) {
+        return removeValues(errors);
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var _onChange = function onChange(event) {
+    if (!event.target) return;
+    var _event$target = event.target,
+      value = _event$target.value,
+      name = _event$target.name,
+      type = _event$target.type,
+      checked = _event$target.checked;
+    var inputValue;
+    if (type === 'checkbox') {
+      inputValue = checked ? value : null;
+      /* eslint-disable-next-line */
+      checked ? setValues(function (values) {
+        return Object.assign(Object.assign({}, values), _defineProperty({}, name, value));
+      }) : setValues(function (values) {
+        return Object.assign(Object.assign({}, values), _defineProperty({}, name, null));
+      });
+    } else {
+      inputValue = value;
+      /* eslint-disable-next-line */
+      setValues(function (values) {
+        return Object.assign(Object.assign({}, values), _defineProperty({}, name, value));
+      });
+    }
+    validateInputValue({
+      value: inputValue,
+      name: name,
+      type: type,
+      checked: checked
+    }, validate === null || validate === void 0 ? void 0 : validate.rules, setErrors);
+  };
+  /* eslint-disable-next-line */
+  return /*#__PURE__*/React.cloneElement(children, {
+    validator: (errors === null || errors === void 0 ? void 0 : errors[name]) && validate,
+    name: name,
+    value: values === null || values === void 0 ? void 0 : values[name],
+    onChange: function onChange(event) {
+      if (typeof _onFormItemsChanged === 'function') {
+        _onFormItemsChanged(event);
+      }
+      _onChange(event);
+    }
+  });
+};
+
+export { FormItems, FormItems as default };

package/src/lib/form/group/group.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+
+function Group(_ref) {
+  var id = _ref.id,
+    children = _ref.children,
+    error = _ref.error,
+    className = _ref.className,
+    _ref$groupBorder = _ref.groupBorder,
+    groupBorder = _ref$groupBorder === void 0 ? false : _ref$groupBorder,
+    _ref$groupFocus = _ref.groupFocus,
+    groupFocus = _ref$groupFocus === void 0 ? false : _ref$groupFocus;
+  var groupClassName = classNames('group', {
+    'group-border': groupBorder
+  }, {
+    'group-focus': groupFocus
+  }, {
+    'is-invalid': error
+  }, className);
+  var errorMessage = error ? error.message || error : '';
+  return jsxs("div", {
+    className: "form-group",
+    id: id,
+    children: [jsx("div", {
+      className: groupClassName,
+      children: children
+    }), error && jsx("span", {
+      className: "form-info",
+      id: id && "".concat(id, "-message"),
+      children: errorMessage
+    })]
+  });
+}
+
+export { Group, Group as default };

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

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

package/src/lib/form/group/index.js

@@ -0,0 +1,3 @@
+export { Group } from './group.js';
+import 'react/jsx-runtime';
+import 'classnames';

package/src/lib/form/iconButton/iconButton.js

@@ -0,0 +1,20 @@
+import { _ as __rest } from '../../../../_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+
+var IconButton = function IconButton(_a) {
+  var _b;
+  var children = _a.children,
+    onClick = _a.onClick,
+    props = __rest(_a, ["children", "onClick"]);
+  return jsx("button", {
+    className: "icon ".concat(props.size === 'small' && 'small'),
+    onClick: onClick,
+    "aria-controls": props['aria-controls'],
+    "aria-expanded": props['aria-expanded'],
+    type: (_b = props.type) !== null && _b !== void 0 ? _b : 'button',
+    title: props.title,
+    children: children
+  });
+};
+
+export { IconButton };

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

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

package/src/lib/form/iconButton/index.js

@@ -0,0 +1,3 @@
+export { IconButton } from './iconButton.js';
+import '../../../../_tslib.js';
+import 'react/jsx-runtime';

package/src/lib/form/index.js

@@ -0,0 +1,24 @@
+export { Button } from './button/button.js';
+export { IconButton } from './iconButton/iconButton.js';
+export { ButtonGroup } from './buttonGroup/buttonGroup.js';
+export { Checkbox } from './checkbox/checkbox.js';
+export { Form } from './form.js';
+export { FormItems } from './formItems.js';
+export { Group } from './group/group.js';
+export { EmailInput, Input, NumberInput, TextInput } from './input/input.js';
+export { Text } from './text/text.js';
+export { RadioButton } from './radioButton/radioButton.js';
+export { RadioGroup } from './radioButton/radioGroup.js';
+export { TextArea } from './textarea/textarea.js';
+import '../../../_tslib.js';
+import 'react/jsx-runtime';
+import 'classnames';
+import '../../../_rollupPluginBabelHelpers.js';
+import 'react';
+import '@sebgroup/extract';
+import './formContext.js';
+import './validateInput.js';
+import '../formItem/formItem.js';
+import '../icons/times.js';
+import '../icons/infoCircle.js';
+import './useInput.js';

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

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

package/src/lib/form/input/index.js

@@ -0,0 +1,15 @@
+export { EmailInput, Input, NumberInput, TextInput } from './input.js';
+export { RadioButton } from '../radioButton/radioButton.js';
+export { Checkbox } from '../checkbox/checkbox.js';
+import '../../../../_rollupPluginBabelHelpers.js';
+import '../../../../_tslib.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@sebgroup/extract';
+import '../../formItem/formItem.js';
+import 'classnames';
+import '../iconButton/iconButton.js';
+import '../../icons/times.js';
+import '../../icons/infoCircle.js';
+import '../group/group.js';
+import '../useInput.js';

package/src/lib/form/input/input.js

@@ -0,0 +1,124 @@
+import { _ as _slicedToArray, a as _defineProperty } from '../../../../_rollupPluginBabelHelpers.js';
+import { _ as __rest } from '../../../../_tslib.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect, useCallback } from 'react';
+import { randomId, validateClassName } from '@sebgroup/extract';
+import { FormItem } from '../../formItem/formItem.js';
+import { Group } from '../group/group.js';
+import classNames from 'classnames';
+export { RadioButton } from '../radioButton/radioButton.js';
+export { Checkbox } from '../checkbox/checkbox.js';
+import '../iconButton/iconButton.js';
+import '../../icons/times.js';
+import '../../icons/infoCircle.js';
+import '../useInput.js';
+
+var Input = function Input(_a) {
+  var ariaDescribedBy = _a['aria-describedby'],
+    _a$autoComplete = _a.autoComplete,
+    autoComplete = _a$autoComplete === void 0 ? 'off' : _a$autoComplete,
+    children = _a.children,
+    className = _a.className,
+    dataTestId = _a.testId,
+    expandableInfo = _a.expandableInfo,
+    expandableInfoButtonLabel = _a.expandableInfoButtonLabel,
+    formatter = _a.formatter,
+    _a$id = _a.id,
+    id = _a$id === void 0 ? randomId() : _a$id,
+    label = _a.label,
+    info = _a.info,
+    onChange = _a.onChange,
+    unit = _a.unit,
+    role = _a.role,
+    validator = _a.validator,
+    onChangeInput = _a.onChangeInput,
+    _a$value = _a.value,
+    value = _a$value === void 0 ? '' : _a$value,
+    required = _a.required,
+    props = __rest(_a, ['aria-describedby', "autoComplete", "children", "className", "testId", "expandableInfo", "expandableInfoButtonLabel", "formatter", "id", "label", "info", "onChange", "unit", "role", "validator", "onChangeInput", "value", "required"]);
+  var _useState = useState(id),
+    _useState2 = _slicedToArray(_useState, 1),
+    uuid = _useState2[0];
+  var _useState3 = useState(value),
+    _useState4 = _slicedToArray(_useState3, 2),
+    localValue = _useState4[0],
+    setLocalValue = _useState4[1];
+  useEffect(function () {
+    setLocalValue(value);
+  }, [value]);
+  var handleChange = useCallback(function (event) {
+    var _event$target = event.target,
+      selectionStart = _event$target.selectionStart,
+      value = _event$target.value;
+    var formattedValue = formatter ? formatter(value) : value;
+    var nrAddedChars = formattedValue.length - value.length;
+    var updateCaretPosition = nrAddedChars !== 0;
+    var newSelectionStart = updateCaretPosition && selectionStart ? selectionStart + nrAddedChars : selectionStart;
+    // Fixes bug: React loses caret position when you format the input value
+    window.requestAnimationFrame(function () {
+      event.target.selectionStart = newSelectionStart;
+      event.target.selectionEnd = newSelectionStart;
+    });
+    setLocalValue(formattedValue);
+    if (onChange) onChange(event);
+    if (onChangeInput) onChangeInput(formattedValue);
+  }, [formatter, setLocalValue, onChange, onChangeInput]);
+  var showSimpleInput = !label && !info && !expandableInfo;
+  var describedBy = classNames(ariaDescribedBy, _defineProperty(_defineProperty(_defineProperty({}, "".concat(uuid, "_group-message"), !showSimpleInput && (validator === null || validator === void 0 ? void 0 : validator.message) !== undefined && validator.message.length > 0), "".concat(uuid, "_info"), !showSimpleInput && info), "gds-expandable-info-".concat(uuid), !showSimpleInput && expandableInfo));
+  var inputClassName = classNames(className, _defineProperty({}, validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator), validator));
+  var input = jsx("input", Object.assign({
+    "aria-describedby": describedBy || undefined,
+    "aria-invalid": (validator === null || validator === void 0 ? void 0 : validator.indicator) === 'error',
+    "aria-required": required,
+    autoComplete: autoComplete,
+    className: inputClassName || undefined,
+    "data-testid": dataTestId,
+    id: uuid,
+    onChange: handleChange,
+    role: role,
+    value: localValue,
+    required: required
+  }, props));
+  if (showSimpleInput) return input;
+  var spanClassName = classNames('form-text', {
+    disabled: props.disabled
+  });
+  return jsx(FormItem, {
+    expandableInfo: expandableInfo,
+    expandableInfoButtonLabel: expandableInfoButtonLabel,
+    inputId: uuid,
+    label: label,
+    labelInformation: info,
+    role: role,
+    children: jsx("div", {
+      className: "gds-input-wrapper",
+      children: jsxs(Group, {
+        groupBorder: true,
+        groupFocus: true,
+        error: validator === null || validator === void 0 ? void 0 : validator.message,
+        id: "".concat(uuid, "_group"),
+        children: [input, unit && jsx("span", {
+          className: spanClassName,
+          children: unit
+        }), children]
+      })
+    })
+  });
+};
+var TextInput = function TextInput(props) {
+  return jsx(Input, Object.assign({
+    type: "text"
+  }, props));
+};
+var EmailInput = function EmailInput(props) {
+  return jsx(Input, Object.assign({
+    type: "email"
+  }, props));
+};
+var NumberInput = function NumberInput(props) {
+  return jsx(Input, Object.assign({
+    type: "number"
+  }, props));
+};
+
+export { EmailInput, Input, NumberInput, TextInput };

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

@@ -0,0 +1,2 @@
+export * from './radioButton';
+export * from './radioGroup';

package/src/lib/form/radioButton/index.js

@@ -0,0 +1,13 @@
+export { RadioButton } from './radioButton.js';
+export { RadioGroup } from './radioGroup.js';
+import '../../../../_tslib.js';
+import 'react/jsx-runtime';
+import 'react';
+import '../useInput.js';
+import '@sebgroup/extract';
+import 'classnames';
+import '../../../../_rollupPluginBabelHelpers.js';
+import '../../formItem/formItem.js';
+import '../iconButton/iconButton.js';
+import '../../icons/times.js';
+import '../../icons/infoCircle.js';

package/src/lib/form/radioButton/radioButton.js

@@ -0,0 +1,32 @@
+import { _ as __rest } from '../../../../_tslib.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import useInput from '../useInput.js';
+import classNames from 'classnames';
+import { validateClassName } from '@sebgroup/extract';
+
+var RadioButton = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var label = _a.label,
+    validator = _a.validator,
+    testId = _a.testId,
+    props = __rest(_a, ["label", "validator", "testId"]);
+  var _useInput = useInput(props),
+    id = _useInput.id;
+  var inputClassNames = classNames(validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator));
+  return jsxs("label", {
+    htmlFor: id,
+    className: "form-control",
+    children: [jsx("input", Object.assign({
+      id: id,
+      type: "radio",
+      "data-testid": testId
+    }, props, {
+      className: inputClassNames,
+      ref: ref
+    })), jsx("span", {
+      children: label
+    }), jsx("i", {})]
+  });
+});
+
+export { RadioButton };