@sinchsmb/ui-kit/src/form/SelectField/components/Menu/styled.ts

UI kit for SinchSMB frontend

import styled from 'styled-components/macro';

import { Scrollable } from '../../../../components/Scrollable/Scrollable';
import { Skeleton } from '../../../../components/Skeleton/Skeleton';
import { color, radius, shadow } from '../../../../theme';
import { commonInputStyles } from '../../../StyledInput';

export const optionHeight = 32;

export const StyledSelectMenu = styled.div`
  background-color: ${color('sys/color/white')};
  border-radius: ${radius('sys/radius/form-item')};
  box-shadow: ${shadow('sys/shadow/elevation/16')};
  display: flex;
  flex-direction: column;
  opacity: 1;
  outline: none;
  padding: 4px;
  pointer-events: auto;

  &.enter {
    opacity: 0;
  }

  &.enter-active {
    opacity: 1;
    transition: opacity 0.1s linear;
  }

  &.exit {
    opacity: 1;
  }

  &.exit-active {
    opacity: 0;
    transition: opacity 0.1s linear;
  }
`;

export const StyledSelectList = styled.ul`
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
`;

export const StyledHiddenSearchContainer = styled.div`
  height: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 0;
`;

export const StyledSelectFilterInput = styled.input`
  @mixin ${commonInputStyles};
  margin-bottom: 4px;
`;

export const StyledSelectOption = styled.li<{ $highlighted?: boolean; $selected?: boolean }>`
  align-items: center;
  background-color: ${(props) => {
    if (props.$highlighted) {
      return color('sys/color/list/hover');
    }

    return color('sys/color/transparent');
  }};
  border-radius: ${radius('sys/radius/form-item')};
  box-sizing: border-box;
  color: ${color('sys/color/text/secondary')};
  cursor: default;
  display: flex;
  font-size: 14px;
  left: 0;
  min-height: ${optionHeight}px;
  padding: 0 10px;
  position: absolute;
  top: 0;
  width: 100%;

  &[aria-selected='true'] {
    background-color: ${color('sys/color/list/selected')};
  }

  &:hover:not([aria-selected='true']):not([aria-disabled='true']) {
    background-color: ${color('sys/color/list/hover')};
    cursor: pointer;
  }

  &[aria-disabled='true'] {
    color: ${color('sys/color/text/disabled')};
    cursor: not-allowed;
  }
`;

export const StyledNoOptionsMessage = styled.div`
  align-items: center;
  color: ${color('sys/color/text/disabled')};
  display: flex;
  font-size: 14px;
  justify-content: center;
  min-height: ${optionHeight}px;
  padding: 0 10px;
`;

const skeletonWidth = {
  0: 160,
  1: 140,
  2: 175,
  3: 190,
  4: 155,
};

const skeletonWidthCount = Object.keys(skeletonWidth).length;

export const TunedSkeleton = styled(Skeleton)<{ $index: number }>`
  max-width: 60%;
  width: ${(props) => (skeletonWidth as any)[props.$index % skeletonWidthCount]}px;
`;

export const TunedScrollable = styled(Scrollable)`
  max-height: 300px;
`;