@dnb/eufemia 10.4.2 → 10.6.0

package/components/accordion/Accordion.js

@@ -1,14 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _AccordionHeader;
-const _excluded = ["variant", "className", "class", "prerender", "prevent_rerender", "prevent_rerender_conditional", "single_container", "remember_state", "disabled", "skeleton", "no_animation", "expanded_ssr", "children", "id", "group", "expanded", "title", "description", "left_component", "icon", "icon_position", "icon_size", "on_change", "on_state_update", "contentRef"];
+const _excluded = ["variant", "icon_size"],
+  _excluded2 = ["variant", "className", "class", "prerender", "prevent_rerender", "prevent_rerender_conditional", "single_container", "remember_state", "disabled", "skeleton", "no_animation", "expanded_ssr", "children", "id", "group", "title", "description", "left_component", "icon", "icon_position", "icon_size", "on_change", "on_state_update", "contentRef"];
 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; }
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { useContext, useState, useEffect, useRef } from 'react';
 import classnames from 'classnames';
-import { isTrue, makeUniqueId, findElementInChildren, extendPropsWithContextInClassComponent, validateDOMAttributes, dispatchCustomElementEvent } from '../../shared/component-helper';
+import { makeUniqueId, findElementInChildren, extendPropsWithContext, validateDOMAttributes, dispatchCustomElementEvent } from '../../shared/component-helper';
 import { createSpacingClasses } from '../space/SpacingHelper';
 import AccordionGroup from './AccordionGroup';
 import AccordionHeader from './AccordionHeader';
@@ -16,281 +16,243 @@ import AccordionContent from './AccordionContent';
 import AccordionContext from './AccordionContext';
 import AccordionProviderContext from './AccordionProviderContext';
 import Context from '../../shared/Context';
-import { accordionPropTypes, accordionDefaultProps } from './AccordionPropTypes';
 import { AccordionStore, Store, rememberWarning } from './AccordionStore';
