@hh.ru/magritte-ui-new-select 1.1.0 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Select.d.ts +1 -1
- package/Select.js +3 -4
- package/Select.js.map +1 -1
- package/SelectSearchTrigger.js +2 -2
- package/SelectSearchTrigger.js.map +1 -1
- package/SelectTrigger.js +1 -1
- package/SelectTrigger.js.map +1 -1
- package/index.css +6 -6
- package/index.js +1 -1
- package/internal/NavigationManagement.js +1 -1
- package/internal/SelectStateContext.d.ts +5 -5
- package/internal/SelectStateContext.js +42 -12
- package/internal/SelectStateContext.js.map +1 -1
- package/internal/SelectStore.d.ts +16 -0
- package/internal/SelectStore.js +60 -0
- package/internal/SelectStore.js.map +1 -0
- package/internal/utils.d.ts +4 -1
- package/internal/utils.js +15 -4
- package/internal/utils.js.map +1 -1
- package/package.json +3 -3
- package/types.d.ts +0 -1
- package/useSelectTrigger.d.ts +1 -1
- package/useSelectTrigger.js +5 -4
- package/useSelectTrigger.js.map +1 -1
- package/internal/useSelectState.d.ts +0 -16
- package/internal/useSelectState.js +0 -146
- package/internal/useSelectState.js.map +0 -1
package/Select.d.ts
CHANGED
|
@@ -7,6 +7,6 @@ export interface SelectComponents {
|
|
|
7
7
|
Trigger: typeof SelectTrigger;
|
|
8
8
|
SearchTrigger: typeof SelectSearchTrigger;
|
|
9
9
|
}
|
|
10
|
-
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,
|
|
10
|
+
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;
|
|
11
11
|
declare const Select: typeof SelectRoot & SelectComponents;
|
|
12
12
|
export { Select };
|
package/Select.js
CHANGED
|
@@ -22,20 +22,19 @@ import '@hh.ru/magritte-ui-trigger';
|
|
|
22
22
|
import './internal/useFocusWithin.js';
|
|
23
23
|
import '@hh.ru/magritte-common-data-provider';
|
|
24
24
|
import './internal/useDataProvider.js';
|
|
25
|
-
import './internal/
|
|
25
|
+
import './internal/SelectStore.js';
|
|
26
26
|
import '@hh.ru/magritte-internal-slot-registry';
|
|
27
27
|
|
|
28
28
|
const SelectRoot = ({ children, commitModel = 'instant', dataProvider, error, errorTrls, hints, maxSelectedOptions,
|
|
29
29
|
// TODO commitModel === multiple?
|
|
30
|
-
multiple, name, loading, onBlur: onBlurExternal, onChange: onChangeExternal, onFocus: onFocusExternal, onOptionsChange: onOptionsChangeExternal,
|
|
30
|
+
multiple, name, loading, onBlur: onBlurExternal, onChange: onChangeExternal, onFocus: onFocusExternal, onOptionsChange: onOptionsChangeExternal, options, value, }) => {
|
|
31
31
|
const onBlur = useEventCallback(onBlurExternal);
|
|
32
32
|
const onFocus = useEventCallback(onFocusExternal);
|
|
33
33
|
const onChange = useEventCallback(onChangeExternal);
|
|
34
34
|
const onOptionsChange = useEventCallback(onOptionsChangeExternal);
|
|
35
|
-
const onSelectOption = useEventCallback(onSelectOptionExternal);
|
|
36
35
|
const [showOptions, setShowOptions] = useState(false);
|
|
37
36
|
const [searchValue, setSearchValue] = useState('');
|
|
38
|
-
return (jsx(SelectElementsSlotRegistryProvider, { children: jsx(ConfigProvider, { maxSelectedOptions: maxSelectedOptions, multiple: multiple, name: name, commitModel: commitModel, loading: loading, children: jsx(VisibilityProvider, { showOptions: showOptions, setShowOptions: setShowOptions, children: jsx(SelectStateProvider, { onChange: onChange,
|
|
37
|
+
return (jsx(SelectElementsSlotRegistryProvider, { children: jsx(ConfigProvider, { maxSelectedOptions: maxSelectedOptions, multiple: multiple, name: name, commitModel: commitModel, loading: loading, children: jsx(VisibilityProvider, { showOptions: showOptions, setShowOptions: setShowOptions, children: jsx(SelectStateProvider, { onChange: onChange, value: value, children: jsx(SearchStateProvider, { searchValue: searchValue, setSearchValue: setSearchValue, children: jsx(SelectDataProvider, { dataProvider: dataProvider, error: error, errorTrls: errorTrls, hints: hints, options: options, onOptionsChange: onOptionsChange, children: jsx(FocusOrchestratorProvider, { children: jsx(NavigationManagement, { onBlur: onBlur, onFocus: onFocus, children: children }) }) }) }) }) }) }) }));
|
|
39
38
|
};
|
|
40
39
|
const Select = SelectRoot;
|
|
41
40
|
Select.Trigger = SelectTrigger;
|
package/Select.js.map
CHANGED
|
@@ -1 +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
|
|
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;;;;"}
|
package/SelectSearchTrigger.js
CHANGED
|
@@ -16,12 +16,12 @@ import '@hh.ru/magritte-common-data-provider';
|
|
|
16
16
|
import './internal/useDataProvider.js';
|
|
17
17
|
import './internal/VisibilityContext.js';
|
|
18
18
|
import './internal/SelectStateContext.js';
|
|
19
|
-
import './internal/useSelectState.js';
|
|
20
19
|
import './internal/ConfigContext.js';
|
|
20
|
+
import './internal/SelectStore.js';
|
|
21
21
|
import './internal/slots.js';
|
|
22
22
|
import '@hh.ru/magritte-internal-slot-registry';
|
|
23
23
|
|
|
24
|
-
var styles = {"anchor":"magritte-anchor___IFvZk_1-1-
|
|
24
|
+
var styles = {"anchor":"magritte-anchor___IFvZk_1-1-2","anchor-stretched":"magritte-anchor-stretched___L14B-_1-1-2","anchorStretched":"magritte-anchor-stretched___L14B-_1-1-2","default-view":"magritte-default-view___oT4uN_1-1-2","defaultView":"magritte-default-view___oT4uN_1-1-2","input-view":"magritte-input-view___TCeV4_1-1-2","inputView":"magritte-input-view___TCeV4_1-1-2","hidden-view":"magritte-hidden-view___oJ4OI_1-1-2","hiddenView":"magritte-hidden-view___oJ4OI_1-1-2"};
|
|
25
25
|
|
|
26
26
|
const SelectSearchTriggerComponent = ({ 'aria-label': ariaLabel, 'data-qa': dataQa = 'magritte-select-input-activator', disabled, size, maxWidth, stretched, ...triggerProps }, ref) => {
|
|
27
27
|
const [useSearchInput, setUseSearchInput] = useState(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectSearchTrigger.js","sources":["src/SelectSearchTrigger.tsx"],"sourcesContent":["import { ReactElement, forwardRef, ForwardedRef, useRef, useCallback, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { BaseInput } from '@hh.ru/magritte-ui-input/BaseInput';\nimport { useSearchState } from '@hh.ru/magritte-ui-new-select/internal/SearchStateContext';\nimport { FocusTier, useFocusCandidate } from '@hh.ru/magritte-ui-new-select/internal/focusOrchestrator';\nimport { SelectUncontrolledTriggerProps } from '@hh.ru/magritte-ui-new-select/types';\nimport { useSelectTrigger, useTriggerRef } from '@hh.ru/magritte-ui-new-select/useSelectTrigger';\nimport { Trigger } from '@hh.ru/magritte-ui-trigger';\n\nimport styles from './select-search-trigger.less';\n\nconst SelectSearchTriggerComponent = <
|
|
1
|
+
{"version":3,"file":"SelectSearchTrigger.js","sources":["src/SelectSearchTrigger.tsx"],"sourcesContent":["import { ReactElement, forwardRef, ForwardedRef, useRef, useCallback, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { BaseInput } from '@hh.ru/magritte-ui-input/BaseInput';\nimport { useSearchState } from '@hh.ru/magritte-ui-new-select/internal/SearchStateContext';\nimport { FocusTier, useFocusCandidate } from '@hh.ru/magritte-ui-new-select/internal/focusOrchestrator';\nimport { SelectUncontrolledTriggerProps } from '@hh.ru/magritte-ui-new-select/types';\nimport { useSelectTrigger, useTriggerRef } from '@hh.ru/magritte-ui-new-select/useSelectTrigger';\nimport { Trigger } from '@hh.ru/magritte-ui-trigger';\n\nimport styles from './select-search-trigger.less';\n\nconst SelectSearchTriggerComponent = <DataType extends StaticDataFetcherItem>(\n {\n 'aria-label': ariaLabel,\n 'data-qa': dataQa = 'magritte-select-input-activator',\n disabled,\n size,\n maxWidth,\n stretched,\n ...triggerProps\n }: SelectUncontrolledTriggerProps,\n ref: ForwardedRef<HTMLElement>\n): ReactElement => {\n const [useSearchInput, setUseSearchInput] = useState(false);\n const activatorRef = useTriggerRef();\n const activatorRefCallback = useMultipleRefs(activatorRef, ref);\n const inputRef = useRef<HTMLInputElement>(null);\n const forceDisabled = useDisabled();\n const isComponentDisabled = disabled || forceDisabled;\n const { searchValue, setSearchValue } = useSearchState();\n\n // TODO focusAndSelect потерян\n const { onKeyDown, onChange, onBlur, expanded, onClear, values, onFocus } =\n useSelectTrigger<DataType>(isComponentDisabled);\n\n useFocusCandidate('select-search-input', FocusTier.Trigger, () => {\n const input = inputRef.current;\n if (!input) {\n return false;\n }\n input.focus();\n return true;\n });\n\n const onFocusTrigger = useCallback(() => {\n if (isComponentDisabled || expanded) {\n return;\n }\n onFocus?.();\n setUseSearchInput(true);\n }, [isComponentDisabled, expanded, onFocus]);\n\n return (\n <div\n ref={activatorRefCallback}\n className={classnames(styles.anchor, { [styles.anchorStretched]: stretched })}\n style={{ maxWidth }}\n >\n <div className={classnames(styles.defaultView, { [styles.hiddenView]: useSearchInput })}>\n <Trigger\n {...triggerProps}\n // size={size}\n role=\"combobox\"\n maxWidth={maxWidth}\n stretched={stretched}\n expanded={expanded}\n onChange={onChange}\n onBlur={onBlur}\n onClear={onClear}\n onFocus={onFocusTrigger}\n onKeyDown={onKeyDown}\n values={values}\n aria-label={ariaLabel}\n data-qa={dataQa}\n disabled={isComponentDisabled}\n />\n </div>\n <div\n className={classnames(styles.inputView, {\n [styles.hiddenView]: !useSearchInput,\n })}\n >\n <BaseInput\n size={size === 'large' ? 'large' : 'medium'}\n ref={inputRef}\n wrapperRef={activatorRef}\n value={searchValue}\n onChange={setSearchValue}\n onKeyDown={onKeyDown}\n onBlur={onBlur}\n data-qa={dataQa}\n placeholder={values.length > 0 ? values.join(', ') : ariaLabel}\n autoComplete=\"off\"\n role=\"combobox\"\n aria-expanded={expanded}\n aria-label={ariaLabel}\n aria-autocomplete=\"list\"\n // TODO aria-controls\n />\n </div>\n </div>\n );\n};\n\nconst SelectSearchTrigger = forwardRef<HTMLElement, SelectUncontrolledTriggerProps>(SelectSearchTriggerComponent);\n\nSelectSearchTrigger.displayName = 'SelectSearchTrigger';\n\nexport { SelectSearchTrigger };\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
package/SelectTrigger.js
CHANGED
|
@@ -14,8 +14,8 @@ import './internal/useDataProvider.js';
|
|
|
14
14
|
import './internal/SearchStateContext.js';
|
|
15
15
|
import './internal/VisibilityContext.js';
|
|
16
16
|
import './internal/SelectStateContext.js';
|
|
17
|
-
import './internal/useSelectState.js';
|
|
18
17
|
import './internal/ConfigContext.js';
|
|
18
|
+
import './internal/SelectStore.js';
|
|
19
19
|
import './internal/slots.js';
|
|
20
20
|
import '@hh.ru/magritte-internal-slot-registry';
|
|
21
21
|
|
package/SelectTrigger.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectTrigger.js","sources":["src/SelectTrigger.tsx"],"sourcesContent":["import { ReactElement, forwardRef, ForwardedRef } from 'react';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { FocusTier, useFocusCandidate } from '@hh.ru/magritte-ui-new-select/internal/focusOrchestrator';\nimport { SelectUncontrolledTriggerProps } from '@hh.ru/magritte-ui-new-select/types';\nimport { useSelectTrigger, useTriggerRef } from '@hh.ru/magritte-ui-new-select/useSelectTrigger';\nimport { Trigger } from '@hh.ru/magritte-ui-trigger';\n\nconst SelectTriggerComponent = <
|
|
1
|
+
{"version":3,"file":"SelectTrigger.js","sources":["src/SelectTrigger.tsx"],"sourcesContent":["import { ReactElement, forwardRef, ForwardedRef } from 'react';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { FocusTier, useFocusCandidate } from '@hh.ru/magritte-ui-new-select/internal/focusOrchestrator';\nimport { SelectUncontrolledTriggerProps } from '@hh.ru/magritte-ui-new-select/types';\nimport { useSelectTrigger, useTriggerRef } from '@hh.ru/magritte-ui-new-select/useSelectTrigger';\nimport { Trigger } from '@hh.ru/magritte-ui-trigger';\n\nconst SelectTriggerComponent = <DataType extends StaticDataFetcherItem>(\n { 'data-qa': dataQa = 'magritte-select-activator', disabled, ...triggerProps }: SelectUncontrolledTriggerProps,\n ref: ForwardedRef<HTMLElement>\n): ReactElement => {\n const activatorRef = useTriggerRef();\n const activatorRefCallback = useMultipleRefs(activatorRef, ref);\n const forceDisabled = useDisabled();\n const isComponentDisabled = disabled || forceDisabled;\n\n const { onKeyDown, onChange, onBlur, expanded, onClear, values, onFocus } =\n useSelectTrigger<DataType>(isComponentDisabled);\n\n useFocusCandidate('default-trigger', FocusTier.Trigger, () => {\n const trigger = activatorRef.current;\n if (!trigger || isComponentDisabled) {\n return false;\n }\n trigger.focus();\n return true;\n });\n\n return (\n <Trigger\n {...triggerProps}\n ref={activatorRefCallback}\n role={'combobox'}\n disabled={isComponentDisabled}\n data-qa={dataQa}\n expanded={expanded}\n onChange={onChange}\n onBlur={onBlur}\n onClear={onClear}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n values={values}\n // TODO aria-haspopup/aria-controls\n />\n );\n};\n\nconst SelectTrigger = forwardRef<HTMLElement, SelectUncontrolledTriggerProps>(SelectTriggerComponent);\n\nSelectTrigger.displayName = 'SelectTrigger';\n\nexport { SelectTrigger };\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;AAUA,MAAM,sBAAsB,GAAG,CAC3B,EAAE,SAAS,EAAE,MAAM,GAAG,2BAA2B,EAAE,QAAQ,EAAE,GAAG,YAAY,EAAkC,EAC9G,GAA8B,KAChB;AACd,IAAA,MAAM,YAAY,GAAG,aAAa,EAAE,CAAC;IACrC,MAAM,oBAAoB,GAAG,eAAe,CAAC,YAAY,EAAE,GAAG,CAAC,CAAC;AAChE,IAAA,MAAM,aAAa,GAAG,WAAW,EAAE,CAAC;AACpC,IAAA,MAAM,mBAAmB,GAAG,QAAQ,IAAI,aAAa,CAAC;IAEtD,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,GACrE,gBAAgB,CAAW,mBAAmB,CAAC,CAAC;IAEpD,iBAAiB,CAAC,iBAAiB,EAAE,SAAS,CAAC,OAAO,EAAE,MAAK;AACzD,QAAA,MAAM,OAAO,GAAG,YAAY,CAAC,OAAO,CAAC;AACrC,QAAA,IAAI,CAAC,OAAO,IAAI,mBAAmB,EAAE;AACjC,YAAA,OAAO,KAAK,CAAC;SAChB;QACD,OAAO,CAAC,KAAK,EAAE,CAAC;AAChB,QAAA,OAAO,IAAI,CAAC;AAChB,KAAC,CAAC,CAAC;IAEH,QACIA,IAAC,OAAO,EAAA,EAAA,GACA,YAAY,EAChB,GAAG,EAAE,oBAAoB,EACzB,IAAI,EAAE,UAAU,EAChB,QAAQ,EAAE,mBAAmB,aACpB,MAAM,EACf,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EAEhB,CAAA,EACJ;AACN,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,UAAU,CAA8C,sBAAsB,EAAE;AAEtG,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}
|
package/index.css
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
.magritte-anchor___IFvZk_1-1-
|
|
1
|
+
.magritte-anchor___IFvZk_1-1-2{
|
|
2
2
|
position:relative;
|
|
3
3
|
width:fit-content;
|
|
4
4
|
}
|
|
5
|
-
.magritte-anchor-stretched___L14B-_1-1-
|
|
5
|
+
.magritte-anchor-stretched___L14B-_1-1-2{
|
|
6
6
|
width:100%;
|
|
7
7
|
}
|
|
8
|
-
.magritte-default-view___oT4uN_1-1-
|
|
8
|
+
.magritte-default-view___oT4uN_1-1-2{
|
|
9
9
|
min-width:0;
|
|
10
10
|
}
|
|
11
|
-
.magritte-input-view___TCeV4_1-1-
|
|
11
|
+
.magritte-input-view___TCeV4_1-1-2{
|
|
12
12
|
position:absolute;
|
|
13
13
|
top:0;
|
|
14
14
|
left:0;
|
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
display:flex;
|
|
17
17
|
min-width:0;
|
|
18
18
|
}
|
|
19
|
-
.magritte-hidden-view___oJ4OI_1-1-
|
|
19
|
+
.magritte-hidden-view___oJ4OI_1-1-2{
|
|
20
20
|
visibility:hidden;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
.magritte-select-layout___MIlpQ_1-1-
|
|
23
|
+
.magritte-select-layout___MIlpQ_1-1-2{
|
|
24
24
|
display:contents;
|
|
25
25
|
}
|
package/index.js
CHANGED
|
@@ -24,5 +24,5 @@ import '@hh.ru/magritte-common-data-provider';
|
|
|
24
24
|
import './internal/useDataProvider.js';
|
|
25
25
|
import './internal/VisibilityContext.js';
|
|
26
26
|
import './internal/SelectStateContext.js';
|
|
27
|
-
import './internal/
|
|
27
|
+
import './internal/SelectStore.js';
|
|
28
28
|
//# sourceMappingURL=index.js.map
|
|
@@ -8,7 +8,7 @@ import './utils.js';
|
|
|
8
8
|
import '@hh.ru/magritte-common-keyboard';
|
|
9
9
|
import '@hh.ru/magritte-internal-slot-registry';
|
|
10
10
|
|
|
11
|
-
var styles = {"select-layout":"magritte-select-layout___MIlpQ_1-1-
|
|
11
|
+
var styles = {"select-layout":"magritte-select-layout___MIlpQ_1-1-2","selectLayout":"magritte-select-layout___MIlpQ_1-1-2"};
|
|
12
12
|
|
|
13
13
|
const NavigationManagement = ({ children, onFocus, onBlur }) => {
|
|
14
14
|
const focusOrchestrator = useFocusOrchestrator();
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { type ReactNode, type ReactElement } from 'react';
|
|
2
2
|
import { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';
|
|
3
|
-
import {
|
|
3
|
+
import { SelectStore } from '@hh.ru/magritte-ui-new-select/internal/SelectStore';
|
|
4
4
|
import { ValueTypeHelper } from '@hh.ru/magritte-ui-new-select/types';
|
|
5
|
-
export declare const
|
|
6
|
-
|
|
5
|
+
export declare const useSelectStore: <DataType extends StaticDataFetcherItem>() => SelectStore<DataType>;
|
|
6
|
+
export declare const useSelected: <DataType extends StaticDataFetcherItem>(store: SelectStore<DataType>) => readonly DataType[];
|
|
7
|
+
interface SelectStateProviderNewProps<MultipleType extends boolean, DataType extends StaticDataFetcherItem> {
|
|
7
8
|
children: ReactNode;
|
|
8
9
|
onChange?: (value: ValueTypeHelper<MultipleType, DataType>) => void;
|
|
9
|
-
onSelectOption?: (values: DataType[]) => void;
|
|
10
10
|
value?: ValueTypeHelper<MultipleType, DataType>;
|
|
11
11
|
}
|
|
12
|
-
export declare const SelectStateProvider: <MultipleType extends boolean, DataType extends StaticDataFetcherItem>({ children, onChange,
|
|
12
|
+
export declare const SelectStateProvider: <MultipleType extends boolean, DataType extends StaticDataFetcherItem>({ children, onChange, value: valueOrValuesExternal, }: SelectStateProviderNewProps<MultipleType, DataType>) => ReactElement;
|
|
13
13
|
export {};
|
|
@@ -1,21 +1,51 @@
|
|
|
1
1
|
import './../index.css';
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import { createContext, useContext } from 'react';
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import './
|
|
7
|
-
import './VisibilityContext.js';
|
|
3
|
+
import { createContext, useContext, useSyncExternalStore, useState, useRef, useEffect } from 'react';
|
|
4
|
+
import { useSelectConfig } from './ConfigContext.js';
|
|
5
|
+
import { SelectStore } from './SelectStore.js';
|
|
6
|
+
import { assertSelectContext, value2Array } from './utils.js';
|
|
8
7
|
import '@hh.ru/magritte-common-keyboard';
|
|
9
8
|
|
|
10
9
|
const SelectStateContext = createContext(null);
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
// возвращает ссылку на стор
|
|
11
|
+
const useSelectStore = () => {
|
|
12
|
+
return assertSelectContext(useContext(SelectStateContext), 'useSelectStore');
|
|
13
13
|
};
|
|
14
|
-
//
|
|
15
|
-
const
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
// возвращает реактивное состояние стора
|
|
15
|
+
const useSelected = (store) => {
|
|
16
|
+
return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
|
|
17
|
+
};
|
|
18
|
+
// выбранные значения, операции над ними и эмит внешнего onChange
|
|
19
|
+
const SelectStateProvider = ({ children, onChange, value: valueOrValuesExternal, }) => {
|
|
20
|
+
const [store] = useState(() => new SelectStore(value2Array(valueOrValuesExternal)));
|
|
21
|
+
const { multiple } = useSelectConfig();
|
|
22
|
+
// во время реакции на внешнее обновление value
|
|
23
|
+
// - эмитить внешний onChange НЕ нужно
|
|
24
|
+
// - но обновить дерево селекта нужно
|
|
25
|
+
const suppressOnChangeRef = useRef(false);
|
|
26
|
+
// эмит внешнего onChange для потребителей
|
|
27
|
+
useEffect(() => {
|
|
28
|
+
const storeUnsubscribe = store.subscribe(() => {
|
|
29
|
+
if (suppressOnChangeRef.current) {
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
const selected = store.getSnapshot();
|
|
33
|
+
onChange?.((multiple ? [...selected] : selected[0]));
|
|
34
|
+
});
|
|
35
|
+
return storeUnsubscribe;
|
|
36
|
+
}, [store, multiple, onChange]);
|
|
37
|
+
// синк стора с внешним свойством
|
|
38
|
+
useEffect(() => {
|
|
39
|
+
suppressOnChangeRef.current = true;
|
|
40
|
+
try {
|
|
41
|
+
store.replace(value2Array(valueOrValuesExternal));
|
|
42
|
+
}
|
|
43
|
+
finally {
|
|
44
|
+
suppressOnChangeRef.current = false;
|
|
45
|
+
}
|
|
46
|
+
}, [store, valueOrValuesExternal]);
|
|
47
|
+
return jsx(SelectStateContext.Provider, { value: store, children: children });
|
|
18
48
|
};
|
|
19
49
|
|
|
20
|
-
export { SelectStateProvider,
|
|
50
|
+
export { SelectStateProvider, useSelectStore, useSelected };
|
|
21
51
|
//# sourceMappingURL=SelectStateContext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectStateContext.js","sources":["src/internal/SelectStateContext.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"SelectStateContext.js","sources":["src/internal/SelectStateContext.tsx"],"sourcesContent":["import {\n createContext,\n useContext,\n type ReactNode,\n type ReactElement,\n useState,\n useSyncExternalStore,\n useEffect,\n useRef,\n} from 'react';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport { useSelectConfig } from '@hh.ru/magritte-ui-new-select/internal/ConfigContext';\nimport { SelectStore } from '@hh.ru/magritte-ui-new-select/internal/SelectStore';\nimport { assertSelectContext, value2Array } from '@hh.ru/magritte-ui-new-select/internal/utils';\nimport { ValueTypeHelper } from '@hh.ru/magritte-ui-new-select/types';\n\nconst SelectStateContext = createContext<SelectStore<StaticDataFetcherItem> | null>(null);\n\n// возвращает ссылку на стор\nexport const useSelectStore = <DataType extends StaticDataFetcherItem>(): SelectStore<DataType> => {\n return assertSelectContext(useContext(SelectStateContext), 'useSelectStore') as SelectStore<DataType>;\n};\n\n// возвращает реактивное состояние стора\nexport const useSelected = <DataType extends StaticDataFetcherItem>(\n store: SelectStore<DataType>\n): readonly DataType[] => {\n return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);\n};\n\ninterface SelectStateProviderNewProps<MultipleType extends boolean, DataType extends StaticDataFetcherItem> {\n children: ReactNode;\n onChange?: (value: ValueTypeHelper<MultipleType, DataType>) => void;\n value?: ValueTypeHelper<MultipleType, DataType>;\n}\n\n// выбранные значения, операции над ними и эмит внешнего onChange\nexport const SelectStateProvider = <MultipleType extends boolean, DataType extends StaticDataFetcherItem>({\n children,\n onChange,\n value: valueOrValuesExternal,\n}: SelectStateProviderNewProps<MultipleType, DataType>): ReactElement => {\n const [store] = useState(() => new SelectStore(value2Array<MultipleType, DataType>(valueOrValuesExternal)));\n const { multiple } = useSelectConfig();\n\n // во время реакции на внешнее обновление value\n // - эмитить внешний onChange НЕ нужно\n // - но обновить дерево селекта нужно\n const suppressOnChangeRef = useRef(false);\n\n // эмит внешнего onChange для потребителей\n useEffect(() => {\n const storeUnsubscribe = store.subscribe(() => {\n if (suppressOnChangeRef.current) {\n return;\n }\n const selected = store.getSnapshot();\n onChange?.((multiple ? [...selected] : selected[0]) as ValueTypeHelper<MultipleType, DataType>);\n });\n return storeUnsubscribe;\n }, [store, multiple, onChange]);\n\n // синк стора с внешним свойством\n useEffect(() => {\n suppressOnChangeRef.current = true;\n try {\n store.replace(value2Array<MultipleType, DataType>(valueOrValuesExternal));\n } finally {\n suppressOnChangeRef.current = false;\n }\n }, [store, valueOrValuesExternal]);\n\n return <SelectStateContext.Provider value={store}>{children}</SelectStateContext.Provider>;\n};\n"],"names":["_jsx"],"mappings":";;;;;;;AAiBA,MAAM,kBAAkB,GAAG,aAAa,CAA4C,IAAI,CAAC,CAAC;AAE1F;AACO,MAAM,cAAc,GAAG,MAAoE;IAC9F,OAAO,mBAAmB,CAAC,UAAU,CAAC,kBAAkB,CAAC,EAAE,gBAAgB,CAA0B,CAAC;AAC1G,EAAE;AAEF;AACa,MAAA,WAAW,GAAG,CACvB,KAA4B,KACP;AACrB,IAAA,OAAO,oBAAoB,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;AACvF,EAAE;AAQF;AACO,MAAM,mBAAmB,GAAG,CAAuE,EACtG,QAAQ,EACR,QAAQ,EACR,KAAK,EAAE,qBAAqB,GACsB,KAAkB;AACpE,IAAA,MAAM,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,MAAM,IAAI,WAAW,CAAC,WAAW,CAAyB,qBAAqB,CAAC,CAAC,CAAC,CAAC;AAC5G,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,eAAe,EAAE,CAAC;;;;AAKvC,IAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;;IAG1C,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,gBAAgB,GAAG,KAAK,CAAC,SAAS,CAAC,MAAK;AAC1C,YAAA,IAAI,mBAAmB,CAAC,OAAO,EAAE;gBAC7B,OAAO;aACV;AACD,YAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC;YACrC,QAAQ,IAAI,QAAQ,GAAG,CAAC,GAAG,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,EAA6C,CAAC;AACpG,SAAC,CAAC,CAAC;AACH,QAAA,OAAO,gBAAgB,CAAC;KAC3B,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;;IAGhC,SAAS,CAAC,MAAK;AACX,QAAA,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC;AACnC,QAAA,IAAI;YACA,KAAK,CAAC,OAAO,CAAC,WAAW,CAAyB,qBAAqB,CAAC,CAAC,CAAC;SAC7E;gBAAS;AACN,YAAA,mBAAmB,CAAC,OAAO,GAAG,KAAK,CAAC;SACvC;AACL,KAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAEnC,OAAOA,GAAA,CAAC,kBAAkB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA,QAAA,EAAG,QAAQ,EAAA,CAA+B,CAAC;AAC/F;;;;"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';
|
|
2
|
+
type Listener = () => void;
|
|
3
|
+
type Value = StaticDataFetcherItem['value'];
|
|
4
|
+
export declare class SelectStore<DataType extends StaticDataFetcherItem> {
|
|
5
|
+
private values;
|
|
6
|
+
private readonly listeners;
|
|
7
|
+
constructor(initial?: readonly DataType[]);
|
|
8
|
+
getSnapshot: () => readonly DataType[];
|
|
9
|
+
subscribe: (listener: Listener) => VoidFunction;
|
|
10
|
+
replace(source: readonly DataType[]): void;
|
|
11
|
+
add(value: DataType): void;
|
|
12
|
+
remove(id: Value): void;
|
|
13
|
+
clear(): void;
|
|
14
|
+
private emit;
|
|
15
|
+
}
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import './../index.css';
|
|
2
|
+
import { isArraysEquals, extractValues } from './utils.js';
|
|
3
|
+
import 'react';
|
|
4
|
+
import '@hh.ru/magritte-common-keyboard';
|
|
5
|
+
|
|
6
|
+
// стор хранит выбранные объекты, а не ids
|
|
7
|
+
// внешний onChange должен получать DataType | DataType[]
|
|
8
|
+
// массив опций меняется дата провайдером => нужно место, где хранить обьекты DataType
|
|
9
|
+
class SelectStore {
|
|
10
|
+
values;
|
|
11
|
+
listeners = new Set();
|
|
12
|
+
constructor(initial = []) {
|
|
13
|
+
this.values = [...initial];
|
|
14
|
+
}
|
|
15
|
+
getSnapshot = () => {
|
|
16
|
+
return this.values;
|
|
17
|
+
};
|
|
18
|
+
subscribe = (listener) => {
|
|
19
|
+
this.listeners.add(listener);
|
|
20
|
+
return () => {
|
|
21
|
+
this.listeners.delete(listener);
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
replace(source) {
|
|
25
|
+
// идентичность выбранных элементов определяется через поле value
|
|
26
|
+
// так как value единственное поле которое StaticDataFetcherItem гарантирует
|
|
27
|
+
if (isArraysEquals(extractValues(this.values), extractValues(source))) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
this.values = [...source];
|
|
31
|
+
this.emit();
|
|
32
|
+
}
|
|
33
|
+
add(value) {
|
|
34
|
+
if (this.values.some((item) => item.value === value.value)) {
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
this.values = [...this.values, value];
|
|
38
|
+
this.emit();
|
|
39
|
+
}
|
|
40
|
+
remove(id) {
|
|
41
|
+
if (!this.values.some((item) => item.value === id)) {
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
this.values = this.values.filter((item) => item.value !== id);
|
|
45
|
+
this.emit();
|
|
46
|
+
}
|
|
47
|
+
clear() {
|
|
48
|
+
if (this.values.length === 0) {
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
this.values = [];
|
|
52
|
+
this.emit();
|
|
53
|
+
}
|
|
54
|
+
emit() {
|
|
55
|
+
this.listeners.forEach((listener) => listener());
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
export { SelectStore };
|
|
60
|
+
//# sourceMappingURL=SelectStore.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectStore.js","sources":["src/internal/SelectStore.ts"],"sourcesContent":["import { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport { extractValues, isArraysEquals } from '@hh.ru/magritte-ui-new-select/internal/utils';\n\ntype Listener = () => void;\ntype Value = StaticDataFetcherItem['value'];\n\n// стор хранит выбранные объекты, а не ids\n// внешний onChange должен получать DataType | DataType[]\n// массив опций меняется дата провайдером => нужно место, где хранить обьекты DataType\nexport class SelectStore<DataType extends StaticDataFetcherItem> {\n private values: readonly DataType[];\n private readonly listeners = new Set<Listener>();\n\n public constructor(initial: readonly DataType[] = []) {\n this.values = [...initial];\n }\n\n public getSnapshot = (): readonly DataType[] => {\n return this.values;\n };\n\n public subscribe = (listener: Listener): VoidFunction => {\n this.listeners.add(listener);\n return () => {\n this.listeners.delete(listener);\n };\n };\n\n public replace(source: readonly DataType[]): void {\n // идентичность выбранных элементов определяется через поле value\n // так как value единственное поле которое StaticDataFetcherItem гарантирует\n if (isArraysEquals(extractValues<DataType>(this.values), extractValues<DataType>(source))) {\n return;\n }\n this.values = [...source];\n this.emit();\n }\n\n public add(value: DataType): void {\n if (this.values.some((item) => item.value === value.value)) {\n return;\n }\n this.values = [...this.values, value];\n this.emit();\n }\n\n public remove(id: Value): void {\n if (!this.values.some((item) => item.value === id)) {\n return;\n }\n this.values = this.values.filter((item) => item.value !== id);\n this.emit();\n }\n\n public clear(): void {\n if (this.values.length === 0) {\n return;\n }\n this.values = [];\n this.emit();\n }\n\n private emit(): void {\n this.listeners.forEach((listener) => listener());\n }\n}\n"],"names":[],"mappings":";;;;AAMA;AACA;AACA;MACa,WAAW,CAAA;AACZ,IAAA,MAAM,CAAsB;AACnB,IAAA,SAAS,GAAG,IAAI,GAAG,EAAY,CAAC;AAEjD,IAAA,WAAA,CAAmB,UAA+B,EAAE,EAAA;AAChD,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC;KAC9B;IAEM,WAAW,GAAG,MAA0B;QAC3C,OAAO,IAAI,CAAC,MAAM,CAAC;AACvB,KAAC,CAAC;AAEK,IAAA,SAAS,GAAG,CAAC,QAAkB,KAAkB;AACpD,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;AAC7B,QAAA,OAAO,MAAK;AACR,YAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AACpC,SAAC,CAAC;AACN,KAAC,CAAC;AAEK,IAAA,OAAO,CAAC,MAA2B,EAAA;;;AAGtC,QAAA,IAAI,cAAc,CAAC,aAAa,CAAW,IAAI,CAAC,MAAM,CAAC,EAAE,aAAa,CAAW,MAAM,CAAC,CAAC,EAAE;YACvF,OAAO;SACV;AACD,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC;QAC1B,IAAI,CAAC,IAAI,EAAE,CAAC;KACf;AAEM,IAAA,GAAG,CAAC,KAAe,EAAA;QACtB,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAC,EAAE;YACxD,OAAO;SACV;QACD,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QACtC,IAAI,CAAC,IAAI,EAAE,CAAC;KACf;AAEM,IAAA,MAAM,CAAC,EAAS,EAAA;AACnB,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC,EAAE;YAChD,OAAO;SACV;QACD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC;QAC9D,IAAI,CAAC,IAAI,EAAE,CAAC;KACf;IAEM,KAAK,GAAA;QACR,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;YAC1B,OAAO;SACV;AACD,QAAA,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;QACjB,IAAI,CAAC,IAAI,EAAE,CAAC;KACf;IAEO,IAAI,GAAA;AACR,QAAA,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,KAAK,QAAQ,EAAE,CAAC,CAAC;KACpD;AACJ;;;;"}
|
package/internal/utils.d.ts
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import { SyntheticEvent } from 'react';
|
|
2
2
|
import { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';
|
|
3
|
+
import { ValueTypeHelper } from '@hh.ru/magritte-ui-new-select/types';
|
|
3
4
|
export declare const isArraysEquals: <T>(arrayA: T[], arrayB: T[]) => boolean;
|
|
4
5
|
export declare const assertSelectContext: <T>(value: T | null, hookName: string) => T;
|
|
5
6
|
export declare const useEventCallback: <Callback extends (...args: never[]) => unknown>(callback: Callback | undefined) => Callback;
|
|
6
|
-
export declare const useSelectedLabels: <DataType extends StaticDataFetcherItem>(values:
|
|
7
|
+
export declare const useSelectedLabels: <DataType extends StaticDataFetcherItem>(values: readonly DataType[]) => string[];
|
|
8
|
+
export declare const value2Array: <MultipleType extends boolean, DataType extends StaticDataFetcherItem>(value: ValueTypeHelper<MultipleType, DataType> | undefined) => DataType[];
|
|
9
|
+
export declare const extractValues: <DataType extends StaticDataFetcherItem>(items: readonly DataType[]) => string[];
|
|
7
10
|
export declare const focusOptionsList: (event: SyntheticEvent, drop: HTMLElement | null | undefined, direction: "up" | "down") => void;
|
|
8
11
|
export type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
|
package/internal/utils.js
CHANGED
|
@@ -2,7 +2,7 @@ import './../index.css';
|
|
|
2
2
|
import { useRef, useLayoutEffect, useCallback, useMemo } from 'react';
|
|
3
3
|
import { findNextFocusableElement } from '@hh.ru/magritte-common-keyboard';
|
|
4
4
|
|
|
5
|
-
//
|
|
5
|
+
// не проверяет порядок и дубликаты
|
|
6
6
|
const isArraysEquals = (arrayA, arrayB) => arrayA.length === arrayB.length && arrayA.every((item) => arrayB.includes(item));
|
|
7
7
|
// убирает `null` с контекста и падает с внятной ошибкой
|
|
8
8
|
const assertSelectContext = (value, hookName) => {
|
|
@@ -25,10 +25,21 @@ const useEventCallback = (callback) => {
|
|
|
25
25
|
// placeholder в тригерах собирается одинаково
|
|
26
26
|
const useSelectedLabels = (values) => {
|
|
27
27
|
return useMemo(() => {
|
|
28
|
-
|
|
29
|
-
return selectedItems.map((item) => item.text ?? item.value);
|
|
28
|
+
return values.map((item) => item.text ?? item.value);
|
|
30
29
|
}, [values]);
|
|
31
30
|
};
|
|
31
|
+
// single select работает с обьектом DataType, multiple с массивом
|
|
32
|
+
const value2Array = (value) => {
|
|
33
|
+
if (!value) {
|
|
34
|
+
return [];
|
|
35
|
+
}
|
|
36
|
+
return (Array.isArray(value) ? value : [value]);
|
|
37
|
+
};
|
|
38
|
+
// достает value из DataType на базе StaticDataFetcherItem
|
|
39
|
+
const extractValues = (items) => {
|
|
40
|
+
return items.map((item) => item.value);
|
|
41
|
+
};
|
|
42
|
+
// навигация по дропу
|
|
32
43
|
const focusOptionsList = (event, drop, direction) => {
|
|
33
44
|
if (drop) {
|
|
34
45
|
const nextFocusableElement = findNextFocusableElement(drop, null, direction, 'list');
|
|
@@ -39,5 +50,5 @@ const focusOptionsList = (event, drop, direction) => {
|
|
|
39
50
|
}
|
|
40
51
|
};
|
|
41
52
|
|
|
42
|
-
export { assertSelectContext, focusOptionsList, isArraysEquals, useEventCallback, useSelectedLabels };
|
|
53
|
+
export { assertSelectContext, extractValues, focusOptionsList, isArraysEquals, useEventCallback, useSelectedLabels, value2Array };
|
|
43
54
|
//# sourceMappingURL=utils.js.map
|
package/internal/utils.js.map
CHANGED
|
@@ -1 +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';\n\n//
|
|
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;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hh.ru/magritte-ui-new-select",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"sideEffects": [
|
|
@@ -37,10 +37,10 @@
|
|
|
37
37
|
"@hh.ru/magritte-ui-button": "7.2.17",
|
|
38
38
|
"@hh.ru/magritte-ui-cell": "7.2.29",
|
|
39
39
|
"@hh.ru/magritte-ui-checkable-card": "5.0.36",
|
|
40
|
-
"@hh.ru/magritte-ui-drop": "12.3.
|
|
40
|
+
"@hh.ru/magritte-ui-drop": "12.3.36",
|
|
41
41
|
"@hh.ru/magritte-ui-input": "9.4.31",
|
|
42
42
|
"@hh.ru/magritte-ui-title": "8.3.4",
|
|
43
43
|
"@hh.ru/magritte-ui-trigger": "4.3.26"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "8ebd3956f032a7ae6df4f4e21e96ebb60b1e5424"
|
|
46
46
|
}
|
package/types.d.ts
CHANGED
|
@@ -49,7 +49,6 @@ export interface SelectBaseProps<MultipleType extends boolean, DataType extends
|
|
|
49
49
|
/** Обработчик получения опций */
|
|
50
50
|
onOptionsChange?: OnOptionsChangeCallback<DataType>;
|
|
51
51
|
/** Обработчик события выбора option */
|
|
52
|
-
onSelectOption?: (values: DataType[]) => void;
|
|
53
52
|
/** Значение Select, для multiple — это массив */
|
|
54
53
|
value?: ValueTypeHelper<MultipleType, DataType>;
|
|
55
54
|
/** Флаг включения загрузки */
|
package/useSelectTrigger.d.ts
CHANGED
|
@@ -3,4 +3,4 @@ import { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';
|
|
|
3
3
|
import { SelectControlledTriggerProps } from '@hh.ru/magritte-ui-new-select/types';
|
|
4
4
|
export declare const useGetTriggerRef: () => RefObject<HTMLElement> | undefined;
|
|
5
5
|
export declare const useTriggerRef: () => RefObject<HTMLElement>;
|
|
6
|
-
export declare const useSelectTrigger: <
|
|
6
|
+
export declare const useSelectTrigger: <DataType extends StaticDataFetcherItem>(disabled?: boolean) => SelectControlledTriggerProps;
|
package/useSelectTrigger.js
CHANGED
|
@@ -2,7 +2,7 @@ import './index.css';
|
|
|
2
2
|
import { useRef, useEffect, useCallback } from 'react';
|
|
3
3
|
import { keyboardMatches, keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';
|
|
4
4
|
import { useDataProvider } from './internal/SelectDataProvider.js';
|
|
5
|
-
import {
|
|
5
|
+
import { useSelectStore, useSelected } from './internal/SelectStateContext.js';
|
|
6
6
|
import { useVisibility } from './internal/VisibilityContext.js';
|
|
7
7
|
import { useFocusOrchestrator } from './internal/focusOrchestrator.js';
|
|
8
8
|
import { useSelectElementsValue, useRegisterSelectElementsSlot } from './internal/slots.js';
|
|
@@ -11,8 +11,8 @@ import 'react/jsx-runtime';
|
|
|
11
11
|
import '@hh.ru/magritte-common-data-provider';
|
|
12
12
|
import './internal/useDataProvider.js';
|
|
13
13
|
import './internal/SearchStateContext.js';
|
|
14
|
-
import './internal/useSelectState.js';
|
|
15
14
|
import './internal/ConfigContext.js';
|
|
15
|
+
import './internal/SelectStore.js';
|
|
16
16
|
import '@hh.ru/magritte-internal-slot-registry';
|
|
17
17
|
|
|
18
18
|
// TODO заводил под тест, хук только получает триггер, но нерегает его в сторе
|
|
@@ -31,7 +31,8 @@ const useSelectTrigger = (disabled) => {
|
|
|
31
31
|
const { showOptions, toggleListVisibility } = useVisibility();
|
|
32
32
|
const { optionList } = useDataProvider();
|
|
33
33
|
const orchestrator = useFocusOrchestrator();
|
|
34
|
-
const
|
|
34
|
+
const selectStore = useSelectStore();
|
|
35
|
+
const committedValues = useSelected(selectStore);
|
|
35
36
|
const selectedLabels = useSelectedLabels(committedValues);
|
|
36
37
|
// определяем источник фокуса - pointer или keyboard
|
|
37
38
|
useEffect(() => {
|
|
@@ -86,7 +87,7 @@ const useSelectTrigger = (disabled) => {
|
|
|
86
87
|
toggleListVisibility();
|
|
87
88
|
}
|
|
88
89
|
}, [showOptions, optionList.length, toggleListVisibility]);
|
|
89
|
-
const onClear = useCallback(() =>
|
|
90
|
+
const onClear = useCallback(() => selectStore.clear(), [selectStore]);
|
|
90
91
|
const onFocus = useCallback(() => {
|
|
91
92
|
if (disabled || showOptions) {
|
|
92
93
|
return;
|
package/useSelectTrigger.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSelectTrigger.js","sources":["src/useSelectTrigger.ts"],"sourcesContent":["import { KeyboardEventHandler, RefObject, useCallback, useRef, useEffect } from 'react';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport { keyboardKeys, keyboardMatch, keyboardMatches } from '@hh.ru/magritte-common-keyboard';\nimport { useDataProvider } from '@hh.ru/magritte-ui-new-select/internal/SelectDataProvider';\nimport {
|
|
1
|
+
{"version":3,"file":"useSelectTrigger.js","sources":["src/useSelectTrigger.ts"],"sourcesContent":["import { KeyboardEventHandler, RefObject, useCallback, useRef, useEffect } from 'react';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport { keyboardKeys, keyboardMatch, keyboardMatches } from '@hh.ru/magritte-common-keyboard';\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, useSelectElementsValue } from '@hh.ru/magritte-ui-new-select/internal/slots';\nimport { useSelectedLabels } from '@hh.ru/magritte-ui-new-select/internal/utils';\nimport { SelectControlledTriggerProps } from '@hh.ru/magritte-ui-new-select/types';\n\n// TODO заводил под тест, хук только получает триггер, но нерегает его в сторе\nexport const useGetTriggerRef = (): RefObject<HTMLElement> | undefined => {\n const activatorRef = useSelectElementsValue('activatorRef');\n return activatorRef;\n};\n\nexport const useTriggerRef = (): RefObject<HTMLElement> => {\n const activatorRef = useRef<HTMLElement>(null);\n useRegisterSelectElementsSlot('activatorRef', activatorRef);\n\n return activatorRef;\n};\n\nexport const useSelectTrigger = <DataType extends StaticDataFetcherItem>(\n disabled?: boolean\n): SelectControlledTriggerProps => {\n const showedByFocus = useRef(false);\n const focusedByPointer = useRef<boolean>(false);\n const { showOptions, toggleListVisibility } = useVisibility();\n const { optionList } = useDataProvider<DataType>();\n const orchestrator = useFocusOrchestrator();\n const selectStore = useSelectStore<DataType>();\n const committedValues = useSelected<DataType>(selectStore);\n const selectedLabels = useSelectedLabels(committedValues);\n\n // определяем источник фокуса - pointer или keyboard\n useEffect(() => {\n const onPointerDownDocument = () => {\n focusedByPointer.current = true;\n };\n const onKeyDownDocument = () => {\n focusedByPointer.current = false;\n };\n document.addEventListener('pointerdown', onPointerDownDocument, true);\n document.addEventListener('keydown', onKeyDownDocument, true);\n return () => {\n document.removeEventListener('pointerdown', onPointerDownDocument, true);\n document.removeEventListener('keydown', onKeyDownDocument, true);\n };\n }, []);\n\n // клавиатурная навигация вокруг тригера и списка\n const onKeyDown = useCallback<KeyboardEventHandler>(\n (event) => {\n // не хотим скролить дроп при использовании пробела\n if (!showOptions && keyboardMatches(event.nativeEvent, [keyboardKeys.Space])) {\n event.preventDefault();\n return;\n }\n\n // закрытие и переброс фокуса на тригер\n if (showOptions && keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {\n showedByFocus.current = false;\n orchestrator.yieldFocus();\n toggleListVisibility();\n return;\n }\n\n // TODO использовать orchestrator и отправлять фокус по стрелкам в дроп\n\n // после закрытия пользователь решил что-то поделать опять\n if (\n !showOptions &&\n !keyboardMatches(event.nativeEvent, [keyboardKeys.Tab, keyboardKeys.Escape, keyboardKeys.Space])\n ) {\n toggleListVisibility();\n }\n },\n [showOptions, orchestrator, toggleListVisibility]\n );\n\n // открытие/закрытие тригера\n const onChange = useCallback(() => {\n if (disabled) {\n return;\n }\n if (showedByFocus.current) {\n showedByFocus.current = false;\n return;\n }\n toggleListVisibility();\n }, [disabled, toggleListVisibility]);\n\n const onBlur = useCallback(() => {\n // TODO тут что-то про подсказки было\n if (showOptions && optionList.length === 0) {\n toggleListVisibility();\n }\n }, [showOptions, optionList.length, toggleListVisibility]);\n\n const onClear = useCallback(() => selectStore.clear(), [selectStore]);\n\n const onFocus = useCallback(() => {\n if (disabled || showOptions) {\n return;\n }\n if (focusedByPointer.current) {\n showedByFocus.current = true;\n toggleListVisibility();\n }\n }, [disabled, showOptions, toggleListVisibility]);\n\n return {\n expanded: showOptions,\n onBlur,\n onChange,\n onClear,\n onKeyDown,\n onFocus,\n values: selectedLabels,\n };\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';
|
|
2
|
-
import { ValueTypeHelper, OnChangeAction } from '@hh.ru/magritte-ui-new-select/types';
|
|
3
|
-
export declare const getToggledValues: <DataType extends StaticDataFetcherItem>(state: DataType[], value: DataType, needToPut: boolean, multiple?: boolean) => DataType[];
|
|
4
|
-
export interface UseSelectState<MultipleType extends boolean, DataType extends StaticDataFetcherItem> {
|
|
5
|
-
clearSelectedValues: VoidFunction;
|
|
6
|
-
clearSelectedValuesByTrigger: VoidFunction;
|
|
7
|
-
committedValues: ValueTypeHelper<MultipleType, DataType>;
|
|
8
|
-
setInitialValues: VoidFunction;
|
|
9
|
-
setInitialValuesOnClosePicker: VoidFunction;
|
|
10
|
-
values: ValueTypeHelper<MultipleType, DataType>;
|
|
11
|
-
valuesLength: number;
|
|
12
|
-
hasUnsavedChanges: boolean;
|
|
13
|
-
onChange: OnChangeAction<DataType>;
|
|
14
|
-
setSelectedValues: VoidFunction;
|
|
15
|
-
}
|
|
16
|
-
export declare const useSelectState: <MultipleType extends boolean, DataType extends StaticDataFetcherItem>(value: DataType[] | DataType, onChangeExternal?: (value: ValueTypeHelper<MultipleType, DataType>) => void, onSelectOption?: (values: DataType[]) => void) => UseSelectState<MultipleType, DataType>;
|
|
@@ -1,146 +0,0 @@
|
|
|
1
|
-
import './../index.css';
|
|
2
|
-
import { useReducer, useRef, useState, useCallback, useEffect, useMemo } from 'react';
|
|
3
|
-
import { useSelectConfig } from './ConfigContext.js';
|
|
4
|
-
import { useVisibility } from './VisibilityContext.js';
|
|
5
|
-
import { isArraysEquals } from './utils.js';
|
|
6
|
-
import 'react/jsx-runtime';
|
|
7
|
-
import '@hh.ru/magritte-common-keyboard';
|
|
8
|
-
|
|
9
|
-
const TOGGLE = 'TOGGLE';
|
|
10
|
-
const SET = 'SET';
|
|
11
|
-
const SYNC = 'SYNC';
|
|
12
|
-
const CLEAR = 'CLEAR';
|
|
13
|
-
const getToggledValues = (state, value, needToPut, multiple) => {
|
|
14
|
-
if (!multiple) {
|
|
15
|
-
return [value];
|
|
16
|
-
}
|
|
17
|
-
return needToPut ? [...state, value] : state.filter((item) => item.value !== value.value);
|
|
18
|
-
};
|
|
19
|
-
const reducer = (state, action) => {
|
|
20
|
-
switch (action.type) {
|
|
21
|
-
case TOGGLE:
|
|
22
|
-
return getToggledValues(state, action.value, action.needToPut, action.multiple);
|
|
23
|
-
case SET:
|
|
24
|
-
return [...action.payload];
|
|
25
|
-
case SYNC:
|
|
26
|
-
// синхронизация из внешнего value
|
|
27
|
-
return isArraysEquals(action.payload, state) ? state : [...action.payload];
|
|
28
|
-
case CLEAR:
|
|
29
|
-
return [];
|
|
30
|
-
default:
|
|
31
|
-
return state;
|
|
32
|
-
}
|
|
33
|
-
};
|
|
34
|
-
const useSelectState = (value, onChangeExternal, onSelectOption) => {
|
|
35
|
-
const { showOptions } = useVisibility();
|
|
36
|
-
const { multiple, commitModel } = useSelectConfig();
|
|
37
|
-
const valuesAsArray = Array.isArray(value) ? value : [value];
|
|
38
|
-
const [state, dispatch] = useReducer((reducer), valuesAsArray);
|
|
39
|
-
/**
|
|
40
|
-
* внешние снапшоты значений
|
|
41
|
-
* committed - отдано наружу (есть гард onChange)
|
|
42
|
-
* openBaseline - черновик на момент открытия пикера
|
|
43
|
-
*/
|
|
44
|
-
const snapshotsRef = useRef({ committed: valuesAsArray, openBaseline: [] });
|
|
45
|
-
// реактивная копия committed для отрисовки (триггер показывает применённое, а не черновик)
|
|
46
|
-
const [committed, setCommitted] = useState(valuesAsArray);
|
|
47
|
-
const mountBaselineRef = useRef(valuesAsArray);
|
|
48
|
-
// эмит и гард
|
|
49
|
-
const commit = useCallback((values, emit = true) => {
|
|
50
|
-
if (emit) {
|
|
51
|
-
const hasUnsavedChanges = !isArraysEquals(snapshotsRef.current.committed.map((item) => item.value), values.map((item) => item.value));
|
|
52
|
-
if (hasUnsavedChanges) {
|
|
53
|
-
onChangeExternal?.((multiple ? values : values[0]));
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
snapshotsRef.current.committed = values;
|
|
57
|
-
setCommitted((prev) => isArraysEquals(prev.map((item) => item.value), values.map((item) => item.value))
|
|
58
|
-
? prev
|
|
59
|
-
: values);
|
|
60
|
-
}, [multiple, onChangeExternal]);
|
|
61
|
-
// снимок черновика на открытии пикера
|
|
62
|
-
useEffect(() => {
|
|
63
|
-
if (showOptions) {
|
|
64
|
-
snapshotsRef.current.openBaseline = state;
|
|
65
|
-
}
|
|
66
|
-
// eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps
|
|
67
|
-
}, [showOptions]);
|
|
68
|
-
// синхронизация с внешним value
|
|
69
|
-
useEffect(() => {
|
|
70
|
-
const newValues = Array.isArray(value) ? value : [value];
|
|
71
|
-
dispatch({ type: SYNC, payload: newValues });
|
|
72
|
-
// без эмита, так как внешний стейт уже все знает
|
|
73
|
-
commit(newValues, false);
|
|
74
|
-
}, [commit, value]);
|
|
75
|
-
// используется для креста на тригере
|
|
76
|
-
const clearSelectedValuesByTrigger = useCallback(() => {
|
|
77
|
-
dispatch({ type: CLEAR });
|
|
78
|
-
commit([]);
|
|
79
|
-
}, [commit]);
|
|
80
|
-
// для кнопки очистки в пикере
|
|
81
|
-
const clearSelectedValues = useCallback((applyOnClear = true) => {
|
|
82
|
-
dispatch({ type: CLEAR });
|
|
83
|
-
if (applyOnClear) {
|
|
84
|
-
commit([]);
|
|
85
|
-
}
|
|
86
|
-
}, [commit]);
|
|
87
|
-
// сброс стейта в пикере на кнопке сброса
|
|
88
|
-
const setInitialValues = useCallback((applyOnClear = true) => {
|
|
89
|
-
dispatch({ type: SET, payload: mountBaselineRef.current });
|
|
90
|
-
if (applyOnClear) {
|
|
91
|
-
commit(mountBaselineRef.current);
|
|
92
|
-
}
|
|
93
|
-
}, [commit]);
|
|
94
|
-
// откат черновика при закрытии пикера
|
|
95
|
-
const setInitialValuesOnClosePicker = useCallback(() => {
|
|
96
|
-
const { openBaseline, committed } = snapshotsRef.current;
|
|
97
|
-
// если за сессию открытия ничего не закоммитили => возвращаем черновик к бейзлайну открытия
|
|
98
|
-
const nothingCommittedSinceOpen = isArraysEquals(openBaseline.map((item) => item.value), committed.map((item) => item.value));
|
|
99
|
-
if (nothingCommittedSinceOpen) {
|
|
100
|
-
dispatch({ type: SET, payload: openBaseline });
|
|
101
|
-
}
|
|
102
|
-
}, []);
|
|
103
|
-
const onChange = useCallback((value, needToPut) => {
|
|
104
|
-
// эффектам нужно новое значение до применения стейта
|
|
105
|
-
const newValue = getToggledValues(state, value, needToPut, multiple);
|
|
106
|
-
dispatch({ type: TOGGLE, value, needToPut, multiple });
|
|
107
|
-
onSelectOption?.(newValue);
|
|
108
|
-
if (commitModel === 'instant') {
|
|
109
|
-
commit(newValue);
|
|
110
|
-
}
|
|
111
|
-
}, [commitModel, multiple, state, commit, onSelectOption]);
|
|
112
|
-
// применение черновик
|
|
113
|
-
const setSelectedValues = useCallback(() => {
|
|
114
|
-
commit(state);
|
|
115
|
-
}, [commit, state]);
|
|
116
|
-
// флаг для алерта при несохраненных изменениях
|
|
117
|
-
const hasUnsavedChanges = !isArraysEquals(snapshotsRef.current.committed.map((item) => item.value), state.map((item) => item.value));
|
|
118
|
-
const values = (multiple ? state : state[0]);
|
|
119
|
-
const committedValues = (multiple ? committed : committed[0]);
|
|
120
|
-
return useMemo(() => ({
|
|
121
|
-
clearSelectedValues,
|
|
122
|
-
clearSelectedValuesByTrigger,
|
|
123
|
-
committedValues,
|
|
124
|
-
onChange,
|
|
125
|
-
setInitialValues,
|
|
126
|
-
setInitialValuesOnClosePicker,
|
|
127
|
-
setSelectedValues,
|
|
128
|
-
valuesLength: state.length,
|
|
129
|
-
values,
|
|
130
|
-
hasUnsavedChanges,
|
|
131
|
-
}), [
|
|
132
|
-
clearSelectedValues,
|
|
133
|
-
clearSelectedValuesByTrigger,
|
|
134
|
-
committedValues,
|
|
135
|
-
onChange,
|
|
136
|
-
setInitialValues,
|
|
137
|
-
setInitialValuesOnClosePicker,
|
|
138
|
-
setSelectedValues,
|
|
139
|
-
state.length,
|
|
140
|
-
values,
|
|
141
|
-
hasUnsavedChanges,
|
|
142
|
-
]);
|
|
143
|
-
};
|
|
144
|
-
|
|
145
|
-
export { getToggledValues, useSelectState };
|
|
146
|
-
//# sourceMappingURL=useSelectState.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useSelectState.js","sources":["src/internal/useSelectState.ts"],"sourcesContent":["import { useCallback, useReducer, useEffect, useRef, useMemo, useState } from 'react';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport { useSelectConfig } from '@hh.ru/magritte-ui-new-select/internal/ConfigContext';\nimport { useVisibility } from '@hh.ru/magritte-ui-new-select/internal/VisibilityContext';\nimport { isArraysEquals } from '@hh.ru/magritte-ui-new-select/internal/utils';\nimport { ValueTypeHelper, OnChangeAction } from '@hh.ru/magritte-ui-new-select/types';\n\nconst TOGGLE = 'TOGGLE';\nconst SET = 'SET';\nconst SYNC = 'SYNC';\nconst CLEAR = 'CLEAR';\n\ntype SelectStateAction<DataType extends StaticDataFetcherItem> =\n | { type: typeof TOGGLE; value: DataType; needToPut: boolean; multiple?: boolean }\n | { type: typeof SET; payload: DataType[] }\n | { type: typeof SYNC; payload: DataType[] }\n | { type: typeof CLEAR };\n\nexport const getToggledValues = <DataType extends StaticDataFetcherItem>(\n state: DataType[],\n value: DataType,\n needToPut: boolean,\n multiple?: boolean\n): DataType[] => {\n if (!multiple) {\n return [value];\n }\n return needToPut ? [...state, value] : state.filter((item) => item.value !== value.value);\n};\n\nconst reducer = <DataType extends StaticDataFetcherItem>(\n state: DataType[],\n action: SelectStateAction<DataType>\n): DataType[] => {\n switch (action.type) {\n case TOGGLE:\n return getToggledValues(state, action.value, action.needToPut, action.multiple);\n case SET:\n return [...action.payload];\n case SYNC:\n // синхронизация из внешнего value\n return isArraysEquals(action.payload, state) ? state : [...action.payload];\n case CLEAR:\n return [];\n default:\n return state;\n }\n};\n\nexport interface UseSelectState<MultipleType extends boolean, DataType extends StaticDataFetcherItem> {\n clearSelectedValues: VoidFunction;\n clearSelectedValuesByTrigger: VoidFunction;\n committedValues: ValueTypeHelper<MultipleType, DataType>;\n setInitialValues: VoidFunction;\n setInitialValuesOnClosePicker: VoidFunction;\n values: ValueTypeHelper<MultipleType, DataType>;\n valuesLength: number;\n hasUnsavedChanges: boolean;\n onChange: OnChangeAction<DataType>;\n setSelectedValues: VoidFunction;\n}\n\nexport const useSelectState = <MultipleType extends boolean, DataType extends StaticDataFetcherItem>(\n value: DataType[] | DataType,\n onChangeExternal?: (value: ValueTypeHelper<MultipleType, DataType>) => void,\n onSelectOption?: (values: DataType[]) => void\n): UseSelectState<MultipleType, DataType> => {\n const { showOptions } = useVisibility();\n const { multiple, commitModel } = useSelectConfig();\n const valuesAsArray = Array.isArray(value) ? value : [value];\n const [state, dispatch] = useReducer(reducer<DataType>, valuesAsArray);\n\n /**\n * внешние снапшоты значений\n * committed - отдано наружу (есть гард onChange)\n * openBaseline - черновик на момент открытия пикера\n */\n const snapshotsRef = useRef({ committed: valuesAsArray, openBaseline: [] as DataType[] });\n // реактивная копия committed для отрисовки (триггер показывает применённое, а не черновик)\n const [committed, setCommitted] = useState(valuesAsArray);\n const mountBaselineRef = useRef(valuesAsArray);\n\n // эмит и гард\n const commit = useCallback(\n (values: DataType[], emit = true) => {\n if (emit) {\n const hasUnsavedChanges = !isArraysEquals<string>(\n snapshotsRef.current.committed.map((item) => item.value),\n values.map((item) => item.value)\n );\n if (hasUnsavedChanges) {\n onChangeExternal?.((multiple ? values : values[0]) as ValueTypeHelper<MultipleType, DataType>);\n }\n }\n snapshotsRef.current.committed = values;\n setCommitted((prev) =>\n isArraysEquals<string>(\n prev.map((item) => item.value),\n values.map((item) => item.value)\n )\n ? prev\n : values\n );\n },\n [multiple, onChangeExternal]\n );\n\n // снимок черновика на открытии пикера\n useEffect(() => {\n if (showOptions) {\n snapshotsRef.current.openBaseline = state;\n }\n // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n }, [showOptions]);\n\n // синхронизация с внешним value\n useEffect(() => {\n const newValues = Array.isArray(value) ? value : [value];\n dispatch({ type: SYNC, payload: newValues });\n // без эмита, так как внешний стейт уже все знает\n commit(newValues, false);\n }, [commit, value]);\n\n // используется для креста на тригере\n const clearSelectedValuesByTrigger = useCallback(() => {\n dispatch({ type: CLEAR });\n commit([]);\n }, [commit]);\n\n // для кнопки очистки в пикере\n const clearSelectedValues = useCallback(\n (applyOnClear = true) => {\n dispatch({ type: CLEAR });\n if (applyOnClear) {\n commit([]);\n }\n },\n [commit]\n );\n\n // сброс стейта в пикере на кнопке сброса\n const setInitialValues = useCallback(\n (applyOnClear = true) => {\n dispatch({ type: SET, payload: mountBaselineRef.current });\n if (applyOnClear) {\n commit(mountBaselineRef.current);\n }\n },\n [commit]\n );\n\n // откат черновика при закрытии пикера\n const setInitialValuesOnClosePicker = useCallback(() => {\n const { openBaseline, committed } = snapshotsRef.current;\n // если за сессию открытия ничего не закоммитили => возвращаем черновик к бейзлайну открытия\n const nothingCommittedSinceOpen = isArraysEquals<string>(\n openBaseline.map((item) => item.value),\n committed.map((item) => item.value)\n );\n if (nothingCommittedSinceOpen) {\n dispatch({ type: SET, payload: openBaseline });\n }\n }, []);\n\n const onChange = useCallback<UseSelectState<MultipleType, DataType>['onChange']>(\n (value, needToPut) => {\n // эффектам нужно новое значение до применения стейта\n const newValue = getToggledValues(state, value, needToPut, multiple);\n dispatch({ type: TOGGLE, value, needToPut, multiple });\n onSelectOption?.(newValue);\n if (commitModel === 'instant') {\n commit(newValue);\n }\n },\n [commitModel, multiple, state, commit, onSelectOption]\n );\n\n // применение черновик\n const setSelectedValues = useCallback(() => {\n commit(state);\n }, [commit, state]);\n\n // флаг для алерта при несохраненных изменениях\n const hasUnsavedChanges = !isArraysEquals<string>(\n snapshotsRef.current.committed.map((item) => item.value),\n state.map((item) => item.value)\n );\n\n const values = (multiple ? state : state[0]) as ValueTypeHelper<MultipleType, DataType>;\n const committedValues = (multiple ? committed : committed[0]) as ValueTypeHelper<MultipleType, DataType>;\n return useMemo<UseSelectState<MultipleType, DataType>>(\n () => ({\n clearSelectedValues,\n clearSelectedValuesByTrigger,\n committedValues,\n onChange,\n setInitialValues,\n setInitialValuesOnClosePicker,\n setSelectedValues,\n valuesLength: state.length,\n values,\n hasUnsavedChanges,\n }),\n [\n clearSelectedValues,\n clearSelectedValuesByTrigger,\n committedValues,\n onChange,\n setInitialValues,\n setInitialValuesOnClosePicker,\n setSelectedValues,\n state.length,\n values,\n hasUnsavedChanges,\n ]\n );\n};\n"],"names":[],"mappings":"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"}
|