@gobolt/genesis 0.2.21 → 0.3.0

package/dist/components/Select/Select.cjs

@@ -2,9 +2,72 @@
 var jsxRuntime = require("react/jsx-runtime");
 var React = require("react");
 var index = require("../../constants/index.cjs");
-var DropdownChevron = require("../shared/DropdownChevron.cjs");
-var styles = require("./styles.cjs");
+var styled = require("styled-components");
+var SelectTrigger = require("./SelectTrigger.cjs");
 var useGenesis = require("../../providers/useGenesis.cjs");
+const SelectWrapper = styled.div`
+  position: relative;
+  background-color: transparent;
+  border-radius: 8px;
+  width: auto;
+
+  ${({ $isFocused, theme, type = "primary" }) => $isFocused && `
+    background-color: transparent;
+  `}
+
+  ${({ disabled, theme }) => disabled && `
+    cursor: not-allowed;
+    
+    &:hover {
+      border-color: ${theme.colors.inputs.surface.border};
+    }
+  `}
+`;
+const SelectDropdown = styled.div`
+  padding: 0px;
+  border-radius: 0px;
+  animation-duration: ${({ theme }) => `${theme.motion.veryfast}s`};
+  transition: all ${({ theme }) => `${theme.motion.veryfast}s`}
+    cubic-bezier(0.645, 0.045, 0.355, 1);
+
+  &.entering {
+    opacity: 0;
+    transform: scaleY(0.8);
+  }
+
+  &.entered {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+
+  &.exiting {
+    opacity: 0;
+    transform: scaleY(0.8);
+  }
+`;
+const MenuItem = styled.div`
+  padding: 8px 12px;
+  cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
+  background-color: ${({ $isSelected, theme, type = "primary" }) => $isSelected ? theme.colors[type].hover.backgroundColor : "transparent"};
+  color: ${({ $isSelected, disabled, theme, type = "primary" }) => disabled ? theme.colors.inputs.onsurface.disabled : $isSelected ? theme.colors[type].hover.color : theme.colors.onsurface.copy};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: all ${({ theme }) => `${theme.motion.veryfast}s`} ease-in-out;
+  opacity: ${({ disabled }) => disabled ? 0.5 : 1};
+
+  ${({ disabled }) => !disabled && `
+    &:hover {
+      background-color: ${({ $isSelected, theme, type = "primary" }) => $isSelected ? theme.colors[type].hover.backgroundColor : "rgba(0, 0, 0, 0.04)"};
+      color: ${({ $isSelected, theme, type = "primary" }) => $isSelected ? theme.colors[type].hover.color : theme.colors.onsurface["copy-dark"]};
+    }
+
+    &:active {
+      background-color: ${({ theme, type = "primary" }) => theme.colors[type].hover.backgroundColor};
+      color: ${({ theme, type = "primary" }) => theme.colors[type].hover.color};
+    }
+  `}
+`;
 const Select = ({
   type = index.TYPE.primary,
   state,
@@ -12,68 +75,141 @@ const Select = ({
   defaultValue,
   onChange,
   size = "normal",
-  width = 320,
+  width = "100%",
   value,
+  options = [],
+  placeholder,
+  selectDisplayMode = "count",
+  isSingleSelect = false,
+  disabled = false,
   ...rest
 }) => {
-  const { breakpoint } = useGenesis.useGenesis();
+  const [isOpen, setIsOpen] = React.useState(false);
   const [isFocused, setIsFocused] = React.useState(false);
+  const [dropdownAnimation, setDropdownAnimation] = React.useState("entered");
+  const selectReference = React.useRef(null);
+  const { theme } = useGenesis.useGenesis();
   React.useEffect(() => {
-    const style2 = document.createElement("style");
-    style2.textContent = `
-      .ant-select-dropdown {
-        padding: 0px !important;
-        border-radius: 0px !important;
-      }
-      .ant-select-selection-placeholder {
-        inset-inline-start: 0px !important;
+    const handleClickOutside = (event) => {
+      if (selectReference.current && !selectReference.current.contains(event.target)) {
+        handleClose();
+        setIsFocused(false);
       }
-    `;
-    document.head.appendChild(style2);
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
     return () => {
-      document.head.removeChild(style2);
+      document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, []);
-  const customDropdownRender = (menu) => /* @__PURE__ */ jsxRuntime.jsx(styles.SelectDropdown, { type, state, children: /* @__PURE__ */ jsxRuntime.jsx(styles.StyledMenuItem, { type, state, children: menu }) });
-  const isMultiSelectCountAtZero = variant === "multiSelectCount" && Array.isArray(value);
-  const totalSelected = Array.isArray(value) ? value == null ? void 0 : value.length : 0;
-  const shiftHackStyle = {
-    display: "block",
-    position: "absolute",
-    top: totalSelected === 0 ? 0 : 12,
-    left: 0,
-    width
+  }, [isOpen]);
+  const handleClose = () => {
+    setDropdownAnimation("exiting");
+    setTimeout(() => {
+      setIsOpen(false);
+      setDropdownAnimation("entered");
+    }, 200);
   };
-  const normalStyle = {
-    display: "block",
-    position: "relative",
-    width
+  const handleTriggerClick = () => {
+    if (disabled) return;
+    setIsFocused(true);
+    if (isOpen) {
+      handleClose();
+    } else {
+      setIsOpen(true);
+      setDropdownAnimation("entering");
+      setTimeout(() => {
+        setDropdownAnimation("entered");
+      }, 0);
+    }
+  };
+  const handleOptionSelect = (optionValue) => {
+    if (disabled) return;
+    let newValue;
+    if (Array.isArray(value)) {
+      const stringValue = value.map(String);
+      newValue = stringValue.includes(optionValue) ? stringValue.filter((v) => v !== optionValue) : [...stringValue, optionValue];
+    } else {
+      newValue = optionValue;
+    }
+    onChange == null ? void 0 : onChange(newValue);
+    if (isSingleSelect) {
+      handleClose();
+    }
+  };
+  const getSelectModeValue = (value2) => {
+    if (Array.isArray(value2)) {
+      if (selectDisplayMode === "count") {
+        return `${value2.length} selected`;
+      }
+      return value2;
+    }
+    return value2;
   };
-  const style = isMultiSelectCountAtZero ? shiftHackStyle : normalStyle;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style, children: /* @__PURE__ */ jsxRuntime.jsx(
-    styles.SelectWrapper,
+  const modeValue = getSelectModeValue(value);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative", width }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    SelectWrapper,
     {
+      ref: selectReference,
       $isFocused: isFocused,
       type,
-      $isMultiSelectCountAtZero: isMultiSelectCountAtZero,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        styles.Select,
-        {
-          ...rest,
-          size,
-          defaultValue,
-          $variant: variant,
-          suffixIcon: /* @__PURE__ */ jsxRuntime.jsx(DropdownChevron, {}),
-          dropdownRender: customDropdownRender,
-          onFocus: () => setIsFocused(true),
-          onBlur: () => setIsFocused(false),
-          onChange: (value2) => {
-            setIsFocused(false);
-            onChange == null ? void 0 : onChange(value2);
-          },
-          style: { width }
-        }
-      )
+      disabled,
+      onFocus: () => !disabled && setIsFocused(true),
+      onBlur: () => !isOpen && setIsFocused(false),
+      tabIndex: disabled ? -1 : 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SelectTrigger,
+          {
+            theme,
+            type,
+            state,
+            value: modeValue,
+            placeholder,
+            open: isOpen,
+            onClick: handleTriggerClick,
+            options,
+            disabled,
+            variant
+          }
+        ),
+        isOpen && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+          SelectDropdown,
+          {
+            type,
+            state,
+            className: dropdownAnimation,
+            style: {
+              position: "absolute",
+              top: "calc(100% + 4px)",
+              left: 0,
+              right: 0,
+              zIndex: 1e3,
+              backgroundColor: "white",
+              boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+              border: "1px solid #d9d9d9",
+              transformOrigin: "top"
+            },
+            children: options.map((option) => {
+              const isSelected = Array.isArray(value) ? value.map(String).includes(option.value) : String(value) === option.value;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                MenuItem,
+                {
+                  onClick: () => handleOptionSelect(option.value),
+                  $isSelected: isSelected,
+                  type,
+                  disabled,
+                  children: [
+                    option.label,
+                    isSelected && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginLeft: "8px" }, children: "✓" })
+                  ]
+                },
+                option.value
+              );
+            })
+          }
+        )
+      ]
     }
   ) });
 };

