@mittwald/flow-react-components 1.4.0-next.0 → 1.4.0-next.10

package/dist/js/packages/components/src/components/Tabs/lib/useTabIndicator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTabIndicator.mjs","names":[],"sources":["../../../../../../../../src/components/Tabs/lib/useTabIndicator.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { useLayoutEffect, useRef, useState } from \"react\";\nimport { createFrameResizeObserver } from \"@/lib/dom/createFrameResizeObserver\";\n\ninterface TabIndicatorState {\n  x: number;\n  width: number;\n  isAnimated: boolean;\n}\n\ninterface TabIndicatorStyle extends CSSProperties {\n  \"--tab-indicator-x\": string;\n  \"--tab-indicator-width\": string;\n}\n\nconst getTabIndicatorStyle = (\n  state: TabIndicatorState | undefined,\n): TabIndicatorStyle | undefined =>\n  state && {\n    \"--tab-indicator-x\": `${state.x}px`,\n    \"--tab-indicator-width\": `${state.width}px`,\n  };\n\nexport const useTabIndicator = (isCollapsed: boolean) => {\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const titlesRef = useRef<HTMLDivElement | null>(null);\n  const hasMeasuredRef = useRef(false);\n  const [indicator, setIndicator] = useState<TabIndicatorState | undefined>();\n\n  const resetIndicator = () => {\n    hasMeasuredRef.current = false;\n    // React bails out of the re-render when the state is already `undefined`.\n    setIndicator(undefined);\n  };\n\n  useLayoutEffect(() => {\n    const root = rootRef.current;\n    const titles = titlesRef.current;\n\n    if (!root || !titles || isCollapsed) {\n      resetIndicator();\n      return;\n    }\n\n    const measureIndicator = () => {\n      const selectedTab = titles.querySelector<HTMLElement>(\"[data-selected]\");\n\n      if (!selectedTab) {\n        resetIndicator();\n        return;\n      }\n\n      const rootRect = root.getBoundingClientRect();\n      const selectedTabRect = selectedTab.getBoundingClientRect();\n      const nextIndicator: TabIndicatorState = {\n        x: selectedTabRect.left - rootRect.left,\n        width: selectedTabRect.width,\n        isAnimated: hasMeasuredRef.current,\n      };\n\n      setIndicator((previousIndicator) => {\n        if (\n          previousIndicator &&\n          previousIndicator.x === nextIndicator.x &&\n          previousIndicator.width === nextIndicator.width &&\n          previousIndicator.isAnimated === nextIndicator.isAnimated\n        ) {\n          return previousIndicator;\n        }\n\n        return nextIndicator;\n      });\n\n      hasMeasuredRef.current = true;\n    };\n\n    measureIndicator();\n\n    const observer = createFrameResizeObserver(measureIndicator);\n    observer.observe([root, titles]);\n\n    return () => observer.disconnect();\n  });\n\n  return {\n    rootRef,\n    titlesRef,\n    indicatorStyle: getTabIndicatorStyle(indicator),\n    isAnimated: indicator?.isAnimated ?? false,\n  };\n};\n"],"mappings":";;;;;AAeA,IAAM,wBACJ,UAEA,SAAS;CACP,qBAAqB,GAAG,MAAM,EAAE;CAChC,yBAAyB,GAAG,MAAM,MAAM;AAC1C;AAEF,IAAa,mBAAmB,gBAAyB;CACvD,MAAM,UAAU,OAA8B,IAAI;CAClD,MAAM,YAAY,OAA8B,IAAI;CACpD,MAAM,iBAAiB,OAAO,KAAK;CACnC,MAAM,CAAC,WAAW,gBAAgB,SAAwC;CAE1E,MAAM,uBAAuB;EAC3B,eAAe,UAAU;EAEzB,aAAa,KAAA,CAAS;CACxB;CAEA,sBAAsB;EACpB,MAAM,OAAO,QAAQ;EACrB,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,QAAQ,CAAC,UAAU,aAAa;GACnC,eAAe;GACf;EACF;EAEA,MAAM,yBAAyB;GAC7B,MAAM,cAAc,OAAO,cAA2B,iBAAiB;GAEvE,IAAI,CAAC,aAAa;IAChB,eAAe;IACf;GACF;GAEA,MAAM,WAAW,KAAK,sBAAsB;GAC5C,MAAM,kBAAkB,YAAY,sBAAsB;GAC1D,MAAM,gBAAmC;IACvC,GAAG,gBAAgB,OAAO,SAAS;IACnC,OAAO,gBAAgB;IACvB,YAAY,eAAe;GAC7B;GAEA,cAAc,sBAAsB;IAClC,IACE,qBACA,kBAAkB,MAAM,cAAc,KACtC,kBAAkB,UAAU,cAAc,SAC1C,kBAAkB,eAAe,cAAc,YAE/C,OAAO;IAGT,OAAO;GACT,CAAC;GAED,eAAe,UAAU;EAC3B;EAEA,iBAAiB;EAEjB,MAAM,WAAW,0BAA0B,gBAAgB;EAC3D,SAAS,QAAQ,CAAC,MAAM,MAAM,CAAC;EAE/B,aAAa,SAAS,WAAW;CACnC,CAAC;CAED,OAAO;EACL;EACA;EACA,gBAAgB,qBAAqB,SAAS;EAC9C,YAAY,WAAW,cAAc;CACvC;AACF"}
+{"version":3,"file":"useTabIndicator.mjs","names":[],"sources":["../../../../../../../../src/components/Tabs/lib/useTabIndicator.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { useLayoutEffect, useRef, useState } from \"react\";\nimport { createFrameResizeObserver } from \"@/lib/dom/createFrameResizeObserver\";\n\ninterface TabIndicatorState {\n  x: number;\n  width: number;\n  isAnimated: boolean;\n}\n\ninterface TabIndicatorStyle extends CSSProperties {\n  \"--tab-indicator-x\": string;\n  \"--tab-indicator-width\": string;\n}\n\nconst getTabIndicatorStyle = (\n  state: TabIndicatorState | undefined,\n): TabIndicatorStyle | undefined =>\n  state && {\n    \"--tab-indicator-x\": `${state.x}px`,\n    \"--tab-indicator-width\": `${state.width}px`,\n  };\n\nexport const useTabIndicator = (isCollapsed: boolean) => {\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const titlesRef = useRef<HTMLDivElement | null>(null);\n  const hasMeasuredRef = useRef(false);\n  const [indicator, setIndicator] = useState<TabIndicatorState | undefined>();\n\n  const resetIndicator = () => {\n    hasMeasuredRef.current = false;\n    // React bails out of the re-render when the state is already `undefined`.\n    setIndicator(undefined);\n  };\n\n  useLayoutEffect(() => {\n    const root = rootRef.current;\n    const titles = titlesRef.current;\n\n    if (!root || !titles || isCollapsed) {\n      resetIndicator();\n      return;\n    }\n\n    const measureIndicator = () => {\n      const selectedTab = titles.querySelector<HTMLElement>(\"[data-selected]\");\n\n      if (!selectedTab) {\n        resetIndicator();\n        return;\n      }\n\n      const rootRect = root.getBoundingClientRect();\n      const selectedTabRect = selectedTab.getBoundingClientRect();\n\n      /*\n       * `getBoundingClientRect` reports rendered pixels, but the custom\n       * properties below are read as lengths inside the same subtree. Where an\n       * ancestor scales it — a `transform`, a CSS `zoom` — the two differ, and\n       * writing the rendered value back scales it a second time. The root's own\n       * rendered and layout width give the factor between them.\n       */\n      const scale =\n        root.offsetWidth > 0 ? rootRect.width / root.offsetWidth : 1;\n\n      const nextIndicator: TabIndicatorState = {\n        x: (selectedTabRect.left - rootRect.left) / scale,\n        width: selectedTabRect.width / scale,\n        isAnimated: hasMeasuredRef.current,\n      };\n\n      setIndicator((previousIndicator) => {\n        if (\n          previousIndicator &&\n          previousIndicator.x === nextIndicator.x &&\n          previousIndicator.width === nextIndicator.width &&\n          previousIndicator.isAnimated === nextIndicator.isAnimated\n        ) {\n          return previousIndicator;\n        }\n\n        return nextIndicator;\n      });\n\n      hasMeasuredRef.current = true;\n    };\n\n    measureIndicator();\n\n    const observer = createFrameResizeObserver(measureIndicator);\n    observer.observe([root, titles]);\n\n    return () => observer.disconnect();\n  });\n\n  return {\n    rootRef,\n    titlesRef,\n    indicatorStyle: getTabIndicatorStyle(indicator),\n    isAnimated: indicator?.isAnimated ?? false,\n  };\n};\n"],"mappings":";;;;;AAeA,IAAM,wBACJ,UAEA,SAAS;CACP,qBAAqB,GAAG,MAAM,EAAE;CAChC,yBAAyB,GAAG,MAAM,MAAM;AAC1C;AAEF,IAAa,mBAAmB,gBAAyB;CACvD,MAAM,UAAU,OAA8B,IAAI;CAClD,MAAM,YAAY,OAA8B,IAAI;CACpD,MAAM,iBAAiB,OAAO,KAAK;CACnC,MAAM,CAAC,WAAW,gBAAgB,SAAwC;CAE1E,MAAM,uBAAuB;EAC3B,eAAe,UAAU;EAEzB,aAAa,KAAA,CAAS;CACxB;CAEA,sBAAsB;EACpB,MAAM,OAAO,QAAQ;EACrB,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,QAAQ,CAAC,UAAU,aAAa;GACnC,eAAe;GACf;EACF;EAEA,MAAM,yBAAyB;GAC7B,MAAM,cAAc,OAAO,cAA2B,iBAAiB;GAEvE,IAAI,CAAC,aAAa;IAChB,eAAe;IACf;GACF;GAEA,MAAM,WAAW,KAAK,sBAAsB;GAC5C,MAAM,kBAAkB,YAAY,sBAAsB;GAS1D,MAAM,QACJ,KAAK,cAAc,IAAI,SAAS,QAAQ,KAAK,cAAc;GAE7D,MAAM,gBAAmC;IACvC,IAAI,gBAAgB,OAAO,SAAS,QAAQ;IAC5C,OAAO,gBAAgB,QAAQ;IAC/B,YAAY,eAAe;GAC7B;GAEA,cAAc,sBAAsB;IAClC,IACE,qBACA,kBAAkB,MAAM,cAAc,KACtC,kBAAkB,UAAU,cAAc,SAC1C,kBAAkB,eAAe,cAAc,YAE/C,OAAO;IAGT,OAAO;GACT,CAAC;GAED,eAAe,UAAU;EAC3B;EAEA,iBAAiB;EAEjB,MAAM,WAAW,0BAA0B,gBAAgB;EAC3D,SAAS,QAAQ,CAAC,MAAM,MAAM,CAAC;EAE/B,aAAa,SAAS,WAAW;CACnC,CAAC;CAED,OAAO;EACL;EACA;EACA,gBAAgB,qBAAqB,SAAS;EAC9C,YAAY,WAAW,cAAc;CACvC;AACF"}

