@trackunit/react-components 0.1.65-alpha-0b53b6cf53.0 → 0.1.65

package/package.json

@@ -1,27 +1,28 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.65-alpha-0b53b6cf53.0",
+  "version": "0.1.65",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
-    "@trackunit/css-core": "0.0.75-alpha-0b53b6cf53.0",
+    "@trackunit/css-core": "0.0.74",
     "@trackunit/tailwind-styled-components": "0.0.54",
+    "@trackunit/ui-design-tokens": "0.0.60",
     "react": "18.2.0",
-    "@trackunit/ui-design-tokens": "0.0.61-alpha-0b53b6cf53.0",
     "react-use": "17.4.0",
     "date-fns": "2.29.3",
     "react-day-picker": "8.3.7",
     "@floating-ui/react": "0.15.1",
-    "@trackunit/ui-icons": "0.0.61-alpha-0b53b6cf53.0",
+    "@trackunit/ui-icons": "0.0.60",
     "react-browser-hooks": "2.2.4",
     "react-useportal": "1.0.17",
+    "libphonenumber-js": "1.10.24",
     "react-router-dom": "6.4.5",
     "react-helmet-async": "1.3.0",
     "react-select": "5.7.0",
     "react-dom": "18.2.0"
   },
   "module": "./index.js",
-  "main": "./index.cjs",
+  "main": "./index.js",
   "type": "module",
   "types": "./src/index.d.ts",
   "peerDependencies": {}

package/src/components/ActionButton/ActionButton.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+/// <reference types="react" />
 import { CommonProps } from "../../common";
 import { ButtonCommonProps } from "../buttons";
 type ActionType = "PHONE_NUMBER" | "WEB_ADDRESS" | "EMAIL";
@@ -12,10 +12,6 @@ interface ActionButtonProps extends ButtonCommonProps, CommonProps {
      * The value to be passed into the button.
      */
     value?: string | null;
-    /**
-     * The onClick event.
-     */
-    onClick?: (e: React.MouseEvent) => void;
     /**
      *  The size of the icon.
      */

package/src/components/PhoneField/PhoneField.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { FormGroupProps } from "../FormGroup/FormGroup";
+import { PhoneInputProps } from "../PhoneInput/PhoneInput";
+type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+export interface PhoneFieldProps extends FormGroupExposedProps, PhoneInputProps {
+    /**
+     * If a value is set, the field is rendered in its invalid state.
+     */
+    errorMessage?: string;
+}
+/**
+ * The PhoneField component is used to enter phone number.
+ * It is a wrapper around the PhoneInput component and the FormGroup component.
+ * It is used to render a phone number field with a label, a tip, a help text, a help addon and an error message.
+ *
+ * @param {string} [label] - The label for the component.
+ * @param {string} [tip] - The tip for the component.
+ * @param {string} [helpText] - The help text for the component.
+ * @param {string} [helpAddon] - The help addon for the component.
+ * @param {string} [errorMessage] - The error message for the component.
+ * @param {string} [defaultValue] - The default value for the component.
+ * @param {boolean} [disabled=false] - Whether the component is disabled or not.
+ * @param {string} [fieldSize="medium"] - The size of the input field.
+ * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
+ * @returns {JSX.Element} - The PhoneField component.
+ */
+export declare const PhoneField: import("react").ForwardRefExoticComponent<PhoneFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/src/components/PhoneInput/CountryCodeSelect.d.ts

@@ -0,0 +1,16 @@
+import { Dispatch, SetStateAction } from "react";
+import { CountryCode } from "./CountryCodes";
+interface CountryCodeSelectProps {
+    excludedCountries?: CountryCode;
+    countryCode?: string;
+    setCountryCode: Dispatch<SetStateAction<string | undefined>>;
+    isInvalid?: boolean;
+}
+/**
+ * The CountryCodeSelect component is used to select a country code for a phone number.
+ *
+ * @param {CountryCodeSelectProps} props - The props for the CountryCodeSelect component
+ * @returns {JSX.Element} CountryCodeSelect component
+ */
+export declare const CountryCodeSelect: ({ excludedCountries, countryCode, isInvalid, setCountryCode, }: CountryCodeSelectProps) => JSX.Element;
+export {};

package/src/components/PhoneInput/CountryCodes.d.ts

@@ -0,0 +1,5 @@
+export declare const countryCodes: {
+    label: string;
+    value: string;
+}[];
+export type CountryCode = typeof countryCodes;

package/src/components/PhoneInput/PhoneInput.d.ts

@@ -1,20 +1,25 @@
-import * as React from "react";
-import { CommonProps } from "../../common";
+/// <reference types="react" />
 import { BaseInputProps } from "../BaseInput";
-export interface PhoneInputProps extends BaseInputProps, CommonProps {
+type BaseInputExposedProps = Omit<BaseInputProps, "actions">;
+export interface PhoneInputProps extends BaseInputExposedProps {
     /**
-     * A flag to disable the phone button.
+     * To disable the action button.
+     *
+     * @default false
+     * @memberof PhoneInputProps
+     * @example
+     * <PhoneInput disableAction />
      */
     disableAction?: boolean;
 }
 /**
- * A Phone Input component is used for input of the type tel.
+ * A component for inputting phone numbers with an optional action button for initiating a phone call.
  *
- * It has an ActionButton which sends an phone call to the specified number using "tel:" link.
- *
- * Extends props of BaseInput.
- *
- * A reference to the input element is provided as the `ref` prop.
- * For specific input types make sure to use the corresponding input component.
+ * @param {string} [dataTestId] - The data test ID for the component.
+ * @param {boolean} [disabled=false] - Whether the component is disabled or not.
+ * @param {string} [fieldSize="medium"] - The size of the input field.
+ * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
+ * @returns {JSX.Element} - The PhoneInput component.
  */
-export declare const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const PhoneInput: import("react").ForwardRefExoticComponent<PhoneInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/src/components/index.d.ts

@@ -26,6 +26,7 @@ export * from "./NumberField/NumberField";
 export * from "./NumberInput/NumberInput";
 export * from "./PageHeader";
 export * from "./Pagination/Pagination";
+export * from "./PhoneField/PhoneField";
 export * from "./PhoneInput";
 export * from "./Popover";
 export * from "./Popover/Popover";