@webiny/admin-ui 6.0.0-alpha.0

package/DynamicFieldset/Fieldset.js

@@ -0,0 +1,108 @@
+import React from "react";
+import { FormComponentErrorMessage, FormComponentNote } from "../FormComponent";
+class DynamicFieldset extends React.Component {
+  static defaultProps = {
+    value: []
+  };
+  header = null;
+  footer = null;
+  rows = null;
+  empty = null;
+  actions = {
+    add: (index = -1) => () => this.addData(index),
+    remove: (index = -1) => () => this.removeData(index)
+  };
+  removeData = index => {
+    const {
+      value,
+      onChange
+    } = this.props;
+    if (!value) {
+      return;
+    }
+    onChange([...value.slice(0, index), ...value.slice(index + 1)]);
+  };
+  addData = (index = -1) => {
+    const {
+      onChange,
+      onAdd
+    } = this.props;
+    let value = this.props.value;
+    if (!value) {
+      value = [];
+    }
+    const newValue = typeof onAdd === "function" ? onAdd() : {};
+    if (index < 0) {
+      onChange([...value, newValue]);
+    } else {
+      onChange([...value.slice(0, index + 1), newValue, ...value.slice(index + 1)]);
+    }
+  };
+  renderHeader = cb => {
+    this.header = cb();
+    return null;
+  };
+  renderFooter = cb => {
+    this.footer = cb();
+    return null;
+  };
+  renderRow = cb => {
+    const {
+      value
+    } = this.props;
+    if (!value) {
+      return null;
+    }
+    this.rows = value.map((record, index) => {
+      return /*#__PURE__*/React.createElement("div", {
+        key: index
+      }, cb({
+        data: record,
+        index
+      }));
+    });
+    return null;
+  };
+  renderEmpty = cb => {
+    this.empty = cb();
+    return null;
+  };
+  renderComponent() {
+    const {
+      value
+    } = this.props;
+    const {
+      children
+    } = this.props;
+    children({
+      actions: this.actions,
+      header: this.renderHeader,
+      footer: this.renderFooter,
+      row: this.renderRow,
+      empty: this.renderEmpty
+    });
+    if (!value || value.length === 0) {
+      return this.empty;
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, this.header, this.rows, this.footer);
+  }
+  render() {
+    const {
+      description,
+      validation
+    } = this.props;
+    const {
+      isValid: validationIsValid,
+      message: validationMessage
+    } = validation || {};
+    return /*#__PURE__*/React.createElement(React.Fragment, null, this.renderComponent(), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
+      invalid: Boolean(validationIsValid === false),
+      text: validationMessage
+    }), /*#__PURE__*/React.createElement(FormComponentNote, {
+      text: description
+    }));
+  }
+}
+export { DynamicFieldset };
+
+//# sourceMappingURL=Fieldset.js.map

