@lifesg/react-design-system 1.0.0-alpha.2 → 1.0.0-alpha.21

package/phone-number-input/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@lifesg/react-design-system/phone-number-input",
+  "private": true,
+  "main": "../cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts"
+}

package/phone-number-input/phone-number-input-helper.d.ts

@@ -0,0 +1,5 @@
+import { CountryValue } from "./types";
+export declare namespace PhoneNumberInputHelper {
+    const getCountries: () => CountryValue[];
+    const formatNumber: (numberText?: string, country?: CountryValue) => string;
+}

package/phone-number-input/phone-number-input.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { PhoneNumberInputProps } from "./types";
+export declare const PhoneNumberInput: ({ onChange, value, allowClear, onClear, onBlur, error, fixedCountry, optionPlaceholder, optionSearchPlaceholder, enableSearch, onHideOptions, onShowOptions, placeholder, ...otherProps }: PhoneNumberInputProps) => JSX.Element;

package/phone-number-input/types.d.ts

@@ -0,0 +1,51 @@
+import React from "react";
+export interface CountryValue {
+    name: string;
+    regions: string[];
+    iso2: string;
+    countryCode: string;
+    format: string;
+}
+export interface PhoneNumberInputValue {
+    /**
+     * You may choose to specify with or without the +. The return value
+     * will always contain the +
+     */
+    countryCode?: string | undefined;
+    number?: string | undefined;
+}
+export interface PhoneNumberInputProps extends React.AriaAttributes {
+    /** The value of the input */
+    value?: PhoneNumberInputValue | undefined;
+    error?: boolean | undefined;
+    /** Specifies if the clear button should be present in the input */
+    allowClear?: boolean | undefined;
+    "data-testid"?: string | undefined;
+    className?: string | undefined;
+    /**
+     * Specifies if the country code is a fixed value and the user
+     * cannot select another option
+     */
+    fixedCountry?: boolean | undefined;
+    onChange?: ((value: PhoneNumberInputValue) => void) | undefined;
+    /** Called when the clear button in the input field is clicked */
+    onClear?: () => void | undefined;
+    /** Called when a defocus happens */
+    onBlur?: (() => void) | undefined;
+    /** The placeholder value for the dropdown selector */
+    optionPlaceholder?: string | undefined;
+    /** The placeholder value for the dropdown search */
+    optionSearchPlaceholder?: string | undefined;
+    /** Specifies if search is enabled in the dropdown */
+    enableSearch?: boolean | undefined;
+    /** Called when the dropdown is dismissed */
+    onHideOptions?: (() => void) | undefined;
+    /** Called when the dropdown is visible */
+    onShowOptions?: (() => void) | undefined;
+    disabled?: boolean | undefined;
+    name?: string | undefined;
+    pattern?: string | undefined;
+    placeholder?: string | undefined;
+    readOnly?: boolean | undefined;
+    id?: string | undefined;
+}