@mittwald/flow-react-components 1.2.0-next.22 → 1.2.0-next.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +13 -0
- package/dist/assets/component-index.json +1 -1
- package/dist/assets/doc-properties.json +1 -1
- package/dist/css/all-layered.css +1 -1
- package/dist/css/all.css +1 -1
- package/dist/js/packages/components/src/components/List/components/Items/components/Item/Item.module.mjs +3 -1
- package/dist/js/packages/components/src/components/List/components/Items/components/Item/Item.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/List/components/Items/views/GridListItem/GridListItem.mjs +13 -3
- package/dist/js/packages/components/src/components/List/components/Items/views/GridListItem/GridListItem.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Tabs/Tabs.mjs +1 -1
- package/dist/js/packages/components/src/components/Tabs/Tabs.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Tabs/components/TabList/TabList.mjs.map +1 -1
- package/dist/types/components/List/components/Items/views/GridListItem/GridListItem.d.ts.map +1 -1
- package/dist/types/components/Tabs/Tabs.d.ts.map +1 -1
- package/dist/types/components/Tabs/components/TabList/TabList.d.ts +1 -1
- package/dist/types/components/Tabs/components/TabList/TabList.d.ts.map +1 -1
- package/package.json +9 -9
|
@@ -4,14 +4,16 @@
|
|
|
4
4
|
var item = "flow--list--items--item";
|
|
5
5
|
var isSelected = "flow--list--items--item--is-selected";
|
|
6
6
|
var hasAction = "flow--list--items--item--has-action";
|
|
7
|
+
var link = "flow--list--items--item--link";
|
|
7
8
|
var tile = "flow--list--items--item--tile";
|
|
8
9
|
var Item_module_default = {
|
|
9
10
|
item,
|
|
10
11
|
isSelected,
|
|
11
12
|
hasAction,
|
|
13
|
+
link,
|
|
12
14
|
tile
|
|
13
15
|
};
|
|
14
16
|
//#endregion
|
|
15
|
-
export { Item_module_default as default, hasAction, isSelected, item, tile };
|
|
17
|
+
export { Item_module_default as default, hasAction, isSelected, item, link, tile };
|
|
16
18
|
|
|
17
19
|
//# sourceMappingURL=Item.module.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Item.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/components/Item/Item.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.item {\n cursor: default;\n background-color: var(--list-item--background-color--default);\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n @include focus.focus;\n\n &.item {\n outline-offset: calc(var(--size-px--xs) * -1);\n box-shadow: none;\n }\n\n &:where(.isSelected) {\n background-color: var(--list-item--background-color--pressed);\n }\n\n &:not(:last-child) {\n border-bottom: var(--list-item--border-width) var(--list-item--border-style)\n var(--list-item--border-color);\n }\n\n &[data-href] {\n cursor: pointer;\n }\n\n &:where(.hasAction):not(\n &:has(:global(.flow--list--items--item--view--bottom-content):hover)\n ) {\n &:where(:not(.isSelected)) {\n &:hover {\n background-color: var(--list-item--background-color--hover);\n }\n }\n\n &[data-pressed] {\n background-color: var(--list-item--background-color--pressed);\n }\n }\n\n :global(.flow--avatar) {\n transition-property: filter;\n transition-duration: var(--transition--duration--default);\n }\n\n &.tile {\n border: none;\n border-radius: var(--list-item--corner-radius);\n\n &.item {\n outline-offset: var(--size-px--xxs);\n }\n\n &:where(.hasAction) {\n &:not(.isSelected) {\n &:hover {\n :global(.flow--avatar) {\n filter: brightness(var(--image-button--brightness--hover));\n }\n }\n }\n\n &[data-pressed] {\n :global(.flow--avatar) {\n filter: brightness(var(--image-button--brightness--pressed));\n }\n }\n }\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"Item.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/components/Item/Item.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.item {\n position: relative;\n cursor: default;\n background-color: var(--list-item--background-color--default);\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n @include focus.focus;\n\n &.item {\n outline-offset: calc(var(--size-px--xs) * -1);\n box-shadow: none;\n }\n\n &:where(.isSelected) {\n background-color: var(--list-item--background-color--pressed);\n }\n\n &:not(:last-child) {\n border-bottom: var(--list-item--border-width) var(--list-item--border-style)\n var(--list-item--border-color);\n }\n\n &[data-href] {\n cursor: pointer;\n }\n\n &:where(.hasAction):not(\n &:has(:global(.flow--list--items--item--view--bottom-content):hover)\n ) {\n &:where(:not(.isSelected)) {\n &:hover {\n background-color: var(--list-item--background-color--hover);\n }\n }\n\n &[data-pressed] {\n background-color: var(--list-item--background-color--pressed);\n }\n }\n\n :global(.flow--avatar) {\n transition-property: filter;\n transition-duration: var(--transition--duration--default);\n }\n\n /* Elements */\n\n /*\n * Covers the whole item so a right-click anywhere on it hits a real link.\n * Interactive content is lifted back above the overlay, so buttons, context\n * menus and checkboxes keep receiving their own clicks.\n */\n .link {\n position: absolute;\n inset: 0;\n z-index: 1;\n }\n\n &:has(.link) {\n :where(\n a,\n button,\n input,\n label,\n select,\n summary,\n textarea,\n [role=\"button\"],\n [role=\"checkbox\"],\n [role=\"link\"],\n [role=\"switch\"],\n [tabindex]\n ):not(.link) {\n position: relative;\n z-index: 2;\n }\n\n /*\n * The bottom slot carries arbitrary consumer content (and the accordion's\n * expanded content), so it stays fully clickable and selectable.\n */\n :global(.flow--list--list-item-view--bottom-content) {\n position: relative;\n z-index: 2;\n }\n }\n\n &.tile {\n border: none;\n border-radius: var(--list-item--corner-radius);\n\n &.item {\n outline-offset: var(--size-px--xxs);\n }\n\n &:where(.hasAction) {\n &:not(.isSelected) {\n &:hover {\n :global(.flow--avatar) {\n filter: brightness(var(--image-button--brightness--hover));\n }\n }\n }\n\n &[data-pressed] {\n :global(.flow--avatar) {\n filter: brightness(var(--image-button--brightness--pressed));\n }\n }\n }\n }\n}\n"],"mappings":""}
|
|
@@ -2,15 +2,25 @@
|
|
|
2
2
|
/* */
|
|
3
3
|
import Item_module_default from "../../components/Item/Item.module.mjs";
|
|
4
4
|
import clsx from "clsx";
|
|
5
|
-
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
import { useLinkProps } from "@react-aria/utils";
|
|
6
7
|
import * as Aria from "react-aria-components";
|
|
7
8
|
//#region src/components/List/components/Items/views/GridListItem/GridListItem.tsx
|
|
8
9
|
/** @flr-generate all */
|
|
9
10
|
var GridListItem = (props) => {
|
|
10
|
-
const { hasAction, isTile, ...restProps } = props;
|
|
11
|
+
const { hasAction, isTile, children, ...restProps } = props;
|
|
12
|
+
const linkProps = useLinkProps(props);
|
|
13
|
+
const linkOverlay = linkProps.href ? /* @__PURE__ */ jsx("a", {
|
|
14
|
+
...linkProps,
|
|
15
|
+
"aria-hidden": true,
|
|
16
|
+
className: Item_module_default.link,
|
|
17
|
+
draggable: false,
|
|
18
|
+
tabIndex: -1
|
|
19
|
+
}) : null;
|
|
11
20
|
return /* @__PURE__ */ jsx(Aria.GridListItem, {
|
|
12
21
|
...restProps,
|
|
13
|
-
className: (renderProps) => clsx(Item_module_default.item, hasAction && Item_module_default.hasAction, isTile && Item_module_default.tile, renderProps.isSelected && Item_module_default.isSelected)
|
|
22
|
+
className: (renderProps) => clsx(Item_module_default.item, hasAction && Item_module_default.hasAction, isTile && Item_module_default.tile, renderProps.isSelected && Item_module_default.isSelected),
|
|
23
|
+
children: (renderProps) => /* @__PURE__ */ jsxs(Fragment, { children: [typeof children === "function" ? children(renderProps) : children, linkOverlay] })
|
|
14
24
|
});
|
|
15
25
|
};
|
|
16
26
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridListItem.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/views/GridListItem/GridListItem.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { FC } from \"react\";\nimport styles from \"@/components/List/components/Items/components/Item/Item.module.scss\";\nimport clsx from \"clsx\";\n\nexport type GridListItemProps = Aria.GridListItemProps<never> & {\n hasAction?: boolean;\n isTile?: boolean;\n};\n\n/** @flr-generate all */\nexport const GridListItem: FC<GridListItemProps> = (props) => {\n const { hasAction, isTile, ...restProps } = props;\n return (\n <Aria.GridListItem\n {...restProps}\n className={(renderProps) =>\n clsx(\n styles.item,\n hasAction && styles.hasAction,\n isTile && styles.tile,\n renderProps.isSelected && styles.isSelected,\n )\n }\n
|
|
1
|
+
{"version":3,"file":"GridListItem.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/views/GridListItem/GridListItem.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { FC } from \"react\";\nimport styles from \"@/components/List/components/Items/components/Item/Item.module.scss\";\nimport clsx from \"clsx\";\nimport { useLinkProps } from \"@react-aria/utils\";\n\nexport type GridListItemProps = Aria.GridListItemProps<never> & {\n hasAction?: boolean;\n isTile?: boolean;\n};\n\n/** @flr-generate all */\nexport const GridListItem: FC<GridListItemProps> = (props) => {\n const { hasAction, isTile, children, ...restProps } = props;\n\n // React Aria turns `href` into data attributes and navigates on press, so\n // the row itself is always a `div`. Overlay a real anchor to give the browser\n // back its own link affordances: context menu, middle-click, modifier-click.\n const linkProps = useLinkProps(props);\n\n const linkOverlay = linkProps.href ? (\n // The row keeps owning activation and the accessible semantics. The anchor\n // must stay untabbable — React Aria treats a tabbable descendant as\n // interactive content and would stop the row's own press — and out of the\n // accessibility tree, so screen readers announce the row unchanged.\n <a\n {...linkProps}\n aria-hidden\n className={styles.link}\n draggable={false}\n tabIndex={-1}\n />\n ) : null;\n\n return (\n <Aria.GridListItem\n {...restProps}\n className={(renderProps) =>\n clsx(\n styles.item,\n hasAction && styles.hasAction,\n isTile && styles.tile,\n renderProps.isSelected && styles.isSelected,\n )\n }\n >\n {(renderProps) => (\n <>\n {typeof children === \"function\" ? children(renderProps) : children}\n {linkOverlay}\n </>\n )}\n </Aria.GridListItem>\n );\n};\n\nexport default GridListItem;\n"],"mappings":";;;;;;;;;AAYA,IAAa,gBAAuC,UAAU;CAC5D,MAAM,EAAE,WAAW,QAAQ,UAAU,GAAG,cAAc;CAKtD,MAAM,YAAY,aAAa,KAAK;CAEpC,MAAM,cAAc,UAAU,OAK5B,oBAAC,KAAD;EACE,GAAI;EACJ,eAAA;EACA,WAAW,oBAAO;EAClB,WAAW;EACX,UAAU;CACX,CAAA,IACC;CAEJ,OACE,oBAAC,KAAK,cAAN;EACE,GAAI;EACJ,YAAY,gBACV,KACE,oBAAO,MACP,aAAa,oBAAO,WACpB,UAAU,oBAAO,MACjB,YAAY,cAAc,oBAAO,UACnC;EAGA,WAAA,gBACA,qBAAA,UAAA,EAAA,UAAA,CACG,OAAO,aAAa,aAAa,SAAS,WAAW,IAAI,UACzD,WACD,EAAA,CAAA;CAEa,CAAA;AAEvB"}
|
|
@@ -16,7 +16,7 @@ var Tabs = flowComponent("Tabs", (props) => {
|
|
|
16
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
|
-
const selectedKey = selectedKeyProps ?? selectedKeyState;
|
|
19
|
+
const selectedKey = selectedKeyProps ?? selectedKeyState ?? null;
|
|
20
20
|
const isSsr = useIsSSR();
|
|
21
21
|
return /* @__PURE__ */ jsxs(Fragment$1, { children: [children, /* @__PURE__ */ jsxs(Aria.Tabs, {
|
|
22
22
|
slot: null,
|
|
@@ -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 * 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;
|
|
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 /*\n * `null`, not `undefined`, keeps `Aria.Tabs` controlled while nothing is\n * selected yet — see the controlled-from-the-first-render convention in\n * AGENTS.md. `Aria.TabsProps` narrows `selectedKey` to `Key`, hence the cast\n * below.\n */\n const selectedKey = selectedKeyProps ?? selectedKeyState ?? null;\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 as Aria.Key | undefined}\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;CAQpB,MAAM,cAAc,oBAAoB,oBAAoB;CAE5D,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"}
|
|
@@ -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 |
|
|
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 | null;\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"}
|
package/dist/types/components/List/components/Items/views/GridListItem/GridListItem.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridListItem.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/List/components/Items/views/GridListItem/GridListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAC9C,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"GridListItem.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/List/components/Items/views/GridListItem/GridListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAC9C,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAKhC,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,wBAAwB;AACxB,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CA0C9C,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -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;;;;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,
|
|
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,8FAgEf,CAAC;AAEH,eAAe,IAAI,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import * as Aria from "react-aria-components";
|
|
3
3
|
interface Props {
|
|
4
|
-
selection: Aria.Key |
|
|
4
|
+
selection: Aria.Key | null;
|
|
5
5
|
onContextMenuSelectionChange: (key: Aria.Key) => void;
|
|
6
6
|
disabledKeys?: Iterable<Aria.Key>;
|
|
7
7
|
"aria-label"?: string;
|
|
@@ -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,
|
|
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,IAAI,CAAC;IAC3B,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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "1.2.0-next.
|
|
3
|
+
"version": "1.2.0-next.24",
|
|
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.2.0-next.
|
|
81
|
+
"@mittwald/flow-icons": "1.2.0-next.24",
|
|
82
82
|
"@mittwald/password-tools-js": "3.0.0-alpha.31",
|
|
83
|
-
"@mittwald/react-tunnel": "1.2.0-next.
|
|
83
|
+
"@mittwald/react-tunnel": "1.2.0-next.24",
|
|
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.2.0-next.
|
|
138
|
-
"@mittwald/flow-design-tokens": "1.2.0-next.
|
|
139
|
-
"@mittwald/flow-icons-base": "1.2.0-next.
|
|
137
|
+
"@mittwald/flow-core": "1.2.0-next.24",
|
|
138
|
+
"@mittwald/flow-design-tokens": "1.2.0-next.24",
|
|
139
|
+
"@mittwald/flow-icons-base": "1.2.0-next.24",
|
|
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.2.0-next.
|
|
142
|
+
"@mittwald/typescript-config": "1.2.0-next.24",
|
|
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.2.0-next.
|
|
193
|
+
"@mittwald/flow-icons-pro": "1.2.0-next.24",
|
|
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": "
|
|
214
|
+
"gitHead": "03f6c914f68063eca7875c0b08026f555c735d47"
|
|
215
215
|
}
|