npm - @mittwald/flow-react-components - Versions diffs - 0.2.0-alpha.932 → 0.2.0-alpha.945 - Mend

@mittwald/flow-react-components 0.2.0-alpha.932 → 0.2.0-alpha.945

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 (54) hide show

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

@@ -28,11 +28,12 @@ const CodeBlock = (props) => {
   if (!code) {
     return /* @__PURE__ */ jsx("div", { className: clsx(rootClassName, styles.withChildren), children: /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children }) }) });
   }
+  const maxHeightVariable = maxHeight ? { "--max-height": `${maxHeight}px` } : void 0;
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: clsx(rootClassName, folded ? styles.folded : void 0),
-      style: { "--max-height": `${maxHeight}px` },
+      style: maxHeightVariable,
       children: /* @__PURE__ */ jsx(
         CodeEditor,
         {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeBlock.mjs","sources":["../../../../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useId, useState } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeBlock.module.scss\";\nimport { CodeEditor, type CodeEditorProps } from \"@/components/CodeEditor\";\nimport { Button } from \"@/components/Button\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"./locales/.locale.json\";\n\nexport interface CodeBlockProps\n extends\n PropsWithClassName,\n PropsWithChildren,\n Partial<\n Pick<CodeEditorProps, \"language\" \| \"showLineNumbers\" \| \"copyable\">\n > {\n code?: string;\n /\n Controls truncation of long code blocks. `false` disables it, `true`\n * truncates after 8 lines, and a number sets the maximum line count.\n \n @default: false\n /\n truncateLines?: boolean \| number;\n}\n\n/* @flr-generate all /\nexport const CodeBlock: FC<CodeBlockProps> = (props) => {\n const {\n code,\n className,\n copyable = false,\n showLineNumbers = false,\n children,\n truncateLines = false,\n ...rest\n } = props;\n\n const [folded, setFolded] = useState(truncateLines !== false);\n const [maxHeight, setMaxHeight] = useState<number>();\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"CodeBlock\");\n\n const rootClassName = clsx(styles.codeBlock, className);\n\n const id = useId();\n\n if (!code) {\n return (\n <div className={clsx(rootClassName, styles.withChildren)}>\n <pre>\n <code>{children}</code>\n </pre>\n </div>\n );\n }\n\n return (\n <div\n className={clsx(rootClassName, folded ? styles.folded : undefined)}\n style={~~{ \"--max-height\": `${maxHeight~~}~~px` } as React.CSSProperties}~~\n >\n <CodeEditor\n {...rest}\n value={code}\n editable={false}\n copyable={copyable}\n showLineNumbers={showLineNumbers}\n showLinterMarkers={false}\n showCodeFolding={false}\n showActiveLineMarker={false}\n isReadOnly\n onCreateEditor={(view) => {\n if (!truncateLines) {\n return;\n }\n\n const lineHeight = 20;\n const padding = 12;\n\n const visibleLines =\n typeof truncateLines === \"number\" ? truncateLines : 8;\n\n const totalLines = view.state.doc.lines;\n\n if (totalLines > visibleLines)\n setMaxHeight(lineHeight visibleLines + padding);\n }}\n id={id}\n >\n {truncateLines && maxHeight && (\n <div className={clsx(styles.buttonContainer)}>\n <Button\n variant=\"plain\"\n color=\"secondary\"\n size=\"s\"\n onPress={() => setFolded((folded) => !folded)}\n aria-expanded={!folded}\n aria-controls={id}\n >\n {stringFormatter.format(folded ? \"showMore\" : \"showLess\")}\n </Button>\n </div>\n )}\n </CodeEditor>\n </div>\n );\n};\n\nexport default CodeBlock;\n"],"names":["folded"],"mappings":";;;;;;;;;;AA2BO,MAAM,SAAA,GAAgC,CAAC,KAAA,KAAU;AACtD,EAAA,MAAM;AAAA,IACJ,IAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,eAAA,GAAkB,KAAA;AAAA,IAClB,QAAA;AAAA,IACA,aAAA,GAAgB,KAAA;AAAA,IAChB,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,QAAA,CAAS,kBAAkB,KAAK,CAAA;AAC5D,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,QAAA,EAAiB;AAEnD,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,WAAW,CAAA;AAExE,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,SAAA,EAAW,SAAS,CAAA;AAEtD,EAAA,MAAM,KAAK,KAAA,EAAM;AAEjB,EAAA,IAAI,CAAC,IAAA,EAAM;AACT,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,eAAe,MAAA,CAAO,YAAY,CAAA,EACrD,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAS,GAClB,CAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,IAAA,CAAK,aAAA,EAAe,MAAA,GAAS,MAAA,CAAO,SAAS,MAAS,CAAA;AAAA,MACjE,KAAA,EAAO,~~EAAE,cAAA,EAAgB,CAAA,EAAG,SAAS,CAAA,EAAA,CAAA,EAAK~~;AAAA,~~MAE1C~~,QAAA,kBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACE,GAAG,IAAA;AAAA,UACJ,KAAA,EAAO,IAAA;AAAA,UACP,QAAA,EAAU,KAAA;AAAA,UACV,QAAA;AAAA,UACA,eAAA;AAAA,UACA,iBAAA,EAAmB,KAAA;AAAA,UACnB,eAAA,EAAiB,KAAA;AAAA,UACjB,oBAAA,EAAsB,KAAA;AAAA,UACtB,UAAA,EAAU,IAAA;AAAA,UACV,cAAA,EAAgB,CAAC,IAAA,KAAS;AACxB,YAAA,IAAI,CAAC,aAAA,EAAe;AAClB,cAAA;AAAA,YACF;AAEA,YAAA,MAAM,UAAA,GAAa,EAAA;AACnB,YAAA,MAAM,OAAA,GAAU,EAAA;AAEhB,YAAA,MAAM,YAAA,GACJ,OAAO,aAAA,KAAkB,QAAA,GAAW,aAAA,GAAgB,CAAA;AAEtD,YAAA,MAAM,UAAA,GAAa,IAAA,CAAK,KAAA,CAAM,GAAA,CAAI,KAAA;AAElC,YAAA,IAAI,UAAA,GAAa,YAAA;AACf,cAAA,YAAA,CAAa,UAAA,GAAa,eAAe,OAAO,CAAA;AAAA,UACpD,CAAA;AAAA,UACA,EAAA;AAAA,UAEC,QAAA,EAAA,aAAA,IAAiB,6BAChB,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,IAAA,CAAK,MAAA,CAAO,eAAe,CAAA,EACzC,QAAA,kBAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,OAAA,EAAQ,OAAA;AAAA,cACR,KAAA,EAAM,WAAA;AAAA,cACN,IAAA,EAAK,GAAA;AAAA,cACL,SAAS,MAAM,SAAA,CAAU,CAACA,OAAAA,KAAW,CAACA,OAAM,CAAA;AAAA,cAC5C,iBAAe,CAAC,MAAA;AAAA,cAChB,eAAA,EAAe,EAAA;AAAA,cAEd,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,MAAA,GAAS,UAAA,GAAa,UAAU;AAAA;AAAA,WAC1D,EACF;AAAA;AAAA;AAEJ;AAAA,GACF;AAEJ;;;;"}
