@yamada-ui/file-button 1.1.5-dev-20240915031944 → 1.1.5-dev-20240917064938
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-W57Z2PYW.mjs → chunk-ZC23JUXH.mjs} +1 -1
- package/dist/chunk-ZC23JUXH.mjs.map +1 -0
- package/dist/file-button.d.mts +8 -6
- package/dist/file-button.d.ts +8 -6
- 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 +5 -5
- package/dist/chunk-W57Z2PYW.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, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentStyle,\n omitThemeProps,\n} 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\ninterface Props extends FormControlOptions {\n onClick: () => void\n disabled?: boolean\n readOnly?: boolean\n required?: boolean\n}\n\ninterface 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\ninterface InputProps\n extends Partial<Pick<HTMLInputElement, \"accept\" | \"multiple\">> {}\n\nexport interface FileButtonProps\n extends Omit<ButtonProps, \"onChange\" | \"children\">,\n ThemeProps<\"FileButton\">,\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\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"FileButton\", props)\n const computedProps = omitThemeProps(mergedProps)\n let {\n className,\n resetRef,\n as: As,\n children,\n id,\n name,\n accept,\n multiple,\n form,\n onClick: onClickProp,\n onChange: onChangeProp,\n ...rest\n } = useFormControlProps(computedProps)\n const {\n onFocus: _onFocus,\n onBlur: _onBlur,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n const {\n disabled,\n readOnly,\n required,\n \"aria-invalid\": isInvalid,\n } = formControlProps\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 __isProcessSkip={!As}\n __styles={styles}\n {...rest}\n onClick={handlerAll(onClickProp, onClick)}\n >\n {children}\n </Component>\n )\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 {...formControlProps}\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"],"mappings":";;;AACA,SAAS,cAAc;AAEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;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;AA+F9B,SAeF,UAfE,KAeF,YAfE;AAvDC,IAAM,aAAa,WAAqC,CAAC,OAAO,QAAQ;AAC7E,QAAM,CAAC,QAAQ,WAAW,IAAI,kBAAkB,cAAc,KAAK;AACnE,QAAM,gBAAgB,eAAe,WAAW;AAChD,MAAI;AAAA,IACF;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EACL,IAAI,oBAAoB,aAAa;AACrC,QAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,GAAG;AAAA,EACL,IAAI,WAAW,MAAM,qBAAqB;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,EAClB,IAAI;AACJ,QAAM,WAAW,OAAyB,IAAI;AAE9C,QAAM,UAAU,YAAY,MAAM;AA9FpC;AA+FI,QAAI,YAAY,SAAU;AAE1B,mBAAS,YAAT,mBAAkB;AAAA,EACpB,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,QAAM,WAAW;AAAA,IACf,CAAC,OAAsC;AACrC,YAAM,QAAQ,CAAC,OAAO,GAAG,cAAc,KAAK,IACxC,MAAM,KAAK,GAAG,cAAc,KAAK,IACjC;AAEJ,mDAAe;AAAA,IACjB;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAEA,QAAM,UAAU,YAAY,MAAM;AAChC,QAAI,SAAS,QAAS,UAAS,QAAQ,QAAQ;AAAA,EACjD,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC,WAAW,QAAQ,GAAG;AACzB,UAAM,YAAY,MAAM;AAExB,eACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,kBAAkB,SAAS;AAAA,QACzC,iBAAiB,CAAC;AAAA,QAClB,UAAU;AAAA,QACT,GAAG;AAAA,QACJ,SAAS,WAAW,aAAa,OAAO;AAAA,QAEvC;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,YAAU,UAAU,OAAO;AAE3B,SACE,iCACE;AAAA;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,KAAK,UAAU,UAAU,GAAG;AAAA,QAC5B,MAAK;AAAA,QACL,eAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,UAAU;AAAA,QACZ;AAAA,QACA;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,IAEC,WAAW,QAAQ,IAChB,SAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ;AAAA,IACF,CAAC,IACD;AAAA,KACN;AAEJ,CAAC;","names":[]}
|
package/dist/file-button.d.mts
CHANGED
|
@@ -4,13 +4,13 @@ import { ButtonProps } from '@yamada-ui/button';
|
|
|
4
4
|
import { FormControlOptions } from '@yamada-ui/form-control';
|
|
5
5
|
import { ReactNode, ForwardedRef } from 'react';
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
interface Props extends FormControlOptions {
|
|
8
8
|
onClick: () => void;
|
|
9
9
|
disabled?: boolean;
|
|
10
10
|
readOnly?: boolean;
|
|
11
11
|
required?: boolean;
|
|
12
|
-
}
|
|
13
|
-
|
|
12
|
+
}
|
|
13
|
+
interface FileButtonOptions {
|
|
14
14
|
/**
|
|
15
15
|
* The border color when the button is invalid.
|
|
16
16
|
*/
|
|
@@ -24,9 +24,11 @@ type FileButtonOptions = {
|
|
|
24
24
|
* Ref to a reset function.
|
|
25
25
|
*/
|
|
26
26
|
resetRef?: ForwardedRef<() => void>;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
}
|
|
28
|
+
interface InputProps extends Partial<Pick<HTMLInputElement, "accept" | "multiple">> {
|
|
29
|
+
}
|
|
30
|
+
interface FileButtonProps extends Omit<ButtonProps, "onChange" | "children">, ThemeProps<"FileButton">, InputProps, FileButtonOptions, FormControlOptions {
|
|
31
|
+
}
|
|
30
32
|
/**
|
|
31
33
|
* `FileButton` is a button component used for users to select files.
|
|
32
34
|
*
|
package/dist/file-button.d.ts
CHANGED
|
@@ -4,13 +4,13 @@ import { ButtonProps } from '@yamada-ui/button';
|
|
|
4
4
|
import { FormControlOptions } from '@yamada-ui/form-control';
|
|
5
5
|
import { ReactNode, ForwardedRef } from 'react';
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
interface Props extends FormControlOptions {
|
|
8
8
|
onClick: () => void;
|
|
9
9
|
disabled?: boolean;
|
|
10
10
|
readOnly?: boolean;
|
|
11
11
|
required?: boolean;
|
|
12
|
-
}
|
|
13
|
-
|
|
12
|
+
}
|
|
13
|
+
interface FileButtonOptions {
|
|
14
14
|
/**
|
|
15
15
|
* The border color when the button is invalid.
|
|
16
16
|
*/
|
|
@@ -24,9 +24,11 @@ type FileButtonOptions = {
|
|
|
24
24
|
* Ref to a reset function.
|
|
25
25
|
*/
|
|
26
26
|
resetRef?: ForwardedRef<() => void>;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
}
|
|
28
|
+
interface InputProps extends Partial<Pick<HTMLInputElement, "accept" | "multiple">> {
|
|
29
|
+
}
|
|
30
|
+
interface FileButtonProps extends Omit<ButtonProps, "onChange" | "children">, ThemeProps<"FileButton">, InputProps, FileButtonOptions, FormControlOptions {
|
|
31
|
+
}
|
|
30
32
|
/**
|
|
31
33
|
* `FileButton` is a button component used for users to select files.
|
|
32
34
|
*
|
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, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentStyle,\n omitThemeProps,\n} 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\
|
|
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, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentStyle,\n omitThemeProps,\n} 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\ninterface Props extends FormControlOptions {\n onClick: () => void\n disabled?: boolean\n readOnly?: boolean\n required?: boolean\n}\n\ninterface 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\ninterface InputProps\n extends Partial<Pick<HTMLInputElement, \"accept\" | \"multiple\">> {}\n\nexport interface FileButtonProps\n extends Omit<ButtonProps, \"onChange\" | \"children\">,\n ThemeProps<\"FileButton\">,\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\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"FileButton\", props)\n const computedProps = omitThemeProps(mergedProps)\n let {\n className,\n resetRef,\n as: As,\n children,\n id,\n name,\n accept,\n multiple,\n form,\n onClick: onClickProp,\n onChange: onChangeProp,\n ...rest\n } = useFormControlProps(computedProps)\n const {\n onFocus: _onFocus,\n onBlur: _onBlur,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n const {\n disabled,\n readOnly,\n required,\n \"aria-invalid\": isInvalid,\n } = formControlProps\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 __isProcessSkip={!As}\n __styles={styles}\n {...rest}\n onClick={handlerAll(onClickProp, onClick)}\n >\n {children}\n </Component>\n )\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 {...formControlProps}\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,oBAAuB;AAEvB,kBAKO;AAEP,0BAGO;AACP,mBAQO;AAEP,mBAAoC;AA+F9B;AAvDC,IAAM,iBAAa,wBAAqC,CAAC,OAAO,QAAQ;AAC7E,QAAM,CAAC,QAAQ,WAAW,QAAI,+BAAkB,cAAc,KAAK;AACnE,QAAM,oBAAgB,4BAAe,WAAW;AAChD,MAAI;AAAA,IACF;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EACL,QAAI,yCAAoB,aAAa;AACrC,QAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,GAAG;AAAA,EACL,QAAI,yBAAW,MAAM,yCAAqB;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,EAClB,IAAI;AACJ,QAAM,eAAW,qBAAyB,IAAI;AAE9C,QAAM,cAAU,0BAAY,MAAM;AA9FpC;AA+FI,QAAI,YAAY,SAAU;AAE1B,mBAAS,YAAT,mBAAkB;AAAA,EACpB,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,QAAM,eAAW;AAAA,IACf,CAAC,OAAsC;AACrC,YAAM,QAAQ,KAAC,qBAAO,GAAG,cAAc,KAAK,IACxC,MAAM,KAAK,GAAG,cAAc,KAAK,IACjC;AAEJ,mDAAe;AAAA,IACjB;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAEA,QAAM,cAAU,0BAAY,MAAM;AAChC,QAAI,SAAS,QAAS,UAAS,QAAQ,QAAQ;AAAA,EACjD,GAAG,CAAC,CAAC;AAEL,MAAI,KAAC,yBAAW,QAAQ,GAAG;AACzB,UAAM,YAAY,MAAM;AAExB,eACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,iBAAG,kBAAkB,SAAS;AAAA,QACzC,iBAAiB,CAAC;AAAA,QAClB,UAAU;AAAA,QACT,GAAG;AAAA,QACJ,aAAS,yBAAW,aAAa,OAAO;AAAA,QAEvC;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,8BAAU,UAAU,OAAO;AAE3B,SACE,4EACE;AAAA;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC,SAAK,wBAAU,UAAU,GAAG;AAAA,QAC5B,MAAK;AAAA,QACL,eAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,UAAU;AAAA,QACZ;AAAA,QACA;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,QAEC,yBAAW,QAAQ,IAChB,SAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ;AAAA,IACF,CAAC,IACD;AAAA,KACN;AAEJ,CAAC;","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, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentStyle,\n omitThemeProps,\n} 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\
|
|
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, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentStyle,\n omitThemeProps,\n} 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\ninterface Props extends FormControlOptions {\n onClick: () => void\n disabled?: boolean\n readOnly?: boolean\n required?: boolean\n}\n\ninterface 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\ninterface InputProps\n extends Partial<Pick<HTMLInputElement, \"accept\" | \"multiple\">> {}\n\nexport interface FileButtonProps\n extends Omit<ButtonProps, \"onChange\" | \"children\">,\n ThemeProps<\"FileButton\">,\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\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"FileButton\", props)\n const computedProps = omitThemeProps(mergedProps)\n let {\n className,\n resetRef,\n as: As,\n children,\n id,\n name,\n accept,\n multiple,\n form,\n onClick: onClickProp,\n onChange: onChangeProp,\n ...rest\n } = useFormControlProps(computedProps)\n const {\n onFocus: _onFocus,\n onBlur: _onBlur,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n const {\n disabled,\n readOnly,\n required,\n \"aria-invalid\": isInvalid,\n } = formControlProps\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 __isProcessSkip={!As}\n __styles={styles}\n {...rest}\n onClick={handlerAll(onClickProp, onClick)}\n >\n {children}\n </Component>\n )\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 {...formControlProps}\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,oBAAuB;AAEvB,kBAKO;AAEP,0BAGO;AACP,mBAQO;AAEP,mBAAoC;AA+F9B;AAvDC,IAAM,iBAAa,wBAAqC,CAAC,OAAO,QAAQ;AAC7E,QAAM,CAAC,QAAQ,WAAW,QAAI,+BAAkB,cAAc,KAAK;AACnE,QAAM,oBAAgB,4BAAe,WAAW;AAChD,MAAI;AAAA,IACF;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EACL,QAAI,yCAAoB,aAAa;AACrC,QAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,GAAG;AAAA,EACL,QAAI,yBAAW,MAAM,yCAAqB;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,EAClB,IAAI;AACJ,QAAM,eAAW,qBAAyB,IAAI;AAE9C,QAAM,cAAU,0BAAY,MAAM;AA9FpC;AA+FI,QAAI,YAAY,SAAU;AAE1B,mBAAS,YAAT,mBAAkB;AAAA,EACpB,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,QAAM,eAAW;AAAA,IACf,CAAC,OAAsC;AACrC,YAAM,QAAQ,KAAC,qBAAO,GAAG,cAAc,KAAK,IACxC,MAAM,KAAK,GAAG,cAAc,KAAK,IACjC;AAEJ,mDAAe;AAAA,IACjB;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAEA,QAAM,cAAU,0BAAY,MAAM;AAChC,QAAI,SAAS,QAAS,UAAS,QAAQ,QAAQ;AAAA,EACjD,GAAG,CAAC,CAAC;AAEL,MAAI,KAAC,yBAAW,QAAQ,GAAG;AACzB,UAAM,YAAY,MAAM;AAExB,eACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,iBAAG,kBAAkB,SAAS;AAAA,QACzC,iBAAiB,CAAC;AAAA,QAClB,UAAU;AAAA,QACT,GAAG;AAAA,QACJ,aAAS,yBAAW,aAAa,OAAO;AAAA,QAEvC;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,8BAAU,UAAU,OAAO;AAE3B,SACE,4EACE;AAAA;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC,SAAK,wBAAU,UAAU,GAAG;AAAA,QAC5B,MAAK;AAAA,QACL,eAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,UAAU;AAAA,QACZ;AAAA,QACA;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,QAEC,yBAAW,QAAQ,IAChB,SAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ;AAAA,IACF,CAAC,IACD;AAAA,KACN;AAEJ,CAAC;","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.1.5-dev-
|
|
3
|
+
"version": "1.1.5-dev-20240917064938",
|
|
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/button": "1.0.42-dev-
|
|
40
|
-
"@yamada-ui/core": "1.
|
|
41
|
-
"@yamada-ui/form-control": "2.1.2-dev-
|
|
42
|
-
"@yamada-ui/utils": "1.5.
|
|
39
|
+
"@yamada-ui/button": "1.0.42-dev-20240917064938",
|
|
40
|
+
"@yamada-ui/core": "1.15.0-dev-20240917064938",
|
|
41
|
+
"@yamada-ui/form-control": "2.1.2-dev-20240917064938",
|
|
42
|
+
"@yamada-ui/utils": "1.5.1-dev-20240917064938"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"clean-package": "2.2.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, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentStyle,\n omitThemeProps,\n} 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 ThemeProps<\"FileButton\"> &\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\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"FileButton\", props)\n const computedProps = omitThemeProps(mergedProps)\n let {\n className,\n resetRef,\n as: As,\n children,\n id,\n name,\n accept,\n multiple,\n form,\n onClick: onClickProp,\n onChange: onChangeProp,\n ...rest\n } = useFormControlProps(computedProps)\n const {\n onFocus: _onFocus,\n onBlur: _onBlur,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n const {\n disabled,\n readOnly,\n required,\n \"aria-invalid\": isInvalid,\n } = formControlProps\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 __isProcessSkip={!As}\n __styles={styles}\n {...rest}\n onClick={handlerAll(onClickProp, onClick)}\n >\n {children}\n </Component>\n )\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 {...formControlProps}\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"],"mappings":";;;AACA,SAAS,cAAc;AAEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;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;AA6F9B,SAeF,UAfE,KAeF,YAfE;AAvDC,IAAM,aAAa,WAAqC,CAAC,OAAO,QAAQ;AAC7E,QAAM,CAAC,QAAQ,WAAW,IAAI,kBAAkB,cAAc,KAAK;AACnE,QAAM,gBAAgB,eAAe,WAAW;AAChD,MAAI;AAAA,IACF;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EACL,IAAI,oBAAoB,aAAa;AACrC,QAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,GAAG;AAAA,EACL,IAAI,WAAW,MAAM,qBAAqB;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,EAClB,IAAI;AACJ,QAAM,WAAW,OAAyB,IAAI;AAE9C,QAAM,UAAU,YAAY,MAAM;AA5FpC;AA6FI,QAAI,YAAY,SAAU;AAE1B,mBAAS,YAAT,mBAAkB;AAAA,EACpB,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,QAAM,WAAW;AAAA,IACf,CAAC,OAAsC;AACrC,YAAM,QAAQ,CAAC,OAAO,GAAG,cAAc,KAAK,IACxC,MAAM,KAAK,GAAG,cAAc,KAAK,IACjC;AAEJ,mDAAe;AAAA,IACjB;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAEA,QAAM,UAAU,YAAY,MAAM;AAChC,QAAI,SAAS,QAAS,UAAS,QAAQ,QAAQ;AAAA,EACjD,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC,WAAW,QAAQ,GAAG;AACzB,UAAM,YAAY,MAAM;AAExB,eACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,kBAAkB,SAAS;AAAA,QACzC,iBAAiB,CAAC;AAAA,QAClB,UAAU;AAAA,QACT,GAAG;AAAA,QACJ,SAAS,WAAW,aAAa,OAAO;AAAA,QAEvC;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,YAAU,UAAU,OAAO;AAE3B,SACE,iCACE;AAAA;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,KAAK,UAAU,UAAU,GAAG;AAAA,QAC5B,MAAK;AAAA,QACL,eAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,UAAU;AAAA,QACZ;AAAA,QACA;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,IAEC,WAAW,QAAQ,IAChB,SAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ;AAAA,IACF,CAAC,IACD;AAAA,KACN;AAEJ,CAAC;","names":[]}
|