@atom-learning/components 6.0.4 → 6.1.1
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/dialog/DialogContent.js +1 -1
- package/dist/components/dialog/DialogContent.js.map +1 -1
- package/dist/components/markdown-content/MarkdownContent.js +1 -1
- package/dist/components/markdown-content/MarkdownContent.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlItemList.js +1 -1
- package/dist/components/segmented-control/SegmentedControlItemList.js.map +1 -1
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/package.json +20 -21
- package/src/index.css +8 -4
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Close as d}from"@atom-learning/icons";import{Overlay as p,Content as u,Portal as v,Close as x}from"@radix-ui/react-dialog";import*as o from"react";import{styled as a}from"../../styled.js";import{backdropOverlay as c}from"../../utilities/style/backdrop-overlay.js";import{ActionIcon as w}from"../action-icon/ActionIcon.js";import{Icon as f}from"../icon/Icon.js";import{DialogBackground as r}from"./DialogBackground.js";const m="modal_overlay",z=a(p,{base:c}),b=a(u,{base:["-translate-
|
|
1
|
+
import{Close as d}from"@atom-learning/icons";import{Overlay as p,Content as u,Portal as v,Close as x}from"@radix-ui/react-dialog";import*as o from"react";import{styled as a}from"../../styled.js";import{backdropOverlay as c}from"../../utilities/style/backdrop-overlay.js";import{ActionIcon as w}from"../action-icon/ActionIcon.js";import{Icon as f}from"../icon/Icon.js";import{DialogBackground as r}from"./DialogBackground.js";const m="modal_overlay",z=a(p,{base:c}),b=a(u,{base:["transform-[translate(-50%,-50%)]","bg-white","shadow-xl","box-border","left-1/2","h-auto","max-w-[90vw]","max-h-[90vh]","overflow-y-auto","rounded-md","p-8","fixed","top-1/2","z-1147483646","focus:outline-none","motion-safe:data-[state=open]:animate-slide-in-center","motion-safe:data-[state=closed]:animate-slide-out-center"],variants:{size:{xs:["rounded-md","size-auto","max-w-[90vw]","max-h-[90vh]","supports-svh:h-auto","supports-svh:max-h-[90vh]","w-95"],sm:["rounded-md","size-auto","max-w-[90vw]","max-h-[90vh]","supports-svh:h-auto","supports-svh:max-h-[90vh]","w-120"],md:["rounded-md","size-auto","max-w-[90vw]","max-h-[90vh]","supports-svh:h-auto","supports-svh:max-h-[90vh]","w-150"],lg:["rounded-md","size-auto","max-w-[90vw]","max-h-[90vh]","supports-svh:h-auto","supports-svh:max-h-[90vh]","w-200"],xl:["rounded-md","size-auto","max-w-[90vw]","max-h-[90vh]","supports-svh:h-auto","supports-svh:max-h-[90vh]","w-275"],fullscreen:["rounded-none","w-screen","h-screen","max-w-screen","max-h-screen","supports-svh:h-svh","supports-svh:max-h-svh"]}}},{enabledResponsiveVariants:!0}),g=({size:n="sm",children:s,closeDialogText:h="Close dialog",showCloseButton:l=!0,...i})=>o.createElement(v,null,o.createElement(z,{id:m},o.Children.map(s,e=>(e==null?void 0:e.type)===r&&e),o.createElement(b,{size:n,"aria-label":"Dialog",onPointerDownOutside:e=>{const t=e.target;(t==null?void 0:t.id)!==m&&e.preventDefault()},...i},l&&o.createElement(w,{as:x,label:h,hasTooltip:!1,size:"md",theme:"neutral",className:"absolute top-4 right-4 size-12"},o.createElement(f,{is:d})),o.Children.map(s,e=>(e==null?void 0:e.type)!==r&&e))));export{g as DialogContent};
|
|
2
2
|
//# sourceMappingURL=DialogContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogContent.js","sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { backdropOverlay } from '~/utilities/style/backdrop-overlay'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst modalOverlayId = 'modal_overlay'\n\nconst StyledDialogOverlay = styled(Overlay, {\n base: backdropOverlay\n})\n\nconst StyledDialogContent = styled(\n Content,\n {\n base: [\n '-translate-
|
|
1
|
+
{"version":3,"file":"DialogContent.js","sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { backdropOverlay } from '~/utilities/style/backdrop-overlay'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst modalOverlayId = 'modal_overlay'\n\nconst StyledDialogOverlay = styled(Overlay, {\n base: backdropOverlay\n})\n\nconst StyledDialogContent = styled(\n Content,\n {\n base: [\n // `transform: translate()` is required for `floating-ui` to\n // correctly position elements within the Dialog component.\n // we can't use the translate property directly\n 'transform-[translate(-50%,-50%)]',\n 'bg-white',\n 'shadow-xl',\n 'box-border',\n 'left-1/2',\n 'h-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'overflow-y-auto',\n 'rounded-md',\n 'p-8',\n 'fixed',\n 'top-1/2',\n 'z-1147483646',\n 'focus:outline-none',\n 'motion-safe:data-[state=open]:animate-slide-in-center',\n 'motion-safe:data-[state=closed]:animate-slide-out-center'\n ],\n variants: {\n size: {\n xs: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-95'\n ],\n sm: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-120'\n ],\n md: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-150'\n ],\n lg: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-200'\n ],\n xl: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-275'\n ],\n fullscreen: [\n 'rounded-none',\n 'w-screen',\n 'h-screen',\n 'max-w-screen',\n 'max-h-screen',\n 'supports-svh:h-svh',\n 'supports-svh:max-h-svh'\n ]\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n closeDialogText?: string\n showCloseButton?: boolean\n}\n\nexport const DialogContent = ({\n size = 'sm',\n children,\n closeDialogText = 'Close dialog',\n showCloseButton = true,\n ...remainingProps\n}: DialogContentProps) => (\n <Portal>\n <StyledDialogOverlay id={modalOverlayId}>\n {React.Children.map(\n children,\n (child?: React.ReactElement) =>\n child?.type === DialogBackground && child\n )}\n <StyledDialogContent\n size={size}\n aria-label=\"Dialog\"\n onPointerDownOutside={(event) => {\n const element = event.target as HTMLElement\n if (element?.id !== modalOverlayId) {\n event.preventDefault()\n }\n }}\n {...remainingProps}\n >\n {showCloseButton && (\n <ActionIcon\n as={Close}\n label={closeDialogText}\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n className=\"absolute top-4 right-4 size-12\"\n >\n <Icon is={CloseIcon} />\n </ActionIcon>\n )}\n {React.Children.map(\n children,\n (child?: React.ReactElement) =>\n child?.type !== DialogBackground && child\n )}\n </StyledDialogContent>\n </StyledDialogOverlay>\n </Portal>\n)\n"],"names":["modalOverlayId","StyledDialogOverlay","styled","Overlay","backdropOverlay","StyledDialogContent","Content","DialogContent","size","children","closeDialogText","showCloseButton","remainingProps","React","Portal","child","DialogBackground","event","element","ActionIcon","Close","Icon","CloseIcon"],"mappings":"yaAWA,MAAMA,EAAiB,gBAEjBC,EAAsBC,EAAOC,EAAS,CAC1C,KAAMC,CACR,CAAC,EAEKC,EAAsBH,EAC1BI,EACA,CACE,KAAM,CAIJ,mCACA,WACA,YACA,aACA,WACA,SACA,eACA,eACA,kBACA,aACA,MACA,QACA,UACA,eACA,qBACA,wDACA,0DACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,aACA,YACA,eACA,eACA,sBACA,4BACA,MACF,EACA,GAAI,CACF,aACA,YACA,eACA,eACA,sBACA,4BACA,OACF,EACA,GAAI,CACF,aACA,YACA,eACA,eACA,sBACA,4BACA,OACF,EACA,GAAI,CACF,aACA,YACA,eACA,eACA,sBACA,4BACA,OACF,EACA,GAAI,CACF,aACA,YACA,eACA,eACA,sBACA,4BACA,OACF,EACA,WAAY,CACV,eACA,WACA,WACA,eACA,eACA,qBACA,wBACF,CACF,CACF,CACF,EACA,CAAE,0BAA2B,EAAK,CACpC,EAOaC,EAAgB,CAAC,CAC5B,KAAAC,EAAO,KACP,SAAAC,EACA,gBAAAC,EAAkB,eAClB,gBAAAC,EAAkB,GAClB,GAAGC,CACL,IACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACZ,EAAA,CAAoB,GAAID,CACtBa,EAAAA,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,EACAF,EAAA,cAACR,EAAA,CACC,KAAMG,EACN,aAAW,SACX,qBAAuBS,GAAU,CAC/B,MAAMC,EAAUD,EAAM,QAClBC,GAAA,KAAAA,OAAAA,EAAS,MAAOlB,GAClBiB,EAAM,gBAEV,EACC,GAAGL,CAAAA,EAEHD,GACCE,EAAA,cAACM,EAAA,CACC,GAAIC,EACJ,MAAOV,EACP,WAAY,GACZ,KAAK,KACL,MAAM,UACN,UAAU,gCAEVG,EAAAA,EAAA,cAACQ,EAAA,CAAK,GAAIC,CAAW,CAAA,CACvB,EAEDT,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,CACF,CACF,CACF"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import d from"mdast-util-directive";import
|
|
1
|
+
import d from"mdast-util-directive";import c from"mdast-util-from-markdown";import l from"micromark-extension-directive";import*as p from"react";import{styled as f}from"../../styled.js";import{Flex as w}from"../flex/Flex.js";import{MarkdownCode as k}from"./components/MarkdownCode.js";import{MarkdownEmphasis as h}from"./components/MarkdownEmphasis.js";import{MarkdownHeading as M}from"./components/MarkdownHeading.js";import{MarkdownInlineCode as x}from"./components/MarkdownInlineCode.js";import{MarkdownImage as u}from"./components/MarkdownImage.js";import{MarkdownLink as g}from"./components/MarkdownLink.js";import{MarkdownList as $}from"./components/MarkdownList.js";import{MarkdownListItem as y}from"./components/MarkdownListItem.js";import{MarkdownParagraph as C}from"./components/MarkdownParagraph.js";import{MarkdownStrong as E}from"./components/MarkdownStrong.js";import{MarkdownText as I}from"./components/MarkdownText.js";import{MarkdownThematicBreak as N}from"./components/MarkdownThematicBreak.js";const L=f(w,{base:["[&>h1]:max-w-[65ch]","[&>h2]:max-w-[65ch]","[&>h3]:max-w-[65ch]","[&>h4]:max-w-[65ch]","[&>p]:max-w-[75ch]","[&>ul]:max-w-[75ch]"]}),B={code:k,emphasis:h,heading:M,inlineCode:x,image:u,link:g,list:$,listItem:y,paragraph:C,strong:E,text:I,thematicBreak:N},H=o=>{var r;if((r=o.position)!=null&&r.start){const{line:t,column:m,offset:e}=o.position.start;return`${o.type}${t}${m}${e}`}return`${o.type}${+new Date}`},s=({content:o,customComponents:r={},className:t})=>{const m=c(o,{extensions:[l()],mdastExtensions:[d.fromMarkdown]}),e={...B,...r},n=a=>{const i=e[a.type];return i?p.createElement(i,{key:H(a),node:a,handleNode:n}):null};return p.createElement(L,{direction:"column",gap:5,className:t},m.children.map(n))};s.displayName="MarkdownContent";export{s as MarkdownContent};
|
|
2
2
|
//# sourceMappingURL=MarkdownContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MarkdownContent.js","sources":["../../../src/components/markdown-content/MarkdownContent.tsx"],"sourcesContent":["import directive from 'mdast-util-directive'\nimport fromMarkdown from 'mdast-util-from-markdown'\nimport syntax from 'micromark-extension-directive'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Flex } from '../flex/Flex'\nimport {\n MarkdownCode,\n MarkdownEmphasis,\n MarkdownHeading,\n MarkdownImage,\n MarkdownInlineCode,\n MarkdownLink,\n MarkdownList,\n MarkdownListItem,\n MarkdownParagraph,\n MarkdownStrong,\n MarkdownText,\n MarkdownThematicBreak\n} from './components'\n\ntype HandleNode = (node) => JSX.Element | null\n\nconst StyledMarkdownContent = styled(Flex, {\n base: [\n '[&>h1]:max-w-[65ch]',\n '[&>h2]:max-w-[65ch]',\n '[&>h3]:max-w-[65ch]',\n '[&>h4]:max-w-[65ch]',\n '[&>p]:max-w-[75ch]',\n '[&>ul]:max-w-[75ch]'\n ]\n})\n\ntype MarkdownContentProps = React.ComponentProps<\n typeof StyledMarkdownContent\n> & {\n content: string\n customComponents?: {\n [key: string]: (props: { node: any; handleNode: HandleNode }) => JSX.Element\n }\n}\n\nconst defaultComponentsMap = {\n code: MarkdownCode,\n emphasis: MarkdownEmphasis,\n heading: MarkdownHeading,\n inlineCode: MarkdownInlineCode,\n image: MarkdownImage,\n link: MarkdownLink,\n list: MarkdownList,\n listItem: MarkdownListItem,\n paragraph: MarkdownParagraph,\n strong: MarkdownStrong,\n text: MarkdownText,\n thematicBreak: MarkdownThematicBreak\n}\n\nconst generateNodeKey = (node) => {\n if (node.position?.start) {\n const { line, column, offset } = node.position
|
|
1
|
+
{"version":3,"file":"MarkdownContent.js","sources":["../../../src/components/markdown-content/MarkdownContent.tsx"],"sourcesContent":["import directive from 'mdast-util-directive'\nimport fromMarkdown from 'mdast-util-from-markdown'\nimport syntax from 'micromark-extension-directive'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Flex } from '../flex/Flex'\nimport {\n MarkdownCode,\n MarkdownEmphasis,\n MarkdownHeading,\n MarkdownImage,\n MarkdownInlineCode,\n MarkdownLink,\n MarkdownList,\n MarkdownListItem,\n MarkdownParagraph,\n MarkdownStrong,\n MarkdownText,\n MarkdownThematicBreak\n} from './components'\n\ntype HandleNode = (node) => JSX.Element | null\n\nconst StyledMarkdownContent = styled(Flex, {\n base: [\n '[&>h1]:max-w-[65ch]',\n '[&>h2]:max-w-[65ch]',\n '[&>h3]:max-w-[65ch]',\n '[&>h4]:max-w-[65ch]',\n '[&>p]:max-w-[75ch]',\n '[&>ul]:max-w-[75ch]'\n ]\n})\n\ntype MarkdownContentProps = React.ComponentProps<\n typeof StyledMarkdownContent\n> & {\n content: string\n customComponents?: {\n [key: string]: (props: { node: any; handleNode: HandleNode }) => JSX.Element\n }\n}\n\nconst defaultComponentsMap = {\n code: MarkdownCode,\n emphasis: MarkdownEmphasis,\n heading: MarkdownHeading,\n inlineCode: MarkdownInlineCode,\n image: MarkdownImage,\n link: MarkdownLink,\n list: MarkdownList,\n listItem: MarkdownListItem,\n paragraph: MarkdownParagraph,\n strong: MarkdownStrong,\n text: MarkdownText,\n thematicBreak: MarkdownThematicBreak\n}\n\nconst generateNodeKey = (node) => {\n if (node.position?.start) {\n const { line, column, offset } = node.position.start\n return `${node.type}${line}${column}${offset}`\n }\n\n return `${node.type}${+new Date()}`\n}\n\nexport const MarkdownContent = ({\n content,\n customComponents = {},\n className\n}: MarkdownContentProps) => {\n const AST = fromMarkdown(content, {\n extensions: [syntax()],\n mdastExtensions: [directive.fromMarkdown]\n })\n\n const componentsMap = {\n ...defaultComponentsMap,\n ...customComponents\n }\n\n const handleNode: HandleNode = (node) => {\n const MarkdownComponent = componentsMap[node.type]\n\n return MarkdownComponent ? (\n <MarkdownComponent\n key={generateNodeKey(node)}\n node={node}\n handleNode={handleNode}\n />\n ) : null\n }\n\n return (\n <StyledMarkdownContent direction=\"column\" gap={5} className={className}>\n {AST.children.map(handleNode)}\n </StyledMarkdownContent>\n )\n}\n\nMarkdownContent.displayName = 'MarkdownContent'\n"],"names":["StyledMarkdownContent","styled","Flex","defaultComponentsMap","MarkdownCode","MarkdownEmphasis","MarkdownHeading","MarkdownInlineCode","MarkdownImage","MarkdownLink","MarkdownList","MarkdownListItem","MarkdownParagraph","MarkdownStrong","MarkdownText","MarkdownThematicBreak","generateNodeKey","node","_a","line","column","offset","MarkdownContent","content","customComponents","className","AST","fromMarkdown","syntax","directive","componentsMap","handleNode","MarkdownComponent","React"],"mappings":"q/BAyBA,MAAMA,EAAwBC,EAAOC,EAAM,CACzC,KAAM,CACJ,sBACA,sBACA,sBACA,sBACA,qBACA,qBACF,CACF,CAAC,EAWKC,EAAuB,CAC3B,KAAMC,EACN,SAAUC,EACV,QAASC,EACT,WAAYC,EACZ,MAAOC,EACP,KAAMC,EACN,KAAMC,EACN,SAAUC,EACV,UAAWC,EACX,OAAQC,EACR,KAAMC,EACN,cAAeC,CACjB,EAEMC,EAAmBC,GAAS,CA5DlC,IAAAC,EA6DE,IAAIA,EAAAD,EAAK,WAAL,MAAAC,EAAe,MAAO,CACxB,KAAM,CAAE,KAAAC,EAAM,OAAAC,EAAQ,OAAAC,CAAO,EAAIJ,EAAK,SAAS,MAC/C,MAAO,GAAGA,EAAK,IAAI,GAAGE,CAAI,GAAGC,CAAM,GAAGC,CAAM,EAC9C,CAEA,MAAO,GAAGJ,EAAK,IAAI,GAAG,CAAC,IAAI,IAAM,EACnC,EAEaK,EAAkB,CAAC,CAC9B,QAAAC,EACA,iBAAAC,EAAmB,CACnB,EAAA,UAAAC,CACF,IAA4B,CAC1B,MAAMC,EAAMC,EAAaJ,EAAS,CAChC,WAAY,CAACK,GAAQ,EACrB,gBAAiB,CAACC,EAAU,YAAY,CAC1C,CAAC,EAEKC,EAAgB,CACpB,GAAG3B,EACH,GAAGqB,CACL,EAEMO,EAA0Bd,GAAS,CACvC,MAAMe,EAAoBF,EAAcb,EAAK,IAAI,EAEjD,OAAOe,EACLC,EAAA,cAACD,EAAA,CACC,IAAKhB,EAAgBC,CAAI,EACzB,KAAMA,EACN,WAAYc,CACd,CAAA,EACE,IACN,EAEA,OACEE,EAAA,cAACjC,EAAA,CAAsB,UAAU,SAAS,IAAK,EAAG,UAAWyB,CAC1DC,EAAAA,EAAI,SAAS,IAAIK,CAAU,CAC9B,CAEJ,EAEAT,EAAgB,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as t from"react";import{styled as l}from"../../styled.js";import{Tabs as
|
|
1
|
+
import*as t from"react";import{styled as l}from"../../styled.js";import{Tabs as p}from"../tabs/Tabs.js";import{SegmentedControlContext as g}from"./SegmentedControlContext.js";const b=l(p.TriggerList,{base:["relative","p-1","rounded-lg","overflow-hidden","[&>div[role=tablist]]:relative","[&>button]:z-2"],variants:{theme:{primary:["bg-primary-200"],marsh:["bg-marsh-200"]}}}),C=l("div",{base:["absolute","bg-white","rounded-md"],variants:{interacted:{true:["duration-300","ease-in","transition-all"],false:["transition-none"]}}}),w=s=>{const{theme:d,defaultValue:u,value:c}=t.useContext(g),a=t.useRef([]),i=t.Children.toArray(s.children).findIndex(e=>(e==null?void 0:e.props.value)===c),[m,h]=t.useState({left:0,height:0,width:0}),[f,v]=t.useState(!1),n=t.useCallback(()=>{const e=a.current[i];if(!e)return;const{width:o,height:r}=e.getBoundingClientRect();h({left:Math.round(e.offsetLeft),height:Math.round(r),width:Math.round(o)})},[i]);return t.useEffect(()=>{const e=new ResizeObserver(n),o=a.current;return o.forEach(r=>{r&&e.observe(r)}),()=>{o.forEach(r=>{r&&e.unobserve(r)}),e.disconnect()}},[i,n]),t.useEffect(()=>(window.addEventListener("resize",n),()=>{window.removeEventListener("resize",n)}),[n]),t.useEffect(()=>{n()},[i,n]),t.createElement(b,{theme:d,defaultValue:u,...s},t.createElement(C,{interacted:f,style:m}),t.Children.map(s.children,(e,o)=>{if(!t.isValidElement(e))throw new Error("Child passed to SegmentedControlItemList is not a valid element");return t.cloneElement(e,{onClick:r=>{v(!0),e.props.onClick&&e.props.onClick(r)},ref:r=>a.current[o]=r})}))};export{w as SegmentedControlItemList};
|
|
2
2
|
//# sourceMappingURL=SegmentedControlItemList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControlItemList.js","sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Tabs } from '../tabs'\nimport { SegmentedControlContext } from './SegmentedControlContext'\nimport { SegmentedControlItem } from './SegmentedControlItem'\n\nconst StyledTriggerList = styled(Tabs.TriggerList, {\n base: [\n 'relative',\n 'p-1',\n 'rounded-lg',\n 'overflow-hidden',\n '[&>div[role=tablist]]:relative',\n '[&>button]:z-2'\n ],\n variants: {\n theme: {\n primary: ['bg-primary-200'],\n marsh: ['bg-marsh-200']\n }\n }\n})\n\nconst SelectionIndicator = styled('div', {\n base: ['absolute', 'bg-white', 'rounded-md'],\n variants: {\n interacted: {\n true: ['duration-300', 'ease-in', 'transition-all'],\n false: ['transition-none']\n }\n }\n})\n\nexport const SegmentedControlItemList = (\n props: React.ComponentProps<typeof Tabs.TriggerList>\n): JSX.Element => {\n const { theme, defaultValue, value } = React.useContext(\n SegmentedControlContext\n )\n\n const tabsRef = React.useRef<(HTMLElement | null)[]>([])\n\n const selectedIndex = React.Children.toArray(props.children).findIndex(\n (child) => (child as React.ReactElement)?.props.value === value\n )\n\n const [indicatorStyles, setIndicatorStyles] = React.useState({\n left: 0,\n height: 0,\n width: 0\n })\n const [hasInteracted, setHasInteracted] = React.useState(false)\n\n const updateIndicatorPosition = React.useCallback(() => {\n const currentTab = tabsRef.current[selectedIndex]\n if (!currentTab) return\n\n const { width, height } = currentTab.getBoundingClientRect()\n setIndicatorStyles({
|
|
1
|
+
{"version":3,"file":"SegmentedControlItemList.js","sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Tabs } from '../tabs'\nimport { SegmentedControlContext } from './SegmentedControlContext'\nimport { SegmentedControlItem } from './SegmentedControlItem'\n\nconst StyledTriggerList = styled(Tabs.TriggerList, {\n base: [\n 'relative',\n 'p-1',\n 'rounded-lg',\n 'overflow-hidden',\n '[&>div[role=tablist]]:relative',\n '[&>button]:z-2'\n ],\n variants: {\n theme: {\n primary: ['bg-primary-200'],\n marsh: ['bg-marsh-200']\n }\n }\n})\n\nconst SelectionIndicator = styled('div', {\n base: ['absolute', 'bg-white', 'rounded-md'],\n variants: {\n interacted: {\n true: ['duration-300', 'ease-in', 'transition-all'],\n false: ['transition-none']\n }\n }\n})\n\nexport const SegmentedControlItemList = (\n props: React.ComponentProps<typeof Tabs.TriggerList>\n): JSX.Element => {\n const { theme, defaultValue, value } = React.useContext(\n SegmentedControlContext\n )\n\n const tabsRef = React.useRef<(HTMLElement | null)[]>([])\n\n const selectedIndex = React.Children.toArray(props.children).findIndex(\n (child) => (child as React.ReactElement)?.props.value === value\n )\n\n const [indicatorStyles, setIndicatorStyles] = React.useState({\n left: 0,\n height: 0,\n width: 0\n })\n const [hasInteracted, setHasInteracted] = React.useState(false)\n\n const updateIndicatorPosition = React.useCallback(() => {\n const currentTab = tabsRef.current[selectedIndex]\n if (!currentTab) return\n\n const { width, height } = currentTab.getBoundingClientRect()\n setIndicatorStyles({\n left: Math.round(currentTab.offsetLeft),\n height: Math.round(height),\n width: Math.round(width)\n })\n }, [selectedIndex])\n\n React.useEffect(() => {\n const resizeObserver = new ResizeObserver(updateIndicatorPosition)\n const currentTabs = tabsRef.current\n currentTabs.forEach((tab) => {\n if (tab) resizeObserver.observe(tab)\n })\n\n return () => {\n currentTabs.forEach((tab) => {\n if (tab) resizeObserver.unobserve(tab)\n })\n resizeObserver.disconnect()\n }\n }, [selectedIndex, updateIndicatorPosition])\n\n React.useEffect(() => {\n window.addEventListener('resize', updateIndicatorPosition)\n return () => {\n window.removeEventListener('resize', updateIndicatorPosition)\n }\n }, [updateIndicatorPosition])\n\n React.useEffect(() => {\n updateIndicatorPosition()\n }, [selectedIndex, updateIndicatorPosition])\n\n return (\n <StyledTriggerList theme={theme} defaultValue={defaultValue} {...props}>\n <SelectionIndicator interacted={hasInteracted} style={indicatorStyles} />\n {React.Children.map(props.children, (child, index) => {\n if (!React.isValidElement(child)) {\n throw new Error(\n `Child passed to SegmentedControlItemList is not a valid element`\n )\n }\n\n return React.cloneElement(\n child as React.ReactElement<\n React.ComponentProps<typeof SegmentedControlItem>\n >,\n {\n onClick: (e) => {\n setHasInteracted(true)\n if (child.props.onClick) child.props.onClick(e)\n },\n ref: (el) => (tabsRef.current[index] = el)\n }\n )\n })}\n </StyledTriggerList>\n )\n}\n"],"names":["StyledTriggerList","styled","Tabs","SelectionIndicator","SegmentedControlItemList","props","theme","defaultValue","value","React","SegmentedControlContext","tabsRef","selectedIndex","child","indicatorStyles","setIndicatorStyles","hasInteracted","setHasInteracted","updateIndicatorPosition","currentTab","width","height","resizeObserver","currentTabs","tab","index","e","el"],"mappings":"+KAQA,MAAMA,EAAoBC,EAAOC,EAAK,YAAa,CACjD,KAAM,CACJ,WACA,MACA,aACA,kBACA,iCACA,gBACF,EACA,SAAU,CACR,MAAO,CACL,QAAS,CAAC,gBAAgB,EAC1B,MAAO,CAAC,cAAc,CACxB,CACF,CACF,CAAC,EAEKC,EAAqBF,EAAO,MAAO,CACvC,KAAM,CAAC,WAAY,WAAY,YAAY,EAC3C,SAAU,CACR,WAAY,CACV,KAAM,CAAC,eAAgB,UAAW,gBAAgB,EAClD,MAAO,CAAC,iBAAiB,CAC3B,CACF,CACF,CAAC,EAEYG,EACXC,GACgB,CAChB,KAAM,CAAE,MAAAC,EAAO,aAAAC,EAAc,MAAAC,CAAM,EAAIC,EAAM,WAC3CC,CACF,EAEMC,EAAUF,EAAM,OAA+B,CAAE,CAAA,EAEjDG,EAAgBH,EAAM,SAAS,QAAQJ,EAAM,QAAQ,EAAE,UAC1DQ,IAAWA,GAAA,YAAAA,EAA8B,MAAM,SAAUL,CAC5D,EAEM,CAACM,EAAiBC,CAAkB,EAAIN,EAAM,SAAS,CAC3D,KAAM,EACN,OAAQ,EACR,MAAO,CACT,CAAC,EACK,CAACO,EAAeC,CAAgB,EAAIR,EAAM,SAAS,EAAK,EAExDS,EAA0BT,EAAM,YAAY,IAAM,CACtD,MAAMU,EAAaR,EAAQ,QAAQC,CAAa,EAChD,GAAI,CAACO,EAAY,OAEjB,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAIF,EAAW,sBAAA,EACrCJ,EAAmB,CACjB,KAAM,KAAK,MAAMI,EAAW,UAAU,EACtC,OAAQ,KAAK,MAAME,CAAM,EACzB,MAAO,KAAK,MAAMD,CAAK,CACzB,CAAC,CACH,EAAG,CAACR,CAAa,CAAC,EAElB,OAAAH,EAAM,UAAU,IAAM,CACpB,MAAMa,EAAiB,IAAI,eAAeJ,CAAuB,EAC3DK,EAAcZ,EAAQ,QAC5B,OAAAY,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,QAAQE,CAAG,CACrC,CAAC,EAEM,IAAM,CACXD,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,UAAUE,CAAG,CACvC,CAAC,EACDF,EAAe,YACjB,CACF,EAAG,CAACV,EAAeM,CAAuB,CAAC,EAE3CT,EAAM,UAAU,KACd,OAAO,iBAAiB,SAAUS,CAAuB,EAClD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAuB,CAC9D,GACC,CAACA,CAAuB,CAAC,EAE5BT,EAAM,UAAU,IAAM,CACpBS,EAAwB,CAC1B,EAAG,CAACN,EAAeM,CAAuB,CAAC,EAGzCT,EAAA,cAACT,EAAA,CAAkB,MAAOM,EAAO,aAAcC,EAAe,GAAGF,CAAAA,EAC/DI,EAAA,cAACN,EAAA,CAAmB,WAAYa,EAAe,MAAOF,CAAAA,CAAiB,EACtEL,EAAM,SAAS,IAAIJ,EAAM,SAAU,CAACQ,EAAOY,IAAU,CACpD,GAAI,CAAChB,EAAM,eAAeI,CAAK,EAC7B,MAAM,IAAI,MACR,iEACF,EAGF,OAAOJ,EAAM,aACXI,EAGA,CACE,QAAUa,GAAM,CACdT,EAAiB,EAAI,EACjBJ,EAAM,MAAM,SAASA,EAAM,MAAM,QAAQa,CAAC,CAChD,EACA,IAAMC,GAAQhB,EAAQ,QAAQc,CAAK,EAAIE,CACzC,CACF,CACF,CAAC,CACH,CAEJ"}
|