@mailstep/design-system 0.7.67 → 0.7.68-beta.0

package/ui/Elements/Badge/Badge.d.ts

@@ -1,12 +1,13 @@
-/// <reference types="react" />
+import { default as React, FC, ReactElement } from 'react';
+
 export type Props = {
     children?: React.ReactNode;
-    label?: string | number | JSX.Element;
+    label?: string | number | ReactElement;
     color?: string;
     size?: 'small' | 'default';
     childWidth?: string | number;
     topPosition?: boolean;
     horizontalPosition?: 'middle' | 'right';
 };
-declare const Badge: ({ children, color, size, label, childWidth, topPosition, horizontalPosition }: Props) => JSX.Element;
+declare const Badge: FC<Props>;
 export default Badge;

package/ui/Elements/Badge/Badge.js

@@ -3,9 +3,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled, { css, useTheme } from '@xstyled/styled-components';
-import { th } from '@xstyled/styled-components';
 import { useMemo } from 'react';
+import styled, { css, useTheme, th } from '@xstyled/styled-components';
 var Circle = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-width: 12px;\n  display: flex;\n  align-items: center;\n  height: ", ";\n  padding: ", ";\n  color: white;\n  gap: 10px;\n  background-color: ", ";\n  border-radius: 29px;\n  line-height: 15.6px;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: semiBold;\n  position: absolute;\n  top: ", ";\n  left: ", ";\n  z-index: 1;\n"], ["\n  min-width: 12px;\n  display: flex;\n  align-items: center;\n  height: ", ";\n  padding: ", ";\n  color: white;\n  gap: 10px;\n  background-color: ", ";\n  border-radius: 29px;\n  line-height: 15.6px;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: semiBold;\n  position: absolute;\n  top: ", ";\n  left: ", ";\n  z-index: 1;\n"])), function (_a) {
     var size = _a.size;
     return (size === 'small' ? '16px' : '24px');

package/ui/Elements/Badge/index.d.ts

@@ -1,3 +1,4 @@
-import Badge from './Badge';
+import { default as Badge } from './Badge';
+
 export { Badge };
 export default Badge;

