@remember-web/primitive 0.1.10 → 0.1.12

package/dist/src/Inputs/Select/DesignedSelect/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../src/Inputs/Select/DesignedSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport type { KeyboardEvent, ReactNode, Ref, RefCallback } from 'react';\nimport {\n  Children,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useRef,\n  useState,\n  useId,\n} from 'react';\nimport { IconArrow2Down, IconArrow2Up } from '@remember-web/icon';\n\nimport useMouseEventAway from '@/hooks/useMouseEventAway';\n\nimport { focusSibling } from '../utils';\nimport { OptionHolder } from '../Option';\nimport { SelectContainer } from '../styles';\nimport type { OptionElementType, SelectValue } from '../types';\nimport { DEFAULT_MAX_HEIGHT_PX, OPTION_ITEM_HEIGHT_PX } from './const';\nimport {\n  SelectDownIcon,\n  SelectOption,\n  SelectOptionWrapper,\n  StyledSelect,\n} from './styles';\nimport type { DesignedSelectInternalProps, ExpandedType } from './types';\n\nconst DesignedSelect = <Value extends SelectValue>(\n  {\n    children,\n    value,\n    maxHeight = DEFAULT_MAX_HEIGHT_PX,\n    placeholder,\n    onChange,\n    width,\n    extendDirection,\n    disabled,\n    ...props\n  }: DesignedSelectInternalProps<Value>,\n  ref?: Ref<HTMLDivElement>\n) => {\n  const id = useId();\n  const [expandedDirection, _setExpandedDirection] =\n    useState<ExpandedType>('none');\n  const selectContainerRef = useRef<HTMLDivElement | null>(null);\n  const selectListRef = useRef<HTMLUListElement | null>(null);\n  const clickAwayRef = useMouseEventAway<HTMLDivElement, 'pointerdown'>(\n    'pointerdown',\n    () => {\n      setExpandedDirection('none');\n    }\n  );\n\n  const setExpandedDirection = useCallback(\n    (...args: Parameters<typeof _setExpandedDirection>) => {\n      if (disabled) {\n        return;\n      }\n      _setExpandedDirection(...args);\n    },\n    [disabled]\n  );\n\n  const options = Children.toArray(children)\n    .filter(\n      (child): child is OptionElementType<Value> =>\n        isValidElement(child) && child.type === OptionHolder\n    )\n    .map(\n      ({\n        props: { children: _children, value: _value, disabled: _disabled },\n      }) => ({\n        label: _children,\n        value: _value,\n        disabled: _disabled,\n      })\n    );\n\n  const selectedOption = options.find((option) => value === option.value);\n\n  const isExpanded = expandedDirection !== 'none';\n\n  const onSelectOption = (_value: Value, _label: ReactNode) => {\n    onChange?.(_value, _label);\n    setExpandedDirection('none');\n    selectContainerRef.current?.focus();\n  };\n\n  // 리스트가 하단으로 나와야하는지 상단으로 나와야하는지 계산하는 함수\n  // 현재 Viewport기준으로 Select컴포넌트가 아래로 확장되었을 때 뷰포트 내에 리스트박스가 노출될 수 있다면 하단으로 확장, 아니라면 상단으로 확장\n  // direction이 props로 전달되었다면 해당 방향으로 확장\n  const expandSelectListAtComputedPosition = () => {\n    if (extendDirection) {\n      setExpandedDirection(extendDirection);\n      return;\n    }\n\n    const selectContainerRect =\n      selectContainerRef.current?.getBoundingClientRect();\n\n    if (!selectContainerRect) {\n      setExpandedDirection('below');\n      return;\n    }\n\n    // SelectOptionWrapper가 마운트되기 전에 계산해야 하기 때문에 clientHeight를 사용하지 못하고 직접 계산\n    const currentSelectHeight = Math.min(\n      maxHeight,\n      options.length * OPTION_ITEM_HEIGHT_PX\n    );\n    const bottomGap = document.body.clientHeight - selectContainerRect.bottom;\n\n    setExpandedDirection(currentSelectHeight > bottomGap ? 'above' : 'below');\n  };\n\n  const optionItemRef = useCallback<RefCallback<HTMLLIElement>>(\n    (ele) => {\n      if (!ele) {\n        return;\n      }\n\n      // 선택한 요소가 없을때는 첫번째 요소에 focus\n      if (!value && !ele.previousSibling) {\n        setTimeout(() => ele.focus());\n        return;\n      }\n\n      // 선택한 요소가 있다면 해당 요소에 focus\n      const optionValue = ele.dataset.optionValue || null;\n      if (optionValue === value) {\n        setTimeout(() => ele.focus());\n      }\n    },\n    [value]\n  );\n\n  const keyDownHandler = (e: KeyboardEvent) => {\n    const focusedElement = document.activeElement;\n\n    if (!focusedElement || !(focusedElement instanceof HTMLElement)) {\n      return;\n    }\n\n    switch (e.key) {\n      case 'Tab':\n        if (isExpanded) {\n          e.preventDefault();\n        }\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        if (!isExpanded) {\n          expandSelectListAtComputedPosition();\n          break;\n        }\n        focusSibling(focusedElement, 'previous');\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        if (!isExpanded) {\n          expandSelectListAtComputedPosition();\n          break;\n        }\n        focusSibling(focusedElement, 'next');\n        break;\n      case 'Escape':\n        e.preventDefault();\n        setExpandedDirection('none');\n        selectContainerRef.current?.focus();\n        break;\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n\n        if (e.target === e.currentTarget) {\n          if (isExpanded) {\n            setExpandedDirection('none');\n            return;\n          }\n          expandSelectListAtComputedPosition();\n        }\n\n        if (\n          focusedElement?.matches('[data-option-value]') &&\n          focusedElement instanceof HTMLLIElement &&\n          focusedElement.dataset.optionValue\n        ) {\n          onSelectOption(\n            focusedElement.dataset.optionValue as Value,\n            focusedElement.innerText\n          );\n        }\n        break;\n      default:\n        break;\n    }\n  };\n\n  return (\n    <SelectContainer\n      ref={(el) => {\n        if (!el) {\n          return;\n        }\n        selectContainerRef.current = el;\n        clickAwayRef.current = el;\n      }}\n      $width={width}\n      tabIndex={disabled ? undefined : 0}\n      aria-expanded={isExpanded}\n      aria-haspopup=\"listbox\"\n      aria-disabled={disabled}\n      onKeyDown={keyDownHandler}\n      {...props}\n    >\n      <StyledSelect\n        ref={ref}\n        expandedDirection={expandedDirection}\n        isPlaceholder={!selectedOption && !!placeholder}\n        onPointerDown={(e) => {\n          if (isExpanded) {\n            setExpandedDirection('none');\n            return;\n          }\n\n          e.stopPropagation();\n\n          expandSelectListAtComputedPosition();\n        }}\n      >\n        {selectedOption?.label || placeholder || 'ㅤ'}\n      </StyledSelect>\n      <SelectDownIcon>\n        {isExpanded ? (\n          <IconArrow2Up size=\"small\" />\n        ) : (\n          <IconArrow2Down size=\"small\" />\n        )}\n      </SelectDownIcon>\n      {isExpanded && (\n        <SelectOptionWrapper\n          role=\"listbox\"\n          aria-activedescendant={\n            value != null ? `${id}-select-option-${value}` : undefined\n          }\n          ref={selectListRef}\n          expandedDirection={expandedDirection}\n          maxHeight={maxHeight}\n        >\n          {options.map(({ value: optionValue, label, disabled: _disabled }) => (\n            <SelectOption\n              id={`${id}-select-option-${optionValue}`}\n              role=\"option\"\n              key={optionValue}\n              tabIndex={_disabled ? undefined : 0}\n              aria-selected={optionValue === value}\n              aria-disabled={_disabled}\n              ref={optionItemRef}\n              isSelected={optionValue === value}\n              data-option-value={optionValue}\n              // onMouseEnter를 사용하게 되면 키보드로 스크롤 할 때도 focus가 이동하게 되기 때문에 onMouseMove를 사용\n              onMouseMove={(e) => {\n                if (e.currentTarget === document.activeElement) {\n                  return;\n                }\n                e.currentTarget.focus({\n                  preventScroll: true,\n                });\n              }}\n              onFocus={() => {\n                selectListRef.current?.setAttribute(\n                  'aria-activedescendant',\n                  `${id}-select-option-${optionValue}`\n                );\n              }}\n              onClick={() => {\n                if (_disabled) {\n                  return;\n                }\n\n                onSelectOption(optionValue, label);\n              }}\n            >\n              {label}\n            </SelectOption>\n          ))}\n        </SelectOptionWrapper>\n      )}\n    </SelectContainer>\n  );\n};\n\nexport default forwardRef(DesignedSelect);\n"],"names":["maxHeight","props","expandedDirection","_setExpandedDirection","label","value","disabled","setTimeout","expandSelectListAtComputedPosition","focusSibling","ref","$width","tabIndex","onKeyDown","isPlaceholder","onPointerDown","children","size","role","onMouseMove","e","preventScroll","onSelectOption"],"mappings":";;;;;;;;;;;;;;AAAa;AAAA;AAAA;AA6Bb;AAaK;;;AATDA;;;;;;AAMGC;AAIL;AACA;;AAAOC;AAAmBC;AAE1B;AACA;AACA;;AAIE;AAGF;AAEI;AACE;AACF;AACAA;AACF;AAIF;;AAG0D;AAGtD;;;;;AAGEC;AACAC;AACAC;;AACD;AAGL;AAA2C;;AAE3C;;AAE6D;;;AAG3D;;;AAGF;AACA;AACA;AACA;AAAiD;AAC/C;;AAEE;AACF;AAEA;;;AAKE;AACF;;AAEA;AACA;;;;AASF;;AAGM;AACF;;AAEA;AACA;AACEC;AAAW;;AACX;AACF;;AAEA;;;AAGEA;AAAW;;AACb;AACF;AAIF;AAA6C;AAC3C;;AAGE;AACF;;AAGE;AACE;;AAEA;AACA;AACF;;;AAGIC;AACA;AACF;AACAC;AACA;AACF;;;AAGID;AACA;AACF;AACAC;AACA;AACF;;;AAGE;AACA;AACF;AACA;;AAGE;AACE;;AAEE;AACF;AACAD;AACF;;;AAWA;AACA;AAGJ;;AAGF;AAEIE;;AAEI;AACF;;;;AAIFC;AACAC;AACA;AACA;AACA;AACAC;AAA0B;;AAIxBH;AACAR;AACAY;AACAC;AACE;;AAEE;AACF;;AAIAP;;;AAG0C;AAE/BQ;AAEGC;AAAY;AAEVA;;AACjB;AAICC;AACA;AAGAR;AACAR;AACAF;AAAqBgB;AAER;;;;;AAGTE;AAEAN;;AAEA;AACAF;;;AAGA;AAAA;AACAS;AACE;AACE;AACF;AACAC;AACEC;AACF;;;AAEa;;;;AAOb;AACE;AACF;AAEAC;;AACAN;AAEI;;AAER;AAEL;AAGP;AAEA;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/Inputs/Select/DesignedSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport type { KeyboardEvent, ReactNode, Ref, RefCallback } from 'react';\nimport {\n  Children,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useRef,\n  useState,\n  useId,\n} from 'react';\nimport { IconArrow2Down, IconArrow2Up } from '@remember-web/icon';\n\nimport useMouseEventAway from '@/hooks/useMouseEventAway';\n\nimport { focusSibling } from '../utils';\nimport { OptionHolder } from '../Option';\nimport { SelectContainer } from '../styles';\nimport type { OptionElementType, SelectValue } from '../types';\nimport { DEFAULT_MAX_HEIGHT_PX, OPTION_ITEM_HEIGHT_PX } from './const';\nimport {\n  SelectDownIcon,\n  SelectOption,\n  SelectOptionWrapper,\n  StyledSelect,\n} from './styles';\nimport type { DesignedSelectInternalProps, ExpandedType } from './types';\n\nconst DesignedSelect = <Value extends SelectValue>(\n  {\n    children,\n    value,\n    maxHeight = DEFAULT_MAX_HEIGHT_PX,\n    placeholder,\n    onChange,\n    width,\n    extendDirection,\n    disabled,\n    onClick,\n    ...props\n  }: DesignedSelectInternalProps<Value>,\n  ref?: Ref<HTMLDivElement>\n) => {\n  const id = useId();\n  const [expandedDirection, _setExpandedDirection] =\n    useState<ExpandedType>('none');\n  const selectContainerRef = useRef<HTMLDivElement | null>(null);\n  const selectListRef = useRef<HTMLUListElement | null>(null);\n  const clickAwayRef = useMouseEventAway<HTMLDivElement, 'pointerdown'>(\n    'pointerdown',\n    () => {\n      setExpandedDirection('none');\n    }\n  );\n\n  const setExpandedDirection = useCallback(\n    (...args: Parameters<typeof _setExpandedDirection>) => {\n      if (disabled) {\n        return;\n      }\n      _setExpandedDirection(...args);\n    },\n    [disabled]\n  );\n\n  const options = Children.toArray(children)\n    .filter(\n      (child): child is OptionElementType<Value> =>\n        isValidElement(child) && child.type === OptionHolder\n    )\n    .map(\n      ({\n        props: { children: _children, value: _value, disabled: _disabled },\n      }) => ({\n        label: _children,\n        value: _value,\n        disabled: _disabled,\n      })\n    );\n\n  const selectedOption = options.find((option) => value === option.value);\n\n  const isExpanded = expandedDirection !== 'none';\n\n  const onSelectOption = (_value: Value, _label: ReactNode) => {\n    onChange?.(_value, _label);\n    setExpandedDirection('none');\n    selectContainerRef.current?.focus();\n  };\n\n  // 리스트가 하단으로 나와야하는지 상단으로 나와야하는지 계산하는 함수\n  // 현재 Viewport기준으로 Select컴포넌트가 아래로 확장되었을 때 뷰포트 내에 리스트박스가 노출될 수 있다면 하단으로 확장, 아니라면 상단으로 확장\n  // direction이 props로 전달되었다면 해당 방향으로 확장\n  const expandSelectListAtComputedPosition = () => {\n    if (extendDirection) {\n      setExpandedDirection(extendDirection);\n      return;\n    }\n\n    const selectContainerRect =\n      selectContainerRef.current?.getBoundingClientRect();\n\n    if (!selectContainerRect) {\n      setExpandedDirection('below');\n      return;\n    }\n\n    // SelectOptionWrapper가 마운트되기 전에 계산해야 하기 때문에 clientHeight를 사용하지 못하고 직접 계산\n    const currentSelectHeight = Math.min(\n      maxHeight,\n      options.length * OPTION_ITEM_HEIGHT_PX\n    );\n    const bottomGap = document.body.clientHeight - selectContainerRect.bottom;\n\n    setExpandedDirection(currentSelectHeight > bottomGap ? 'above' : 'below');\n  };\n\n  const optionItemRef = useCallback<RefCallback<HTMLLIElement>>(\n    (ele) => {\n      if (!ele) {\n        return;\n      }\n\n      // 선택한 요소가 없을때는 첫번째 요소에 focus\n      if (!value && !ele.previousSibling) {\n        setTimeout(() => ele.focus());\n        return;\n      }\n\n      // 선택한 요소가 있다면 해당 요소에 focus\n      const optionValue = ele.dataset.optionValue || null;\n      if (optionValue === value) {\n        setTimeout(() => ele.focus());\n      }\n    },\n    [value]\n  );\n\n  const keyDownHandler = (e: KeyboardEvent) => {\n    const focusedElement = document.activeElement;\n\n    if (!focusedElement || !(focusedElement instanceof HTMLElement)) {\n      return;\n    }\n\n    switch (e.key) {\n      case 'Tab':\n        if (isExpanded) {\n          e.preventDefault();\n        }\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        if (!isExpanded) {\n          expandSelectListAtComputedPosition();\n          break;\n        }\n        focusSibling(focusedElement, 'previous');\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        if (!isExpanded) {\n          expandSelectListAtComputedPosition();\n          break;\n        }\n        focusSibling(focusedElement, 'next');\n        break;\n      case 'Escape':\n        e.preventDefault();\n        setExpandedDirection('none');\n        selectContainerRef.current?.focus();\n        break;\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n\n        if (e.target === e.currentTarget) {\n          if (isExpanded) {\n            setExpandedDirection('none');\n            return;\n          }\n          expandSelectListAtComputedPosition();\n        }\n\n        if (\n          focusedElement?.matches('[data-option-value]') &&\n          focusedElement instanceof HTMLLIElement &&\n          focusedElement.dataset.optionValue\n        ) {\n          onSelectOption(\n            focusedElement.dataset.optionValue as Value,\n            focusedElement.innerText\n          );\n        }\n        break;\n      default:\n        break;\n    }\n  };\n\n  return (\n    <SelectContainer\n      ref={(el) => {\n        if (!el) {\n          return;\n        }\n        selectContainerRef.current = el;\n        clickAwayRef.current = el;\n      }}\n      $width={width}\n      tabIndex={disabled ? undefined : 0}\n      aria-expanded={isExpanded}\n      aria-haspopup=\"listbox\"\n      aria-disabled={disabled}\n      onKeyDown={keyDownHandler}\n      {...props}\n    >\n      <StyledSelect\n        ref={ref}\n        onClick={onClick}\n        expandedDirection={expandedDirection}\n        isPlaceholder={!selectedOption && !!placeholder}\n        onPointerDown={(e) => {\n          if (isExpanded) {\n            setExpandedDirection('none');\n            return;\n          }\n\n          e.stopPropagation();\n\n          expandSelectListAtComputedPosition();\n        }}\n      >\n        {selectedOption?.label || placeholder || 'ㅤ'}\n      </StyledSelect>\n      <SelectDownIcon>\n        {isExpanded ? (\n          <IconArrow2Up size=\"small\" />\n        ) : (\n          <IconArrow2Down size=\"small\" />\n        )}\n      </SelectDownIcon>\n      {isExpanded && (\n        <SelectOptionWrapper\n          role=\"listbox\"\n          aria-activedescendant={\n            value != null ? `${id}-select-option-${value}` : undefined\n          }\n          ref={selectListRef}\n          expandedDirection={expandedDirection}\n          maxHeight={maxHeight}\n        >\n          {options.map(({ value: optionValue, label, disabled: _disabled }) => (\n            <SelectOption\n              id={`${id}-select-option-${optionValue}`}\n              role=\"option\"\n              key={optionValue}\n              tabIndex={_disabled ? undefined : 0}\n              aria-selected={optionValue === value}\n              aria-disabled={_disabled}\n              ref={optionItemRef}\n              isSelected={optionValue === value}\n              data-option-value={optionValue}\n              // onMouseEnter를 사용하게 되면 키보드로 스크롤 할 때도 focus가 이동하게 되기 때문에 onMouseMove를 사용\n              onMouseMove={(e) => {\n                if (e.currentTarget === document.activeElement) {\n                  return;\n                }\n                e.currentTarget.focus({\n                  preventScroll: true,\n                });\n              }}\n              onFocus={() => {\n                selectListRef.current?.setAttribute(\n                  'aria-activedescendant',\n                  `${id}-select-option-${optionValue}`\n                );\n              }}\n              onClick={() => {\n                if (_disabled) {\n                  return;\n                }\n\n                onSelectOption(optionValue, label);\n              }}\n            >\n              {label}\n            </SelectOption>\n          ))}\n        </SelectOptionWrapper>\n      )}\n    </SelectContainer>\n  );\n};\n\nexport default forwardRef(DesignedSelect);\n"],"names":["maxHeight","props","expandedDirection","_setExpandedDirection","label","value","disabled","setTimeout","expandSelectListAtComputedPosition","focusSibling","ref","$width","tabIndex","onKeyDown","onClick","isPlaceholder","onPointerDown","children","size","role","onMouseMove","e","preventScroll","onSelectOption"],"mappings":";;;;;;;;;;;;;;AAAa;AAAA;AAAA;AA6Bb;AAcK;;;AAVDA;;;;;;;AAOGC;AAIL;AACA;;AAAOC;AAAmBC;AAE1B;AACA;AACA;;AAIE;AAGF;AAEI;AACE;AACF;AACAA;AACF;AAIF;;AAG0D;AAGtD;;;;;AAGEC;AACAC;AACAC;;AACD;AAGL;AAA2C;;AAE3C;;AAE6D;;;AAG3D;;;AAGF;AACA;AACA;AACA;AAAiD;AAC/C;;AAEE;AACF;AAEA;;;AAKE;AACF;;AAEA;AACA;;;;AASF;;AAGM;AACF;;AAEA;AACA;AACEC;AAAW;;AACX;AACF;;AAEA;;;AAGEA;AAAW;;AACb;AACF;AAIF;AAA6C;AAC3C;;AAGE;AACF;;AAGE;AACE;;AAEA;AACA;AACF;;;AAGIC;AACA;AACF;AACAC;AACA;AACF;;;AAGID;AACA;AACF;AACAC;AACA;AACF;;;AAGE;AACA;AACF;AACA;;AAGE;AACE;;AAEE;AACF;AACAD;AACF;;;AAWA;AACA;AAGJ;;AAGF;AAEIE;;AAEI;AACF;;;;AAIFC;AACAC;AACA;AACA;AACA;AACAC;AAA0B;;AAIxBH;AACAI;AACAZ;AACAa;AACAC;AACE;;AAEE;AACF;;AAIAR;;;AAG0C;AAE/BS;AAEGC;AAAY;AAEVA;;AACjB;AAICC;AACA;AAGAT;AACAR;AACAF;AAAqBiB;AAER;;;;;AAGTE;AAEAP;;AAEA;AACAF;;;AAGA;AAAA;AACAU;AACE;AACE;AACF;AACAC;AACEC;AACF;;;AAEa;;;;AAOb;AACE;AACF;AAEAC;;AACAN;AAEI;;AAER;AAEL;AAGP;AAEA;;"}

package/dist/src/Inputs/Select/NativeSelect/index.cjs.js

@@ -14,7 +14,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
 
-var _excluded = ["children", "className", "width", "placeholder", "value", "disabled"];
+var _excluded = ["children", "className", "width", "placeholder", "value", "disabled", "onClick"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var NativeSelect = function NativeSelect(_ref, ref) {
@@ -24,6 +24,7 @@ var NativeSelect = function NativeSelect(_ref, ref) {
     placeholder = _ref.placeholder,
     value = _ref.value,
     disabled = _ref.disabled,
+    onClick = _ref.onClick,
     props = _objectWithoutProperties__default.default(_ref, _excluded);
   var showPlaceholder = !value && !!placeholder;
   return /*#__PURE__*/jsxRuntime.jsxs(styles.SelectContainer, {
@@ -35,6 +36,7 @@ var NativeSelect = function NativeSelect(_ref, ref) {
       ref: ref,
       isPlaceholder: showPlaceholder,
       disabled: disabled,
+      onClick: onClick,
       children: [!value && /*#__PURE__*/jsxRuntime.jsx("option", {
         value: "",
         selected: true,

package/dist/src/Inputs/Select/NativeSelect/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Inputs/Select/NativeSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\nimport { IconArrow2Down } from '@remember-web/icon';\n\nimport { SelectDownIcon, StyledSelect } from './styles';\nimport type { NativeSelectInternalProps } from './types';\nimport { SelectContainer } from '../styles';\n\nconst NativeSelect: ForwardRefRenderFunction<\n  HTMLSelectElement,\n  NativeSelectInternalProps\n> = (\n  { children, className, width, placeholder, value, disabled, ...props },\n  ref\n) => {\n  const showPlaceholder = !value && !!placeholder;\n\n  return (\n    <SelectContainer aria-disabled={disabled} className={className}>\n      <StyledSelect\n        {...props}\n        value={value}\n        $width={width}\n        ref={ref}\n        isPlaceholder={showPlaceholder}\n        disabled={disabled}\n      >\n        {!value && (\n          <option value=\"\" selected>\n            {placeholder || 'ㅤ'}\n          </option>\n        )}\n        {children}\n      </StyledSelect>\n      <SelectDownIcon>\n        <IconArrow2Down size=\"small\" />\n      </SelectDownIcon>\n    </SelectContainer>\n  );\n};\n\nexport default forwardRef(NativeSelect);\n"],"names":["props","className","value","$width","ref","isPlaceholder","disabled","children","size"],"mappings":";;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAUb;AAMK;;;;;;AAF4DA;AAG/D;;AAGmB;AAAyBC;;AAGtCC;AACAC;AACAC;AACAC;AACAC;AAAmBC;AAGTL;;;;AAID;;AAGOM;;AAAe;AAChB;AAGvB;AAEA;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Inputs/Select/NativeSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\nimport { IconArrow2Down } from '@remember-web/icon';\n\nimport { SelectDownIcon, StyledSelect } from './styles';\nimport type { NativeSelectInternalProps } from './types';\nimport { SelectContainer } from '../styles';\n\nconst NativeSelect: ForwardRefRenderFunction<\n  HTMLSelectElement,\n  NativeSelectInternalProps\n> = (\n  {\n    children,\n    className,\n    width,\n    placeholder,\n    value,\n    disabled,\n    onClick,\n    ...props\n  },\n  ref\n) => {\n  const showPlaceholder = !value && !!placeholder;\n\n  return (\n    <SelectContainer aria-disabled={disabled} className={className}>\n      <StyledSelect\n        {...props}\n        value={value}\n        $width={width}\n        ref={ref}\n        isPlaceholder={showPlaceholder}\n        disabled={disabled}\n        onClick={onClick}\n      >\n        {!value && (\n          <option value=\"\" selected>\n            {placeholder || 'ㅤ'}\n          </option>\n        )}\n        {children}\n      </StyledSelect>\n      <SelectDownIcon>\n        <IconArrow2Down size=\"small\" />\n      </SelectDownIcon>\n    </SelectContainer>\n  );\n};\n\nexport default forwardRef(NativeSelect);\n"],"names":["props","className","value","$width","ref","isPlaceholder","disabled","onClick","children","size"],"mappings":";;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAUb;AAeK;;;;;;;AAHEA;AAIL;;AAGmB;AAAyBC;;AAGtCC;AACAC;AACAC;AACAC;AACAC;AACAC;AAAiBC;AAGPN;;;;AAID;;AAGOO;;AAAe;AAChB;AAGvB;AAEA;;"}

package/dist/src/Inputs/Select/NativeSelect/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/Select/NativeSelect/index.tsx"],"names":[],"mappings":";;;;;;AA2CA,wBAAwC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/Select/NativeSelect/index.tsx"],"names":[],"mappings":";;;;;;AAqDA,wBAAwC"}

package/dist/src/Inputs/Select/NativeSelect/index.esm.js

@@ -7,7 +7,7 @@ import { StyledSelect, SelectDownIcon } from './styles.esm.js';
 import { SelectContainer } from '../styles.esm.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children", "className", "width", "placeholder", "value", "disabled"];
+var _excluded = ["children", "className", "width", "placeholder", "value", "disabled", "onClick"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var NativeSelect = function NativeSelect(_ref, ref) {
@@ -17,6 +17,7 @@ var NativeSelect = function NativeSelect(_ref, ref) {
     placeholder = _ref.placeholder,
     value = _ref.value,
     disabled = _ref.disabled,
+    onClick = _ref.onClick,
     props = _objectWithoutProperties(_ref, _excluded);
   var showPlaceholder = !value && !!placeholder;
   return /*#__PURE__*/jsxs(SelectContainer, {
@@ -28,6 +29,7 @@ var NativeSelect = function NativeSelect(_ref, ref) {
       ref: ref,
       isPlaceholder: showPlaceholder,
       disabled: disabled,
+      onClick: onClick,
       children: [!value && /*#__PURE__*/jsx("option", {
         value: "",
         selected: true,

package/dist/src/Inputs/Select/NativeSelect/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../src/Inputs/Select/NativeSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\nimport { IconArrow2Down } from '@remember-web/icon';\n\nimport { SelectDownIcon, StyledSelect } from './styles';\nimport type { NativeSelectInternalProps } from './types';\nimport { SelectContainer } from '../styles';\n\nconst NativeSelect: ForwardRefRenderFunction<\n  HTMLSelectElement,\n  NativeSelectInternalProps\n> = (\n  { children, className, width, placeholder, value, disabled, ...props },\n  ref\n) => {\n  const showPlaceholder = !value && !!placeholder;\n\n  return (\n    <SelectContainer aria-disabled={disabled} className={className}>\n      <StyledSelect\n        {...props}\n        value={value}\n        $width={width}\n        ref={ref}\n        isPlaceholder={showPlaceholder}\n        disabled={disabled}\n      >\n        {!value && (\n          <option value=\"\" selected>\n            {placeholder || 'ㅤ'}\n          </option>\n        )}\n        {children}\n      </StyledSelect>\n      <SelectDownIcon>\n        <IconArrow2Down size=\"small\" />\n      </SelectDownIcon>\n    </SelectContainer>\n  );\n};\n\nexport default forwardRef(NativeSelect);\n"],"names":["props","className","value","$width","ref","isPlaceholder","disabled","children","size"],"mappings":";;;;;;;;;AAAa;AAAA;AAAA;AAUb;AAMK;;;;;;AAF4DA;AAG/D;;AAGmB;AAAyBC;;AAGtCC;AACAC;AACAC;AACAC;AACAC;AAAmBC;AAGTL;;;;AAID;;AAGOM;;AAAe;AAChB;AAGvB;AAEA;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/Inputs/Select/NativeSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\nimport { IconArrow2Down } from '@remember-web/icon';\n\nimport { SelectDownIcon, StyledSelect } from './styles';\nimport type { NativeSelectInternalProps } from './types';\nimport { SelectContainer } from '../styles';\n\nconst NativeSelect: ForwardRefRenderFunction<\n  HTMLSelectElement,\n  NativeSelectInternalProps\n> = (\n  {\n    children,\n    className,\n    width,\n    placeholder,\n    value,\n    disabled,\n    onClick,\n    ...props\n  },\n  ref\n) => {\n  const showPlaceholder = !value && !!placeholder;\n\n  return (\n    <SelectContainer aria-disabled={disabled} className={className}>\n      <StyledSelect\n        {...props}\n        value={value}\n        $width={width}\n        ref={ref}\n        isPlaceholder={showPlaceholder}\n        disabled={disabled}\n        onClick={onClick}\n      >\n        {!value && (\n          <option value=\"\" selected>\n            {placeholder || 'ㅤ'}\n          </option>\n        )}\n        {children}\n      </StyledSelect>\n      <SelectDownIcon>\n        <IconArrow2Down size=\"small\" />\n      </SelectDownIcon>\n    </SelectContainer>\n  );\n};\n\nexport default forwardRef(NativeSelect);\n"],"names":["props","className","value","$width","ref","isPlaceholder","disabled","onClick","children","size"],"mappings":";;;;;;;;;AAAa;AAAA;AAAA;AAUb;AAeK;;;;;;;AAHEA;AAIL;;AAGmB;AAAyBC;;AAGtCC;AACAC;AACAC;AACAC;AACAC;AACAC;AAAiBC;AAGPN;;;;AAID;;AAGOO;;AAAe;AAChB;AAGvB;AAEA;;"}

package/dist/src/Inputs/Select/index.cjs.js

@@ -25,7 +25,8 @@ function Select(props, ref) {
     _onChange = props.onChange,
     placeholder = props.placeholder,
     width = props.width,
-    required = props.required;
+    required = props.required,
+    onClick = props.onClick;
   if (props["native"]) {
     return /*#__PURE__*/jsxRuntime.jsxs("div", {
       children: [label && /*#__PURE__*/jsxRuntime.jsxs(styles.SelectLabel, {
@@ -35,6 +36,7 @@ function Select(props, ref) {
       }), /*#__PURE__*/jsxRuntime.jsx(index$2, {
         disabled: disabled,
         className: className,
+        onClick: onClick,
         onChange: function onChange(e) {
           _onChange === null || _onChange === void 0 || _onChange(e.target.value, e.target.innerText);
         },
@@ -58,6 +60,7 @@ function Select(props, ref) {
       className: className,
       value: value,
       disabled: disabled,
+      onClick: onClick,
       onChange: function onChange(_value, _label) {
         return _onChange === null || _onChange === void 0 ? void 0 : _onChange(_value, _label);
       },

package/dist/src/Inputs/Select/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/Inputs/Select/index.tsx"],"sourcesContent":["'use client';\n\nimport type { Ref, RefAttributes } from 'react';\nimport { Children, forwardRef } from 'react';\n\nimport DesignedSelect from './DesignedSelect';\nimport NativeSelect from './NativeSelect';\nimport { NativeOption } from './NativeSelect/Option';\nimport { OptionHolder } from './Option';\nimport { SelectLabel } from './styles';\nimport type {\n  DesignedSelectProps,\n  NativeSelectProps,\n  SelectProps,\n  SelectValue,\n} from './types';\n\nfunction Select<Value extends SelectValue>(\n  props: SelectProps<Value>,\n  ref: Ref<HTMLDivElement | HTMLSelectElement>\n) {\n  const {\n    children,\n    label,\n    value,\n    className,\n    disabled,\n    onChange,\n    placeholder,\n    width,\n    required,\n  } = props;\n\n  if (props.native) {\n    return (\n      <div>\n        {label && (\n          <SelectLabel>\n            {label}\n            {required && <mark>*</mark>}\n          </SelectLabel>\n        )}\n        <NativeSelect\n          disabled={disabled}\n          className={className}\n          onChange={(e) => {\n            onChange?.(e.target.value as Value, e.target.innerText);\n          }}\n          value={value}\n          required={required}\n          placeholder={placeholder}\n          width={width}\n          ref={ref as Ref<HTMLSelectElement>}\n        >\n          {Children.map(children, (child) => (\n            <NativeOption {...child.props} />\n          ))}\n        </NativeSelect>\n      </div>\n    );\n  }\n\n  return (\n    <div>\n      {label && (\n        <SelectLabel>\n          {label}\n          {required && <mark>*</mark>}\n        </SelectLabel>\n      )}\n      <DesignedSelect\n        className={className}\n        value={value}\n        disabled={disabled}\n        onChange={(_value, _label) => onChange?.(_value as Value, _label)}\n        placeholder={placeholder}\n        width={width}\n        maxHeight={props.maxHeight}\n        extendDirection={props.extendDirection}\n        ref={ref as Ref<HTMLDivElement>}\n      >\n        {children}\n      </DesignedSelect>\n    </div>\n  );\n}\n\nexport default Object.assign(\n  forwardRef(Select) as <Value extends SelectValue>(\n    props:\n      | (DesignedSelectProps<Value> & RefAttributes<HTMLDivElement>)\n      | (NativeSelectProps<Value> & RefAttributes<HTMLSelectElement>)\n  ) => JSX.Element,\n  { Option: OptionHolder }\n);\n"],"names":["children","disabled","className","onChange","value","required","placeholder","width","ref","Option"],"mappings":";;;;;;;;;;;;;;;;AAAa;AAAA;AAiBb;AAIE;;;;;;;;;;AAaE;AACEA;AAEgBA;AAEGA;AAAO;AAAO;AAI7BC;AACAC;AACAC;AACEA;;AAEFC;AACAC;AACAC;AACAC;AACAC;;;;AAIE;AACW;AAGrB;AAEA;AACER;AAEgBA;AAEGA;AAAO;AAAO;AAI7BE;AACAE;AACAH;AACAE;;;AACAG;AACAC;;;AAGAC;AAAgCR;AAEvB;AACM;AAGvB;AAEA;AAMIS;AAAqB;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/Inputs/Select/index.tsx"],"sourcesContent":["'use client';\n\nimport type { Ref, RefAttributes } from 'react';\nimport { Children, forwardRef } from 'react';\n\nimport DesignedSelect from './DesignedSelect';\nimport NativeSelect from './NativeSelect';\nimport { NativeOption } from './NativeSelect/Option';\nimport { OptionHolder } from './Option';\nimport { SelectLabel } from './styles';\nimport type {\n  DesignedSelectProps,\n  NativeSelectProps,\n  SelectProps,\n  SelectValue,\n} from './types';\n\nfunction Select<Value extends SelectValue>(\n  props: SelectProps<Value>,\n  ref: Ref<HTMLDivElement | HTMLSelectElement>\n) {\n  const {\n    children,\n    label,\n    value,\n    className,\n    disabled,\n    onChange,\n    placeholder,\n    width,\n    required,\n    onClick,\n  } = props;\n\n  if (props.native) {\n    return (\n      <div>\n        {label && (\n          <SelectLabel>\n            {label}\n            {required && <mark>*</mark>}\n          </SelectLabel>\n        )}\n        <NativeSelect\n          disabled={disabled}\n          className={className}\n          onClick={onClick}\n          onChange={(e) => {\n            onChange?.(e.target.value as Value, e.target.innerText);\n          }}\n          value={value}\n          required={required}\n          placeholder={placeholder}\n          width={width}\n          ref={ref as Ref<HTMLSelectElement>}\n        >\n          {Children.map(children, (child) => (\n            <NativeOption {...child.props} />\n          ))}\n        </NativeSelect>\n      </div>\n    );\n  }\n\n  return (\n    <div>\n      {label && (\n        <SelectLabel>\n          {label}\n          {required && <mark>*</mark>}\n        </SelectLabel>\n      )}\n      <DesignedSelect\n        className={className}\n        value={value}\n        disabled={disabled}\n        onClick={onClick}\n        onChange={(_value, _label) => onChange?.(_value as Value, _label)}\n        placeholder={placeholder}\n        width={width}\n        maxHeight={props.maxHeight}\n        extendDirection={props.extendDirection}\n        ref={ref as Ref<HTMLDivElement>}\n      >\n        {children}\n      </DesignedSelect>\n    </div>\n  );\n}\n\nexport default Object.assign(\n  forwardRef(Select) as <Value extends SelectValue>(\n    props:\n      | (DesignedSelectProps<Value> & RefAttributes<HTMLDivElement>)\n      | (NativeSelectProps<Value> & RefAttributes<HTMLSelectElement>)\n  ) => JSX.Element,\n  { Option: OptionHolder }\n);\n"],"names":["children","disabled","className","onClick","onChange","value","required","placeholder","width","ref","Option"],"mappings":";;;;;;;;;;;;;;;;AAAa;AAAA;AAiBb;AAIE;;;;;;;;;;;AAcE;AACEA;AAEgBA;AAEGA;AAAO;AAAO;AAI7BC;AACAC;AACAC;AACAC;AACEA;;AAEFC;AACAC;AACAC;AACAC;AACAC;;;;AAIE;AACW;AAGrB;AAEA;AACET;AAEgBA;AAEGA;AAAO;AAAO;AAI7BE;AACAG;AACAJ;AACAE;AACAC;;;AACAG;AACAC;;;AAGAC;AAAgCT;AAEvB;AACM;AAGvB;AAEA;AAMIU;AAAqB;;"}

package/dist/src/Inputs/Select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/Select/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAO,aAAa,EAAE,MAAM,OAAO,CAAC;AAQhD,OAAO,KAAK,EACV,mBAAmB,EACnB,iBAAiB,EAEjB,WAAW,EACZ,MAAM,SAAS,CAAC;4DA2ET,CAAC,oBAAoB,KAAK,CAAC,GAAG,cAAc,cAAc,CAAC,CAAC,GAC5D,CAAC,kBAAkB,KAAK,CAAC,GAAG,cAAc,iBAAiB,CAAC,CAAC,KAC9D,WAAW;;;;;;AALlB,wBAOE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/Select/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAO,aAAa,EAAE,MAAM,OAAO,CAAC;AAQhD,OAAO,KAAK,EACV,mBAAmB,EACnB,iBAAiB,EAEjB,WAAW,EACZ,MAAM,SAAS,CAAC;4DA8ET,CAAC,oBAAoB,KAAK,CAAC,GAAG,cAAc,cAAc,CAAC,CAAC,GAC5D,CAAC,kBAAkB,KAAK,CAAC,GAAG,cAAc,iBAAiB,CAAC,CAAC,KAC9D,WAAW;;;;;;AALlB,wBAOE"}

package/dist/src/Inputs/Select/index.esm.js

@@ -19,7 +19,8 @@ function Select(props, ref) {
     _onChange = props.onChange,
     placeholder = props.placeholder,
     width = props.width,
-    required = props.required;
+    required = props.required,
+    onClick = props.onClick;
   if (props["native"]) {
     return /*#__PURE__*/jsxs("div", {
       children: [label && /*#__PURE__*/jsxs(SelectLabel, {
@@ -29,6 +30,7 @@ function Select(props, ref) {
       }), /*#__PURE__*/jsx(NativeSelect, {
         disabled: disabled,
         className: className,
+        onClick: onClick,
         onChange: function onChange(e) {
           _onChange === null || _onChange === void 0 || _onChange(e.target.value, e.target.innerText);
         },
@@ -52,6 +54,7 @@ function Select(props, ref) {
       className: className,
       value: value,
       disabled: disabled,
+      onClick: onClick,
       onChange: function onChange(_value, _label) {
         return _onChange === null || _onChange === void 0 ? void 0 : _onChange(_value, _label);
       },

package/dist/src/Inputs/Select/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/Inputs/Select/index.tsx"],"sourcesContent":["'use client';\n\nimport type { Ref, RefAttributes } from 'react';\nimport { Children, forwardRef } from 'react';\n\nimport DesignedSelect from './DesignedSelect';\nimport NativeSelect from './NativeSelect';\nimport { NativeOption } from './NativeSelect/Option';\nimport { OptionHolder } from './Option';\nimport { SelectLabel } from './styles';\nimport type {\n  DesignedSelectProps,\n  NativeSelectProps,\n  SelectProps,\n  SelectValue,\n} from './types';\n\nfunction Select<Value extends SelectValue>(\n  props: SelectProps<Value>,\n  ref: Ref<HTMLDivElement | HTMLSelectElement>\n) {\n  const {\n    children,\n    label,\n    value,\n    className,\n    disabled,\n    onChange,\n    placeholder,\n    width,\n    required,\n  } = props;\n\n  if (props.native) {\n    return (\n      <div>\n        {label && (\n          <SelectLabel>\n            {label}\n            {required && <mark>*</mark>}\n          </SelectLabel>\n        )}\n        <NativeSelect\n          disabled={disabled}\n          className={className}\n          onChange={(e) => {\n            onChange?.(e.target.value as Value, e.target.innerText);\n          }}\n          value={value}\n          required={required}\n          placeholder={placeholder}\n          width={width}\n          ref={ref as Ref<HTMLSelectElement>}\n        >\n          {Children.map(children, (child) => (\n            <NativeOption {...child.props} />\n          ))}\n        </NativeSelect>\n      </div>\n    );\n  }\n\n  return (\n    <div>\n      {label && (\n        <SelectLabel>\n          {label}\n          {required && <mark>*</mark>}\n        </SelectLabel>\n      )}\n      <DesignedSelect\n        className={className}\n        value={value}\n        disabled={disabled}\n        onChange={(_value, _label) => onChange?.(_value as Value, _label)}\n        placeholder={placeholder}\n        width={width}\n        maxHeight={props.maxHeight}\n        extendDirection={props.extendDirection}\n        ref={ref as Ref<HTMLDivElement>}\n      >\n        {children}\n      </DesignedSelect>\n    </div>\n  );\n}\n\nexport default Object.assign(\n  forwardRef(Select) as <Value extends SelectValue>(\n    props:\n      | (DesignedSelectProps<Value> & RefAttributes<HTMLDivElement>)\n      | (NativeSelectProps<Value> & RefAttributes<HTMLSelectElement>)\n  ) => JSX.Element,\n  { Option: OptionHolder }\n);\n"],"names":["children","disabled","className","onChange","value","required","placeholder","width","ref","Option"],"mappings":";;;;;;;;;;AAAa;AAAA;AAiBb;AAIE;;;;;;;;;;AAaE;AACEA;AAEgBA;AAEGA;AAAO;AAAO;AAI7BC;AACAC;AACAC;AACEA;;AAEFC;AACAC;AACAC;AACAC;AACAC;;;;AAIE;AACW;AAGrB;AAEA;AACER;AAEgBA;AAEGA;AAAO;AAAO;AAI7BE;AACAE;AACAH;AACAE;;;AACAG;AACAC;;;AAGAC;AAAgCR;AAEvB;AACM;AAGvB;AAEA;AAMIS;AAAqB;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/Inputs/Select/index.tsx"],"sourcesContent":["'use client';\n\nimport type { Ref, RefAttributes } from 'react';\nimport { Children, forwardRef } from 'react';\n\nimport DesignedSelect from './DesignedSelect';\nimport NativeSelect from './NativeSelect';\nimport { NativeOption } from './NativeSelect/Option';\nimport { OptionHolder } from './Option';\nimport { SelectLabel } from './styles';\nimport type {\n  DesignedSelectProps,\n  NativeSelectProps,\n  SelectProps,\n  SelectValue,\n} from './types';\n\nfunction Select<Value extends SelectValue>(\n  props: SelectProps<Value>,\n  ref: Ref<HTMLDivElement | HTMLSelectElement>\n) {\n  const {\n    children,\n    label,\n    value,\n    className,\n    disabled,\n    onChange,\n    placeholder,\n    width,\n    required,\n    onClick,\n  } = props;\n\n  if (props.native) {\n    return (\n      <div>\n        {label && (\n          <SelectLabel>\n            {label}\n            {required && <mark>*</mark>}\n          </SelectLabel>\n        )}\n        <NativeSelect\n          disabled={disabled}\n          className={className}\n          onClick={onClick}\n          onChange={(e) => {\n            onChange?.(e.target.value as Value, e.target.innerText);\n          }}\n          value={value}\n          required={required}\n          placeholder={placeholder}\n          width={width}\n          ref={ref as Ref<HTMLSelectElement>}\n        >\n          {Children.map(children, (child) => (\n            <NativeOption {...child.props} />\n          ))}\n        </NativeSelect>\n      </div>\n    );\n  }\n\n  return (\n    <div>\n      {label && (\n        <SelectLabel>\n          {label}\n          {required && <mark>*</mark>}\n        </SelectLabel>\n      )}\n      <DesignedSelect\n        className={className}\n        value={value}\n        disabled={disabled}\n        onClick={onClick}\n        onChange={(_value, _label) => onChange?.(_value as Value, _label)}\n        placeholder={placeholder}\n        width={width}\n        maxHeight={props.maxHeight}\n        extendDirection={props.extendDirection}\n        ref={ref as Ref<HTMLDivElement>}\n      >\n        {children}\n      </DesignedSelect>\n    </div>\n  );\n}\n\nexport default Object.assign(\n  forwardRef(Select) as <Value extends SelectValue>(\n    props:\n      | (DesignedSelectProps<Value> & RefAttributes<HTMLDivElement>)\n      | (NativeSelectProps<Value> & RefAttributes<HTMLSelectElement>)\n  ) => JSX.Element,\n  { Option: OptionHolder }\n);\n"],"names":["children","disabled","className","onClick","onChange","value","required","placeholder","width","ref","Option"],"mappings":";;;;;;;;;;AAAa;AAAA;AAiBb;AAIE;;;;;;;;;;;AAcE;AACEA;AAEgBA;AAEGA;AAAO;AAAO;AAI7BC;AACAC;AACAC;AACAC;AACEA;;AAEFC;AACAC;AACAC;AACAC;AACAC;;;;AAIE;AACW;AAGrB;AAEA;AACET;AAEgBA;AAEGA;AAAO;AAAO;AAI7BE;AACAG;AACAJ;AACAE;AACAC;;;AACAG;AACAC;;;AAGAC;AAAgCT;AAEvB;AACM;AAGvB;AAEA;AAMIU;AAAqB;;"}

package/dist/src/Inputs/Select/types.d.ts

@@ -15,6 +15,7 @@ export type SelectBaseProps<Value extends SelectValue> = {
     placeholder?: string;
     width?: number | string;
     onChange?: (targetValue: Value, targetLabel: ReactNode) => Promise<void> | void;
+    onClick?: React.MouseEventHandler<HTMLElement>;
 };
 export type DesignedSelectProps<Value extends SelectValue> = SelectBaseProps<Value> & {
     native?: false | never;

package/dist/src/Inputs/Select/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,WAAW,IAAI,YAAY,CACrE,WAAW,CAAC,KAAK,CAAC,EAClB,OAAO,YAAY,CACpB,CAAC;AAEF,KAAK,eAAe,CAAC,KAAK,SAAS,WAAW,IAAI;IAChD,QAAQ,EAAE,iBAAiB,CAAC,KAAK,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC;CACjE,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,WAAW,IAAI;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,CACT,WAAW,EAAE,KAAK,EAClB,WAAW,EAAE,SAAS,KACnB,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAAC,KAAK,SAAS,WAAW,IACvD,eAAe,CAAC,KAAK,CAAC,GAAG;IACvB,MAAM,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CACrC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;AAE7B,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,WAAW,IACrD,eAAe,CAAC,KAAK,CAAC,GAAG;IACvB,MAAM,EAAE,IAAI,CAAC;CACd,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;AAE7B,MAAM,MAAM,WAAW,CAAC,KAAK,SAAS,WAAW,IAC7C,mBAAmB,CAAC,KAAK,CAAC,GAC1B,iBAAiB,CAAC,KAAK,CAAC,CAAC;AAE7B,MAAM,MAAM,WAAW,CAAC,KAAK,SAAS,WAAW,IAAI;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,WAAW,IAAI,YAAY,CACrE,WAAW,CAAC,KAAK,CAAC,EAClB,OAAO,YAAY,CACpB,CAAC;AAEF,KAAK,eAAe,CAAC,KAAK,SAAS,WAAW,IAAI;IAChD,QAAQ,EAAE,iBAAiB,CAAC,KAAK,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC;CACjE,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,WAAW,IAAI;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,CACT,WAAW,EAAE,KAAK,EAClB,WAAW,EAAE,SAAS,KACnB,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAAC,KAAK,SAAS,WAAW,IACvD,eAAe,CAAC,KAAK,CAAC,GAAG;IACvB,MAAM,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CACrC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;AAE7B,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,WAAW,IACrD,eAAe,CAAC,KAAK,CAAC,GAAG;IACvB,MAAM,EAAE,IAAI,CAAC;CACd,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;AAE7B,MAAM,MAAM,WAAW,CAAC,KAAK,SAAS,WAAW,IAC7C,mBAAmB,CAAC,KAAK,CAAC,GAC1B,iBAAiB,CAAC,KAAK,CAAC,CAAC;AAE7B,MAAM,MAAM,WAAW,CAAC,KAAK,SAAS,WAAW,IAAI;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remember-web/primitive",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "Remember Web Primitive Components",
   "homepage": "https://dramancompany.github.io/remember-web-packages/",
   "author": "Remember",
@@ -42,7 +42,7 @@
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@remember-web/icon": "^0.1.6",
+    "@remember-web/icon": "^0.1.9",
     "@remember-web/mixin": "^0.1.14",
     "@remember-web/shared": "^0.1.0"
   },

package/src/Control/BaseToggle/ToggleIcon/index.tsx

@@ -5,6 +5,7 @@ import {
   ControlBookmarkOn,
   ControlCheckOff,
   ControlCheckOn,
+  ControlCheckboxIndeterminate,
   ControlCheckboxOff,
   ControlCheckboxOn,
   ControlFavoriteOff,
@@ -22,11 +23,31 @@ import {
 import type { ToggleStatusType, ToggleVariantType } from '../types';
 
 const ICON_NAME = {
-  check: { on: ControlCheckOn, off: ControlCheckOff },
-  checkbox: { on: ControlCheckboxOn, off: ControlCheckboxOff },
-  favorite: { on: ControlFavoriteOn, off: ControlFavoriteOff },
-  bookmark: { on: ControlBookmarkOn, off: ControlBookmarkOff },
-  radio: { on: ControlRadioOn, off: ControlRadioOff },
+  check: {
+    on: ControlCheckOn,
+    indeterminate: ControlCheckOn,
+    off: ControlCheckOff,
+  },
+  checkbox: {
+    on: ControlCheckboxOn,
+    indeterminate: ControlCheckboxIndeterminate,
+    off: ControlCheckboxOff,
+  },
+  favorite: {
+    on: ControlFavoriteOn,
+    indeterminate: ControlFavoriteOn,
+    off: ControlFavoriteOff,
+  },
+  bookmark: {
+    on: ControlBookmarkOn,
+    indeterminate: ControlBookmarkOn,
+    off: ControlBookmarkOff,
+  },
+  radio: {
+    on: ControlRadioOn,
+    indeterminate: ControlRadioOn,
+    off: ControlRadioOff,
+  },
 } as const satisfies Record<
   ToggleVariantType,
   Record<ToggleStatusType, WithSvgSizeComponentType>
@@ -44,6 +65,7 @@ export function ToggleIcon({
 } & SvgSizeProps) {
   const iconSize =
     typeof size === 'string' && isSvgRegularSize(size) ? SVG_SIZES[size] : size;
+
   const Icon = ICON_NAME[variant][status];
 
   return <Icon className={className} size={iconSize} />;

package/src/Control/BaseToggle/index.tsx

@@ -24,6 +24,7 @@ const _BaseToggle: ForwardRefRenderFunction<
     type = 'checkbox',
     onToggle,
     onChange,
+    indeterminate,
     ...props
   },
   ref
@@ -38,7 +39,15 @@ const _BaseToggle: ForwardRefRenderFunction<
   return (
     <ToggleRoot className={className} $gap={labelGap}>
       <ToggleInput
-        ref={ref}
+        ref={(input) => {
+          if (typeof ref !== 'function' && ref) {
+            ref.current = input;
+          }
+
+          if (input) {
+            input.indeterminate = indeterminate ?? false;
+          }
+        }}
         className={inputClassName}
         type={type}
         {...props}
@@ -54,6 +63,12 @@ const _BaseToggle: ForwardRefRenderFunction<
         status="on"
         variant={variant}
       />
+      <ToggleIcon
+        className="indeterminateIcon"
+        size={size}
+        status="indeterminate"
+        variant={variant}
+      />
       <ToggleIcon
         className="offIcon"
         size={size}

package/src/Control/BaseToggle/styles.ts

@@ -44,6 +44,15 @@ export const ToggleInput = styled.input`
     display: none;
   }
 
+  &:indeterminate ~ svg.offIcon,
+  &:indeterminate ~ svg.onIcon {
+    display: none;
+  }
+
+  &:not(:indeterminate) ~ svg.indeterminateIcon {
+    display: none;
+  }
+
   &:disabled ~ svg {
     filter: grayscale(1) brightness(1.1);
   }

package/src/Control/BaseToggle/types.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 
-export type ToggleStatusType = 'on' | 'off';
+export type ToggleStatusType = 'on' | 'off' | 'indeterminate';
 export type ToggleVariantType =
   | 'check'
   | 'checkbox'
@@ -24,6 +24,7 @@ export type BaseToggleProps = {
   onToggle?: (checked: boolean) => void;
   size?: ToggleIconSizeType;
   type?: 'checkbox' | 'radio';
+  indeterminate?: boolean;
 } & Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
   'type' | `aria-${string}` | 'size'

package/src/Control/Checkbox.stories.tsx

@@ -19,10 +19,10 @@ export const Default: Story = {
     disabled: false,
     required: false,
     checked: false,
-    variant: 'checkbox',
     label: "I'm a Checkbox",
     size: 'medium',
     labelPosition: 'right',
+    indeterminate: false,
   },
   render: ({ ...args }) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -30,6 +30,33 @@ export const Default: Story = {
     return (
       <Checkbox
         {...args}
+        variant="checkbox"
+        checked={checked}
+        onToggle={(v) => updateArgs({ checked: v })}
+      />
+    );
+  },
+};
+
+export const Check: Story = {
+  args: {
+    disabled: false,
+    required: false,
+    checked: false,
+    label: "I'm a Check",
+    size: 'medium',
+    labelPosition: 'right',
+  },
+  argTypes: {
+    indeterminate: { table: { disable: true } },
+  },
+  render: ({ ...args }) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [{ checked }, updateArgs] = useArgs();
+    return (
+      <Checkbox
+        {...args}
+        variant="check"
         checked={checked}
         onToggle={(v) => updateArgs({ checked: v })}
       />

package/src/Control/Checkbox.tsx

@@ -5,11 +5,17 @@ import { forwardRef, type ForwardRefRenderFunction } from 'react';
 import type { BaseToggleProps } from './BaseToggle/types';
 import { CircleBaseToggle } from './Toggle';
 
+type CheckboxProps<T> = Omit<BaseToggleProps, 'variant' | 'indeterminate'> & T;
+
 export const _Checkbox: ForwardRefRenderFunction<
   HTMLInputElement,
-  Omit<BaseToggleProps, 'variant' | 'type'> & {
-    variant?: 'checkbox' | 'check';
-  }
+  | CheckboxProps<{
+      variant: 'checkbox';
+      indeterminate?: boolean;
+    }>
+  | CheckboxProps<{
+      variant: 'check';
+    }>
 > = ({ variant = 'checkbox', ...props }, ref) => (
   <CircleBaseToggle ref={ref} variant={variant} {...props} />
 );

package/src/Control/Radio.tsx

@@ -7,7 +7,7 @@ import { CircleBaseToggle } from './Toggle';
 
 const _Radio: ForwardRefRenderFunction<
   HTMLInputElement,
-  Omit<BaseToggleProps, 'variant' | 'onToggle' | 'type'>
+  Omit<BaseToggleProps, 'variant' | 'onToggle' | 'type' | 'indeterminate'>
 > = ({ ...props }, ref) => (
   <CircleBaseToggle ref={ref} variant="radio" type="radio" {...props} />
 );

package/src/Control/Toggle.tsx

@@ -8,7 +8,7 @@ import type { BaseToggleProps } from './BaseToggle/types';
 
 export const _Toggle: ForwardRefRenderFunction<
   HTMLInputElement,
-  Omit<BaseToggleProps, 'variant' | 'type'> & {
+  Omit<BaseToggleProps, 'variant' | 'type' | 'indeterminate'> & {
     variant: 'bookmark' | 'favorite';
   }
 > = ({ variant, ...props }, ref) => (

package/src/Inputs/Select/DesignedSelect/index.tsx

@@ -37,6 +37,7 @@ const DesignedSelect = <Value extends SelectValue>(
     width,
     extendDirection,
     disabled,
+    onClick,
     ...props
   }: DesignedSelectInternalProps<Value>,
   ref?: Ref<HTMLDivElement>
@@ -217,6 +218,7 @@ const DesignedSelect = <Value extends SelectValue>(
     >
       <StyledSelect
         ref={ref}
+        onClick={onClick}
         expandedDirection={expandedDirection}
         isPlaceholder={!selectedOption && !!placeholder}
         onPointerDown={(e) => {

package/src/Inputs/Select/NativeSelect/index.tsx

@@ -12,7 +12,16 @@ const NativeSelect: ForwardRefRenderFunction<
   HTMLSelectElement,
   NativeSelectInternalProps
 > = (
-  { children, className, width, placeholder, value, disabled, ...props },
+  {
+    children,
+    className,
+    width,
+    placeholder,
+    value,
+    disabled,
+    onClick,
+    ...props
+  },
   ref
 ) => {
   const showPlaceholder = !value && !!placeholder;
@@ -26,6 +35,7 @@ const NativeSelect: ForwardRefRenderFunction<
         ref={ref}
         isPlaceholder={showPlaceholder}
         disabled={disabled}
+        onClick={onClick}
       >
         {!value && (
           <option value="" selected>

package/src/Inputs/Select/Select.stories.tsx

@@ -18,6 +18,7 @@ const meta = {
     width: { type: 'string' },
     maxHeight: { type: 'string' },
     native: { type: 'boolean' },
+    onClick: { action: 'clicked' },
   },
 } satisfies Meta<typeof Select>;
 
@@ -36,6 +37,7 @@ export const Native: Story = {
         onChange={(tV) => {
           setValue(tV);
         }}
+        onClick={() => console.log('clicked native select')}
       >
         <Select.Option value="1">Option 1</Select.Option>
         <Select.Option value="2">Option 2</Select.Option>
@@ -66,6 +68,7 @@ export const Custom: Story = {
         onChange={(tV) => {
           setValue(tV);
         }}
+        onClick={() => console.log('clicked custom select')}
       >
         <Select.Option value="1">Option 1</Select.Option>
         <Select.Option value="2">Option 2</Select.Option>

package/src/Inputs/Select/index.tsx

@@ -29,6 +29,7 @@ function Select<Value extends SelectValue>(
     placeholder,
     width,
     required,
+    onClick,
   } = props;
 
   if (props.native) {
@@ -43,6 +44,7 @@ function Select<Value extends SelectValue>(
         <NativeSelect
           disabled={disabled}
           className={className}
+          onClick={onClick}
           onChange={(e) => {
             onChange?.(e.target.value as Value, e.target.innerText);
           }}
@@ -72,6 +74,7 @@ function Select<Value extends SelectValue>(
         className={className}
         value={value}
         disabled={disabled}
+        onClick={onClick}
         onChange={(_value, _label) => onChange?.(_value as Value, _label)}
         placeholder={placeholder}
         width={width}

package/src/Inputs/Select/types.ts

@@ -27,6 +27,7 @@ export type SelectBaseProps<Value extends SelectValue> = {
     targetValue: Value,
     targetLabel: ReactNode
   ) => Promise<void> | void;
+  onClick?: React.MouseEventHandler<HTMLElement>;
 };
 
 export type DesignedSelectProps<Value extends SelectValue> =