@dnb/eufemia 10.27.0 → 10.29.0

package/cjs/components/checkbox/Checkbox.d.ts

@@ -1,97 +1,95 @@
-import * as React from 'react';
-import type {
-  FormStatusProps,
-  FormStatusState,
-  FormStatusText
-} from '../FormStatus';
-import type { FormLabelText } from '../FormLabel';
-import type { SkeletonShow } from '../Skeleton';
+/**
+ * Web Checkbox Component
+ */
+import React from 'react';
 import type { SpacingProps } from '../space/types';
+import type { FormStatusProps, FormStatusState, FormStatusText } from '../FormStatus';
+import type { SkeletonShow } from '../Skeleton';
 import type { GlobalStatusConfigObject } from '../GlobalStatus';
 export type CheckboxLabelPosition = 'left' | 'right';
 export type CheckboxSize = 'default' | 'medium' | 'large';
-export type CheckboxSuffix =
-  | string
-  | ((...args: any[]) => any)
-  | React.ReactNode;
 export type CheckboxAttributes = string | Record<string, unknown>;
-export type CheckboxChildren = string | ((...args: any[]) => any);
-export interface CheckboxProps
-  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
-    SpacingProps {
-  /**
-   * Use either the `label` property or provide a custom one.
-   */
-  label?: FormLabelText;
-  /**
-   * Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`.
-   */
-  label_position?: CheckboxLabelPosition;
-  /**
-   * Use `true` to make the label only readable by screen readers.
-   */
-  label_sr_only?: boolean;
-  /**
-   * The `title` of the input - describing it a bit further for accessibility reasons.
-   */
-  title?: string;
-  element?: React.ReactNode;
-  /**
-   * Determine whether the checkbox is checked or not. The default is `false`.
-   */
-  checked?: boolean;
-  disabled?: boolean;
-  id?: string;
-  /**
-   * The size of the checkbox. For now there is "medium" (default) and "large".
-   */
-  size?: CheckboxSize;
-  /**
-   * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.
-   */
-  status?: FormStatusText;
-  /**
-   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
-   */
-  status_state?: FormStatusState;
-  /**
-   * Use an object to define additional FormStatus properties. See [FormStatus](/uilib/components/form-status/properties/)
-   */
-  status_props?: FormStatusProps;
-  status_no_animation?: boolean;
-  /**
-   * The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status)
-   */
-  globalStatus?: GlobalStatusConfigObject;
-  /**
-   * Text describing the content of the Checkbox more than the label. You can also send in a React component, so it gets wrapped inside the Checkbox component.
-   */
-  suffix?: CheckboxSuffix;
-  value?: string;
-  attributes?: CheckboxAttributes;
-  readOnly?: boolean;
-  /**
-   * If set to `true`, an overlaying skeleton with animation will be shown.
-   */
-  skeleton?: SkeletonShow;
-  class?: string;
-  className?: string;
-  children?: CheckboxChildren;
-  on_change?: (...args: any[]) => any;
-  on_state_update?: (...args: any[]) => any;
-  /**
-   * By providing a React.ref we can get the internally used input element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`.
-   */
-  innerRef?: React.Ref;
-}
-export default class Checkbox extends React.Component<CheckboxProps, any> {
-  static defaultProps: object;
-  render(): JSX.Element;
-}
-export interface CheckIconProps {
-  /**
-   * The size of the checkbox. For now there is "medium" (default) and "large".
-   */
-  size?: string;
-}
-export declare const CheckIcon: React.FC<CheckIconProps>;
+export type OnChangeParams = {
+    checked: boolean;
+    event: React.ChangeEvent<HTMLInputElement>;
+};
+export type CheckboxProps = {
+    /**
+     * Use either the `label` property or provide a custom one.
+     */
+    label?: React.ReactNode;
+    /**
+     * Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`.
+     */
+    labelPosition?: CheckboxLabelPosition;
+    /**
+     * Use `true` to make the label only readable by screen readers.
+     */
+    labelSrOnly?: boolean;
+    /**
+     * The `title` of the input - describing it a bit further for accessibility reasons.
+     */
+    title?: string;
+    /**
+     * Determine whether the checkbox is checked or not. The default is `false`.
+     */
+    checked?: boolean | undefined | null;
+    /**
+     * The size of the checkbox. For now there is "medium" (default) and "large".
+     */
+    size?: CheckboxSize;
+    /**
+     * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.
+     */
+    status?: FormStatusText;
+    /**
+     * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
+     */
+    statusState?: FormStatusState;
+    /**
+     * Use an object to define additional FormStatus properties. See [FormStatus](/uilib/components/form-status/properties/)
+     */
+    statusProps?: FormStatusProps;
+    statusNoAnimation?: boolean;
+    /**
+     * The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status)
+     */
+    globalStatus?: GlobalStatusConfigObject;
+    /**
+     * Text describing the content of the Checkbox more than the label. You can also send in a React component, so it gets wrapped inside the Checkbox component.
+     */
+    suffix?: React.ReactNode;
+    value?: string;
+    element?: React.ElementType;
+    attributes?: CheckboxAttributes;
+    /**
+     * If set to `true`, an overlaying skeleton with animation will be shown.
+     */
+    skeleton?: SkeletonShow;
+    /**
+     * Will be called on state changes made by the user. Returns an boolean `{ checked, event }`.
+     */
+    onChange?: (args: OnChangeParams) => void;
+    /**
+     * By providing a React.ref we can get the internally used input element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`.
+     */
+    innerRef?: React.MutableRefObject<HTMLInputElement> | ((elem: HTMLInputElement) => void);
+} & SpacingProps & Omit<React.HTMLProps<HTMLInputElement>, 'ref' | 'label' | 'size' | 'onChange'> & DeprecatedCheckboxProps;
+type DeprecatedCheckboxProps = {
+    /** @deprecated use the `label` prop instead */
+    children?: React.ReactNode;
+    /**  @deprecated use `onComplete` */
+    on_change?: (args: OnChangeParams) => void;
+    /**  @deprecated use `labelPosition` */
+    label_position?: CheckboxLabelPosition;
+    /**  @deprecated use `labelSrOnly` */
+    label_sr_only?: boolean;
+    /**  @deprecated use `statusState` */
+    status_state?: FormStatusState;
+    /**  @deprecated use `statusProps` */
+    status_props?: FormStatusProps;
+    /**  @deprecated use `statusNoAnimation` */
+    status_no_animation?: boolean;
+};
+declare function Checkbox(localProps: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export default Checkbox;

package/cjs/components/checkbox/Checkbox.js

@@ -4,131 +4,166 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.CheckIcon = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _keycode = _interopRequireDefault(require("keycode"));
 var _componentHelper = require("../../shared/component-helper");
 var _AlignmentHelper2 = _interopRequireDefault(require("../../shared/AlignmentHelper"));
 var _SpacingHelper = require("../space/SpacingHelper");
 var _SkeletonHelper = require("../skeleton/SkeletonHelper");
-var _filterValidProps = require("../../shared/helpers/filterValidProps");
 var _Context = _interopRequireDefault(require("../../shared/Context"));
 var _Suffix = _interopRequireDefault(require("../../shared/helpers/Suffix"));
+var _useId = _interopRequireDefault(require("../../shared/helpers/useId"));
+var _filterValidProps = require("../../shared/helpers/filterValidProps");
+var _withSnakeCaseProps = require("../../shared/helpers/withSnakeCaseProps");
 var _FormLabel = _interopRequireDefault(require("../form-label/FormLabel"));
 var _FormStatus = _interopRequireDefault(require("../form-status/FormStatus"));
+var _CheckIcon = _interopRequireDefault(require("./CheckIcon"));
 var _AlignmentHelper, _span;
-const _excluded = ["value", "status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "size", "label", "label_position", "label_sr_only", "title", "element", "disabled", "readOnly", "skeleton", "className", "class", "id", "checked", "children", "on_change", "on_state_update", "innerRef"],
-  _excluded2 = ["size"];
+const _excluded = ["value", "status", "statusState", "statusProps", "statusNoAnimation", "globalStatus", "suffix", "size", "label", "labelPosition", "labelSrOnly", "title", "element", "disabled", "readOnly", "skeleton", "className", "id", "checked", "onChange", "innerRef"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-class Checkbox extends _react.default.PureComponent {
-  static getDerivedStateFromProps(props, state) {
-    if (state._listenForPropChanges) {
-      if (props.checked !== state._checked) {
-        state.checked = Checkbox.parseChecked(props.checked);
-      }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+const defaultProps = {
+  statusState: 'error'
+};
+function Checkbox(localProps) {
+  const context = (0, _react.useContext)(_Context.default);
+  const props = extractPropsFromContext();
+  const {
+      value,
+      status,
+      statusState,
+      statusProps,
+      statusNoAnimation,
+      globalStatus,
+      suffix,
+      size,
+      label,
+      labelPosition,
+      labelSrOnly,
+      title,
+      element,
+      disabled,
+      readOnly,
+      skeleton,
+      className,
+      id: idProp,
+      checked,
+      onChange,
+      innerRef
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
+  const id = (0, _useId.default)(idProp);
+  const isFn = typeof innerRef === 'function';
+  const refHook = (0, _react.useRef)();
+  const ref = !isFn && innerRef || refHook;
+  (0, _react.useEffect)(() => {
+    if (isFn) {
+      innerRef === null || innerRef === void 0 ? void 0 : innerRef(ref.current);
     }
-    state._listenForPropChanges = true;
-    if (state.checked !== state.__checked) {
-      (0, _componentHelper.dispatchCustomElementEvent)({
-        props
-      }, 'on_state_update', {
-        checked: state.checked
-      });
+  }, [innerRef, isFn, ref]);
+  const [isChecked, setIsChecked] = (0, _react.useState)(checked !== null && checked !== void 0 ? checked : false);
+  const [prevChecked, setPrevChecked] = (0, _react.useState)(checked);
+  (0, _react.useEffect)(() => {
+    if (checked !== prevChecked) {
+      setIsChecked(!!checked);
+      setPrevChecked(!!checked);
     }
-    state._checked = props.checked;
-    state.__checked = state.checked;
-    return state;
-  }
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "onKeyDownHandler", event => {
-      switch ((0, _keycode.default)(event)) {
-        case 'enter':
-          this.onChangeHandler(event);
-          break;
-      }
-    });
-    _defineProperty(this, "onChangeHandler", event => {
-      if ((0, _componentHelper.isTrue)(this.props.readOnly)) {
-        return event.preventDefault();
-      }
-      const checked = !this.state.checked;
-      this.setState({
-        checked,
-        _listenForPropChanges: false
-      });
-      (0, _componentHelper.dispatchCustomElementEvent)(this, 'on_change', {
-        checked,
-        event
-      });
-      if (this._refInput.current) {
-        this._refInput.current.focus();
-      }
+  }, [checked, prevChecked]);
+  const callOnChange = (0, _react.useCallback)(args => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(args);
+  }, [onChange]);
+  const onChangeHandler = (0, _react.useCallback)(event => {
+    if (readOnly) {
+      return event.preventDefault();
+    }
+    const updatedCheck = !isChecked;
+    setIsChecked(updatedCheck);
+    callOnChange({
+      checked: updatedCheck,
+      event
     });
-    this._refInput = _react.default.createRef();
-    this._id = props.id || (0, _componentHelper.makeUniqueId)();
-    this.state = {
-      _listenForPropChanges: true
-    };
-  }
-  componentDidMount() {
-    if (this.props.innerRef) {
-      typeof this.props.innerRef === 'function' ? this.props.innerRef(this._refInput.current) : this.props.innerRef.current = this._refInput.current;
+    if (ref.current) {
+      ref.current.focus();
     }
-  }
-  render() {
-    var _this$context, _this$context2;
-    const props = (0, _componentHelper.extendPropsWithContextInClassComponent)(this.props, Checkbox.defaultProps, {
-      skeleton: this.context && this.context.skeleton
-    }, this.context.getTranslation(this.props).Checkbox, (0, _filterValidProps.pickFormElementProps)((_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.FormRow), (0, _filterValidProps.pickFormElementProps)((_this$context2 = this.context) === null || _this$context2 === void 0 ? void 0 : _this$context2.formElement), this.context.Checkbox);
-    const {
-        value,
-        status,
-        status_state,
-        status_props,
-        status_no_animation,
-        globalStatus,
-        suffix,
-        size,
-        label,
-        label_position,
-        label_sr_only,
-        title,
-        element,
-        disabled,
-        readOnly,
-        skeleton,
-        className,
-        class: _className,
-        id: _id,
-        checked: _checked,
-        children,
-        on_change,
-        on_state_update,
-        innerRef
-      } = props,
-      rest = _objectWithoutProperties(props, _excluded);
-    const {
-      checked
-    } = this.state;
-    const id = this._id;
-    const showStatus = (0, _componentHelper.getStatusState)(status);
-    const mainParams = {
-      className: (0, _classnames.default)("dnb-checkbox dnb-form-component", (0, _SkeletonHelper.createSkeletonClass)(null, skeleton), (0, _SpacingHelper.createSpacingClasses)(props), className, _className, status && `dnb-checkbox__status--${status_state}`, size && `dnb-checkbox--${size}`, label && `dnb-checkbox--label-position-${label_position || 'right'}`)
-    };
+  }, [callOnChange, isChecked, readOnly, ref]);
+  const onKeyDownHandler = (0, _react.useCallback)(event => {
+    switch ((0, _keycode.default)(event)) {
+      case 'enter':
+        onChangeHandler(event);
+        break;
+    }
+  }, [onChangeHandler]);
+  const mainParams = {
+    className: (0, _classnames.default)("dnb-checkbox dnb-form-component", (0, _SkeletonHelper.createSkeletonClass)(null, skeleton), (0, _SpacingHelper.createSpacingClasses)(props), className, status && `dnb-checkbox__status--${statusState}`, size && `dnb-checkbox--${size}`, label && `dnb-checkbox--label-position-${labelPosition || 'right'}`)
+  };
+  const showStatus = (0, _componentHelper.getStatusState)(status);
+  const inputParams = handleInputAttributes();
+  const statusComp = _react.default.createElement(_FormStatus.default, _extends({
+    show: showStatus,
+    id: id + '-form-status',
+    globalStatus: globalStatus,
+    label: label,
+    text_id: id + '-status',
+    width_selector: id + ', ' + id + '-label',
+    text: status,
+    state: statusState,
+    no_animation: statusNoAnimation,
+    skeleton: skeleton
+  }, statusProps));
+  const Element = element || 'input';
+  return _react.default.createElement("span", mainParams, _react.default.createElement("span", {
+    className: "dnb-checkbox__order"
+  }, label && _react.default.createElement(_FormLabel.default, {
+    id: id + '-label',
+    forId: id,
+    text: label,
+    disabled: disabled,
+    skeleton: skeleton,
+    srOnly: labelSrOnly
+  }), _react.default.createElement("span", {
+    className: "dnb-checkbox__inner"
+  }, _AlignmentHelper || (_AlignmentHelper = _react.default.createElement(_AlignmentHelper2.default, null)), labelPosition === 'left' && statusComp, _react.default.createElement("span", {
+    className: "dnb-checkbox__shell"
+  }, _react.default.createElement(Element, _extends({
+    id: id,
+    name: id,
+    type: "checkbox",
+    title: title,
+    className: "dnb-checkbox__input",
+    value: isChecked ? value || '' : '',
+    disabled: disabled
+  }, inputParams, {
+    onChange: onChangeHandler,
+    onKeyDown: onKeyDownHandler,
+    ref: ref
+  })), _react.default.createElement("span", {
+    className: (0, _classnames.default)('dnb-checkbox__button', (0, _SkeletonHelper.createSkeletonClass)('shape', skeleton, context)),
+    "aria-hidden": true
+  }, _span || (_span = _react.default.createElement("span", {
+    className: "dnb-checkbox__focus"
+  }))), _react.default.createElement(_CheckIcon.default, {
+    size: size
+  }))), suffix && _react.default.createElement(_Suffix.default, {
+    className: "dnb-checkbox__suffix",
+    id: id + '-suffix',
+    context: props
+  }, suffix)), (labelPosition === 'right' || !labelPosition) && statusComp);
+  function handleInputAttributes() {
     const inputParams = _objectSpread({
       disabled,
-      checked
+      checked: isChecked,
+      readOnly
     }, rest);
     if (showStatus || suffix) {
       inputParams['aria-describedby'] = (0, _componentHelper.combineDescribedBy)(inputParams, showStatus ? id + '-status' : null, suffix ? id + '-suffix' : null);
@@ -136,152 +171,14 @@ class Checkbox extends _react.default.PureComponent {
     if (readOnly) {
       inputParams['aria-readonly'] = inputParams.readOnly = true;
     }
-    (0, _SkeletonHelper.skeletonDOMAttributes)(inputParams, skeleton, this.context);
-    (0, _componentHelper.validateDOMAttributes)(this.props, inputParams);
-    const statusComp = _react.default.createElement(_FormStatus.default, _extends({
-      show: showStatus,
-      id: id + '-form-status',
-      globalStatus: globalStatus,
-      label: label,
-      text_id: id + '-status',
-      width_selector: id + ', ' + id + '-label',
-      text: status,
-      state: status_state,
-      no_animation: status_no_animation,
-      skeleton: skeleton
-    }, status_props));
-    const Element = element || 'input';
-    return _react.default.createElement("span", mainParams, _react.default.createElement("span", {
-      className: "dnb-checkbox__order"
-    }, label && _react.default.createElement(_FormLabel.default, {
-      id: id + '-label',
-      for_id: id,
-      text: label,
-      disabled: disabled,
-      skeleton: skeleton,
-      sr_only: label_sr_only
-    }), _react.default.createElement("span", {
-      className: "dnb-checkbox__inner"
-    }, _AlignmentHelper || (_AlignmentHelper = _react.default.createElement(_AlignmentHelper2.default, null)), label_position === 'left' && statusComp, _react.default.createElement("span", {
-      className: "dnb-checkbox__shell"
-    }, _react.default.createElement(Element, _extends({
-      id: id,
-      name: id,
-      type: "checkbox",
-      title: title,
-      className: "dnb-checkbox__input",
-      value: checked ? value || '' : '',
-      disabled: (0, _componentHelper.isTrue)(disabled)
-    }, inputParams, {
-      onChange: this.onChangeHandler,
-      onKeyDown: this.onKeyDownHandler,
-      ref: this._refInput
-    })), _react.default.createElement("span", {
-      className: (0, _classnames.default)('dnb-checkbox__button', (0, _SkeletonHelper.createSkeletonClass)('shape', skeleton, this.context)),
-      "aria-hidden": true
-    }, _span || (_span = _react.default.createElement("span", {
-      className: "dnb-checkbox__focus"
-    }))), _react.default.createElement(CheckIcon, {
-      size: size
-    }))), suffix && _react.default.createElement(_Suffix.default, {
-      className: "dnb-checkbox__suffix",
-      id: id + '-suffix',
-      context: props
-    }, suffix)), (label_position === 'right' || !label_position) && statusComp);
+    return (0, _componentHelper.validateDOMAttributes)(props, (0, _SkeletonHelper.skeletonDOMAttributes)(inputParams, skeleton, context));
   }
-}
-exports.default = Checkbox;
-_defineProperty(Checkbox, "contextType", _Context.default);
-_defineProperty(Checkbox, "defaultProps", {
-  label: null,
-  label_position: null,
-  label_sr_only: null,
-  title: null,
-  element: 'input',
-  checked: null,
-  disabled: null,
-  id: null,
-  size: null,
-  status: null,
-  status_state: 'error',
-  status_props: null,
-  status_no_animation: null,
-  globalStatus: null,
-  suffix: null,
-  value: null,
-  attributes: null,
-  readOnly: false,
-  skeleton: null,
-  class: null,
-  className: null,
-  children: null,
-  on_change: null,
-  on_state_update: null,
-  innerRef: null
-});
-_defineProperty(Checkbox, "parseChecked", state => /true|on/.test(String(state)));
-process.env.NODE_ENV !== "production" ? Checkbox.propTypes = _objectSpread(_objectSpread({
-  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node]),
-  label_position: _propTypes.default.oneOf(['left', 'right']),
-  label_sr_only: _propTypes.default.bool,
-  title: _propTypes.default.string,
-  element: _propTypes.default.node,
-  checked: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  disabled: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  id: _propTypes.default.string,
-  size: _propTypes.default.oneOf(['default', 'medium', 'large']),
-  status: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool, _propTypes.default.func, _propTypes.default.node]),
-  status_state: _propTypes.default.string,
-  status_props: _propTypes.default.object,
-  status_no_animation: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  globalStatus: _propTypes.default.shape({
-    id: _propTypes.default.string,
-    message: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
-  }),
-  suffix: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node]),
-  value: _propTypes.default.string,
-  attributes: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
-  readOnly: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  skeleton: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  class: _propTypes.default.string,
-  innerRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
-}, _SpacingHelper.spacingPropTypes), {}, {
-  className: _propTypes.default.string,
-  children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
-  on_change: _propTypes.default.func,
-  on_state_update: _propTypes.default.func
-}) : void 0;
-const CheckIcon = _ref => {
-  let {
-      size
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded2);
-  let vB = 16;
-  if (size === 'large') {
-    vB = 24;
+  function extractPropsFromContext() {
+    return (0, _componentHelper.extendPropsWithContext)((0, _withSnakeCaseProps.convertSnakeCaseProps)(localProps), defaultProps, context.Checkbox, {
+      skeleton: context === null || context === void 0 ? void 0 : context.Checkbox
+    }, (0, _filterValidProps.pickFormElementProps)(context === null || context === void 0 ? void 0 : context.FormRow), (0, _filterValidProps.pickFormElementProps)(context === null || context === void 0 ? void 0 : context.formElement));
   }
-  return _react.default.createElement("svg", _extends({
-    width: vB,
-    height: vB,
-    viewBox: `0 0 ${vB} ${vB}`,
-    fill: "none",
-    className: "dnb-checkbox__gfx",
-    "aria-hidden": true
-  }, props), _react.default.createElement("path", {
-    d: size === 'large' ? 'M1.5 15L7.5 21L22.5 3' : 'M1 10L5 14L15 2',
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }));
-};
-exports.CheckIcon = CheckIcon;
-process.env.NODE_ENV !== "production" ? CheckIcon.propTypes = {
-  size: _propTypes.default.string
-} : void 0;
-CheckIcon.defaultProps = {
-  size: 'default'
-};
-CheckIcon._formElement = true;
-CheckIcon._supportsSpacingProps = true;
+}
+var _default = Checkbox;
+exports.default = _default;
 //# sourceMappingURL=Checkbox.js.map