@tcn/ui 0.9.0 → 0.11.0

package/src/inputs/phone_number_input/phone_number_context.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { makeContextHook } from '../../utils/index.js';
+import { OptionProps } from '../options/option.js';
+import type { CountryCode } from 'libphonenumber-js';
+
+export interface PhoneContext {
+  allowSip: boolean;
+  phoneBook: React.ReactElement<OptionProps>[];
+  ariaPhoneBookButtonLabel?: string;
+  ariaSelectLabel?: string;
+  value: string;
+  setValue: (value: string) => void;
+  setCountry: (country: CountryCode) => void;
+  sipAddress: string;
+  setSipAddress: (address: string) => void;
+  disabled?: boolean;
+  focusNumberInput: boolean;
+  setFocusNumberInput: (focus: boolean) => void;
+}
+
+export const PhoneBookContext = React.createContext<PhoneContext | undefined>(undefined);
+export const usePhoneContext = makeContextHook(PhoneBookContext, 'PhoneBookContext');
+
+export function PhoneBookProvider({
+  children,
+  value,
+}: {
+  value: PhoneContext;
+  children: React.ReactNode;
+}) {
+  return <PhoneBookContext.Provider value={value}>{children}</PhoneBookContext.Provider>;
+}

package/src/inputs/phone_number_input/phone_number_country_select_adapter.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { Select } from '../select/select.js';
+import { Option } from '../options/option.js';
+import clsx from 'clsx';
+import {
+  countriesPhoneInformation,
+  CountryPhoneInformation,
+} from './countries_phone_information.js';
+import { usePhoneContext } from './phone_number_context.js';
+
+export const countryPrefixMap: Map<string, CountryPhoneInformation[]> = new Map();
+export const countryCodeMap: Map<string, CountryPhoneInformation> = new Map();
+countriesPhoneInformation.forEach(i => {
+  countryCodeMap.set(i.code, i);
+  if (countryPrefixMap.has(i.prefix)) {
+    countryPrefixMap.get(i.prefix)?.push(i);
+  } else {
+    countryPrefixMap.set(i.prefix, [i]);
+  }
+});
+
+export function getCountryFromValue(value: string) {
+  for (let x = 5; x > 1; x--) {
+    const prefix = value.slice(0, x);
+    const countriesInformation = countryPrefixMap.get(prefix);
+
+    if (countriesInformation != null) {
+      const countryInformation = countriesInformation.find(c => c.code === 'US');
+
+      if (countryInformation != null) {
+        return countryInformation;
+      }
+    }
+  }
+
+  return countryCodeMap.get('US');
+}
+
+export interface CountryOption {
+  value?: string;
+  label?: string;
+  divider?: boolean;
+}
+
+export interface CountrySelectProps {
+  value?: string;
+  onChange: (value?: string) => void;
+  options: CountryOption[];
+  disabled?: boolean;
+  className?: string;
+  'aria-label'?: string;
+}
+
+export function PhoneNumberCountrySelectAdapter({
+  value,
+  onChange,
+  options,
+  disabled,
+  className,
+  'aria-label': ariaLabel,
+}: CountrySelectProps) {
+  const {
+    setValue,
+    sipAddress,
+    allowSip,
+    value: phoneValue,
+    setFocusNumberInput,
+  } = usePhoneContext();
+
+  const handleChange = React.useCallback(
+    (newValue: string) => {
+      if (newValue === 'SIP') {
+        setValue(`sip:${sipAddress}`);
+        setFocusNumberInput(true);
+        return;
+      }
+
+      onChange(newValue === 'ZZ' ? undefined : newValue);
+    },
+    [onChange, sipAddress, setValue, setFocusNumberInput]
+  );
+
+  const items = options
+    .filter(opt => !opt.divider)
+    .map(opt => countryCodeMap.get(opt.value || 'ZZ'))
+    .filter(country => country != null)
+    .sort((a, b) => {
+      if (a.code === 'US') {
+        return -1;
+      }
+      return Number(a.prefix) - Number(b.prefix);
+    })
+    .map(country => {
+      return (
+        <Option
+          key={country?.code || 'ZZ'}
+          value={country?.code || 'ZZ'}
+          label={country.prefix || ''}
+          keywords={country.keywords}
+        >
+          {`${country.prefix} (${country.code}) ${country.unicodeFlag}`}
+        </Option>
+      );
+    });
+
+  if (allowSip || phoneValue?.startsWith('sip:')) {
+    items.unshift(
+      <Option key="SIP" value="SIP" label="sip:" keywords={['sip']}>
+        SIP
+      </Option>
+    );
+  }
+
+  return (
+    <Select
+      value={value || 'ZZ'}
+      onChange={handleChange}
+      disabled={disabled}
+      aria-label={ariaLabel ?? 'Country'}
+      className={clsx(className, 'tcn-input-group-slot')}
+      width="auto"
+    >
+      {items}
+    </Select>
+  );
+}

