@vygruppen/spor-react 11.1.3 → 11.1.4

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 (6) hide show
  1. package/.turbo/turbo-build.log +6 -6
  2. package/CHANGELOG.md +6 -0
  3. package/dist/index.js +30 -2
  4. package/dist/index.mjs +30 -2
  5. package/package.json +1 -1
  6. package/src/input/Input.tsx +26 -1
package/.turbo/turbo-build.log CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- > @vygruppen/spor-react@11.1.3 build
2
+ > @vygruppen/spor-react@11.1.4 build
3
3
  > tsup src/index.tsx --dts --treeshake --format cjs,esm
4
4
 
5
5
  CLI Building entry: src/index.tsx
@@ -9,10 +9,10 @@
9
9
  CJS Build start
10
10
  ESM Build start
11
11
  DTS Build start
12
- CJS dist/index.js 449.00 KB
13
- CJS ⚡️ Build success in 1957ms
14
- ESM dist/index.mjs 429.50 KB
15
- ESM ⚡️ Build success in 1959ms
16
- DTS ⚡️ Build success in 16234ms
12
+ CJS dist/index.js 449.60 KB
13
+ CJS ⚡️ Build success in 1977ms
14
+ ESM dist/index.mjs 430.10 KB
15
+ ESM ⚡️ Build success in 1978ms
16
+ DTS ⚡️ Build success in 15382ms
17
17
  DTS dist/index.d.ts 343.31 KB
18
18
  DTS dist/index.d.mts 343.31 KB
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @vygruppen/spor-react
2
2
 
3
+ ## 11.1.4
4
+
5
+ ### Patch Changes
6
+
7
+ - cd49b43: Set correct position of label for input elements that caused the dance during hydration step
8
+
3
9
  ## 11.1.3
4
10
 
5
11
  ### Patch Changes
package/dist/index.js CHANGED
@@ -1503,9 +1503,37 @@ var Input = react.forwardRef(
1503
1503
  "aria-labelledby": labelId,
1504
1504
  ref,
1505
1505
  overflow: "hidden",
1506
- placeholder: " "
1506
+ placeholder: " ",
1507
+ css: {
1508
+ "&::-webkit-search-cancel-button": {
1509
+ WebkitAppearance: "none"
1510
+ }
1511
+ }
1507
1512
  }
1508
- ), /* @__PURE__ */ React86__namespace.default.createElement(react.FormLabel, { htmlFor: inputId, id: labelId, pointerEvents: "none" }, label), rightIcon && /* @__PURE__ */ React86__namespace.default.createElement(react.InputRightElement, { pointerEvents: "none" }, rightIcon));
1513
+ ), /* @__PURE__ */ React86__namespace.default.createElement(
1514
+ react.FormLabel,
1515
+ {
1516
+ htmlFor: inputId,
1517
+ id: labelId,
1518
+ pointerEvents: "none",
1519
+ sx: {
1520
+ position: "absolute",
1521
+ left: "2.6rem",
1522
+ top: "26.9%",
1523
+ fontSize: "1.13rem",
1524
+ pointerEvents: "none",
1525
+ margin: 0,
1526
+ zIndex: 2,
1527
+ "input:focus + &, input[data-has-value] + &": {
1528
+ color: "var(--chakra-colors-gray-600)"
1529
+ },
1530
+ "input[data-has-value] + &": {
1531
+ transform: "translateY(-40%) scale(0.9)"
1532
+ }
1533
+ }
1534
+ },
1535
+ label
1536
+ ), rightIcon && /* @__PURE__ */ React86__namespace.default.createElement(react.InputRightElement, { pointerEvents: "none" }, rightIcon));
1509
1537
  }
1510
1538
  );
1511
1539
  var InputLeftElement2 = react.forwardRef(
package/dist/index.mjs CHANGED
@@ -1483,9 +1483,37 @@ var Input = forwardRef(
1483
1483
  "aria-labelledby": labelId,
1484
1484
  ref,
1485
1485
  overflow: "hidden",
1486
- placeholder: " "
1486
+ placeholder: " ",
1487
+ css: {
1488
+ "&::-webkit-search-cancel-button": {
1489
+ WebkitAppearance: "none"
1490
+ }
1491
+ }
1487
1492
  }
1488
- ), /* @__PURE__ */ React86__default.createElement(FormLabel$1, { htmlFor: inputId, id: labelId, pointerEvents: "none" }, label), rightIcon && /* @__PURE__ */ React86__default.createElement(InputRightElement, { pointerEvents: "none" }, rightIcon));
1493
+ ), /* @__PURE__ */ React86__default.createElement(
1494
+ FormLabel$1,
1495
+ {
1496
+ htmlFor: inputId,
1497
+ id: labelId,
1498
+ pointerEvents: "none",
1499
+ sx: {
1500
+ position: "absolute",
1501
+ left: "2.6rem",
1502
+ top: "26.9%",
1503
+ fontSize: "1.13rem",
1504
+ pointerEvents: "none",
1505
+ margin: 0,
1506
+ zIndex: 2,
1507
+ "input:focus + &, input[data-has-value] + &": {
1508
+ color: "var(--chakra-colors-gray-600)"
1509
+ },
1510
+ "input[data-has-value] + &": {
1511
+ transform: "translateY(-40%) scale(0.9)"
1512
+ }
1513
+ }
1514
+ },
1515
+ label
1516
+ ), rightIcon && /* @__PURE__ */ React86__default.createElement(InputRightElement, { pointerEvents: "none" }, rightIcon));
1489
1517
  }
1490
1518
  );
1491
1519
  var InputLeftElement2 = forwardRef(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vygruppen/spor-react",
3
- "version": "11.1.3",
3
+ "version": "11.1.4",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",
package/src/input/Input.tsx CHANGED
@@ -60,8 +60,33 @@ export const Input = forwardRef<InputProps, "input">(
60
60
  ref={ref}
61
61
  overflow="hidden"
62
62
  placeholder=" " // This is needed to make the label work as expected
63
+ css={{
64
+ "&::-webkit-search-cancel-button": {
65
+ WebkitAppearance: "none",
66
+ },
67
+ }}
63
68
  />
64
- <FormLabel htmlFor={inputId} id={labelId} pointerEvents="none">
69
+
70
+ <FormLabel
71
+ htmlFor={inputId}
72
+ id={labelId}
73
+ pointerEvents="none"
74
+ sx={{
75
+ position: "absolute",
76
+ left: "2.6rem",
77
+ top: "26.9%",
78
+ fontSize: "1.13rem",
79
+ pointerEvents: "none",
80
+ margin: 0,
81
+ zIndex: 2,
82
+ "input:focus + &, input[data-has-value] + &": {
83
+ color: "var(--chakra-colors-gray-600)",
84
+ },
85
+ "input[data-has-value] + &": {
86
+ transform: "translateY(-40%) scale(0.9)",
87
+ },
88
+ }}
89
+ >
65
90
  {label}
66
91
  </FormLabel>
67
92
  {rightIcon && (