package/dist/components/Select/Select.d.ts

@@ -1,6 +1,8 @@
 import { default as React } from 'react';
 import { TYPE, STATE } from '../../constants';
 import { SelectProps as AntSelectProps } from 'antd';
+import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
+type Variant = "none" | "simple";
 export interface SelectProps extends Omit<AntSelectProps, "variant" | "size"> {
     type?: keyof typeof TYPE;
     state?: keyof typeof STATE;
@@ -8,12 +10,17 @@ export interface SelectProps extends Omit<AntSelectProps, "variant" | "size"> {
         value: string;
         label: React.ReactNode;
     }[];
-    variant?: "simple" | "none" | "multiSelectCount";
+    variant?: Variant;
     defaultValue?: string | string[] | number | number[] | unknown;
     onChange?: (value: string | string[]) => void;
     size?: "normal" | "small" | "large";
     value?: string[] | string | number[] | number;
-    width?: number;
+    width?: number | string;
+    placeholder?: string;
+    selectDisplayMode?: "chip" | "count";
+    isSingleSelect?: boolean;
+    disabled?: boolean;
+    theme?: GenesisTheme;
 }
-declare const Select: ({ type, state, variant, defaultValue, onChange, size, width, value, ...rest }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const Select: ({ type, state, variant, defaultValue, onChange, size, width, value, options, placeholder, selectDisplayMode, isSingleSelect, disabled, ...rest }: SelectProps) => import("react/jsx-runtime").JSX.Element;
 export default Select;

package/dist/components/Select/Select.js

@@ -1,9 +1,72 @@
-import { jsx } from "react/jsx-runtime";
-import React__default, { useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
 import { TYPE } from "../../constants/index.js";
-import DropdownChevron from "../shared/DropdownChevron.js";
-import { SelectWrapper, Select as Select$1, SelectDropdown, StyledMenuItem } from "./styles.js";
+import styled from "styled-components";
+import SelectTrigger from "./SelectTrigger.js";
 import { useGenesis } from "../../providers/useGenesis.js";
+const SelectWrapper = styled.div`
+  position: relative;
+  background-color: transparent;
+  border-radius: 8px;
+  width: auto;
+
+  ${({ $isFocused, theme, type = "primary" }) => $isFocused && `
+    background-color: transparent;
+  `}
+
+  ${({ disabled, theme }) => disabled && `
+    cursor: not-allowed;
+    
+    &:hover {
+      border-color: ${theme.colors.inputs.surface.border};
+    }
+  `}
+`;
+const SelectDropdown = styled.div`
+  padding: 0px;
+  border-radius: 0px;
+  animation-duration: ${({ theme }) => `${theme.motion.veryfast}s`};
+  transition: all ${({ theme }) => `${theme.motion.veryfast}s`}
+    cubic-bezier(0.645, 0.045, 0.355, 1);
+
+  &.entering {
+    opacity: 0;
+    transform: scaleY(0.8);
+  }
+
+  &.entered {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+
+  &.exiting {
+    opacity: 0;
+    transform: scaleY(0.8);
+  }
+`;
+const MenuItem = styled.div`
+  padding: 8px 12px;
+  cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
+  background-color: ${({ $isSelected, theme, type = "primary" }) => $isSelected ? theme.colors[type].hover.backgroundColor : "transparent"};
+  color: ${({ $isSelected, disabled, theme, type = "primary" }) => disabled ? theme.colors.inputs.onsurface.disabled : $isSelected ? theme.colors[type].hover.color : theme.colors.onsurface.copy};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: all ${({ theme }) => `${theme.motion.veryfast}s`} ease-in-out;
+  opacity: ${({ disabled }) => disabled ? 0.5 : 1};
+
+  ${({ disabled }) => !disabled && `
+    &:hover {
+      background-color: ${({ $isSelected, theme, type = "primary" }) => $isSelected ? theme.colors[type].hover.backgroundColor : "rgba(0, 0, 0, 0.04)"};
+      color: ${({ $isSelected, theme, type = "primary" }) => $isSelected ? theme.colors[type].hover.color : theme.colors.onsurface["copy-dark"]};
+    }
+
+    &:active {
+      background-color: ${({ theme, type = "primary" }) => theme.colors[type].hover.backgroundColor};
+      color: ${({ theme, type = "primary" }) => theme.colors[type].hover.color};
+    }
+  `}
+`;
 const Select = ({
   type = TYPE.primary,
   state,
@@ -11,68 +74,141 @@ const Select = ({
   defaultValue,
   onChange,
   size = "normal",
-  width = 320,
+  width = "100%",
   value,
+  options = [],
+  placeholder,
+  selectDisplayMode = "count",
+  isSingleSelect = false,
+  disabled = false,
   ...rest
 }) => {
-  const { breakpoint } = useGenesis();
+  const [isOpen, setIsOpen] = React__default.useState(false);
   const [isFocused, setIsFocused] = React__default.useState(false);
-  useEffect(() => {
-    const style2 = document.createElement("style");
-    style2.textContent = `
-      .ant-select-dropdown {
-        padding: 0px !important;
-        border-radius: 0px !important;
-      }
-      .ant-select-selection-placeholder {
-        inset-inline-start: 0px !important;
+  const [dropdownAnimation, setDropdownAnimation] = React__default.useState("entered");
+  const selectReference = React__default.useRef(null);
+  const { theme } = useGenesis();
+  React__default.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (selectReference.current && !selectReference.current.contains(event.target)) {
+        handleClose();
+        setIsFocused(false);
       }
-    `;
-    document.head.appendChild(style2);
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
     return () => {
-      document.head.removeChild(style2);
+      document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, []);
-  const customDropdownRender = (menu) => /* @__PURE__ */ jsx(SelectDropdown, { type, state, children: /* @__PURE__ */ jsx(StyledMenuItem, { type, state, children: menu }) });
-  const isMultiSelectCountAtZero = variant === "multiSelectCount" && Array.isArray(value);
-  const totalSelected = Array.isArray(value) ? value == null ? void 0 : value.length : 0;
-  const shiftHackStyle = {
-    display: "block",
-    position: "absolute",
-    top: totalSelected === 0 ? 0 : 12,
-    left: 0,
-    width
+  }, [isOpen]);
+  const handleClose = () => {
+    setDropdownAnimation("exiting");
+    setTimeout(() => {
+      setIsOpen(false);
+      setDropdownAnimation("entered");
+    }, 200);
   };
-  const normalStyle = {
-    display: "block",
-    position: "relative",
-    width
+  const handleTriggerClick = () => {
+    if (disabled) return;
+    setIsFocused(true);
+    if (isOpen) {
+      handleClose();
+    } else {
+      setIsOpen(true);
+      setDropdownAnimation("entering");
+      setTimeout(() => {
+        setDropdownAnimation("entered");
+      }, 0);
+    }
+  };
+  const handleOptionSelect = (optionValue) => {
+    if (disabled) return;
+    let newValue;
+    if (Array.isArray(value)) {
+      const stringValue = value.map(String);
+      newValue = stringValue.includes(optionValue) ? stringValue.filter((v) => v !== optionValue) : [...stringValue, optionValue];
+    } else {
+      newValue = optionValue;
+    }
+    onChange == null ? void 0 : onChange(newValue);
+    if (isSingleSelect) {
+      handleClose();
+    }
+  };
+  const getSelectModeValue = (value2) => {
+    if (Array.isArray(value2)) {
+      if (selectDisplayMode === "count") {
+        return `${value2.length} selected`;
+      }
+      return value2;
+    }
+    return value2;
   };
-  const style = isMultiSelectCountAtZero ? shiftHackStyle : normalStyle;
-  return /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(
+  const modeValue = getSelectModeValue(value);
+  return /* @__PURE__ */ jsx("div", { style: { position: "relative", width }, children: /* @__PURE__ */ jsxs(
     SelectWrapper,
     {
+      ref: selectReference,
       $isFocused: isFocused,
       type,
-      $isMultiSelectCountAtZero: isMultiSelectCountAtZero,
-      children: /* @__PURE__ */ jsx(
-        Select$1,
-        {
-          ...rest,
-          size,
-          defaultValue,
-          $variant: variant,
-          suffixIcon: /* @__PURE__ */ jsx(DropdownChevron, {}),
-          dropdownRender: customDropdownRender,
-          onFocus: () => setIsFocused(true),
-          onBlur: () => setIsFocused(false),
-          onChange: (value2) => {
-            setIsFocused(false);
-            onChange == null ? void 0 : onChange(value2);
-          },
-          style: { width }
-        }
-      )
+      disabled,
+      onFocus: () => !disabled && setIsFocused(true),
+      onBlur: () => !isOpen && setIsFocused(false),
+      tabIndex: disabled ? -1 : 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          SelectTrigger,
+          {
+            theme,
+            type,
+            state,
+            value: modeValue,
+            placeholder,
+            open: isOpen,
+            onClick: handleTriggerClick,
+            options,
+            disabled,
+            variant
+          }
+        ),
+        isOpen && !disabled && /* @__PURE__ */ jsx(
+          SelectDropdown,
+          {
+            type,
+            state,
+            className: dropdownAnimation,
+            style: {
+              position: "absolute",
+              top: "calc(100% + 4px)",
+              left: 0,
+              right: 0,
+              zIndex: 1e3,
+              backgroundColor: "white",
+              boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+              border: "1px solid #d9d9d9",
+              transformOrigin: "top"
+            },
+            children: options.map((option) => {
+              const isSelected = Array.isArray(value) ? value.map(String).includes(option.value) : String(value) === option.value;
+              return /* @__PURE__ */ jsxs(
+                MenuItem,
+                {
+                  onClick: () => handleOptionSelect(option.value),
+                  $isSelected: isSelected,
+                  type,
+                  disabled,
+                  children: [
+                    option.label,
+                    isSelected && /* @__PURE__ */ jsx("span", { style: { marginLeft: "8px" }, children: "✓" })
+                  ]
+                },
+                option.value
+              );
+            })
+          }
+        )
+      ]
     }
   ) });
 };