npm - @ryuzaki13/react-foundation-ui - Versions diffs - 3.3.0 → 3.3.2 - Mend

@ryuzaki13/react-foundation-ui 3.3.0 → 3.3.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.

Files changed (264) hide show

package/dist/chunks/ui.module-oRwY3Zli.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ui.module-oRwY3Zli.js","names":[],"sources":["../../src/ui.module.scss"],"sourcesContent":["@use \"@/styles/mixins\" as ;\n@use \"@/styles/tone-derived\" as toneDerived;\n\n.uiSizable {\n\t--base-width: 100%;\n\n\twidth: var(--base-width);\n\n\t&.xs {\n\t\t--base-width: calc(var(--drp-ui-width-xs, var(--ui-width-xs)) - var(--width-add));\n\t}\n\n\t&.sm {\n\t\t--base-width: calc(var(--drp-ui-width-sm, var(--ui-width-sm)) - var(--width-add));\n\t}\n\n\t&.md {\n\t\t--base-width: calc(var(--drp-ui-width-md, var(--ui-width-md)) - var(--width-add));\n\t}\n\n\t&.lg {\n\t\t--base-width: calc(var(--drp-ui-width-lg, var(--ui-width-lg)) - var(--width-add));\n\t}\n\n\t&.xl {\n\t\t--base-width: calc(var(--drp-ui-width-xl, var(--ui-width-xl)) - var(--width-add));\n\t}\n}\n\n// TODO: Тестовый класс\n.uiErrorElement {\n\t--grid-size: var(--space-sm);\n\t--grid-line-size: var(--border-width);\n\t@include toneDerived.tone-soft-declaration(\"--grid-line-color\", \"error\");\n\n\theight: var(--control-height);\n\twidth: 100%; // calc(10em - var(--width-add));\n\tflex-shrink: 0;\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\n\tborder: var(--focus-width) solid var(--error-border);\n\tborder-radius: var(--radius-sm);\n\toutline: none;\n\n\tfont-weight: 700;\n\tfont-variation-settings: \"wght\" 700;\n\n\tcolor: var(--error-text);\n\tbackground-color: var(--surface-0);\n\tbackground-image:\n\t\trepeating-linear-gradient(\n\t\t\t45deg,\n\t\t\tvar(--grid-line-color) 0 var(--grid-line-size),\n\t\t\ttransparent var(--grid-line-size) var(--grid-size)\n\t\t),\n\t\trepeating-linear-gradient(\n\t\t\t-45deg,\n\t\t\tvar(--grid-line-color) 0 var(--grid-line-size),\n\t\t\ttransparent var(--grid-line-size) var(--grid-size)\n\t\t);\n}\n\n.uiContainer {\n\tposition: relative;\n\twidth: 100%;\n}\n\n.uiInputContainer {\n\t@extend .uiContainer;\n\n\t--padding-right: var(--control-height);\n}\n\n.uiLabelBase {\n\tdisplay: inline-block;\n\tfont-weight: 400;\n\tfont-variation-settings: \"wght\" 400;\n}\n\n.uiLabel {\n\t@extend .uiLabelBase;\n\n\tmargin-block: var(--space-xs);\n}\n\n.uiDescription {\n\t--paragraph-margin: 0;\n\n\tpadding-bottom: var(--space-xs);\n\tcolor: var(--content-1);\n\tfont-weight: 300;\n\tfont-variation-settings: \"wght\" 300;\n}\n\n.uiLabel,\n.uiDescription {\n\tmargin-inline: var(--space-xs);\n}\n\n.uiPlaceholder {\n\tcolor: var(--content-2);\n\tfont-weight: 100;\n\tfont-variation-settings: \"wght\" 100;\n\t// font-size: var(--font-size-sm);\n\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.required {\n\t.uiLabelBase::after {\n\t\tcontent: \" \";\n\t\tcolor: var(--error-text);\n\t}\n}\n\n.uiControl {\n\t@include ui-tone(\"neutral\");\n\t@include ui-appearance-outline;\n\t@include ui-control-base;\n\n\t--ui-radius: var(--radius-sm);\n\n\t&.invalid,\n\t&:invalid {\n\t\t@include ui-tone(\"error\");\n\t\t@include ui-appearance-outline;\n\t}\n\n\t&::placeholder {\n\t\t@extend .uiPlaceholder;\n\t}\n}\n\n.uiToneNeutral {\n\t@include ui-tone(\"neutral\");\n}\n\n.uiToneAccent {\n\t@include ui-tone(\"accent\");\n}\n\n.uiToneBrand {\n\t@include ui-tone(\"brand\");\n}\n\n.uiToneError {\n\t@include ui-tone(\"error\");\n}\n\n.uiToneWarning {\n\t@include ui-tone(\"warning\");\n}\n\n.uiToneSuccess {\n\t@include ui-tone(\"success\");\n}\n\n.uiToneInfo {\n\t@include ui-tone(\"info\");\n}\n\n.uiAppearanceSolid {\n\t@include ui-appearance-solid;\n}\n\n.uiAppearanceOutline {\n\t@include ui-appearance-outline;\n}\n\n.uiAppearanceGhost {\n\t@include ui-appearance-ghost;\n}\n\n.uiAppearanceTransparent {\n\t@include ui-appearance-transparent;\n}\n\n.uiInputControl {\n\t@extend .uiControl;\n\n\theight: var(--control-height);\n}\n\n.uiInputWithToggle {\n\t@extend .uiInputControl;\n\n\tcolor: var(--content-0);\n\n\tpadding: 0 var(--padding-right) 0 var(--space-sm);\n\twidth: 100%;\n\ttext-align: left;\n\n\t// &[type=\"button\"] {\n\t// \twhite-space: nowrap;\n\t// }\n}\n\n.uiSelectionControl {\n\t@include ui-control-base;\n\n\t--ui-color: var(--content-0);\n\t--ui-color-hover: var(--content-0);\n\t--ui-color-active: var(--content-0);\n\t--ui-background: var(--surface-0);\n\t--ui-background-hover: var(--ui-tone-soft);\n\t--ui-background-active: var(--ui-tone-soft);\n\t--ui-border-color: var(--ui-tone-border);\n\t--ui-border-hover: var(--ui-tone-border-hover);\n\t--ui-border-active: var(--ui-tone-border-active);\n\t--ui-border-focus: var(--ui-tone-border-focus);\n\n\tappearance: none;\n\tmargin: 0;\n\tcursor: pointer;\n\n\t&:checked {\n\t\tborder-color: var(--ui-tone-border-active);\n\n\t\t& + .uiSelectionIcon {\n\t\t\tcolor: var(--ui-tone-fill);\n\t\t}\n\t}\n\n\t&:disabled {\n\t\tcursor: default;\n\n\t\tborder-color: var(--border-0);\n\n\t\t&:checked {\n\t\t\t& + .uiSelectionIcon {\n\t\t\t\tcolor: var(--border-0);\n\t\t\t}\n\t\t}\n\t}\n}\n\n.uiSelectionIcon {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%);\n\tpointer-events: none;\n\tcolor: transparent;\n\ttransition:\n\t\tcolor var(--transition-fast) ease,\n\t\topacity var(--transition-fast) ease;\n}\n\n.uiElement,\n.uiPopupOption {\n\t&.disabled,\n\t&:disabled {\n\t\tuser-select: none;\n\n\t\t.uiLabel,\n\t\t.uiDescription {\n\t\t\tcolor: var(--content-2);\n\t\t}\n\n\t\t.uiPlaceholder,\n\t\t.uiOptionText,\n\t\t.uiOptionCode {\n\t\t\topacity: 0.25;\n\t\t}\n\t}\n\n\t// Класс disabled используется у составных ненативных элементов: им нужно явно запретить события.\n\t&.disabled {\n\t\tcursor: default;\n\t\tpointer-events: none;\n\t}\n\n\t// Нативный disabled уже блокирует активацию, а pointer-events остаются для курсора и tooltip.\n\t&:disabled {\n\t\tcursor: not-allowed;\n\t}\n}\n\n.uiPanelTonePrimary {\n\t--ui-panel-background: var(--surface-0);\n}\n\n.uiPanelToneSecondary {\n\t--ui-panel-background: var(--surface-1);\n}\n\n.uiPanelToneTertiary {\n\t--ui-panel-background: var(--surface-2);\n}\n\n.uiFilledPanel {\n\tbackground-color: var(--ui-panel-background, var(--surface-0));\n}\n\n.uiFramedPanel {\n\tborder: var(--border);\n\tborder-radius: var(--radius-sm);\n\tpadding: var(--space-sm);\n}\n\n.uiPanel {\n\t@extend .uiFramedPanel;\n\t@extend .uiFilledPanel;\n}\n\n.uiStateFocus {\n\t@include focusVisible;\n\n\tbackground-color: var(--surface-1);\n\tborder-color: var(--border-1);\n\tcursor: pointer;\n}\n\n.uiOptionBase {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-start;\n\tgap: var(--space-sm);\n\theight: 100%;\n\twidth: 100%;\n\ttext-align: left;\n}\n\n.uiPopupOption {\n\t@extend .uiOptionBase;\n\n\theight: auto;\n\tmin-height: var(--control-height);\n}\n\n.uiPopupOption {\n\tborder-radius: var(--radius-sm);\n\tborder: none;\n\tbackground-color: transparent;\n\tcolor: var(--content-0);\n\n\ttransition:\n\t\tbackground-color var(--transition-fast) ease,\n\t\tcolor var(--transition-fast) ease;\n\n\t.uiMenuOptionIcon,\n\t.uiPopupOptionIcon {\n\t\tflex-shrink: 0;\n\t\tfont-size: var(--font-size-sm);\n\t\twidth: var(--icon-size);\n\t\theight: var(--icon-size);\n\t}\n\n\t.uiMenuOptionIcon,\n\t.keyboard {\n\t\tcolor: var(--content-2);\n\t}\n\n\t&.selected {\n\t\tcolor: var(--accent-on-fill);\n\t\tbackground-color: var(--accent-fill);\n\t\tcursor: default;\n\t}\n\n\t@include hover(true, false) {\n\t\tcolor: var(--accent-text-hover);\n\t\tbackground-color: var(--accent-fill-hover);\n\t\tcursor: pointer;\n\t}\n\n\t// Active идёт после hover, чтобы нажатие не теряло своё состояние у мыши и touch-устройств.\n\t&.uiPopupOptionActive,\n\t&:active {\n\t\tcolor: var(--accent-text-active);\n\t\tbackground-color: var(--accent-fill-active);\n\t}\n\n\t&.disabled {\n\t\t// background-color: var(--surface-2);\n\t\tcolor: var(--content-2);\n\t}\n\n\t&:focus-within {\n\t\t// @extend .uiStateFocus;\n\t\t@include focusVisible;\n\t}\n}\n\n.uiOptionButton,\n.uiOptionLink {\n\t@extend .uiOptionBase;\n\n\tflex: 1 1 0;\n\tmin-width: 0;\n\theight: 100%;\n\tpadding: var(--space-xs) var(--space-sm);\n\tborder: none;\n\tborder-radius: inherit;\n\toutline: none;\n\tbackground: transparent;\n\tcolor: inherit;\n\tcursor: inherit;\n\ttext-decoration: none;\n}\n\n.uiPopupOptionSeparator {\n\tborder-top: var(--border);\n\tmargin-block: var(--space-xs);\n}\n\n.uiPopupGroupLabel {\n\tpadding: var(--space-xs) var(--space-sm);\n\tcolor: var(--content-2);\n\tfont-weight: 300;\n\ttext-transform: uppercase;\n\tfont-size: var(--font-size-sm);\n}\n\n.uiMenuOptionIcon {\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.uiOptionText {\n\t// font-size: var(--font-size-sm);\n\tflex: 1;\n\tmin-width: 0;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.uiOptionCode {\n\tfont-family: var(--font-family-mono);\n\t// font-size: var(--font-size-sm);\n\tcolor: var(--content-1);\n\tfont-weight: 300;\n\tfont-variation-settings: \"wght\" 300;\n}\n\n.uiOptionContentEmphasize {\n\tfont-weight: 600;\n\tfont-variation-settings: \"wght\" 600;\n}\n\n.uiToggleButtonContainer {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n\theight: 100%;\n\twidth: 100%;\n\n\ttransition-property: width;\n\ttransition-duration: var(--transition-fast);\n\ttransition-timing-function: cubic-bezier(1, 0, 0.5, 0.5);\n\n\t> button {\n\t\tbackground: transparent;\n\t\tborder: none;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\theight: var(--control-height);\n\t\twidth: var(--control-height);\n\t\tborder-radius: var(--radius-sm);\n\t\tflex: 0 0 var(--control-height);\n\t}\n\n\t// &[data-disabled] {\n\t// \tcursor: default;\n\t// \tpointer-events: none;\n\t// \topacity: var(--disabled-opacity);\n\t// }\n}\n\n.uiToggleButton {\n\tcolor: var(--content-0);\n\n\t&:hover {\n\t\tcolor: var(--accent-text);\n\t}\n}\n\n.uiToggleIcon {\n\ttransition: transform var(--transition-fast) ease-in-out;\n\n\t&.uiToggleIconOpen {\n\t\ttransform: rotate(180deg);\n\t}\n}\n\n// TODO: пока в свалку стили для дата-подобных компонентов\n\n// Для компонентов, который не являются input, но выставляют себя за него\n.uiInputControlFake {\n\t@extend .uiInputControl;\n\n\twidth: 100%;\n\tpadding: 0 var(--space-sm);\n\tfont-size: var(--font-size-md);\n\n\tdisplay: flex;\n\talign-items: center;\n\n\tcursor: text;\n}\n\n.uiClearButton {\n\tcolor: var(--error-text);\n\n\t&:disabled {\n\t\topacity: 0;\n\t\tpointer-events: none;\n\t\twidth: 0;\n\t\theight: 0;\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\toverflow: hidden;\n\t}\n}\n\n.uiButtonSeparator {\n\tborder-left: var(--border);\n\theight: calc(100% - var(--space-sm));\n}\n"],"mappings":""}
1	+ {"version":3,"file":"ui.module-oRwY3Zli.js","names":[],"sources":["../../src/ui.module.scss"],"sourcesContent":["@use \"@/styles/mixins\" as ;\n@use \"@/styles/tone-derived\" as toneDerived;\n\n.uiSizable {\n\t--base-width: 100%;\n\n\twidth: var(--base-width);\n\n\t&.xs {\n\t\t--base-width: calc(var(--drp-ui-width-xs, var(--ui-width-xs)) - var(--width-add));\n\t}\n\n\t&.sm {\n\t\t--base-width: calc(var(--drp-ui-width-sm, var(--ui-width-sm)) - var(--width-add));\n\t}\n\n\t&.md {\n\t\t--base-width: calc(var(--drp-ui-width-md, var(--ui-width-md)) - var(--width-add));\n\t}\n\n\t&.lg {\n\t\t--base-width: calc(var(--drp-ui-width-lg, var(--ui-width-lg)) - var(--width-add));\n\t}\n\n\t&.xl {\n\t\t--base-width: calc(var(--drp-ui-width-xl, var(--ui-width-xl)) - var(--width-add));\n\t}\n}\n\n// TODO: Тестовый класс\n.uiErrorElement {\n\t--grid-size: var(--space-sm);\n\t--grid-line-size: var(--border-width);\n\t@include toneDerived.tone-soft-declaration(\"--grid-line-color\", \"error\");\n\n\theight: var(--control-height);\n\twidth: 100%; // calc(10em - var(--width-add));\n\tflex-shrink: 0;\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\n\tborder: var(--focus-width) solid var(--error-border);\n\tborder-radius: var(--radius-sm);\n\toutline: none;\n\n\tfont-weight: 700;\n\tfont-variation-settings: \"wght\" 700;\n\n\tcolor: var(--error-text);\n\tbackground-color: var(--surface-0);\n\tbackground-image:\n\t\trepeating-linear-gradient(\n\t\t\t45deg,\n\t\t\tvar(--grid-line-color) 0 var(--grid-line-size),\n\t\t\ttransparent var(--grid-line-size) var(--grid-size)\n\t\t),\n\t\trepeating-linear-gradient(\n\t\t\t-45deg,\n\t\t\tvar(--grid-line-color) 0 var(--grid-line-size),\n\t\t\ttransparent var(--grid-line-size) var(--grid-size)\n\t\t);\n}\n\n.uiContainer {\n\tposition: relative;\n\twidth: 100%;\n}\n\n.uiInputContainer {\n\t@extend .uiContainer;\n\n\t--padding-right: var(--control-height);\n}\n\n.uiLabelBase {\n\tdisplay: inline-block;\n\tfont-weight: 400;\n\tfont-variation-settings: \"wght\" 400;\n}\n\n.uiLabel {\n\t@extend .uiLabelBase;\n\n\tmargin-block: var(--space-xs);\n}\n\n.uiDescription {\n\t--paragraph-margin: 0;\n\n\tpadding-bottom: var(--space-xs);\n\tcolor: var(--content-1);\n\tfont-weight: 300;\n\tfont-variation-settings: \"wght\" 300;\n}\n\n.uiLabel,\n.uiDescription {\n\tmargin-inline: var(--space-xs);\n}\n\n.uiPlaceholder {\n\tcolor: var(--content-2);\n\tfont-weight: 100;\n\tfont-variation-settings: \"wght\" 100;\n\t// font-size: var(--font-size-sm);\n\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.required {\n\t.uiLabelBase::after {\n\t\tcontent: \" \";\n\t\tcolor: var(--error-text);\n\t}\n}\n\n.uiControl {\n\t@include ui-tone(\"neutral\");\n\t@include ui-appearance-outline;\n\t@include ui-control-base;\n\n\t--ui-radius: var(--radius-sm);\n\n\t&.invalid,\n\t&:invalid {\n\t\t@include ui-tone(\"error\");\n\t\t@include ui-appearance-outline;\n\t}\n\n\t&::placeholder {\n\t\t@extend .uiPlaceholder;\n\t}\n}\n\n.uiToneNeutral {\n\t@include ui-tone(\"neutral\");\n}\n\n.uiToneAccent {\n\t@include ui-tone(\"accent\");\n}\n\n.uiToneBrand {\n\t@include ui-tone(\"brand\");\n}\n\n.uiToneError {\n\t@include ui-tone(\"error\");\n}\n\n.uiToneWarning {\n\t@include ui-tone(\"warning\");\n}\n\n.uiToneSuccess {\n\t@include ui-tone(\"success\");\n}\n\n.uiToneInfo {\n\t@include ui-tone(\"info\");\n}\n\n.uiAppearanceSolid {\n\t@include ui-appearance-solid;\n}\n\n.uiAppearanceOutline {\n\t@include ui-appearance-outline;\n}\n\n.uiAppearanceGhost {\n\t@include ui-appearance-ghost;\n}\n\n.uiAppearanceTransparent {\n\t@include ui-appearance-transparent;\n}\n\n.uiInputControl {\n\t@extend .uiControl;\n\n\theight: var(--control-height);\n}\n\n.uiInputWithToggle {\n\t@extend .uiInputControl;\n\n\tcolor: var(--content-0);\n\n\tpadding: 0 var(--padding-right) 0 var(--space-sm);\n\twidth: 100%;\n\ttext-align: left;\n\n\t// &[type=\"button\"] {\n\t// \twhite-space: nowrap;\n\t// }\n}\n\n.uiSelectionControl {\n\t@include ui-control-base;\n\n\t--ui-color: var(--content-0);\n\t--ui-color-hover: var(--content-0);\n\t--ui-color-active: var(--content-0);\n\t--ui-background: var(--surface-0);\n\t--ui-background-hover: var(--ui-tone-soft);\n\t--ui-background-active: var(--ui-tone-soft);\n\t--ui-border-color: var(--ui-tone-border);\n\t--ui-border-hover: var(--ui-tone-border-hover);\n\t--ui-border-active: var(--ui-tone-border-active);\n\t--ui-border-focus: var(--ui-tone-border-focus);\n\n\tappearance: none;\n\tmargin: 0;\n\tcursor: pointer;\n\n\t&:checked {\n\t\tborder-color: var(--ui-tone-border-active);\n\n\t\t& + .uiSelectionIcon {\n\t\t\tcolor: var(--ui-tone-fill);\n\t\t}\n\t}\n\n\t&:disabled {\n\t\tcursor: default;\n\n\t\tborder-color: var(--border-0);\n\n\t\t&:checked {\n\t\t\t& + .uiSelectionIcon {\n\t\t\t\tcolor: var(--border-0);\n\t\t\t}\n\t\t}\n\t}\n}\n\n.uiSelectionIcon {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%);\n\tpointer-events: none;\n\tcolor: transparent;\n\ttransition:\n\t\tcolor var(--transition-fast) ease,\n\t\topacity var(--transition-fast) ease;\n}\n\n.uiElement,\n.uiPopupOption {\n\t&.disabled,\n\t&:disabled {\n\t\tuser-select: none;\n\n\t\t.uiLabel,\n\t\t.uiDescription {\n\t\t\tcolor: var(--content-2);\n\t\t}\n\n\t\t.uiPlaceholder,\n\t\t.uiOptionText,\n\t\t.uiOptionCode {\n\t\t\topacity: 0.25;\n\t\t}\n\t}\n\n\t// Класс disabled используется у составных ненативных элементов: им нужно явно запретить события.\n\t&.disabled {\n\t\tcursor: default;\n\t\tpointer-events: none;\n\t}\n\n\t// Нативный disabled уже блокирует активацию, а pointer-events остаются для курсора и tooltip.\n\t&:disabled {\n\t\tcursor: not-allowed;\n\t}\n}\n\n.uiPanelTonePrimary {\n\t--ui-panel-background: var(--surface-0);\n}\n\n.uiPanelToneSecondary {\n\t--ui-panel-background: var(--surface-1);\n}\n\n.uiPanelToneTertiary {\n\t--ui-panel-background: var(--surface-2);\n}\n\n.uiFilledPanel {\n\tbackground-color: var(--ui-panel-background, var(--surface-0));\n}\n\n.uiFramedPanel {\n\tborder: var(--border);\n\tborder-radius: var(--radius-sm);\n\tpadding: var(--space-sm);\n}\n\n.uiPanel {\n\t@extend .uiFramedPanel;\n\t@extend .uiFilledPanel;\n}\n\n.uiStateFocus {\n\t@include focusVisible;\n\n\tbackground-color: var(--surface-1);\n\tborder-color: var(--border-1);\n\tcursor: pointer;\n}\n\n.uiOptionBase {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-start;\n\tgap: var(--space-sm);\n\theight: 100%;\n\twidth: 100%;\n\ttext-align: left;\n}\n\n.uiPopupOption {\n\t@extend .uiOptionBase;\n\n\theight: auto;\n\tmin-height: var(--control-height);\n}\n\n.uiPopupOption {\n\tborder-radius: var(--radius-sm);\n\tborder: none;\n\tbackground-color: transparent;\n\tcolor: var(--content-0);\n\n\ttransition:\n\t\tbackground-color var(--transition-fast) ease,\n\t\tcolor var(--transition-fast) ease;\n\n\t.uiMenuOptionIcon,\n\t.uiPopupOptionIcon {\n\t\tflex-shrink: 0;\n\t\tfont-size: var(--font-size-sm);\n\t\twidth: var(--icon-size);\n\t\theight: var(--icon-size);\n\t}\n\n\t.uiMenuOptionIcon,\n\t.keyboard {\n\t\tcolor: var(--content-2);\n\t}\n\n\t&.selected {\n\t\tcolor: var(--accent-on-fill);\n\t\tbackground-color: var(--accent-fill);\n\t\tcursor: default;\n\t}\n\n\t@include hover(true, false) {\n\t\tcolor: var(--accent-text-hover);\n\t\tbackground-color: var(--accent-fill-hover);\n\t\tcursor: pointer;\n\t}\n\n\t// Active идёт после hover, чтобы нажатие не теряло своё состояние у мыши и touch-устройств.\n\t&.uiPopupOptionActive,\n\t&:active {\n\t\tcolor: var(--accent-text-active);\n\t\tbackground-color: var(--accent-fill-active);\n\t}\n\n\t&.disabled {\n\t\t// background-color: var(--surface-2);\n\t\tcolor: var(--content-2);\n\t}\n\n\t&:focus-within {\n\t\t// @extend .uiStateFocus;\n\t\t@include focusVisible;\n\t}\n}\n\n.uiOptionButton,\n.uiOptionLink {\n\t@extend .uiOptionBase;\n\n\tflex: 1 1 0;\n\tmin-width: 0;\n\theight: 100%;\n\tpadding: var(--space-xs) var(--space-sm);\n\tborder: none;\n\tborder-radius: inherit;\n\toutline: none;\n\tbackground: transparent;\n\tcolor: inherit;\n\tcursor: inherit;\n\ttext-decoration: none;\n}\n\n.uiPopupOptionSeparator {\n\tborder-top: var(--border);\n\tmargin-block: var(--space-xs);\n}\n\n.uiPopupGroupLabel {\n\tpadding: var(--space-xs) var(--space-sm);\n\tcolor: var(--content-2);\n\tfont-weight: 300;\n\ttext-transform: uppercase;\n\tfont-size: var(--font-size-sm);\n}\n\n.uiMenuOptionIcon {\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.uiOptionText {\n\t// font-size: var(--font-size-sm);\n\tflex: 1;\n\tmin-width: 0;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.uiOptionCode {\n\t// font-size: var(--font-size-sm);\n\tfont-variant-numeric: tabular-nums;\n\tcolor: var(--content-1);\n\tfont-weight: 300;\n\tfont-variation-settings: \"wght\" 300;\n}\n\n.uiOptionContentEmphasize {\n\tfont-weight: 600;\n\tfont-variation-settings: \"wght\" 600;\n}\n\n.uiToggleButtonContainer {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n\theight: 100%;\n\twidth: 100%;\n\n\ttransition-property: width;\n\ttransition-duration: var(--transition-fast);\n\ttransition-timing-function: cubic-bezier(1, 0, 0.5, 0.5);\n\n\t> button {\n\t\tbackground: transparent;\n\t\tborder: none;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\theight: var(--control-height);\n\t\twidth: var(--control-height);\n\t\tborder-radius: var(--radius-sm);\n\t\tflex: 0 0 var(--control-height);\n\t}\n\n\t// &[data-disabled] {\n\t// \tcursor: default;\n\t// \tpointer-events: none;\n\t// \topacity: var(--disabled-opacity);\n\t// }\n}\n\n.uiToggleButton {\n\tcolor: var(--content-0);\n\n\t&:hover {\n\t\tcolor: var(--accent-text);\n\t}\n}\n\n.uiToggleIcon {\n\ttransition: transform var(--transition-fast) ease-in-out;\n\n\t&.uiToggleIconOpen {\n\t\ttransform: rotate(180deg);\n\t}\n}\n\n// TODO: пока в свалку стили для дата-подобных компонентов\n\n// Для компонентов, который не являются input, но выставляют себя за него\n.uiInputControlFake {\n\t@extend .uiInputControl;\n\n\twidth: 100%;\n\tpadding: 0 var(--space-sm);\n\tfont-size: var(--font-size-md);\n\n\tdisplay: flex;\n\talign-items: center;\n\n\tcursor: text;\n}\n\n.uiClearButton {\n\tcolor: var(--error-text);\n\n\t&:disabled {\n\t\topacity: 0;\n\t\tpointer-events: none;\n\t\twidth: 0;\n\t\theight: 0;\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\toverflow: hidden;\n\t}\n}\n\n.uiButtonSeparator {\n\tborder-left: var(--border);\n\theight: calc(100% - var(--space-sm));\n}\n"],"mappings":""}

