@vygruppen/spor-react 11.1.0 → 11.1.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@11.1.0 build
+> @vygruppen/spor-react@11.1.1 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -10,11 +10,11 @@
 ESM Build start
 DTS Build start
 ESM dist/index.mjs                      2.16 KB
-ESM dist/CountryCodeSelect-YB3M3566.mjs 1.22 KB
-ESM dist/chunk-FBD6IXFW.mjs             428.46 KB
-ESM ⚡️ Build success in 2283ms
-CJS dist/index.js 542.28 KB
-CJS ⚡️ Build success in 2283ms
-DTS ⚡️ Build success in 15944ms
+ESM dist/CountryCodeSelect-V422HKUV.mjs 1.22 KB
+ESM dist/chunk-QFSW3GTE.mjs             428.91 KB
+ESM ⚡️ Build success in 2226ms
+CJS dist/index.js 542.81 KB
+CJS ⚡️ Build success in 2227ms
+DTS ⚡️ Build success in 15804ms
 DTS dist/index.d.ts  343.31 KB
 DTS dist/index.d.mts 343.31 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @vygruppen/spor-react
 
+## 11.1.1
+
+### Patch Changes
+
+- c0e50b7: Fixed searchinput so it is more SSR friendly
+
 ## 11.1.0
 
 ### Minor Changes

package/dist/{CountryCodeSelect-YB3M3566.mjs → CountryCodeSelect-V422HKUV.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-FBD6IXFW.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-QFSW3GTE.mjs';
 import React from 'react';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
 

package/dist/{chunk-FBD6IXFW.mjs → chunk-QFSW3GTE.mjs}

@@ -1844,7 +1844,7 @@ var texts4 = createTexts({
     sv: "Landskod"
   }
 });
-var LazyCountryCodeSelect = React85__default.lazy(() => import('./CountryCodeSelect-YB3M3566.mjs'));
+var LazyCountryCodeSelect = React85__default.lazy(() => import('./CountryCodeSelect-V422HKUV.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React85__default.createElement(Radio$1, { ...props, ref });
 });
@@ -1869,16 +1869,37 @@ var SearchInput = forwardRef(
         ...innerProps,
         id: inputId,
         type: "search",
+        placeholder: " ",
         css: {
           "&::-webkit-search-cancel-button": {
             WebkitAppearance: "none"
           }
         },
         ref,
-        placeholder: " ",
         "data-attachable": true
       }
-    ), /* @__PURE__ */ React85__default.createElement(FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label ?? t2(texts5.label)), showClearButton && /* @__PURE__ */ React85__default.createElement(InputRightElement2, { width: "fit-content" }, /* @__PURE__ */ React85__default.createElement(
+    ), /* @__PURE__ */ React85__default.createElement(
+      FormLabel,
+      {
+        htmlFor: inputId,
+        sx: {
+          position: "absolute",
+          left: "2.6rem",
+          top: "26.9%",
+          fontSize: "1.13rem",
+          pointerEvents: "none",
+          margin: 0,
+          zIndex: 2,
+          "input:focus + &, input[data-has-value] + &": {
+            color: "var(--chakra-colors-gray-600)"
+          },
+          "input[data-has-value] + &": {
+            transform: "translateY(-40%) scale(0.9)"
+          }
+        }
+      },
+      label ?? t2(texts5.label)
+    ), showClearButton && /* @__PURE__ */ React85__default.createElement(InputRightElement2, { width: "fit-content" }, /* @__PURE__ */ React85__default.createElement(
       IconButton$1,
       {
         variant: "ghost",

package/dist/index.js

@@ -2098,16 +2098,37 @@ var init_SearchInput = __esm({
             ...innerProps,
             id: inputId,
             type: "search",
+            placeholder: " ",
             css: {
               "&::-webkit-search-cancel-button": {
                 WebkitAppearance: "none"
               }
             },
             ref,
-            placeholder: " ",
             "data-attachable": true
           }
-        ), /* @__PURE__ */ React86__namespace.default.createElement(exports.FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label ?? t2(texts6.label)), showClearButton && /* @__PURE__ */ React86__namespace.default.createElement(exports.InputRightElement, { width: "fit-content" }, /* @__PURE__ */ React86__namespace.default.createElement(
+        ), /* @__PURE__ */ React86__namespace.default.createElement(
+          exports.FormLabel,
+          {
+            htmlFor: inputId,
+            sx: {
+              position: "absolute",
+              left: "2.6rem",
+              top: "26.9%",
+              fontSize: "1.13rem",
+              pointerEvents: "none",
+              margin: 0,
+              zIndex: 2,
+              "input:focus + &, input[data-has-value] + &": {
+                color: "var(--chakra-colors-gray-600)"
+              },
+              "input[data-has-value] + &": {
+                transform: "translateY(-40%) scale(0.9)"
+              }
+            }
+          },
+          label ?? t2(texts6.label)
+        ), showClearButton && /* @__PURE__ */ React86__namespace.default.createElement(exports.InputRightElement, { width: "fit-content" }, /* @__PURE__ */ React86__namespace.default.createElement(
           react.IconButton,
           {
             variant: "ghost",

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, CardSelect, CargonetLogo, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, ServiceAlert, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-FBD6IXFW.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, CardSelect, CargonetLogo, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, ServiceAlert, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-QFSW3GTE.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "11.1.0",
+  "version": "11.1.1",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/input/SearchInput.tsx

@@ -48,16 +48,33 @@ export const SearchInput = forwardRef<SearchInputProps, "input">(
           {...innerProps}
           id={inputId}
           type="search"
+          placeholder=" "
           css={{
             "&::-webkit-search-cancel-button": {
               WebkitAppearance: "none",
             },
           }}
           ref={ref}
-          placeholder=" " // This is needed to make the label work as expected
           data-attachable
         />
-        <FormLabel htmlFor={inputId} pointerEvents="none">
+        <FormLabel
+          htmlFor={inputId}
+          sx={{
+            position: "absolute",
+            left: "2.6rem",
+            top: "26.9%",
+            fontSize: "1.13rem",
+            pointerEvents: "none",
+            margin: 0,
+            zIndex: 2,
+            "input:focus + &, input[data-has-value] + &": {
+              color: "var(--chakra-colors-gray-600)",
+            },
+            "input[data-has-value] + &": {
+              transform: "translateY(-40%) scale(0.9)",
+            },
+          }}
+        >
           {label ?? t(texts.label)}
         </FormLabel>
         {showClearButton && (