package/DynamicFieldset/Fieldset.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","FormComponentErrorMessage","FormComponentNote","DynamicFieldset","Component","defaultProps","value","header","footer","rows","empty","actions","add","index","addData","remove","removeData","onChange","props","slice","onAdd","newValue","renderHeader","cb","renderFooter","renderRow","map","record","createElement","key","data","renderEmpty","renderComponent","children","row","length","Fragment","render","description","validation","isValid","validationIsValid","message","validationMessage","invalid","Boolean","text"],"sources":["Fieldset.tsx"],"sourcesContent":["import React from \"react\";\nimport { FormComponentErrorMessage, FormComponentNote } from \"~/FormComponent\";\n\ninterface ChildrenRenderPropRowCallableParams {\n    index: number;\n    data: any;\n}\ninterface ChildrenRenderPropRowCallable {\n    (params: ChildrenRenderPropRowCallableParams): React.ReactNode;\n}\ninterface ChildrenRenderPropHeaderCallable {\n    (): React.ReactNode;\n}\ninterface ChildrenRenderPropEmptyCallable {\n    (): React.ReactNode;\n}\ninterface ChildrenRenderPropFooterCallable {\n    (): React.ReactNode;\n}\n\ninterface ChildrenRenderProp {\n    actions: {\n        add: (index?: number) => () => void;\n        remove: (index: number) => () => void;\n    };\n    header: (cb: ChildrenRenderPropHeaderCallable) => React.ReactNode;\n    footer: (cb: ChildrenRenderPropFooterCallable) => React.ReactNode;\n    row: (cb: ChildrenRenderPropRowCallable) => React.ReactNode;\n    empty: (cb: ChildrenRenderPropEmptyCallable) => React.ReactNode;\n}\n\ninterface DynamicFieldsetProps {\n    value?: any[];\n    description?: string;\n    validation?: { isValid: null | boolean; message?: string };\n    onChange: (value: any) => void;\n    // Create a new value to be added to the fieldset.\n    onAdd: () => any;\n    children: (props: ChildrenRenderProp) => React.ReactNode;\n}\n\nclass DynamicFieldset extends React.Component<DynamicFieldsetProps> {\n    static defaultProps: Partial<DynamicFieldsetProps> = {\n        value: []\n    };\n\n    header: React.ReactNode = null;\n    footer: React.ReactNode = null;\n    rows: React.ReactNode = null;\n    empty: React.ReactNode = null;\n\n    actions = {\n        add:\n            (index = -1) =>\n            () =>\n                this.addData(index),\n        remove:\n            (index = -1) =>\n            () =>\n                this.removeData(index)\n    };\n\n    removeData = (index: number) => {\n        const { value, onChange } = this.props;\n        if (!value) {\n            return;\n        }\n        onChange([...value.slice(0, index), ...value.slice(index + 1)]);\n    };\n\n    addData = (index = -1) => {\n        const { onChange, onAdd } = this.props;\n        let value = this.props.value;\n        if (!value) {\n            value = [];\n        }\n\n        const newValue = typeof onAdd === \"function\" ? onAdd() : {};\n\n        if (index < 0) {\n            onChange([...value, newValue]);\n        } else {\n            onChange([...value.slice(0, index + 1), newValue, ...value.slice(index + 1)]);\n        }\n    };\n\n    renderHeader = (cb: () => React.ReactNode): React.ReactNode => {\n        this.header = cb();\n        return null;\n    };\n\n    renderFooter = (cb: () => React.ReactNode): React.ReactNode => {\n        this.footer = cb();\n        return null;\n    };\n\n    renderRow = (cb: ChildrenRenderPropRowCallable): React.ReactNode => {\n        const { value } = this.props;\n        if (!value) {\n            return null;\n        }\n        this.rows = value.map((record, index) => {\n            return <div key={index}>{cb({ data: record, index })}</div>;\n        });\n        return null;\n    };\n\n    renderEmpty = (cb: () => React.ReactNode): React.ReactNode => {\n        this.empty = cb();\n        return null;\n    };\n\n    public renderComponent(): React.ReactNode {\n        const { value } = this.props;\n        const { children } = this.props;\n\n        children({\n            actions: this.actions,\n            header: this.renderHeader,\n            footer: this.renderFooter,\n            row: this.renderRow,\n            empty: this.renderEmpty\n        });\n\n        if (!value || value.length === 0) {\n            return this.empty;\n        }\n\n        return (\n            <React.Fragment>\n                {this.header}\n                {this.rows}\n                {this.footer}\n            </React.Fragment>\n        );\n    }\n\n    public override render() {\n        const { description, validation } = this.props;\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <>\n                {this.renderComponent()}\n                <FormComponentErrorMessage\n                    invalid={Boolean(validationIsValid === false)}\n                    text={validationMessage}\n                />\n                <FormComponentNote text={description} />\n            </>\n        );\n    }\n}\n\nexport { DynamicFieldset, type DynamicFieldsetProps };\n"],"mappings":"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","ignoreList":[]}

package/DynamicFieldset/index.d.ts

@@ -0,0 +1 @@
+export * from "./Fieldset";

package/DynamicFieldset/index.js

@@ -0,0 +1,3 @@
+export * from "./Fieldset";
+
+//# sourceMappingURL=index.js.map

package/DynamicFieldset/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Fieldset\";\n"],"mappings":"AAAA","ignoreList":[]}

package/FilePicker/FilePicker.d.ts