package/dist/splitter/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":[],"sources":["../../src/splitter/Splitter.module.scss","../../src/splitter/Splitter.tsx","../../src/splitter/SplitterHeightContainer.module.scss","../../src/splitter/useSplitterContainerHeight.ts","../../src/splitter/SplitterHeightContainer.tsx"],"sourcesContent":["@use \"@/styles/mixins\" as ;\n\n.splitter {\n\tdisplay: flex;\n\twidth: 100%;\n\theight: 100%;\n\toverflow: hidden;\n\n\t&.vertical {\n\t\tflex-direction: row;\n\n\t\t.separator {\n\t\t\tcursor: col-resize;\n\n\t\t\t// border-left: var(--border);\n\t\t\t// border-right: var(--border);\n\n\t\t\tmargin-inline: var(--space-md);\n\t\t}\n\t}\n\n\t&.horizontal {\n\t\tflex-direction: column;\n\n\t\t.separator {\n\t\t\tcursor: row-resize;\n\n\t\t\t// border-top: var(--border);\n\t\t\t// border-bottom: var(--border);\n\n\t\t\tmargin-block: var(--space-md);\n\t\t}\n\t}\n}\n\n.topLeft {\n\tflex-grow: 0;\n\tflex-shrink: 0;\n}\n\n.bottomRight {\n\tflex-grow: 1;\n}\n\n.topLeft,\n.bottomRight {\n\tmin-width: 0;\n\tmin-height: 0;\n\toverflow: auto;\n}\n\n.separator {\n\t@include resize-separator;\n\n\tflex-basis: var(--space-sm);\n\tflex-grow: 0;\n\tflex-shrink: 0;\n}\n","import {\n\tChildren,\n\ttype PropsWithChildren,\n\ttype KeyboardEvent as ReactKeyboardEvent,\n\ttype ReactNode,\n\ttype PointerEvent as ReactPointerEvent,\n\ttype RefObject,\n\tuseCallback,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseRef,\n\tuseState\n} from \"react\";\n\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport styles from \"./Splitter.module.scss\";\n\ntype SplitterDirection = \"vertical\" \| \"horizontal\";\ntype SplitterPane = \"start\" \| \"end\";\n\nexport type SplitterProps = PropsWithChildren<{\n\tdirection?: SplitterDirection;\n\tinitial?: number; // от 0 до 1\n\tmin?: number; // минимальная доля первой панели\n\tmax?: number; // максимальная доля первой панели\n\t/* Сообщает итоговую долю первой панели после завершения drag или шага с клавиатуры. /\n\tonChange?: (ratio: number) => void;\n\tclassName?: string;\n\tcollapsedPane?: SplitterPane \| null;\n}>;\n\ntype SplitterLogicParams = {\n\tdirection: SplitterDirection;\n\tinitial: number;\n\tmin: number;\n\tmax: number;\n\tonChange?: (ratio: number) => void;\n\tcollapsedPane: SplitterPane \| null;\n};\n\ntype SplitterLogic = {\n\tcontainerRef: RefObject<HTMLDivElement \| null>;\n\ttopLeftRef: RefObject<HTMLDivElement \| null>;\n\tseparatorRef: RefObject<HTMLDivElement \| null>;\n\tratio: number;\n\tminRatio: number;\n\tmaxRatio: number;\n\thandleSeparatorPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;\n\thandleSeparatorKeyDown: (event: ReactKeyboardEvent<HTMLDivElement>) => void;\n};\n\ntype SplitterViewProps = {\n\tclassName?: string;\n\tdirection: SplitterDirection;\n\tleft: ReactNode;\n\tright: ReactNode;\n\tcollapsedPane: SplitterPane \| null;\n\tlogic: SplitterLogic;\n};\n\nconst DEFAULT_MIN = 0.1;\nconst DEFAULT_MAX = 0.9;\nconst DEFAULT_INITIAL = 0.7;\nconst KEYBOARD_STEP = 0.02;\n\nfunction clampRatio(value: number, min: number, max: number) {\n\treturn Math.min(max, Math.max(min, value));\n}\n\nfunction normalizeRatioValue(value: number, fallback: number) {\n\tif (!Number.isFinite(value)) return fallback;\n\n\treturn clampRatio(value, 0, 1);\n}\n\nfunction normalizeBounds(min: number, max: number) {\n\tconst safeMin = normalizeRatioValue(min, DEFAULT_MIN);\n\tconst safeMax = normalizeRatioValue(max, DEFAULT_MAX);\n\n\tif (safeMin <= safeMax) return [safeMin, safeMax] as const;\n\n\treturn [safeMax, safeMin] as const;\n}\n\nfunction getPointerCoordinate(direction: SplitterDirection, event: PointerEvent \| ReactPointerEvent<HTMLDivElement>) {\n\treturn direction === \"vertical\" ? event.clientX : event.clientY;\n}\n\nfunction getContainerDimension(direction: SplitterDirection, rect: DOMRect) {\n\treturn direction === \"vertical\" ? rect.width : rect.height;\n}\n\nfunction getKeyboardDelta(direction: SplitterDirection, key: string) {\n\tif (direction === \"vertical\") {\n\t\tif (key === \"ArrowLeft\") return -KEYBOARD_STEP;\n\t\tif (key === \"ArrowRight\") return KEYBOARD_STEP;\n\t}\n\n\tif (direction === \"horizontal\") {\n\t\tif (key === \"ArrowUp\") return -KEYBOARD_STEP;\n\t\tif (key === \"ArrowDown\") return KEYBOARD_STEP;\n\t}\n\n\treturn null;\n}\n\nfunction resolveTopLeftBasis(ratio: number, collapsedPane: SplitterPane \| null) {\n\tif (collapsedPane === \"start\") return 0;\n\tif (collapsedPane === \"end\") return 1;\n\n\treturn ratio;\n}\n\nfunction useSplitterLogic({ direction, initial, min, max, onChange, collapsedPane }: SplitterLogicParams): SplitterLogic {\n\tconst [minRatio, maxRatio] = normalizeBounds(min, max);\n\n\tconst containerRef = useRef<HTMLDivElement \| null>(null);\n\tconst topLeftRef = useRef<HTMLDivElement \| null>(null);\n\tconst separatorRef = useRef<HTMLDivElement \| null>(null);\n\tconst cleanupDragRef = useRef<(() => void) \| null>(null);\n\tconst pendingRatioRef = useRef<number \| null>(null);\n\tconst frameRef = useRef<number \| null>(null);\n\tconst startPosRef = useRef(0);\n\tconst startRatioRef = useRef(clampRatio(normalizeRatioValue(initial, DEFAULT_INITIAL), minRatio, maxRatio));\n\tconst previousInitialRef = useRef(initial);\n\n\tconst [ratio, setRatio] = useState(() => clampRatio(normalizeRatioValue(initial, DEFAULT_INITIAL), minRatio, maxRatio));\n\tconst ratioRef = useRef(ratio);\n\n\tconst applyRatio = useCallback(\n\t\t(nextRatio: number) => {\n\t\t\tratioRef.current = nextRatio;\n\t\t\ttopLeftRef.current?.style.setProperty(\"flex-basis\", `${resolveTopLeftBasis(nextRatio, collapsedPane) 100}%`);\n\t\t\tseparatorRef.current?.setAttribute(\"aria-valuenow\", `${Math.round(nextRatio * 100)}`);\n\t\t},\n\t\t[collapsedPane]\n\t);\n\n\tconst flushPendingRatio = () => {\n\t\tif (frameRef.current !== null) {\n\t\t\tcancelAnimationFrame(frameRef.current);\n\t\t\tframeRef.current = null;\n\t\t}\n\n\t\tif (pendingRatioRef.current === null) return ratioRef.current;\n\n\t\tconst nextRatio = pendingRatioRef.current;\n\t\tpendingRatioRef.current = null;\n\t\tapplyRatio(nextRatio);\n\n\t\treturn nextRatio;\n\t};\n\n\tconst scheduleRatioUpdate = (nextRatio: number) => {\n\t\tpendingRatioRef.current = nextRatio;\n\n\t\tif (frameRef.current !== null) return;\n\n\t\tframeRef.current = requestAnimationFrame(() => {\n\t\t\tframeRef.current = null;\n\n\t\t\tif (pendingRatioRef.current === null) return;\n\n\t\t\tapplyRatio(pendingRatioRef.current);\n\t\t});\n\t};\n\n\tconst stopDragging = () => {\n\t\tcleanupDragRef.current?.();\n\t\tcleanupDragRef.current = null;\n\t};\n\n\tconst commitRatio = (nextRatio: number, previousRatio = ratioRef.current) => {\n\t\tflushPendingRatio();\n\t\tconst committedRatio = clampRatio(nextRatio, minRatio, maxRatio);\n\t\tsetRatio(committedRatio);\n\t\tif (committedRatio !== previousRatio) onChange?.(committedRatio);\n\t};\n\n\tconst handleSeparatorPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n\t\tif (event.button !== 0) return;\n\n\t\tevent.preventDefault();\n\n\t\tconst container = containerRef.current;\n\t\tif (!container) return;\n\n\t\tstopDragging();\n\n\t\ttry {\n\t\t\tevent.currentTarget.setPointerCapture?.(event.pointerId);\n\t\t} catch {\n\t\t\t// Игнорировать, если браузер не поддерживает pointer capture.\n\t\t}\n\n\t\tstartPosRef.current = getPointerCoordinate(direction, event);\n\t\tstartRatioRef.current = ratioRef.current;\n\n\t\tconst handlePointerMove = (moveEvent: PointerEvent) => {\n\t\t\tconst rect = container.getBoundingClientRect();\n\t\t\tconst dimension = getContainerDimension(direction, rect);\n\t\t\tif (dimension <= 0) return;\n\n\t\t\tconst delta = getPointerCoordinate(direction, moveEvent) - startPosRef.current;\n\t\t\tconst nextRatio = clampRatio(startRatioRef.current + delta / dimension, minRatio, maxRatio);\n\n\t\t\tscheduleRatioUpdate(nextRatio);\n\t\t};\n\n\t\tconst handlePointerUp = () => {\n\t\t\tstopDragging();\n\t\t\tcommitRatio(flushPendingRatio(), startRatioRef.current);\n\t\t};\n\n\t\tcleanupDragRef.current = () => {\n\t\t\tdocument.removeEventListener(\"pointermove\", handlePointerMove);\n\t\t\tdocument.removeEventListener(\"pointerup\", handlePointerUp);\n\t\t\tdocument.removeEventListener(\"pointercancel\", handlePointerUp);\n\t\t};\n\n\t\tdocument.addEventListener(\"pointermove\", handlePointerMove);\n\t\tdocument.addEventListener(\"pointerup\", handlePointerUp);\n\t\tdocument.addEventListener(\"pointercancel\", handlePointerUp);\n\t};\n\n\tconst handleSeparatorKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n\t\tconst keyboardDelta = getKeyboardDelta(direction, event.key);\n\n\t\tif (keyboardDelta !== null) {\n\t\t\tevent.preventDefault();\n\t\t\tcommitRatio(ratioRef.current + keyboardDelta);\n\n\t\t\treturn;\n\t\t}\n\n\t\tif (event.key === \"Home\") {\n\t\t\tevent.preventDefault();\n\t\t\tcommitRatio(minRatio);\n\n\t\t\treturn;\n\t\t}\n\n\t\tif (event.key === \"End\") {\n\t\t\tevent.preventDefault();\n\t\t\tcommitRatio(maxRatio);\n\t\t}\n\t};\n\n\tuseLayoutEffect(() => {\n\t\tapplyRatio(ratio);\n\t}, [applyRatio, ratio]);\n\n\tuseEffect(() => {\n\t\tsetRatio((currentRatio) => {\n\t\t\tconst initialChanged = previousInitialRef.current !== initial;\n\t\t\tpreviousInitialRef.current = initial;\n\n\t\t\tif (initialChanged) {\n\t\t\t\treturn clampRatio(normalizeRatioValue(initial, DEFAULT_INITIAL), minRatio, maxRatio);\n\t\t\t}\n\n\t\t\treturn clampRatio(currentRatio, minRatio, maxRatio);\n\t\t});\n\t}, [initial, minRatio, maxRatio]);\n\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tstopDragging();\n\n\t\t\tif (frameRef.current !== null) {\n\t\t\t\tcancelAnimationFrame(frameRef.current);\n\t\t\t}\n\t\t};\n\t}, []);\n\n\treturn {\n\t\tcontainerRef,\n\t\ttopLeftRef,\n\t\tseparatorRef,\n\t\tratio,\n\t\tminRatio,\n\t\tmaxRatio,\n\t\thandleSeparatorPointerDown,\n\t\thandleSeparatorKeyDown\n\t};\n}\n\nfunction SplitterView({ className, direction, left, right, collapsedPane, logic }: SplitterViewProps) {\n\tconst { containerRef, topLeftRef, separatorRef, ratio, minRatio, maxRatio, handleSeparatorPointerDown, handleSeparatorKeyDown } = logic;\n\tconst topLeftBasis = resolveTopLeftBasis(ratio, collapsedPane);\n\tconst isStartPaneCollapsed = collapsedPane === \"start\";\n\tconst isEndPaneCollapsed = collapsedPane === \"end\";\n\tconst isSeparatorVisible = collapsedPane === null;\n\n\treturn (\n\t\t<div ref={containerRef} className={cn(styles.splitter, styles[direction], className)}>\n\t\t\t<div ref={topLeftRef} className={styles.topLeft} style={{ flexBasis: `${topLeftBasis * 100}%` }} hidden={isStartPaneCollapsed}>\n\t\t\t\t{left}\n\t\t\t</div>\n\n\t\t\t<div\n\t\t\t\tref={separatorRef}\n\t\t\t\thidden={!isSeparatorVisible}\n\t\t\t\trole=\"separator\"\n\t\t\t\taria-orientation={direction === \"vertical\" ? \"vertical\" : \"horizontal\"}\n\t\t\t\taria-valuemin={Math.round(minRatio * 100)}\n\t\t\t\taria-valuemax={Math.round(maxRatio * 100)}\n\t\t\t\taria-valuenow={Math.round(ratio * 100)}\n\t\t\t\ttabIndex={isSeparatorVisible ? 0 : -1}\n\t\t\t\tonPointerDown={handleSeparatorPointerDown}\n\t\t\t\tonKeyDown={handleSeparatorKeyDown}\n\t\t\t\tclassName={styles.separator}></div>\n\n\t\t\t<div className={styles.bottomRight} hidden={isEndPaneCollapsed}>\n\t\t\t\t{right}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport function Splitter({\n\tdirection = \"vertical\",\n\tinitial = DEFAULT_INITIAL,\n\tmin = DEFAULT_MIN,\n\tmax = DEFAULT_MAX,\n\tonChange,\n\tclassName,\n\tcollapsedPane = null,\n\tchildren\n}: SplitterProps) {\n\tconst [left, right] = Children.toArray(children);\n\tconst logic = useSplitterLogic({ direction, initial, min, max, onChange, collapsedPane });\n\n\tif (!right) return left;\n\n\treturn (\n\t\t<SplitterView className={className} direction={direction} left={left} right={right} collapsedPane={collapsedPane} logic={logic} />\n\t);\n}\n","@use \"@/styles/mixins\" as ;\n\n.container {\n\tmin-width: 0;\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n.viewport {\n\twidth: 100%;\n\tmin-width: 0;\n\tmin-height: 0;\n\toverflow: hidden;\n}\n\n.separator {\n\t@include resize-separator;\n\n\twidth: 100%;\n\theight: var(--space-sm);\n\tflex: 0 0 var(--space-sm);\n\tmargin-block: var(--space-md);\n\tcursor: row-resize;\n}\n","import {\n\ttype KeyboardEvent as ReactKeyboardEvent,\n\ttype PointerEvent as ReactPointerEvent,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseRef,\n\tuseState\n} from \"react\";\n\nimport { clampNumberScaleValue, offsetNumberScaleValue, resolveNumberScaleBounds } from \"@ryuzaki13/react-foundation-lib/number-scale\";\n\ntype UseSplitterContainerHeightParams = {\n\theight?: number;\n\tdefaultHeight: number;\n\tminHeight: number;\n\tmaxHeight: number;\n\theightStep: number;\n\tonHeightChange?: (height: number) => void;\n};\n\ntype SplitterContainerHeightState = {\n\theight: number;\n\tminHeight: number;\n\tmaxHeight: number;\n\thandleSeparatorPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;\n\thandleSeparatorKeyDown: (event: ReactKeyboardEvent<HTMLDivElement>) => void;\n};\n\n/\n Управляет controlled/uncontrolled-высотой внешнего контейнера Splitter.\n * Pointer-изменения обновляют только локальный draft, а `onHeightChange`\n * получает итоговое значение после завершения жеста или клавиатурного шага.\n /\nexport function useSplitterContainerHeight({\n\theight,\n\tdefaultHeight,\n\tminHeight,\n\tmaxHeight,\n\theightStep,\n\tonHeightChange\n}: UseSplitterContainerHeightParams): SplitterContainerHeightState {\n\tconst bounds = resolveNumberScaleBounds(minHeight, maxHeight);\n\tconst scale = { ...bounds, step: heightStep };\n\tconst controlled = height !== undefined;\n\tconst [uncontrolledHeight, setUncontrolledHeight] = useState(() => clampNumberScaleValue(defaultHeight, bounds.min, bounds.max));\n\tconst [dragHeight, setDragHeight] = useState<number \| null>(null);\n\tconst resolvedHeight = clampNumberScaleValue(height ?? uncontrolledHeight, bounds.min, bounds.max);\n\tconst currentHeight = dragHeight ?? resolvedHeight;\n\n\tconst cleanupDragRef = useRef<(() => void) \| null>(null);\n\tconst frameRef = useRef<number \| null>(null);\n\tconst pendingHeightRef = useRef<number \| null>(null);\n\tconst currentHeightRef = useRef(currentHeight);\n\tconst startHeightRef = useRef(currentHeight);\n\tconst startPointerYRef = useRef(0);\n\n\tconst flushPendingHeight = () => {\n\t\tif (frameRef.current !== null) {\n\t\t\tcancelAnimationFrame(frameRef.current);\n\t\t\tframeRef.current = null;\n\t\t}\n\n\t\tif (pendingHeightRef.current === null) return currentHeightRef.current;\n\n\t\tconst nextHeight = pendingHeightRef.current;\n\t\tpendingHeightRef.current = null;\n\t\tcurrentHeightRef.current = nextHeight;\n\n\t\treturn nextHeight;\n\t};\n\n\tconst scheduleHeightUpdate = (nextHeight: number) => {\n\t\tpendingHeightRef.current = nextHeight;\n\n\t\tif (frameRef.current !== null) return;\n\n\t\tframeRef.current = requestAnimationFrame(() => {\n\t\t\tframeRef.current = null;\n\n\t\t\tif (pendingHeightRef.current === null) return;\n\n\t\t\tconst scheduledHeight = pendingHeightRef.current;\n\t\t\tpendingHeightRef.current = null;\n\t\t\tcurrentHeightRef.current = scheduledHeight;\n\t\t\tsetDragHeight(scheduledHeight);\n\t\t});\n\t};\n\n\tconst commitHeight = (nextHeight: number, previousHeight = currentHeightRef.current) => {\n\t\tconst committedHeight = clampNumberScaleValue(nextHeight, bounds.min, bounds.max);\n\t\tcurrentHeightRef.current = committedHeight;\n\t\tsetDragHeight(null);\n\n\t\tif (committedHeight === previousHeight) return;\n\n\t\tif (!controlled) {\n\t\t\tsetUncontrolledHeight(committedHeight);\n\t\t}\n\n\t\tonHeightChange?.(committedHeight);\n\t};\n\n\tconst stopDragging = () => {\n\t\tcleanupDragRef.current?.();\n\t\tcleanupDragRef.current = null;\n\t};\n\n\tconst handleSeparatorPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n\t\tif (event.button !== 0) return;\n\n\t\tevent.preventDefault();\n\t\tstopDragging();\n\n\t\ttry {\n\t\t\tevent.currentTarget.setPointerCapture?.(event.pointerId);\n\t\t} catch {\n\t\t\t// Браузер может не поддерживать pointer capture для synthetic-события.\n\t\t}\n\n\t\tstartPointerYRef.current = event.clientY;\n\t\tstartHeightRef.current = currentHeightRef.current;\n\n\t\tconst handlePointerMove = (moveEvent: PointerEvent) => {\n\t\t\tconst pointerDelta = moveEvent.clientY - startPointerYRef.current;\n\t\t\tconst nextHeight = clampNumberScaleValue(startHeightRef.current + pointerDelta, bounds.min, bounds.max);\n\t\t\tscheduleHeightUpdate(nextHeight);\n\t\t};\n\n\t\tconst handlePointerUp = () => {\n\t\t\tstopDragging();\n\t\t\tcommitHeight(flushPendingHeight(), startHeightRef.current);\n\t\t};\n\n\t\tcleanupDragRef.current = () => {\n\t\t\tdocument.removeEventListener(\"pointermove\", handlePointerMove);\n\t\t\tdocument.removeEventListener(\"pointerup\", handlePointerUp);\n\t\t\tdocument.removeEventListener(\"pointercancel\", handlePointerUp);\n\t\t};\n\n\t\tdocument.addEventListener(\"pointermove\", handlePointerMove);\n\t\tdocument.addEventListener(\"pointerup\", handlePointerUp);\n\t\tdocument.addEventListener(\"pointercancel\", handlePointerUp);\n\t};\n\n\tconst handleSeparatorKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n\t\tlet nextHeight: number \| undefined;\n\n\t\tif (event.key === \"ArrowUp\") nextHeight = offsetNumberScaleValue(currentHeight, -1, scale);\n\t\tif (event.key === \"ArrowDown\") nextHeight = offsetNumberScaleValue(currentHeight, 1, scale);\n\t\tif (event.key === \"Home\") nextHeight = bounds.min;\n\t\tif (event.key === \"End\") nextHeight = bounds.max;\n\t\tif (nextHeight === undefined) return;\n\n\t\tevent.preventDefault();\n\t\tcommitHeight(nextHeight, currentHeight);\n\t};\n\n\tuseLayoutEffect(() => {\n\t\tcurrentHeightRef.current = currentHeight;\n\t}, [currentHeight]);\n\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tstopDragging();\n\n\t\t\tif (frameRef.current !== null) {\n\t\t\t\tcancelAnimationFrame(frameRef.current);\n\t\t\t}\n\t\t};\n\t}, []);\n\n\treturn {\n\t\theight: currentHeight,\n\t\tminHeight: bounds.min,\n\t\tmaxHeight: bounds.max,\n\t\thandleSeparatorPointerDown,\n\t\thandleSeparatorKeyDown\n\t};\n}\n","import { type PropsWithChildren, useId } from \"react\";\n\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport styles from \"./SplitterHeightContainer.module.scss\";\nimport { useSplitterContainerHeight } from \"./useSplitterContainerHeight\";\n\nexport type SplitterHeightContainerProps = PropsWithChildren<{\n\t/* Controlled-высота области со Splitter в CSS-пикселях. /\n\theight?: number;\n\t/* Начальная высота для uncontrolled-режима в CSS-пикселях. /\n\tdefaultHeight?: number;\n\tminHeight?: number;\n\tmaxHeight?: number;\n\t/* Шаг изменения высоты с клавиатуры в CSS-пикселях. /\n\theightStep?: number;\n\t/* Сообщает итоговую высоту после завершения drag или клавиатурного шага. /\n\tonHeightChange?: (height: number) => void;\n\tclassName?: string;\n\tviewportClassName?: string;\n\tseparatorClassName?: string;\n\tseparatorAriaLabel?: string;\n}>;\n\nconst DEFAULT_HEIGHT = 480;\nconst DEFAULT_MIN_HEIGHT = 240;\nconst DEFAULT_MAX_HEIGHT = 1200;\nconst DEFAULT_HEIGHT_STEP = 20;\n\n/\n Опциональная внешняя композиция для Splitter: область панелей получает\n * независимую высоту, а расположенный снизу separator изменяет весь viewport.\n * Внутренние Splitter при этом продолжают управлять только своими пропорциями.\n */\nexport function SplitterHeightContainer({\n\theight,\n\tdefaultHeight = DEFAULT_HEIGHT,\n\tminHeight = DEFAULT_MIN_HEIGHT,\n\tmaxHeight = DEFAULT_MAX_HEIGHT,\n\theightStep = DEFAULT_HEIGHT_STEP,\n\tonHeightChange,\n\tclassName,\n\tviewportClassName,\n\tseparatorClassName,\n\tseparatorAriaLabel = \"Изменить высоту рабочей области\",\n\tchildren\n}: SplitterHeightContainerProps) {\n\tconst generatedViewportId = useId();\n\tconst viewportId = `${generatedViewportId}-viewport`;\n\tconst state = useSplitterContainerHeight({\n\t\theight,\n\t\tdefaultHeight,\n\t\tminHeight,\n\t\tmaxHeight,\n\t\theightStep,\n\t\tonHeightChange\n\t});\n\n\treturn (\n\t\t<div className={cn(styles.container, className)} data-ui=\"splitter-height-container\">\n\t\t\t<div\n\t\t\t\tid={viewportId}\n\t\t\t\tclassName={cn(styles.viewport, viewportClassName)}\n\t\t\t\tstyle={{ height: state.height }}\n\t\t\t\tdata-ui=\"splitter-height-viewport\">\n\t\t\t\t{children}\n\t\t\t</div>\n\n\t\t\t<div\n\t\t\t\trole=\"separator\"\n\t\t\t\taria-label={separatorAriaLabel}\n\t\t\t\taria-orientation=\"horizontal\"\n\t\t\t\taria-controls={viewportId}\n\t\t\t\taria-valuemin={state.minHeight}\n\t\t\t\taria-valuemax={state.maxHeight}\n\t\t\t\taria-valuenow={state.height}\n\t\t\t\taria-valuetext={`${state.height} px`}\n\t\t\t\ttabIndex={0}\n\t\t\t\tclassName={cn(styles.separator, separatorClassName)}\n\t\t\t\tonPointerDown={state.handleSeparatorPointerDown}\n\t\t\t\tonKeyDown={state.handleSeparatorKeyDown}\n\t\t\t\tdata-ui=\"splitter-height-separator\"\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","names":[],"sources":["../../src/splitter/Splitter.module.scss","../../src/splitter/Splitter.tsx","../../src/splitter/SplitterHeightContainer.module.scss","../../src/splitter/useSplitterContainerHeight.ts","../../src/splitter/SplitterHeightContainer.tsx"],"sourcesContent":["@use \"@/styles/mixins\" as ;\n\n.splitter {\n\tdisplay: flex;\n\twidth: 100%;\n\theight: 100%;\n\toverflow: hidden;\n\n\t&.vertical {\n\t\tflex-direction: row;\n\n\t\t.separator {\n\t\t\t@include resize-separator(vertical);\n\n\t\t\tcursor: col-resize;\n\n\t\t\t// border-left: var(--border);\n\t\t\t// border-right: var(--border);\n\n\t\t\tmargin-inline: var(--space-xs);\n\t\t}\n\t}\n\n\t&.horizontal {\n\t\tflex-direction: column;\n\n\t\t.separator {\n\t\t\t@include resize-separator(horizontal);\n\n\t\t\tcursor: row-resize;\n\n\t\t\t// border-top: var(--border);\n\t\t\t// border-bottom: var(--border);\n\n\t\t\tmargin-block: var(--space-xs);\n\t\t}\n\t}\n}\n\n.topLeft {\n\tflex-grow: 0;\n\tflex-shrink: 0;\n}\n\n.bottomRight {\n\tflex-grow: 1;\n}\n\n.topLeft,\n.bottomRight {\n\tmin-width: 0;\n\tmin-height: 0;\n\toverflow: auto;\n}\n\n.separator {\n\tflex-basis: var(--space-sm);\n\tflex-grow: 0;\n\tflex-shrink: 0;\n}\n","import {\n\tChildren,\n\ttype PropsWithChildren,\n\ttype KeyboardEvent as ReactKeyboardEvent,\n\ttype ReactNode,\n\ttype PointerEvent as ReactPointerEvent,\n\ttype RefObject,\n\tuseCallback,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseRef,\n\tuseState\n} from \"react\";\n\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport styles from \"./Splitter.module.scss\";\n\ntype SplitterDirection = \"vertical\" \| \"horizontal\";\ntype SplitterPane = \"start\" \| \"end\";\n\nexport type SplitterProps = PropsWithChildren<{\n\tdirection?: SplitterDirection;\n\tinitial?: number; // от 0 до 1\n\tmin?: number; // минимальная доля первой панели\n\tmax?: number; // максимальная доля первой панели\n\t/* Сообщает итоговую долю первой панели после завершения drag или шага с клавиатуры. /\n\tonChange?: (ratio: number) => void;\n\tclassName?: string;\n\tcollapsedPane?: SplitterPane \| null;\n}>;\n\ntype SplitterLogicParams = {\n\tdirection: SplitterDirection;\n\tinitial: number;\n\tmin: number;\n\tmax: number;\n\tonChange?: (ratio: number) => void;\n\tcollapsedPane: SplitterPane \| null;\n};\n\ntype SplitterLogic = {\n\tcontainerRef: RefObject<HTMLDivElement \| null>;\n\ttopLeftRef: RefObject<HTMLDivElement \| null>;\n\tseparatorRef: RefObject<HTMLDivElement \| null>;\n\tratio: number;\n\tminRatio: number;\n\tmaxRatio: number;\n\thandleSeparatorPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;\n\thandleSeparatorKeyDown: (event: ReactKeyboardEvent<HTMLDivElement>) => void;\n};\n\ntype SplitterViewProps = {\n\tclassName?: string;\n\tdirection: SplitterDirection;\n\tleft: ReactNode;\n\tright: ReactNode;\n\tcollapsedPane: SplitterPane \| null;\n\tlogic: SplitterLogic;\n};\n\nconst DEFAULT_MIN = 0.1;\nconst DEFAULT_MAX = 0.9;\nconst DEFAULT_INITIAL = 0.7;\nconst KEYBOARD_STEP = 0.02;\n\nfunction clampRatio(value: number, min: number, max: number) {\n\treturn Math.min(max, Math.max(min, value));\n}\n\nfunction normalizeRatioValue(value: number, fallback: number) {\n\tif (!Number.isFinite(value)) return fallback;\n\n\treturn clampRatio(value, 0, 1);\n}\n\nfunction normalizeBounds(min: number, max: number) {\n\tconst safeMin = normalizeRatioValue(min, DEFAULT_MIN);\n\tconst safeMax = normalizeRatioValue(max, DEFAULT_MAX);\n\n\tif (safeMin <= safeMax) return [safeMin, safeMax] as const;\n\n\treturn [safeMax, safeMin] as const;\n}\n\nfunction getPointerCoordinate(direction: SplitterDirection, event: PointerEvent \| ReactPointerEvent<HTMLDivElement>) {\n\treturn direction === \"vertical\" ? event.clientX : event.clientY;\n}\n\nfunction getContainerDimension(direction: SplitterDirection, rect: DOMRect) {\n\treturn direction === \"vertical\" ? rect.width : rect.height;\n}\n\nfunction getKeyboardDelta(direction: SplitterDirection, key: string) {\n\tif (direction === \"vertical\") {\n\t\tif (key === \"ArrowLeft\") return -KEYBOARD_STEP;\n\t\tif (key === \"ArrowRight\") return KEYBOARD_STEP;\n\t}\n\n\tif (direction === \"horizontal\") {\n\t\tif (key === \"ArrowUp\") return -KEYBOARD_STEP;\n\t\tif (key === \"ArrowDown\") return KEYBOARD_STEP;\n\t}\n\n\treturn null;\n}\n\nfunction resolveTopLeftBasis(ratio: number, collapsedPane: SplitterPane \| null) {\n\tif (collapsedPane === \"start\") return 0;\n\tif (collapsedPane === \"end\") return 1;\n\n\treturn ratio;\n}\n\nfunction useSplitterLogic({ direction, initial, min, max, onChange, collapsedPane }: SplitterLogicParams): SplitterLogic {\n\tconst [minRatio, maxRatio] = normalizeBounds(min, max);\n\n\tconst containerRef = useRef<HTMLDivElement \| null>(null);\n\tconst topLeftRef = useRef<HTMLDivElement \| null>(null);\n\tconst separatorRef = useRef<HTMLDivElement \| null>(null);\n\tconst cleanupDragRef = useRef<(() => void) \| null>(null);\n\tconst pendingRatioRef = useRef<number \| null>(null);\n\tconst frameRef = useRef<number \| null>(null);\n\tconst startPosRef = useRef(0);\n\tconst startRatioRef = useRef(clampRatio(normalizeRatioValue(initial, DEFAULT_INITIAL), minRatio, maxRatio));\n\tconst previousInitialRef = useRef(initial);\n\n\tconst [ratio, setRatio] = useState(() => clampRatio(normalizeRatioValue(initial, DEFAULT_INITIAL), minRatio, maxRatio));\n\tconst ratioRef = useRef(ratio);\n\n\tconst applyRatio = useCallback(\n\t\t(nextRatio: number) => {\n\t\t\tratioRef.current = nextRatio;\n\t\t\ttopLeftRef.current?.style.setProperty(\"flex-basis\", `${resolveTopLeftBasis(nextRatio, collapsedPane) 100}%`);\n\t\t\tseparatorRef.current?.setAttribute(\"aria-valuenow\", `${Math.round(nextRatio * 100)}`);\n\t\t},\n\t\t[collapsedPane]\n\t);\n\n\tconst flushPendingRatio = () => {\n\t\tif (frameRef.current !== null) {\n\t\t\tcancelAnimationFrame(frameRef.current);\n\t\t\tframeRef.current = null;\n\t\t}\n\n\t\tif (pendingRatioRef.current === null) return ratioRef.current;\n\n\t\tconst nextRatio = pendingRatioRef.current;\n\t\tpendingRatioRef.current = null;\n\t\tapplyRatio(nextRatio);\n\n\t\treturn nextRatio;\n\t};\n\n\tconst scheduleRatioUpdate = (nextRatio: number) => {\n\t\tpendingRatioRef.current = nextRatio;\n\n\t\tif (frameRef.current !== null) return;\n\n\t\tframeRef.current = requestAnimationFrame(() => {\n\t\t\tframeRef.current = null;\n\n\t\t\tif (pendingRatioRef.current === null) return;\n\n\t\t\tapplyRatio(pendingRatioRef.current);\n\t\t});\n\t};\n\n\tconst stopDragging = () => {\n\t\tcleanupDragRef.current?.();\n\t\tcleanupDragRef.current = null;\n\t};\n\n\tconst commitRatio = (nextRatio: number, previousRatio = ratioRef.current) => {\n\t\tflushPendingRatio();\n\t\tconst committedRatio = clampRatio(nextRatio, minRatio, maxRatio);\n\t\tsetRatio(committedRatio);\n\t\tif (committedRatio !== previousRatio) onChange?.(committedRatio);\n\t};\n\n\tconst handleSeparatorPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n\t\tif (event.button !== 0) return;\n\n\t\tevent.preventDefault();\n\n\t\tconst container = containerRef.current;\n\t\tif (!container) return;\n\n\t\tstopDragging();\n\n\t\ttry {\n\t\t\tevent.currentTarget.setPointerCapture?.(event.pointerId);\n\t\t} catch {\n\t\t\t// Игнорировать, если браузер не поддерживает pointer capture.\n\t\t}\n\n\t\tstartPosRef.current = getPointerCoordinate(direction, event);\n\t\tstartRatioRef.current = ratioRef.current;\n\n\t\tconst handlePointerMove = (moveEvent: PointerEvent) => {\n\t\t\tconst rect = container.getBoundingClientRect();\n\t\t\tconst dimension = getContainerDimension(direction, rect);\n\t\t\tif (dimension <= 0) return;\n\n\t\t\tconst delta = getPointerCoordinate(direction, moveEvent) - startPosRef.current;\n\t\t\tconst nextRatio = clampRatio(startRatioRef.current + delta / dimension, minRatio, maxRatio);\n\n\t\t\tscheduleRatioUpdate(nextRatio);\n\t\t};\n\n\t\tconst handlePointerUp = () => {\n\t\t\tstopDragging();\n\t\t\tcommitRatio(flushPendingRatio(), startRatioRef.current);\n\t\t};\n\n\t\tcleanupDragRef.current = () => {\n\t\t\tdocument.removeEventListener(\"pointermove\", handlePointerMove);\n\t\t\tdocument.removeEventListener(\"pointerup\", handlePointerUp);\n\t\t\tdocument.removeEventListener(\"pointercancel\", handlePointerUp);\n\t\t};\n\n\t\tdocument.addEventListener(\"pointermove\", handlePointerMove);\n\t\tdocument.addEventListener(\"pointerup\", handlePointerUp);\n\t\tdocument.addEventListener(\"pointercancel\", handlePointerUp);\n\t};\n\n\tconst handleSeparatorKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n\t\tconst keyboardDelta = getKeyboardDelta(direction, event.key);\n\n\t\tif (keyboardDelta !== null) {\n\t\t\tevent.preventDefault();\n\t\t\tcommitRatio(ratioRef.current + keyboardDelta);\n\n\t\t\treturn;\n\t\t}\n\n\t\tif (event.key === \"Home\") {\n\t\t\tevent.preventDefault();\n\t\t\tcommitRatio(minRatio);\n\n\t\t\treturn;\n\t\t}\n\n\t\tif (event.key === \"End\") {\n\t\t\tevent.preventDefault();\n\t\t\tcommitRatio(maxRatio);\n\t\t}\n\t};\n\n\tuseLayoutEffect(() => {\n\t\tapplyRatio(ratio);\n\t}, [applyRatio, ratio]);\n\n\tuseEffect(() => {\n\t\tsetRatio((currentRatio) => {\n\t\t\tconst initialChanged = previousInitialRef.current !== initial;\n\t\t\tpreviousInitialRef.current = initial;\n\n\t\t\tif (initialChanged) {\n\t\t\t\treturn clampRatio(normalizeRatioValue(initial, DEFAULT_INITIAL), minRatio, maxRatio);\n\t\t\t}\n\n\t\t\treturn clampRatio(currentRatio, minRatio, maxRatio);\n\t\t});\n\t}, [initial, minRatio, maxRatio]);\n\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tstopDragging();\n\n\t\t\tif (frameRef.current !== null) {\n\t\t\t\tcancelAnimationFrame(frameRef.current);\n\t\t\t}\n\t\t};\n\t}, []);\n\n\treturn {\n\t\tcontainerRef,\n\t\ttopLeftRef,\n\t\tseparatorRef,\n\t\tratio,\n\t\tminRatio,\n\t\tmaxRatio,\n\t\thandleSeparatorPointerDown,\n\t\thandleSeparatorKeyDown\n\t};\n}\n\nfunction SplitterView({ className, direction, left, right, collapsedPane, logic }: SplitterViewProps) {\n\tconst { containerRef, topLeftRef, separatorRef, ratio, minRatio, maxRatio, handleSeparatorPointerDown, handleSeparatorKeyDown } = logic;\n\tconst topLeftBasis = resolveTopLeftBasis(ratio, collapsedPane);\n\tconst isStartPaneCollapsed = collapsedPane === \"start\";\n\tconst isEndPaneCollapsed = collapsedPane === \"end\";\n\tconst isSeparatorVisible = collapsedPane === null;\n\n\treturn (\n\t\t<div ref={containerRef} className={cn(styles.splitter, styles[direction], className)}>\n\t\t\t<div ref={topLeftRef} className={styles.topLeft} style={{ flexBasis: `${topLeftBasis * 100}%` }} hidden={isStartPaneCollapsed}>\n\t\t\t\t{left}\n\t\t\t</div>\n\n\t\t\t<div\n\t\t\t\tref={separatorRef}\n\t\t\t\thidden={!isSeparatorVisible}\n\t\t\t\trole=\"separator\"\n\t\t\t\taria-orientation={direction === \"vertical\" ? \"vertical\" : \"horizontal\"}\n\t\t\t\taria-valuemin={Math.round(minRatio * 100)}\n\t\t\t\taria-valuemax={Math.round(maxRatio * 100)}\n\t\t\t\taria-valuenow={Math.round(ratio * 100)}\n\t\t\t\ttabIndex={isSeparatorVisible ? 0 : -1}\n\t\t\t\tonPointerDown={handleSeparatorPointerDown}\n\t\t\t\tonKeyDown={handleSeparatorKeyDown}\n\t\t\t\tclassName={styles.separator}></div>\n\n\t\t\t<div className={styles.bottomRight} hidden={isEndPaneCollapsed}>\n\t\t\t\t{right}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport function Splitter({\n\tdirection = \"vertical\",\n\tinitial = DEFAULT_INITIAL,\n\tmin = DEFAULT_MIN,\n\tmax = DEFAULT_MAX,\n\tonChange,\n\tclassName,\n\tcollapsedPane = null,\n\tchildren\n}: SplitterProps) {\n\tconst [left, right] = Children.toArray(children);\n\tconst logic = useSplitterLogic({ direction, initial, min, max, onChange, collapsedPane });\n\n\tif (!right) return left;\n\n\treturn (\n\t\t<SplitterView className={className} direction={direction} left={left} right={right} collapsedPane={collapsedPane} logic={logic} />\n\t);\n}\n","@use \"@/styles/mixins\" as ;\n\n.container {\n\tmin-width: 0;\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n.viewport {\n\twidth: 100%;\n\tmin-width: 0;\n\tmin-height: 0;\n\toverflow: hidden;\n}\n\n.separator {\n\t@include resize-separator(horizontal);\n\n\twidth: 100%;\n\theight: var(--space-sm);\n\tflex: 0 0 var(--space-sm);\n\tmargin-block: var(--space-xs);\n\tcursor: row-resize;\n}\n","import {\n\ttype KeyboardEvent as ReactKeyboardEvent,\n\ttype PointerEvent as ReactPointerEvent,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseRef,\n\tuseState\n} from \"react\";\n\nimport { clampNumberScaleValue, offsetNumberScaleValue, resolveNumberScaleBounds } from \"@ryuzaki13/react-foundation-lib/number-scale\";\n\ntype UseSplitterContainerHeightParams = {\n\theight?: number;\n\tdefaultHeight: number;\n\tminHeight: number;\n\tmaxHeight: number;\n\theightStep: number;\n\tonHeightChange?: (height: number) => void;\n};\n\ntype SplitterContainerHeightState = {\n\theight: number;\n\tminHeight: number;\n\tmaxHeight: number;\n\thandleSeparatorPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;\n\thandleSeparatorKeyDown: (event: ReactKeyboardEvent<HTMLDivElement>) => void;\n};\n\n/\n Управляет controlled/uncontrolled-высотой внешнего контейнера Splitter.\n * Pointer-изменения обновляют только локальный draft, а `onHeightChange`\n * получает итоговое значение после завершения жеста или клавиатурного шага.\n /\nexport function useSplitterContainerHeight({\n\theight,\n\tdefaultHeight,\n\tminHeight,\n\tmaxHeight,\n\theightStep,\n\tonHeightChange\n}: UseSplitterContainerHeightParams): SplitterContainerHeightState {\n\tconst bounds = resolveNumberScaleBounds(minHeight, maxHeight);\n\tconst scale = { ...bounds, step: heightStep };\n\tconst controlled = height !== undefined;\n\tconst [uncontrolledHeight, setUncontrolledHeight] = useState(() => clampNumberScaleValue(defaultHeight, bounds.min, bounds.max));\n\tconst [dragHeight, setDragHeight] = useState<number \| null>(null);\n\tconst resolvedHeight = clampNumberScaleValue(height ?? uncontrolledHeight, bounds.min, bounds.max);\n\tconst currentHeight = dragHeight ?? resolvedHeight;\n\n\tconst cleanupDragRef = useRef<(() => void) \| null>(null);\n\tconst frameRef = useRef<number \| null>(null);\n\tconst pendingHeightRef = useRef<number \| null>(null);\n\tconst currentHeightRef = useRef(currentHeight);\n\tconst startHeightRef = useRef(currentHeight);\n\tconst startPointerYRef = useRef(0);\n\n\tconst flushPendingHeight = () => {\n\t\tif (frameRef.current !== null) {\n\t\t\tcancelAnimationFrame(frameRef.current);\n\t\t\tframeRef.current = null;\n\t\t}\n\n\t\tif (pendingHeightRef.current === null) return currentHeightRef.current;\n\n\t\tconst nextHeight = pendingHeightRef.current;\n\t\tpendingHeightRef.current = null;\n\t\tcurrentHeightRef.current = nextHeight;\n\n\t\treturn nextHeight;\n\t};\n\n\tconst scheduleHeightUpdate = (nextHeight: number) => {\n\t\tpendingHeightRef.current = nextHeight;\n\n\t\tif (frameRef.current !== null) return;\n\n\t\tframeRef.current = requestAnimationFrame(() => {\n\t\t\tframeRef.current = null;\n\n\t\t\tif (pendingHeightRef.current === null) return;\n\n\t\t\tconst scheduledHeight = pendingHeightRef.current;\n\t\t\tpendingHeightRef.current = null;\n\t\t\tcurrentHeightRef.current = scheduledHeight;\n\t\t\tsetDragHeight(scheduledHeight);\n\t\t});\n\t};\n\n\tconst commitHeight = (nextHeight: number, previousHeight = currentHeightRef.current) => {\n\t\tconst committedHeight = clampNumberScaleValue(nextHeight, bounds.min, bounds.max);\n\t\tcurrentHeightRef.current = committedHeight;\n\t\tsetDragHeight(null);\n\n\t\tif (committedHeight === previousHeight) return;\n\n\t\tif (!controlled) {\n\t\t\tsetUncontrolledHeight(committedHeight);\n\t\t}\n\n\t\tonHeightChange?.(committedHeight);\n\t};\n\n\tconst stopDragging = () => {\n\t\tcleanupDragRef.current?.();\n\t\tcleanupDragRef.current = null;\n\t};\n\n\tconst handleSeparatorPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n\t\tif (event.button !== 0) return;\n\n\t\tevent.preventDefault();\n\t\tstopDragging();\n\n\t\ttry {\n\t\t\tevent.currentTarget.setPointerCapture?.(event.pointerId);\n\t\t} catch {\n\t\t\t// Браузер может не поддерживать pointer capture для synthetic-события.\n\t\t}\n\n\t\tstartPointerYRef.current = event.clientY;\n\t\tstartHeightRef.current = currentHeightRef.current;\n\n\t\tconst handlePointerMove = (moveEvent: PointerEvent) => {\n\t\t\tconst pointerDelta = moveEvent.clientY - startPointerYRef.current;\n\t\t\tconst nextHeight = clampNumberScaleValue(startHeightRef.current + pointerDelta, bounds.min, bounds.max);\n\t\t\tscheduleHeightUpdate(nextHeight);\n\t\t};\n\n\t\tconst handlePointerUp = () => {\n\t\t\tstopDragging();\n\t\t\tcommitHeight(flushPendingHeight(), startHeightRef.current);\n\t\t};\n\n\t\tcleanupDragRef.current = () => {\n\t\t\tdocument.removeEventListener(\"pointermove\", handlePointerMove);\n\t\t\tdocument.removeEventListener(\"pointerup\", handlePointerUp);\n\t\t\tdocument.removeEventListener(\"pointercancel\", handlePointerUp);\n\t\t};\n\n\t\tdocument.addEventListener(\"pointermove\", handlePointerMove);\n\t\tdocument.addEventListener(\"pointerup\", handlePointerUp);\n\t\tdocument.addEventListener(\"pointercancel\", handlePointerUp);\n\t};\n\n\tconst handleSeparatorKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n\t\tlet nextHeight: number \| undefined;\n\n\t\tif (event.key === \"ArrowUp\") nextHeight = offsetNumberScaleValue(currentHeight, -1, scale);\n\t\tif (event.key === \"ArrowDown\") nextHeight = offsetNumberScaleValue(currentHeight, 1, scale);\n\t\tif (event.key === \"Home\") nextHeight = bounds.min;\n\t\tif (event.key === \"End\") nextHeight = bounds.max;\n\t\tif (nextHeight === undefined) return;\n\n\t\tevent.preventDefault();\n\t\tcommitHeight(nextHeight, currentHeight);\n\t};\n\n\tuseLayoutEffect(() => {\n\t\tcurrentHeightRef.current = currentHeight;\n\t}, [currentHeight]);\n\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tstopDragging();\n\n\t\t\tif (frameRef.current !== null) {\n\t\t\t\tcancelAnimationFrame(frameRef.current);\n\t\t\t}\n\t\t};\n\t}, []);\n\n\treturn {\n\t\theight: currentHeight,\n\t\tminHeight: bounds.min,\n\t\tmaxHeight: bounds.max,\n\t\thandleSeparatorPointerDown,\n\t\thandleSeparatorKeyDown\n\t};\n}\n","import { type PropsWithChildren, useId } from \"react\";\n\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport styles from \"./SplitterHeightContainer.module.scss\";\nimport { useSplitterContainerHeight } from \"./useSplitterContainerHeight\";\n\nexport type SplitterHeightContainerProps = PropsWithChildren<{\n\t/* Controlled-высота области со Splitter в CSS-пикселях. /\n\theight?: number;\n\t/* Начальная высота для uncontrolled-режима в CSS-пикселях. /\n\tdefaultHeight?: number;\n\tminHeight?: number;\n\tmaxHeight?: number;\n\t/* Шаг изменения высоты с клавиатуры в CSS-пикселях. /\n\theightStep?: number;\n\t/* Сообщает итоговую высоту после завершения drag или клавиатурного шага. /\n\tonHeightChange?: (height: number) => void;\n\tclassName?: string;\n\tviewportClassName?: string;\n\tseparatorClassName?: string;\n\tseparatorAriaLabel?: string;\n}>;\n\nconst DEFAULT_HEIGHT = 480;\nconst DEFAULT_MIN_HEIGHT = 240;\nconst DEFAULT_MAX_HEIGHT = 1200;\nconst DEFAULT_HEIGHT_STEP = 20;\n\n/\n Опциональная внешняя композиция для Splitter: область панелей получает\n * независимую высоту, а расположенный снизу separator изменяет весь viewport.\n * Внутренние Splitter при этом продолжают управлять только своими пропорциями.\n */\nexport function SplitterHeightContainer({\n\theight,\n\tdefaultHeight = DEFAULT_HEIGHT,\n\tminHeight = DEFAULT_MIN_HEIGHT,\n\tmaxHeight = DEFAULT_MAX_HEIGHT,\n\theightStep = DEFAULT_HEIGHT_STEP,\n\tonHeightChange,\n\tclassName,\n\tviewportClassName,\n\tseparatorClassName,\n\tseparatorAriaLabel = \"Изменить высоту рабочей области\",\n\tchildren\n}: SplitterHeightContainerProps) {\n\tconst generatedViewportId = useId();\n\tconst viewportId = `${generatedViewportId}-viewport`;\n\tconst state = useSplitterContainerHeight({\n\t\theight,\n\t\tdefaultHeight,\n\t\tminHeight,\n\t\tmaxHeight,\n\t\theightStep,\n\t\tonHeightChange\n\t});\n\n\treturn (\n\t\t<div className={cn(styles.container, className)} data-ui=\"splitter-height-container\">\n\t\t\t<div\n\t\t\t\tid={viewportId}\n\t\t\t\tclassName={cn(styles.viewport, viewportClassName)}\n\t\t\t\tstyle={{ height: state.height }}\n\t\t\t\tdata-ui=\"splitter-height-viewport\">\n\t\t\t\t{children}\n\t\t\t</div>\n\n\t\t\t<div\n\t\t\t\trole=\"separator\"\n\t\t\t\taria-label={separatorAriaLabel}\n\t\t\t\taria-orientation=\"horizontal\"\n\t\t\t\taria-controls={viewportId}\n\t\t\t\taria-valuemin={state.minHeight}\n\t\t\t\taria-valuemax={state.maxHeight}\n\t\t\t\taria-valuenow={state.height}\n\t\t\t\taria-valuetext={`${state.height} px`}\n\t\t\t\ttabIndex={0}\n\t\t\t\tclassName={cn(styles.separator, separatorClassName)}\n\t\t\t\tonPointerDown={state.handleSeparatorPointerDown}\n\t\t\t\tonKeyDown={state.handleSeparatorKeyDown}\n\t\t\t\tdata-ui=\"splitter-height-separator\"\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}