@yamada-ui/file-button 1.1.7-dev-20241007025246 → 1.1.7-dev-20241007135427
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-ZRUOMZJN.mjs → chunk-5WHD36CE.mjs} +4 -4
- package/dist/{chunk-ZRUOMZJN.mjs.map → chunk-5WHD36CE.mjs.map} +1 -1
- package/dist/file-button.js +3 -3
- package/dist/file-button.js.map +1 -1
- package/dist/file-button.mjs +1 -1
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +5 -5
|
@@ -46,10 +46,10 @@ var FileButton = forwardRef((props, ref) => {
|
|
|
46
46
|
...formControlProps
|
|
47
47
|
} = pickObject(rest, formControlProperties);
|
|
48
48
|
const {
|
|
49
|
+
"aria-invalid": isInvalid,
|
|
49
50
|
disabled,
|
|
50
51
|
readOnly,
|
|
51
|
-
required
|
|
52
|
-
"aria-invalid": isInvalid
|
|
52
|
+
required
|
|
53
53
|
} = formControlProps;
|
|
54
54
|
const inputRef = useRef(null);
|
|
55
55
|
const onClick = useCallback(() => {
|
|
@@ -102,10 +102,10 @@ var FileButton = forwardRef((props, ref) => {
|
|
|
102
102
|
whiteSpace: "nowrap",
|
|
103
103
|
width: "1px"
|
|
104
104
|
},
|
|
105
|
+
"aria-hidden": true,
|
|
105
106
|
accept,
|
|
106
107
|
multiple,
|
|
107
108
|
tabIndex: -1,
|
|
108
|
-
"aria-hidden": true,
|
|
109
109
|
onChange,
|
|
110
110
|
...formControlProps
|
|
111
111
|
}
|
|
@@ -128,4 +128,4 @@ FileButton.__ui__ = "FileButton";
|
|
|
128
128
|
export {
|
|
129
129
|
FileButton
|
|
130
130
|
};
|
|
131
|
-
//# sourceMappingURL=chunk-
|
|
131
|
+
//# sourceMappingURL=chunk-5WHD36CE.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/file-button.tsx"],"sourcesContent":["import type { ButtonProps } from \"@yamada-ui/button\"\nimport type { ColorModeToken, CSS, ThemeProps } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { ChangeEvent, ForwardedRef, ReactNode } from \"react\"\nimport { Button } from \"@yamada-ui/button\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentStyle,\n} from \"@yamada-ui/core\"\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 { 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 children?: ((props: Props) => ReactNode) | ReactNode\n /**\n * The border color when the button is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * Ref to a reset function.\n */\n resetRef?: ForwardedRef<() => void>\n /**\n * Function to be called when a file change event occurs.\n */\n onChange?: (files: File[] | undefined) => void\n}\n\ninterface InputProps\n extends Partial<Pick<HTMLInputElement, \"accept\" | \"multiple\">> {}\n\nexport interface FileButtonProps\n extends Omit<ButtonProps, \"children\" | \"onChange\">,\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 id,\n as: As,\n form,\n name,\n className,\n accept,\n children,\n multiple,\n resetRef,\n onChange: onChangeProp,\n onClick: onClickProp,\n ...rest\n } = useFormControlProps(computedProps)\n const {\n onBlur: _onBlur,\n onFocus: _onFocus,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n const {\n
|
|
1
|
+
{"version":3,"sources":["../src/file-button.tsx"],"sourcesContent":["import type { ButtonProps } from \"@yamada-ui/button\"\nimport type { ColorModeToken, CSS, ThemeProps } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { ChangeEvent, ForwardedRef, ReactNode } from \"react\"\nimport { Button } from \"@yamada-ui/button\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentStyle,\n} from \"@yamada-ui/core\"\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 { 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 children?: ((props: Props) => ReactNode) | ReactNode\n /**\n * The border color when the button is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * Ref to a reset function.\n */\n resetRef?: ForwardedRef<() => void>\n /**\n * Function to be called when a file change event occurs.\n */\n onChange?: (files: File[] | undefined) => void\n}\n\ninterface InputProps\n extends Partial<Pick<HTMLInputElement, \"accept\" | \"multiple\">> {}\n\nexport interface FileButtonProps\n extends Omit<ButtonProps, \"children\" | \"onChange\">,\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 id,\n as: As,\n form,\n name,\n className,\n accept,\n children,\n multiple,\n resetRef,\n onChange: onChangeProp,\n onClick: onClickProp,\n ...rest\n } = useFormControlProps(computedProps)\n const {\n onBlur: _onBlur,\n onFocus: _onFocus,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n const {\n \"aria-invalid\": isInvalid,\n disabled,\n readOnly,\n required,\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 id={id}\n ref={mergeRefs(inputRef, ref)}\n form={form}\n type=\"file\"\n name={name}\n style={{\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n margin: \"-1px\",\n overflow: \"hidden\",\n padding: \"0px\",\n position: \"absolute\",\n whiteSpace: \"nowrap\",\n width: \"1px\",\n }}\n aria-hidden\n accept={accept}\n multiple={multiple}\n tabIndex={-1}\n onChange={onChange}\n {...formControlProps}\n />\n\n {isFunction(children)\n ? children({\n disabled,\n isDisabled: disabled,\n isInvalid,\n isReadOnly: readOnly,\n isRequired: required,\n readOnly,\n required,\n onClick,\n })\n : children}\n </>\n )\n})\n\nFileButton.displayName = \"FileButton\"\nFileButton.__ui__ = \"FileButton\"\n"],"mappings":";;;AAIA,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,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,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,SAAS;AAAA,IACT,GAAG;AAAA,EACL,IAAI,oBAAoB,aAAa;AACrC,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,GAAG;AAAA,EACL,IAAI,WAAW,MAAM,qBAAqB;AAC1C,QAAM;AAAA,IACJ,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,EACF,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;AAAA,QACA,KAAK,UAAU,UAAU,GAAG;AAAA,QAC5B;AAAA,QACA,MAAK;AAAA,QACL;AAAA,QACA,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,SAAS;AAAA,UACT,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,OAAO;AAAA,QACT;AAAA,QACA,eAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,IAEC,WAAW,QAAQ,IAChB,SAAS;AAAA,MACP;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC,IACD;AAAA,KACN;AAEJ,CAAC;AAED,WAAW,cAAc;AACzB,WAAW,SAAS;","names":[]}
|
package/dist/file-button.js
CHANGED
|
@@ -53,10 +53,10 @@ var FileButton = (0, import_core.forwardRef)((props, ref) => {
|
|
|
53
53
|
...formControlProps
|
|
54
54
|
} = (0, import_utils.pickObject)(rest, import_form_control.formControlProperties);
|
|
55
55
|
const {
|
|
56
|
+
"aria-invalid": isInvalid,
|
|
56
57
|
disabled,
|
|
57
58
|
readOnly,
|
|
58
|
-
required
|
|
59
|
-
"aria-invalid": isInvalid
|
|
59
|
+
required
|
|
60
60
|
} = formControlProps;
|
|
61
61
|
const inputRef = (0, import_react.useRef)(null);
|
|
62
62
|
const onClick = (0, import_react.useCallback)(() => {
|
|
@@ -109,10 +109,10 @@ var FileButton = (0, import_core.forwardRef)((props, ref) => {
|
|
|
109
109
|
whiteSpace: "nowrap",
|
|
110
110
|
width: "1px"
|
|
111
111
|
},
|
|
112
|
+
"aria-hidden": true,
|
|
112
113
|
accept,
|
|
113
114
|
multiple,
|
|
114
115
|
tabIndex: -1,
|
|
115
|
-
"aria-hidden": true,
|
|
116
116
|
onChange,
|
|
117
117
|
...formControlProps
|
|
118
118
|
}
|
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 type { ColorModeToken, CSS, ThemeProps } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { ChangeEvent, ForwardedRef, ReactNode } from \"react\"\nimport { Button } from \"@yamada-ui/button\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentStyle,\n} from \"@yamada-ui/core\"\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 { 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 children?: ((props: Props) => ReactNode) | ReactNode\n /**\n * The border color when the button is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * Ref to a reset function.\n */\n resetRef?: ForwardedRef<() => void>\n /**\n * Function to be called when a file change event occurs.\n */\n onChange?: (files: File[] | undefined) => void\n}\n\ninterface InputProps\n extends Partial<Pick<HTMLInputElement, \"accept\" | \"multiple\">> {}\n\nexport interface FileButtonProps\n extends Omit<ButtonProps, \"children\" | \"onChange\">,\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 id,\n as: As,\n form,\n name,\n className,\n accept,\n children,\n multiple,\n resetRef,\n onChange: onChangeProp,\n onClick: onClickProp,\n ...rest\n } = useFormControlProps(computedProps)\n const {\n onBlur: _onBlur,\n onFocus: _onFocus,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n const {\n
|
|
1
|
+
{"version":3,"sources":["../src/file-button.tsx"],"sourcesContent":["import type { ButtonProps } from \"@yamada-ui/button\"\nimport type { ColorModeToken, CSS, ThemeProps } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { ChangeEvent, ForwardedRef, ReactNode } from \"react\"\nimport { Button } from \"@yamada-ui/button\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentStyle,\n} from \"@yamada-ui/core\"\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 { 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 children?: ((props: Props) => ReactNode) | ReactNode\n /**\n * The border color when the button is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * Ref to a reset function.\n */\n resetRef?: ForwardedRef<() => void>\n /**\n * Function to be called when a file change event occurs.\n */\n onChange?: (files: File[] | undefined) => void\n}\n\ninterface InputProps\n extends Partial<Pick<HTMLInputElement, \"accept\" | \"multiple\">> {}\n\nexport interface FileButtonProps\n extends Omit<ButtonProps, \"children\" | \"onChange\">,\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 id,\n as: As,\n form,\n name,\n className,\n accept,\n children,\n multiple,\n resetRef,\n onChange: onChangeProp,\n onClick: onClickProp,\n ...rest\n } = useFormControlProps(computedProps)\n const {\n onBlur: _onBlur,\n onFocus: _onFocus,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n const {\n \"aria-invalid\": isInvalid,\n disabled,\n readOnly,\n required,\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 id={id}\n ref={mergeRefs(inputRef, ref)}\n form={form}\n type=\"file\"\n name={name}\n style={{\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n margin: \"-1px\",\n overflow: \"hidden\",\n padding: \"0px\",\n position: \"absolute\",\n whiteSpace: \"nowrap\",\n width: \"1px\",\n }}\n aria-hidden\n accept={accept}\n multiple={multiple}\n tabIndex={-1}\n onChange={onChange}\n {...formControlProps}\n />\n\n {isFunction(children)\n ? children({\n disabled,\n isDisabled: disabled,\n isInvalid,\n isReadOnly: readOnly,\n isRequired: required,\n readOnly,\n required,\n onClick,\n })\n : children}\n </>\n )\n})\n\nFileButton.displayName = \"FileButton\"\nFileButton.__ui__ = \"FileButton\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,oBAAuB;AACvB,kBAKO;AACP,0BAGO;AACP,mBAQO;AACP,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,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,SAAS;AAAA,IACT,GAAG;AAAA,EACL,QAAI,yCAAoB,aAAa;AACrC,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,GAAG;AAAA,EACL,QAAI,yBAAW,MAAM,yCAAqB;AAC1C,QAAM;AAAA,IACJ,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,EACF,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;AAAA,QACA,SAAK,wBAAU,UAAU,GAAG;AAAA,QAC5B;AAAA,QACA,MAAK;AAAA,QACL;AAAA,QACA,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,SAAS;AAAA,UACT,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,OAAO;AAAA,QACT;AAAA,QACA,eAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,QAEC,yBAAW,QAAQ,IAChB,SAAS;AAAA,MACP;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC,IACD;AAAA,KACN;AAEJ,CAAC;AAED,WAAW,cAAc;AACzB,WAAW,SAAS;","names":[]}
|
package/dist/file-button.mjs
CHANGED
package/dist/index.js
CHANGED
|
@@ -55,10 +55,10 @@ var FileButton = (0, import_core.forwardRef)((props, ref) => {
|
|
|
55
55
|
...formControlProps
|
|
56
56
|
} = (0, import_utils.pickObject)(rest, import_form_control.formControlProperties);
|
|
57
57
|
const {
|
|
58
|
+
"aria-invalid": isInvalid,
|
|
58
59
|
disabled,
|
|
59
60
|
readOnly,
|
|
60
|
-
required
|
|
61
|
-
"aria-invalid": isInvalid
|
|
61
|
+
required
|
|
62
62
|
} = formControlProps;
|
|
63
63
|
const inputRef = (0, import_react.useRef)(null);
|
|
64
64
|
const onClick = (0, import_react.useCallback)(() => {
|
|
@@ -111,10 +111,10 @@ var FileButton = (0, import_core.forwardRef)((props, ref) => {
|
|
|
111
111
|
whiteSpace: "nowrap",
|
|
112
112
|
width: "1px"
|
|
113
113
|
},
|
|
114
|
+
"aria-hidden": true,
|
|
114
115
|
accept,
|
|
115
116
|
multiple,
|
|
116
117
|
tabIndex: -1,
|
|
117
|
-
"aria-hidden": true,
|
|
118
118
|
onChange,
|
|
119
119
|
...formControlProps
|
|
120
120
|
}
|
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 type { ColorModeToken, CSS, ThemeProps } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { ChangeEvent, ForwardedRef, ReactNode } from \"react\"\nimport { Button } from \"@yamada-ui/button\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentStyle,\n} from \"@yamada-ui/core\"\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 { 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 children?: ((props: Props) => ReactNode) | ReactNode\n /**\n * The border color when the button is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * Ref to a reset function.\n */\n resetRef?: ForwardedRef<() => void>\n /**\n * Function to be called when a file change event occurs.\n */\n onChange?: (files: File[] | undefined) => void\n}\n\ninterface InputProps\n extends Partial<Pick<HTMLInputElement, \"accept\" | \"multiple\">> {}\n\nexport interface FileButtonProps\n extends Omit<ButtonProps, \"children\" | \"onChange\">,\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 id,\n as: As,\n form,\n name,\n className,\n accept,\n children,\n multiple,\n resetRef,\n onChange: onChangeProp,\n onClick: onClickProp,\n ...rest\n } = useFormControlProps(computedProps)\n const {\n onBlur: _onBlur,\n onFocus: _onFocus,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n const {\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 type { ColorModeToken, CSS, ThemeProps } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { ChangeEvent, ForwardedRef, ReactNode } from \"react\"\nimport { Button } from \"@yamada-ui/button\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentStyle,\n} from \"@yamada-ui/core\"\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 { 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 children?: ((props: Props) => ReactNode) | ReactNode\n /**\n * The border color when the button is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * Ref to a reset function.\n */\n resetRef?: ForwardedRef<() => void>\n /**\n * Function to be called when a file change event occurs.\n */\n onChange?: (files: File[] | undefined) => void\n}\n\ninterface InputProps\n extends Partial<Pick<HTMLInputElement, \"accept\" | \"multiple\">> {}\n\nexport interface FileButtonProps\n extends Omit<ButtonProps, \"children\" | \"onChange\">,\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 id,\n as: As,\n form,\n name,\n className,\n accept,\n children,\n multiple,\n resetRef,\n onChange: onChangeProp,\n onClick: onClickProp,\n ...rest\n } = useFormControlProps(computedProps)\n const {\n onBlur: _onBlur,\n onFocus: _onFocus,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n const {\n \"aria-invalid\": isInvalid,\n disabled,\n readOnly,\n required,\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 id={id}\n ref={mergeRefs(inputRef, ref)}\n form={form}\n type=\"file\"\n name={name}\n style={{\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n margin: \"-1px\",\n overflow: \"hidden\",\n padding: \"0px\",\n position: \"absolute\",\n whiteSpace: \"nowrap\",\n width: \"1px\",\n }}\n aria-hidden\n accept={accept}\n multiple={multiple}\n tabIndex={-1}\n onChange={onChange}\n {...formControlProps}\n />\n\n {isFunction(children)\n ? children({\n disabled,\n isDisabled: disabled,\n isInvalid,\n isReadOnly: readOnly,\n isRequired: required,\n readOnly,\n required,\n onClick,\n })\n : children}\n </>\n )\n})\n\nFileButton.displayName = \"FileButton\"\nFileButton.__ui__ = \"FileButton\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACIA,oBAAuB;AACvB,kBAKO;AACP,0BAGO;AACP,mBAQO;AACP,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,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,SAAS;AAAA,IACT,GAAG;AAAA,EACL,QAAI,yCAAoB,aAAa;AACrC,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,GAAG;AAAA,EACL,QAAI,yBAAW,MAAM,yCAAqB;AAC1C,QAAM;AAAA,IACJ,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,EACF,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;AAAA,QACA,SAAK,wBAAU,UAAU,GAAG;AAAA,QAC5B;AAAA,QACA,MAAK;AAAA,QACL;AAAA,QACA,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,SAAS;AAAA,UACT,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,OAAO;AAAA,QACT;AAAA,QACA,eAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,QAEC,yBAAW,QAAQ,IAChB,SAAS;AAAA,MACP;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC,IACD;AAAA,KACN;AAEJ,CAAC;AAED,WAAW,cAAc;AACzB,WAAW,SAAS;","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.7-dev-
|
|
3
|
+
"version": "1.1.7-dev-20241007135427",
|
|
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.44-dev-
|
|
40
|
-
"@yamada-ui/core": "1.15.2-dev-
|
|
41
|
-
"@yamada-ui/form-control": "2.1.4-dev-
|
|
42
|
-
"@yamada-ui/utils": "1.5.3-dev-
|
|
39
|
+
"@yamada-ui/button": "1.0.44-dev-20241007135427",
|
|
40
|
+
"@yamada-ui/core": "1.15.2-dev-20241007135427",
|
|
41
|
+
"@yamada-ui/form-control": "2.1.4-dev-20241007135427",
|
|
42
|
+
"@yamada-ui/utils": "1.5.3-dev-20241007135427"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"clean-package": "2.2.0",
|