@bentoproject/accordion/dist/component-react.max.js

Displays content sections that can be collapsed and expanded.

var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __markAsModule = function(target) {
  return __defProp(target, "__esModule", { value: true });
};
var __export = function(target, all) {
  __markAsModule(target);
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __reExport = function(target, module2, desc) {
  if (module2 && typeof module2 === "object" || typeof module2 === "function")
    for (var keys = __getOwnPropNames(module2), i = 0, n = keys.length, key; i < n; i++) {
      key = keys[i];
      if (!__hasOwnProp.call(target, key) && key !== "default")
        __defProp(target, key, { get: function(k) {
          return module2[k];
        }.bind(null, key), enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
    }
  return target;
};
var __toModule = function(module2) {
  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: function() {
    return module2.default;
  }, enumerable: true } : { value: module2, enumerable: true })), module2);
};

// src/bento/components/bento-accordion/1.0/component.js
__export(exports, {
  BentoAccordion: function() {
    return BentoAccordion;
  },
  BentoAccordionContent: function() {
    return BentoAccordionContent;
  },
  BentoAccordionHeader: function() {
    return BentoAccordionHeader;
  },
  BentoAccordionSection: function() {
    return BentoAccordionSection;
  }
});

// src/bento/components/bento-accordion/1.0/component.jss.js
var $sectionChild = "section-child-76fac82";
var $header = "header-76fac82";
var $contentHidden = "content-hidden-76fac82";

// src/core/data-structures/promise.js
var resolved;
function resolvedPromise() {
  if (resolved) {
    return resolved;
  }
  resolved = Promise.resolve(void 0);
  return resolved;
}

// node_modules/obj-str/dist/obj-str.mjs
function obj_str_default(obj) {
  var k, cls = "";
  for (k in obj) {
    if (obj[k]) {
      cls && (cls += " ");
      cls += k;
    }
  }
  return cls;
}

// src/core/data-structures/id-generator.js
function sequentialIdGenerator() {
  var counter = 0;
  return function() {
    return String(++counter);
  };
}
function randomIdGenerator(maxValue) {
  return function() {
    return String(Math.floor(Math.random() * maxValue));
  };
}

// src/core/types/object/index.js
var _Object$prototype = Object.prototype;
var hasOwn_ = _Object$prototype.hasOwnProperty;
var toString_ = _Object$prototype.toString;
function map(opt_initial) {
  var obj = Object.create(null);
  if (opt_initial) {
    Object.assign(obj, opt_initial);
  }
  return obj;
}
function omit(o, props) {
  return Object.keys(o).reduce(function(acc, key) {
    if (!props.includes(key)) {
      acc[key] = o[key];
    }
    return acc;
  }, {});
}

// src/bento/components/bento-accordion/1.0/component.js
var Preact = __toModule(require("@bentoproject/core/react"));
var import_preact = __toModule(require("@bentoproject/core/react"));
var import_compat = __toModule(require("@bentoproject/core/react"));
var import_context2 = __toModule(require("@bentoproject/core/react"));

// src/preact/utils.js
var import__ = __toModule(require("@bentoproject/core/react"));
var import_context = __toModule(require("@bentoproject/core/react"));
function tabindexFromProps(props, fallback) {
  var _ref, _props$tabindex;
  if (fallback === void 0) {
    fallback = 0;
  }
  return (_ref = (_props$tabindex = props.tabindex) != null ? _props$tabindex : props.tabIndex) != null ? _ref : fallback;
}

// src/core/types/array.js
var isArray = Array.isArray;

