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

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -1,155 +1,155 @@
-import { Meta, StoryObj } from '@storybook/react';
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-
-import DropdownOption from '@components/DropdownOption';
-
-import Dropdown from './Dropdown';
-import { IDropdownProps } from './types';
-import { IDropdownOption } from '../..';
-
-type Args = IDropdownProps<IDropdownOption>;
-
-const items = [
-  { id: 1, value: 'One lorem ipsum', subText: 'subtext' },
-  { id: 2, value: 'Two lorem ipsum', subText: 'subtext' },
-  { id: 3, value: 'Three lorem ipsum', subText: 'subtext' },
-];
-
-export default {
-  title: 'Components/Dropdown',
-  component: Dropdown,
-  argTypes: {
-    onChange: {
-      control: {
-        disable: true,
-      },
-    },
-    className: {
-      description: 'Used in order to overwrite the default style',
-      table: {
-        type: {
-          summary: 'StyledComponent',
-        },
-      },
-      control: {
-        disable: true,
-      },
-    },
-  },
-  decorators: [
-    (Story, { args }) => {
-      const noop = () => {
-        /* no-op */
-      };
-      return (
-        <div style={{ paddingBottom: 200 }}>
-          {Story({ ...args, onChange: noop })}
-        </div>
-      );
-    },
-  ],
-} as Meta<typeof Dropdown>;
-
-export const Basic: StoryObj = (args: Args) => {
-  return (
-    <Dropdown selectedItem={items[2]} isDisabled={args.isDisabled}>
-      {items.map((item) => (
-        <DropdownOption key={item.id} value={item.id}>
-          {item.value}
-        </DropdownOption>
-      ))}
-    </Dropdown>
-  );
-};
-
-Basic.args = { isDisabled: false };
-
-export const Opened: StoryObj = (args: Args) => {
-  return (
-    <Dropdown selectedItem={items[2]} {...args}>
-      {items.map((item) => (
-        <DropdownOption key={item.id} value={item.id}>
-          {item.value}
-        </DropdownOption>
-      ))}
-    </Dropdown>
-  );
-};
-
-Opened.args = { isOpen: true, isDisabled: false };
-
-export const Simple: StoryObj = (args: Args) => {
-  return (
-    <Dropdown isDisabled={args.isDisabled}>
-      {items.map((item) => (
-        <DropdownOption key={item.id} value={item.value} />
-      ))}
-    </Dropdown>
-  );
-};
-
-Simple.args = { isDisabled: false };
-
-export const NoItems: StoryObj = () => {
-  return <Dropdown>{null}</Dropdown>;
-};
-
-NoItems.args = { isDisabled: false };
-
-export const Custom: StoryObj = (args: Args) => {
-  // Color palette: https://mycolor.space/?hex=%23FF69B4&sub=1
-  const CustomOption = styled(DropdownOption)`
-    width: auto;
-    height: auto;
-    padding: 10px;
-
-    text-align: left;
-    line-height: 18px;
-    font-size: 16px;
-
-    background: hotpink;
-    color: white;
-
-    :hover {
-      background: pink;
-    }
-
-    b {
-      color: white;
-    }
-  `;
-
-  return (
-    <Dropdown
-      isDisabled={args.isDisabled}
-      selectedItem={items[2]}
-      css={css`
-        background: #ff947b;
-        :focus {
-          background: #ffb566;
-        }
-        &[aria-expanded='true'] {
-          color: #975875;
-
-          svg {
-            path {
-              stroke: #975875;
-            }
-          }
-        }
-      `}>
-      {items.map((item) => (
-        <CustomOption key={item.id} value={item.id} label={item.value}>
-          {item.value}
-          &nbsp;|&nbsp;
-          <b>{item.subText}</b>
-        </CustomOption>
-      ))}
-    </Dropdown>
-  );
-};
-
-Custom.args = {
-  isDisabled: false,
-};
+import { Meta, StoryObj } from '@storybook/react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
+import DropdownOption from '@components/DropdownOption';
+
+import Dropdown from './Dropdown';
+import { IDropdownProps } from './types';
+import { IDropdownOption } from '../..';
+
+type Args = IDropdownProps<IDropdownOption>;
+
+const items = [
+  { id: 1, value: 'One lorem ipsum', subText: 'subtext' },
+  { id: 2, value: 'Two lorem ipsum', subText: 'subtext' },
+  { id: 3, value: 'Three lorem ipsum', subText: 'subtext' },
+];
+
+export default {
+  title: 'Components/Dropdown',
+  component: Dropdown,
+  argTypes: {
+    onChange: {
+      control: {
+        disable: true,
+      },
+    },
+    className: {
+      description: 'Used in order to overwrite the default style',
+      table: {
+        type: {
+          summary: 'StyledComponent',
+        },
+      },
+      control: {
+        disable: true,
+      },
+    },
+  },
+  decorators: [
+    (Story, { args }) => {
+      const noop = () => {
+        /* no-op */
+      };
+      return (
+        <div style={{ paddingBottom: 200 }}>
+          {Story({ ...args, onChange: noop })}
+        </div>
+      );
+    },
+  ],
+} as Meta<typeof Dropdown>;
+
+export const Basic: StoryObj = (args: Args) => {
+  return (
+    <Dropdown selectedItem={items[2]} isDisabled={args.isDisabled}>
+      {items.map((item) => (
+        <DropdownOption key={item.id} value={item.id}>
+          {item.value}
+        </DropdownOption>
+      ))}
+    </Dropdown>
+  );
+};
+
+Basic.args = { isDisabled: false };
+
+export const Opened: StoryObj = (args: Args) => {
+  return (
+    <Dropdown selectedItem={items[2]} {...args}>
+      {items.map((item) => (
+        <DropdownOption key={item.id} value={item.id}>
+          {item.value}
+        </DropdownOption>
+      ))}
+    </Dropdown>
+  );
+};
+
+Opened.args = { isOpen: true, isDisabled: false };
+
+export const Simple: StoryObj = (args: Args) => {
+  return (
+    <Dropdown isDisabled={args.isDisabled}>
+      {items.map((item) => (
+        <DropdownOption key={item.id} value={item.value} />
+      ))}
+    </Dropdown>
+  );
+};
+
+Simple.args = { isDisabled: false };
+
+export const NoItems: StoryObj = () => {
+  return <Dropdown>{null}</Dropdown>;
+};
+
+NoItems.args = { isDisabled: false };
+
+export const Custom: StoryObj = (args: Args) => {
+  // Color palette: https://mycolor.space/?hex=%23FF69B4&sub=1
+  const CustomOption = styled(DropdownOption)`
+    width: auto;
+    height: auto;
+    padding: 10px;
+
+    text-align: left;
+    line-height: 18px;
+    font-size: 16px;
+
+    background: hotpink;
+    color: white;
+
+    :hover {
+      background: pink;
+    }
+
+    b {
+      color: white;
+    }
+  `;
+
+  return (
+    <Dropdown
+      isDisabled={args.isDisabled}
+      selectedItem={items[2]}
+      css={css`
+        background: #ff947b;
+        :focus {
+          background: #ffb566;
+        }
+        &[aria-expanded='true'] {
+          color: #975875;
+
+          svg {
+            path {
+              stroke: #975875;
+            }
+          }
+        }
+      `}>
+      {items.map((item) => (
+        <CustomOption key={item.id} value={item.id} label={item.value}>
+          {item.value}
+          &nbsp;|&nbsp;
+          <b>{item.subText}</b>
+        </CustomOption>
+      ))}
+    </Dropdown>
+  );
+};
+
+Custom.args = {
+  isDisabled: false,
+};

