@atom-learning/components 3.5.2 → 3.7.0

package/dist/components/tree/TreeCollapsibleContent.js

@@ -0,0 +1,2 @@
+import{Content as a}from"@radix-ui/react-collapsible";import t from"react";import{styled as s}from"../../stitches.js";import{TreeCollapsibleContext as p}from"./TreeCollapsible.js";import{TreeList as c}from"./TreeList.js";const i=s(a,{'&[data-state="open"]':{},'&[data-state="closed"]':{display:"none"}}),f=t.forwardRef(({children:o,...n},l)=>{const{triggerRef:e}=t.useContext(p);return t.createElement(i,{onKeyDown:r=>{!(e!=null&&e.current)||r.key==="Escape"&&(r.stopPropagation(),r.preventDefault(),e.current.focus(),e.current.click())},...n,asChild:!0},t.createElement(c,{ref:l,role:"group"},o))});export{f as TreeCollapsibleContent};
+//# sourceMappingURL=TreeCollapsibleContent.js.map

package/dist/components/tree/TreeCollapsibleContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeCollapsibleContent.js","sources":["../../../src/components/tree/TreeCollapsibleContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-collapsible'\nimport React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { TreeCollapsibleContext } from './TreeCollapsible'\nimport { TreeList } from './TreeList'\n\nconst StyledTreeCollapsibleContent = styled(Content, {\n  '&[data-state=\"open\"]': {},\n  '&[data-state=\"closed\"]': {\n    display: 'none'\n  }\n})\n\ntype TreeCollapsibleContentProps = React.ComponentProps<\n  typeof StyledTreeCollapsibleContent\n> &\n  React.ComponentProps<typeof TreeList>\n\nexport const TreeCollapsibleContent = React.forwardRef(\n  (\n    { children, ...rest }: TreeCollapsibleContentProps,\n    ref: React.ForwardedRef<HTMLUListElement>\n  ): JSX.Element => {\n    const { triggerRef } = React.useContext(TreeCollapsibleContext)\n\n    const handleOnKeydown = (e) => {\n      if (!triggerRef?.current) return\n      if (e.key === 'Escape') {\n        e.stopPropagation()\n        e.preventDefault()\n        triggerRef.current.focus()\n        triggerRef.current.click()\n      }\n    }\n\n    return (\n      <StyledTreeCollapsibleContent\n        onKeyDown={handleOnKeydown}\n        {...rest}\n        asChild\n      >\n        <TreeList ref={ref} role=\"group\">\n          {children}\n        </TreeList>\n      </StyledTreeCollapsibleContent>\n    )\n  }\n)\n"],"names":["StyledTreeCollapsibleContent","styled","Content","TreeCollapsibleContent","React","children","rest","ref","triggerRef","TreeCollapsibleContext","e","TreeList"],"mappings":"6NAQA,MAAMA,EAA+BC,EAAOC,EAAS,CACnD,uBAAwB,CAAA,EACxB,yBAA0B,CACxB,QAAS,MACX,CACF,CAAC,EAOYC,EAAyBC,EAAM,WAC1C,CACE,CAAE,SAAAC,KAAaC,CAAK,EACpBC,IACgB,CAChB,KAAM,CAAE,WAAAC,CAAW,EAAIJ,EAAM,WAAWK,CAAsB,EAY9D,OACEL,EAAA,cAACJ,EAAA,CACC,UAZqBU,GAAM,CACzB,EAACF,GAAA,MAAAA,EAAY,UACbE,EAAE,MAAQ,WACZA,EAAE,gBAAA,EACFA,EAAE,iBACFF,EAAW,QAAQ,QACnBA,EAAW,QAAQ,MAEvB,EAAA,EAKK,GAAGF,EACJ,QAAO,EAAA,EAEPF,EAAA,cAACO,EAAA,CAAS,IAAKJ,EAAK,KAAK,OACtBF,EAAAA,CACH,CACF,CAEJ,CACF"}

package/dist/components/tree/TreeCollapsibleTrigger.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TreeItemContent } from './TreeItemContent';
+declare type TNavigationMenuCollapsibleTriggerProps = React.ComponentProps<typeof TreeItemContent> & {
+    label: string;
+};
+export declare const TreeCollapsibleTrigger: ({ children, label, ...rest }: TNavigationMenuCollapsibleTriggerProps) => JSX.Element;
+export {};

package/dist/components/tree/TreeCollapsibleTrigger.js

@@ -0,0 +1,2 @@
+import{ChevronDown as p}from"@atom-learning/icons";import{Trigger as f}from"@radix-ui/react-collapsible";import e from"react";import{StyledIcon as r,Icon as d}from"../icon/Icon.js";import{ActionIcon as g}from"../action-icon/ActionIcon.js";import{styled as a}from"../../stitches.js";import{TreeCollapsibleContext as u}from"./TreeCollapsible.js";import{TreeItemContent as C}from"./TreeItemContent.js";const T=a(C,{cursor:"pointer"}),b=a(g,{position:"absolute",left:0,top:0,pointerEvents:"none",[`${r}`]:{transition:"transform 300ms"},[`&[data-state="closed"] > ${r}`]:{transform:"rotate(-90deg)"},[`&[data-state="open"] > ${r}`]:{transform:"rotate(0deg)"}}),h=({children:m,label:s,...t})=>{const{setTriggerRef:c,triggerRef:n}=e.useContext(u);return e.createElement(T,{...t,onClick:o=>{var l,i;(l=t.onClick)==null||l.call(t,o),(i=n==null?void 0:n.current)==null||i.click()}},e.createElement(f,{asChild:!0},e.createElement(b,{size:"sm",ref:c,label:s,theme:"neutral",hasTooltip:!1,onClick:o=>o.stopPropagation()},e.createElement(d,{is:p}))),m)};export{h as TreeCollapsibleTrigger};
+//# sourceMappingURL=TreeCollapsibleTrigger.js.map