package/dist/js/packages/components/src/components/TextArea/TextArea.mjs

@@ -8,7 +8,7 @@ import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import { useControlledHostValueProps } from "../../lib/remote/useControlledHostValueProps.mjs";
 import { FieldDescription } from "../FieldDescription/FieldDescription.mjs";
 import TextArea_module_default from "./TextArea.module.mjs";
-import __locale_default from "../../../../../_virtual/_23.locale.mjs";
+import __locale_default from "../../../../../_virtual/_24.locale.mjs";
 import clsx from "clsx";
 import { useEffect, useLayoutEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/js/packages/components/src/components/TextField/TextField.mjs

@@ -11,7 +11,7 @@ import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import { useControlledHostValueProps } from "../../lib/remote/useControlledHostValueProps.mjs";
 import { FieldDescription } from "../FieldDescription/FieldDescription.mjs";
 import TextField_module_default from "./TextField.module.mjs";
-import __locale_default from "../../../../../_virtual/_32.locale.mjs";
+import __locale_default from "../../../../../_virtual/_33.locale.mjs";
 import clsx from "clsx";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/js/packages/components/src/integrations/react-hook-form/components/Field/Field.mjs

@@ -4,7 +4,7 @@ import { PropsContextProvider } from "../../../../lib/propsContext/components/Pr
 import dynamic from "../../../../lib/propsContext/dynamicProps/dynamic.mjs";
 import { useLocalizedStringFormatter } from "../../../../components/TranslationProvider/useLocalizedStringFormatter.mjs";
 import { useFormContext } from "../FormContextProvider/FormContextProvider.mjs";
-import __locale_default from "../../../../../../../_virtual/_33.locale.mjs";
+import __locale_default from "../../../../../../../_virtual/_34.locale.mjs";
 import FieldErrorView from "../../../../views/FieldErrorView.mjs";
 import { useUpdateFormDefaultValue } from "./hooks/useUpdateFormDefaultValue.mjs";
 import "react";

package/dist/js/packages/design-tokens/dist/json-runtime/all-dark.mjs

@@ -10,6 +10,10 @@ var menu = {
 	"group-to-group-spacing": {
 		"value": "16px",
 		"path": ["menu", "group-to-group-spacing"]
+	},
+	"select-all-to-item-spacing": {
+		"value": "8px",
+		"path": ["menu", "select-all-to-item-spacing"]
 	}
 };
 var chat = { "spacing": {