package/src/components/Dropdown/Dropdown.tsx

@@ -1,135 +1,135 @@
-import React, { useState, useEffect, useRef, useId, ReactNode } from 'react';
-import styled from '@emotion/styled';
-import { useTheme } from '@emotion/react';
-import { useClickOutside } from '@ssa-ui-kit/hooks';
-
-import DropdownToggle from '@components/DropdownToggle';
-import DropdownArrow from '@components/DropdownArrow';
-import DropdownOptions from '@components/DropdownOptions';
-import DropdownContext from '@components/Dropdown/Dropdown.context';
-import { IDropdownOption } from '@components/DropdownOptions/types';
-
-import { DropdownContextType, IDropdownProps } from './types';
-
-/**
- * The structure of the component:
- *
- * Dropdown
- *   DropdownToggle
- *   DropdownOptions
- *     DropdownOption
- *
- * Aria attributes are set according to
- * https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
- **/
-
-const DropdownBase = styled.div`
-  display: inline-block;
-  position: relative;
-`;
-
-const Dropdown = <T extends IDropdownOption>({
-  selectedItem,
-  isDisabled,
-  isOpen: isInitOpen,
-  children,
-  onChange: handleChange,
-  className,
-}: IDropdownProps<T>) => {
-  const theme = useTheme();
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  const placeholder = 'Select something';
-  const dropdownId = useId();
-  const options: T[] = [];
-
-  const [isFocused, setIsFocused] = useState(false);
-  const [isOpen, setIsOpen] = useState(isInitOpen || false);
-  const [colors, setColors] = useState<Array<string | undefined>>([]);
-  const [activeItem, setActiveItem] = useState<T | undefined>(selectedItem);
-
-  const onChange: DropdownContextType['onChange'] = (item) => {
-    const innerItem = options.filter((option) => option.value === item)[0];
-
-    setIsOpen(false);
-
-    if (isDisabled || !item) {
-      return;
-    }
-
-    if (innerItem.value === activeItem?.value) {
-      return;
-    }
-
-    setActiveItem(innerItem);
-    handleChange && handleChange(innerItem);
-  };
-
-  useClickOutside(dropdownRef, () => isOpen && setIsOpen(false));
-
-  useEffect(() => {
-    if (isDisabled) {
-      setColors([theme.colors.greyDarker60, theme.colors.grey20]);
-    } else if (isOpen) {
-      setColors([theme.colors.white, theme.colors.white60]);
-    } else if (isFocused) {
-      setColors([theme.colors.greyDarker, theme.colors.greyDarker60]);
-    }
-  }, [isOpen, isDisabled, isFocused]);
-
-  useEffect(() => {
-    if (isDisabled && isOpen) {
-      setIsOpen(false);
-    }
-  }, [isDisabled]);
-
-  const childrenArray = React.Children.toArray(children).filter(Boolean);
-
-  const items = (childrenArray as React.ReactElement[]).map((child, index) => {
-    options.push(child.props);
-
-    return React.cloneElement(child, {
-      index,
-      onClick: onChange.bind(this),
-      ...child.props,
-    });
-  });
-
-  const contextValue: DropdownContextType = React.useMemo(
-    () => ({ onChange, activeItem }),
-    [onChange, activeItem],
-  );
-
-  const value = (
-    activeItem
-      ? activeItem.label ||
-        activeItem.children ||
-        activeItem.value ||
-        activeItem ||
-        placeholder
-      : placeholder
-  ) as ReactNode;
-
-  return (
-    <DropdownContext.Provider value={contextValue}>
-      <DropdownBase ref={dropdownRef} data-testid="dropdown">
-        <DropdownToggle
-          className={className}
-          isOpen={isOpen}
-          disabled={isDisabled}
-          onClick={setIsOpen.bind(null, !isOpen)}
-          onFocus={setIsFocused.bind(null, true)}
-          colors={colors}
-          ariaLabelledby={`dropdown-label-${dropdownId}`}
-          ariaControls={`dropdown-popup-${dropdownId}`}>
-          {value}
-          <DropdownArrow isUp={isOpen} />
-        </DropdownToggle>
-
-        {isOpen ? <DropdownOptions>{items}</DropdownOptions> : null}
-      </DropdownBase>
-    </DropdownContext.Provider>
-  );
-};
-
-export default Dropdown;
+import React, { useState, useEffect, useRef, useId, ReactNode } from 'react';
+import styled from '@emotion/styled';
+import { useTheme } from '@emotion/react';
+import { useClickOutside } from '@ssa-ui-kit/hooks';
+
+import DropdownToggle from '@components/DropdownToggle';
+import DropdownArrow from '@components/DropdownArrow';
+import DropdownOptions from '@components/DropdownOptions';
+import DropdownContext from '@components/Dropdown/Dropdown.context';
+import { IDropdownOption } from '@components/DropdownOptions/types';
+
+import { DropdownContextType, IDropdownProps } from './types';
+
+/**
+ * The structure of the component:
+ *
+ * Dropdown
+ *   DropdownToggle
+ *   DropdownOptions
+ *     DropdownOption
+ *
+ * Aria attributes are set according to
+ * https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
+ **/
+
+const DropdownBase = styled.div`
+  display: inline-block;
+  position: relative;
+`;
+
+const Dropdown = <T extends IDropdownOption>({
+  selectedItem,
+  isDisabled,
+  isOpen: isInitOpen,
+  children,
+  onChange: handleChange,
+  className,
+}: IDropdownProps<T>) => {
+  const theme = useTheme();
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const placeholder = 'Select something';
+  const dropdownId = useId();
+  const options: T[] = [];
+
+  const [isFocused, setIsFocused] = useState(false);
+  const [isOpen, setIsOpen] = useState(isInitOpen || false);
+  const [colors, setColors] = useState<Array<string | undefined>>([]);
+  const [activeItem, setActiveItem] = useState<T | undefined>(selectedItem);
+
+  const onChange: DropdownContextType['onChange'] = (item) => {
+    const innerItem = options.filter((option) => option.value === item)[0];
+
+    setIsOpen(false);
+
+    if (isDisabled || !item) {
+      return;
+    }
+
+    if (innerItem.value === activeItem?.value) {
+      return;
+    }
+
+    setActiveItem(innerItem);
+    handleChange && handleChange(innerItem);
+  };
+
+  useClickOutside(dropdownRef, () => isOpen && setIsOpen(false));
+
+  useEffect(() => {
+    if (isDisabled) {
+      setColors([theme.colors.greyDarker60, theme.colors.grey20]);
+    } else if (isOpen) {
+      setColors([theme.colors.white, theme.colors.white60]);
+    } else if (isFocused) {
+      setColors([theme.colors.greyDarker, theme.colors.greyDarker60]);
+    }
+  }, [isOpen, isDisabled, isFocused]);
+
+  useEffect(() => {
+    if (isDisabled && isOpen) {
+      setIsOpen(false);
+    }
+  }, [isDisabled]);
+
+  const childrenArray = React.Children.toArray(children).filter(Boolean);
+
+  const items = (childrenArray as React.ReactElement[]).map((child, index) => {
+    options.push(child.props);
+
+    return React.cloneElement(child, {
+      index,
+      onClick: onChange.bind(this),
+      ...child.props,
+    });
+  });
+
+  const contextValue: DropdownContextType = React.useMemo(
+    () => ({ onChange, activeItem }),
+    [onChange, activeItem],
+  );
+
+  const value = (
+    activeItem
+      ? activeItem.label ||
+        activeItem.children ||
+        activeItem.value ||
+        activeItem ||
+        placeholder
+      : placeholder
+  ) as ReactNode;
+
+  return (
+    <DropdownContext.Provider value={contextValue}>
+      <DropdownBase ref={dropdownRef} data-testid="dropdown">
+        <DropdownToggle
+          className={className}
+          isOpen={isOpen}
+          disabled={isDisabled}
+          onClick={setIsOpen.bind(null, !isOpen)}
+          onFocus={setIsFocused.bind(null, true)}
+          colors={colors}
+          ariaLabelledby={`dropdown-label-${dropdownId}`}
+          ariaControls={`dropdown-popup-${dropdownId}`}>
+          {value}
+          <DropdownArrow isUp={isOpen} />
+        </DropdownToggle>
+
+        {isOpen ? <DropdownOptions>{items}</DropdownOptions> : null}
+      </DropdownBase>
+    </DropdownContext.Provider>
+  );
+};
+
+export default Dropdown;