package/dist/components/tree/TreeCollapsibleTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeCollapsibleTrigger.js","sources":["../../../src/components/tree/TreeCollapsibleTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-collapsible'\nimport React from 'react'\n\nimport { Icon, StyledIcon } from '~/components/icon'\nimport { ActionIcon } from '~/components/action-icon'\nimport { styled } from '~/stitches'\n\nimport { TreeCollapsibleContext } from './TreeCollapsible'\nimport { TreeItemContent } from './TreeItemContent'\n\nconst StyledTreeCollapsibleTrigger = styled(TreeItemContent, {\n  cursor: 'pointer'\n})\n\nconst StyledActionIcon = styled(ActionIcon, {\n  position: 'absolute',\n  left: 0,\n  top: 0,\n  pointerEvents: 'none',\n  [`${StyledIcon}`]: {\n    transition: 'transform 300ms'\n  },\n  [`&[data-state=\"closed\"] > ${StyledIcon}`]: {\n    transform: 'rotate(-90deg)'\n  },\n  [`&[data-state=\"open\"] > ${StyledIcon}`]: {\n    transform: 'rotate(0deg)'\n  }\n})\n\ntype TNavigationMenuCollapsibleTriggerProps = React.ComponentProps<\n  typeof TreeItemContent\n> & {\n  label: string\n}\n\nexport const TreeCollapsibleTrigger = ({\n  children,\n  label,\n  ...rest\n}: TNavigationMenuCollapsibleTriggerProps) => {\n  const { setTriggerRef, triggerRef } = React.useContext(TreeCollapsibleContext)\n\n  return (\n    <StyledTreeCollapsibleTrigger\n      {...rest}\n      onClick={(event) => {\n        rest.onClick?.(event)\n        triggerRef?.current?.click()\n      }}\n    >\n      <Trigger asChild>\n        <StyledActionIcon\n          size=\"sm\"\n          ref={setTriggerRef}\n          label={label}\n          theme=\"neutral\"\n          hasTooltip={false}\n          onClick={(e: PointerEvent) => e.stopPropagation()}\n        >\n          <Icon is={ChevronDown} />\n        </StyledActionIcon>\n      </Trigger>\n      {children}\n    </StyledTreeCollapsibleTrigger>\n  )\n}\n"],"names":["StyledTreeCollapsibleTrigger","styled","TreeItemContent","StyledActionIcon","ActionIcon","StyledIcon","TreeCollapsibleTrigger","children","label","rest","setTriggerRef","triggerRef","React","TreeCollapsibleContext","event","_a","_b","Trigger","e","Icon","ChevronDown"],"mappings":"+YAWA,MAAMA,EAA+BC,EAAOC,EAAiB,CAC3D,OAAQ,SACV,CAAC,EAEKC,EAAmBF,EAAOG,EAAY,CAC1C,SAAU,WACV,KAAM,EACN,IAAK,EACL,cAAe,OACf,CAAC,GAAGC,KAAe,CACjB,WAAY,iBACd,EACA,CAAC,4BAA4BA,KAAe,CAC1C,UAAW,gBACb,EACA,CAAC,0BAA0BA,KAAe,CACxC,UAAW,cACb,CACF,CAAC,EAQYC,EAAyB,CAAC,CACrC,SAAAC,EACA,MAAAC,KACGC,CACL,IAA8C,CAC5C,KAAM,CAAE,cAAAC,EAAe,WAAAC,CAAW,EAAIC,EAAM,WAAWC,CAAsB,EAE7E,OACED,EAAA,cAACZ,EAAA,CACE,GAAGS,EACJ,QAAUK,GAAU,CA/C1B,IAAAC,EAAAC,GAgDQD,EAAAN,EAAK,UAAL,MAAAM,EAAA,KAAAN,EAAeK,CACfE,GAAAA,EAAAL,GAAA,KAAAA,OAAAA,EAAY,UAAZ,MAAAK,EAAqB,MACvB,CAAA,CAAA,EAEAJ,EAAA,cAACK,EAAA,CAAQ,QAAO,EACdL,EAAAA,EAAA,cAACT,EAAA,CACC,KAAK,KACL,IAAKO,EACL,MAAOF,EACP,MAAM,UACN,WAAY,GACZ,QAAUU,GAAoBA,EAAE,iBAEhCN,EAAAA,EAAA,cAACO,EAAA,CAAK,GAAIC,CAAAA,CAAa,CACzB,CACF,EACCb,CACH,CAEJ"}