@koobiq/react-components 0.2.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/components/FieldComponents/FieldContentGroup/FieldContentGroup.js +78 -73
  2. package/dist/components/FieldComponents/FieldContentGroup/FieldContentGroup.module.css.js +3 -0
  3. package/dist/style.css +2 -2
  4. package/package.json +5 -5
package/dist/components/FieldComponents/FieldContentGroup/FieldContentGroup.js CHANGED
@@ -1,81 +1,86 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
- import { forwardRef } from "react";
3
- import { isNotNil, clsx } from "@koobiq/react-core";
2
+ import { forwardRef, Children, isValidElement, cloneElement } from "react";
3
+ import { isNotNil, useFocusRing, mergeProps, clsx } from "@koobiq/react-core";
4
4
  import { useInputContext, Group } from "@koobiq/react-primitives";
5
5
  import s from "./FieldContentGroup.module.css.js";
6
6
  import { FieldContentGroupContext } from "./FieldContentGroupContext.js";
7
7
  import { FieldAddon } from "../FieldAddon/FieldAddon.js";
8
- const FieldContentGroup = forwardRef(
9
- ({
10
- variant = "filled",
11
- isInvalid = false,
12
- isDisabled = false,
13
- children,
14
- className,
15
- startAddon,
16
- endAddon,
17
- slotProps,
18
- ...other
19
- }, ref) => {
20
- const { value } = useInputContext();
21
- const hasStartAddon = !!startAddon;
22
- const hasEndAddon = !!endAddon;
23
- const hasValue = isNotNil(value);
24
- return /* @__PURE__ */ jsx(
25
- Group,
26
- {
27
- className: clsx(
28
- s.base,
29
- s[variant],
30
- isInvalid && s.invalid,
31
- isDisabled && s.disabled,
32
- hasStartAddon && s.hasStartAddon,
33
- hasEndAddon && s.hasEndAddon,
34
- className
35
- ),
36
- isInvalid,
37
- isDisabled,
38
- ...other,
39
- ref,
40
- children: ({ isHovered, isFocusWithin, isDisabled: isDisabled2, isInvalid: isInvalid2 }) => /* @__PURE__ */ jsxs(
41
- FieldContentGroupContext.Provider,
42
- {
43
- value: {
44
- hasValue,
45
- isHovered,
46
- isInvalid: isInvalid2,
47
- isDisabled: isDisabled2,
48
- isFocusWithin
49
- },
50
- children: [
51
- /* @__PURE__ */ jsx(
52
- FieldAddon,
53
- {
54
- placement: "start",
55
- isInvalid: isInvalid2,
56
- isDisabled: isDisabled2,
57
- ...slotProps?.startAddon,
58
- children: startAddon
59
- }
60
- ),
61
- children,
62
- /* @__PURE__ */ jsx(
63
- FieldAddon,
64
- {
65
- placement: "end",
66
- isInvalid: isInvalid2,
67
- isDisabled: isDisabled2,
68
- ...slotProps?.endAddon,
69
- children: endAddon
70
- }
71
- )
72
- ]
73
- }
74
- )
75
- }
76
- );
77
- }
78
- );
8
+ const FieldContentGroup = forwardRef(function FieldContentGroup2({
9
+ variant = "filled",
10
+ isInvalid = false,
11
+ isDisabled = false,
12
+ children,
13
+ className,
14
+ startAddon,
15
+ endAddon,
16
+ slotProps,
17
+ ...other
18
+ }, ref) {
19
+ const { value } = useInputContext();
20
+ const hasStartAddon = !!startAddon;
21
+ const hasEndAddon = !!endAddon;
22
+ const hasValue = isNotNil(value);
23
+ const { focusProps, isFocused } = useFocusRing({ within: true });
24
+ const focusManagedChildren = Children.map(children, (child) => {
25
+ if (!isValidElement(child)) return child;
26
+ const merged = mergeProps(focusProps, child.props);
27
+ return cloneElement(child, merged);
28
+ });
29
+ return /* @__PURE__ */ jsx(
30
+ Group,
31
+ {
32
+ className: clsx(
33
+ s.base,
34
+ s[variant],
35
+ isInvalid && s.invalid,
36
+ isDisabled && s.disabled,
37
+ isFocused && s.focused,
38
+ hasStartAddon && s.hasStartAddon,
39
+ hasEndAddon && s.hasEndAddon,
40
+ className
41
+ ),
42
+ isInvalid,
43
+ isDisabled,
44
+ ...other,
45
+ ref,
46
+ children: ({ isHovered, isFocusWithin }) => /* @__PURE__ */ jsxs(
47
+ FieldContentGroupContext.Provider,
48
+ {
49
+ value: {
50
+ hasValue,
51
+ isHovered,
52
+ isInvalid,
53
+ isDisabled,
54
+ isFocusWithin
55
+ },
56
+ children: [
57
+ /* @__PURE__ */ jsx(
58
+ FieldAddon,
59
+ {
60
+ placement: "start",
61
+ isInvalid,
62
+ isDisabled,
63
+ ...slotProps?.startAddon,
64
+ children: startAddon
65
+ }
66
+ ),
67
+ focusManagedChildren,
68
+ /* @__PURE__ */ jsx(
69
+ FieldAddon,
70
+ {
71
+ placement: "end",
72
+ isInvalid,
73
+ isDisabled,
74
+ ...slotProps?.endAddon,
75
+ children: endAddon
76
+ }
77
+ )
78
+ ]
79
+ }
80
+ )
81
+ }
82
+ );
83
+ });
79
84
  FieldContentGroup.displayName = "FieldContentGroup";
