npm - @mittwald/flow-react-components - Versions diffs - 1.3.0-next.3 → 1.3.0-next.31 - Mend

@mittwald/flow-react-components 1.3.0-next.3 → 1.3.0-next.31

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.

Files changed (188) hide show

package/dist/js/packages/components/src/components/Heading/Heading.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Heading.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.tsx"],"sourcesContent":["import type { AlphaColor, PropsWithElementType } from \"@/lib/types/props\";\nimport styles from \"./Heading.module.scss\";\nimport { styleClassname } from \"@/lib/scss/selectors\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface HeadingProps\n extends\n Aria.HeadingProps,\n FlowComponentProps,\n PropsWithElementType<\"span\" \| \"p\"> {\n /** The font size of the heading. /\n size?: \"xs\" \| \"s\" \| \"m\" \| \"l\" \| \"xl\" \| \"xxl\";\n /* The color of the heading. @default \"default\" /\n color?: \"default\" \| \"danger\" \| \"unavailable\" \| AlphaColor;\n /* The text-wrap property of the text. @default undefined /\n wrap?: \"wrap\" \| \"balance\";\n}\n\n/\n The font size each heading level renders at — the TypeScript half of the\n * level-based `--font-size` rules in Heading.module.scss. Levels 4 to 6 fall\n * through to the `xs` default.\n /\nconst sizeByLevel: Record<number, NonNullable<HeadingProps[\"size\"]>> = {\n 1: \"xl\",\n 2: \"m\",\n 3: \"s\",\n};\n\n/* @flr-generate all */\nexport const Heading = flowComponent(\"Heading\", (props) => {\n const {\n children,\n className,\n level = 2,\n color = \"default\",\n wrap,\n size,\n ref,\n elementType,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.heading,\n size && styles[`size-${size}`],\n color !== \"default\" && styles[color],\n wrap && styles[`wrap-${wrap}`],\n elementType && styleClassname(styles, `h${level}`),\n className,\n );\n\n const Element = elementType ?? Aria.Heading;\n\n const effectiveSize = size ?? sizeByLevel[level] ?? \"xs\";\n const buttonSize =\n effectiveSize === \"xl\" \|\| effectiveSize === \"xxl\" ? \"m\" : \"s\";\n\n const propsContext: PropsContext = {\n Icon: {\n \"aria-hidden\": true,\n className: styles.icon,\n },\n AlertBadge: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n },\n Badge: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n },\n Button: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n size: buttonSize,\n },\n CopyButton: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n size: buttonSize,\n },\n ContextualHelpTrigger: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n Button: {\n tunnel: null,\n },\n },\n AlertText: {\n Icon: {\n className: styles.icon,\n },\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <Element className={rootClassName} {...rest} ref={ref} level={level}>\n <span className={styles.headingText}>{children}</span>\n <span className={styles.headingContent}>\n <UiComponentTunnelExit id=\"headingContent\" component=\"Heading\" />\n </span>\n </Element>\n </PropsContextProvider>\n );\n});\n\nexport default Heading;\n"],"mappings":";;;;;;;;;;;;;;;;AA6BA,IAAM,cAAiE;CACrE,GAAG;CACH,GAAG;CACH,GAAG;AACL;;AAGA,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EACJ,UACA,WACA,QAAQ,GACR,QAAQ,WACR,MACA,MACA,KACA,aACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,uBAAO,SACP,QAAQ,uBAAO,QAAQ,SACvB,UAAU,aAAa,uBAAO,QAC9B,QAAQ,uBAAO,QAAQ,~~SACvB~~,eAAe,~~eAAe,~~wBAAQ,IAAI,OAAO,~~GACjD~~,SACF;CAEA,MAAM,UAAU,eAAe,KAAK;CAEpC,MAAM,gBAAgB,QAAQ,YAAY,UAAU;CACpD,MAAM,aACJ,kBAAkB,QAAQ,kBAAkB,QAAQ,MAAM;CAE5D,MAAM,eAA6B;EACjC,MAAM;GACJ,eAAe;GACf,WAAW,uBAAO;EACpB;EACA,YAAY,EACV,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,OAAO,EACL,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,QAAQ;GACN,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,MAAM;EACR;EACA,YAAY;GACV,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,MAAM;EACR;EACA,uBAAuB;GACrB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,QAAQ,EACN,QAAQ,KACV;EACF;EACA,WAAW,EACT,MAAM,EACJ,WAAW,uBAAO,KACpB,EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,SAAD;GAAS,WAAW;GAAe,GAAI;GAAW;GAAY;GAA9D,UAAA,CACE,oBAAC,QAAD;IAAM,WAAW,uBAAO;IAAc;GAAe,CAAA,GACrD,oBAAC,QAAD;IAAM,WAAW,uBAAO;IACtB,UAAA,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;IAAW,CAAA;GAC5D,CAAA,CACC;;CACW,CAAA;AAE1B,CAAC"}
1	+ {"version":3,"file":"Heading.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.tsx"],"sourcesContent":["import type { AlphaColor, PropsWithElementType } from \"@/lib/types/props\";\nimport styles from \"./Heading.module.scss\";\nimport { styleClassname } from \"@/lib/scss/selectors\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface HeadingProps\n extends\n Aria.HeadingProps,\n FlowComponentProps,\n PropsWithElementType<\"span\" \| \"p\"> {\n /** The font size of the heading. /\n size?: \"xs\" \| \"s\" \| \"m\" \| \"l\" \| \"xl\" \| \"xxl\";\n /* The color of the heading. @default \"default\" /\n color?: \"default\" \| \"danger\" \| \"unavailable\" \| AlphaColor;\n /* The text-wrap property of the text. @default undefined /\n wrap?: \"wrap\" \| \"balance\";\n}\n\n/\n The font size each heading level renders at — the TypeScript half of the\n * level-based `--font-size` rules in Heading.module.scss. Levels 4 to 6 fall\n * through to the `xs` default.\n /\nconst sizeByLevel: Record<number, NonNullable<HeadingProps[\"size\"]>> = {\n 1: \"xl\",\n 2: \"m\",\n 3: \"s\",\n};\n\n/* @flr-generate all */\nexport const Heading = flowComponent(\"Heading\", (props) => {\n const {\n children,\n className,\n level = 2,\n color = \"default\",\n wrap,\n size,\n ref,\n elementType,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.heading,\n size && styles[`size-${size}`],\n color !== \"default\" && styles[color],\n wrap && styles[`wrap-${wrap}`],\n // The level class carries the font size. Emitted for every heading — not\n // just the `elementType` ones — so the stylesheet can select on the class\n // instead of the h1–h6 element react-aria renders without one.\n styleClassname(styles, `h${level}`),\n className,\n );\n\n const Element = elementType ?? Aria.Heading;\n\n const effectiveSize = size ?? sizeByLevel[level] ?? \"xs\";\n const buttonSize =\n effectiveSize === \"xl\" \|\| effectiveSize === \"xxl\" ? \"m\" : \"s\";\n\n const propsContext: PropsContext = {\n Icon: {\n \"aria-hidden\": true,\n className: styles.icon,\n },\n AlertBadge: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n },\n Badge: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n },\n Button: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n size: buttonSize,\n },\n CopyButton: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n size: buttonSize,\n },\n ContextualHelpTrigger: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n Button: {\n tunnel: null,\n },\n },\n AlertText: {\n Icon: {\n className: styles.icon,\n },\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <Element className={rootClassName} {...rest} ref={ref} level={level}>\n <span className={styles.headingText}>{children}</span>\n <span className={styles.headingContent}>\n <UiComponentTunnelExit id=\"headingContent\" component=\"Heading\" />\n </span>\n </Element>\n </PropsContextProvider>\n );\n});\n\nexport default Heading;\n"],"mappings":";;;;;;;;;;;;;;;;AA6BA,IAAM,cAAiE;CACrE,GAAG;CACH,GAAG;CACH,GAAG;AACL;;AAGA,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EACJ,UACA,WACA,QAAQ,GACR,QAAQ,WACR,MACA,MACA,KACA,aACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,uBAAO,SACP,QAAQ,uBAAO,QAAQ,SACvB,UAAU,aAAa,uBAAO,QAC9B,QAAQ,uBAAO,QAAQ,SAIvB,eAAe,wBAAQ,IAAI,OAAO,GAClC,SACF;CAEA,MAAM,UAAU,eAAe,KAAK;CAEpC,MAAM,gBAAgB,QAAQ,YAAY,UAAU;CACpD,MAAM,aACJ,kBAAkB,QAAQ,kBAAkB,QAAQ,MAAM;CAE5D,MAAM,eAA6B;EACjC,MAAM;GACJ,eAAe;GACf,WAAW,uBAAO;EACpB;EACA,YAAY,EACV,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,OAAO,EACL,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,QAAQ;GACN,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,MAAM;EACR;EACA,YAAY;GACV,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,MAAM;EACR;EACA,uBAAuB;GACrB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,QAAQ,EACN,QAAQ,KACV;EACF;EACA,WAAW,EACT,MAAM,EACJ,WAAW,uBAAO,KACpB,EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,SAAD;GAAS,WAAW;GAAe,GAAI;GAAW;GAAY;GAA9D,UAAA,CACE,oBAAC,QAAD;IAAM,WAAW,uBAAO;IAAc;GAAe,CAAA,GACrD,oBAAC,QAAD;IAAM,WAAW,uBAAO;IACtB,UAAA,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;IAAW,CAAA;GAC5D,CAAA,CACC;;CACW,CAAA;AAE1B,CAAC"}