@@ -0,0 +1,84 @@
+import React from "react";
+import { type FilePickerPrimitiveProps } from "./primitives";
+import { type FormComponentProps } from "../FormComponent";
+type FilePickerProps = FilePickerPrimitiveProps & FormComponentProps;
+declare const FilePicker: (({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: FilePickerProps) => React.JSX.Element) & {
+    original: ({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: FilePickerProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: FilePickerProps) => React.JSX.Element) & {
+        original: ({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: FilePickerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: FilePickerProps) => React.JSX.Element) & {
+        original: ({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: FilePickerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+} & {
+    Preview: {
+        Image: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("./primitives/components/types").FilePreviewDefaultProps) => React.JSX.Element) & {
+            original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("./primitives/components/types").FilePreviewDefaultProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("./primitives/components/types").FilePreviewDefaultProps) => React.JSX.Element) & {
+                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("./primitives/components/types").FilePreviewDefaultProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("./primitives/components/types").FilePreviewDefaultProps) => React.JSX.Element) & {
+                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("./primitives/components/types").FilePreviewDefaultProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        };
+        RichItem: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("./primitives/components/previews/RichItemPreview/RichItemPreview").RichItemPreviewProps) => React.JSX.Element) & {
+            original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("./primitives/components/previews/RichItemPreview/RichItemPreview").RichItemPreviewProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("./primitives/components/previews/RichItemPreview/RichItemPreview").RichItemPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("./primitives/components/previews/RichItemPreview/RichItemPreview").RichItemPreviewProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("./primitives/components/previews/RichItemPreview/RichItemPreview").RichItemPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("./primitives/components/previews/RichItemPreview/RichItemPreview").RichItemPreviewProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        };
+        TextOnly: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("./primitives/components/previews/TextOnlyPreview/TextOnlyPreview").TextOnlyPreviewProps) => React.JSX.Element) & {
+            original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("./primitives/components/previews/TextOnlyPreview/TextOnlyPreview").TextOnlyPreviewProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("./primitives/components/previews/TextOnlyPreview/TextOnlyPreview").TextOnlyPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("./primitives/components/previews/TextOnlyPreview/TextOnlyPreview").TextOnlyPreviewProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("./primitives/components/previews/TextOnlyPreview/TextOnlyPreview").TextOnlyPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("./primitives/components/previews/TextOnlyPreview/TextOnlyPreview").TextOnlyPreviewProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        };
+    };
+};
+export { FilePicker, type FilePickerProps };

package/FilePicker/FilePicker.js

@@ -0,0 +1,72 @@
+import React, { useCallback, useMemo } from "react";
+import { makeDecoratable, withStaticProps } from "../utils";
+import { FilePickerPrimitive } from "./primitives";
+import { FormComponentErrorMessage, FormComponentNote } from "../FormComponent";
+import { ImagePreview, RichItemPreview, TextOnlyPreview, FormPickerLabel } from "./primitives/components";
+const BaseFilePicker = ({
+  label,
+  description,
+  note,
+  required,
+  disabled,
+  validation,
+  validate,
+  onBlur: originalOnBlur,
+  type = "area",
+  ...props
+}) => {
+  const {
+    isValid: validationIsValid,
+    message: validationMessage
+  } = validation || {};
+  const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+  const onBlur = useCallback(async e => {
+    if (validate) {
+      // Since we are accessing event in an async operation, we need to persist it.
+      // See https://reactjs.org/docs/events.html#event-pooling.
+      e.persist();
+      await validate();
+    }
+    originalOnBlur && originalOnBlur(e);
+  }, [validate, originalOnBlur]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-w-full"
+  }, type !== "area" && /*#__PURE__*/React.createElement(FormPickerLabel, {
+    label: label,
+    required: required,
+    disabled: disabled,
+    description: description,
+    invalid: invalid
+  }), /*#__PURE__*/React.createElement(FilePickerPrimitive, Object.assign({}, props, {
+    label: /*#__PURE__*/React.createElement(FormPickerLabel, {
+      label: label,
+      required: required,
+      disabled: disabled,
+      description: description,
+      className: "wby-m-0",
+      invalid: invalid
+    }),
+    disabled: disabled,
+    invalid: invalid,
+    onBlur: onBlur,
+    type: type
+  })), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
+    text: validationMessage,
+    invalid: invalid,
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement(FormComponentNote, {
+    text: note,
+    disabled: disabled
+  }));
+};
+const DecoratableFilePicker = makeDecoratable("FilePicker", BaseFilePicker);
+const FilePicker = withStaticProps(DecoratableFilePicker, {
+  Preview: {
+    Image: ImagePreview,
+    RichItem: RichItemPreview,
+    TextOnly: TextOnlyPreview
+  }
+});
+export { FilePicker };
+
+//# sourceMappingURL=FilePicker.js.map

