@dnb/eufemia/cjs/components/accordion/Accordion.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _push = _interopRequireDefault(require("core-js-pure/stable/instance/push.js"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _componentHelper = require("../../shared/component-helper.js");
var _SpacingHelper = require("../space/SpacingHelper.js");
var _AccordionGroup = _interopRequireDefault(require("./AccordionGroup.js"));
var _AccordionHeader2 = _interopRequireDefault(require("./AccordionHeader.js"));
var _AccordionContent = _interopRequireDefault(require("./AccordionContent.js"));
var _AccordionContext = _interopRequireDefault(require("./AccordionContext.js"));
var _AccordionProviderContext = _interopRequireDefault(require("./AccordionProviderContext.js"));
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _AccordionStore = require("./AccordionStore.js");
var _defaultProps = require("./defaultProps.js");
var _AccordionHeader;
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function Accordion({
  variant = 'outlined',
  icon_size = 'medium',
  ...restOfProps
}) {
  const props = {
    variant,
    icon_size,
    ...restOfProps
  };
  const context = (0, _react.useContext)(_AccordionProviderContext.default);
  const group = props.group || (context === null || context === void 0 ? void 0 : context.group);
  const id = (0, _react.useRef)(props.id || (0, _componentHelper.makeUniqueId)()).current;
  const store = new _AccordionStore.Store({
    id: props.id,
    group
  });
  const [previousExpanded, setPreviousExpanded] = (0, _react.useState)(props.expanded);
  const [expanded, setExpanded] = (0, _react.useState)(getInitialExpandedState());
  const hasAddedCallbackRef = (0, _react.useRef)(false);
  if (props.expanded !== previousExpanded) {
    setExpanded(props.expanded !== undefined ? props.expanded : false);
    setPreviousExpanded(props.expanded);
  }
  const thisInstance = {
    _id: id,
    context,
    handleDisabledClick,
    callOnChange,
    callOnChangeHandler,
    close,
    setExpandedState,
    state: {
      expanded,
      group
    },
    props,
    store
  };
  (0, _react.useEffect)(() => {
    if (group && typeof window !== 'undefined') {
      window['__dnbAccordion'] = window['__dnbAccordion'] || {};
      window['__dnbAccordion'][group] = window['__dnbAccordion'][group] || new _AccordionStore.AccordionStore(group);
      window['__dnbAccordion'][group].addInstance(thisInstance);
    }
    if (context && typeof (context === null || context === void 0 ? void 0 : context.onInit) === 'function') {
      context.onInit(thisInstance);
    }
    return () => {
      if (group && typeof window !== 'undefined') {
        var _window;
        (_window = window) === null || _window === void 0 || (_window = _window['__dnbAccordion'][group]) === null || _window === void 0 || _window.removeInstance(thisInstance);
      }
    };
  }, []);
  (0, _react.useEffect)(() => {
    if (context.flush_remembered_state) {
      store.flush();
      setExpanded(props.expanded);
    }
    if (context !== null && context !== void 0 && context.expanded_id && context.expanded_id === props.id) {
      setExpanded(true);
    }
  }, [context.flush_remembered_state, context.expanded_id, props.expanded, props.id, store]);
  if (context !== null && context !== void 0 && context.collapseAllHandleRef && !hasAddedCallbackRef.current) {
    var _context$collapseAcco, _context;
    context === null || context === void 0 || (_context$collapseAcco = context.collapseAccordionCallbacks) === null || _context$collapseAcco === void 0 || (0, _push.default)(_context = _context$collapseAcco.current).call(_context, close);
    hasAddedCallbackRef.current = true;
  }
  function getInitialExpandedState() {
    if (props.expanded_ssr || context !== null && context !== void 0 && context.expanded_ssr) {
      return typeof window === 'undefined';
    }
    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;
  }
  function setExpandedState(expanded) {
    setExpanded(expanded);
  }
  function close() {
    changeOpened(false);
  }
  function changeOpened(expanded) {
    setExpanded(expanded);
    if (props.remember_state || context.remember_state) {
      store.saveState(expanded);
    }
  }
  function handleDisabledClick(e) {
    e.preventDefault();
    return false;
  }
  function callOnChangeHandler(...params) {
    callOnChange(...params);
    if (context !== null && context !== void 0 && context.onChange) {
      context === null || context === void 0 || context.onChange(...params);
    }
    if (group && typeof window !== 'undefined') {
      var _window2;
      (_window2 = window) === null || _window2 === void 0 || (_window2 = _window2['__dnbAccordion'][group]) === null || _window2 === void 0 || _window2.onChange(...params);
    }
  }
  function callOnChange(...params) {
    const {
      expanded,
      event
    } = params[0];
    changeOpened(expanded);
    (0, _componentHelper.dispatchCustomElementEvent)(thisInstance, 'on_change', {
      expanded,
      event
    });
  }
  return _react.default.createElement(_Context.default.Consumer, null, globalContext => _react.default.createElement(_AccordionContext.default.Consumer, null, nestedContext => {
    let expandedState = expanded;
    const extendedProps = (0, _componentHelper.extendPropsWithContext)(props, _defaultProps.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;
      }
    }
    const {
      variant,
      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,
      ...restOfExtendedProps
    } = extendedProps;
    const mainParams = {
      id,
      className: (0, _classnames.default)('dnb-accordion', (0, _SpacingHelper.createSpacingClasses)(extendedProps), className, expandedState && 'dnb-accordion--expanded', variant && `dnb-accordion__variant--${variant}`, prerender && 'dnb-accordion--prerender')
    };
    if (disabled) {
      mainParams.onClick = handleDisabledClick;
    }
    (0, _componentHelper.validateDOMAttributes)(props, restOfExtendedProps);
    const extendedPropsForContext = (0, _componentHelper.extendPropsWithContext)(props, _defaultProps.accordionDefaultProps, {
      expanded,
      group
    }, context);
    const accordionContext = {
      ...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
    };
    return _react.default.createElement(_AccordionContext.default.Provider, {
      value: accordionContext
    }, _react.default.createElement("div", mainParams, (0, _componentHelper.findElementInChildren)(children, cur => cur.type === _AccordionHeader2.default) ? null : _AccordionHeader || (_AccordionHeader = _react.default.createElement(_AccordionHeader2.default, null)), (0, _componentHelper.findElementInChildren)(children, cur => cur.type === _AccordionContent.default) ? children : _react.default.createElement(_AccordionContent.default, null, children)));
  }));
}
const Group = ({
  expandBehaviour,
  expandBehavior = 'single',
  ...props
}) => {
  if (props.remember_state && !props.id) {
    (0, _AccordionStore.rememberWarning)('accordion group');
  }
  const [expandedId, setExpandedId] = (0, _react.useState)(null);
  const instanceIDs = (0, _react.useRef)([]);
  const group = props !== null && props !== void 0 && props.id ? props.id : !props.group ? '#' + (0, _componentHelper.makeUniqueId)() : undefined;
  const store = (0, _react.useMemo)(() => new _AccordionStore.Store({
    group
  }), [group]);
  (0, _react.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);
  }, [store]);
  (0, _react.useEffect)(() => {
    if (!expandedId) {
      return;
    }
    store.saveState(true, expandedId);
    setExpandedId(null);
  }, [expandedId, store]);
  function onInit(instance) {
    if (instance.props.id && !instanceIDs.current.includes(instance.props.id)) {
      var _context2;
      (0, _push.default)(_context2 = instanceIDs.current).call(_context2, instance.props.id);
    }
  }
  return _react.default.createElement(_AccordionGroup.default, _extends({
    onInit: onInit
  }, props, {
    group: group,
    expandBehavior: expandBehaviour || expandBehavior,
    expanded_id: expandedId || props.expanded_id
  }));
};
Accordion.Provider = _AccordionGroup.default;
Accordion.Header = _AccordionHeader2.default;
Accordion.Content = _AccordionContent.default;
Accordion.Group = Group;
Group.Store = (group, id = null) => {
  return new _AccordionStore.Store({
    group,
    id
  });
};
Accordion.Store = id => {
  return new _AccordionStore.Store({
    id
  });
};
Accordion._supportsSpacingProps = true;
var _default = exports.default = Accordion;
//# sourceMappingURL=Accordion.js.map