@alfalab/core-components-international-phone-input 1.0.0

package/src/components/flag-icon/index.module.css

@@ -0,0 +1,15 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.flagIcon {
+    max-width: 24px;
+    max-height: 24px;
+}
+
+.flagPlaceholder {
+    width: 24px;
+    height: 16px;
+    max-height: 16px;
+    border-radius: var(--border-radius-xs);
+    margin-top: var(--gap-3xs);
+    background-color: var(--color-light-specialbg-tertiary-transparent);
+}

package/src/components/flag-icon/index.ts

@@ -0,0 +1 @@
+export * from './component';

package/src/components/select-field/component.tsx

@@ -0,0 +1,51 @@
+import React, { FC, useRef } from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+
+import type { FieldProps } from '@alfalab/core-components-select/shared';
+import { useFocus } from '@alfalab/hooks';
+import { WorldMagnifierMIcon } from '@alfalab/icons-glyph/WorldMagnifierMIcon';
+
+import { FlagIcon } from '../flag-icon';
+
+import styles from './index.module.css';
+
+export const EMPTY_COUNTRY_SELECT_FIELD = {
+    value: 'EMPTY_COUNTRY_SELECT_VALUE',
+    key: 'EMPTY_COUNTRY_SELECT_KEY',
+};
+
+export const SelectField: FC<FieldProps> = ({
+    selected,
+    Arrow,
+    size,
+    disabled,
+    innerProps = {},
+}) => {
+    const wrapperRef = useRef<HTMLDivElement>(null);
+
+    const [focusVisible] = useFocus(wrapperRef, 'keyboard');
+
+    const ref = innerProps.ref ? mergeRefs([innerProps.ref, wrapperRef]) : wrapperRef;
+
+    return (
+        <div
+            ref={ref}
+            className={cn(styles.component, size && styles[size], {
+                [styles.focusVisible]: focusVisible,
+                [styles.disabled]: disabled,
+            })}
+        >
+            <div {...innerProps} className={styles.inner}>
+                <span className={styles.flagIconContainer}>
+                    {!selected || selected === EMPTY_COUNTRY_SELECT_FIELD ? (
+                        <WorldMagnifierMIcon className={styles.emptyCountryIcon} />
+                    ) : (
+                        <FlagIcon country={selected.key} />
+                    )}
+                </span>
+                {Arrow}
+            </div>
+        </div>
+    );
+};

package/src/components/select-field/index.module.css

@@ -0,0 +1,43 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.component {
+    height: 100%;
+    cursor: pointer;
+    outline: none;
+    position: relative;
+}
+
+.flagIconContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 24px;
+    height: 24px;
+    margin-right: var(--gap-2xs);
+}
+
+.emptyCountryIcon {
+    color: var(--color-light-graphic-secondary);
+}
+
+.disabled {
+    cursor: var(--disabled-cursor);
+}
+
+.inner {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding-left: var(--gap-s);
+    outline: none;
+}
+
+.l .inner,
+.xl .inner {
+    padding-left: var(--gap-m);
+}
+
+.focusVisible {
+    @mixin focus-outline;
+}

package/src/components/select-field/index.ts

@@ -0,0 +1 @@
+export * from './component';

package/src/consts.ts

@@ -0,0 +1 @@
+export const DEFAULT_PHONE_FORMAT = '... ... ... ... ...';