@helpdice/ui 2.1.8 → 2.2.2

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

@@ -1,11 +0,0 @@
-import React from 'react';
-import { InputTypes } from '../input';
-type PhoneInputProps = {
-    onChange: (data: string) => void;
-    value?: string;
-    country?: string;
-    placeholder?: string;
-    color?: InputTypes;
-};
-declare const PhoneInput: ({ onChange, value, country, placeholder, color: _color }: PhoneInputProps) => React.JSX.Element;
-export default PhoneInput;

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

@@ -1,11 +0,0 @@
-import React from 'react';
-import { InputTypes } from '../input';
-type PhoneInputProps = {
-    onChange: (data: string) => void;
-    value?: string;
-    country?: string;
-    placeholder?: string;
-    color?: InputTypes;
-};
-declare const PhoneInput: ({ onChange, value, country, placeholder, color: _color }: PhoneInputProps) => React.JSX.Element;
-export default PhoneInput;

package/esm/phone-input/phone.js

@@ -1,161 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _JSXStyle from "../styled-jsx.es.js";
-import React, { useState, useRef, useEffect, useMemo } from 'react';
-import countries from './countries.json';
-import { useTheme } from '@helpdice/theme';
-import { getColors } from '../input/styles';
-var PhoneInput = function PhoneInput(_ref) {
-  var onChange = _ref.onChange,
-    _ref$value = _ref.value,
-    value = _ref$value === void 0 ? '' : _ref$value,
-    country = _ref.country,
-    _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? 'Enter phone number' : _ref$placeholder,
-    _ref$color = _ref.color,
-    _color = _ref$color === void 0 ? 'default' : _ref$color;
-  var theme = useTheme();
-  var defaultValue = country ? countries.findIndex(function (cn) {
-    return cn.code == country;
-  }) : 103;
-  var _useState = useState(countries[defaultValue]),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedCountry = _useState2[0],
-    setSelectedCountry = _useState2[1];
-  var _useState3 = useState(value),
-    _useState4 = _slicedToArray(_useState3, 2),
-    phoneNumber = _useState4[0],
-    setPhoneNumber = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isFocused = _useState6[0],
-    setIsFocused = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    dropdownOpen = _useState8[0],
-    setDropdownOpen = _useState8[1];
-  var _useState9 = useState(''),
-    _useState10 = _slicedToArray(_useState9, 2),
-    searchTerm = _useState10[0],
-    setSearchTerm = _useState10[1];
-  var dropdownRef = useRef(null);
-  var _useMemo = useMemo(function () {
-      return getColors(theme.palette, _color);
-    }, [theme.palette]),
-    borderColor = _useMemo.borderColor,
-    hoverBorder = _useMemo.hoverBorder;
-  var handleSelectCountry = function handleSelectCountry(country) {
-    setSelectedCountry(country);
-    setDropdownOpen(false);
-    setSearchTerm('');
-    if (onChange) onChange("".concat(country.code, ":").concat(phoneNumber));
-  };
-  var handlePhoneChange = function handlePhoneChange(e) {
-    var value = e.target.value.replace(/[^\d]/g, '');
-    setPhoneNumber(value);
-    if (onChange) onChange("".concat(selectedCountry.phone, ",").concat(value));
-  };
-  var handleClickOutside = function handleClickOutside(e) {
-    if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
-      setDropdownOpen(false);
-      setSearchTerm('');
-    }
-  };
-  useEffect(function () {
-    document.addEventListener('mousedown', handleClickOutside);
-    return function () {
-      return document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-  var filteredCountries = countries.filter(function (c) {
-    return "".concat(c.label, " ").concat(c.code, " ").concat(c.phone).toLowerCase().includes(searchTerm.toLowerCase());
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    ref: dropdownRef,
-    className: _JSXStyle.dynamic([["1313692390", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "phone-input-container ".concat(isFocused ? 'focused' : '')
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1313692390", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "input-wrapper"
-  }, /*#__PURE__*/React.createElement("div", {
-    onClick: function onClick() {
-      return setDropdownOpen(!dropdownOpen);
-    },
-    className: _JSXStyle.dynamic([["1313692390", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-toggle"
-  }, /*#__PURE__*/React.createElement("span", {
-    style: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: 5
-    },
-    className: _JSXStyle.dynamic([["1313692390", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
-  }, /*#__PURE__*/React.createElement("img", {
-    loading: "lazy",
-    width: "23",
-    height: "23",
-    src: "https://flagcdn.com/w20/".concat(selectedCountry.code.toLowerCase(), ".png"),
-    srcSet: "https://flagcdn.com/w40/".concat(selectedCountry.code.toLowerCase(), ".png 2x"),
-    alt: "Flag of ".concat(selectedCountry.label),
-    className: _JSXStyle.dynamic([["1313692390", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
-  }), /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["1313692390", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
-  }, selectedCountry.phone))), /*#__PURE__*/React.createElement("input", {
-    type: "tel",
-    style: {
-      width: '100%'
-    },
-    placeholder: placeholder,
-    value: phoneNumber,
-    onChange: handlePhoneChange,
-    onFocus: function onFocus() {
-      return setIsFocused(true);
-    },
-    onBlur: function onBlur() {
-      return setIsFocused(false);
-    },
-    className: _JSXStyle.dynamic([["1313692390", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "phone-input"
-  })), dropdownOpen && /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1313692390", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown"
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    placeholder: "Search country...",
-    value: searchTerm,
-    onChange: function onChange(e) {
-      return setSearchTerm(e.target.value);
-    },
-    className: _JSXStyle.dynamic([["1313692390", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "search-input"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1313692390", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "country-list"
-  }, filteredCountries.length > 0 ? filteredCountries.map(function (c) {
-    return /*#__PURE__*/React.createElement("div", {
-      key: c.code,
-      onClick: function onClick() {
-        return handleSelectCountry(c);
-      },
-      className: _JSXStyle.dynamic([["1313692390", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item"
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: 5
-      },
-      className: _JSXStyle.dynamic([["1313692390", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
-    }, /*#__PURE__*/React.createElement("img", {
-      loading: "lazy",
-      width: "23",
-      height: "23",
-      src: "https://flagcdn.com/w20/".concat(c.code.toLowerCase(), ".png"),
-      srcSet: "https://flagcdn.com/w40/".concat(c.code.toLowerCase(), ".png 2x"),
-      alt: "Flag of ".concat(c.label),
-      className: _JSXStyle.dynamic([["1313692390", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
-    }), c.phone, " ", /*#__PURE__*/React.createElement("span", {
-      style: {
-        color: 'grey'
-      },
-      className: _JSXStyle.dynamic([["1313692390", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
-    }, c.label)));
-  }) : /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1313692390", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item disabled"
-  }, "No results"))), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1313692390",
-    dynamic: [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']
-  }, ".phone-input-container.__jsx-style-dynamic-selector{position:relative;min-width:200px;width:auto;}.phone-input-container.focused.__jsx-style-dynamic-selector{outline:1px solid ".concat(hoverBorder, ";border-radius:6px;}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px solid ").concat(borderColor, ";border-radius:6px;overflow:hidden;}.dropdown-toggle.__jsx-style-dynamic-selector{padding:7px 12px;border-radius:6px 0px 0px 6px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:14px;border-right:1px solid ").concat(borderColor, ";}.phone-input.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;padding:5px 10px;height:35px;background-color:transparent;font-size:14px;border:none;}.phone-input.__jsx-style-dynamic-selector:focus{outline:none;}.dropdown.__jsx-style-dynamic-selector{position:absolute;top:100%;left:0;width:100%;background:").concat(theme.type == 'dark' ? 'black' : 'white', ";border:1px solid ").concat(borderColor, ";border-radius:6px;margin-top:4px;z-index:999;box-shadow:0 4px 10px rgba(0,0,0,0.1);}.search-input.__jsx-style-dynamic-selector{width:100%;padding:8px 10px;border:none;background-color:transparent;border-bottom:1px solid ").concat(borderColor, ";font-size:14px;}.search-input.__jsx-style-dynamic-selector:focus{outline:none;}.country-list.__jsx-style-dynamic-selector{max-height:200px;overflow-y:auto;}.dropdown-item.__jsx-style-dynamic-selector{padding:10px;cursor:pointer;font-size:14px;}.dropdown-item.__jsx-style-dynamic-selector:hover{background:").concat(theme.type == 'dark' ? '#3a3d3d' : '#efefef', ";}.dropdown-item.disabled.__jsx-style-dynamic-selector{color:#888;cursor:default;}")));
-};
-export default PhoneInput;