@max-ts/components 0.0.2

package/src/components/Select/styles.ts

@@ -0,0 +1,60 @@
+import { Select, selectClasses, styled } from '@mui/material';
+
+import { CircleX } from 'lucide-react';
+import { IconButton } from '../IconButton';
+import { MenuItem } from '../MenuItem';
+
+export const ProgressWrapper = styled('div')`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  min-height: 64px;
+
+  .MuiCircularProgress-root {
+    margin-top: ${({ theme }) => theme.spacing(5)};
+
+    color: ${({ theme }) => theme.palette.grey['900']};
+  }
+`;
+
+export const Placeholder = styled(MenuItem)`
+  display: none;
+`;
+
+export const StyledIconButton = styled(IconButton)`
+  background-color: transparent;
+
+  &:hover {
+    background-color: transparent;
+
+    svg {
+      fill: ${({ theme }) => theme.palette.grey['700']};
+    }
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: 32px;
+    height: 32px;
+  }
+`;
+
+export const StyledCloseFillSm = styled(CircleX)`
+  width: 16px;
+  height: 16px;
+
+  fill: ${({ theme }) => theme.palette.grey['500']};
+`;
+
+export const EndAdornmentWrapper = styled('div')`
+  display: flex;
+  align-items: center;
+
+  margin-left: auto;
+`;
+
+export const StyledSelect = styled(Select)`
+  .${selectClasses.select} {
+    padding-right: ${({ theme }) => theme.spacing(2)} !important;
+  }
+` as unknown as typeof Select;

package/src/components/Select/useLogic/index.ts

@@ -0,0 +1 @@
+export * from './useLogic';

package/src/components/Select/useLogic/useLogic.ts

@@ -0,0 +1,53 @@
+import type { SelectChangeEvent } from '@mui/material';
+import { Children, useRef, useState } from 'react';
+
+import type { SelectProps } from '../Select';
+
+export function useLogic<Value>({
+	value,
+	onChange,
+	children,
+	open: externalIsOpened,
+	defaultOpen,
+	multiple,
+	isShowClearButton = true,
+}: SelectProps<Value>) {
+	const [isOpened, setOpened] = useState(
+		defaultOpen || externalIsOpened || false,
+	);
+	const resetButtonRef = useRef<HTMLButtonElement>(null);
+
+	const openSelect = () => setOpened(true);
+	const closeSelect = () => setOpened(false);
+
+	const onClearAll = () => {
+		const changeEvent = {
+			target: {
+				value: multiple ? ([] as string[]) : '',
+			},
+		} as SelectChangeEvent<string[]>;
+
+		type OnChangeFn = (e: SelectChangeEvent<string[]>) => void;
+
+		(onChange as OnChangeFn)?.call({}, changeEvent);
+	};
+	const isShowingClearButton =
+		isShowClearButton &&
+		!(
+			!value ||
+			(Array.isArray(value) && value.length === 0) ||
+			(typeof value === 'string' && value.length === 0)
+		);
+
+	const isNoData = !Children.count(children);
+
+	return {
+		isOpened,
+		isNoData,
+		isShowingClearButton,
+		resetButtonRef,
+		openSelect,
+		closeSelect,
+		onClearAll,
+	};
+}