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

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
Object.defineProperty(exports, "accordionDefaultProps", {
  enumerable: true,
  get: function () {
    return _types.accordionDefaultProps;
  }
});
exports.default = void 0;
var _push = _interopRequireDefault(require("core-js-pure/stable/instance/push.js"));
var _react = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _componentHelper = require("../../shared/component-helper.js");
var _SpacingUtils = require("../space/SpacingUtils.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 _types = require("./types.js");
var _withComponentMarkers = _interopRequireDefault(require("../../shared/helpers/withComponentMarkers.js"));
var _jsxRuntime = require("react/jsx-runtime");
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 Accordion({
  variant = 'outlined',
  iconSize = 'medium',
  ...restOfProps
}) {
  const props = {
    variant,
    iconSize,
    ...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.flushRememberedState) {
      store.flush();
      setExpanded(props.expanded);
    }
    if (context !== null && context !== void 0 && context.expandedId && context.expandedId === props.id) {
      setExpanded(true);
    }
  }, [context.flushRememberedState, context.expandedId, 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.expandedSsr || context !== null && context !== void 0 && context.expandedSsr) {
      return typeof window === 'undefined';
    }
    if (props.rememberState || context.rememberState) {
      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.rememberState || context.rememberState) {
      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;
    changeOpened(expanded);
    (0, _componentHelper.dispatchCustomElementEvent)(thisInstance, 'onChange', {
      expanded,
      event
    });
  }
  const globalContext = (0, _react.useContext)(_Context.default);
  const nestedContext = (0, _react.useContext)(_AccordionContext.default);
  let expandedState = expanded;
  const extendedProps = (0, _componentHelper.extendPropsWithContext)(props, _types.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: extendedVariant,
    className,
    keepInDOM,
    preventRerender,
    preventRerenderConditional,
    singleContainer,
    rememberState,
    disabled,
    skeleton,
    noAnimation,
    expandedSsr: _expandedSsr,
    children,
    id: _id,
    group: _group,
    title,
    description,
    leftComponent,
    icon,
    iconPosition,
    iconSize: _iconSize,
    onChange,
    contentRef,
    ...restOfExtendedProps
  } = extendedProps;
  const mainParams = (0, _SpacingUtils.applySpacing)(extendedProps, {
    id,
    className: (0, _clsx.default)('dnb-accordion', className, expandedState && 'dnb-accordion--expanded', extendedVariant && `dnb-accordion__variant--${extendedVariant}`, keepInDOM && 'dnb-accordion--prerender')
  });
  if (disabled) {
    mainParams.onClick = handleDisabledClick;
  }
  (0, _componentHelper.validateDOMAttributes)(props, restOfExtendedProps);
  const extendedPropsForContext = (0, _componentHelper.extendPropsWithContext)(props, _types.accordionDefaultProps, {
    expanded,
    group
  }, context);
  const accordionContext = {
    ...extendedPropsForContext,
    id,
    expanded: expandedState,
    keepInDOM: keepInDOM,
    preventRerender: preventRerender,
    preventRerenderConditional: preventRerenderConditional,
    singleContainer: singleContainer,
    rememberState: rememberState,
    disabled: disabled,
    skeleton: skeleton,
    noAnimation: noAnimation,
    callOnChange: callOnChangeHandler
  };
  return (0, _jsxRuntime.jsx)(_AccordionContext.default, {
    value: accordionContext,
    children: (0, _jsxRuntime.jsxs)("div", {
      ...mainParams,
      children: [(0, _componentHelper.findElementInChildren)(children, cur => cur.type === _AccordionHeader2.default) ? null : _AccordionHeader || (_AccordionHeader = (0, _jsxRuntime.jsx)(_AccordionHeader2.default, {})), (0, _componentHelper.findElementInChildren)(children, cur => cur.type === _AccordionContent.default) ? children : (0, _jsxRuntime.jsx)(_AccordionContent.default, {
        children: children
      })]
    })
  });
}
const Group = ({
  expandBehavior = 'single',
  ...props
}) => {
  if (props.rememberState && !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 (0, _jsxRuntime.jsx)(_AccordionGroup.default, {
    onInit: onInit,
    ...props,
    group: group,
    expandBehavior: expandBehavior,
    expandedId: expandedId || props.expandedId
  });
};
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
  });
};
(0, _withComponentMarkers.default)(Accordion, {
  _supportsSpacingProps: true
});
var _default = exports.default = Accordion;
//# sourceMappingURL=Accordion.js.map