package/src/inputs/phone_number_input/phone_number_input.module.css

@@ -1,64 +1,6 @@
-@layer tcn-system {
-  :where(.phone-number-input) {
-    position: relative;
-    opacity: 1;
-    border-radius: 0;
-  }
-
-  :where(.phone-number-input[data-has-phone-book="false"]) {
-    border-end-end-radius: 4px;
-    border-start-end-radius: 4px;
-  }
-
-  :where(.phone-number-input-select) {
-    border-end-end-radius: 0px;
-    border-start-end-radius: 0px;
-  }
-
-  :where(.phone-number-input > *) {
-    position: relative;
-    z-index: 1;
-  }
-
-  :where(.phone-number-input-select:has(button)) {
-    z-index: 2;
-  }
-
-  :where(.phone-number-input-input:has(input:focus)),
-  :where(.phone-number-input-select:focus),
-  :where(.phone-number-input-input:has(input:focus-visible)),
-  :where(.phone-number-input-select:focus-visible) {
-    z-index: 3;
-  }
-
-  :where(.phone-number-input-phone-book-popover) {
-    border-radius: calc(4px * var(--scalar, 1));
-    padding: 8px;
-    background-color: rgba(254, 254, 254, 1);
-    box-shadow: var(--raised-box-shadow), var(--drop-shadow-depth-3);
-    min-width: calc(200px * var(--scalar, 1));
-  }
-
-  :where(.phone-number-input-phone-book) {
-    border-start-start-radius: 0px;
-    border-end-start-radius: 0px;
-    height: calc(26px * var(--scalar, 1)) !important;
-    width: calc(26px * var(--scalar, 1)) !important;
-    min-height: calc(26px * var(--scalar, 1)) !important;
-    min-width: calc(26px * var(--scalar, 1)) !important;
-    max-height: calc(26px * var(--scalar, 1)) !important;
-    max-width: calc(26px * var(--scalar, 1)) !important;
-  }
-
-  :where(.phone-number-input-obfuscated) {
-    user-select: none;
-    -webkit-user-select: none;
-    cursor: default;
-    width: 100%;
-    height: 100%;
-  }
-
-  :where(.phone-number-input-obfuscated::selection) {
-    background: transparent;
-  }
+.phone-number-input {
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 0%;
+  width: auto;
 }

package/src/inputs/phone_number_input/phone_number_input.stories.tsx

@@ -1,160 +1,190 @@
-import React, { useState } from 'react';
-import {
-  PhoneNumberInput as Component,
-  PhoneNumberInputProps,
-} from './phone_number_input.js';
+import { useState } from 'react';
+import { PhoneNumberInput } from './phone_number_input.js';
+import { reset } from '../../themes/index.js';
+import { Theme } from '../../themes/theme.js';
+import { ergoStyleSheet } from '../../themes/themes/ergo/ergo_theme.js';
 import { Option } from '../options/option.js';
-import styles from '../__storybook__/stories.module.css';
+import { BodyText } from '../../typography/index.js';
+import { HStack } from '../../stacks/h_stack.js';
 
-export default {
-  title: 'Inputs/Phone Number Input',
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'A phone number input component that allows the user to enter a phone number.',
-      },
-    },
-  },
-  tags: ['autodocs'],
+export const Default = () => {
+  const [value, setValue] = useState<string | undefined>('');
+  return (
+    <Theme styleSheets={[reset, ergoStyleSheet]}>
+      <HStack>
+        <PhoneNumberInput value={value} onChange={setValue} />
+        <HStack width="200px" hAlign="center">
+          <BodyText>{value && value.length > 0 ? value : 'No Value'}</BodyText>
+        </HStack>
+      </HStack>
+    </Theme>
+  );
+};
+
+export const WithPlaceholder = () => {
+  const [value, setValue] = useState<string | undefined>('');
+  return (
+    <Theme styleSheets={[reset, ergoStyleSheet]}>
+      <HStack>
+        <PhoneNumberInput
+          value={value}
+          onChange={setValue}
+          placeholder="Enter phone number"
+        />
+        <HStack width="200px" hAlign="center">
+          <BodyText>{value && value.length > 0 ? value : 'No Value'}</BodyText>
+        </HStack>
+      </HStack>
+    </Theme>
+  );
+};
+
+export const PrefilledValue = () => {
+  const [value, setValue] = useState<string | undefined>('+19999999999');
+  return (
+    <Theme styleSheets={[reset, ergoStyleSheet]}>
+      <HStack>
+        <PhoneNumberInput value={value} onChange={setValue} />
+        <HStack width="200px" hAlign="center">
+          <BodyText>{value && value.length > 0 ? value : 'No Value'}</BodyText>
+        </HStack>
+      </HStack>
+    </Theme>
+  );
 };
 
