@entur/form 8.2.11 → 8.3.0

package/dist/BaseFormControl.d.ts

@@ -55,6 +55,8 @@ export type BaseFormControlProps = React.HTMLAttributes<HTMLDivElement> & {
     after?: React.ReactNode;
     /** Legg til et element før feltet */
     before?: React.ReactNode;
+    /** Aria-label som brukes når inputfeltet er i read-only modus */
+    ariaLabelOnReadOnly?: string;
 };
 export declare const BaseFormControl: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     /** Et skjemaelement med `eds-form-control`-klassen */
@@ -105,5 +107,7 @@ export declare const BaseFormControl: React.ForwardRefExoticComponent<React.HTML
     after?: React.ReactNode;
     /** Legg til et element før feltet */
     before?: React.ReactNode;
+    /** Aria-label som brukes når inputfeltet er i read-only modus */
+    ariaLabelOnReadOnly?: string;
 } & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/Checkbox.d.ts

@@ -13,12 +13,20 @@ export type CheckboxProps = {
      * @default false
      */
     disabled?: boolean;
+    /** Sett til true om skjema-elementet er i read-only modus
+     * @default false
+     */
+    readOnly?: boolean;
     /**Ekstra styling til komponenten */
     style?: CSSProperties;
     /** Reduserer klikkflaten for Checkbox'en
      * @default false
      */
     reduceClickArea?: boolean;
+    /** Om animasjon skal deaktiveres
+     * @default false
+     */
+    disableAnimation?: boolean;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'checked'>;
 export declare const Checkbox: React.ForwardRefExoticComponent<{
     /** Ekstra klassenavn */
@@ -33,10 +41,18 @@ export declare const Checkbox: React.ForwardRefExoticComponent<{
      * @default false
      */
     disabled?: boolean;
+    /** Sett til true om skjema-elementet er i read-only modus
+     * @default false
+     */
+    readOnly?: boolean;
     /**Ekstra styling til komponenten */
     style?: CSSProperties;
     /** Reduserer klikkflaten for Checkbox'en
      * @default false
      */
     reduceClickArea?: boolean;
+    /** Om animasjon skal deaktiveres
+     * @default false
+     */
+    disableAnimation?: boolean;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked"> & React.RefAttributes<HTMLInputElement>>;

package/dist/Radio.d.ts

@@ -11,6 +11,8 @@ export type RadioProps = {
      * @default false
      */
     disabled?: boolean;
+    /** Beskrivelse som leses opp av skjermlesere når radiobutton er readonly */
+    readOnlyLabelDescription?: string;
 } & React.InputHTMLAttributes<HTMLInputElement>;
 export declare const Radio: React.ForwardRefExoticComponent<{
     /** Ekstra klassenavn */
@@ -23,4 +25,6 @@ export declare const Radio: React.ForwardRefExoticComponent<{
      * @default false
      */
     disabled?: boolean;
+    /** Beskrivelse som leses opp av skjermlesere når radiobutton er readonly */
+    readOnlyLabelDescription?: string;
 } & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;

package/dist/RadioGroup.d.ts

@@ -11,5 +11,7 @@ export type RadioGroupProps = {
     /** En callback som blir kalles hver gang en radioknapp klikkes på  */
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     [key: string]: any;
+    /** Sett radiogruppen i readonly-modus */
+    readOnly?: boolean;
 };
 export declare const RadioGroup: React.FC<RadioGroupProps>;

package/dist/RadioGroupContext.d.ts

@@ -3,6 +3,7 @@ type RadioGroupContextProps = {
     name: string;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     value: string | null;
+    readOnly?: boolean;
 };
 export declare const RadioGroupContextProvider: React.Provider<RadioGroupContextProps | null>;
 export declare const useRadioGroupContext: () => RadioGroupContextProps;

package/dist/form.cjs.development.js

@@ -163,7 +163,7 @@ var useVariant = function useVariant() {
   return context;
 };
 
-var _excluded$e = ["after", "before", "children", "className", "disabled", "readOnly", "variant", "prepend", "append", "size", "isFilled", "label", "required", "labelTooltip", "labelTooltipButtonAriaLabel", "labelTooltipPlacement", "feedback", "labelId", "labelProps", "style", "disableLabelAnimation", "ariaAlertOnFeedback"];
+var _excluded$e = ["after", "before", "children", "className", "disabled", "readOnly", "variant", "prepend", "append", "size", "isFilled", "label", "required", "labelTooltip", "labelTooltipButtonAriaLabel", "labelTooltipPlacement", "feedback", "labelId", "labelProps", "style", "disableLabelAnimation", "ariaAlertOnFeedback", "ariaLabelOnReadOnly"];
 /** @deprecated use variant="negative" instead */
 var error = 'error';
 var BaseFormControl = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -196,6 +196,8 @@ var BaseFormControl = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     disableLabelAnimation = _ref$disableLabelAnim === void 0 ? false : _ref$disableLabelAnim,
     _ref$ariaAlertOnFeedb = _ref.ariaAlertOnFeedback,
     ariaAlertOnFeedback = _ref$ariaAlertOnFeedb === void 0 ? false : _ref$ariaAlertOnFeedb,
+    _ref$ariaLabelOnReadO = _ref.ariaLabelOnReadOnly,
+    ariaLabelOnReadOnly = _ref$ariaLabelOnReadO === void 0 ? 'Dette skjemafeltet kan bare leses' : _ref$ariaLabelOnReadO,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   var contextVariant = useVariant();
   var currentVariant = variant || contextVariant;
@@ -212,14 +214,16 @@ var BaseFormControl = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       'eds-form-control-wrapper--readonly': readOnly,
       'eds-form-control-wrapper--is-filled': isFilled
     }),
-    ref: ref
+    ref: ref,
+    tabIndex: readOnly ? -1 : 0
   }, rest), prepend && React.createElement("div", {
     className: "eds-form-control__prepend"
   }, prepend), React.createElement(InputGroupLabel, _extends({
     label: label,
     required: required,
     labelId: labelId,
-    staticAnimation: disableLabelAnimation
+    staticAnimation: disableLabelAnimation,
+    "aria-label": readOnly ? label + ", " + ariaLabelOnReadOnly : undefined
   }, labelProps)), labelTooltip && React.createElement(tooltip.Tooltip, {
     content: labelTooltip,
     placement: labelTooltipPlacement,
@@ -245,7 +249,7 @@ var BaseFormControl = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, feedback), after));
 });
 
