UNPKG

@bentoproject/accordion

Version:

Displays content sections that can be collapsed and expanded.

694 lines (676 loc) 24.1 kB
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