@unlk/keymaster 1.4.5 → 1.4.6

package/dist/js/keymaster.js

@@ -1,5 +1,5 @@
 /*!
-  * Unlock Keymaster v1.4.5 (https://keymaster.unlock.com)
+  * Unlock Keymaster v1.4.6 (https://keymaster.unlock.com)
   * Copyright 2022-2026 Unlk Developers
   */
 (function (global, factory) {

package/dist/js/keymaster.min.js

@@ -1,5 +1,5 @@
 /*!
-  * Unlock Keymaster v1.4.5 (https://keymaster.unlock.com)
+  * Unlock Keymaster v1.4.6 (https://keymaster.unlock.com)
   * Copyright 2022-2026 Unlk Developers
   */
 !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).keymaster={})}(this,function(e){"use strict";function t(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function n(e){if(Object.prototype.hasOwnProperty.call(e,"__esModule"))return e;var t=e.default;if("function"==typeof t){var n=function e(){var n=!1;try{n=this instanceof e}catch{}return n?Reflect.construct(t,arguments,this.constructor):t.apply(this,arguments)};n.prototype=t.prototype}else n={};return Object.defineProperty(n,"__esModule",{value:!0}),Object.keys(e).forEach(function(t){var i=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,i.get?i:{enumerable:!0,get:function(){return e[t]}})}),n}var i,s={exports:{}},o={exports:{}},r={exports:{}};function a(){return i||(i=1,function(e){e.exports=function(){const e=new Map,t={set(t,n,i){e.has(t)||e.set(t,new Map);const s=e.get(t);(s.has(n)||0===s.size)&&s.set(n,i)},get:(t,n)=>e.has(t)&&e.get(t).get(n)||null,remove(t,n){if(!e.has(t))return;const i=e.get(t);i.delete(n),0===i.size&&e.delete(t)}};return t}()}(r)),r.exports}var l,c={exports:{}},u={exports:{}};function h(){return l||(l=1,function(e){const t=1e6,n=1e3,i="transitionend",s=e=>(e&&window.CSS&&window.CSS.escape&&(e=e.replace(/#([^\s"#']+)/g,(e,t)=>`#${CSS.escape(t)}`)),e),o=e=>null==e?`${e}`:Object.prototype.toString.call(e).match(/\s([a-z]+)/i)[1].toLowerCase(),r=e=>{do{e+=Math.floor(Math.random()*t)}while(document.getElementById(e));return e},a=e=>{if(!e)return 0;let{transitionDuration:t,transitionDelay:i}=window.getComputedStyle(e);const s=Number.parseFloat(t),o=Number.parseFloat(i);return s||o?(t=t.split(",")[0],i=i.split(",")[0],(Number.parseFloat(t)+Number.parseFloat(i))*n):0},l=e=>{e.dispatchEvent(new Event(i))},c=e=>!(!e||"object"!=typeof e)&&(void 0!==e.jquery&&(e=e[0]),void 0!==e.nodeType),u=e=>c(e)?e.jquery?e[0]:e:"string"==typeof e&&e.length>0?document.querySelector(s(e)):null,h=e=>{if(!c(e)||0===e.getClientRects().length)return!1;const t="visible"===getComputedStyle(e).getPropertyValue("visibility"),n=e.closest("details:not([open])");if(!n)return t;if(n!==e){const t=e.closest("summary");if(t&&t.parentNode!==n)return!1;if(null===t)return!1}return t},d=e=>!e||e.nodeType!==Node.ELEMENT_NODE||!!e.classList.contains("disabled")||(void 0!==e.disabled?e.disabled:e.hasAttribute("disabled")&&"false"!==e.getAttribute("disabled")),f=e=>{if(!document.documentElement.attachShadow)return null;if("function"==typeof e.getRootNode){const t=e.getRootNode();return t instanceof ShadowRoot?t:null}return e instanceof ShadowRoot?e:e.parentNode?f(e.parentNode):null},p=()=>{},g=e=>{e.offsetHeight},m=()=>window.jQuery&&!document.body.hasAttribute("data-bs-no-jquery")?window.jQuery:null,_=[],b=e=>{"loading"===document.readyState?(_.length||document.addEventListener("DOMContentLoaded",()=>{for(const e of _)e()}),_.push(e)):e()},v=()=>"rtl"===document.documentElement.dir,y=e=>{b(()=>{const t=m();if(t){const n=e.NAME,i=t.fn[n];t.fn[n]=e.jQueryInterface,t.fn[n].Constructor=e,t.fn[n].noConflict=()=>(t.fn[n]=i,e.jQueryInterface)}})},w=(e,t=[],n=e)=>"function"==typeof e?e.call(...t):n,E=(e,t,n=!0)=>{if(!n)return void w(e);const s=5,o=a(t)+s;let r=!1;const c=({target:n})=>{n===t&&(r=!0,t.removeEventListener(i,c),w(e))};t.addEventListener(i,c),setTimeout(()=>{r||l(t)},o)},A=(e,t,n,i)=>{const s=e.length;let o=e.indexOf(t);return-1===o?!n&&i?e[s-1]:e[0]:(o+=n?1:-1,i&&(o=(o+s)%s),e[Math.max(0,Math.min(o,s-1))])};e.defineJQueryPlugin=y,e.execute=w,e.executeAfterTransition=E,e.findShadowRoot=f,e.getElement=u,e.getNextActiveElement=A,e.getTransitionDurationFromElement=a,e.getUID=r,e.getjQuery=m,e.isDisabled=d,e.isElement=c,e.isRTL=v,e.isVisible=h,e.noop=p,e.onDOMContentLoaded=b,e.parseSelector=s,e.reflow=g,e.toType=o,e.triggerTransitionEnd=l,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}(u.exports)),u.exports}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unlk/keymaster",
-  "version": "1.4.5",
+  "version": "1.4.6",
   "publishConfig": {
     "access": "public"
   },
@@ -28,10 +28,15 @@
     "dist-clean": "node build/dist-clean.js",
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel js-lint css-lint"
   },
+  "exports": {
+    "./*": "./*",
+    "./react": "./react/index.js"
+  },
   "files": [
     "dist",
     "scss",
     "js",
+    "react",
     "fonts",
     "README.md",
     "CHANGELOG.md"
@@ -51,7 +56,13 @@
   "homepage": "https://keymaster.unlock.com",
   "peerDependencies": {
     "@popperjs/core": "^2.11.0",
-    "bootstrap": "^5.3.0"
+    "bootstrap": "^5.3.0",
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@babel/core": "^7.27.1",

package/react/index.js

@@ -0,0 +1,4 @@
+export { useDatepicker } from './use-datepicker.js';
+export { useCarouselCaption } from './use-carousel-caption.js';
+export { useCarouselHeight } from './use-carousel-height.js';
+export { useVideoModal } from './use-video-modal.js';

package/react/use-carousel-caption.js

@@ -0,0 +1,24 @@
+import { useState, useCallback } from 'react';
+
+/**
+ * Replicates carousel-caption.js behaviour in React.
+ *
+ * Tracks the active slide index and returns the caption for that slide,
+ * replacing the Bootstrap slid.bs.carousel event listener.
+ *
+ * @param {Array<{ caption: string }>} slides - Array of slide data objects
+ *
+ * Usage:
+ *   const { activeIndex, onSelect, caption } = useCarouselCaption(slides);
+ *   <Carousel activeIndex={activeIndex} onSelect={onSelect}>...</Carousel>
+ *   <div className="carousel-caption-container"><p>{caption}</p></div>
+ */
+export function useCarouselCaption(slides) {
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const onSelect = useCallback((index) => setActiveIndex(index), []);
+
+  const caption = slides[activeIndex]?.caption ?? '';
+
+  return { activeIndex, onSelect, caption };
+}

package/react/use-carousel-height.js

@@ -0,0 +1,39 @@
+import { useRef, useCallback } from 'react';
+
+/**
+ * Replicates carousel-height.js behaviour in React.
+ *
+ * Animates .carousel-inner height between slides of different heights,
+ * replacing the Bootstrap slide.bs.carousel / slid.bs.carousel listeners.
+ *
+ * Attach `ref` to the wrapping element or the <Carousel> element,
+ * and pass onSlide / onSlid to the <Carousel> component.
+ *
+ * Usage:
+ *   const { ref, onSlide, onSlid } = useCarouselHeight();
+ *   <Carousel ref={ref} onSlide={onSlide} onSlid={onSlid}>...</Carousel>
+ */
+export function useCarouselHeight() {
+  const ref = useRef(null);
+
+  const onSlide = useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    const inner = el.querySelector('.carousel-inner');
+    const next = el.querySelector('.carousel-item-next, .carousel-item-prev');
+    if (!inner || !next) return;
+    inner.style.height = `${inner.offsetHeight}px`;
+    requestAnimationFrame(() => {
+      inner.style.height = `${next.offsetHeight}px`;
+    });
+  }, []);
+
+  const onSlid = useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    const inner = el.querySelector('.carousel-inner');
+    if (inner) inner.style.height = '';
+  }, []);
+
+  return { ref, onSlide, onSlid };
+}

package/react/use-datepicker.js

@@ -0,0 +1,33 @@
+import { useState, useCallback } from 'react';
+
+/**
+ * Replicates datepicker.js behaviour in React.
+ *
+ * Renders as type="text" (so the floating label placeholder shows),
+ * switches to type="date" on focus (opens the native date picker),
+ * and reverts on blur if no value is selected.
+ *
+ * Usage:
+ *   const dp = useDatepicker();
+ *   <input type={dp.type} className={dp.hasValue ? 'has-value' : ''}
+ *          onFocus={dp.onFocus} onBlur={dp.onBlur} onChange={dp.onChange} />
+ */
+export function useDatepicker() {
+  const [type, setType] = useState('text');
+  const [hasValue, setHasValue] = useState(false);
+
+  const onFocus = useCallback(() => setType('date'), []);
+
+  const onBlur = useCallback((e) => {
+    if (!e.target.value) {
+      setType('text');
+      setHasValue(false);
+    }
+  }, []);
+
+  const onChange = useCallback((e) => {
+    setHasValue(Boolean(e.target.value));
+  }, []);
+
+  return { type, hasValue, onFocus, onBlur, onChange };
+}

package/react/use-video-modal.js

@@ -0,0 +1,132 @@
+import { useRef, useCallback } from 'react';
+
+// Module-level promises so the API scripts are only ever loaded once
+let ytAPIPromise = null;
+let vimeoAPIPromise = null;
+
+function loadYouTubeAPI() {
+  if (ytAPIPromise) return ytAPIPromise;
+
+  ytAPIPromise = new Promise((resolve) => {
+    if (globalThis.YT?.Player) {
+      resolve();
+
+      return;
+    }
+
+    const prev = globalThis.onYouTubeIframeAPIReady;
+
+    globalThis.onYouTubeIframeAPIReady = () => {
+      try {
+        if (typeof prev === 'function') prev();
+      } catch {}
+
+      resolve();
+    };
+
+    const s = document.createElement('script');
+
+    s.src = 'https://www.youtube.com/iframe_api';
+    document.head.append(s);
+  });
+
+  return ytAPIPromise;
+}
+
+function loadVimeoAPI() {
+  if (vimeoAPIPromise) return vimeoAPIPromise;
+
+  vimeoAPIPromise = new Promise((resolve) => {
+    if (globalThis.Vimeo?.Player) {
+      resolve();
+
+      return;
+    }
+
+    const s = document.createElement('script');
+
+    s.src = 'https://player.vimeo.com/api/player.js';
+    s.addEventListener('load', resolve);
+    document.head.append(s);
+  });
+
+  return vimeoAPIPromise;
+}
+
+function getYouTubeId(url) {
+  const m = url.match(/(?:youtube\.com\/(?:watch\?v=|embed\/|v\/)|youtu\.be\/)([\w-]{11})/);
+
+  return m?.[1] ?? '';
+}
+
+function getVimeoId(url) {
+  const m = url.match(/vimeo\.com\/(\d+)/);
+
+  return m?.[1] ?? '';
+}
+
+/**
+ * Replicates video-modal.js behaviour in React.
+ *
+ * Auto-initialises a YouTube or Vimeo player when the modal opens and
+ * destroys it when the modal closes, replacing the Bootstrap
+ * show.bs.modal / hidden.bs.modal event listeners.
+ *
+ * @param {object} options
+ * @param {string} [options.youtubeSrc]  - YouTube video URL
+ * @param {string} [options.vimeoUrl]   - Vimeo video URL
+ *
+ * Usage:
+ *   const { containerRef, onShow, onHide } = useVideoModal({ youtubeSrc: '...' });
+ *   <Modal onShow={onShow} onHide={onHide}>
+ *     <div className="ratio ratio-16x9" ref={containerRef}>
+ *       <div data-yt-player />   ← YouTube mounts here
+ *     </div>
+ *   </Modal>
+ */
+export function useVideoModal({ youtubeSrc, vimeoUrl } = {}) {
+  const containerRef = useRef(null);
+  const players = useRef({ youtube: null, vimeo: null });
+
+  const onShow = useCallback(async () => {
+    const container = containerRef.current;
+
+    if (!container) return;
+
+    if (vimeoUrl) {
+      await loadVimeoAPI();
+
+      players.current.vimeo = new globalThis.Vimeo.Player(container, {
+        id: getVimeoId(vimeoUrl),
+        autoplay: true,
+      });
+
+      return;
+    }
+
+    if (youtubeSrc) {
+      await loadYouTubeAPI();
+
+      const playerDiv = container.querySelector('[data-yt-player]');
+
+      players.current.youtube = new globalThis.YT.Player(playerDiv, {
+        videoId: getYouTubeId(youtubeSrc),
+        playerVars: { autoplay: 1, rel: 0 },
+      });
+    }
+  }, [youtubeSrc, vimeoUrl]);
+
+  const onHide = useCallback(() => {
+    if (players.current.vimeo) {
+      players.current.vimeo.unload().catch(() => {});
+      players.current.vimeo = null;
+    }
+
+    if (players.current.youtube) {
+      players.current.youtube.destroy();
+      players.current.youtube = null;
+    }
+  }, []);
+
+  return { containerRef, onShow, onHide };
+}

package/scss/theme/_carousel.scss

@@ -26,19 +26,19 @@
   @extend .mt-3;
   display: flex;
   justify-content: end;
-}
-.carousel-control-prev,
-.carousel-control-next {
-  position: unset;
-  width: fit-content;
-  padding: rfs-value(6px);
-}
-.carousel-indicators {
-  position: unset;
-  margin-bottom: 0;
-  margin-left: 0;
-  @include margin-right($spacer * 1.5);
-  [data-bs-target] {
-    @extend .rounded-circle;
+  .carousel-control-prev,
+  .carousel-control-next {
+    position: unset;
+    width: fit-content;
+    padding: rfs-value(6px);
+  }
+  .carousel-indicators {
+    position: unset;
+    margin-bottom: 0;
+    margin-left: 0;
+    @include margin-right($spacer * 1.5);
+    [data-bs-target] {
+      @extend .rounded-circle;
+    }
   }
 }

package/scss/theme/_version.scss

@@ -1,2 +1,2 @@
 // GENERATED FILE – do not edit manually
-$km-version: "1.4.5" !default;
+$km-version: "1.4.6" !default;