@atom-learning/components 4.0.0-beta.1 → 4.0.0-beta.11

package/dist/components/keyboard-shortcut/KeyboardShortcut.js

@@ -0,0 +1,2 @@
+import{Slot as b}from"@radix-ui/react-slot";import*as e from"react";import{styled as c}from"../../stitches.js";import{useCallbackRefState as S}from"../../utilities/hooks/useCallbackRef.js";import{Box as g}from"../box/Box.js";import{Text as v}from"../text/Text.js";const x=c(b),d=e.forwardRef(({asChild:t,config:s,targetWindow:r=!1,onKeyDown:n,...m},f)=>{const[u,y]=S();e.useImperativeHandle(f,()=>u);const o=e.useCallback(i=>{s.forEach(({shortcut:a,action:h})=>{Object.entries(a).every(([p,w])=>i[p]===w)&&h({event:i,shortcut:a})}),n==null||n(i)},[s,n]);return e.useEffect(()=>(r&&window.addEventListener("keydown",o),()=>{window.removeEventListener("keydown",o)}),[r,o]),e.createElement(t?x:g,{onKeyDown:r?void 0:o,ref:y,...m})});d.displayName="KeyboardShortcut";const K=c.withConfig({shouldForwardStitchesProp:t=>["as"].includes(t)})(v,{bg:"$grey100",color:"$textSubtle",px:"$2",py:"$0",minWidth:"$2",minHeight:"$2",fontWeight:400,display:"inline-flex",justifyContent:"center",alignItems:"center",borderRadius:"$1",flexShrink:0}),l=t=>e.createElement(K,{size:"sm",as:"kbd",...t});l.displayName="KeyboardShortcut";export{d as KeyboardShortcut,l as KeyboardShortcutIndicator};
+//# sourceMappingURL=KeyboardShortcut.js.map

