@wistia/vhs 2.60.1-beta.900794ea.1614150 → 2.60.1-beta.b186b32b.321774f
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ClickArea/ClickArea.d.ts +13 -0
- package/dist/components/ClickArea/ClickArea.d.ts.map +1 -1
- package/dist/components/KeyboardShortcut/KeyboardShortcut.d.ts.map +1 -1
- package/dist/index.cjs +2 -2
- package/dist/index.cjs.map +3 -3
- package/dist/index.mjs +2 -2
- package/dist/index.mjs.map +3 -3
- package/package.json +1 -1
|
@@ -18,5 +18,18 @@ export type ClickAreaProps = ComponentPropsWithRef<'div'> & {
|
|
|
18
18
|
*/
|
|
19
19
|
targetRef: RefObject<HTMLElement | null>;
|
|
20
20
|
};
|
|
21
|
+
/**
|
|
22
|
+
* ClickArea is useful when you want an entire element to be clickable, such as a card or an item in a list. Making the
|
|
23
|
+
* entire element clickable provides a better click target for users, especially on mobile devices. The problem with this is
|
|
24
|
+
* clickable divs are not accessible or tabbable. Using a `button` or `a` tag causes both styling and screenreader problems.
|
|
25
|
+
*
|
|
26
|
+
* To solve these issues, `ClickArea` maps a click event on the container element to a click event on a button or link within
|
|
27
|
+
* it, via a ref. Assistive devices can utilize the target element and ignore the container element's click property.
|
|
28
|
+
*
|
|
29
|
+
* ClickArea also makes having interactive elements within the clickable container easier. For example, if you have a card element
|
|
30
|
+
* that is clickable but with a "close" button in the top right, include `event.preventDefault()` in the close button's click handler
|
|
31
|
+
* to prevent the container's click handler from firing.
|
|
32
|
+
*
|
|
33
|
+
*/
|
|
21
34
|
export declare const ClickArea: import("react").ForwardRefExoticComponent<Omit<ClickAreaProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
|
|
22
35
|
//# sourceMappingURL=ClickArea.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ClickArea.d.ts","sourceRoot":"","sources":["../../../src/components/ClickArea/ClickArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,qBAAqB,EAAO,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI3F,MAAM,MAAM,cAAc,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAAG;IAC1D;;OAEG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC1C,CAAC;AAMF,eAAO,MAAM,SAAS,qHAyCrB,CAAC"}
|
|
1
|
+
{"version":3,"file":"ClickArea.d.ts","sourceRoot":"","sources":["../../../src/components/ClickArea/ClickArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,qBAAqB,EAAO,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI3F,MAAM,MAAM,cAAc,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAAG;IAC1D;;OAEG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC1C,CAAC;AAMF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,SAAS,qHAyCrB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KeyboardShortcut.d.ts","sourceRoot":"","sources":["../../../src/components/KeyboardShortcut/KeyboardShortcut.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,MAAM,MAAM,qBAAqB,GAAG,wBAAwB,CAAC,KAAK,CAAC,GAAG;IACpE;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,YAAY,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAC5C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAoGF,eAAO,MAAM,gBAAgB;wEAM1B,qBAAqB,GAAG,GAAG,CAAC,OAAO;;
|
|
1
|
+
{"version":3,"file":"KeyboardShortcut.d.ts","sourceRoot":"","sources":["../../../src/components/KeyboardShortcut/KeyboardShortcut.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,MAAM,MAAM,qBAAqB,GAAG,wBAAwB,CAAC,KAAK,CAAC,GAAG;IACpE;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,YAAY,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAC5C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAoGF,eAAO,MAAM,gBAAgB;wEAM1B,qBAAqB,GAAG,GAAG,CAAC,OAAO;;CAoBrC,CAAC"}
|
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
|
-
* @license VHS v2.60.1-beta.
|
|
3
|
+
* @license VHS v2.60.1-beta.b186b32b.321774f
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2021-2024, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -1926,7 +1926,7 @@
|
|
|
1926
1926
|
`,_J=fc.default.div`
|
|
1927
1927
|
display: flex;
|
|
1928
1928
|
gap: ${({theme:e})=>e.spacing.space01};
|
|
1929
|
-
`,UJ=e=>{switch(e){case"ArrowDown":return"\u2193";case"ArrowLeft":return"\u2190";case"ArrowRight":return"\u2192";case"ArrowUp":return"\u2191";case"Alt":return"Alt";case"Cmd":case"Meta":return/Mac|iPhone|iPad/.test(window.navigator.userAgent)?"\u2318":window.navigator.userAgent.includes("Win")?"\u229E":"^";case"Ctrl":return"Ctrl";case"Option":return"\u2325";case"Shift":return"\u21E7";case"Enter":return"\u21B5";case"Space":return"Space";case"Tab":return"Tab";case"Backspace":return"Del";case"Esc":return"Esc";default:return e.toUpperCase()}},rv=({label:e,keyboardKeys:t,fullWidth:r=!1,componentStyle:n="dark",...o})=>(0,su.jsxs)(GJ,{componentStyle:n,fullWidth:r,...o,children:[B(e)&&(0,su.jsx)(WJ,{componentStyle:n,children:e}),(0,su.jsx)(_J,{children:[...t].map(a=>(0,su.jsx)(jJ,{componentStyle:n,children:UJ(a)},
|
|
1929
|
+
`,UJ=e=>{switch(e){case"ArrowDown":return"\u2193";case"ArrowLeft":return"\u2190";case"ArrowRight":return"\u2192";case"ArrowUp":return"\u2191";case"Alt":return"Alt";case"Cmd":case"Meta":return/Mac|iPhone|iPad/.test(window.navigator.userAgent)?"\u2318":window.navigator.userAgent.includes("Win")?"\u229E":"^";case"Ctrl":return"Ctrl";case"Option":return"\u2325";case"Shift":return"\u21E7";case"Enter":return"\u21B5";case"Space":return"Space";case"Tab":return"Tab";case"Backspace":return"Del";case"Esc":return"Esc";default:return e.toUpperCase()}},rv=({label:e,keyboardKeys:t,fullWidth:r=!1,componentStyle:n="dark",...o})=>(0,su.jsxs)(GJ,{componentStyle:n,fullWidth:r,...o,children:[B(e)&&(0,su.jsx)(WJ,{componentStyle:n,children:e}),(0,su.jsx)(_J,{children:[...t].map((a,s)=>(0,su.jsx)(jJ,{componentStyle:n,children:UJ(a)},s))})]});rv.displayName="KeyboardShortcut_VHS";i();i();i();var ZA=require("react"),QA=N(require("styled-components"));var eR=require("react/jsx-runtime"),KJ=e=>e.key==="Enter"||e.key===" "||e.key==="Spacebar",qJ=QA.default.span`
|
|
1930
1930
|
${({noStyle:e})=>e?void 0:Vd};
|
|
1931
1931
|
|
|
1932
1932
|
&[tabindex] {
|