@arkyn/components 1.3.157 → 1.3.158

package/src/components/MultiSelect/components/MultiSelectContainer/index.tsx

@@ -0,0 +1,51 @@
+import { ReactNode } from "react";
+import "./styles.css";
+
+type MultiSelectContainerProps = {
+  children: ReactNode;
+  handleContainerFocus: () => void;
+  prefixExists: boolean;
+  isError: boolean;
+  disabled: boolean;
+  readOnly: boolean;
+  isLoading: boolean;
+  isFocused: boolean;
+  className?: string;
+  id: string;
+  variant: "solid" | "outline" | "underline";
+  size: "md" | "lg";
+};
+
+function MultiSelectContainer(props: MultiSelectContainerProps) {
+  const {
+    children,
+    handleContainerFocus,
+    disabled,
+    isError,
+    isLoading,
+    isFocused,
+    className,
+    readOnly,
+    variant,
+    size,
+    id,
+    prefixExists,
+  } = props;
+
+  const hasPrefix = prefixExists ? "hasPrefix" : "";
+  const errored = isError ? "errored" : "";
+  const opacity = disabled || readOnly || isLoading ? "opacity" : "";
+  const focused = isFocused ? "focused" : "";
+
+  return (
+    <section
+      onClick={handleContainerFocus}
+      id={id}
+      className={`arkynMultiSelectContainer ${hasPrefix} ${variant} ${size} ${opacity} ${errored} ${focused} ${className}`}
+    >
+      {children}
+    </section>
+  );
+}
+
+export { MultiSelectContainer };

package/src/components/MultiSelect/components/MultiSelectContainer/styles.css

@@ -0,0 +1,134 @@
+/* BASE CSS */
+.arkynMultiSelectContainer {
+  flex: 1;
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  padding: 0 16px;
+  gap: 8px;
+  border-radius: 6px;
+
+  border: 1px solid transparent;
+  outline: 1px solid transparent;
+}
+.arkynMultiSelectContainer:hover {
+  cursor: pointer;
+}
+.arkynMultiSelectContainer.opacity {
+  opacity: 0.5;
+}
+
+/* PREFIX */
+.arkynMultiSelectContainer .prefix {
+  color: var(--text-body);
+  background: var(--border);
+  font-weight: 400;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  position: absolute;
+}
+.arkynMultiSelectContainer .prefix {
+  left: 0;
+  top: 0;
+  bottom: 0;
+  border-radius: 5px 0 0 5px;
+  border-right: 1px solid var(--border);
+}
+
+/* LEFT ICON */
+.arkynMultiSelectContainer > svg {
+  color: var(--text-muted);
+}
+.arkynMultiSelectContainer.errored > svg {
+  color: rgba(var(--spotlight-danger), 1);
+}
+.arkynMultiSelectContainer:not(.opacity).focused > svg {
+  color: rgba(var(--spotlight-primary), 1);
+}
+
+/* VARIANTS */
+.arkynMultiSelectContainer.solid {
+  border-color: var(--border);
+  background-color: rgba(var(--input-background), 1);
+}
+.arkynMultiSelectContainer.solid.errored {
+  border-color: rgba(var(--spotlight-danger), 1);
+  outline-color: rgba(var(--spotlight-danger), 1);
+}
+.arkynMultiSelectContainer:not(.opacity).solid.focused {
+  border-color: rgba(var(--spotlight-primary), 1);
+  outline-color: rgba(var(--spotlight-primary), 1);
+}
+.arkynMultiSelectContainer.outline {
+  border-color: var(--border);
+}
+.arkynMultiSelectContainer.outline.errored {
+  border-color: rgba(var(--spotlight-danger), 1);
+  outline-color: rgba(var(--spotlight-danger), 1);
+}
+.arkynMultiSelectContainer:not(.opacity).outline.focused {
+  border-color: rgba(var(--spotlight-primary), 1);
+  outline-color: rgba(var(--spotlight-primary), 1);
+}
+.arkynMultiSelectContainer.underline {
+  border-radius: 0;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  outline: none;
+  border-color: var(--border);
+}
+.arkynMultiSelectContainer.underline .prefix {
+  display: none;
+}
+.arkynMultiSelectContainer.underline::before {
+  content: " ";
+  position: absolute;
+  height: 1px;
+  left: 0;
+  right: 0;
+  bottom: -2px;
+  background: transparent;
+}
+.arkynMultiSelectContainer.underline.errored {
+  border-color: rgba(var(--spotlight-danger), 1);
+}
+.arkynMultiSelectContainer.underline.errored::before {
+  background: rgba(var(--spotlight-danger), 1);
+}
+.arkynMultiSelectContainer:not(.opacity).underline.focused {
+  border-color: rgba(var(--spotlight-primary), 1);
+}
+.arkynMultiSelectContainer:not(.opacity).underline.focused::before {
+  background: rgba(var(--spotlight-primary), 1);
+}
+
+/* SIZE */
+.arkynMultiSelectContainer.md {
+  min-height: 40px;
+  max-height: 40px;
+}
+.arkynMultiSelectContainer.md.hasPrefix {
+  padding-left: 60px;
+}
+.arkynMultiSelectContainer.md .prefix {
+  height: 40px;
+  width: 44px;
+  font-size: 14px;
+}
+.arkynMultiSelectContainer.lg {
+  min-height: 44px;
+  max-height: 44px;
+}
+.arkynMultiSelectContainer.lg .prefix {
+  height: 44px;
+  width: 48px;
+  font-size: 16px;
+}
+.arkynMultiSelectContainer.lg.hasPrefix {
+  padding-left: 64px;
+}

