@mittwald/flow-react-components 0.2.0-alpha.193 → 0.2.0-alpha.195
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/CHANGELOG.md +12 -0
- package/dist/assets/doc-properties.json +4093 -4071
- package/dist/js/components/src/components/ComboBox/ComboBox.mjs +3 -2
- package/dist/js/components/src/components/ComboBox/ComboBox.mjs.map +1 -1
- package/dist/types/components/ComboBox/ComboBox.d.ts +8 -3
- package/dist/types/components/ComboBox/ComboBox.d.ts.map +1 -1
- package/dist/types/components/ComboBox/index.d.ts +1 -0
- package/dist/types/components/ComboBox/index.d.ts.map +1 -1
- package/dist/types/components/ComboBox/stories/FilePicker.stories.d.ts +7 -0
- package/dist/types/components/ComboBox/stories/FilePicker.stories.d.ts.map +1 -0
- package/dist/types/components/ComboBox/view.d.ts +8 -0
- package/dist/types/components/ComboBox/view.d.ts.map +1 -0
- package/dist/types/components/List/typedList.d.ts +1 -1
- package/dist/types/views/ComboBoxView.d.ts +5 -0
- package/dist/types/views/ComboBoxView.d.ts.map +1 -0
- package/package.json +4 -4
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
3
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
|
-
import 'react';
|
|
5
4
|
import * as Aria from 'react-aria-components';
|
|
6
5
|
import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
|
|
7
6
|
import { Button } from '../Button/Button.mjs';
|
|
7
|
+
import 'react';
|
|
8
8
|
import '@tabler/icons-react';
|
|
9
9
|
import '../Icon/Icon.mjs';
|
|
10
10
|
import '../../lib/viewComponentContext/viewComponentContext.mjs';
|
|
@@ -33,6 +33,7 @@ const ComboBox = flowComponent("ComboBox", (props) => {
|
|
|
33
33
|
controller: controllerFromProps,
|
|
34
34
|
placeholder,
|
|
35
35
|
ref,
|
|
36
|
+
renderEmptyState,
|
|
36
37
|
...rest
|
|
37
38
|
} = props;
|
|
38
39
|
const stringFormatter = useLocalizedStringFormatter(locales);
|
|
@@ -88,7 +89,7 @@ const ComboBox = flowComponent("ComboBox", (props) => {
|
|
|
88
89
|
)
|
|
89
90
|
] }),
|
|
90
91
|
children,
|
|
91
|
-
/* @__PURE__ */ jsx(Options, { controller, children: /* @__PURE__ */ jsx(TunnelExit, { id: "options" }) })
|
|
92
|
+
/* @__PURE__ */ jsx(Options, { controller, renderEmptyState, children: /* @__PURE__ */ jsx(TunnelExit, { id: "options" }) })
|
|
92
93
|
] }) })
|
|
93
94
|
}
|
|
94
95
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.mjs","sources":["../../../../../../src/components/ComboBox/ComboBox.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport
|
|
1
|
+
{"version":3,"file":"ComboBox.mjs","sources":["../../../../../../src/components/ComboBox/ComboBox.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Options } from \"@/components/Options\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./ComboBox.module.scss\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { type OverlayController, useOverlayController } from \"@/lib/controller\";\nimport type { OptionsProps } from \"@/components/Options/Options\";\n\nexport interface ComboBoxProps\n extends Omit<Aria.ComboBoxProps<never>, \"children\">,\n Pick<Aria.InputProps, \"placeholder\">,\n Pick<OptionsProps, \"renderEmptyState\">,\n PropsWithChildren,\n FlowComponentProps {\n onChange?: (value: string) => void;\n controller?: OverlayController;\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const ComboBox = flowComponent(\"ComboBox\", (props) => {\n const {\n children,\n className,\n menuTrigger = \"focus\",\n onChange = () => {\n // default: do nothing\n },\n onSelectionChange = () => {\n // default: do nothing\n },\n controller: controllerFromProps,\n placeholder,\n ref,\n renderEmptyState,\n\n ...rest\n } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n const rootClassName = clsx(\n styles.comboBox,\n formFieldStyles.formField,\n className,\n );\n\n const propsContext: PropsContext = {\n Label: {\n className: formFieldStyles.label,\n optional: !props.isRequired,\n },\n FieldDescription: {\n className: formFieldStyles.fieldDescription,\n },\n FieldError: {\n className: formFieldStyles.customFieldError,\n },\n Option: {\n tunnelId: \"options\",\n },\n };\n\n const handleOnSelectionChange = (key: Key | null) => {\n onChange(String(key));\n onSelectionChange(key);\n };\n\n const controllerFromContext = useOverlayController(\"ComboBox\", {\n reuseControllerFromContext: true,\n });\n\n const controller = controllerFromProps ?? controllerFromContext;\n\n return (\n <Aria.ComboBox\n ref={ref}\n menuTrigger={menuTrigger}\n className={rootClassName}\n {...rest}\n onSelectionChange={handleOnSelectionChange}\n onOpenChange={(isOpen) => controller.setOpen(isOpen)}\n >\n <PropsContextProvider props={propsContext}>\n <TunnelProvider>\n <div className={styles.input}>\n <Aria.Input placeholder={placeholder} />\n <Button\n className={styles.toggle}\n aria-label={stringFormatter.format(\"comboBox.showOptions\")}\n variant=\"plain\"\n color=\"secondary\"\n >\n <IconChevronDown />\n </Button>\n </div>\n\n {children}\n\n <Options controller={controller} renderEmptyState={renderEmptyState}>\n <TunnelExit id=\"options\" />\n </Options>\n </TunnelProvider>\n </PropsContextProvider>\n </Aria.ComboBox>\n );\n});\n\nexport default ComboBox;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAiCO,MAAM,QAAW,GAAA,aAAA,CAAc,UAAY,EAAA,CAAC,KAAU,KAAA;AAC3D,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAc,GAAA,OAAA;AAAA,IACd,WAAW,MAAM;AAAA,KAEjB;AAAA,IACA,oBAAoB,MAAM;AAAA,KAE1B;AAAA,IACA,UAAY,EAAA,mBAAA;AAAA,IACZ,WAAA;AAAA,IACA,GAAA;AAAA,IACA,gBAAA;AAAA,IAEA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAM,MAAA,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,QAAA;AAAA,IACP,eAAgB,CAAA,SAAA;AAAA,IAChB;AAAA,GACF;AAEA,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,KAAO,EAAA;AAAA,MACL,WAAW,eAAgB,CAAA,KAAA;AAAA,MAC3B,QAAA,EAAU,CAAC,KAAM,CAAA;AAAA,KACnB;AAAA,IACA,gBAAkB,EAAA;AAAA,MAChB,WAAW,eAAgB,CAAA;AAAA,KAC7B;AAAA,IACA,UAAY,EAAA;AAAA,MACV,WAAW,eAAgB,CAAA;AAAA,KAC7B;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA;AAAA;AACZ,GACF;AAEA,EAAM,MAAA,uBAAA,GAA0B,CAAC,GAAoB,KAAA;AACnD,IAAS,QAAA,CAAA,MAAA,CAAO,GAAG,CAAC,CAAA;AACpB,IAAA,iBAAA,CAAkB,GAAG,CAAA;AAAA,GACvB;AAEA,EAAM,MAAA,qBAAA,GAAwB,qBAAqB,UAAY,EAAA;AAAA,IAC7D,0BAA4B,EAAA;AAAA,GAC7B,CAAA;AAED,EAAA,MAAM,aAAa,mBAAuB,IAAA,qBAAA;AAE1C,EACE,uBAAA,GAAA;AAAA,IAAC,IAAK,CAAA,QAAA;AAAA,IAAL;AAAA,MACC,GAAA;AAAA,MACA,WAAA;AAAA,MACA,SAAW,EAAA,aAAA;AAAA,MACV,GAAG,IAAA;AAAA,MACJ,iBAAmB,EAAA,uBAAA;AAAA,MACnB,YAAc,EAAA,CAAC,MAAW,KAAA,UAAA,CAAW,QAAQ,MAAM,CAAA;AAAA,MAEnD,QAAC,kBAAA,GAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,YAAA,EAC3B,+BAAC,cACC,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,KACrB,EAAA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,IAAA,CAAK,KAAL,EAAA,EAAW,WAA0B,EAAA,CAAA;AAAA,0BACtC,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,WAAW,MAAO,CAAA,MAAA;AAAA,cAClB,YAAA,EAAY,eAAgB,CAAA,MAAA,CAAO,sBAAsB,CAAA;AAAA,cACzD,OAAQ,EAAA,OAAA;AAAA,cACR,KAAM,EAAA,WAAA;AAAA,cAEN,8BAAC,eAAgB,EAAA,EAAA;AAAA;AAAA;AACnB,SACF,EAAA,CAAA;AAAA,QAEC,QAAA;AAAA,wBAED,GAAA,CAAC,WAAQ,UAAwB,EAAA,gBAAA,EAC/B,8BAAC,UAAW,EAAA,EAAA,EAAA,EAAG,WAAU,CAC3B,EAAA;AAAA,OAAA,EACF,CACF,EAAA;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
|
|
@@ -1,11 +1,16 @@
|
|
|
1
|
-
import { PropsWithChildren
|
|
1
|
+
import { PropsWithChildren } from 'react';
|
|
2
2
|
import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
|
|
3
3
|
import { OverlayController } from '../../lib/controller';
|
|
4
|
+
import { OptionsProps } from '../Options/Options';
|
|
4
5
|
import * as Aria from "react-aria-components";
|
|
5
|
-
export interface ComboBoxProps extends Omit<Aria.ComboBoxProps<never>, "children">, Pick<Aria.InputProps, "placeholder">, PropsWithChildren, FlowComponentProps {
|
|
6
|
+
export interface ComboBoxProps extends Omit<Aria.ComboBoxProps<never>, "children">, Pick<Aria.InputProps, "placeholder">, Pick<OptionsProps, "renderEmptyState">, PropsWithChildren, FlowComponentProps {
|
|
6
7
|
onChange?: (value: string) => void;
|
|
7
8
|
controller?: OverlayController;
|
|
8
9
|
}
|
|
9
|
-
|
|
10
|
+
/**
|
|
11
|
+
* @flr-generate all
|
|
12
|
+
* @flr-clear-props-context
|
|
13
|
+
*/
|
|
14
|
+
export declare const ComboBox: import('react').FunctionComponent<ComboBoxProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
10
15
|
export default ComboBox;
|
|
11
16
|
//# sourceMappingURL=ComboBox.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAY9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAE/E,OAAO,EAAE,KAAK,iBAAiB,EAAwB,MAAM,kBAAkB,CAAC;AAChF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEjE,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,EACjD,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,EACpC,IAAI,CAAC,YAAY,EAAE,kBAAkB,CAAC,EACtC,iBAAiB,EACjB,kBAAkB;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,iBAAiB,CAAC;CAChC;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,kGAsFnB,CAAC;AAEH,eAAe,QAAQ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,KAAK,aAAa,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { ComboBox } from '..';
|
|
3
|
+
declare const meta: Meta<typeof ComboBox>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof ComboBox>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
//# sourceMappingURL=FilePicker.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FilePicker.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/ComboBox/stories/FilePicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAmCjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAsE/B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEvC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/view.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAEhE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,kBAAkB;QAC1B,QAAQ,EAAE,aAAa,CAAC,OAAO,QAAQ,CAAC,CAAC;KAC1C;CACF"}
|
|
@@ -68,8 +68,8 @@ export declare const typedList: <T>() => {
|
|
|
68
68
|
disallowEmptySelection?: boolean | undefined;
|
|
69
69
|
onSelectionChange?: ((keys: import('react-stately').Selection) => void) | undefined;
|
|
70
70
|
disabledKeys?: Iterable<import('react-aria').Key> | undefined;
|
|
71
|
-
selectionMode?: import('react-stately').SelectionMode | undefined;
|
|
72
71
|
selectionBehavior?: import('react-stately').SelectionBehavior | undefined;
|
|
72
|
+
selectionMode?: import('react-stately').SelectionMode | undefined;
|
|
73
73
|
dragAndDropHooks?: import('react-aria-components').DragAndDropHooks | undefined;
|
|
74
74
|
verticalAlign?: "top" | "middle" | undefined;
|
|
75
75
|
sortDescriptor?: import('react-stately').SortDescriptor | undefined;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ComboBoxView.d.ts","sourceRoot":"","sources":["../../../src/views/ComboBoxView.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,KAAK,EAAE,EAAc,MAAM,OAAO,CAAC;AACnD,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAGrE,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,aAAa,CAGnC,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "0.2.0-alpha.
|
|
3
|
+
"version": "0.2.0-alpha.195",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://mittwald.github.io/flow",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"dependencies": {
|
|
54
54
|
"@chakra-ui/live-region": "^2.1.0",
|
|
55
55
|
"@internationalized/string-compiler": "^3.2.6",
|
|
56
|
-
"@mittwald/react-tunnel": "0.2.0-alpha.
|
|
56
|
+
"@mittwald/react-tunnel": "0.2.0-alpha.195",
|
|
57
57
|
"@mittwald/react-use-promise": "^3.0.4",
|
|
58
58
|
"@react-aria/form": "^3.0.14",
|
|
59
59
|
"@react-aria/utils": "^3.28.1",
|
|
@@ -92,7 +92,7 @@
|
|
|
92
92
|
"devDependencies": {
|
|
93
93
|
"@faker-js/faker": "^9.6.0",
|
|
94
94
|
"@internationalized/date": "^3.7.0",
|
|
95
|
-
"@mittwald/flow-design-tokens": "0.2.0-alpha.
|
|
95
|
+
"@mittwald/flow-design-tokens": "0.2.0-alpha.195",
|
|
96
96
|
"@mittwald/react-use-promise": "^2.6.0",
|
|
97
97
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.3",
|
|
98
98
|
"@mittwald/typescript-config": "",
|
|
@@ -173,5 +173,5 @@
|
|
|
173
173
|
"optional": true
|
|
174
174
|
}
|
|
175
175
|
},
|
|
176
|
-
"gitHead": "
|
|
176
|
+
"gitHead": "6212b3f42544e2d0d4bee1007edc552628895783"
|
|
177
177
|
}
|