// src/core/dom/style.js
var propertyNameCache;
var vendorPrefixes = ["Webkit", "webkit", "Moz", "moz", "ms", "O", "o"];
function camelCaseToTitleCase(camelCase) {
  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
}
function camelCaseToHyphenCase(camelCase) {
  var hyphenated = camelCase.replace(/[A-Z]/g, function(match) {
    return "-" + match.toLowerCase();
  });
  if (vendorPrefixes.some(function(prefix) {
    return hyphenated.startsWith(prefix + "-");
  })) {
    return "-" + hyphenated;
  }
  return hyphenated;
}
function getVendorJsPropertyName_(style, titleCase) {
  for (var i = 0; i < vendorPrefixes.length; i++) {
    var propertyName = vendorPrefixes[i] + titleCase;
    if (style[propertyName] !== void 0) {
      return propertyName;
    }
  }
  return "";
}
function getVendorJsPropertyName(style, camelCase, opt_bypassCache) {
  if (isVar(camelCase)) {
    return camelCase;
  }
  if (!propertyNameCache) {
    propertyNameCache = map();
  }
  var propertyName = propertyNameCache[camelCase];
  if (!propertyName || opt_bypassCache) {
    propertyName = camelCase;
    if (style[camelCase] === void 0) {
      var titleCase = camelCaseToTitleCase(camelCase);
      var prefixedPropertyName = getVendorJsPropertyName_(style, titleCase);
      if (style[prefixedPropertyName] !== void 0) {
        propertyName = prefixedPropertyName;
      }
    }
    if (!opt_bypassCache) {
      propertyNameCache[camelCase] = propertyName;
    }
  }
  return propertyName;
}
function setStyle(element, property, value, opt_units, opt_bypassCache) {
  var propertyName = getVendorJsPropertyName(element.style, property, opt_bypassCache);
  if (!propertyName) {
    return;
  }
  var styleValue = opt_units ? value + opt_units : value;
  element.style.setProperty(camelCaseToHyphenCase(propertyName), styleValue);
}
function getStyle(element, property, opt_bypassCache) {
  var propertyName = getVendorJsPropertyName(element.style, property, opt_bypassCache);
  if (!propertyName) {
    return void 0;
  }
  if (isVar(propertyName)) {
    return element.style.getPropertyValue(propertyName);
  }
  return element.style[propertyName];
}
function setStyles(element, styles) {
  for (var k in styles) {
    setStyle(element, k, styles[k]);
  }
}
function isVar(property) {
  return property.startsWith("--");
}

// src/bento/components/bento-accordion/1.0/animations.js
var MAX_TRANSITION_DURATION = 500;
var MIN_TRANSITION_DURATION = 200;
var EXPAND_CURVE = "cubic-bezier(0.47, 0, 0.745, 0.715)";
var COLLAPSE_CURVE = "cubic-bezier(0.39, 0.575, 0.565, 1)";
function animateExpand(content) {
  return animate(content, function() {
    var oldHeight = getStyle(content, "height");
    var oldOpacity = getStyle(content, "opacity");
    var oldOverflowY = getStyle(content, "overflowY");
    setStyles(content, {
      height: 0,
      opacity: 0,
      overflowY: "auto"
    });
    var targetHeight = content.scrollHeight;
    setStyles(content, {
      height: oldHeight,
      opacity: oldOpacity,
      overflowY: oldOverflowY
    });
    var duration = getTransitionDuration(targetHeight);
    return content.animate([{
      height: 0,
      opacity: 0,
      overflowY: "hidden"
    }, {
      height: targetHeight + "px",
      opacity: 1,
      overflowY: "hidden"
    }], {
      easing: EXPAND_CURVE,
      duration: duration
    });
  });
}
function animateCollapse(content) {
  return animate(content, function() {
    var startHeight = content.offsetHeight;
    var duration = getTransitionDuration(startHeight);
    return content.animate([{
      height: startHeight + "px",
      opacity: 1,
      overflowY: "hidden"
    }, {
      height: "0",
      opacity: 0,
      overflowY: "hidden"
    }], {
      easing: COLLAPSE_CURVE,
      duration: duration
    });
  });
}
function animate(element, prepare, cleanup) {
  if (cleanup === void 0) {
    cleanup = void 0;
  }
  element.classList.add("i-amphtml-animating");
  var player = prepare();
  player.onfinish = player.oncancel = function() {
    player = null;
    if (cleanup) {
      cleanup();
    }
    element.classList.remove("i-amphtml-animating");
  };
  return function() {
    if (player) {
      player.cancel();
    }
  };
}
function getTransitionDuration(dy) {
  var maxY = window.innerHeight;
  var distanceAdjustedDuration = Math.abs(dy) / maxY * MAX_TRANSITION_DURATION;
  return Math.min(Math.max(distanceAdjustedDuration, MIN_TRANSITION_DURATION), MAX_TRANSITION_DURATION);
}

