@entur/form 6.0.1 → 7.0.0

package/dist/form.esm.js

@@ -1,10 +1,10 @@
-import { useRandomId, useOnMount, warnAboutMissingStyles } from '@entur/utils';
+import { mergeRefs, useRandomId, useForceUpdate, useOnMount, warnAboutMissingStyles } from '@entur/utils';
 import { Tooltip } from '@entur/tooltip';
 import classNames from 'classnames';
 import * as React from 'react';
-import React__default from 'react';
+import React__default, { useRef } from 'react';
 import { ValidationExclamationIcon, ValidationErrorIcon, ValidationCheckIcon, QuestionIcon, CheckIcon, CloseSmallIcon } from '@entur/icons';
-import { SubLabel, Paragraph, Label } from '@entur/typography';
+import { SubLabel, Paragraph, Heading5, Label } from '@entur/typography';
 import { colors } from '@entur/tokens';
 
 function _extends() {
@@ -34,7 +34,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var _excluded$e = ["children", "hideIcon", "variant", "className"];
+var _excluded$g = ["children", "hideIcon", "variant", "className"];
 var AlertIcon = function AlertIcon(_ref) {
   var variant = _ref.variant;
   var iconClass = "eds-feedback-text__icon eds-feedback-text__icon--" + variant;
@@ -63,7 +63,7 @@ var FeedbackText = function FeedbackText(_ref2) {
     hideIcon = _ref2$hideIcon === void 0 ? false : _ref2$hideIcon,
     variant = _ref2.variant,
     className = _ref2.className,
-    rest = _objectWithoutPropertiesLoose(_ref2, _excluded$e);
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded$g);
   return React__default.createElement(SubLabel, _extends({
     className: classNames('eds-feedback-text', {
       'eds-feedback-text--info': variant === 'info'
@@ -97,14 +97,14 @@ var useInputGroupContext = function useInputGroupContext() {
   return React.useContext(InputGroupContext);
 };
 
-var _excluded$d = ["label", "required", "labelId", "staticAnimation"];
+var _excluded$f = ["label", "required", "labelId", "staticAnimation"];
 var InputGroupLabel = function InputGroupLabel(_ref) {
   var label = _ref.label,
     required = _ref.required,
     labelId = _ref.labelId,
     _ref$staticAnimation = _ref.staticAnimation,
     staticAnimation = _ref$staticAnimation === void 0 ? false : _ref$staticAnimation,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$f);
   var _useInputGroupContext = useInputGroupContext(),
     isFilled = _useInputGroupContext.isFilled;
   var filler = staticAnimation || isFilled;
@@ -134,7 +134,7 @@ var useVariant = function useVariant() {
   return context;
 };
 
-var _excluded$c = ["children", "className", "dark", "disabled", "readOnly", "variant", "prepend", "append", "size", "isFilled", "label", "required", "labelTooltip", "feedback", "labelId", "labelProps", "style", "disableLabelAnimation", "ariaAlertOnFeedback"];
+var _excluded$e = ["children", "className", "dark", "disabled", "readOnly", "variant", "prepend", "append", "size", "isFilled", "label", "required", "labelTooltip", "feedback", "labelId", "labelProps", "style", "disableLabelAnimation", "ariaAlertOnFeedback"];
 var BaseFormControl = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -161,7 +161,7 @@ var BaseFormControl = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     disableLabelAnimation = _ref$disableLabelAnim === void 0 ? false : _ref$disableLabelAnim,
     _ref$ariaAlertOnFeedb = _ref.ariaAlertOnFeedback,
     ariaAlertOnFeedback = _ref$ariaAlertOnFeedb === void 0 ? false : _ref$ariaAlertOnFeedb,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   var contextVariant = useVariant();
   var currentVariant = variant || contextVariant;
   return React__default.createElement(InputGroupContextProvider, null, React__default.createElement("div", _extends({
@@ -197,7 +197,7 @@ var BaseFormControl = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
   }, feedback));
 });
 
-var _excluded$b = ["checked", "className", "children", "style", "disabled", "reduceClickArea"];
+var _excluded$d = ["checked", "className", "children", "style", "disabled", "reduceClickArea"];
 var Checkbox = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var checked = _ref.checked,
     className = _ref.className,
@@ -206,19 +206,13 @@ var Checkbox = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     reduceClickArea = _ref.reduceClickArea,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
-  // Trick to allow using a ref locally, while still allowing for ref forwarding
-  // Read more at https://reactjs.org/docs/hooks-reference.html#useimperativehandle
-  var innerRef = React__default.useRef(null);
-  //eslint-disable-next-line
-  React__default.useImperativeHandle(ref, function () {
-    return innerRef.current;
-  });
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+  var inputRef = React__default.useRef(null);
   var isIndeterminate = checked === 'indeterminate';
   var isControlled = checked !== undefined;
   React__default.useEffect(function () {
-    if (innerRef && innerRef.current) {
-      innerRef.current.indeterminate = isIndeterminate;
+    if (inputRef && inputRef.current) {
+      inputRef.current.indeterminate = isIndeterminate;
     }
   }, [isIndeterminate]);
   return React__default.createElement("label", {
@@ -229,7 +223,7 @@ var Checkbox = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     style: style
   }, React__default.createElement("input", _extends({
     type: "checkbox",
-    ref: innerRef,
+    ref: mergeRefs(ref, inputRef),
     checked: isControlled ? checked === true : undefined,
     disabled: disabled
   }, rest)), React__default.createElement("span", {
@@ -260,23 +254,21 @@ var CheckboxIcon = function CheckboxIcon(_ref2) {
     height: "5",
     fill: "white"
   }) : React__default.createElement("path", {
-    className: "eds-checkbox-icon__path",
     d: "M14.1 27.2l7.1 7.2 14.6-14.8",
     fill: "none"
   }));
 };
 
-var _excluded$a = ["children", "className", "label"];
+var _excluded$c = ["children", "className", "label"];
 var Fieldset = function Fieldset(_ref) {
   var children = _ref.children,
     className = _ref.className,
     label = _ref.label,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   return React__default.createElement("fieldset", _extends({
     className: classNames('eds-fieldset', className)
-  }, rest), label && React__default.createElement(Label, {
-    as: "legend",
-    className: "eds-legend"
+  }, rest), label && React__default.createElement(Heading5, {
+    as: "legend"
   }, label), children);
 };
 
@@ -290,13 +282,14 @@ var useRadioGroupContext = function useRadioGroupContext() {
   return context;
 };
 
-var _excluded$9 = ["className", "children", "value", "disabled"];
+var _excluded$b = ["className", "children", "value", "disabled"];
 var Radio = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var _rest$name, _rest$checked, _rest$onChange;
   var className = _ref.className,
     children = _ref.children,
     value = _ref.value,
     disabled = _ref.disabled,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   var classList = classNames(className, 'eds-form-component--radio__radio', {
     'eds-form-component--radio__radio--disabled': disabled
   });
@@ -308,11 +301,11 @@ var Radio = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     className: "eds-form-component--radio__container"
   }, React__default.createElement("input", _extends({
     type: "radio",
-    name: name,
+    name: (_rest$name = rest.name) != null ? _rest$name : name,
     ref: ref,
     value: value,
-    checked: selectedValue === value,
-    onChange: onChange,
+    checked: (_rest$checked = rest.checked) != null ? _rest$checked : selectedValue === value,
+    onChange: (_rest$onChange = rest.onChange) != null ? _rest$onChange : onChange,
     disabled: disabled
   }, rest)), React__default.createElement("span", {
     className: classList
@@ -325,30 +318,9 @@ var Radio = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }, children));
 });
 
-var _excluded$8 = ["name", "value", "children", "onChange", "label"];
-var RadioGroup = function RadioGroup(_ref) {
-  var name = _ref.name,
-    value = _ref.value,
-    children = _ref.children,
-    onChange = _ref.onChange,
-    label = _ref.label,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
-  var contextValue = React__default.useMemo(function () {
-    return {
-      name: name,
-      value: value,
-      onChange: onChange
-    };
-  }, [name, value, onChange]);
-  return React__default.createElement(RadioGroupContextProvider, {
-    value: contextValue
-  }, label ? React__default.createElement(Fieldset, _extends({
-    label: label
-  }, rest), children) : children);
-};
-
-var _excluded$7 = ["className", "children", "value", "title", "secondaryLabel", "size", "hideCheckbox", "style", "id", "disabled"];
-var RadioPanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+var _excluded$a = ["className", "children", "value", "title", "secondaryLabel", "size", "hideSelectionIndicator", "style", "id", "disabled", "type", "onChange", "checked", "name"];
+var InputPanelBase = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var _ref2, _inputRef$current, _ref3, _inputRef$current2;
   var className = _ref.className,
     children = _ref.children,
     value = _ref.value,
@@ -356,60 +328,170 @@ var RadioPanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     secondaryLabel = _ref.secondaryLabel,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
-    _ref$hideCheckbox = _ref.hideCheckbox,
-    hideCheckbox = _ref$hideCheckbox === void 0 ? false : _ref$hideCheckbox,
+    _ref$hideSelectionInd = _ref.hideSelectionIndicator,
+    hideSelectionIndicator = _ref$hideSelectionInd === void 0 ? false : _ref$hideSelectionInd,
     style = _ref.style,
     id = _ref.id,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
-  var classList = classNames(className, 'eds-radio-panel__container', "eds-radio-panel--" + size, {
-    'eds-radio-panel--disabled': disabled
-  });
-  var _useRadioGroupContext = useRadioGroupContext(),
-    name = _useRadioGroupContext.name,
-    selectedValue = _useRadioGroupContext.value,
-    onChange = _useRadioGroupContext.onChange;
-  var randomId = useRandomId('eds-radiopanel');
-  var radioPanelId = id || randomId;
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'radio' : _ref$type,
+    onChange = _ref.onChange,
+    checked = _ref.checked,
+    name = _ref.name,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+  var classList = classNames(className, 'eds-input-panel__container', "eds-input-panel--" + size);
+  var inputRef = useRef(null);
+  var defaultId = useRandomId('eds-inputpanel');
+  var inputPanelId = id || defaultId;
+  var forceUpdate = useForceUpdate();
+  var handleOnChange = function handleOnChange(e) {
+    if (onChange === undefined) forceUpdate();
+    onChange == null ? void 0 : onChange(e);
+  };
   return React__default.createElement("label", {
-    className: "eds-radio-panel__wrapper",
-    htmlFor: radioPanelId
+    className: "eds-input-panel",
+    htmlFor: inputPanelId
   }, React__default.createElement("input", _extends({
-    type: "radio",
+    type: type,
     name: name,
-    ref: ref,
+    ref: mergeRefs(ref, inputRef),
     value: value,
-    checked: selectedValue === value,
-    onChange: onChange,
-    id: radioPanelId,
+    checked: checked,
+    onChange: handleOnChange,
+    id: inputPanelId,
     disabled: disabled
   }, rest)), React__default.createElement("div", {
     className: classList,
     style: style
   }, React__default.createElement("div", {
-    className: "eds-radio-panel__title-wrapper"
+    className: "eds-input-panel__title-wrapper"
   }, React__default.createElement("div", {
-    className: "eds-radio-panel__title"
+    className: "eds-input-panel__title"
   }, title), React__default.createElement("div", {
-    className: "eds-radio-panel__label"
-  }, secondaryLabel && React__default.createElement("span", null, secondaryLabel), !(disabled || hideCheckbox) && React__default.createElement("span", {
-    className: "eds-radio-panel__check"
-  }, React__default.createElement(RadioPanelCheck, null)))), children && React__default.createElement("div", {
-    className: "eds-radio-panel__additional-content"
+    className: "eds-input-panel__secondary-label-and-icon-wrapper"
+  }, secondaryLabel !== undefined && React__default.createElement(React__default.Fragment, null, secondaryLabel), React__default.createElement("span", {
+    style: {
+      pointerEvents: 'none'
+    }
+  }, !(disabled || hideSelectionIndicator) && (type === 'radio' ? React__default.createElement(Radio, {
+    name: "",
+    value: "",
+    checked: (_ref2 = checked != null ? checked : (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.checked) != null ? _ref2 : false,
+    onChange: function onChange() {
+      return;
+    },
+    "aria-hidden": "true",
+    tabIndex: -1
+  }) : React__default.createElement(Checkbox, {
+    checked: (_ref3 = checked != null ? checked : (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.checked) != null ? _ref3 : false,
+    onChange: function onChange() {
+      return null;
+    },
+    "aria-hidden": "true",
+    tabIndex: -1
+  }))))), children && React__default.createElement("div", {
+    className: "eds-input-panel__additional-content"
   }, children)));
 });
-var RadioPanelCheck = function RadioPanelCheck() {
-  return React__default.createElement("svg", {
-    className: "eds-checkbox-icon",
-    width: "22px",
-    height: "16px",
-    viewBox: "6 11 37 33"
-  }, React__default.createElement("path", {
-    className: "eds-checkbox-icon__path",
-    d: "M14.1 27.2l7.1 7.2 14.6-14.8",
-    fill: "none"
-  }));
+
+var _excluded$9 = ["className", "children", "value", "title", "secondaryLabel", "size", "hideRadioButton", "style", "id", "disabled"];
+var RadioPanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    value = _ref.value,
+    title = _ref.title,
+    secondaryLabel = _ref.secondaryLabel,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$hideRadioButton = _ref.hideRadioButton,
+    hideRadioButton = _ref$hideRadioButton === void 0 ? false : _ref$hideRadioButton,
+    style = _ref.style,
+    id = _ref.id,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+  var _useRadioGroupContext = useRadioGroupContext(),
+    name = _useRadioGroupContext.name,
+    selected = _useRadioGroupContext.value,
+    onChange = _useRadioGroupContext.onChange;
+  return React__default.createElement(InputPanelBase, _extends({
+    type: "radio",
+    name: name,
+    title: title,
+    value: value,
+    checked: selected === value,
+    onChange: onChange,
+    className: className,
+    secondaryLabel: secondaryLabel,
+    size: size,
+    hideSelectionIndicator: hideRadioButton,
+    style: style,
+    id: id,
+    disabled: disabled
+  }, rest, {
+    ref: ref
+  }), children);
+});
+
+var _excluded$8 = ["name", "checked", "onChange", "className", "children", "value", "title", "secondaryLabel", "size", "hideCheckbox", "style", "id", "disabled"];
+var CheckboxPanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var name = _ref.name,
+    checked = _ref.checked,
+    onChange = _ref.onChange,
+    className = _ref.className,
+    children = _ref.children,
+    value = _ref.value,
+    title = _ref.title,
+    secondaryLabel = _ref.secondaryLabel,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$hideCheckbox = _ref.hideCheckbox,
+    hideCheckbox = _ref$hideCheckbox === void 0 ? false : _ref$hideCheckbox,
+    style = _ref.style,
+    id = _ref.id,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+  return React__default.createElement(InputPanelBase, _extends({
+    type: "checkbox",
+    name: name,
+    title: title,
+    value: value,
+    checked: checked,
+    onChange: onChange,
+    className: className,
+    secondaryLabel: secondaryLabel,
+    size: size,
+    hideSelectionIndicator: hideCheckbox,
+    style: style,
+    id: id,
+    disabled: disabled
+  }, rest, {
+    ref: ref
+  }), children);
+});
+
+var _excluded$7 = ["name", "value", "children", "onChange", "label"];
+var RadioGroup = function RadioGroup(_ref) {
+  var name = _ref.name,
+    value = _ref.value,
+    children = _ref.children,
+    onChange = _ref.onChange,
+    label = _ref.label,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+  var contextValue = React__default.useMemo(function () {
+    return {
+      name: name,
+      value: value,
+      onChange: onChange
+    };
+  }, [name, value, onChange]);
+  return React__default.createElement(RadioGroupContextProvider, {
+    value: contextValue
+  }, label ? React__default.createElement(Fieldset, _extends({
+    label: label
+  }, rest), children) : children);
 };
 
 var _excluded$6 = ["className", "children", "labelPlacement", "icon", "hideIcon", "color", "contrastColor", "size", "checked"];
@@ -815,5 +897,5 @@ var MultipleSegmentedControl = function MultipleSegmentedControl(_ref) {
 
 warnAboutMissingStyles('form', 'icons', 'typography');
 
-export { BaseFormControl, Checkbox, FeedbackText, Fieldset, InputGroupContextProvider, InputGroupLabel, MultipleSegmentedControl, Radio, RadioGroup, RadioPanel, SegmentedChoice, SegmentedControl, Switch, TextArea, TextField, VariantProvider, hasValue, isFilled, useInputGroupContext, useVariant };
+export { BaseFormControl, Checkbox, CheckboxPanel, FeedbackText, Fieldset, InputGroupContextProvider, InputGroupLabel, MultipleSegmentedControl, Radio, RadioGroup, RadioPanel, SegmentedChoice, SegmentedControl, Switch, TextArea, TextField, VariantProvider, hasValue, isFilled, useInputGroupContext, useVariant };
 //# sourceMappingURL=form.esm.js.map