@yamada-ui/file-button 0.3.36 → 1.0.1
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-5W2ZT7JB.mjs → chunk-X6I4HTJ3.mjs} +1 -1
- package/dist/chunk-X6I4HTJ3.mjs.map +1 -0
- package/dist/file-button.d.mts +5 -0
- package/dist/file-button.d.ts +5 -0
- package/dist/file-button.js.map +1 -1
- package/dist/file-button.mjs +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +6 -5
- package/dist/chunk-5W2ZT7JB.mjs.map +0 -1
|
@@ -0,0 +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 omitObject,\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 { id, name, accept, multiple, form, ...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 rest.onChange?.(files)\n },\n [rest],\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 {...omitObject(rest, [\"onChange\", \"aria-readonly\"])}\n onClick={handlerAll(rest.onClick, 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 {...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,EACA;AAAA,OACK;AAEP,SAAS,aAAa,cAAc;AAuE5B,SAaF,UAbE,KAaF,YAbE;AAlCD,IAAM,aAAa;AAAA,EACxB,CAAC,EAAE,WAAW,UAAU,IAAI,IAAI,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC5D,UAAM,EAAE,IAAI,MAAM,QAAQ,UAAU,MAAM,GAAG,KAAK,IAChD,oBAAoB,KAAK;AAE3B,UAAM,EAAE,UAAU,UAAU,UAAU,gBAAgB,UAAU,IAAI;AAEpE,UAAM,WAAW,OAAyB,IAAI;AAE9C,UAAM,UAAU,YAAY,MAAM;AAlEtC;AAmEM,UAAI,YAAY;AAAU;AAE1B,qBAAS,YAAT,mBAAkB;AAAA,IACpB,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,UAAM,WAAW;AAAA,MACf,CAAC,OAAsC;AAzE7C;AA0EQ,cAAM,QAAQ,CAAC,OAAO,GAAG,cAAc,KAAK,IACxC,MAAM,KAAK,GAAG,cAAc,KAAK,IACjC;AAEJ,mBAAK,aAAL,8BAAgB;AAAA,MAClB;AAAA,MACA,CAAC,IAAI;AAAA,IACP;AAEA,UAAM,UAAU,YAAY,MAAM;AAChC,UAAI,SAAS;AAAS,iBAAS,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,WAAW,MAAM,CAAC,YAAY,eAAe,CAAC;AAAA,UAClD,SAAS,WAAW,KAAK,SAAS,OAAO;AAAA,UAExC;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,UACC,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.d.mts
CHANGED
|
@@ -27,6 +27,11 @@ type FileButtonOptions = {
|
|
|
27
27
|
};
|
|
28
28
|
type InputProps = Partial<Pick<HTMLInputElement, "accept" | "multiple">>;
|
|
29
29
|
type FileButtonProps = Omit<ButtonProps, "onChange" | "children"> & InputProps & FileButtonOptions & FormControlOptions;
|
|
30
|
+
/**
|
|
31
|
+
* `FileButton` is a button component used for users to select files.
|
|
32
|
+
*
|
|
33
|
+
* @see Docs https://yamada-ui.com/components/forms/file-button
|
|
34
|
+
*/
|
|
30
35
|
declare const FileButton: _yamada_ui_core.Component<"input", FileButtonProps>;
|
|
31
36
|
|
|
32
37
|
export { FileButton, type FileButtonProps };
|
package/dist/file-button.d.ts
CHANGED
|
@@ -27,6 +27,11 @@ type FileButtonOptions = {
|
|
|
27
27
|
};
|
|
28
28
|
type InputProps = Partial<Pick<HTMLInputElement, "accept" | "multiple">>;
|
|
29
29
|
type FileButtonProps = Omit<ButtonProps, "onChange" | "children"> & InputProps & FileButtonOptions & FormControlOptions;
|
|
30
|
+
/**
|
|
31
|
+
* `FileButton` is a button component used for users to select files.
|
|
32
|
+
*
|
|
33
|
+
* @see Docs https://yamada-ui.com/components/forms/file-button
|
|
34
|
+
*/
|
|
30
35
|
declare const FileButton: _yamada_ui_core.Component<"input", FileButtonProps>;
|
|
31
36
|
|
|
32
37
|
export { FileButton, type FileButtonProps };
|
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 omitObject,\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\nexport const FileButton = forwardRef<FileButtonProps, \"input\">(\n ({ className, resetRef, as: As, children, ...props }, ref) => {\n const { id, name, accept, multiple, form, ...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 rest.onChange?.(files)\n },\n [rest],\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 {...omitObject(rest, [\"onChange\", \"aria-readonly\"])}\n onClick={handlerAll(rest.onClick, 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 {...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,mBASO;AAEP,mBAAoC;
|
|
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 omitObject,\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 { id, name, accept, multiple, form, ...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 rest.onChange?.(files)\n },\n [rest],\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 {...omitObject(rest, [\"onChange\", \"aria-readonly\"])}\n onClick={handlerAll(rest.onClick, 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 {...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,mBASO;AAEP,mBAAoC;AAuE5B;AAlCD,IAAM,iBAAa;AAAA,EACxB,CAAC,EAAE,WAAW,UAAU,IAAI,IAAI,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC5D,UAAM,EAAE,IAAI,MAAM,QAAQ,UAAU,MAAM,GAAG,KAAK,QAChD,yCAAoB,KAAK;AAE3B,UAAM,EAAE,UAAU,UAAU,UAAU,gBAAgB,UAAU,IAAI;AAEpE,UAAM,eAAW,qBAAyB,IAAI;AAE9C,UAAM,cAAU,0BAAY,MAAM;AAlEtC;AAmEM,UAAI,YAAY;AAAU;AAE1B,qBAAS,YAAT,mBAAkB;AAAA,IACpB,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,UAAM,eAAW;AAAA,MACf,CAAC,OAAsC;AAzE7C;AA0EQ,cAAM,QAAQ,KAAC,qBAAO,GAAG,cAAc,KAAK,IACxC,MAAM,KAAK,GAAG,cAAc,KAAK,IACjC;AAEJ,mBAAK,aAAL,8BAAgB;AAAA,MAClB;AAAA,MACA,CAAC,IAAI;AAAA,IACP;AAEA,UAAM,cAAU,0BAAY,MAAM;AAChC,UAAI,SAAS;AAAS,iBAAS,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,OAAG,yBAAW,MAAM,CAAC,YAAY,eAAe,CAAC;AAAA,UAClD,aAAS,yBAAW,KAAK,SAAS,OAAO;AAAA,UAExC;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,UACC,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.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 omitObject,\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\nexport const FileButton = forwardRef<FileButtonProps, \"input\">(\n ({ className, resetRef, as: As, children, ...props }, ref) => {\n const { id, name, accept, multiple, form, ...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 rest.onChange?.(files)\n },\n [rest],\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 {...omitObject(rest, [\"onChange\", \"aria-readonly\"])}\n onClick={handlerAll(rest.onClick, 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 {...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,mBASO;AAEP,mBAAoC;
|
|
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 omitObject,\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 { id, name, accept, multiple, form, ...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 rest.onChange?.(files)\n },\n [rest],\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 {...omitObject(rest, [\"onChange\", \"aria-readonly\"])}\n onClick={handlerAll(rest.onClick, 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 {...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,mBASO;AAEP,mBAAoC;AAuE5B;AAlCD,IAAM,iBAAa;AAAA,EACxB,CAAC,EAAE,WAAW,UAAU,IAAI,IAAI,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC5D,UAAM,EAAE,IAAI,MAAM,QAAQ,UAAU,MAAM,GAAG,KAAK,QAChD,yCAAoB,KAAK;AAE3B,UAAM,EAAE,UAAU,UAAU,UAAU,gBAAgB,UAAU,IAAI;AAEpE,UAAM,eAAW,qBAAyB,IAAI;AAE9C,UAAM,cAAU,0BAAY,MAAM;AAlEtC;AAmEM,UAAI,YAAY;AAAU;AAE1B,qBAAS,YAAT,mBAAkB;AAAA,IACpB,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,UAAM,eAAW;AAAA,MACf,CAAC,OAAsC;AAzE7C;AA0EQ,cAAM,QAAQ,KAAC,qBAAO,GAAG,cAAc,KAAK,IACxC,MAAM,KAAK,GAAG,cAAc,KAAK,IACjC;AAEJ,mBAAK,aAAL,8BAAgB;AAAA,MAClB;AAAA,MACA,CAAC,IAAI;AAAA,IACP;AAEA,UAAM,cAAU,0BAAY,MAAM;AAChC,UAAI,SAAS;AAAS,iBAAS,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,OAAG,yBAAW,MAAM,CAAC,YAAY,eAAe,CAAC;AAAA,UAClD,aAAS,yBAAW,KAAK,SAAS,OAAO;AAAA,UAExC;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,UACC,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": "0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "Yamada UI file button component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"yamada",
|
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
"publishConfig": {
|
|
27
27
|
"access": "public"
|
|
28
28
|
},
|
|
29
|
+
"homepage": "https://yamada-ui.com",
|
|
29
30
|
"repository": {
|
|
30
31
|
"type": "git",
|
|
31
32
|
"url": "git+https://github.com/hirotomoyamada/yamada-ui",
|
|
@@ -35,10 +36,10 @@
|
|
|
35
36
|
"url": "https://github.com/hirotomoyamada/yamada-ui/issues"
|
|
36
37
|
},
|
|
37
38
|
"dependencies": {
|
|
38
|
-
"@yamada-ui/core": "
|
|
39
|
-
"@yamada-ui/utils": "0.
|
|
40
|
-
"@yamada-ui/form-control": "0.
|
|
41
|
-
"@yamada-ui/button": "0.
|
|
39
|
+
"@yamada-ui/core": "1.1.0",
|
|
40
|
+
"@yamada-ui/utils": "1.0.0",
|
|
41
|
+
"@yamada-ui/form-control": "1.0.1",
|
|
42
|
+
"@yamada-ui/button": "1.0.1"
|
|
42
43
|
},
|
|
43
44
|
"devDependencies": {
|
|
44
45
|
"react": "^18.0.0",
|
|
@@ -1 +0,0 @@
|
|
|
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 omitObject,\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\nexport const FileButton = forwardRef<FileButtonProps, \"input\">(\n ({ className, resetRef, as: As, children, ...props }, ref) => {\n const { id, name, accept, multiple, form, ...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 rest.onChange?.(files)\n },\n [rest],\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 {...omitObject(rest, [\"onChange\", \"aria-readonly\"])}\n onClick={handlerAll(rest.onClick, 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 {...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,EACA;AAAA,OACK;AAEP,SAAS,aAAa,cAAc;AAkE5B,SAaF,UAbE,KAaF,YAbE;AAlCD,IAAM,aAAa;AAAA,EACxB,CAAC,EAAE,WAAW,UAAU,IAAI,IAAI,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC5D,UAAM,EAAE,IAAI,MAAM,QAAQ,UAAU,MAAM,GAAG,KAAK,IAChD,oBAAoB,KAAK;AAE3B,UAAM,EAAE,UAAU,UAAU,UAAU,gBAAgB,UAAU,IAAI;AAEpE,UAAM,WAAW,OAAyB,IAAI;AAE9C,UAAM,UAAU,YAAY,MAAM;AA7DtC;AA8DM,UAAI,YAAY;AAAU;AAE1B,qBAAS,YAAT,mBAAkB;AAAA,IACpB,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,UAAM,WAAW;AAAA,MACf,CAAC,OAAsC;AApE7C;AAqEQ,cAAM,QAAQ,CAAC,OAAO,GAAG,cAAc,KAAK,IACxC,MAAM,KAAK,GAAG,cAAc,KAAK,IACjC;AAEJ,mBAAK,aAAL,8BAAgB;AAAA,MAClB;AAAA,MACA,CAAC,IAAI;AAAA,IACP;AAEA,UAAM,UAAU,YAAY,MAAM;AAChC,UAAI,SAAS;AAAS,iBAAS,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,WAAW,MAAM,CAAC,YAAY,eAAe,CAAC;AAAA,UAClD,SAAS,WAAW,KAAK,SAAS,OAAO;AAAA,UAExC;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,UACC,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":[]}
|