package/dist/js/packages/components/src/components/Heading/Heading.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Heading.module.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.module.scss"],"sourcesContent":[".heading {\n color: var(--heading--color);\n font-size: var(--font-size);\n font-weight: var(--heading--font-weight);\n text-wrap-style: pretty;\n\n --heading-line-height: calc(var(--font-size) * var(--line-height));\n\n @mixin color($color) {\n &.#{$color} {\n color: var(--heading--color-#{$color});\n }\n }\n\n @include color(\"danger\");\n @include color(\"unavailable\");\n @include color(\"dark\");\n @include color(\"light\");\n @include color(\"dark-static\");\n @include color(\"light-static\");\n\n .headingText {\n .icon {\n height: var(--heading-line-height);\n width: var(--heading-line-height);\n vertical-align: bottom;\n display: inline-block;\n margin-inline-end: var(--heading--icon-to-text-spacing);\n }\n }\n\n .headingContent {\n vertical-align: bottom;\n display: inline-flex;\n margin-inline-start: var(--heading--icon-to-text-spacing);\n min-height: var(--heading-line-height);\n align-items: center;\n gap: var(--heading--icon-to-text-spacing);\n flex-wrap: wrap;\n\n &:empty {\n display: none;\n }\n }\n\n &:where(~~h1),\n &:where(~~.h1) {\n --font-size: var(--font-size-heading--xl);\n }\n\n &:where(~~h2),\n &:where(~~.h2) {\n --font-size: var(--font-size-heading--m);\n }\n\n &:where(~~h3),\n &:where(~~.h3) {\n --font-size: var(--font-size-heading--s);\n }\n\n &:where(~~h4),\n &:where(~~.h4),\n &:where(~~h5),\n &:where(~~.h5),\n &:where(~~h6),\n &:where(~~.h6) {\n --font-size: var(--font-size-heading--xs);\n }\n\n @mixin size($size) {\n &.size-#{$size} {\n --font-size: var(--font-size-heading--#{$size});\n }\n }\n\n @include size(\"xs\");\n @include size(\"s\");\n @include size(\"m\");\n @include size(\"l\");\n @include size(\"xl\");\n @include size(\"xxl\");\n\n &:where(.wrap-wrap) {\n text-wrap: wrap;\n }\n\n &:where(.wrap-balance) {\n text-wrap: balance;\n }\n}\n\n@media (max-width: 768px) {\n .heading {\n &:where(h1),\n &.size-xl {\n --font-size: var(--font-size-heading--l);\n }\n\n &.size-l {\n --font-size: var(--font-size-heading--m);\n }\n\n &:where(h2),\n &.size-m {\n --font-size: var(--font-size-heading--s);\n }\n\n &:where(h3),\n &.size-s {\n --font-size: var(--font-size-heading--xs);\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Heading.module.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.module.scss"],"sourcesContent":[".heading {\n color: var(--heading--color);\n font-size: var(--font-size);\n font-weight: var(--heading--font-weight);\n text-wrap-style: pretty;\n\n --heading-line-height: calc(var(--font-size) * var(--line-height));\n\n @mixin color($color) {\n &.#{$color} {\n color: var(--heading--color-#{$color});\n }\n }\n\n @include color(\"danger\");\n @include color(\"unavailable\");\n @include color(\"dark\");\n @include color(\"light\");\n @include color(\"dark-static\");\n @include color(\"light-static\");\n\n .headingText {\n .icon {\n height: var(--heading-line-height);\n width: var(--heading-line-height);\n vertical-align: bottom;\n display: inline-block;\n margin-inline-end: var(--heading--icon-to-text-spacing);\n }\n }\n\n .headingContent {\n vertical-align: bottom;\n display: inline-flex;\n margin-inline-start: var(--heading--icon-to-text-spacing);\n min-height: var(--heading-line-height);\n align-items: center;\n gap: var(--heading--icon-to-text-spacing);\n flex-wrap: wrap;\n\n &:empty {\n display: none;\n }\n }\n\n &:where(.h1) {\n --font-size: var(--font-size-heading--xl);\n }\n\n &:where(.h2) {\n --font-size: var(--font-size-heading--m);\n }\n\n &:where(.h3) {\n --font-size: var(--font-size-heading--s);\n }\n\n &:where(.h4),\n &:where(.h5),\n &:where(.h6) {\n --font-size: var(--font-size-heading--xs);\n }\n\n @mixin size($size) {\n &.size-#{$size} {\n --font-size: var(--font-size-heading--#{$size});\n }\n }\n\n @include size(\"xs\");\n @include size(\"s\");\n @include size(\"m\");\n @include size(\"l\");\n @include size(\"xl\");\n @include size(\"xxl\");\n\n &:where(.wrap-wrap) {\n text-wrap: wrap;\n }\n\n &:where(.wrap-balance) {\n text-wrap: balance;\n }\n}\n\n@media (max-width: 768px) {\n .heading {\n &:where(.h1),\n &.size-xl {\n --font-size: var(--font-size-heading--l);\n }\n\n &.size-l {\n --font-size: var(--font-size-heading--m);\n }\n\n &:where(.h2),\n &.size-m {\n --font-size: var(--font-size-heading--s);\n }\n\n &:where(.h3),\n &.size-s {\n --font-size: var(--font-size-heading--xs);\n }\n }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Image/Image.mjs CHANGED Viewed

@@ -7,8 +7,8 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/Image/Image.tsx
 /** @flr-generate all */
 var Image = flowComponent("Image", (props) => {
-	const { className, withBorder, style, aspectRatio, width, height, ref, ...rest } = props;
-	const rootClassName = clsx(Image_module_default.image, withBorder && Image_module_default.border, aspectRatio && Image_module_default.aspectRatio, className);
+	const { className, withBorder, withRoundedCorners = true, style, aspectRatio, width, height, ref, ...rest } = props;
+	const rootClassName = clsx(Image_module_default.image, withBorder && Image_module_default.border, withRoundedCorners && Image_module_default.roundedCorners, aspectRatio && Image_module_default.aspectRatio, className);
 	return /* @__PURE__ */ jsx("img", {
 		ref,
 		className: rootClassName,

package/dist/js/packages/components/src/components/Image/Image.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Image.mjs","names":[],"sources":["../../../../../../../src/components/Image/Image.tsx"],"sourcesContent":["import type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { ComponentProps } from \"react\";\nimport styles from \"./Image.module.scss\";\n\nexport interface ImageProps\n extends\n Omit<ComponentProps<\"img\">, \"ref\">,\n FlowComponentProps<HTMLImageElement> {\n /** Display the image with border ~~and~~ rounded ~~edges.~~ /\n ~~withBorder~~?: boolean;\n /\n The aspect ratio of the images container. Larger images will be centered\n * and their overflow will be hidden.\n /\n aspectRatio?: number;\n}\n\n/* @flr-generate all */\nexport const Image = flowComponent(\"Image\", (props) => {\n const {\n className,\n withBorder,\n style,\n aspectRatio,\n width,\n height,\n ref,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.image,\n withBorder && styles.border,\n aspectRatio && styles.aspectRatio,\n className,\n );\n\n return (\n <img\n ref={ref}\n className={rootClassName}\n style={{\n ...style,\n ...(aspectRatio !== undefined && { aspectRatio }),\n ...(width !== undefined && { width }),\n ...(height !== undefined && { height }),\n }}\n {...rest}\n />\n );\n});\n\nexport default Image;\n"],"mappings":";;;;;;;;~~AAoBA~~,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,WACA,YACA,OACA,aACA,OACA,QACA,KACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,qBAAO,OACP,cAAc,qBAAO,QACrB,eAAe,qBAAO,aACtB,SACF;CAEA,OACE,oBAAC,OAAD;EACO;EACL,WAAW;EACX,OAAO;GACL,GAAG;GACH,GAAI,gBAAgB,KAAA,KAAa,EAAE,YAAY;GAC/C,GAAI,UAAU,KAAA,KAAa,EAAE,MAAM;GACnC,GAAI,WAAW,KAAA,KAAa,EAAE,OAAO;EACvC;EACA,GAAI;CACL,CAAA;AAEL,CAAC"}
1	+ {"version":3,"file":"Image.mjs","names":[],"sources":["../../../../../../../src/components/Image/Image.tsx"],"sourcesContent":["import type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { ComponentProps } from \"react\";\nimport styles from \"./Image.module.scss\";\n\nexport interface ImageProps\n extends\n Omit<ComponentProps<\"img\">, \"ref\">,\n FlowComponentProps<HTMLImageElement> {\n /** Display the image with a border. /\n withBorder?: boolean;\n /\n Display the image with rounded corners.\n \n @default true\n /\n withRoundedCorners?: boolean;\n /\n The aspect ratio of the images container. Larger images will be centered\n * and their overflow will be hidden.\n /\n aspectRatio?: number;\n}\n\n/* @flr-generate all */\nexport const Image = flowComponent(\"Image\", (props) => {\n const {\n className,\n withBorder,\n withRoundedCorners = true,\n style,\n aspectRatio,\n width,\n height,\n ref,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.image,\n withBorder && styles.border,\n withRoundedCorners && styles.roundedCorners,\n aspectRatio && styles.aspectRatio,\n className,\n );\n\n return (\n <img\n ref={ref}\n className={rootClassName}\n style={{\n ...style,\n ...(aspectRatio !== undefined && { aspectRatio }),\n ...(width !== undefined && { width }),\n ...(height !== undefined && { height }),\n }}\n {...rest}\n />\n );\n});\n\nexport default Image;\n"],"mappings":";;;;;;;;AA0BA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,WACA,YACA,qBAAqB,MACrB,OACA,aACA,OACA,QACA,KACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,qBAAO,OACP,cAAc,qBAAO,QACrB,sBAAsB,qBAAO,gBAC7B,eAAe,qBAAO,aACtB,SACF;CAEA,OACE,oBAAC,OAAD;EACO;EACL,WAAW;EACX,OAAO;GACL,GAAG;GACH,GAAI,gBAAgB,KAAA,KAAa,EAAE,YAAY;GAC/C,GAAI,UAAU,KAAA,KAAa,EAAE,MAAM;GACnC,GAAI,WAAW,KAAA,KAAa,EAAE,OAAO;EACvC;EACA,GAAI;CACL,CAAA;AAEL,CAAC"}

package/dist/js/packages/components/src/components/Image/Image.module.mjs CHANGED Viewed

@@ -3,13 +3,15 @@
 //#region src/components/Image/Image.module.scss
 var image = "flow--image";
 var border = "flow--image--border";
+var roundedCorners = "flow--image--rounded-corners";
 var aspectRatio = "flow--image--aspect-ratio";
 var Image_module_default = {
 	image,
 	border,
+	roundedCorners,
 	aspectRatio
 };
 //#endregion
-export { aspectRatio, border, Image_module_default as default, image };
+export { aspectRatio, border, Image_module_default as default, image, roundedCorners };
 //# sourceMappingURL=Image.module.mjs.map

package/dist/js/packages/components/src/components/Image/Image.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Image.module.mjs","names":[],"sources":["../../../../../../../src/components/Image/Image.module.scss"],"sourcesContent":[".image {\n max-width: 100%;\n\n &.border {\n border-width: var(--image--border-width);\n border-style: var(--image--border-style);\n border-~~radius~~: var(--image--~~corner~~-~~radius~~);\n border-~~color~~: var(--image--~~border~~-~~color~~);\n overflow: hidden;\n }\n\n &:where(.aspectRatio) {\n overflow-clip-margin: unset;\n object-fit: cover;\n width: fit-content;\n overflow: hidden;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Image.module.mjs","names":[],"sources":["../../../../../../../src/components/Image/Image.module.scss"],"sourcesContent":[".image {\n max-width: 100%;\n\n &.border {\n border-width: var(--image--border-width);\n border-style: var(--image--border-style);\n border-color: var(--image--border-color);\n }\n\n &.roundedCorners {\n border-radius: var(--image--corner-radius);\n overflow: hidden;\n }\n\n &:where(.aspectRatio) {\n overflow-clip-margin: unset;\n object-fit: cover;\n width: fit-content;\n overflow: hidden;\n }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/LayoutCard/LayoutCard.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LayoutCard.module.mjs","names":[],"sources":["../../../../../../../src/components/LayoutCard/LayoutCard.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.layoutCard {\n @include scrollbar.scrollbar;\n\n align-self: normal;\n background-color: var(--layout-card--background-color);\n box-shadow: var(--layout-card--box-shadow);\n border-radius: var(--layout-card--corner-radius);\n padding: var(--layout-card--padding);\n display: flex;\n flex-direction: column;\n min-width: 0;\n border: var(--layout-card--border-width) var(--layout-card--border-style)\n var(--layout-card--border-color);\n\n > .tabNavigation {\n margin-top: calc(var(--layout-card--padding) * -1);\n margin-inline: calc(var(--layout-card--padding) * -1);\n margin-bottom: var(--layout-card--padding);\n border-start-end-radius: calc(var(--layout-card--corner-radius) - 1px);\n border-start-start-radius: calc(var(--layout-card--corner-radius) - 1px);\n\n li:first-child :global(.flow--tab-navigation--link) {\n border-start-start-radius: calc(var(--layout-card--corner-radius) - 1px);\n }\n\n :global(.flow--tab-navigation--more-button) {\n border-start-end-radius: calc(var(--layout-card--corner-radius) - 1px);\n }\n }\n\n &:has(> .accentBox:only-child) {\n padding: 0;\n border: none;\n\n .accentBox {\n padding: var(--layout-card--padding);\n border-radius: calc(var(--layout-card--corner-radius) - 1px);\n flex-grow: 1;\n }\n }\n}\n\n@media (max-width: 768px) {\n .layoutCard {\n padding: var(--layout-card--padding-mobile);\n\n > .tabNavigation {\n margin-top: calc(var(--layout-card--padding-mobile) * -1);\n margin-inline: calc(var(--layout-card--padding-mobile) * -1);\n margin-bottom: var(--layout-card--padding-mobile);\n }\n\n &:has(> .accentBox:only-child) {\n padding: 0;\n\n .accentBox {\n padding: var(--layout-card--padding-mobile);\n }\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"LayoutCard.module.mjs","names":[],"sources":["../../../../../../../src/components/LayoutCard/LayoutCard.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.layoutCard {\n @include scrollbar.scrollbar;\n\n align-self: normal;\n background-color: var(--layout-card--background-color);\n box-shadow: var(--layout-card--box-shadow);\n border-radius: var(--layout-card--corner-radius);\n padding: var(--layout-card--padding);\n display: flex;\n flex-direction: column;\n min-width: 0;\n border: var(--layout-card--border-width) var(--layout-card--border-style)\n var(--layout-card--border-color);\n\n > .tabNavigation {\n margin-top: calc(var(--layout-card--padding) * -1);\n margin-inline: calc(var(--layout-card--padding) * -1);\n margin-bottom: var(--layout-card--padding);\n border-start-end-radius: calc(var(--layout-card--corner-radius) - 1px);\n border-start-start-radius: calc(var(--layout-card--corner-radius) - 1px);\n\n :global(.flow--tab-navigation--item):first-child\n :global(.flow--tab-navigation--link) {\n border-start-start-radius: calc(var(--layout-card--corner-radius) - 1px);\n }\n\n :global(.flow--tab-navigation--more-button) {\n border-start-end-radius: calc(var(--layout-card--corner-radius) - 1px);\n }\n }\n\n &:has(> .accentBox:only-child) {\n padding: 0;\n border: none;\n\n .accentBox {\n padding: var(--layout-card--padding);\n border-radius: calc(var(--layout-card--corner-radius) - 1px);\n flex-grow: 1;\n }\n }\n}\n\n@media (max-width: 768px) {\n .layoutCard {\n padding: var(--layout-card--padding-mobile);\n\n > .tabNavigation {\n margin-top: calc(var(--layout-card--padding-mobile) * -1);\n margin-inline: calc(var(--layout-card--padding-mobile) * -1);\n margin-bottom: var(--layout-card--padding-mobile);\n }\n\n &:has(> .accentBox:only-child) {\n padding: 0;\n\n .accentBox {\n padding: var(--layout-card--padding-mobile);\n }\n }\n }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/LightBox/LightBox.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LightBox.module.mjs","names":[],"sources":["../../../../../../../src/components/LightBox/LightBox.module.scss"],"sourcesContent":[".lightBox {\n > ~~div~~ {\n ~~position:~~ ~~fixed;\n height~~: ~~var~~(--~~visual-~~viewport~~-height~~);\n ~~display:~~ ~~flex;\n flex~~-~~direction:~~ ~~column;\n width:~~ ~~100%;\~~n ~~justify-content:~~ ~~center;\n align~~-~~items:~~ ~~center;\~~n\n > ~~div~~ {\n display: flex;\n justify-content: center;\n width: inherit;\n max-height: var(--visual-viewport-height);\n }\n }\n\n [role=\"dialog\"] {\n outline: none;\n display: flex;\n justify-content: center;\n max-width: var(--light-box--max-width);\n max-height: var(--light-box--max-height);\n }\n\n .content {\n overflow: auto;\n\n > img {\n width: 100%;\n }\n }\n\n &.fitScreen {\n .content {\n > * {\n max-height: var(--light-box--max-height);\n }\n }\n }\n\n .actions,\n .actionGroup {\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n }\n\n .actions {\n row-gap: var(--light-box--spacing);\n padding-inline-start: var(--light-box--spacing);\n }\n\n .gallery {\n width: var(--light-box--max-width);\n }\n\n &:has(.gallery) {\n .actions {\n display: none;\n }\n }\n}\n\n@media (max-width: 768px) {\n .lightBox {\n [role=\"dialog\"] {\n max-width: var(--light-box--max-width-mobile);\n max-height: var(--light-box--max-height-mobile);\n }\n\n &.fitScreen {\n .content {\n > * {\n max-height: var(--light-box--max-height-mobile);\n }\n }\n }\n\n .gallery {\n width: var(--light-box--max-width-mobile);\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"LightBox.module.mjs","names":[],"sources":["../../../../../../../src/components/LightBox/LightBox.module.scss"],"sourcesContent":[".lightBox {\n /* Overlay.module.scss lays the viewport out. /\n > :global(.flow--overlay--viewport) {\n / react-aria's own modal wrapper — no className from Flow, so its\n default `react-aria-Modal` class is the handle. /\n > :global(.react-aria-Modal) {\n display: flex;\n justify-content: center;\n width: inherit;\n max-height: var(--visual-viewport-height);\n }\n }\n\n [role=\"dialog\"] {\n outline: none;\n display: flex;\n justify-content: center;\n max-width: var(--light-box--max-width);\n max-height: var(--light-box--max-height);\n }\n\n .content {\n overflow: auto;\n\n // The image is a consumer child — Flow `Image` or a bare `<img>`.\n // stylelint-disable-next-line selector-max-type -- bare `<img>` has no class\n > img {\n width: 100%;\n }\n }\n\n &.fitScreen {\n .content {\n > {\n max-height: var(--light-box--max-height);\n }\n }\n }\n\n .actions,\n .actionGroup {\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n }\n\n .actions {\n row-gap: var(--light-box--spacing);\n padding-inline-start: var(--light-box--spacing);\n }\n\n .gallery {\n width: var(--light-box--max-width);\n }\n\n &:has(.gallery) {\n .actions {\n display: none;\n }\n }\n}\n\n@media (max-width: 768px) {\n .lightBox {\n [role=\"dialog\"] {\n max-width: var(--light-box--max-width-mobile);\n max-height: var(--light-box--max-height-mobile);\n }\n\n &.fitScreen {\n .content {\n > * {\n max-height: var(--light-box--max-height-mobile);\n }\n }\n }\n\n .gallery {\n width: var(--light-box--max-width-mobile);\n }\n }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/LightBox/components/LightBoxGallery/Controls.mjs CHANGED Viewed

@@ -1,10 +1,10 @@
 "use client"
 /* */
+import { useLocalizedStringFormatter } from "../../../TranslationProvider/useLocalizedStringFormatter.mjs";
 import LightBoxGallery_module_default from "./LightBoxGallery.module.mjs";
 import __locale_default from "../../../../../../../_virtual/_20.locale.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
-import { useLocalizedStringFormatter } from "react-aria";
 //#region src/components/LightBox/components/LightBoxGallery/Controls.tsx
 var Controls = (props) => {
 	const { count, currentIndex } = props;

package/dist/js/packages/components/src/components/LightBox/components/LightBoxGallery/Controls.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Controls.mjs","names":[],"sources":["../../../../../../../../../src/components/LightBox/components/LightBoxGallery/Controls.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"@/components/LightBox/components/LightBoxGallery/LightBoxGallery.module.scss\";\nimport clsx from \"clsx\";\nimport { useLocalizedStringFormatter } from \"~~react-aria~~\";\nimport locales from \"../../locales/*.locale.json\";\n\ninterface Props {\n count: number;\n currentIndex: number;\n}\n\nexport const Controls: FC<Props> = (props) => {\n const { count, currentIndex } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"LightBox\");\n\n const indicators = Array(count)\n .fill(\"\")\n .map((_, index) => (\n <span\n key={index}\n className={clsx(\n styles.indicator,\n currentIndex === index && styles.current,\n )}\n />\n ));\n\n return (\n <div\n className={styles.indicators}\n aria-label={stringFormatter.format(\"indicator\", {\n current: currentIndex + 1,\n count,\n })}\n >\n {indicators}\n </div>\n );\n};\n"],"mappings":";;;;;;;;~~AAWA~~,IAAa,YAAuB,UAAU;CAC5C,MAAM,EAAE,OAAO,iBAAiB;CAEhC,MAAM,kBAAkB,4BAA4B,kBAAS,UAAU;CAEvE,MAAM,aAAa,MAAM,KAAK,CAAC,CAC5B,KAAK,EAAE,CAAC,CACR,KAAK,GAAG,UACP,oBAAC,QAAD,EAEE,WAAW,KACT,+BAAO,WACP,iBAAiB,SAAS,+BAAO,OACnC,EACD,GALM,KAKN,CACF;CAEH,OACE,oBAAC,OAAD;EACE,WAAW,+BAAO;EAClB,cAAY,gBAAgB,OAAO,aAAa;GAC9C,SAAS,eAAe;GACxB;EACF,CAAC;EAEA,UAAA;CACE,CAAA;AAET"}
1	+ {"version":3,"file":"Controls.mjs","names":[],"sources":["../../../../../../../../../src/components/LightBox/components/LightBoxGallery/Controls.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"@/components/LightBox/components/LightBoxGallery/LightBoxGallery.module.scss\";\nimport clsx from \"clsx\";\n/\n Flow's own formatter, not react-aria's: the indicator's message takes\n * variables, and only this one runs them through IntlMessageFormat –\n * react-aria's hands back the raw \"{current} of {count}\".\n /\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../locales/.locale.json\";\n\ninterface Props {\n count: number;\n currentIndex: number;\n}\n\nexport const Controls: FC<Props> = (props) => {\n const { count, currentIndex } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"LightBox\");\n\n const indicators = Array(count)\n .fill(\"\")\n .map((_, index) => (\n <span\n key={index}\n className={clsx(\n styles.indicator,\n currentIndex === index && styles.current,\n )}\n />\n ));\n\n return (\n <div\n className={styles.indicators}\n aria-label={stringFormatter.format(\"indicator\", {\n current: currentIndex + 1,\n count,\n })}\n >\n {indicators}\n </div>\n );\n};\n"],"mappings":";;;;;;;;AAgBA,IAAa,YAAuB,UAAU;CAC5C,MAAM,EAAE,OAAO,iBAAiB;CAEhC,MAAM,kBAAkB,4BAA4B,kBAAS,UAAU;CAEvE,MAAM,aAAa,MAAM,KAAK,CAAC,CAC5B,KAAK,EAAE,CAAC,CACR,KAAK,GAAG,UACP,oBAAC,QAAD,EAEE,WAAW,KACT,+BAAO,WACP,iBAAiB,SAAS,+BAAO,OACnC,EACD,GALM,KAKN,CACF;CAEH,OACE,oBAAC,OAAD;EACE,WAAW,+BAAO;EAClB,cAAY,gBAAgB,OAAO,aAAa;GAC9C,SAAS,eAAe;GACxB;EACF,CAAC;EAEA,UAAA;CACE,CAAA;AAET"}

package/dist/js/packages/components/src/components/List/List.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"List.module.mjs","names":[],"sources":["../../../../../../../src/components/List/List.module.scss"],"sourcesContent":[".list {\n display: flex;\n flex-direction: column;\n row-gap: var(--list--block-to-block-spacing);\n ~~container~~-~~type~~: ~~inline-size~~;\n\n :has(:global(.flow--list--list-summary--top)) {\n :global(.flow--list--items),\n :global(.flow--list--table) {\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n }\n }\n\n :has(:global(.flow--list--list-summary--bottom)) {\n :global(.flow--list--items),\n :global(.flow--list--table) {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n }\n\n .listWrapper {\n display: flex;\n flex-direction: column;\n\n .hideVisuallyEmptyView {\n display: none;\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"List.module.mjs","names":[],"sources":["../../../../../../../src/components/List/List.module.scss"],"sourcesContent":[".list {\n display: flex;\n flex-direction: column;\n row-gap: var(--list--block-to-block-spacing);\n min-width: 0;\n\n :has(:global(.flow--list--list-summary--top)) {\n :global(.flow--list--items),\n :global(.flow--list--table) {\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n }\n }\n\n :has(:global(.flow--list--list-summary--bottom)) {\n :global(.flow--list--items),\n :global(.flow--list--table) {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n }\n\n .listWrapper {\n display: flex;\n flex-direction: column;\n\n .hideVisuallyEmptyView {\n display: none;\n }\n }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/List/components/Header/components/SearchField/SearchField.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchField.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/SearchField/SearchField.module.scss"],"sourcesContent":[".searchField {\n max-width: 500px;\n margin-inline-start: auto;\n flex-grow: 1;\n\n input {\n width: 200px;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"SearchField.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/SearchField/SearchField.module.scss"],"sourcesContent":[".searchField {\n max-width: 500px;\n margin-inline-start: auto;\n flex-grow: 1;\n\n // The list's search field can be swapped out by the consumer's\n // `search.render`, so this has to match whatever input that renders.\n // stylelint-disable-next-line selector-max-type -- replaceable field\n input {\n width: 200px;\n }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/List/components/Items/Items.mjs CHANGED Viewed

@@ -6,9 +6,8 @@ import { useList } from "../../hooks/useList.mjs";
 import { Item } from "./components/Item/Item.mjs";
 import ItemsGridListView from "../../../../views/ItemsGridListView.mjs";
 import { FallbackItems } from "./components/FallbackItems/FallbackItems.mjs";
-import { getLoadMoreThresholdRows, useInfiniteScrollTrigger } from "./hooks/useInfiniteScrollTrigger.mjs";
+import { useInfiniteScrollTrigger } from "../../hooks/useInfiniteScrollTrigger.mjs";
 import clsx from "clsx";
-import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/List/components/Items/Items.tsx
 var Items = () => {
@@ -17,16 +16,14 @@ var Items = () => {
 	const isLoading = list.loader.useIsLoading();
 	const isInitiallyLoading = list.loader.useIsInitiallyLoading();
 	const isLoadingMore = list.loader.useIsLoadingMore();
-	const triggerRef = useRef(null);
-	useInfiniteScrollTrigger(triggerRef);
+	const { triggerRef, triggerIndex } = useInfiniteScrollTrigger();
 	if (!list.itemView) return null;
-	const triggerIndex = Math.max(0, list.items.entries.length - getLoadMoreThresholdRows(list.batches.batchSize));
 	const items = list.items.entries.map((item, index) => /* @__PURE__ */ jsx(Item, {
 		data: item.data,
 		id: item.id,
 		list,
 		isTile: tiles,
-		triggerRef: list.infiniteScroll && index === triggerIndex ? triggerRef : void 0
+		triggerRef: index === triggerIndex ? triggerRef : void 0
 	}, item.id));
 	const rootClassName = clsx(Items_module_default.items, isLoading && !(list.infiniteScroll && isLoadingMore) && Items_module_default.isLoading, tiles && Items_module_default.tiles);
 	const { "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel, ...rest } = list.componentProps;

package/dist/js/packages/components/src/components/List/components/Items/Items.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Items.mjs","names":[],"sources":["../../../../../../../../../src/components/List/components/Items/Items.tsx"],"sourcesContent":["import Item from \"@/components/List/components/Items/components/Item/Item\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport DivView from \"@/views/DivView\";\nimport ItemsGridListView from \"@/views/ItemsGridListView\";\nimport clsx from \"clsx\";\nimport type { FC } from \"react\";\nimport ~~{ useRef } from \"react\";\nimport~~ styles from \"./Items.module.scss\";\nimport { FallbackItems } from \"./components/FallbackItems\";\nimport {~~\n getLoadMoreThresholdRows,\n~~ useInfiniteScrollTrigger~~,\n~~} from \"./hooks/useInfiniteScrollTrigger\";\n\nexport const Items: FC = () => {\n const list = useList();\n const tiles = list.viewMode.isTiles;\n const isLoading = list.loader.useIsLoading();\n const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n const isLoadingMore = list.loader.useIsLoadingMore();\n\n const triggerRef = ~~useRef<HTMLDivElement>(null);\n~~ useInfiniteScrollTrigger(~~triggerRef~~);\n\n if (!list.itemView) {\n return null;\n }\n\n const ~~triggerIndex = Math.max(\n 0,\n list.~~items~~.entries.length~~ ~~-\n getLoadMoreThresholdRows(list.batches.batchSize),\n );\n\n const items~~ = list.items.entries.map((item, index) => (\n <Item\n key={item.id}\n data={item.data}\n id={item.id}\n list={list}\n isTile={tiles}\n triggerRef={~~\n list.infiniteScroll &&~~ index === triggerIndex ? triggerRef : undefined\n }\n />\n ));\n\n const rootClassName = clsx(\n styles.items,\n isLoading && !(list.infiniteScroll && isLoadingMore) && styles.isLoading,\n tiles && styles.tiles,\n );\n\n const {\n \"aria-labelledby\": ariaLabelledby,\n \"aria-label\": ariaLabel,\n ...rest\n } = list.componentProps;\n\n return (\n <DivView aria-hidden={isInitiallyLoading} aria-busy={isLoading}>\n <ItemsGridListView\n className={rootClassName}\n {...rest}\n aria-labelledby={ariaLabel ? undefined : ariaLabelledby}\n aria-label={ariaLabel}\n layout={tiles ? \"grid\" : \"stack\"}\n tileMaxWidth={list.itemView.tileMaxWidth}\n >\n {items.length === 0 && isInitiallyLoading ? <FallbackItems /> : items}\n </ItemsGridListView>\n </DivView>\n );\n};\n\nexport default Items;\n"],"mappings":"~~;;;;;;;;;;;;;AAcA~~,IAAa,cAAkB;CAC7B,MAAM,OAAO,QAAQ;CACrB,MAAM,QAAQ,KAAK,SAAS;CAC5B,MAAM,YAAY,KAAK,OAAO,aAAa;CAC3C,MAAM,qBAAqB,KAAK,OAAO,sBAAsB;CAC7D,MAAM,gBAAgB,KAAK,OAAO,iBAAiB;CAEnD,MAAM,~~aAAa~~,~~OAAuB~~,~~IAAI;CAC9C~~,yBAAyB~~,UAAU~~;~~CAEnC~~,IAAI,CAAC,KAAK,UACR,OAAO;CAGT,MAAM,~~eAAe,KAAK,IACxB,GACA,KAAK,MAAM,~~QAAQ,~~SACjB,yBAAyB,~~KAAK,~~QAAQ,SAAS,CACnD;CAEA,~~MAAM,QAAQ,KAAK,MAAM,~~QAAQ,KAAK,MAAM,~~UAC1C,oBAAC,MAAD;EAEE,MAAM,KAAK;EACX,IAAI,KAAK;EACH;EACN,QAAQ;EACR,~~YACE~~,~~KAAK,kBAAkB,~~UAAU,eAAe,aAAa,KAAA;~~CAEhE~~,~~GARM~~,KAAK,~~EAQX~~,CACF;CAED,MAAM,gBAAgB,KACpB,qBAAO,OACP,aAAa,EAAE,KAAK,kBAAkB,kBAAkB,qBAAO,WAC/D,SAAS,qBAAO,KAClB;CAEA,MAAM,EACJ,mBAAmB,gBACnB,cAAc,WACd,GAAG,SACD,KAAK;CAET,OACE,oBAAC,SAAD;EAAS,eAAa;EAAoB,aAAW;EACnD,UAAA,oBAAC,mBAAD;GACE,WAAW;GACX,GAAI;GACJ,mBAAiB,YAAY,KAAA,IAAY;GACzC,cAAY;GACZ,QAAQ,QAAQ,SAAS;GACzB,cAAc,KAAK,SAAS;GAE3B,UAAA,MAAM,WAAW,KAAK,qBAAqB,oBAAC,eAAD,CAAgB,CAAA,IAAI;EAC/C,CAAA;CACZ,CAAA;AAEb"}
1	+ {"version":3,"file":"Items.mjs","names":[],"sources":["../../../../../../../../../src/components/List/components/Items/Items.tsx"],"sourcesContent":["import Item from \"@/components/List/components/Items/components/Item/Item\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport DivView from \"@/views/DivView\";\nimport ItemsGridListView from \"@/views/ItemsGridListView\";\nimport clsx from \"clsx\";\nimport type { FC } from \"react\";\nimport styles from \"./Items.module.scss\";\nimport { FallbackItems } from \"./components/FallbackItems\";\nimport { useInfiniteScrollTrigger } from \"@/components/List/hooks/useInfiniteScrollTrigger\";\n\nexport const Items: FC = () => {\n const list = useList();\n const tiles = list.viewMode.isTiles;\n const isLoading = list.loader.useIsLoading();\n const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n const isLoadingMore = list.loader.useIsLoadingMore();\n\n const { triggerRef, triggerIndex } = useInfiniteScrollTrigger();\n\n if (!list.itemView) {\n return null;\n }\n\n const items = list.items.entries.map((item, index) => (\n <Item\n key={item.id}\n data={item.data}\n id={item.id}\n list={list}\n isTile={tiles}\n triggerRef={index === triggerIndex ? triggerRef : undefined}\n />\n ));\n\n const rootClassName = clsx(\n styles.items,\n isLoading && !(list.infiniteScroll && isLoadingMore) && styles.isLoading,\n tiles && styles.tiles,\n );\n\n const {\n \"aria-labelledby\": ariaLabelledby,\n \"aria-label\": ariaLabel,\n ...rest\n } = list.componentProps;\n\n return (\n <DivView aria-hidden={isInitiallyLoading} aria-busy={isLoading}>\n <ItemsGridListView\n className={rootClassName}\n {...rest}\n aria-labelledby={ariaLabel ? undefined : ariaLabelledby}\n aria-label={ariaLabel}\n layout={tiles ? \"grid\" : \"stack\"}\n tileMaxWidth={list.itemView.tileMaxWidth}\n >\n {items.length === 0 && isInitiallyLoading ? <FallbackItems /> : items}\n </ItemsGridListView>\n </DivView>\n );\n};\n\nexport default Items;\n"],"mappings":";;;;;;;;;;;;AAUA,IAAa,cAAkB;CAC7B,MAAM,OAAO,QAAQ;CACrB,MAAM,QAAQ,KAAK,SAAS;CAC5B,MAAM,YAAY,KAAK,OAAO,aAAa;CAC3C,MAAM,qBAAqB,KAAK,OAAO,sBAAsB;CAC7D,MAAM,gBAAgB,KAAK,OAAO,iBAAiB;CAEnD,MAAM,EAAE,YAAY,iBAAiB,yBAAyB;CAE9D,IAAI,CAAC,KAAK,UACR,OAAO;CAGT,MAAM,QAAQ,KAAK,MAAM,QAAQ,KAAK,MAAM,UAC1C,oBAAC,MAAD;EAEE,MAAM,KAAK;EACX,IAAI,KAAK;EACH;EACN,QAAQ;EACR,YAAY,UAAU,eAAe,aAAa,KAAA;CACnD,GANM,KAAK,EAMX,CACF;CAED,MAAM,gBAAgB,KACpB,qBAAO,OACP,aAAa,EAAE,KAAK,kBAAkB,kBAAkB,qBAAO,WAC/D,SAAS,qBAAO,KAClB;CAEA,MAAM,EACJ,mBAAmB,gBACnB,cAAc,WACd,GAAG,SACD,KAAK;CAET,OACE,oBAAC,SAAD;EAAS,eAAa;EAAoB,aAAW;EACnD,UAAA,oBAAC,mBAAD;GACE,WAAW;GACX,GAAI;GACJ,mBAAiB,YAAY,KAAA,IAAY;GACzC,cAAY;GACZ,QAAQ,QAAQ,SAAS;GACzB,cAAc,KAAK,SAAS;GAE3B,UAAA,MAAM,WAAW,KAAK,qBAAqB,oBAAC,eAAD,CAAgB,CAAA,IAAI;EAC/C,CAAA;CACZ,CAAA;AAEb"}

package/dist/js/packages/components/src/components/List/components/Items/components/Item/Item.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Item.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/components/Item/Item.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.item {\n position: relative;\n\n /* The link overlay and the interactive content lifted above it (see .link\n below) stack against each other only — never against anything outside the\n item. /\n isolation: isolate;\n cursor: default;\n background-color: var(--list-item--background-color--default);\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n @include focus.focus;\n\n &.item {\n outline-offset: calc(var(--size-px--xs) -1);\n box-shadow: none;\n }\n\n &:where(.isSelected) {\n background-color: var(--list-item--background-color--pressed);\n }\n\n &:not(:last-child) {\n border-bottom: var(--list-item--border-width) var(--list-item--border-style)\n var(--list-item--border-color);\n }\n\n &[data-href] {\n cursor: pointer;\n }\n\n /\n The bottom content carries its own interactive elements, so hovering it\n * must not highlight the whole item. `.bottomContent` is defined here and\n * applied by ListItemViewContent, so the class name stays type-checked\n * instead of naming ListItemView's generated class from the outside.\n /\n &:where(.hasAction):not(:has(.bottomContent:hover)) {\n &:where(:not(.isSelected)) {\n &:hover {\n background-color: var(--list-item--background-color--hover);\n }\n }\n\n &[data-pressed] {\n background-color: var(--list-item--background-color--pressed);\n }\n }\n\n :global(.flow--avatar) {\n transition-property: filter;\n transition-duration: var(--transition--duration--default);\n }\n\n / Elements /\n\n /\n * Covers the whole item so a right-click anywhere on it hits a real link.\n * Interactive content is lifted back above the overlay, so buttons, context\n * menus and checkboxes keep receiving their own clicks.\n /\n .link {\n position: absolute;\n inset: 0;\n z-index: 1;\n }\n\n &:has(.link) {\n :where(\n a,\n button,\n input,\n label,\n select,\n summary,\n textarea,\n [role=\"button\"],\n [role=\"checkbox\"],\n [role=\"link\"],\n [role=\"switch\"],\n [tabindex]\n ):not(.link) {\n position: relative;\n z-index: 2;\n }\n\n /\n * The bottom slot carries arbitrary consumer content (and the accordion's\n * expanded content), so it stays fully clickable and selectable.\n */\n .bottomContent {\n position: relative;\n z-index: 2;\n }\n }\n\n &.tile {\n border: none;\n border-radius: var(--list-item--corner-radius);\n\n &.item {\n outline-offset: var(--size-px--xxs);\n }\n\n &:where(.hasAction) {\n &:not(.isSelected) {\n &:hover {\n :global(.flow--avatar) {\n filter: brightness(var(--image-button--brightness--hover));\n }\n }\n }\n\n &[data-pressed] {\n :global(.flow--avatar) {\n filter: brightness(var(--image-button--brightness--pressed));\n }\n }\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Item.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/components/Item/Item.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.item {\n position: relative;\n\n /* The link overlay and the interactive content lifted above it (see .link\n below) stack against each other only — never against anything outside the\n item. /\n isolation: isolate;\n cursor: default;\n background-color: var(--list-item--background-color--default);\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n @include focus.focus;\n\n &.item {\n outline-offset: calc(var(--size-px--xs) -1);\n box-shadow: none;\n }\n\n &:where(.isSelected) {\n background-color: var(--list-item--background-color--pressed);\n }\n\n &:not(:last-child) {\n border-bottom: var(--list-item--border-width) var(--list-item--border-style)\n var(--list-item--border-color);\n }\n\n &[data-href] {\n cursor: pointer;\n }\n\n /\n The bottom content carries its own interactive elements, so hovering it\n * must not highlight the whole item. `.bottomContent` is defined here and\n * applied by ListItemViewContent, so the class name stays type-checked\n * instead of naming ListItemView's generated class from the outside.\n /\n &:where(.hasAction):not(:has(.bottomContent:hover)) {\n &:where(:not(.isSelected)) {\n &:hover {\n background-color: var(--list-item--background-color--hover);\n }\n }\n\n &[data-pressed] {\n background-color: var(--list-item--background-color--pressed);\n }\n }\n\n :global(.flow--avatar) {\n transition-property: filter;\n transition-duration: var(--transition--duration--default);\n }\n\n / Elements /\n\n /\n * Covers the whole item so a right-click anywhere on it hits a real link.\n * Interactive content is lifted back above the overlay, so buttons, context\n * menus and checkboxes keep receiving their own clicks.\n /\n .link {\n position: absolute;\n inset: 0;\n z-index: 1;\n }\n\n &:has(.link) {\n // Matches interactive markup the item does not author: consumer children\n // and react-aria internals, none of which carry a class.\n // stylelint-disable-next-line selector-max-type -- foreign interactive markup\n :where(\n a,\n button,\n input,\n label,\n select,\n summary,\n textarea,\n [role=\"button\"],\n [role=\"checkbox\"],\n [role=\"link\"],\n [role=\"switch\"],\n [tabindex]\n ):not(.link) {\n position: relative;\n z-index: 2;\n }\n\n /\n * The bottom slot carries arbitrary consumer content (and the accordion's\n * expanded content), so it stays fully clickable and selectable.\n */\n .bottomContent {\n position: relative;\n z-index: 2;\n }\n }\n\n &.tile {\n border: none;\n border-radius: var(--list-item--corner-radius);\n\n &.item {\n outline-offset: var(--size-px--xxs);\n }\n\n &:where(.hasAction) {\n &:not(.isSelected) {\n &:hover {\n :global(.flow--avatar) {\n filter: brightness(var(--image-button--brightness--hover));\n }\n }\n }\n\n &[data-pressed] {\n :global(.flow--avatar) {\n filter: brightness(var(--image-button--brightness--pressed));\n }\n }\n }\n }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/List/components/ListItemView/ListItemView.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItemView.module.mjs","names":[],"sources":["../../../../../../../../../src/components/List/components/ListItemView/ListItemView.module.scss"],"sourcesContent":["~~@use \"@/styles/mixins/containerBreakpointSizes\";\n\n~~.view {\n display: flex;\n flex-direction: column;\n\n .checkboxContainer {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n\n &:empty {\n display: none;\n }\n }\n\n .content {\n min-width: 0;\n display: flex;\n gap: var(--list-item--spacing);\n flex-grow: 1;\n flex-wrap: wrap;\n }\n\n .topContent {\n overflow-wrap: anywhere;\n display: flex;\n }\n\n .bottomContent {\n width: 100%;\n overflow-wrap: anywhere;\n display: flex;\n flex-direction: column;\n }\n\n .heading {\n color: var(--text--color--default);\n overflow-wrap: anywhere;\n }\n\n .header {\n overflow-wrap: anywhere;\n display: flex;\n gap: var(--list-item--avatar-to-title-spacing);\n max-width: 100%;\n }\n\n .subTitle {\n font-size: var(--list-item--subtitle-font-size);\n\n .text:not(:last-child)::after {\n content: \"–\";\n display: inline-block;\n margin: 0 var(--size-rem--s);\n }\n }\n\n .badge {\n max-width: 100%;\n }\n\n &.listView {\n padding: var(--list-item--padding);\n gap: var(--list-item--spacing);\n\n .columnLayout {\n flex-grow: 1;\n\n > ~~div~~ {\n flex-grow: 1;\n align-items: center;\n }\n }\n\n .contentWrapper {\n display: flex;\n gap: var(--list-item--spacing);\n justify-content: space-between;\n flex-grow: 1;\n align-items: flex-start;\n }\n\n .content {\n align-items: center;\n align-self: center;\n max-width: 100%;\n }\n\n .title {\n max-width: 100%;\n min-width: 0;\n }\n\n .action {\n margin-inline-start: auto;\n\n button {\n margin-inline-end: 0;\n }\n }\n\n .header {\n order: 0;\n flex-grow: 1;\n align-items: center;\n\n &:empty,\n .subTitle:empty {\n display: none;\n }\n\n .avatar,\n .checkboxContainer {\n align-self: start;\n }\n\n .checkboxContainer {\n height: var(--avatar--size--m);\n }\n }\n\n &:has(.subTitle:not(:empty)) {\n .action,\n .avatar,\n .checkboxContainer {\n margin-top: var(--size-px--xxs);\n }\n }\n\n .topContent {\n order: 1;\n }\n\n :global(.flow--heading--heading-content) {\n max-width: 100%;\n }\n }\n\n &.tileView {\n gap: var(--list-item--padding);\n border-color: var(--list-item--border-color);\n border-width: var(--list-item--border-width);\n border-style: var(--list-item--border-style);\n border-radius: var(--list-item--corner-radius);\n align-content: flex-start;\n height: 100%;\n position: relative;\n overflow: hidden;\n\n .content {\n flex-direction: column;\n justify-content: flex-start;\n align-items: flex-start;\n padding-inline: var(--list-item--padding);\n padding-bottom: var(--list-item--padding);\n width: 100%;\n }\n\n .avatarContainer {\n width: 100%;\n border-bottom: var(--list-item--border-width)\n var(--list-item--border-style) var(--list-item--border-color);\n aspect-ratio: 16 / 9;\n\n img {\n overflow-clip-margin: unset;\n aspect-ratio: 16 / 9;\n }\n }\n\n .avatar {\n width: 100%;\n height: 100%;\n border-radius: 0;\n\n :global(.flow--avatar--icon) {\n width: var(--size-px--xxl);\n height: var(--size-px--xxl);\n }\n\n :global(.flow--avatar--initials) {\n font-size: var(--size-px--xxl);\n }\n }\n\n .checkboxContainer {\n position: absolute;\n top: var(--list-item--padding);\n inset-inline-start: var(--list-item--padding);\n background-color: var(--list-item--checkbox-background-color);\n border-radius: var(--list-item--checkbox-corner-radius);\n\n :global(.flow--checkbox .flow--checkbox--icon) {\n color: var(--list-item--checkbox-color);\n padding: var(--size-px--xxxs);\n }\n }\n\n .title {\n width: 100%;\n min-width: 0;\n\n :global(.flow--heading--heading-content) {\n position: absolute;\n top: var(--list-item--padding);\n inset-inline: var(--list-item--padding);\n justify-content: end;\n }\n }\n\n &:has(.checkboxContainer:not(:empty)) {\n :global(.flow--heading--heading-content) {\n inset-inline-start: calc(var(--list-item--padding) * 2 + var(--icon--size--m));\n }\n }\n\n .topContent,\n .header {\n width: 100%;\n }\n\n .action {\n align-self: start;\n }\n\n .bottomContent {\n margin-top: auto;\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"ListItemView.module.mjs","names":[],"sources":["../../../../../../../../../src/components/List/components/ListItemView/ListItemView.module.scss"],"sourcesContent":[".view {\n display: flex;\n flex-direction: column;\n\n .checkboxContainer {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n\n &:empty {\n display: none;\n }\n }\n\n .content {\n min-width: 0;\n display: flex;\n gap: var(--list-item--spacing);\n flex-grow: 1;\n flex-wrap: wrap;\n }\n\n .topContent {\n overflow-wrap: anywhere;\n display: flex;\n }\n\n .bottomContent {\n width: 100%;\n overflow-wrap: anywhere;\n display: flex;\n flex-direction: column;\n }\n\n .heading {\n color: var(--text--color--default);\n overflow-wrap: anywhere;\n }\n\n .header {\n overflow-wrap: anywhere;\n display: flex;\n gap: var(--list-item--avatar-to-title-spacing);\n max-width: 100%;\n }\n\n .subTitle {\n font-size: var(--list-item--subtitle-font-size);\n\n .text:not(:last-child)::after {\n content: \"–\";\n display: inline-block;\n margin: 0 var(--size-rem--s);\n }\n }\n\n .badge {\n max-width: 100%;\n }\n\n &.listView {\n padding: var(--list-item--padding);\n gap: var(--list-item--spacing);\n\n .columnLayout {\n flex-grow: 1;\n\n > :global(.flow--column-layout) {\n flex-grow: 1;\n align-items: center;\n }\n }\n\n .contentWrapper {\n display: flex;\n gap: var(--list-item--spacing);\n justify-content: space-between;\n flex-grow: 1;\n align-items: flex-start;\n }\n\n .content {\n align-items: center;\n align-self: center;\n max-width: 100%;\n }\n\n .title {\n max-width: 100%;\n min-width: 0;\n }\n\n .action {\n margin-inline-start: auto;\n\n :global(.flow--button) {\n margin-inline-end: 0;\n }\n }\n\n .header {\n order: 0;\n flex-grow: 1;\n align-items: center;\n\n &:empty,\n .subTitle:empty {\n display: none;\n }\n\n .avatar,\n .checkboxContainer {\n align-self: start;\n }\n\n .checkboxContainer {\n height: var(--avatar--size--m);\n }\n }\n\n &:has(.subTitle:not(:empty)) {\n .action,\n .avatar,\n .checkboxContainer {\n margin-top: var(--size-px--xxs);\n }\n }\n\n .topContent {\n order: 1;\n }\n\n :global(.flow--heading--heading-content) {\n max-width: 100%;\n }\n }\n\n &.tileView {\n gap: var(--list-item--padding);\n border-color: var(--list-item--border-color);\n border-width: var(--list-item--border-width);\n border-style: var(--list-item--border-style);\n border-radius: var(--list-item--corner-radius);\n align-content: flex-start;\n height: 100%;\n position: relative;\n overflow: hidden;\n\n .content {\n flex-direction: column;\n justify-content: flex-start;\n align-items: flex-start;\n padding-inline: var(--list-item--padding);\n padding-bottom: var(--list-item--padding);\n width: 100%;\n }\n\n .avatarContainer {\n width: 100%;\n border-bottom: var(--list-item--border-width)\n var(--list-item--border-style) var(--list-item--border-color);\n aspect-ratio: 16 / 9;\n\n // A consumer child inside `Avatar` — Flow `Image` or a bare `<img>`.\n // stylelint-disable-next-line selector-max-type -- bare `<img>` has no class\n img {\n overflow-clip-margin: unset;\n aspect-ratio: 16 / 9;\n }\n }\n\n .avatar {\n width: 100%;\n height: 100%;\n border-radius: 0;\n\n :global(.flow--avatar--icon) {\n width: var(--size-px--xxl);\n height: var(--size-px--xxl);\n }\n\n :global(.flow--avatar--initials) {\n font-size: var(--size-px--xxl);\n }\n }\n\n .checkboxContainer {\n position: absolute;\n top: var(--list-item--padding);\n inset-inline-start: var(--list-item--padding);\n background-color: var(--list-item--checkbox-background-color);\n border-radius: var(--list-item--checkbox-corner-radius);\n\n :global(.flow--checkbox .flow--checkbox--icon) {\n color: var(--list-item--checkbox-color);\n padding: var(--size-px--xxxs);\n }\n }\n\n .title {\n width: 100%;\n min-width: 0;\n\n :global(.flow--heading--heading-content) {\n position: absolute;\n top: var(--list-item--padding);\n inset-inline: var(--list-item--padding);\n justify-content: end;\n }\n }\n\n &:has(.checkboxContainer:not(:empty)) {\n :global(.flow--heading--heading-content) {\n inset-inline-start: calc(var(--list-item--padding) * 2 + var(--icon--size--m));\n }\n }\n\n .topContent,\n .header {\n width: 100%;\n }\n\n .action {\n align-self: start;\n }\n\n .bottomContent {\n margin-top: auto;\n }\n }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/List/components/Table/Table.mjs CHANGED Viewed

@@ -1,6 +1,7 @@
 "use client"
 /* */
 import { useList } from "../../hooks/useList.mjs";
+import { useInfiniteScrollTrigger } from "../../hooks/useInfiniteScrollTrigger.mjs";
 import Table_module_default from "./Table.module.mjs";
 import TableView from "../../../../views/TableView.mjs";
 import TableHeaderView from "../../../../views/TableHeaderView.mjs";
@@ -18,14 +19,17 @@ var Table = () => {
 	const listIsEmpty = list.useIsEmpty();
 	const isLoading = list.loader.useIsLoading();
 	const isInitiallyLoading = list.loader.useIsInitiallyLoading();
+	const isLoadingMore = list.loader.useIsLoadingMore();
+	const { triggerRef, triggerIndex } = useInfiniteScrollTrigger();
 	if (!table || listIsEmpty) return null;
 	const rowAction = table.list.onAction;
-	const tableClassName = clsx(Table_module_default.table, isLoading && Table_module_default.isLoading, table.componentProps.className);
-	const rows = list.items.entries.map((item) => /* @__PURE__ */ jsx(TableRowView, {
+	const tableClassName = clsx(Table_module_default.table, isLoading && !(list.infiniteScroll && isLoadingMore) && Table_module_default.isLoading, table.componentProps.className);
+	const rows = list.items.entries.map((item, index) => /* @__PURE__ */ jsx(TableRowView, {
 		className: clsx(Table_module_default.row, rowAction && Table_module_default.hasAction, table.body.row.componentProps.className),
 		id: item.id,
 		onAction: rowAction ? () => rowAction(item.data) : void 0,
 		...table.body.row.componentProps,
+		...index === triggerIndex ? { ref: triggerRef } : {},
 		children: table.body.row?.cells.map((cell, i) => /* @__PURE__ */ jsx(TableCellView, {
 			...cell.componentProps,
 			children: cell.renderFn ? cell.renderFn(item.data, list) : void 0

package/dist/js/packages/components/src/components/List/components/Table/Table.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.mjs","names":[],"sources":["../../../../../../../../../src/components/List/components/Table/Table.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useList } from \"@/components/List\";\nimport styles from \"./Table.module.scss\";\nimport clsx from \"clsx\";\nimport TableView from \"@/views/TableView\";\nimport TableHeaderView from \"@/views/TableHeaderView\";\nimport TableBodyView from \"@/views/TableBodyView\";\nimport TableRowView from \"@/views/TableRowView\";\nimport TableCellView from \"@/views/TableCellView\";\nimport TableColumnView from \"@/views/TableColumnView\";\nimport { TableBodyLoadingView } from \"@/components/List/components/Table/components/TableBodyLoadingView\";\n\nexport const Table: FC = () => {\n const list = useList();\n const table = list.table;\n const listIsEmpty = list.useIsEmpty();\n\n const isLoading = list.loader.useIsLoading();\n const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n\n if (!table \|\| listIsEmpty) {\n return null;\n }\n\n const rowAction = table.list.onAction;\n\n const tableClassName = clsx(\n styles.table,\n isLoading && styles.isLoading,\n table.componentProps.className,\n );\n\n const rows = list.items.entries.map((item) => (\n <TableRowView\n className={clsx(\n styles.row,\n rowAction && styles.hasAction,\n table.body.row.componentProps.className,\n )}\n key={item.id}\n id={item.id}\n onAction={rowAction ? () => rowAction(item.data) : undefined}\n {...table.body.row.componentProps}\n >\n {table.body.row?.cells.map((cell, i) => (\n <TableCellView key={i} {...cell.componentProps}>\n {cell.renderFn ? cell.renderFn(item.data, list) : undefined}\n </TableCellView>\n ))}\n </TableRowView>\n ));\n\n return (\n <TableView\n {...list.componentProps}\n {...table.componentProps}\n className={tableClassName}\n aria-hidden={isInitiallyLoading}\n aria-busy={isLoading}\n >\n <TableHeaderView {...table.header.componentProps}>\n {table.header.columns.map((col, i) => (\n <TableColumnView key={i} {...col.componentProps} />\n ))}\n </TableHeaderView>\n <TableBodyView {...table.body.componentProps}>\n {isInitiallyLoading ? <TableBodyLoadingView /> : rows}\n </TableBodyView>\n </TableView>\n );\n};\n"],"mappings":"~~;;;;;;;;;;;;;;AAYA~~,IAAa,cAAkB;CAC7B,MAAM,OAAO,QAAQ;CACrB,MAAM,QAAQ,KAAK;CACnB,MAAM,cAAc,KAAK,WAAW;CAEpC,MAAM,YAAY,KAAK,OAAO,aAAa;CAC3C,MAAM,qBAAqB,KAAK,OAAO,sBAAsB;~~CAE7D~~,IAAI,CAAC,SAAS,aACZ,OAAO;CAGT,MAAM,YAAY,MAAM,KAAK;CAE7B,MAAM,iBAAiB,KACrB,qBAAO,OACP,aAAa,qBAAO,~~WACpB~~,MAAM,eAAe,SACvB;CAEA,MAAM,OAAO,KAAK,MAAM,QAAQ,KAAK,~~SACnC~~,oBAAC,cAAD;EACE,WAAW,KACT,qBAAO,KACP,aAAa,qBAAO,WACpB,MAAM,KAAK,IAAI,eAAe,SAChC;EAEA,IAAI,KAAK;EACT,UAAU,kBAAkB,UAAU,KAAK,IAAI,IAAI,KAAA;EACnD,GAAI,MAAM,KAAK,IAAI;~~EAElB~~,UAAA,MAAM,KAAK,KAAK,MAAM,KAAK,MAAM,MAChC,oBAAC,eAAD;GAAuB,GAAI,KAAK;GAC7B,UAAA,KAAK,WAAW,KAAK,SAAS,KAAK,MAAM,IAAI,IAAI,KAAA;EACrC,GAFK,CAEL,CAChB;CACW,~~GAVP~~,KAAK,~~EAUE~~,CACf;CAED,OACE,qBAAC,WAAD;EACE,GAAI,KAAK;EACT,GAAI,MAAM;EACV,WAAW;EACX,eAAa;EACb,aAAW;EALb,UAAA,CAOE,oBAAC,iBAAD;GAAiB,GAAI,MAAM,OAAO;GAC/B,UAAA,MAAM,OAAO,QAAQ,KAAK,KAAK,MAC9B,oBAAC,iBAAD,EAAyB,GAAI,IAAI,eAAiB,GAA5B,CAA4B,CACnD;EACc,CAAA,GACjB,oBAAC,eAAD;GAAe,GAAI,MAAM,KAAK;GAC3B,UAAA,qBAAqB,oBAAC,sBAAD,CAAuB,CAAA,IAAI;EACpC,CAAA,CACN;;AAEf"}
1	+ {"version":3,"file":"Table.mjs","names":[],"sources":["../../../../../../../../../src/components/List/components/Table/Table.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useList } from \"@/components/List\";\nimport styles from \"./Table.module.scss\";\nimport clsx from \"clsx\";\nimport TableView from \"@/views/TableView\";\nimport TableHeaderView from \"@/views/TableHeaderView\";\nimport TableBodyView from \"@/views/TableBodyView\";\nimport TableRowView from \"@/views/TableRowView\";\nimport TableCellView from \"@/views/TableCellView\";\nimport TableColumnView from \"@/views/TableColumnView\";\nimport { TableBodyLoadingView } from \"@/components/List/components/Table/components/TableBodyLoadingView\";\nimport { useInfiniteScrollTrigger } from \"@/components/List/hooks/useInfiniteScrollTrigger\";\n\nexport const Table: FC = () => {\n const list = useList();\n const table = list.table;\n const listIsEmpty = list.useIsEmpty();\n\n const isLoading = list.loader.useIsLoading();\n const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n const isLoadingMore = list.loader.useIsLoadingMore();\n\n const { triggerRef, triggerIndex } = useInfiniteScrollTrigger();\n\n if (!table \|\| listIsEmpty) {\n return null;\n }\n\n const rowAction = table.list.onAction;\n\n const tableClassName = clsx(\n styles.table,\n isLoading && !(list.infiniteScroll && isLoadingMore) && styles.isLoading,\n table.componentProps.className,\n );\n\n const rows = list.items.entries.map((item, index) => (\n <TableRowView\n className={clsx(\n styles.row,\n rowAction && styles.hasAction,\n table.body.row.componentProps.className,\n )}\n key={item.id}\n id={item.id}\n onAction={rowAction ? () => rowAction(item.data) : undefined}\n {...table.body.row.componentProps}\n {...(index === triggerIndex ? { ref: triggerRef } : {})}\n >\n {table.body.row?.cells.map((cell, i) => (\n <TableCellView key={i} {...cell.componentProps}>\n {cell.renderFn ? cell.renderFn(item.data, list) : undefined}\n </TableCellView>\n ))}\n </TableRowView>\n ));\n\n return (\n <TableView\n {...list.componentProps}\n {...table.componentProps}\n className={tableClassName}\n aria-hidden={isInitiallyLoading}\n aria-busy={isLoading}\n >\n <TableHeaderView {...table.header.componentProps}>\n {table.header.columns.map((col, i) => (\n <TableColumnView key={i} {...col.componentProps} />\n ))}\n </TableHeaderView>\n <TableBodyView {...table.body.componentProps}>\n {isInitiallyLoading ? <TableBodyLoadingView /> : rows}\n </TableBodyView>\n </TableView>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAaA,IAAa,cAAkB;CAC7B,MAAM,OAAO,QAAQ;CACrB,MAAM,QAAQ,KAAK;CACnB,MAAM,cAAc,KAAK,WAAW;CAEpC,MAAM,YAAY,KAAK,OAAO,aAAa;CAC3C,MAAM,qBAAqB,KAAK,OAAO,sBAAsB;CAC7D,MAAM,gBAAgB,KAAK,OAAO,iBAAiB;CAEnD,MAAM,EAAE,YAAY,iBAAiB,yBAAyB;CAE9D,IAAI,CAAC,SAAS,aACZ,OAAO;CAGT,MAAM,YAAY,MAAM,KAAK;CAE7B,MAAM,iBAAiB,KACrB,qBAAO,OACP,aAAa,EAAE,KAAK,kBAAkB,kBAAkB,qBAAO,WAC/D,MAAM,eAAe,SACvB;CAEA,MAAM,OAAO,KAAK,MAAM,QAAQ,KAAK,MAAM,UACzC,oBAAC,cAAD;EACE,WAAW,KACT,qBAAO,KACP,aAAa,qBAAO,WACpB,MAAM,KAAK,IAAI,eAAe,SAChC;EAEA,IAAI,KAAK;EACT,UAAU,kBAAkB,UAAU,KAAK,IAAI,IAAI,KAAA;EACnD,GAAI,MAAM,KAAK,IAAI;EACnB,GAAK,UAAU,eAAe,EAAE,KAAK,WAAW,IAAI,CAAC;EAEpD,UAAA,MAAM,KAAK,KAAK,MAAM,KAAK,MAAM,MAChC,oBAAC,eAAD;GAAuB,GAAI,KAAK;GAC7B,UAAA,KAAK,WAAW,KAAK,SAAS,KAAK,MAAM,IAAI,IAAI,KAAA;EACrC,GAFK,CAEL,CAChB;CACW,GAXP,KAAK,EAWE,CACf;CAED,OACE,qBAAC,WAAD;EACE,GAAI,KAAK;EACT,GAAI,MAAM;EACV,WAAW;EACX,eAAa;EACb,aAAW;EALb,UAAA,CAOE,oBAAC,iBAAD;GAAiB,GAAI,MAAM,OAAO;GAC/B,UAAA,MAAM,OAAO,QAAQ,KAAK,KAAK,MAC9B,oBAAC,iBAAD,EAAyB,GAAI,IAAI,eAAiB,GAA5B,CAA4B,CACnD;EACc,CAAA,GACjB,oBAAC,eAAD;GAAe,GAAI,MAAM,KAAK;GAC3B,UAAA,qBAAqB,oBAAC,sBAAD,CAAuB,CAAA,IAAI;EACpC,CAAA,CACN;;AAEf"}

package/dist/js/packages/components/src/components/List/{components/Items/hooks → hooks}/useInfiniteScrollTrigger.mjs RENAMED Viewed

@@ -1,34 +1,33 @@
 "use client"
 /* */
-import { useList } from "../../../hooks/useList.mjs";
-import { useEffect, useEffectEvent } from "react";
-//#region src/components/List/components/Items/hooks/useInfiniteScrollTrigger.ts
+import { useList } from "./useList.mjs";
+import { useEffect, useEffectEvent, useState } from "react";
+//#region src/components/List/hooks/useInfiniteScrollTrigger.ts
 var loadMoreThresholdFactor = .2;
 var minLoadMoreThresholdRows = 1;
 var maxLoadMoreThresholdRows = 8;
 var getLoadMoreThresholdRows = (batchSize) => Math.min(maxLoadMoreThresholdRows, Math.max(minLoadMoreThresholdRows, Math.round(batchSize * loadMoreThresholdFactor)));
-var useInfiniteScrollTrigger = (triggerRef) => {
+var useInfiniteScrollTrigger = () => {
 	const list = useList();
 	const isLoading = list.loader.useIsLoading();
-	const visibleItemsCount = list.batches.getVisibleItemsCount();
+	const [trigger, setTrigger] = useState(null);
 	const loadNextBatch = useEffectEvent(() => {
 		if (list.batches.hasNextBatch() && !isLoading) list.batches.nextBatch();
 	});
 	useEffect(() => {
-		const trigger = triggerRef.current;
 		if (!trigger) return;
 		const observer = new IntersectionObserver((entries) => {
 			if (entries.some((entry) => entry.isIntersecting)) loadNextBatch();
 		});
 		observer.observe(trigger);
 		return () => observer.disconnect();
-	}, [
-		loadNextBatch,
-		triggerRef,
-		visibleItemsCount
-	]);
+	}, [trigger]);
+	return {
+		triggerRef: setTrigger,
+		triggerIndex: list.infiniteScroll ? Math.max(0, list.items.entries.length - getLoadMoreThresholdRows(list.batches.batchSize)) : void 0
+	};
 };
 //#endregion
-export { getLoadMoreThresholdRows, useInfiniteScrollTrigger };
+export { useInfiniteScrollTrigger };
 //# sourceMappingURL=useInfiniteScrollTrigger.mjs.map

package/dist/js/packages/components/src/components/List/hooks/useInfiniteScrollTrigger.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useInfiniteScrollTrigger.mjs","names":[],"sources":["../../../../../../../../src/components/List/hooks/useInfiniteScrollTrigger.ts"],"sourcesContent":["import { useEffect, useEffectEvent, useState, type RefCallback } from \"react\";\nimport { useList } from \"./useList\";\n\nconst loadMoreThresholdFactor = 0.2;\nconst minLoadMoreThresholdRows = 1;\nconst maxLoadMoreThresholdRows = 8;\n\nconst getLoadMoreThresholdRows = (batchSize: number): number =>\n Math.min(\n maxLoadMoreThresholdRows,\n Math.max(\n minLoadMoreThresholdRows,\n Math.round(batchSize * loadMoreThresholdFactor),\n ),\n );\n\ninterface InfiniteScrollTrigger {\n /**\n * Attach to whatever the view renders for `triggerIndex`. A callback ref, so\n * the observer follows the trigger as it moves on with every loaded batch — a\n * ref object would leave the effect without a signal that the element it\n * observes has been replaced.\n */\n triggerRef: RefCallback<HTMLElement>;\n /**\n * Index of the item that loads the next batch once it scrolls into view, or\n * `undefined` while infinite scrolling is off.\n */\n triggerIndex: number | undefined;\n}\n\nexport const useInfiniteScrollTrigger = (): InfiniteScrollTrigger => {\n const list = useList();\n const isLoading = list.loader.useIsLoading();\n const [trigger, setTrigger] = useState<HTMLElement | null>(null);\n\n const loadNextBatch = useEffectEvent(() => {\n if (list.batches.hasNextBatch() && !isLoading) {\n list.batches.nextBatch();\n }\n });\n\n useEffect(() => {\n if (!trigger) {\n return;\n }\n\n const observer = new IntersectionObserver((entries) => {\n if (entries.some((entry) => entry.isIntersecting)) {\n loadNextBatch();\n }\n });\n observer.observe(trigger);\n\n return () => observer.disconnect();\n }, [trigger]);\n\n return {\n triggerRef: setTrigger,\n triggerIndex: list.infiniteScroll\n ? Math.max(\n 0,\n list.items.entries.length -\n getLoadMoreThresholdRows(list.batches.batchSize),\n )\n : undefined,\n };\n};\n"],"mappings":";;;;;AAGA,IAAM,0BAA0B;AAChC,IAAM,2BAA2B;AACjC,IAAM,2BAA2B;AAEjC,IAAM,4BAA4B,cAChC,KAAK,IACH,0BACA,KAAK,IACH,0BACA,KAAK,MAAM,YAAY,uBAAuB,CAChD,CACF;AAiBF,IAAa,iCAAwD;CACnE,MAAM,OAAO,QAAQ;CACrB,MAAM,YAAY,KAAK,OAAO,aAAa;CAC3C,MAAM,CAAC,SAAS,cAAc,SAA6B,IAAI;CAE/D,MAAM,gBAAgB,qBAAqB;EACzC,IAAI,KAAK,QAAQ,aAAa,KAAK,CAAC,WAClC,KAAK,QAAQ,UAAU;CAE3B,CAAC;CAED,gBAAgB;EACd,IAAI,CAAC,SACH;EAGF,MAAM,WAAW,IAAI,sBAAsB,YAAY;GACrD,IAAI,QAAQ,MAAM,UAAU,MAAM,cAAc,GAC9C,cAAc;EAElB,CAAC;EACD,SAAS,QAAQ,OAAO;EAExB,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,OAAO,CAAC;CAEZ,OAAO;EACL,YAAY;EACZ,cAAc,KAAK,iBACf,KAAK,IACH,GACA,KAAK,MAAM,QAAQ,SACjB,yBAAyB,KAAK,QAAQ,SAAS,CACnD,IACA,KAAA;CACN;AACF"}

package/dist/js/packages/components/src/components/Markdown/Markdown.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Markdown.module.mjs","names":[],"sources":["../../../../../../../src/components/Markdown/Markdown.module.scss"],"sourcesContent":[".markdown {\n display: flex;\n flex-direction: column;\n row-gap: var(--markdown--spacing);\n min-width: 0;\n\n p {\n white-space: break-spaces;\n }\n\n table {\n border-radius: var(--table--corner-radius);\n overflow: hidden;\n border-width: var(--table--border-width);\n border-style: var(--table--border-style);\n border-color: var(--table--border-color);\n border-spacing: 0;\n background-color: var(--table--background-color);\n\n thead {\n font-weight: var(--table--header-font-weight);\n }\n\n th,\n td {\n padding-inline: var(--table--padding-x);\n padding-block: var(--table--padding-y);\n text-align: start;\n border-style: var(--table--border-style);\n border-color: var(--table--border-color);\n border-width: 0;\n }\n\n th {\n border-block-end-width: var(--table--header-border-width);\n }\n\n tbody tr {\n &:nth-of-type(odd) td {\n background-color: var(--table--background-color-accent);\n }\n\n &:not(:last-child) td {\n border-block-end-width: var(--table--border-width);\n }\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Markdown.module.mjs","names":[],"sources":["../../../../../../../src/components/Markdown/Markdown.module.scss"],"sourcesContent":[".markdown {\n display: flex;\n flex-direction: column;\n row-gap: var(--markdown--spacing);\n min-width: 0;\n\n /* Everything below styles react-markdown's output. Consumers can replace any\n renderer through the `components` prop, so these rules have to match the\n element, not a Flow class that a replacement would not carry. */\n // stylelint-disable-next-line selector-max-type -- react-markdown output\n p {\n white-space: break-spaces;\n }\n\n // remark-gfm renders the table markup itself — Markdown overrides no table\n // renderer, so none of these elements carries a class.\n // stylelint-disable selector-max-type -- react-markdown table output\n table {\n border-radius: var(--table--corner-radius);\n overflow: hidden;\n border-width: var(--table--border-width);\n border-style: var(--table--border-style);\n border-color: var(--table--border-color);\n border-spacing: 0;\n background-color: var(--table--background-color);\n\n thead {\n font-weight: var(--table--header-font-weight);\n }\n\n th,\n td {\n padding-inline: var(--table--padding-x);\n padding-block: var(--table--padding-y);\n text-align: start;\n border-style: var(--table--border-style);\n border-color: var(--table--border-color);\n border-width: 0;\n }\n\n th {\n border-block-end-width: var(--table--header-border-width);\n }\n\n tbody tr {\n &:nth-of-type(odd) td {\n background-color: var(--table--background-color-accent);\n }\n\n &:not(:last-child) td {\n border-block-end-width: var(--table--border-width);\n }\n }\n }\n // stylelint-enable selector-max-type\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/MarkdownEditor/MarkdownEditor.mjs CHANGED Viewed

@@ -10,6 +10,7 @@ import { TextArea } from "../TextArea/TextArea.mjs";
 import { modifyValueByType } from "./lib/modifyValueByType.mjs";
 import { Toolbar } from "./components/Toolbar.mjs";
 import { modifyValueByMarkdownSyntax, scrollToCursor } from "./lib/modifyValueByMarkdownSyntax.mjs";
+import { useFileUpload } from "./lib/useFileUpload.mjs";
 import clsx from "clsx";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -21,11 +22,19 @@ var toolbarActionsTunnel = {
 };
 /** @flr-generate all */
 var MarkdownEditor = flowComponent("MarkdownEditor", (props) => {
-	const { isDisabled, isReadOnly, children, className, rows = 5, autoResizeMaxRows, headingOffset, markdownComponent: MarkdownComponent = Markdown, value, onChange, ref, ...rest } = useControlledHostValueProps(props, "");
+	const { isDisabled, isReadOnly, children, className, rows = 5, autoResizeMaxRows, headingOffset, markdownComponent: MarkdownComponent = Markdown, value, onChange, uploadFile, accept, ref, ...rest } = useControlledHostValueProps(props, "");
 	const inputRef = useObjectRef(ref);
 	const [mode, setMode] = useState("editor");
 	const toolbarActionsDisabled = isDisabled || mode === "preview";
-	const rootClassName = clsx(MarkdownEditor_module_default.markdownEditor, MarkdownEditor_module_default[`mode-${mode}`], className);
+	const { dropProps, isDropTarget, uploadFiles } = useFileUpload({
+		accept,
+		uploadFile,
+		isDisabled: isDisabled || isReadOnly || mode === "preview",
+		value,
+		onChange,
+		textAreaRef: inputRef
+	});
+	const rootClassName = clsx(MarkdownEditor_module_default.markdownEditor, MarkdownEditor_module_default[`mode-${mode}`], isDropTarget && MarkdownEditor_module_default.dropTarget, className);
 	const toolbarActionsPropsContext = {
 		...overlayTriggersTunneledTo(toolbarActionsTunnel),
 		Button: {
@@ -63,6 +72,7 @@ var MarkdownEditor = flowComponent("MarkdownEditor", (props) => {
 		onChange(newValue);
 	};
 	return /* @__PURE__ */ jsx("div", {
+		...dropProps,
 		className: rootClassName,
 		children: /* @__PURE__ */ jsx(TextArea, {
 			...rest,
@@ -90,7 +100,10 @@ var MarkdownEditor = flowComponent("MarkdownEditor", (props) => {
 						currentMode: mode,
 						isDisabled,
 						onModeChange: setMode,
-						onToolPressed: handleToolButtonPressed
+						onToolPressed: handleToolButtonPressed,
+						accept,
+						isReadOnly,
+						onFilesSelected: uploadFiles
 					})
 				]
 			})

package/dist/js/packages/components/src/components/MarkdownEditor/MarkdownEditor.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkdownEditor.mjs","names":[],"sources":["../../../../../../../src/components/MarkdownEditor/MarkdownEditor.tsx"],"sourcesContent":["import { type ComponentType, type KeyboardEventHandler, useState } from \"react\";\nimport styles from \"./MarkdownEditor.module.scss\";\nimport {\n Markdown as DefaultMarkdown,\n type MarkdownProps,\n} from \"@/components/Markdown\";\nimport { TextArea, type TextAreaProps } from \"@/components/TextArea\";\nimport { Toolbar } from \"@/components/MarkdownEditor/components/Toolbar\";\nimport clsx from \"clsx\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport {\n modifyValueByMarkdownSyntax,\n scrollToCursor,\n} from \"@/components/MarkdownEditor/lib/modifyValueByMarkdownSyntax\";\nimport {\n type InsertType,\n modifyValueByType,\n} from \"@/components/MarkdownEditor/lib/modifyValueByType\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport {\n overlayTriggersTunneledTo,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\n\nexport type MarkdownEditorMode = \"editor\" \| \"preview\";\n\nconst toolbarActionsTunnel = {\n id: \"toolbarActions\",\n component: \"MarkdownEditor\",\n} as const;\n\nexport interface MarkdownEditorProps\n extends TextAreaProps, Pick<MarkdownProps, \"headingOffset\"> {\n /*\n Allows replacing the markdown preview renderer implementation. Defaults to\n * the internal `Markdown` component.\n /\n markdownComponent?: ComponentType<MarkdownProps>;\n}\n\n/* @flr-generate all */\nexport const MarkdownEditor = flowComponent(\"MarkdownEditor\", (props) => {\n const {\n isDisabled,\n isReadOnly,\n children,\n className,\n rows = 5,\n autoResizeMaxRows,\n headingOffset,\n markdownComponent: MarkdownComponent = DefaultMarkdown,\n value,\n onChange,\n ref,\n ...rest\n } = useControlledHostValueProps(props, \"\");\n\n const inputRef = useObjectRef(ref);\n const [mode, setMode] = useState<MarkdownEditorMode>(\"editor\");\n const toolbarActionsDisabled = isDisabled \|\| mode === \"preview\";\n\n const rootClassName = clsx(\n styles.markdownEditor,\n styles[`mode-${mode}`],\n className,\n );\n\n const toolbarActionsPropsContext: PropsContext = {\n ...overlayTriggersTunneledTo(toolbarActionsTunnel),\n Button: {\n tunnel: toolbarActionsTunnel,\n size: \"s\",\n variant: \"plain\",\n color: \"dark\",\n isDisabled: toolbarActionsDisabled,\n },\n };\n\n const handleKeyDown: KeyboardEventHandler = (event) => {\n if (event.key !== \"Enter\") {\n return;\n }\n\n const modifyParams = modifyValueByMarkdownSyntax(value, inputRef);\n if (!modifyParams) {\n return;\n }\n\n const { newValue, newSelectionStart, newSelectionEnd } = modifyParams;\n\n requestAnimationFrame(() => {\n if (inputRef.current) {\n inputRef.current.value = newValue;\n inputRef.current?.setSelectionRange(newSelectionStart, newSelectionEnd);\n scrollToCursor(newValue, inputRef.current);\n }\n });\n\n event.preventDefault();\n onChange(newValue);\n };\n\n const handleToolButtonPressed = (type: InsertType) => {\n const { newValue, newSelectionStart, newSelectionEnd } = modifyValueByType(\n value,\n type,\n inputRef,\n );\n\n requestAnimationFrame(() => {\n if (inputRef.current) {\n inputRef.current.value = newValue;\n inputRef.current.setSelectionRange(newSelectionStart, newSelectionEnd);\n inputRef.current.focus();\n }\n });\n\n onChange(newValue);\n };\n\n return (\n <div className={rootClassName}>\n <TextArea\n {...rest}\n aria-hidden={mode === \"preview\"}\n isReadOnly={isReadOnly \|\| mode === \"preview\"}\n isDisabled={isDisabled}\n ref={inputRef}\n value={value}\n rows={rows}\n autoResizeMaxRows={autoResizeMaxRows}\n onChange={onChange}\n onKeyDown={handleKeyDown}\n >\n <PropsContextProvider\n props={toolbarActionsPropsContext}\n dependencies={[toolbarActionsDisabled]}\n >\n {children}\n {mode === \"preview\" && (\n <MarkdownComponent\n headingOffset={headingOffset}\n className={styles.markdown}\n style={{\n height: inputRef.current?.offsetHeight,\n }}\n >\n {value}\n </MarkdownComponent>\n )}\n <Toolbar\n currentMode={mode}\n isDisabled={isDisabled}\n onModeChange={setMode}\n onToolPressed={handleToolButtonPressed}\n />\n </PropsContextProvider>\n </TextArea>\n </div>\n );\n});\n\nexport default MarkdownEditor;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;AA4BA~~,IAAM,uBAAuB;CAC3B,IAAI;CACJ,WAAW;AACb;;~~AAYA~~,IAAa,iBAAiB,cAAc,mBAAmB,UAAU;CACvE,MAAM,EACJ,YACA,YACA,UACA,WACA,OAAO,GACP,mBACA,eACA,mBAAmB,oBAAoB,UACvC,OACA,UACA,KACA,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,MAAM,WAAW,aAAa,GAAG;CACjC,MAAM,CAAC,MAAM,WAAW,SAA6B,QAAQ;CAC7D,MAAM,yBAAyB,cAAc,SAAS;CAEtD,MAAM,gBAAgB,KACpB,8BAAO,gBACP,8BAAO,QAAQ,SACf,SACF;CAEA,MAAM,6BAA2C;EAC/C,GAAG,0BAA0B,oBAAoB;EACjD,QAAQ;GACN,QAAQ;GACR,MAAM;GACN,SAAS;GACT,OAAO;GACP,YAAY;EACd;CACF;CAEA,MAAM,iBAAuC,UAAU;EACrD,IAAI,MAAM,QAAQ,SAChB;EAGF,MAAM,eAAe,4BAA4B,OAAO,QAAQ;EAChE,IAAI,CAAC,cACH;EAGF,MAAM,EAAE,UAAU,mBAAmB,oBAAoB;EAEzD,4BAA4B;GAC1B,IAAI,SAAS,SAAS;IACpB,SAAS,QAAQ,QAAQ;IACzB,SAAS,SAAS,kBAAkB,mBAAmB,eAAe;IACtE,eAAe,UAAU,SAAS,OAAO;GAC3C;EACF,CAAC;EAED,MAAM,eAAe;EACrB,SAAS,QAAQ;CACnB;CAEA,MAAM,2BAA2B,SAAqB;EACpD,MAAM,EAAE,UAAU,mBAAmB,oBAAoB,kBACvD,OACA,MACA,QACF;EAEA,4BAA4B;GAC1B,IAAI,SAAS,SAAS;IACpB,SAAS,QAAQ,QAAQ;IACzB,SAAS,QAAQ,kBAAkB,mBAAmB,eAAe;IACrE,SAAS,QAAQ,MAAM;GACzB;EACF,CAAC;EAED,SAAS,QAAQ;CACnB;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW;~~EACd~~,UAAA,oBAAC,UAAD;GACE,GAAI;GACJ,eAAa,SAAS;GACtB,YAAY,cAAc,SAAS;GACvB;GACZ,KAAK;GACE;GACD;GACa;GACT;GACV,WAAW;GAEX,UAAA,qBAAC,sBAAD;IACE,OAAO;IACP,cAAc,CAAC,sBAAsB;IAFvC,UAAA;KAIG;KACA,SAAS,aACR,oBAAC,mBAAD;MACiB;MACf,WAAW,8BAAO;MAClB,OAAO,EACL,QAAQ,SAAS,SAAS,aAC5B;MAEC,UAAA;KACgB,CAAA;KAErB,oBAAC,SAAD;MACE,aAAa;MACD;MACZ,cAAc;MACd,eAAe;~~KAChB~~,CAAA;IACmB;;EACd,CAAA;CACP,CAAA;AAET,CAAC"}
1	+ {"version":3,"file":"MarkdownEditor.mjs","names":[],"sources":["../../../../../../../src/components/MarkdownEditor/MarkdownEditor.tsx"],"sourcesContent":["import { type ComponentType, type KeyboardEventHandler, useState } from \"react\";\nimport styles from \"./MarkdownEditor.module.scss\";\nimport {\n Markdown as DefaultMarkdown,\n type MarkdownProps,\n} from \"@/components/Markdown\";\nimport { TextArea, type TextAreaProps } from \"@/components/TextArea\";\nimport { Toolbar } from \"@/components/MarkdownEditor/components/Toolbar\";\nimport clsx from \"clsx\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport {\n modifyValueByMarkdownSyntax,\n scrollToCursor,\n} from \"@/components/MarkdownEditor/lib/modifyValueByMarkdownSyntax\";\nimport {\n type InsertType,\n modifyValueByType,\n} from \"@/components/MarkdownEditor/lib/modifyValueByType\";\nimport type { MarkdownEditorUpload } from \"@/components/MarkdownEditor/lib/fileUpload\";\nimport { useFileUpload } from \"@/components/MarkdownEditor/lib/useFileUpload\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport {\n overlayTriggersTunneledTo,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\n\nexport type MarkdownEditorMode = \"editor\" \| \"preview\";\n\nexport type { MarkdownEditorUpload };\n\nconst toolbarActionsTunnel = {\n id: \"toolbarActions\",\n component: \"MarkdownEditor\",\n} as const;\n\nexport interface MarkdownEditorProps\n extends TextAreaProps, Pick<MarkdownProps, \"headingOffset\"> {\n /*\n Allows replacing the markdown preview renderer implementation. Defaults to\n * the internal `Markdown` component.\n /\n markdownComponent?: ComponentType<MarkdownProps>;\n /\n Uploads a file the user dropped onto the editor, pasted into it or picked\n * with its attachment button. A placeholder comment sits at the cursor while\n * the returned promise is pending: resolving replaces it with markdown\n * linking to the file — an image embed for an image — and rejecting takes it\n * back out. Without this prop the editor takes no files at all.\n \n Named without an `on` prefix on purpose: the remote generator turns an\n * `on` prop into a fire-and-forget event, and this one has to hand a result\n back.\n /\n uploadFile?: (file: File) => Promise<MarkdownEditorUpload>;\n /\n Which file types the editor takes, as the `accept` attribute of a file\n * input: a comma separated list of MIME types (`image/png`), MIME wildcards\n * (`image/`) and file extensions (`.png`). Defaults to every type.\n /\n accept?: string;\n}\n\n/** @flr-generate all */\nexport const MarkdownEditor = flowComponent(\"MarkdownEditor\", (props) => {\n const {\n isDisabled,\n isReadOnly,\n children,\n className,\n rows = 5,\n autoResizeMaxRows,\n headingOffset,\n markdownComponent: MarkdownComponent = DefaultMarkdown,\n value,\n onChange,\n uploadFile,\n accept,\n ref,\n ...rest\n } = useControlledHostValueProps(props, \"\");\n\n const inputRef = useObjectRef(ref);\n const [mode, setMode] = useState<MarkdownEditorMode>(\"editor\");\n const toolbarActionsDisabled = isDisabled \|\| mode === \"preview\";\n\n const { dropProps, isDropTarget, uploadFiles } = useFileUpload({\n accept,\n uploadFile,\n isDisabled: isDisabled \|\| isReadOnly \|\| mode === \"preview\",\n value,\n onChange,\n textAreaRef: inputRef,\n });\n\n const rootClassName = clsx(\n styles.markdownEditor,\n styles[`mode-${mode}`],\n isDropTarget && styles.dropTarget,\n className,\n );\n\n const toolbarActionsPropsContext: PropsContext = {\n ...overlayTriggersTunneledTo(toolbarActionsTunnel),\n Button: {\n tunnel: toolbarActionsTunnel,\n size: \"s\",\n variant: \"plain\",\n color: \"dark\",\n isDisabled: toolbarActionsDisabled,\n },\n };\n\n const handleKeyDown: KeyboardEventHandler = (event) => {\n if (event.key !== \"Enter\") {\n return;\n }\n\n const modifyParams = modifyValueByMarkdownSyntax(value, inputRef);\n if (!modifyParams) {\n return;\n }\n\n const { newValue, newSelectionStart, newSelectionEnd } = modifyParams;\n\n requestAnimationFrame(() => {\n if (inputRef.current) {\n inputRef.current.value = newValue;\n inputRef.current?.setSelectionRange(newSelectionStart, newSelectionEnd);\n scrollToCursor(newValue, inputRef.current);\n }\n });\n\n event.preventDefault();\n onChange(newValue);\n };\n\n const handleToolButtonPressed = (type: InsertType) => {\n const { newValue, newSelectionStart, newSelectionEnd } = modifyValueByType(\n value,\n type,\n inputRef,\n );\n\n requestAnimationFrame(() => {\n if (inputRef.current) {\n inputRef.current.value = newValue;\n inputRef.current.setSelectionRange(newSelectionStart, newSelectionEnd);\n inputRef.current.focus();\n }\n });\n\n onChange(newValue);\n };\n\n return (\n <div {...dropProps} className={rootClassName}>\n <TextArea\n {...rest}\n aria-hidden={mode === \"preview\"}\n isReadOnly={isReadOnly \|\| mode === \"preview\"}\n isDisabled={isDisabled}\n ref={inputRef}\n value={value}\n rows={rows}\n autoResizeMaxRows={autoResizeMaxRows}\n onChange={onChange}\n onKeyDown={handleKeyDown}\n >\n <PropsContextProvider\n props={toolbarActionsPropsContext}\n dependencies={[toolbarActionsDisabled]}\n >\n {children}\n {mode === \"preview\" && (\n <MarkdownComponent\n headingOffset={headingOffset}\n className={styles.markdown}\n style={{\n height: inputRef.current?.offsetHeight,\n }}\n >\n {value}\n </MarkdownComponent>\n )}\n <Toolbar\n currentMode={mode}\n isDisabled={isDisabled}\n onModeChange={setMode}\n onToolPressed={handleToolButtonPressed}\n accept={accept}\n isReadOnly={isReadOnly}\n onFilesSelected={uploadFiles}\n />\n </PropsContextProvider>\n </TextArea>\n </div>\n );\n});\n\nexport default MarkdownEditor;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgCA,IAAM,uBAAuB;CAC3B,IAAI;CACJ,WAAW;AACb;;AA8BA,IAAa,iBAAiB,cAAc,mBAAmB,UAAU;CACvE,MAAM,EACJ,YACA,YACA,UACA,WACA,OAAO,GACP,mBACA,eACA,mBAAmB,oBAAoB,UACvC,OACA,UACA,YACA,QACA,KACA,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,MAAM,WAAW,aAAa,GAAG;CACjC,MAAM,CAAC,MAAM,WAAW,SAA6B,QAAQ;CAC7D,MAAM,yBAAyB,cAAc,SAAS;CAEtD,MAAM,EAAE,WAAW,cAAc,gBAAgB,cAAc;EAC7D;EACA;EACA,YAAY,cAAc,cAAc,SAAS;EACjD;EACA;EACA,aAAa;CACf,CAAC;CAED,MAAM,gBAAgB,KACpB,8BAAO,gBACP,8BAAO,QAAQ,SACf,gBAAgB,8BAAO,YACvB,SACF;CAEA,MAAM,6BAA2C;EAC/C,GAAG,0BAA0B,oBAAoB;EACjD,QAAQ;GACN,QAAQ;GACR,MAAM;GACN,SAAS;GACT,OAAO;GACP,YAAY;EACd;CACF;CAEA,MAAM,iBAAuC,UAAU;EACrD,IAAI,MAAM,QAAQ,SAChB;EAGF,MAAM,eAAe,4BAA4B,OAAO,QAAQ;EAChE,IAAI,CAAC,cACH;EAGF,MAAM,EAAE,UAAU,mBAAmB,oBAAoB;EAEzD,4BAA4B;GAC1B,IAAI,SAAS,SAAS;IACpB,SAAS,QAAQ,QAAQ;IACzB,SAAS,SAAS,kBAAkB,mBAAmB,eAAe;IACtE,eAAe,UAAU,SAAS,OAAO;GAC3C;EACF,CAAC;EAED,MAAM,eAAe;EACrB,SAAS,QAAQ;CACnB;CAEA,MAAM,2BAA2B,SAAqB;EACpD,MAAM,EAAE,UAAU,mBAAmB,oBAAoB,kBACvD,OACA,MACA,QACF;EAEA,4BAA4B;GAC1B,IAAI,SAAS,SAAS;IACpB,SAAS,QAAQ,QAAQ;IACzB,SAAS,QAAQ,kBAAkB,mBAAmB,eAAe;IACrE,SAAS,QAAQ,MAAM;GACzB;EACF,CAAC;EAED,SAAS,QAAQ;CACnB;CAEA,OACE,oBAAC,OAAD;EAAK,GAAI;EAAW,WAAW;EAC7B,UAAA,oBAAC,UAAD;GACE,GAAI;GACJ,eAAa,SAAS;GACtB,YAAY,cAAc,SAAS;GACvB;GACZ,KAAK;GACE;GACD;GACa;GACT;GACV,WAAW;GAEX,UAAA,qBAAC,sBAAD;IACE,OAAO;IACP,cAAc,CAAC,sBAAsB;IAFvC,UAAA;KAIG;KACA,SAAS,aACR,oBAAC,mBAAD;MACiB;MACf,WAAW,8BAAO;MAClB,OAAO,EACL,QAAQ,SAAS,SAAS,aAC5B;MAEC,UAAA;KACgB,CAAA;KAErB,oBAAC,SAAD;MACE,aAAa;MACD;MACZ,cAAc;MACd,eAAe;MACP;MACI;MACZ,iBAAiB;KAClB,CAAA;IACmB;;EACd,CAAA;CACP,CAAA;AAET,CAAC"}

package/dist/js/packages/components/src/components/MarkdownEditor/MarkdownEditor.module.mjs CHANGED Viewed

@@ -6,6 +6,7 @@ var toolbar = "flow--markdown-editor--toolbar";
 var toolbarButtons = "flow--markdown-editor--toolbar-buttons";
 var modeButton = "flow--markdown-editor--mode-button";
 var markdown = "flow--markdown-editor--markdown";
+var dropTarget = "flow--markdown-editor--drop-target";
 var MarkdownEditor_module_default = {
 	markdownEditor,
 	toolbar,
@@ -13,9 +14,10 @@ var MarkdownEditor_module_default = {
 	modeButton,
 	markdown,
 	"mode-editor": "flow--markdown-editor--mode-editor",
-	"mode-preview": "flow--markdown-editor--mode-preview"
+	"mode-preview": "flow--markdown-editor--mode-preview",
+	dropTarget
 };
 //#endregion
-export { MarkdownEditor_module_default as default, markdown, markdownEditor, modeButton, toolbar, toolbarButtons };
+export { MarkdownEditor_module_default as default, dropTarget, markdown, markdownEditor, modeButton, toolbar, toolbarButtons };
 //# sourceMappingURL=MarkdownEditor.module.mjs.map

package/dist/js/packages/components/src/components/MarkdownEditor/MarkdownEditor.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkdownEditor.module.mjs","names":[],"sources":["../../../../../../../src/components/MarkdownEditor/MarkdownEditor.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n@use \"@/styles/mixins/scrollbar\";\n\n.markdownEditor {\n display: grid;\n grid-template-areas:\n \"label\"\n \"toolbar\"\n \"content\"\n \"fieldDescription\";\n\n .toolbar {\n grid-area: toolbar;\n display: flex;\n justify-content: space-between;\n padding: var(--form-control--padding-y);\n column-gap: var(--form-control--padding-y);\n flex-wrap: wrap;\n\n @include formControl.formBorder;\n @include formControl.formColor;\n @include formControl.formAnimation;\n\n & {\n border-bottom: none;\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n }\n\n .toolbarButtons {\n display: flex;\n flex-wrap: wrap;\n column-gap: var(--form-control--padding-y);\n }\n\n .modeButton {\n margin-inline-start: auto;\n }\n\n .markdown {\n overflow-y: auto;\n\n @include formControl.formBorder;\n @include formControl.formColor;\n }\n\n :global(.flow--form-field) {\n display: contents;\n }\n\n ~~textarea~~,\n .markdown {\n @include scrollbar.scrollbar;\n\n grid-area: content;\n padding-block: calc(\n var(--form-control--padding-y) - var(--form-control--border-width)\n );\n padding-inline: var(--form-control--padding-x);\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n }\n\n &.mode-editor {\n .markdown {\n display: none;\n }\n }\n\n &.mode-preview {\n ~~textarea~~ {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n width: 1px;\n height: 1px;\n inset-inline-start: 0;\n }\n }\n\n /* States */\n\n &:has(~~textarea~~:hover) .toolbar {\n background-color: var(--form-control--background-color--hover);\n }\n\n &:has(~~textarea~~[data-invalid]) .toolbar,\n &:has(~~textarea~~[data-invalid]) .markdown {\n background-color: var(--form-control--background-color--invalid);\n border-color: var(--form-control--border-color--invalid);\n }\n\n &:has(~~textarea~~[data-focused=\"true\"]) .toolbar,\n &:has(~~textarea~~[data-focused=\"true\"]) .markdown {\n background-color: var(--form-control--background-color--focused);\n border-color: var(--form-control--border-color--focused);\n }\n\n &:has(~~textarea~~[data-disabled]).mode-editor .toolbar {\n background-color: var(--form-control--background-color--disabled);\n border-color: var(--form-control--border-color--disabled);\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"MarkdownEditor.module.mjs","names":[],"sources":["../../../../../../../src/components/MarkdownEditor/MarkdownEditor.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n@use \"@/styles/mixins/scrollbar\";\n\n.markdownEditor {\n display: grid;\n grid-template-areas:\n \"label\"\n \"toolbar\"\n \"content\"\n \"fieldDescription\";\n\n .toolbar {\n grid-area: toolbar;\n display: flex;\n justify-content: space-between;\n padding: var(--form-control--padding-y);\n column-gap: var(--form-control--padding-y);\n flex-wrap: wrap;\n\n @include formControl.formBorder;\n @include formControl.formColor;\n @include formControl.formAnimation;\n\n & {\n border-bottom: none;\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n }\n\n .toolbarButtons {\n display: flex;\n flex-wrap: wrap;\n column-gap: var(--form-control--padding-y);\n }\n\n .modeButton {\n margin-inline-start: auto;\n }\n\n .markdown {\n overflow-y: auto;\n\n @include formControl.formBorder;\n @include formControl.formColor;\n }\n\n :global(.flow--form-field) {\n display: contents;\n }\n\n /* The inner text-area element is react-aria's, but Flow's TextArea puts a\n class on it — select through that class instead of the element type. /\n :global(.flow--text-area--input),\n .markdown {\n @include scrollbar.scrollbar;\n\n grid-area: content;\n padding-block: calc(\n var(--form-control--padding-y) - var(--form-control--border-width)\n );\n padding-inline: var(--form-control--padding-x);\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n }\n\n &.mode-editor {\n .markdown {\n display: none;\n }\n }\n\n &.mode-preview {\n :global(.flow--text-area--input) {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n width: 1px;\n height: 1px;\n inset-inline-start: 0;\n }\n }\n\n / States /\n\n &:has(:global(.flow--text-area--input:hover)) .toolbar {\n background-color: var(--form-control--background-color--hover);\n }\n\n &:has(:global(.flow--text-area--input[data-invalid])) .toolbar,\n &:has(:global(.flow--text-area--input[data-invalid])) .markdown {\n background-color: var(--form-control--background-color--invalid);\n border-color: var(--form-control--border-color--invalid);\n }\n\n &:has(:global(.flow--text-area--input[data-focused=\"true\"])) .toolbar,\n &:has(:global(.flow--text-area--input[data-focused=\"true\"])) .markdown {\n background-color: var(--form-control--background-color--focused);\n border-color: var(--form-control--border-color--focused);\n }\n\n &:has(:global(.flow--text-area--input[data-disabled])).mode-editor .toolbar {\n background-color: var(--form-control--background-color--disabled);\n border-color: var(--form-control--border-color--disabled);\n }\n\n / A drag over the editor reads as its focused state -- dropping focuses it. */\n &.dropTarget {\n .toolbar,\n .markdown,\n :global(.flow--text-area--input) {\n background-color: var(--form-control--background-color--focused);\n border-color: var(--form-control--border-color--focused);\n }\n }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/MarkdownEditor/components/AttachmentButton.mjs ADDED Viewed

@@ -0,0 +1,47 @@
+"use client"
+/* */
+import { IconAttachment } from "../../Icon/components/icons/IconAttachment.mjs";
+import { ToolbarButton } from "./ToolbarButton.mjs";
+import { useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useVisuallyHidden } from "react-aria";
+//#region src/components/MarkdownEditor/components/AttachmentButton.tsx
+/**
+* The toolbar's file picker — the keyboard and pointer equivalent of dropping a
+* file onto the editor. A `ToolbarButton` like every other tool, plus the
+* hidden input it opens.
+*
+* @internal
+*/
+var AttachmentButton = (props) => {
+	const { accept, isDisabled, onSelect } = props;
+	const inputRef = useRef(null);
+	const { visuallyHiddenProps } = useVisuallyHidden();
+	const handlePress = () => {
+		const input = inputRef.current;
+		if (!input) return;
+		input.value = "";
+		input.click();
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ToolbarButton, {
+		type: "attachment",
+		isDisabled,
+		onPress: handlePress,
+		children: /* @__PURE__ */ jsx(IconAttachment, {})
+	}), /* @__PURE__ */ jsx("input", {
+		...visuallyHiddenProps,
+		ref: inputRef,
+		type: "file",
+		accept,
+		multiple: true,
+		tabIndex: -1,
+		onChange: (event) => {
+			const files = event.target.files;
+			if (files?.length) onSelect(Array.from(files));
+		}
+	})] });
+};
+//#endregion
+export { AttachmentButton };
+//# sourceMappingURL=AttachmentButton.mjs.map

package/dist/js/packages/components/src/components/MarkdownEditor/components/AttachmentButton.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"AttachmentButton.mjs","names":[],"sources":["../../../../../../../../src/components/MarkdownEditor/components/AttachmentButton.tsx"],"sourcesContent":["import { type FC, useRef } from \"react\";\nimport { useVisuallyHidden } from \"react-aria\";\nimport { IconAttachment } from \"@/components/Icon/components/icons\";\nimport { ToolbarButton } from \"@/components/MarkdownEditor/components/ToolbarButton\";\n\n/** @internal */\nexport interface AttachmentButtonProps {\n /** Which file types to offer, as an `accept` attribute value. */\n accept?: string;\n isDisabled?: boolean;\n /** Called with the files the user picked. */\n onSelect: (files: File[]) => void;\n}\n\n/**\n * The toolbar's file picker — the keyboard and pointer equivalent of dropping a\n * file onto the editor. A `ToolbarButton` like every other tool, plus the\n * hidden input it opens.\n *\n * @internal\n */\nexport const AttachmentButton: FC<AttachmentButtonProps> = (props) => {\n const { accept, isDisabled, onSelect } = props;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const { visuallyHiddenProps } = useVisuallyHidden();\n\n const handlePress = () => {\n const input = inputRef.current;\n\n if (!input) {\n return;\n }\n\n /*\n * Cleared first: an input that still holds the previous file fires no\n * `change` when the same file is picked again.\n */\n input.value = \"\";\n input.click();\n };\n\n return (\n <>\n <ToolbarButton\n type=\"attachment\"\n isDisabled={isDisabled}\n onPress={handlePress}\n >\n <IconAttachment />\n </ToolbarButton>\n\n {/*\n * A plain input rather than `FileField`'s `FileInput`: that one renders an\n * `Aria.Input`, which reads the `InputContext` the surrounding TextArea's\n * `Aria.TextField` provides and would be handed the editor's text as its\n * value — which a file input rejects outright.\n *\n * `tabIndex={-1}` keeps the hidden input out of the tab order; the button\n * in front of it is the focusable affordance.\n */}\n <input\n {...visuallyHiddenProps}\n ref={inputRef}\n type=\"file\"\n accept={accept}\n multiple\n tabIndex={-1}\n onChange={(event) => {\n const files = event.target.files;\n\n if (files?.length) {\n onSelect(Array.from(files));\n }\n }}\n />\n </>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAqBA,IAAa,oBAA+C,UAAU;CACpE,MAAM,EAAE,QAAQ,YAAY,aAAa;CAEzC,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,EAAE,wBAAwB,kBAAkB;CAElD,MAAM,oBAAoB;EACxB,MAAM,QAAQ,SAAS;EAEvB,IAAI,CAAC,OACH;EAOF,MAAM,QAAQ;EACd,MAAM,MAAM;CACd;CAEA,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,eAAD;EACE,MAAK;EACO;EACZ,SAAS;EAET,UAAA,oBAAC,gBAAD,CAAiB,CAAA;CACJ,CAAA,GAWf,oBAAC,SAAD;EACE,GAAI;EACJ,KAAK;EACL,MAAK;EACG;EACR,UAAA;EACA,UAAU;EACV,WAAW,UAAU;GACnB,MAAM,QAAQ,MAAM,OAAO;GAE3B,IAAI,OAAO,QACT,SAAS,MAAM,KAAK,KAAK,CAAC;EAE9B;CACD,CAAA,CACD,EAAA,CAAA;AAEN"}