@adgytec/adgytec-web-ui-components 2.1.3 → 2.1.5
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/assets/core10.css +1 -1
- package/dist/chunks/Input2 +94 -94
- package/dist/chunks/Input2.map +1 -1
- package/dist/chunks/core9 +1 -1
- package/dist/chunks/core9.map +1 -1
- package/dist/chunks/useGlobalListeners +294 -0
- package/dist/chunks/useGlobalListeners.map +1 -0
- package/dist/chunks/useHover +86 -86
- package/dist/chunks/usePress +282 -568
- package/dist/chunks/usePress.map +1 -1
- package/dist/components/Input/TextArea/index.js +1 -1
- package/dist/components/Input/TextArea/index.js.map +1 -1
- package/package.json +1 -1
package/dist/assets/core10.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer adgytec.comps{.
|
|
1
|
+
@layer adgytec.comps{._item_1jlhw_16{--_md-navigation-item-active-background:var(--md-navigation-item-active-background,var(--md-sys-color-secondary-container));--_md-navigation-item-label-color:var(--md-navigation-item-label-color,var(--md-sys-color-on-surface-variant));--_md-navigation-item-icon-color:var(--md-navigation-item-icon-color,var(--md-sys-color-on-surface-variant));--_md-navigation-item-active-label-color:var(--md-navigation-item-active-label-color,var(--md-sys-color-secondary));--_md-navigation-item-active-icon-color:var(--md-navigation-item-active-icon-color,var(--md-sys-color-on-secondary-container));--_md-navigation-item-state-layer-color:var(--md-navigation-item-state-layer-color,var(--md-sys-color-on-secondary-container));--_md-navigation-item-padding-block:var(--md-sys-layout-space-16);--_md-navigation-item-padding-inline:var(--md-sys-layout-space-16);--_md-navigation-item-gap:var(--md-sys-layout-space-8);--_background:transparent;--_icon-color:var(--_md-navigation-item-icon-color);--_label-color:var(--_md-navigation-item-label-color);--_state-color:var(--_md-navigation-item-state-layer-color);--_state-layer-opacity:0;--_state-layer-color:rgb(from var(--_state-color) r g b / var(--_state-layer-opacity));all:unset;background-color:var(--_background);color:var(--_label-color);padding-inline:var(--_md-navigation-item-padding-inline);padding-block:var(--_md-navigation-item-padding-block);align-items:center;gap:var(--_md-navigation-item-gap);cursor:pointer;border-radius:var(--md-sys-shape-corner-radius-full);display:flex;position:relative}._item_1jlhw_16[data-active]{--_background:var(--_md-navigation-item-active-background);--_icon-color:var(--_md-navigation-item-active-icon-color);--_label-color:var(--_md-navigation-item-active-label-color)}._item_1jlhw_16 [data-nav-icon]{color:var(--_icon-color)}._item_1jlhw_16[data-disabled]{cursor:default}._item_1jlhw_16[data-hovered]{--_state-layer-opacity:var(--md-sys-state-hover)}._item_1jlhw_16[data-focus-visible]{--_state-layer-opacity:var(--md-sys-state-focus)}._item_1jlhw_16[data-pressed]{--_state-layer-opacity:var(--md-sys-state-pressed);--_background:var(--_md-navigation-item-active-background);--_icon-color:var(--_md-navigation-item-active-icon-color);--_label-color:var(--_md-navigation-item-active-label-color)}._item_1jlhw_16:before{content:"";border-radius:inherit;background-color:var(--_state-layer-color);transition:background-color var(--md-sys-motion-standard-fast-spatial) var(--md-sys-motion-standard-fast-spatial-duration);position:absolute;inset:0}@media (prefers-reduced-motion){._item_1jlhw_16:before{transition:none}}._item_1jlhw_16[data-focus-visible]{--focus-indicator-thickness:calc(3 * var(--dp,1px));--focus-indicator-offset:calc(2 * var(--dp,1px));--focus-indicator-color:var(--md-sys-color-secondary);outline-width:var(--focus-indicator-thickness);outline-offset:var(--focus-indicator-offset);outline-style:solid;outline-color:var(--focus-indicator-color);z-index:1}}
|
package/dist/chunks/Input2
CHANGED
|
@@ -1,21 +1,20 @@
|
|
|
1
1
|
import { t as e } from "./base";
|
|
2
2
|
import { t } from "./Icon";
|
|
3
3
|
import { IconButton as n } from "../components/Button/IconButton/index.js";
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import
|
|
12
|
-
import v from "
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import { Input as D, TextField as O } from "react-aria-components";
|
|
4
|
+
import { Description as r } from "../components/Input/Description/index.js";
|
|
5
|
+
import { t as i } from "./FieldError";
|
|
6
|
+
import { Label as a } from "../components/Input/Label/index.js";
|
|
7
|
+
import { a as o, c as s, d as c, l, n as u, o as d, s as f } from "./core4";
|
|
8
|
+
import { n as p, t as m } from "./useHover";
|
|
9
|
+
import { CharacterCount as h } from "../components/Input/CharacterCount/index.js";
|
|
10
|
+
import { useControllableState as g } from "../components/Input/hooks/index.js";
|
|
11
|
+
import _ from "clsx";
|
|
12
|
+
import { cloneElement as v, isValidElement as y, useCallback as b, useMemo as x, useRef as S } from "react";
|
|
13
|
+
import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
|
|
14
|
+
import { Input as E, TextField as D } from "react-aria-components";
|
|
16
15
|
import '../assets/Input2.css';//#region node_modules/react-aria/dist/private/utils/useObjectRef.mjs
|
|
17
|
-
function
|
|
18
|
-
let t =
|
|
16
|
+
function O(e) {
|
|
17
|
+
let t = S(null), n = S(void 0), r = b((t) => {
|
|
19
18
|
if (typeof e == "function") {
|
|
20
19
|
let n = e, r = n(t);
|
|
21
20
|
return () => {
|
|
@@ -25,7 +24,7 @@ function k(e) {
|
|
|
25
24
|
e.current = null;
|
|
26
25
|
};
|
|
27
26
|
}, [e]);
|
|
28
|
-
return
|
|
27
|
+
return x(() => ({
|
|
29
28
|
get current() {
|
|
30
29
|
return t.current;
|
|
31
30
|
},
|
|
@@ -34,8 +33,8 @@ function k(e) {
|
|
|
34
33
|
}
|
|
35
34
|
}), [r]);
|
|
36
35
|
}
|
|
37
|
-
var
|
|
38
|
-
className: (e) =>
|
|
36
|
+
var k = { button: "_button_650ys_2" }, A = ({ icon: e, className: t, ...r }) => /* @__PURE__ */ w(n, {
|
|
37
|
+
className: (e) => _(k.button, typeof t == "function" ? t(e) : t),
|
|
39
38
|
icon: e,
|
|
40
39
|
color: "standard",
|
|
41
40
|
size: "small",
|
|
@@ -44,111 +43,112 @@ var A = { button: "_button_650ys_2" }, j = ({ icon: e, className: t, ...r }) =>
|
|
|
44
43
|
});
|
|
45
44
|
//#endregion
|
|
46
45
|
//#region src/components/Input/Input/handleInputButton.ts
|
|
47
|
-
function
|
|
48
|
-
return !
|
|
46
|
+
function j({ node: e, isInvalid: t, isDisabled: n }) {
|
|
47
|
+
return !y(e) || e.type !== A ? e : v(e, {
|
|
49
48
|
"data-invalid": t || void 0,
|
|
50
49
|
isDisabled: n
|
|
51
50
|
});
|
|
52
51
|
}
|
|
53
52
|
//#endregion
|
|
54
53
|
//#region src/components/Input/Input/Input.tsx
|
|
55
|
-
var
|
|
56
|
-
let
|
|
57
|
-
value:
|
|
58
|
-
defaultValue:
|
|
59
|
-
onChange:
|
|
60
|
-
}), { isFocused:
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
"data-trailing": P ? !0 : void 0,
|
|
64
|
-
"data-leading": N ? !0 : void 0
|
|
54
|
+
var M = ({ label: n, description: v, errorMessage: y, showDescriptionOnInvalid: b = !1, placeholder: x, editorDir: S, prefix: k, suffix: A, leadingIcon: M, trailing: N, className: P, showCharacterCount: F, maxLength: I, value: L, defaultValue: R, ref: z, onChange: B, ...V }) => {
|
|
55
|
+
let H = O(z), { currentValue: U, setValue: W } = g({
|
|
56
|
+
value: L,
|
|
57
|
+
defaultValue: R,
|
|
58
|
+
onChange: B
|
|
59
|
+
}), { isFocused: G, isFocusVisible: K, focusProps: q } = p(), { isHovered: J, hoverProps: Y } = m({}), X = {
|
|
60
|
+
"data-trailing": N ? !0 : void 0,
|
|
61
|
+
"data-leading": M ? !0 : void 0
|
|
65
62
|
};
|
|
66
|
-
return /* @__PURE__ */
|
|
67
|
-
className: (e) =>
|
|
68
|
-
maxLength:
|
|
69
|
-
value:
|
|
70
|
-
defaultValue:
|
|
71
|
-
onChange:
|
|
72
|
-
...
|
|
73
|
-
...
|
|
74
|
-
children: ({ isDisabled:
|
|
75
|
-
let
|
|
76
|
-
...
|
|
77
|
-
"data-hovered":
|
|
78
|
-
"data-focused":
|
|
79
|
-
"data-focus-visible":
|
|
80
|
-
"data-disabled":
|
|
81
|
-
"data-invalid":
|
|
82
|
-
}, m =
|
|
83
|
-
return /* @__PURE__ */
|
|
84
|
-
n && /* @__PURE__ */
|
|
85
|
-
/* @__PURE__ */
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
63
|
+
return /* @__PURE__ */ w(D, {
|
|
64
|
+
className: (e) => _(u, s, typeof P == "function" ? P(e) : P),
|
|
65
|
+
maxLength: I,
|
|
66
|
+
value: U,
|
|
67
|
+
defaultValue: R,
|
|
68
|
+
onChange: W,
|
|
69
|
+
...V,
|
|
70
|
+
...X,
|
|
71
|
+
children: ({ isDisabled: s, isInvalid: u }) => {
|
|
72
|
+
let p = {
|
|
73
|
+
...X,
|
|
74
|
+
"data-hovered": J || void 0,
|
|
75
|
+
"data-focused": G || void 0,
|
|
76
|
+
"data-focus-visible": K || void 0,
|
|
77
|
+
"data-disabled": s || void 0,
|
|
78
|
+
"data-invalid": u || void 0
|
|
79
|
+
}, m = v && (!u || u && b);
|
|
80
|
+
return /* @__PURE__ */ T(C, { children: [
|
|
81
|
+
n && /* @__PURE__ */ w(a, { children: n }),
|
|
82
|
+
/* @__PURE__ */ T("span", {
|
|
83
|
+
onPointerDown: (e) => {
|
|
84
|
+
let t = e.target;
|
|
85
|
+
H.current?.contains(t) || t.closest("button, a, [role='button']") || (e.preventDefault(), H.current?.focus());
|
|
86
|
+
},
|
|
87
|
+
...Y,
|
|
88
|
+
...p,
|
|
89
|
+
className: _(f),
|
|
90
90
|
"data-input": !0,
|
|
91
91
|
children: [
|
|
92
|
-
|
|
93
|
-
icon:
|
|
92
|
+
M && /* @__PURE__ */ w(t, {
|
|
93
|
+
icon: M,
|
|
94
94
|
size: 24
|
|
95
95
|
}),
|
|
96
|
-
/* @__PURE__ */
|
|
97
|
-
className:
|
|
96
|
+
/* @__PURE__ */ T("span", {
|
|
97
|
+
className: _(o, e.bodyLarge),
|
|
98
98
|
children: [
|
|
99
|
-
|
|
100
|
-
isDisabled:
|
|
101
|
-
isInvalid:
|
|
102
|
-
}) :
|
|
103
|
-
/* @__PURE__ */
|
|
104
|
-
ref:
|
|
105
|
-
className:
|
|
106
|
-
...
|
|
107
|
-
placeholder:
|
|
108
|
-
dir:
|
|
99
|
+
k && typeof k == "function" ? k({
|
|
100
|
+
isDisabled: s,
|
|
101
|
+
isInvalid: u
|
|
102
|
+
}) : k,
|
|
103
|
+
/* @__PURE__ */ w(E, {
|
|
104
|
+
ref: H,
|
|
105
|
+
className: _(c, d, e.bodyLarge),
|
|
106
|
+
...q,
|
|
107
|
+
placeholder: x,
|
|
108
|
+
dir: S,
|
|
109
109
|
"data-input": !0
|
|
110
110
|
}),
|
|
111
|
-
|
|
112
|
-
isDisabled:
|
|
113
|
-
isInvalid:
|
|
114
|
-
}) :
|
|
111
|
+
A && typeof A == "function" ? A({
|
|
112
|
+
isDisabled: s,
|
|
113
|
+
isInvalid: u
|
|
114
|
+
}) : A
|
|
115
115
|
]
|
|
116
116
|
}),
|
|
117
|
-
|
|
118
|
-
isDisabled:
|
|
119
|
-
isInvalid:
|
|
120
|
-
}) :
|
|
121
|
-
node:
|
|
122
|
-
isDisabled:
|
|
123
|
-
isInvalid:
|
|
117
|
+
N && typeof N == "function" ? N({
|
|
118
|
+
isDisabled: s,
|
|
119
|
+
isInvalid: u
|
|
120
|
+
}) : j({
|
|
121
|
+
node: N,
|
|
122
|
+
isDisabled: s,
|
|
123
|
+
isInvalid: u
|
|
124
124
|
})
|
|
125
125
|
]
|
|
126
126
|
}),
|
|
127
|
-
m && /* @__PURE__ */
|
|
128
|
-
...
|
|
129
|
-
className:
|
|
130
|
-
children: [/* @__PURE__ */
|
|
131
|
-
count:
|
|
132
|
-
maxLength:
|
|
127
|
+
m && /* @__PURE__ */ T("span", {
|
|
128
|
+
...X,
|
|
129
|
+
className: _(l),
|
|
130
|
+
children: [/* @__PURE__ */ w(r, { children: v }), F && /* @__PURE__ */ w(h, {
|
|
131
|
+
count: U.length,
|
|
132
|
+
maxLength: I
|
|
133
133
|
})]
|
|
134
134
|
}),
|
|
135
|
-
!m &&
|
|
136
|
-
...
|
|
137
|
-
className:
|
|
138
|
-
children: [/* @__PURE__ */
|
|
139
|
-
count:
|
|
140
|
-
maxLength:
|
|
135
|
+
!m && F && /* @__PURE__ */ T("span", {
|
|
136
|
+
...X,
|
|
137
|
+
className: _(l),
|
|
138
|
+
children: [/* @__PURE__ */ w(i, { children: y }), /* @__PURE__ */ w(h, {
|
|
139
|
+
count: U.length,
|
|
140
|
+
maxLength: I
|
|
141
141
|
})]
|
|
142
142
|
}),
|
|
143
|
-
m || !
|
|
144
|
-
className:
|
|
145
|
-
children:
|
|
143
|
+
m || !F ? /* @__PURE__ */ w(i, {
|
|
144
|
+
className: _(l),
|
|
145
|
+
children: y
|
|
146
146
|
}) : null
|
|
147
147
|
] });
|
|
148
148
|
}
|
|
149
149
|
});
|
|
150
150
|
};
|
|
151
151
|
//#endregion
|
|
152
|
-
export {
|
|
152
|
+
export { A as n, M as t };
|
|
153
153
|
|
|
154
154
|
//# sourceMappingURL=Input2.map
|
package/dist/chunks/Input2.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input2","names":["$i6EpZ$useRef","$i6EpZ$useCallback","$i6EpZ$useMemo"],"sources":["../../node_modules/react-aria/dist/private/utils/useObjectRef.mjs","../../src/components/Input/Input/input.module.css","../../src/components/Input/Input/InputButton.tsx","../../src/components/Input/Input/handleInputButton.ts","../../src/components/Input/Input/Input.tsx"],"sourcesContent":["import {useRef as $i6EpZ$useRef, useCallback as $i6EpZ$useCallback, useMemo as $i6EpZ$useMemo} from \"react\";\n\n/*\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */ \nfunction $03e8ab2d84d7657a$export$4338b53315abf666(ref) {\n const objRef = (0, $i6EpZ$useRef)(null);\n const cleanupRef = (0, $i6EpZ$useRef)(undefined);\n const refEffect = (0, $i6EpZ$useCallback)((instance)=>{\n if (typeof ref === 'function') {\n const refCallback = ref;\n const refCleanup = refCallback(instance);\n return ()=>{\n if (typeof refCleanup === 'function') refCleanup();\n else refCallback(null);\n };\n } else if (ref) {\n ref.current = instance;\n return ()=>{\n ref.current = null;\n };\n }\n }, [\n ref\n ]);\n return (0, $i6EpZ$useMemo)(()=>({\n get current () {\n return objRef.current;\n },\n set current (value){\n objRef.current = value;\n if (cleanupRef.current) {\n cleanupRef.current();\n cleanupRef.current = undefined;\n }\n if (value != null) cleanupRef.current = refEffect(value);\n }\n }), [\n refEffect\n ]);\n}\n\n\nexport {$03e8ab2d84d7657a$export$4338b53315abf666 as useObjectRef};\n//# sourceMappingURL=useObjectRef.mjs.map\n","@layer adgytec.overrides {\n .button[data-invalid] {\n --md-button-color: var(--group-color);\n }\n}\n","import clsx from \"clsx\";\nimport { IconButton, type IconButtonProps } from \"@/components/Button\";\nimport styles from \"./input.module.css\";\n\nexport const InputButton: React.FC<\n Omit<IconButtonProps, \"color\" | \"size\" | \"width\">\n> = ({ icon, className, ...props }) => {\n return (\n <IconButton\n className={(renderProps) =>\n clsx(\n styles[\"button\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n icon={icon}\n color=\"standard\"\n size=\"small\"\n width=\"default\"\n {...props}\n />\n );\n};\n","import { cloneElement, isValidElement, type ReactNode } from \"react\";\nimport { InputButton } from \"./InputButton\";\n\ntype InputButtonProps = React.ComponentProps<typeof InputButton> & {\n \"data-invalid\"?: boolean;\n};\n\nexport function addStateAttrsToInputButton({\n node,\n isInvalid,\n isDisabled,\n}: {\n node: ReactNode;\n isInvalid: boolean;\n isDisabled: boolean;\n}) {\n if (!isValidElement<InputButtonProps>(node)) {\n return node;\n }\n\n if (node.type !== InputButton) return node;\n\n return cloneElement(node, {\n \"data-invalid\": isInvalid || undefined,\n isDisabled,\n });\n}\n","import clsx from \"clsx\";\nimport { useFocusRing } from \"react-aria/useFocusRing\";\nimport { useHover } from \"react-aria/useHover\";\nimport { useObjectRef } from \"react-aria/useObjectRef\";\nimport { usePress } from \"react-aria/usePress\";\nimport {\n Input as AriaInput,\n TextField as AriaTextField,\n} from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { typography } from \"@/utils\";\nimport { CharacterCount } from \"../CharacterCount\";\nimport {\n Colors,\n EditorInputGroupStyles,\n EditorInputStyles,\n EditorStyles,\n InputGroupStyles,\n SupportingTextStyles,\n TextFieldIconSize,\n UnsetStyles,\n} from \"../core\";\nimport { Description } from \"../Description\";\nimport { FieldError } from \"../FieldError\";\nimport { useControllableState } from \"../hooks\";\nimport { Label } from \"../Label\";\nimport { addStateAttrsToInputButton } from \"./handleInputButton\";\nimport type { InputProps } from \"./types\";\n\nexport const Input: React.FC<InputProps> = ({\n label,\n description,\n errorMessage,\n showDescriptionOnInvalid = false,\n placeholder,\n editorDir,\n prefix,\n suffix,\n leadingIcon,\n trailing,\n className,\n showCharacterCount: hasCharacterCount,\n maxLength,\n value,\n defaultValue,\n ref,\n onChange,\n ...props\n}) => {\n const inputRef = useObjectRef(ref);\n\n const { currentValue, setValue } = useControllableState({\n value,\n defaultValue,\n onChange,\n });\n\n const { isFocused, isFocusVisible, focusProps } = useFocusRing();\n const { isHovered, hoverProps } = useHover({});\n const { pressProps } = usePress({\n onPress: () => {\n inputRef.current?.focus();\n },\n });\n\n const layoutDataAttrs = {\n \"data-trailing\": trailing ? true : undefined,\n \"data-leading\": leadingIcon ? true : undefined,\n };\n\n return (\n <AriaTextField\n className={(renderProps) =>\n clsx(\n Colors,\n InputGroupStyles,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n maxLength={maxLength}\n value={value}\n defaultValue={defaultValue}\n onChange={setValue}\n {...props}\n {...layoutDataAttrs}\n >\n {({ isDisabled, isInvalid }) => {\n const dataAttrs = {\n ...layoutDataAttrs,\n \"data-hovered\": isHovered || undefined,\n \"data-focused\": isFocused || undefined,\n \"data-focus-visible\": isFocusVisible || undefined,\n \"data-disabled\": isDisabled || undefined,\n \"data-invalid\": isInvalid || undefined,\n };\n\n const hasDescription =\n description &&\n (!isInvalid || (isInvalid && showDescriptionOnInvalid));\n\n return (\n <>\n {label && <Label>{label}</Label>}\n\n <span\n {...pressProps}\n {...hoverProps}\n {...dataAttrs}\n className={clsx(EditorStyles)}\n data-input={true}\n >\n {leadingIcon && (\n <Icon\n icon={leadingIcon}\n size={TextFieldIconSize}\n />\n )}\n <span\n className={clsx(\n EditorInputGroupStyles,\n typography.bodyLarge\n )}\n >\n {prefix && typeof prefix === \"function\"\n ? prefix({ isDisabled, isInvalid })\n : prefix}\n <AriaInput\n ref={inputRef}\n className={clsx(\n UnsetStyles,\n EditorInputStyles,\n typography.bodyLarge\n )}\n {...focusProps}\n placeholder={placeholder}\n dir={editorDir}\n data-input={true}\n />\n {suffix && typeof suffix === \"function\"\n ? suffix({ isDisabled, isInvalid })\n : suffix}\n </span>\n\n {trailing && typeof trailing === \"function\"\n ? trailing({ isDisabled, isInvalid })\n : addStateAttrsToInputButton({\n node: trailing,\n isDisabled,\n isInvalid,\n })}\n </span>\n\n {hasDescription && (\n <span\n {...layoutDataAttrs}\n className={clsx(SupportingTextStyles)}\n >\n <Description>{description}</Description>\n\n {hasCharacterCount && (\n <CharacterCount\n count={currentValue.length}\n maxLength={maxLength}\n />\n )}\n </span>\n )}\n\n {!hasDescription && hasCharacterCount && (\n <span\n {...layoutDataAttrs}\n className={clsx(SupportingTextStyles)}\n >\n <FieldError>{errorMessage}</FieldError>\n\n <CharacterCount\n count={currentValue.length}\n maxLength={maxLength}\n />\n </span>\n )}\n\n {/* Error placement */}\n {hasDescription || !hasCharacterCount ? (\n <FieldError className={clsx(SupportingTextStyles)}>\n {errorMessage}\n </FieldError>\n ) : null}\n </>\n );\n }}\n </AriaTextField>\n );\n};\n"],"x_google_ignoreList":[0],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Input2","names":["$i6EpZ$useRef","$i6EpZ$useCallback","$i6EpZ$useMemo"],"sources":["../../node_modules/react-aria/dist/private/utils/useObjectRef.mjs","../../src/components/Input/Input/input.module.css","../../src/components/Input/Input/InputButton.tsx","../../src/components/Input/Input/handleInputButton.ts","../../src/components/Input/Input/Input.tsx"],"sourcesContent":["import {useRef as $i6EpZ$useRef, useCallback as $i6EpZ$useCallback, useMemo as $i6EpZ$useMemo} from \"react\";\n\n/*\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */ \nfunction $03e8ab2d84d7657a$export$4338b53315abf666(ref) {\n const objRef = (0, $i6EpZ$useRef)(null);\n const cleanupRef = (0, $i6EpZ$useRef)(undefined);\n const refEffect = (0, $i6EpZ$useCallback)((instance)=>{\n if (typeof ref === 'function') {\n const refCallback = ref;\n const refCleanup = refCallback(instance);\n return ()=>{\n if (typeof refCleanup === 'function') refCleanup();\n else refCallback(null);\n };\n } else if (ref) {\n ref.current = instance;\n return ()=>{\n ref.current = null;\n };\n }\n }, [\n ref\n ]);\n return (0, $i6EpZ$useMemo)(()=>({\n get current () {\n return objRef.current;\n },\n set current (value){\n objRef.current = value;\n if (cleanupRef.current) {\n cleanupRef.current();\n cleanupRef.current = undefined;\n }\n if (value != null) cleanupRef.current = refEffect(value);\n }\n }), [\n refEffect\n ]);\n}\n\n\nexport {$03e8ab2d84d7657a$export$4338b53315abf666 as useObjectRef};\n//# sourceMappingURL=useObjectRef.mjs.map\n","@layer adgytec.overrides {\n .button[data-invalid] {\n --md-button-color: var(--group-color);\n }\n}\n","import clsx from \"clsx\";\nimport { IconButton, type IconButtonProps } from \"@/components/Button\";\nimport styles from \"./input.module.css\";\n\nexport const InputButton: React.FC<\n Omit<IconButtonProps, \"color\" | \"size\" | \"width\">\n> = ({ icon, className, ...props }) => {\n return (\n <IconButton\n className={(renderProps) =>\n clsx(\n styles[\"button\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n icon={icon}\n color=\"standard\"\n size=\"small\"\n width=\"default\"\n {...props}\n />\n );\n};\n","import { cloneElement, isValidElement, type ReactNode } from \"react\";\nimport { InputButton } from \"./InputButton\";\n\ntype InputButtonProps = React.ComponentProps<typeof InputButton> & {\n \"data-invalid\"?: boolean;\n};\n\nexport function addStateAttrsToInputButton({\n node,\n isInvalid,\n isDisabled,\n}: {\n node: ReactNode;\n isInvalid: boolean;\n isDisabled: boolean;\n}) {\n if (!isValidElement<InputButtonProps>(node)) {\n return node;\n }\n\n if (node.type !== InputButton) return node;\n\n return cloneElement(node, {\n \"data-invalid\": isInvalid || undefined,\n isDisabled,\n });\n}\n","import clsx from \"clsx\";\nimport { useFocusRing } from \"react-aria/useFocusRing\";\nimport { useHover } from \"react-aria/useHover\";\nimport { useObjectRef } from \"react-aria/useObjectRef\";\nimport {\n Input as AriaInput,\n TextField as AriaTextField,\n} from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { typography } from \"@/utils\";\nimport { CharacterCount } from \"../CharacterCount\";\nimport {\n Colors,\n EditorInputGroupStyles,\n EditorInputStyles,\n EditorStyles,\n InputGroupStyles,\n SupportingTextStyles,\n TextFieldIconSize,\n UnsetStyles,\n} from \"../core\";\nimport { Description } from \"../Description\";\nimport { FieldError } from \"../FieldError\";\nimport { useControllableState } from \"../hooks\";\nimport { Label } from \"../Label\";\nimport { addStateAttrsToInputButton } from \"./handleInputButton\";\nimport type { InputProps } from \"./types\";\n\nexport const Input: React.FC<InputProps> = ({\n label,\n description,\n errorMessage,\n showDescriptionOnInvalid = false,\n placeholder,\n editorDir,\n prefix,\n suffix,\n leadingIcon,\n trailing,\n className,\n showCharacterCount: hasCharacterCount,\n maxLength,\n value,\n defaultValue,\n ref,\n onChange,\n ...props\n}) => {\n const inputRef = useObjectRef(ref);\n\n const { currentValue, setValue } = useControllableState({\n value,\n defaultValue,\n onChange,\n });\n\n const { isFocused, isFocusVisible, focusProps } = useFocusRing();\n const { isHovered, hoverProps } = useHover({});\n\n const layoutDataAttrs = {\n \"data-trailing\": trailing ? true : undefined,\n \"data-leading\": leadingIcon ? true : undefined,\n };\n\n return (\n <AriaTextField\n className={(renderProps) =>\n clsx(\n Colors,\n InputGroupStyles,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n maxLength={maxLength}\n value={currentValue}\n defaultValue={defaultValue}\n onChange={setValue}\n {...props}\n {...layoutDataAttrs}\n >\n {({ isDisabled, isInvalid }) => {\n const dataAttrs = {\n ...layoutDataAttrs,\n \"data-hovered\": isHovered || undefined,\n \"data-focused\": isFocused || undefined,\n \"data-focus-visible\": isFocusVisible || undefined,\n \"data-disabled\": isDisabled || undefined,\n \"data-invalid\": isInvalid || undefined,\n };\n\n const hasDescription =\n description &&\n (!isInvalid || (isInvalid && showDescriptionOnInvalid));\n\n return (\n <>\n {label && <Label>{label}</Label>}\n\n <span\n onPointerDown={(e) => {\n const target = e.target as HTMLElement;\n\n if (\n inputRef.current?.contains(target) ||\n target.closest(\"button, a, [role='button']\")\n ) {\n return;\n }\n\n e.preventDefault();\n inputRef.current?.focus();\n }}\n {...hoverProps}\n {...dataAttrs}\n className={clsx(EditorStyles)}\n data-input={true}\n >\n {leadingIcon && (\n <Icon\n icon={leadingIcon}\n size={TextFieldIconSize}\n />\n )}\n <span\n className={clsx(\n EditorInputGroupStyles,\n typography.bodyLarge\n )}\n >\n {prefix && typeof prefix === \"function\"\n ? prefix({ isDisabled, isInvalid })\n : prefix}\n <AriaInput\n ref={inputRef}\n className={clsx(\n UnsetStyles,\n EditorInputStyles,\n typography.bodyLarge\n )}\n {...focusProps}\n placeholder={placeholder}\n dir={editorDir}\n data-input={true}\n />\n {suffix && typeof suffix === \"function\"\n ? suffix({ isDisabled, isInvalid })\n : suffix}\n </span>\n\n {trailing && typeof trailing === \"function\"\n ? trailing({ isDisabled, isInvalid })\n : addStateAttrsToInputButton({\n node: trailing,\n isDisabled,\n isInvalid,\n })}\n </span>\n\n {hasDescription && (\n <span\n {...layoutDataAttrs}\n className={clsx(SupportingTextStyles)}\n >\n <Description>{description}</Description>\n\n {hasCharacterCount && (\n <CharacterCount\n count={currentValue.length}\n maxLength={maxLength}\n />\n )}\n </span>\n )}\n\n {!hasDescription && hasCharacterCount && (\n <span\n {...layoutDataAttrs}\n className={clsx(SupportingTextStyles)}\n >\n <FieldError>{errorMessage}</FieldError>\n\n <CharacterCount\n count={currentValue.length}\n maxLength={maxLength}\n />\n </span>\n )}\n\n {/* Error placement */}\n {hasDescription || !hasCharacterCount ? (\n <FieldError className={clsx(SupportingTextStyles)}>\n {errorMessage}\n </FieldError>\n ) : null}\n </>\n );\n }}\n </AriaTextField>\n );\n};\n"],"x_google_ignoreList":[0],"mappings":";;;;;;;;;;;;;;;AAaA,SAAS,EAA0C,GAAK;CACpD,IAAM,IAAaA,EAAe,IAAI,GAChC,IAAiBA,EAAe,KAAA,CAAS,GACzC,IAAgBC,GAAqB,MAAW;EAClD,IAAI,OAAO,KAAQ,YAAY;GAC3B,IAAM,IAAc,GACd,IAAa,EAAY,CAAQ;GACvC,aAAW;IACP,AAAI,OAAO,KAAe,aAAY,EAAW,IAC5C,EAAY,IAAI;GACzB;EACJ,OAAO,IAAI,GAEP,OADA,EAAI,UAAU,SACH;GACP,EAAI,UAAU;EAClB;CAER,GAAG,CACC,CACJ,CAAC;CACD,OAAWC,SAAqB;EACxB,IAAI,UAAW;GACX,OAAO,EAAO;EAClB;EACA,IAAI,QAAS,GAAM;GAMf,AALA,EAAO,UAAU,GACjB,AAEI,EAAW,aADX,EAAW,QAAQ,GACE,KAAA,IAErB,KAAS,SAAM,EAAW,UAAU,EAAU,CAAK;EAC3D;CACJ,IAAI,CACJ,CACJ,CAAC;AACL;uCE5Ca,KAER,EAAE,SAAM,cAAW,GAAG,QAEnB,kBAAC,GAAD;CACI,YAAY,MACR,EACI,EAAO,QACP,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;CAEE;CACN,OAAM;CACN,MAAK;CACL,OAAM;CACN,GAAI;AACP,CAAA;;;ACfT,SAAgB,EAA2B,EACvC,SACA,cACA,iBAKD;CAOC,OANI,CAAC,EAAiC,CAAI,KAItC,EAAK,SAAS,IAAoB,IAE/B,EAAa,GAAM;EACtB,gBAAgB,KAAa,KAAA;EAC7B;CACJ,CAAC;AACL;;;ACEA,IAAa,KAA+B,EACxC,UACA,gBACA,iBACA,8BAA2B,IAC3B,gBACA,cACA,WACA,WACA,gBACA,aACA,cACA,oBAAoB,GACpB,cACA,UACA,iBACA,QACA,aACA,GAAG,QACD;CACF,IAAM,IAAW,EAAa,CAAG,GAE3B,EAAE,iBAAc,gBAAa,EAAqB;EACpD;EACA;EACA;CACJ,CAAC,GAEK,EAAE,cAAW,mBAAgB,kBAAe,EAAa,GACzD,EAAE,cAAW,kBAAe,EAAS,CAAC,CAAC,GAEvC,IAAkB;EACpB,iBAAiB,IAAW,KAAO,KAAA;EACnC,gBAAgB,IAAc,KAAO,KAAA;CACzC;CAEA,OACI,kBAAC,GAAD;EACI,YAAY,MACR,EACI,GACA,GACA,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;EAEO;EACX,OAAO;EACO;EACd,UAAU;EACV,GAAI;EACJ,GAAI;aAEF,EAAE,eAAY,mBAAgB;GAC5B,IAAM,IAAY;IACd,GAAG;IACH,gBAAgB,KAAa,KAAA;IAC7B,gBAAgB,KAAa,KAAA;IAC7B,sBAAsB,KAAkB,KAAA;IACxC,iBAAiB,KAAc,KAAA;IAC/B,gBAAgB,KAAa,KAAA;GACjC,GAEM,IACF,MACC,CAAC,KAAc,KAAa;GAEjC,OACI,kBAAA,GAAA,EAAA,UAAA;IACK,KAAS,kBAAC,GAAD,EAAA,UAAQ,EAAa,CAAA;IAE/B,kBAAC,QAAD;KACI,gBAAgB,MAAM;MAClB,IAAM,IAAS,EAAE;MAGb,EAAS,SAAS,SAAS,CAAM,KACjC,EAAO,QAAQ,4BAA4B,MAK/C,EAAE,eAAe,GACjB,EAAS,SAAS,MAAM;KAC5B;KACA,GAAI;KACJ,GAAI;KACJ,WAAW,EAAK,CAAY;KAC5B,cAAY;eAjBhB;MAmBK,KACG,kBAAC,GAAD;OACI,MAAM;OACN,MAAA;MACH,CAAA;MAEL,kBAAC,QAAD;OACI,WAAW,EACP,GACA,EAAW,SACf;iBAJJ;QAMK,KAAU,OAAO,KAAW,aACvB,EAAO;SAAE;SAAY;QAAU,CAAC,IAChC;QACN,kBAAC,GAAD;SACI,KAAK;SACL,WAAW,EACP,GACA,GACA,EAAW,SACf;SACA,GAAI;SACS;SACb,KAAK;SACL,cAAY;QACf,CAAA;QACA,KAAU,OAAO,KAAW,aACvB,EAAO;SAAE;SAAY;QAAU,CAAC,IAChC;OACJ;;MAEL,KAAY,OAAO,KAAa,aAC3B,EAAS;OAAE;OAAY;MAAU,CAAC,IAClC,EAA2B;OACvB,MAAM;OACN;OACA;MACJ,CAAC;KACL;;IAEL,KACG,kBAAC,QAAD;KACI,GAAI;KACJ,WAAW,EAAK,CAAoB;eAFxC,CAII,kBAAC,GAAD,EAAA,UAAc,EAAyB,CAAA,GAEtC,KACG,kBAAC,GAAD;MACI,OAAO,EAAa;MACT;KACd,CAAA,CAEH;;IAGT,CAAC,KAAkB,KAChB,kBAAC,QAAD;KACI,GAAI;KACJ,WAAW,EAAK,CAAoB;eAFxC,CAII,kBAAC,GAAD,EAAA,UAAa,EAAyB,CAAA,GAEtC,kBAAC,GAAD;MACI,OAAO,EAAa;MACT;KACd,CAAA,CACC;;IAIT,KAAkB,CAAC,IAChB,kBAAC,GAAD;KAAY,WAAW,EAAK,CAAoB;eAC3C;IACO,CAAA,IACZ;GACN,EAAA,CAAA;EAEV;CACW,CAAA;AAEvB"}
|
package/dist/chunks/core9
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { t as e } from "./base";
|
|
2
|
-
import '../assets/core10.css';var t = { item: "
|
|
2
|
+
import '../assets/core10.css';var t = { item: "_item_1jlhw_16" }, n = e.titleSmall, r = t.item;
|
|
3
3
|
//#endregion
|
|
4
4
|
export { r as n, n as t };
|
|
5
5
|
|
package/dist/chunks/core9.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"core9","names":[],"sources":["../../src/components/Navigation/NavigationItem/core/navigationItem.module.css","../../src/components/Navigation/NavigationItem/core/navigationItem.ts"],"sourcesContent":["/* configurable tokens\n*\n* --md-navigation-item-active-background\n*\n* --md-navigation-item-label-color\n* --md-navigation-item-icon-color\n*\n* --md-navigation-item-active-label-color\n* --md-navigation-item-active-icon-color\n*\n* --md-navigation-item-state-layer-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n .item {\n --_md-navigation-item-active-background: var(\n --md-navigation-item-active-background,\n var(--md-sys-color-secondary-container)\n );\n\n --_md-navigation-item-label-color: var(\n --md-navigation-item-label-color,\n var(--md-sys-color-on-surface-variant)\n );\n --_md-navigation-item-icon-color: var(\n --md-navigation-item-icon-color,\n var(--md-sys-color-on-surface-variant)\n );\n\n --_md-navigation-item-active-label-color: var(\n --md-navigation-item-active-label-color,\n var(--md-sys-color-secondary)\n );\n --_md-navigation-item-active-icon-color: var(\n --md-navigation-item-active-icon-color,\n var(--md-sys-color-on-secondary-container)\n );\n\n --_md-navigation-item-state-layer-color: var(\n --md-navigation-item-state-layer-color,\n var(--md-sys-color-on-secondary-container)\n );\n\n --_md-navigation-item-padding-block: var(--md-sys-layout-space-16);\n --_md-navigation-item-padding-inline: var(--md-sys-layout-space-16);\n --_md-navigation-item-gap: var(--md-sys-layout-space-8);\n\n --_background: transparent;\n --_icon-color: var(--_md-navigation-item-icon-color);\n --_label-color: var(--_md-navigation-item-label-color);\n\n --_state-color: var(--_md-navigation-item-state-layer-color);\n --_state-layer-opacity: 0;\n\n --_state-layer-color: rgb(\n from var(--_state-color) r g b /\n var(--_state-layer-opacity)\n );\n\n all: unset;\n\n position: relative;\n\n background-color: var(--_background);\n color: var(--_label-color);\n\n padding-inline: var(--_md-navigation-item-padding-inline);\n padding-block: var(--_md-navigation-item-padding-block);\n\n display: flex;\n align-items: center;\n
|
|
1
|
+
{"version":3,"file":"core9","names":[],"sources":["../../src/components/Navigation/NavigationItem/core/navigationItem.module.css","../../src/components/Navigation/NavigationItem/core/navigationItem.ts"],"sourcesContent":["/* configurable tokens\n*\n* --md-navigation-item-active-background\n*\n* --md-navigation-item-label-color\n* --md-navigation-item-icon-color\n*\n* --md-navigation-item-active-label-color\n* --md-navigation-item-active-icon-color\n*\n* --md-navigation-item-state-layer-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n .item {\n --_md-navigation-item-active-background: var(\n --md-navigation-item-active-background,\n var(--md-sys-color-secondary-container)\n );\n\n --_md-navigation-item-label-color: var(\n --md-navigation-item-label-color,\n var(--md-sys-color-on-surface-variant)\n );\n --_md-navigation-item-icon-color: var(\n --md-navigation-item-icon-color,\n var(--md-sys-color-on-surface-variant)\n );\n\n --_md-navigation-item-active-label-color: var(\n --md-navigation-item-active-label-color,\n var(--md-sys-color-secondary)\n );\n --_md-navigation-item-active-icon-color: var(\n --md-navigation-item-active-icon-color,\n var(--md-sys-color-on-secondary-container)\n );\n\n --_md-navigation-item-state-layer-color: var(\n --md-navigation-item-state-layer-color,\n var(--md-sys-color-on-secondary-container)\n );\n\n --_md-navigation-item-padding-block: var(--md-sys-layout-space-16);\n --_md-navigation-item-padding-inline: var(--md-sys-layout-space-16);\n --_md-navigation-item-gap: var(--md-sys-layout-space-8);\n\n --_background: transparent;\n --_icon-color: var(--_md-navigation-item-icon-color);\n --_label-color: var(--_md-navigation-item-label-color);\n\n --_state-color: var(--_md-navigation-item-state-layer-color);\n --_state-layer-opacity: 0;\n\n --_state-layer-color: rgb(\n from var(--_state-color) r g b /\n var(--_state-layer-opacity)\n );\n\n all: unset;\n\n position: relative;\n\n background-color: var(--_background);\n color: var(--_label-color);\n\n padding-inline: var(--_md-navigation-item-padding-inline);\n padding-block: var(--_md-navigation-item-padding-block);\n\n display: flex;\n align-items: center;\n gap: var(--_md-navigation-item-gap);\n\n cursor: pointer;\n border-radius: var(--md-sys-shape-corner-radius-full);\n\n &[data-active] {\n --_background: var(--_md-navigation-item-active-background);\n --_icon-color: var(--_md-navigation-item-active-icon-color);\n --_label-color: var(--_md-navigation-item-active-label-color);\n }\n\n [data-nav-icon] {\n color: var(--_icon-color);\n }\n\n &[data-disabled] {\n cursor: default;\n }\n\n &[data-hovered] {\n --_state-layer-opacity: var(--md-sys-state-hover);\n }\n\n &[data-focus-visible] {\n --_state-layer-opacity: var(--md-sys-state-focus);\n }\n\n &[data-pressed] {\n --_state-layer-opacity: var(--md-sys-state-pressed);\n\n --_background: var(--_md-navigation-item-active-background);\n --_icon-color: var(--_md-navigation-item-active-icon-color);\n --_label-color: var(--_md-navigation-item-active-label-color);\n }\n }\n\n /* state layer */\n .item::before {\n content: \"\";\n\n position: absolute;\n inset: 0;\n border-radius: inherit;\n\n background-color: var(--_state-layer-color);\n\n transition: background-color var(--md-sys-motion-standard-fast-spatial)\n var(--md-sys-motion-standard-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .item[data-focus-visible] {\n --focus-indicator-thickness: calc(3 * var(--dp, 1px));\n --focus-indicator-offset: calc(2 * var(--dp, 1px));\n --focus-indicator-color: var(--md-sys-color-secondary);\n\n outline-width: var(--focus-indicator-thickness);\n outline-style: solid;\n outline-offset: var(--focus-indicator-offset);\n outline-color: var(--focus-indicator-color);\n\n z-index: 1;\n }\n}\n","import type { LucideIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { typography } from \"@/utils\";\nimport styles from \"./navigationItem.module.css\";\n\nexport interface NavigationItemProps {\n label: ReactNode;\n icon?: LucideIcon;\n activeIcon?: LucideIcon;\n isActive?: boolean;\n}\n\nexport const NavigationItemLabelTypography = typography.titleSmall;\nexport const NavigationItemStyles = styles[\"item\"];\n"],"mappings":";oCCYa,IAAgC,EAAW,YAC3C,IAAuB,EAAO"}
|