package/src/components/MultiSelect/components/MultiSelectContent/index.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+import "./styles.css";
+
+type MultiSelectContentProps = {
+  children: ReactNode;
+  size: "md" | "lg";
+};
+
+function MultiSelectContent(props: MultiSelectContentProps) {
+  const { children, size } = props;
+  const className = `arkynMultiSelectContent ${size}`;
+  return <div className={className}>{children}</div>;
+}
+
+export { MultiSelectContent };

package/src/components/MultiSelect/components/MultiSelectContent/styles.css

@@ -0,0 +1,24 @@
+.arkynMultiSelectContent {
+  display: flex;
+  align-items: start;
+  gap: 4px;
+  flex-wrap: wrap;
+
+  flex: 1;
+}
+
+.arkynMultiSelectContent > p {
+  font-weight: 400;
+  color: var(--text-muted);
+  user-select: none;
+}
+
+.arkynMultiSelectContent.md > p {
+  font-size: 14px;
+  line-height: 14px;
+}
+
+.arkynMultiSelectContent.lg > p {
+  font-size: 16px;
+  line-height: 16px;
+}

package/src/components/MultiSelect/components/MultiSelectMark/index.tsx

@@ -0,0 +1,30 @@
+import { X } from "lucide-react";
+import "./styles.css";
+
+type MultiSelectMarkProps = {
+  label: string;
+  value: string;
+  handleChangeValue: (value: string) => void;
+};
+
+function MultiSelectMark(props: MultiSelectMarkProps) {
+  const { label, value, handleChangeValue } = props;
+
+  return (
+    <div className="arkynMultiSelectMark">
+      {label}
+
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          handleChangeValue(value);
+        }}
+      >
+        <X />
+      </button>
+    </div>
+  );
+}
+
+export { MultiSelectMark };

package/src/components/MultiSelect/components/MultiSelectMark/styles.css

@@ -0,0 +1,40 @@
+.arkynMultiSelectMark {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  border-radius: 4px;
+  background: var(--card-foreground-terceary);
+
+  padding: 2px 6px;
+
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 19.07px;
+  text-align: left;
+  z-index: 6;
+  user-select: none;
+}
+
+.arkynMultiSelectMark button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border: none;
+  background: inherit;
+
+  width: 15px;
+  height: 15px;
+}
+
+.arkynMultiSelectMark button:hover {
+  cursor: pointer;
+  filter: brightness(0.9);
+}
+
+.arkynMultiSelectMark button svg {
+  min-width: 10px;
+  min-height: 10px;
+  color: var(--text-muted);
+}

