@semcore/select 3.10.3 → 4.0.0-beta.1

package/CHANGELOG.md

@@ -2,11 +2,11 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
-## [3.10.3] - 2023-06-30
+## [4.0.0] - 2023-07-15
 
-### Changed
+### Break
 
-- Version patch update due to children dependencies update (`@semcore/base-trigger` [3.12.1 ~> 3.12.2], `@semcore/checkbox` [6.5.8 ~> 6.5.9], `@semcore/divider` [3.2.32 ~> 3.2.33], `@semcore/dropdown-menu` [3.9.6 ~> 3.9.7], `@semcore/flex-box` [4.7.32 ~> 4.7.33], `@semcore/icon` [3.16.0 ~> 3.16.1], `@semcore/input` [3.7.1 ~> 3.7.2], `@semcore/utils` [3.54.0 ~> 3.54.1]).
+- Strict, backward incompatible typings.
 
 ## [3.10.2] - 2023-06-28
 

package/lib/cjs/InputSearch.js

@@ -22,12 +22,12 @@ var _context = require("./context");
 var _i18nEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/i18nEnhance"));
 var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynamic-locales");
 /*__reshadow-styles__:"./style/input-search.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SInputSearch_eh8xa_gg_._size_m_eh8xa_gg_{height:32px}.___SClose_eh8xa_gg_.__hide_eh8xa_gg_{visibility:hidden}.___SOutline_eh8xa_gg_{top:-1px;left:-1px;width:100%;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0}" /*__inner_css_end__*/, "eh8xa_gg_") /*__reshadow_css_end__*/, {
-  "__SInputSearch": "___SInputSearch_eh8xa_gg_",
-  "_size_m": "_size_m_eh8xa_gg_",
-  "__SClose": "___SClose_eh8xa_gg_",
-  "_hide": "__hide_eh8xa_gg_",
-  "__SOutline": "___SOutline_eh8xa_gg_"
+var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SInputSearch_fmjeo_gg_._size_m_fmjeo_gg_{height:32px}.___SClose_fmjeo_gg_.__hide_fmjeo_gg_{visibility:hidden}.___SOutline_fmjeo_gg_{top:-1px;left:-1px;width:100%;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0}" /*__inner_css_end__*/, "fmjeo_gg_") /*__reshadow_css_end__*/, {
+  "__SInputSearch": "___SInputSearch_fmjeo_gg_",
+  "_size_m": "_size_m_fmjeo_gg_",
+  "__SClose": "___SClose_fmjeo_gg_",
+  "_hide": "__hide_fmjeo_gg_",
+  "__SOutline": "___SOutline_fmjeo_gg_"
 });
 var sizeToIcon = {
   m: [_m["default"], _m2["default"]],

package/lib/cjs/Select.js

@@ -36,13 +36,13 @@ var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynam
 var _useFocusLock = require("@semcore/utils/lib/use/useFocusLock");
 var _excluded = ["Children", "options", "multiselect", "value"];
 /*__reshadow-styles__:"./style/select.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SOptionCheckbox_1wlyc_gg_{margin-top:var(--intergalactic-spacing-05x, 2px);margin-right:var(--intergalactic-spacing-2x, 8px);margin-bottom:auto;position:relative;flex-shrink:0;width:16px;height:16px}.___SOptionCheckbox_1wlyc_gg_::before{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--intergalactic-bg-primary-neutral, #ffffff);border:1px solid;border-radius:var(--intergalactic-addon-rounded, 4px);border-color:var(--intergalactic-border-primary, #c4c7cf)}.___SOptionCheckbox_1wlyc_gg_::after{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;margin:0 var(--intergalactic-spacing-05x, 2px);background-repeat:no-repeat;background-position:center center;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_1wlyc_gg_._size_l_1wlyc_gg_{width:20px;height:20px}.___SOptionCheckbox_1wlyc_gg_._size_l_1wlyc_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_1wlyc_gg_.__checked_1wlyc_gg_:before{background-color:var(--intergalactic-control-primary-info, #008ff8);border-color:var(--intergalactic-control-primary-info, #008ff8)}.___SOptionCheckbox_1wlyc_gg_.__theme_1wlyc_gg_:before{border-color:var(--theme_1wlyc)}.___SOptionCheckbox_1wlyc_gg_.__theme_1wlyc_gg_.__checked_1wlyc_gg_:before{background-color:var(--theme_1wlyc);border-color:var(--theme_1wlyc)}.___SOptionCheckbox_1wlyc_gg_.__selected_1wlyc_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7))}@media (hover:hover){.___SOptionCheckbox_1wlyc_gg_.__selected_1wlyc_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}" /*__inner_css_end__*/, "1wlyc_gg_") /*__reshadow_css_end__*/, {
-  "__SOptionCheckbox": "___SOptionCheckbox_1wlyc_gg_",
-  "_size_l": "_size_l_1wlyc_gg_",
-  "_checked": "__checked_1wlyc_gg_",
-  "_theme": "__theme_1wlyc_gg_",
-  "--theme": "--theme_1wlyc",
-  "_selected": "__selected_1wlyc_gg_"
+var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SOptionCheckbox_1htee_gg_{margin-top:var(--intergalactic-spacing-05x, 2px);margin-right:var(--intergalactic-spacing-2x, 8px);margin-bottom:auto;position:relative;flex-shrink:0;width:16px;height:16px}.___SOptionCheckbox_1htee_gg_::before{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--intergalactic-bg-primary-neutral, #ffffff);border:1px solid;border-radius:var(--intergalactic-addon-rounded, 4px);border-color:var(--intergalactic-border-primary, #c4c7cf)}.___SOptionCheckbox_1htee_gg_::after{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;margin:0 var(--intergalactic-spacing-05x, 2px);background-repeat:no-repeat;background-position:center center;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_1htee_gg_._size_l_1htee_gg_{width:20px;height:20px}.___SOptionCheckbox_1htee_gg_._size_l_1htee_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_1htee_gg_.__checked_1htee_gg_:before{background-color:var(--intergalactic-control-primary-info, #008ff8);border-color:var(--intergalactic-control-primary-info, #008ff8)}.___SOptionCheckbox_1htee_gg_.__theme_1htee_gg_:before{border-color:var(--theme_1htee)}.___SOptionCheckbox_1htee_gg_.__theme_1htee_gg_.__checked_1htee_gg_:before{background-color:var(--theme_1htee);border-color:var(--theme_1htee)}.___SOptionCheckbox_1htee_gg_.__selected_1htee_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7))}@media (hover:hover){.___SOptionCheckbox_1htee_gg_.__selected_1htee_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}" /*__inner_css_end__*/, "1htee_gg_") /*__reshadow_css_end__*/, {
+  "__SOptionCheckbox": "___SOptionCheckbox_1htee_gg_",
+  "_size_l": "_size_l_1htee_gg_",
+  "_checked": "__checked_1htee_gg_",
+  "_theme": "__theme_1htee_gg_",
+  "--theme": "--theme_1htee",
+  "_selected": "__selected_1htee_gg_"
 });
 function isSelectedOption(value, valueOption) {
   return Array.isArray(value) ? value.includes(valueOption) : valueOption === value;

package/lib/cjs/index.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React, { ComponentProps } from 'react';\nimport { CProps, Merge, PropGetterFn, ReturnEl } from '@semcore/core';\nimport DropdownMenu, {\n  IDropdownMenuContext,\n  IDropdownMenuItemProps,\n  IDropdownMenuProps,\n  IDropdownMenuHandlers,\n} from '@semcore/dropdown-menu';\nimport { ButtonTrigger, IBaseTriggerProps } from '@semcore/base-trigger';\nimport Divider from '@semcore/divider';\nimport { IInputValueProps } from '@semcore/input';\nimport { IBoxProps } from '@semcore/flex-box';\n\nexport interface ISelectInputSearch extends IInputValueProps {}\n\nexport type OptionValue = string | number;\nexport type SelectValue = string | number | Array<string | number> | null;\n\nexport type SelectOption = {\n  value: OptionValue;\n  children?: React.ReactNode;\n  label?: React.ReactNode;\n};\n\nexport interface ISelectProps<T extends SelectValue = SelectValue>\n  extends IDropdownMenuProps,\n    IBaseTriggerProps {\n  /**\n   * Multiple select\n   */\n  multiselect?: boolean;\n  /**\n   * Options array\n   */\n  options?: SelectOption[];\n  /**\n   * The value or values array selected by default when using multiselect\n   * @type SelectValue\n   */\n  defaultValue?: T;\n  /**\n   * The selected value or values array when using multiselect\n   * @type SelectValue\n   */\n  value?: T;\n  /**\n   * Callback on value change\n   * @type (value: SelectValue, e: React.SyntheticEvent) => boolean | void\n   */\n  onChange?: (value: T, e: React.SyntheticEvent) => boolean | void;\n  /**\n   * Trigger placeholder at not selected value\n   */\n  placeholder?: React.ReactNode;\n  /**\n   * Trigger state\n   */\n  state?: 'normal' | 'valid' | 'invalid';\n  /**\n   * Disables select\n   */\n  disabled?: boolean;\n  /**\n   * Input name\n   */\n  name?: string;\n  locale?: string;\n  /**\n   * If enabled, after opening select popper view will be scrolled to selected option or, if there are multiple selected options, to the first selected option.\n   * @default true\n   */\n  scrollToSelected?: boolean;\n}\n\nexport interface ISelectOption {\n  value?: string | number;\n  [key: string]: any;\n}\n\nexport interface ISelectOptionProps extends IDropdownMenuItemProps {\n  /** Value of the option */\n  value: string | number;\n}\n\nexport interface ISelectOptionCheckboxProps extends ISelectOptionProps {\n  /** Checkbox theme */\n  theme?: string;\n}\n\ndeclare const InputSearch: <T>(props: ISelectInputSearch & T) => ReturnEl;\n\nexport interface ISelectContext extends IDropdownMenuContext {\n  getOptionProps: PropGetterFn;\n  getOptionCheckboxProps: PropGetterFn;\n  getDividerProps: PropGetterFn;\n}\n\nexport interface ISelectHandlers extends IDropdownMenuHandlers {\n  value: (index: SelectValue) => void;\n}\n\ndeclare const Select: (<T, V extends SelectValue = SelectValue>(\n  props: CProps<ISelectProps<V> & T, ISelectContext, ISelectHandlers>,\n) => ReturnEl) & {\n  Trigger: (<T>(\n    props: Merge<\n      ComponentProps<typeof DropdownMenu.Trigger>,\n      ComponentProps<typeof ButtonTrigger>\n    > &\n      T,\n  ) => ReturnEl) & {\n    Addon: typeof ButtonTrigger.Addon;\n    Text: typeof ButtonTrigger.Text;\n  };\n  Popper: typeof DropdownMenu.Popper;\n  List: typeof DropdownMenu.List;\n  Menu: typeof DropdownMenu.Menu;\n  Option: (<T>(\n    props: CProps<ISelectOptionProps & T, ISelectContext, ISelectHandlers>,\n  ) => ReturnEl) & {\n    Addon: typeof DropdownMenu.Item.Addon;\n    Checkbox: <T>(\n      props: CProps<IBoxProps & { theme?: string; selected?: boolean } & T>,\n    ) => ReturnEl;\n  };\n  OptionTitle: typeof DropdownMenu.ItemTitle;\n  OptionHint: typeof DropdownMenu.ItemHint;\n  Divider: typeof Divider;\n  InputSearch: typeof InputSearch;\n  Input: typeof InputSearch;\n};\n\nexport { InputSearch };\nexport default Select;\n"],"mappings":""}
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport DropdownMenu, {\n  DropdownMenuContext,\n  DropdownMenuItemProps,\n  DropdownMenuProps,\n  DropdownMenuHandlers,\n  DropdownMenuTriggerProps,\n} from '@semcore/dropdown-menu';\nimport { ButtonTrigger, BaseTriggerProps, ButtonTriggerProps } from '@semcore/base-trigger';\nimport Divider from '@semcore/divider';\nimport { InputValueProps } from '@semcore/input';\nimport { BoxProps } from '@semcore/flex-box';\n\n/** @deprecated */\nexport interface ISelectInputSearch extends SelectInputSearch, UnknownProperties {}\nexport type SelectInputSearch = InputValueProps & {};\n\nexport type OptionValue = string | number;\nexport type SelectValue = string | number | Array<string | number> | null;\n\nexport type SelectOption = {\n  value: OptionValue;\n  children?: React.ReactNode;\n  label?: React.ReactNode;\n};\n\n/** @deprecated */\nexport interface ISelectProps<T extends SelectValue = SelectValue> extends SelectProps<T> {}\nexport type SelectProps<T extends SelectValue = SelectValue> = DropdownMenuProps &\n  BaseTriggerProps & {\n    /**\n     * Multiple select\n     */\n    multiselect?: boolean;\n    /**\n     * Options array\n     */\n    options?: SelectOption[];\n    /**\n     * The value or values array selected by default when using multiselect\n     * @type SelectValue\n     */\n    defaultValue?: T;\n    /**\n     * The selected value or values array when using multiselect\n     * @type SelectValue\n     */\n    value?: T;\n    /**\n     * Callback on value change\n     * @type (value: SelectValue, e: React.SyntheticEvent) => boolean | void\n     */\n    onChange?:\n      | ((value: T, e: React.SyntheticEvent) => boolean | void)\n      | React.Dispatch<React.SetStateAction<T>>;\n    /**\n     * Trigger placeholder at not selected value\n     */\n    placeholder?: React.ReactNode;\n    /**\n     * Trigger state\n     */\n    state?: 'normal' | 'valid' | 'invalid';\n    /**\n     * Disables select\n     */\n    disabled?: boolean;\n    /**\n     * Input name\n     */\n    name?: string;\n    locale?: string;\n    /**\n     * If enabled, after opening select popper view will be scrolled to selected option or, if there are multiple selected options, to the first selected option.\n     * @default true\n     */\n    scrollToSelected?: boolean;\n  };\n\n/** @deprecated */\nexport interface ISelectOption extends SelectOption, UnknownProperties {}\n\n/** @deprecated */\nexport interface ISelectOptionProps extends SelectOptionProps, UnknownProperties {}\nexport type SelectOptionProps = DropdownMenuItemProps & {\n  /** Value of the option */\n  value: string | number;\n};\n\n/** @deprecated */\nexport interface ISelectOptionCheckboxProps extends SelectOptionCheckboxProps, UnknownProperties {}\nexport type SelectOptionCheckboxProps = SelectOptionProps & {\n  /** Checkbox theme */\n  theme?: string;\n};\n\ndeclare const InputSearch: Intergalactic.Component<'div', SelectInputSearch>;\n\n/** @deprecated */\nexport interface ISelectContext extends SelectContext, UnknownProperties {}\nexport type SelectContext = DropdownMenuContext & {\n  getOptionProps: PropGetterFn;\n  getOptionCheckboxProps: PropGetterFn;\n  getDividerProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface ISelectHandlers extends SelectHandlers, UnknownProperties {}\nexport type SelectHandlers = DropdownMenuHandlers & {\n  value: (index: SelectValue) => void;\n};\n\ntype IntergalacticSelectComponent = (<\n  Value extends SelectValue,\n  Tag extends Intergalactic.Tag = 'div',\n>(\n  props: Intergalactic.InternalTypings.ComponentProps<\n    Tag,\n    SelectProps<Value>,\n    SelectContext,\n    [handlers: SelectHandlers]\n  >,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n  Intergalactic.InternalTypings.ComponentAdditive<'div'>;\n\ndeclare const Select: IntergalacticSelectComponent & {\n  Trigger: Intergalactic.Component<\n    'div',\n    DropdownMenuTriggerProps & ButtonTriggerProps,\n    {},\n    [handlers: SelectHandlers]\n  > & {\n    Addon: typeof ButtonTrigger.Addon;\n    Text: typeof ButtonTrigger.Text;\n  };\n  Popper: typeof DropdownMenu.Popper;\n  List: typeof DropdownMenu.List;\n  Menu: typeof DropdownMenu.Menu;\n  Option: Intergalactic.Component<\n    'option',\n    SelectOptionProps,\n    SelectContext,\n    [handlers: SelectHandlers]\n  > & {\n    Addon: typeof DropdownMenu.Item.Addon;\n    Checkbox: Intergalactic.Component<'div', BoxProps & { theme?: string; selected?: boolean }>;\n  };\n  OptionTitle: typeof DropdownMenu.ItemTitle;\n  OptionHint: typeof DropdownMenu.ItemHint;\n  Divider: typeof Divider;\n  InputSearch: typeof InputSearch;\n  Input: typeof InputSearch;\n};\n\nexport { InputSearch };\nexport default Select;\n"],"mappings":""}

package/lib/es6/InputSearch.js

@@ -16,12 +16,12 @@ import { selectContext } from './context';
 import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
 import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
 /*__reshadow-styles__:"./style/input-search.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SInputSearch_eh8xa_gg_._size_m_eh8xa_gg_{height:32px}.___SClose_eh8xa_gg_.__hide_eh8xa_gg_{visibility:hidden}.___SOutline_eh8xa_gg_{top:-1px;left:-1px;width:100%;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0}" /*__inner_css_end__*/, "eh8xa_gg_") /*__reshadow_css_end__*/, {
-  "__SInputSearch": "___SInputSearch_eh8xa_gg_",
-  "_size_m": "_size_m_eh8xa_gg_",
-  "__SClose": "___SClose_eh8xa_gg_",
-  "_hide": "__hide_eh8xa_gg_",
-  "__SOutline": "___SOutline_eh8xa_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SInputSearch_fmjeo_gg_._size_m_fmjeo_gg_{height:32px}.___SClose_fmjeo_gg_.__hide_fmjeo_gg_{visibility:hidden}.___SOutline_fmjeo_gg_{top:-1px;left:-1px;width:100%;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0}" /*__inner_css_end__*/, "fmjeo_gg_") /*__reshadow_css_end__*/, {
+  "__SInputSearch": "___SInputSearch_fmjeo_gg_",
+  "_size_m": "_size_m_fmjeo_gg_",
+  "__SClose": "___SClose_fmjeo_gg_",
+  "_hide": "__hide_fmjeo_gg_",
+  "__SOutline": "___SOutline_fmjeo_gg_"
 });
 var sizeToIcon = {
   m: [SearchM, CloseM],

package/lib/es6/Select.js

@@ -33,13 +33,13 @@ import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
 import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
 import { setFocus } from '@semcore/utils/lib/use/useFocusLock';
 /*__reshadow-styles__:"./style/select.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SOptionCheckbox_1wlyc_gg_{margin-top:var(--intergalactic-spacing-05x, 2px);margin-right:var(--intergalactic-spacing-2x, 8px);margin-bottom:auto;position:relative;flex-shrink:0;width:16px;height:16px}.___SOptionCheckbox_1wlyc_gg_::before{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--intergalactic-bg-primary-neutral, #ffffff);border:1px solid;border-radius:var(--intergalactic-addon-rounded, 4px);border-color:var(--intergalactic-border-primary, #c4c7cf)}.___SOptionCheckbox_1wlyc_gg_::after{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;margin:0 var(--intergalactic-spacing-05x, 2px);background-repeat:no-repeat;background-position:center center;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_1wlyc_gg_._size_l_1wlyc_gg_{width:20px;height:20px}.___SOptionCheckbox_1wlyc_gg_._size_l_1wlyc_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_1wlyc_gg_.__checked_1wlyc_gg_:before{background-color:var(--intergalactic-control-primary-info, #008ff8);border-color:var(--intergalactic-control-primary-info, #008ff8)}.___SOptionCheckbox_1wlyc_gg_.__theme_1wlyc_gg_:before{border-color:var(--theme_1wlyc)}.___SOptionCheckbox_1wlyc_gg_.__theme_1wlyc_gg_.__checked_1wlyc_gg_:before{background-color:var(--theme_1wlyc);border-color:var(--theme_1wlyc)}.___SOptionCheckbox_1wlyc_gg_.__selected_1wlyc_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7))}@media (hover:hover){.___SOptionCheckbox_1wlyc_gg_.__selected_1wlyc_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}" /*__inner_css_end__*/, "1wlyc_gg_") /*__reshadow_css_end__*/, {
-  "__SOptionCheckbox": "___SOptionCheckbox_1wlyc_gg_",
-  "_size_l": "_size_l_1wlyc_gg_",
-  "_checked": "__checked_1wlyc_gg_",
-  "_theme": "__theme_1wlyc_gg_",
-  "--theme": "--theme_1wlyc",
-  "_selected": "__selected_1wlyc_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SOptionCheckbox_1htee_gg_{margin-top:var(--intergalactic-spacing-05x, 2px);margin-right:var(--intergalactic-spacing-2x, 8px);margin-bottom:auto;position:relative;flex-shrink:0;width:16px;height:16px}.___SOptionCheckbox_1htee_gg_::before{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--intergalactic-bg-primary-neutral, #ffffff);border:1px solid;border-radius:var(--intergalactic-addon-rounded, 4px);border-color:var(--intergalactic-border-primary, #c4c7cf)}.___SOptionCheckbox_1htee_gg_::after{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;margin:0 var(--intergalactic-spacing-05x, 2px);background-repeat:no-repeat;background-position:center center;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_1htee_gg_._size_l_1htee_gg_{width:20px;height:20px}.___SOptionCheckbox_1htee_gg_._size_l_1htee_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_1htee_gg_.__checked_1htee_gg_:before{background-color:var(--intergalactic-control-primary-info, #008ff8);border-color:var(--intergalactic-control-primary-info, #008ff8)}.___SOptionCheckbox_1htee_gg_.__theme_1htee_gg_:before{border-color:var(--theme_1htee)}.___SOptionCheckbox_1htee_gg_.__theme_1htee_gg_.__checked_1htee_gg_:before{background-color:var(--theme_1htee);border-color:var(--theme_1htee)}.___SOptionCheckbox_1htee_gg_.__selected_1htee_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7))}@media (hover:hover){.___SOptionCheckbox_1htee_gg_.__selected_1htee_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}" /*__inner_css_end__*/, "1htee_gg_") /*__reshadow_css_end__*/, {
+  "__SOptionCheckbox": "___SOptionCheckbox_1htee_gg_",
+  "_size_l": "_size_l_1htee_gg_",
+  "_checked": "__checked_1htee_gg_",
+  "_theme": "__theme_1htee_gg_",
+  "--theme": "--theme_1htee",
+  "_selected": "__selected_1htee_gg_"
 });
 function isSelectedOption(value, valueOption) {
   return Array.isArray(value) ? value.includes(valueOption) : valueOption === value;

package/lib/es6/index.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React, { ComponentProps } from 'react';\nimport { CProps, Merge, PropGetterFn, ReturnEl } from '@semcore/core';\nimport DropdownMenu, {\n  IDropdownMenuContext,\n  IDropdownMenuItemProps,\n  IDropdownMenuProps,\n  IDropdownMenuHandlers,\n} from '@semcore/dropdown-menu';\nimport { ButtonTrigger, IBaseTriggerProps } from '@semcore/base-trigger';\nimport Divider from '@semcore/divider';\nimport { IInputValueProps } from '@semcore/input';\nimport { IBoxProps } from '@semcore/flex-box';\n\nexport interface ISelectInputSearch extends IInputValueProps {}\n\nexport type OptionValue = string | number;\nexport type SelectValue = string | number | Array<string | number> | null;\n\nexport type SelectOption = {\n  value: OptionValue;\n  children?: React.ReactNode;\n  label?: React.ReactNode;\n};\n\nexport interface ISelectProps<T extends SelectValue = SelectValue>\n  extends IDropdownMenuProps,\n    IBaseTriggerProps {\n  /**\n   * Multiple select\n   */\n  multiselect?: boolean;\n  /**\n   * Options array\n   */\n  options?: SelectOption[];\n  /**\n   * The value or values array selected by default when using multiselect\n   * @type SelectValue\n   */\n  defaultValue?: T;\n  /**\n   * The selected value or values array when using multiselect\n   * @type SelectValue\n   */\n  value?: T;\n  /**\n   * Callback on value change\n   * @type (value: SelectValue, e: React.SyntheticEvent) => boolean | void\n   */\n  onChange?: (value: T, e: React.SyntheticEvent) => boolean | void;\n  /**\n   * Trigger placeholder at not selected value\n   */\n  placeholder?: React.ReactNode;\n  /**\n   * Trigger state\n   */\n  state?: 'normal' | 'valid' | 'invalid';\n  /**\n   * Disables select\n   */\n  disabled?: boolean;\n  /**\n   * Input name\n   */\n  name?: string;\n  locale?: string;\n  /**\n   * If enabled, after opening select popper view will be scrolled to selected option or, if there are multiple selected options, to the first selected option.\n   * @default true\n   */\n  scrollToSelected?: boolean;\n}\n\nexport interface ISelectOption {\n  value?: string | number;\n  [key: string]: any;\n}\n\nexport interface ISelectOptionProps extends IDropdownMenuItemProps {\n  /** Value of the option */\n  value: string | number;\n}\n\nexport interface ISelectOptionCheckboxProps extends ISelectOptionProps {\n  /** Checkbox theme */\n  theme?: string;\n}\n\ndeclare const InputSearch: <T>(props: ISelectInputSearch & T) => ReturnEl;\n\nexport interface ISelectContext extends IDropdownMenuContext {\n  getOptionProps: PropGetterFn;\n  getOptionCheckboxProps: PropGetterFn;\n  getDividerProps: PropGetterFn;\n}\n\nexport interface ISelectHandlers extends IDropdownMenuHandlers {\n  value: (index: SelectValue) => void;\n}\n\ndeclare const Select: (<T, V extends SelectValue = SelectValue>(\n  props: CProps<ISelectProps<V> & T, ISelectContext, ISelectHandlers>,\n) => ReturnEl) & {\n  Trigger: (<T>(\n    props: Merge<\n      ComponentProps<typeof DropdownMenu.Trigger>,\n      ComponentProps<typeof ButtonTrigger>\n    > &\n      T,\n  ) => ReturnEl) & {\n    Addon: typeof ButtonTrigger.Addon;\n    Text: typeof ButtonTrigger.Text;\n  };\n  Popper: typeof DropdownMenu.Popper;\n  List: typeof DropdownMenu.List;\n  Menu: typeof DropdownMenu.Menu;\n  Option: (<T>(\n    props: CProps<ISelectOptionProps & T, ISelectContext, ISelectHandlers>,\n  ) => ReturnEl) & {\n    Addon: typeof DropdownMenu.Item.Addon;\n    Checkbox: <T>(\n      props: CProps<IBoxProps & { theme?: string; selected?: boolean } & T>,\n    ) => ReturnEl;\n  };\n  OptionTitle: typeof DropdownMenu.ItemTitle;\n  OptionHint: typeof DropdownMenu.ItemHint;\n  Divider: typeof Divider;\n  InputSearch: typeof InputSearch;\n  Input: typeof InputSearch;\n};\n\nexport { InputSearch };\nexport default Select;\n"],"mappings":""}
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport DropdownMenu, {\n  DropdownMenuContext,\n  DropdownMenuItemProps,\n  DropdownMenuProps,\n  DropdownMenuHandlers,\n  DropdownMenuTriggerProps,\n} from '@semcore/dropdown-menu';\nimport { ButtonTrigger, BaseTriggerProps, ButtonTriggerProps } from '@semcore/base-trigger';\nimport Divider from '@semcore/divider';\nimport { InputValueProps } from '@semcore/input';\nimport { BoxProps } from '@semcore/flex-box';\n\n/** @deprecated */\nexport interface ISelectInputSearch extends SelectInputSearch, UnknownProperties {}\nexport type SelectInputSearch = InputValueProps & {};\n\nexport type OptionValue = string | number;\nexport type SelectValue = string | number | Array<string | number> | null;\n\nexport type SelectOption = {\n  value: OptionValue;\n  children?: React.ReactNode;\n  label?: React.ReactNode;\n};\n\n/** @deprecated */\nexport interface ISelectProps<T extends SelectValue = SelectValue> extends SelectProps<T> {}\nexport type SelectProps<T extends SelectValue = SelectValue> = DropdownMenuProps &\n  BaseTriggerProps & {\n    /**\n     * Multiple select\n     */\n    multiselect?: boolean;\n    /**\n     * Options array\n     */\n    options?: SelectOption[];\n    /**\n     * The value or values array selected by default when using multiselect\n     * @type SelectValue\n     */\n    defaultValue?: T;\n    /**\n     * The selected value or values array when using multiselect\n     * @type SelectValue\n     */\n    value?: T;\n    /**\n     * Callback on value change\n     * @type (value: SelectValue, e: React.SyntheticEvent) => boolean | void\n     */\n    onChange?:\n      | ((value: T, e: React.SyntheticEvent) => boolean | void)\n      | React.Dispatch<React.SetStateAction<T>>;\n    /**\n     * Trigger placeholder at not selected value\n     */\n    placeholder?: React.ReactNode;\n    /**\n     * Trigger state\n     */\n    state?: 'normal' | 'valid' | 'invalid';\n    /**\n     * Disables select\n     */\n    disabled?: boolean;\n    /**\n     * Input name\n     */\n    name?: string;\n    locale?: string;\n    /**\n     * If enabled, after opening select popper view will be scrolled to selected option or, if there are multiple selected options, to the first selected option.\n     * @default true\n     */\n    scrollToSelected?: boolean;\n  };\n\n/** @deprecated */\nexport interface ISelectOption extends SelectOption, UnknownProperties {}\n\n/** @deprecated */\nexport interface ISelectOptionProps extends SelectOptionProps, UnknownProperties {}\nexport type SelectOptionProps = DropdownMenuItemProps & {\n  /** Value of the option */\n  value: string | number;\n};\n\n/** @deprecated */\nexport interface ISelectOptionCheckboxProps extends SelectOptionCheckboxProps, UnknownProperties {}\nexport type SelectOptionCheckboxProps = SelectOptionProps & {\n  /** Checkbox theme */\n  theme?: string;\n};\n\ndeclare const InputSearch: Intergalactic.Component<'div', SelectInputSearch>;\n\n/** @deprecated */\nexport interface ISelectContext extends SelectContext, UnknownProperties {}\nexport type SelectContext = DropdownMenuContext & {\n  getOptionProps: PropGetterFn;\n  getOptionCheckboxProps: PropGetterFn;\n  getDividerProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface ISelectHandlers extends SelectHandlers, UnknownProperties {}\nexport type SelectHandlers = DropdownMenuHandlers & {\n  value: (index: SelectValue) => void;\n};\n\ntype IntergalacticSelectComponent = (<\n  Value extends SelectValue,\n  Tag extends Intergalactic.Tag = 'div',\n>(\n  props: Intergalactic.InternalTypings.ComponentProps<\n    Tag,\n    SelectProps<Value>,\n    SelectContext,\n    [handlers: SelectHandlers]\n  >,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n  Intergalactic.InternalTypings.ComponentAdditive<'div'>;\n\ndeclare const Select: IntergalacticSelectComponent & {\n  Trigger: Intergalactic.Component<\n    'div',\n    DropdownMenuTriggerProps & ButtonTriggerProps,\n    {},\n    [handlers: SelectHandlers]\n  > & {\n    Addon: typeof ButtonTrigger.Addon;\n    Text: typeof ButtonTrigger.Text;\n  };\n  Popper: typeof DropdownMenu.Popper;\n  List: typeof DropdownMenu.List;\n  Menu: typeof DropdownMenu.Menu;\n  Option: Intergalactic.Component<\n    'option',\n    SelectOptionProps,\n    SelectContext,\n    [handlers: SelectHandlers]\n  > & {\n    Addon: typeof DropdownMenu.Item.Addon;\n    Checkbox: Intergalactic.Component<'div', BoxProps & { theme?: string; selected?: boolean }>;\n  };\n  OptionTitle: typeof DropdownMenu.ItemTitle;\n  OptionHint: typeof DropdownMenu.ItemHint;\n  Divider: typeof Divider;\n  InputSearch: typeof InputSearch;\n  Input: typeof InputSearch;\n};\n\nexport { InputSearch };\nexport default Select;\n"],"mappings":""}

package/lib/types/index.d.ts

@@ -1,17 +1,20 @@
-import React, { ComponentProps } from 'react';
-import { CProps, Merge, PropGetterFn, ReturnEl } from '@semcore/core';
+import React from 'react';
+import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
 import DropdownMenu, {
-  IDropdownMenuContext,
-  IDropdownMenuItemProps,
-  IDropdownMenuProps,
-  IDropdownMenuHandlers,
+  DropdownMenuContext,
+  DropdownMenuItemProps,
+  DropdownMenuProps,
+  DropdownMenuHandlers,
+  DropdownMenuTriggerProps,
 } from '@semcore/dropdown-menu';
-import { ButtonTrigger, IBaseTriggerProps } from '@semcore/base-trigger';
+import { ButtonTrigger, BaseTriggerProps, ButtonTriggerProps } from '@semcore/base-trigger';
 import Divider from '@semcore/divider';
-import { IInputValueProps } from '@semcore/input';
-import { IBoxProps } from '@semcore/flex-box';
+import { InputValueProps } from '@semcore/input';
+import { BoxProps } from '@semcore/flex-box';
 
-export interface ISelectInputSearch extends IInputValueProps {}
+/** @deprecated */
+export interface ISelectInputSearch extends SelectInputSearch, UnknownProperties {}
+export type SelectInputSearch = InputValueProps & {};
 
 export type OptionValue = string | number;
 export type SelectValue = string | number | Array<string | number> | null;
@@ -22,106 +25,126 @@ export type SelectOption = {
   label?: React.ReactNode;
 };
 
-export interface ISelectProps<T extends SelectValue = SelectValue>
-  extends IDropdownMenuProps,
-    IBaseTriggerProps {
-  /**
-   * Multiple select
-   */
-  multiselect?: boolean;
-  /**
-   * Options array
-   */
-  options?: SelectOption[];
-  /**
-   * The value or values array selected by default when using multiselect
-   * @type SelectValue
-   */
-  defaultValue?: T;
-  /**
-   * The selected value or values array when using multiselect
-   * @type SelectValue
-   */
-  value?: T;
-  /**
-   * Callback on value change
-   * @type (value: SelectValue, e: React.SyntheticEvent) => boolean | void
-   */
-  onChange?: (value: T, e: React.SyntheticEvent) => boolean | void;
-  /**
-   * Trigger placeholder at not selected value
-   */
-  placeholder?: React.ReactNode;
-  /**
-   * Trigger state
-   */
-  state?: 'normal' | 'valid' | 'invalid';
-  /**
-   * Disables select
-   */
-  disabled?: boolean;
-  /**
-   * Input name
-   */
-  name?: string;
-  locale?: string;
-  /**
-   * If enabled, after opening select popper view will be scrolled to selected option or, if there are multiple selected options, to the first selected option.
-   * @default true
-   */
-  scrollToSelected?: boolean;
-}
+/** @deprecated */
+export interface ISelectProps<T extends SelectValue = SelectValue> extends SelectProps<T> {}
+export type SelectProps<T extends SelectValue = SelectValue> = DropdownMenuProps &
+  BaseTriggerProps & {
+    /**
+     * Multiple select
+     */
+    multiselect?: boolean;
+    /**
+     * Options array
+     */
+    options?: SelectOption[];
+    /**
+     * The value or values array selected by default when using multiselect
+     * @type SelectValue
+     */
+    defaultValue?: T;
+    /**
+     * The selected value or values array when using multiselect
+     * @type SelectValue
+     */
+    value?: T;
+    /**
+     * Callback on value change
+     * @type (value: SelectValue, e: React.SyntheticEvent) => boolean | void
+     */
+    onChange?:
+      | ((value: T, e: React.SyntheticEvent) => boolean | void)
+      | React.Dispatch<React.SetStateAction<T>>;
+    /**
+     * Trigger placeholder at not selected value
+     */
+    placeholder?: React.ReactNode;
+    /**
+     * Trigger state
+     */
+    state?: 'normal' | 'valid' | 'invalid';
+    /**
+     * Disables select
+     */
+    disabled?: boolean;
+    /**
+     * Input name
+     */
+    name?: string;
+    locale?: string;
+    /**
+     * If enabled, after opening select popper view will be scrolled to selected option or, if there are multiple selected options, to the first selected option.
+     * @default true
+     */
+    scrollToSelected?: boolean;
+  };
 
-export interface ISelectOption {
-  value?: string | number;
-  [key: string]: any;
-}
+/** @deprecated */
+export interface ISelectOption extends SelectOption, UnknownProperties {}
 
-export interface ISelectOptionProps extends IDropdownMenuItemProps {
+/** @deprecated */
+export interface ISelectOptionProps extends SelectOptionProps, UnknownProperties {}
+export type SelectOptionProps = DropdownMenuItemProps & {
   /** Value of the option */
   value: string | number;
-}
+};
 
-export interface ISelectOptionCheckboxProps extends ISelectOptionProps {
+/** @deprecated */
+export interface ISelectOptionCheckboxProps extends SelectOptionCheckboxProps, UnknownProperties {}
+export type SelectOptionCheckboxProps = SelectOptionProps & {
   /** Checkbox theme */
   theme?: string;
-}
+};
 
-declare const InputSearch: <T>(props: ISelectInputSearch & T) => ReturnEl;
+declare const InputSearch: Intergalactic.Component<'div', SelectInputSearch>;
 
-export interface ISelectContext extends IDropdownMenuContext {
+/** @deprecated */
+export interface ISelectContext extends SelectContext, UnknownProperties {}
+export type SelectContext = DropdownMenuContext & {
   getOptionProps: PropGetterFn;
   getOptionCheckboxProps: PropGetterFn;
   getDividerProps: PropGetterFn;
-}
+};
 
-export interface ISelectHandlers extends IDropdownMenuHandlers {
+/** @deprecated */
+export interface ISelectHandlers extends SelectHandlers, UnknownProperties {}
+export type SelectHandlers = DropdownMenuHandlers & {
   value: (index: SelectValue) => void;
-}
+};
+
+type IntergalacticSelectComponent = (<
+  Value extends SelectValue,
+  Tag extends Intergalactic.Tag = 'div',
+>(
+  props: Intergalactic.InternalTypings.ComponentProps<
+    Tag,
+    SelectProps<Value>,
+    SelectContext,
+    [handlers: SelectHandlers]
+  >,
+) => Intergalactic.InternalTypings.ComponentRenderingResults) &
+  Intergalactic.InternalTypings.ComponentAdditive<'div'>;
 
-declare const Select: (<T, V extends SelectValue = SelectValue>(
-  props: CProps<ISelectProps<V> & T, ISelectContext, ISelectHandlers>,
-) => ReturnEl) & {
-  Trigger: (<T>(
-    props: Merge<
-      ComponentProps<typeof DropdownMenu.Trigger>,
-      ComponentProps<typeof ButtonTrigger>
-    > &
-      T,
-  ) => ReturnEl) & {
+declare const Select: IntergalacticSelectComponent & {
+  Trigger: Intergalactic.Component<
+    'div',
+    DropdownMenuTriggerProps & ButtonTriggerProps,
+    {},
+    [handlers: SelectHandlers]
+  > & {
     Addon: typeof ButtonTrigger.Addon;
     Text: typeof ButtonTrigger.Text;
   };
   Popper: typeof DropdownMenu.Popper;
   List: typeof DropdownMenu.List;
   Menu: typeof DropdownMenu.Menu;
-  Option: (<T>(
-    props: CProps<ISelectOptionProps & T, ISelectContext, ISelectHandlers>,
-  ) => ReturnEl) & {
+  Option: Intergalactic.Component<
+    'option',
+    SelectOptionProps,
+    SelectContext,
+    [handlers: SelectHandlers]
+  > & {
     Addon: typeof DropdownMenu.Item.Addon;
-    Checkbox: <T>(
-      props: CProps<IBoxProps & { theme?: string; selected?: boolean } & T>,
-    ) => ReturnEl;
+    Checkbox: Intergalactic.Component<'div', BoxProps & { theme?: string; selected?: boolean }>;
   };
   OptionTitle: typeof DropdownMenu.ItemTitle;
   OptionHint: typeof DropdownMenu.ItemHint;

package/package.json

@@ -1,25 +1,25 @@
 {
   "name": "@semcore/select",
   "description": "Semrush Select Component",
-  "version": "3.10.3",
+  "version": "4.0.0-beta.1",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
   "dependencies": {
-    "@semcore/base-trigger": "^3.0.0",
-    "@semcore/checkbox": "^6",
-    "@semcore/divider": "^3",
-    "@semcore/dropdown-menu": "^3.0.0",
-    "@semcore/flex-box": "^4",
-    "@semcore/icon": "2.16 - 3",
-    "@semcore/input": "^3.0.0",
-    "@semcore/utils": "^3.15",
+    "@semcore/base-trigger": "4.0.0-beta.1",
+    "@semcore/checkbox": "7.0.0-beta.1",
+    "@semcore/divider": "4.0.0-beta.1",
+    "@semcore/dropdown-menu": "4.0.0-beta.1",
+    "@semcore/flex-box": "5.0.0-beta.1",
+    "@semcore/icon": "4.0.0-beta.1",
+    "@semcore/input": "4.0.0-beta.1",
+    "@semcore/utils": "4.0.0-beta.1",
     "classnames": "2.2.6"
   },
   "peerDependencies": {
-    "@semcore/core": "^1.11",
+    "@semcore/core": "2.0.0-beta.1",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },
@@ -30,6 +30,7 @@
   },
   "devDependencies": {
     "@types/react": "18.0.21",
+    "@types/classnames": "2.2.6",
     "@guidepup/playwright": "0.6.1",
     "@playwright/test": "1.25.1",
     "@semcore/testing-utils": "1.0.0"