@mittwald/flow-react-components 1.1.1 → 1.1.3

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.
@@ -8,7 +8,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
8
8
  import * as Aria from "react-aria-components";
9
9
  //#region src/components/SegmentedControl/components/Segment/Segment.tsx
10
10
  /**
11
- * @deprecated Use `Tab` inside `Tabs`, or `Radio` inside a `RadioGroup`.
11
+ * @deprecated Use `Tab` inside `Tabs`, or `RadioButton` inside a `RadioGroup` —
12
+ * `RadioButton` takes exactly this component's props.
12
13
  * @flr-generate all
13
14
  */
14
15
  var Segment = flowComponent("Segment", (props) => {
@@ -1 +1 @@
1
- {"version":3,"file":"Segment.mjs","names":[],"sources":["../../../../../../../../../src/components/SegmentedControl/components/Segment/Segment.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Segment.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { IconCheck } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface SegmentProps\n extends\n PropsWithChildren<Omit<Aria.RadioProps, \"children\">>,\n FlowComponentProps<HTMLLabelElement> {}\n\n/**\n * @deprecated Use `Tab` inside `Tabs`, or `Radio` inside a `RadioGroup`.\n * @flr-generate all\n */\nexport const Segment = flowComponent(\"Segment\", (props) => {\n // No deprecation warning here — a Segment only renders inside a\n // SegmentedControl, which already warns.\n const { children, className, ref, ...rest } = props;\n\n const rootClassName = clsx(styles.segment, className);\n\n return (\n <Aria.Radio {...rest} className={rootClassName} ref={ref}>\n {children}\n <IconCheck className={styles.checkmark} />\n </Aria.Radio>\n );\n});\n\nexport default Segment;\n"],"mappings":";;;;;;;;;;;;;AAiBA,IAAa,UAAU,cAAc,YAAY,UAAU;CAGzD,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAK,uBAAO,SAAS,SAAS;CAEpD,OACE,qBAAC,KAAK,OAAN;EAAY,GAAI;EAAM,WAAW;EAAoB;EAArD,UAAA,CACG,UACD,oBAAC,WAAD,EAAW,WAAW,uBAAO,UAAY,CAAA,CAC/B;;AAEhB,CAAC"}
1
+ {"version":3,"file":"Segment.mjs","names":[],"sources":["../../../../../../../../../src/components/SegmentedControl/components/Segment/Segment.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Segment.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { IconCheck } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface SegmentProps\n extends\n PropsWithChildren<Omit<Aria.RadioProps, \"children\">>,\n FlowComponentProps<HTMLLabelElement> {}\n\n/**\n * @deprecated Use `Tab` inside `Tabs`, or `RadioButton` inside a `RadioGroup` —\n * `RadioButton` takes exactly this component's props.\n * @flr-generate all\n */\nexport const Segment = flowComponent(\"Segment\", (props) => {\n // No deprecation warning here — a Segment only renders inside a\n // SegmentedControl, which already warns.\n const { children, className, ref, ...rest } = props;\n\n const rootClassName = clsx(styles.segment, className);\n\n return (\n <Aria.Radio {...rest} className={rootClassName} ref={ref}>\n {children}\n <IconCheck className={styles.checkmark} />\n </Aria.Radio>\n );\n});\n\nexport default Segment;\n"],"mappings":";;;;;;;;;;;;;;AAkBA,IAAa,UAAU,cAAc,YAAY,UAAU;CAGzD,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAK,uBAAO,SAAS,SAAS;CAEpD,OACE,qBAAC,KAAK,OAAN;EAAY,GAAI;EAAM,WAAW;EAAoB;EAArD,UAAA,CACG,UACD,oBAAC,WAAD,EAAW,WAAW,uBAAO,UAAY,CAAA,CAC/B;;AAEhB,CAAC"}
@@ -13,7 +13,7 @@ import { useIsSSR } from "react-aria";
13
13
  //#region src/components/Tabs/Tabs.tsx
14
14
  /** @flr-generate all */
15
15
  var Tabs = flowComponent("Tabs", (props) => {
16
- const { children, className, defaultSelectedKey, selectedKey: selectedKeyProps, disabledKeys, ref, onSelectionChange, tabNotFoundView, ...rest } = props;
16
+ const { children, className, defaultSelectedKey, selectedKey: selectedKeyProps, disabledKeys, ref, onSelectionChange, tabNotFoundView, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...rest } = props;
17
17
  const rootClassName = clsx(Tabs_module_default.tabs, className);
18
18
  const [selectedKeyState, setSelectedKeyState] = useState(defaultSelectedKey);
19
19
  const selectedKey = selectedKeyProps ?? selectedKeyState;
@@ -31,6 +31,8 @@ var Tabs = flowComponent("Tabs", (props) => {
31
31
  ref,
32
32
  children: [
33
33
  /* @__PURE__ */ jsx(TabList, {
34
+ "aria-label": ariaLabel,
35
+ "aria-labelledby": ariaLabelledby,
34
36
  selection: selectedKey,
35
37
  onContextMenuSelectionChange: (key) => {
36
38
  setSelectedKeyState(key);
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.mjs","names":[],"sources":["../../../../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { TabList } from \"@/components/Tabs/components/TabList\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren, ReactNode } from \"react\";\nimport { useState } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Tabs.module.scss\";\nimport { FallbackTab } from \"@/components/Tabs/components/FallbackTab\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { useIsSSR } from \"react-aria\";\n\nexport interface TabsProps\n extends\n Omit<Aria.TabsProps, \"children\">,\n PropsWithChildren,\n FlowComponentProps {\n /**\n * The view rendered when the selected tab does not exist. Defaults to a\n * built-in IllustratedMessage.\n */\n tabNotFoundView?: ReactNode;\n}\n\n/** @flr-generate all */\nexport const Tabs = flowComponent(\"Tabs\", (props) => {\n const {\n children,\n className,\n defaultSelectedKey,\n selectedKey: selectedKeyProps,\n disabledKeys,\n ref,\n onSelectionChange,\n tabNotFoundView,\n ...rest\n } = props;\n\n const rootClassName = clsx(styles.tabs, className);\n const [selectedKeyState, setSelectedKeyState] = useState<\n Aria.Key | undefined\n >(defaultSelectedKey);\n\n const selectedKey = selectedKeyProps ?? selectedKeyState;\n\n const isSsr = useIsSSR();\n\n return (\n <>\n {children}\n <Aria.Tabs\n slot={null}\n className={rootClassName}\n {...rest}\n selectedKey={selectedKey}\n onSelectionChange={(key) => {\n setSelectedKeyState(key);\n if (onSelectionChange) {\n onSelectionChange(key);\n }\n }}\n disabledKeys={disabledKeys}\n ref={ref}\n >\n <TabList\n selection={selectedKey}\n onContextMenuSelectionChange={(key) => {\n setSelectedKeyState(key);\n if (onSelectionChange) {\n onSelectionChange(key);\n }\n }}\n disabledKeys={disabledKeys}\n />\n <UiComponentTunnelExit id=\"Panels\" component=\"Tabs\" />\n {!isSsr && <FallbackTab tabNotFoundView={tabNotFoundView} />}\n </Aria.Tabs>\n </>\n );\n});\n\nexport default Tabs;\n"],"mappings":";;;;;;;;;;;;;;AAyBA,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,UACA,WACA,oBACA,aAAa,kBACb,cACA,KACA,mBACA,iBACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KAAK,oBAAO,MAAM,SAAS;CACjD,MAAM,CAAC,kBAAkB,uBAAuB,SAE9C,kBAAkB;CAEpB,MAAM,cAAc,oBAAoB;CAExC,MAAM,QAAQ,SAAS;CAEvB,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,UACD,qBAAC,KAAK,MAAN;EACE,MAAM;EACN,WAAW;EACX,GAAI;EACS;EACb,oBAAoB,QAAQ;GAC1B,oBAAoB,GAAG;GACvB,IAAI,mBACF,kBAAkB,GAAG;EAEzB;EACc;EACT;EAZP,UAAA;GAcE,oBAAC,SAAD;IACE,WAAW;IACX,+BAA+B,QAAQ;KACrC,oBAAoB,GAAG;KACvB,IAAI,mBACF,kBAAkB,GAAG;IAEzB;IACc;GACf,CAAA;GACD,oBAAC,uBAAD;IAAuB,IAAG;IAAS,WAAU;GAAQ,CAAA;GACpD,CAAC,SAAS,oBAAC,aAAD,EAA8B,gBAAkB,CAAA;EAClD;CACX,CAAA,CAAA,EAAA,CAAA;AAEN,CAAC"}
1
+ {"version":3,"file":"Tabs.mjs","names":[],"sources":["../../../../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { TabList } from \"@/components/Tabs/components/TabList\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren, ReactNode } from \"react\";\nimport { useState } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Tabs.module.scss\";\nimport { FallbackTab } from \"@/components/Tabs/components/FallbackTab\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { useIsSSR } from \"react-aria\";\n\nexport interface TabsProps\n extends\n Omit<Aria.TabsProps, \"children\">,\n PropsWithChildren,\n FlowComponentProps {\n /**\n * An accessible name for the tab list. `Tabs` has no `Label` slot, so this is\n * how the group is named when the surrounding heading does not already do\n * it.\n */\n \"aria-label\"?: string;\n /** The id of an element that names the tab list. */\n \"aria-labelledby\"?: string;\n /**\n * The view rendered when the selected tab does not exist. Defaults to a\n * built-in IllustratedMessage.\n */\n tabNotFoundView?: ReactNode;\n}\n\n/** @flr-generate all */\nexport const Tabs = flowComponent(\"Tabs\", (props) => {\n const {\n children,\n className,\n defaultSelectedKey,\n selectedKey: selectedKeyProps,\n disabledKeys,\n ref,\n onSelectionChange,\n tabNotFoundView,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledby,\n ...rest\n } = props;\n\n const rootClassName = clsx(styles.tabs, className);\n const [selectedKeyState, setSelectedKeyState] = useState<\n Aria.Key | undefined\n >(defaultSelectedKey);\n\n const selectedKey = selectedKeyProps ?? selectedKeyState;\n\n const isSsr = useIsSSR();\n\n return (\n <>\n {children}\n <Aria.Tabs\n slot={null}\n className={rootClassName}\n {...rest}\n selectedKey={selectedKey}\n onSelectionChange={(key) => {\n setSelectedKeyState(key);\n if (onSelectionChange) {\n onSelectionChange(key);\n }\n }}\n disabledKeys={disabledKeys}\n ref={ref}\n >\n <TabList\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n selection={selectedKey}\n onContextMenuSelectionChange={(key) => {\n setSelectedKeyState(key);\n if (onSelectionChange) {\n onSelectionChange(key);\n }\n }}\n disabledKeys={disabledKeys}\n />\n <UiComponentTunnelExit id=\"Panels\" component=\"Tabs\" />\n {!isSsr && <FallbackTab tabNotFoundView={tabNotFoundView} />}\n </Aria.Tabs>\n </>\n );\n});\n\nexport default Tabs;\n"],"mappings":";;;;;;;;;;;;;;AAiCA,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,UACA,WACA,oBACA,aAAa,kBACb,cACA,KACA,mBACA,iBACA,cAAc,WACd,mBAAmB,gBACnB,GAAG,SACD;CAEJ,MAAM,gBAAgB,KAAK,oBAAO,MAAM,SAAS;CACjD,MAAM,CAAC,kBAAkB,uBAAuB,SAE9C,kBAAkB;CAEpB,MAAM,cAAc,oBAAoB;CAExC,MAAM,QAAQ,SAAS;CAEvB,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,UACD,qBAAC,KAAK,MAAN;EACE,MAAM;EACN,WAAW;EACX,GAAI;EACS;EACb,oBAAoB,QAAQ;GAC1B,oBAAoB,GAAG;GACvB,IAAI,mBACF,kBAAkB,GAAG;EAEzB;EACc;EACT;EAZP,UAAA;GAcE,oBAAC,SAAD;IACE,cAAY;IACZ,mBAAiB;IACjB,WAAW;IACX,+BAA+B,QAAQ;KACrC,oBAAoB,GAAG;KACvB,IAAI,mBACF,kBAAkB,GAAG;IAEzB;IACc;GACf,CAAA;GACD,oBAAC,uBAAD;IAAuB,IAAG;IAAS,WAAU;GAAQ,CAAA;GACpD,CAAC,SAAS,oBAAC,aAAD,EAA8B,gBAAkB,CAAA;EAClD;CACX,CAAA,CAAA,EAAA,CAAA;AAEN,CAAC"}
@@ -15,7 +15,7 @@ import * as Aria from "react-aria-components";
15
15
  import { useMergeRefs } from "use-callback-ref";
16
16
  //#region src/components/Tabs/components/TabList/TabList.tsx
17
17
  var TabList = (props) => {
18
- const { selection, disabledKeys, onContextMenuSelectionChange } = props;
18
+ const { selection, disabledKeys, onContextMenuSelectionChange, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby } = props;
19
19
  const titleCollapsedElementId = useId();
20
20
  const overflowObserver = useObserveOverflow();
21
21
  const isCollapsed = overflowObserver.isOverflowing;
@@ -26,6 +26,8 @@ var TabList = (props) => {
26
26
  onContextMenuSelectionChange(key);
27
27
  };
28
28
  const regularTabTitles = /* @__PURE__ */ jsx(Aria.TabList, {
29
+ "aria-label": ariaLabel,
30
+ "aria-labelledby": ariaLabelledby,
29
31
  className: TabList_module_default.titles,
30
32
  ref: setTitlesRef,
31
33
  children: /* @__PURE__ */ jsx(UiComponentTunnelExit, {
@@ -1 +1 @@
1
- {"version":3,"file":"TabList.mjs","names":[],"sources":["../../../../../../../../../src/components/Tabs/components/TabList/TabList.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useId } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./TabList.module.scss\";\nimport { useTabIndicator } from \"../../lib/useTabIndicator\";\nimport { useObserveOverflow } from \"@/lib/hooks/dom/useObserveOverflow\";\nimport { Button } from \"@/components/Button\";\nimport clsx from \"clsx\";\nimport { useMergeRefs } from \"use-callback-ref\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\ninterface Props {\n selection: Aria.Key | undefined;\n onContextMenuSelectionChange: (key: Aria.Key) => void;\n disabledKeys?: Iterable<Aria.Key>;\n}\n\nexport const TabList: FC<Props> = (props) => {\n const { selection, disabledKeys, onContextMenuSelectionChange } = props;\n\n const titleCollapsedElementId = useId();\n const overflowObserver = useObserveOverflow();\n const isCollapsed = overflowObserver.isOverflowing;\n const rootClassName = clsx(styles.tabList, isCollapsed && styles.collapsed);\n const tabIndicator = useTabIndicator(isCollapsed);\n\n const setTitlesRef = useMergeRefs<HTMLDivElement>([\n overflowObserver.ref,\n tabIndicator.titlesRef,\n ]);\n\n const handleContextMenuSelectionChange = (key: Aria.Key) => {\n onContextMenuSelectionChange(key);\n };\n\n const regularTabTitles = (\n <Aria.TabList className={styles.titles} ref={setTitlesRef}>\n <UiComponentTunnelExit id=\"Titles\" component=\"Tabs\" />\n </Aria.TabList>\n );\n\n const contextMenuWhenCollapsed = isCollapsed && (\n <ContextMenuTriggerView>\n <Button\n variant=\"solid\"\n className={styles.contextMenuButton}\n color=\"light\"\n aria-labelledby={titleCollapsedElementId}\n >\n <UiComponentTunnelExit id=\"ActiveTitle\" component=\"Tabs\" />\n <IconChevronDown />\n </Button>\n\n <ContextMenuView\n disabledKeys={disabledKeys}\n selectedKeys={selection ? [selection] : undefined}\n selectionMode=\"navigation\"\n onAction={(key) => handleContextMenuSelectionChange(key)}\n >\n <UiComponentTunnelExit id=\"ContextMenuItems\" component=\"Tabs\" />\n </ContextMenuView>\n </ContextMenuTriggerView>\n );\n\n return (\n <div className={rootClassName} ref={tabIndicator.rootRef}>\n {!isCollapsed && tabIndicator.indicatorStyle && (\n <div\n aria-hidden=\"true\"\n className={clsx(\n styles.activeIndicator,\n tabIndicator.isAnimated && styles.animated,\n )}\n style={tabIndicator.indicatorStyle}\n />\n )}\n {regularTabTitles}\n {contextMenuWhenCollapsed}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAoBA,IAAa,WAAsB,UAAU;CAC3C,MAAM,EAAE,WAAW,cAAc,iCAAiC;CAElE,MAAM,0BAA0B,MAAM;CACtC,MAAM,mBAAmB,mBAAmB;CAC5C,MAAM,cAAc,iBAAiB;CACrC,MAAM,gBAAgB,KAAK,uBAAO,SAAS,eAAe,uBAAO,SAAS;CAC1E,MAAM,eAAe,gBAAgB,WAAW;CAEhD,MAAM,eAAe,aAA6B,CAChD,iBAAiB,KACjB,aAAa,SACf,CAAC;CAED,MAAM,oCAAoC,QAAkB;EAC1D,6BAA6B,GAAG;CAClC;CAEA,MAAM,mBACJ,oBAAC,KAAK,SAAN;EAAc,WAAW,uBAAO;EAAQ,KAAK;EAC3C,UAAA,oBAAC,uBAAD;GAAuB,IAAG;GAAS,WAAU;EAAQ,CAAA;CACzC,CAAA;CAGhB,MAAM,2BAA2B,eAC/B,qBAAC,wBAAD,EAAA,UAAA,CACE,qBAAC,QAAD;EACE,SAAQ;EACR,WAAW,uBAAO;EAClB,OAAM;EACN,mBAAiB;EAJnB,UAAA,CAME,oBAAC,uBAAD;GAAuB,IAAG;GAAc,WAAU;EAAQ,CAAA,GAC1D,oBAAC,iBAAD,CAAkB,CAAA,CACZ;CAER,CAAA,GAAA,oBAAC,iBAAD;EACgB;EACd,cAAc,YAAY,CAAC,SAAS,IAAI,KAAA;EACxC,eAAc;EACd,WAAW,QAAQ,iCAAiC,GAAG;EAEvD,UAAA,oBAAC,uBAAD;GAAuB,IAAG;GAAmB,WAAU;EAAQ,CAAA;CAChD,CAAA,CACK,EAAA,CAAA;CAG1B,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,KAAK,aAAa;EAAjD,UAAA;GACG,CAAC,eAAe,aAAa,kBAC5B,oBAAC,OAAD;IACE,eAAY;IACZ,WAAW,KACT,uBAAO,iBACP,aAAa,cAAc,uBAAO,QACpC;IACA,OAAO,aAAa;GACrB,CAAA;GAEF;GACA;EACE;;AAET"}
1
+ {"version":3,"file":"TabList.mjs","names":[],"sources":["../../../../../../../../../src/components/Tabs/components/TabList/TabList.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useId } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./TabList.module.scss\";\nimport { useTabIndicator } from \"../../lib/useTabIndicator\";\nimport { useObserveOverflow } from \"@/lib/hooks/dom/useObserveOverflow\";\nimport { Button } from \"@/components/Button\";\nimport clsx from \"clsx\";\nimport { useMergeRefs } from \"use-callback-ref\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\ninterface Props {\n selection: Aria.Key | undefined;\n onContextMenuSelectionChange: (key: Aria.Key) => void;\n disabledKeys?: Iterable<Aria.Key>;\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n}\n\nexport const TabList: FC<Props> = (props) => {\n const {\n selection,\n disabledKeys,\n onContextMenuSelectionChange,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledby,\n } = props;\n\n const titleCollapsedElementId = useId();\n const overflowObserver = useObserveOverflow();\n const isCollapsed = overflowObserver.isOverflowing;\n const rootClassName = clsx(styles.tabList, isCollapsed && styles.collapsed);\n const tabIndicator = useTabIndicator(isCollapsed);\n\n const setTitlesRef = useMergeRefs<HTMLDivElement>([\n overflowObserver.ref,\n tabIndicator.titlesRef,\n ]);\n\n const handleContextMenuSelectionChange = (key: Aria.Key) => {\n onContextMenuSelectionChange(key);\n };\n\n const regularTabTitles = (\n <Aria.TabList\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n className={styles.titles}\n ref={setTitlesRef}\n >\n <UiComponentTunnelExit id=\"Titles\" component=\"Tabs\" />\n </Aria.TabList>\n );\n\n const contextMenuWhenCollapsed = isCollapsed && (\n <ContextMenuTriggerView>\n <Button\n variant=\"solid\"\n className={styles.contextMenuButton}\n color=\"light\"\n aria-labelledby={titleCollapsedElementId}\n >\n <UiComponentTunnelExit id=\"ActiveTitle\" component=\"Tabs\" />\n <IconChevronDown />\n </Button>\n\n <ContextMenuView\n disabledKeys={disabledKeys}\n selectedKeys={selection ? [selection] : undefined}\n selectionMode=\"navigation\"\n onAction={(key) => handleContextMenuSelectionChange(key)}\n >\n <UiComponentTunnelExit id=\"ContextMenuItems\" component=\"Tabs\" />\n </ContextMenuView>\n </ContextMenuTriggerView>\n );\n\n return (\n <div className={rootClassName} ref={tabIndicator.rootRef}>\n {!isCollapsed && tabIndicator.indicatorStyle && (\n <div\n aria-hidden=\"true\"\n className={clsx(\n styles.activeIndicator,\n tabIndicator.isAnimated && styles.animated,\n )}\n style={tabIndicator.indicatorStyle}\n />\n )}\n {regularTabTitles}\n {contextMenuWhenCollapsed}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAsBA,IAAa,WAAsB,UAAU;CAC3C,MAAM,EACJ,WACA,cACA,8BACA,cAAc,WACd,mBAAmB,mBACjB;CAEJ,MAAM,0BAA0B,MAAM;CACtC,MAAM,mBAAmB,mBAAmB;CAC5C,MAAM,cAAc,iBAAiB;CACrC,MAAM,gBAAgB,KAAK,uBAAO,SAAS,eAAe,uBAAO,SAAS;CAC1E,MAAM,eAAe,gBAAgB,WAAW;CAEhD,MAAM,eAAe,aAA6B,CAChD,iBAAiB,KACjB,aAAa,SACf,CAAC;CAED,MAAM,oCAAoC,QAAkB;EAC1D,6BAA6B,GAAG;CAClC;CAEA,MAAM,mBACJ,oBAAC,KAAK,SAAN;EACE,cAAY;EACZ,mBAAiB;EACjB,WAAW,uBAAO;EAClB,KAAK;EAEL,UAAA,oBAAC,uBAAD;GAAuB,IAAG;GAAS,WAAU;EAAQ,CAAA;CACzC,CAAA;CAGhB,MAAM,2BAA2B,eAC/B,qBAAC,wBAAD,EAAA,UAAA,CACE,qBAAC,QAAD;EACE,SAAQ;EACR,WAAW,uBAAO;EAClB,OAAM;EACN,mBAAiB;EAJnB,UAAA,CAME,oBAAC,uBAAD;GAAuB,IAAG;GAAc,WAAU;EAAQ,CAAA,GAC1D,oBAAC,iBAAD,CAAkB,CAAA,CACZ;CAER,CAAA,GAAA,oBAAC,iBAAD;EACgB;EACd,cAAc,YAAY,CAAC,SAAS,IAAI,KAAA;EACxC,eAAc;EACd,WAAW,QAAQ,iCAAiC,GAAG;EAEvD,UAAA,oBAAC,uBAAD;GAAuB,IAAG;GAAmB,WAAU;EAAQ,CAAA;CAChD,CAAA,CACK,EAAA,CAAA;CAG1B,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,KAAK,aAAa;EAAjD,UAAA;GACG,CAAC,eAAe,aAAa,kBAC5B,oBAAC,OAAD;IACE,eAAY;IACZ,WAAW,KACT,uBAAO,iBACP,aAAa,cAAc,uBAAO,QACpC;IACA,OAAO,aAAa;GACrB,CAAA;GAEF;GACA;EACE;;AAET"}
@@ -4,7 +4,8 @@ import * as Aria from "react-aria-components";
4
4
  export interface SegmentProps extends PropsWithChildren<Omit<Aria.RadioProps, "children">>, FlowComponentProps<HTMLLabelElement> {
5
5
  }
6
6
  /**
7
- * @deprecated Use `Tab` inside `Tabs`, or `Radio` inside a `RadioGroup`.
7
+ * @deprecated Use `Tab` inside `Tabs`, or `RadioButton` inside a `RadioGroup` —
8
+ * `RadioButton` takes exactly this component's props.
8
9
  * @flr-generate all
9
10
  */
10
11
  export declare const Segment: import('react').FunctionComponent<SegmentProps & import('react').RefAttributes<HTMLLabelElement>>;
@@ -1 +1 @@
1
- {"version":3,"file":"Segment.d.ts","sourceRoot":"","sources":["../../../../../../src/components/SegmentedControl/components/Segment/Segment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAG9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAG/E,MAAM,WAAW,YACf,SACE,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC,EACpD,kBAAkB,CAAC,gBAAgB,CAAC;CAAG;AAE3C;;;GAGG;AACH,eAAO,MAAM,OAAO,mGAalB,CAAC;AAEH,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"Segment.d.ts","sourceRoot":"","sources":["../../../../../../src/components/SegmentedControl/components/Segment/Segment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAG9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAG/E,MAAM,WAAW,YACf,SACE,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC,EACpD,kBAAkB,CAAC,gBAAgB,CAAC;CAAG;AAE3C;;;;GAIG;AACH,eAAO,MAAM,OAAO,mGAalB,CAAC;AAEH,eAAe,OAAO,CAAC"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=Tabs.browser.test.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tabs.browser.test.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/Tabs.browser.test.tsx"],"names":[],"mappings":""}
@@ -2,6 +2,14 @@ import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
2
2
  import { PropsWithChildren, ReactNode } from 'react';
3
3
  import * as Aria from "react-aria-components";
4
4
  export interface TabsProps extends Omit<Aria.TabsProps, "children">, PropsWithChildren, FlowComponentProps {
5
+ /**
6
+ * An accessible name for the tab list. `Tabs` has no `Label` slot, so this is
7
+ * how the group is named when the surrounding heading does not already do
8
+ * it.
9
+ */
10
+ "aria-label"?: string;
11
+ /** The id of an element that names the tab list. */
12
+ "aria-labelledby"?: string;
5
13
  /**
6
14
  * The view rendered when the selected tab does not exist. Defaults to a
7
15
  * built-in IllustratedMessage.
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAG/E,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAM9C,MAAM,WAAW,SACf,SACE,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,EAChC,iBAAiB,EACjB,kBAAkB;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;CAC7B;AAED,wBAAwB;AACxB,eAAO,MAAM,IAAI,8FAsDf,CAAC;AAEH,eAAe,IAAI,CAAC"}
1
+ {"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAG/E,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAM9C,MAAM,WAAW,SACf,SACE,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,EAChC,iBAAiB,EACjB,kBAAkB;IACpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oDAAoD;IACpD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;CAC7B;AAED,wBAAwB;AACxB,eAAO,MAAM,IAAI,8FA0Df,CAAC;AAEH,eAAe,IAAI,CAAC"}
@@ -4,6 +4,8 @@ interface Props {
4
4
  selection: Aria.Key | undefined;
5
5
  onContextMenuSelectionChange: (key: Aria.Key) => void;
6
6
  disabledKeys?: Iterable<Aria.Key>;
7
+ "aria-label"?: string;
8
+ "aria-labelledby"?: string;
7
9
  }
8
10
  export declare const TabList: FC<Props>;
9
11
  export {};
@@ -1 +1 @@
1
- {"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tabs/components/TabList/TabList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAY9C,UAAU,KAAK;IACb,SAAS,EAAE,IAAI,CAAC,GAAG,GAAG,SAAS,CAAC;IAChC,4BAA4B,EAAE,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC;IACtD,YAAY,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;CACnC;AAED,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,KAAK,CA+D7B,CAAC"}
1
+ {"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tabs/components/TabList/TabList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAY9C,UAAU,KAAK;IACb,SAAS,EAAE,IAAI,CAAC,GAAG,GAAG,SAAS,CAAC;IAChC,4BAA4B,EAAE,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC;IACtD,YAAY,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,KAAK,CA0E7B,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tabs/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAO,IAAI,EAAY,MAAM,mBAAmB,CAAC;AAexD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAqD3B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAsBvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAevB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAkBzB,CAAC"}
1
+ {"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tabs/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAO,IAAI,EAAY,MAAM,mBAAmB,CAAC;AAexD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAwD3B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAsBvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAevB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAkBzB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mittwald/flow-react-components",
3
- "version": "1.1.1",
3
+ "version": "1.1.3",
4
4
  "type": "module",
5
5
  "description": "A React implementation of Flow, mittwald’s design system",
6
6
  "homepage": "https://flow.mittwald.de",
@@ -78,9 +78,9 @@
78
78
  "@internationalized/string-compiler": "^3.4.1",
79
79
  "@lezer/common": "^1.5.2",
80
80
  "@lezer/highlight": "^1.2.3",
81
- "@mittwald/flow-icons": "1.1.1",
81
+ "@mittwald/flow-icons": "1.1.3",
82
82
  "@mittwald/password-tools-js": "3.0.0-alpha.31",
83
- "@mittwald/react-tunnel": "1.1.1",
83
+ "@mittwald/react-tunnel": "1.1.3",
84
84
  "@mittwald/react-use-promise": "^4.2.2",
85
85
  "@react-aria/form": "^3.2.1",
86
86
  "@react-aria/i18n": "^3.13.1",
@@ -134,12 +134,12 @@
134
134
  "@internationalized/date": "^3.12.3",
135
135
  "@lezer/generator": "^1.8.0",
136
136
  "@lezer/lr": "^1.4.10",
137
- "@mittwald/flow-core": "1.1.1",
138
- "@mittwald/flow-design-tokens": "1.1.1",
139
- "@mittwald/flow-icons-base": "1.1.1",
137
+ "@mittwald/flow-core": "1.1.3",
138
+ "@mittwald/flow-design-tokens": "1.1.3",
139
+ "@mittwald/flow-icons-base": "1.1.3",
140
140
  "@mittwald/react-use-promise": "^4.2.2",
141
141
  "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
142
- "@mittwald/typescript-config": "1.1.1",
142
+ "@mittwald/typescript-config": "1.1.3",
143
143
  "@nx/storybook": "^22.7.6",
144
144
  "@storybook/addon-a11y": "^10.5.10",
145
145
  "@storybook/addon-actions": "^9.0.8",
@@ -190,7 +190,7 @@
190
190
  },
191
191
  "peerDependencies": {
192
192
  "@internationalized/date": "^3.12.2",
193
- "@mittwald/flow-icons-pro": "1.1.1",
193
+ "@mittwald/flow-icons-pro": "1.1.3",
194
194
  "@mittwald/react-use-promise": "^4.2.2",
195
195
  "next": "^16.2.3",
196
196
  "react": "^19.2.0",
@@ -211,5 +211,5 @@
211
211
  "optional": true
212
212
  }
213
213
  },
214
- "gitHead": "ea78ee648165afd822fbbe8d82b47118c905b8e7"
214
+ "gitHead": "202acbe23d2643c8e3a89ab8d65b25eb4d06231e"
215
215
  }