package/src/components/MultiSelect/components/MultiSelectOption/index.tsx

@@ -0,0 +1,25 @@
+import { Check } from "lucide-react";
+import "./styles.css";
+
+type MultiSelectOptionProps = {
+  value: string;
+  label: string;
+  size: "md" | "lg";
+  optionHasSelected: (value: string) => boolean;
+  handleChangeValue: (value: string) => void;
+};
+
+function MultiSelectOption(props: MultiSelectOptionProps) {
+  const { label, optionHasSelected, handleChangeValue, value, size } = props;
+
+  const hasActive = optionHasSelected(value) ? "active" : "";
+  const className = `arkynMultiSelectOption ${size} ${hasActive}`;
+
+  return (
+    <div onClick={() => handleChangeValue(value)} className={className}>
+      {label} <Check />
+    </div>
+  );
+}
+
+export { MultiSelectOption };

package/src/components/MultiSelect/components/MultiSelectOption/styles.css

@@ -0,0 +1,37 @@
+.arkynMultiSelectOption {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  font-weight: 400;
+  line-height: 21.79px;
+
+  color: var(--text-body);
+  user-select: none;
+}
+.arkynMultiSelectOption.md {
+  font-size: 14px;
+  padding: 8px 16px;
+}
+.arkynMultiSelectOption.lg {
+  font-size: 16px;
+  padding: 8px 16px;
+}
+.arkynMultiSelectOption svg {
+  display: none;
+  height: 20px;
+  width: 20px;
+  color: rgba(var(--spotlight-primary), 1);
+}
+.arkynMultiSelectOption:hover {
+  cursor: pointer;
+  background-color: var(--card-foreground-primary);
+}
+.arkynMultiSelectOption.active {
+  font-weight: 600;
+  color: var(--text-heading);
+  background-color: var(--card-foreground-primary);
+}
+.arkynMultiSelectOption.active svg {
+  display: unset;
+}

package/src/components/MultiSelect/components/MultiSelectOptionsContainer/index.tsx

@@ -0,0 +1,41 @@
+import { Input } from "@arkyn/components";
+import { Search } from "lucide-react";
+import { ChangeEvent, ReactNode } from "react";
+
+import "./styles.css";
+
+type MultiSelectOptionsContainerProps = {
+  isFocused: boolean;
+  isSearchable: boolean;
+  children: ReactNode;
+  onSearch: (value: string) => void;
+};
+
+function MultiSelectOptionsContainer(props: MultiSelectOptionsContainerProps) {
+  const { children, isFocused, isSearchable, onSearch } = props;
+
+  function handleSearch(e: ChangeEvent<HTMLInputElement>) {
+    if (!isSearchable) return;
+    onSearch(e.target.value);
+  }
+
+  if (!isFocused) return <></>;
+
+  return (
+    <div className="arkynMultiSelectOptionsContainer">
+      {isSearchable && (
+        <Input
+          type="search"
+          name="search-select"
+          variant="underline"
+          leftIcon={Search}
+          onChange={handleSearch}
+        />
+      )}
+
+      {children}
+    </div>
+  );
+}
+
+export { MultiSelectOptionsContainer };

package/src/components/MultiSelect/components/MultiSelectOptionsContainer/styles.css