80
85
  export {
81
86
  FieldContentGroup
package/dist/components/FieldComponents/FieldContentGroup/FieldContentGroup.module.css.js CHANGED
@@ -3,6 +3,7 @@ const hasStartAddon = "kbq-fieldcontentgroup-hasStartAddon-62fb80";
3
3
  const hasEndAddon = "kbq-fieldcontentgroup-hasEndAddon-e8c20a";
4
4
  const transparent = "kbq-fieldcontentgroup-transparent-ac42b6";
5
5
  const filled = "kbq-fieldcontentgroup-filled-37bb93";
6
+ const focused = "kbq-fieldcontentgroup-focused-8fb205";
6
7
  const invalid = "kbq-fieldcontentgroup-invalid-e4973b";
7
8
  const disabled = "kbq-fieldcontentgroup-disabled-54827b";
8
9
  const s = {
@@ -11,6 +12,7 @@ const s = {
11
12
  hasEndAddon,
12
13
  transparent,
13
14
  filled,
15
+ focused,
14
16
  invalid,
15
17
  disabled
16
18
  };
@@ -19,6 +21,7 @@ export {
19
21
  s as default,
20
22
  disabled,
21
23
  filled,
24
+ focused,
22
25
  hasEndAddon,
23
26
  hasStartAddon,
24
27
  invalid,
package/dist/style.css CHANGED
@@ -2018,7 +2018,7 @@
2018
2018
  --field-content-border-color: var(--kbq-line-contrast-fade);
2019
2019
  }
2020
2020
 
2021
- .kbq-fieldcontentgroup-filled-37bb93:focus-within {
2021
+ .kbq-fieldcontentgroup-filled-37bb93:where(.kbq-fieldcontentgroup-focused-8fb205) {
2022
2022
  --field-content-outline-color: var(--kbq-states-line-focus-theme);
2023
2023
  }
2024
2024
 
@@ -2026,7 +2026,7 @@
2026
2026
  --field-content-border-color: var(--kbq-line-error);
2027
2027
  }
2028
2028
 
2029
- .kbq-fieldcontentgroup-filled-37bb93:where(.kbq-fieldcontentgroup-invalid-e4973b):focus-within {
2029
+ .kbq-fieldcontentgroup-filled-37bb93:where(.kbq-fieldcontentgroup-invalid-e4973b.kbq-fieldcontentgroup-focused-8fb205) {
2030
2030
  --field-content-outline-color: var(--field-content-border-color);
2031
2031
  }
2032
2032
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@koobiq/react-components",
3
- "version": "0.2.0",
3
+ "version": "0.2.1",
4
4
  "license": "MIT",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
@@ -28,10 +28,10 @@
28
28
  "@koobiq/design-tokens": "^3.14.0",
29
29
  "@types/react-transition-group": "^4.4.12",
30
30
  "react-transition-group": "^4.4.5",
31
- "@koobiq/react-core": "0.2.0",
32
- "@koobiq/react-icons": "0.2.0",
33
- "@koobiq/react-primitives": "0.2.0",
34
- "@koobiq/logger": "0.2.0"
31
+ "@koobiq/logger": "0.2.1",
32
+ "@koobiq/react-core": "0.2.1",
33
+ "@koobiq/react-icons": "0.2.1",
34
+ "@koobiq/react-primitives": "0.2.1"
35
35
  },
36
36
  "peerDependencies": {
37
37
  "@koobiq/design-tokens": "^3.14.0",