@vygruppen/spor-react 11.1.1 → 11.1.3

package/package.json

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

package/src/input/CountryCodeSelect.tsx

@@ -35,7 +35,7 @@ export const CountryCodeSelect = (props: CountryCodeSelectProps) => {
     <InfoSelect
       label={t(texts.countryCode)}
       isLabelSrOnly={true}
-      items={callingCodes as any}
+      items={callingCodes}
       variant={props.variant}
       {...props}
     >

package/src/input/Input.tsx

@@ -61,7 +61,7 @@ export const Input = forwardRef<InputProps, "input">(
           overflow="hidden"
           placeholder=" " // This is needed to make the label work as expected
         />
-        <FormLabel htmlFor={inputId} id={labelId}>
+        <FormLabel htmlFor={inputId} id={labelId} pointerEvents="none">
           {label}
         </FormLabel>
         {rightIcon && (

package/src/input/PasswordInput.tsx

@@ -25,7 +25,9 @@ export const PasswordInput = forwardRef<PasswordInputProps, "input">(
     const inputId = id ?? formControlProps?.id ?? autoGeneratedId;
     return (
       <InputGroup position="relative">
-        {leftIcon && <InputLeftElement>{leftIcon}</InputLeftElement>}
+        {leftIcon && (
+          <InputLeftElement pointerEvents="none">{leftIcon}</InputLeftElement>
+        )}
         <ChakraInput
           {...props}
           id={inputId}

package/src/input/PhoneNumberInput.tsx

@@ -4,9 +4,10 @@ import {
   forwardRef,
   useControllableState,
 } from "@chakra-ui/react";
-import React, { Suspense } from "react";
-import { InfoSelect, Input, Item, createTexts, useTranslation } from "..";
+import React from "react";
+import { Input, createTexts, useTranslation } from "..";
 import { AttachedInputs } from "./AttachedInputs";
+import { CountryCodeSelect } from "./CountryCodeSelect";
 
 type CountryCodeAndPhoneNumber = {
   countryCode: string;
@@ -71,34 +72,19 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
     });
     return (
       <AttachedInputs {...boxProps}>
-        <Suspense
-          fallback={
-            <InfoSelect
-              isLabelSrOnly
-              label={t(texts.countryCodeLabel)}
-              width="6.25rem"
-              height="100%"
-              value="+47"
-              variant={variant}
-            >
-              <Item key="+47">+47</Item>
-            </InfoSelect>
+        <CountryCodeSelect
+          value={value.countryCode}
+          onChange={(countryCode) =>
+            onChange({
+              countryCode: countryCode as string,
+              nationalNumber: value.nationalNumber,
+            })
           }
-        >
-          <LazyCountryCodeSelect
-            value={value.countryCode}
-            onChange={(countryCode) =>
-              onChange({
-                countryCode: countryCode as string,
-                nationalNumber: value.nationalNumber,
-              })
-            }
-            name={name ? `${name}-country-code` : "country-code"}
-            height="100%"
-            width="6.25rem"
-            variant={variant}
-          />
-        </Suspense>
+          name={name ? `${name}-country-code` : "country-code"}
+          height="100%"
+          width="6.25rem"
+          variant={variant}
+        />
         <Input
           ref={ref}
           type="tel"
@@ -142,5 +128,3 @@ const texts = createTexts({
     sv: "Landskod",
   },
 });
-
-const LazyCountryCodeSelect = React.lazy(() => import("./CountryCodeSelect"));

package/src/input/SearchInput.tsx

@@ -39,7 +39,7 @@ export const SearchInput = forwardRef<SearchInputProps, "input">(
 
     return (
       <InputGroup position="relative" {...outerProps}>
-        <InputLeftElement>
+        <InputLeftElement pointerEvents="none">
           <SearchOutline24Icon />
         </InputLeftElement>
         <ChakraInput

package/src/input/Textarea.tsx

@@ -35,7 +35,11 @@ export const Textarea = forwardRef<TextareaProps, "textarea">((props, ref) => {
     <InputGroup position="relative" {...spacingProps}>
       <ChakraTextarea {...rest} id={inputId} ref={ref} placeholder=" " />
       {label && (
-        <FormLabel htmlFor={inputId} id={`${inputId}-label`}>
+        <FormLabel
+          htmlFor={inputId}
+          id={`${inputId}-label`}
+          pointerEvents="none"
+        >
           {label}
         </FormLabel>
       )}

package/dist/CountryCodeSelect-V422HKUV.mjs

@@ -1,41 +0,0 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-QFSW3GTE.mjs';
-import React from 'react';
-import { getSupportedCallingCodes } from 'awesome-phonenumber';
-
-var prioritizedCountryCodes = [
-  { key: "+47", value: "+47" },
-  { key: "+46", value: "+46" },
-  { key: "+45", value: "+45" }
-];
-var sortedCallingCodes = getSupportedCallingCodes().sort((a, b) => Number(a) - Number(b)).map((code) => ({
-  key: `+${code}`,
-  value: `+${code}`
-})).filter(
-  (code) => !prioritizedCountryCodes.some((pCode) => pCode.key === code.key)
-);
-var callingCodes = [...prioritizedCountryCodes, ...sortedCallingCodes];
-var CountryCodeSelect = (props) => {
-  const { t } = useTranslation();
-  return /* @__PURE__ */ React.createElement(
-    InfoSelect,
-    {
-      label: t(texts.countryCode),
-      isLabelSrOnly: true,
-      items: callingCodes,
-      variant: props.variant,
-      ...props
-    },
-    (item) => /* @__PURE__ */ React.createElement(Item, { key: item.key }, item.key)
-  );
-};
-var CountryCodeSelect_default = CountryCodeSelect;
-var texts = createTexts({
-  countryCode: {
-    nb: "Landkode",
-    nn: "Landskode",
-    en: "Country code",
-    sv: "Landskod"
-  }
-});
-
-export { CountryCodeSelect, CountryCodeSelect_default as default };