@@ -0,0 +1,36 @@
+/* BASE CSS */
+.arkynMultiSelectOptionsContainer {
+  position: absolute;
+  z-index: 6;
+
+  top: calc(100% + 5px);
+  left: -2px;
+  right: -2px;
+
+  border-radius: 6px;
+  list-style: none;
+
+  display: flex;
+  flex-direction: column;
+
+  flex: 1;
+  overflow: hidden;
+  height: max-content;
+
+  border: 1px solid var(--border);
+  background-color: var(--card);
+
+  max-height: 300px;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* NOT FOUND TEXT */
+.arkynMultiSelectOptionsContainer > p {
+  font-weight: 400;
+  font-size: 14px;
+  padding: 16px;
+  text-align: center;
+  line-height: 21.79px;
+
+  color: var(--text-body);
+}

package/src/components/MultiSelect/components/MultiSelectOverlay/index.tsx

@@ -0,0 +1,14 @@
+import "./styles.css";
+
+type MultiSelectOverlayProps = {
+  isFocused: boolean;
+  handleBlur: () => void;
+};
+
+function MultiSelectOverlay(props: MultiSelectOverlayProps) {
+  const { isFocused, handleBlur } = props;
+  if (!isFocused) return <></>;
+  return <aside className="arkynMultiSelectOverlay" onClick={handleBlur} />;
+}
+
+export { MultiSelectOverlay };

package/src/components/MultiSelect/components/MultiSelectOverlay/styles.css

@@ -0,0 +1,8 @@
+.arkynMultiSelectOverlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 5;
+}

package/src/components/MultiSelect/components/MultiSelectSpinner/index.tsx

@@ -0,0 +1,22 @@
+import { Loader2 } from "lucide-react";
+import "./styles.css";
+
+type MultiSelectSpinnerProps = {
+  iconSize: number;
+  isLoading: boolean;
+};
+
+function MultiSelectSpinner(props: MultiSelectSpinnerProps) {
+  const { iconSize, isLoading } = props;
+
+  if (!isLoading) return <></>;
+  return (
+    <Loader2
+      className="arkynMultiSelectSpinner"
+      size={iconSize}
+      strokeWidth={2.5}
+    />
+  );
+}
+
+export { MultiSelectSpinner };

package/src/components/MultiSelect/components/MultiSelectSpinner/styles.css