1	+ {"version":3,"file":"CodeBlock.mjs","sources":["../../../../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useId, useState } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeBlock.module.scss\";\nimport { CodeEditor, type CodeEditorProps } from \"@/components/CodeEditor\";\nimport { Button } from \"@/components/Button\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"./locales/.locale.json\";\n\nexport interface CodeBlockProps\n extends\n PropsWithClassName,\n PropsWithChildren,\n Partial<\n Pick<CodeEditorProps, \"language\" \| \"showLineNumbers\" \| \"copyable\">\n > {\n code?: string;\n /\n Controls truncation of long code blocks. `false` disables it, `true`\n * truncates after 8 lines, and a number sets the maximum line count.\n \n @default: false\n /\n truncateLines?: boolean \| number;\n}\n\n/* @flr-generate all /\nexport const CodeBlock: FC<CodeBlockProps> = (props) => {\n const {\n code,\n className,\n copyable = false,\n showLineNumbers = false,\n children,\n truncateLines = false,\n ...rest\n } = props;\n\n const [folded, setFolded] = useState(truncateLines !== false);\n const [maxHeight, setMaxHeight] = useState<number>();\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"CodeBlock\");\n\n const rootClassName = clsx(styles.codeBlock, className);\n\n const id = useId();\n\n if (!code) {\n return (\n <div className={clsx(rootClassName, styles.withChildren)}>\n <pre>\n <code>{children}</code>\n </pre>\n </div>\n );\n }\n\n const maxHeightVariable = maxHeight\n ? ({ \"--max-height\": `${maxHeight}px` } as React.CSSProperties)\n : undefined;\n\n return (\n <div\n className={clsx(rootClassName, folded ? styles.folded : undefined)}\n style={maxHeightVariable}\n >\n <CodeEditor\n {...rest}\n value={code}\n editable={false}\n copyable={copyable}\n showLineNumbers={showLineNumbers}\n showLinterMarkers={false}\n showCodeFolding={false}\n showActiveLineMarker={false}\n isReadOnly\n onCreateEditor={(view) => {\n if (!truncateLines) {\n return;\n }\n\n const lineHeight = 20;\n const padding = 12;\n\n const visibleLines =\n typeof truncateLines === \"number\" ? truncateLines : 8;\n\n const totalLines = view.state.doc.lines;\n\n if (totalLines > visibleLines)\n setMaxHeight(lineHeight visibleLines + padding);\n }}\n id={id}\n >\n {truncateLines && maxHeight && (\n <div className={clsx(styles.buttonContainer)}>\n <Button\n variant=\"plain\"\n color=\"secondary\"\n size=\"s\"\n onPress={() => setFolded((folded) => !folded)}\n aria-expanded={!folded}\n aria-controls={id}\n >\n {stringFormatter.format(folded ? \"showMore\" : \"showLess\")}\n </Button>\n </div>\n )}\n </CodeEditor>\n </div>\n );\n};\n\nexport default CodeBlock;\n"],"names":["folded"],"mappings":";;;;;;;;;;AA2BO,MAAM,SAAA,GAAgC,CAAC,KAAA,KAAU;AACtD,EAAA,MAAM;AAAA,IACJ,IAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,eAAA,GAAkB,KAAA;AAAA,IAClB,QAAA;AAAA,IACA,aAAA,GAAgB,KAAA;AAAA,IAChB,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,QAAA,CAAS,kBAAkB,KAAK,CAAA;AAC5D,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,QAAA,EAAiB;AAEnD,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,WAAW,CAAA;AAExE,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,SAAA,EAAW,SAAS,CAAA;AAEtD,EAAA,MAAM,KAAK,KAAA,EAAM;AAEjB,EAAA,IAAI,CAAC,IAAA,EAAM;AACT,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,eAAe,MAAA,CAAO,YAAY,CAAA,EACrD,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAS,GAClB,CAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,MAAM,oBAAoB,SAAA,GACrB,EAAE,gBAAgB,CAAA,EAAG,SAAS,MAAK,GACpC,MAAA;AAEJ,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,IAAA,CAAK,aAAA,EAAe,MAAA,GAAS,MAAA,CAAO,SAAS,MAAS,CAAA;AAAA,MACjE,KAAA,EAAO,iBAAA;AAAA,MAEP,QAAA,kBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACE,GAAG,IAAA;AAAA,UACJ,KAAA,EAAO,IAAA;AAAA,UACP,QAAA,EAAU,KAAA;AAAA,UACV,QAAA;AAAA,UACA,eAAA;AAAA,UACA,iBAAA,EAAmB,KAAA;AAAA,UACnB,eAAA,EAAiB,KAAA;AAAA,UACjB,oBAAA,EAAsB,KAAA;AAAA,UACtB,UAAA,EAAU,IAAA;AAAA,UACV,cAAA,EAAgB,CAAC,IAAA,KAAS;AACxB,YAAA,IAAI,CAAC,aAAA,EAAe;AAClB,cAAA;AAAA,YACF;AAEA,YAAA,MAAM,UAAA,GAAa,EAAA;AACnB,YAAA,MAAM,OAAA,GAAU,EAAA;AAEhB,YAAA,MAAM,YAAA,GACJ,OAAO,aAAA,KAAkB,QAAA,GAAW,aAAA,GAAgB,CAAA;AAEtD,YAAA,MAAM,UAAA,GAAa,IAAA,CAAK,KAAA,CAAM,GAAA,CAAI,KAAA;AAElC,YAAA,IAAI,UAAA,GAAa,YAAA;AACf,cAAA,YAAA,CAAa,UAAA,GAAa,eAAe,OAAO,CAAA;AAAA,UACpD,CAAA;AAAA,UACA,EAAA;AAAA,UAEC,QAAA,EAAA,aAAA,IAAiB,6BAChB,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,IAAA,CAAK,MAAA,CAAO,eAAe,CAAA,EACzC,QAAA,kBAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,OAAA,EAAQ,OAAA;AAAA,cACR,KAAA,EAAM,WAAA;AAAA,cACN,IAAA,EAAK,GAAA;AAAA,cACL,SAAS,MAAM,SAAA,CAAU,CAACA,OAAAA,KAAW,CAACA,OAAM,CAAA;AAAA,cAC5C,iBAAe,CAAC,MAAA;AAAA,cAChB,eAAA,EAAe,EAAA;AAAA,cAEd,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,MAAA,GAAS,UAAA,GAAa,UAAU;AAAA;AAAA,WAC1D,EACF;AAAA;AAAA;AAEJ;AAAA,GACF;AAEJ;;;;"}

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

@@ -31,6 +31,8 @@ const Items = () => {
     {
       data: item.data,
       id: item.id,
+      list,
+      isTile: tiles,
       triggerRef: list.infiniteScroll && index === triggerIndex ? triggerRef : void 0
     },
     item.id

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Items.mjs","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 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"],"names":[],"mappings":";;;;;;;;;;;AAcO,MAAM,QAAY,MAAM;AAC7B,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,KAAA,GAAQ,KAAK,QAAA,CAAS,OAAA;AAC5B,EAAA,MAAM,SAAA,GAAY,IAAA,CAAK,MAAA,CAAO,YAAA,EAAa;AAC3C,EAAA,MAAM,kBAAA,GAAqB,IAAA,CAAK,MAAA,CAAO,qBAAA,EAAsB;AAC7D,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,gBAAA,EAAiB;AAEnD,EAAA,MAAM,UAAA,GAAa,OAAuB,IAAI,CAAA;AAC9C,EAAA,wBAAA,CAAyB,UAAU,CAAA;AAEnC,EAAA,IAAI,CAAC,KAAK,QAAA,EAAU;AAClB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,eAAe,IAAA,CAAK,GAAA;AAAA,IACxB,CAAA;AAAA,IACA,KAAK,KAAA,CAAM,OAAA,CAAQ,SACjB,wBAAA,CAAyB,IAAA,CAAK,QAAQ,SAAS;AAAA,GACnD;AAEA,EAAA,MAAM,QAAQ,IAAA,CAAK,KAAA,CAAM,QAAQ,GAAA,CAAI,CAAC,MAAM,KAAA,qBAC1C,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MAEC,MAAM,IAAA,CAAK,IAAA;AAAA,MACX,IAAI,IAAA,CAAK,EAAA;AAAA,MACT,UAAA,EACE,IAAA,CAAK,cAAA,IAAkB,KAAA,KAAU,eAAe,UAAA,GAAa;AAAA,KAAA;AAAA,~~IAJ1D~~,IAAA,CAAK;AAAA,~~GAOb~~,CAAA;AAED,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,KAAA;AAAA,IACP,SAAA,IAAa,EAAE,IAAA,CAAK,cAAA,IAAkB,kBAAkB,MAAA,CAAO,SAAA;AAAA,IAC/D,SAAS,MAAA,CAAO;AAAA,GAClB;AAEA,EAAA,MAAM;AAAA,IACJ,iBAAA,EAAmB,cAAA;AAAA,IACnB,YAAA,EAAc,SAAA;AAAA,IACd,GAAG;AAAA,MACD,IAAA,CAAK,cAAA;AAET,EAAA,uBACE,GAAA,CAAC,OAAA,EAAA,EAAQ,aAAA,EAAa,kBAAA,EAAoB,aAAW,SAAA,EACnD,QAAA,kBAAA,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,aAAA;AAAA,MACV,GAAG,IAAA;AAAA,MACJ,iBAAA,EAAiB,YAAY,MAAA,GAAY,cAAA;AAAA,MACzC,YAAA,EAAY,SAAA;AAAA,MACZ,MAAA,EAAQ,QAAQ,MAAA,GAAS,OAAA;AAAA,MACzB,YAAA,EAAc,KAAK,QAAA,CAAS,YAAA;AAAA,MAE3B,gBAAM,MAAA,KAAW,CAAA,IAAK,kBAAA,mBAAqB,GAAA,CAAC,iBAAc,CAAA,GAAK;AAAA;AAAA,GAClE,EACF,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"Items.mjs","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"],"names":[],"mappings":";;;;;;;;;;;AAcO,MAAM,QAAY,MAAM;AAC7B,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,KAAA,GAAQ,KAAK,QAAA,CAAS,OAAA;AAC5B,EAAA,MAAM,SAAA,GAAY,IAAA,CAAK,MAAA,CAAO,YAAA,EAAa;AAC3C,EAAA,MAAM,kBAAA,GAAqB,IAAA,CAAK,MAAA,CAAO,qBAAA,EAAsB;AAC7D,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,gBAAA,EAAiB;AAEnD,EAAA,MAAM,UAAA,GAAa,OAAuB,IAAI,CAAA;AAC9C,EAAA,wBAAA,CAAyB,UAAU,CAAA;AAEnC,EAAA,IAAI,CAAC,KAAK,QAAA,EAAU;AAClB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,eAAe,IAAA,CAAK,GAAA;AAAA,IACxB,CAAA;AAAA,IACA,KAAK,KAAA,CAAM,OAAA,CAAQ,SACjB,wBAAA,CAAyB,IAAA,CAAK,QAAQ,SAAS;AAAA,GACnD;AAEA,EAAA,MAAM,QAAQ,IAAA,CAAK,KAAA,CAAM,QAAQ,GAAA,CAAI,CAAC,MAAM,KAAA,qBAC1C,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MAEC,MAAM,IAAA,CAAK,IAAA;AAAA,MACX,IAAI,IAAA,CAAK,EAAA;AAAA,MACT,IAAA;AAAA,MACA,MAAA,EAAQ,KAAA;AAAA,MACR,UAAA,EACE,IAAA,CAAK,cAAA,IAAkB,KAAA,KAAU,eAAe,UAAA,GAAa;AAAA,KAAA;AAAA,IAN1D,IAAA,CAAK;AAAA,GASb,CAAA;AAED,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,KAAA;AAAA,IACP,SAAA,IAAa,EAAE,IAAA,CAAK,cAAA,IAAkB,kBAAkB,MAAA,CAAO,SAAA;AAAA,IAC/D,SAAS,MAAA,CAAO;AAAA,GAClB;AAEA,EAAA,MAAM;AAAA,IACJ,iBAAA,EAAmB,cAAA;AAAA,IACnB,YAAA,EAAc,SAAA;AAAA,IACd,GAAG;AAAA,MACD,IAAA,CAAK,cAAA;AAET,EAAA,uBACE,GAAA,CAAC,OAAA,EAAA,EAAQ,aAAA,EAAa,kBAAA,EAAoB,aAAW,SAAA,EACnD,QAAA,kBAAA,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,aAAA;AAAA,MACV,GAAG,IAAA;AAAA,MACJ,iBAAA,EAAiB,YAAY,MAAA,GAAY,cAAA;AAAA,MACzC,YAAA,EAAY,SAAA;AAAA,MACZ,MAAA,EAAQ,QAAQ,MAAA,GAAS,OAAA;AAAA,MACzB,YAAA,EAAc,KAAK,QAAA,CAAS,YAAA;AAAA,MAE3B,gBAAM,MAAA,KAAW,CAAA,IAAK,kBAAA,mBAAqB,GAAA,CAAC,iBAAc,CAAA,GAAK;AAAA;AAAA,GAClE,EACF,CAAA;AAEJ;;;;"}

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