-export default class Accordion extends React.PureComponent {
-  static getDerivedStateFromProps(props, state) {
-    if (state._listenForPropChanges) {
-      if (props.expanded !== state._expanded) {
-        state.expanded = isTrue(props.expanded);
-        state._expanded = props.expanded;
-      }
-      if (props.group && !state.group) {
-        state.group = props.group;
-      }
-    }
-    state._listenForPropChanges = true;
-    return state;
+import { accordionDefaultProps } from './defaultProps';
+function Accordion(_ref) {
+  let {
+      variant = 'outlined',
+      icon_size = 'medium'
+    } = _ref,
+    restOfProps = _objectWithoutProperties(_ref, _excluded);
+  const props = _objectSpread({
+    variant,
+    icon_size
+  }, restOfProps);
+  const context = useContext(AccordionProviderContext);
+  const group = props.group || (context === null || context === void 0 ? void 0 : context.group);
+  const id = useRef(props.id || makeUniqueId()).current;
+  const store = new Store({
+    id: props.id,
+    group
+  });
+  const [previousExpanded, setPreviousExpanded] = useState(props.expanded);
+  const [expanded, setExpanded] = useState(getInitialExpandedState());
+  if (props.expanded !== previousExpanded) {
+    setExpanded(props.expanded !== undefined ? props.expanded : false);
+    setPreviousExpanded(props.expanded);
   }
-  constructor(props, context) {
-    var _this;
-    super(props);
-    _this = this;
-    _defineProperty(this, "handleDisabledClick", e => {
-      e.preventDefault();
-      return false;
-    });
-    _defineProperty(this, "callOnChangeHandler", function () {
-      var _this$context;
-      for (var _len = arguments.length, params = new Array(_len), _key = 0; _key < _len; _key++) {
-        params[_key] = arguments[_key];
-      }
-      _this.callOnChange(...params);
-      if ((_this$context = _this.context) !== null && _this$context !== void 0 && _this$context.onChange) {
-        var _this$context2;
-        (_this$context2 = _this.context) === null || _this$context2 === void 0 ? void 0 : _this$context2.onChange(...params);
-      }
-      if (_this.state.group && typeof window !== 'undefined') {
-        var _window, _window$__dnbAccordio;
-        (_window = window) === null || _window === void 0 ? void 0 : (_window$__dnbAccordio = _window.__dnbAccordion[_this.state.group]) === null || _window$__dnbAccordio === void 0 ? void 0 : _window$__dnbAccordio.onChange(...params);
-      }
-    });
-    _defineProperty(this, "callOnChange", _ref => {
-      let {
-        expanded,
-        event
-      } = _ref;
-      this.changeOpened(expanded, event);
-      dispatchCustomElementEvent(this, 'on_change', {
-        expanded,
-        event
-      });
-    });
-    this._id = props.id || makeUniqueId();
-    this.state = {
-      _expanded: props.expanded,
-      expanded: props.expanded !== null ? isTrue(props.expanded) : isTrue(context === null || context === void 0 ? void 0 : context.expanded),
-      group: props.group || (context === null || context === void 0 ? void 0 : context.group),
-      _listenForPropChanges: false
-    };
-    if (typeof window === 'undefined' && isTrue(props.expanded_ssr || (context === null || context === void 0 ? void 0 : context.expanded_ssr))) {
-      this.state.expanded = true;
+  const thisInstance = {
+    _id: id,
+    context,
+    handleDisabledClick,
+    callOnChange,
+    callOnChangeHandler,
+    close,
+    setExpandedState,
+    state: {
+      expanded,
+      group
+    },
+    props,
+    store
+  };
+  useEffect(() => {
+    if (group && typeof window !== 'undefined') {
+      window['__dnbAccordion'] = window['__dnbAccordion'] || {};
+      window['__dnbAccordion'][group] = window['__dnbAccordion'][group] || new AccordionStore(group);
+      window['__dnbAccordion'][group].addInstance(thisInstance);
     }
-    if (this.state.group && typeof window !== 'undefined') {
-      window.__dnbAccordion = window.__dnbAccordion || {};
-      window.__dnbAccordion[this.state.group] = window.__dnbAccordion[this.state.group] || new AccordionStore(this.state.group);
-      window.__dnbAccordion[this.state.group].addInstance(this);
+    if (context && typeof (context === null || context === void 0 ? void 0 : context.onInit) === 'function') {
+      context.onInit(thisInstance);
     }
-    this.store = new Store({
-      id: props.id,
-      group: this.state.group
-    });
-    if (isTrue(props.remember_state || context.remember_state) && isTrue(props.expanded)) {
-      const expanded = this.store.getState();
-      if (expanded === false) {
-        this.state.expanded = false;
+    return () => {
+      if (group && typeof window !== 'undefined') {
+        var _window, _window$__dnbAccordio;
+        (_window = window) === null || _window === void 0 ? void 0 : (_window$__dnbAccordio = _window['__dnbAccordion'][group]) === null || _window$__dnbAccordio === void 0 ? void 0 : _window$__dnbAccordio.removeInstance(thisInstance);
       }
+    };
+  }, []);
+  useEffect(() => {
+    if (context.flush_remembered_state) {
+      store.flush();
+      setExpanded(props.expanded);
     }
-    if (context && typeof (context === null || context === void 0 ? void 0 : context.onInit) === 'function') {
-      context.onInit(this);
+    if (context !== null && context !== void 0 && context.expanded_id && context.expanded_id === props.id) {
+      setExpanded(true);
     }
-    if (typeof window !== 'undefined' && isTrue(props.expanded_ssr || (context === null || context === void 0 ? void 0 : context.expanded_ssr))) {
-      this.state.expanded = false;
+  }, [context.flush_remembered_state, context.expanded_id]);
+  function getInitialExpandedState() {
+    if (props.expanded_ssr || context !== null && context !== void 0 && context.expanded_ssr) {
+      return typeof window === 'undefined';
     }
-    if (isTrue(this.props.remember_state || context.remember_state)) {
-      const expanded = this.store.getState();
-      if (expanded) {
-        this.state.expanded = true;
+    if (props.remember_state || context.remember_state) {
+      const storedExpanded = store.getState();
+      if (props.expanded && storedExpanded === false) {
+        return false;
+      }
+      if (storedExpanded) {
+        return true;
       }
     }
+    return props.expanded !== undefined ? props.expanded : (context === null || context === void 0 ? void 0 : context.expanded) !== undefined ? context.expanded : false;
   }
-  componentDidMount() {
-    this._isMounted = true;
+  function setExpandedState(expanded) {
+    setExpanded(expanded);
   }
-  componentWillUnmount() {
-    this._isMounted = false;
-    clearTimeout(this._animationState);
-    clearTimeout(this._openTimeout);
-    clearTimeout(this._changeOpenState);
-    if (this.state.group && typeof window !== 'undefined') {
-      var _window2, _window2$__dnbAccordi;
-      (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$__dnbAccordi = _window2.__dnbAccordion[this.state.group]) === null || _window2$__dnbAccordi === void 0 ? void 0 : _window2$__dnbAccordi.removeInstance(this);
+  function close() {
+    changeOpened(false);
+  }
+  function changeOpened(expanded) {
+    setExpanded(expanded);
+    if (props.remember_state || context.remember_state) {
+      store.saveState(expanded);
     }
   }
-  componentDidUpdate(props) {
-    var _this$context3;
-    if (isTrue(this.context.flush_remembered_state)) {
-      this.store.flush();
-      this.setState({
-        expanded: isTrue(this.props.expanded)
-      });
+  function handleDisabledClick(e) {
+    e.preventDefault();
+    return false;
+  }
+  function callOnChangeHandler() {
+    for (var _len = arguments.length, params = new Array(_len), _key = 0; _key < _len; _key++) {
+      params[_key] = arguments[_key];
     }
-    if ((_this$context3 = this.context) !== null && _this$context3 !== void 0 && _this$context3.expanded_id && this.context.expanded_id === props.id) {
-      this.setState({
-        expanded: true
-      });
+    callOnChange(...params);
+    if (context !== null && context !== void 0 && context.onChange) {
+      context === null || context === void 0 ? void 0 : context.onChange(...params);
+    }
+    if (group && typeof window !== 'undefined') {
+      var _window2, _window2$__dnbAccordi;
+      (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$__dnbAccordi = _window2['__dnbAccordion'][group]) === null || _window2$__dnbAccordi === void 0 ? void 0 : _window2$__dnbAccordi.onChange(...params);
     }
   }
-  setExpandedState(expanded) {
-    this.setState({
+  function callOnChange() {
+    const {
       expanded,
-      _listenForPropChanges: false
-    });
-  }
-  close() {
-    this.changeOpened(false);
-  }
-  changeOpened(expanded) {
-    if (!this._isMounted) {
-      return;
-    }
-    this.setState({
+      event
+    } = arguments.length <= 0 ? undefined : arguments[0];
+    changeOpened(expanded);
+    dispatchCustomElementEvent(thisInstance, 'on_change', {
       expanded,
-      _listenForPropChanges: false
+      event
     });
-    if (isTrue(this.props.remember_state) || isTrue(this.context.remember_state)) {
-      this.store.saveState(expanded);
-    }
-  }
-  render() {
-    return React.createElement(Context.Consumer, null, globalContext => React.createElement(AccordionContext.Consumer, null, nestedContext => {
-      let {
-        expanded
-      } = this.state;
-      const props = extendPropsWithContextInClassComponent(this.props, Accordion.defaultProps, this.context, nestedContext, {
-        skeleton: globalContext === null || globalContext === void 0 ? void 0 : globalContext.skeleton
-      }, globalContext.accordion, globalContext.translation.Accordion);
-      if (expanded === null && globalContext.accordion) {
-        if (globalContext.accordion.expanded) {
-          expanded = isTrue(props.expanded);
-        }
-      }
-      const {
-          variant,
-          className,
-          class: _className,
-          prerender,
-          prevent_rerender,
-          prevent_rerender_conditional,
-          single_container,
-          remember_state,
-          disabled,
-          skeleton,
-          no_animation,
-          expanded_ssr: _expanded_ssr,
-          children,
-          id: _id,
-          group: _group,
-          expanded: _expanded,
-          title,
-          description,
-          left_component,
-          icon,
-          icon_position,
-          icon_size,
-          on_change,
-          on_state_update,
-          contentRef
-        } = props,
-        rest = _objectWithoutProperties(props, _excluded);
-      const id = this._id;
-      const mainParams = {
-        id,
-        className: classnames('dnb-accordion', createSpacingClasses(props), className, _className, expanded && 'dnb-accordion--expanded', variant && `dnb-accordion__variant--${variant}`, isTrue(prerender) && 'dnb-accordion--prerender')
-      };
-      if (this.state.open) {
-        mainParams.open = true;
-      }
-      validateDOMAttributes(this.props, rest);
-      const extendProps = extendPropsWithContextInClassComponent(this.props, Accordion.defaultProps, this.state, this.context);
-      const context = _objectSpread(_objectSpread({}, extendProps), {}, {
-        id,
-        expanded,
-        prerender: isTrue(prerender),
-        prevent_rerender: isTrue(prevent_rerender),
-        prevent_rerender_conditional: isTrue(prevent_rerender_conditional),
-        single_container: isTrue(single_container),
-        remember_state: isTrue(remember_state),
-        disabled: isTrue(disabled),
-        skeleton: isTrue(skeleton),
-        no_animation: isTrue(no_animation),
-        callOnChange: this.callOnChangeHandler
-      });
-      if (isTrue(disabled)) {
-        mainParams.onClick = this.handleDisabledClick;
-      }
-      return React.createElement(AccordionContext.Provider, {
-        value: context
-      }, React.createElement("div", mainParams, findElementInChildren(children, cur => cur.type === AccordionHeader) ? null : _AccordionHeader || (_AccordionHeader = React.createElement(AccordionHeader, null)), findElementInChildren(children, cur => cur.type === AccordionContent) ? children : React.createElement(AccordionContent, null, children)));
-    }));
   }
-}
-_defineProperty(Accordion, "contextType", AccordionProviderContext);
-_defineProperty(Accordion, "Provider", AccordionGroup);
-_defineProperty(Accordion, "Header", AccordionHeader);
-_defineProperty(Accordion, "Content", AccordionContent);
-_defineProperty(Accordion, "defaultProps", _objectSpread({}, accordionDefaultProps));
-process.env.NODE_ENV !== "production" ? Accordion.propTypes = _objectSpread({}, accordionPropTypes) : void 0;
-class Group extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "state", {});
-    _defineProperty(this, "onInit", instance => {
-      if (instance.props.id && !this._IDs.includes(instance.props.id)) {
-        this._IDs.push(instance.props.id);
+  return React.createElement(Context.Consumer, null, globalContext => React.createElement(AccordionContext.Consumer, null, nestedContext => {
+    let expandedState = expanded;
+    const extendedProps = extendPropsWithContext(props, accordionDefaultProps, context, nestedContext, {
+      skeleton: globalContext === null || globalContext === void 0 ? void 0 : globalContext.skeleton
+    }, globalContext.Accordion, globalContext.translation.Accordion);
+    if (expandedState === undefined && globalContext.Accordion) {
+      if (globalContext.Accordion.expanded) {
+        expandedState = extendedProps.expanded;
       }
-    });
-    let group;
-    if (props.id) {
-      group = props.id;
-    } else if (!props.group) {
-      group = '#' + makeUniqueId();
     }
-    this.state.group = group;
-    this.store = new Store({
+    const {
+        variant,
+        className,
+        class: _className,
+        prerender,
+        prevent_rerender,
+        prevent_rerender_conditional,
+        single_container,
+        remember_state,
+        disabled,
+        skeleton,
+        no_animation,
+        expanded_ssr: _expanded_ssr,
+        children,
+        id: _id,
+        group: _group,
+        title,
+        description,
+        left_component,
+        icon,
+        icon_position,
+        icon_size,
+        on_change,
+        on_state_update,
+        contentRef
+      } = extendedProps,
+      restOfExtendedProps = _objectWithoutProperties(extendedProps, _excluded2);
+    const mainParams = {
+      id,
+      className: classnames('dnb-accordion', createSpacingClasses(extendedProps), className, _className, expandedState && 'dnb-accordion--expanded', variant && `dnb-accordion__variant--${variant}`, prerender && 'dnb-accordion--prerender')
+    };
+    if (disabled) {
+      mainParams.onClick = handleDisabledClick;
+    }
+    validateDOMAttributes(props, restOfExtendedProps);
+    const extendedPropsForContext = extendPropsWithContext(props, accordionDefaultProps, {
+      expanded,
       group
+    }, context);
+    const accordionContext = _objectSpread(_objectSpread({}, extendedPropsForContext), {}, {
+      id,
+      expanded: expandedState,
+      prerender: prerender,
+      prevent_rerender: prevent_rerender,
+      prevent_rerender_conditional: prevent_rerender_conditional,
+      single_container: single_container,
+      remember_state: remember_state,
+      disabled: disabled,
+      skeleton: skeleton,
+      no_animation: no_animation,
+      callOnChange: callOnChangeHandler
     });
-    this._IDs = [];
-    if (isTrue(props.remember_state) && !props.id) {
-      rememberWarning('accordion group');
-    }
+    return React.createElement(AccordionContext.Provider, {
+      value: accordionContext
+    }, React.createElement("div", mainParams, findElementInChildren(children, cur => cur.type === AccordionHeader) ? null : _AccordionHeader || (_AccordionHeader = React.createElement(AccordionHeader, null)), findElementInChildren(children, cur => cur.type === AccordionContent) ? children : React.createElement(AccordionContent, null, children)));
+  }));
+}
+Accordion.defaultProps = accordionDefaultProps;
+const Group = props => {
+  if (props.remember_state && !props.id) {
+    rememberWarning('accordion group');
   }
-  componentDidMount() {
-    const storedData = this.store.getData();
-    if (storedData !== null && storedData !== void 0 && storedData.id) {
-      if (!this._IDs.includes(storedData.id)) {
-        const expanded_id = this._IDs[0];
-        if (expanded_id) {
-          this.setState({
-            expanded_id
-          }, () => {
-            this.store.saveState(true, expanded_id);
-            this.setState({
-              expanded_id: null
-            });
-          });
-        }
-      }
+  const [expandedId, setExpandedId] = useState(null);
+  const instanceIDs = useRef([]);
+  const group = props !== null && props !== void 0 && props.id ? props.id : !props.group ? '#' + makeUniqueId() : undefined;
+  const store = new Store({
+    group
+  });
+  useEffect(() => {
+    const storedData = store.getData();
+    const currentIDs = instanceIDs === null || instanceIDs === void 0 ? void 0 : instanceIDs.current;
+    if (!(storedData !== null && storedData !== void 0 && storedData.id)) {
+      return;
+    }
+    if (currentIDs.includes(storedData === null || storedData === void 0 ? void 0 : storedData.id)) {
+      return;
+    }
+    const fallbackId = currentIDs[0];
+    if (!fallbackId) {
+      return;
+    }
+    setExpandedId(fallbackId);
+  }, []);
+  useEffect(() => {
+    if (!expandedId) {
+      return;
+    }
+    store.saveState(true, expandedId);
+    setExpandedId(null);
+  }, [expandedId]);
+  function onInit(instance) {
+    if (instance.props.id && !instanceIDs.current.includes(instance.props.id)) {
+      instanceIDs.current.push(instance.props.id);
     }
   }
-  render() {
-    return React.createElement(AccordionGroup, _extends({
-      onInit: this.onInit
-    }, this.props, this.state));
-  }
-}
-_defineProperty(Group, "defaultProps", {
-  id: null,
-  group: null,
-  remember_state: null
-});
-process.env.NODE_ENV !== "production" ? Group.propTypes = {
-  id: PropTypes.string,
-  group: PropTypes.string,
-  remember_state: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
-} : void 0;
+  return React.createElement(AccordionGroup, _extends({
+    onInit: onInit
+  }, props, {
+    group: group,
+    expanded_id: expandedId || props.expanded_id
+  }));
+};
+Accordion.Provider = AccordionGroup;
+Accordion.Header = AccordionHeader;
+Accordion.Content = AccordionContent;
 Accordion.Group = Group;
-Accordion.Group.Store = function (group) {
+Group.Store = function (group) {
   let id = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   return new Store({
     group,
@@ -302,4 +264,5 @@ Accordion.Store = id => {
     id
   });
 };
+export default Accordion;
 //# sourceMappingURL=Accordion.js.map