[DS-1]: Implement Multiselect

src/woly/atoms/list/index.tsx

@@ -62,9 +62,9 @@ export const BaseListItem = forwardRef<HTMLLIElement, ListItemProps>(
         onClick={onClick}
         {...rest}
       >
-        {iconLeft && <span data-element="icon">{iconLeft}</span>}
-        <span>{text}</span>
-        {iconRight && <span data-element="icon">{iconRight}</span>}
+        {iconLeft && <div data-element="icon">{iconLeft}</div>}
+        <div>{text}</div>
+        {iconRight && <div data-element="icon">{iconRight}</div>}
       </li>
     );
   },

src/woly/elements/input-container/index.tsx

@@ -5,26 +5,29 @@ import { levelDowngrade } from 'lib/level-downgrade';
 
 import { box } from '../box';
 
-interface InputContainerProps extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface InputContainerProps extends React.InputHTMLAttributes<HTMLInputElement> {
   className?: string;
   disabled?: boolean;
   leftIcon?: React.ReactNode;
+  onClick?: React.EventHandler<React.SyntheticEvent>;
   rightIcon?: React.ReactNode;
 }
 
-const InputContainerBase: React.FC<InputContainerProps & Priority> = ({
+export const InputContainerBase: React.FC<InputContainerProps & Priority> = ({
   children,
   className,
   disabled = 'false',
   leftIcon,
+  onClick,
   priority = 'secondary',
   rightIcon,
 }) => (
-  <div
+  <InputContainerStyle
     {...levelDowngrade.setup()}
     className={className}
     data-disabled={disabled}
     data-priority={priority}
+    onClick={onClick}
   >
     {leftIcon && (
       <span data-element="icon" data-box-role="icon">
@@ -37,16 +40,18 @@ const InputContainerBase: React.FC<InputContainerProps & Priority> = ({
         {rightIcon}
       </span>
     )}
-  </div>
+  </InputContainerStyle>
 );
 
 export const InputContainer = styled(InputContainerBase)`
+  ${box}
+` as StyledComponent<'div', Record<string, unknown>, InputContainerProps & Priority>;
+
+export const InputContainerStyle = styled.div`
   --local-background-color: var(--woly-canvas-default);
   --local-border-color: var(--woly-shape-default);
   --local-icon-fill: var(--woly-canvas-text-default);
 
-  ${box}
-
   display: flex;
   align-items: center;
 
@@ -108,4 +113,4 @@ export const InputContainer = styled(InputContainerBase)`
     --local-border-color: var(--woly-canvas-disabled);
     --local-icon-fill: var(--woly-canvas-text-disabled);
   }
-` as StyledComponent<'div', Record<string, unknown>, InputContainerProps & Priority>;
+`;

src/woly/index.ts

@@ -1,4 +1,5 @@
 export * from './atoms';
 export * from './molecules';
+export * from './organisms';
 export * from './templates';
 export { WolyGlobalStyles } from './woly-global-styles';

src/woly/molecules/index.ts

@@ -3,9 +3,10 @@ export { Checkbox } from './checkbox';
 export { DataTable } from './data-table';
 export type { DataTableColumn, DataTableHeadProps } from './data-table';
 export { Field } from './field';
+export { InputChip } from './input-chip';
 export { InputPassword } from './input-password';
-export { Notification } from './notification';
 export { Modal } from './modal';
+export { Notification } from './notification';
 export { Popover } from './popover';
 export { RadioButton } from './radio-button';
 export { Select } from './select';

src/woly/molecules/input-chip/index.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import styled, { StyledComponent } from 'styled-components';
+import { ButtonIcon, Chip } from 'ui/atoms';
+import { IconClose } from 'static/icons';
+import { InputContainerBase, InputContainerProps } from 'ui/elements/input-container';
+import { InputElement } from 'ui/elements';
+import { Priority } from 'lib/types';
+import { levelDowngrade } from 'lib/level-downgrade';
+
+type MultiSelectOptions = React.OptionHTMLAttributes<HTMLOptionElement>;
+
+interface InputChipProps {
+  className?: string;
+  disabled: boolean;
+  leftIcon: React.ReactNode;
+  name?: string;
+  onBlur?: (value?: unknown) => void;
+  onChange?: React.EventHandler<React.SyntheticEvent>;
+  onChipClose: React.EventHandler<React.SyntheticEvent>;
+  onClick: React.EventHandler<React.SyntheticEvent>;
+  onFocus?: (value?: unknown) => void;
+  options: Array<MultiSelectOptions>;
+  rightIcon: React.ReactNode;
+}
+
+export const InputChipBase: React.FC<InputChipProps & Priority> = ({
+  className,
+  disabled = false,
+  leftIcon,
+  name = 'multiselect-input',
+  onBlur,
+  onChange,
+  onChipClose,
+  onClick,
+  onFocus,
+  options = [],
+  priority = 'secondary',
+  rightIcon,
+}) => {
+  if (!options) {
+    return null;
+  }
+
+  let inputField = (
+    <EmptyBox>
+      <InputElement onChange={() => {}} name={name} type="text" disabled />
+    </EmptyBox>
+  );
+
+  if (onChange) {
+    inputField = <InputElement onChange={onChange} name={name} type="text" />;
+  }
+
+  return (
+    <ChipsContainer
+      className={className}
+      disabled={disabled}
+      leftIcon={leftIcon}
+      onBlur={onBlur}
+      onClick={onClick}
+      onFocus={onFocus}
+      priority={priority}
+      rightIcon={rightIcon}
+    >
+      {options.map(({ id, label }) => (
+        <div key={id} data-element="input-chip" {...levelDowngrade.setup()}>
+          <Chip
+            key={id}
+            text={label}
+            priority={priority}
+            rightIcon={
+              <ButtonIcon
+                data-id={id}
+                icon={<IconClose />}
+                onClick={onChipClose}
+                priority={priority}
+              />
+            }
+            {...levelDowngrade.use({ diff: 2 })}
+          />
+        </div>
+      ))}
+      <div>{inputField}</div>
+    </ChipsContainer>
+  );
+};
+
+export const InputChip = styled(InputChipBase)`` as StyledComponent<
+  'div',
+  Record<string, unknown>,
+  InputChipProps & Priority
+>;
+
+export const ChipsContainer = styled(InputContainerBase)`
+  --local-gap: calc(1px * var(--woly-component-level) * var(--woly-main-level));
+  --local-vertical: calc(
+    1px * var(--woly-component-level) * var(--woly-main-level) - var(--woly-border-width)
+  );
+  --local-component-gap: calc(var(--woly-const-m) - var(--woly-border-width));
+
+  [data-element='input'] {
+    display: flex;
+    flex-wrap: wrap;
+    padding-bottom: var(--local-component-gap);
+  }
+
+  & > * {
+    padding: 0 var(--local-vertical);
+  }
+
+  [data-element='input-chip'] {
+    padding-top: var(--local-component-gap);
+    padding-right: var(--local-component-gap);
+  }
+
+  & > [data-box-role='icon']:first-child:not(:only-child) {
+    padding-right: 0;
+    padding-left: var(--local-vertical);
+  }
+
+  & > :not(:first-child) {
+    padding-left: var(--local-gap);
+  }
+  & > [data-box-role='icon']:last-child:not(:only-child) {
+    padding-right: var(--local-vertical);
+    padding-left: 0;
+  }
+` as StyledComponent<'div', Record<string, unknown>, InputContainerProps & Priority>;
+
+const EmptyBox = styled.div`
+  width: 0;
+`;

src/woly/molecules/input-chip/usage.mdx

@@ -0,0 +1,49 @@
+import {InputChip} from 'ui';
+import {Playground, StateEvent} from 'dev/playground';
+import {IconArrowDown} from 'static/icons';
+
+export const fruits = [
+  {
+    id: 2,
+    text: "orange",
+    selected: false
+  },
+  {
+    id: 1,
+    text: "apple",
+    selected: false
+  },
+  {
+    id: 3,
+    text: "lemon",
+    selected: false
+  }
+];
+
+### Example
+
+<Playground>
+  <div style={{ height: '250px' }}>
+    <StateEvent initial={null} change={(event) => event?.target?.dataset.value}>
+      {(value, change) => (
+        <div style={{ width: '100%' }}>
+          <InputChip options={fruits} isInput={false} onChipClose={change} />
+        </div>
+      )}
+    </StateEvent>
+  </div>
+</Playground>
+
+### Example 2
+
+<Playground>
+  <div style={{ height: '250px' }}>
+    <StateEvent initial={null} change={(event) => event?.target?.dataset.value}>
+      {(value, change) => (
+        <div style={{ width: '100%' }}>
+          <InputChip options={fruits} isInput={true} onChipClose={change} />
+        </div>
+      )}
+    </StateEvent>
+  </div>
+</Playground>

src/woly/molecules/popover/index.tsx

@@ -11,6 +11,7 @@ export type PopoverProps = BasePopoverProps & {
   content: React.ReactNode;
   isOpen: boolean;
   position?: PopoverPositionType;
+  onChildrenClick?: () => void;
   onClose?: () => void;
   fullWidth?: boolean;
   disabled?: boolean;
@@ -25,13 +26,13 @@ const PopoverBase: React.FC<PopoverProps> = ({
   isOpen,
   position = 'bottom',
   priority = 'secondary',
+  onChildrenClick,
   onClose = () => {},
   fullWidth = true,
   disabled = false,
   ...rest
 }) => {
   const ref = React.useRef<HTMLDivElement>(null);
-
   const [isVisible, setVisibility] = React.useReducer((is) => !is, isOpen);
   const [popoverPosition, setPosition] = React.useState<PopoverPositionType>('bottom');
 
@@ -48,8 +49,7 @@ const PopoverBase: React.FC<PopoverProps> = ({
     (event) => {
       if (isVisible && ref.current === null) return;
 
-      const trigger = ref.current;
-      if (isVisible && !trigger?.contains(event.target)) {
+      if (isVisible && !ref.current?.contains(event.target)) {
         setVisibility();
       }
     },
@@ -69,29 +69,37 @@ const PopoverBase: React.FC<PopoverProps> = ({
     setPosition(position);
   }, [position]);
 
+  React.useEffect(() => {
+    if (isOpen !== isVisible) {
+      setVisibility();
+    }
+  }, [isOpen]);
+
   useUpdateEffect(() => {
     if (!isVisible) {
       onClose();
     }
   }, [isVisible]);
 
+  const onChildClick = onChildrenClick || setVisibility;
+
   React.useEffect(() => {
     if (typeof window === 'undefined' || !window.document) return;
 
     document.addEventListener('scroll', onScroll);
-    document.addEventListener('click', onClickOutside);
+    document.addEventListener('mousedown', onClickOutside);
     document.addEventListener('keydown', onKeyDown);
 
     return () => {
       document.removeEventListener('scroll', onScroll);
-      document.removeEventListener('click', onClickOutside);
+      document.removeEventListener('mousedown', onClickOutside);
       document.removeEventListener('keydown', onKeyDown);
     };
   }, [onScroll, onClickOutside]);
 
   return (
     <div ref={ref} {...rest}>
-      <div onClick={setVisibility}>{children}</div>
+      <div onClick={onChildClick}>{children}</div>
       <Surface
         data-element="popover"
         data-full-width={fullWidth}
@@ -111,29 +119,24 @@ export const Popover = styled(PopoverBase)<PopoverProps>`
   );
   --popover-position: calc(100% + 4px + var(--woly-gap, 10px));
   position: relative;
-
   [data-element='popover'] {
     position: absolute;
     z-index: 1;
 
     width: max-content;
-
     min-width: 100%;
 
     visibility: hidden;
     opacity: 0;
   }
-
   [data-full-width='false'] {
     width: auto;
     min-width: unset;
   }
-
   & > [data-open='true'] {
     visibility: visible;
     opacity: 1;
   }
-
   & > [data-position='top'] {
     bottom: var(--popover-position);
   }

src/woly/organisms/index.tsx

@@ -0,0 +1 @@
+export { Multiselect } from './multiselect';