// src/bento/components/bento-accordion/1.0/component.js
var _excluded = ["animate", "as", "children", "expandSingleSection", "id"];
var _excluded2 = ["animate", "as", "children", "expanded", "id", "onExpandStateChange"];
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 !== void 0) {
    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);
}
function _extends() {
  _extends = Object.assign || 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 _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;
}
var AccordionContext = Preact.createContext({});
var SectionContext = Preact.createContext({});
var EMPTY_EXPANDED_MAP = {};
var EMPTY_EVENT_MAP = {};
var generateSectionId = sequentialIdGenerator();
var generateRandomId = randomIdGenerator(1e5);
function BentoAccordionWithRef(_ref, ref) {
  var _ref$animate = _ref.animate, animate2 = _ref$animate === void 0 ? false : _ref$animate, _ref$as = _ref.as, Comp = _ref$as === void 0 ? "section" : _ref$as, children = _ref.children, _ref$expandSingleSect = _ref.expandSingleSection, expandSingleSection = _ref$expandSingleSect === void 0 ? false : _ref$expandSingleSect, id = _ref.id, rest = _objectWithoutPropertiesLoose(_ref, _excluded);
  var _useState = (0, import_preact.useState)(EMPTY_EXPANDED_MAP), expandedMap = _useState[0], setExpandedMap = _useState[1];
  var eventMapRef = (0, import_preact.useRef)(EMPTY_EVENT_MAP);
  var _useState2 = (0, import_preact.useState)(generateRandomId), randomPrefix = _useState2[0];
  var prefix = id || "a" + randomPrefix;
  (0, import_preact.useEffect)(function() {
    if (!expandSingleSection) {
      return;
    }
    setExpandedMap(function(expandedMap2) {
      var newExpandedMap = {};
      var expanded = 0;
      for (var k in expandedMap2) {
        newExpandedMap[k] = expandedMap2[k] && expanded++ == 0;
      }
      return newExpandedMap;
    });
  }, [expandSingleSection]);
  var registerSection = (0, import_preact.useCallback)(function(id2, defaultExpanded, _ref2) {
    var _extends2;
    var onExpandStateChange = _ref2.current;
    setExpandedMap(function(expandedMap2) {
      return setExpanded(id2, defaultExpanded, expandedMap2, expandSingleSection);
    });
    eventMapRef.current = _extends({}, eventMapRef.current, (_extends2 = {}, _extends2[id2] = onExpandStateChange, _extends2));
    return function() {
      setExpandedMap(function(expandedMap2) {
        return omit(expandedMap2, id2);
      });
      eventMapRef.current = omit(eventMapRef.current, id2);
    };
  }, [expandSingleSection]);
  var toggleExpanded = (0, import_preact.useCallback)(function(id2, opt_expand) {
    setExpandedMap(function(expandedMap2) {
      var newExpanded = opt_expand != null ? opt_expand : !expandedMap2[id2];
      var newExpandedMap = setExpanded(id2, newExpanded, expandedMap2, expandSingleSection);
      resolvedPromise().then(function() {
        for (var k in expandedMap2) {
          var onExpandStateChange = eventMapRef.current[k];
          if (onExpandStateChange && expandedMap2[k] != newExpandedMap[k]) {
            onExpandStateChange(newExpandedMap[k]);
          }
        }
      });
      return newExpandedMap;
    });
  }, [expandSingleSection]);
  var isExpanded = (0, import_preact.useCallback)(function(id2, defaultExpanded) {
    var _expandedMap$id;
    return (_expandedMap$id = expandedMap[id2]) != null ? _expandedMap$id : defaultExpanded;
  }, [expandedMap]);
  var toggle = (0, import_preact.useCallback)(function(id2) {
    if (id2) {
      if (id2 in expandedMap) {
        toggleExpanded(id2);
      }
    } else {
      if (!expandSingleSection) {
        for (var k in expandedMap) {
          toggleExpanded(k);
        }
      }
    }
  }, [expandedMap, toggleExpanded, expandSingleSection]);
  var expand = (0, import_preact.useCallback)(function(id2) {
    if (id2) {
      if (!isExpanded(id2, true)) {
        toggleExpanded(id2);
      }
    } else {
      if (!expandSingleSection) {
        for (var k in expandedMap) {
          if (!isExpanded(k, true)) {
            toggleExpanded(k);
          }
        }
      }
    }
  }, [expandedMap, toggleExpanded, isExpanded, expandSingleSection]);
  var collapse = (0, import_preact.useCallback)(function(id2) {
    if (id2) {
      if (isExpanded(id2, false)) {
        toggleExpanded(id2);
      }
    } else {
      for (var k in expandedMap) {
        if (isExpanded(k, false)) {
          toggleExpanded(k);
        }
      }
    }
  }, [expandedMap, toggleExpanded, isExpanded]);
  (0, import_preact.useImperativeHandle)(ref, function() {
    return {
      toggle: toggle,
      expand: expand,
      collapse: collapse
    };
  }, [toggle, collapse, expand]);
  var context = (0, import_preact.useMemo)(function() {
    return {
      registerSection: registerSection,
      toggleExpanded: toggleExpanded,
      isExpanded: isExpanded,
      animate: animate2,
      prefix: prefix
    };
  }, [registerSection, toggleExpanded, isExpanded, animate2, prefix]);
  return Preact.createElement(Comp, _extends({
    id: id
  }, rest), Preact.createElement(AccordionContext.Provider, {
    value: context
  }, children));
}
var BentoAccordion = (0, import_compat.forwardRef)(BentoAccordionWithRef);
BentoAccordion.displayName = "Accordion";
function setExpanded(id, value, expandedMap, expandSingleSection) {
  var newExpandedMap;
  if (expandSingleSection && value) {
    var _newExpandedMap;
    newExpandedMap = (_newExpandedMap = {}, _newExpandedMap[id] = value, _newExpandedMap);
    for (var k in expandedMap) {
      if (k != id) {
        newExpandedMap[k] = false;
      }
    }
  } else {
    var _extends3;
    newExpandedMap = _extends({}, expandedMap, (_extends3 = {}, _extends3[id] = value, _extends3));
  }
  return newExpandedMap;
}
function BentoAccordionSection(_ref3) {
  var _ref3$animate = _ref3.animate, defaultAnimate = _ref3$animate === void 0 ? false : _ref3$animate, _ref3$as = _ref3.as, Comp = _ref3$as === void 0 ? "section" : _ref3$as, children = _ref3.children, _ref3$expanded = _ref3.expanded, defaultExpanded = _ref3$expanded === void 0 ? false : _ref3$expanded, propId = _ref3.id, onExpandStateChange = _ref3.onExpandStateChange, rest = _objectWithoutPropertiesLoose(_ref3, _excluded2);
  var _useState3 = (0, import_preact.useState)(generateSectionId), genId = _useState3[0];
  var id = propId || genId;
  var _useState4 = (0, import_preact.useState)(generateRandomId), suffix = _useState4[0];
  var _useState5 = (0, import_preact.useState)(defaultExpanded), expandedState = _useState5[0], setExpandedState = _useState5[1];
  var _useState6 = (0, import_preact.useState)(null), contentIdState = _useState6[0], setContentIdState = _useState6[1];
  var _useState7 = (0, import_preact.useState)(null), headerIdState = _useState7[0], setHeaderIdState = _useState7[1];
  var _useContext = (0, import_preact.useContext)(AccordionContext), contextAnimate = _useContext.animate, isExpanded = _useContext.isExpanded, prefix = _useContext.prefix, registerSection = _useContext.registerSection, toggleExpanded = _useContext.toggleExpanded;
  var expanded = isExpanded ? isExpanded(id, defaultExpanded) : expandedState;
  var animate2 = contextAnimate != null ? contextAnimate : defaultAnimate;
  var contentId = contentIdState || (prefix || "a") + "-content-" + id + "-" + suffix;
  var headerId = headerIdState || (prefix || "a") + "-header-" + id + "-" + suffix;
  var onExpandStateChangeRef = (0, import_preact.useRef)(null);
  onExpandStateChangeRef.current = onExpandStateChange;
  (0, import_preact.useLayoutEffect)(function() {
    if (registerSection) {
      return registerSection(id, defaultExpanded, onExpandStateChangeRef);
    }
  }, [registerSection, id, defaultExpanded]);
  var toggleHandler = (0, import_preact.useCallback)(function(opt_expand) {
    if (toggleExpanded) {
      toggleExpanded(id, opt_expand);
    } else {
      setExpandedState(function(prev) {
        var newValue = opt_expand != null ? opt_expand : !prev;
        resolvedPromise().then(function() {
          var onExpandStateChange2 = onExpandStateChangeRef.current;
          if (onExpandStateChange2) {
            onExpandStateChange2(newValue);
          }
        });
        return newValue;
      });
    }
  }, [id, toggleExpanded]);
  var context = (0, import_preact.useMemo)(function() {
    return {
      animate: animate2,
      contentId: contentId,
      headerId: headerId,
      expanded: expanded,
      toggleHandler: toggleHandler,
      setContentId: setContentIdState,
      setHeaderId: setHeaderIdState
    };
  }, [animate2, contentId, headerId, expanded, toggleHandler]);
  return Preact.createElement(Comp, _extends({}, rest), Preact.createElement(SectionContext.Provider, {
    value: context
  }, children));
}
function BentoAccordionHeader(_ref4) {
  var _propName = "className", _ref4$as = _ref4.as, Comp = _ref4$as === void 0 ? "div" : _ref4$as, children = _ref4.children, id = _ref4.id, _ref4$role = _ref4.role, role = _ref4$role === void 0 ? "button" : _ref4$role, _ref4$_propName = _ref4[_propName], className = _ref4$_propName === void 0 ? "" : _ref4$_propName, rest = _objectWithoutPropertiesLoose(_ref4, ["as", "children", "id", "role", _propName].map(_toPropertyKey));
  var _useContext2 = (0, import_preact.useContext)(SectionContext), contentId = _useContext2.contentId, expanded = _useContext2.expanded, headerId = _useContext2.headerId, setHeaderId = _useContext2.setHeaderId, toggleHandler = _useContext2.toggleHandler;
  (0, import_preact.useLayoutEffect)(function() {
    if (setHeaderId) {
      setHeaderId(id);
    }
  }, [setHeaderId, id]);
  return Preact.createElement(Comp, _extends({}, rest, {
    id: headerId,
    role: role,
    className: className + " " + $sectionChild + " " + $header,
    tabIndex: tabindexFromProps(rest),
    "aria-controls": contentId,
    onClick: function onClick() {
      return toggleHandler();
    },
    "aria-expanded": String(expanded)
  }), children);
}
function BentoAccordionContent(_ref5) {
  var _objstr;
  var _propName2 = "className", _ref5$as = _ref5.as, Comp = _ref5$as === void 0 ? "div" : _ref5$as, children = _ref5.children, id = _ref5.id, _ref5$role = _ref5.role, role = _ref5$role === void 0 ? "region" : _ref5$role, _ref5$_propName = _ref5[_propName2], className = _ref5$_propName === void 0 ? "" : _ref5$_propName, rest = _objectWithoutPropertiesLoose(_ref5, ["as", "children", "id", "role", _propName2].map(_toPropertyKey));
  var ref = (0, import_preact.useRef)(null);
  var hasMountedRef = (0, import_preact.useRef)(false);
  var _useContext3 = (0, import_preact.useContext)(SectionContext), animate2 = _useContext3.animate, contentId = _useContext3.contentId, expanded = _useContext3.expanded, headerId = _useContext3.headerId, setContentId = _useContext3.setContentId;
  (0, import_preact.useEffect)(function() {
    hasMountedRef.current = true;
    return function() {
      return hasMountedRef.current = false;
    };
  }, []);
  (0, import_preact.useLayoutEffect)(function() {
    if (setContentId) {
      setContentId(id);
    }
  }, [setContentId, id]);
  (0, import_preact.useLayoutEffect)(function() {
    var hasMounted = hasMountedRef.current;
    var content = ref.current;
    if (!animate2 || !hasMounted || !content || !content.animate) {
      return;
    }
    return expanded ? animateExpand(content) : animateCollapse(content);
  }, [expanded, animate2]);
  return Preact.createElement(import_context2.WithAmpContext, {
    renderable: expanded
  }, Preact.createElement(Comp, _extends({}, rest, {
    ref: ref,
    className: obj_str_default((_objstr = {}, _objstr[className] = true, _objstr[$sectionChild] = true, _objstr[$contentHidden] = !expanded, _objstr)),
    id: contentId,
    "aria-labelledby": headerId,
    role: role
  }), children));
}

//# sourceMappingURL=component-react.max.js.map