@hhgtech/hhg-components/build/esm/index-a2183fa7.js

Hello Health Group common components

import React__default from 'react';
import { useMantineTheme } from '@mantine/core';
import styled from '@emotion/styled';
import { theme } from './miscTheme.js';

const StyledDropdown = styled.div `
  --dropdown-padding: 12px 18px 12px 16px;
  position: relative;
  box-sizing: border-box;
  border: 1px solid ${theme.colors.gray200};
  background: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23595959' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")
    no-repeat;
  background-position: right 16px center;
  border-radius: ${theme.borderRadius};

  &[data-disabled='true'],
  :disabled {
    background-color: #f2f2f2;
    cursor: not-allowed;
  }

  &[data-size='sm'] {
    font-size: 13px;
    line-height: 20px;
  }
  &[data-size='md'] {
    font-size: 14px;
    line-height: 21px;
  }
  &[data-size='lg'] {
    font-size: 16px;
    line-height: 24px;
  }

  &[data-has-icons='true'] {
    border: none;
    background: ${theme.colors.gray100};

    img,
    svg {
      display: inline-block;
      max-width: 16px;
      margin-right: 6px;
    }

    span {
      display: inline-block;
      vertical-align: middle;
    }

    &:hover {
      box-shadow: none;
    }
    > div {
      position: relative;
      display: flex;
      width: 100%;
      box-sizing: border-box;
      align-items: center;
    }
    > div::after {
      position: absolute;
      top: 50%;
      right: 12px;
      width: 10px;
      height: 8px;
      background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23595959' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
      background-repeat: no-repeat;
      content: '';
      transform: translateY(-50%);
    }
  }

  &:hover {
    box-shadow: 0 0 2px 2px ${(props) => props.shadowColor};
  }

  &[data-is-native='true'] {
    padding: var(--dropdown-padding);
    line-height: 24px;

    &:focus {
      box-shadow: 0px 0px 2px 2px ${(props) => props.shadowColor};
    }
  }
`;
const StyledDropdownName = styled.div `
  padding: var(--dropdown-padding);
  cursor: pointer;

  &.with-label {
    padding-top: 34px;
    padding-bottom: 12px;
  }
  &[data-dropdown-open] {
    padding: 11px 15px 11px 15px;
    border: 1px solid ${(props) => props.color};
    border-radius: ${theme.borderRadius};
    box-shadow: 0 0 2px 2px ${(props) => props.shadowColor};
  }
`;
const StyledDropdownList = styled.ul `
  position: absolute;
  top: 100%;
  /* right: 0; */
  min-width: 100%;
  left: 0;
  display: block;
  margin-top: 4px;
  background: ${theme.colors.white};
  border-radius: ${theme.borderRadius};
  box-shadow: -1px 1px 2px rgba(67, 70, 74, 0.0001),
    -2px 2px 5px rgba(67, 86, 100, 0.123689);
  cursor: pointer;

  &[data-has-icons='true'] {
    border: 1px solid ${theme.colors.gray200};
    background: white;
    box-shadow: none;
    filter: drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04));
  }
`;
const StyledDropdownOption = styled.li `
  display: flex;
  padding: 12px 18px 12px 16px;
  &[data-disabled='true'] {
    cursor: not-allowed;
    color: #bfbfbf;
    & > * {
      pointer-events: none;
    }
  }
  &:hover,
  :active {
    background: ${theme.colors.gray100};
  }
`;
const StyledIcon = styled.div `
  max-width: 16px;
  margin-right: 8px;
`;
const StyledDropdownLabel = styled.div `
  position: absolute;
  top: 12px;
  left: 16px;
  pointer-events: none;
`;

/**
 * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
 */
const Dropdown = ({ className, value, options, onChange = () => undefined, id, placeholderIcon, placeholder, style, size = 'lg', groupedWithLabel, disabled, dropdownLabelTrackingAttributes = {}, isNativeSelect = false, }) => {
    const _theme = useMantineTheme();
    const [isDropdownOpen, setIsDropdownOpen] = React__default.useState(false);
    const showDropdown = () => !disabled && setIsDropdownOpen(!isDropdownOpen);
    if (isNativeSelect) {
        const finalValue = typeof (value === null || value === void 0 ? void 0 : value.value) === 'object' && value.value instanceof Date
            ? value.value.toString()
            : value === null || value === void 0 ? void 0 : value.value;
        return (React__default.createElement(StyledDropdown, { color: _theme.fn.primaryColor(), shadowColor: _theme.colors[_theme.primaryColor][2], as: "select", "data-is-native": "true", 
            // @ts-ignore
            value: finalValue || undefined, disabled: disabled, onChange: (e) => {
                if (typeof e.target.value === 'string') {
                    const option = options.find((o) => o.value === e.target.value);
                    if (option) {
                        onChange(option);
                    }
                }
            } },
            placeholder && (React__default.createElement("option", { value: placeholder, disabled: true, selected: true }, placeholder)),
            options.map((option) => (React__default.createElement("option", { key: `${id}-${option.value}`, value: option.value, disabled: option.disabled ? option.disabled : false }, option.label)))));
    }
    return (React__default.createElement(StyledDropdown, { color: _theme.fn.primaryColor(), shadowColor: _theme.colors[_theme.primaryColor][2], className: className, "data-dropdown-open": isDropdownOpen || undefined, "data-size": size, id: id, "data-has-icons": !!placeholderIcon, style: style, onBlur: () => setIsDropdownOpen(false), tabIndex: 0, "data-disabled": disabled },
        !!groupedWithLabel && (React__default.createElement(StyledDropdownLabel, null, groupedWithLabel)),
        React__default.createElement(StyledDropdownName, Object.assign({ color: _theme.fn.primaryColor(), shadowColor: _theme.colors[_theme.primaryColor][2], onClick: showDropdown, className: groupedWithLabel && 'with-label' }, dropdownLabelTrackingAttributes),
            placeholderIcon,
            ' ',
            React__default.createElement("span", null, value && value.value ? value.label : placeholder)),
        isDropdownOpen && (React__default.createElement(StyledDropdownList, { onClick: showDropdown, "data-has-icons": !!placeholderIcon }, options.map((option) => (React__default.createElement(StyledDropdownOption, { key: `${id}-${option.value}`, "data-selected": (value && value.value === option.value) || undefined, onClick: () => !option.disabled && !disabled && (onChange === null || onChange === void 0 ? void 0 : onChange(option)), "data-disabled": option.disabled ? option.disabled : false },
            option.icon && React__default.createElement(StyledIcon, null, option.icon),
            option.label)))))));
};

export { Dropdown as D };