-function Base({
-  value: defaultValue,
-  ...props
-}: Omit<PhoneNumberInputProps, 'onChange'>) {
-  const [value, setValue] = useState<string>(defaultValue || '');
+export const Disabled = () => {
+  const [value, setValue] = useState<string | undefined>('+12025551234');
   return (
-    <Component
-      value={value}
-      onChange={value => {
-        setValue(value);
-      }}
-      {...props}
-    />
+    <Theme styleSheets={[reset, ergoStyleSheet]}>
+      <HStack>
+        <PhoneNumberInput value={value} onChange={setValue} disabled>
+          <Option value="+14355865953" label="John Doe" keywords={['john', 'doe']}>
+            John Doe - +1 (435) 586-5953
+          </Option>
+          <Option value="+984355865954" label="Jane Smith" keywords={['jane', 'smith']}>
+            Jane Smith - +98 (435) 586-5954
+          </Option>
+          <Option value="+14355865955" label="Bob Johnson" keywords={['bob', 'johnson']}>
+            Bob Johnson - +1 (435) 586-5955
+          </Option>
+        </PhoneNumberInput>
+        <HStack width="200px" hAlign="center">
+          <BodyText>{value && value.length > 0 ? value : 'No Value'}</BodyText>
+        </HStack>
+      </HStack>
+    </Theme>
   );
-}
+};
 
