@atom-learning/components 3.31.2 → 3.32.0

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 = KeyboardEvent | React.KeyboardEvent<HTMLDivElement>\n\ntype KeyboardShortcutProps = React.ComponentProps<typeof Box> & {\n  asChild?: boolean\n  config: {\n    shortcut: Partial<React.SyntheticEvent<KeyboardEvent>>, action: ({ event, shortcut }: {\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(({ 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((e: KeyboardEventWindowOrElement) => {\n      config.forEach(({ shortcut, action }) => {\n        if (Object.entries(shortcut).every(([key, value]) => e[key] === value)) action({ event: e, shortcut })\n      })\n      onKeyDown?.(e)\n    }, [config, onKeyDown])\n\n    React.useEffect(() => {\n      if (targetWindow) window.addEventListener('keydown', handleOnKeydown)\n\n      return () => {\n        window.removeEventListener('keydown', handleOnKeydown)\n      }\n\n    }, [targetWindow, handleOnKeydown])\n\n    const Component = asChild ? StyledSlot : Box\n\n    return (<Component onKeyDown={targetWindow ? undefined : handleOnKeydown} ref={setTargetElRef} {...rest} />)\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<typeof StyledKeyboardShortcutIndicator>\n\nexport const KeyboardShortcutIndicator = (props: KeyboardShortcutIndicatorProps) => {\n  return (<StyledKeyboardShortcutIndicator size=\"sm\" as=\"kbd\" {...props} />)\n}\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,EAgBjBC,EACXC,EAAM,WAAW,CAAC,CAAE,QAAAC,EAAS,OAAAC,EAAQ,aAAAC,EAAe,GAAO,UAAAC,KAAcC,CAAK,EAAGC,IAAQ,CACvF,KAAM,CAACC,EAAaC,CAAc,EAAIC,IACtCT,EAAM,oBAAoBM,EAAK,IAAMC,CAA6B,EAElE,MAAMG,EAAkBV,EAAM,YAAaW,GAAoC,CAC7ET,EAAO,QAAQ,CAAC,CAAE,SAAAU,EAAU,OAAAC,CAAO,IAAM,CACnC,OAAO,QAAQD,CAAQ,EAAE,MAAM,CAAC,CAACE,EAAKC,CAAK,IAAMJ,EAAEG,KAASC,CAAK,GAAGF,EAAO,CAAE,MAAOF,EAAG,SAAAC,CAAS,CAAC,CACvG,CAAC,EACDR,GAAA,MAAAA,EAAYO,CAAAA,CACd,EAAG,CAACT,EAAQE,CAAS,CAAC,EAEtB,OAAAJ,EAAM,UAAU,KACVG,GAAc,OAAO,iBAAiB,UAAWO,CAAe,EAE7D,IAAM,CACX,OAAO,oBAAoB,UAAWA,CAAe,CACvD,GAEC,CAACP,EAAcO,CAAe,CAAC,EAI1BV,EAAA,cAFUC,EAAUL,EAAaoB,EAEhC,CAAU,UAAWb,EAAe,OAAYO,EAAiB,IAAKF,EAAiB,GAAGH,CAAM,CAAA,CAC3G,CAAC,EAEHN,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,EAIYC,EAA6BC,GAChCrB,EAAA,cAACiB,EAAA,CAAgC,KAAK,KAAK,GAAG,MAAO,GAAGI,CAAAA,CAAO,EAIzED,EAA0B,YAAc"}