@bentoproject/accordion
Version:
Displays content sections that can be collapsed and expanded.
694 lines (676 loc) • 24.1 kB
JavaScript
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);
};
// extensions/amp-accordion/1.0/component.js
__export(exports, {
BentoAccordion: function() {
return BentoAccordion;
},
BentoAccordionContent: function() {
return BentoAccordionContent;
},
BentoAccordionHeader: function() {
return BentoAccordionHeader;
},
BentoAccordionSection: function() {
return BentoAccordionSection;
}
});
// extensions/amp-accordion/1.0/component.jss.js
var $sectionChild = "section-child-00fce3c";
var $header = "header-00fce3c";
var $contentHidden = "content-hidden-00fce3c";
// 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/preact/index.js
var preact = __toModule(require("preact"));
var preactDOM = __toModule(require("preact"));
var hooks = __toModule(require("preact/hooks"));
function createElement2(unusedType, unusedProps, var_args) {
return preact.createElement.apply(void 0, arguments);
}
function createContext2(value) {
return preact.createContext(value, void 0);
}
function useState2(initial) {
return hooks.useState(initial);
}
function useRef2(initial) {
return hooks.useRef(initial);
}
function useEffect2(effect, opt_deps) {
hooks.useEffect(effect, opt_deps);
}
function useLayoutEffect2(effect, opt_deps) {
hooks.useLayoutEffect(effect, opt_deps);
}
function useContext2(context2) {
return hooks.useContext(context2);
}
function useMemo2(cb, opt_deps) {
return hooks.useMemo(cb, opt_deps);
}
function useCallback2(cb, opt_deps) {
return hooks.useCallback(cb, opt_deps);
}
function useImperativeHandle2(ref, create, opt_deps) {
return hooks.useImperativeHandle(ref, create, opt_deps);
}
// src/preact/compat.js
var import_preact = __toModule(require("preact"));
// src/core/mode/prod.js
function isProd() {
return false;
}
// src/preact/compat.js
var _excluded = ["ref"];
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 REACT_FORWARD_SYMBOL = typeof Symbol !== "undefined" && (Symbol.for == null ? void 0 : Symbol.for("react.forward_ref")) || 3911;
var oldDiff = import_preact.options["__b"];
import_preact.options["__b"] = newDiff;
function newDiff(vnode) {
var _vnode$type;
if ((_vnode$type = vnode["type"]) != null && _vnode$type.forwardRef_ && vnode["ref"]) {
vnode["props"]["ref"] = vnode["ref"];
vnode["ref"] = null;
}
oldDiff == null ? void 0 : oldDiff(vnode);
}
function forwardRef(Component) {
function Forward(props) {
var ref = props.ref, clone = _objectWithoutPropertiesLoose(props, _excluded);
return Component(clone, ref);
}
Forward.$$typeof = REACT_FORWARD_SYMBOL;
Forward.render = Forward;
Forward.prototype.isReactComponent = true;
Forward.forwardRef_ = true;
if (!isProd()) {
Forward.displayName = "ForwardRef(" + (Component.displayName || Component.name) + ")";
}
return Forward;
}
// src/core/constants/loading-instructions.js
var _MAP;
var Loading_Enum = {
AUTO: "auto",
LAZY: "lazy",
EAGER: "eager",
UNLOAD: "unload"
};
var ORDER = [Loading_Enum.AUTO, Loading_Enum.LAZY, Loading_Enum.EAGER, Loading_Enum.UNLOAD];
var MAP = (_MAP = {}, _MAP[Loading_Enum.AUTO] = 0, _MAP[Loading_Enum.LAZY] = 1, _MAP[Loading_Enum.EAGER] = 2, _MAP[Loading_Enum.UNLOAD] = 3, _MAP);
function reducer(v1, v2) {
var ordinal1 = MAP[v1] || 0;
var ordinal2 = MAP[v2] || 0;
var ordinal = Math.max(ordinal1, ordinal2);
return ORDER[ordinal];
}
// src/preact/context.js
var context;
function getAmpContext() {
return context || (context = createContext2({
renderable: true,
playable: true,
loading: Loading_Enum.AUTO
}));
}
function WithAmpContext(_ref) {
var children = _ref.children, _ref$loading = _ref.loading, loadingProp = _ref$loading === void 0 ? "auto" : _ref$loading, notifyProp = _ref.notify, _ref$playable = _ref.playable, playableProp = _ref$playable === void 0 ? true : _ref$playable, _ref$renderable = _ref.renderable, renderableProp = _ref$renderable === void 0 ? true : _ref$renderable;
var parent = useAmpContext();
var renderable = renderableProp && parent.renderable;
var playable = renderable && playableProp && parent.playable;
var loading = reducer(renderable ? Loading_Enum.AUTO : Loading_Enum.LAZY, reducer(loadingProp, parent.loading));
var notify = notifyProp || parent.notify;
var current = useMemo2(function() {
return {
renderable: renderable,
playable: playable,
loading: loading,
notify: notify
};
}, [renderable, playable, loading, notify]);
var AmpContext = getAmpContext();
return createElement2(AmpContext.Provider, {
children: children,
value: current
});
}
function useAmpContext() {
var AmpContext = getAmpContext();
return useContext2(AmpContext);
}
// src/preact/utils.js
function propName(name) {
return name;
}
// 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 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;
if (isVar(propertyName)) {
element.style.setProperty(propertyName, styleValue);
} else {
element.style[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("--");
}
// extensions/amp-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);
}
// extensions/amp-accordion/1.0/component.js
var _excluded2 = ["animate", "as", "children", "expandSingleSection", "id"];
var _excluded22 = ["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 _objectWithoutPropertiesLoose2(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 = createContext2({});
var SectionContext = createContext2({});
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 = _objectWithoutPropertiesLoose2(_ref, _excluded2);
var _useState = useState2(EMPTY_EXPANDED_MAP), expandedMap = _useState[0], setExpandedMap = _useState[1];
var eventMapRef = useRef2(EMPTY_EVENT_MAP);
var _useState2 = useState2(generateRandomId), randomPrefix = _useState2[0];
var prefix = id || "a" + randomPrefix;
useEffect2(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 = useCallback2(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 = useCallback2(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 = useCallback2(function(id2, defaultExpanded) {
var _expandedMap$id;
return (_expandedMap$id = expandedMap[id2]) != null ? _expandedMap$id : defaultExpanded;
}, [expandedMap]);
var toggle = useCallback2(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 = useCallback2(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 = useCallback2(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]);
useImperativeHandle2(ref, function() {
return {
toggle: toggle,
expand: expand,
collapse: collapse
};
}, [toggle, collapse, expand]);
var context2 = useMemo2(function() {
return {
registerSection: registerSection,
toggleExpanded: toggleExpanded,
isExpanded: isExpanded,
animate: animate2,
prefix: prefix
};
}, [registerSection, toggleExpanded, isExpanded, animate2, prefix]);
return createElement2(Comp, _extends({
id: id
}, rest), createElement2(AccordionContext.Provider, {
value: context2
}, children));
}
var BentoAccordion = 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 = _objectWithoutPropertiesLoose2(_ref3, _excluded22);
var _useState3 = useState2(generateSectionId), genId = _useState3[0];
var id = propId || genId;
var _useState4 = useState2(generateRandomId), suffix = _useState4[0];
var _useState5 = useState2(defaultExpanded), expandedState = _useState5[0], setExpandedState = _useState5[1];
var _useState6 = useState2(null), contentIdState = _useState6[0], setContentIdState = _useState6[1];
var _useState7 = useState2(null), headerIdState = _useState7[0], setHeaderIdState = _useState7[1];
var _useContext = useContext2(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 = useRef2(null);
onExpandStateChangeRef.current = onExpandStateChange;
useLayoutEffect2(function() {
if (registerSection) {
return registerSection(id, defaultExpanded, onExpandStateChangeRef);
}
}, [registerSection, id, defaultExpanded]);
var toggleHandler = useCallback2(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 context2 = useMemo2(function() {
return {
animate: animate2,
contentId: contentId,
headerId: headerId,
expanded: expanded,
toggleHandler: toggleHandler,
setContentId: setContentIdState,
setHeaderId: setHeaderIdState
};
}, [animate2, contentId, headerId, expanded, toggleHandler]);
return createElement2(Comp, _extends({}, rest), createElement2(SectionContext.Provider, {
value: context2
}, children));
}
function BentoAccordionHeader(_ref4) {
var _propName = propName("class"), _propName2 = propName("tabIndex"), _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, _ref4$_propName2 = _ref4[_propName2], tabIndex = _ref4$_propName2 === void 0 ? 0 : _ref4$_propName2, rest = _objectWithoutPropertiesLoose2(_ref4, ["as", "children", "id", "role", _propName, _propName2].map(_toPropertyKey));
var _useContext2 = useContext2(SectionContext), contentId = _useContext2.contentId, expanded = _useContext2.expanded, headerId = _useContext2.headerId, setHeaderId = _useContext2.setHeaderId, toggleHandler = _useContext2.toggleHandler;
useLayoutEffect2(function() {
if (setHeaderId) {
setHeaderId(id);
}
}, [setHeaderId, id]);
return createElement2(Comp, _extends({}, rest, {
id: headerId,
role: role,
class: className + " " + $sectionChild + " " + $header,
tabIndex: tabIndex,
"aria-controls": contentId,
onClick: function onClick() {
return toggleHandler();
},
"aria-expanded": String(expanded)
}), children);
}
function BentoAccordionContent(_ref5) {
var _objstr;
var _propName3 = propName("class"), _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[_propName3], className = _ref5$_propName === void 0 ? "" : _ref5$_propName, rest = _objectWithoutPropertiesLoose2(_ref5, ["as", "children", "id", "role", _propName3].map(_toPropertyKey));
var ref = useRef2(null);
var hasMountedRef = useRef2(false);
var _useContext3 = useContext2(SectionContext), animate2 = _useContext3.animate, contentId = _useContext3.contentId, expanded = _useContext3.expanded, headerId = _useContext3.headerId, setContentId = _useContext3.setContentId;
useEffect2(function() {
hasMountedRef.current = true;
return function() {
return hasMountedRef.current = false;
};
}, []);
useLayoutEffect2(function() {
if (setContentId) {
setContentId(id);
}
}, [setContentId, id]);
useLayoutEffect2(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 createElement2(WithAmpContext, {
renderable: expanded
}, createElement2(Comp, _extends({}, rest, {
ref: ref,
class: obj_str_default((_objstr = {}, _objstr[className] = true, _objstr[$sectionChild] = true, _objstr[$contentHidden] = !expanded, _objstr)),
id: contentId,
"aria-labelledby": headerId,
role: role
}), children));
}
//# sourceMappingURL=component-preact.max.js.map