package/FilePicker/FilePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useMemo","makeDecoratable","withStaticProps","FilePickerPrimitive","FormComponentErrorMessage","FormComponentNote","ImagePreview","RichItemPreview","TextOnlyPreview","FormPickerLabel","BaseFilePicker","label","description","note","required","disabled","validation","validate","onBlur","originalOnBlur","type","props","isValid","validationIsValid","message","validationMessage","invalid","e","persist","createElement","className","Object","assign","text","DecoratableFilePicker","FilePicker","Preview","Image","RichItem","TextOnly"],"sources":["FilePicker.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils\";\nimport { FilePickerPrimitive, type FilePickerPrimitiveProps } from \"./primitives\";\nimport {\n    FormComponentErrorMessage,\n    FormComponentNote,\n    type FormComponentProps\n} from \"~/FormComponent\";\nimport {\n    ImagePreview,\n    RichItemPreview,\n    TextOnlyPreview,\n    FormPickerLabel\n} from \"~/FilePicker/primitives/components\";\n\ntype FilePickerProps = FilePickerPrimitiveProps & FormComponentProps;\n\nconst BaseFilePicker = ({\n    label,\n    description,\n    note,\n    required,\n    disabled,\n    validation,\n    validate,\n    onBlur: originalOnBlur,\n    type = \"area\",\n    ...props\n}: FilePickerProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    const onBlur = useCallback(\n        async (e: React.FocusEvent<HTMLInputElement>) => {\n            if (validate) {\n                // Since we are accessing event in an async operation, we need to persist it.\n                // See https://reactjs.org/docs/events.html#event-pooling.\n                e.persist();\n                await validate();\n            }\n            originalOnBlur && originalOnBlur(e);\n        },\n        [validate, originalOnBlur]\n    );\n\n    return (\n        <div className={\"wby-w-full\"}>\n            {type !== \"area\" && (\n                <FormPickerLabel\n                    label={label}\n                    required={required}\n                    disabled={disabled}\n                    description={description}\n                    invalid={invalid}\n                />\n            )}\n            <FilePickerPrimitive\n                {...props}\n                label={\n                    <FormPickerLabel\n                        label={label}\n                        required={required}\n                        disabled={disabled}\n                        description={description}\n                        className={\"wby-m-0\"}\n                        invalid={invalid}\n                    />\n                }\n                disabled={disabled}\n                invalid={invalid}\n                onBlur={onBlur}\n                type={type}\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\n\nconst DecoratableFilePicker = makeDecoratable(\"FilePicker\", BaseFilePicker);\n\nconst FilePicker = withStaticProps(DecoratableFilePicker, {\n    Preview: {\n        Image: ImagePreview,\n        RichItem: RichItemPreview,\n        TextOnly: TextOnlyPreview\n    }\n});\nexport { FilePicker, type FilePickerProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACnD,SAASC,eAAe,EAAEC,eAAe;AACzC,SAASC,mBAAmB;AAC5B,SACIC,yBAAyB,EACzBC,iBAAiB;AAGrB,SACIC,YAAY,EACZC,eAAe,EACfC,eAAe,EACfC,eAAe;AAKnB,MAAMC,cAAc,GAAGA,CAAC;EACpBC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACVC,QAAQ;EACRC,MAAM,EAAEC,cAAc;EACtBC,IAAI,GAAG,MAAM;EACb,GAAGC;AACU,CAAC,KAAK;EACnB,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGT,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMU,OAAO,GAAG1B,OAAO,CAAC,MAAMuB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAE/E,MAAML,MAAM,GAAGnB,WAAW,CACtB,MAAO4B,CAAqC,IAAK;IAC7C,IAAIV,QAAQ,EAAE;MACV;MACA;MACAU,CAAC,CAACC,OAAO,CAAC,CAAC;MACX,MAAMX,QAAQ,CAAC,CAAC;IACpB;IACAE,cAAc,IAAIA,cAAc,CAACQ,CAAC,CAAC;EACvC,CAAC,EACD,CAACV,QAAQ,EAAEE,cAAc,CAC7B,CAAC;EAED,oBACIrB,KAAA,CAAA+B,aAAA;IAAKC,SAAS,EAAE;EAAa,GACxBV,IAAI,KAAK,MAAM,iBACZtB,KAAA,CAAA+B,aAAA,CAACpB,eAAe;IACZE,KAAK,EAAEA,KAAM;IACbG,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBH,WAAW,EAAEA,WAAY;IACzBc,OAAO,EAAEA;EAAQ,CACpB,CACJ,eACD5B,KAAA,CAAA+B,aAAA,CAAC1B,mBAAmB,EAAA4B,MAAA,CAAAC,MAAA,KACZX,KAAK;IACTV,KAAK,eACDb,KAAA,CAAA+B,aAAA,CAACpB,eAAe;MACZE,KAAK,EAAEA,KAAM;MACbG,QAAQ,EAAEA,QAAS;MACnBC,QAAQ,EAAEA,QAAS;MACnBH,WAAW,EAAEA,WAAY;MACzBkB,SAAS,EAAE,SAAU;MACrBJ,OAAO,EAAEA;IAAQ,CACpB,CACJ;IACDX,QAAQ,EAAEA,QAAS;IACnBW,OAAO,EAAEA,OAAQ;IACjBR,MAAM,EAAEA,MAAO;IACfE,IAAI,EAAEA;EAAK,EACd,CAAC,eACFtB,KAAA,CAAA+B,aAAA,CAACzB,yBAAyB;IACtB6B,IAAI,EAAER,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBX,QAAQ,EAAEA;EAAS,CACtB,CAAC,eACFjB,KAAA,CAAA+B,aAAA,CAACxB,iBAAiB;IAAC4B,IAAI,EAAEpB,IAAK;IAACE,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AAED,MAAMmB,qBAAqB,GAAGjC,eAAe,CAAC,YAAY,EAAES,cAAc,CAAC;AAE3E,MAAMyB,UAAU,GAAGjC,eAAe,CAACgC,qBAAqB,EAAE;EACtDE,OAAO,EAAE;IACLC,KAAK,EAAE/B,YAAY;IACnBgC,QAAQ,EAAE/B,eAAe;IACzBgC,QAAQ,EAAE/B;EACd;AACJ,CAAC,CAAC;AACF,SAAS2B,UAAU","ignoreList":[]}