@@ -0,0 +1,12 @@
+.arkynMultiSelectSpinner {
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/components/MultiSelect/index.tsx

@@ -0,0 +1,171 @@
+import { MultiSelectProps } from "@arkyn/types";
+import { useRef, useState } from "react";
+
+import { morpheme } from "../../services";
+import { useFormController } from "../Form/FormController";
+
+import { MultiSelectChevron } from "./components/MultiSelectChevron";
+import { MultiSelectContainer } from "./components/MultiSelectContainer";
+import { MultiSelectContent } from "./components/MultiSelectContent";
+import { MultiSelectMark } from "./components/MultiSelectMark";
+import { MultiSelectOption } from "./components/MultiSelectOption";
+import { MultiSelectOptionsContainer } from "./components/MultiSelectOptionsContainer";
+import { MultiSelectOverlay } from "./components/MultiSelectOverlay";
+import { MultiSelectSpinner } from "./components/MultiSelectSpinner";
+
+function MultiSelect(props: MultiSelectProps) {
+  const {
+    name,
+    options,
+    className = "",
+    placeholder = "Selecione...",
+    closeOnSelect = false,
+    defaultValue = [],
+    isError: baseIsError,
+    isLoading = false,
+    readOnly = false,
+    isSearchable = false,
+    leftIcon: LeftIcon,
+    onSearch,
+    onSelect,
+    onBlur,
+    notFoundText = "Sem opções disponíveis",
+    onFocus,
+    disabled = false,
+    prefix: basePrefix,
+    size = "md",
+    value,
+    variant = "solid",
+  } = props;
+
+  const formController = useFormController();
+  const baseRef = useRef<HTMLInputElement>(null);
+
+  const multiSelectRef = formController.inputRef || baseRef;
+  const multiSelectId = formController.id;
+
+  const isError = baseIsError || !!formController.error;
+
+  const iconSizes = { md: 20, lg: 20 };
+  const iconSize = iconSizes[size];
+  const prefix = morpheme(basePrefix, iconSize, "prefix");
+
+  const [search, setSearch] = useState("");
+  const [isFocused, setIsFocused] = useState(false);
+  const [selectedOptions, setSelectedOptions] = useState(defaultValue);
+
+  const forceSelectedOptions = value || selectedOptions;
+
+  function optionHasSelected(value: string) {
+    return forceSelectedOptions.includes(value);
+  }
+
+  function getOptionLabel(value: string) {
+    const option = options.find((option) => option.value === value);
+    return option?.label || "";
+  }
+
+  function handleContainerFocus() {
+    if (disabled || !multiSelectRef?.current || isFocused) return;
+    setIsFocused(true);
+    multiSelectRef.current.focus();
+    onFocus && onFocus();
+  }
+
+  function handleBlur() {
+    setIsFocused(false);
+    if (onBlur && multiSelectRef.current) multiSelectRef.current.blur();
+  }
+
+  function handleSearch(value: string) {
+    setSearch(value);
+    if (onSearch) onSearch(value);
+  }
+
+  function handleChangeValue(value: string) {
+    if (optionHasSelected(value)) {
+      setSelectedOptions(selectedOptions.filter((v) => v !== value));
+    } else setSelectedOptions([...selectedOptions, value]);
+
+    if (onSelect) onSelect(selectedOptions);
+    if (closeOnSelect) handleBlur();
+  }
+
+  const mappedOptions = options.filter((option) => {
+    if (props.onSearch) return true;
+    if (!props.isSearchable) return true;
+    if (option.label.toLowerCase().includes(search.toLowerCase())) return true;
+    return false;
+  });
+
+  return (
+    <MultiSelectContainer
+      handleContainerFocus={handleContainerFocus}
+      disabled={disabled}
+      isError={isError}
+      isFocused={isFocused}
+      isLoading={isLoading}
+      readOnly={readOnly}
+      size={size}
+      variant={variant}
+      className={className}
+      prefixExists={!!basePrefix}
+      id={multiSelectId}
+    >
+      <input
+        ref={multiSelectRef}
+        name={name}
+        value={JSON.stringify(forceSelectedOptions)}
+        type="hidden"
+      />
+
+      {prefix}
+      {LeftIcon && <LeftIcon size={iconSize} strokeWidth={2.5} />}
+
+      <MultiSelectContent size={size}>
+        {forceSelectedOptions.map((value) => (
+          <MultiSelectMark
+            key={value}
+            label={getOptionLabel(value)}
+            value={value}
+            handleChangeValue={handleChangeValue}
+          />
+        ))}
+
+        {forceSelectedOptions.length <= 0 && <p>{placeholder}</p>}
+      </MultiSelectContent>
+
+      <MultiSelectOptionsContainer
+        isFocused={isFocused}
+        isSearchable={isSearchable}
+        onSearch={handleSearch}
+      >
+        {mappedOptions.map(({ label, value }) => (
+          <MultiSelectOption
+            key={value}
+            label={label}
+            value={value}
+            size={size}
+            handleChangeValue={handleChangeValue}
+            optionHasSelected={optionHasSelected}
+          />
+        ))}
+
+        {mappedOptions.length <= 0 && <p>{notFoundText}</p>}
+      </MultiSelectOptionsContainer>
+
+      <MultiSelectChevron
+        disabled={disabled}
+        isFocused={isFocused}
+        readOnly={readOnly}
+        iconSize={iconSize}
+        isLoading={isLoading}
+      />
+
+      <MultiSelectSpinner iconSize={iconSize} isLoading={isLoading} />
+      <MultiSelectOverlay handleBlur={handleBlur} isFocused={isFocused} />
+    </MultiSelectContainer>
+  );
+}
+
+export { MultiSelect };

package/src/index.ts

@@ -25,6 +25,7 @@ export { FormController, FormError, FormLabel } from "./components/Form";
 export { IconButton } from "./components/IconButton";
 export { ImageUpload } from "./components/ImageUpload";
 export { Input } from "./components/Input";
+export { MultiSelect } from "./components/MultiSelect";
 export { RadioBox, RadioGroup } from "./components/Radio";
 export { RichText } from "./components/RichText";
 export { Select } from "./components/Select";