@homecode/ui 5.7.0 → 5.7.4

package/.github/workflows/deploy.yml

@@ -0,0 +1,59 @@
+name: Deploy
+
+on:
+  push:
+    tags: ['v*']
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build docs site
+        run: yarn docs:build
+
+      - name: Package build
+        run: tar -czf deploy.tar.gz -C build .
+
+      - name: Upload to VPS
+        uses: appleboy/scp-action@v0.1.7
+        with:
+          host: ${{ vars.VPS_HOST }}
+          username: ${{ vars.VPS_USER }}
+          port: ${{ vars.VPS_PORT || 22 }}
+          key: ${{ secrets.VPS_SSH_KEY }}
+          source: deploy.tar.gz
+          target: /tmp
+
+      - name: Deploy on VPS
+        uses: appleboy/ssh-action@v1.2.0
+        env:
+          DEPLOY_PATH: ${{ vars.VPS_DEPLOY_PATH }}
+        with:
+          host: ${{ vars.VPS_HOST }}
+          username: ${{ vars.VPS_USER }}
+          port: ${{ vars.VPS_PORT || 22 }}
+          key: ${{ secrets.VPS_SSH_KEY }}
+          envs: DEPLOY_PATH
+          script: |
+            set -e
+            # /var/www is root-owned; ci needs sudo to create the deploy path
+            sudo mkdir -p "$DEPLOY_PATH"
+            sudo chown "$USER:$USER" "$DEPLOY_PATH"
+            TMP_DIR=$(mktemp -d)
+            tar -xzf /tmp/deploy.tar.gz -C "$TMP_DIR"
+            rsync -a --delete "$TMP_DIR"/ "$DEPLOY_PATH"/
+            rm -rf "$TMP_DIR" /tmp/deploy.tar.gz

package/dist/esm/src/components/Gallery/Gallery.js