package/FilePicker/FilePicker.mdx

@@ -0,0 +1,161 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as FilePickerStories from './FilePicker.stories';
+
+<Meta of={FilePickerStories} />
+
+# File Picker
+
+The File Picker component allows users to select, preview, and manage files. It provides an intuitive interface for file uploads in forms and content management systems, with support for different file types and preview options.
+
+## Usage
+
+The FilePicker component is typically used with [Webiny's File Manager](https://www.webiny.com/enterprise-serverless-cms/file-manager) to provide a complete file selection experience.
+
+> ⚠️ **Note**: The FilePicker component is designed to work seamlessly with [Webiny's File Manager](https://www.webiny.com/enterprise-serverless-cms/file-manager).
+In the Storybook example below, we’ve used random images from Picsum for demonstration purposes.
+However, if you use this example code in a real Webiny project, the FilePicker will integrate with the actual File Manager as expected.
+
+<Canvas of={FilePickerStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+import { FilePicker, type FileItemDto } from "@webiny/admin-ui";
+import { FileManager } from "@webiny/app-admin/components";
+import type { FileManagerFileItem } from "@webiny/app-admin/base/ui/FileManager";
+
+const FilePickerExample = () => {
+    const [selectedFile, setSelectedFile] = useState<FileItemDto | null>(null);
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    return (
+        <FileManager
+            accept={["image/*", "application/pdf"]}
+            onChange={(file: FileManagerFileItem) => {
+                if (file) {
+                    // Convert FileManager file to the format FilePicker expects
+                    const metaItems = file.meta || [];
+                    const getName = () => {
+                        const nameItem = metaItems.find((item: { key: string }) => item.key === "name");
+                        return nameItem ? nameItem.value : "";
+                    };
+                    const getSize = () => {
+                        const sizeItem = metaItems.find((item: { key: string }) => item.key === "size");
+                        return sizeItem ? sizeItem.value : 0;
+                    };
+                    const getType = () => {
+                        const typeItem = metaItems.find((item: { key: string }) => item.key === "type");
+                        return typeItem ? typeItem.value : "";
+                    };
+
+                    setSelectedFile({
+                        id: file.id,
+                        name: getName(),
+                        size: getSize(),
+                        mimeType: getType(),
+                        url: file.src || ""
+                    });
+                    setValidation({ isValid: true, message: "" });
+                }
+            }}
+            render={({ showFileManager }) => (
+                <FilePicker
+                    label="Upload Image"
+                    description="Select a file to upload (JPG, PNG, PDF)"
+                    note="Note: Maximum file size is 5MB"
+                    type="area"
+                    required={true}
+                    value={selectedFile}
+                    onSelectItem={() => showFileManager()}
+                    onRemoveItem={() => {
+                        setSelectedFile(null);
+                        setValidation({ isValid: false, message: "Please select a file" });
+                    }}
+                    onEditItem={() => showFileManager()}
+                    validation={validation}
+                />
+            )}
+        />
+    );
+};
+
+export default FilePickerExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/FilePicker/FilePicker.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={FilePickerStories.Documentation} />
+
+```tsx
+import React, { useState } from "react";
+import { FilePicker, type FileItemDto } from "@webiny/admin-ui";
+import { FileManager } from "@webiny/app-admin/components";
+import type { FileManagerFileItem } from "@webiny/app-admin/base/ui/FileManager";
+
+const FilePickerExample = () => {
+    const [selectedFile, setSelectedFile] = useState<FileItemDto | null>(null);
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    return (
+        <FileManager
+            accept={["image/*", "application/pdf"]}
+            onChange={(file: FileManagerFileItem) => {
+                if (file) {
+                    // Convert FileManager file to the format FilePicker expects
+                    const metaItems = file.meta || [];
+                    const getName = () => {
+                        const nameItem = metaItems.find((item: { key: string }) => item.key === "name");
+                        return nameItem ? nameItem.value : "";
+                    };
+                    const getSize = () => {
+                        const sizeItem = metaItems.find((item: { key: string }) => item.key === "size");
+                        return sizeItem ? sizeItem.value : 0;
+                    };
+                    const getType = () => {
+                        const typeItem = metaItems.find((item: { key: string }) => item.key === "type");
+                        return typeItem ? typeItem.value : "";
+                    };
+
+                    setSelectedFile({
+                        id: file.id,
+                        name: getName(),
+                        size: getSize(),
+                        mimeType: getType(),
+                        url: file.src || ""
+                    });
+                    setValidation({ isValid: true, message: "" });
+                }
+            }}
+            render={({ showFileManager }) => (
+                <FilePicker
+                    label="Upload Image"
+                    description="Select a file to upload (JPG, PNG, PDF)"
+                    note="Note: Maximum file size is 5MB"
+                    type="area"
+                    required={true}
+                    value={selectedFile}
+                    onSelectItem={() => showFileManager()}
+                    onRemoveItem={() => {
+                        setSelectedFile(null);
+                        setValidation({ isValid: false, message: "Please select a file" });
+                    }}
+                    onEditItem={() => showFileManager()}
+                    validation={validation}
+                />
+            )}
+        />
+    );
+};
+
+export default FilePickerExample;
+```
+

package/FilePicker/FilePicker.stories.d.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FilePicker } from "./";
+declare const meta: Meta<typeof FilePicker>;
+export default meta;
+type Story = StoryObj<typeof FilePicker>;
+export declare const Default: Story;
+export declare const AreaType: Story;
+export declare const AreaWithLabel: Story;
+export declare const AreaWithLabelRequired: Story;
+export declare const AreaWithDescription: Story;
+export declare const AreaWithNotes: Story;
+export declare const AreaWithErrors: Story;
+export declare const AreaDisabled: Story;
+export declare const AreaWithValidateFunction: Story;
+export declare const AreaFullExample: Story;
+export declare const Compact: Story;
+export declare const CompactWithLabel: Story;
+export declare const CompactWithLabelRequired: Story;
+export declare const CompactWithDescription: Story;
+export declare const CompactWithNotes: Story;
+export declare const CompactWithErrors: Story;
+export declare const CompactDisabled: Story;
+export declare const CompactWithValidateFunction: Story;
+export declare const CompactFullExample: Story;
+export declare const Documentation: Story;