@yamada-ui/react 2.3.2-dev-20261106095026 → 2.3.2-dev-20261106105628
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/cjs/components/file-button/use-file-button.cjs +2 -4
- package/dist/cjs/components/file-button/use-file-button.cjs.map +1 -1
- package/dist/cjs/components/file-input/file-input.cjs +4 -1
- package/dist/cjs/components/file-input/file-input.cjs.map +1 -1
- package/dist/cjs/components/file-input/use-file-input.cjs +22 -15
- package/dist/cjs/components/file-input/use-file-input.cjs.map +1 -1
- package/dist/cjs/utils/index.cjs.map +1 -1
- package/dist/esm/components/file-button/use-file-button.js +2 -4
- package/dist/esm/components/file-button/use-file-button.js.map +1 -1
- package/dist/esm/components/file-input/file-input.js +4 -1
- package/dist/esm/components/file-input/file-input.js.map +1 -1
- package/dist/esm/components/file-input/use-file-input.js +23 -16
- package/dist/esm/components/file-input/use-file-input.js.map +1 -1
- package/dist/esm/utils/index.js.map +1 -1
- package/dist/types/components/calendar/calendar.style.d.ts +2 -2
- package/dist/types/components/chart/polar-chart.style.d.ts +1 -1
- package/dist/types/components/field/field.style.d.ts +2 -2
- package/dist/types/components/fieldset/fieldset.style.d.ts +1 -1
- package/dist/types/components/file-input/use-file-input.d.ts +1 -1
- package/dist/types/components/number-input/number-input.style.d.ts +1 -1
- package/dist/types/index.d.ts +3 -3
- package/dist/types/utils/index.d.ts +3 -3
- package/package.json +2 -2
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
const require_props = require("../../core/components/props.cjs");
|
|
2
3
|
const require_use_file_input = require("../file-input/use-file-input.cjs");
|
|
3
4
|
let react = require("react");
|
|
4
5
|
// src/components/file-button/use-file-button.ts
|
|
@@ -6,10 +7,7 @@ const useFileButton = (props = {}) => {
|
|
|
6
7
|
const { clickableProps, getInputProps } = require_use_file_input.useFileInput(props);
|
|
7
8
|
return {
|
|
8
9
|
clickableProps,
|
|
9
|
-
getButtonProps: (0, react.useCallback)((props) => (
|
|
10
|
-
...clickableProps,
|
|
11
|
-
...props
|
|
12
|
-
}), [clickableProps]),
|
|
10
|
+
getButtonProps: (0, react.useCallback)((props = {}) => require_props.mergeProps(clickableProps, props)(), [clickableProps]),
|
|
13
11
|
getInputProps
|
|
14
12
|
};
|
|
15
13
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-file-button.cjs","names":["useFileInput","useCallback"],"sources":["../../../../src/components/file-button/use-file-button.ts"],"sourcesContent":["\"use client\"\n\nimport type { PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { UseFileInputProps } from \"../file-input\"\nimport { useCallback } from \"react\"\nimport { useFileInput } from \"../file-input\"\n\nexport interface UseFileButtonProps\n extends UseFileInputProps<\"button\">, FieldProps {}\n\nexport const useFileButton = (props: UseFileButtonProps = {}) => {\n const { clickableProps, getInputProps } = useFileInput<\"button\">(props)\n\n const getButtonProps: PropGetter<\"button\"> = useCallback(\n (props) => (
|
|
1
|
+
{"version":3,"file":"use-file-button.cjs","names":["useFileInput","useCallback","mergeProps"],"sources":["../../../../src/components/file-button/use-file-button.ts"],"sourcesContent":["\"use client\"\n\nimport type { PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { UseFileInputProps } from \"../file-input\"\nimport { useCallback } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useFileInput } from \"../file-input\"\n\nexport interface UseFileButtonProps\n extends UseFileInputProps<\"button\">, FieldProps {}\n\nexport const useFileButton = (props: UseFileButtonProps = {}) => {\n const { clickableProps, getInputProps } = useFileInput<\"button\">(props)\n\n const getButtonProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => mergeProps(clickableProps, props)(),\n [clickableProps],\n )\n\n return {\n clickableProps,\n getButtonProps,\n getInputProps,\n }\n}\n\nexport type UseFileButtonReturn = ReturnType<typeof useFileButton>\n"],"mappings":";;;;;AAYA,MAAa,iBAAiB,QAA4B,CAAC,MAAM;CAC/D,MAAM,EAAE,gBAAgB,kBAAkBA,uBAAAA,aAAuB,KAAK;CAOtE,OAAO;EACL;EACA,iBAAA,GAP2CC,MAAAA,YAAAA,EAC1C,QAAQ,CAAC,MAAMC,cAAAA,WAAW,gBAAgB,KAAK,CAAC,CAAC,GAClD,CAAC,cAAc,CAKF;EACb;CACF;AACF"}
|
|
@@ -22,7 +22,10 @@ const FileInput = withProvider(({ children, component, errorBorderColor, focusBo
|
|
|
22
22
|
errorBorderColor,
|
|
23
23
|
focusBorderColor
|
|
24
24
|
});
|
|
25
|
-
const { values, getFieldProps, getInputProps } = require_use_file_input.useFileInput(
|
|
25
|
+
const { values, getFieldProps, getInputProps } = require_use_file_input.useFileInput({
|
|
26
|
+
placeholder,
|
|
27
|
+
...props
|
|
28
|
+
});
|
|
26
29
|
const cloneChildren = (0, react.useMemo)(() => {
|
|
27
30
|
if (!values?.length) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.span, {
|
|
28
31
|
overflow: "hidden",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"file-input.cjs","names":["createSlotComponent","fileInputStyle","useInputBorder","useFileInput","useMemo","styled","isValidElement","cloneElement","Portal","useInputPropsContext","mergeProps"],"sources":["../../../../src/components/file-input/file-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { FileInputStyle } from \"./file-input.style\"\nimport type { UseFileInputProps } from \"./use-file-input\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport { useInputBorder, useInputPropsContext } from \"../input\"\nimport { Portal } from \"../portal\"\nimport { fileInputStyle } from \"./file-input.style\"\nimport { useFileInput } from \"./use-file-input\"\n\nconst defaultFormat: (value: File, index: number) => string = ({ name }) => name\n\nexport interface FileInputProps\n extends\n Omit<\n HTMLStyledProps<\"input\">,\n \"children\" | \"defaultValue\" | \"onChange\" | \"value\"\n >,\n ThemeProps<FileInputStyle>,\n UseInputBorderProps,\n FieldProps,\n Omit<UseFileInputProps, \"children\"> {\n /**\n * The string to separate uploaded files.\n *\n * @default ','\n */\n separator?: string\n /**\n * A callback that returns a React node.\n */\n children?: (files: File[] | undefined) => ReactNode\n /**\n * The component that displays uploaded files.\n */\n component?: (props: { index: number; value: File }) => ReactNode\n /**\n * A callback that formats the name of the uploaded file.\n */\n format?: (value: File, index: number) => string\n}\n\nconst {\n PropsContext: FileInputPropsContext,\n usePropsContext: useFileInputPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<FileInputProps, FileInputStyle>(\n \"file-input\",\n fileInputStyle,\n)\n\nexport { FileInputPropsContext, useFileInputPropsContext }\n\n/**\n * `FileInput` is a component used for users to select files.\n *\n * @see https://yamada-ui.com/docs/components/file-input\n */\nexport const FileInput = withProvider<\"input\", FileInputProps>(\n ({\n children,\n component,\n errorBorderColor,\n focusBorderColor,\n format = defaultFormat,\n placeholder,\n separator = \",\",\n ...props\n }) => {\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const { values, getFieldProps, getInputProps } = useFileInput(props)\n\n const cloneChildren = useMemo(() => {\n if (!values?.length)\n return (\n <styled.span overflow=\"hidden\" whiteSpace=\"nowrap\">\n {placeholder}\n </styled.span>\n )\n\n if (children) return children(values)\n\n return values.map((value, index) => {\n const last = values.length === index + 1\n\n if (component) {\n const node = component({ index, value })\n\n if (isValidElement(node)) return cloneElement(node, { key: index })\n else return node\n } else {\n return (\n <FileInputTag key={index}>\n {format(value, index)}\n {!last ? separator : null}\n </FileInputTag>\n )\n }\n })\n }, [children, format, placeholder, separator, component, values])\n\n return (\n <>\n <Portal>\n <styled.input {...getInputProps()} />\n </Portal>\n\n <styled.div {...varProps} {...getFieldProps()}>\n {cloneChildren}\n </styled.div>\n </>\n )\n },\n \"root\",\n)((props) => {\n const context = useInputPropsContext()\n\n return mergeProps(context, props)()\n})\n\ninterface FileInputTagProps extends HTMLStyledProps {}\n\nconst FileInputTag = withContext<\"span\", FileInputTagProps>(\"span\", \"tag\")()\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,iBAAyD,EAAE,WAAW;AAgC5E,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,aACA,iBACEA,yBAAAA,oBACF,cACAC,yBAAAA,cACF;;;;;;AASA,MAAa,YAAY,cACtB,EACC,UACA,WACA,kBACA,kBACA,SAAS,eACT,aACA,YAAY,KACZ,GAAG,YACC;CACJ,MAAM,WAAWC,yBAAAA,eAAe;EAAE;EAAkB;CAAiB,CAAC;CACtE,MAAM,EAAE,QAAQ,eAAe,kBAAkBC,uBAAAA,aAAa,
|
|
1
|
+
{"version":3,"file":"file-input.cjs","names":["createSlotComponent","fileInputStyle","useInputBorder","useFileInput","useMemo","styled","isValidElement","cloneElement","Portal","useInputPropsContext","mergeProps"],"sources":["../../../../src/components/file-input/file-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { FileInputStyle } from \"./file-input.style\"\nimport type { UseFileInputProps } from \"./use-file-input\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport { useInputBorder, useInputPropsContext } from \"../input\"\nimport { Portal } from \"../portal\"\nimport { fileInputStyle } from \"./file-input.style\"\nimport { useFileInput } from \"./use-file-input\"\n\nconst defaultFormat: (value: File, index: number) => string = ({ name }) => name\n\nexport interface FileInputProps\n extends\n Omit<\n HTMLStyledProps<\"input\">,\n \"children\" | \"defaultValue\" | \"onChange\" | \"value\"\n >,\n ThemeProps<FileInputStyle>,\n UseInputBorderProps,\n FieldProps,\n Omit<UseFileInputProps, \"children\"> {\n /**\n * The string to separate uploaded files.\n *\n * @default ','\n */\n separator?: string\n /**\n * A callback that returns a React node.\n */\n children?: (files: File[] | undefined) => ReactNode\n /**\n * The component that displays uploaded files.\n */\n component?: (props: { index: number; value: File }) => ReactNode\n /**\n * A callback that formats the name of the uploaded file.\n */\n format?: (value: File, index: number) => string\n}\n\nconst {\n PropsContext: FileInputPropsContext,\n usePropsContext: useFileInputPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<FileInputProps, FileInputStyle>(\n \"file-input\",\n fileInputStyle,\n)\n\nexport { FileInputPropsContext, useFileInputPropsContext }\n\n/**\n * `FileInput` is a component used for users to select files.\n *\n * @see https://yamada-ui.com/docs/components/file-input\n */\nexport const FileInput = withProvider<\"input\", FileInputProps>(\n ({\n children,\n component,\n errorBorderColor,\n focusBorderColor,\n format = defaultFormat,\n placeholder,\n separator = \",\",\n ...props\n }) => {\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const { values, getFieldProps, getInputProps } = useFileInput({\n placeholder,\n ...props,\n })\n\n const cloneChildren = useMemo(() => {\n if (!values?.length)\n return (\n <styled.span overflow=\"hidden\" whiteSpace=\"nowrap\">\n {placeholder}\n </styled.span>\n )\n\n if (children) return children(values)\n\n return values.map((value, index) => {\n const last = values.length === index + 1\n\n if (component) {\n const node = component({ index, value })\n\n if (isValidElement(node)) return cloneElement(node, { key: index })\n else return node\n } else {\n return (\n <FileInputTag key={index}>\n {format(value, index)}\n {!last ? separator : null}\n </FileInputTag>\n )\n }\n })\n }, [children, format, placeholder, separator, component, values])\n\n return (\n <>\n <Portal>\n <styled.input {...getInputProps()} />\n </Portal>\n\n <styled.div {...varProps} {...getFieldProps()}>\n {cloneChildren}\n </styled.div>\n </>\n )\n },\n \"root\",\n)((props) => {\n const context = useInputPropsContext()\n\n return mergeProps(context, props)()\n})\n\ninterface FileInputTagProps extends HTMLStyledProps {}\n\nconst FileInputTag = withContext<\"span\", FileInputTagProps>(\"span\", \"tag\")()\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,iBAAyD,EAAE,WAAW;AAgC5E,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,aACA,iBACEA,yBAAAA,oBACF,cACAC,yBAAAA,cACF;;;;;;AASA,MAAa,YAAY,cACtB,EACC,UACA,WACA,kBACA,kBACA,SAAS,eACT,aACA,YAAY,KACZ,GAAG,YACC;CACJ,MAAM,WAAWC,yBAAAA,eAAe;EAAE;EAAkB;CAAiB,CAAC;CACtE,MAAM,EAAE,QAAQ,eAAe,kBAAkBC,uBAAAA,aAAa;EAC5D;EACA,GAAG;CACL,CAAC;CAED,MAAM,iBAAA,GAAgBC,MAAAA,QAAAA,OAAc;EAClC,IAAI,CAAC,QAAQ,QACX,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,MAAR;GAAa,UAAS;GAAS,YAAW;GACvC,UAAA;EACU,CAAA;EAGjB,IAAI,UAAU,OAAO,SAAS,MAAM;EAEpC,OAAO,OAAO,KAAK,OAAO,UAAU;GAClC,MAAM,OAAO,OAAO,WAAW,QAAQ;GAEvC,IAAI,WAAW;IACb,MAAM,OAAO,UAAU;KAAE;KAAO;IAAM,CAAC;IAEvC,KAAA,GAAIC,MAAAA,eAAAA,CAAe,IAAI,GAAG,QAAA,GAAOC,MAAAA,aAAAA,CAAa,MAAM,EAAE,KAAK,MAAM,CAAC;SAC7D,OAAO;GACd,OACE,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,cAAD,EAAA,UAAA,CACG,OAAO,OAAO,KAAK,GACnB,CAAC,OAAO,YAAY,IACT,EAAA,GAHK,KAGL;EAGpB,CAAC;CACH,GAAG;EAAC;EAAU;EAAQ;EAAa;EAAW;EAAW;CAAM,CAAC;CAEhE,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,QAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAACH,gBAAAA,OAAO,OAAR,EAAc,GAAI,cAAc,EAAI,CAAA,EAC9B,CAAA,GAER,iBAAA,GAAA,kBAAA,IAAA,CAACA,gBAAAA,OAAO,KAAR;EAAY,GAAI;EAAU,GAAI,cAAc;EACzC,UAAA;CACS,CAAA,CACZ,EAAA,CAAA;AAEN,GACA,MACF,CAAC,EAAE,UAAU;CACX,MAAM,UAAUI,cAAAA,qBAAqB;CAErC,OAAOC,cAAAA,WAAW,SAAS,KAAK,CAAC,CAAC;AACpC,CAAC;AAID,MAAM,eAAe,YAAuC,QAAQ,KAAK,CAAC,CAAC"}
|
|
@@ -9,7 +9,7 @@ const require_hooks_use_clickable_index = require("../../hooks/use-clickable/ind
|
|
|
9
9
|
let react = require("react");
|
|
10
10
|
// src/components/file-input/use-file-input.ts
|
|
11
11
|
const useFileInput = (props) => {
|
|
12
|
-
const { context: { labelId } = {}, props: { id, ref, form, name,
|
|
12
|
+
const { context: { labelId } = {}, props: { id, ref, form, name, accept, defaultValue, disabled, multiple, placeholder, readOnly, required, resetRef, value, onChange: onChangeProp, onClick: onClickProp, ...rest }, ariaProps, dataProps, eventProps } = require_use_field_props.useFieldProps({
|
|
13
13
|
...props,
|
|
14
14
|
notSupportReadOnly: true
|
|
15
15
|
});
|
|
@@ -38,18 +38,18 @@ const useFileInput = (props) => {
|
|
|
38
38
|
...dataProps,
|
|
39
39
|
...eventProps,
|
|
40
40
|
...rest,
|
|
41
|
-
"aria-labelledby": (0, require_utils_index.utils_exports.cx)(ariaLabelledby, labelId),
|
|
42
41
|
disabled: !interactive,
|
|
43
42
|
focusable: readOnly && !disabled,
|
|
44
43
|
focusOnClick: interactive,
|
|
45
44
|
onClick: (0, require_utils_index.utils_exports.handlerAll)(onClickProp, onClick)
|
|
46
45
|
});
|
|
47
46
|
require_ref.assignRef(resetRef, onReset);
|
|
48
|
-
const getInputProps = (0, react.useCallback)((props = {}) => ({
|
|
47
|
+
const getInputProps = (0, react.useCallback)((props = {}) => require_props.mergeProps({
|
|
49
48
|
...require_dom.visuallyHiddenAttributes,
|
|
50
49
|
...ariaProps,
|
|
51
50
|
...dataProps,
|
|
52
51
|
id,
|
|
52
|
+
ref: inputRef,
|
|
53
53
|
form,
|
|
54
54
|
type: "file",
|
|
55
55
|
name,
|
|
@@ -57,11 +57,11 @@ const useFileInput = (props) => {
|
|
|
57
57
|
disabled,
|
|
58
58
|
multiple,
|
|
59
59
|
readOnly,
|
|
60
|
-
required
|
|
61
|
-
|
|
62
|
-
ref
|
|
63
|
-
onChange
|
|
64
|
-
}), [
|
|
60
|
+
required
|
|
61
|
+
}, props, {
|
|
62
|
+
ref,
|
|
63
|
+
onChange
|
|
64
|
+
})(), [
|
|
65
65
|
required,
|
|
66
66
|
ariaProps,
|
|
67
67
|
dataProps,
|
|
@@ -82,15 +82,22 @@ const useFileInput = (props) => {
|
|
|
82
82
|
required,
|
|
83
83
|
values,
|
|
84
84
|
clickableProps,
|
|
85
|
-
getFieldProps: (0, react.useCallback)((props = {}) =>
|
|
86
|
-
"
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
85
|
+
getFieldProps: (0, react.useCallback)((props = {}) => {
|
|
86
|
+
const hasLabel = (0, require_utils_index.utils_exports.has)(props, ["aria-label", "aria-labelledby"], { truthy: true }) || (0, require_utils_index.utils_exports.has)(clickableProps, ["aria-label", "aria-labelledby"], { truthy: true });
|
|
87
|
+
const hasPlaceholder = !!placeholder?.trim();
|
|
88
|
+
const hasValues = !!count;
|
|
89
|
+
return require_props.mergeProps({
|
|
90
|
+
"data-placeholder": (0, require_utils_index.utils_exports.dataAttr)(!count),
|
|
91
|
+
...clickableProps,
|
|
92
|
+
"aria-labelledby": clickableProps["aria-labelledby"] ?? (!hasLabel && !hasPlaceholder && !hasValues ? labelId : void 0),
|
|
93
|
+
tabIndex: interactive ? 0 : clickableProps.tabIndex
|
|
94
|
+
}, props)();
|
|
95
|
+
}, [
|
|
91
96
|
clickableProps,
|
|
92
97
|
count,
|
|
93
|
-
interactive
|
|
98
|
+
interactive,
|
|
99
|
+
labelId,
|
|
100
|
+
placeholder
|
|
94
101
|
]),
|
|
95
102
|
getInputProps
|
|
96
103
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-file-input.cjs","names":["useFieldProps","useRef","useControllableState","useCallback","useClickable","
|
|
1
|
+
{"version":3,"file":"use-file-input.cjs","names":["useFieldProps","useRef","useControllableState","useCallback","useClickable","mergeProps","visuallyHiddenAttributes"],"sources":["../../../../src/components/file-input/use-file-input.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, RefObject } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useClickable } from \"../../hooks/use-clickable\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n assignRef,\n dataAttr,\n handlerAll,\n has,\n isNull,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport type UseFileInputProps<Y extends \"button\" | \"input\" = \"input\"> =\n FieldProps &\n Omit<HTMLProps<Y>, \"defaultValue\" | \"onChange\" | \"ref\" | \"value\"> &\n Pick<HTMLProps<\"input\">, \"accept\" | \"multiple\" | \"placeholder\" | \"ref\"> & {\n /**\n * The initial value of the file input.\n */\n defaultValue?: File[]\n /**\n * Ref to a reset function.\n */\n resetRef?: RefObject<(() => void) | null>\n /**\n * The value of the file input.\n */\n value?: File[]\n /**\n * Function to be called when a file change event occurs.\n */\n onChange?: (files: File[] | undefined) => void\n }\n\nexport const useFileInput = <Y extends \"button\" | \"input\" = \"input\">(\n props: UseFileInputProps<Y>,\n) => {\n const {\n context: { labelId } = {},\n props: {\n id,\n ref,\n form,\n name,\n accept,\n defaultValue,\n disabled,\n multiple,\n placeholder,\n readOnly,\n required,\n resetRef,\n value,\n onChange: onChangeProp,\n onClick: onClickProp,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps<HTMLElement, UseFileInputProps<Y>>({\n ...props,\n notSupportReadOnly: true,\n })\n const interactive = !(readOnly || disabled)\n const inputRef = useRef<HTMLInputElement>(null)\n const [values, setValues] = useControllableState<File[] | undefined>({\n defaultValue,\n value,\n onChange: onChangeProp,\n })\n const count = values?.length ?? 0\n\n const onClick = useCallback(() => {\n if (!interactive) return\n\n inputRef.current?.click()\n }, [interactive])\n\n const onReset = useCallback(() => {\n if (inputRef.current) inputRef.current.value = \"\"\n\n setValues(undefined)\n }, [setValues])\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 setValues(files?.length ? files : undefined)\n },\n [setValues],\n )\n\n const clickableProps = useClickable<HTMLElement, Dict>({\n ...ariaProps,\n ...dataProps,\n ...eventProps,\n ...rest,\n disabled: !interactive,\n focusable: readOnly && !disabled,\n focusOnClick: interactive,\n onClick: handlerAll(onClickProp, onClick),\n })\n\n assignRef(resetRef, onReset)\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}) =>\n mergeProps(\n {\n ...visuallyHiddenAttributes,\n ...ariaProps,\n ...dataProps,\n id,\n ref: inputRef,\n form,\n type: \"file\",\n name,\n accept,\n disabled,\n multiple,\n readOnly,\n required,\n },\n props,\n { ref, onChange },\n )(),\n [\n required,\n ariaProps,\n dataProps,\n id,\n form,\n name,\n accept,\n disabled,\n multiple,\n readOnly,\n ref,\n onChange,\n ],\n )\n\n const getFieldProps: PropGetter = useCallback(\n (props = {}) => {\n const hasLabel =\n has(props, [\"aria-label\", \"aria-labelledby\"], { truthy: true }) ||\n has(clickableProps, [\"aria-label\", \"aria-labelledby\"], { truthy: true })\n const hasPlaceholder = !!placeholder?.trim()\n const hasValues = !!count\n\n return mergeProps(\n {\n \"data-placeholder\": dataAttr(!count),\n ...clickableProps,\n \"aria-labelledby\":\n clickableProps[\"aria-labelledby\"] ??\n (!hasLabel && !hasPlaceholder && !hasValues ? labelId : undefined),\n tabIndex: interactive ? 0 : clickableProps.tabIndex,\n },\n props,\n )()\n },\n [clickableProps, count, interactive, labelId, placeholder],\n )\n\n return {\n disabled,\n interactive,\n readOnly,\n required,\n values,\n clickableProps,\n getFieldProps,\n getInputProps,\n }\n}\n\nexport type UseFileInputReturn = ReturnType<typeof useFileInput>\n"],"mappings":";;;;;;;;;;AA0CA,MAAa,gBACX,UACG;CACH,MAAM,EACJ,SAAS,EAAE,YAAY,CAAC,GACxB,OAAO,EACL,IACA,KACA,MACA,MACA,QACA,cACA,UACA,UACA,aACA,UACA,UACA,UACA,OACA,UAAU,cACV,SAAS,aACT,GAAG,QAEL,WACA,WACA,eACEA,wBAAAA,cAAiD;EACnD,GAAG;EACH,oBAAoB;CACtB,CAAC;CACD,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,YAAA,GAAWC,MAAAA,OAAAA,CAAyB,IAAI;CAC9C,MAAM,CAAC,QAAQ,aAAaC,2CAAAA,qBAAyC;EACnE;EACA;EACA,UAAU;CACZ,CAAC;CACD,MAAM,QAAQ,QAAQ,UAAU;CAEhC,MAAM,WAAA,GAAUC,MAAAA,YAAAA,OAAkB;EAChC,IAAI,CAAC,aAAa;EAElB,SAAS,SAAS,MAAM;CAC1B,GAAG,CAAC,WAAW,CAAC;CAEhB,MAAM,WAAA,GAAUA,MAAAA,YAAAA,OAAkB;EAChC,IAAI,SAAS,SAAS,SAAS,QAAQ,QAAQ;EAE/C,UAAU,KAAA,CAAS;CACrB,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,YAAA,GAAWA,MAAAA,YAAAA,EACd,OAAsC;EACrC,MAAM,QAAQ,EAAA,GAAA,oBAAA,cAAC,OAAA,CAAO,GAAG,cAAc,KAAK,IACxC,MAAM,KAAK,GAAG,cAAc,KAAK,IACjC,KAAA;EAEJ,UAAU,OAAO,SAAS,QAAQ,KAAA,CAAS;CAC7C,GACA,CAAC,SAAS,CACZ;CAEA,MAAM,iBAAiBC,kCAAAA,aAAgC;EACrD,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,UAAU,CAAC;EACX,WAAW,YAAY,CAAC;EACxB,cAAc;EACd,UAAA,GAAA,oBAAA,cAAS,WAAA,CAAW,aAAa,OAAO;CAC1C,CAAC;CAED,YAAA,UAAU,UAAU,OAAO;CAE3B,MAAM,iBAAA,GAAqCD,MAAAA,YAAAA,EACxC,QAAQ,CAAC,MACRE,cAAAA,WACE;EACE,GAAGC,YAAAA;EACH,GAAG;EACH,GAAG;EACH;EACA,KAAK;EACL;EACA,MAAM;EACN;EACA;EACA;EACA;EACA;EACA;CACF,GACA,OACA;EAAE;EAAK;CAAS,CAClB,CAAC,CAAC,GACJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAyBA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA,gBAAA,GA9BgCH,MAAAA,YAAAA,EAC/B,QAAQ,CAAC,MAAM;GACd,MAAM,YAAA,GAAA,oBAAA,cACJ,IAAA,CAAI,OAAO,CAAC,cAAc,iBAAiB,GAAG,EAAE,QAAQ,KAAK,CAAC,MAAA,GAAA,oBAAA,cAC9D,IAAA,CAAI,gBAAgB,CAAC,cAAc,iBAAiB,GAAG,EAAE,QAAQ,KAAK,CAAC;GACzE,MAAM,iBAAiB,CAAC,CAAC,aAAa,KAAK;GAC3C,MAAM,YAAY,CAAC,CAAC;GAEpB,OAAOE,cAAAA,WACL;IACE,qBAAA,GAAA,oBAAA,cAAoB,SAAA,CAAS,CAAC,KAAK;IACnC,GAAG;IACH,mBACE,eAAe,uBACd,CAAC,YAAY,CAAC,kBAAkB,CAAC,YAAY,UAAU,KAAA;IAC1D,UAAU,cAAc,IAAI,eAAe;GAC7C,GACA,KACF,CAAC,CAAC;EACJ,GACA;GAAC;GAAgB;GAAO;GAAa;GAAS;EAAW,CAU7C;EACZ;CACF;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","names":[],"sources":["../../../src/utils/index.ts"],"sourcesContent":["export * from \"./children\"\nexport * from \"./context\"\nexport * from \"./dom\"\nexport * from \"./effect\"\nexport type * from \"./index.type\"\nexport * from \"./ref\"\nexport * from \"./ssr\"\nexport * from \"./store\"\nexport * from \"@yamada-ui/utils\"\nexport type {\n AnyPointerEvent,\n AnyString,\n Booleanish,\n ColorFormat,\n DeepMerge,\n DeepPartial,\n Dict,\n EventType,\n FlattenObjectOptions,\n FunctionOf,\n FunctionOrValue,\n Length,\n Merge,\n MergeOptions,\n Path,\n Point,\n Prettify,\n Primitive,\n Value,\n} from \"@yamada-ui/utils\"\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"index.cjs","names":[],"sources":["../../../src/utils/index.ts"],"sourcesContent":["export * from \"./children\"\nexport * from \"./context\"\nexport * from \"./dom\"\nexport * from \"./effect\"\nexport type * from \"./index.type\"\nexport * from \"./ref\"\nexport * from \"./ssr\"\nexport * from \"./store\"\nexport * from \"@yamada-ui/utils\"\nexport type {\n AnyPointerEvent,\n AnyString,\n Booleanish,\n ColorFormat,\n DeepMerge,\n DeepPartial,\n Dict,\n EventType,\n FlattenObjectOptions,\n FunctionOf,\n FunctionOrValue,\n HasOptions,\n Length,\n Merge,\n MergeOptions,\n Path,\n Point,\n Prettify,\n Primitive,\n Value,\n} from \"@yamada-ui/utils\"\n"],"mappings":""}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { mergeProps } from "../../core/components/props.js";
|
|
2
3
|
import { useFileInput } from "../file-input/use-file-input.js";
|
|
3
4
|
import { useCallback } from "react";
|
|
4
5
|
// src/components/file-button/use-file-button.ts
|
|
@@ -6,10 +7,7 @@ const useFileButton = (props = {}) => {
|
|
|
6
7
|
const { clickableProps, getInputProps } = useFileInput(props);
|
|
7
8
|
return {
|
|
8
9
|
clickableProps,
|
|
9
|
-
getButtonProps: useCallback((props) => (
|
|
10
|
-
...clickableProps,
|
|
11
|
-
...props
|
|
12
|
-
}), [clickableProps]),
|
|
10
|
+
getButtonProps: useCallback((props = {}) => mergeProps(clickableProps, props)(), [clickableProps]),
|
|
13
11
|
getInputProps
|
|
14
12
|
};
|
|
15
13
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-file-button.js","names":[],"sources":["../../../../src/components/file-button/use-file-button.ts"],"sourcesContent":["\"use client\"\n\nimport type { PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { UseFileInputProps } from \"../file-input\"\nimport { useCallback } from \"react\"\nimport { useFileInput } from \"../file-input\"\n\nexport interface UseFileButtonProps\n extends UseFileInputProps<\"button\">, FieldProps {}\n\nexport const useFileButton = (props: UseFileButtonProps = {}) => {\n const { clickableProps, getInputProps } = useFileInput<\"button\">(props)\n\n const getButtonProps: PropGetter<\"button\"> = useCallback(\n (props) => (
|
|
1
|
+
{"version":3,"file":"use-file-button.js","names":[],"sources":["../../../../src/components/file-button/use-file-button.ts"],"sourcesContent":["\"use client\"\n\nimport type { PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { UseFileInputProps } from \"../file-input\"\nimport { useCallback } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useFileInput } from \"../file-input\"\n\nexport interface UseFileButtonProps\n extends UseFileInputProps<\"button\">, FieldProps {}\n\nexport const useFileButton = (props: UseFileButtonProps = {}) => {\n const { clickableProps, getInputProps } = useFileInput<\"button\">(props)\n\n const getButtonProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => mergeProps(clickableProps, props)(),\n [clickableProps],\n )\n\n return {\n clickableProps,\n getButtonProps,\n getInputProps,\n }\n}\n\nexport type UseFileButtonReturn = ReturnType<typeof useFileButton>\n"],"mappings":";;;;;AAYA,MAAa,iBAAiB,QAA4B,CAAC,MAAM;CAC/D,MAAM,EAAE,gBAAgB,kBAAkB,aAAuB,KAAK;CAOtE,OAAO;EACL;EACA,gBAP2C,aAC1C,QAAQ,CAAC,MAAM,WAAW,gBAAgB,KAAK,CAAC,CAAC,GAClD,CAAC,cAAc,CAKF;EACb;CACF;AACF"}
|
|
@@ -22,7 +22,10 @@ const FileInput = withProvider(({ children, component, errorBorderColor, focusBo
|
|
|
22
22
|
errorBorderColor,
|
|
23
23
|
focusBorderColor
|
|
24
24
|
});
|
|
25
|
-
const { values, getFieldProps, getInputProps } = useFileInput(
|
|
25
|
+
const { values, getFieldProps, getInputProps } = useFileInput({
|
|
26
|
+
placeholder,
|
|
27
|
+
...props
|
|
28
|
+
});
|
|
26
29
|
const cloneChildren = useMemo(() => {
|
|
27
30
|
if (!values?.length) return /* @__PURE__ */ jsx(styled.span, {
|
|
28
31
|
overflow: "hidden",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"file-input.js","names":[],"sources":["../../../../src/components/file-input/file-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { FileInputStyle } from \"./file-input.style\"\nimport type { UseFileInputProps } from \"./use-file-input\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport { useInputBorder, useInputPropsContext } from \"../input\"\nimport { Portal } from \"../portal\"\nimport { fileInputStyle } from \"./file-input.style\"\nimport { useFileInput } from \"./use-file-input\"\n\nconst defaultFormat: (value: File, index: number) => string = ({ name }) => name\n\nexport interface FileInputProps\n extends\n Omit<\n HTMLStyledProps<\"input\">,\n \"children\" | \"defaultValue\" | \"onChange\" | \"value\"\n >,\n ThemeProps<FileInputStyle>,\n UseInputBorderProps,\n FieldProps,\n Omit<UseFileInputProps, \"children\"> {\n /**\n * The string to separate uploaded files.\n *\n * @default ','\n */\n separator?: string\n /**\n * A callback that returns a React node.\n */\n children?: (files: File[] | undefined) => ReactNode\n /**\n * The component that displays uploaded files.\n */\n component?: (props: { index: number; value: File }) => ReactNode\n /**\n * A callback that formats the name of the uploaded file.\n */\n format?: (value: File, index: number) => string\n}\n\nconst {\n PropsContext: FileInputPropsContext,\n usePropsContext: useFileInputPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<FileInputProps, FileInputStyle>(\n \"file-input\",\n fileInputStyle,\n)\n\nexport { FileInputPropsContext, useFileInputPropsContext }\n\n/**\n * `FileInput` is a component used for users to select files.\n *\n * @see https://yamada-ui.com/docs/components/file-input\n */\nexport const FileInput = withProvider<\"input\", FileInputProps>(\n ({\n children,\n component,\n errorBorderColor,\n focusBorderColor,\n format = defaultFormat,\n placeholder,\n separator = \",\",\n ...props\n }) => {\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const { values, getFieldProps, getInputProps } = useFileInput(props)\n\n const cloneChildren = useMemo(() => {\n if (!values?.length)\n return (\n <styled.span overflow=\"hidden\" whiteSpace=\"nowrap\">\n {placeholder}\n </styled.span>\n )\n\n if (children) return children(values)\n\n return values.map((value, index) => {\n const last = values.length === index + 1\n\n if (component) {\n const node = component({ index, value })\n\n if (isValidElement(node)) return cloneElement(node, { key: index })\n else return node\n } else {\n return (\n <FileInputTag key={index}>\n {format(value, index)}\n {!last ? separator : null}\n </FileInputTag>\n )\n }\n })\n }, [children, format, placeholder, separator, component, values])\n\n return (\n <>\n <Portal>\n <styled.input {...getInputProps()} />\n </Portal>\n\n <styled.div {...varProps} {...getFieldProps()}>\n {cloneChildren}\n </styled.div>\n </>\n )\n },\n \"root\",\n)((props) => {\n const context = useInputPropsContext()\n\n return mergeProps(context, props)()\n})\n\ninterface FileInputTagProps extends HTMLStyledProps {}\n\nconst FileInputTag = withContext<\"span\", FileInputTagProps>(\"span\", \"tag\")()\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,iBAAyD,EAAE,WAAW;AAgC5E,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,aACA,iBACE,oBACF,cACA,cACF;;;;;;AASA,MAAa,YAAY,cACtB,EACC,UACA,WACA,kBACA,kBACA,SAAS,eACT,aACA,YAAY,KACZ,GAAG,YACC;CACJ,MAAM,WAAW,eAAe;EAAE;EAAkB;CAAiB,CAAC;CACtE,MAAM,EAAE,QAAQ,eAAe,kBAAkB,aAAa,
|
|
1
|
+
{"version":3,"file":"file-input.js","names":[],"sources":["../../../../src/components/file-input/file-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { FileInputStyle } from \"./file-input.style\"\nimport type { UseFileInputProps } from \"./use-file-input\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport { useInputBorder, useInputPropsContext } from \"../input\"\nimport { Portal } from \"../portal\"\nimport { fileInputStyle } from \"./file-input.style\"\nimport { useFileInput } from \"./use-file-input\"\n\nconst defaultFormat: (value: File, index: number) => string = ({ name }) => name\n\nexport interface FileInputProps\n extends\n Omit<\n HTMLStyledProps<\"input\">,\n \"children\" | \"defaultValue\" | \"onChange\" | \"value\"\n >,\n ThemeProps<FileInputStyle>,\n UseInputBorderProps,\n FieldProps,\n Omit<UseFileInputProps, \"children\"> {\n /**\n * The string to separate uploaded files.\n *\n * @default ','\n */\n separator?: string\n /**\n * A callback that returns a React node.\n */\n children?: (files: File[] | undefined) => ReactNode\n /**\n * The component that displays uploaded files.\n */\n component?: (props: { index: number; value: File }) => ReactNode\n /**\n * A callback that formats the name of the uploaded file.\n */\n format?: (value: File, index: number) => string\n}\n\nconst {\n PropsContext: FileInputPropsContext,\n usePropsContext: useFileInputPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<FileInputProps, FileInputStyle>(\n \"file-input\",\n fileInputStyle,\n)\n\nexport { FileInputPropsContext, useFileInputPropsContext }\n\n/**\n * `FileInput` is a component used for users to select files.\n *\n * @see https://yamada-ui.com/docs/components/file-input\n */\nexport const FileInput = withProvider<\"input\", FileInputProps>(\n ({\n children,\n component,\n errorBorderColor,\n focusBorderColor,\n format = defaultFormat,\n placeholder,\n separator = \",\",\n ...props\n }) => {\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const { values, getFieldProps, getInputProps } = useFileInput({\n placeholder,\n ...props,\n })\n\n const cloneChildren = useMemo(() => {\n if (!values?.length)\n return (\n <styled.span overflow=\"hidden\" whiteSpace=\"nowrap\">\n {placeholder}\n </styled.span>\n )\n\n if (children) return children(values)\n\n return values.map((value, index) => {\n const last = values.length === index + 1\n\n if (component) {\n const node = component({ index, value })\n\n if (isValidElement(node)) return cloneElement(node, { key: index })\n else return node\n } else {\n return (\n <FileInputTag key={index}>\n {format(value, index)}\n {!last ? separator : null}\n </FileInputTag>\n )\n }\n })\n }, [children, format, placeholder, separator, component, values])\n\n return (\n <>\n <Portal>\n <styled.input {...getInputProps()} />\n </Portal>\n\n <styled.div {...varProps} {...getFieldProps()}>\n {cloneChildren}\n </styled.div>\n </>\n )\n },\n \"root\",\n)((props) => {\n const context = useInputPropsContext()\n\n return mergeProps(context, props)()\n})\n\ninterface FileInputTagProps extends HTMLStyledProps {}\n\nconst FileInputTag = withContext<\"span\", FileInputTagProps>(\"span\", \"tag\")()\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,iBAAyD,EAAE,WAAW;AAgC5E,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,aACA,iBACE,oBACF,cACA,cACF;;;;;;AASA,MAAa,YAAY,cACtB,EACC,UACA,WACA,kBACA,kBACA,SAAS,eACT,aACA,YAAY,KACZ,GAAG,YACC;CACJ,MAAM,WAAW,eAAe;EAAE;EAAkB;CAAiB,CAAC;CACtE,MAAM,EAAE,QAAQ,eAAe,kBAAkB,aAAa;EAC5D;EACA,GAAG;CACL,CAAC;CAED,MAAM,gBAAgB,cAAc;EAClC,IAAI,CAAC,QAAQ,QACX,OACE,oBAAC,OAAO,MAAR;GAAa,UAAS;GAAS,YAAW;GACvC,UAAA;EACU,CAAA;EAGjB,IAAI,UAAU,OAAO,SAAS,MAAM;EAEpC,OAAO,OAAO,KAAK,OAAO,UAAU;GAClC,MAAM,OAAO,OAAO,WAAW,QAAQ;GAEvC,IAAI,WAAW;IACb,MAAM,OAAO,UAAU;KAAE;KAAO;IAAM,CAAC;IAEvC,IAAI,eAAe,IAAI,GAAG,OAAO,aAAa,MAAM,EAAE,KAAK,MAAM,CAAC;SAC7D,OAAO;GACd,OACE,OACE,qBAAC,cAAD,EAAA,UAAA,CACG,OAAO,OAAO,KAAK,GACnB,CAAC,OAAO,YAAY,IACT,EAAA,GAHK,KAGL;EAGpB,CAAC;CACH,GAAG;EAAC;EAAU;EAAQ;EAAa;EAAW;EAAW;CAAM,CAAC;CAEhE,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UACE,oBAAC,OAAO,OAAR,EAAc,GAAI,cAAc,EAAI,CAAA,EAC9B,CAAA,GAER,oBAAC,OAAO,KAAR;EAAY,GAAI;EAAU,GAAI,cAAc;EACzC,UAAA;CACS,CAAA,CACZ,EAAA,CAAA;AAEN,GACA,MACF,CAAC,EAAE,UAAU;CACX,MAAM,UAAU,qBAAqB;CAErC,OAAO,WAAW,SAAS,KAAK,CAAC,CAAC;AACpC,CAAC;AAID,MAAM,eAAe,YAAuC,QAAQ,KAAK,CAAC,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { visuallyHiddenAttributes } from "../../utils/dom.js";
|
|
3
|
-
import { assignRef
|
|
3
|
+
import { assignRef } from "../../utils/ref.js";
|
|
4
4
|
import { utils_exports } from "../../utils/index.js";
|
|
5
5
|
import { mergeProps } from "../../core/components/props.js";
|
|
6
6
|
import { useControllableState } from "../../hooks/use-controllable-state/index.js";
|
|
@@ -9,7 +9,7 @@ import { useClickable } from "../../hooks/use-clickable/index.js";
|
|
|
9
9
|
import { useCallback, useRef } from "react";
|
|
10
10
|
// src/components/file-input/use-file-input.ts
|
|
11
11
|
const useFileInput = (props) => {
|
|
12
|
-
const { context: { labelId } = {}, props: { id, ref, form, name,
|
|
12
|
+
const { context: { labelId } = {}, props: { id, ref, form, name, accept, defaultValue, disabled, multiple, placeholder, readOnly, required, resetRef, value, onChange: onChangeProp, onClick: onClickProp, ...rest }, ariaProps, dataProps, eventProps } = useFieldProps({
|
|
13
13
|
...props,
|
|
14
14
|
notSupportReadOnly: true
|
|
15
15
|
});
|
|
@@ -38,18 +38,18 @@ const useFileInput = (props) => {
|
|
|
38
38
|
...dataProps,
|
|
39
39
|
...eventProps,
|
|
40
40
|
...rest,
|
|
41
|
-
"aria-labelledby": (0, utils_exports.cx)(ariaLabelledby, labelId),
|
|
42
41
|
disabled: !interactive,
|
|
43
42
|
focusable: readOnly && !disabled,
|
|
44
43
|
focusOnClick: interactive,
|
|
45
44
|
onClick: (0, utils_exports.handlerAll)(onClickProp, onClick)
|
|
46
45
|
});
|
|
47
46
|
assignRef(resetRef, onReset);
|
|
48
|
-
const getInputProps = useCallback((props = {}) => ({
|
|
47
|
+
const getInputProps = useCallback((props = {}) => mergeProps({
|
|
49
48
|
...visuallyHiddenAttributes,
|
|
50
49
|
...ariaProps,
|
|
51
50
|
...dataProps,
|
|
52
51
|
id,
|
|
52
|
+
ref: inputRef,
|
|
53
53
|
form,
|
|
54
54
|
type: "file",
|
|
55
55
|
name,
|
|
@@ -57,11 +57,11 @@ const useFileInput = (props) => {
|
|
|
57
57
|
disabled,
|
|
58
58
|
multiple,
|
|
59
59
|
readOnly,
|
|
60
|
-
required
|
|
61
|
-
|
|
62
|
-
ref
|
|
63
|
-
onChange
|
|
64
|
-
}), [
|
|
60
|
+
required
|
|
61
|
+
}, props, {
|
|
62
|
+
ref,
|
|
63
|
+
onChange
|
|
64
|
+
})(), [
|
|
65
65
|
required,
|
|
66
66
|
ariaProps,
|
|
67
67
|
dataProps,
|
|
@@ -82,15 +82,22 @@ const useFileInput = (props) => {
|
|
|
82
82
|
required,
|
|
83
83
|
values,
|
|
84
84
|
clickableProps,
|
|
85
|
-
getFieldProps: useCallback((props = {}) =>
|
|
86
|
-
"
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
85
|
+
getFieldProps: useCallback((props = {}) => {
|
|
86
|
+
const hasLabel = (0, utils_exports.has)(props, ["aria-label", "aria-labelledby"], { truthy: true }) || (0, utils_exports.has)(clickableProps, ["aria-label", "aria-labelledby"], { truthy: true });
|
|
87
|
+
const hasPlaceholder = !!placeholder?.trim();
|
|
88
|
+
const hasValues = !!count;
|
|
89
|
+
return mergeProps({
|
|
90
|
+
"data-placeholder": (0, utils_exports.dataAttr)(!count),
|
|
91
|
+
...clickableProps,
|
|
92
|
+
"aria-labelledby": clickableProps["aria-labelledby"] ?? (!hasLabel && !hasPlaceholder && !hasValues ? labelId : void 0),
|
|
93
|
+
tabIndex: interactive ? 0 : clickableProps.tabIndex
|
|
94
|
+
}, props)();
|
|
95
|
+
}, [
|
|
91
96
|
clickableProps,
|
|
92
97
|
count,
|
|
93
|
-
interactive
|
|
98
|
+
interactive,
|
|
99
|
+
labelId,
|
|
100
|
+
placeholder
|
|
94
101
|
]),
|
|
95
102
|
getInputProps
|
|
96
103
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-file-input.js","names":["isNull","
|
|
1
|
+
{"version":3,"file":"use-file-input.js","names":["isNull","handlerAll","has","dataAttr"],"sources":["../../../../src/components/file-input/use-file-input.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, RefObject } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useClickable } from \"../../hooks/use-clickable\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n assignRef,\n dataAttr,\n handlerAll,\n has,\n isNull,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport type UseFileInputProps<Y extends \"button\" | \"input\" = \"input\"> =\n FieldProps &\n Omit<HTMLProps<Y>, \"defaultValue\" | \"onChange\" | \"ref\" | \"value\"> &\n Pick<HTMLProps<\"input\">, \"accept\" | \"multiple\" | \"placeholder\" | \"ref\"> & {\n /**\n * The initial value of the file input.\n */\n defaultValue?: File[]\n /**\n * Ref to a reset function.\n */\n resetRef?: RefObject<(() => void) | null>\n /**\n * The value of the file input.\n */\n value?: File[]\n /**\n * Function to be called when a file change event occurs.\n */\n onChange?: (files: File[] | undefined) => void\n }\n\nexport const useFileInput = <Y extends \"button\" | \"input\" = \"input\">(\n props: UseFileInputProps<Y>,\n) => {\n const {\n context: { labelId } = {},\n props: {\n id,\n ref,\n form,\n name,\n accept,\n defaultValue,\n disabled,\n multiple,\n placeholder,\n readOnly,\n required,\n resetRef,\n value,\n onChange: onChangeProp,\n onClick: onClickProp,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps<HTMLElement, UseFileInputProps<Y>>({\n ...props,\n notSupportReadOnly: true,\n })\n const interactive = !(readOnly || disabled)\n const inputRef = useRef<HTMLInputElement>(null)\n const [values, setValues] = useControllableState<File[] | undefined>({\n defaultValue,\n value,\n onChange: onChangeProp,\n })\n const count = values?.length ?? 0\n\n const onClick = useCallback(() => {\n if (!interactive) return\n\n inputRef.current?.click()\n }, [interactive])\n\n const onReset = useCallback(() => {\n if (inputRef.current) inputRef.current.value = \"\"\n\n setValues(undefined)\n }, [setValues])\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 setValues(files?.length ? files : undefined)\n },\n [setValues],\n )\n\n const clickableProps = useClickable<HTMLElement, Dict>({\n ...ariaProps,\n ...dataProps,\n ...eventProps,\n ...rest,\n disabled: !interactive,\n focusable: readOnly && !disabled,\n focusOnClick: interactive,\n onClick: handlerAll(onClickProp, onClick),\n })\n\n assignRef(resetRef, onReset)\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}) =>\n mergeProps(\n {\n ...visuallyHiddenAttributes,\n ...ariaProps,\n ...dataProps,\n id,\n ref: inputRef,\n form,\n type: \"file\",\n name,\n accept,\n disabled,\n multiple,\n readOnly,\n required,\n },\n props,\n { ref, onChange },\n )(),\n [\n required,\n ariaProps,\n dataProps,\n id,\n form,\n name,\n accept,\n disabled,\n multiple,\n readOnly,\n ref,\n onChange,\n ],\n )\n\n const getFieldProps: PropGetter = useCallback(\n (props = {}) => {\n const hasLabel =\n has(props, [\"aria-label\", \"aria-labelledby\"], { truthy: true }) ||\n has(clickableProps, [\"aria-label\", \"aria-labelledby\"], { truthy: true })\n const hasPlaceholder = !!placeholder?.trim()\n const hasValues = !!count\n\n return mergeProps(\n {\n \"data-placeholder\": dataAttr(!count),\n ...clickableProps,\n \"aria-labelledby\":\n clickableProps[\"aria-labelledby\"] ??\n (!hasLabel && !hasPlaceholder && !hasValues ? labelId : undefined),\n tabIndex: interactive ? 0 : clickableProps.tabIndex,\n },\n props,\n )()\n },\n [clickableProps, count, interactive, labelId, placeholder],\n )\n\n return {\n disabled,\n interactive,\n readOnly,\n required,\n values,\n clickableProps,\n getFieldProps,\n getInputProps,\n }\n}\n\nexport type UseFileInputReturn = ReturnType<typeof useFileInput>\n"],"mappings":";;;;;;;;;;AA0CA,MAAa,gBACX,UACG;CACH,MAAM,EACJ,SAAS,EAAE,YAAY,CAAC,GACxB,OAAO,EACL,IACA,KACA,MACA,MACA,QACA,cACA,UACA,UACA,aACA,UACA,UACA,UACA,OACA,UAAU,cACV,SAAS,aACT,GAAG,QAEL,WACA,WACA,eACE,cAAiD;EACnD,GAAG;EACH,oBAAoB;CACtB,CAAC;CACD,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,CAAC,QAAQ,aAAa,qBAAyC;EACnE;EACA;EACA,UAAU;CACZ,CAAC;CACD,MAAM,QAAQ,QAAQ,UAAU;CAEhC,MAAM,UAAU,kBAAkB;EAChC,IAAI,CAAC,aAAa;EAElB,SAAS,SAAS,MAAM;CAC1B,GAAG,CAAC,WAAW,CAAC;CAEhB,MAAM,UAAU,kBAAkB;EAChC,IAAI,SAAS,SAAS,SAAS,QAAQ,QAAQ;EAE/C,UAAU,KAAA,CAAS;CACrB,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,WAAW,aACd,OAAsC;EACrC,MAAM,QAAQ,EAAA,GAACA,cAAAA,OAAAA,CAAO,GAAG,cAAc,KAAK,IACxC,MAAM,KAAK,GAAG,cAAc,KAAK,IACjC,KAAA;EAEJ,UAAU,OAAO,SAAS,QAAQ,KAAA,CAAS;CAC7C,GACA,CAAC,SAAS,CACZ;CAEA,MAAM,iBAAiB,aAAgC;EACrD,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,UAAU,CAAC;EACX,WAAW,YAAY,CAAC;EACxB,cAAc;EACd,UAAA,GAASC,cAAAA,WAAAA,CAAW,aAAa,OAAO;CAC1C,CAAC;CAED,UAAU,UAAU,OAAO;CAE3B,MAAM,gBAAqC,aACxC,QAAQ,CAAC,MACR,WACE;EACE,GAAG;EACH,GAAG;EACH,GAAG;EACH;EACA,KAAK;EACL;EACA,MAAM;EACN;EACA;EACA;EACA;EACA;EACA;CACF,GACA,OACA;EAAE;EAAK;CAAS,CAClB,CAAC,CAAC,GACJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAyBA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA,eA9BgC,aAC/B,QAAQ,CAAC,MAAM;GACd,MAAM,YAAA,GACJC,cAAAA,IAAAA,CAAI,OAAO,CAAC,cAAc,iBAAiB,GAAG,EAAE,QAAQ,KAAK,CAAC,MAAA,GAC9DA,cAAAA,IAAAA,CAAI,gBAAgB,CAAC,cAAc,iBAAiB,GAAG,EAAE,QAAQ,KAAK,CAAC;GACzE,MAAM,iBAAiB,CAAC,CAAC,aAAa,KAAK;GAC3C,MAAM,YAAY,CAAC,CAAC;GAEpB,OAAO,WACL;IACE,qBAAA,GAAoBC,cAAAA,SAAAA,CAAS,CAAC,KAAK;IACnC,GAAG;IACH,mBACE,eAAe,uBACd,CAAC,YAAY,CAAC,kBAAkB,CAAC,YAAY,UAAU,KAAA;IAC1D,UAAU,cAAc,IAAI,eAAe;GAC7C,GACA,KACF,CAAC,CAAC;EACJ,GACA;GAAC;GAAgB;GAAO;GAAa;GAAS;EAAW,CAU7C;EACZ;CACF;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/utils/index.ts"],"sourcesContent":["export * from \"./children\"\nexport * from \"./context\"\nexport * from \"./dom\"\nexport * from \"./effect\"\nexport type * from \"./index.type\"\nexport * from \"./ref\"\nexport * from \"./ssr\"\nexport * from \"./store\"\nexport * from \"@yamada-ui/utils\"\nexport type {\n AnyPointerEvent,\n AnyString,\n Booleanish,\n ColorFormat,\n DeepMerge,\n DeepPartial,\n Dict,\n EventType,\n FlattenObjectOptions,\n FunctionOf,\n FunctionOrValue,\n Length,\n Merge,\n MergeOptions,\n Path,\n Point,\n Prettify,\n Primitive,\n Value,\n} from \"@yamada-ui/utils\"\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/utils/index.ts"],"sourcesContent":["export * from \"./children\"\nexport * from \"./context\"\nexport * from \"./dom\"\nexport * from \"./effect\"\nexport type * from \"./index.type\"\nexport * from \"./ref\"\nexport * from \"./ssr\"\nexport * from \"./store\"\nexport * from \"@yamada-ui/utils\"\nexport type {\n AnyPointerEvent,\n AnyString,\n Booleanish,\n ColorFormat,\n DeepMerge,\n DeepPartial,\n Dict,\n EventType,\n FlattenObjectOptions,\n FunctionOf,\n FunctionOrValue,\n HasOptions,\n Length,\n Merge,\n MergeOptions,\n Path,\n Point,\n Prettify,\n Primitive,\n Value,\n} from \"@yamada-ui/utils\"\n"],"mappings":""}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ComponentSlotStyle } from "../../core/system/index.type.js";
|
|
2
2
|
import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.type.js";
|
|
3
3
|
import "../../index.js";
|
|
4
|
-
export declare const calendarStyle: ComponentSlotStyle<"button" | "select" | "cell" | "navigation" | "row" | "separator" | "next" | "root" | "month" | "week" | "
|
|
4
|
+
export declare const calendarStyle: ComponentSlotStyle<"button" | "select" | "cell" | "navigation" | "row" | "separator" | "next" | "root" | "month" | "week" | "weekday" | "day" | "months" | "years" | "weeks" | "control" | "prev", {
|
|
5
5
|
/**
|
|
6
6
|
* If `true`, the calendar will be fixed rows.
|
|
7
7
|
*
|
|
@@ -73,6 +73,6 @@ export declare const calendarStyle: ComponentSlotStyle<"button" | "select" | "ce
|
|
|
73
73
|
"--font-size": "fontSizes.xl";
|
|
74
74
|
};
|
|
75
75
|
};
|
|
76
|
-
}, CSSModifierObject<CSSSlotObject<"button" | "select" | "cell" | "navigation" | "row" | "separator" | "next" | "root" | "month" | "week" | "
|
|
76
|
+
}, CSSModifierObject<CSSSlotObject<"button" | "select" | "cell" | "navigation" | "row" | "separator" | "next" | "root" | "month" | "week" | "weekday" | "day" | "months" | "years" | "weeks" | "control" | "prev">>>;
|
|
77
77
|
export type CalendarStyle = typeof calendarStyle;
|
|
78
78
|
//# sourceMappingURL=calendar.style.d.ts.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ComponentSlotStyle } from "../../core/system/index.type.js";
|
|
2
2
|
import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.type.js";
|
|
3
3
|
import "../../index.js";
|
|
4
|
-
export declare const polarChartStyle: ComponentSlotStyle<"label" | "grid" | "dot" | "root" | "labelList" | "
|
|
4
|
+
export declare const polarChartStyle: ComponentSlotStyle<"label" | "grid" | "dot" | "root" | "labelList" | "radial" | "labelLine" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector", CSSPropObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "radial" | "labelLine" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "radial" | "labelLine" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "radial" | "labelLine" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>>;
|
|
5
5
|
export type PolarChartStyle = typeof polarChartStyle;
|
|
6
6
|
//# sourceMappingURL=polar-chart.style.d.ts.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ComponentSlotStyle } from "../../core/system/index.type.js";
|
|
2
2
|
import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.type.js";
|
|
3
3
|
import "../../index.js";
|
|
4
|
-
export declare const fieldStyle: ComponentSlotStyle<"label" | "root" | "
|
|
4
|
+
export declare const fieldStyle: ComponentSlotStyle<"label" | "root" | "errorMessage" | "helperMessage" | "requiredIndicator", {
|
|
5
5
|
/**
|
|
6
6
|
* The orientation of the field.
|
|
7
7
|
*/
|
|
@@ -35,6 +35,6 @@ export declare const fieldStyle: ComponentSlotStyle<"label" | "root" | "helperMe
|
|
|
35
35
|
};
|
|
36
36
|
};
|
|
37
37
|
};
|
|
38
|
-
}, CSSModifierObject<CSSSlotObject<"label" | "root" | "
|
|
38
|
+
}, CSSModifierObject<CSSSlotObject<"label" | "root" | "errorMessage" | "helperMessage" | "requiredIndicator">>, CSSModifierObject<CSSSlotObject<"label" | "root" | "errorMessage" | "helperMessage" | "requiredIndicator">>>;
|
|
39
39
|
export type FieldStyle = typeof fieldStyle;
|
|
40
40
|
//# sourceMappingURL=field.style.d.ts.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ComponentSlotStyle } from "../../core/system/index.type.js";
|
|
2
2
|
import { CSSPropObject, CSSSlotObject } from "../../core/css/index.type.js";
|
|
3
3
|
import "../../index.js";
|
|
4
|
-
export declare const fieldsetStyle: ComponentSlotStyle<"header" | "legend" | "content" | "root" | "
|
|
4
|
+
export declare const fieldsetStyle: ComponentSlotStyle<"header" | "legend" | "content" | "root" | "errorMessage" | "helperMessage", CSSPropObject<CSSSlotObject<"header" | "legend" | "content" | "root" | "errorMessage" | "helperMessage">>, {
|
|
5
5
|
sm: {
|
|
6
6
|
content: {
|
|
7
7
|
gap: "3";
|
|
@@ -6,7 +6,7 @@ import "../field/index.js";
|
|
|
6
6
|
import { UseClickableProps } from "../../hooks/use-clickable/index.js";
|
|
7
7
|
import "../../index.js";
|
|
8
8
|
import { RefObject } from "react";
|
|
9
|
-
export type UseFileInputProps<Y extends "button" | "input" = "input"> = FieldProps & Omit<HTMLProps<Y>, "defaultValue" | "onChange" | "ref" | "value"> & Pick<HTMLProps<"input">, "accept" | "multiple" | "ref"> & {
|
|
9
|
+
export type UseFileInputProps<Y extends "button" | "input" = "input"> = FieldProps & Omit<HTMLProps<Y>, "defaultValue" | "onChange" | "ref" | "value"> & Pick<HTMLProps<"input">, "accept" | "multiple" | "placeholder" | "ref"> & {
|
|
10
10
|
/**
|
|
11
11
|
* The initial value of the file input.
|
|
12
12
|
*/
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ComponentSlotStyle } from "../../core/system/index.type.js";
|
|
2
2
|
import { CSSPropObject, CSSSlotObject } from "../../core/css/index.type.js";
|
|
3
3
|
import "../../index.js";
|
|
4
|
-
export declare const numberInputStyle: ComponentSlotStyle<"button" | "root" | "
|
|
4
|
+
export declare const numberInputStyle: ComponentSlotStyle<"button" | "root" | "field" | "decrement" | "increment" | "control", CSSPropObject<CSSSlotObject<"button" | "root" | "field" | "decrement" | "increment" | "control">>, {
|
|
5
5
|
xs: {
|
|
6
6
|
control: {
|
|
7
7
|
boxSize: "calc({--height} - {spaces.2})";
|