-var _excluded$d = ["checked", "className", "children", "style", "disabled", "reduceClickArea"];
+var _excluded$d = ["checked", "className", "children", "style", "disabled", "readOnly", "reduceClickArea", "disableAnimation"];
 var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var checked = _ref.checked,
     className = _ref.className,
@@ -253,7 +257,11 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     style = _ref.style,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
     reduceClickArea = _ref.reduceClickArea,
+    _ref$disableAnimation = _ref.disableAnimation,
+    disableAnimation = _ref$disableAnimation === void 0 ? false : _ref$disableAnimation,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   var inputRef = React.useRef(null);
   var isIndeterminate = checked === 'indeterminate';
@@ -266,6 +274,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return React.createElement("label", {
     className: classNames('eds-checkbox__container', className, {
       'eds-checkbox--disabled': disabled,
+      'eds-checkbox--readonly': readOnly,
       'eds-checkbox__container--reduced-click-area': reduceClickArea
     }),
     style: style
@@ -273,11 +282,20 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     type: "checkbox",
     ref: utils.mergeRefs(ref, inputRef),
     checked: isControlled ? checked === true : undefined,
-    disabled: disabled
+    disabled: disabled,
+    onKeyDown: function onKeyDown(e) {
+      if (readOnly && (e.key === ' ' || e.key === 'Enter')) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    },
+    "aria-label": readOnly ? " " + (children == null ? void 0 : children.toString()) + ". Kan ikke endres" : undefined
   }, rest)), React.createElement("span", {
     className: classNames('eds-checkbox__icon', {
       'eds-checkbox__icon--disabled': disabled,
-      'eds-checkbox__icon--reduced-click-area': reduceClickArea
+      'eds-checkbox__icon--readonly': readOnly,
+      'eds-checkbox__icon--reduced-click-area': reduceClickArea,
+      'eds-checkbox__icon--no-animation': disableAnimation || disabled || readOnly
     })
   }, React.createElement(CheckboxIcon, {
     indeterminate: isIndeterminate
@@ -331,21 +349,24 @@ var useRadioGroupContext = function useRadioGroupContext() {
   return context;
 };
 
-var _excluded$b = ["className", "children", "value", "disabled"];
+var _excluded$b = ["className", "children", "value", "disabled", "readOnlyLabelDescription"];
 var Radio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _rest$name, _rest$checked, _rest$onChange;
+  var _rest$name, _rest$checked;
   var className = _ref.className,
     children = _ref.children,
     value = _ref.value,
     disabled = _ref.disabled,
+    readOnlyLabelDescription = _ref.readOnlyLabelDescription,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
-  var classList = classNames(className, 'eds-form-component--radio__radio', {
-    'eds-form-component--radio__radio--disabled': disabled
-  });
   var _useRadioGroupContext = useRadioGroupContext(),
     name = _useRadioGroupContext.name,
     selectedValue = _useRadioGroupContext.value,
-    onChange = _useRadioGroupContext.onChange;
+    _onChange = _useRadioGroupContext.onChange,
+    readOnly = _useRadioGroupContext.readOnly;
+  var classList = classNames(className, 'eds-form-component--radio__radio', {
+    'eds-form-component--radio__radio--disabled': disabled,
+    'eds-form-component--radio__radio--readonly': readOnly
+  });
   return React.createElement("label", {
     className: "eds-form-component--radio__container"
   }, React.createElement("input", _extends({
@@ -354,8 +375,21 @@ var Radio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: ref,
     value: value,
     checked: (_rest$checked = rest.checked) != null ? _rest$checked : selectedValue === value,
-    onChange: (_rest$onChange = rest.onChange) != null ? _rest$onChange : onChange,
-    disabled: disabled
+    onChange: function onChange(e) {
+      var _ref2, _rest$onChange;
+      if (readOnly) {
+        e.preventDefault();
+        return;
+      }
+      (_ref2 = (_rest$onChange = rest.onChange) != null ? _rest$onChange : _onChange) == null || _ref2(e);
+    },
+    onClick: function onClick(e) {
+      if (readOnly) {
+        e.preventDefault();
+      }
+    },
+    disabled: disabled,
+    "aria-label": readOnly ? (children == null ? void 0 : children.toString()) + ". " + (readOnlyLabelDescription != null ? readOnlyLabelDescription : 'Kan ikke endres') : undefined
   }, rest)), React.createElement("span", {
     className: classList
   }, React.createElement("span", {
@@ -521,21 +555,24 @@ var CheckboxPanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }), children);
 });
 
-var _excluded$7 = ["name", "value", "children", "onChange", "label"];
+var _excluded$7 = ["name", "value", "children", "onChange", "label", "readOnly"];
 var RadioGroup = function RadioGroup(_ref) {
   var name = _ref.name,
     value = _ref.value,
     children = _ref.children,
     onChange = _ref.onChange,
     label = _ref.label,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   var contextValue = React.useMemo(function () {
     return {
       name: name,
       value: value,
-      onChange: onChange
+      onChange: onChange,
+      readOnly: readOnly
     };
-  }, [name, value, onChange]);
+  }, [name, value, onChange, readOnly]);
   return React.createElement(RadioGroupContextProvider, {
     value: contextValue
   }, label ? React.createElement(Fieldset, _extends({