@@ -5,15 +5,14 @@ import { useGridItemProps } from './hooks/useGridItemProps.mjs';
 import { useList } from '../../../../hooks/useList.mjs';
 import ItemsGridListItemView from '../../../../../../views/ItemsGridListItemView.mjs';
 import { mergeRefs } from '@react-aria/utils';
-import { Suspense } from 'react';
+import { memo, Suspense } from 'react';
 import styles from './Item.module.scss.mjs';
 import { ListItemSkeletonView } from './components/ListItemSkeletonView/ListItemSkeletonView.mjs';
-const Item = (props) => {
-  const { id, data, triggerRef } = props;
-  const list = useList();
+const ItemImpl = (props) => {
+  const { id, data, triggerRef, list, isTile } = props;
   const itemView = list.itemView;
-  const { gridItemProps, children } = useGridItemProps(props);
+  const { gridItemProps, children } = useGridItemProps(props, list);
   if (!itemView) {
     return null;
   }
@@ -30,7 +29,7 @@ const Item = (props) => {
       href,
       target: itemView.target,
       hasAction,
-      isTile: list.viewMode.isTiles,
+      isTile,
       ...gridItemPropsWithRef,
       children: /* @__PURE__ */ jsx(
         Suspense,
@@ -42,6 +41,11 @@ const Item = (props) => {
     }
   );
 };
+const Item = memo(
+  ItemImpl,
+  (prev, next) => prev.id === next.id && prev.data === next.data && prev.triggerRef === next.triggerRef && prev.isTile === next.isTile
+);
+Item.displayName = "Item";
 const ItemContainer = (props) => {
   const list = useList();
   return /* @__PURE__ */ jsx(

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Item.mjs","sources":["../../../../../../../../../../../src/components/List/components/Items/components/Item/Item.tsx"],"sourcesContent":["import { useGridItemProps } from \"@/components/List/components/Items/components/Item/hooks/useGridItemProps\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport ItemsGridListItemView from \"@/views/ItemsGridListItemView\";\nimport { mergeRefs } from \"@react-aria/utils\";\nimport type { FC, PropsWithChildren, Ref } from \"react\";\nimport { Suspense } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport styles from \"./Item.module.scss\";\nimport { ListItemSkeletonView } from \"./components/ListItemSkeletonView/ListItemSkeletonView\";\n\ninterface Props extends PropsWithChildren {\n id: Key;\n data: never;\n triggerRef?: Ref<HTMLDivElement>;\n}\n\~~nexport~~ ~~const~~ ~~Item~~ = (props: Props) => {\n const { id, data, triggerRef } = props;\n ~~const list = useList();\n~~\n const itemView = list.itemView;\n\n const { gridItemProps, children } = useGridItemProps(props);\n\n if (!itemView) {\n return null;\n }\n\n const textValue = itemView.textValue ? itemView.textValue(data) : undefined;\n const href = itemView.href ? itemView.href(data) : undefined;\n const hasAction = !!gridItemProps.onAction \|\| !!href;\n\n const existingRef = \"ref\" in gridItemProps ? gridItemProps.ref : undefined;\n const gridItemPropsWithRef = triggerRef\n ? { ...gridItemProps, ref: mergeRefs(existingRef, triggerRef) }\n : gridItemProps;\n\n return (\n <ItemsGridListItemView\n id={id}\n textValue={textValue}\n href={href}\n target={itemView.target}\n hasAction={hasAction}\n isTile={~~list.viewMode.isTiles~~}\n {...gridItemPropsWithRef}\n >\n <Suspense\n fallback={<ListItemSkeletonView viewMode={list.viewMode.value} />}\n >\n {children}\n </Suspense>\n </ItemsGridListItemView>\n );\n};\n\nexport const ItemContainer: FC<~~Props~~> = (props) => {\n const list = useList();\n return (\n <ItemsGridListItemView\n textValue=\"-\"\n className={styles.item}\n isTile={list.viewMode.isTiles}\n >\n {props.children}\n </ItemsGridListItemView>\n );\n};\n\nexport default Item;\n"],"names":[],"mappings":";;;;;;;;;~~AAgBO~~,MAAM,~~IAAA~~,~~GAAO~~,CAAC,KAAA,KAAiB;~~AACpC~~,EAAA,MAAM,EAAE,EAAA,EAAI,IAAA,EAAM,UAAA,~~EAAW~~,~~GAAI~~,~~KAAA;AACjC~~,~~EAAA~~,~~MAAM~~,~~OAAO,OAAA,EAAQ~~;~~AAErB~~,EAAA,MAAM,WAAW,IAAA,CAAK,QAAA;AAEtB,EAAA,MAAM,EAAE,aAAA,EAAe,QAAA,EAAS,GAAI,~~iBAAiB~~,~~KAAK~~,CAAA;~~AAE1D~~,EAAA,IAAI,CAAC,QAAA,EAAU;AACb,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,YAAY,QAAA,CAAS,SAAA,GAAY,QAAA,CAAS,SAAA,CAAU,IAAI,CAAA,GAAI,MAAA;AAClE,EAAA,MAAM,OAAO,QAAA,CAAS,IAAA,GAAO,QAAA,CAAS,IAAA,CAAK,IAAI,CAAA,GAAI,MAAA;AACnD,EAAA,MAAM,YAAY,CAAC,CAAC,aAAA,CAAc,QAAA,IAAY,CAAC,CAAC,IAAA;AAEhD,EAAA,MAAM,WAAA,GAAc,KAAA,IAAS,aAAA,GAAgB,aAAA,CAAc,GAAA,GAAM,MAAA;AACjE,EAAA,MAAM,oBAAA,GAAuB,UAAA,GACzB,EAAE,GAAG,aAAA,EAAe,KAAK,SAAA,CAAU,WAAA,EAAa,UAAU,CAAA,EAAE,GAC5D,aAAA;AAEJ,EAAA,uBACE,GAAA;AAAA,IAAC,qBAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAQ,QAAA,CAAS,MAAA;AAAA,MACjB,SAAA;AAAA,MACA,MAAA~~,EAAQ,KAAK,QAAA,CAAS,OAAA~~;AAAA,~~MACrB~~,GAAG,oBAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,0BAAU,GAAA,CAAC,oBAAA,EAAA,EAAqB,QAAA,EAAU,IAAA,CAAK,SAAS,KAAA,EAAO,CAAA;AAAA,UAE9D;AAAA;AAAA;AACH;AAAA,GACF;AAEJ;AAEO,MAAM,aAAA,~~GAA2B~~,CAAC,KAAA,KAAU;~~AACjD~~,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,uBACE,GAAA;AAAA,IAAC,qBAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,GAAA;AAAA,MACV,WAAW,MAAA,CAAO,IAAA;AAAA,MAClB,MAAA,EAAQ,KAAK,QAAA,CAAS,OAAA;AAAA,MAErB,QAAA,EAAA,KAAA,CAAM;AAAA;AAAA,GACT;AAEJ;;;;"}
1	+ {"version":3,"file":"Item.mjs","sources":["../../../../../../../../../../../src/components/List/components/Items/components/Item/Item.tsx"],"sourcesContent":["import { useGridItemProps } from \"@/components/List/components/Items/components/Item/hooks/useGridItemProps\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport type ListModel from \"@/components/List/model/List\";\nimport ItemsGridListItemView from \"@/views/ItemsGridListItemView\";\nimport { mergeRefs } from \"@react-aria/utils\";\nimport type { FC, PropsWithChildren, Ref } from \"react\";\nimport { memo, Suspense } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport styles from \"./Item.module.scss\";\nimport { ListItemSkeletonView } from \"./components/ListItemSkeletonView/ListItemSkeletonView\";\n\ninterface Props extends PropsWithChildren {\n id: Key;\n data: never;\n triggerRef?: Ref<HTMLDivElement>;\n list: ListModel<never>;\n isTile: boolean;\n}\n\nconst ItemImpl = (props: Props) => {\n const { id, data, triggerRef, list, isTile } = props;\n\n const itemView = list.itemView;\n\n const { gridItemProps, children } = useGridItemProps(props, list);\n\n if (!itemView) {\n return null;\n }\n\n const textValue = itemView.textValue ? itemView.textValue(data) : undefined;\n const href = itemView.href ? itemView.href(data) : undefined;\n const hasAction = !!gridItemProps.onAction \|\| !!href;\n\n const existingRef = \"ref\" in gridItemProps ? gridItemProps.ref : undefined;\n const gridItemPropsWithRef = triggerRef\n ? { ...gridItemProps, ref: mergeRefs(existingRef, triggerRef) }\n : gridItemProps;\n\n return (\n <ItemsGridListItemView\n id={id}\n textValue={textValue}\n href={href}\n target={itemView.target}\n hasAction={hasAction}\n isTile={isTile}\n {...gridItemPropsWithRef}\n >\n <Suspense\n fallback={<ListItemSkeletonView viewMode={list.viewMode.value} />}\n >\n {children}\n </Suspense>\n </ItemsGridListItemView>\n );\n};\n\nexport const Item = memo(\n ItemImpl,\n (prev, next) =>\n prev.id === next.id &&\n prev.data === next.data &&\n prev.triggerRef === next.triggerRef &&\n prev.isTile === next.isTile,\n);\nItem.displayName = \"Item\";\n\ninterface ItemContainerProps extends PropsWithChildren {\n id?: Key;\n data?: never;\n}\n\nexport const ItemContainer: FC<ItemContainerProps> = (props) => {\n const list = useList();\n return (\n <ItemsGridListItemView\n textValue=\"-\"\n className={styles.item}\n isTile={list.viewMode.isTiles}\n >\n {props.children}\n </ItemsGridListItemView>\n );\n};\n\nexport default Item;\n"],"names":[],"mappings":";;;;;;;;;AAmBA,MAAM,QAAA,GAAW,CAAC,KAAA,KAAiB;AACjC,EAAA,MAAM,EAAE,EAAA,EAAI,IAAA,EAAM,UAAA,EAAY,IAAA,EAAM,QAAO,GAAI,KAAA;AAE/C,EAAA,MAAM,WAAW,IAAA,CAAK,QAAA;AAEtB,EAAA,MAAM,EAAE,aAAA,EAAe,QAAA,EAAS,GAAI,gBAAA,CAAiB,OAAO,IAAI,CAAA;AAEhE,EAAA,IAAI,CAAC,QAAA,EAAU;AACb,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,YAAY,QAAA,CAAS,SAAA,GAAY,QAAA,CAAS,SAAA,CAAU,IAAI,CAAA,GAAI,MAAA;AAClE,EAAA,MAAM,OAAO,QAAA,CAAS,IAAA,GAAO,QAAA,CAAS,IAAA,CAAK,IAAI,CAAA,GAAI,MAAA;AACnD,EAAA,MAAM,YAAY,CAAC,CAAC,aAAA,CAAc,QAAA,IAAY,CAAC,CAAC,IAAA;AAEhD,EAAA,MAAM,WAAA,GAAc,KAAA,IAAS,aAAA,GAAgB,aAAA,CAAc,GAAA,GAAM,MAAA;AACjE,EAAA,MAAM,oBAAA,GAAuB,UAAA,GACzB,EAAE,GAAG,aAAA,EAAe,KAAK,SAAA,CAAU,WAAA,EAAa,UAAU,CAAA,EAAE,GAC5D,aAAA;AAEJ,EAAA,uBACE,GAAA;AAAA,IAAC,qBAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAQ,QAAA,CAAS,MAAA;AAAA,MACjB,SAAA;AAAA,MACA,MAAA;AAAA,MACC,GAAG,oBAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,0BAAU,GAAA,CAAC,oBAAA,EAAA,EAAqB,QAAA,EAAU,IAAA,CAAK,SAAS,KAAA,EAAO,CAAA;AAAA,UAE9D;AAAA;AAAA;AACH;AAAA,GACF;AAEJ,CAAA;AAEO,MAAM,IAAA,GAAO,IAAA;AAAA,EAClB,QAAA;AAAA,EACA,CAAC,IAAA,EAAM,IAAA,KACL,IAAA,CAAK,EAAA,KAAO,KAAK,EAAA,IACjB,IAAA,CAAK,IAAA,KAAS,IAAA,CAAK,QACnB,IAAA,CAAK,UAAA,KAAe,KAAK,UAAA,IACzB,IAAA,CAAK,WAAW,IAAA,CAAK;AACzB;AACA,IAAA,CAAK,WAAA,GAAc,MAAA;AAOZ,MAAM,aAAA,GAAwC,CAAC,KAAA,KAAU;AAC9D,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,uBACE,GAAA;AAAA,IAAC,qBAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,GAAA;AAAA,MACV,WAAW,MAAA,CAAO,IAAA;AAAA,MAClB,MAAA,EAAQ,KAAK,QAAA,CAAS,OAAA;AAAA,MAErB,QAAA,EAAA,KAAA,CAAM;AAAA;AAAA,GACT;AAEJ;;;;"}

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

@@ -2,40 +2,13 @@
 /* */
 import { jsx } from 'react/jsx-runtime';
 import { useState, useId, useRef, useEffect } from 'react';
-import 'invariant';
-import 'react-aria-components';
-import 'clsx';
-import '../../../../ListItemView/ListItemView.mjs';
 import { dynamic } from '../../../../../../../lib/propsContext/dynamicProps/dynamic.mjs';
 import '../../../../../../../lib/propsContext/propsContext.mjs';
 import { PropsContextProvider } from '../../../../../../../lib/propsContext/components/PropsContextProvider.mjs';
-import '../../../../../../ColumnLayout/ColumnLayout.mjs';
-import '../../../../ListSummary/ListSummary.mjs';
-import '../../../../../../../views/DivView.mjs';
-import '@mittwald/flow-icons';
-import '../../../../../../Icon/components/IconSetProvider.mjs';
-import '../../../../../../Icon/Icon.mjs';
-import '../../../../../../../views/IconView.mjs';
-import '../../../../../../../views/IllustratedMessageView.mjs';
-import '../../../../../../../views/HeadingView.mjs';
-import '../../../../../../../views/TextView.mjs';
-import '../../../../../../TranslationProvider/TranslationProvider.mjs';
-import 'remeda';
-import 'intl-messageformat';
-import '@react-aria/i18n';
-import 'react-aria';
-import '../../../../../../IllustratedMessage/IllustratedMessage.mjs';
-import '../../../../../../Heading/Heading.mjs';
-import '../../../../../../Text/Text.mjs';
-import { useList } from '../../../../../hooks/useList.mjs';
-import '../../../../../listContext.mjs';
-import 'mobx';
-import '../../../../../List.mjs';
 import { AccordionButton } from '../components/AccordionButton.mjs';
-const useGridItemProps = (props) => {
+const useGridItemProps = (props, list) => {
   const { data, children: childrenFromProps } = props;
-  const list = useList();
   const itemView = list.itemView;
   const onAction = list.onAction;
   const [isExpanded, setIsExpanded] = useState(

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useGridItemProps.mjs","sources":["../../../../../../../../../../../../src/components/List/components/Items/components/Item/hooks/useGridItemProps.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport { ~~useList~~ } from \"@/components/List\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { AccordionButton } from \"@/components/List/components/Items/components/Item/components/AccordionButton\";\n\ninterface P extends PropsWithChildren {\n data: never;\n}\n\nexport const useGridItemProps = (props: P) => {\n const { data, children: childrenFromProps } = props;\n const ~~list = useList();\n const~~ itemView = list.itemView;\n const onAction = list.onAction;\n\n const [isExpanded, setIsExpanded] = useState(\n itemView?.defaultExpanded?.(data) ?? false,\n );\n const contentElementId = useId();\n const itemRef = useRef<HTMLDivElement>(null);\n\n const accordion = list.accordion;\n const children = childrenFromProps ?? itemView?.render(data);\n\n useEffect(() => {\n if (accordion) {\n itemRef.current?.setAttribute(\"aria-expanded\", String(isExpanded));\n itemRef.current?.setAttribute(\"aria-controls\", contentElementId);\n }\n }, [isExpanded, contentElementId, itemRef.current, accordion]);\n\n if (!accordion) {\n return {\n gridItemProps: {\n onAction: onAction\n ? () => {\n onAction?.(data);\n }\n : undefined,\n },\n children,\n };\n }\n\n const toggleAccordion = () => {\n setIsExpanded((current) => !current);\n onAction?.(data);\n };\n\n const propsContext: PropsContext = {\n Content: {\n id: dynamic((p) => (p.slot === \"bottom\" ? contentElementId : undefined)),\n wrapWith: dynamic((p) =>\n p.slot === \"bottom\" ? (\n <AccordionButton\n contentElementId={contentElementId}\n toggle={toggleAccordion}\n isExpanded={isExpanded}\n />\n ) : undefined,\n ),\n },\n };\n\n return {\n gridItemProps: {\n ref: itemRef,\n onAction: toggleAccordion,\n },\n children: (\n <PropsContextProvider\n props={propsContext}\n dependencies={[contentElementId, isExpanded]}\n >\n {children}\n </PropsContextProvider>\n ),\n };\n};\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAWO,MAAM,gBAAA,GAAmB,CAAC,KAAA,~~KAAa~~;~~AAC5C~~,EAAA,MAAM,EAAE,IAAA,EAAM,QAAA,EAAU,iBAAA,EAAkB,GAAI,KAAA;AAC9C,EAAA,MAAM,~~OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,~~WAAW,IAAA,CAAK,QAAA;AACtB,EAAA,MAAM,WAAW,IAAA,CAAK,QAAA;AAEtB,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,QAAA;AAAA,IAClC,QAAA,EAAU,eAAA,GAAkB,IAAI,CAAA,IAAK;AAAA,GACvC;AACA,EAAA,MAAM,mBAAmB,KAAA,EAAM;AAC/B,EAAA,MAAM,OAAA,GAAU,OAAuB,IAAI,CAAA;AAE3C,EAAA,MAAM,YAAY,IAAA,CAAK,SAAA;AACvB,EAAA,MAAM,QAAA,GAAW,iBAAA,IAAqB,QAAA,EAAU,MAAA,CAAO,IAAI,CAAA;AAE3D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,SAAA,EAAW;AACb,MAAA,OAAA,CAAQ,OAAA,EAAS,YAAA,CAAa,eAAA,EAAiB,MAAA,CAAO,UAAU,CAAC,CAAA;AACjE,MAAA,OAAA,CAAQ,OAAA,EAAS,YAAA,CAAa,eAAA,EAAiB,gBAAgB,CAAA;AAAA,IACjE;AAAA,EACF,GAAG,CAAC,UAAA,EAAY,kBAAkB,OAAA,CAAQ,OAAA,EAAS,SAAS,CAAC,CAAA;AAE7D,EAAA,IAAI,CAAC,SAAA,EAAW;AACd,IAAA,OAAO;AAAA,MACL,aAAA,EAAe;AAAA,QACb,QAAA,EAAU,WACN,MAAM;AACJ,UAAA,QAAA,GAAW,IAAI,CAAA;AAAA,QACjB,CAAA,GACA;AAAA,OACN;AAAA,MACA;AAAA,KACF;AAAA,EACF;AAEA,EAAA,MAAM,kBAAkB,MAAM;AAC5B,IAAA,aAAA,CAAc,CAAC,OAAA,KAAY,CAAC,OAAO,CAAA;AACnC,IAAA,QAAA,GAAW,IAAI,CAAA;AAAA,EACjB,CAAA;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,OAAA,EAAS;AAAA,MACP,EAAA,EAAI,QAAQ,CAAC,CAAA,KAAO,EAAE,IAAA,KAAS,QAAA,GAAW,mBAAmB,MAAU,CAAA;AAAA,MACvE,QAAA,EAAU,OAAA;AAAA,QAAQ,CAAC,CAAA,KACjB,CAAA,CAAE,IAAA,KAAS,QAAA,mBACT,GAAA;AAAA,UAAC,eAAA;AAAA,UAAA;AAAA,YACC,gBAAA;AAAA,YACA,MAAA,EAAQ,eAAA;AAAA,YACR;AAAA;AAAA,SACF,GACE;AAAA;AACN;AACF,GACF;AAEA,EAAA,OAAO;AAAA,IACL,aAAA,EAAe;AAAA,MACb,GAAA,EAAK,OAAA;AAAA,MACL,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,QAAA,kBACE,GAAA;AAAA,MAAC,oBAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,YAAA;AAAA,QACP,YAAA,EAAc,CAAC,gBAAA,EAAkB,UAAU,CAAA;AAAA,QAE1C;AAAA;AAAA;AACH,GAEJ;AACF;;;;"}
1	+ {"version":3,"file":"useGridItemProps.mjs","sources":["../../../../../../../../../../../../src/components/List/components/Items/components/Item/hooks/useGridItemProps.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport type List from \"@/components/List/model/List\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { AccordionButton } from \"@/components/List/components/Items/components/Item/components/AccordionButton\";\n\ninterface P extends PropsWithChildren {\n data: never;\n}\n\nexport const useGridItemProps = (props: P, list: List<never>) => {\n const { data, children: childrenFromProps } = props;\n const itemView = list.itemView;\n const onAction = list.onAction;\n\n const [isExpanded, setIsExpanded] = useState(\n itemView?.defaultExpanded?.(data) ?? false,\n );\n const contentElementId = useId();\n const itemRef = useRef<HTMLDivElement>(null);\n\n const accordion = list.accordion;\n const children = childrenFromProps ?? itemView?.render(data);\n\n useEffect(() => {\n if (accordion) {\n itemRef.current?.setAttribute(\"aria-expanded\", String(isExpanded));\n itemRef.current?.setAttribute(\"aria-controls\", contentElementId);\n }\n }, [isExpanded, contentElementId, itemRef.current, accordion]);\n\n if (!accordion) {\n return {\n gridItemProps: {\n onAction: onAction\n ? () => {\n onAction?.(data);\n }\n : undefined,\n },\n children,\n };\n }\n\n const toggleAccordion = () => {\n setIsExpanded((current) => !current);\n onAction?.(data);\n };\n\n const propsContext: PropsContext = {\n Content: {\n id: dynamic((p) => (p.slot === \"bottom\" ? contentElementId : undefined)),\n wrapWith: dynamic((p) =>\n p.slot === \"bottom\" ? (\n <AccordionButton\n contentElementId={contentElementId}\n toggle={toggleAccordion}\n isExpanded={isExpanded}\n />\n ) : undefined,\n ),\n },\n };\n\n return {\n gridItemProps: {\n ref: itemRef,\n onAction: toggleAccordion,\n },\n children: (\n <PropsContextProvider\n props={propsContext}\n dependencies={[contentElementId, isExpanded]}\n >\n {children}\n </PropsContextProvider>\n ),\n };\n};\n"],"names":[],"mappings":";;;;;;;AAWO,MAAM,gBAAA,GAAmB,CAAC,KAAA,EAAU,IAAA,KAAsB;AAC/D,EAAA,MAAM,EAAE,IAAA,EAAM,QAAA,EAAU,iBAAA,EAAkB,GAAI,KAAA;AAC9C,EAAA,MAAM,WAAW,IAAA,CAAK,QAAA;AACtB,EAAA,MAAM,WAAW,IAAA,CAAK,QAAA;AAEtB,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,QAAA;AAAA,IAClC,QAAA,EAAU,eAAA,GAAkB,IAAI,CAAA,IAAK;AAAA,GACvC;AACA,EAAA,MAAM,mBAAmB,KAAA,EAAM;AAC/B,EAAA,MAAM,OAAA,GAAU,OAAuB,IAAI,CAAA;AAE3C,EAAA,MAAM,YAAY,IAAA,CAAK,SAAA;AACvB,EAAA,MAAM,QAAA,GAAW,iBAAA,IAAqB,QAAA,EAAU,MAAA,CAAO,IAAI,CAAA;AAE3D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,SAAA,EAAW;AACb,MAAA,OAAA,CAAQ,OAAA,EAAS,YAAA,CAAa,eAAA,EAAiB,MAAA,CAAO,UAAU,CAAC,CAAA;AACjE,MAAA,OAAA,CAAQ,OAAA,EAAS,YAAA,CAAa,eAAA,EAAiB,gBAAgB,CAAA;AAAA,IACjE;AAAA,EACF,GAAG,CAAC,UAAA,EAAY,kBAAkB,OAAA,CAAQ,OAAA,EAAS,SAAS,CAAC,CAAA;AAE7D,EAAA,IAAI,CAAC,SAAA,EAAW;AACd,IAAA,OAAO;AAAA,MACL,aAAA,EAAe;AAAA,QACb,QAAA,EAAU,WACN,MAAM;AACJ,UAAA,QAAA,GAAW,IAAI,CAAA;AAAA,QACjB,CAAA,GACA;AAAA,OACN;AAAA,MACA;AAAA,KACF;AAAA,EACF;AAEA,EAAA,MAAM,kBAAkB,MAAM;AAC5B,IAAA,aAAA,CAAc,CAAC,OAAA,KAAY,CAAC,OAAO,CAAA;AACnC,IAAA,QAAA,GAAW,IAAI,CAAA;AAAA,EACjB,CAAA;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,OAAA,EAAS;AAAA,MACP,EAAA,EAAI,QAAQ,CAAC,CAAA,KAAO,EAAE,IAAA,KAAS,QAAA,GAAW,mBAAmB,MAAU,CAAA;AAAA,MACvE,QAAA,EAAU,OAAA;AAAA,QAAQ,CAAC,CAAA,KACjB,CAAA,CAAE,IAAA,KAAS,QAAA,mBACT,GAAA;AAAA,UAAC,eAAA;AAAA,UAAA;AAAA,YACC,gBAAA;AAAA,YACA,MAAA,EAAQ,eAAA;AAAA,YACR;AAAA;AAAA,SACF,GACE;AAAA;AACN;AACF,GACF;AAEA,EAAA,OAAO;AAAA,IACL,aAAA,EAAe;AAAA,MACb,GAAA,EAAK,OAAA;AAAA,MACL,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,QAAA,kBACE,GAAA;AAAA,MAAC,oBAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,YAAA;AAAA,QACP,YAAA,EAAc,CAAC,gBAAA,EAAkB,UAAU,CAAA;AAAA,QAE1C;AAAA;AAAA;AACH,GAEJ;AACF;;;;"}

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

@@ -27,6 +27,7 @@ import { OffCanvasSuspenseFallback } from './components/OffCanvasSuspenseFallbac
 import { Wrap } from '../Wrap/Wrap.mjs';
 import { ClearPropsContext } from '../../lib/propsContext/components/ClearPropsContext.mjs';
 import '../TranslationProvider/TranslationProvider.mjs';
+import { useVirtualKeyboardVisible } from '../../lib/hooks/dom/useVirtualKeyboardVisible.mjs';
 import locales from '../../../../../_virtual/_.locale.json@4119db69ca94e24d796b8e08482bc927.mjs';
 const Modal = flowComponent("Modal", (props) => {
@@ -42,10 +43,12 @@ const Modal = flowComponent("Modal", (props) => {
     ...overlayProps
   } = props;
   const stringFormatter = useLocalizedStringFormatter(locales, "Modal");
+  const keyboardVisible = useVirtualKeyboardVisible();
   const rootClassName = clsx(
     offCanvas ? styles.offCanvas : styles.modal,
     styles[`size-${size}`],
     offCanvasOrientation === "left" && styles["left"],
+    keyboardVisible && styles.keyboardVisible,
     className
   );
   const generatedId = useId();

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.mjs","sources":["../../../../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import { type PropsWithChildren, type ReactNode, Suspense, useId } from \"react\";\nimport styles from \"./Modal.module.scss\";\nimport clsx from \"clsx\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { OverlayController } from \"@/lib/controller/overlay\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Overlay, type OverlayProps } from \"@/components/Overlay/Overlay\";\nimport { Action } from \"@/components/Action\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { OffCanvasSuspenseFallback } from \"@/components/Modal/components/OffCanvasSuspenseFallback\";\nimport Wrap from \"@/components/Wrap\";\nimport { ClearPropsContext } from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"./locales/.locale.json\";\n\ntype SupportedOverlayProps = Pick<\n OverlayProps,\n \"isOpen\" \| \"isDefaultOpen\" \| \"onOpen\" \| \"onClose\" \| \"onOpenChange\"\n>;\n\nexport interface ModalProps\n extends\n PropsWithChildren,\n FlowComponentProps,\n PropsWithClassName,\n SupportedOverlayProps {\n /* The size of the modal. @default \"s\" /\n size?: \"s\" \| \"m\" \| \"l\";\n /* Whether the modal should be displayed as an off canvas. /\n offCanvas?: boolean;\n /\n Whether the off canvas should be displayed on the right or left side of the\n * screen. @default \"right\"\n /\n offCanvasOrientation?: \"left\" \| \"right\";\n /* An overlay controller to control the modal state. /\n controller?: OverlayController;\n /\n Accepts \"actionConfirm\" to use the modal as a confirmation modal for an\n * action.\n /\n slot?: string;\n /* Whether the modal can be closed by clicking outside of it. /\n isDismissable?: boolean;\n /* Whether the close button should be visible */\n showCloseButton?: boolean;\n}\n\nexport const Modal = flowComponent(\"Modal\", (props) => {\n const {\n size = \"s\",\n offCanvas,\n controller,\n children,\n ref,\n className,\n offCanvasOrientation = \"right\",\n showCloseButton,\n ...overlayProps\n } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"Modal\");\n\n const rootClassName = clsx(\n offCanvas ? styles.offCanvas : styles.modal,\n styles[`size-${size}`],\n offCanvasOrientation === \"left\" && styles[\"left\"],\n className,\n );\n\n const generatedId = useId();\n\n const header = (children: ReactNode) => (\n <>\n {children}\n <Action closeModal={{ bypassConfirmation: true }}>\n <ButtonView\n variant=\"plain\"\n color=\"secondary\"\n aria-label={stringFormatter.format(\"close\")}\n className={clsx(\n styles.closeButton,\n showCloseButton === true\n ? styles.alwaysVisible\n : showCloseButton === false\n ? styles.alwaysHidden\n : undefined,\n )}\n >\n <IconClose />\n </ButtonView>\n </Action>\n </>\n );\n\n const nestedHeadingLevel = 3;\n\n const nestedHeadingProps: PropsContext = {\n Heading: { level: nestedHeadingLevel },\n Section: {\n Header: { Heading: { level: nestedHeadingLevel } },\n Heading: { level: nestedHeadingLevel },\n hideSeparator: true,\n },\n Header: { Heading: { level: nestedHeadingLevel } },\n };\n\n const propsContext: PropsContext = {\n Content: {\n ...nestedHeadingProps,\n className: styles.content,\n },\n ColumnLayout: {\n ...nestedHeadingProps,\n l: [2, 1],\n m: [1],\n className: styles.columnLayout,\n AccentBox: { className: styles.accentBox, backgroundColor: \"neutral\" },\n wrapWith: <ClearPropsContext />,\n },\n Heading: {\n className: styles.header,\n level: 2,\n children: dynamic((props) => header(props.children)),\n id: generatedId,\n },\n ActionGroup: {\n className: styles.actionGroup,\n spacing: \"m\",\n Action: {\n closeModal: dynamic((props) => {\n if (props.closeModal === undefined) {\n return;\n }\n if (props.closeModal === true) {\n return { bypassConfirmation: true };\n }\n return {\n bypassConfirmation: true,\n ...props.closeModal,\n };\n }),\n closeOverlay: dynamic((props) => {\n if (props.closeOverlay === undefined) {\n return;\n }\n if (\n props.closeOverlay instanceof OverlayController \|\|\n typeof props.closeOverlay === \"string\"\n ) {\n return {\n bypassConfirmation: true,\n overlay: props.closeOverlay,\n };\n }\n return {\n bypassConfirmation: true,\n ...props.closeOverlay,\n };\n }),\n },\n },\n };\n\n return (\n <Overlay\n className={rootClassName}\n controller={controller}\n ref={ref}\n aria-labelledby={generatedId}\n {...overlayProps}\n >\n <PropsContextProvider props={propsContext}>\n <Wrap if={offCanvas}>\n <Suspense fallback={<OffCanvasSuspenseFallback />}>\n {children}\n </Suspense>\n </Wrap>\n </PropsContextProvider>\n </Overlay>\n );\n});\n\nexport default Modal;\n"],"names":["children","props"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDO~~,MAAM,KAAA,GAAQ,aAAA,CAAc,OAAA,EAAS,CAAC,KAAA,KAAU;AACrD,EAAA,MAAM;AAAA,IACJ,IAAA,GAAO,GAAA;AAAA,IACP,SAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAA;AAAA,IACA,SAAA;AAAA,IACA,oBAAA,GAAuB,OAAA;AAAA,IACvB,eAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,OAAO,CAAA;~~AAEpE~~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"}
1	+ {"version":3,"file":"Modal.mjs","sources":["../../../../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import { type PropsWithChildren, type ReactNode, Suspense, useId } from \"react\";\nimport styles from \"./Modal.module.scss\";\nimport clsx from \"clsx\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { OverlayController } from \"@/lib/controller/overlay\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Overlay, type OverlayProps } from \"@/components/Overlay/Overlay\";\nimport { Action } from \"@/components/Action\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { OffCanvasSuspenseFallback } from \"@/components/Modal/components/OffCanvasSuspenseFallback\";\nimport Wrap from \"@/components/Wrap\";\nimport { ClearPropsContext } from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { useVirtualKeyboardVisible } from \"@/lib/hooks/dom/useVirtualKeyboardVisible\";\nimport locales from \"./locales/.locale.json\";\n\ntype SupportedOverlayProps = Pick<\n OverlayProps,\n \"isOpen\" \| \"isDefaultOpen\" \| \"onOpen\" \| \"onClose\" \| \"onOpenChange\"\n>;\n\nexport interface ModalProps\n extends\n PropsWithChildren,\n FlowComponentProps,\n PropsWithClassName,\n SupportedOverlayProps {\n /* The size of the modal. @default \"s\" /\n size?: \"s\" \| \"m\" \| \"l\";\n /* Whether the modal should be displayed as an off canvas. /\n offCanvas?: boolean;\n /\n Whether the off canvas should be displayed on the right or left side of the\n * screen. @default \"right\"\n /\n offCanvasOrientation?: \"left\" \| \"right\";\n /* An overlay controller to control the modal state. /\n controller?: OverlayController;\n /\n Accepts \"actionConfirm\" to use the modal as a confirmation modal for an\n * action.\n /\n slot?: string;\n /* Whether the modal can be closed by clicking outside of it. /\n isDismissable?: boolean;\n /* Whether the close button should be visible */\n showCloseButton?: boolean;\n}\n\nexport const Modal = flowComponent(\"Modal\", (props) => {\n const {\n size = \"s\",\n offCanvas,\n controller,\n children,\n ref,\n className,\n offCanvasOrientation = \"right\",\n showCloseButton,\n ...overlayProps\n } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"Modal\");\n\n // On mobile the header/footer are docked (sticky) while at rest, but flow\n // normally while the on-screen keyboard is open so the content gets the full\n // available space (see Modal.module.scss). #2423\n const keyboardVisible = useVirtualKeyboardVisible();\n\n const rootClassName = clsx(\n offCanvas ? styles.offCanvas : styles.modal,\n styles[`size-${size}`],\n offCanvasOrientation === \"left\" && styles[\"left\"],\n keyboardVisible && styles.keyboardVisible,\n className,\n );\n\n const generatedId = useId();\n\n const header = (children: ReactNode) => (\n <>\n {children}\n <Action closeModal={{ bypassConfirmation: true }}>\n <ButtonView\n variant=\"plain\"\n color=\"secondary\"\n aria-label={stringFormatter.format(\"close\")}\n className={clsx(\n styles.closeButton,\n showCloseButton === true\n ? styles.alwaysVisible\n : showCloseButton === false\n ? styles.alwaysHidden\n : undefined,\n )}\n >\n <IconClose />\n </ButtonView>\n </Action>\n </>\n );\n\n const nestedHeadingLevel = 3;\n\n const nestedHeadingProps: PropsContext = {\n Heading: { level: nestedHeadingLevel },\n Section: {\n Header: { Heading: { level: nestedHeadingLevel } },\n Heading: { level: nestedHeadingLevel },\n hideSeparator: true,\n },\n Header: { Heading: { level: nestedHeadingLevel } },\n };\n\n const propsContext: PropsContext = {\n Content: {\n ...nestedHeadingProps,\n className: styles.content,\n },\n ColumnLayout: {\n ...nestedHeadingProps,\n l: [2, 1],\n m: [1],\n className: styles.columnLayout,\n AccentBox: { className: styles.accentBox, backgroundColor: \"neutral\" },\n wrapWith: <ClearPropsContext />,\n },\n Heading: {\n className: styles.header,\n level: 2,\n children: dynamic((props) => header(props.children)),\n id: generatedId,\n },\n ActionGroup: {\n className: styles.actionGroup,\n spacing: \"m\",\n Action: {\n closeModal: dynamic((props) => {\n if (props.closeModal === undefined) {\n return;\n }\n if (props.closeModal === true) {\n return { bypassConfirmation: true };\n }\n return {\n bypassConfirmation: true,\n ...props.closeModal,\n };\n }),\n closeOverlay: dynamic((props) => {\n if (props.closeOverlay === undefined) {\n return;\n }\n if (\n props.closeOverlay instanceof OverlayController \|\|\n typeof props.closeOverlay === \"string\"\n ) {\n return {\n bypassConfirmation: true,\n overlay: props.closeOverlay,\n };\n }\n return {\n bypassConfirmation: true,\n ...props.closeOverlay,\n };\n }),\n },\n },\n };\n\n return (\n <Overlay\n className={rootClassName}\n controller={controller}\n ref={ref}\n aria-labelledby={generatedId}\n {...overlayProps}\n >\n <PropsContextProvider props={propsContext}>\n <Wrap if={offCanvas}>\n <Suspense fallback={<OffCanvasSuspenseFallback />}>\n {children}\n </Suspense>\n </Wrap>\n </PropsContextProvider>\n </Overlay>\n );\n});\n\nexport default Modal;\n"],"names":["children","props"],"mappings":"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"}

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

@@ -11,6 +11,7 @@ const content = "flow--modal--content";
 const columnLayout = "flow--modal--column-layout";
 const accentBox = "flow--modal--accent-box";
 const left = "flow--modal--left";
+const keyboardVisible = "flow--modal--keyboard-visible";
 const styles = {
 	modal: modal,
 	offCanvas: offCanvas,
@@ -29,8 +30,9 @@ const styles = {
 	"modal-slide-in-from-right": "flow--modal--modal-slide-in-from-right",
 	left: left,
 	"modal-slide-in-from-left": "flow--modal--modal-slide-in-from-left",
-	"modal-slide-up": "flow--modal--modal-slide-up"
+	"modal-slide-up": "flow--modal--modal-slide-up",
+	keyboardVisible: keyboardVisible
 };
-export { accentBox, actionGroup, alwaysHidden, alwaysVisible, closeButton, columnLayout, content, styles as default, header, left, modal, offCanvas };
+export { accentBox, actionGroup, alwaysHidden, alwaysVisible, closeButton, columnLayout, content, styles as default, header, keyboardVisible, left, modal, offCanvas };
 //# sourceMappingURL=Modal.module.scss.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"Modal.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -6,13 +6,21 @@ import clsx from 'clsx';
 import styles from './Table.module.scss.mjs';
 const Table = (props) => {
-  const { children, className, verticalAlign = "top", ...rest } = props;
+  const {
+    children,
+    className,
+    verticalAlign = "top",
+    layout = "auto",
+    minWidth,
+    ...rest
+  } = props;
   const rootClassName = clsx(
     styles.table,
     styles[`vertical-align-${verticalAlign}`],
+    styles[`layout-${layout}`],
     className
   );
-  return /* @__PURE__ */ jsx("div", { className: styles.tableContainer, children: /* @__PURE__ */ jsx(Aria.Table, { className: rootClassName, ...rest, children }) });
+  return /* @__PURE__ */ jsx("div", { className: styles.tableContainer, children: /* @__PURE__ */ jsx("div", { className: styles.tableScrollArea, style: { minWidth }, children: /* @__PURE__ */ jsx(Aria.Table, { className: rootClassName, ...rest, children }) }) });
 };
 export { Table };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.mjs","sources":["../../../../../../../src/components/Table/Table.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Table.module.scss\";\n\nexport type TableProps = Omit<Aria.TableProps, \"render\" \| \"className\"> & {\n /** The vertical alignment of the table cells content. /\n verticalAlign?: \"top\" \| \"middle\";\n className?: string;\n};\n\n/* @flr-generate all */\nexport const Table: FC<TableProps> = (props) => {\n const { children, className, verticalAlign = \"top\", ...rest } = props;\n\n const rootClassName = clsx(\n styles.table,\n styles[`vertical-align-${verticalAlign}`],\n className,\n );\n\n return (\n <div className={styles.tableContainer}>\n <Aria.Table className={rootClassName} {...rest}>\n {children}\n </Aria.Table>\n </div>\n );\n};\n\nexport default Table;\n"],"names":[],"mappings":";;;;;~~AAYO~~,MAAM,KAAA,GAAwB,CAAC,KAAA,KAAU;AAC9C,EAAA,MAAM,~~EAAE~~,QAAA,~~EAAU~~,SAAA,~~EAAW~~,~~gBAAgB~~,KAAA,~~EAAO~~,GAAG,~~MAAK~~,GAAI,KAAA;~~AAEhE~~,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,KAAA;AAAA,IACP,MAAA,CAAO,CAAA,eAAA,EAAkB,aAAa,CAAA,CAAE,CAAA;AAAA,IACxC;AAAA,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,~~gBACrB~~,QAAA,kBAAA,GAAA,CAAC,IAAA,CAAK,KAAA,EAAL,EAAW,SAAA,EAAW,~~aAAA~~,~~EAAgB,~~GAAG,IAAA,EACvC,~~UACH~~,CAAA,EACF,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"Table.mjs","sources":["../../../../../../../src/components/Table/Table.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Table.module.scss\";\n\nexport type TableProps = Omit<\n Aria.TableProps,\n \"render\" \| \"className\" \| \"style\"\n> & {\n /** The vertical alignment of the table cells content. /\n verticalAlign?: \"top\" \| \"middle\";\n /\n The column-sizing algorithm of the table. Use \"fixed\" together with column\n * widths to enforce exact widths. @default \"auto\"\n /\n layout?: \"auto\" \| \"fixed\";\n /\n The minimum width of the table. Below this width the table scrolls\n * horizontally instead of shrinking its columns.\n /\n minWidth?: number \| string;\n className?: string;\n};\n\n/* @flr-generate all */\nexport const Table: FC<TableProps> = (props) => {\n const {\n children,\n className,\n verticalAlign = \"top\",\n layout = \"auto\",\n minWidth,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.table,\n styles[`vertical-align-${verticalAlign}`],\n styles[`layout-${layout}`],\n className,\n );\n\n return (\n <div className={styles.tableContainer}>\n <div className={styles.tableScrollArea} style={{ minWidth }}>\n <Aria.Table className={rootClassName} {...rest}>\n {children}\n </Aria.Table>\n </div>\n </div>\n );\n};\n\nexport default Table;\n"],"names":[],"mappings":";;;;;AAyBO,MAAM,KAAA,GAAwB,CAAC,KAAA,KAAU;AAC9C,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,aAAA,GAAgB,KAAA;AAAA,IAChB,MAAA,GAAS,MAAA;AAAA,IACT,QAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,KAAA;AAAA,IACP,MAAA,CAAO,CAAA,eAAA,EAAkB,aAAa,CAAA,CAAE,CAAA;AAAA,IACxC,MAAA,CAAO,CAAA,OAAA,EAAU,MAAM,CAAA,CAAE,CAAA;AAAA,IACzB;AAAA,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,cAAA,EACrB,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,eAAA,EAAiB,KAAA,EAAO,EAAE,UAAS,EACxD,QAAA,kBAAA,GAAA,CAAC,IAAA,CAAK,KAAA,EAAL,EAAW,SAAA,EAAW,eAAgB,GAAG,IAAA,EACvC,QAAA,EACH,CAAA,EACF,CAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -1,6 +1,7 @@
 "use client"
 /* */
 const tableContainer = "flow--table--table-container";
+const tableScrollArea = "flow--table--table-scroll-area";
 const table = "flow--table";
 const column = "flow--table--column";
 const cell = "flow--table--cell";
@@ -10,6 +11,7 @@ const row = "flow--table--row";
 const footer = "flow--table--footer";
 const styles = {
 	tableContainer: tableContainer,
+	tableScrollArea: tableScrollArea,
 	table: table,
 	column: column,
 	cell: cell,
@@ -19,8 +21,10 @@ const styles = {
 	body: body,
 	row: row,
 	footer: footer,
-	"vertical-align-middle": "flow--table--vertical-align-middle"
+	"vertical-align-middle": "flow--table--vertical-align-middle",
+	"layout-auto": "flow--table--layout-auto",
+	"layout-fixed": "flow--table--layout-fixed"
 };
-export { body, cell, column, styles as default, footer, header, row, table, tableContainer };
+export { body, cell, column, styles as default, footer, header, row, table, tableContainer, tableScrollArea };
 //# sourceMappingURL=Table.module.scss.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"Table.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -8,14 +8,30 @@ import '../../../../lib/propsContext/propsContext.mjs';
 import { PropsContextProvider } from '../../../../lib/propsContext/components/PropsContextProvider.mjs';
 const TableColumn = (props) => {
-  const { children, className, horizontalAlign = "start", ...rest } = props;
+  const {
+    children,
+    className,
+    horizontalAlign = "start",
+    width,
+    minWidth,
+    ...rest
+  } = props;
   const rootClassName = clsx(
     styles.column,
     styles[`horizontal-align-${horizontalAlign}`],
     className
   );
   const propsContext = { Checkbox: { slot: null } };
-  return /* @__PURE__ */ jsx(Aria.Column, { isRowHeader: true, className: rootClassName, ...rest, children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children }) });
+  return /* @__PURE__ */ jsx(
+    Aria.Column,
+    {
+      isRowHeader: true,
+      className: rootClassName,
+      ...rest,
+      style: { width, minWidth },
+      children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children })
+    }
+  );
 };
 export { TableColumn };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TableColumn.mjs","sources":["../../../../../../../../../src/components/Table/components/TableColumn/TableColumn.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\nexport interface TableColumnProps\n extends Omit<Aria.ColumnProps, \"children\">, PropsWithChildren {\n /** Horizontal alignment of the cell content @default \"start\" /\n horizontalAlign?: \"start\" \| \"center\" \| \"end\";\n}\n\n/* @flr-generate all */\nexport const TableColumn: FC<TableColumnProps> = (props) => {\n const { children, className, horizontalAlign = \"start\", ...rest } = props;\n const rootClassName = clsx(\n styles.column,\n styles[`horizontal-align-${horizontalAlign}`],\n className,\n );\n\n const propsContext: PropsContext = { Checkbox: { slot: null } };\n\n return (\n <Aria.Column isRowHeader className={rootClassName} {...rest}>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </Aria.Column>\n );\n};\n\nexport default TableColumn;\n"],"names":[],"mappings":";;;;;;;~~AAaO~~,MAAM,WAAA,GAAoC,CAAC,KAAA,KAAU;AAC1D,EAAA,MAAM,~~EAAE~~,QAAA,~~EAAU~~,SAAA,~~EAAW~~,~~kBAAkB~~,OAAA,~~EAAS~~,GAAG,~~MAAK~~,GAAI,KAAA;~~AACpE~~,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,MAAA;AAAA,IACP,MAAA,CAAO,CAAA,iBAAA,EAAoB,eAAe,CAAA,CAAE,CAAA;AAAA,IAC5C;AAAA,GACF;AAEA,EAAA,MAAM,eAA6B,EAAE,QAAA,EAAU,EAAE,IAAA,EAAM,MAAK,EAAE;AAE9D,EAAA,uBACE,GAAA,~~CAAC~~,IAAA,CAAK,MAAA,~~EAAL~~,~~EAAY~~,~~aAAW~~,IAAA,~~EAAC~~,SAAA,EAAW,aAAA,~~EAAgB~~,GAAG,~~MACrD~~,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,~~UACH~~,~~CAAA~~,~~EACF,CAAA~~;AAEJ;;;;"}
1	+ {"version":3,"file":"TableColumn.mjs","sources":["../../../../../../../../../src/components/Table/components/TableColumn/TableColumn.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\nexport interface TableColumnProps\n extends\n Omit<\n Aria.ColumnProps,\n \"children\" \| \"width\" \| \"minWidth\" \| \"maxWidth\" \| \"style\"\n >,\n PropsWithChildren {\n /** Horizontal alignment of the cell content @default \"start\" /\n horizontalAlign?: \"start\" \| \"center\" \| \"end\";\n /* The width of the column. /\n width?: number \| string;\n /* The minimum width of the column. /\n minWidth?: number \| string;\n}\n\n/* @flr-generate all */\nexport const TableColumn: FC<TableColumnProps> = (props) => {\n const {\n children,\n className,\n horizontalAlign = \"start\",\n width,\n minWidth,\n ...rest\n } = props;\n const rootClassName = clsx(\n styles.column,\n styles[`horizontal-align-${horizontalAlign}`],\n className,\n );\n\n const propsContext: PropsContext = { Checkbox: { slot: null } };\n\n return (\n <Aria.Column\n isRowHeader\n className={rootClassName}\n {...rest}\n style={{ width, minWidth }}\n >\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </Aria.Column>\n );\n};\n\nexport default TableColumn;\n"],"names":[],"mappings":";;;;;;;AAsBO,MAAM,WAAA,GAAoC,CAAC,KAAA,KAAU;AAC1D,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA,GAAkB,OAAA;AAAA,IAClB,KAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AACJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,MAAA;AAAA,IACP,MAAA,CAAO,CAAA,iBAAA,EAAoB,eAAe,CAAA,CAAE,CAAA;AAAA,IAC5C;AAAA,GACF;AAEA,EAAA,MAAM,eAA6B,EAAE,QAAA,EAAU,EAAE,IAAA,EAAM,MAAK,EAAE;AAE9D,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA,CAAK,MAAA;AAAA,IAAL;AAAA,MACC,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW,aAAA;AAAA,MACV,GAAG,IAAA;AAAA,MACJ,KAAA,EAAO,EAAE,KAAA,EAAO,QAAA,EAAS;AAAA,MAEzB,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/js/packages/components/src/lib/hooks/dom/useVirtualKeyboardVisible.mjs ADDED Viewed

@@ -0,0 +1,29 @@
+"use client"
+/* */
+import { useState, useEffect } from 'react';
+const VIRTUAL_KEYBOARD_MIN_HEIGHT = 150;
+const isVirtualKeyboardVisible = (layoutViewportHeight, visualViewportHeight, threshold = VIRTUAL_KEYBOARD_MIN_HEIGHT) => layoutViewportHeight - visualViewportHeight > threshold;
+const useVirtualKeyboardVisible = () => {
+  const [visible, setVisible] = useState(false);
+  useEffect(() => {
+    const viewport = window.visualViewport;
+    if (!viewport) {
+      return;
+    }
+    const update = () => {
+      setVisible(isVirtualKeyboardVisible(window.innerHeight, viewport.height));
+    };
+    update();
+    viewport.addEventListener("resize", update);
+    viewport.addEventListener("scroll", update);
+    return () => {
+      viewport.removeEventListener("resize", update);
+      viewport.removeEventListener("scroll", update);
+    };
+  }, []);
+  return visible;
+};
+export { VIRTUAL_KEYBOARD_MIN_HEIGHT, isVirtualKeyboardVisible, useVirtualKeyboardVisible };
+//# sourceMappingURL=useVirtualKeyboardVisible.mjs.map

package/dist/js/packages/components/src/lib/hooks/dom/useVirtualKeyboardVisible.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useVirtualKeyboardVisible.mjs","sources":["../../../../../../../../src/lib/hooks/dom/useVirtualKeyboardVisible.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\n/**\n * Minimum shrinkage (px) of the visual viewport relative to the layout viewport\n * that we treat as \"the on-screen keyboard is open\". Filters out the much\n * smaller changes caused by mobile browser chrome (e.g. the address bar).\n */\nexport const VIRTUAL_KEYBOARD_MIN_HEIGHT = 150;\n\n/**\n * Pure predicate: the visual viewport is at least `threshold` px shorter than\n * the layout viewport (i.e. the on-screen keyboard is open).\n */\nexport const isVirtualKeyboardVisible = (\n layoutViewportHeight: number,\n visualViewportHeight: number,\n threshold: number = VIRTUAL_KEYBOARD_MIN_HEIGHT,\n): boolean => layoutViewportHeight - visualViewportHeight > threshold;\n\n/**\n * Tracks whether the on-screen (virtual) keyboard is currently open, using the\n * VisualViewport API. On iOS and Android the layout viewport stays while the\n * visual viewport shrinks by the keyboard height. Returns `false` where\n * VisualViewport is unavailable (SSR, very old browsers).\n */\nexport const useVirtualKeyboardVisible = (): boolean => {\n const [visible, setVisible] = useState(false);\n\n useEffect(() => {\n const viewport = window.visualViewport;\n if (!viewport) {\n return;\n }\n const update = (): void => {\n setVisible(isVirtualKeyboardVisible(window.innerHeight, viewport.height));\n };\n update();\n viewport.addEventListener(\"resize\", update);\n viewport.addEventListener(\"scroll\", update);\n return () => {\n viewport.removeEventListener(\"resize\", update);\n viewport.removeEventListener(\"scroll\", update);\n };\n }, []);\n\n return visible;\n};\n"],"names":[],"mappings":";;AAOO,MAAM,2BAAA,GAA8B;AAMpC,MAAM,2BAA2B,CACtC,oBAAA,EACA,sBACA,SAAA,GAAoB,2BAAA,KACR,uBAAuB,oBAAA,GAAuB;AAQrD,MAAM,4BAA4B,MAAe;AACtD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAE5C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,WAAW,MAAA,CAAO,cAAA;AACxB,IAAA,IAAI,CAAC,QAAA,EAAU;AACb,MAAA;AAAA,IACF;AACA,IAAA,MAAM,SAAS,MAAY;AACzB,MAAA,UAAA,CAAW,wBAAA,CAAyB,MAAA,CAAO,WAAA,EAAa,QAAA,CAAS,MAAM,CAAC,CAAA;AAAA,IAC1E,CAAA;AACA,IAAA,MAAA,EAAO;AACP,IAAA,QAAA,CAAS,gBAAA,CAAiB,UAAU,MAAM,CAAA;AAC1C,IAAA,QAAA,CAAS,gBAAA,CAAiB,UAAU,MAAM,CAAA;AAC1C,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,mBAAA,CAAoB,UAAU,MAAM,CAAA;AAC7C,MAAA,QAAA,CAAS,mBAAA,CAAoB,UAAU,MAAM,CAAA;AAAA,IAC/C,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,OAAO,OAAA;AACT;;;;"}