package/dist/components/keyboard-shortcut/KeyboardShortcut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyboardShortcut.js","sources":["../../../src/components/keyboard-shortcut/KeyboardShortcut.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\n\nimport { Box } from '../box'\nimport { Text } from '../text'\n\nconst StyledSlot = styled(Slot)\n\ntype KeyboardEventWindowOrElement =\n  | KeyboardEvent\n  | React.KeyboardEvent<HTMLDivElement>\n\ntype KeyboardShortcutProps = React.ComponentProps<typeof Box> & {\n  asChild?: boolean\n  config: {\n    shortcut: Partial<React.SyntheticEvent<KeyboardEvent>>\n    action: ({\n      event,\n      shortcut\n    }: {\n      event: KeyboardEvent | React.KeyboardEvent<HTMLDivElement>\n      shortcut: Partial<React.SyntheticEvent<KeyboardEvent>>\n    }) => void\n  }[]\n  targetWindow?: boolean\n  onKeyDown?: (e: KeyboardEventWindowOrElement) => void\n}\n\nexport const KeyboardShortcut: React.ForwardRefExoticComponent<KeyboardShortcutProps> =\n  React.forwardRef(\n    ({ asChild, config, targetWindow = false, onKeyDown, ...rest }, ref) => {\n      const [targetElRef, setTargetElRef] = useCallbackRefState()\n      React.useImperativeHandle(ref, () => targetElRef as HTMLDivElement)\n\n      const handleOnKeydown = React.useCallback(\n        (e: KeyboardEventWindowOrElement) => {\n          config.forEach(({ shortcut, action }) => {\n            if (\n              Object.entries(shortcut).every(([key, value]) => e[key] === value)\n            )\n              action({ event: e, shortcut })\n          })\n          onKeyDown?.(e)\n        },\n        [config, onKeyDown]\n      )\n\n      React.useEffect(() => {\n        if (targetWindow) window.addEventListener('keydown', handleOnKeydown)\n\n        return () => {\n          window.removeEventListener('keydown', handleOnKeydown)\n        }\n      }, [targetWindow, handleOnKeydown])\n\n      const Component = asChild ? StyledSlot : Box\n\n      return (\n        <Component\n          onKeyDown={targetWindow ? undefined : handleOnKeydown}\n          ref={setTargetElRef}\n          {...rest}\n        />\n      )\n    }\n  )\n\nKeyboardShortcut.displayName = 'KeyboardShortcut'\n\nconst StyledKeyboardShortcutIndicator = styled.withConfig({\n  shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Text, {\n  bg: '$grey100',\n  color: '$textSubtle',\n  px: '$2',\n  py: '$0',\n  minWidth: '$2',\n  minHeight: '$2',\n  fontWeight: 400,\n  display: 'inline-flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  borderRadius: '$1',\n  flexShrink: 0\n})\n\ntype KeyboardShortcutIndicatorProps = React.ComponentProps<\n  typeof StyledKeyboardShortcutIndicator\n>\n\nexport const KeyboardShortcutIndicator = (\n  props: KeyboardShortcutIndicatorProps\n) => {\n  return <StyledKeyboardShortcutIndicator size=\"sm\" as=\"kbd\" {...props} />\n}\n\nKeyboardShortcutIndicator.displayName = 'KeyboardShortcut'\n"],"names":["StyledSlot","styled","Slot","KeyboardShortcut","React","asChild","config","targetWindow","onKeyDown","rest","ref","targetElRef","setTargetElRef","useCallbackRefState","handleOnKeydown","e","shortcut","action","key","value","Box","StyledKeyboardShortcutIndicator","propName","Text","KeyboardShortcutIndicator","props"],"mappings":"wQASA,MAAMA,EAAaC,EAAOC,CAAI,EAsBjBC,EACXC,EAAM,WACJ,CAAC,CAAE,QAAAC,EAAS,OAAAC,EAAQ,aAAAC,EAAe,GAAO,UAAAC,KAAcC,CAAK,EAAGC,IAAQ,CACtE,KAAM,CAACC,EAAaC,CAAc,EAAIC,IACtCT,EAAM,oBAAoBM,EAAK,IAAMC,CAA6B,EAElE,MAAMG,EAAkBV,EAAM,YAC3BW,GAAoC,CACnCT,EAAO,QAAQ,CAAC,CAAE,SAAAU,EAAU,OAAAC,CAAO,IAAM,CAErC,OAAO,QAAQD,CAAQ,EAAE,MAAM,CAAC,CAACE,EAAKC,CAAK,IAAMJ,EAAEG,KAASC,CAAK,GAEjEF,EAAO,CAAE,MAAOF,EAAG,SAAAC,CAAS,CAAC,CACjC,CAAC,EACDR,GAAA,MAAAA,EAAYO,CAAAA,CACd,EACA,CAACT,EAAQE,CAAS,CACpB,EAEA,OAAAJ,EAAM,UAAU,KACVG,GAAc,OAAO,iBAAiB,UAAWO,CAAe,EAE7D,IAAM,CACX,OAAO,oBAAoB,UAAWA,CAAe,CACvD,GACC,CAACP,EAAcO,CAAe,CAAC,EAKhCV,EAAA,cAHgBC,EAAUL,EAAaoB,EAGtC,CACC,UAAWb,EAAe,OAAYO,EACtC,IAAKF,EACJ,GAAGH,CACN,CAAA,CAEJ,CACF,EAEFN,EAAiB,YAAc,mBAE/B,MAAMkB,EAAkCpB,EAAO,WAAW,CACxD,0BAA4BqB,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAAM,CACP,GAAI,WACJ,MAAO,cACP,GAAI,KACJ,GAAI,KACJ,SAAU,KACV,UAAW,KACX,WAAY,IACZ,QAAS,cACT,eAAgB,SAChB,WAAY,SACZ,aAAc,KACd,WAAY,CACd,CAAC,EAMYC,EACXC,GAEOrB,EAAA,cAACiB,EAAA,CAAgC,KAAK,KAAK,GAAG,MAAO,GAAGI,CAAAA,CAAO,EAGxED,EAA0B,YAAc"}