@purpurds/visually-hidden 3.0.0
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/LICENSE.txt +70 -0
- package/dist/visually-hidden.cjs.js +2 -0
- package/dist/visually-hidden.cjs.js.map +1 -0
- package/dist/visually-hidden.d.ts +12 -0
- package/dist/visually-hidden.d.ts.map +1 -0
- package/dist/visually-hidden.es.js +123 -0
- package/dist/visually-hidden.es.js.map +1 -0
- package/dist/visually-hidden.system.js +2 -0
- package/dist/visually-hidden.system.js.map +1 -0
- package/package.json +57 -0
- package/readme.mdx +63 -0
- package/src/global.d.ts +4 -0
- package/src/visually-hidden.stories.tsx +20 -0
- package/src/visually-hidden.test.tsx +16 -0
- package/src/visually-hidden.tsx +23 -0
package/dist/LICENSE.txt
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
Name: @babel/runtime
|
|
2
|
+
Version: 7.23.5
|
|
3
|
+
License: MIT
|
|
4
|
+
Private: false
|
|
5
|
+
Description: babel's modular runtime helpers
|
|
6
|
+
Repository: https://github.com/babel/babel.git
|
|
7
|
+
Homepage: https://babel.dev/docs/en/next/babel-runtime
|
|
8
|
+
Author: The Babel Team (https://babel.dev/team)
|
|
9
|
+
License Copyright:
|
|
10
|
+
===
|
|
11
|
+
|
|
12
|
+
MIT License
|
|
13
|
+
|
|
14
|
+
Copyright (c) 2014-present Sebastian McKenzie and other contributors
|
|
15
|
+
|
|
16
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
|
17
|
+
a copy of this software and associated documentation files (the
|
|
18
|
+
"Software"), to deal in the Software without restriction, including
|
|
19
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
|
20
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
|
21
|
+
permit persons to whom the Software is furnished to do so, subject to
|
|
22
|
+
the following conditions:
|
|
23
|
+
|
|
24
|
+
The above copyright notice and this permission notice shall be
|
|
25
|
+
included in all copies or substantial portions of the Software.
|
|
26
|
+
|
|
27
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
28
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
|
29
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
|
30
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
|
31
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
|
32
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
|
33
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
Name: @radix-ui/react-compose-refs
|
|
39
|
+
Version: 1.0.1
|
|
40
|
+
License: MIT
|
|
41
|
+
Private: false
|
|
42
|
+
Repository: git+https://github.com/radix-ui/primitives.git
|
|
43
|
+
Homepage: https://radix-ui.com/primitives
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
Name: @radix-ui/react-slot
|
|
48
|
+
Version: 1.0.2
|
|
49
|
+
License: MIT
|
|
50
|
+
Private: false
|
|
51
|
+
Repository: git+https://github.com/radix-ui/primitives.git
|
|
52
|
+
Homepage: https://radix-ui.com/primitives
|
|
53
|
+
|
|
54
|
+
---
|
|
55
|
+
|
|
56
|
+
Name: @radix-ui/react-primitive
|
|
57
|
+
Version: 1.0.3
|
|
58
|
+
License: MIT
|
|
59
|
+
Private: false
|
|
60
|
+
Repository: git+https://github.com/radix-ui/primitives.git
|
|
61
|
+
Homepage: https://radix-ui.com/primitives
|
|
62
|
+
|
|
63
|
+
---
|
|
64
|
+
|
|
65
|
+
Name: @radix-ui/react-visually-hidden
|
|
66
|
+
Version: 1.0.3
|
|
67
|
+
License: MIT
|
|
68
|
+
Private: false
|
|
69
|
+
Repository: git+https://github.com/radix-ui/primitives.git
|
|
70
|
+
Homepage: https://radix-ui.com/primitives
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),l=require("react");require("react-dom");function s(){return s=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},s.apply(this,arguments)}function $(e,n){typeof e=="function"?e(n):e!=null&&(e.current=n)}function m(...e){return n=>e.forEach(t=>$(t,n))}const u=l.forwardRef((e,n)=>{const{children:t,...r}=e,o=l.Children.toArray(t),i=o.find(b);if(i){const c=i.props.children,a=o.map(d=>d===i?l.Children.count(c)>1?l.Children.only(null):l.isValidElement(c)?c.props.children:null:d);return l.createElement(f,s({},r,{ref:n}),l.isValidElement(c)?l.cloneElement(c,void 0,a):null)}return l.createElement(f,s({},r,{ref:n}),t)});u.displayName="Slot";const f=l.forwardRef((e,n)=>{const{children:t,...r}=e;return l.isValidElement(t)?l.cloneElement(t,{...y(r,t.props),ref:n?m(n,t.ref):t.ref}):l.Children.count(t)>1?l.Children.only(null):null});f.displayName="SlotClone";const h=({children:e})=>l.createElement(l.Fragment,null,e);function b(e){return l.isValidElement(e)&&e.type===h}function y(e,n){const t={...n};for(const r in n){const o=e[r],i=n[r];/^on[A-Z]/.test(r)?o&&i?t[r]=(...a)=>{i(...a),o(...a)}:o&&(t[r]=o):r==="style"?t[r]={...o,...i}:r==="className"&&(t[r]=[o,i].filter(Boolean).join(" "))}return{...e,...t}}const v=["a","button","div","form","h2","h3","img","input","label","li","nav","ol","p","span","svg","ul"],E=v.reduce((e,n)=>{const t=l.forwardRef((r,o)=>{const{asChild:i,...c}=r,a=i?u:n;return l.useEffect(()=>{window[Symbol.for("radix-ui")]=!0},[]),l.createElement(a,s({},c,{ref:o}))});return t.displayName=`Primitive.${n}`,{...e,[n]:t}},{}),g=l.forwardRef((e,n)=>l.createElement(E.span,s({},e,{ref:n,style:{position:"absolute",border:0,width:1,height:1,padding:0,margin:-1,overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",wordWrap:"normal",...e.style}}))),w=g,C=({asChild:e,children:n,className:t="",["data-testid"]:r})=>p.jsx(w,{asChild:e,"data-testid":r,className:t,children:n});exports.VisuallyHidden=C;
|
|
2
|
+
//# sourceMappingURL=visually-hidden.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"visually-hidden.cjs.js","sources":["../../../common/temp/node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/extends.js","../../../common/temp/node_modules/.pnpm/@radix-ui+react-compose-refs@1.0.1_@types+react@18.2.42_react@18.2.0/node_modules/@radix-ui/react-compose-refs/dist/index.mjs","../../../common/temp/node_modules/.pnpm/@radix-ui+react-slot@1.0.2_@types+react@18.2.42_react@18.2.0/node_modules/@radix-ui/react-slot/dist/index.mjs","../../../common/temp/node_modules/.pnpm/@radix-ui+react-primitive@1.0.3_@types+react-dom@18.2.17_@types+react@18.2.42_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-primitive/dist/index.mjs","../../../common/temp/node_modules/.pnpm/@radix-ui+react-visually-hidden@1.0.3_@types+react-dom@18.2.17_@types+react@18.2.42_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-visually-hidden/dist/index.mjs","../src/visually-hidden.tsx"],"sourcesContent":["export default function _extends() {\n _extends = Object.assign ? Object.assign.bind() : function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n return target;\n };\n return _extends.apply(this, arguments);\n}","import {useCallback as $3vqmr$useCallback} from \"react\";\n\n\n/**\n * Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n */ function $6ed0406888f73fc4$var$setRef(ref, value) {\n if (typeof ref === 'function') ref(value);\n else if (ref !== null && ref !== undefined) ref.current = value;\n}\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n */ function $6ed0406888f73fc4$export$43e446d32b3d21af(...refs) {\n return (node)=>refs.forEach((ref)=>$6ed0406888f73fc4$var$setRef(ref, node)\n )\n ;\n}\n/**\n * A custom hook that composes multiple refs\n * Accepts callback refs and RefObject(s)\n */ function $6ed0406888f73fc4$export$c7b2cbe3552a0d05(...refs) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return $3vqmr$useCallback($6ed0406888f73fc4$export$43e446d32b3d21af(...refs), refs);\n}\n\n\n\n\nexport {$6ed0406888f73fc4$export$43e446d32b3d21af as composeRefs, $6ed0406888f73fc4$export$c7b2cbe3552a0d05 as useComposedRefs};\n//# sourceMappingURL=index.mjs.map\n","import $9IrjX$babelruntimehelpersesmextends from \"@babel/runtime/helpers/esm/extends\";\nimport {forwardRef as $9IrjX$forwardRef, Children as $9IrjX$Children, isValidElement as $9IrjX$isValidElement, createElement as $9IrjX$createElement, cloneElement as $9IrjX$cloneElement, Fragment as $9IrjX$Fragment} from \"react\";\nimport {composeRefs as $9IrjX$composeRefs} from \"@radix-ui/react-compose-refs\";\n\n\n\n\n/* -------------------------------------------------------------------------------------------------\n * Slot\n * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$8c6ed5c666ac1360 = /*#__PURE__*/ $9IrjX$forwardRef((props, forwardedRef)=>{\n const { children: children , ...slotProps } = props;\n const childrenArray = $9IrjX$Children.toArray(children);\n const slottable = childrenArray.find($5e63c961fc1ce211$var$isSlottable);\n if (slottable) {\n // the new element to render is the one passed as a child of `Slottable`\n const newElement = slottable.props.children;\n const newChildren = childrenArray.map((child)=>{\n if (child === slottable) {\n // because the new element will be the one rendered, we are only interested\n // in grabbing its children (`newElement.props.children`)\n if ($9IrjX$Children.count(newElement) > 1) return $9IrjX$Children.only(null);\n return /*#__PURE__*/ $9IrjX$isValidElement(newElement) ? newElement.props.children : null;\n } else return child;\n });\n return /*#__PURE__*/ $9IrjX$createElement($5e63c961fc1ce211$var$SlotClone, $9IrjX$babelruntimehelpersesmextends({}, slotProps, {\n ref: forwardedRef\n }), /*#__PURE__*/ $9IrjX$isValidElement(newElement) ? /*#__PURE__*/ $9IrjX$cloneElement(newElement, undefined, newChildren) : null);\n }\n return /*#__PURE__*/ $9IrjX$createElement($5e63c961fc1ce211$var$SlotClone, $9IrjX$babelruntimehelpersesmextends({}, slotProps, {\n ref: forwardedRef\n }), children);\n});\n$5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName = 'Slot';\n/* -------------------------------------------------------------------------------------------------\n * SlotClone\n * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$var$SlotClone = /*#__PURE__*/ $9IrjX$forwardRef((props, forwardedRef)=>{\n const { children: children , ...slotProps } = props;\n if (/*#__PURE__*/ $9IrjX$isValidElement(children)) return /*#__PURE__*/ $9IrjX$cloneElement(children, {\n ...$5e63c961fc1ce211$var$mergeProps(slotProps, children.props),\n ref: forwardedRef ? $9IrjX$composeRefs(forwardedRef, children.ref) : children.ref\n });\n return $9IrjX$Children.count(children) > 1 ? $9IrjX$Children.only(null) : null;\n});\n$5e63c961fc1ce211$var$SlotClone.displayName = 'SlotClone';\n/* -------------------------------------------------------------------------------------------------\n * Slottable\n * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$d9f1ccf0bdb05d45 = ({ children: children })=>{\n return /*#__PURE__*/ $9IrjX$createElement($9IrjX$Fragment, null, children);\n};\n/* ---------------------------------------------------------------------------------------------- */ function $5e63c961fc1ce211$var$isSlottable(child) {\n return /*#__PURE__*/ $9IrjX$isValidElement(child) && child.type === $5e63c961fc1ce211$export$d9f1ccf0bdb05d45;\n}\nfunction $5e63c961fc1ce211$var$mergeProps(slotProps, childProps) {\n // all child props should override\n const overrideProps = {\n ...childProps\n };\n for(const propName in childProps){\n const slotPropValue = slotProps[propName];\n const childPropValue = childProps[propName];\n const isHandler = /^on[A-Z]/.test(propName);\n if (isHandler) {\n // if the handler exists on both, we compose them\n if (slotPropValue && childPropValue) overrideProps[propName] = (...args)=>{\n childPropValue(...args);\n slotPropValue(...args);\n };\n else if (slotPropValue) overrideProps[propName] = slotPropValue;\n } else if (propName === 'style') overrideProps[propName] = {\n ...slotPropValue,\n ...childPropValue\n };\n else if (propName === 'className') overrideProps[propName] = [\n slotPropValue,\n childPropValue\n ].filter(Boolean).join(' ');\n }\n return {\n ...slotProps,\n ...overrideProps\n };\n}\nconst $5e63c961fc1ce211$export$be92b6f5f03c0fe9 = $5e63c961fc1ce211$export$8c6ed5c666ac1360;\n\n\n\n\nexport {$5e63c961fc1ce211$export$8c6ed5c666ac1360 as Slot, $5e63c961fc1ce211$export$d9f1ccf0bdb05d45 as Slottable, $5e63c961fc1ce211$export$be92b6f5f03c0fe9 as Root};\n//# sourceMappingURL=index.mjs.map\n","import $4q5Fq$babelruntimehelpersesmextends from \"@babel/runtime/helpers/esm/extends\";\nimport {forwardRef as $4q5Fq$forwardRef, useEffect as $4q5Fq$useEffect, createElement as $4q5Fq$createElement} from \"react\";\nimport {flushSync as $4q5Fq$flushSync} from \"react-dom\";\nimport {Slot as $4q5Fq$Slot} from \"@radix-ui/react-slot\";\n\n\n\n\n\nconst $8927f6f2acc4f386$var$NODES = [\n 'a',\n 'button',\n 'div',\n 'form',\n 'h2',\n 'h3',\n 'img',\n 'input',\n 'label',\n 'li',\n 'nav',\n 'ol',\n 'p',\n 'span',\n 'svg',\n 'ul'\n]; // Temporary while we await merge of this fix:\n// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/55396\n// prettier-ignore\n/* -------------------------------------------------------------------------------------------------\n * Primitive\n * -----------------------------------------------------------------------------------------------*/ const $8927f6f2acc4f386$export$250ffa63cdc0d034 = $8927f6f2acc4f386$var$NODES.reduce((primitive, node)=>{\n const Node = /*#__PURE__*/ $4q5Fq$forwardRef((props, forwardedRef)=>{\n const { asChild: asChild , ...primitiveProps } = props;\n const Comp = asChild ? $4q5Fq$Slot : node;\n $4q5Fq$useEffect(()=>{\n window[Symbol.for('radix-ui')] = true;\n }, []);\n return /*#__PURE__*/ $4q5Fq$createElement(Comp, $4q5Fq$babelruntimehelpersesmextends({}, primitiveProps, {\n ref: forwardedRef\n }));\n });\n Node.displayName = `Primitive.${node}`;\n return {\n ...primitive,\n [node]: Node\n };\n}, {});\n/* -------------------------------------------------------------------------------------------------\n * Utils\n * -----------------------------------------------------------------------------------------------*/ /**\n * Flush custom event dispatch\n * https://github.com/radix-ui/primitives/pull/1378\n *\n * React batches *all* event handlers since version 18, this introduces certain considerations when using custom event types.\n *\n * Internally, React prioritises events in the following order:\n * - discrete\n * - continuous\n * - default\n *\n * https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L294-L350\n *\n * `discrete` is an important distinction as updates within these events are applied immediately.\n * React however, is not able to infer the priority of custom event types due to how they are detected internally.\n * Because of this, it's possible for updates from custom events to be unexpectedly batched when\n * dispatched by another `discrete` event.\n *\n * In order to ensure that updates from custom events are applied predictably, we need to manually flush the batch.\n * This utility should be used when dispatching a custom event from within another `discrete` event, this utility\n * is not nessesary when dispatching known event types, or if dispatching a custom type inside a non-discrete event.\n * For example:\n *\n * dispatching a known click 👎\n * target.dispatchEvent(new Event(‘click’))\n *\n * dispatching a custom type within a non-discrete event 👎\n * onScroll={(event) => event.target.dispatchEvent(new CustomEvent(‘customType’))}\n *\n * dispatching a custom type within a `discrete` event 👍\n * onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(‘customType’))}\n *\n * Note: though React classifies `focus`, `focusin` and `focusout` events as `discrete`, it's not recommended to use\n * this utility with them. This is because it's possible for those handlers to be called implicitly during render\n * e.g. when focus is within a component as it is unmounted, or when managing focus on mount.\n */ function $8927f6f2acc4f386$export$6d1a0317bde7de7f(target, event) {\n if (target) $4q5Fq$flushSync(()=>target.dispatchEvent(event)\n );\n}\n/* -----------------------------------------------------------------------------------------------*/ const $8927f6f2acc4f386$export$be92b6f5f03c0fe9 = $8927f6f2acc4f386$export$250ffa63cdc0d034;\n\n\n\n\nexport {$8927f6f2acc4f386$export$250ffa63cdc0d034 as Primitive, $8927f6f2acc4f386$export$be92b6f5f03c0fe9 as Root, $8927f6f2acc4f386$export$6d1a0317bde7de7f as dispatchDiscreteCustomEvent};\n//# sourceMappingURL=index.mjs.map\n","import $kVwnw$babelruntimehelpersesmextends from \"@babel/runtime/helpers/esm/extends\";\nimport {forwardRef as $kVwnw$forwardRef, createElement as $kVwnw$createElement} from \"react\";\nimport {Primitive as $kVwnw$Primitive} from \"@radix-ui/react-primitive\";\n\n\n\n\n/* -------------------------------------------------------------------------------------------------\n * VisuallyHidden\n * -----------------------------------------------------------------------------------------------*/ const $ea1ef594cf570d83$var$NAME = 'VisuallyHidden';\nconst $ea1ef594cf570d83$export$439d29a4e110a164 = /*#__PURE__*/ $kVwnw$forwardRef((props, forwardedRef)=>{\n return /*#__PURE__*/ $kVwnw$createElement($kVwnw$Primitive.span, $kVwnw$babelruntimehelpersesmextends({}, props, {\n ref: forwardedRef,\n style: {\n // See: https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss\n position: 'absolute',\n border: 0,\n width: 1,\n height: 1,\n padding: 0,\n margin: -1,\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n wordWrap: 'normal',\n ...props.style\n }\n }));\n});\n/*#__PURE__*/ Object.assign($ea1ef594cf570d83$export$439d29a4e110a164, {\n displayName: $ea1ef594cf570d83$var$NAME\n});\n/* -----------------------------------------------------------------------------------------------*/ const $ea1ef594cf570d83$export$be92b6f5f03c0fe9 = $ea1ef594cf570d83$export$439d29a4e110a164;\n\n\n\n\nexport {$ea1ef594cf570d83$export$439d29a4e110a164 as VisuallyHidden, $ea1ef594cf570d83$export$be92b6f5f03c0fe9 as Root};\n//# sourceMappingURL=index.mjs.map\n","import React, { ReactNode } from \"react\";\nimport * as RadixVisuallyHidden from \"@radix-ui/react-visually-hidden\";\n\nexport type VisuallyHiddenProps = {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n * */\n asChild?: boolean;\n children: ReactNode;\n className?: string;\n [\"data-testid\"]?: string;\n};\n\nexport const VisuallyHidden = ({\n asChild,\n children,\n className = \"\",\n [\"data-testid\"]: dataTestid,\n}: VisuallyHiddenProps) => (\n <RadixVisuallyHidden.Root asChild={asChild} data-testid={dataTestid} className={className}>\n {children}\n </RadixVisuallyHidden.Root>\n);\n"],"names":["_extends","target","i","source","key","$6ed0406888f73fc4$var$setRef","ref","value","$6ed0406888f73fc4$export$43e446d32b3d21af","refs","node","$5e63c961fc1ce211$export$8c6ed5c666ac1360","$9IrjX$forwardRef","props","forwardedRef","children","slotProps","childrenArray","$9IrjX$Children","slottable","$5e63c961fc1ce211$var$isSlottable","newElement","newChildren","child","$9IrjX$isValidElement","$9IrjX$createElement","$5e63c961fc1ce211$var$SlotClone","$9IrjX$babelruntimehelpersesmextends","$9IrjX$cloneElement","$5e63c961fc1ce211$var$mergeProps","$9IrjX$composeRefs","$5e63c961fc1ce211$export$d9f1ccf0bdb05d45","$9IrjX$Fragment","childProps","overrideProps","propName","slotPropValue","childPropValue","args","$8927f6f2acc4f386$var$NODES","$8927f6f2acc4f386$export$250ffa63cdc0d034","primitive","Node","$4q5Fq$forwardRef","asChild","primitiveProps","Comp","$4q5Fq$Slot","$4q5Fq$useEffect","$4q5Fq$createElement","$4q5Fq$babelruntimehelpersesmextends","$ea1ef594cf570d83$export$439d29a4e110a164","$kVwnw$forwardRef","$kVwnw$createElement","$kVwnw$Primitive","$kVwnw$babelruntimehelpersesmextends","$ea1ef594cf570d83$export$be92b6f5f03c0fe9","VisuallyHidden","className","dataTestid","jsx","RadixVisuallyHidden.Root"],"mappings":"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","x_google_ignoreList":[0,1,2,3,4]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React, { ReactNode } from "react";
|
|
2
|
+
export type VisuallyHiddenProps = {
|
|
3
|
+
/**
|
|
4
|
+
* Change the default rendered element for the one passed as a child, merging their props and behavior.
|
|
5
|
+
* */
|
|
6
|
+
asChild?: boolean;
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
className?: string;
|
|
9
|
+
["data-testid"]?: string;
|
|
10
|
+
};
|
|
11
|
+
export declare const VisuallyHidden: ({ asChild, children, className, ["data-testid"]: dataTestid, }: VisuallyHiddenProps) => React.JSX.Element;
|
|
12
|
+
//# sourceMappingURL=visually-hidden.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"visually-hidden.d.ts","sourceRoot":"","sources":["../src/visually-hidden.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,MAAM,MAAM,mBAAmB,GAAG;IAChC;;SAEK;IACL,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,cAAc,mEAKxB,mBAAmB,sBAIrB,CAAC"}
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
import { jsx as b } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as u, Children as a, isValidElement as d, createElement as f, cloneElement as m, Fragment as y, useEffect as v } from "react";
|
|
3
|
+
import "react-dom";
|
|
4
|
+
function s() {
|
|
5
|
+
return s = Object.assign ? Object.assign.bind() : function(e) {
|
|
6
|
+
for (var n = 1; n < arguments.length; n++) {
|
|
7
|
+
var t = arguments[n];
|
|
8
|
+
for (var r in t)
|
|
9
|
+
Object.prototype.hasOwnProperty.call(t, r) && (e[r] = t[r]);
|
|
10
|
+
}
|
|
11
|
+
return e;
|
|
12
|
+
}, s.apply(this, arguments);
|
|
13
|
+
}
|
|
14
|
+
function g(e, n) {
|
|
15
|
+
typeof e == "function" ? e(n) : e != null && (e.current = n);
|
|
16
|
+
}
|
|
17
|
+
function x(...e) {
|
|
18
|
+
return (n) => e.forEach(
|
|
19
|
+
(t) => g(t, n)
|
|
20
|
+
);
|
|
21
|
+
}
|
|
22
|
+
const h = /* @__PURE__ */ u((e, n) => {
|
|
23
|
+
const { children: t, ...r } = e, o = a.toArray(t), c = o.find(C);
|
|
24
|
+
if (c) {
|
|
25
|
+
const i = c.props.children, l = o.map(($) => $ === c ? a.count(i) > 1 ? a.only(null) : /* @__PURE__ */ d(i) ? i.props.children : null : $);
|
|
26
|
+
return /* @__PURE__ */ f(p, s({}, r, {
|
|
27
|
+
ref: n
|
|
28
|
+
}), /* @__PURE__ */ d(i) ? /* @__PURE__ */ m(i, void 0, l) : null);
|
|
29
|
+
}
|
|
30
|
+
return /* @__PURE__ */ f(p, s({}, r, {
|
|
31
|
+
ref: n
|
|
32
|
+
}), t);
|
|
33
|
+
});
|
|
34
|
+
h.displayName = "Slot";
|
|
35
|
+
const p = /* @__PURE__ */ u((e, n) => {
|
|
36
|
+
const { children: t, ...r } = e;
|
|
37
|
+
return /* @__PURE__ */ d(t) ? /* @__PURE__ */ m(t, {
|
|
38
|
+
...E(r, t.props),
|
|
39
|
+
ref: n ? x(n, t.ref) : t.ref
|
|
40
|
+
}) : a.count(t) > 1 ? a.only(null) : null;
|
|
41
|
+
});
|
|
42
|
+
p.displayName = "SlotClone";
|
|
43
|
+
const w = ({ children: e }) => /* @__PURE__ */ f(y, null, e);
|
|
44
|
+
function C(e) {
|
|
45
|
+
return /* @__PURE__ */ d(e) && e.type === w;
|
|
46
|
+
}
|
|
47
|
+
function E(e, n) {
|
|
48
|
+
const t = {
|
|
49
|
+
...n
|
|
50
|
+
};
|
|
51
|
+
for (const r in n) {
|
|
52
|
+
const o = e[r], c = n[r];
|
|
53
|
+
/^on[A-Z]/.test(r) ? o && c ? t[r] = (...l) => {
|
|
54
|
+
c(...l), o(...l);
|
|
55
|
+
} : o && (t[r] = o) : r === "style" ? t[r] = {
|
|
56
|
+
...o,
|
|
57
|
+
...c
|
|
58
|
+
} : r === "className" && (t[r] = [
|
|
59
|
+
o,
|
|
60
|
+
c
|
|
61
|
+
].filter(Boolean).join(" "));
|
|
62
|
+
}
|
|
63
|
+
return {
|
|
64
|
+
...e,
|
|
65
|
+
...t
|
|
66
|
+
};
|
|
67
|
+
}
|
|
68
|
+
const N = [
|
|
69
|
+
"a",
|
|
70
|
+
"button",
|
|
71
|
+
"div",
|
|
72
|
+
"form",
|
|
73
|
+
"h2",
|
|
74
|
+
"h3",
|
|
75
|
+
"img",
|
|
76
|
+
"input",
|
|
77
|
+
"label",
|
|
78
|
+
"li",
|
|
79
|
+
"nav",
|
|
80
|
+
"ol",
|
|
81
|
+
"p",
|
|
82
|
+
"span",
|
|
83
|
+
"svg",
|
|
84
|
+
"ul"
|
|
85
|
+
], S = N.reduce((e, n) => {
|
|
86
|
+
const t = /* @__PURE__ */ u((r, o) => {
|
|
87
|
+
const { asChild: c, ...i } = r, l = c ? h : n;
|
|
88
|
+
return v(() => {
|
|
89
|
+
window[Symbol.for("radix-ui")] = !0;
|
|
90
|
+
}, []), /* @__PURE__ */ f(l, s({}, i, {
|
|
91
|
+
ref: o
|
|
92
|
+
}));
|
|
93
|
+
});
|
|
94
|
+
return t.displayName = `Primitive.${n}`, {
|
|
95
|
+
...e,
|
|
96
|
+
[n]: t
|
|
97
|
+
};
|
|
98
|
+
}, {}), P = /* @__PURE__ */ u((e, n) => /* @__PURE__ */ f(S.span, s({}, e, {
|
|
99
|
+
ref: n,
|
|
100
|
+
style: {
|
|
101
|
+
// See: https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss
|
|
102
|
+
position: "absolute",
|
|
103
|
+
border: 0,
|
|
104
|
+
width: 1,
|
|
105
|
+
height: 1,
|
|
106
|
+
padding: 0,
|
|
107
|
+
margin: -1,
|
|
108
|
+
overflow: "hidden",
|
|
109
|
+
clip: "rect(0, 0, 0, 0)",
|
|
110
|
+
whiteSpace: "nowrap",
|
|
111
|
+
wordWrap: "normal",
|
|
112
|
+
...e.style
|
|
113
|
+
}
|
|
114
|
+
}))), j = P, H = ({
|
|
115
|
+
asChild: e,
|
|
116
|
+
children: n,
|
|
117
|
+
className: t = "",
|
|
118
|
+
["data-testid"]: r
|
|
119
|
+
}) => /* @__PURE__ */ b(j, { asChild: e, "data-testid": r, className: t, children: n });
|
|
120
|
+
export {
|
|
121
|
+
H as VisuallyHidden
|
|
122
|
+
};
|
|
123
|
+
//# sourceMappingURL=visually-hidden.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"visually-hidden.es.js","sources":["../../../common/temp/node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/extends.js","../../../common/temp/node_modules/.pnpm/@radix-ui+react-compose-refs@1.0.1_@types+react@18.2.42_react@18.2.0/node_modules/@radix-ui/react-compose-refs/dist/index.mjs","../../../common/temp/node_modules/.pnpm/@radix-ui+react-slot@1.0.2_@types+react@18.2.42_react@18.2.0/node_modules/@radix-ui/react-slot/dist/index.mjs","../../../common/temp/node_modules/.pnpm/@radix-ui+react-primitive@1.0.3_@types+react-dom@18.2.17_@types+react@18.2.42_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-primitive/dist/index.mjs","../../../common/temp/node_modules/.pnpm/@radix-ui+react-visually-hidden@1.0.3_@types+react-dom@18.2.17_@types+react@18.2.42_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-visually-hidden/dist/index.mjs","../src/visually-hidden.tsx"],"sourcesContent":["export default function _extends() {\n _extends = Object.assign ? Object.assign.bind() : function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n return target;\n };\n return _extends.apply(this, arguments);\n}","import {useCallback as $3vqmr$useCallback} from \"react\";\n\n\n/**\n * Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n */ function $6ed0406888f73fc4$var$setRef(ref, value) {\n if (typeof ref === 'function') ref(value);\n else if (ref !== null && ref !== undefined) ref.current = value;\n}\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n */ function $6ed0406888f73fc4$export$43e446d32b3d21af(...refs) {\n return (node)=>refs.forEach((ref)=>$6ed0406888f73fc4$var$setRef(ref, node)\n )\n ;\n}\n/**\n * A custom hook that composes multiple refs\n * Accepts callback refs and RefObject(s)\n */ function $6ed0406888f73fc4$export$c7b2cbe3552a0d05(...refs) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return $3vqmr$useCallback($6ed0406888f73fc4$export$43e446d32b3d21af(...refs), refs);\n}\n\n\n\n\nexport {$6ed0406888f73fc4$export$43e446d32b3d21af as composeRefs, $6ed0406888f73fc4$export$c7b2cbe3552a0d05 as useComposedRefs};\n//# sourceMappingURL=index.mjs.map\n","import $9IrjX$babelruntimehelpersesmextends from \"@babel/runtime/helpers/esm/extends\";\nimport {forwardRef as $9IrjX$forwardRef, Children as $9IrjX$Children, isValidElement as $9IrjX$isValidElement, createElement as $9IrjX$createElement, cloneElement as $9IrjX$cloneElement, Fragment as $9IrjX$Fragment} from \"react\";\nimport {composeRefs as $9IrjX$composeRefs} from \"@radix-ui/react-compose-refs\";\n\n\n\n\n/* -------------------------------------------------------------------------------------------------\n * Slot\n * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$8c6ed5c666ac1360 = /*#__PURE__*/ $9IrjX$forwardRef((props, forwardedRef)=>{\n const { children: children , ...slotProps } = props;\n const childrenArray = $9IrjX$Children.toArray(children);\n const slottable = childrenArray.find($5e63c961fc1ce211$var$isSlottable);\n if (slottable) {\n // the new element to render is the one passed as a child of `Slottable`\n const newElement = slottable.props.children;\n const newChildren = childrenArray.map((child)=>{\n if (child === slottable) {\n // because the new element will be the one rendered, we are only interested\n // in grabbing its children (`newElement.props.children`)\n if ($9IrjX$Children.count(newElement) > 1) return $9IrjX$Children.only(null);\n return /*#__PURE__*/ $9IrjX$isValidElement(newElement) ? newElement.props.children : null;\n } else return child;\n });\n return /*#__PURE__*/ $9IrjX$createElement($5e63c961fc1ce211$var$SlotClone, $9IrjX$babelruntimehelpersesmextends({}, slotProps, {\n ref: forwardedRef\n }), /*#__PURE__*/ $9IrjX$isValidElement(newElement) ? /*#__PURE__*/ $9IrjX$cloneElement(newElement, undefined, newChildren) : null);\n }\n return /*#__PURE__*/ $9IrjX$createElement($5e63c961fc1ce211$var$SlotClone, $9IrjX$babelruntimehelpersesmextends({}, slotProps, {\n ref: forwardedRef\n }), children);\n});\n$5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName = 'Slot';\n/* -------------------------------------------------------------------------------------------------\n * SlotClone\n * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$var$SlotClone = /*#__PURE__*/ $9IrjX$forwardRef((props, forwardedRef)=>{\n const { children: children , ...slotProps } = props;\n if (/*#__PURE__*/ $9IrjX$isValidElement(children)) return /*#__PURE__*/ $9IrjX$cloneElement(children, {\n ...$5e63c961fc1ce211$var$mergeProps(slotProps, children.props),\n ref: forwardedRef ? $9IrjX$composeRefs(forwardedRef, children.ref) : children.ref\n });\n return $9IrjX$Children.count(children) > 1 ? $9IrjX$Children.only(null) : null;\n});\n$5e63c961fc1ce211$var$SlotClone.displayName = 'SlotClone';\n/* -------------------------------------------------------------------------------------------------\n * Slottable\n * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$d9f1ccf0bdb05d45 = ({ children: children })=>{\n return /*#__PURE__*/ $9IrjX$createElement($9IrjX$Fragment, null, children);\n};\n/* ---------------------------------------------------------------------------------------------- */ function $5e63c961fc1ce211$var$isSlottable(child) {\n return /*#__PURE__*/ $9IrjX$isValidElement(child) && child.type === $5e63c961fc1ce211$export$d9f1ccf0bdb05d45;\n}\nfunction $5e63c961fc1ce211$var$mergeProps(slotProps, childProps) {\n // all child props should override\n const overrideProps = {\n ...childProps\n };\n for(const propName in childProps){\n const slotPropValue = slotProps[propName];\n const childPropValue = childProps[propName];\n const isHandler = /^on[A-Z]/.test(propName);\n if (isHandler) {\n // if the handler exists on both, we compose them\n if (slotPropValue && childPropValue) overrideProps[propName] = (...args)=>{\n childPropValue(...args);\n slotPropValue(...args);\n };\n else if (slotPropValue) overrideProps[propName] = slotPropValue;\n } else if (propName === 'style') overrideProps[propName] = {\n ...slotPropValue,\n ...childPropValue\n };\n else if (propName === 'className') overrideProps[propName] = [\n slotPropValue,\n childPropValue\n ].filter(Boolean).join(' ');\n }\n return {\n ...slotProps,\n ...overrideProps\n };\n}\nconst $5e63c961fc1ce211$export$be92b6f5f03c0fe9 = $5e63c961fc1ce211$export$8c6ed5c666ac1360;\n\n\n\n\nexport {$5e63c961fc1ce211$export$8c6ed5c666ac1360 as Slot, $5e63c961fc1ce211$export$d9f1ccf0bdb05d45 as Slottable, $5e63c961fc1ce211$export$be92b6f5f03c0fe9 as Root};\n//# sourceMappingURL=index.mjs.map\n","import $4q5Fq$babelruntimehelpersesmextends from \"@babel/runtime/helpers/esm/extends\";\nimport {forwardRef as $4q5Fq$forwardRef, useEffect as $4q5Fq$useEffect, createElement as $4q5Fq$createElement} from \"react\";\nimport {flushSync as $4q5Fq$flushSync} from \"react-dom\";\nimport {Slot as $4q5Fq$Slot} from \"@radix-ui/react-slot\";\n\n\n\n\n\nconst $8927f6f2acc4f386$var$NODES = [\n 'a',\n 'button',\n 'div',\n 'form',\n 'h2',\n 'h3',\n 'img',\n 'input',\n 'label',\n 'li',\n 'nav',\n 'ol',\n 'p',\n 'span',\n 'svg',\n 'ul'\n]; // Temporary while we await merge of this fix:\n// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/55396\n// prettier-ignore\n/* -------------------------------------------------------------------------------------------------\n * Primitive\n * -----------------------------------------------------------------------------------------------*/ const $8927f6f2acc4f386$export$250ffa63cdc0d034 = $8927f6f2acc4f386$var$NODES.reduce((primitive, node)=>{\n const Node = /*#__PURE__*/ $4q5Fq$forwardRef((props, forwardedRef)=>{\n const { asChild: asChild , ...primitiveProps } = props;\n const Comp = asChild ? $4q5Fq$Slot : node;\n $4q5Fq$useEffect(()=>{\n window[Symbol.for('radix-ui')] = true;\n }, []);\n return /*#__PURE__*/ $4q5Fq$createElement(Comp, $4q5Fq$babelruntimehelpersesmextends({}, primitiveProps, {\n ref: forwardedRef\n }));\n });\n Node.displayName = `Primitive.${node}`;\n return {\n ...primitive,\n [node]: Node\n };\n}, {});\n/* -------------------------------------------------------------------------------------------------\n * Utils\n * -----------------------------------------------------------------------------------------------*/ /**\n * Flush custom event dispatch\n * https://github.com/radix-ui/primitives/pull/1378\n *\n * React batches *all* event handlers since version 18, this introduces certain considerations when using custom event types.\n *\n * Internally, React prioritises events in the following order:\n * - discrete\n * - continuous\n * - default\n *\n * https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L294-L350\n *\n * `discrete` is an important distinction as updates within these events are applied immediately.\n * React however, is not able to infer the priority of custom event types due to how they are detected internally.\n * Because of this, it's possible for updates from custom events to be unexpectedly batched when\n * dispatched by another `discrete` event.\n *\n * In order to ensure that updates from custom events are applied predictably, we need to manually flush the batch.\n * This utility should be used when dispatching a custom event from within another `discrete` event, this utility\n * is not nessesary when dispatching known event types, or if dispatching a custom type inside a non-discrete event.\n * For example:\n *\n * dispatching a known click 👎\n * target.dispatchEvent(new Event(‘click’))\n *\n * dispatching a custom type within a non-discrete event 👎\n * onScroll={(event) => event.target.dispatchEvent(new CustomEvent(‘customType’))}\n *\n * dispatching a custom type within a `discrete` event 👍\n * onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(‘customType’))}\n *\n * Note: though React classifies `focus`, `focusin` and `focusout` events as `discrete`, it's not recommended to use\n * this utility with them. This is because it's possible for those handlers to be called implicitly during render\n * e.g. when focus is within a component as it is unmounted, or when managing focus on mount.\n */ function $8927f6f2acc4f386$export$6d1a0317bde7de7f(target, event) {\n if (target) $4q5Fq$flushSync(()=>target.dispatchEvent(event)\n );\n}\n/* -----------------------------------------------------------------------------------------------*/ const $8927f6f2acc4f386$export$be92b6f5f03c0fe9 = $8927f6f2acc4f386$export$250ffa63cdc0d034;\n\n\n\n\nexport {$8927f6f2acc4f386$export$250ffa63cdc0d034 as Primitive, $8927f6f2acc4f386$export$be92b6f5f03c0fe9 as Root, $8927f6f2acc4f386$export$6d1a0317bde7de7f as dispatchDiscreteCustomEvent};\n//# sourceMappingURL=index.mjs.map\n","import $kVwnw$babelruntimehelpersesmextends from \"@babel/runtime/helpers/esm/extends\";\nimport {forwardRef as $kVwnw$forwardRef, createElement as $kVwnw$createElement} from \"react\";\nimport {Primitive as $kVwnw$Primitive} from \"@radix-ui/react-primitive\";\n\n\n\n\n/* -------------------------------------------------------------------------------------------------\n * VisuallyHidden\n * -----------------------------------------------------------------------------------------------*/ const $ea1ef594cf570d83$var$NAME = 'VisuallyHidden';\nconst $ea1ef594cf570d83$export$439d29a4e110a164 = /*#__PURE__*/ $kVwnw$forwardRef((props, forwardedRef)=>{\n return /*#__PURE__*/ $kVwnw$createElement($kVwnw$Primitive.span, $kVwnw$babelruntimehelpersesmextends({}, props, {\n ref: forwardedRef,\n style: {\n // See: https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss\n position: 'absolute',\n border: 0,\n width: 1,\n height: 1,\n padding: 0,\n margin: -1,\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n wordWrap: 'normal',\n ...props.style\n }\n }));\n});\n/*#__PURE__*/ Object.assign($ea1ef594cf570d83$export$439d29a4e110a164, {\n displayName: $ea1ef594cf570d83$var$NAME\n});\n/* -----------------------------------------------------------------------------------------------*/ const $ea1ef594cf570d83$export$be92b6f5f03c0fe9 = $ea1ef594cf570d83$export$439d29a4e110a164;\n\n\n\n\nexport {$ea1ef594cf570d83$export$439d29a4e110a164 as VisuallyHidden, $ea1ef594cf570d83$export$be92b6f5f03c0fe9 as Root};\n//# sourceMappingURL=index.mjs.map\n","import React, { ReactNode } from \"react\";\nimport * as RadixVisuallyHidden from \"@radix-ui/react-visually-hidden\";\n\nexport type VisuallyHiddenProps = {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n * */\n asChild?: boolean;\n children: ReactNode;\n className?: string;\n [\"data-testid\"]?: string;\n};\n\nexport const VisuallyHidden = ({\n asChild,\n children,\n className = \"\",\n [\"data-testid\"]: dataTestid,\n}: VisuallyHiddenProps) => (\n <RadixVisuallyHidden.Root asChild={asChild} data-testid={dataTestid} className={className}>\n {children}\n </RadixVisuallyHidden.Root>\n);\n"],"names":["_extends","target","i","source","key","$6ed0406888f73fc4$var$setRef","ref","value","$6ed0406888f73fc4$export$43e446d32b3d21af","refs","node","$5e63c961fc1ce211$export$8c6ed5c666ac1360","$9IrjX$forwardRef","props","forwardedRef","children","slotProps","childrenArray","$9IrjX$Children","slottable","$5e63c961fc1ce211$var$isSlottable","newElement","newChildren","child","$9IrjX$isValidElement","$9IrjX$createElement","$5e63c961fc1ce211$var$SlotClone","$9IrjX$babelruntimehelpersesmextends","$9IrjX$cloneElement","$5e63c961fc1ce211$var$mergeProps","$9IrjX$composeRefs","$5e63c961fc1ce211$export$d9f1ccf0bdb05d45","$9IrjX$Fragment","childProps","overrideProps","propName","slotPropValue","childPropValue","args","$8927f6f2acc4f386$var$NODES","$8927f6f2acc4f386$export$250ffa63cdc0d034","primitive","Node","$4q5Fq$forwardRef","asChild","primitiveProps","Comp","$4q5Fq$Slot","$4q5Fq$useEffect","$4q5Fq$createElement","$4q5Fq$babelruntimehelpersesmextends","$ea1ef594cf570d83$export$439d29a4e110a164","$kVwnw$forwardRef","$kVwnw$createElement","$kVwnw$Primitive","$kVwnw$babelruntimehelpersesmextends","$ea1ef594cf570d83$export$be92b6f5f03c0fe9","VisuallyHidden","className","dataTestid","jsx","RadixVisuallyHidden.Root"],"mappings":"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","x_google_ignoreList":[0,1,2,3,4]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
System.register(["react","react-dom"],function(g,P){"use strict";var d,a,u,s,p,m,h,y;return{setters:[c=>{d=c.forwardRef,a=c.Children,u=c.isValidElement,s=c.createElement,p=c.cloneElement,m=c.Fragment,h=c.useEffect,y=c.default},null],execute:function(){function c(){return c=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},c.apply(this,arguments)}function E(e,t){typeof e=="function"?e(t):e!=null&&(e.current=t)}function w(...e){return t=>e.forEach(n=>E(n,t))}const b=d((e,t)=>{const{children:n,...r}=e,o=a.toArray(n),i=o.find(S);if(i){const l=i.props.children,f=o.map(v=>v===i?a.count(l)>1?a.only(null):u(l)?l.props.children:null:v);return s($,c({},r,{ref:t}),u(l)?p(l,void 0,f):null)}return s($,c({},r,{ref:t}),n)});b.displayName="Slot";const $=d((e,t)=>{const{children:n,...r}=e;return u(n)?p(n,{...C(r,n.props),ref:t?w(t,n.ref):n.ref}):a.count(n)>1?a.only(null):null});$.displayName="SlotClone";const x=({children:e})=>s(m,null,e);function S(e){return u(e)&&e.type===x}function C(e,t){const n={...t};for(const r in t){const o=e[r],i=t[r];/^on[A-Z]/.test(r)?o&&i?n[r]=(...f)=>{i(...f),o(...f)}:o&&(n[r]=o):r==="style"?n[r]={...o,...i}:r==="className"&&(n[r]=[o,i].filter(Boolean).join(" "))}return{...e,...n}}const N=["a","button","div","form","h2","h3","img","input","label","li","nav","ol","p","span","svg","ul"].reduce((e,t)=>{const n=d((r,o)=>{const{asChild:i,...l}=r,f=i?b:t;return h(()=>{window[Symbol.for("radix-ui")]=!0},[]),s(f,c({},l,{ref:o}))});return n.displayName=`Primitive.${t}`,{...e,[t]:n}},{}),O=d((e,t)=>s(N.span,c({},e,{ref:t,style:{position:"absolute",border:0,width:1,height:1,padding:0,margin:-1,overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",wordWrap:"normal",...e.style}}))),H=g("VisuallyHidden",({asChild:e,children:t,className:n="",["data-testid"]:r})=>y.createElement(O,{asChild:e,"data-testid":r,className:n},t))}}});
|
|
2
|
+
//# sourceMappingURL=visually-hidden.system.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"visually-hidden.system.js","sources":["../../../common/temp/node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/extends.js","../../../common/temp/node_modules/.pnpm/@radix-ui+react-compose-refs@1.0.1_@types+react@18.2.42_react@18.2.0/node_modules/@radix-ui/react-compose-refs/dist/index.mjs","../../../common/temp/node_modules/.pnpm/@radix-ui+react-slot@1.0.2_@types+react@18.2.42_react@18.2.0/node_modules/@radix-ui/react-slot/dist/index.mjs","../../../common/temp/node_modules/.pnpm/@radix-ui+react-primitive@1.0.3_@types+react-dom@18.2.17_@types+react@18.2.42_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-primitive/dist/index.mjs","../../../common/temp/node_modules/.pnpm/@radix-ui+react-visually-hidden@1.0.3_@types+react-dom@18.2.17_@types+react@18.2.42_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-visually-hidden/dist/index.mjs","../src/visually-hidden.tsx"],"sourcesContent":["export default function _extends() {\n _extends = Object.assign ? Object.assign.bind() : function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n return target;\n };\n return _extends.apply(this, arguments);\n}","import {useCallback as $3vqmr$useCallback} from \"react\";\n\n\n/**\n * Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n */ function $6ed0406888f73fc4$var$setRef(ref, value) {\n if (typeof ref === 'function') ref(value);\n else if (ref !== null && ref !== undefined) ref.current = value;\n}\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n */ function $6ed0406888f73fc4$export$43e446d32b3d21af(...refs) {\n return (node)=>refs.forEach((ref)=>$6ed0406888f73fc4$var$setRef(ref, node)\n )\n ;\n}\n/**\n * A custom hook that composes multiple refs\n * Accepts callback refs and RefObject(s)\n */ function $6ed0406888f73fc4$export$c7b2cbe3552a0d05(...refs) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return $3vqmr$useCallback($6ed0406888f73fc4$export$43e446d32b3d21af(...refs), refs);\n}\n\n\n\n\nexport {$6ed0406888f73fc4$export$43e446d32b3d21af as composeRefs, $6ed0406888f73fc4$export$c7b2cbe3552a0d05 as useComposedRefs};\n//# sourceMappingURL=index.mjs.map\n","import $9IrjX$babelruntimehelpersesmextends from \"@babel/runtime/helpers/esm/extends\";\nimport {forwardRef as $9IrjX$forwardRef, Children as $9IrjX$Children, isValidElement as $9IrjX$isValidElement, createElement as $9IrjX$createElement, cloneElement as $9IrjX$cloneElement, Fragment as $9IrjX$Fragment} from \"react\";\nimport {composeRefs as $9IrjX$composeRefs} from \"@radix-ui/react-compose-refs\";\n\n\n\n\n/* -------------------------------------------------------------------------------------------------\n * Slot\n * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$8c6ed5c666ac1360 = /*#__PURE__*/ $9IrjX$forwardRef((props, forwardedRef)=>{\n const { children: children , ...slotProps } = props;\n const childrenArray = $9IrjX$Children.toArray(children);\n const slottable = childrenArray.find($5e63c961fc1ce211$var$isSlottable);\n if (slottable) {\n // the new element to render is the one passed as a child of `Slottable`\n const newElement = slottable.props.children;\n const newChildren = childrenArray.map((child)=>{\n if (child === slottable) {\n // because the new element will be the one rendered, we are only interested\n // in grabbing its children (`newElement.props.children`)\n if ($9IrjX$Children.count(newElement) > 1) return $9IrjX$Children.only(null);\n return /*#__PURE__*/ $9IrjX$isValidElement(newElement) ? newElement.props.children : null;\n } else return child;\n });\n return /*#__PURE__*/ $9IrjX$createElement($5e63c961fc1ce211$var$SlotClone, $9IrjX$babelruntimehelpersesmextends({}, slotProps, {\n ref: forwardedRef\n }), /*#__PURE__*/ $9IrjX$isValidElement(newElement) ? /*#__PURE__*/ $9IrjX$cloneElement(newElement, undefined, newChildren) : null);\n }\n return /*#__PURE__*/ $9IrjX$createElement($5e63c961fc1ce211$var$SlotClone, $9IrjX$babelruntimehelpersesmextends({}, slotProps, {\n ref: forwardedRef\n }), children);\n});\n$5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName = 'Slot';\n/* -------------------------------------------------------------------------------------------------\n * SlotClone\n * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$var$SlotClone = /*#__PURE__*/ $9IrjX$forwardRef((props, forwardedRef)=>{\n const { children: children , ...slotProps } = props;\n if (/*#__PURE__*/ $9IrjX$isValidElement(children)) return /*#__PURE__*/ $9IrjX$cloneElement(children, {\n ...$5e63c961fc1ce211$var$mergeProps(slotProps, children.props),\n ref: forwardedRef ? $9IrjX$composeRefs(forwardedRef, children.ref) : children.ref\n });\n return $9IrjX$Children.count(children) > 1 ? $9IrjX$Children.only(null) : null;\n});\n$5e63c961fc1ce211$var$SlotClone.displayName = 'SlotClone';\n/* -------------------------------------------------------------------------------------------------\n * Slottable\n * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$d9f1ccf0bdb05d45 = ({ children: children })=>{\n return /*#__PURE__*/ $9IrjX$createElement($9IrjX$Fragment, null, children);\n};\n/* ---------------------------------------------------------------------------------------------- */ function $5e63c961fc1ce211$var$isSlottable(child) {\n return /*#__PURE__*/ $9IrjX$isValidElement(child) && child.type === $5e63c961fc1ce211$export$d9f1ccf0bdb05d45;\n}\nfunction $5e63c961fc1ce211$var$mergeProps(slotProps, childProps) {\n // all child props should override\n const overrideProps = {\n ...childProps\n };\n for(const propName in childProps){\n const slotPropValue = slotProps[propName];\n const childPropValue = childProps[propName];\n const isHandler = /^on[A-Z]/.test(propName);\n if (isHandler) {\n // if the handler exists on both, we compose them\n if (slotPropValue && childPropValue) overrideProps[propName] = (...args)=>{\n childPropValue(...args);\n slotPropValue(...args);\n };\n else if (slotPropValue) overrideProps[propName] = slotPropValue;\n } else if (propName === 'style') overrideProps[propName] = {\n ...slotPropValue,\n ...childPropValue\n };\n else if (propName === 'className') overrideProps[propName] = [\n slotPropValue,\n childPropValue\n ].filter(Boolean).join(' ');\n }\n return {\n ...slotProps,\n ...overrideProps\n };\n}\nconst $5e63c961fc1ce211$export$be92b6f5f03c0fe9 = $5e63c961fc1ce211$export$8c6ed5c666ac1360;\n\n\n\n\nexport {$5e63c961fc1ce211$export$8c6ed5c666ac1360 as Slot, $5e63c961fc1ce211$export$d9f1ccf0bdb05d45 as Slottable, $5e63c961fc1ce211$export$be92b6f5f03c0fe9 as Root};\n//# sourceMappingURL=index.mjs.map\n","import $4q5Fq$babelruntimehelpersesmextends from \"@babel/runtime/helpers/esm/extends\";\nimport {forwardRef as $4q5Fq$forwardRef, useEffect as $4q5Fq$useEffect, createElement as $4q5Fq$createElement} from \"react\";\nimport {flushSync as $4q5Fq$flushSync} from \"react-dom\";\nimport {Slot as $4q5Fq$Slot} from \"@radix-ui/react-slot\";\n\n\n\n\n\nconst $8927f6f2acc4f386$var$NODES = [\n 'a',\n 'button',\n 'div',\n 'form',\n 'h2',\n 'h3',\n 'img',\n 'input',\n 'label',\n 'li',\n 'nav',\n 'ol',\n 'p',\n 'span',\n 'svg',\n 'ul'\n]; // Temporary while we await merge of this fix:\n// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/55396\n// prettier-ignore\n/* -------------------------------------------------------------------------------------------------\n * Primitive\n * -----------------------------------------------------------------------------------------------*/ const $8927f6f2acc4f386$export$250ffa63cdc0d034 = $8927f6f2acc4f386$var$NODES.reduce((primitive, node)=>{\n const Node = /*#__PURE__*/ $4q5Fq$forwardRef((props, forwardedRef)=>{\n const { asChild: asChild , ...primitiveProps } = props;\n const Comp = asChild ? $4q5Fq$Slot : node;\n $4q5Fq$useEffect(()=>{\n window[Symbol.for('radix-ui')] = true;\n }, []);\n return /*#__PURE__*/ $4q5Fq$createElement(Comp, $4q5Fq$babelruntimehelpersesmextends({}, primitiveProps, {\n ref: forwardedRef\n }));\n });\n Node.displayName = `Primitive.${node}`;\n return {\n ...primitive,\n [node]: Node\n };\n}, {});\n/* -------------------------------------------------------------------------------------------------\n * Utils\n * -----------------------------------------------------------------------------------------------*/ /**\n * Flush custom event dispatch\n * https://github.com/radix-ui/primitives/pull/1378\n *\n * React batches *all* event handlers since version 18, this introduces certain considerations when using custom event types.\n *\n * Internally, React prioritises events in the following order:\n * - discrete\n * - continuous\n * - default\n *\n * https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L294-L350\n *\n * `discrete` is an important distinction as updates within these events are applied immediately.\n * React however, is not able to infer the priority of custom event types due to how they are detected internally.\n * Because of this, it's possible for updates from custom events to be unexpectedly batched when\n * dispatched by another `discrete` event.\n *\n * In order to ensure that updates from custom events are applied predictably, we need to manually flush the batch.\n * This utility should be used when dispatching a custom event from within another `discrete` event, this utility\n * is not nessesary when dispatching known event types, or if dispatching a custom type inside a non-discrete event.\n * For example:\n *\n * dispatching a known click 👎\n * target.dispatchEvent(new Event(‘click’))\n *\n * dispatching a custom type within a non-discrete event 👎\n * onScroll={(event) => event.target.dispatchEvent(new CustomEvent(‘customType’))}\n *\n * dispatching a custom type within a `discrete` event 👍\n * onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(‘customType’))}\n *\n * Note: though React classifies `focus`, `focusin` and `focusout` events as `discrete`, it's not recommended to use\n * this utility with them. This is because it's possible for those handlers to be called implicitly during render\n * e.g. when focus is within a component as it is unmounted, or when managing focus on mount.\n */ function $8927f6f2acc4f386$export$6d1a0317bde7de7f(target, event) {\n if (target) $4q5Fq$flushSync(()=>target.dispatchEvent(event)\n );\n}\n/* -----------------------------------------------------------------------------------------------*/ const $8927f6f2acc4f386$export$be92b6f5f03c0fe9 = $8927f6f2acc4f386$export$250ffa63cdc0d034;\n\n\n\n\nexport {$8927f6f2acc4f386$export$250ffa63cdc0d034 as Primitive, $8927f6f2acc4f386$export$be92b6f5f03c0fe9 as Root, $8927f6f2acc4f386$export$6d1a0317bde7de7f as dispatchDiscreteCustomEvent};\n//# sourceMappingURL=index.mjs.map\n","import $kVwnw$babelruntimehelpersesmextends from \"@babel/runtime/helpers/esm/extends\";\nimport {forwardRef as $kVwnw$forwardRef, createElement as $kVwnw$createElement} from \"react\";\nimport {Primitive as $kVwnw$Primitive} from \"@radix-ui/react-primitive\";\n\n\n\n\n/* -------------------------------------------------------------------------------------------------\n * VisuallyHidden\n * -----------------------------------------------------------------------------------------------*/ const $ea1ef594cf570d83$var$NAME = 'VisuallyHidden';\nconst $ea1ef594cf570d83$export$439d29a4e110a164 = /*#__PURE__*/ $kVwnw$forwardRef((props, forwardedRef)=>{\n return /*#__PURE__*/ $kVwnw$createElement($kVwnw$Primitive.span, $kVwnw$babelruntimehelpersesmextends({}, props, {\n ref: forwardedRef,\n style: {\n // See: https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss\n position: 'absolute',\n border: 0,\n width: 1,\n height: 1,\n padding: 0,\n margin: -1,\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n wordWrap: 'normal',\n ...props.style\n }\n }));\n});\n/*#__PURE__*/ Object.assign($ea1ef594cf570d83$export$439d29a4e110a164, {\n displayName: $ea1ef594cf570d83$var$NAME\n});\n/* -----------------------------------------------------------------------------------------------*/ const $ea1ef594cf570d83$export$be92b6f5f03c0fe9 = $ea1ef594cf570d83$export$439d29a4e110a164;\n\n\n\n\nexport {$ea1ef594cf570d83$export$439d29a4e110a164 as VisuallyHidden, $ea1ef594cf570d83$export$be92b6f5f03c0fe9 as Root};\n//# sourceMappingURL=index.mjs.map\n","import React, { ReactNode } from \"react\";\nimport * as RadixVisuallyHidden from \"@radix-ui/react-visually-hidden\";\n\nexport type VisuallyHiddenProps = {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n * */\n asChild?: boolean;\n children: ReactNode;\n className?: string;\n [\"data-testid\"]?: string;\n};\n\nexport const VisuallyHidden = ({\n asChild,\n children,\n className = \"\",\n [\"data-testid\"]: dataTestid,\n}: VisuallyHiddenProps) => (\n <RadixVisuallyHidden.Root asChild={asChild} data-testid={dataTestid} className={className}>\n {children}\n </RadixVisuallyHidden.Root>\n);\n"],"names":["_extends","target","i","source","key","$6ed0406888f73fc4$var$setRef","ref","value","$6ed0406888f73fc4$export$43e446d32b3d21af","refs","node","$5e63c961fc1ce211$export$8c6ed5c666ac1360","$9IrjX$forwardRef","props","forwardedRef","children","slotProps","childrenArray","$9IrjX$Children","slottable","$5e63c961fc1ce211$var$isSlottable","newElement","newChildren","child","$9IrjX$isValidElement","$9IrjX$createElement","$5e63c961fc1ce211$var$SlotClone","$9IrjX$babelruntimehelpersesmextends","$9IrjX$cloneElement","$5e63c961fc1ce211$var$mergeProps","$9IrjX$composeRefs","$5e63c961fc1ce211$export$d9f1ccf0bdb05d45","$9IrjX$Fragment","childProps","overrideProps","propName","slotPropValue","childPropValue","args","$8927f6f2acc4f386$export$250ffa63cdc0d034","primitive","Node","$4q5Fq$forwardRef","asChild","primitiveProps","Comp","$4q5Fq$Slot","$4q5Fq$useEffect","$4q5Fq$createElement","$4q5Fq$babelruntimehelpersesmextends","$ea1ef594cf570d83$export$be92b6f5f03c0fe9","$kVwnw$forwardRef","$kVwnw$createElement","$kVwnw$Primitive","$kVwnw$babelruntimehelpersesmextends","VisuallyHidden","className","dataTestid","React","RadixVisuallyHidden.Root"],"mappings":"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","x_google_ignoreList":[0,1,2,3,4]}
|
package/package.json
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@purpurds/visually-hidden",
|
|
3
|
+
"version": "3.0.0",
|
|
4
|
+
"license": "AGPL-3.0-only",
|
|
5
|
+
"main": "./dist/visually-hidden.cjs.js",
|
|
6
|
+
"types": "./dist/visually-hidden.d.ts",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"require": "./dist/visually-hidden.cjs.js",
|
|
10
|
+
"systemjs": "./dist/visually-hidden.system.js",
|
|
11
|
+
"types": "./dist/visually-hidden.d.ts",
|
|
12
|
+
"default": "./dist/visually-hidden.es.js"
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
"source": "src/visually-hidden.tsx",
|
|
16
|
+
"dependencies": {
|
|
17
|
+
"@radix-ui/react-visually-hidden": "~1.0.3"
|
|
18
|
+
},
|
|
19
|
+
"devDependencies": {
|
|
20
|
+
"@rushstack/eslint-patch": "~1.7.0",
|
|
21
|
+
"@storybook/blocks": "~7.6.0",
|
|
22
|
+
"@storybook/react": "~7.6.0",
|
|
23
|
+
"@telia/base-rig": "~8.2.0",
|
|
24
|
+
"@telia/react-rig": "~3.2.0",
|
|
25
|
+
"@testing-library/dom": "~9.3.3",
|
|
26
|
+
"@testing-library/jest-dom": "~6.3.0",
|
|
27
|
+
"@testing-library/react": "~14.1.2",
|
|
28
|
+
"@types/node": "18",
|
|
29
|
+
"@types/react-dom": "~18.2.17",
|
|
30
|
+
"@types/react": "~18.2.42",
|
|
31
|
+
"eslint-plugin-testing-library": "~6.2.0",
|
|
32
|
+
"eslint": "~8.56.0",
|
|
33
|
+
"jsdom": "~22.1.0",
|
|
34
|
+
"lint-staged": "~10.5.3",
|
|
35
|
+
"prettier": "~2.8.8",
|
|
36
|
+
"react-dom": "~18.2.0",
|
|
37
|
+
"react": "~18.2.0",
|
|
38
|
+
"typescript": "~5.2.2",
|
|
39
|
+
"vite": "~5.0.6",
|
|
40
|
+
"vitest": "~1.2.0",
|
|
41
|
+
"@purpurds/component-rig": "1.0.0"
|
|
42
|
+
},
|
|
43
|
+
"scripts": {
|
|
44
|
+
"build:dev": "vite",
|
|
45
|
+
"build:watch": "vite build --watch",
|
|
46
|
+
"build": "rm -rf dist && vite build && vite build --mode systemjs",
|
|
47
|
+
"ci:build": "rushx build",
|
|
48
|
+
"coverage": "vitest run --coverage",
|
|
49
|
+
"lint:fix": "eslint . --fix",
|
|
50
|
+
"lint": "lint-staged --no-stash 2>&1",
|
|
51
|
+
"sbdev": "rush sbdev",
|
|
52
|
+
"test:unit": "vitest run --passWithNoTests",
|
|
53
|
+
"test:watch": "vitest --watch",
|
|
54
|
+
"test": "rushx test:unit",
|
|
55
|
+
"typecheck": "tsc -p ./tsconfig.json"
|
|
56
|
+
}
|
|
57
|
+
}
|
package/readme.mdx
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
|
|
2
|
+
|
|
3
|
+
import * as VisuallyHiddenStories from "./src/visually-hidden.stories";
|
|
4
|
+
import packageInfo from "./package.json";
|
|
5
|
+
|
|
6
|
+
<Meta name="Docs" title="Components/VisuallyHidden" of={VisuallyHiddenStories} />
|
|
7
|
+
|
|
8
|
+
# VisuallyHidden
|
|
9
|
+
|
|
10
|
+
<Subtitle>Version {packageInfo.version}</Subtitle>
|
|
11
|
+
|
|
12
|
+
Component provides text only for screen readers. This is used to explain content or situation which is not explainable without clear text. Component is designed to be hidden, but shown when screen reader makes focus.
|
|
13
|
+
|
|
14
|
+
Example use cases:
|
|
15
|
+
|
|
16
|
+
- There is content being loaded
|
|
17
|
+
- When visual style is not understood by screen reader, like with Price component
|
|
18
|
+
|
|
19
|
+
### Showcase
|
|
20
|
+
|
|
21
|
+
<Primary />
|
|
22
|
+
|
|
23
|
+
### Properties
|
|
24
|
+
|
|
25
|
+
<ArgTypes />
|
|
26
|
+
|
|
27
|
+
### Installation
|
|
28
|
+
|
|
29
|
+
#### Via NPM
|
|
30
|
+
|
|
31
|
+
Add the dependency to your consumer app like `"@purpurds/visually-hidden": "x.y.z"`
|
|
32
|
+
|
|
33
|
+
#### From outside the monorepo (build-time)
|
|
34
|
+
|
|
35
|
+
To install this package, you need to setup access to the artifactory. [Click here to go to the guide on how to do that](https://github.com/telia-company/jfrog-documentation/blob/main/doc/JFrog/JFrog_Onboarding.md#getting-access-to-artifactory-and-other-jfrog-applications).
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
In MyApp.tsx
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
import "@purpurds/tokens/index.css";
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
and
|
|
46
|
+
|
|
47
|
+
```tsx
|
|
48
|
+
import "@purpurds/visually-hidden/styles";
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
In MyComponent.tsx
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
import { VisuallyHidden } from "@purpurds/visually-hidden";
|
|
55
|
+
|
|
56
|
+
export const MyComponent = () => {
|
|
57
|
+
return (
|
|
58
|
+
<div>
|
|
59
|
+
<VisuallyHidden {...someProps}>Some content</VisuallyHidden>
|
|
60
|
+
</div>
|
|
61
|
+
);
|
|
62
|
+
};
|
|
63
|
+
```
|
package/src/global.d.ts
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
|
|
3
|
+
import { VisuallyHidden } from "./visually-hidden";
|
|
4
|
+
|
|
5
|
+
const meta: Meta<typeof VisuallyHidden> = {
|
|
6
|
+
title: "Utils/VisuallyHidden",
|
|
7
|
+
component: VisuallyHidden,
|
|
8
|
+
argTypes: {
|
|
9
|
+
children: { control: { type: "text" } },
|
|
10
|
+
},
|
|
11
|
+
};
|
|
12
|
+
export default meta;
|
|
13
|
+
|
|
14
|
+
type Story = StoryObj<typeof VisuallyHidden>;
|
|
15
|
+
|
|
16
|
+
export const Showcase: Story = {
|
|
17
|
+
args: {
|
|
18
|
+
children: "Hello VisuallyHidden!",
|
|
19
|
+
},
|
|
20
|
+
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import * as matchers from "@testing-library/jest-dom/matchers";
|
|
3
|
+
import { render, screen } from "@testing-library/react";
|
|
4
|
+
import { describe, expect, it } from "vitest";
|
|
5
|
+
|
|
6
|
+
import { VisuallyHidden } from "./visually-hidden";
|
|
7
|
+
|
|
8
|
+
expect.extend(matchers);
|
|
9
|
+
|
|
10
|
+
describe("VisuallyHidden", () => {
|
|
11
|
+
it("should render", () => {
|
|
12
|
+
render(<VisuallyHidden data-testid="visually-hidden">Some text content</VisuallyHidden>);
|
|
13
|
+
|
|
14
|
+
expect(screen.getByTestId("visually-hidden")).toHaveTextContent("Some text content");
|
|
15
|
+
});
|
|
16
|
+
});
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React, { ReactNode } from "react";
|
|
2
|
+
import * as RadixVisuallyHidden from "@radix-ui/react-visually-hidden";
|
|
3
|
+
|
|
4
|
+
export type VisuallyHiddenProps = {
|
|
5
|
+
/**
|
|
6
|
+
* Change the default rendered element for the one passed as a child, merging their props and behavior.
|
|
7
|
+
* */
|
|
8
|
+
asChild?: boolean;
|
|
9
|
+
children: ReactNode;
|
|
10
|
+
className?: string;
|
|
11
|
+
["data-testid"]?: string;
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export const VisuallyHidden = ({
|
|
15
|
+
asChild,
|
|
16
|
+
children,
|
|
17
|
+
className = "",
|
|
18
|
+
["data-testid"]: dataTestid,
|
|
19
|
+
}: VisuallyHiddenProps) => (
|
|
20
|
+
<RadixVisuallyHidden.Root asChild={asChild} data-testid={dataTestid} className={className}>
|
|
21
|
+
{children}
|
|
22
|
+
</RadixVisuallyHidden.Root>
|
|
23
|
+
);
|