@@ -50,7 +50,6 @@ function VideoItem({ src, size, isActive, }) {
 function Item({ src, kind, size, isActive, }) {
     const [loaded, setLoaded] = useState(false);
     const [isError, setIsError] = useState(false);
-    const style = {};
     const imgRef = useRef(null);
     useLayoutEffect(() => {
         if (kind === 'video')
@@ -92,10 +91,7 @@ function Item({ src, kind, size, isActive, }) {
     if (kind === 'video') {
         return jsx(VideoItem, { src: src, size: size, isActive: isActive });
     }
-    if (loaded)
-        style.backgroundImage = `url(${src})`;
-    return (jsx("div", { className: S.item, style: style, children: !loaded &&
-            (isError ? (jsx(Icon, { type: "brokenImage", className: S.brokenImage })) : (jsxs(Fragment, { children: [jsx("img", { ref: imgRef, src: src, onLoad: () => setLoaded(true), onError: () => setIsError(true) }), jsx(Spinner, { size: size })] }))) }));
+    return (jsx("div", { className: S.item, children: isError ? (jsx(Icon, { type: "brokenImage", className: S.brokenImage })) : (jsxs(Fragment, { children: [jsx("img", { ref: imgRef, src: src, alt: "", className: cn(S.image, loaded && S.imageLoaded), draggable: false, onLoad: () => setLoaded(true), onError: () => setIsError(true) }), !loaded && jsx(Spinner, { size: size })] })) }));
 }
 class Gallery extends Component {
     store;

package/dist/esm/src/components/Gallery/Gallery.styl.js

@@ -1,7 +1,7 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".Gallery_item__P4qTJ,.Gallery_root__-Crit{height:100%;width:100%}.Gallery_root__-Crit{overflow:hidden;position:relative}.Gallery_inner__4FAPt{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;height:100%;position:absolute;touch-action:none;transform:translate3d(-33.33333%,0,0);width:calc(300% + 1px)}.Gallery_single__Wfd9h .Gallery_inner__4FAPt{transform:none;width:100%}.Gallery_single__Wfd9h .Gallery_item__P4qTJ{width:100%}.Gallery_inner__4FAPt.Gallery_left__zrrmv,.Gallery_inner__4FAPt.Gallery_right__dpZ-m{transition:transform 0s ease-out;transition-duration:.2s}.Gallery_inner__4FAPt.Gallery_left__zrrmv{transform:translateZ(0)!important}.Gallery_inner__4FAPt.Gallery_right__dpZ-m{transform:translate3d(-66.66667%,0,0)!important}.Gallery_inner__4FAPt.Gallery_initialBounce__nZnKd{animation:Gallery_bounce__buqva 1s ease-out}.Gallery_item__P4qTJ{align-items:center;background-position:50%;background-repeat:no-repeat;background-size:contain;display:flex;justify-content:center;width:33.33333%}.Gallery_cover__ZGx5X .Gallery_item__P4qTJ{background-size:cover}.Gallery_item__P4qTJ>img{opacity:0;pointer-events:none;position:absolute}.Gallery_brokenImage__Bj3O-{height:50%;opacity:.2;width:50%}.Gallery_videoItem__06r39 .Gallery_video__vKK23{max-height:100%;max-width:100%}.Gallery_arr__knicI{background:transparent!important;height:100%;min-height:100%;opacity:0;padding:10%;position:absolute;top:0;transition:opacity .1s ease-out;z-index:1}.Gallery_arr__knicI.Gallery_left__zrrmv{justify-content:flex-start;left:0}.Gallery_arr__knicI.Gallery_right__dpZ-m{justify-content:flex-end;right:0;width:77%}.Gallery_arr__knicI:hover{opacity:1}@keyframes Gallery_bounce__buqva{0%{left:0}50%{left:-20%}80%{left:10%}to{left:0}}";
-var S = {"root":"Gallery_root__-Crit","item":"Gallery_item__P4qTJ","inner":"Gallery_inner__4FAPt","single":"Gallery_single__Wfd9h","left":"Gallery_left__zrrmv","right":"Gallery_right__dpZ-m","initialBounce":"Gallery_initialBounce__nZnKd","bounce":"Gallery_bounce__buqva","cover":"Gallery_cover__ZGx5X","brokenImage":"Gallery_brokenImage__Bj3O-","videoItem":"Gallery_videoItem__06r39","video":"Gallery_video__vKK23","arr":"Gallery_arr__knicI"};
+var css_248z = ".Gallery_item__P4qTJ,.Gallery_root__-Crit{height:100%;width:100%}.Gallery_root__-Crit{overflow:hidden;position:relative}.Gallery_inner__4FAPt{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;height:100%;position:absolute;touch-action:none;transform:translate3d(-33.33333%,0,0);width:calc(300% + 1px)}.Gallery_single__Wfd9h .Gallery_inner__4FAPt{transform:none;width:100%}.Gallery_single__Wfd9h .Gallery_item__P4qTJ{width:100%}.Gallery_inner__4FAPt.Gallery_left__zrrmv,.Gallery_inner__4FAPt.Gallery_right__dpZ-m{transition:transform 0s ease-out;transition-duration:.2s}.Gallery_inner__4FAPt.Gallery_left__zrrmv{transform:translateZ(0)!important}.Gallery_inner__4FAPt.Gallery_right__dpZ-m{transform:translate3d(-66.66667%,0,0)!important}.Gallery_inner__4FAPt.Gallery_initialBounce__nZnKd{animation:Gallery_bounce__buqva 1s ease-out}.Gallery_item__P4qTJ{align-items:center;display:flex;justify-content:center;position:relative;width:33.33333%}.Gallery_image__FkvmG{height:auto;max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain;opacity:0;transition:opacity .15s ease-out;width:auto}.Gallery_image__FkvmG.Gallery_imageLoaded__1rGwn{opacity:1}.Gallery_cover__ZGx5X .Gallery_image__FkvmG{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.Gallery_brokenImage__Bj3O-{height:50%;opacity:.2;width:50%}.Gallery_videoItem__06r39 .Gallery_video__vKK23{max-height:100%;max-width:100%}.Gallery_arr__knicI{background:transparent!important;height:100%;min-height:100%;opacity:0;padding:10%;position:absolute;top:0;transition:opacity .1s ease-out;z-index:1}.Gallery_arr__knicI.Gallery_left__zrrmv{justify-content:flex-start;left:0}.Gallery_arr__knicI.Gallery_right__dpZ-m{justify-content:flex-end;right:0;width:77%}.Gallery_arr__knicI:hover{opacity:1}@keyframes Gallery_bounce__buqva{0%{left:0}50%{left:-20%}80%{left:10%}to{left:0}}";
+var S = {"root":"Gallery_root__-Crit","item":"Gallery_item__P4qTJ","inner":"Gallery_inner__4FAPt","single":"Gallery_single__Wfd9h","left":"Gallery_left__zrrmv","right":"Gallery_right__dpZ-m","initialBounce":"Gallery_initialBounce__nZnKd","bounce":"Gallery_bounce__buqva","image":"Gallery_image__FkvmG","imageLoaded":"Gallery_imageLoaded__1rGwn","cover":"Gallery_cover__ZGx5X","brokenImage":"Gallery_brokenImage__Bj3O-","videoItem":"Gallery_videoItem__06r39","video":"Gallery_video__vKK23","arr":"Gallery_arr__knicI"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/src/components/Popup/Popup.js

@@ -129,6 +129,11 @@ class Popup extends Component {
             vv.removeEventListener('resize', this.onBoundaryGeometryChange);
             vv.removeEventListener('scroll', this.onBoundaryGeometryChange);
         }
+        // These are registered in componentDidMount; omitting removal left orphaned
+        // capture listeners that kept calling close/onClose after portal remounts.
+        document.removeEventListener('pointerdown', this.onDocPointerDown, true);
+        document.removeEventListener('pointerup', this.onDocPointerUp, true);
+        document.removeEventListener('keydown', this.onDocKeyDown, true);
         document.removeEventListener('keyup', this.onDocKeyUp);
         if (this.scrollParent) {
             this.scrollParent.removeEventListener('scroll', this.close);

package/dist/esm/src/components/Select/Select2.js

@@ -30,6 +30,7 @@ function Select2(props) {
     const contentRef = useRef(null);
     const scrollInnerRef = useRef(null);
     const pointerPressedInside = useRef(false);
+    const pressStartedInside = useRef(false);
     const pointerPressTimer = useRef(0);
     const blurTimer = useRef(0);
     const [labelClipPath, setLabelClipPath] = useState('');
@@ -161,19 +162,39 @@ function Select2(props) {
         else
             open();
     };
+    const markPressInside = (isInside) => {
+        window.clearTimeout(pointerPressTimer.current);
+        pointerPressedInside.current = isInside;
+        pointerPressTimer.current = window.setTimeout(() => (pointerPressedInside.current = false), POINTER_PRESS_TTL);
+    };
     useEvent({
         event: 'pointerdown',
         isCapture: true,
         callback: e => {
-            window.clearTimeout(pointerPressTimer.current);
-            pointerPressedInside.current = isInsideSelect(e.target);
-            pointerPressTimer.current = window.setTimeout(() => (pointerPressedInside.current = false), POINTER_PRESS_TTL);
+            pressStartedInside.current = isInsideSelect(e.target);
+            markPressInside(pressStartedInside.current);
+        },
+    });
+    useEvent({
+        event: 'pointerup',
+        isCapture: true,
+        callback: () => {
+            // The release can land on the portalled popup that mounted under the
+            // cursor mid-gesture, so the up-target is not a reliable inside signal.
+            if (pressStartedInside.current)
+                markPressInside(true);
+            pressStartedInside.current = false;
         },
     });
     useEvent({
         event: 'click',
         isActive: isOpen,
         callback: e => {
+            // The click concluding a press that started inside must not count as an
+            // outside click: the portalled popup can mount under the cursor, which
+            // retargets the click to a common ancestor outside the select.
+            if (pointerPressedInside.current)
+                return;
             if (!isInsideSelect(e.target))
                 close();
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "5.7.0",
+  "version": "5.7.4",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",