package/src/components/Dropdown/index.ts

@@ -1,2 +1,2 @@
-export { default } from './Dropdown';
-export * from './types';
+export { default } from './Dropdown';
+export * from './types';

package/src/components/Dropdown/types.ts

@@ -1,17 +1,17 @@
-import { IDropdownOption } from '@components/DropdownOptions';
-import { CommonProps } from '@global-types/emotion';
-
-export interface IDropdownProps<P extends IDropdownOption> extends CommonProps {
-  selectedItem?: P;
-  onChange?: (item: P) => void;
-  isDisabled?: boolean;
-  placeholder?: string;
-  children?: React.ReactNode;
-  className?: string;
-  isOpen?: boolean;
-}
-
-export interface DropdownContextType {
-  onChange: (item?: string) => void;
-  activeItem?: IDropdownOption | null;
-}
+import { IDropdownOption } from '@components/DropdownOptions';
+import { CommonProps } from '@global-types/emotion';
+
+export interface IDropdownProps<P extends IDropdownOption> extends CommonProps {
+  selectedItem?: P;
+  onChange?: (item: P) => void;
+  isDisabled?: boolean;
+  placeholder?: string;
+  children?: React.ReactNode;
+  className?: string;
+  isOpen?: boolean;
+}
+
+export interface DropdownContextType {
+  onChange: (item?: string) => void;
+  activeItem?: IDropdownOption | null;
+}

package/src/components/DropdownArrow/DropdownArrow.tsx

@@ -1,17 +1,17 @@
-import styled from '@emotion/styled';
-
-import Icon from '@components/Icon';
-import { CommonProps } from '@global-types/emotion';
-
-export const DropdownArrowBase = styled.div<CommonProps>`
-  display: flex;
-  align-items: center;
-`;
-
-const DropdownArrow = ({ isUp }: { isUp: boolean }) => (
-  <DropdownArrowBase>
-    <Icon name={`carrot-${isUp ? 'up' : 'down'}`} size={12} />
-  </DropdownArrowBase>
-);
-
-export default DropdownArrow;
+import styled from '@emotion/styled';
+
+import Icon from '@components/Icon';
+import { CommonProps } from '@global-types/emotion';
+
+export const DropdownArrowBase = styled.div<CommonProps>`
+  display: flex;
+  align-items: center;
+`;
+
+const DropdownArrow = ({ isUp }: { isUp: boolean }) => (
+  <DropdownArrowBase>
+    <Icon name={`carrot-${isUp ? 'up' : 'down'}`} size={12} />
+  </DropdownArrowBase>
+);
+
+export default DropdownArrow;

package/src/components/DropdownArrow/index.ts

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