@yamada-ui/file-button 1.0.34 → 1.0.35-dev-20240614141936
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/dist/{chunk-SDH7RMH3.mjs → chunk-GP22NWGH.mjs} +3 -5
- package/dist/{chunk-SDH7RMH3.mjs.map → chunk-GP22NWGH.mjs.map} +1 -1
- package/dist/file-button.js +2 -4
- package/dist/file-button.js.map +1 -1
- package/dist/file-button.mjs +1 -1
- package/dist/index.js +2 -4
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +4 -4
|
@@ -35,8 +35,7 @@ var FileButton = forwardRef(
|
|
|
35
35
|
const inputRef = useRef(null);
|
|
36
36
|
const onClick = useCallback(() => {
|
|
37
37
|
var _a;
|
|
38
|
-
if (disabled || readOnly)
|
|
39
|
-
return;
|
|
38
|
+
if (disabled || readOnly) return;
|
|
40
39
|
(_a = inputRef.current) == null ? void 0 : _a.click();
|
|
41
40
|
}, [disabled, readOnly]);
|
|
42
41
|
const onChange = useCallback(
|
|
@@ -47,8 +46,7 @@ var FileButton = forwardRef(
|
|
|
47
46
|
[onChangeProp]
|
|
48
47
|
);
|
|
49
48
|
const onReset = useCallback(() => {
|
|
50
|
-
if (inputRef.current)
|
|
51
|
-
inputRef.current.value = "";
|
|
49
|
+
if (inputRef.current) inputRef.current.value = "";
|
|
52
50
|
}, []);
|
|
53
51
|
if (!isFunction(children)) {
|
|
54
52
|
const Component = As || Button;
|
|
@@ -109,4 +107,4 @@ var FileButton = forwardRef(
|
|
|
109
107
|
export {
|
|
110
108
|
FileButton
|
|
111
109
|
};
|
|
112
|
-
//# sourceMappingURL=chunk-
|
|
110
|
+
//# sourceMappingURL=chunk-GP22NWGH.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/file-button.tsx"],"sourcesContent":["import type { ButtonProps } from \"@yamada-ui/button\"\nimport { Button } from \"@yamada-ui/button\"\nimport type { ColorModeToken, CSS } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport {\n assignRef,\n cx,\n handlerAll,\n isFunction,\n isNull,\n mergeRefs,\n pickObject,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ForwardedRef, ReactNode } from \"react\"\nimport { useCallback, useRef } from \"react\"\n\ntype Props = {\n onClick: () => void\n disabled?: boolean\n readOnly?: boolean\n required?: boolean\n} & FormControlOptions\n\ntype FileButtonOptions = {\n /**\n * The border color when the button is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * Function to be called when a file change event occurs.\n */\n onChange?: (files: File[] | undefined) => void\n children?: ReactNode | ((props: Props) => ReactNode)\n /**\n * Ref to a reset function.\n */\n resetRef?: ForwardedRef<() => void>\n}\n\ntype InputProps = Partial<Pick<HTMLInputElement, \"accept\" | \"multiple\">>\n\nexport type FileButtonProps = Omit<ButtonProps, \"onChange\" | \"children\"> &\n InputProps &\n FileButtonOptions &\n FormControlOptions\n\n/**\n * `FileButton` is a button component used for users to select files.\n *\n * @see Docs https://yamada-ui.com/components/forms/file-button\n */\nexport const FileButton = forwardRef<FileButtonProps, \"input\">(\n ({ className, resetRef, as: As, children, ...props }, ref) => {\n const {\n id,\n name,\n accept,\n multiple,\n form,\n \"aria-readonly\": ariaReadonly,\n onClick: onClickProp,\n onChange: onChangeProp,\n ...rest\n } = useFormControlProps(props)\n\n const { disabled, readOnly, required, \"aria-invalid\": isInvalid } = rest\n\n const inputRef = useRef<HTMLInputElement>(null)\n\n const onClick = useCallback(() => {\n if (disabled || readOnly) return\n\n inputRef.current?.click()\n }, [disabled, readOnly])\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n const files = !isNull(ev.currentTarget.files)\n ? Array.from(ev.currentTarget.files)\n : undefined\n\n onChangeProp?.(files)\n },\n [onChangeProp],\n )\n\n const onReset = useCallback(() => {\n if (inputRef.current) inputRef.current.value = \"\"\n }, [])\n\n if (!isFunction(children)) {\n const Component = As || Button\n\n children = (\n <Component\n className={cx(\"ui-file-button\", className)}\n {...rest}\n onClick={handlerAll(onClickProp, onClick)}\n >\n {children}\n </Component>\n ) as ReactNode\n }\n\n assignRef(resetRef, onReset)\n\n return (\n <>\n <ui.input\n ref={mergeRefs(inputRef, ref)}\n type=\"file\"\n aria-hidden\n tabIndex={-1}\n id={id}\n name={name}\n form={form}\n accept={accept}\n multiple={multiple}\n style={{\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }}\n onChange={onChange}\n aria-readonly={ariaReadonly}\n {...pickObject(rest, formControlProperties)}\n />\n\n {isFunction(children)\n ? children({\n onClick,\n disabled,\n readOnly,\n required,\n isDisabled: disabled,\n isReadOnly: readOnly,\n isRequired: required,\n isInvalid,\n })\n : children}\n </>\n )\n },\n)\n"],"mappings":";;;AACA,SAAS,cAAc;AAEvB,SAAS,IAAI,kBAAkB;AAE/B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,aAAa,cAAc;AAgF5B,SAaF,UAbE,KAaF,YAbE;AA3CD,IAAM,aAAa;AAAA,EACxB,CAAC,EAAE,WAAW,UAAU,IAAI,IAAI,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC5D,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,UAAU;AAAA,MACV,GAAG;AAAA,IACL,IAAI,oBAAoB,KAAK;AAE7B,UAAM,EAAE,UAAU,UAAU,UAAU,gBAAgB,UAAU,IAAI;AAEpE,UAAM,WAAW,OAAyB,IAAI;AAE9C,UAAM,UAAU,YAAY,MAAM;AA1EtC;AA2EM,UAAI,YAAY;
|
|
1
|
+
{"version":3,"sources":["../src/file-button.tsx"],"sourcesContent":["import type { ButtonProps } from \"@yamada-ui/button\"\nimport { Button } from \"@yamada-ui/button\"\nimport type { ColorModeToken, CSS } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport {\n assignRef,\n cx,\n handlerAll,\n isFunction,\n isNull,\n mergeRefs,\n pickObject,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ForwardedRef, ReactNode } from \"react\"\nimport { useCallback, useRef } from \"react\"\n\ntype Props = {\n onClick: () => void\n disabled?: boolean\n readOnly?: boolean\n required?: boolean\n} & FormControlOptions\n\ntype FileButtonOptions = {\n /**\n * The border color when the button is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * Function to be called when a file change event occurs.\n */\n onChange?: (files: File[] | undefined) => void\n children?: ReactNode | ((props: Props) => ReactNode)\n /**\n * Ref to a reset function.\n */\n resetRef?: ForwardedRef<() => void>\n}\n\ntype InputProps = Partial<Pick<HTMLInputElement, \"accept\" | \"multiple\">>\n\nexport type FileButtonProps = Omit<ButtonProps, \"onChange\" | \"children\"> &\n InputProps &\n FileButtonOptions &\n FormControlOptions\n\n/**\n * `FileButton` is a button component used for users to select files.\n *\n * @see Docs https://yamada-ui.com/components/forms/file-button\n */\nexport const FileButton = forwardRef<FileButtonProps, \"input\">(\n ({ className, resetRef, as: As, children, ...props }, ref) => {\n const {\n id,\n name,\n accept,\n multiple,\n form,\n \"aria-readonly\": ariaReadonly,\n onClick: onClickProp,\n onChange: onChangeProp,\n ...rest\n } = useFormControlProps(props)\n\n const { disabled, readOnly, required, \"aria-invalid\": isInvalid } = rest\n\n const inputRef = useRef<HTMLInputElement>(null)\n\n const onClick = useCallback(() => {\n if (disabled || readOnly) return\n\n inputRef.current?.click()\n }, [disabled, readOnly])\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n const files = !isNull(ev.currentTarget.files)\n ? Array.from(ev.currentTarget.files)\n : undefined\n\n onChangeProp?.(files)\n },\n [onChangeProp],\n )\n\n const onReset = useCallback(() => {\n if (inputRef.current) inputRef.current.value = \"\"\n }, [])\n\n if (!isFunction(children)) {\n const Component = As || Button\n\n children = (\n <Component\n className={cx(\"ui-file-button\", className)}\n {...rest}\n onClick={handlerAll(onClickProp, onClick)}\n >\n {children}\n </Component>\n ) as ReactNode\n }\n\n assignRef(resetRef, onReset)\n\n return (\n <>\n <ui.input\n ref={mergeRefs(inputRef, ref)}\n type=\"file\"\n aria-hidden\n tabIndex={-1}\n id={id}\n name={name}\n form={form}\n accept={accept}\n multiple={multiple}\n style={{\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }}\n onChange={onChange}\n aria-readonly={ariaReadonly}\n {...pickObject(rest, formControlProperties)}\n />\n\n {isFunction(children)\n ? children({\n onClick,\n disabled,\n readOnly,\n required,\n isDisabled: disabled,\n isReadOnly: readOnly,\n isRequired: required,\n isInvalid,\n })\n : children}\n </>\n )\n },\n)\n"],"mappings":";;;AACA,SAAS,cAAc;AAEvB,SAAS,IAAI,kBAAkB;AAE/B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,aAAa,cAAc;AAgF5B,SAaF,UAbE,KAaF,YAbE;AA3CD,IAAM,aAAa;AAAA,EACxB,CAAC,EAAE,WAAW,UAAU,IAAI,IAAI,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC5D,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,UAAU;AAAA,MACV,GAAG;AAAA,IACL,IAAI,oBAAoB,KAAK;AAE7B,UAAM,EAAE,UAAU,UAAU,UAAU,gBAAgB,UAAU,IAAI;AAEpE,UAAM,WAAW,OAAyB,IAAI;AAE9C,UAAM,UAAU,YAAY,MAAM;AA1EtC;AA2EM,UAAI,YAAY,SAAU;AAE1B,qBAAS,YAAT,mBAAkB;AAAA,IACpB,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,UAAM,WAAW;AAAA,MACf,CAAC,OAAsC;AACrC,cAAM,QAAQ,CAAC,OAAO,GAAG,cAAc,KAAK,IACxC,MAAM,KAAK,GAAG,cAAc,KAAK,IACjC;AAEJ,qDAAe;AAAA,MACjB;AAAA,MACA,CAAC,YAAY;AAAA,IACf;AAEA,UAAM,UAAU,YAAY,MAAM;AAChC,UAAI,SAAS,QAAS,UAAS,QAAQ,QAAQ;AAAA,IACjD,GAAG,CAAC,CAAC;AAEL,QAAI,CAAC,WAAW,QAAQ,GAAG;AACzB,YAAM,YAAY,MAAM;AAExB,iBACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,GAAG,kBAAkB,SAAS;AAAA,UACxC,GAAG;AAAA,UACJ,SAAS,WAAW,aAAa,OAAO;AAAA,UAEvC;AAAA;AAAA,MACH;AAAA,IAEJ;AAEA,cAAU,UAAU,OAAO;AAE3B,WACE,iCACE;AAAA;AAAA,QAAC,GAAG;AAAA,QAAH;AAAA,UACC,KAAK,UAAU,UAAU,GAAG;AAAA,UAC5B,MAAK;AAAA,UACL,eAAW;AAAA,UACX,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,OAAO;AAAA,YACL,QAAQ;AAAA,YACR,MAAM;AAAA,YACN,QAAQ;AAAA,YACR,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,UAAU;AAAA,YACV,YAAY;AAAA,YACZ,UAAU;AAAA,UACZ;AAAA,UACA;AAAA,UACA,iBAAe;AAAA,UACd,GAAG,WAAW,MAAM,qBAAqB;AAAA;AAAA,MAC5C;AAAA,MAEC,WAAW,QAAQ,IAChB,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ;AAAA,MACF,CAAC,IACD;AAAA,OACN;AAAA,EAEJ;AACF;","names":[]}
|
package/dist/file-button.js
CHANGED
|
@@ -47,8 +47,7 @@ var FileButton = (0, import_core.forwardRef)(
|
|
|
47
47
|
const inputRef = (0, import_react.useRef)(null);
|
|
48
48
|
const onClick = (0, import_react.useCallback)(() => {
|
|
49
49
|
var _a;
|
|
50
|
-
if (disabled || readOnly)
|
|
51
|
-
return;
|
|
50
|
+
if (disabled || readOnly) return;
|
|
52
51
|
(_a = inputRef.current) == null ? void 0 : _a.click();
|
|
53
52
|
}, [disabled, readOnly]);
|
|
54
53
|
const onChange = (0, import_react.useCallback)(
|
|
@@ -59,8 +58,7 @@ var FileButton = (0, import_core.forwardRef)(
|
|
|
59
58
|
[onChangeProp]
|
|
60
59
|
);
|
|
61
60
|
const onReset = (0, import_react.useCallback)(() => {
|
|
62
|
-
if (inputRef.current)
|
|
63
|
-
inputRef.current.value = "";
|
|
61
|
+
if (inputRef.current) inputRef.current.value = "";
|
|
64
62
|
}, []);
|
|
65
63
|
if (!(0, import_utils.isFunction)(children)) {
|
|
66
64
|
const Component = As || import_button.Button;
|
package/dist/file-button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/file-button.tsx"],"sourcesContent":["import type { ButtonProps } from \"@yamada-ui/button\"\nimport { Button } from \"@yamada-ui/button\"\nimport type { ColorModeToken, CSS } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport {\n assignRef,\n cx,\n handlerAll,\n isFunction,\n isNull,\n mergeRefs,\n pickObject,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ForwardedRef, ReactNode } from \"react\"\nimport { useCallback, useRef } from \"react\"\n\ntype Props = {\n onClick: () => void\n disabled?: boolean\n readOnly?: boolean\n required?: boolean\n} & FormControlOptions\n\ntype FileButtonOptions = {\n /**\n * The border color when the button is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * Function to be called when a file change event occurs.\n */\n onChange?: (files: File[] | undefined) => void\n children?: ReactNode | ((props: Props) => ReactNode)\n /**\n * Ref to a reset function.\n */\n resetRef?: ForwardedRef<() => void>\n}\n\ntype InputProps = Partial<Pick<HTMLInputElement, \"accept\" | \"multiple\">>\n\nexport type FileButtonProps = Omit<ButtonProps, \"onChange\" | \"children\"> &\n InputProps &\n FileButtonOptions &\n FormControlOptions\n\n/**\n * `FileButton` is a button component used for users to select files.\n *\n * @see Docs https://yamada-ui.com/components/forms/file-button\n */\nexport const FileButton = forwardRef<FileButtonProps, \"input\">(\n ({ className, resetRef, as: As, children, ...props }, ref) => {\n const {\n id,\n name,\n accept,\n multiple,\n form,\n \"aria-readonly\": ariaReadonly,\n onClick: onClickProp,\n onChange: onChangeProp,\n ...rest\n } = useFormControlProps(props)\n\n const { disabled, readOnly, required, \"aria-invalid\": isInvalid } = rest\n\n const inputRef = useRef<HTMLInputElement>(null)\n\n const onClick = useCallback(() => {\n if (disabled || readOnly) return\n\n inputRef.current?.click()\n }, [disabled, readOnly])\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n const files = !isNull(ev.currentTarget.files)\n ? Array.from(ev.currentTarget.files)\n : undefined\n\n onChangeProp?.(files)\n },\n [onChangeProp],\n )\n\n const onReset = useCallback(() => {\n if (inputRef.current) inputRef.current.value = \"\"\n }, [])\n\n if (!isFunction(children)) {\n const Component = As || Button\n\n children = (\n <Component\n className={cx(\"ui-file-button\", className)}\n {...rest}\n onClick={handlerAll(onClickProp, onClick)}\n >\n {children}\n </Component>\n ) as ReactNode\n }\n\n assignRef(resetRef, onReset)\n\n return (\n <>\n <ui.input\n ref={mergeRefs(inputRef, ref)}\n type=\"file\"\n aria-hidden\n tabIndex={-1}\n id={id}\n name={name}\n form={form}\n accept={accept}\n multiple={multiple}\n style={{\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }}\n onChange={onChange}\n aria-readonly={ariaReadonly}\n {...pickObject(rest, formControlProperties)}\n />\n\n {isFunction(children)\n ? children({\n onClick,\n disabled,\n readOnly,\n required,\n isDisabled: disabled,\n isReadOnly: readOnly,\n isRequired: required,\n isInvalid,\n })\n : children}\n </>\n )\n },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,oBAAuB;AAEvB,kBAA+B;AAE/B,0BAGO;AACP,mBAQO;AAEP,mBAAoC;AAgF5B;AA3CD,IAAM,iBAAa;AAAA,EACxB,CAAC,EAAE,WAAW,UAAU,IAAI,IAAI,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC5D,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,UAAU;AAAA,MACV,GAAG;AAAA,IACL,QAAI,yCAAoB,KAAK;AAE7B,UAAM,EAAE,UAAU,UAAU,UAAU,gBAAgB,UAAU,IAAI;AAEpE,UAAM,eAAW,qBAAyB,IAAI;AAE9C,UAAM,cAAU,0BAAY,MAAM;AA1EtC;AA2EM,UAAI,YAAY;
|
|
1
|
+
{"version":3,"sources":["../src/file-button.tsx"],"sourcesContent":["import type { ButtonProps } from \"@yamada-ui/button\"\nimport { Button } from \"@yamada-ui/button\"\nimport type { ColorModeToken, CSS } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport {\n assignRef,\n cx,\n handlerAll,\n isFunction,\n isNull,\n mergeRefs,\n pickObject,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ForwardedRef, ReactNode } from \"react\"\nimport { useCallback, useRef } from \"react\"\n\ntype Props = {\n onClick: () => void\n disabled?: boolean\n readOnly?: boolean\n required?: boolean\n} & FormControlOptions\n\ntype FileButtonOptions = {\n /**\n * The border color when the button is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * Function to be called when a file change event occurs.\n */\n onChange?: (files: File[] | undefined) => void\n children?: ReactNode | ((props: Props) => ReactNode)\n /**\n * Ref to a reset function.\n */\n resetRef?: ForwardedRef<() => void>\n}\n\ntype InputProps = Partial<Pick<HTMLInputElement, \"accept\" | \"multiple\">>\n\nexport type FileButtonProps = Omit<ButtonProps, \"onChange\" | \"children\"> &\n InputProps &\n FileButtonOptions &\n FormControlOptions\n\n/**\n * `FileButton` is a button component used for users to select files.\n *\n * @see Docs https://yamada-ui.com/components/forms/file-button\n */\nexport const FileButton = forwardRef<FileButtonProps, \"input\">(\n ({ className, resetRef, as: As, children, ...props }, ref) => {\n const {\n id,\n name,\n accept,\n multiple,\n form,\n \"aria-readonly\": ariaReadonly,\n onClick: onClickProp,\n onChange: onChangeProp,\n ...rest\n } = useFormControlProps(props)\n\n const { disabled, readOnly, required, \"aria-invalid\": isInvalid } = rest\n\n const inputRef = useRef<HTMLInputElement>(null)\n\n const onClick = useCallback(() => {\n if (disabled || readOnly) return\n\n inputRef.current?.click()\n }, [disabled, readOnly])\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n const files = !isNull(ev.currentTarget.files)\n ? Array.from(ev.currentTarget.files)\n : undefined\n\n onChangeProp?.(files)\n },\n [onChangeProp],\n )\n\n const onReset = useCallback(() => {\n if (inputRef.current) inputRef.current.value = \"\"\n }, [])\n\n if (!isFunction(children)) {\n const Component = As || Button\n\n children = (\n <Component\n className={cx(\"ui-file-button\", className)}\n {...rest}\n onClick={handlerAll(onClickProp, onClick)}\n >\n {children}\n </Component>\n ) as ReactNode\n }\n\n assignRef(resetRef, onReset)\n\n return (\n <>\n <ui.input\n ref={mergeRefs(inputRef, ref)}\n type=\"file\"\n aria-hidden\n tabIndex={-1}\n id={id}\n name={name}\n form={form}\n accept={accept}\n multiple={multiple}\n style={{\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }}\n onChange={onChange}\n aria-readonly={ariaReadonly}\n {...pickObject(rest, formControlProperties)}\n />\n\n {isFunction(children)\n ? children({\n onClick,\n disabled,\n readOnly,\n required,\n isDisabled: disabled,\n isReadOnly: readOnly,\n isRequired: required,\n isInvalid,\n })\n : children}\n </>\n )\n },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,oBAAuB;AAEvB,kBAA+B;AAE/B,0BAGO;AACP,mBAQO;AAEP,mBAAoC;AAgF5B;AA3CD,IAAM,iBAAa;AAAA,EACxB,CAAC,EAAE,WAAW,UAAU,IAAI,IAAI,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC5D,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,UAAU;AAAA,MACV,GAAG;AAAA,IACL,QAAI,yCAAoB,KAAK;AAE7B,UAAM,EAAE,UAAU,UAAU,UAAU,gBAAgB,UAAU,IAAI;AAEpE,UAAM,eAAW,qBAAyB,IAAI;AAE9C,UAAM,cAAU,0BAAY,MAAM;AA1EtC;AA2EM,UAAI,YAAY,SAAU;AAE1B,qBAAS,YAAT,mBAAkB;AAAA,IACpB,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,UAAM,eAAW;AAAA,MACf,CAAC,OAAsC;AACrC,cAAM,QAAQ,KAAC,qBAAO,GAAG,cAAc,KAAK,IACxC,MAAM,KAAK,GAAG,cAAc,KAAK,IACjC;AAEJ,qDAAe;AAAA,MACjB;AAAA,MACA,CAAC,YAAY;AAAA,IACf;AAEA,UAAM,cAAU,0BAAY,MAAM;AAChC,UAAI,SAAS,QAAS,UAAS,QAAQ,QAAQ;AAAA,IACjD,GAAG,CAAC,CAAC;AAEL,QAAI,KAAC,yBAAW,QAAQ,GAAG;AACzB,YAAM,YAAY,MAAM;AAExB,iBACE;AAAA,QAAC;AAAA;AAAA,UACC,eAAW,iBAAG,kBAAkB,SAAS;AAAA,UACxC,GAAG;AAAA,UACJ,aAAS,yBAAW,aAAa,OAAO;AAAA,UAEvC;AAAA;AAAA,MACH;AAAA,IAEJ;AAEA,gCAAU,UAAU,OAAO;AAE3B,WACE,4EACE;AAAA;AAAA,QAAC,eAAG;AAAA,QAAH;AAAA,UACC,SAAK,wBAAU,UAAU,GAAG;AAAA,UAC5B,MAAK;AAAA,UACL,eAAW;AAAA,UACX,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,OAAO;AAAA,YACL,QAAQ;AAAA,YACR,MAAM;AAAA,YACN,QAAQ;AAAA,YACR,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,UAAU;AAAA,YACV,YAAY;AAAA,YACZ,UAAU;AAAA,UACZ;AAAA,UACA;AAAA,UACA,iBAAe;AAAA,UACd,OAAG,yBAAW,MAAM,yCAAqB;AAAA;AAAA,MAC5C;AAAA,UAEC,yBAAW,QAAQ,IAChB,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ;AAAA,MACF,CAAC,IACD;AAAA,OACN;AAAA,EAEJ;AACF;","names":[]}
|
package/dist/file-button.mjs
CHANGED
package/dist/index.js
CHANGED
|
@@ -49,8 +49,7 @@ var FileButton = (0, import_core.forwardRef)(
|
|
|
49
49
|
const inputRef = (0, import_react.useRef)(null);
|
|
50
50
|
const onClick = (0, import_react.useCallback)(() => {
|
|
51
51
|
var _a;
|
|
52
|
-
if (disabled || readOnly)
|
|
53
|
-
return;
|
|
52
|
+
if (disabled || readOnly) return;
|
|
54
53
|
(_a = inputRef.current) == null ? void 0 : _a.click();
|
|
55
54
|
}, [disabled, readOnly]);
|
|
56
55
|
const onChange = (0, import_react.useCallback)(
|
|
@@ -61,8 +60,7 @@ var FileButton = (0, import_core.forwardRef)(
|
|
|
61
60
|
[onChangeProp]
|
|
62
61
|
);
|
|
63
62
|
const onReset = (0, import_react.useCallback)(() => {
|
|
64
|
-
if (inputRef.current)
|
|
65
|
-
inputRef.current.value = "";
|
|
63
|
+
if (inputRef.current) inputRef.current.value = "";
|
|
66
64
|
}, []);
|
|
67
65
|
if (!(0, import_utils.isFunction)(children)) {
|
|
68
66
|
const Component = As || import_button.Button;
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/file-button.tsx"],"sourcesContent":["export { FileButton } from \"./file-button\"\nexport type { FileButtonProps } from \"./file-button\"\n","import type { ButtonProps } from \"@yamada-ui/button\"\nimport { Button } from \"@yamada-ui/button\"\nimport type { ColorModeToken, CSS } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport {\n assignRef,\n cx,\n handlerAll,\n isFunction,\n isNull,\n mergeRefs,\n pickObject,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ForwardedRef, ReactNode } from \"react\"\nimport { useCallback, useRef } from \"react\"\n\ntype Props = {\n onClick: () => void\n disabled?: boolean\n readOnly?: boolean\n required?: boolean\n} & FormControlOptions\n\ntype FileButtonOptions = {\n /**\n * The border color when the button is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * Function to be called when a file change event occurs.\n */\n onChange?: (files: File[] | undefined) => void\n children?: ReactNode | ((props: Props) => ReactNode)\n /**\n * Ref to a reset function.\n */\n resetRef?: ForwardedRef<() => void>\n}\n\ntype InputProps = Partial<Pick<HTMLInputElement, \"accept\" | \"multiple\">>\n\nexport type FileButtonProps = Omit<ButtonProps, \"onChange\" | \"children\"> &\n InputProps &\n FileButtonOptions &\n FormControlOptions\n\n/**\n * `FileButton` is a button component used for users to select files.\n *\n * @see Docs https://yamada-ui.com/components/forms/file-button\n */\nexport const FileButton = forwardRef<FileButtonProps, \"input\">(\n ({ className, resetRef, as: As, children, ...props }, ref) => {\n const {\n id,\n name,\n accept,\n multiple,\n form,\n \"aria-readonly\": ariaReadonly,\n onClick: onClickProp,\n onChange: onChangeProp,\n ...rest\n } = useFormControlProps(props)\n\n const { disabled, readOnly, required, \"aria-invalid\": isInvalid } = rest\n\n const inputRef = useRef<HTMLInputElement>(null)\n\n const onClick = useCallback(() => {\n if (disabled || readOnly) return\n\n inputRef.current?.click()\n }, [disabled, readOnly])\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n const files = !isNull(ev.currentTarget.files)\n ? Array.from(ev.currentTarget.files)\n : undefined\n\n onChangeProp?.(files)\n },\n [onChangeProp],\n )\n\n const onReset = useCallback(() => {\n if (inputRef.current) inputRef.current.value = \"\"\n }, [])\n\n if (!isFunction(children)) {\n const Component = As || Button\n\n children = (\n <Component\n className={cx(\"ui-file-button\", className)}\n {...rest}\n onClick={handlerAll(onClickProp, onClick)}\n >\n {children}\n </Component>\n ) as ReactNode\n }\n\n assignRef(resetRef, onReset)\n\n return (\n <>\n <ui.input\n ref={mergeRefs(inputRef, ref)}\n type=\"file\"\n aria-hidden\n tabIndex={-1}\n id={id}\n name={name}\n form={form}\n accept={accept}\n multiple={multiple}\n style={{\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }}\n onChange={onChange}\n aria-readonly={ariaReadonly}\n {...pickObject(rest, formControlProperties)}\n />\n\n {isFunction(children)\n ? children({\n onClick,\n disabled,\n readOnly,\n required,\n isDisabled: disabled,\n isReadOnly: readOnly,\n isRequired: required,\n isInvalid,\n })\n : children}\n </>\n )\n },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,oBAAuB;AAEvB,kBAA+B;AAE/B,0BAGO;AACP,mBAQO;AAEP,mBAAoC;AAgF5B;AA3CD,IAAM,iBAAa;AAAA,EACxB,CAAC,EAAE,WAAW,UAAU,IAAI,IAAI,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC5D,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,UAAU;AAAA,MACV,GAAG;AAAA,IACL,QAAI,yCAAoB,KAAK;AAE7B,UAAM,EAAE,UAAU,UAAU,UAAU,gBAAgB,UAAU,IAAI;AAEpE,UAAM,eAAW,qBAAyB,IAAI;AAE9C,UAAM,cAAU,0BAAY,MAAM;AA1EtC;AA2EM,UAAI,YAAY;
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/file-button.tsx"],"sourcesContent":["export { FileButton } from \"./file-button\"\nexport type { FileButtonProps } from \"./file-button\"\n","import type { ButtonProps } from \"@yamada-ui/button\"\nimport { Button } from \"@yamada-ui/button\"\nimport type { ColorModeToken, CSS } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport {\n assignRef,\n cx,\n handlerAll,\n isFunction,\n isNull,\n mergeRefs,\n pickObject,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ForwardedRef, ReactNode } from \"react\"\nimport { useCallback, useRef } from \"react\"\n\ntype Props = {\n onClick: () => void\n disabled?: boolean\n readOnly?: boolean\n required?: boolean\n} & FormControlOptions\n\ntype FileButtonOptions = {\n /**\n * The border color when the button is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * Function to be called when a file change event occurs.\n */\n onChange?: (files: File[] | undefined) => void\n children?: ReactNode | ((props: Props) => ReactNode)\n /**\n * Ref to a reset function.\n */\n resetRef?: ForwardedRef<() => void>\n}\n\ntype InputProps = Partial<Pick<HTMLInputElement, \"accept\" | \"multiple\">>\n\nexport type FileButtonProps = Omit<ButtonProps, \"onChange\" | \"children\"> &\n InputProps &\n FileButtonOptions &\n FormControlOptions\n\n/**\n * `FileButton` is a button component used for users to select files.\n *\n * @see Docs https://yamada-ui.com/components/forms/file-button\n */\nexport const FileButton = forwardRef<FileButtonProps, \"input\">(\n ({ className, resetRef, as: As, children, ...props }, ref) => {\n const {\n id,\n name,\n accept,\n multiple,\n form,\n \"aria-readonly\": ariaReadonly,\n onClick: onClickProp,\n onChange: onChangeProp,\n ...rest\n } = useFormControlProps(props)\n\n const { disabled, readOnly, required, \"aria-invalid\": isInvalid } = rest\n\n const inputRef = useRef<HTMLInputElement>(null)\n\n const onClick = useCallback(() => {\n if (disabled || readOnly) return\n\n inputRef.current?.click()\n }, [disabled, readOnly])\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n const files = !isNull(ev.currentTarget.files)\n ? Array.from(ev.currentTarget.files)\n : undefined\n\n onChangeProp?.(files)\n },\n [onChangeProp],\n )\n\n const onReset = useCallback(() => {\n if (inputRef.current) inputRef.current.value = \"\"\n }, [])\n\n if (!isFunction(children)) {\n const Component = As || Button\n\n children = (\n <Component\n className={cx(\"ui-file-button\", className)}\n {...rest}\n onClick={handlerAll(onClickProp, onClick)}\n >\n {children}\n </Component>\n ) as ReactNode\n }\n\n assignRef(resetRef, onReset)\n\n return (\n <>\n <ui.input\n ref={mergeRefs(inputRef, ref)}\n type=\"file\"\n aria-hidden\n tabIndex={-1}\n id={id}\n name={name}\n form={form}\n accept={accept}\n multiple={multiple}\n style={{\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }}\n onChange={onChange}\n aria-readonly={ariaReadonly}\n {...pickObject(rest, formControlProperties)}\n />\n\n {isFunction(children)\n ? children({\n onClick,\n disabled,\n readOnly,\n required,\n isDisabled: disabled,\n isReadOnly: readOnly,\n isRequired: required,\n isInvalid,\n })\n : children}\n </>\n )\n },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,oBAAuB;AAEvB,kBAA+B;AAE/B,0BAGO;AACP,mBAQO;AAEP,mBAAoC;AAgF5B;AA3CD,IAAM,iBAAa;AAAA,EACxB,CAAC,EAAE,WAAW,UAAU,IAAI,IAAI,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC5D,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,UAAU;AAAA,MACV,GAAG;AAAA,IACL,QAAI,yCAAoB,KAAK;AAE7B,UAAM,EAAE,UAAU,UAAU,UAAU,gBAAgB,UAAU,IAAI;AAEpE,UAAM,eAAW,qBAAyB,IAAI;AAE9C,UAAM,cAAU,0BAAY,MAAM;AA1EtC;AA2EM,UAAI,YAAY,SAAU;AAE1B,qBAAS,YAAT,mBAAkB;AAAA,IACpB,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,UAAM,eAAW;AAAA,MACf,CAAC,OAAsC;AACrC,cAAM,QAAQ,KAAC,qBAAO,GAAG,cAAc,KAAK,IACxC,MAAM,KAAK,GAAG,cAAc,KAAK,IACjC;AAEJ,qDAAe;AAAA,MACjB;AAAA,MACA,CAAC,YAAY;AAAA,IACf;AAEA,UAAM,cAAU,0BAAY,MAAM;AAChC,UAAI,SAAS,QAAS,UAAS,QAAQ,QAAQ;AAAA,IACjD,GAAG,CAAC,CAAC;AAEL,QAAI,KAAC,yBAAW,QAAQ,GAAG;AACzB,YAAM,YAAY,MAAM;AAExB,iBACE;AAAA,QAAC;AAAA;AAAA,UACC,eAAW,iBAAG,kBAAkB,SAAS;AAAA,UACxC,GAAG;AAAA,UACJ,aAAS,yBAAW,aAAa,OAAO;AAAA,UAEvC;AAAA;AAAA,MACH;AAAA,IAEJ;AAEA,gCAAU,UAAU,OAAO;AAE3B,WACE,4EACE;AAAA;AAAA,QAAC,eAAG;AAAA,QAAH;AAAA,UACC,SAAK,wBAAU,UAAU,GAAG;AAAA,UAC5B,MAAK;AAAA,UACL,eAAW;AAAA,UACX,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,OAAO;AAAA,YACL,QAAQ;AAAA,YACR,MAAM;AAAA,YACN,QAAQ;AAAA,YACR,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,UAAU;AAAA,YACV,YAAY;AAAA,YACZ,UAAU;AAAA,UACZ;AAAA,UACA;AAAA,UACA,iBAAe;AAAA,UACd,OAAG,yBAAW,MAAM,yCAAqB;AAAA;AAAA,MAC5C;AAAA,UAEC,yBAAW,QAAQ,IAChB,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ;AAAA,MACF,CAAC,IACD;AAAA,OACN;AAAA,EAEJ;AACF;","names":[]}
|
package/dist/index.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yamada-ui/file-button",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.35-dev-20240614141936",
|
|
4
4
|
"description": "Yamada UI file button component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"yamada",
|
|
@@ -36,10 +36,10 @@
|
|
|
36
36
|
"url": "https://github.com/yamada-ui/yamada-ui/issues"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@yamada-ui/core": "1.7.
|
|
39
|
+
"@yamada-ui/core": "1.7.2-dev-20240614141936",
|
|
40
40
|
"@yamada-ui/utils": "1.2.1",
|
|
41
|
-
"@yamada-ui/form-control": "1.1.
|
|
42
|
-
"@yamada-ui/button": "1.0.
|
|
41
|
+
"@yamada-ui/form-control": "1.1.3-dev-20240614141936",
|
|
42
|
+
"@yamada-ui/button": "1.0.31-dev-20240614141936"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"react": "^18.0.0",
|