@ssa-ui-kit/core 0.0.17-alpha → 0.0.19-alpha

package/src/components/DropdownBase/DropdownBase.tsx

@@ -1,10 +1,10 @@
-import styled from '@emotion/styled';
-import { CommonProps } from '@global-types/emotion';
-
-const DropdownBase = styled.div<CommonProps>`
-  display: inline-block;
-  position: relative;
-  min-width: 180px;
-`;
-
-export default DropdownBase;
+import styled from '@emotion/styled';
+import { CommonProps } from '@global-types/emotion';
+
+const DropdownBase = styled.div<CommonProps>`
+  display: inline-block;
+  position: relative;
+  min-width: 180px;
+`;
+
+export default DropdownBase;

package/src/components/DropdownBase/index.ts

@@ -1 +1 @@
-export { default } from './DropdownBase';
+export { default } from './DropdownBase';

package/src/components/DropdownOption/DropdownOption.tsx

@@ -1,56 +1,56 @@
-import React from 'react';
-import { Theme, css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { CommonProps } from '@global-types/emotion';
-
-interface IDropdownItemProps extends CommonProps {
-  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
-  isActive?: boolean;
-  isMultiple?: boolean;
-  isDisabled?: boolean;
-  noHover?: boolean;
-  value?: string | number | boolean;
-  label?: string | number;
-  children?: React.ReactNode;
-}
-
-interface MultipleStylesProps {
-  theme: Theme;
-  isDisabled?: boolean;
-}
-
-const multipleStyles = ({ theme, isDisabled }: MultipleStylesProps) => {
-  return css`
-    background: none;
-    color: ${isDisabled
-      ? theme.colors.greyDisabledCheckbox
-      : theme.colors.greyDisabled};
-    &:hover {
-      background: none;
-    }
-  `;
-};
-
-const DropdownOption = styled.li<IDropdownItemProps>`
-  overflow: hidden;
-
-  height: 34px;
-  padding: 8px 16px;
-
-  border: none;
-  background: ${({ isActive, theme }) =>
-    isActive ? theme.colors.greySelectedMenuItem : 'inherit'};
-
-  &:hover {
-    background: ${({ theme }) => theme.colors.greyLighter};
-  }
-
-  ${({ isMultiple, isDisabled, theme }) =>
-    isMultiple &&
-    multipleStyles({
-      theme,
-      isDisabled,
-    })}
-`;
-
-export default DropdownOption;
+import React from 'react';
+import { Theme, css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { CommonProps } from '@global-types/emotion';
+
+interface IDropdownItemProps extends CommonProps {
+  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+  isActive?: boolean;
+  isMultiple?: boolean;
+  isDisabled?: boolean;
+  noHover?: boolean;
+  value?: string | number | boolean;
+  label?: string | number;
+  children?: React.ReactNode;
+}
+
+interface MultipleStylesProps {
+  theme: Theme;
+  isDisabled?: boolean;
+}
+
+const multipleStyles = ({ theme, isDisabled }: MultipleStylesProps) => {
+  return css`
+    background: none;
+    color: ${isDisabled
+      ? theme.colors.greyDisabledCheckbox
+      : theme.colors.greyDisabled};
+    &:hover {
+      background: none;
+    }
+  `;
+};
+
+const DropdownOption = styled.li<IDropdownItemProps>`
+  overflow: hidden;
+
+  height: 34px;
+  padding: 8px 16px;
+
+  border: none;
+  background: ${({ isActive, theme }) =>
+    isActive ? theme.colors.greySelectedMenuItem : 'inherit'};
+
+  &:hover {
+    background: ${({ theme }) => theme.colors.greyLighter};
+  }
+
+  ${({ isMultiple, isDisabled, theme }) =>
+    isMultiple &&
+    multipleStyles({
+      theme,
+      isDisabled,
+    })}
+`;
+
+export default DropdownOption;

package/src/components/DropdownOption/index.ts

@@ -1 +1 @@
-export { default } from './DropdownOption';
+export { default } from './DropdownOption';

package/src/components/DropdownOptions/DropdownOptions.tsx

@@ -1,102 +1,102 @@
-import React from 'react';
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-
-import { useDropdownContext } from '@components/Dropdown/Dropdown.context';
-import DropdownOption from '@components/DropdownOption';
-
-import { IDropdownItemsListProps } from './types';
-
-const DropdownOptionsBase = styled.ul<{ tabindex?: string }>`
-  position: absolute;
-  width: 100%;
-
-  list-style: none;
-
-  margin: 4px 0 0;
-  padding: 0;
-
-  background: #fff;
-  border-radius: 8px;
-
-  overflow-x: hidden;
-  overflow-y: auto;
-
-  z-index: 2;
-
-  filter: ${({ theme }) =>
-    `drop-shadow(-4px 4px 14px ${theme.colors.greyDarker14})`};
-  backdrop-filter: ${({ theme }) =>
-    `drop-shadow(-4px 4px 14px ${theme.colors.greyDarker14})`};
-`;
-
-const dropdownOptionButton = css`
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  font: inherit;
-  font-size: 0.813rem;
-  outline: inherit;
-  text-align: left;
-
-  width: 100%;
-  padding: 0;
-  margin: 0;
-
-  background: none;
-  color: inherit;
-  border: none;
-`;
-
-const noItemsMsg = { id: Number.NaN, value: 'No items' };
-
-const DropdownOptions = ({
-  ariaLabelledby,
-  id,
-  children,
-}: IDropdownItemsListProps) => {
-  const { onChange, activeItem } = useDropdownContext();
-
-  const childrenArray = React.Children.toArray(children).filter(Boolean);
-
-  const options = (childrenArray as React.ReactElement[]).map((child) => {
-    const isActive = activeItem?.value === child.props.value;
-
-    return React.cloneElement(
-      child,
-      {
-        ...child.props,
-        isActive,
-        'aria-selected': isActive,
-        onClick: onChange.bind(null, child.props.value),
-      },
-      <button type="button" css={dropdownOptionButton}>
-        {child.props.children || child.props.label || child.props.value}
-      </button>,
-    );
-  });
-
-  if (options.length === 0) {
-    options.push(
-      <DropdownOption
-        key={noItemsMsg.id}
-        value={''}
-        onClick={onChange.bind(null, '')}
-        aria-selected={false}>
-        <button css={dropdownOptionButton}>{noItemsMsg.value}</button>
-      </DropdownOption>,
-    );
-  }
-
-  return (
-    <DropdownOptionsBase
-      role="listbox"
-      tabindex="-1"
-      id={id}
-      aria-labelledby={ariaLabelledby}>
-      {options}
-    </DropdownOptionsBase>
-  );
-};
-
-export default DropdownOptions;
+import React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
+import { useDropdownContext } from '@components/Dropdown/Dropdown.context';
+import DropdownOption from '@components/DropdownOption';
+
+import { IDropdownItemsListProps } from './types';
+
+const DropdownOptionsBase = styled.ul<{ tabindex?: string }>`
+  position: absolute;
+  width: 100%;
+
+  list-style: none;
+
+  margin: 4px 0 0;
+  padding: 0;
+
+  background: #fff;
+  border-radius: 8px;
+
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  z-index: 2;
+
+  filter: ${({ theme }) =>
+    `drop-shadow(-4px 4px 14px ${theme.colors.greyDarker14})`};
+  backdrop-filter: ${({ theme }) =>
+    `drop-shadow(-4px 4px 14px ${theme.colors.greyDarker14})`};
+`;
+
+const dropdownOptionButton = css`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.813rem;
+  outline: inherit;
+  text-align: left;
+
+  width: 100%;
+  padding: 0;
+  margin: 0;
+
+  background: none;
+  color: inherit;
+  border: none;
+`;
+
+const noItemsMsg = { id: Number.NaN, value: 'No items' };
+
+const DropdownOptions = ({
+  ariaLabelledby,
+  id,
+  children,
+}: IDropdownItemsListProps) => {
+  const { onChange, activeItem } = useDropdownContext();
+
+  const childrenArray = React.Children.toArray(children).filter(Boolean);
+
+  const options = (childrenArray as React.ReactElement[]).map((child) => {
+    const isActive = activeItem?.value === child.props.value;
+
+    return React.cloneElement(
+      child,
+      {
+        ...child.props,
+        isActive,
+        'aria-selected': isActive,
+        onClick: onChange.bind(null, child.props.value),
+      },
+      <button type="button" css={dropdownOptionButton}>
+        {child.props.children || child.props.label || child.props.value}
+      </button>,
+    );
+  });
+
+  if (options.length === 0) {
+    options.push(
+      <DropdownOption
+        key={noItemsMsg.id}
+        value={''}
+        onClick={onChange.bind(null, '')}
+        aria-selected={false}>
+        <button css={dropdownOptionButton}>{noItemsMsg.value}</button>
+      </DropdownOption>,
+    );
+  }
+
+  return (
+    <DropdownOptionsBase
+      role="listbox"
+      tabindex="-1"
+      id={id}
+      aria-labelledby={ariaLabelledby}>
+      {options}
+    </DropdownOptionsBase>
+  );
+};
+
+export default DropdownOptions;

package/src/components/DropdownOptions/index.ts

@@ -1,2 +1,2 @@
-export { default } from './DropdownOptions';
-export type { IDropdownOption } from './types';
+export { default } from './DropdownOptions';
+export type { IDropdownOption } from './types';

package/src/components/DropdownOptions/types.ts

@@ -1,9 +1,9 @@
-import { CommonProps } from '@global-types/emotion';
-
-export type IDropdownOption = Record<string, string | number>;
-
-export interface IDropdownItemsListProps extends CommonProps {
-  ariaLabelledby?: string;
-  id?: string;
-  children?: React.ReactNode;
-}
+import { CommonProps } from '@global-types/emotion';
+
+export type IDropdownOption = Record<string, string | number>;
+
+export interface IDropdownItemsListProps extends CommonProps {
+  ariaLabelledby?: string;
+  id?: string;
+  children?: React.ReactNode;
+}

package/src/components/DropdownToggle/DropdownToggle.tsx

@@ -1,148 +1,148 @@
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { focusOutline } from '@styles/safari-focus-outline';
-import { IDropdownToggleProps, MultipleStylesProps } from './types';
-
-const multipleStyles = ({ theme, selectedCount = 0 }: MultipleStylesProps) => {
-  let borderColor = theme.colors.greyDropdownMain;
-  let borderColorFocused = theme.colors.greyDropdownFocused;
-  let backgroundColor = theme.colors.white;
-  if (selectedCount > 0) {
-    borderColor = theme.colors.blueDropdownWithSelectedItemsBorder;
-    borderColorFocused = theme.colors.blueDropdownWithSelectedItemsBorder;
-    backgroundColor = theme.colors.blueDropdownWithSelectedItems;
-  }
-
-  return css`
-    justify-content: space-between;
-    height: 40px;
-    padding: 11px 15px 9px 10px;
-    font-size: 14px;
-    font-weight: 500;
-    color: ${theme.colors.greyDropdownText};
-    border: 1px solid ${borderColor};
-    border-radius: 5px;
-    background: ${backgroundColor};
-    max-width: 250px;
-
-    &:focus {
-      color: ${theme.colors.greyDropdownText};
-      background: ${backgroundColor};
-      &::before {
-        border-color: ${borderColorFocused};
-      }
-    }
-
-    svg {
-      path {
-        stroke: ${theme.colors.greyDarker};
-      }
-    }
-  `;
-};
-
-export const DropdownToggleBase = styled.button<
-  Pick<
-    IDropdownToggleProps,
-    'colors' | 'isOpen' | 'disabled' | 'isMultiple' | 'selectedCount'
-  >
->`
-  ${({ isMultiple, theme }) =>
-    isMultiple
-      ? focusOutline(theme, 'greyDropdownFocused', '5px')
-      : focusOutline(theme)}
-
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 10px;
-
-  position: relative;
-
-  color: ${({ colors, isOpen }) =>
-    isOpen ? colors?.[0] || 'initial' : 'initial'};
-
-  width: auto;
-  padding: 8px 14px;
-
-  font: inherit;
-  font-size: 13px;
-  text-align: left;
-  line-height: 18px;
-
-  border: none;
-  cursor: pointer;
-  outline: inherit;
-
-  border-radius: 12px;
-
-  background: ${({ isOpen, theme }) =>
-    isOpen
-      ? `linear-gradient(108.3deg, ${theme.colors.greyDarker} -0.36%, ${theme.colors.greyDark} 100%)`
-      : theme.colors.greyLighter};
-
-  &:disabled {
-    background: ${({ theme }) => theme.colors.grey};
-    cursor: default;
-  }
-
-  &:focus {
-    color: ${({ colors, theme }) => colors?.[0] || theme.colors.greyDarker};
-    background: ${({ isOpen, theme }) =>
-      isOpen
-        ? `linear-gradient(108.3deg, ${theme.colors.greyDarker} -0.36%, ${theme.colors.greyDark} 100%)`
-        : theme.colors.greyFocused};
-  }
-
-  svg {
-    path {
-      stroke: ${({ colors, theme }) => colors?.[0] || theme.colors.greyDarker};
-    }
-  }
-
-  ${({ isMultiple, selectedCount, theme }) =>
-    isMultiple &&
-    multipleStyles({
-      theme,
-      selectedCount,
-    })}
-`;
-
-const DropdownToggle = ({
-  onClick,
-  onFocus,
-  isOpen,
-  isMultiple,
-  selectedCount,
-  disabled,
-  children,
-  ariaLabelledby,
-  ariaControls,
-  colors,
-  className,
-}: IDropdownToggleProps) => (
-  <DropdownToggleBase
-    className={className}
-    colors={colors}
-    isOpen={isOpen}
-    type="button"
-    isMultiple={isMultiple}
-    selectedCount={selectedCount}
-    onClick={(e) => {
-      // Safari doesn't support focus on buttons 🤔
-      (e.currentTarget as HTMLButtonElement).focus();
-      onClick && onClick(e);
-    }}
-    onFocus={onFocus}
-    disabled={disabled}
-    role="combobox"
-    aria-labelledby={ariaLabelledby}
-    aria-controls={ariaControls}
-    aria-expanded={isOpen}
-    aria-haspopup="listbox">
-    {children}
-  </DropdownToggleBase>
-);
-
-export default DropdownToggle;
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { focusOutline } from '@styles/safari-focus-outline';
+import { IDropdownToggleProps, MultipleStylesProps } from './types';
+
+const multipleStyles = ({ theme, selectedCount = 0 }: MultipleStylesProps) => {
+  let borderColor = theme.colors.greyDropdownMain;
+  let borderColorFocused = theme.colors.greyDropdownFocused;
+  let backgroundColor = theme.colors.white;
+  if (selectedCount > 0) {
+    borderColor = theme.colors.blueDropdownWithSelectedItemsBorder;
+    borderColorFocused = theme.colors.blueDropdownWithSelectedItemsBorder;
+    backgroundColor = theme.colors.blueDropdownWithSelectedItems;
+  }
+
+  return css`
+    justify-content: space-between;
+    height: 40px;
+    padding: 11px 15px 9px 10px;
+    font-size: 14px;
+    font-weight: 500;
+    color: ${theme.colors.greyDropdownText};
+    border: 1px solid ${borderColor};
+    border-radius: 5px;
+    background: ${backgroundColor};
+    max-width: 250px;
+
+    &:focus {
+      color: ${theme.colors.greyDropdownText};
+      background: ${backgroundColor};
+      &::before {
+        border-color: ${borderColorFocused};
+      }
+    }
+
+    svg {
+      path {
+        stroke: ${theme.colors.greyDarker};
+      }
+    }
+  `;
+};
+
+export const DropdownToggleBase = styled.button<
+  Pick<
+    IDropdownToggleProps,
+    'colors' | 'isOpen' | 'disabled' | 'isMultiple' | 'selectedCount'
+  >
+>`
+  ${({ isMultiple, theme }) =>
+    isMultiple
+      ? focusOutline(theme, 'greyDropdownFocused', '5px')
+      : focusOutline(theme)}
+
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+
+  position: relative;
+
+  color: ${({ colors, isOpen }) =>
+    isOpen ? colors?.[0] || 'initial' : 'initial'};
+
+  width: auto;
+  padding: 8px 14px;
+
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  line-height: 18px;
+
+  border: none;
+  cursor: pointer;
+  outline: inherit;
+
+  border-radius: 12px;
+
+  background: ${({ isOpen, theme }) =>
+    isOpen
+      ? `linear-gradient(108.3deg, ${theme.colors.greyDarker} -0.36%, ${theme.colors.greyDark} 100%)`
+      : theme.colors.greyLighter};
+
+  &:disabled {
+    background: ${({ theme }) => theme.colors.grey};
+    cursor: default;
+  }
+
+  &:focus {
+    color: ${({ colors, theme }) => colors?.[0] || theme.colors.greyDarker};
+    background: ${({ isOpen, theme }) =>
+      isOpen
+        ? `linear-gradient(108.3deg, ${theme.colors.greyDarker} -0.36%, ${theme.colors.greyDark} 100%)`
+        : theme.colors.greyFocused};
+  }
+
+  svg {
+    path {
+      stroke: ${({ colors, theme }) => colors?.[0] || theme.colors.greyDarker};
+    }
+  }
+
+  ${({ isMultiple, selectedCount, theme }) =>
+    isMultiple &&
+    multipleStyles({
+      theme,
+      selectedCount,
+    })}
+`;
+
+const DropdownToggle = ({
+  onClick,
+  onFocus,
+  isOpen,
+  isMultiple,
+  selectedCount,
+  disabled,
+  children,
+  ariaLabelledby,
+  ariaControls,
+  colors,
+  className,
+}: IDropdownToggleProps) => (
+  <DropdownToggleBase
+    className={className}
+    colors={colors}
+    isOpen={isOpen}
+    type="button"
+    isMultiple={isMultiple}
+    selectedCount={selectedCount}
+    onClick={(e) => {
+      // Safari doesn't support focus on buttons 🤔
+      (e.currentTarget as HTMLButtonElement).focus();
+      onClick && onClick(e);
+    }}
+    onFocus={onFocus}
+    disabled={disabled}
+    role="combobox"
+    aria-labelledby={ariaLabelledby}
+    aria-controls={ariaControls}
+    aria-expanded={isOpen}
+    aria-haspopup="listbox">
+    {children}
+  </DropdownToggleBase>
+);
+
+export default DropdownToggle;

package/src/components/DropdownToggle/index.ts

@@ -1 +1 @@
-export { default } from './DropdownToggle';
+export { default } from './DropdownToggle';