@hh.ru/magritte-ui-new-select 1.1.1 → 1.2.0

package/Select.d.ts

@@ -1,11 +1,13 @@
 import { ReactElement } from 'react';
 import { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';
+import { SelectOptions } from '@hh.ru/magritte-ui-new-select/SelectOptions';
 import { SelectSearchTrigger } from '@hh.ru/magritte-ui-new-select/SelectSearchTrigger';
 import { SelectTrigger } from '@hh.ru/magritte-ui-new-select/SelectTrigger';
 import { SelectProps } from '@hh.ru/magritte-ui-new-select/types';
 export interface SelectComponents {
     Trigger: typeof SelectTrigger;
     SearchTrigger: typeof SelectSearchTrigger;
+    Options: typeof SelectOptions;
 }
 declare const SelectRoot: <MultipleType extends boolean, DataType extends StaticDataFetcherItem>({ children, commitModel, dataProvider, error, errorTrls, hints, maxSelectedOptions, multiple, name, loading, onBlur: onBlurExternal, onChange: onChangeExternal, onFocus: onFocusExternal, onOptionsChange: onOptionsChangeExternal, options, value, }: SelectProps<MultipleType, DataType>) => ReactElement;
 declare const Select: typeof SelectRoot & SelectComponents;

package/Select.js

@@ -1,6 +1,7 @@
 import './index.css';
 import { jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
+import { SelectOptions } from './SelectOptions.js';
 import { SelectSearchTrigger } from './SelectSearchTrigger.js';
 import { SelectTrigger } from './SelectTrigger.js';
 import { ConfigProvider } from './internal/ConfigContext.js';
@@ -13,11 +14,18 @@ import { FocusOrchestratorProvider } from './internal/focusOrchestrator.js';
 import { SelectElementsSlotRegistryProvider } from './internal/slots.js';
 import { useEventCallback } from './internal/utils.js';
 import 'classnames';
+import './internal/Option.js';
+import '@hh.ru/magritte-common-keyboard';
 import '@hh.ru/magritte-common-use-disabled';
+import '@hh.ru/magritte-ui-cell';
+import '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
+import '@hh.ru/magritte-ui-icon/icon';
+import './internal/OptionControl.js';
+import '@hh.ru/magritte-ui-checkbox-radio';
+import '@hh.ru/magritte-ui-typography';
 import '@hh.ru/magritte-common-use-multiple-refs';
 import '@hh.ru/magritte-ui-input/BaseInput';
 import './useSelectTrigger.js';
-import '@hh.ru/magritte-common-keyboard';
 import '@hh.ru/magritte-ui-trigger';
 import './internal/useFocusWithin.js';
 import '@hh.ru/magritte-common-data-provider';
@@ -39,6 +47,7 @@ multiple, name, loading, onBlur: onBlurExternal, onChange: onChangeExternal, onF
 const Select = SelectRoot;
 Select.Trigger = SelectTrigger;
 Select.SearchTrigger = SelectSearchTrigger;
+Select.Options = SelectOptions;
 
 export { Select };
 //# sourceMappingURL=Select.js.map

package/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["src/Select.tsx"],"sourcesContent":["import { ReactElement, useState } from 'react';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport { SelectSearchTrigger } from '@hh.ru/magritte-ui-new-select/SelectSearchTrigger';\n// import { ApplyChangesButton } from '@hh.ru/magritte-ui-new-select/ApplyChangesButton';\n// import { ClearButton } from '@hh.ru/magritte-ui-new-select/ClearButton';\n// import { CloseBottomSheet } from '@hh.ru/magritte-ui-new-select/CloseBottomSheet';\n// import { Footer } from '@hh.ru/magritte-ui-new-select/Footer';\n// import { Header } from '@hh.ru/magritte-ui-new-select/Header';\n// import { Options } from '@hh.ru/magritte-ui-new-select/Options';\n// import { SelectBottomSheet } from '@hh.ru/magritte-ui-new-select/SelectBottomSheet';\n// import { SelectDrop } from '@hh.ru/magritte-ui-new-select/SelectDrop';\nimport { SelectTrigger } from '@hh.ru/magritte-ui-new-select/SelectTrigger';\nimport { ConfigProvider } from '@hh.ru/magritte-ui-new-select/internal/ConfigContext';\nimport { NavigationManagement } from '@hh.ru/magritte-ui-new-select/internal/NavigationManagement';\nimport { SearchStateProvider } from '@hh.ru/magritte-ui-new-select/internal/SearchStateContext';\nimport { SelectDataProvider } from '@hh.ru/magritte-ui-new-select/internal/SelectDataProvider';\nimport { SelectStateProvider } from '@hh.ru/magritte-ui-new-select/internal/SelectStateContext';\nimport { VisibilityProvider } from '@hh.ru/magritte-ui-new-select/internal/VisibilityContext';\nimport { FocusOrchestratorProvider } from '@hh.ru/magritte-ui-new-select/internal/focusOrchestrator';\nimport { SelectElementsSlotRegistryProvider } from '@hh.ru/magritte-ui-new-select/internal/slots';\nimport { useEventCallback } from '@hh.ru/magritte-ui-new-select/internal/utils';\nimport { SelectProps } from '@hh.ru/magritte-ui-new-select/types';\n\nexport interface SelectComponents {\n    Trigger: typeof SelectTrigger;\n    SearchTrigger: typeof SelectSearchTrigger;\n    // Options: typeof Options;\n    // Drop: typeof SelectDrop;\n    // BottomSheet: typeof SelectBottomSheet;\n    // ApplyChangesButton: typeof ApplyChangesButton;\n    // ClearButton: typeof ClearButton;\n    // Footer: typeof Footer;\n    // Header: typeof Header;\n    // CloseBottomSheet: typeof CloseBottomSheet;\n}\n\nconst SelectRoot = <MultipleType extends boolean, DataType extends StaticDataFetcherItem>({\n    children,\n    commitModel = 'instant',\n    dataProvider,\n    error,\n    errorTrls,\n    hints,\n    maxSelectedOptions,\n    // TODO commitModel === multiple?\n    multiple,\n    name,\n    loading,\n    onBlur: onBlurExternal,\n    onChange: onChangeExternal,\n    onFocus: onFocusExternal,\n    onOptionsChange: onOptionsChangeExternal,\n    options,\n    value,\n}: SelectProps<MultipleType, DataType>): ReactElement => {\n    const onBlur = useEventCallback(onBlurExternal);\n    const onFocus = useEventCallback(onFocusExternal);\n    const onChange = useEventCallback(onChangeExternal);\n    const onOptionsChange = useEventCallback(onOptionsChangeExternal);\n    const [showOptions, setShowOptions] = useState(false);\n    const [searchValue, setSearchValue] = useState('');\n    return (\n        <SelectElementsSlotRegistryProvider>\n            <ConfigProvider\n                maxSelectedOptions={maxSelectedOptions}\n                multiple={multiple}\n                name={name}\n                commitModel={commitModel}\n                loading={loading}\n            >\n                <VisibilityProvider showOptions={showOptions} setShowOptions={setShowOptions}>\n                    <SelectStateProvider<MultipleType, DataType> onChange={onChange} value={value}>\n                        <SearchStateProvider searchValue={searchValue} setSearchValue={setSearchValue}>\n                            <SelectDataProvider<DataType>\n                                dataProvider={dataProvider}\n                                error={error}\n                                errorTrls={errorTrls}\n                                hints={hints}\n                                options={options}\n                                onOptionsChange={onOptionsChange}\n                            >\n                                <FocusOrchestratorProvider>\n                                    <NavigationManagement onBlur={onBlur} onFocus={onFocus}>\n                                        {children}\n                                    </NavigationManagement>\n                                </FocusOrchestratorProvider>\n                            </SelectDataProvider>\n                        </SearchStateProvider>\n                    </SelectStateProvider>\n                </VisibilityProvider>\n            </ConfigProvider>\n        </SelectElementsSlotRegistryProvider>\n    );\n};\n\nconst Select = SelectRoot as typeof SelectRoot & SelectComponents;\n\nSelect.Trigger = SelectTrigger;\nSelect.SearchTrigger = SelectSearchTrigger;\n// Select.Options = Options;\n// Select.Drop = SelectDrop;\n// Select.BottomSheet = SelectBottomSheet;\n// Select.ApplyChangesButton = ApplyChangesButton;\n// Select.Footer = Footer;\n// Select.ClearButton = ClearButton;\n// Select.Header = Header;\n// Select.CloseBottomSheet = CloseBottomSheet;\n\nexport { Select };\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAM,UAAU,GAAG,CAAuE,EACtF,QAAQ,EACR,WAAW,GAAG,SAAS,EACvB,YAAY,EACZ,KAAK,EACL,SAAS,EACT,KAAK,EACL,kBAAkB;AAClB;AACA,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,MAAM,EAAE,cAAc,EACtB,QAAQ,EAAE,gBAAgB,EAC1B,OAAO,EAAE,eAAe,EACxB,eAAe,EAAE,uBAAuB,EACxC,OAAO,EACP,KAAK,GAC6B,KAAkB;AACpD,IAAA,MAAM,MAAM,GAAG,gBAAgB,CAAC,cAAc,CAAC,CAAC;AAChD,IAAA,MAAM,OAAO,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAC;AAClD,IAAA,MAAM,QAAQ,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;AACpD,IAAA,MAAM,eAAe,GAAG,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;IAClE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,QACIA,GAAC,CAAA,kCAAkC,EAC/B,EAAA,QAAA,EAAAA,GAAA,CAAC,cAAc,EACX,EAAA,kBAAkB,EAAE,kBAAkB,EACtC,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,YAEhBA,GAAC,CAAA,kBAAkB,EAAC,EAAA,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,cAAc,EAAA,QAAA,EACxEA,GAAC,CAAA,mBAAmB,IAAyB,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAA,QAAA,EACzEA,GAAC,CAAA,mBAAmB,EAAC,EAAA,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,cAAc,EAAA,QAAA,EACzEA,GAAC,CAAA,kBAAkB,IACf,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,eAAe,EAAA,QAAA,EAEhCA,GAAC,CAAA,yBAAyB,EACtB,EAAA,QAAA,EAAAA,GAAA,CAAC,oBAAoB,EAAC,EAAA,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAA,QAAA,EACjD,QAAQ,EAAA,CACU,EACC,CAAA,EAAA,CACX,EACH,CAAA,EAAA,CACJ,EACL,CAAA,EAAA,CACR,EACgB,CAAA,EACvC;AACN,CAAC,CAAC;AAEI,MAAA,MAAM,GAAG,WAAmD;AAElE,MAAM,CAAC,OAAO,GAAG,aAAa,CAAC;AAC/B,MAAM,CAAC,aAAa,GAAG,mBAAmB;;;;"}
+{"version":3,"file":"Select.js","sources":["src/Select.tsx"],"sourcesContent":["import { ReactElement, useState } from 'react';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport { SelectOptions } from '@hh.ru/magritte-ui-new-select/SelectOptions';\nimport { SelectSearchTrigger } from '@hh.ru/magritte-ui-new-select/SelectSearchTrigger';\n// import { ApplyChangesButton } from '@hh.ru/magritte-ui-new-select/ApplyChangesButton';\n// import { ClearButton } from '@hh.ru/magritte-ui-new-select/ClearButton';\n// import { CloseBottomSheet } from '@hh.ru/magritte-ui-new-select/CloseBottomSheet';\n// import { Footer } from '@hh.ru/magritte-ui-new-select/Footer';\n// import { Header } from '@hh.ru/magritte-ui-new-select/Header';\n// import { SelectBottomSheet } from '@hh.ru/magritte-ui-new-select/SelectBottomSheet';\n// import { SelectDrop } from '@hh.ru/magritte-ui-new-select/SelectDrop';\nimport { SelectTrigger } from '@hh.ru/magritte-ui-new-select/SelectTrigger';\nimport { ConfigProvider } from '@hh.ru/magritte-ui-new-select/internal/ConfigContext';\nimport { NavigationManagement } from '@hh.ru/magritte-ui-new-select/internal/NavigationManagement';\nimport { SearchStateProvider } from '@hh.ru/magritte-ui-new-select/internal/SearchStateContext';\nimport { SelectDataProvider } from '@hh.ru/magritte-ui-new-select/internal/SelectDataProvider';\nimport { SelectStateProvider } from '@hh.ru/magritte-ui-new-select/internal/SelectStateContext';\nimport { VisibilityProvider } from '@hh.ru/magritte-ui-new-select/internal/VisibilityContext';\nimport { FocusOrchestratorProvider } from '@hh.ru/magritte-ui-new-select/internal/focusOrchestrator';\nimport { SelectElementsSlotRegistryProvider } from '@hh.ru/magritte-ui-new-select/internal/slots';\nimport { useEventCallback } from '@hh.ru/magritte-ui-new-select/internal/utils';\nimport { SelectProps } from '@hh.ru/magritte-ui-new-select/types';\n\nexport interface SelectComponents {\n    Trigger: typeof SelectTrigger;\n    SearchTrigger: typeof SelectSearchTrigger;\n    Options: typeof SelectOptions;\n    // Drop: typeof SelectDrop;\n    // BottomSheet: typeof SelectBottomSheet;\n    // ApplyChangesButton: typeof ApplyChangesButton;\n    // ClearButton: typeof ClearButton;\n    // Footer: typeof Footer;\n    // Header: typeof Header;\n    // CloseBottomSheet: typeof CloseBottomSheet;\n}\n\nconst SelectRoot = <MultipleType extends boolean, DataType extends StaticDataFetcherItem>({\n    children,\n    commitModel = 'instant',\n    dataProvider,\n    error,\n    errorTrls,\n    hints,\n    maxSelectedOptions,\n    // TODO commitModel === multiple?\n    multiple,\n    name,\n    loading,\n    onBlur: onBlurExternal,\n    onChange: onChangeExternal,\n    onFocus: onFocusExternal,\n    onOptionsChange: onOptionsChangeExternal,\n    options,\n    value,\n}: SelectProps<MultipleType, DataType>): ReactElement => {\n    const onBlur = useEventCallback(onBlurExternal);\n    const onFocus = useEventCallback(onFocusExternal);\n    const onChange = useEventCallback(onChangeExternal);\n    const onOptionsChange = useEventCallback(onOptionsChangeExternal);\n    const [showOptions, setShowOptions] = useState(false);\n    const [searchValue, setSearchValue] = useState('');\n    return (\n        <SelectElementsSlotRegistryProvider>\n            <ConfigProvider\n                maxSelectedOptions={maxSelectedOptions}\n                multiple={multiple}\n                name={name}\n                commitModel={commitModel}\n                loading={loading}\n            >\n                <VisibilityProvider showOptions={showOptions} setShowOptions={setShowOptions}>\n                    <SelectStateProvider<MultipleType, DataType> onChange={onChange} value={value}>\n                        <SearchStateProvider searchValue={searchValue} setSearchValue={setSearchValue}>\n                            <SelectDataProvider<DataType>\n                                dataProvider={dataProvider}\n                                error={error}\n                                errorTrls={errorTrls}\n                                hints={hints}\n                                options={options}\n                                onOptionsChange={onOptionsChange}\n                            >\n                                <FocusOrchestratorProvider>\n                                    <NavigationManagement onBlur={onBlur} onFocus={onFocus}>\n                                        {children}\n                                    </NavigationManagement>\n                                </FocusOrchestratorProvider>\n                            </SelectDataProvider>\n                        </SearchStateProvider>\n                    </SelectStateProvider>\n                </VisibilityProvider>\n            </ConfigProvider>\n        </SelectElementsSlotRegistryProvider>\n    );\n};\n\nconst Select = SelectRoot as typeof SelectRoot & SelectComponents;\n\nSelect.Trigger = SelectTrigger;\nSelect.SearchTrigger = SelectSearchTrigger;\nSelect.Options = SelectOptions;\n// Select.Drop = SelectDrop;\n// Select.BottomSheet = SelectBottomSheet;\n// Select.ApplyChangesButton = ApplyChangesButton;\n// Select.Footer = Footer;\n// Select.ClearButton = ClearButton;\n// Select.Header = Header;\n// Select.CloseBottomSheet = CloseBottomSheet;\n\nexport { Select };\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAM,UAAU,GAAG,CAAuE,EACtF,QAAQ,EACR,WAAW,GAAG,SAAS,EACvB,YAAY,EACZ,KAAK,EACL,SAAS,EACT,KAAK,EACL,kBAAkB;AAClB;AACA,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,MAAM,EAAE,cAAc,EACtB,QAAQ,EAAE,gBAAgB,EAC1B,OAAO,EAAE,eAAe,EACxB,eAAe,EAAE,uBAAuB,EACxC,OAAO,EACP,KAAK,GAC6B,KAAkB;AACpD,IAAA,MAAM,MAAM,GAAG,gBAAgB,CAAC,cAAc,CAAC,CAAC;AAChD,IAAA,MAAM,OAAO,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAC;AAClD,IAAA,MAAM,QAAQ,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;AACpD,IAAA,MAAM,eAAe,GAAG,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;IAClE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,QACIA,GAAC,CAAA,kCAAkC,EAC/B,EAAA,QAAA,EAAAA,GAAA,CAAC,cAAc,EACX,EAAA,kBAAkB,EAAE,kBAAkB,EACtC,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,YAEhBA,GAAC,CAAA,kBAAkB,EAAC,EAAA,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,cAAc,EAAA,QAAA,EACxEA,GAAC,CAAA,mBAAmB,IAAyB,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAA,QAAA,EACzEA,GAAC,CAAA,mBAAmB,EAAC,EAAA,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,cAAc,EAAA,QAAA,EACzEA,GAAC,CAAA,kBAAkB,IACf,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,eAAe,EAAA,QAAA,EAEhCA,GAAC,CAAA,yBAAyB,EACtB,EAAA,QAAA,EAAAA,GAAA,CAAC,oBAAoB,EAAC,EAAA,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAA,QAAA,EACjD,QAAQ,EAAA,CACU,EACC,CAAA,EAAA,CACX,EACH,CAAA,EAAA,CACJ,EACL,CAAA,EAAA,CACR,EACgB,CAAA,EACvC;AACN,CAAC,CAAC;AAEI,MAAA,MAAM,GAAG,WAAmD;AAElE,MAAM,CAAC,OAAO,GAAG,aAAa,CAAC;AAC/B,MAAM,CAAC,aAAa,GAAG,mBAAmB,CAAC;AAC3C,MAAM,CAAC,OAAO,GAAG,aAAa;;;;"}

package/SelectOptions.d.ts

@@ -0,0 +1,15 @@
+import { type ReactElement, CSSProperties } from 'react';
+import { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';
+import { OptionCustomLayoutComponent } from '@hh.ru/magritte-ui-new-select/internal/Option';
+import { SelectOptionType } from '@hh.ru/magritte-ui-new-select/types';
+export interface OptionsProps<DataType extends StaticDataFetcherItem> {
+    type?: SelectOptionType;
+    plain?: boolean;
+    optionLayoutComponent?: OptionCustomLayoutComponent<DataType>;
+    'data-qa'?: string;
+    className?: string;
+    /** Обработчик события выбора option */
+    onOptionSelect?: (values: readonly DataType[]) => void;
+    inlineStyle?: CSSProperties;
+}
+export declare const SelectOptions: <DataType extends StaticDataFetcherItem>({ type, plain, className, inlineStyle, optionLayoutComponent, onOptionSelect: onOptionSelectExternal, "data-qa": dataQa, }: OptionsProps<DataType>) => ReactElement;

package/SelectOptions.js

@@ -0,0 +1,68 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import { useId, useCallback } from 'react';
+import classnames from 'classnames';
+import { useSelectConfig } from './internal/ConfigContext.js';
+import { Option, OptionLayoutComponentDefault } from './internal/Option.js';
+import { useDataProvider } from './internal/SelectDataProvider.js';
+import { useSelectStore, useSelected } from './internal/SelectStateContext.js';
+import { useVisibility } from './internal/VisibilityContext.js';
+import { useFocusOrchestrator } from './internal/focusOrchestrator.js';
+import { useRegisterSelectElementsSlot } from './internal/slots.js';
+import { useEventCallback, extractValues, getChecked } from './internal/utils.js';
+import '@hh.ru/magritte-common-keyboard';
+import '@hh.ru/magritte-common-use-disabled';
+import '@hh.ru/magritte-ui-cell';
+import '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
+import '@hh.ru/magritte-ui-icon/icon';
+import './internal/OptionControl.js';
+import '@hh.ru/magritte-ui-checkbox-radio';
+import '@hh.ru/magritte-ui-typography';
+import '@hh.ru/magritte-common-data-provider';
+import './internal/useDataProvider.js';
+import './internal/SearchStateContext.js';
+import './internal/SelectStore.js';
+import '@hh.ru/magritte-internal-slot-registry';
+
+var styles = {"options":"magritte-options___8OD3d_1-2-0","options_plain":"magritte-options_plain___Wp-nU_1-2-0","optionsPlain":"magritte-options_plain___Wp-nU_1-2-0"};
+
+const SelectOptions = ({ type = 'checkbox', plain, className, inlineStyle, optionLayoutComponent = OptionLayoutComponentDefault, onOptionSelect: onOptionSelectExternal, 'data-qa': dataQa, }) => {
+    const listId = useId();
+    const { toggleListVisibility } = useVisibility();
+    const { maxSelectedOptions, multiple, name, commitModel } = useSelectConfig();
+    // TODO регать draft store в пикере и тут получать
+    const selectStore = useSelectStore();
+    const selected = useSelected(selectStore);
+    const { optionList } = useDataProvider();
+    const orchestrator = useFocusOrchestrator();
+    const onOptionSelect = useEventCallback(onOptionSelectExternal);
+    const isLimitExceeded = maxSelectedOptions !== undefined && selected.length >= maxSelectedOptions;
+    useRegisterSelectElementsSlot('plain', plain);
+    const onChangeOption = useCallback((selectedItem) => {
+        if (extractValues(selected).includes(selectedItem.value)) {
+            selectStore.remove(selectedItem.value);
+        }
+        else if (multiple) {
+            selectStore.add(selectedItem);
+        }
+        else {
+            selectStore.replace([selectedItem]);
+        }
+        if (commitModel === 'instant' && !multiple) {
+            toggleListVisibility(false);
+        }
+        if (commitModel === 'confirm') {
+            // TODO focus or focus+select?
+            orchestrator.yieldFocus();
+        }
+        onOptionSelect?.(selectStore.getSnapshot());
+    }, [commitModel, multiple, orchestrator, selectStore, selected, toggleListVisibility, onOptionSelect]);
+    return (jsx("div", { id: listId, className: classnames(styles.options, { [styles.optionsPlain]: plain }, className), "data-qa": "magritte-select-option-list", style: inlineStyle, children: optionList.map((option) => {
+            const checked = Boolean(option.data && getChecked(option.data, selected));
+            const disabled = !checked && (option.disabled || isLimitExceeded);
+            return (jsx(Option, { name: name, checked: checked, onChange: onChangeOption, optionLayoutComponent: optionLayoutComponent, disabled: disabled, type: option.type || type, plain: !!plain, multiple: multiple, "data-qa": dataQa, data: option.data }, option.data.value));
+        }) }));
+};
+
+export { SelectOptions };
+//# sourceMappingURL=SelectOptions.js.map

package/SelectOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOptions.js","sources":["src/SelectOptions.tsx"],"sourcesContent":["import { type ReactElement, useId, CSSProperties, useCallback } from 'react';\nimport classnames from 'classnames';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport { useSelectConfig } from '@hh.ru/magritte-ui-new-select/internal/ConfigContext';\nimport {\n    OptionLayoutComponentDefault,\n    OptionCustomLayoutComponent,\n    Option,\n} from '@hh.ru/magritte-ui-new-select/internal/Option';\nimport { OnChangeAction } from '@hh.ru/magritte-ui-new-select/internal/OptionControl';\nimport { useDataProvider } from '@hh.ru/magritte-ui-new-select/internal/SelectDataProvider';\nimport { useSelectStore, useSelected } from '@hh.ru/magritte-ui-new-select/internal/SelectStateContext';\nimport { useVisibility } from '@hh.ru/magritte-ui-new-select/internal/VisibilityContext';\nimport { useFocusOrchestrator } from '@hh.ru/magritte-ui-new-select/internal/focusOrchestrator';\nimport { useRegisterSelectElementsSlot } from '@hh.ru/magritte-ui-new-select/internal/slots';\nimport { getChecked, extractValues, useEventCallback } from '@hh.ru/magritte-ui-new-select/internal/utils';\nimport { SelectOptionType } from '@hh.ru/magritte-ui-new-select/types';\n\nimport styles from './select-options.less';\n\nexport interface OptionsProps<DataType extends StaticDataFetcherItem> {\n    type?: SelectOptionType;\n    plain?: boolean;\n    optionLayoutComponent?: OptionCustomLayoutComponent<DataType>;\n    'data-qa'?: string;\n    className?: string;\n    /** Обработчик события выбора option */\n    onOptionSelect?: (values: readonly DataType[]) => void;\n    inlineStyle?: CSSProperties;\n}\n\nexport const SelectOptions = <DataType extends StaticDataFetcherItem>({\n    type = 'checkbox',\n    plain,\n    className,\n    inlineStyle,\n    optionLayoutComponent = OptionLayoutComponentDefault,\n    onOptionSelect: onOptionSelectExternal,\n    'data-qa': dataQa,\n}: OptionsProps<DataType>): ReactElement => {\n    const listId = useId();\n    const { toggleListVisibility } = useVisibility();\n    const { maxSelectedOptions, multiple, name, commitModel } = useSelectConfig();\n    // TODO регать draft store в пикере и тут получать\n    const selectStore = useSelectStore<DataType>();\n    const selected = useSelected<DataType>(selectStore);\n    const { optionList } = useDataProvider<DataType>();\n    const orchestrator = useFocusOrchestrator();\n    const onOptionSelect = useEventCallback(onOptionSelectExternal);\n    const isLimitExceeded = maxSelectedOptions !== undefined && selected.length >= maxSelectedOptions;\n    useRegisterSelectElementsSlot('plain', plain);\n\n    const onChangeOption = useCallback<OnChangeAction<DataType>>(\n        (selectedItem) => {\n            if (extractValues(selected).includes(selectedItem.value)) {\n                selectStore.remove(selectedItem.value);\n            } else if (multiple) {\n                selectStore.add(selectedItem);\n            } else {\n                selectStore.replace([selectedItem]);\n            }\n            if (commitModel === 'instant' && !multiple) {\n                toggleListVisibility(false);\n            }\n            if (commitModel === 'confirm') {\n                // TODO focus or focus+select?\n                orchestrator.yieldFocus();\n            }\n            onOptionSelect?.(selectStore.getSnapshot());\n        },\n        [commitModel, multiple, orchestrator, selectStore, selected, toggleListVisibility, onOptionSelect]\n    );\n\n    return (\n        <div\n            id={listId}\n            className={classnames(styles.options, { [styles.optionsPlain]: plain }, className)}\n            data-qa=\"magritte-select-option-list\"\n            style={inlineStyle}\n            // TODO role + aria-multiselectable\n        >\n            {optionList.map((option) => {\n                const checked = Boolean(option.data && getChecked(option.data, selected));\n                const disabled = !checked && (option.disabled || isLimitExceeded);\n                return (\n                    <Option\n                        key={option.data.value}\n                        name={name}\n                        checked={checked}\n                        onChange={onChangeOption}\n                        optionLayoutComponent={optionLayoutComponent}\n                        disabled={disabled}\n                        type={option.type || type}\n                        plain={!!plain}\n                        multiple={multiple}\n                        data-qa={dataQa}\n                        data={option.data}\n                    />\n                );\n            })}\n        </div>\n    );\n};\n"],"names":["_jsx"],"mappings":"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"}

package/SelectSearchTrigger.js

@@ -21,7 +21,7 @@ import './internal/SelectStore.js';
 import './internal/slots.js';
 import '@hh.ru/magritte-internal-slot-registry';
 
-var styles = {"anchor":"magritte-anchor___IFvZk_1-1-1","anchor-stretched":"magritte-anchor-stretched___L14B-_1-1-1","anchorStretched":"magritte-anchor-stretched___L14B-_1-1-1","default-view":"magritte-default-view___oT4uN_1-1-1","defaultView":"magritte-default-view___oT4uN_1-1-1","input-view":"magritte-input-view___TCeV4_1-1-1","inputView":"magritte-input-view___TCeV4_1-1-1","hidden-view":"magritte-hidden-view___oJ4OI_1-1-1","hiddenView":"magritte-hidden-view___oJ4OI_1-1-1"};
+var styles = {"anchor":"magritte-anchor___IFvZk_1-2-0","anchor-stretched":"magritte-anchor-stretched___L14B-_1-2-0","anchorStretched":"magritte-anchor-stretched___L14B-_1-2-0","default-view":"magritte-default-view___oT4uN_1-2-0","defaultView":"magritte-default-view___oT4uN_1-2-0","input-view":"magritte-input-view___TCeV4_1-2-0","inputView":"magritte-input-view___TCeV4_1-2-0","hidden-view":"magritte-hidden-view___oJ4OI_1-2-0","hiddenView":"magritte-hidden-view___oJ4OI_1-2-0"};
 
 const SelectSearchTriggerComponent = ({ 'aria-label': ariaLabel, 'data-qa': dataQa = 'magritte-select-input-activator', disabled, size, maxWidth, stretched, ...triggerProps }, ref) => {
     const [useSearchInput, setUseSearchInput] = useState(false);

package/index.css

@@ -1,14 +1,58 @@
-.magritte-anchor___IFvZk_1-1-1{
+.magritte-select-option-plain___B31iR_1-2-0{
+  border-radius:8px;
+}
+.magritte-select-option-plain___B31iR_1-2-0.focus-visible{
+  outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v24-7-3) solid 4px;
+}
+@media (min-width: 1020px){
+  body.magritte-old-layout .magritte-select-option-plain___B31iR_1-2-0:hover{
+    cursor:default;
+  }
+}
+@media (min-width: 1024px){
+  body:not(.magritte-old-layout) .magritte-select-option-plain___B31iR_1-2-0:hover{
+    cursor:default;
+  }
+}
+@media (min-width: 1020px){
+  body.magritte-old-layout .magritte-select-option-plain_active___uIVGr_1-2-0:hover{
+    cursor:pointer;
+  }
+}
+@media (min-width: 1024px){
+  body:not(.magritte-old-layout) .magritte-select-option-plain_active___uIVGr_1-2-0:hover{
+    cursor:pointer;
+  }
+}
+.magritte-select-label-option___Qs4Fd_1-2-0{
+  display:flex;
+  justify-content:center;
+}
+.magritte-select-delimiter___rr-59_1-2-0{
+  padding-left:16px;
+  padding-top:12px;
+}
+
+.magritte-options___8OD3d_1-2-0{
+  display:flex;
+  flex-direction:column;
+  gap:8px;
+}
+.magritte-options_plain___Wp-nU_1-2-0{
+  gap:16px;
+}
+
+.magritte-anchor___IFvZk_1-2-0{
   position:relative;
   width:fit-content;
 }
-.magritte-anchor-stretched___L14B-_1-1-1{
+.magritte-anchor-stretched___L14B-_1-2-0{
   width:100%;
 }
-.magritte-default-view___oT4uN_1-1-1{
+.magritte-default-view___oT4uN_1-2-0{
   min-width:0;
 }
-.magritte-input-view___TCeV4_1-1-1{
+.magritte-input-view___TCeV4_1-2-0{
   position:absolute;
   top:0;
   left:0;
@@ -16,10 +60,10 @@
   display:flex;
   min-width:0;
 }
-.magritte-hidden-view___oJ4OI_1-1-1{
+.magritte-hidden-view___oJ4OI_1-2-0{
   visibility:hidden;
 }
 
-.magritte-select-layout___MIlpQ_1-1-1{
+.magritte-select-layout___MIlpQ_1-2-0{
   display:contents;
 }

package/index.d.ts

@@ -1,2 +1,3 @@
 export { Select } from '@hh.ru/magritte-ui-new-select/Select';
 export { useSelectTrigger, useTriggerRef } from '@hh.ru/magritte-ui-new-select/useSelectTrigger';
+export type { OptionCustomLayoutComponent } from '@hh.ru/magritte-ui-new-select/internal/Option';

package/index.js

@@ -3,26 +3,34 @@ export { Select } from './Select.js';
 export { useSelectTrigger, useTriggerRef } from './useSelectTrigger.js';
 import 'react/jsx-runtime';
 import 'react';
-import './SelectSearchTrigger.js';
+import './SelectOptions.js';
 import 'classnames';
-import '@hh.ru/magritte-common-use-disabled';
-import '@hh.ru/magritte-common-use-multiple-refs';
-import '@hh.ru/magritte-ui-input/BaseInput';
-import './internal/SearchStateContext.js';
+import './internal/ConfigContext.js';
 import './internal/utils.js';
 import '@hh.ru/magritte-common-keyboard';
-import './internal/focusOrchestrator.js';
-import '@hh.ru/magritte-ui-trigger';
-import './SelectTrigger.js';
-import './internal/ConfigContext.js';
-import './internal/NavigationManagement.js';
-import './internal/slots.js';
-import '@hh.ru/magritte-internal-slot-registry';
-import './internal/useFocusWithin.js';
+import './internal/Option.js';
+import '@hh.ru/magritte-common-use-disabled';
+import '@hh.ru/magritte-ui-cell';
+import '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
+import '@hh.ru/magritte-ui-icon/icon';
+import './internal/OptionControl.js';
+import '@hh.ru/magritte-ui-checkbox-radio';
+import '@hh.ru/magritte-ui-typography';
 import './internal/SelectDataProvider.js';
 import '@hh.ru/magritte-common-data-provider';
 import './internal/useDataProvider.js';
+import './internal/SearchStateContext.js';
 import './internal/VisibilityContext.js';
 import './internal/SelectStateContext.js';
 import './internal/SelectStore.js';
+import './internal/focusOrchestrator.js';
+import './internal/slots.js';
+import '@hh.ru/magritte-internal-slot-registry';
+import './SelectSearchTrigger.js';
+import '@hh.ru/magritte-common-use-multiple-refs';
+import '@hh.ru/magritte-ui-input/BaseInput';
+import '@hh.ru/magritte-ui-trigger';
+import './SelectTrigger.js';
+import './internal/NavigationManagement.js';
+import './internal/useFocusWithin.js';
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/internal/NavigationManagement.js

@@ -8,7 +8,7 @@ import './utils.js';
 import '@hh.ru/magritte-common-keyboard';
 import '@hh.ru/magritte-internal-slot-registry';
 
-var styles = {"select-layout":"magritte-select-layout___MIlpQ_1-1-1","selectLayout":"magritte-select-layout___MIlpQ_1-1-1"};
+var styles = {"select-layout":"magritte-select-layout___MIlpQ_1-2-0","selectLayout":"magritte-select-layout___MIlpQ_1-2-0"};
 
 const NavigationManagement = ({ children, onFocus, onBlur }) => {
     const focusOrchestrator = useFocusOrchestrator();

package/internal/Option.d.ts

@@ -0,0 +1,26 @@
+import { type ComponentType, type ReactElement } from 'react';
+import { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';
+import { OnChangeAction } from '@hh.ru/magritte-ui-new-select/internal/OptionControl';
+import { SelectOptionType, DelimiterOptionType } from '@hh.ru/magritte-ui-new-select/types';
+type OptionCustomLayoutBaseProps<DataType extends StaticDataFetcherItem> = Pick<OptionProps<DataType>, 'data' | 'plain' | 'checked' | 'isMobile' | 'disabled' | 'onChange' | 'multiple'>;
+export type OptionCustomLayoutProps<DataType extends StaticDataFetcherItem> = OptionCustomLayoutBaseProps<DataType> & {
+    type: SelectOptionType | DelimiterOptionType;
+    input?: ReactElement;
+};
+export type OptionCustomLayoutComponent<DataType extends StaticDataFetcherItem> = ComponentType<OptionCustomLayoutProps<DataType>>;
+interface OptionProps<DataType extends StaticDataFetcherItem> {
+    disabled?: boolean;
+    data: DataType;
+    checked: boolean;
+    name?: string;
+    type: SelectOptionType | DelimiterOptionType;
+    optionLayoutComponent: OptionCustomLayoutComponent<DataType>;
+    onChange: OnChangeAction<DataType>;
+    plain: boolean;
+    multiple?: boolean;
+    isMobile?: boolean;
+    'data-qa'?: string;
+}
+export declare const OptionLayoutComponentDefault: <DataType extends StaticDataFetcherItem>({ data, type, plain, checked, isMobile, input, }: OptionCustomLayoutProps<DataType>) => ReactElement;
+export declare const Option: <DataType extends StaticDataFetcherItem>({ checked, name, disabled, optionLayoutComponent: OptionLayoutComponent, type, onChange, plain, data, multiple, isMobile, "data-qa": dataQa, }: OptionProps<DataType>) => ReactElement;
+export {};

package/internal/Option.js

@@ -0,0 +1,70 @@
+import './../index.css';
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import classnames from 'classnames';
+import { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
+import { DisabledContext } from '@hh.ru/magritte-common-use-disabled';
+import { CellText, Cell } from '@hh.ru/magritte-ui-cell';
+import { CheckableCardElement } from '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
+import { CheckOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
+import { OptionControl } from './OptionControl.js';
+import { Text } from '@hh.ru/magritte-ui-typography';
+import '@hh.ru/magritte-ui-checkbox-radio';
+
+var styles = {"select-option-plain":"magritte-select-option-plain___B31iR_1-2-0","selectOptionPlain":"magritte-select-option-plain___B31iR_1-2-0","select-option-plain_active":"magritte-select-option-plain_active___uIVGr_1-2-0","selectOptionPlainActive":"magritte-select-option-plain_active___uIVGr_1-2-0","select-label-option":"magritte-select-label-option___Qs4Fd_1-2-0","selectLabelOption":"magritte-select-label-option___Qs4Fd_1-2-0","select-delimiter":"magritte-select-delimiter___rr-59_1-2-0","selectDelimiter":"magritte-select-delimiter___rr-59_1-2-0"};
+
+const OptionLayoutComponentDefault = ({ data, type, plain, checked, isMobile, input, }) => {
+    if (type === 'delimiter') {
+        return (jsx(CellText, { maxLines: 1, style: "secondary", children: data.text }));
+    }
+    if (type === 'label') {
+        return (jsx(Cell, { Element: "div", right: checked && plain ? jsx(CheckOutlinedSize24, {}) : undefined, vertPadding: isMobile, children: jsx("div", { className: classnames({ [styles.selectLabelOption]: !plain }), children: jsx(CellText, { maxLines: 1, children: data.text }) }) }));
+    }
+    return (jsx(Cell, { Element: "div", align: "center", left: isMobile ? undefined : input, right: isMobile ? input : undefined, children: jsx(CellText, { maxLines: 1, children: data.text }) }));
+};
+const Option = ({ checked, name, disabled, optionLayoutComponent: OptionLayoutComponent, type, onChange, plain, data, multiple, isMobile, 'data-qa': dataQa, }) => {
+    const [focusVisible, setFocusVisible] = useState(false);
+    if (type === 'delimiter') {
+        return (jsx("div", { className: classnames({ [styles.selectDelimiter]: !plain }), children: jsx(Text, { typography: "label-3-regular", children: jsx(OptionLayoutComponent, { data: data, type: type, plain: plain, checked: checked, isMobile: isMobile, disabled: disabled, onChange: onChange, multiple: multiple }) }) }));
+    }
+    const optionLayoutComponentProps = {
+        data,
+        input: (jsx(OptionControl, { type: type, data: data, checked: checked, name: name, onChange: onChange, "data-qa": dataQa })),
+        type,
+        plain,
+        checked,
+        isMobile,
+        disabled,
+        onChange,
+        multiple,
+    };
+    if (plain) {
+        return (jsx("div", { className: classnames(styles.selectOptionPlain, { [styles.selectOptionPlainActive]: !disabled }), "data-qa": `magritte-select-option-${data.value}`, "data-magritte-select-option": data.value, role: "option", "aria-selected": checked, tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, onClick: () => {
+                if (disabled) {
+                    return;
+                }
+                onChange(data);
+            }, onKeyDown: (event) => {
+                if (disabled) {
+                    return;
+                }
+                if (keyboardMatches(event.nativeEvent, [keyboardKeys.Enter, keyboardKeys.Space])) {
+                    onChange(data);
+                }
+            }, children: jsx(DisabledContext.Provider, { value: !!disabled, children: jsx(OptionLayoutComponent, { ...optionLayoutComponentProps }) }) }));
+    }
+    return (jsx(CheckableCardElement, { Element: "label", role: "option", padding: 16, borderRadius: 12, flexible: false, checked: checked, "data-magritte-select-option": data.value, focusVisible: focusVisible, "data-qa": `magritte-select-option-${data.value}`, disabled: disabled, "aria-selected": checked, toneHover: true, onClick: () => {
+            if (type === 'label' && !disabled) {
+                onChange(data);
+            }
+        }, onKeyDown: (event) => {
+            if (keyboardMatches(event.nativeEvent, [keyboardKeys.Enter, keyboardKeys.Space])) {
+                onChange(data);
+                event.preventDefault();
+                setFocusVisible(true);
+            }
+        }, onBlur: () => setFocusVisible(false), children: jsx(OptionLayoutComponent, { ...optionLayoutComponentProps }) }));
+};
+
+export { Option, OptionLayoutComponentDefault };
+//# sourceMappingURL=Option.js.map

package/internal/Option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Option.js","sources":["src/internal/Option.tsx"],"sourcesContent":["import { type ComponentType, type ReactElement, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';\nimport { DisabledContext } from '@hh.ru/magritte-common-use-disabled';\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { CheckableCardElement } from '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';\nimport { CheckOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { OptionControl, OnChangeAction } from '@hh.ru/magritte-ui-new-select/internal/OptionControl';\nimport { SelectOptionType, DelimiterOptionType } from '@hh.ru/magritte-ui-new-select/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './option.less';\n\ntype OptionCustomLayoutBaseProps<DataType extends StaticDataFetcherItem> = Pick<\n    OptionProps<DataType>,\n    'data' | 'plain' | 'checked' | 'isMobile' | 'disabled' | 'onChange' | 'multiple'\n>;\n\n// для delimiter input не создается, но delimiter через рендер компонент пропустить нужно\nexport type OptionCustomLayoutProps<DataType extends StaticDataFetcherItem> = OptionCustomLayoutBaseProps<DataType> & {\n    type: SelectOptionType | DelimiterOptionType;\n    input?: ReactElement;\n};\n\nexport type OptionCustomLayoutComponent<DataType extends StaticDataFetcherItem> = ComponentType<\n    OptionCustomLayoutProps<DataType>\n>;\n\ninterface OptionProps<DataType extends StaticDataFetcherItem> {\n    disabled?: boolean;\n    data: DataType;\n    checked: boolean;\n    name?: string;\n    type: SelectOptionType | DelimiterOptionType;\n    optionLayoutComponent: OptionCustomLayoutComponent<DataType>;\n    onChange: OnChangeAction<DataType>;\n    plain: boolean;\n    multiple?: boolean;\n    isMobile?: boolean;\n    'data-qa'?: string;\n}\n\nexport const OptionLayoutComponentDefault = <DataType extends StaticDataFetcherItem>({\n    data,\n    type,\n    plain,\n    checked,\n    isMobile,\n    input,\n}: OptionCustomLayoutProps<DataType>): ReactElement => {\n    if (type === 'delimiter') {\n        return (\n            <CellText maxLines={1} style=\"secondary\">\n                {data.text}\n            </CellText>\n        );\n    }\n\n    if (type === 'label') {\n        return (\n            <Cell Element=\"div\" right={checked && plain ? <CheckOutlinedSize24 /> : undefined} vertPadding={isMobile}>\n                <div className={classnames({ [styles.selectLabelOption]: !plain })}>\n                    <CellText maxLines={1}>{data.text}</CellText>\n                </div>\n            </Cell>\n        );\n    }\n\n    return (\n        <Cell Element=\"div\" align=\"center\" left={isMobile ? undefined : input} right={isMobile ? input : undefined}>\n            <CellText maxLines={1}>{data.text}</CellText>\n        </Cell>\n    );\n};\n\nexport const Option = <DataType extends StaticDataFetcherItem>({\n    checked,\n    name,\n    disabled,\n    optionLayoutComponent: OptionLayoutComponent,\n    type,\n    onChange,\n    plain,\n    data,\n    multiple,\n    isMobile,\n    'data-qa': dataQa,\n}: OptionProps<DataType>): ReactElement => {\n    const [focusVisible, setFocusVisible] = useState(false);\n\n    if (type === 'delimiter') {\n        return (\n            <div className={classnames({ [styles.selectDelimiter]: !plain })}>\n                <Text typography=\"label-3-regular\">\n                    <OptionLayoutComponent\n                        data={data}\n                        type={type}\n                        plain={plain}\n                        checked={checked}\n                        isMobile={isMobile}\n                        disabled={disabled}\n                        onChange={onChange}\n                        multiple={multiple}\n                    />\n                </Text>\n            </div>\n        );\n    }\n\n    const optionLayoutComponentProps = {\n        data,\n        input: (\n            <OptionControl type={type} data={data} checked={checked} name={name} onChange={onChange} data-qa={dataQa} />\n        ),\n        type,\n        plain,\n        checked,\n        isMobile,\n        disabled,\n        onChange,\n        multiple,\n    };\n\n    if (plain) {\n        return (\n            <div\n                className={classnames(styles.selectOptionPlain, { [styles.selectOptionPlainActive]: !disabled })}\n                data-qa={`magritte-select-option-${data.value}`}\n                data-magritte-select-option={data.value}\n                role=\"option\"\n                aria-selected={checked}\n                tabIndex={disabled ? -1 : 0}\n                aria-disabled={disabled}\n                onClick={() => {\n                    if (disabled) {\n                        return;\n                    }\n                    onChange(data);\n                }}\n                onKeyDown={(event) => {\n                    if (disabled) {\n                        return;\n                    }\n                    if (keyboardMatches(event.nativeEvent, [keyboardKeys.Enter, keyboardKeys.Space])) {\n                        onChange(data);\n                    }\n                }}\n            >\n                <DisabledContext.Provider value={!!disabled}>\n                    <OptionLayoutComponent {...optionLayoutComponentProps} />\n                </DisabledContext.Provider>\n            </div>\n        );\n    }\n    return (\n        <CheckableCardElement\n            Element=\"label\"\n            role=\"option\"\n            padding={16}\n            borderRadius={12}\n            flexible={false}\n            checked={checked}\n            data-magritte-select-option={data.value}\n            focusVisible={focusVisible}\n            data-qa={`magritte-select-option-${data.value}`}\n            disabled={disabled}\n            aria-selected={checked}\n            toneHover\n            onClick={() => {\n                if (type === 'label' && !disabled) {\n                    onChange(data);\n                }\n            }}\n            onKeyDown={(event) => {\n                if (keyboardMatches(event.nativeEvent, [keyboardKeys.Enter, keyboardKeys.Space])) {\n                    onChange(data);\n                    event.preventDefault();\n                    setFocusVisible(true);\n                }\n            }}\n            onBlur={() => setFocusVisible(false)}\n        >\n            <OptionLayoutComponent {...optionLayoutComponentProps} />\n        </CheckableCardElement>\n    );\n};\n"],"names":["_jsx"],"mappings":"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"}

package/internal/OptionControl.d.ts

@@ -0,0 +1,18 @@
+import { type ReactElement } from 'react';
+import { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';
+import { SelectOptionType } from '@hh.ru/magritte-ui-new-select/types';
+export interface OnChangeAction<DataType extends StaticDataFetcherItem> {
+    (value: DataType): void;
+}
+export interface OptionControlProps<DataType extends StaticDataFetcherItem> {
+    type: SelectOptionType;
+    data: DataType;
+    checked: boolean;
+    name?: string;
+    onChange: OnChangeAction<DataType>;
+    'data-qa'?: string;
+}
+export declare const OptionControl: {
+    <DataType extends StaticDataFetcherItem>({ type, data, checked, name, onChange, "data-qa": dataQa, }: OptionControlProps<DataType>): ReactElement;
+    displayName: string;
+};

package/internal/OptionControl.js

@@ -0,0 +1,17 @@
+import './../index.css';
+import { jsx } from 'react/jsx-runtime';
+import { Radio, Checkbox } from '@hh.ru/magritte-ui-checkbox-radio';
+
+const OptionControl = ({ type, data, checked, name, onChange, 'data-qa': dataQa, }) => {
+    if (type === 'label') {
+        return jsx("input", { type: "hidden", name: name, value: data.value, "data-qa": dataQa });
+    }
+    if (type === 'radio') {
+        return (jsx(Radio, { "data-focus-visible-skip": "true", "data-qa": dataQa, tabIndex: -1, name: name, value: data.value, checked: checked, onChange: () => onChange(data) }));
+    }
+    return (jsx(Checkbox, { "data-focus-visible-skip": "true", "data-qa": dataQa, tabIndex: -1, name: name, value: data.value, checked: checked, onChange: () => onChange(data) }));
+};
+OptionControl.displayName = 'OptionControl';
+
+export { OptionControl };
+//# sourceMappingURL=OptionControl.js.map

package/internal/OptionControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionControl.js","sources":["src/internal/OptionControl.tsx"],"sourcesContent":["import { type ReactElement } from 'react';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport { Radio, Checkbox } from '@hh.ru/magritte-ui-checkbox-radio';\nimport { SelectOptionType } from '@hh.ru/magritte-ui-new-select/types';\n\nexport interface OnChangeAction<DataType extends StaticDataFetcherItem> {\n    (value: DataType): void;\n}\n\nexport interface OptionControlProps<DataType extends StaticDataFetcherItem> {\n    type: SelectOptionType;\n    data: DataType;\n    checked: boolean;\n    name?: string;\n    onChange: OnChangeAction<DataType>;\n    'data-qa'?: string;\n}\n\nexport const OptionControl = <DataType extends StaticDataFetcherItem>({\n    type,\n    data,\n    checked,\n    name,\n    onChange,\n    'data-qa': dataQa,\n}: OptionControlProps<DataType>): ReactElement => {\n    if (type === 'label') {\n        return <input type=\"hidden\" name={name} value={data.value} data-qa={dataQa} />;\n    }\n    if (type === 'radio') {\n        return (\n            <Radio\n                data-focus-visible-skip=\"true\"\n                data-qa={dataQa}\n                tabIndex={-1}\n                name={name}\n                value={data.value}\n                checked={checked}\n                onChange={() => onChange(data)}\n            />\n        );\n    }\n    return (\n        <Checkbox\n            data-focus-visible-skip=\"true\"\n            data-qa={dataQa}\n            tabIndex={-1}\n            name={name}\n            value={data.value}\n            checked={checked}\n            onChange={() => onChange(data)}\n        />\n    );\n};\n\nOptionControl.displayName = 'OptionControl';\n"],"names":["_jsx"],"mappings":";;;MAmBa,aAAa,GAAG,CAAyC,EAClE,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,SAAS,EAAE,MAAM,GACU,KAAkB;AAC7C,IAAA,IAAI,IAAI,KAAK,OAAO,EAAE;AAClB,QAAA,OAAOA,eAAO,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAW,SAAA,EAAA,MAAM,GAAI,CAAC;KAClF;AACD,IAAA,IAAI,IAAI,KAAK,OAAO,EAAE;AAClB,QAAA,QACIA,GAAC,CAAA,KAAK,EACsB,EAAA,yBAAA,EAAA,MAAM,aACrB,MAAM,EACf,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,MAAM,QAAQ,CAAC,IAAI,CAAC,EAAA,CAChC,EACJ;KACL;AACD,IAAA,QACIA,GAAC,CAAA,QAAQ,EACmB,EAAA,yBAAA,EAAA,MAAM,aACrB,MAAM,EACf,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,MAAM,QAAQ,CAAC,IAAI,CAAC,EAAA,CAChC,EACJ;AACN,EAAE;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}

package/internal/slots.d.ts

@@ -4,6 +4,7 @@ interface SelectElementsSlots {
     hasClearButton: boolean;
     pickerRef: RefObject<HTMLElement>;
     activatorRef: RefObject<HTMLElement>;
+    plain?: boolean;
 }
 export declare const SelectElementsSlotRegistryProvider: import("react").FC<{
     children?: import("react").ReactNode | undefined;

package/internal/slots.js.map

@@ -1 +1 @@
-{"version":3,"file":"slots.js","sources":["src/internal/slots.ts"],"sourcesContent":["import { RefObject } from 'react';\n\nimport { createSlotRegistry } from '@hh.ru/magritte-internal-slot-registry';\n\ninterface SelectElementsSlots {\n    hasApplyChangesButton: boolean;\n    hasClearButton: boolean;\n    pickerRef: RefObject<HTMLElement>;\n    activatorRef: RefObject<HTMLElement>;\n}\n\n// наличие кнопок влияет на аттрибуты доступности в пикере\nexport const {\n    SlotRegistryProvider: SelectElementsSlotRegistryProvider,\n    useRegisterSlot: useRegisterSelectElementsSlot,\n    useSlotRegistryValue: useSelectElementsValue,\n} = createSlotRegistry<SelectElementsSlots>('SelectElements');\n"],"names":[],"mappings":";;AAWA;MACa,EACT,oBAAoB,EAAE,kCAAkC,EACxD,eAAe,EAAE,6BAA6B,EAC9C,oBAAoB,EAAE,sBAAsB,GAC/C,GAAG,kBAAkB,CAAsB,gBAAgB;;;;"}
+{"version":3,"file":"slots.js","sources":["src/internal/slots.ts"],"sourcesContent":["import { RefObject } from 'react';\n\nimport { createSlotRegistry } from '@hh.ru/magritte-internal-slot-registry';\n\ninterface SelectElementsSlots {\n    hasApplyChangesButton: boolean;\n    hasClearButton: boolean;\n    pickerRef: RefObject<HTMLElement>;\n    activatorRef: RefObject<HTMLElement>;\n    plain?: boolean;\n}\n\n// наличие кнопок влияет на аттрибуты доступности в пикере\nexport const {\n    SlotRegistryProvider: SelectElementsSlotRegistryProvider,\n    useRegisterSlot: useRegisterSelectElementsSlot,\n    useSlotRegistryValue: useSelectElementsValue,\n} = createSlotRegistry<SelectElementsSlots>('SelectElements');\n"],"names":[],"mappings":";;AAYA;MACa,EACT,oBAAoB,EAAE,kCAAkC,EACxD,eAAe,EAAE,6BAA6B,EAC9C,oBAAoB,EAAE,sBAAsB,GAC/C,GAAG,kBAAkB,CAAsB,gBAAgB;;;;"}

package/internal/utils.d.ts

@@ -8,4 +8,5 @@ export declare const useSelectedLabels: <DataType extends StaticDataFetcherItem>
 export declare const value2Array: <MultipleType extends boolean, DataType extends StaticDataFetcherItem>(value: ValueTypeHelper<MultipleType, DataType> | undefined) => DataType[];
 export declare const extractValues: <DataType extends StaticDataFetcherItem>(items: readonly DataType[]) => string[];
 export declare const focusOptionsList: (event: SyntheticEvent, drop: HTMLElement | null | undefined, direction: "up" | "down") => void;
+export declare const getChecked: <DataType extends StaticDataFetcherItem>(current: DataType, selected: readonly DataType[]) => boolean;
 export type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;

package/internal/utils.js

@@ -49,6 +49,7 @@ const focusOptionsList = (event, drop, direction) => {
         }
     }
 };
+const getChecked = (current, selected) => !!selected.find((item) => item.value === current.value);
 
-export { assertSelectContext, extractValues, focusOptionsList, isArraysEquals, useEventCallback, useSelectedLabels, value2Array };
+export { assertSelectContext, extractValues, focusOptionsList, getChecked, isArraysEquals, useEventCallback, useSelectedLabels, value2Array };
 //# sourceMappingURL=utils.js.map

package/internal/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["src/internal/utils.ts"],"sourcesContent":["import { useRef, useCallback, useLayoutEffect, useMemo, SyntheticEvent } from 'react';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport { findNextFocusableElement } from '@hh.ru/magritte-common-keyboard';\nimport { ValueTypeHelper } from '@hh.ru/magritte-ui-new-select/types';\n\n// не проверяет порядок и дубликаты\nexport const isArraysEquals = <T>(arrayA: T[], arrayB: T[]): boolean =>\n    arrayA.length === arrayB.length && arrayA.every((item) => arrayB.includes(item));\n\n// убирает `null` с контекста и падает с внятной ошибкой\nexport const assertSelectContext = <T>(value: T | null, hookName: string): T => {\n    if (value === null) {\n        throw new Error(`${hookName} must be used within <Select>`);\n    }\n    return value;\n};\n\n// возвращает стабильную ссылку на колбэк (не вызывать в рендере)\nexport const useEventCallback = <Callback extends (...args: never[]) => unknown>(\n    callback: Callback | undefined\n): Callback => {\n    const callbackRef = useRef(callback);\n\n    useLayoutEffect(() => {\n        callbackRef.current = callback;\n    });\n\n    const stableCallback = useCallback((...args: Parameters<Callback>) => {\n        return callbackRef.current?.(...args);\n    }, []) as Callback;\n\n    return stableCallback;\n};\n\n// placeholder в тригерах собирается одинаково\nexport const useSelectedLabels = <DataType extends StaticDataFetcherItem>(values: readonly DataType[]): string[] => {\n    return useMemo(() => {\n        return values.map((item) => item.text ?? item.value);\n    }, [values]);\n};\n\n// single select работает с обьектом DataType, multiple с массивом\nexport const value2Array = <MultipleType extends boolean, DataType extends StaticDataFetcherItem>(\n    value: ValueTypeHelper<MultipleType, DataType> | undefined\n): DataType[] => {\n    if (!value) {\n        return [];\n    }\n    return (Array.isArray(value) ? value : [value]) as DataType[];\n};\n\n// достает value из DataType на базе StaticDataFetcherItem\nexport const extractValues = <DataType extends StaticDataFetcherItem>(items: readonly DataType[]): string[] => {\n    return items.map((item) => item.value);\n};\n\n// навигация по дропу\nexport const focusOptionsList = (\n    event: SyntheticEvent,\n    drop: HTMLElement | null | undefined,\n    direction: 'up' | 'down'\n): void => {\n    if (drop) {\n        const nextFocusableElement = findNextFocusableElement(drop, null, direction, 'list');\n        if (nextFocusableElement !== null) {\n            event.preventDefault();\n            nextFocusableElement.focus();\n        }\n    }\n};\n\n// применяет Omit к каждому варианту union-типа отдельно\nexport type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;\n"],"names":[],"mappings":";;;AAMA;AACO,MAAM,cAAc,GAAG,CAAI,MAAW,EAAE,MAAW,KACtD,MAAM,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;AAErF;MACa,mBAAmB,GAAG,CAAI,KAAe,EAAE,QAAgB,KAAO;AAC3E,IAAA,IAAI,KAAK,KAAK,IAAI,EAAE;AAChB,QAAA,MAAM,IAAI,KAAK,CAAC,GAAG,QAAQ,CAAA,6BAAA,CAA+B,CAAC,CAAC;KAC/D;AACD,IAAA,OAAO,KAAK,CAAC;AACjB,EAAE;AAEF;AACa,MAAA,gBAAgB,GAAG,CAC5B,QAA8B,KACpB;AACV,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IAErC,eAAe,CAAC,MAAK;AACjB,QAAA,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;AACnC,KAAC,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,GAAG,IAA0B,KAAI;QACjE,OAAO,WAAW,CAAC,OAAO,GAAG,GAAG,IAAI,CAAC,CAAC;KACzC,EAAE,EAAE,CAAa,CAAC;AAEnB,IAAA,OAAO,cAAc,CAAC;AAC1B,EAAE;AAEF;AACa,MAAA,iBAAiB,GAAG,CAAyC,MAA2B,KAAc;IAC/G,OAAO,OAAO,CAAC,MAAK;AAChB,QAAA,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;AACzD,KAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AACjB,EAAE;AAEF;AACa,MAAA,WAAW,GAAG,CACvB,KAA0D,KAC9C;IACZ,IAAI,CAAC,KAAK,EAAE;AACR,QAAA,OAAO,EAAE,CAAC;KACb;AACD,IAAA,QAAQ,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,KAAK,CAAC,EAAgB;AAClE,EAAE;AAEF;AACa,MAAA,aAAa,GAAG,CAAyC,KAA0B,KAAc;AAC1G,IAAA,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;AAC3C,EAAE;AAEF;AACa,MAAA,gBAAgB,GAAG,CAC5B,KAAqB,EACrB,IAAoC,EACpC,SAAwB,KAClB;IACN,IAAI,IAAI,EAAE;AACN,QAAA,MAAM,oBAAoB,GAAG,wBAAwB,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC;AACrF,QAAA,IAAI,oBAAoB,KAAK,IAAI,EAAE;YAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,oBAAoB,CAAC,KAAK,EAAE,CAAC;SAChC;KACJ;AACL;;;;"}
+{"version":3,"file":"utils.js","sources":["src/internal/utils.ts"],"sourcesContent":["import { useRef, useCallback, useLayoutEffect, useMemo, SyntheticEvent } from 'react';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport { findNextFocusableElement } from '@hh.ru/magritte-common-keyboard';\nimport { ValueTypeHelper } from '@hh.ru/magritte-ui-new-select/types';\n\n// не проверяет порядок и дубликаты\nexport const isArraysEquals = <T>(arrayA: T[], arrayB: T[]): boolean =>\n    arrayA.length === arrayB.length && arrayA.every((item) => arrayB.includes(item));\n\n// убирает `null` с контекста и падает с внятной ошибкой\nexport const assertSelectContext = <T>(value: T | null, hookName: string): T => {\n    if (value === null) {\n        throw new Error(`${hookName} must be used within <Select>`);\n    }\n    return value;\n};\n\n// возвращает стабильную ссылку на колбэк (не вызывать в рендере)\nexport const useEventCallback = <Callback extends (...args: never[]) => unknown>(\n    callback: Callback | undefined\n): Callback => {\n    const callbackRef = useRef(callback);\n\n    useLayoutEffect(() => {\n        callbackRef.current = callback;\n    });\n\n    const stableCallback = useCallback((...args: Parameters<Callback>) => {\n        return callbackRef.current?.(...args);\n    }, []) as Callback;\n\n    return stableCallback;\n};\n\n// placeholder в тригерах собирается одинаково\nexport const useSelectedLabels = <DataType extends StaticDataFetcherItem>(values: readonly DataType[]): string[] => {\n    return useMemo(() => {\n        return values.map((item) => item.text ?? item.value);\n    }, [values]);\n};\n\n// single select работает с обьектом DataType, multiple с массивом\nexport const value2Array = <MultipleType extends boolean, DataType extends StaticDataFetcherItem>(\n    value: ValueTypeHelper<MultipleType, DataType> | undefined\n): DataType[] => {\n    if (!value) {\n        return [];\n    }\n    return (Array.isArray(value) ? value : [value]) as DataType[];\n};\n\n// достает value из DataType на базе StaticDataFetcherItem\nexport const extractValues = <DataType extends StaticDataFetcherItem>(items: readonly DataType[]): string[] => {\n    return items.map((item) => item.value);\n};\n\n// навигация по дропу\nexport const focusOptionsList = (\n    event: SyntheticEvent,\n    drop: HTMLElement | null | undefined,\n    direction: 'up' | 'down'\n): void => {\n    if (drop) {\n        const nextFocusableElement = findNextFocusableElement(drop, null, direction, 'list');\n        if (nextFocusableElement !== null) {\n            event.preventDefault();\n            nextFocusableElement.focus();\n        }\n    }\n};\n\nexport const getChecked = <DataType extends StaticDataFetcherItem>(\n    current: DataType,\n    selected: readonly DataType[]\n): boolean => !!selected.find((item) => item.value === current.value);\n\n// применяет Omit к каждому варианту union-типа отдельно\nexport type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;\n"],"names":[],"mappings":";;;AAMA;AACO,MAAM,cAAc,GAAG,CAAI,MAAW,EAAE,MAAW,KACtD,MAAM,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;AAErF;MACa,mBAAmB,GAAG,CAAI,KAAe,EAAE,QAAgB,KAAO;AAC3E,IAAA,IAAI,KAAK,KAAK,IAAI,EAAE;AAChB,QAAA,MAAM,IAAI,KAAK,CAAC,GAAG,QAAQ,CAAA,6BAAA,CAA+B,CAAC,CAAC;KAC/D;AACD,IAAA,OAAO,KAAK,CAAC;AACjB,EAAE;AAEF;AACa,MAAA,gBAAgB,GAAG,CAC5B,QAA8B,KACpB;AACV,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IAErC,eAAe,CAAC,MAAK;AACjB,QAAA,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;AACnC,KAAC,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,GAAG,IAA0B,KAAI;QACjE,OAAO,WAAW,CAAC,OAAO,GAAG,GAAG,IAAI,CAAC,CAAC;KACzC,EAAE,EAAE,CAAa,CAAC;AAEnB,IAAA,OAAO,cAAc,CAAC;AAC1B,EAAE;AAEF;AACa,MAAA,iBAAiB,GAAG,CAAyC,MAA2B,KAAc;IAC/G,OAAO,OAAO,CAAC,MAAK;AAChB,QAAA,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;AACzD,KAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AACjB,EAAE;AAEF;AACa,MAAA,WAAW,GAAG,CACvB,KAA0D,KAC9C;IACZ,IAAI,CAAC,KAAK,EAAE;AACR,QAAA,OAAO,EAAE,CAAC;KACb;AACD,IAAA,QAAQ,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,KAAK,CAAC,EAAgB;AAClE,EAAE;AAEF;AACa,MAAA,aAAa,GAAG,CAAyC,KAA0B,KAAc;AAC1G,IAAA,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;AAC3C,EAAE;AAEF;AACa,MAAA,gBAAgB,GAAG,CAC5B,KAAqB,EACrB,IAAoC,EACpC,SAAwB,KAClB;IACN,IAAI,IAAI,EAAE;AACN,QAAA,MAAM,oBAAoB,GAAG,wBAAwB,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC;AACrF,QAAA,IAAI,oBAAoB,KAAK,IAAI,EAAE;YAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,oBAAoB,CAAC,KAAK,EAAE,CAAC;SAChC;KACJ;AACL,EAAE;AAEK,MAAM,UAAU,GAAG,CACtB,OAAiB,EACjB,QAA6B,KACnB,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC,KAAK;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-new-select",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -37,10 +37,13 @@
     "@hh.ru/magritte-ui-button": "7.2.17",
     "@hh.ru/magritte-ui-cell": "7.2.29",
     "@hh.ru/magritte-ui-checkable-card": "5.0.36",
-    "@hh.ru/magritte-ui-drop": "12.3.35",
+    "@hh.ru/magritte-ui-checkbox-radio": "4.1.25",
+    "@hh.ru/magritte-ui-drop": "12.3.36",
+    "@hh.ru/magritte-ui-icon": "14.2.14",
     "@hh.ru/magritte-ui-input": "9.4.31",
     "@hh.ru/magritte-ui-title": "8.3.4",
-    "@hh.ru/magritte-ui-trigger": "4.3.26"
+    "@hh.ru/magritte-ui-trigger": "4.3.26",
+    "@hh.ru/magritte-ui-typography": "5.3.7"
   },
-  "gitHead": "dcac3032190e4bd234a2c49a73b17adc5b595fcb"
+  "gitHead": "d966658c6e1071eea19675fdd49638b09f224960"
 }

package/types.d.ts

@@ -9,9 +9,6 @@ export type CommitModel = 'instant' | 'confirm';
 type ControlledTriggerKeys = 'expanded' | 'onBlur' | 'onChange' | 'onClear' | 'onFocus' | 'onKeyDown' | 'values';
 export type SelectUncontrolledTriggerProps = DistributiveOmit<TriggerProps, ControlledTriggerKeys>;
 export type SelectControlledTriggerProps = Pick<TriggerProps, ControlledTriggerKeys>;
-export interface OnChangeAction<DataType extends StaticDataFetcherItem> {
-    (value: DataType, needToPut: boolean): void;
-}
 export interface OnOptionsChangeCallback<DataType extends StaticDataFetcherItem> {
     (options: SelectOption<DataType>[]): void;
 }
@@ -48,7 +45,6 @@ export interface SelectBaseProps<MultipleType extends boolean, DataType extends
     onFocus?: VoidFunction;
     /** Обработчик получения опций */
     onOptionsChange?: OnOptionsChangeCallback<DataType>;
-    /** Обработчик события выбора option */
     /** Значение Select, для multiple — это массив */
     value?: ValueTypeHelper<MultipleType, DataType>;
     /** Флаг включения загрузки */