@griddo/ax 1.56.8 → 1.57.1

package/src/components/MainWrapper/AppBar/SearchField/index.tsx

@@ -1,54 +0,0 @@
-import { Icon } from "@ax/components";
-import React, { useState } from "react";
-
-import * as S from "./style";
-
-const SearchField = (props: IProps): JSX.Element => {
-  const { onChange } = props;
-
-  const [isOpen, setIsOpen] = useState(false);
-  const [inputValue, setInputValue] = useState("");
-
-  const toggleField = () => setIsOpen(!isOpen);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    let newValue = e.target.value;
-    setInputValue(newValue);
-  };
-
-  const handleClose = () => {
-    toggleField();
-    setInputValue("");
-    onChange("");
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") {
-      onChange(inputValue);
-    }
-  };
-
-  return (
-    <S.Wrapper>
-      {isOpen ? (
-        <S.FieldWrapper>
-          <S.Input type="text" value={inputValue} onChange={handleChange} onKeyDown={handleKeyDown} autoFocus />
-          {inputValue.trim() !== "" && <S.HelpText>Press ENTER</S.HelpText>}
-          <S.IconCloseWrapper onClick={handleClose}>
-            <Icon name="close" size="24" />
-          </S.IconCloseWrapper>
-        </S.FieldWrapper>
-      ) : (
-        <S.IconWrapper onClick={toggleField}>
-          <Icon name="search" size="24" />
-        </S.IconWrapper>
-      )}
-    </S.Wrapper>
-  );
-};
-
-interface IProps {
-  onChange(query: string): void;
-}
-
-export default SearchField;

package/src/components/MainWrapper/AppBar/SearchField/style.tsx

@@ -1,55 +0,0 @@
-import styled from "styled-components";
-
-const Wrapper = styled.div``;
-
-const IconWrapper = styled.div`
-  width: ${p => p.theme.spacing.m};
-  height: ${p => p.theme.spacing.m};
-  cursor: pointer;
-  margin-right: ${p => p.theme.spacing.xxs};
-`;
-
-const FieldWrapper = styled.div`
-  position: relative;
-  width: ${p => `calc(${p.theme.spacing.xl} * 5)`};
-`;
-
-const Input = styled.input`
-  ${(p) => p.theme.textStyle.fieldContent};
-  color: ${(p) => p.theme.color.textHighEmphasis};
-  background-color: ${(p) => p.theme.color.interactiveBackground};
-  width: 100%;
-  height: ${p => p.theme.spacing.l};
-  padding: 0 100px 0 0;
-  border: none;
-  border-bottom: 1px solid ${(p) => p.theme.color.interactive01};
-
-  &:active,
-  &:focus {
-    outline: none;
-    border: none;
-    border-bottom: 1px solid ${(p) => p.theme.color.interactive01};
-  }
-`;
-
-const IconCloseWrapper = styled.div`
-  position: absolute;
-  right: ${p => p.theme.spacing.xxs};
-  top: 50%;
-  width: ${p => p.theme.spacing.m};
-  height: ${p => p.theme.spacing.m};
-  cursor: pointer;
-  transform: translateY(-50%);
-`;
-
-const HelpText = styled.div`
-  ${(p) => p.theme.textStyle.uiXS};
-  color: ${(p) => p.theme.color.textLowEmphasis};
-  font-style: italic;
-  position: absolute;
-  right: ${p => `calc(${p.theme.spacing.xxs} * 2 + ${p.theme.spacing.m})`};
-  top: 50%;
-  transform: translateY(-50%);
-`;
-
-export { Wrapper, IconWrapper, FieldWrapper, Input, IconCloseWrapper, HelpText };