-export function PhoneNumberInput() {
+export const DefaultCountryGB = () => {
+  const [value, setValue] = useState<string | undefined>('');
   return (
-    <table className={styles.story}>
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Component</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>Baseline</td>
-          <td>
-            <Base />
-          </td>
-        </tr>
-        <tr>
-          <td>Disabled</td>
-          <td>
-            <Base disabled />
-          </td>
-        </tr>
-        <tr>
-          <td>Disabled Phone Number</td>
-          <td>
-            <Base disabledPhoneNumber>
-              <Option value="+14355865953" label="John Doe" keywords={['john', 'doe']}>
-                John Doe - +1 (435) 586-5953
-              </Option>
-              <Option
-                value="+984355865954"
-                label="Jane Smith"
-                keywords={['jane', 'smith']}
-              >
-                Jane Smith - +98 (435) 586-5954
-              </Option>
-              <Option
-                value="+14355865955"
-                label="Bob Johnson"
-                keywords={['bob', 'johnson']}
-              >
-                Bob Johnson - +1 (435) 586-5955
-              </Option>
-            </Base>
-          </td>
-        </tr>
-        <tr>
-          <td>With Value</td>
-          <td>
-            <Base value="+14355865953" />
-          </td>
-        </tr>
-        <tr>
-          <td>Allowed Country Codes</td>
-          <td>
-            <Base allowedCountryCodes={['US', 'RU', 'CN']} />
-          </td>
-        </tr>
-        <tr>
-          <td>Phone Book</td>
-          <td>
-            <Base>
-              <Option value="+14355865953" label="John Doe" keywords={['john', 'doe']}>
-                John Doe - +1 (435) 586-5953
-              </Option>
-              <Option
-                value="+984355865954"
-                label="Jane Smith"
-                keywords={['jane', 'smith']}
-              >
-                Jane Smith - +98 (435) 586-5954
-              </Option>
-              <Option
-                value="+14355865955"
-                label="Bob Johnson"
-                keywords={['bob', 'johnson']}
-              >
-                Bob Johnson - +1 (435) 586-5955
-              </Option>
-              <Option
-                value="+14355865956"
-                label="Obfuscated Number"
-                keywords={['obfuscated', 'number']}
-                obfuscate={true}
-              >
-                Obfuscated Number
-              </Option>
-            </Base>
-          </td>
-        </tr>
+    <Theme styleSheets={[reset, ergoStyleSheet]}>
+      <HStack>
+        <PhoneNumberInput value={value} onChange={setValue} defaultCountry="GB" />
+        <HStack width="200px" hAlign="center">
+          <BodyText>{value && value.length > 0 ? value : 'No Value'}</BodyText>
+        </HStack>
+      </HStack>
+    </Theme>
+  );
+};
 
-        <tr>
-          <td>Phonebook with non-numeric values</td>
-          <td>
-            <Base>
-              <Option
-                value="+7asd84355865954"
-                label="+7asd84355865954"
-                keywords={['jane', 'smith']}
-              >
-                Jane Smith - +7asd8 (435) 586-5954
-              </Option>
-              <Option
-                value="+12abc3456789"
-                label="+12abc3456789"
-                keywords={['alice', 'wonderland']}
-              >
-                Alice Wonderland - +12abc (345) 6789
-              </Option>
-              <Option
-                value="+1-800-FAKE-NUM"
-                label="+1-800-FAKE-NUM"
-                keywords={['fake', 'number']}
-              >
-                Fake Number - +1-800-FAKE-NUM
-              </Option>
-            </Base>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+export const LimitedCountries = () => {
+  const [value, setValue] = useState<string | undefined>('');
+  return (
+    <Theme styleSheets={[reset, ergoStyleSheet]}>
+      <HStack>
+        <PhoneNumberInput
+          value={value}
+          onChange={setValue}
+          allowSip={false}
+          allowedCountryCodes={['US', 'CA', 'GB', 'AU']}
+        />
+        <HStack width="200px" hAlign="center">
+          <BodyText>{value && value.length > 0 ? value : 'No Value'}</BodyText>
+        </HStack>
+      </HStack>
+    </Theme>
   );
-}
+};
+
+export const LimitMaxLength = () => {
+  const [value, setValue] = useState<string | undefined>('');
+  return (
+    <Theme styleSheets={[reset, ergoStyleSheet]}>
+      <HStack>
+        <PhoneNumberInput value={value} onChange={setValue} limitMaxLength />
+        <HStack width="200px" hAlign="center">
+          <BodyText>{value && value.length > 0 ? value : 'No Value'}</BodyText>
+        </HStack>
+      </HStack>
+    </Theme>
+  );
+};
+
+export const WithPhoneBook = () => {
+  const [value, setValue] = useState<string | undefined>('');
+  return (
+    <Theme styleSheets={[reset, ergoStyleSheet]}>
+      <HStack>
+        <PhoneNumberInput value={value} onChange={setValue}>
+          <Option value="+14355865953" label="John Doe" keywords={['john', 'doe']}>
+            John Doe - +1 (435) 586-5953
+          </Option>
+          <Option value="+984355865954" label="Jane Smith" keywords={['jane', 'smith']}>
+            Jane Smith - +98 (435) 586-5954
+          </Option>
+          <Option value="+14355865955" label="Bob Johnson" keywords={['bob', 'johnson']}>
+            Bob Johnson - +1 (435) 586-5955
+          </Option>
+          <Option
+            value="sip:foo@bar.com"
+            label="Foo Sip"
+            keywords={['sip', 'foo', 'bar']}
+          >
+            Foo Sip - foo@bar.com
+          </Option>
+        </PhoneNumberInput>
+        <HStack width="200px" hAlign="center">
+          <BodyText>{value && value.length > 0 ? value : 'No Value'}</BodyText>
+        </HStack>
+      </HStack>
+    </Theme>
+  );
+};
+
+export const DisableSip = () => {
+  const [value, setValue] = useState<string | undefined>('');
+  return (
+    <Theme styleSheets={[reset, ergoStyleSheet]}>
+      <HStack>
+        <PhoneNumberInput value={value} onChange={setValue} allowSip={false} />
+        <HStack width="200px" hAlign="center">
+          <BodyText>{value && value.length > 0 ? value : 'No Value'}</BodyText>
+        </HStack>
+      </HStack>
+    </Theme>
+  );
+};
+
+// We need to display sip even if it is not allowed. This can happen if the user has a sip address in the value.
+// This may happen with phone books or saved numbers within preview dials.
+export const DisableSipButSipIsInValue = () => {
+  const [value, setValue] = useState<string | undefined>('sip:foo@bar.com');
+  return (
+    <Theme styleSheets={[reset, ergoStyleSheet]}>
+      <HStack>
+        <PhoneNumberInput value={value} onChange={setValue} allowSip={false} />
+        <HStack width="200px" hAlign="center">
+          <BodyText>{value && value.length > 0 ? value : 'No Value'}</BodyText>
+        </HStack>
+      </HStack>
+    </Theme>
+  );
+};
+
+export default {
+  title: 'Components/PhoneNumberInput',
+};