package/ui/Elements/Badge/stories/Badge.stories.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import type { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react';
+
 declare const meta: {
     title: string;
-    component: ({ children, color, size, label, childWidth, topPosition, horizontalPosition }: import("../Badge").Props) => JSX.Element;
+    component: import('react').FC<import('../Badge').Props>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/BarChartSymbol/BarChartSymbol.d.ts

@@ -1,4 +1,5 @@
 import { FC } from 'react';
+
 export type BarChartSymbolProps = {
     selected?: number;
     total?: number;

package/ui/Elements/BarChartSymbol/stories/BarChartSymbol.stories.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import type { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react';
+
 declare const meta: {
     title: string;
-    component: import("react").FC<import("../BarChartSymbol").BarChartSymbolProps>;
+    component: import('react').FC<import('../BarChartSymbol').BarChartSymbolProps>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/BarChartSymbol/styles.d.ts

@@ -1,9 +1,9 @@
-export declare const Bar: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const Bar: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     height: number;
     minHeight: number;
     index: number;
     total: number;
     selected: number;
-    color?: string | undefined;
-    width?: number | undefined;
+    color?: string;
+    width?: number;
 }, never>;

package/ui/Elements/BorderedBox/BorderedBox.d.ts

@@ -1,3 +1,5 @@
+import { default as React } from 'react';
 import { BorderedBoxProps } from './types';
-declare const BorderedBox: ({ children, className, id, ...rest }: BorderedBoxProps) => JSX.Element;
+
+declare const BorderedBox: React.FC<BorderedBoxProps>;
 export default BorderedBox;

package/ui/Elements/BorderedBox/index.d.ts

@@ -1,3 +1,4 @@
-import BorderedBox from './BorderedBox';
+import { default as BorderedBox } from './BorderedBox';
+
 export { BorderedBox };
 export default BorderedBox;

package/ui/Elements/BorderedBox/stories/BorderedBox.stories.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import type { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react';
+
 declare const meta: {
     title: string;
-    component: ({ children, className, id, ...rest }: import("../types").BorderedBoxProps) => JSX.Element;
+    component: import('react').FC<import('../types').BorderedBoxProps>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/BorderedBox/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type BorderedBoxProps = {
     children: React.ReactNode;
     className?: string;

package/ui/Elements/Button/Button.d.ts

@@ -1,3 +1,5 @@
-import type { Props } from './types';
-declare const Button: ({ isLoading, loadingText, icon, iconLeft, iconRight, variant, appearance, disabled, fullWidth, height, buttonRef, onClick, ...props }: Props) => JSX.Element;
+import { FC } from 'react';
+import { Props } from './types';
+
+declare const Button: FC<Props>;
 export default Button;

package/ui/Elements/Button/index.d.ts

@@ -1,5 +1,6 @@
-import Button from './Button';
+import { default as Button } from './Button';
 import { AppearanceValue } from './types';
+
 export { Button };
 export type { AppearanceValue };
 export default Button;

package/ui/Elements/Button/stories/Button.stories.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import type { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react';
+
 declare const meta: {
     title: string;
-    component: ({ isLoading, loadingText, icon, iconLeft, iconRight, variant, appearance, disabled, fullWidth, height, buttonRef, onClick, ...props }: import("../types").Props) => JSX.Element;
+    component: import('react').FC<import('../types').Props>;
     tags: string[];
     argTypes: {};
     parameters: {

package/ui/Elements/Button/styles.d.ts

@@ -1,17 +1,16 @@
-/// <reference types="react" />
-export declare const StyledWrapper: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
-export declare const LoadingIconWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const StyledWrapper: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {}, never>;
+export declare const LoadingIconWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     $addMarginRight: boolean;
 }, never>;
-export declare const StyledIcon: import("styled-components").StyledComponent<({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning }: import("../Icon").IconProps) => JSX.Element, import("@xstyled/system").Theme, {
-    $addMarginRight?: boolean | undefined;
-    $addMarginLeft?: boolean | undefined;
+export declare const StyledIcon: import('styled-components').StyledComponent<import('react').FC<import('../Icon').IconProps>, import('@xstyled/system').Theme, {
+    $addMarginRight?: boolean;
+    $addMarginLeft?: boolean;
 }, never>;
-export declare const StyledButton: import("styled-components").StyledComponent<"button", import("@xstyled/system").Theme, {
+export declare const StyledButton: import('styled-components').StyledComponent<"button", import('@xstyled/system').Theme, {
     disabled: boolean;
     children?: any;
     onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
-    iconPadding?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-    height?: string | undefined;
+    iconPadding?: boolean;
+    fullWidth?: boolean;
+    height?: string;
 }, never>;

package/ui/Elements/Button/types.d.ts

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
+
 export type VariantValue = 'default' | 'success' | 'outline' | 'ghost' | 'link' | 'icon' | 'floating';
 export type AppearanceValue = 'primary' | 'secondary' | 'tertiary' | 'ghost';
 export type Props = React.HTMLProps<HTMLButtonElement> & {
@@ -11,10 +12,10 @@ export type Props = React.HTMLProps<HTMLButtonElement> & {
     isLoading?: boolean;
     name?: string;
     as?: string | React.ComponentType;
-    loadingText?: string | JSX.Element;
-    icon?: string | JSX.Element;
-    iconLeft?: string | JSX.Element;
-    iconRight?: string | JSX.Element;
+    loadingText?: string | ReactNode;
+    icon?: string | ReactNode;
+    iconLeft?: string | ReactNode;
+    iconRight?: string | ReactNode;
     buttonRef?: any;
     type?: 'button' | 'submit' | 'reset';
 };

package/ui/Elements/Card/Card.d.ts

@@ -1,4 +1,5 @@
 import { FC } from 'react';
 import { CardProps } from './types';
+
 declare const Card: FC<CardProps>;
 export default Card;

package/ui/Elements/Card/index.d.ts

@@ -1,2 +1,3 @@
-import Card from './Card';
+import { default as Card } from './Card';
+
 export default Card;

package/ui/Elements/Card/stories/Card.stories.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import type { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react';
+
 declare const meta: {
     title: string;
-    component: import("react").FC<import("../types").CardProps>;
+    component: import('react').FC<import('../types').CardProps>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/Card/styles.d.ts

@@ -1,7 +1,8 @@
 import { Display } from './types';
-export declare const StyledCard: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+
+export declare const StyledCard: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     display: Display;
-    bg?: string | undefined;
+    bg?: string;
     hasOnClick: boolean;
-    maxWidth?: string | undefined;
+    maxWidth?: string;
 }, never>;

package/ui/Elements/Card/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type CardProps = {
     children: React.ReactNode;
     display?: Display;

package/ui/Elements/CheckedCircle/index.d.ts

@@ -1,4 +1,5 @@
-import { type FC } from 'react';
+import { FC } from 'react';
+
 type CheckedCircleProps = {
     checked?: boolean;
     color?: string;

package/ui/Elements/CheckedCircle/storries/CheckedCircle.stories.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
-import type { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react';
+
 declare const meta: {
     title: string;
-    component: import("react").FC<{
-        checked?: boolean | undefined;
-        color?: string | undefined;
+    component: import('react').FC<{
+        checked?: boolean;
+        color?: string;
     }>;
     tags: string[];
     argTypes: {};

package/ui/Elements/CheckedCircle/styles.d.ts

@@ -1,3 +1,3 @@
-export declare const CheckedCircleContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const CheckedCircleContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     color: string;
 }, never>;

package/ui/Elements/DatePicker/DatePicker.d.ts

@@ -1,6 +1,7 @@
-import React from 'react';
-import type { SpaceAround } from '../SpaceAround';
-import type { DateTimeOthers, DatetimepickerProps } from './Datetime/types';
+import { default as React } from 'react';
+import { SpaceAround } from '../SpaceAround';
+import { DateTimeOthers, DatetimepickerProps } from './Datetime/types';
+
 export type DatePickerType = DatetimepickerProps & {
     onChange: (value: string | Date) => void;
     disabled?: boolean;
@@ -20,5 +21,5 @@ export type DatePickerType = DatetimepickerProps & {
     onInputChange?: () => void;
     onChangeOthers?: (others: DateTimeOthers) => void;
 };
-declare const _default: React.MemoExoticComponent<({ name, value, initialViewDate, error, label, disabled, isValidDate, onChange, dateFormat, timeFormat, open, secondValue, input, icon, showInputLabel, showCalendarLabel, spaceAround, className, onClear, onInputChange, ...passProps }: DatePickerType) => JSX.Element>;
+declare const _default: React.NamedExoticComponent<DatePickerType>;
 export default _default;

package/ui/Elements/DatePicker/Datetime/DateTime.d.ts

@@ -1,6 +1,7 @@
-import React from 'react';
-import moment from 'moment';
-import type { DatetimepickerProps } from './types';
+import { default as React } from 'react';
+import { default as moment } from 'moment';
+import { DatetimepickerProps } from './types';
+
 export default class Datetime extends React.Component<DatetimepickerProps> {
     static defaultProps: {
         onOpen: () => void;
@@ -30,7 +31,7 @@ export default class Datetime extends React.Component<DatetimepickerProps> {
     constructor(props: any);
     render(): import("react/jsx-runtime").JSX.Element;
     renderInput(): import("react/jsx-runtime").JSX.Element | undefined;
-    renderView(): JSX.Element;
+    renderView(): React.ReactNode;
     _renderCalendar: () => import("react/jsx-runtime").JSX.Element;
     getInitialState(): {
         open: boolean;

package/ui/Elements/DatePicker/Datetime/components/DateRepeater.d.ts

@@ -1,5 +1,6 @@
-import type { FC } from 'react';
-import type { DateTimeOthers } from '../types';
+import { FC } from 'react';
+import { DateTimeOthers } from '../types';
+
 type DateRepeaterProps = {
     onChangeOthers?: ({ dateTypeRepeater }: DateTimeOthers) => void;
     others: DateTimeOthers;

package/ui/Elements/DatePicker/Datetime/components/FooterRow.d.ts

@@ -1,3 +1,3 @@
-export declare const FooterRow: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    disabled?: boolean | undefined;
+export declare const FooterRow: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+    disabled?: boolean;
 }, never>;

package/ui/Elements/DatePicker/Datetime/components/FooterRowLabel.d.ts

@@ -1 +1 @@
-export declare const FooterRowLabel: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
+export declare const FooterRowLabel: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {}, never>;

package/ui/Elements/DatePicker/Datetime/components/TimeInput.d.ts

@@ -1 +1 @@
-export declare const TimeInput: import("styled-components").StyledComponent<"input", import("@xstyled/system").Theme, {}, never>;
+export declare const TimeInput: import('styled-components').StyledComponent<"input", import('@xstyled/system').Theme, {}, never>;

package/ui/Elements/DatePicker/Datetime/components/Timepicker.d.ts

@@ -1,4 +1,5 @@
-import { type FC } from 'react';
+import { FC } from 'react';
+
 interface TimepickerProps {
     setTime: (type: string, value: number) => void;
     value: Date | null;

package/ui/Elements/DatePicker/Datetime/types.d.ts

@@ -1,5 +1,6 @@
-import type { FocusEvent, FocusEventHandler } from 'react';
-import type { Moment } from 'moment';
+import { FocusEvent, FocusEventHandler, ReactNode } from 'react';
+import { Moment } from 'moment';
+
 export type ViewMode = 'years' | 'months' | 'days' | 'time';
 export interface TimeConstraint {
     min: number;
@@ -36,11 +37,11 @@ export interface DatetimepickerProps {
     className?: string;
     inputProps?: React.HTMLProps<HTMLInputElement>;
     isValidDate?: (currentDate: any, selectedDate: any) => boolean;
-    renderView?: (viewMode: string, renderCalendar: Function) => JSX.Element;
-    renderDay?: (props: any, currentDate: any, selectedDate: any) => JSX.Element;
-    renderMonth?: (props: any, month: number, year: number, selectedDate: any) => JSX.Element;
-    renderYear?: (props: any, year: number, selectedDate: any) => JSX.Element;
-    renderInput?: (props: any, openCalendar: Function, closeCalendar: Function) => JSX.Element;
+    renderView?: (viewMode: string, renderCalendar: Function) => ReactNode;
+    renderDay?: (props: any, currentDate: any, selectedDate: any) => ReactNode;
+    renderMonth?: (props: any, month: number, year: number, selectedDate: any) => ReactNode;
+    renderYear?: (props: any, year: number, selectedDate: any) => ReactNode;
+    renderInput?: (props: any, openCalendar: Function, closeCalendar: Function) => ReactNode;
     strictParsing?: boolean;
     closeOnSelect?: boolean;
     timeConstraints?: TimeConstraints;

package/ui/Elements/DatePicker/Datetime/views/DaysView.d.ts

@@ -1,4 +1,5 @@
-import React from 'react';
+import { default as React } from 'react';
+
 export default class DaysView extends React.Component {
     static defaultProps: {
         isValidDate: () => boolean;

package/ui/Elements/DatePicker/Datetime/views/MonthsView.d.ts

@@ -1,4 +1,5 @@
-import React from 'react';
+import { default as React } from 'react';
+
 export default class MonthsView extends React.Component {
     render(): import("react/jsx-runtime").JSX.Element;
     renderNavigation(): import("react/jsx-runtime").JSX.Element;

package/ui/Elements/DatePicker/Datetime/views/YearsView.d.ts

@@ -1,4 +1,5 @@
-import React from 'react';
+import { default as React } from 'react';
+
 export default class YearsView extends React.Component {
     static defaultProps: {
         renderYear: (props: any, year: any) => import("react/jsx-runtime").JSX.Element;

package/ui/Elements/DatePicker/index.d.ts

@@ -1,3 +1,4 @@
-import DatePicker from './DatePicker';
+import { default as DatePicker } from './DatePicker';
+
 export { DatePickerRepeat, TimePickerRepeat } from './Datetime/types';
 export default DatePicker;

package/ui/Elements/DatePicker/styles.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare const DatePickerBase: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
+export declare const DatePickerBase: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;

package/ui/Elements/DatePicker/utils/constants.d.ts

@@ -1,3 +1,4 @@
 import { DatePickerRepeat, TimePickerRepeat } from '../Datetime/types';
+
 export declare const DatePickerRepeatTrans: Record<DatePickerRepeat, string>;
 export declare const TimePickerRepeatTrans: Record<TimePickerRepeat, string>;

package/ui/Elements/Dropdown/Dropdown.d.ts

@@ -1,3 +1,5 @@
+import { FC } from 'react';
 import { DropdownProps } from './types';
-declare const Dropdown: ({ show, className, wrapRef, children, showArrow, verticalShift, customDropdownPosition, }: DropdownProps) => JSX.Element;
+
+declare const Dropdown: FC<DropdownProps>;
 export default Dropdown;

package/ui/Elements/Dropdown/Dropdown.js

@@ -3,8 +3,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import styled from '@xstyled/styled-components';
-import { th } from '@xstyled/styled-components';
+import styled, { th } from '@xstyled/styled-components';
 var ArrowInnerB = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 var ArrowInnerA = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
 var Arrow = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  left: ", ";\n  height: 0;\n  width: 0;\n  z-index: -1;\n  ", " {\n    transform: translate(-10%, -50%);\n    width: fit-content;\n    ", " {\n      border-radius: 2px;\n      background-color: ", ";\n      width: 8px;\n      height: 8px;\n      transform: rotate(45deg);\n    }\n  }\n"], ["\n  position: relative;\n  left: ", ";\n  height: 0;\n  width: 0;\n  z-index: -1;\n  ", " {\n    transform: translate(-10%, -50%);\n    width: fit-content;\n    ", " {\n      border-radius: 2px;\n      background-color: ", ";\n      width: 8px;\n      height: 8px;\n      transform: rotate(45deg);\n    }\n  }\n"])), function (_a) {
@@ -13,9 +12,8 @@ var Arrow = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObj
 }, ArrowInnerA, ArrowInnerB, th.color('white'));
 var StyledDropdownWrap = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n\n  ", "\n\n  width: fit-content;\n  height: fit-content;\n  display: block;\n  z-index: 1;\n\n  ", " {\n    display: ", ";\n  }\n"], ["\n  position: absolute;\n\n  ", "\n\n  width: fit-content;\n  height: fit-content;\n  display: block;\n  z-index: 1;\n\n  ", " {\n    display: ", ";\n  }\n"])), function (_a) {
     var customDropdownPosition = _a.customDropdownPosition;
-    return customDropdownPosition
-        ? customDropdownPosition
-        : "\n      top: 100%;\n      right: 0;\n    ";
+    return customDropdownPosition ||
+        "\n      top: 100%;\n      right: 0;\n    ";
 }, Arrow, function (_a) {
     var showArrow = _a.showArrow;
     return (showArrow ? 'block' : 'none');

package/ui/Elements/Dropdown/index.d.ts

@@ -1,3 +1,4 @@
-import Dropdown from './Dropdown';
+import { default as Dropdown } from './Dropdown';
+
 export { Dropdown };
 export default Dropdown;

package/ui/Elements/Dropdown/stories/Dropdown.stories.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import type { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react';
+
 declare const meta: {
     title: string;
-    component: ({ show, className, wrapRef, children, showArrow, verticalShift, customDropdownPosition, }: import("../types").DropdownProps) => JSX.Element;
+    component: import('react').FC<import('../types').DropdownProps>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/Dropdown/types.d.ts

@@ -1,4 +1,5 @@
 import { RefObject } from 'react';
+
 export type DropdownProps = {
     show?: boolean;
     className?: string;

package/ui/Elements/DropdownMenu/DropdownMenu.d.ts

@@ -1,2 +1,4 @@
+import { ReactElement } from 'react';
 import { DropdownMenuProps, Item } from './types';
-export declare const DropdownMenu: <T extends Item>({ items, showMenu, className, ItemComponent, header, footer, ...rest }: DropdownMenuProps<T>) => JSX.Element;
+
+export declare const DropdownMenu: <T extends Item>({ items, showMenu, className, ItemComponent, header, footer, ...rest }: DropdownMenuProps<T>) => ReactElement;

package/ui/Elements/DropdownMenu/DropdownMenu.js

@@ -25,12 +25,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import styled from '@xstyled/styled-components';
-import MenuList from './components/MenuList';
 import DefaultItem from './components/DefaultItem';
+import MenuList from './components/MenuList';
+import styled from '@xstyled/styled-components';
 var StyledDropdownWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: fit-content;\n  height: fit-content;\n  background-color: white;\n  padding: 2;\n  display: block;\n  border: slim;\n  border-color: lightGray2;\n  border-radius: 10px;\n  box-shadow: dropdownMenuShadow;\n  color: red2;\n  z-index: 1;\n"], ["\n  width: fit-content;\n  height: fit-content;\n  background-color: white;\n  padding: 2;\n  display: block;\n  border: slim;\n  border-color: lightGray2;\n  border-radius: 10px;\n  box-shadow: dropdownMenuShadow;\n  color: red2;\n  z-index: 1;\n"])));
 export var DropdownMenu = function (_a) {
     var items = _a.items, showMenu = _a.showMenu, className = _a.className, _b = _a.ItemComponent, ItemComponent = _b === void 0 ? DefaultItem : _b, header = _a.header, footer = _a.footer, rest = __rest(_a, ["items", "showMenu", "className", "ItemComponent", "header", "footer"]);
-    return (_jsx(_Fragment, { children: showMenu && (_jsxs(StyledDropdownWrap, __assign({ className: className }, rest, { children: [header ? header : null, _jsx(MenuList, { items: items, ItemComponent: ItemComponent }), footer ? footer : null] }))) }));
+    return (_jsx(_Fragment, { children: showMenu && (_jsxs(StyledDropdownWrap, __assign({ className: className }, rest, { children: [header || null, _jsx(MenuList, { items: items, ItemComponent: ItemComponent }), footer || null] }))) }));
 };
 var templateObject_1;

package/ui/Elements/DropdownMenu/components/DefaultItem.d.ts

@@ -1,3 +1,5 @@
+import { FC } from 'react';
 import { DefaultItem } from '../types';
-declare const MenuItem: ({ icon, title, hasSeparator }: DefaultItem) => JSX.Element;
+
+declare const MenuItem: FC<DefaultItem>;
 export default MenuItem;

package/ui/Elements/DropdownMenu/components/MenuItem.d.ts

@@ -1,3 +1,5 @@
+import { ReactElement } from 'react';
 import { Item, MenuItemProps } from '../types';
-declare const MenuItem: <ItemType extends Item>({ item, ItemComponent, onClose }: MenuItemProps<ItemType>) => JSX.Element;
+
+declare const MenuItem: <ItemType extends Item>({ item, ItemComponent, onClose }: MenuItemProps<ItemType>) => ReactElement;
 export default MenuItem;

package/ui/Elements/DropdownMenu/components/MenuItem.js

@@ -15,9 +15,9 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from 'react';
-import styled, { css } from '@xstyled/styled-components';
 import { useLocation } from 'react-router';
 import Link from '../../Link/Link';
+import styled, { css } from '@xstyled/styled-components';
 var StyledLink = styled(Link)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  border-top: ", ";\n  padding-top: ", ";\n  color: typoPrimary;\n\n  :hover > * {\n    color: typoPrimary;\n    background-color: bgLightGray1;\n    border-radius: 6px;\n  }\n  ", "\n"], ["\n  display: block;\n  border-top: ", ";\n  padding-top: ", ";\n  color: typoPrimary;\n\n  :hover > * {\n    color: typoPrimary;\n    background-color: bgLightGray1;\n    border-radius: 6px;\n  }\n  ", "\n"])), function (_a) {
     var $hasSeparator = _a.$hasSeparator;
     return ($hasSeparator ? '1px solid #D2D8DF' : 'none');

package/ui/Elements/DropdownMenu/components/MenuList.d.ts

@@ -1,3 +1,5 @@
+import { ReactElement } from 'react';
 import { Item, MenuItems } from '../types';
-declare const MenuList: <ItemType extends Item>({ items, ItemComponent, onClose }: MenuItems<ItemType>) => JSX.Element;
+
+declare const MenuList: <ItemType extends Item>({ items, ItemComponent, onClose }: MenuItems<ItemType>) => ReactElement;
 export default MenuList;

package/ui/Elements/DropdownMenu/components/MenuList.js

@@ -2,9 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import MenuItem from './MenuItem';
 var MenuList = function (_a) {
     var items = _a.items, ItemComponent = _a.ItemComponent, onClose = _a.onClose;
-    return (_jsx("ul", { children: items &&
-            items.map(function (item, i) {
-                return !item.hidden && _jsx(MenuItem, { item: item, ItemComponent: ItemComponent, onClose: onClose }, i);
-            }) }));
+    return (_jsx("ul", { children: items === null || items === void 0 ? void 0 : items.map(function (item, i) {
+            return !item.hidden && _jsx(MenuItem, { item: item, ItemComponent: ItemComponent, onClose: onClose }, i);
+        }) }));
 };
 export default MenuList;

package/ui/Elements/DropdownMenu/types.d.ts

@@ -1,10 +1,11 @@
-import { Ref } from 'react';
+import { Ref, ReactNode } from 'react';
+
 export type Pathname = {
     pathname: string;
 };
 export type DefaultItem = {
-    icon?: React.ReactNode;
-    title?: string | JSX.Element;
+    icon?: ReactNode;
+    title?: string | ReactNode;
     link?: string | Pathname;
     onClick?: Function;
     hasSeparator?: boolean;
@@ -36,6 +37,6 @@ export type DropdownMenuProps<ItemType extends Item = DefaultItem> = {
     childRef?: Ref<any>;
     items?: ItemType[];
     ItemComponent?: React.ComponentType<Omit<ItemType, 'onClick' | 'link'>>;
-    header?: React.ReactNode;
-    footer?: React.ReactNode;
+    header?: ReactNode;
+    footer?: ReactNode;
 };