npm - @consta/uikit - Versions diffs - 4.14.1 → 4.15.0 - Mend

@consta/uikit 4.14.1 → 4.15.0

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 (112) hide show

package/__internal__/src/components/SelectComponents/Select.css CHANGED Viewed

	@@ -1 +1 @@
1	- .Select{--caption-margin-left:calc(var(--input-space) + var(--control-border-width));align-items:flex-start;display:flex;justify-content:flex-start;position:relative;width:100%}.Select_type_userselect.Select_size_s{--select-element-height:var(--space-xl)}.Select_type_userselect.Select_size_m{--select-element-height:calc(var(--space-2xl) - var(--space-3xs))}.Select_type_userselect.Select_size_l{--select-element-height:calc(var(--space-3xl) - var(--space-2xs))}.Select_type_combobox.Select_size_xs{--select-element-height:calc(var(--space-m) + var(--space-3xs))}.Select_type_combobox.Select_size_s{--select-element-height:var(--space-xl)}.Select_type_combobox.Select_size_m{--select-element-height:calc(var(--space-2xl) - var(--space-2xs))}.Select_type_combobox.Select_size_l{--select-element-height:var(--space-2xl)}.Select_type_select.Select_size_xs{--select-element-height:calc(var(--space-m) + var(--space-3xs))}.Select_type_select.Select_size_s{--select-element-height:var(--space-xl)}.Select_type_select.Select_size_m{--select-element-height:calc(var(--space-2xl) - var(--space-2xs))}.Select_type_select.Select_size_l{--select-element-height:var(--space-2xl)}.Select_size_xs{--input-height:var(--control-height-xs);--input-space:calc(var(--control-space-xs)0.5);--input-font-size:var(--control-text-size-xs);--tag-space:calc((var(--space-xs) - 1px)/2 - var(--control-border-width));--input-max-height:calc(var(--tag-space)4 + var(--select-element-height)4.5)}.Select_size_s{--input-height:var(--control-height-s);--input-space:calc(var(--control-space-s)0.5);--input-font-size:var(--control-text-size-s);--tag-space:calc(var(--space-xs)/2 - var(--control-border-width));--input-max-height:calc(var(--tag-space)4 + var(--select-element-height)4.5)}.Select_size_m{--input-height:var(--control-height-m);--input-space:calc(var(--control-space-m)0.5);--input-font-size:var(--control-text-size-m);--tag-space:calc(var(--space-s)/2 - var(--control-border-width));--input-max-height:calc(var(--tag-space)4 + var(--space-2xl)4.5 - var(--space-2xs)4.5)}.Select_size_l{--input-height:var(--control-height-l);--input-space:calc(var(--control-space-l)0.5);--input-font-size:var(--control-text-size-l);--tag-space:calc(var(--space-m)/2 - var(--control-border-width));--input-max-height:calc(var(--tag-space)4 + var(--space-2xl)4.5)}.Select_labelPosition_top{flex-direction:column}.Select_labelPosition_top>:not(:last-child){margin-bottom:var(--space-xs)}.Select_labelPosition_left{flex-direction:row}.Select_labelPosition_left .Select-Label{align-items:center;display:inline-flex;height:var(--input-height)}.Select_labelPosition_left>:not(:last-child){margin-right:var(--space-s)}.Select-Body{display:inline-flex;flex-direction:column;width:100%}.Select-Body .Select-Caption{margin-left:var(--caption-margin-left);margin-top:var(--space-2xs)}.Select-SelectContainer{--container-border-color:var(--color-control-bg-border-default);display:flex;position:relative;width:100%}.Select-SelectContainer_status_alert{--container-border-color:var(--color-bg-alert)}.Select-SelectContainer_status_success{--container-border-color:var(--color-bg-success)}.Select-SelectContainer_status_warning{--container-border-color:var(--color-bg-warning)}.Select-SelectContainer_view_default .Select-Control{background:var(--color-control-bg-default);border:var(--control-border-width) solid var(--container-border-color);border-radius:var(--control-radius);color:var(--color-control-typo-default);padding:0}.Select-SelectContainer_view_default .Select-Control:hover{border-color:var(--color-control-bg-border-default-hover)}.Select-SelectContainer_view_default.Select-SelectContainer_focused .Select-Control{border-color:var(--color-control-bg-border-focus);outline:none;z-index:1}.Select-SelectContainer_multiple .Select-Control{height:auto;min-height:var(--input-height)}.Select-SelectContainer_form_round .Select-Control{border-radius:calc(var(--input-height)/2);padding-left:calc(var(--input-space)1.6)}.Select-SelectContainer_form_brick .Select-Control{border-radius:0}.Select-SelectContainer_form_clear .Select-Control{border-width:0;border-bottom-width:var(--control-border-width);border-radius:0}.Select-SelectContainer_form_defaultClear .Select-Control{border-radius:var(--control-radius) 0 0 var(--control-radius);border-right-width:0}.Select-SelectContainer_form_clearDefault .Select-Control{border-left-width:0;border-radius:0 var(--control-radius) var(--control-radius) 0}.Select-SelectContainer_form_defaultBrick .Select-Control{border-radius:var(--control-radius) 0 0 var(--control-radius)}.Select-SelectContainer_form_brickDefault .Select-Control{border-radius:0 var(--control-radius) var(--control-radius) 0}.Select-SelectContainer_form_roundBrick .Select-Control{border-radius:calc(var(--input-height)/2) 0 0 calc(var(--input-height)/2);padding-left:calc(var(--input-space)1.6)}.Select-SelectContainer_form_brickRound .Select-Control{border-radius:0 calc(var(--input-height)/2) 99rem calc(var(--input-height)/2);padding-right:calc(var(--input-space)1.6)}.Select-SelectContainer_form_brickClear .Select-Control{border-radius:0;border-right-width:0}.Select-SelectContainer_form_clearBrick .Select-Control{border-left-width:0;border-radius:0}.Select-SelectContainer_form_clearRound .Select-Control{border-left-width:0;border-radius:0 calc(var(--input-height)/2) calc(var(--input-height)/2) 0;padding-right:calc(var(--input-space)1.6)}.Select-SelectContainer_form_roundClear .Select-Control{border-radius:calc(var(--input-height)/2) 0 0 calc(var(--input-height)/2);border-right-width:0;padding-left:calc(var(--input-space)1.6)}.Select-SelectContainer_form_clearClear .Select-Control{border-width:0;border-bottom-width:var(--control-border-width);border-radius:0;border-top-width:var(--control-border-width)}.Select-SelectContainer_view_default.Select-SelectContainer_form_clear.Select-SelectContainer_focused .Select-Control,.Select-SelectContainer_view_default.Select-SelectContainer_form_clearClear.Select-SelectContainer_focused .Select-Control{box-shadow:var(--control-border-width) 0 var(--color-control-bg-border-focus),calc(var(--control-border-width)-1) 0 var(--color-control-bg-border-focus)}.Select-SelectContainer_view_default.Select-SelectContainer_form_brickClear.Select-SelectContainer_focused .Select-Control,.Select-SelectContainer_view_default.Select-SelectContainer_form_defaultClear.Select-SelectContainer_focused .Select-Control,.Select-SelectContainer_view_default.Select-SelectContainer_form_roundClear.Select-SelectContainer_focused .Select-Control{box-shadow:var(--control-border-width) 0 var(--color-control-bg-border-focus)}.Select-SelectContainer_view_default.Select-SelectContainer_form_clearBrick.Select-SelectContainer_focused .Select-Control,.Select-SelectContainer_view_default.Select-SelectContainer_form_clearDefault.Select-SelectContainer_focused .Select-Control,.Select-SelectContainer_view_default.Select-SelectContainer_form_clearRound.Select-SelectContainer_focused .Select-Control{box-shadow:calc(var(--control-border-width)-1) 0 var(--color-control-bg-border-focus)}.Select-SelectContainer_view_default.Select-SelectContainer_disabled .Select-Control{background:var(--color-control-bg-disable);border-color:var(--color-control-bg-border-disable);color:var(--color-control-typo-disable);pointer-events:none}.Select-SelectContainer_view_clear .Select-Control,.Select-SelectContainer_view_clear .Select-Control:focus,.Select-SelectContainer_view_clear .Select-Control:hover{color:var(--color-control-typo-default);padding:0}.Select-SelectContainer_view_clear .Select-Control.Select-SelectContainer_disabled,.Select-SelectContainer_view_clear .Select-Control:focus.Select-SelectContainer_disabled,.Select-SelectContainer_view_clear .Select-Control:hover.Select-SelectContainer_disabled{pointer-events:none}.Select-SelectContainer_view_clear .Select-Control.Select-SelectContainer_disabled .Select-Control,.Select-SelectContainer_view_clear .Select-Control:focus.Select-SelectContainer_disabled .Select-Control,.Select-SelectContainer_view_clear .Select-Control:hover.Select-SelectContainer_disabled .Select-Control{color:var(--color-control-typo-disable)}.Select-SelectContainer_view_clear.Select-SelectContainer_disabled .Select-Control{pointer-events:none}.Select-SelectContainer_view_default .Select-ControlValueContainer{padding:0 0 0 var(--input-space)}.Select-SelectContainer_form_round .Select-SelectContainer-IndicatorsDropdown{border-radius:0 calc(var(--input-height)/2) calc(var(--input-height)/2) 0}.Select-SelectContainer_multiple .Select-ControlValueContainer{box-sizing:border-box;display:flex;line-height:1;padding-bottom:0;padding-top:0;position:relative}.Select-SelectContainer_multiple .Select-ControlValue{-ms-overflow-style:none;max-height:calc(var(--tag-space)4 + var(--select-element-height)4.5);overflow-x:visible;overflow-y:auto;padding-top:calc(var(--tag-space) - var(--control-border-width));scrollbar-width:none;white-space:normal}.Select-SelectContainer_multiple .Select-ControlValue::-webkit-scrollbar{display:none}.Select-SelectContainer_multiple .Select-ControlValue_isUserSelect{display:flex;flex-wrap:wrap;padding-top:calc(var(--space-s)/4)}.Select_view_clear{--caption-margin-left:0}.Select-Delimiter{background-color:var(--color-control-bg-border-default);width:1px}.Select-Control{background:transparent;border:none;box-sizing:border-box;color:currentColor;cursor:pointer;display:inline-flex;font-family:var(--font-primary);font-weight:var(--font-weight-text-regular);height:var(--input-height);line-height:calc(var(--input-height) - var(--control-border-width));outline:none;padding:0;transition:border-color .15s,box-shadow .15s,background-color .15s;width:100%}.Select-Control:focus{outline:none}.Select-Indicators{display:flex;height:100%}.Select-IndicatorsDropdown{background-color:transparent;border:none;color:var(--color-control-typo-disable);cursor:pointer;display:block;margin:0;padding:0;text-align:center;width:var(--input-height)}.Select-IndicatorsDropdown:focus{outline:none}.Select-ControlInner{position:relative;width:100%}.Select-ControlValueContainer{background-color:transparent;border:none;bottom:0;color:inherit;font-size:var(--input-font-size);left:0;line-height:calc(var(--input-height) - 2px);margin:0;min-height:calc(var(--input-height) - 2px);padding:0;position:absolute;right:0;text-align:left;top:0}.Select-ControlValueContainer:focus{outline:none}.Select-Control[aria-expanded=true] .Select-IndicatorsDropdown{transform:rotate(180deg)}.Select-ControlValue,.Select-Placeholder{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select-Placeholder{color:var(--color-control-typo-placeholder);font-size:var(--input-font-size);padding-right:var(--input-space);pointer-events:none;text-align:left}.Select-Placeholder_isHidden{opacity:0;visibility:hidden}.Select-Control_hasInput .Select-Placeholder{background-color:transparent;line-height:calc(var(--input-height) - 2px);position:absolute;top:0;width:calc(100% - var(--input-space))}.Select-DropdownIndicatorIcon{position:relative;top:1px}.Select-ClearIndicator{background-color:transparent;border:none;color:var(--color-control-typo-clear);cursor:pointer;margin:0;padding:0 var(--space-xs)}.Select-ClearIndicatorIcon{position:relative;top:1px}.Select-Input{background-color:transparent;border:none;color:inherit;font-family:inherit;font-size:inherit;line-height:calc(var(--input-height) - 2px);margin:0;outline:none;padding:0;position:relative;width:100%}.Select-Input_hide{bottom:0;left:0;opacity:0;position:absolute;top:0;width:100%}.Select-Input_multiple{display:inline-flex;height:calc(var(--input-height) - var(--control-border-width)2);line-height:1;line-height:calc(var(--input-height) - var(--control-border-width)2);margin-top:calc(var(--tag-space)-1);min-width:10px}.Select-Input_multiple.Select-Input_isUserSelect{margin-top:calc(var(--space-s)/4-1)}.Select-FakeField{bottom:0;left:0;opacity:0;position:absolute;top:0;width:100%}.Select-HelperInputFakeElement{display:inline-block;font-size:var(--input-font-size);height:0;overflow:hidden;position:absolute;top:0;visibility:hidden;white-space:nowrap}
1	+ .Select{--caption-margin-left:calc(var(--input-space) + var(--control-border-width));align-items:flex-start;display:flex;justify-content:flex-start;position:relative;width:100%}.Select_type_userselect.Select_size_s{--select-element-height:var(--space-xl)}.Select_type_userselect.Select_size_m{--select-element-height:calc(var(--space-2xl) - var(--space-3xs))}.Select_type_userselect.Select_size_l{--select-element-height:calc(var(--space-3xl) - var(--space-2xs))}.Select_type_combobox.Select_size_xs{--select-element-height:calc(var(--space-m) + var(--space-3xs))}.Select_type_combobox.Select_size_s{--select-element-height:var(--space-xl)}.Select_type_combobox.Select_size_m{--select-element-height:calc(var(--space-2xl) - var(--space-2xs))}.Select_type_combobox.Select_size_l{--select-element-height:var(--space-2xl)}.Select_type_select.Select_size_xs{--select-element-height:calc(var(--space-m) + var(--space-3xs))}.Select_type_select.Select_size_s{--select-element-height:var(--space-xl)}.Select_type_select.Select_size_m{--select-element-height:calc(var(--space-2xl) - var(--space-2xs))}.Select_type_select.Select_size_l{--select-element-height:var(--space-2xl)}.Select_size_xs{--label-offset:var(--space-2xs);--caption-offset:var(--space-2xs);--round-offset:calc(var(--space-3xs) + var(--space-2xs));--input-height:var(--control-height-xs);--input-space:calc(var(--control-space-xs)0.5);--input-font-size:var(--control-text-size-xs);--tag-space:calc((var(--space-xs) - 1px)/2 - var(--control-border-width));--input-max-height:calc(var(--tag-space)4 + var(--select-element-height)4.5)}.Select_size_s{--label-offset:var(--space-2xs);--caption-offset:var(--space-2xs);--round-offset:calc(var(--space-2xs));--input-height:var(--control-height-s);--input-space:calc(var(--control-space-s)0.5);--input-font-size:var(--control-text-size-s);--tag-space:calc(var(--space-xs)/2 - var(--control-border-width));--input-max-height:calc(var(--tag-space)4 + var(--select-element-height)4.5)}.Select_size_m{--label-offset:var(--space-xs);--caption-offset:var(--space-xs);--round-offset:calc(var(--space-3xs) + var(--space-2xs));--input-height:var(--control-height-m);--input-space:calc(var(--control-space-m)0.5);--input-font-size:var(--control-text-size-m);--tag-space:calc(var(--space-s)/2 - var(--control-border-width));--input-max-height:calc(var(--tag-space)4 + var(--space-2xl)4.5 - var(--space-2xs)4.5)}.Select_size_l{--label-offset:var(--space-xs);--caption-offset:var(--space-xs);--round-offset:calc(var(--space-xs));--input-height:var(--control-height-l);--input-space:calc(var(--control-space-l)0.5);--input-font-size:var(--control-text-size-l);--tag-space:calc(var(--space-m)/2 - var(--control-border-width));--input-max-height:calc(var(--tag-space)4 + var(--space-2xl)4.5)}.Select_labelPosition_top{flex-direction:column}.Select_labelPosition_top>:not(:last-child){margin-bottom:var(--label-offset)}.Select_labelPosition_left{flex-direction:row}.Select_labelPosition_left .Select-Label{align-items:center;display:inline-flex;height:var(--input-height)}.Select_labelPosition_left>:not(:last-child){margin-right:var(--space-s)}.Select-Body{display:inline-flex;flex-direction:column;width:100%}.Select-Body .Select-Caption{margin-left:var(--caption-margin-left);margin-top:var(--caption-offset)}.Select-SelectContainer{--container-border-color:var(--color-control-bg-border-default);display:flex;position:relative;width:100%}.Select-SelectContainer_status_alert{--container-border-color:var(--color-bg-alert)}.Select-SelectContainer_status_success{--container-border-color:var(--color-bg-success)}.Select-SelectContainer_status_warning{--container-border-color:var(--color-bg-warning)}.Select-SelectContainer_view_default .Select-Control{background:var(--color-control-bg-default);border:var(--control-border-width) solid var(--container-border-color);border-radius:var(--control-radius);color:var(--color-control-typo-default);padding:0}.Select-SelectContainer_view_default .Select-Control:hover{border-color:var(--color-control-bg-border-default-hover)}.Select-SelectContainer_view_default.Select-SelectContainer_focused .Select-Control{border-color:var(--color-control-bg-border-focus);outline:none;z-index:1}.Select-SelectContainer_multiple .Select-Control{height:auto;min-height:var(--input-height)}.Select-SelectContainer_form_round .Select-Control{border-radius:calc(var(--input-height)/2);padding-left:var(--round-offset)}.Select-SelectContainer_form_brick .Select-Control{border-radius:0}.Select-SelectContainer_form_clear .Select-Control{border-width:0;border-bottom-width:var(--control-border-width);border-radius:0}.Select-SelectContainer_form_defaultClear .Select-Control{border-radius:var(--control-radius) 0 0 var(--control-radius);border-right-width:0}.Select-SelectContainer_form_clearDefault .Select-Control{border-left-width:0;border-radius:0 var(--control-radius) var(--control-radius) 0}.Select-SelectContainer_form_defaultBrick .Select-Control{border-radius:var(--control-radius) 0 0 var(--control-radius)}.Select-SelectContainer_form_brickDefault .Select-Control{border-radius:0 var(--control-radius) var(--control-radius) 0}.Select-SelectContainer_form_roundBrick .Select-Control{border-radius:calc(var(--input-height)/2) 0 0 calc(var(--input-height)/2);padding-left:var(--round-offset)}.Select-SelectContainer_form_brickRound .Select-Control{border-radius:0 calc(var(--input-height)/2) calc(var(--input-height)/2) 0}.Select-SelectContainer_form_brickClear .Select-Control{border-radius:0;border-right-width:0}.Select-SelectContainer_form_clearBrick .Select-Control{border-left-width:0;border-radius:0}.Select-SelectContainer_form_clearRound .Select-Control{border-left-width:0;border-radius:0 calc(var(--input-height)/2) calc(var(--input-height)/2) 0}.Select-SelectContainer_form_roundClear .Select-Control{border-radius:calc(var(--input-height)/2) 0 0 calc(var(--input-height)/2);border-right-width:0;padding-left:var(--round-offset)}.Select-SelectContainer_form_clearClear .Select-Control{border-width:0;border-bottom-width:var(--control-border-width);border-radius:0;border-top-width:var(--control-border-width)}.Select-SelectContainer_view_default.Select-SelectContainer_form_clear.Select-SelectContainer_focused .Select-Control,.Select-SelectContainer_view_default.Select-SelectContainer_form_clearClear.Select-SelectContainer_focused .Select-Control{box-shadow:var(--control-border-width) 0 var(--color-control-bg-border-focus),calc(var(--control-border-width)-1) 0 var(--color-control-bg-border-focus)}.Select-SelectContainer_view_default.Select-SelectContainer_form_brickClear.Select-SelectContainer_focused .Select-Control,.Select-SelectContainer_view_default.Select-SelectContainer_form_defaultClear.Select-SelectContainer_focused .Select-Control,.Select-SelectContainer_view_default.Select-SelectContainer_form_roundClear.Select-SelectContainer_focused .Select-Control{box-shadow:var(--control-border-width) 0 var(--color-control-bg-border-focus)}.Select-SelectContainer_view_default.Select-SelectContainer_form_clearBrick.Select-SelectContainer_focused .Select-Control,.Select-SelectContainer_view_default.Select-SelectContainer_form_clearDefault.Select-SelectContainer_focused .Select-Control,.Select-SelectContainer_view_default.Select-SelectContainer_form_clearRound.Select-SelectContainer_focused .Select-Control{box-shadow:calc(var(--control-border-width)-1) 0 var(--color-control-bg-border-focus)}.Select-SelectContainer_view_default.Select-SelectContainer_disabled .Select-Control{background:var(--color-control-bg-disable);border-color:var(--color-control-bg-border-disable);color:var(--color-control-typo-disable);pointer-events:none}.Select-SelectContainer_view_clear .Select-Control,.Select-SelectContainer_view_clear .Select-Control:focus,.Select-SelectContainer_view_clear .Select-Control:hover{color:var(--color-control-typo-default);padding:0}.Select-SelectContainer_view_clear .Select-Control.Select-SelectContainer_disabled,.Select-SelectContainer_view_clear .Select-Control:focus.Select-SelectContainer_disabled,.Select-SelectContainer_view_clear .Select-Control:hover.Select-SelectContainer_disabled{pointer-events:none}.Select-SelectContainer_view_clear .Select-Control.Select-SelectContainer_disabled .Select-Control,.Select-SelectContainer_view_clear .Select-Control:focus.Select-SelectContainer_disabled .Select-Control,.Select-SelectContainer_view_clear .Select-Control:hover.Select-SelectContainer_disabled .Select-Control{color:var(--color-control-typo-disable)}.Select-SelectContainer_view_clear.Select-SelectContainer_disabled .Select-Control{pointer-events:none}.Select-SelectContainer_view_default .Select-ControlValueContainer{padding:0 0 0 var(--input-space)}.Select-SelectContainer_form_round .Select-SelectContainer-IndicatorsDropdown{border-radius:0 calc(var(--input-height)/2) calc(var(--input-height)/2) 0}.Select-SelectContainer_multiple .Select-ControlValueContainer{box-sizing:border-box;display:flex;line-height:1;padding-bottom:0;padding-top:0;position:relative}.Select-SelectContainer_multiple .Select-ControlValue{-ms-overflow-style:none;max-height:calc(var(--tag-space)4 + var(--select-element-height)4.5);overflow-x:visible;overflow-y:auto;padding-top:calc(var(--tag-space) - var(--control-border-width));scrollbar-width:none;white-space:normal}.Select-SelectContainer_multiple .Select-ControlValue::-webkit-scrollbar{display:none}.Select-SelectContainer_multiple .Select-ControlValue_isUserSelect{display:flex;flex-wrap:wrap;padding-top:calc(var(--space-s)/4)}.Select_view_clear{--caption-margin-left:0}.Select-Delimiter{background-color:var(--color-control-bg-border-default);width:1px}.Select-Control{background:transparent;border:none;box-sizing:border-box;color:currentColor;cursor:pointer;display:inline-flex;font-family:var(--font-primary);font-weight:var(--font-weight-text-regular);height:var(--input-height);line-height:calc(var(--input-height) - var(--control-border-width));outline:none;padding:0;transition:border-color .15s,box-shadow .15s,background-color .15s;width:100%}.Select-Control:focus{outline:none}.Select-Indicators{display:flex;height:100%}.Select-IndicatorsDropdown{background-color:transparent;border:none;color:var(--color-control-typo-placeholder);cursor:pointer;display:block;margin:0;padding:0;text-align:center;width:var(--input-height)}.Select-IndicatorsDropdown:focus{outline:none}.Select-ControlInner{position:relative;width:100%}.Select-ControlValueContainer{background-color:transparent;border:none;bottom:0;color:inherit;font-size:var(--input-font-size);left:0;line-height:calc(var(--input-height) - 2px);margin:0;min-height:calc(var(--input-height) - 2px);padding:0;position:absolute;right:0;text-align:left;top:0}.Select-ControlValueContainer:focus{outline:none}.Select-Control[aria-expanded=true] .Select-IndicatorsDropdown{transform:rotate(180deg)}.Select-ControlValue,.Select-Placeholder{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select-Placeholder{color:var(--color-control-typo-placeholder);font-size:var(--input-font-size);padding-right:var(--input-space);pointer-events:none;text-align:left}.Select-Placeholder_isHidden{opacity:0;visibility:hidden}.Select-Control_hasInput .Select-Placeholder{background-color:transparent;line-height:calc(var(--input-height) - 2px);position:absolute;top:0;width:calc(100% - var(--input-space))}.Select-DropdownIndicatorIcon{position:relative;top:1px}.Select-ClearIndicator{background-color:transparent;border:none;color:var(--color-control-typo-clear);cursor:pointer;margin:0;padding:0 var(--space-xs)}.Select-ClearIndicatorIcon{position:relative;top:1px}.Select-Input{background-color:transparent;border:none;color:inherit;font-family:inherit;font-size:inherit;line-height:calc(var(--input-height) - 2px);margin:0;outline:none;padding:0;position:relative;width:100%}.Select-Input_hide{bottom:0;left:0;opacity:0;position:absolute;top:0;width:100%}.Select-Input_multiple{display:inline-flex;height:calc(var(--input-height) - var(--control-border-width)2);line-height:1;line-height:calc(var(--input-height) - var(--control-border-width)2);margin-top:calc(var(--tag-space)-1);min-width:10px}.Select-Input_multiple.Select-Input_isUserSelect{margin-top:calc(var(--space-s)/4*-1)}.Select-FakeField{bottom:0;left:0;opacity:0;position:absolute;top:0;width:100%}.Select-HelperInputFakeElement{display:inline-block;font-size:var(--input-font-size);height:0;overflow:hidden;position:absolute;top:0;visibility:hidden;white-space:nowrap}

package/__internal__/src/components/SelectComponents/SelectContainer/SelectContainer.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import { IconComponent } from '@consta/icons/Icon';
 import React from 'react';
 import { PropsWithHTMLAttributesAndRef } from '../../../utils/types/PropsWithHTMLAttributes';
 import { PropForm, PropSize, PropStatus, PropView } from '../types';
@@ -11,8 +12,9 @@ export declare type SelectContainerProps = PropsWithHTMLAttributesAndRef<{
     required?: boolean;
     status?: PropStatus;
     label?: string;
+    labelIcon?: IconComponent;
     type?: 'select' | 'combobox' | 'userselect';
     labelPosition?: 'top' | 'left';
     caption?: string;
 }, HTMLDivElement>;
-export declare const SelectContainer: React.ForwardRefExoticComponent<Pick<SelectContainerProps, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "size" | "caption" | "form" | "label" | "view" | "status" | "key" | "type" | "disabled" | "multiple" | "required" | "focused" | "labelPosition"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectContainer: React.ForwardRefExoticComponent<Pick<SelectContainerProps, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "size" | "caption" | "form" | "label" | "view" | "status" | "key" | "type" | "disabled" | "multiple" | "required" | "focused" | "labelIcon" | "labelPosition"> & React.RefAttributes<HTMLDivElement>>;

package/__internal__/src/components/SelectComponents/SelectContainer/SelectContainer.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size","form","view","className","disabled","required","children","status","focused","multiple","type","labelPosition","label","caption"];import React,{forwardRef}from"react";import{FieldCaption}from"../../FieldCaption/FieldCaption";import{FieldLabel}from"../../FieldLabel/FieldLabel";import{cnSelect}from"../cnSelect";import{defaultPropForm,defaultPropSize,defaultPropView}from"../types";export var SelectContainer=forwardRef(function(a,b){var c=a.size,d=void 0===c?defaultPropSize:c,e=a.form,f=void 0===e?defaultPropForm:e,g=a.view,h=void 0===g?defaultPropView:g,i=a.className,j=a.disabled,k=a.required,l=a.children,m=a.status,n=a.focused,o=a.multiple,p=a.type,q=void 0===p?"select":p,r=a.labelPosition,s=void 0===r?"top":r,t=a.label,u=a.caption,v=_objectWithoutProperties(a,_excluded);return React.createElement("div",Object.assign({className:cnSelect({labelPosition:s,size:d,view:h,type:q},[i])},v),t&&React.createElement(FieldLabel,{required:k,className:cnSelect("Label",{labelPosition:s}),size:d},t),React.createElement("div",{className:cnSelect("Body")},React.createElement("div",{className:cnSelect("SelectContainer",{view:h,form:f,disabled:j,focused:n,multiple:o,status:m}),ref:b},l),u&&React.createElement(FieldCaption,{className:cnSelect("Caption"),status:m},u)))});
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size","form","view","className","disabled","required","children","status","focused","multiple","type","labelPosition","label","labelIcon","caption"];import React,{forwardRef}from"react";import{FieldCaption}from"../../FieldCaption/FieldCaption";import{FieldLabel}from"../../FieldLabel/FieldLabel";import{cnSelect}from"../cnSelect";import{defaultPropForm,defaultPropSize,defaultPropView}from"../types";export var SelectContainer=forwardRef(function(a,b){var c=a.size,d=void 0===c?defaultPropSize:c,e=a.form,f=void 0===e?defaultPropForm:e,g=a.view,h=void 0===g?defaultPropView:g,i=a.className,j=a.disabled,k=a.required,l=a.children,m=a.status,n=a.focused,o=a.multiple,p=a.type,q=void 0===p?"select":p,r=a.labelPosition,s=void 0===r?"top":r,t=a.label,u=a.labelIcon,v=a.caption,w=_objectWithoutProperties(a,_excluded);return React.createElement("div",Object.assign({className:cnSelect({labelPosition:s,size:d,view:h,type:q},[i])},w),t&&React.createElement(FieldLabel,{icon:u,required:k,className:cnSelect("Label",{labelPosition:s}),size:d},t),React.createElement("div",{className:cnSelect("Body")},React.createElement("div",{className:cnSelect("SelectContainer",{view:h,form:f,disabled:j,focused:n,multiple:o,status:m}),ref:b},l),v&&React.createElement(FieldCaption,{className:cnSelect("Caption"),status:m},v)))});
 //# sourceMappingURL=SelectContainer.js.map

package/__internal__/src/components/SelectComponents/SelectContainer/SelectContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectContainer.js","names":["React","forwardRef","FieldCaption","FieldLabel","cnSelect","defaultPropForm","defaultPropSize","defaultPropView","SelectContainer","props","ref","size","form","view","className","disabled","required","children","status","focused","multiple","type","labelPosition","label","caption","otherProps"],"sources":["../../../../../../src/components/SelectComponents/SelectContainer/SelectContainer.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { PropsWithHTMLAttributesAndRef } from '../../../utils/types/PropsWithHTMLAttributes';\nimport { FieldCaption } from '../../FieldCaption/FieldCaption';\nimport { FieldLabel } from '../../FieldLabel/FieldLabel';\nimport { cnSelect } from '../cnSelect';\nimport {\n defaultPropForm,\n defaultPropSize,\n defaultPropView,\n PropForm,\n PropSize,\n PropStatus,\n PropView,\n} from '../types';\n\nexport type SelectContainerProps = PropsWithHTMLAttributesAndRef<\n {\n disabled?: boolean;\n form?: PropForm;\n size?: PropSize;\n view?: PropView;\n focused?: boolean;\n multiple?: boolean;\n required?: boolean;\n status?: PropStatus;\n label?: string;\n type?: 'select' \| 'combobox' \| 'userselect';\n labelPosition?: 'top' \| 'left';\n caption?: string;\n },\n HTMLDivElement\n>;\n\nexport const SelectContainer = forwardRef<HTMLDivElement, SelectContainerProps>(\n (props, ref) => {\n const {\n size = defaultPropSize,\n form = defaultPropForm,\n view = defaultPropView,\n className,\n disabled,\n required,\n children,\n status,\n focused,\n multiple,\n type = 'select',\n labelPosition = 'top',\n label,\n caption,\n ...otherProps\n } = props;\n\n return (\n <div\n className={cnSelect({ labelPosition, size, view, type }, [className])}\n {...otherProps}\n >\n {label && (\n <FieldLabel\n required={required}\n className={cnSelect('Label', { labelPosition })}\n size={size}\n >\n {label}\n </FieldLabel>\n )}\n <div className={cnSelect('Body')}>\n <div\n className={cnSelect('SelectContainer', {\n view,\n form,\n disabled,\n focused,\n multiple,\n status,\n })}\n ref={ref}\n >\n {children}\n </div>\n {caption && (\n <FieldCaption className={cnSelect('Caption')} status={status}>\n {caption}\n </FieldCaption>\n )}\n </div>\n </div>\n );\n },\n);\n"],"mappings":"~~8OAAA~~,MAAOA,MAAP,EAAgBC,UAAhB,KAAkC,OAAlC,CAGA,OAASC,YAAT,uCACA,OAASC,UAAT,mCACA,OAASC,QAAT,mBACA,OACEC,eADF,CAEEC,eAFF,CAGEC,eAHF,~~gBA4BA~~,MAAO,IAAMC,gBAAe,CAAGP,UAAU,CACvC,SAACQ,CAAD,CAAQC,CAAR,CAAgB,CACd,~~MAgBID~~,~~CAhBJ~~,CACEE,IADF,CACEA,CADF,YACSL,eADT,~~KAgBIG~~,~~CAhBJ~~,CAEEG,IAFF,CAEEA,CAFF,YAESP,eAFT,~~KAgBII~~,~~CAhBJ~~,CAGEI,IAHF,CAGEA,CAHF,YAGSN,eAHT,GAIEO,CAJF,~~CAgBIL~~,~~CAhBJ~~,CAIEK,SAJF,CAKEC,CALF,~~CAgBIN~~,~~CAhBJ~~,CAKEM,QALF,CAMEC,CANF,~~CAgBIP~~,~~CAhBJ~~,CAMEO,QANF,CAOEC,CAPF,~~CAgBIR~~,~~CAhBJ~~,CAOEQ,QAPF,CAQEC,CARF,~~CAgBIT~~,~~CAhBJ~~,CAQES,MARF,CASEC,CATF,~~CAgBIV~~,~~CAhBJ~~,CASEU,OATF,CAUEC,CAVF,~~CAgBIX~~,~~CAhBJ~~,CAUEW,QAVF,~~GAgBIX~~,~~CAhBJ~~,CAWEY,IAXF,CAWEA,CAXF,YAWS,QAXT,~~KAgBIZ~~,~~CAhBJ~~,CAYEa,aAZF,CAYEA,CAZF,YAYkB,KAZlB,GAaEC,CAbF,~~CAgBId~~,~~CAhBJ~~,CAaEc,KAbF,CAcEC,CAdF,~~CAgBIf~~,~~CAhBJ~~,CAcEe,~~OAdF~~,~~CAeKC~~,~~CAfL~~,~~0BAgBIhB~~,~~CAhBJ~~,~~YAkBA~~,MACE,0CACE,SAAS,CAAEL,QAAQ,CAAC,CAAEkB,aAAa,CAAbA,CAAF,CAAiBX,IAAI,CAAJA,CAAjB,CAAuBE,IAAI,CAAJA,CAAvB,CAA6BQ,IAAI,CAAJA,CAA7B,CAAD,CAAsC,CAACP,CAAD,CAAtC,CADrB,~~EAEMW~~,CAFN,~~EAIGF~~,CAAK,EACJ,oBAAC,UAAD,EACE,~~QAAQ~~,~~CAAEP~~,~~CADZ~~,CAEE,SAAS,CAAEZ,QAAQ,CAAC,OAAD,CAAU,CAAEkB,aAAa,CAAbA,CAAF,CAAV,~~CAFrB~~,~~CAGE~~,IAAI,CAAEX,~~CAHR~~,~~EAKGY~~,~~CALH~~,CALJ,~~CAaE~~,2BAAK,SAAS,CAAEnB,QAAQ,CAAC,MAAD,CAAxB,EACE,2BACE,SAAS,CAAEA,QAAQ,CAAC,iBAAD,CAAoB,CACrCS,IAAI,CAAJA,CADqC,CAErCD,IAAI,CAAJA,CAFqC,CAGrCG,QAAQ,CAARA,CAHqC,CAIrCI,OAAO,CAAPA,CAJqC,CAKrCC,QAAQ,CAARA,CALqC,CAMrCF,MAAM,CAANA,CANqC,CAApB,CADrB,CASE,GAAG,CAAER,CATP,EAWGO,CAXH,CADF,~~CAcGO~~,CAAO,EACN,oBAAC,YAAD,EAAc,SAAS,~~CAAEpB~~,QAAQ,CAAC,SAAD,CAAjC,CAA8C,MAAM,CAAEc,CAAtD,~~EACGM~~,CADH,CAfJ,~~CAbF~~,~~CAmCH~~,~~CAxDsC~~,CAAlC"}
1	+ {"version":3,"file":"SelectContainer.js","names":["React","forwardRef","FieldCaption","FieldLabel","cnSelect","defaultPropForm","defaultPropSize","defaultPropView","SelectContainer","props","ref","size","form","view","className","disabled","required","children","status","focused","multiple","type","labelPosition","label","labelIcon","caption","otherProps"],"sources":["../../../../../../src/components/SelectComponents/SelectContainer/SelectContainer.tsx"],"sourcesContent":["import { IconComponent } from '@consta/icons/Icon';\nimport React, { forwardRef } from 'react';\n\nimport { PropsWithHTMLAttributesAndRef } from '../../../utils/types/PropsWithHTMLAttributes';\nimport { FieldCaption } from '../../FieldCaption/FieldCaption';\nimport { FieldLabel } from '../../FieldLabel/FieldLabel';\nimport { cnSelect } from '../cnSelect';\nimport {\n defaultPropForm,\n defaultPropSize,\n defaultPropView,\n PropForm,\n PropSize,\n PropStatus,\n PropView,\n} from '../types';\n\nexport type SelectContainerProps = PropsWithHTMLAttributesAndRef<\n {\n disabled?: boolean;\n form?: PropForm;\n size?: PropSize;\n view?: PropView;\n focused?: boolean;\n multiple?: boolean;\n required?: boolean;\n status?: PropStatus;\n label?: string;\n labelIcon?: IconComponent;\n type?: 'select' \| 'combobox' \| 'userselect';\n labelPosition?: 'top' \| 'left';\n caption?: string;\n },\n HTMLDivElement\n>;\n\nexport const SelectContainer = forwardRef<HTMLDivElement, SelectContainerProps>(\n (props, ref) => {\n const {\n size = defaultPropSize,\n form = defaultPropForm,\n view = defaultPropView,\n className,\n disabled,\n required,\n children,\n status,\n focused,\n multiple,\n type = 'select',\n labelPosition = 'top',\n label,\n labelIcon,\n caption,\n ...otherProps\n } = props;\n\n return (\n <div\n className={cnSelect({ labelPosition, size, view, type }, [className])}\n {...otherProps}\n >\n {label && (\n <FieldLabel\n icon={labelIcon}\n required={required}\n className={cnSelect('Label', { labelPosition })}\n size={size}\n >\n {label}\n </FieldLabel>\n )}\n <div className={cnSelect('Body')}>\n <div\n className={cnSelect('SelectContainer', {\n view,\n form,\n disabled,\n focused,\n multiple,\n status,\n })}\n ref={ref}\n >\n {children}\n </div>\n {caption && (\n <FieldCaption className={cnSelect('Caption')} status={status}>\n {caption}\n </FieldCaption>\n )}\n </div>\n </div>\n );\n },\n);\n"],"mappings":"0PACA,MAAOA,MAAP,EAAgBC,UAAhB,KAAkC,OAAlC,CAGA,OAASC,YAAT,uCACA,OAASC,UAAT,mCACA,OAASC,QAAT,mBACA,OACEC,eADF,CAEEC,eAFF,CAGEC,eAHF,gBA6BA,MAAO,IAAMC,gBAAe,CAAGP,UAAU,CACvC,SAACQ,CAAD,CAAQC,CAAR,CAAgB,CACd,MAiBID,CAjBJ,CACEE,IADF,CACEA,CADF,YACSL,eADT,KAiBIG,CAjBJ,CAEEG,IAFF,CAEEA,CAFF,YAESP,eAFT,KAiBII,CAjBJ,CAGEI,IAHF,CAGEA,CAHF,YAGSN,eAHT,GAIEO,CAJF,CAiBIL,CAjBJ,CAIEK,SAJF,CAKEC,CALF,CAiBIN,CAjBJ,CAKEM,QALF,CAMEC,CANF,CAiBIP,CAjBJ,CAMEO,QANF,CAOEC,CAPF,CAiBIR,CAjBJ,CAOEQ,QAPF,CAQEC,CARF,CAiBIT,CAjBJ,CAQES,MARF,CASEC,CATF,CAiBIV,CAjBJ,CASEU,OATF,CAUEC,CAVF,CAiBIX,CAjBJ,CAUEW,QAVF,GAiBIX,CAjBJ,CAWEY,IAXF,CAWEA,CAXF,YAWS,QAXT,KAiBIZ,CAjBJ,CAYEa,aAZF,CAYEA,CAZF,YAYkB,KAZlB,GAaEC,CAbF,CAiBId,CAjBJ,CAaEc,KAbF,CAcEC,CAdF,CAiBIf,CAjBJ,CAcEe,SAdF,CAeEC,CAfF,CAiBIhB,CAjBJ,CAeEgB,OAfF,CAgBKC,CAhBL,0BAiBIjB,CAjBJ,YAmBA,MACE,0CACE,SAAS,CAAEL,QAAQ,CAAC,CAAEkB,aAAa,CAAbA,CAAF,CAAiBX,IAAI,CAAJA,CAAjB,CAAuBE,IAAI,CAAJA,CAAvB,CAA6BQ,IAAI,CAAJA,CAA7B,CAAD,CAAsC,CAACP,CAAD,CAAtC,CADrB,EAEMY,CAFN,EAIGH,CAAK,EACJ,oBAAC,UAAD,EACE,IAAI,CAAEC,CADR,CAEE,QAAQ,CAAER,CAFZ,CAGE,SAAS,CAAEZ,QAAQ,CAAC,OAAD,CAAU,CAAEkB,aAAa,CAAbA,CAAF,CAAV,CAHrB,CAIE,IAAI,CAAEX,CAJR,EAMGY,CANH,CALJ,CAcE,2BAAK,SAAS,CAAEnB,QAAQ,CAAC,MAAD,CAAxB,EACE,2BACE,SAAS,CAAEA,QAAQ,CAAC,iBAAD,CAAoB,CACrCS,IAAI,CAAJA,CADqC,CAErCD,IAAI,CAAJA,CAFqC,CAGrCG,QAAQ,CAARA,CAHqC,CAIrCI,OAAO,CAAPA,CAJqC,CAKrCC,QAAQ,CAARA,CALqC,CAMrCF,MAAM,CAANA,CANqC,CAApB,CADrB,CASE,GAAG,CAAER,CATP,EAWGO,CAXH,CADF,CAcGQ,CAAO,EACN,oBAAC,YAAD,EAAc,SAAS,CAAErB,QAAQ,CAAC,SAAD,CAAjC,CAA8C,MAAM,CAAEc,CAAtD,EACGO,CADH,CAfJ,CAdF,CAoCH,CA1DsC,CAAlC"}

package/__internal__/src/components/SelectComponents/SelectDropdown/SelectDropdown.d.ts CHANGED Viewed

@@ -2,6 +2,7 @@ import './SelectDropdown.css';
 import React from 'react';
 import { GetOptionPropsResult, OptionForCreate, OptionProps } from '../../../hooks/useSelect/useSelect';
 import { PropsWithJsxAttributes } from '../../../utils/types/PropsWithJsxAttributes';
+import { PopoverPropOffset } from '../../Popover/Popover';
 import { PropSize, RenderItemProps } from '../types';
 export declare const selectDropdownform: readonly ["default", "brick", "round"];
 export declare type SelectDropdownPropForm = typeof selectDropdownform[number];
@@ -13,6 +14,7 @@ declare type Props<ITEM, GROUP> = PropsWithJsxAttributes<{
     getOptionProps(props: OptionProps<ITEM>): GetOptionPropsResult;
     form: SelectDropdownPropForm;
     isOpen: boolean;
+    offset?: PopoverPropOffset | 'none';
     isLoading?: boolean;
     renderItem: (props: RenderItemProps<ITEM>) => JSX.Element | null;
     visibleItems: (OptionForCreate | {

package/__internal__/src/components/SelectComponents/SelectDropdown/SelectDropdown.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["controlRef","size","getOptionProps","dropdownRef","labelForCreate","className","labelForNotFound","labelForEmptyItems","hasItems","form","isOpen","renderItem","visibleItems","isLoading","getGroupLabel","notFound"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"./SelectDropdown.css";import React,{Fragment,useMemo,useRef}from"react";import{Transition}from"react-transition-group";import{cnListBox,ListItem,mapVerticalSpase}from"../../ListCanary";import{cnMixSpace}from"../../../mixs/MixSpace";import{isOptionForCreate}from"../../../hooks/useSelect/useSelect";import{animateTimeout,cnMixPopoverAnimate}from"../../../mixs/MixPopoverAnimate/MixPopoverAnimate";import{cn}from"../../../utils/bem";import{fabricIndex}from"../../../utils/fabricIndex";import{Popover}from"../../Popover/Popover";import{SelectCreateButton}from"../SelectCreateButton/SelectCreateButton";import{SelectGroupLabel}from"../SelectGroupLabel/SelectGroupLabel";import{SelectLoader}from"../SelectLoader/SelectLoader";export var selectDropdownform=["default","brick","round"];export var defaultSelectDropdownPropForm=selectDropdownform[0];var cnSelectDropdown=cn("SelectDropdown");export var SelectDropdown=function(a){var b=a.controlRef,c=a.size,d=a.getOptionProps,e=a.dropdownRef,f=a.labelForCreate,g=a.className,h=a.labelForNotFound,i=a.labelForEmptyItems,j=a.hasItems,k=!(void 0!==j)||j,l=a.form,m=a.isOpen,n=a.renderItem,o=a.visibleItems,p=a.isLoading,q=a.getGroupLabel,r=a.notFound,s=_objectWithoutProperties(a,_excluded),t="round"===l?"increased":"normal",u=useRef(null),v=useMemo(function(){return 0<o.filter(function(a){return isOptionForCreate(a)||Array.isArray(a.items)&&0<a.items.length}).length},[o]);return React.createElement(Transition,{in:m,unmountOnExit:!0,nodeRef:u,timeout:animateTimeout},function(a){var j=fabricIndex(-1);return React.createElement(Popover,Object.assign({},s,{anchorRef:b,direction:"downStartLeft",possibleDirections:["downStartLeft","upStartLeft","downStartRight","upStartRight"],offset:"2xs",ref:u,role:"listbox",className:cnSelectDropdown(null,[cnListBox({size:c,form:l,border:!0,shadow:!0}),cnMixPopoverAnimate({animate:a}),g]),equalAnchorWidth:!0}),React.createElement("div",{className:cnSelectDropdown("List",[cnMixSpace({pV:mapVerticalSpase[c]})]),ref:e},p&&React.createElement(SelectLoader,{mode:v?"blur":"empty"}),o.map(function(a){return isOptionForCreate(a)?React.createElement(SelectCreateButton,Object.assign({size:c,labelForCreate:f,inputValue:a.label,indent:t},d({index:j(),item:a}))):React.createElement(Fragment,{key:a.key},a.group&&q&&React.createElement(SelectGroupLabel,{label:q(a.group),size:c,indent:t}),a.items.map(function(b,c){return React.createElement(Fragment,{key:"".concat(a.key,"-").concat(c)},n(_objectSpread({item:b},d({index:j(),item:b}))))}))}),!p&&k&&r&&h&&React.createElement(ListItem,{size:c,label:h,innerOffset:t},h),!p&&!k&&i&&React.createElement(ListItem,{size:c,label:h,innerOffset:t},i)))})};
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["controlRef","size","getOptionProps","dropdownRef","labelForCreate","className","labelForNotFound","labelForEmptyItems","hasItems","form","isOpen","offset","renderItem","visibleItems","isLoading","getGroupLabel","notFound"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"./SelectDropdown.css";import React,{Fragment,useMemo,useRef}from"react";import{Transition}from"react-transition-group";import{cnListBox,ListItem,mapVerticalSpase}from"../../ListCanary";import{cnMixSpace}from"../../../mixs/MixSpace";import{isOptionForCreate}from"../../../hooks/useSelect/useSelect";import{animateTimeout,cnMixPopoverAnimate}from"../../../mixs/MixPopoverAnimate/MixPopoverAnimate";import{cn}from"../../../utils/bem";import{fabricIndex}from"../../../utils/fabricIndex";import{Popover}from"../../Popover/Popover";import{SelectCreateButton}from"../SelectCreateButton/SelectCreateButton";import{SelectGroupLabel}from"../SelectGroupLabel/SelectGroupLabel";import{SelectLoader}from"../SelectLoader/SelectLoader";export var selectDropdownform=["default","brick","round"];export var defaultSelectDropdownPropForm=selectDropdownform[0];var cnSelectDropdown=cn("SelectDropdown");export var SelectDropdown=function(a){var b=a.controlRef,c=a.size,d=a.getOptionProps,e=a.dropdownRef,f=a.labelForCreate,g=a.className,h=a.labelForNotFound,i=a.labelForEmptyItems,j=a.hasItems,k=!(void 0!==j)||j,l=a.form,m=a.isOpen,n=a.offset,o=void 0===n?"none":n,p=a.renderItem,q=a.visibleItems,r=a.isLoading,s=a.getGroupLabel,t=a.notFound,u=_objectWithoutProperties(a,_excluded),v="round"===l?"increased":"normal",w=useRef(null),x=useMemo(function(){return 0<q.filter(function(a){return isOptionForCreate(a)||Array.isArray(a.items)&&0<a.items.length}).length},[q]),y="none"===o?void 0:o;return React.createElement(Transition,{in:m,unmountOnExit:!0,nodeRef:w,timeout:animateTimeout},function(a){var j=fabricIndex(-1);return React.createElement(Popover,Object.assign({},u,{anchorRef:b,direction:"downStartLeft",possibleDirections:["downStartLeft","upStartLeft","downStartRight","upStartRight"],offset:y,ref:w,role:"listbox",className:cnSelectDropdown(null,[cnListBox({size:c,form:l,border:!0,shadow:!0}),cnMixPopoverAnimate({animate:a}),g]),equalAnchorWidth:!0}),React.createElement("div",{className:cnSelectDropdown("List",[cnMixSpace({pV:mapVerticalSpase[c]})]),ref:e},r&&React.createElement(SelectLoader,{mode:x?"blur":"empty"}),q.map(function(a){return isOptionForCreate(a)?React.createElement(SelectCreateButton,Object.assign({size:c,labelForCreate:f,inputValue:a.label,indent:v},d({index:j(),item:a}))):React.createElement(Fragment,{key:a.key},a.group&&s&&React.createElement(SelectGroupLabel,{label:s(a.group),size:c,indent:v}),a.items.map(function(b,c){return React.createElement(Fragment,{key:"".concat(a.key,"-").concat(c)},p(_objectSpread({item:b},d({index:j(),item:b}))))}))}),!r&&k&&t&&h&&React.createElement(ListItem,{size:c,label:h,innerOffset:v},h),!r&&!k&&i&&React.createElement(ListItem,{size:c,label:h,innerOffset:v},i)))})};
 //# sourceMappingURL=SelectDropdown.js.map

package/__internal__/src/components/SelectComponents/SelectDropdown/SelectDropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectDropdown.js","names":["React","Fragment","useMemo","useRef","Transition","cnListBox","ListItem","mapVerticalSpase","cnMixSpace","isOptionForCreate","animateTimeout","cnMixPopoverAnimate","cn","fabricIndex","Popover","SelectCreateButton","SelectGroupLabel","SelectLoader","selectDropdownform","defaultSelectDropdownPropForm","cnSelectDropdown","SelectDropdown","props","controlRef","size","getOptionProps","dropdownRef","labelForCreate","className","labelForNotFound","labelForEmptyItems","hasItems","form","isOpen","renderItem","visibleItems","isLoading","getGroupLabel","notFound","otherProps","indent","popoverRef","isListShowed","filter","group","Array","isArray","items","length","animate","getIndex","border","shadow","pV","map","label","index","item","key","i"],"sources":["../../../../../../src/components/SelectComponents/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["import './SelectDropdown.css';\n\nimport React, { Fragment, useMemo, useRef } from 'react';\nimport { Transition } from 'react-transition-group';\n\nimport {\n cnListBox,\n ListItem,\n mapVerticalSpase,\n} from '##/components/ListCanary';\nimport { cnMixSpace } from '##/mixs/MixSpace';\n\nimport {\n GetOptionPropsResult,\n isOptionForCreate,\n OptionForCreate,\n OptionProps,\n} from '../../../hooks/useSelect/useSelect';\nimport {\n animateTimeout,\n cnMixPopoverAnimate,\n} from '../../../mixs/MixPopoverAnimate/MixPopoverAnimate';\nimport { cn } from '../../../utils/bem';\nimport { fabricIndex } from '../../../utils/fabricIndex';\nimport { PropsWithJsxAttributes } from '../../../utils/types/PropsWithJsxAttributes';\nimport { Popover } from '../../Popover/Popover';\nimport { SelectCreateButton } from '../SelectCreateButton/SelectCreateButton';\nimport { SelectGroupLabel } from '../SelectGroupLabel/SelectGroupLabel';\nimport { SelectLoader } from '../SelectLoader/SelectLoader';\nimport { PropSize, RenderItemProps } from '../types';\n\nexport const selectDropdownform = ['default', 'brick', 'round'] as const;\nexport type SelectDropdownPropForm = typeof selectDropdownform[number];\nexport const defaultSelectDropdownPropForm = selectDropdownform[0];\n\ntype Props<ITEM, GROUP> = PropsWithJsxAttributes<{\n size: PropSize;\n controlRef: React.MutableRefObject<HTMLDivElement \| null>;\n dropdownRef: React.MutableRefObject<HTMLDivElement \| null>;\n getOptionProps(props: OptionProps<ITEM>): GetOptionPropsResult;\n form: SelectDropdownPropForm;\n isOpen: boolean;\n isLoading?: boolean;\n renderItem: (props: RenderItemProps<ITEM>) => JSX.Element \| null;\n visibleItems: (\n \| OptionForCreate\n \| {\n items: ITEM[];\n key: string \| number;\n group?: GROUP;\n groupIndex: number;\n }\n )[];\n getGroupLabel?: (group: GROUP) => string;\n labelForCreate?: string;\n labelForNotFound?: string;\n labelForEmptyItems?: string;\n notFound?: boolean;\n hasItems?: boolean;\n}>;\n\ntype SelectDropdown = <ITEM, GROUP>(\n props: Props<ITEM, GROUP>,\n) => React.ReactElement \| null;\n\nconst cnSelectDropdown = cn('SelectDropdown');\n\nexport const SelectDropdown: SelectDropdown = (props) => {\n const {\n controlRef,\n size,\n getOptionProps,\n dropdownRef,\n labelForCreate,\n className,\n labelForNotFound,\n labelForEmptyItems,\n hasItems = true,\n form,\n isOpen,\n renderItem,\n visibleItems,\n isLoading,\n getGroupLabel,\n notFound,\n ...otherProps\n } = props;\n\n const indent = form === 'round' ? 'increased' : 'normal';\n\n const popoverRef = useRef<HTMLDivElement>(null);\n\n const isListShowed = useMemo(() => {\n return (\n visibleItems.filter(\n (group) =>\n isOptionForCreate(group) \|\|\n (Array.isArray(group.items) && group.items.length > 0),\n ).length > 0\n );\n }, [visibleItems]);\n\n return (\n <Transition\n in={isOpen}\n unmountOnExit\n nodeRef={popoverRef}\n timeout={animateTimeout}\n >\n {(animate) => {\n const getIndex = fabricIndex(-1);\n return (\n <Popover\n {...otherProps}\n anchorRef={controlRef}\n direction=\"downStartLeft\"\n possibleDirections={[\n 'downStartLeft',\n 'upStartLeft',\n 'downStartRight',\n 'upStartRight',\n ]}\n offset=\"2xs\"\n ref={popoverRef}\n role=\"listbox\"\n className={cnSelectDropdown(null, [\n cnListBox({ size, form, border: true, shadow: true }),\n cnMixPopoverAnimate({ animate }),\n className,\n ])}\n equalAnchorWidth\n >\n <div\n className={cnSelectDropdown('List', [\n cnMixSpace({\n pV: mapVerticalSpase[size],\n }),\n ])}\n ref={dropdownRef}\n >\n {isLoading && (\n <SelectLoader mode={isListShowed ? 'blur' : 'empty'} />\n )}\n {visibleItems.map((group) => {\n if (isOptionForCreate(group)) {\n return (\n <SelectCreateButton\n size={size}\n labelForCreate={labelForCreate}\n inputValue={group.label}\n indent={indent}\n {...getOptionProps({ index: getIndex(), item: group })}\n />\n );\n }\n return (\n <Fragment key={group.key}>\n {group.group && getGroupLabel && (\n <SelectGroupLabel\n label={getGroupLabel(group.group)}\n size={size}\n indent={indent}\n />\n )}\n {group.items.map((item, i) => {\n return (\n <Fragment key={`${group.key}-${i}`}>\n {renderItem({\n item,\n ...getOptionProps({ index: getIndex(), item }),\n })}\n </Fragment>\n );\n })}\n </Fragment>\n );\n })}\n {!isLoading && hasItems && notFound && labelForNotFound && (\n <ListItem\n size={size}\n label={labelForNotFound}\n innerOffset={indent}\n >\n {labelForNotFound}\n </ListItem>\n )}\n {!isLoading && !hasItems && labelForEmptyItems && (\n <ListItem\n size={size}\n label={labelForNotFound}\n innerOffset={indent}\n >\n {labelForEmptyItems}\n </ListItem>\n )}\n </div>\n </Popover>\n );\n }}\n </Transition>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"SelectDropdown.js","names":["React","Fragment","useMemo","useRef","Transition","cnListBox","ListItem","mapVerticalSpase","cnMixSpace","isOptionForCreate","animateTimeout","cnMixPopoverAnimate","cn","fabricIndex","Popover","SelectCreateButton","SelectGroupLabel","SelectLoader","selectDropdownform","defaultSelectDropdownPropForm","cnSelectDropdown","SelectDropdown","props","controlRef","size","getOptionProps","dropdownRef","labelForCreate","className","labelForNotFound","labelForEmptyItems","hasItems","form","isOpen","offset","offsetProp","renderItem","visibleItems","isLoading","getGroupLabel","notFound","otherProps","indent","popoverRef","isListShowed","filter","group","Array","isArray","items","length","animate","getIndex","border","shadow","pV","map","label","index","item","key","i"],"sources":["../../../../../../src/components/SelectComponents/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["import './SelectDropdown.css';\n\nimport React, { Fragment, useMemo, useRef } from 'react';\nimport { Transition } from 'react-transition-group';\n\nimport {\n cnListBox,\n ListItem,\n mapVerticalSpase,\n} from '##/components/ListCanary';\nimport { cnMixSpace } from '##/mixs/MixSpace';\n\nimport {\n GetOptionPropsResult,\n isOptionForCreate,\n OptionForCreate,\n OptionProps,\n} from '../../../hooks/useSelect/useSelect';\nimport {\n animateTimeout,\n cnMixPopoverAnimate,\n} from '../../../mixs/MixPopoverAnimate/MixPopoverAnimate';\nimport { cn } from '../../../utils/bem';\nimport { fabricIndex } from '../../../utils/fabricIndex';\nimport { PropsWithJsxAttributes } from '../../../utils/types/PropsWithJsxAttributes';\nimport { Popover, PopoverPropOffset } from '../../Popover/Popover';\nimport { SelectCreateButton } from '../SelectCreateButton/SelectCreateButton';\nimport { SelectGroupLabel } from '../SelectGroupLabel/SelectGroupLabel';\nimport { SelectLoader } from '../SelectLoader/SelectLoader';\nimport { PropSize, RenderItemProps } from '../types';\n\nexport const selectDropdownform = ['default', 'brick', 'round'] as const;\nexport type SelectDropdownPropForm = typeof selectDropdownform[number];\nexport const defaultSelectDropdownPropForm = selectDropdownform[0];\n\ntype Props<ITEM, GROUP> = PropsWithJsxAttributes<{\n size: PropSize;\n controlRef: React.MutableRefObject<HTMLDivElement \| null>;\n dropdownRef: React.MutableRefObject<HTMLDivElement \| null>;\n getOptionProps(props: OptionProps<ITEM>): GetOptionPropsResult;\n form: SelectDropdownPropForm;\n isOpen: boolean;\n offset?: PopoverPropOffset \| 'none';\n isLoading?: boolean;\n renderItem: (props: RenderItemProps<ITEM>) => JSX.Element \| null;\n visibleItems: (\n \| OptionForCreate\n \| {\n items: ITEM[];\n key: string \| number;\n group?: GROUP;\n groupIndex: number;\n }\n )[];\n getGroupLabel?: (group: GROUP) => string;\n labelForCreate?: string;\n labelForNotFound?: string;\n labelForEmptyItems?: string;\n notFound?: boolean;\n hasItems?: boolean;\n}>;\n\ntype SelectDropdown = <ITEM, GROUP>(\n props: Props<ITEM, GROUP>,\n) => React.ReactElement \| null;\n\nconst cnSelectDropdown = cn('SelectDropdown');\n\nexport const SelectDropdown: SelectDropdown = (props) => {\n const {\n controlRef,\n size,\n getOptionProps,\n dropdownRef,\n labelForCreate,\n className,\n labelForNotFound,\n labelForEmptyItems,\n hasItems = true,\n form,\n isOpen,\n offset: offsetProp = 'none',\n renderItem,\n visibleItems,\n isLoading,\n getGroupLabel,\n notFound,\n ...otherProps\n } = props;\n\n const indent = form === 'round' ? 'increased' : 'normal';\n\n const popoverRef = useRef<HTMLDivElement>(null);\n\n const isListShowed = useMemo(() => {\n return (\n visibleItems.filter(\n (group) =>\n isOptionForCreate(group) \|\|\n (Array.isArray(group.items) && group.items.length > 0),\n ).length > 0\n );\n }, [visibleItems]);\n\n const offset = offsetProp === 'none' ? undefined : offsetProp;\n\n return (\n <Transition\n in={isOpen}\n unmountOnExit\n nodeRef={popoverRef}\n timeout={animateTimeout}\n >\n {(animate) => {\n const getIndex = fabricIndex(-1);\n return (\n <Popover\n {...otherProps}\n anchorRef={controlRef}\n direction=\"downStartLeft\"\n possibleDirections={[\n 'downStartLeft',\n 'upStartLeft',\n 'downStartRight',\n 'upStartRight',\n ]}\n offset={offset}\n ref={popoverRef}\n role=\"listbox\"\n className={cnSelectDropdown(null, [\n cnListBox({ size, form, border: true, shadow: true }),\n cnMixPopoverAnimate({ animate }),\n className,\n ])}\n equalAnchorWidth\n >\n <div\n className={cnSelectDropdown('List', [\n cnMixSpace({\n pV: mapVerticalSpase[size],\n }),\n ])}\n ref={dropdownRef}\n >\n {isLoading && (\n <SelectLoader mode={isListShowed ? 'blur' : 'empty'} />\n )}\n {visibleItems.map((group) => {\n if (isOptionForCreate(group)) {\n return (\n <SelectCreateButton\n size={size}\n labelForCreate={labelForCreate}\n inputValue={group.label}\n indent={indent}\n {...getOptionProps({ index: getIndex(), item: group })}\n />\n );\n }\n return (\n <Fragment key={group.key}>\n {group.group && getGroupLabel && (\n <SelectGroupLabel\n label={getGroupLabel(group.group)}\n size={size}\n indent={indent}\n />\n )}\n {group.items.map((item, i) => {\n return (\n <Fragment key={`${group.key}-${i}`}>\n {renderItem({\n item,\n ...getOptionProps({ index: getIndex(), item }),\n })}\n </Fragment>\n );\n })}\n </Fragment>\n );\n })}\n {!isLoading && hasItems && notFound && labelForNotFound && (\n <ListItem\n size={size}\n label={labelForNotFound}\n innerOffset={indent}\n >\n {labelForNotFound}\n </ListItem>\n )}\n {!isLoading && !hasItems && labelForEmptyItems && (\n <ListItem\n size={size}\n label={labelForNotFound}\n innerOffset={indent}\n >\n {labelForEmptyItems}\n </ListItem>\n )}\n </div>\n </Popover>\n );\n }}\n </Transition>\n );\n};\n"],"mappings":"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"}

package/__internal__/src/components/SelectComponents/SelectValueTag/SelectValueTag.css CHANGED Viewed

	@@ -1 +1 @@
1	- .TagBase.SelectValueTag{margin:0 var(--tag-space) var(--tag-space) 0}.TagBase.SelectValueTag .TagBase-Label{word-break:break-word}.TagBase.SelectValueTag_disabled{background-color:var(--color-control-bg-disable);pointer-events:none}.TagBase.SelectValueTag_disabled>*{color:var(--color-control-typo-disable)}
1	+ .TagBase.SelectValueTag{margin:0 var(--tag-space) var(--tag-space) 0}.TagBase.SelectValueTag.TagBase_size_l,.TagBase.SelectValueTag.TagBase_size_m,.TagBase.SelectValueTag.TagBase_size_s{height:calc(var(--tag-base-height) - var(--space-3xs));line-height:calc(var(--tag-base-height) - var(--space-3xs))}.TagBase.SelectValueTag .TagBase-Label{word-break:break-word}.TagBase.SelectValueTag_disabled{background-color:var(--color-control-bg-disable);pointer-events:none}.TagBase.SelectValueTag_disabled>*{color:var(--color-control-typo-disable)}

package/__internal__/src/components/SelectComponents/types.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { RefObject } from 'react';
 export declare const propSize: readonly ["m", "xs", "s", "l"];
 export declare type PropSize = typeof propSize[number];
 export declare const defaultPropSize: "m";
-export declare const propForm: readonly ["default", "brick", "round", "clearRound", "roundClear", "clearDefault", "defaultClear", "defaultBrick", "brickDefault", "brickClear", "clearBrick", "clearClear"];
+export declare const propForm: readonly ["default", "defaultClear", "defaultBrick", "brick", "brickDefault", "brickClear", "brickRound", "round", "roundClear", "roundBrick", "clearRound", "clearDefault", "clearBrick", "clearClear"];
 export declare type PropForm = typeof propForm[number];
 export declare const defaultPropForm: "default";
 export declare const propView: readonly ["default", "clear"];

package/__internal__/src/components/SelectComponents/types.js CHANGED Viewed

@@ -1,2 +1,2 @@
-export var propSize=["m","xs","s","l"];export var defaultPropSize=propSize[0];export var propForm=["default","brick","round","clearRound","roundClear","clearDefault","defaultClear","defaultBrick","brickDefault","brickClear","clearBrick","clearClear"];export var defaultPropForm=propForm[0];export var propView=["default","clear"];export var defaultPropView=propView[0];export var propStatus=["alert","warning","success"];
+export var propSize=["m","xs","s","l"];export var defaultPropSize=propSize[0];export var propForm=["default","defaultClear","defaultBrick","brick","brickDefault","brickClear","brickRound","round","roundClear","roundBrick","clearRound","clearDefault","clearBrick","clearClear"];export var defaultPropForm=propForm[0];export var propView=["default","clear"];export var defaultPropView=propView[0];export var propStatus=["alert","warning","success"];
 //# sourceMappingURL=types.js.map

package/__internal__/src/components/SelectComponents/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","names":["propSize","defaultPropSize","propForm","defaultPropForm","propView","defaultPropView","propStatus"],"sources":["../../../../../src/components/SelectComponents/types.ts"],"sourcesContent":["import { RefObject } from 'react';\n\nexport const propSize = ['m', 'xs', 's', 'l'] as const;\nexport type PropSize = typeof propSize[number];\nexport const defaultPropSize = propSize[0];\n\nexport const propForm = [\n 'default',\n 'brick',\n '~~round~~',\n '~~clearRound~~',\n '~~roundClear~~',\n '~~clearDefault~~',\n '~~defaultClear~~',\n '~~defaultBrick~~',\n '~~brickDefault~~',\n '~~brickClear~~',\n 'clearBrick',\n 'clearClear',\n] as const;\nexport type PropForm = typeof propForm[number];\nexport const defaultPropForm = propForm[0];\n\nexport const propView = ['default', 'clear'] as const;\nexport type PropView = typeof propView[number];\nexport const defaultPropView = propView[0];\n\nexport const propStatus = ['alert', 'warning', 'success'] as const;\nexport type PropStatus = typeof propStatus[number];\n\nexport type CommonSelectProps<ITEM> = {\n options: ITEM[];\n id: string;\n placeholder?: string;\n ariaLabel?: string;\n getOptionLabel(arg: ITEM): string;\n getOptionKey?(arg: ITEM): string \| number;\n onBlur?: (event?: React.FocusEvent<HTMLInputElement>) => void;\n onFocus?: (event?: React.FocusEvent<HTMLInputElement>) => void;\n children?: never;\n dropdownClassName?: string;\n dropdownRef?: RefObject<HTMLDivElement>;\n name?: string;\n};\n\nexport type RenderItemProps<ITEM> = {\n item: ITEM;\n active: boolean;\n hovered: boolean;\n onClick: (e: React.SyntheticEvent) => void;\n onMouseEnter: (e: React.SyntheticEvent) => void;\n};\n"],"mappings":"AAEA,MAAO,IAAMA,SAAQ,CAAG,CAAC,GAAD,CAAM,IAAN,CAAY,GAAZ,CAAiB,GAAjB,CAAjB,CAEP,MAAO,IAAMC,gBAAe,CAAGD,QAAQ,CAAC,CAAD,CAAhC,CAEP,MAAO,IAAME,SAAQ,CAAG,CACtB,SADsB,CAEtB,~~OAFsB~~,CAGtB,~~OAHsB~~,CAItB,~~YAJsB~~,CAKtB,~~YALsB~~,CAMtB,~~cANsB~~,CAOtB,~~cAPsB~~,CAQtB,~~cARsB~~,CAStB,~~cATsB~~,CAUtB,YAVsB,CAWtB,YAXsB,CAYtB,~~YAZsB~~,CAAjB,~~CAeP~~,MAAO,IAAMC,gBAAe,CAAGD,QAAQ,CAAC,CAAD,CAAhC,CAEP,MAAO,IAAME,SAAQ,CAAG,CAAC,SAAD,CAAY,OAAZ,CAAjB,CAEP,MAAO,IAAMC,gBAAe,CAAGD,QAAQ,CAAC,CAAD,CAAhC,CAEP,MAAO,IAAME,WAAU,CAAG,CAAC,OAAD,CAAU,SAAV,CAAqB,SAArB,CAAnB"}
1	+ {"version":3,"file":"types.js","names":["propSize","defaultPropSize","propForm","defaultPropForm","propView","defaultPropView","propStatus"],"sources":["../../../../../src/components/SelectComponents/types.ts"],"sourcesContent":["import { RefObject } from 'react';\n\nexport const propSize = ['m', 'xs', 's', 'l'] as const;\nexport type PropSize = typeof propSize[number];\nexport const defaultPropSize = propSize[0];\n\nexport const propForm = [\n 'default',\n 'defaultClear',\n 'defaultBrick',\n 'brick',\n 'brickDefault',\n 'brickClear',\n 'brickRound',\n 'round',\n 'roundClear',\n 'roundBrick',\n 'clearRound',\n 'clearDefault',\n 'clearBrick',\n 'clearClear',\n] as const;\nexport type PropForm = typeof propForm[number];\nexport const defaultPropForm = propForm[0];\n\nexport const propView = ['default', 'clear'] as const;\nexport type PropView = typeof propView[number];\nexport const defaultPropView = propView[0];\n\nexport const propStatus = ['alert', 'warning', 'success'] as const;\nexport type PropStatus = typeof propStatus[number];\n\nexport type CommonSelectProps<ITEM> = {\n options: ITEM[];\n id: string;\n placeholder?: string;\n ariaLabel?: string;\n getOptionLabel(arg: ITEM): string;\n getOptionKey?(arg: ITEM): string \| number;\n onBlur?: (event?: React.FocusEvent<HTMLInputElement>) => void;\n onFocus?: (event?: React.FocusEvent<HTMLInputElement>) => void;\n children?: never;\n dropdownClassName?: string;\n dropdownRef?: RefObject<HTMLDivElement>;\n name?: string;\n};\n\nexport type RenderItemProps<ITEM> = {\n item: ITEM;\n active: boolean;\n hovered: boolean;\n onClick: (e: React.SyntheticEvent) => void;\n onMouseEnter: (e: React.SyntheticEvent) => void;\n};\n"],"mappings":"AAEA,MAAO,IAAMA,SAAQ,CAAG,CAAC,GAAD,CAAM,IAAN,CAAY,GAAZ,CAAiB,GAAjB,CAAjB,CAEP,MAAO,IAAMC,gBAAe,CAAGD,QAAQ,CAAC,CAAD,CAAhC,CAEP,MAAO,IAAME,SAAQ,CAAG,CACtB,SADsB,CAEtB,cAFsB,CAGtB,cAHsB,CAItB,OAJsB,CAKtB,cALsB,CAMtB,YANsB,CAOtB,YAPsB,CAQtB,OARsB,CAStB,YATsB,CAUtB,YAVsB,CAWtB,YAXsB,CAYtB,cAZsB,CAatB,YAbsB,CActB,YAdsB,CAAjB,CAiBP,MAAO,IAAMC,gBAAe,CAAGD,QAAQ,CAAC,CAAD,CAAhC,CAEP,MAAO,IAAME,SAAQ,CAAG,CAAC,SAAD,CAAY,OAAZ,CAAjB,CAEP,MAAO,IAAMC,gBAAe,CAAGD,QAAQ,CAAC,CAAD,CAAhC,CAEP,MAAO,IAAME,WAAU,CAAG,CAAC,OAAD,CAAU,SAAV,CAAqB,SAArB,CAAnB"}

package/__internal__/src/components/Slider/Slider.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["min","max","onChange","onAfterChange","value","step","disabled","size","view","leftSide","rightSide","withTooltip","range","label","status","caption","tooltipFormatter","className","style"];import"./Slider.css";import React,{forwardRef,useRef}from"react";import{usePropsHandler}from"../EventInterceptor/usePropsHandler";import{FieldCaption}from"../FieldCaption";import{FieldLabel}from"../FieldLabel";import{useFlag}from"../../hooks/useFlag";import{useSortSteps}from"../../hooks/useSortSteps";import{cn}from"../../utils/bem";import{defaultPropSize,defaultTooltipFormatter,getIcon,getMaxForStartField,getMinForEndField,getOnChandgeForInput,getValueForInput}from"./helper";import{SliderInput}from"./SliderInput/SliderInput";import{SliderLine}from"./SliderLine/SliderLine";import{SliderPoint}from"./SliderPoint/SliderPoint";import{useSlider}from"./useSlider/useSlider";import{useSliderStationing}from"./useSliderStationing";var cnSlider=cn("Slider"),sizeMap={xs:"xs",s:"s",m:"m",l:"m"};export var COMPONENT_NAME="Slider";var SliderRender=function(a,b){var c=useRef(null),d=usePropsHandler(COMPONENT_NAME,a,c),e=d.min,f=void 0===e?0:e,g=d.max,h=void 0===g?100:g,i=d.onChange,j=d.onAfterChange,k=d.value,l=d.step,m=d.disabled,n=void 0!==m&&m,o=d.size,p=void 0===o?defaultPropSize:o,q=d.view,r=void 0===q?"default":q,s=d.leftSide,t=d.rightSide,u=d.withTooltip,v=d.range,w=void 0!==v&&v,x=d.label,y=d.status,z=d.caption,A=d.tooltipFormatter,B=void 0===A?defaultTooltipFormatter:A,C=d.className,D=d.style,E=_objectWithoutProperties(d,_excluded),F=useFlag(!1),G=_slicedToArray(F,2),H=G[0],I=G[1],J=I.on,K=I.off,L=useRef(null),M=useRef(null),N=useSortSteps({step:l,min:f,max:h}),O=l?N:Math.abs((h-f)/100),P=getIcon(t),Q=getIcon(s),R=sizeMap[p],S=useSlider({disabled:n,range:w,value:k,min:f,max:h,step:O,onChange:i,onAfterChange:j,sliderRef:c,buttonRefs:[L,M]}),T=S.onKeyPress,U=S.onFocus,V=S.handlePress,W=S.onSliderClick,X=S.popoverPosition,Y=S.activeButton,Z=S.currentValue,$=useSliderStationing(1===Z.length?Z[0]:Z,f,h,r,w,O,[L,M],c),_=$.lineSizes,aa=$.buttonPositions,ba={role:"button",tabIndex:0,className:cnSlider("Control"),ref:c,onClick:W},ca=function(a){a?J():K()};return React.createElement("div",Object.assign({ref:b,className:cnSlider({size:p},[C]),style:D},E),x&&React.createElement(FieldLabel,{className:cnSlider("Label"),size:p},x),React.createElement("div",{className:cnSlider("Container")},("input"===s||Q)&&React.createElement("div",{className:cnSlider("Side",{position:"left"})},"input"===s&&React.createElement(SliderInput,{value:getValueForInput(a,0),onChange:getOnChandgeForInput(a,0),size:p,min:f,max:getMaxForStartField(a),status:y,step:O,disabled:n}),Q&&React.createElement(Q,{size:null!==R&&void 0!==R?R:void 0,view:"secondary"})),React.createElement("div",ba,React.createElement(SliderLine,{hovered:H||"number"==typeof Y,onHover:ca,lines:_,disabled:n,view:r}),Z.map(function(a,b){return React.createElement(SliderPoint,{hovered:H||"number"==typeof Y,buttonRef:L,popoverPosition:X[b],onKeyPress:T,onFocus:U,handlePress:V,disabled:n,position:aa[b],focused:Y===b,buttonLabel:b,withTooltip:u,onHover:ca,tooltipFormatter:B,value:a,role:"slider","aria-valuemin":f,"aria-valuemax":h,"aria-valuenow":a,tooltipZIndex:"number"==typeof(null===D||void 0===D?void 0:D.zIndex)?D.zIndex+1:void 0,key:cnSlider("Point",{index:b})})})),("input"===t||P)&&React.createElement("div",{className:cnSlider("Side",{position:"right"})},"input"===t&&React.createElement(SliderInput,{value:getValueForInput(a,1),onChange:getOnChandgeForInput(a,1),size:p,min:getMinForEndField(a),max:h,status:y,step:O,disabled:n}),P&&React.createElement(P,{size:R,view:"secondary"}))),z&&React.createElement(FieldCaption,{className:cnSlider("Caption"),status:y},z))};export var Slider=forwardRef(SliderRender);
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["min","max","onChange","onAfterChange","value","step","disabled","size","view","leftSide","rightSide","withTooltip","range","label","labelIcon","status","caption","tooltipFormatter","className","style"];import"./Slider.css";import React,{forwardRef,useRef}from"react";import{usePropsHandler}from"../EventInterceptor/usePropsHandler";import{FieldCaption}from"../FieldCaption";import{FieldLabel}from"../FieldLabel";import{useFlag}from"../../hooks/useFlag";import{useSortSteps}from"../../hooks/useSortSteps";import{cn}from"../../utils/bem";import{defaultPropSize,defaultTooltipFormatter,getIcon,getMaxForStartField,getMinForEndField,getOnChandgeForInput,getValueForInput}from"./helper";import{SliderInput}from"./SliderInput/SliderInput";import{SliderLine}from"./SliderLine/SliderLine";import{SliderPoint}from"./SliderPoint/SliderPoint";import{useSlider}from"./useSlider/useSlider";import{useSliderStationing}from"./useSliderStationing";var cnSlider=cn("Slider"),sizeMap={xs:"xs",s:"s",m:"m",l:"m"};export var COMPONENT_NAME="Slider";var SliderRender=function(a,b){var c=useRef(null),d=usePropsHandler(COMPONENT_NAME,a,c),e=d.min,f=void 0===e?0:e,g=d.max,h=void 0===g?100:g,i=d.onChange,j=d.onAfterChange,k=d.value,l=d.step,m=d.disabled,n=void 0!==m&&m,o=d.size,p=void 0===o?defaultPropSize:o,q=d.view,r=void 0===q?"default":q,s=d.leftSide,t=d.rightSide,u=d.withTooltip,v=d.range,w=void 0!==v&&v,x=d.label,y=d.labelIcon,z=d.status,A=d.caption,B=d.tooltipFormatter,C=void 0===B?defaultTooltipFormatter:B,D=d.className,E=d.style,F=_objectWithoutProperties(d,_excluded),G=useFlag(!1),H=_slicedToArray(G,2),I=H[0],J=H[1],K=J.on,L=J.off,M=useRef(null),N=useRef(null),O=useSortSteps({step:l,min:f,max:h}),P=l?O:Math.abs((h-f)/100),Q=getIcon(t),R=getIcon(s),S=sizeMap[p],T=useSlider({disabled:n,range:w,value:k,min:f,max:h,step:P,onChange:i,onAfterChange:j,sliderRef:c,buttonRefs:[M,N]}),U=T.onKeyPress,V=T.onFocus,W=T.handlePress,X=T.onSliderClick,Y=T.popoverPosition,Z=T.activeButton,$=T.currentValue,_=useSliderStationing(1===$.length?$[0]:$,f,h,r,w,P,[M,N],c),aa=_.lineSizes,ba=_.buttonPositions,ca={role:"button",tabIndex:0,className:cnSlider("Control"),ref:c,onClick:X},da=function(a){a?K():L()};return React.createElement("div",Object.assign({ref:b,className:cnSlider({size:p},[D]),style:E},F),x&&React.createElement(FieldLabel,{icon:y,className:cnSlider("Label"),size:p},x),React.createElement("div",{className:cnSlider("Container")},("input"===s||R)&&React.createElement("div",{className:cnSlider("Side",{position:"left"})},"input"===s&&React.createElement(SliderInput,{value:getValueForInput(a,0),onChange:getOnChandgeForInput(a,0),size:p,min:f,max:getMaxForStartField(a),status:z,step:P,disabled:n}),R&&React.createElement(R,{size:null!==S&&void 0!==S?S:void 0,view:"secondary"})),React.createElement("div",ca,React.createElement(SliderLine,{hovered:I||"number"==typeof Z,onHover:da,lines:aa,disabled:n,view:r}),$.map(function(a,b){return React.createElement(SliderPoint,{hovered:I||"number"==typeof Z,buttonRef:M,popoverPosition:Y[b],onKeyPress:U,onFocus:V,handlePress:W,disabled:n,position:ba[b],focused:Z===b,buttonLabel:b,withTooltip:u,onHover:da,tooltipFormatter:C,value:a,role:"slider","aria-valuemin":f,"aria-valuemax":h,"aria-valuenow":a,tooltipZIndex:"number"==typeof(null===E||void 0===E?void 0:E.zIndex)?E.zIndex+1:void 0,key:cnSlider("Point",{index:b})})})),("input"===t||Q)&&React.createElement("div",{className:cnSlider("Side",{position:"right"})},"input"===t&&React.createElement(SliderInput,{value:getValueForInput(a,1),onChange:getOnChandgeForInput(a,1),size:p,min:getMinForEndField(a),max:h,status:z,step:P,disabled:n}),Q&&React.createElement(Q,{size:S,view:"secondary"}))),A&&React.createElement(FieldCaption,{className:cnSlider("Caption"),status:z},A))};export var Slider=forwardRef(SliderRender);
 //# sourceMappingURL=Slider.js.map

package/__internal__/src/components/Slider/Slider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.js","names":["React","forwardRef","useRef","usePropsHandler","FieldCaption","FieldLabel","useFlag","useSortSteps","cn","defaultPropSize","defaultTooltipFormatter","getIcon","getMaxForStartField","getMinForEndField","getOnChandgeForInput","getValueForInput","SliderInput","SliderLine","SliderPoint","useSlider","useSliderStationing","cnSlider","sizeMap","xs","s","m","l","COMPONENT_NAME","SliderRender","props","ref","sliderRef","min","max","onChange","onAfterChange","value","stepProp","step","disabled","size","view","leftSide","rightSide","withTooltip","range","label","status","caption","tooltipFormatter","className","style","otherProps","isHovered","on","off","leftButtonRef","rightButtonRef","sortedSteps","Math","abs","IconRight","IconLeft","iconSize","buttonRefs","onKeyPress","onFocus","handlePress","onSliderClick","popoverPosition","activeButton","currentValue","length","lineSizes","buttonPositions","containerProps","role","tabIndex","onClick","changeHovered","position","map","val","index","zIndex","Slider"],"sources":["../../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import './Slider.css';\n\nimport { IconPropSize } from '@consta/icons/Icon';\nimport React, { forwardRef, useRef } from 'react';\n\nimport { usePropsHandler } from '##/components/EventInterceptor/usePropsHandler';\nimport { FieldCaption } from '##/components/FieldCaption';\nimport { FieldLabel } from '##/components/FieldLabel';\nimport { useFlag } from '##/hooks/useFlag';\nimport { useSortSteps } from '##/hooks/useSortSteps';\nimport { cn } from '##/utils/bem';\n\nimport {\n defaultPropSize,\n defaultTooltipFormatter,\n getIcon,\n getMaxForStartField,\n getMinForEndField,\n getOnChandgeForInput,\n getValueForInput,\n PropSize,\n SliderComponent,\n SliderProps,\n} from './helper';\nimport { SliderInput } from './SliderInput/SliderInput';\nimport { SliderLine } from './SliderLine/SliderLine';\nimport { SliderPoint } from './SliderPoint/SliderPoint';\nimport { ActiveButton } from './useSlider/helper';\nimport { useSlider } from './useSlider/useSlider';\nimport { useSliderStationing } from './useSliderStationing';\n\nconst cnSlider = cn('Slider');\n\nconst sizeMap: Record<PropSize, IconPropSize> = {\n xs: 'xs',\n s: 's',\n m: 'm',\n l: 'm',\n};\n\nexport const COMPONENT_NAME = 'Slider' as const;\n\nconst SliderRender = <RANGE extends boolean = false>(\n props: SliderProps<RANGE>,\n ref: React.Ref<HTMLDivElement>,\n) => {\n const sliderRef = useRef<HTMLDivElement>(null);\n\n const {\n min = 0,\n max = 100,\n onChange,\n onAfterChange,\n value,\n step: stepProp,\n disabled = false,\n size = defaultPropSize,\n view = 'default',\n leftSide,\n rightSide,\n withTooltip,\n range = false,\n label,\n status,\n caption,\n tooltipFormatter = defaultTooltipFormatter,\n className,\n style,\n ...otherProps\n } = usePropsHandler(COMPONENT_NAME, props, sliderRef);\n\n const [isHovered, { on, off }] = useFlag(false);\n const leftButtonRef = useRef<HTMLButtonElement>(null);\n const rightButtonRef = useRef<HTMLButtonElement>(null);\n const sortedSteps = useSortSteps({ step: stepProp, min, max });\n const step = stepProp ? sortedSteps : Math.abs((max - min) / 100);\n const IconRight = getIcon(rightSide);\n const IconLeft = getIcon(leftSide);\n const iconSize = sizeMap[size];\n\n const {\n onKeyPress,\n onFocus,\n handlePress,\n onSliderClick,\n popoverPosition,\n activeButton,\n currentValue,\n } = useSlider({\n disabled,\n range,\n value,\n min,\n max,\n step,\n onChange,\n onAfterChange,\n sliderRef,\n buttonRefs: [leftButtonRef, rightButtonRef],\n });\n\n const { lineSizes, buttonPositions } = useSliderStationing(\n currentValue.length === 1 ? currentValue[0] : currentValue,\n min,\n max,\n view,\n range,\n step,\n [leftButtonRef, rightButtonRef],\n sliderRef,\n );\n\n const containerProps = {\n role: 'button',\n tabIndex: 0,\n className: cnSlider('Control'),\n ref: sliderRef,\n onClick: onSliderClick,\n };\n\n const changeHovered = (status: boolean) => {\n if (status) on();\n else off();\n };\n\n return (\n <div\n ref={ref}\n className={cnSlider({ size }, [className])}\n style={style}\n {...otherProps}\n >\n {label && (\n <FieldLabel className={cnSlider('Label')} size={size}>\n {label}\n </FieldLabel>\n )}\n <div className={cnSlider('Container')}>\n {(leftSide === 'input' \|\| IconLeft) && (\n <div className={cnSlider('Side', { position: 'left' })}>\n {leftSide === 'input' && (\n <SliderInput\n value={getValueForInput(props, 0)}\n onChange={getOnChandgeForInput(props, 0)}\n size={size}\n min={min}\n max={getMaxForStartField(props)}\n status={status}\n step={step}\n disabled={disabled}\n />\n )}\n {IconLeft && (\n <IconLeft size={iconSize ?? undefined} view=\"secondary\" />\n )}\n </div>\n )}\n <div {...containerProps}>\n <SliderLine\n hovered={isHovered \|\| typeof activeButton === 'number'}\n onHover={changeHovered}\n lines={lineSizes}\n disabled={disabled}\n view={view}\n />\n {currentValue.map((val, index) => (\n <SliderPoint\n hovered={isHovered \|\| typeof activeButton === 'number'}\n buttonRef={leftButtonRef}\n popoverPosition={popoverPosition[index]}\n onKeyPress={onKeyPress}\n onFocus={onFocus}\n handlePress={handlePress}\n disabled={disabled}\n position={buttonPositions[index]}\n focused={activeButton === index}\n buttonLabel={index as ActiveButton}\n withTooltip={withTooltip}\n onHover={changeHovered}\n tooltipFormatter={tooltipFormatter}\n value={val}\n role=\"slider\"\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={val}\n tooltipZIndex={\n typeof style?.zIndex === 'number' ? style.zIndex + 1 : undefined\n }\n key={cnSlider('Point', { index })}\n />\n ))}\n </div>\n {(rightSide === 'input' \|\| IconRight) && (\n <div className={cnSlider('Side', { position: 'right' })}>\n {rightSide === 'input' && (\n <SliderInput\n value={getValueForInput(props, 1)}\n onChange={getOnChandgeForInput(props, 1)}\n size={size}\n min={getMinForEndField(props)}\n max={max}\n status={status}\n step={step}\n disabled={disabled}\n />\n )}\n {IconRight && <IconRight size={iconSize} view=\"secondary\" />}\n </div>\n )}\n </div>\n {caption && (\n <FieldCaption className={cnSlider('Caption')} status={status}>\n {caption}\n </FieldCaption>\n )}\n </div>\n );\n};\n\nexport const Slider = forwardRef(SliderRender) as SliderComponent;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Slider.js","names":["React","forwardRef","useRef","usePropsHandler","FieldCaption","FieldLabel","useFlag","useSortSteps","cn","defaultPropSize","defaultTooltipFormatter","getIcon","getMaxForStartField","getMinForEndField","getOnChandgeForInput","getValueForInput","SliderInput","SliderLine","SliderPoint","useSlider","useSliderStationing","cnSlider","sizeMap","xs","s","m","l","COMPONENT_NAME","SliderRender","props","ref","sliderRef","min","max","onChange","onAfterChange","value","stepProp","step","disabled","size","view","leftSide","rightSide","withTooltip","range","label","labelIcon","status","caption","tooltipFormatter","className","style","otherProps","isHovered","on","off","leftButtonRef","rightButtonRef","sortedSteps","Math","abs","IconRight","IconLeft","iconSize","buttonRefs","onKeyPress","onFocus","handlePress","onSliderClick","popoverPosition","activeButton","currentValue","length","lineSizes","buttonPositions","containerProps","role","tabIndex","onClick","changeHovered","position","map","val","index","zIndex","Slider"],"sources":["../../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import './Slider.css';\n\nimport { IconPropSize } from '@consta/icons/Icon';\nimport React, { forwardRef, useRef } from 'react';\n\nimport { usePropsHandler } from '##/components/EventInterceptor/usePropsHandler';\nimport { FieldCaption } from '##/components/FieldCaption';\nimport { FieldLabel } from '##/components/FieldLabel';\nimport { useFlag } from '##/hooks/useFlag';\nimport { useSortSteps } from '##/hooks/useSortSteps';\nimport { cn } from '##/utils/bem';\n\nimport {\n defaultPropSize,\n defaultTooltipFormatter,\n getIcon,\n getMaxForStartField,\n getMinForEndField,\n getOnChandgeForInput,\n getValueForInput,\n PropSize,\n SliderComponent,\n SliderProps,\n} from './helper';\nimport { SliderInput } from './SliderInput/SliderInput';\nimport { SliderLine } from './SliderLine/SliderLine';\nimport { SliderPoint } from './SliderPoint/SliderPoint';\nimport { ActiveButton } from './useSlider/helper';\nimport { useSlider } from './useSlider/useSlider';\nimport { useSliderStationing } from './useSliderStationing';\n\nconst cnSlider = cn('Slider');\n\nconst sizeMap: Record<PropSize, IconPropSize> = {\n xs: 'xs',\n s: 's',\n m: 'm',\n l: 'm',\n};\n\nexport const COMPONENT_NAME = 'Slider' as const;\n\nconst SliderRender = <RANGE extends boolean = false>(\n props: SliderProps<RANGE>,\n ref: React.Ref<HTMLDivElement>,\n) => {\n const sliderRef = useRef<HTMLDivElement>(null);\n\n const {\n min = 0,\n max = 100,\n onChange,\n onAfterChange,\n value,\n step: stepProp,\n disabled = false,\n size = defaultPropSize,\n view = 'default',\n leftSide,\n rightSide,\n withTooltip,\n range = false,\n label,\n labelIcon,\n status,\n caption,\n tooltipFormatter = defaultTooltipFormatter,\n className,\n style,\n ...otherProps\n } = usePropsHandler(COMPONENT_NAME, props, sliderRef);\n\n const [isHovered, { on, off }] = useFlag(false);\n const leftButtonRef = useRef<HTMLButtonElement>(null);\n const rightButtonRef = useRef<HTMLButtonElement>(null);\n const sortedSteps = useSortSteps({ step: stepProp, min, max });\n const step = stepProp ? sortedSteps : Math.abs((max - min) / 100);\n const IconRight = getIcon(rightSide);\n const IconLeft = getIcon(leftSide);\n const iconSize = sizeMap[size];\n\n const {\n onKeyPress,\n onFocus,\n handlePress,\n onSliderClick,\n popoverPosition,\n activeButton,\n currentValue,\n } = useSlider({\n disabled,\n range,\n value,\n min,\n max,\n step,\n onChange,\n onAfterChange,\n sliderRef,\n buttonRefs: [leftButtonRef, rightButtonRef],\n });\n\n const { lineSizes, buttonPositions } = useSliderStationing(\n currentValue.length === 1 ? currentValue[0] : currentValue,\n min,\n max,\n view,\n range,\n step,\n [leftButtonRef, rightButtonRef],\n sliderRef,\n );\n\n const containerProps = {\n role: 'button',\n tabIndex: 0,\n className: cnSlider('Control'),\n ref: sliderRef,\n onClick: onSliderClick,\n };\n\n const changeHovered = (status: boolean) => {\n if (status) on();\n else off();\n };\n\n return (\n <div\n ref={ref}\n className={cnSlider({ size }, [className])}\n style={style}\n {...otherProps}\n >\n {label && (\n <FieldLabel icon={labelIcon} className={cnSlider('Label')} size={size}>\n {label}\n </FieldLabel>\n )}\n <div className={cnSlider('Container')}>\n {(leftSide === 'input' \|\| IconLeft) && (\n <div className={cnSlider('Side', { position: 'left' })}>\n {leftSide === 'input' && (\n <SliderInput\n value={getValueForInput(props, 0)}\n onChange={getOnChandgeForInput(props, 0)}\n size={size}\n min={min}\n max={getMaxForStartField(props)}\n status={status}\n step={step}\n disabled={disabled}\n />\n )}\n {IconLeft && (\n <IconLeft size={iconSize ?? undefined} view=\"secondary\" />\n )}\n </div>\n )}\n <div {...containerProps}>\n <SliderLine\n hovered={isHovered \|\| typeof activeButton === 'number'}\n onHover={changeHovered}\n lines={lineSizes}\n disabled={disabled}\n view={view}\n />\n {currentValue.map((val, index) => (\n <SliderPoint\n hovered={isHovered \|\| typeof activeButton === 'number'}\n buttonRef={leftButtonRef}\n popoverPosition={popoverPosition[index]}\n onKeyPress={onKeyPress}\n onFocus={onFocus}\n handlePress={handlePress}\n disabled={disabled}\n position={buttonPositions[index]}\n focused={activeButton === index}\n buttonLabel={index as ActiveButton}\n withTooltip={withTooltip}\n onHover={changeHovered}\n tooltipFormatter={tooltipFormatter}\n value={val}\n role=\"slider\"\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={val}\n tooltipZIndex={\n typeof style?.zIndex === 'number' ? style.zIndex + 1 : undefined\n }\n key={cnSlider('Point', { index })}\n />\n ))}\n </div>\n {(rightSide === 'input' \|\| IconRight) && (\n <div className={cnSlider('Side', { position: 'right' })}>\n {rightSide === 'input' && (\n <SliderInput\n value={getValueForInput(props, 1)}\n onChange={getOnChandgeForInput(props, 1)}\n size={size}\n min={getMinForEndField(props)}\n max={max}\n status={status}\n step={step}\n disabled={disabled}\n />\n )}\n {IconRight && <IconRight size={iconSize} view=\"secondary\" />}\n </div>\n )}\n </div>\n {caption && (\n <FieldCaption className={cnSlider('Caption')} status={status}>\n {caption}\n </FieldCaption>\n )}\n </div>\n );\n};\n\nexport const Slider = forwardRef(SliderRender) as SliderComponent;\n"],"mappings":"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"}

package/__internal__/src/components/Slider/helper.d.ts CHANGED Viewed

@@ -25,6 +25,7 @@ declare type Props<RANGE extends boolean = false> = {
     withTooltip?: boolean;
     value: SliderValue<RANGE>;
     label?: string;
+    labelIcon?: IconComponent;
     caption?: string;
     status?: PropStatus;
     min?: number;

package/__internal__/src/components/Slider/helper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"helper.js","names":["propStatus","defaultPropStatus","propSize","defaultPropSize","isRangeParams","params","range","isNotRangeParams","defaultTooltipFormatter","value","toString","getValueForInput","props","field","getOnChandgeForInput","e","onChange","getIcon","side","getMaxForStartField","max","getMinForEndField","min"],"sources":["../../../../../src/components/Slider/helper.ts"],"sourcesContent":["import { IconComponent } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';\nimport { ActiveButton } from './useSlider/helper';\n\nexport const propStatus = ['alert', 'warning', 'success'] as const;\nexport type PropStatus = typeof propStatus[number];\nexport const defaultPropStatus = propStatus[0];\n\nexport type PropView = 'default' \| 'division';\n\nexport const propSize = ['s', 'xs', 'm', 'l'] as const;\nexport type PropSize = typeof propSize[number];\nexport const defaultPropSize: PropSize = propSize[0];\n\nexport type SliderValue<RANGE> = RANGE extends true ? [number, number] : number;\n\nexport type PropOnChange<RANGE> = (prop: {\n e?:\n \| Event\n \| React.TouchEvent\n \| React.MouseEvent\n \| React.KeyboardEvent\n \| React.ChangeEvent;\n value: SliderValue<RANGE>;\n}) => void;\n\ntype PropToolipFormatter = (value: number \| undefined) => string;\n\ntype Side = IconComponent \| 'input';\n\ntype Props<RANGE extends boolean = false> = {\n className?: string;\n step?: number \| number[];\n view?: PropView;\n disabled?: boolean;\n range?: RANGE;\n withTooltip?: boolean;\n value: SliderValue<RANGE>;\n label?: string;\n caption?: string;\n status?: PropStatus;\n min?: number;\n size?: PropSize;\n max?: number;\n onChange?: PropOnChange<RANGE>;\n onAfterChange?: PropOnChange<RANGE>;\n leftSide?: Side;\n tooltipFormatter?: PropToolipFormatter;\n rightSide?: Side;\n};\n\nexport type Line = {\n width: number;\n active: boolean;\n size?: number[];\n};\n\nexport type SliderLineProps = {\n view?: PropView;\n lines: Line[];\n disabled?: boolean;\n hovered?: boolean;\n onHover?: (hovered: boolean) => void;\n};\n\nexport type SliderPointProps = PropsWithHTMLAttributes<\n {\n value?: number;\n disabled?: boolean;\n focused?: boolean;\n hovered?: boolean;\n withTooltip?: boolean;\n handlePress?: (typeButton: ActiveButton) => void;\n buttonLabel?: ActiveButton;\n buttonRef?: React.RefObject<HTMLButtonElement>;\n popoverPosition?: TrackPosition;\n tooltipFormatter?: PropToolipFormatter;\n onFocus?: (\n e: React.FocusEvent<HTMLButtonElement> \| React.MouseEvent,\n button: ActiveButton,\n ) => void;\n onKeyPress?: (e: React.KeyboardEvent, typeButton?: ActiveButton) => void;\n onHover?: (hovered: boolean) => void;\n position: number;\n tooltipZIndex?: number;\n },\n HTMLButtonElement\n>;\n\nexport type SliderProps<RANGE extends boolean> = PropsWithHTMLAttributes<\n Props<RANGE>,\n HTMLDivElement\n>;\n\nexport type SliderComponent = <RANGE extends boolean = false>(\n props: SliderProps<RANGE>,\n) => React.ReactElement \| null;\n\nconst isRangeParams = (params: Props<boolean>): params is Props<true> => {\n return !!params.range;\n};\n\nconst isNotRangeParams = (params: Props<boolean>): params is Props<false> => {\n return !params.range;\n};\n\nexport const defaultTooltipFormatter: PropToolipFormatter = (value) =>\n value?.toString() \|\| '';\n\nexport type TrackPosition = {\n x: number;\n y: number;\n} \| null;\n\nexport const getValueForInput = (\n props: SliderProps<boolean>,\n field: 0 \| 1,\n): number => {\n if (isRangeParams(props)) {\n return props.value[field];\n }\n return props.value as number;\n};\n\ntype GetOnChandgeForInputReturned = (props: {\n e?: React.ChangeEvent \| React.MouseEvent \| React.KeyboardEvent;\n value: number;\n}) => void;\n\nexport const getOnChandgeForInput =\n (props: SliderProps<boolean>, field: 0 \| 1): GetOnChandgeForInputReturned =>\n ({ e, value }) => {\n if (!props.onChange) {\n return;\n }\n if (isNotRangeParams(props)) {\n props.onChange({ e, value });\n }\n if (isRangeParams(props)) {\n props.onChange({\n e,\n value: field ? [props.value[0], value] : [value, props.value[1]],\n });\n }\n };\n\nexport const getIcon = (side?: Side) => {\n if (side !== 'input') {\n return side;\n }\n};\n\nexport const getMaxForStartField = (props: SliderProps<boolean>) => {\n if (isNotRangeParams(props)) {\n return props.max;\n }\n if (isRangeParams(props)) {\n return props.value[1];\n }\n};\n\nexport const getMinForEndField = (props: SliderProps<boolean>) => {\n if (isNotRangeParams(props)) {\n return props.min;\n }\n if (isRangeParams(props)) {\n return props.value[0];\n }\n};\n"],"mappings":"AAMA,MAAO,IAAMA,WAAU,CAAG,CAAC,OAAD,CAAU,SAAV,CAAqB,SAArB,CAAnB,CAEP,MAAO,IAAMC,kBAAiB,CAAGD,UAAU,CAAC,CAAD,CAApC,CAIP,MAAO,IAAME,SAAQ,CAAG,CAAC,GAAD,CAAM,IAAN,CAAY,GAAZ,CAAiB,GAAjB,CAAjB,CAEP,MAAO,IAAMC,gBAAyB,CAAGD,QAAQ,CAAC,CAAD,CAA1C,C,~~GAsFDE~~,cAAa,CAAG,SAACC,CAAD,CAAmD,CACvE,MAAO,CAAC,CAACA,CAAM,CAACC,KACjB,C,CAEKC,gBAAgB,CAAG,SAACF,CAAD,CAAoD,CAC3E,MAAO,CAACA,CAAM,CAACC,KAChB,C,CAED,MAAO,IAAME,wBAA4C,CAAG,SAACC,CAAD,QAC1D,QAAAA,CAAK,WAALA,CAAA,QAAAA,CAAK,CAAEC,QAAP,KAAqB,EADqC,CAArD,CAQP,MAAO,IAAMC,iBAAgB,CAAG,SAC9BC,CAD8B,CAE9BC,CAF8B,CAGnB,OACPT,cAAa,CAACQ,CAAD,CADN,CAEFA,CAAK,CAACH,KAAN,CAAYI,CAAZ,CAFE,CAIJD,CAAK,CAACH,KACd,CARM,CAeP,MAAO,IAAMK,qBAAoB,CAC/B,SAACF,CAAD,CAA8BC,CAA9B,QACA,YAAkB,IAAfE,EAAe,GAAfA,CAAe,CAAZN,CAAY,GAAZA,KAAY,CACXG,CAAK,CAACI,QADK,GAIZT,gBAAgB,CAACK,CAAD,CAJJ,EAKdA,CAAK,CAACI,QAAN,CAAe,CAAED,CAAC,CAADA,CAAF,CAAKN,KAAK,CAALA,CAAL,CAAf,CALc,CAOZL,aAAa,CAACQ,CAAD,CAPD,EAQdA,CAAK,CAACI,QAAN,CAAe,CACbD,CAAC,CAADA,CADa,CAEbN,KAAK,CAAEI,CAAK,CAAG,CAACD,CAAK,CAACH,KAAN,CAAY,CAAZ,CAAD,CAAiBA,CAAjB,CAAH,CAA6B,CAACA,CAAD,CAAQG,CAAK,CAACH,KAAN,CAAY,CAAZ,CAAR,CAF5B,CAAf,CARc,CAajB,CAdD,CADK,CAiBP,MAAO,IAAMQ,QAAO,CAAG,SAACC,CAAD,CAAiB,CACtC,GAAa,OAAT,GAAAA,CAAJ,CACE,MAAOA,EAEV,CAJM,CAMP,MAAO,IAAMC,oBAAmB,CAAG,SAACP,CAAD,CAAiC,OAC9DL,iBAAgB,CAACK,CAAD,CAD8C,CAEzDA,CAAK,CAACQ,GAFmD,CAI9DhB,aAAa,CAACQ,CAAD,CAJiD,CAKzDA,CAAK,CAACH,KAAN,CAAY,CAAZ,CALyD,OAOnE,CAPM,CASP,MAAO,IAAMY,kBAAiB,CAAG,SAACT,CAAD,CAAiC,OAC5DL,iBAAgB,CAACK,CAAD,CAD4C,CAEvDA,CAAK,CAACU,GAFiD,CAI5DlB,aAAa,CAACQ,CAAD,CAJ+C,CAKvDA,CAAK,CAACH,KAAN,CAAY,CAAZ,CALuD,OAOjE,CAPM"}
1	+ {"version":3,"file":"helper.js","names":["propStatus","defaultPropStatus","propSize","defaultPropSize","isRangeParams","params","range","isNotRangeParams","defaultTooltipFormatter","value","toString","getValueForInput","props","field","getOnChandgeForInput","e","onChange","getIcon","side","getMaxForStartField","max","getMinForEndField","min"],"sources":["../../../../../src/components/Slider/helper.ts"],"sourcesContent":["import { IconComponent } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';\nimport { ActiveButton } from './useSlider/helper';\n\nexport const propStatus = ['alert', 'warning', 'success'] as const;\nexport type PropStatus = typeof propStatus[number];\nexport const defaultPropStatus = propStatus[0];\n\nexport type PropView = 'default' \| 'division';\n\nexport const propSize = ['s', 'xs', 'm', 'l'] as const;\nexport type PropSize = typeof propSize[number];\nexport const defaultPropSize: PropSize = propSize[0];\n\nexport type SliderValue<RANGE> = RANGE extends true ? [number, number] : number;\n\nexport type PropOnChange<RANGE> = (prop: {\n e?:\n \| Event\n \| React.TouchEvent\n \| React.MouseEvent\n \| React.KeyboardEvent\n \| React.ChangeEvent;\n value: SliderValue<RANGE>;\n}) => void;\n\ntype PropToolipFormatter = (value: number \| undefined) => string;\n\ntype Side = IconComponent \| 'input';\n\ntype Props<RANGE extends boolean = false> = {\n className?: string;\n step?: number \| number[];\n view?: PropView;\n disabled?: boolean;\n range?: RANGE;\n withTooltip?: boolean;\n value: SliderValue<RANGE>;\n label?: string;\n labelIcon?: IconComponent;\n caption?: string;\n status?: PropStatus;\n min?: number;\n size?: PropSize;\n max?: number;\n onChange?: PropOnChange<RANGE>;\n onAfterChange?: PropOnChange<RANGE>;\n leftSide?: Side;\n tooltipFormatter?: PropToolipFormatter;\n rightSide?: Side;\n};\n\nexport type Line = {\n width: number;\n active: boolean;\n size?: number[];\n};\n\nexport type SliderLineProps = {\n view?: PropView;\n lines: Line[];\n disabled?: boolean;\n hovered?: boolean;\n onHover?: (hovered: boolean) => void;\n};\n\nexport type SliderPointProps = PropsWithHTMLAttributes<\n {\n value?: number;\n disabled?: boolean;\n focused?: boolean;\n hovered?: boolean;\n withTooltip?: boolean;\n handlePress?: (typeButton: ActiveButton) => void;\n buttonLabel?: ActiveButton;\n buttonRef?: React.RefObject<HTMLButtonElement>;\n popoverPosition?: TrackPosition;\n tooltipFormatter?: PropToolipFormatter;\n onFocus?: (\n e: React.FocusEvent<HTMLButtonElement> \| React.MouseEvent,\n button: ActiveButton,\n ) => void;\n onKeyPress?: (e: React.KeyboardEvent, typeButton?: ActiveButton) => void;\n onHover?: (hovered: boolean) => void;\n position: number;\n tooltipZIndex?: number;\n },\n HTMLButtonElement\n>;\n\nexport type SliderProps<RANGE extends boolean> = PropsWithHTMLAttributes<\n Props<RANGE>,\n HTMLDivElement\n>;\n\nexport type SliderComponent = <RANGE extends boolean = false>(\n props: SliderProps<RANGE>,\n) => React.ReactElement \| null;\n\nconst isRangeParams = (params: Props<boolean>): params is Props<true> => {\n return !!params.range;\n};\n\nconst isNotRangeParams = (params: Props<boolean>): params is Props<false> => {\n return !params.range;\n};\n\nexport const defaultTooltipFormatter: PropToolipFormatter = (value) =>\n value?.toString() \|\| '';\n\nexport type TrackPosition = {\n x: number;\n y: number;\n} \| null;\n\nexport const getValueForInput = (\n props: SliderProps<boolean>,\n field: 0 \| 1,\n): number => {\n if (isRangeParams(props)) {\n return props.value[field];\n }\n return props.value as number;\n};\n\ntype GetOnChandgeForInputReturned = (props: {\n e?: React.ChangeEvent \| React.MouseEvent \| React.KeyboardEvent;\n value: number;\n}) => void;\n\nexport const getOnChandgeForInput =\n (props: SliderProps<boolean>, field: 0 \| 1): GetOnChandgeForInputReturned =>\n ({ e, value }) => {\n if (!props.onChange) {\n return;\n }\n if (isNotRangeParams(props)) {\n props.onChange({ e, value });\n }\n if (isRangeParams(props)) {\n props.onChange({\n e,\n value: field ? [props.value[0], value] : [value, props.value[1]],\n });\n }\n };\n\nexport const getIcon = (side?: Side) => {\n if (side !== 'input') {\n return side;\n }\n};\n\nexport const getMaxForStartField = (props: SliderProps<boolean>) => {\n if (isNotRangeParams(props)) {\n return props.max;\n }\n if (isRangeParams(props)) {\n return props.value[1];\n }\n};\n\nexport const getMinForEndField = (props: SliderProps<boolean>) => {\n if (isNotRangeParams(props)) {\n return props.min;\n }\n if (isRangeParams(props)) {\n return props.value[0];\n }\n};\n"],"mappings":"AAMA,MAAO,IAAMA,WAAU,CAAG,CAAC,OAAD,CAAU,SAAV,CAAqB,SAArB,CAAnB,CAEP,MAAO,IAAMC,kBAAiB,CAAGD,UAAU,CAAC,CAAD,CAApC,CAIP,MAAO,IAAME,SAAQ,CAAG,CAAC,GAAD,CAAM,IAAN,CAAY,GAAZ,CAAiB,GAAjB,CAAjB,CAEP,MAAO,IAAMC,gBAAyB,CAAGD,QAAQ,CAAC,CAAD,CAA1C,C,GAuFDE,cAAa,CAAG,SAACC,CAAD,CAAmD,CACvE,MAAO,CAAC,CAACA,CAAM,CAACC,KACjB,C,CAEKC,gBAAgB,CAAG,SAACF,CAAD,CAAoD,CAC3E,MAAO,CAACA,CAAM,CAACC,KAChB,C,CAED,MAAO,IAAME,wBAA4C,CAAG,SAACC,CAAD,QAC1D,QAAAA,CAAK,WAALA,CAAA,QAAAA,CAAK,CAAEC,QAAP,KAAqB,EADqC,CAArD,CAQP,MAAO,IAAMC,iBAAgB,CAAG,SAC9BC,CAD8B,CAE9BC,CAF8B,CAGnB,OACPT,cAAa,CAACQ,CAAD,CADN,CAEFA,CAAK,CAACH,KAAN,CAAYI,CAAZ,CAFE,CAIJD,CAAK,CAACH,KACd,CARM,CAeP,MAAO,IAAMK,qBAAoB,CAC/B,SAACF,CAAD,CAA8BC,CAA9B,QACA,YAAkB,IAAfE,EAAe,GAAfA,CAAe,CAAZN,CAAY,GAAZA,KAAY,CACXG,CAAK,CAACI,QADK,GAIZT,gBAAgB,CAACK,CAAD,CAJJ,EAKdA,CAAK,CAACI,QAAN,CAAe,CAAED,CAAC,CAADA,CAAF,CAAKN,KAAK,CAALA,CAAL,CAAf,CALc,CAOZL,aAAa,CAACQ,CAAD,CAPD,EAQdA,CAAK,CAACI,QAAN,CAAe,CACbD,CAAC,CAADA,CADa,CAEbN,KAAK,CAAEI,CAAK,CAAG,CAACD,CAAK,CAACH,KAAN,CAAY,CAAZ,CAAD,CAAiBA,CAAjB,CAAH,CAA6B,CAACA,CAAD,CAAQG,CAAK,CAACH,KAAN,CAAY,CAAZ,CAAR,CAF5B,CAAf,CARc,CAajB,CAdD,CADK,CAiBP,MAAO,IAAMQ,QAAO,CAAG,SAACC,CAAD,CAAiB,CACtC,GAAa,OAAT,GAAAA,CAAJ,CACE,MAAOA,EAEV,CAJM,CAMP,MAAO,IAAMC,oBAAmB,CAAG,SAACP,CAAD,CAAiC,OAC9DL,iBAAgB,CAACK,CAAD,CAD8C,CAEzDA,CAAK,CAACQ,GAFmD,CAI9DhB,aAAa,CAACQ,CAAD,CAJiD,CAKzDA,CAAK,CAACH,KAAN,CAAY,CAAZ,CALyD,OAOnE,CAPM,CASP,MAAO,IAAMY,kBAAiB,CAAG,SAACT,CAAD,CAAiC,OAC5DL,iBAAgB,CAACK,CAAD,CAD4C,CAEvDA,CAAK,CAACU,GAFiD,CAI5DlB,aAAa,CAACQ,CAAD,CAJ+C,CAKvDA,CAAK,CAACH,KAAN,CAAY,CAAZ,CALuD,OAOjE,CAPM"}

package/__internal__/src/components/TagBase/TagBase.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@ export declare const tagBasePropSizeDefault: "m";
 export declare type TagBasePropSize = typeof tagBasePropSize[number];
 export declare const tagBasePropGroupNumberValue: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9];
 export declare const tagBasePropGroupStringValue: readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
-export declare const tagBasePropGroup: (2 | 1 | "1" | 4 | 3 | 5 | "2" | 7 | "3" | "4" | "5" | 9 | 8 | 6 | "6" | "7" | "8" | "9")[];
+export declare const tagBasePropGroup: (2 | 1 | "1" | 4 | 3 | 5 | "2" | 7 | 9 | "3" | "4" | "5" | 8 | "6" | 6 | "7" | "8" | "9")[];
 export declare type TagBasePropGroup = typeof tagBasePropGroup[number];
 export declare const tagBasePropView: readonly ["stroked", "filled"];
 export declare const tagBasePropViewDefault: "stroked";

package/__internal__/src/components/TextField/TextField.css CHANGED Viewed

	@@ -1 +1 @@
1	- .TextField{--caption-margin-left:calc(var(--input-space) + var(--control-border-width));--counter-button-icon-color:var(--color-control-typo-ghost);--counter-button-background:transparent;--clear-button-color:var(--color-control-typo-clear);display:inline-flex;position:relative}.TextField_width_full{width:100%}.TextField_size_xs{--input-height:var(--control-height-xs);--input-font-size:var(--control-text-size-xs);--input-space:calc(var(--control-space-xs)0.5)}.TextField_size_s{--input-height:var(--control-height-s);--input-font-size:var(--control-text-size-s);--input-space:calc(var(--control-space-s)0.5)}.TextField_size_m{--input-height:var(--control-height-m);--input-font-size:var(--control-text-size-m);--input-space:calc(var(--control-space-m)0.5)}.TextField_size_l{--input-height:var(--control-height-l);--input-font-size:var(--control-text-size-l);--input-space:calc(var(--control-space-l)0.5)}.TextField_labelPosition_top{flex-direction:column}.TextField_labelPosition_top>:not(:last-child){margin-bottom:var(--space-xs)}.TextField_labelPosition_left{flex-direction:row}.TextField_labelPosition_left .TextField-Label{align-items:center;display:inline-flex;height:var(--input-height)}.TextField_labelPosition_left>:not(:last-child){margin-right:var(--space-s)}.TextField-Body{display:inline-flex;flex-direction:column;width:100%}.TextField-Body .TextField-Caption{margin-left:var(--caption-margin-left);margin-top:var(--space-2xs)}.TextField_view_clear .TextField-Caption{--caption-margin-left:0}.TextField-InputContainer{box-sizing:border-box;display:inline-flex;font-family:var(--font-primary);font-weight:var(--font-weight-text-regular);max-width:100%;min-height:var(--input-height);position:relative;transition:border-color .15s,box-shadow .15s,background-color .15s}.TextField-InputContainer_disabled{--counter-button-background:var(--color-control-bg-disable);--counter-button-icon-color:var(--color-control-typo-disable)}.TextField-InputContainer_view_clear,.TextField-InputContainer_view_clear:focus,.TextField-InputContainer_view_clear:hover{color:var(--color-control-typo-default);padding:0}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input{color:var(--color-control-typo-disable);pointer-events:all}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill,.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:focus,.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:hover,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:focus,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:hover,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:focus,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:hover{-webkit-text-fill-color:var(--color-control-typo-disable)}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input::-moz-placeholder,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input::-moz-placeholder,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input::-moz-placeholder{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input::placeholder,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input::placeholder,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input::placeholder{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Side_type_string,.TextField-InputContainer_view_clear.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Side_type_string,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Side_type_string,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Side_type_string,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Side_type_string,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Side_type_string{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled.TextField-InputContainer .TextField-Icon,.TextField-InputContainer_view_clear.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Icon,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled.TextField-InputContainer .TextField-Icon,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Icon,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled.TextField-InputContainer .TextField-Icon,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Icon{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_default{--container-border-color:var(--color-control-bg-border-default);background:var(--color-control-bg-default);border:var(--control-border-width) solid var(--container-border-color);border-radius:var(--control-radius);color:var(--color-control-typo-default);overflow-x:hidden;padding:0 var(--input-space)}.TextField-InputContainer_view_default:hover{border-color:var(--color-control-bg-border-default-hover)}.TextField-InputContainer_view_default.TextField-InputContainer_status_alert{--container-border-color:var(--color-bg-alert)}.TextField-InputContainer_view_default.TextField-InputContainer_status_success{--container-border-color:var(--color-bg-success)}.TextField-InputContainer_view_default.TextField-InputContainer_status_warning{--container-border-color:var(--color-bg-warning)}.TextField-InputContainer_view_default .TextField-Input{color:var(--color-control-typo-default)}.TextField-InputContainer_view_default .TextField-Input::-moz-placeholder{color:var(--color-control-typo-placeholder)}.TextField-InputContainer_view_default .TextField-Input::placeholder{color:var(--color-control-typo-placeholder)}.TextField-InputContainer_view_default .TextField-Input:-webkit-autofill,.TextField-InputContainer_view_default .TextField-Input:-webkit-autofill:focus,.TextField-InputContainer_view_default .TextField-Input:-webkit-autofill:hover{-webkit-text-fill-color:var(--color-control-typo-default)}.TextField-InputContainer_view_default .TextField-Side_type_string{color:var(--color-control-typo-placeholder)}.TextField-InputContainer_view_default.TextField-InputContainer_focus{border-color:var(--color-control-bg-border-focus);outline:none;z-index:1}.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_clearClear{box-shadow:var(--control-border-width) 0 var(--color-control-bg-border-focus),calc(var(--control-border-width)-1) 0 var(--color-control-bg-border-focus)}.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_brickClear,.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_defaultClear,.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_roundClear{box-shadow:var(--control-border-width) 0 var(--color-control-bg-border-focus)}.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_clearBrick,.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_clearDefault,.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_clearRound{box-shadow:calc(var(--control-border-width)-1) 0 var(--color-control-bg-border-focus)}.TextField-InputContainer_view_default.TextField-InputContainer_disabled{--clear-button-color:var(--color-control-typo-disable);background:var(--color-control-bg-disable);border-color:var(--color-control-bg-border-disable)}.TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Input{color:var(--color-control-typo-disable);pointer-events:all}.TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Input::-moz-placeholder{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Input::placeholder{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Side_type_string,.TextField-InputContainer_view_default.TextField-InputContainer_disabled.TextField-InputContainer .TextField-Icon,.TextField-InputContainer_view_default.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Icon,.TextField-InputContainer_view_default.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Side_type_string{color:var(--color-control-typo-disable)}.TextField-InputContainer_form_defaultClear{border-right-width:0}.TextField-InputContainer_form_defaultBrick,.TextField-InputContainer_form_defaultClear{border-radius:var(--control-radius) 0 0 var(--control-radius)}.TextField-InputContainer_form_round{border-radius:calc(var(--input-height)/2);padding-left:calc(var(--input-space)1.6);padding-right:calc(var(--input-space)1.6)}.TextField-InputContainer_form_roundBrick{border-radius:calc(var(--input-height)/2) 0 0 calc(var(--input-height)/2);padding-left:calc(var(--input-space)1.6)}.TextField-InputContainer_form_roundClear{border-radius:calc(var(--input-height)/2) 0 0 calc(var(--input-height)/2);border-right-width:0;padding-left:calc(var(--input-space)1.6)}.TextField-InputContainer_form_brick{border-radius:0}.TextField-InputContainer_form_brickDefault{border-radius:0 var(--control-radius) var(--control-radius) 0}.TextField-InputContainer_form_brickRound{border-radius:0 calc(var(--input-height)/2) calc(var(--input-height)/2) 0;padding-right:calc(var(--input-space)1.6)}.TextField-InputContainer_form_brickClear{border-radius:0;border-right-width:0}.TextField-InputContainer_form_clearDefault{border-left-width:0;border-radius:0 var(--control-radius) var(--control-radius) 0}.TextField-InputContainer_form_clearBrick{border-left-width:0;border-radius:0}.TextField-InputContainer_form_clearRound{border-left-width:0;border-radius:0 calc(var(--input-height)/2) calc(var(--input-height)/2) 0;padding-right:calc(var(--input-space)1.6)}.TextField-InputContainer_form_clearClear{border-width:0;border-bottom-width:var(--control-border-width);border-radius:0;border-top-width:var(--control-border-width)}.TextField-InputContainer_withValue .TextField-Side.TextField-Side_type_string{color:var(--color-control-typo-default)}.TextField-InputContainer_withValue .TextField-Icon{color:var(--color-typo-secondary)}.TextField-InputContainer_type_number{padding-right:0}.TextField-InputContainer_type_textarea .TextField-Input{display:block;line-height:var(--line-height-text-m);min-width:0;padding-bottom:calc((var(--input-height) - (var(--control-border-width)2) - var(--line-height-text-m))/2);padding-top:calc((var(--input-height) - (var(--control-border-width)2) - var(--line-height-text-m))/2);resize:none}.TextField-Counter{display:inline-flex;flex-direction:column;height:calc(var(--input-height) - var(--control-border-width)2);width:var(--space-xl)}.TextField-CounterButton{align-items:center;background-color:var(--counter-button-background);border:none;color:var(--counter-button-icon-color);cursor:pointer;display:inline-flex;flex:1;flex-direction:column;justify-content:center;margin:0;overflow-y:hidden;padding:0;transition:background-color .15s;width:var(--space-xl)}.TextField-ClearButton,.TextField-EyeButton{background-color:transparent;border:none;cursor:pointer;display:flex;flex-direction:column;height:calc(var(--input-height) - var(--control-border-width)2);justify-content:center;margin:0;margin-left:var(--input-space);padding:0}.TextField-ClearButton{color:var(--clear-button-color)}.TextField-ClearButton:hover{--clear-button-color:var(--color-control-typo-clear-hover)}.TextField-EyeButton{color:var(--color-control-typo-placeholder)}.TextField-EyeButton:hover{color:var(--color-control-typo-clear-hover)}.TextField-ClearButtonIcon{position:relative;top:1px}.TextField-Input{background:transparent;border:none;color:currentColor;flex:1;font-family:var(--font-primary);font-size:var(--input-font-size);height:calc(var(--input-height) - var(--control-border-width)2);min-width:80px;outline:none;padding:0;width:100%}.TextField-Input::-webkit-inner-spin-button,.TextField-Input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.TextField-Input[type=password]::-ms-reveal{display:none}.TextField-Input[type=number]{-moz-appearance:textfield}.TextField-Input:focus{outline:none}.TextField-Input:-webkit-autofill,.TextField-Input:-webkit-autofill:focus,.TextField-Input:-webkit-autofill:hover{border:none;-webkit-box-shadow:inset 0 0 0 1000px transparent;-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s}.TextField-Side{align-items:center;display:flex;height:calc(var(--input-height) - var(--control-border-width)2);overflow:hidden}.TextField-Side_position_left{margin-right:var(--input-space)}.TextField-Side_position_right{margin-left:var(--input-space)}.TextField-Side_type_string{font-size:var(--input-font-size);white-space:nowrap}.TextField-Icon{color:var(--color-control-typo-placeholder)}
1	+ .TextField{--caption-margin-left:calc(var(--input-space) + var(--control-border-width));--counter-button-icon-color:var(--color-control-typo-ghost);--counter-button-background:transparent;--counter-offset:0;--clear-button-color:var(--color-control-typo-clear);display:inline-flex;position:relative}.TextField_width_full{width:100%}.TextField_size_xs{--label-offset:var(--space-2xs);--caption-offset:var(--space-2xs);--input-height:var(--control-height-xs);--input-font-size:var(--control-text-size-xs);--input-space:calc(var(--control-space-xs)0.5)}.TextField_size_xs .TextField-InputContainer_form_brickRound,.TextField_size_xs .TextField-InputContainer_form_clearRound,.TextField_size_xs .TextField-InputContainer_form_round{--counter-offset:calc(var(--space-xs) - var(--space-3xs))}.TextField_size_s{--label-offset:var(--space-2xs);--caption-offset:var(--space-2xs);--input-height:var(--control-height-s);--input-font-size:var(--control-text-size-s);--input-space:calc(var(--control-space-s)0.5)}.TextField_size_s .TextField-InputContainer_form_brickRound,.TextField_size_s .TextField-InputContainer_form_clearRound,.TextField_size_s .TextField-InputContainer_form_round{--counter-offset:var(--space-xs)}.TextField_size_m{--label-offset:var(--space-xs);--caption-offset:var(--space-xs);--input-height:var(--control-height-m);--input-font-size:var(--control-text-size-m);--input-space:calc(var(--control-space-m)0.5)}.TextField_size_m .TextField-InputContainer_form_brickRound,.TextField_size_m .TextField-InputContainer_form_clearRound,.TextField_size_m .TextField-InputContainer_form_round{--counter-offset:calc(var(--space-s) - var(--space-3xs))}.TextField_size_l{--label-offset:var(--space-xs);--caption-offset:var(--space-xs);--input-height:var(--control-height-l);--input-font-size:var(--control-text-size-l);--input-space:calc(var(--control-space-l)0.5)}.TextField_size_l .TextField-InputContainer_form_brickRound,.TextField_size_l .TextField-InputContainer_form_clearRound,.TextField_size_l .TextField-InputContainer_form_round{--counter-offset:var(--space-s)}.TextField_labelPosition_top{flex-direction:column}.TextField_labelPosition_top>:not(:last-child){margin-bottom:var(--label-offset)}.TextField_labelPosition_left{flex-direction:row}.TextField_labelPosition_left .TextField-Label{align-items:center;display:inline-flex;height:var(--input-height)}.TextField_labelPosition_left>:not(:last-child){margin-right:var(--space-s)}.TextField-Body{display:inline-flex;flex-direction:column;width:100%}.TextField-Body .TextField-Caption{margin-left:var(--caption-margin-left);margin-top:var(--caption-offset)}.TextField_view_clear .TextField-Caption{--caption-margin-left:0}.TextField-InputContainer{box-sizing:border-box;display:inline-flex;font-family:var(--font-primary);font-weight:var(--font-weight-text-regular);max-width:100%;min-height:var(--input-height);position:relative;transition:border-color .15s,box-shadow .15s,background-color .15s}.TextField-InputContainer_disabled{--counter-button-background:var(--color-control-bg-disable);--counter-button-icon-color:var(--color-control-typo-disable)}.TextField-InputContainer_view_clear,.TextField-InputContainer_view_clear:focus,.TextField-InputContainer_view_clear:hover{color:var(--color-control-typo-default);padding:0}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input{color:var(--color-control-typo-disable);pointer-events:all}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill,.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:focus,.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:hover,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:focus,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:hover,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:focus,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:hover{-webkit-text-fill-color:var(--color-control-typo-disable)}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input::-moz-placeholder,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input::-moz-placeholder,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input::-moz-placeholder{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input::placeholder,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input::placeholder,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input::placeholder{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Side_type_string,.TextField-InputContainer_view_clear.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Side_type_string,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Side_type_string,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Side_type_string,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Side_type_string,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Side_type_string{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled.TextField-InputContainer .TextField-Icon,.TextField-InputContainer_view_clear.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Icon,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled.TextField-InputContainer .TextField-Icon,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Icon,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled.TextField-InputContainer .TextField-Icon,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Icon{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_default{--container-border-color:var(--color-control-bg-border-default);background:var(--color-control-bg-default);border:var(--control-border-width) solid var(--container-border-color);border-radius:var(--control-radius);color:var(--color-control-typo-default);overflow-x:hidden;padding:0 var(--input-space)}.TextField-InputContainer_view_default:hover{border-color:var(--color-control-bg-border-default-hover)}.TextField-InputContainer_view_default.TextField-InputContainer_status_alert{--container-border-color:var(--color-bg-alert)}.TextField-InputContainer_view_default.TextField-InputContainer_status_success{--container-border-color:var(--color-bg-success)}.TextField-InputContainer_view_default.TextField-InputContainer_status_warning{--container-border-color:var(--color-bg-warning)}.TextField-InputContainer_view_default .TextField-Input{color:var(--color-control-typo-default)}.TextField-InputContainer_view_default .TextField-Input::-moz-placeholder{color:var(--color-control-typo-placeholder)}.TextField-InputContainer_view_default .TextField-Input::placeholder{color:var(--color-control-typo-placeholder)}.TextField-InputContainer_view_default .TextField-Input:-webkit-autofill,.TextField-InputContainer_view_default .TextField-Input:-webkit-autofill:focus,.TextField-InputContainer_view_default .TextField-Input:-webkit-autofill:hover{-webkit-text-fill-color:var(--color-control-typo-default)}.TextField-InputContainer_view_default .TextField-Side_type_string{color:var(--color-control-typo-placeholder)}.TextField-InputContainer_view_default.TextField-InputContainer_focus{border-color:var(--color-control-bg-border-focus);outline:none;z-index:1}.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_clearClear{box-shadow:var(--control-border-width) 0 var(--color-control-bg-border-focus),calc(var(--control-border-width)-1) 0 var(--color-control-bg-border-focus)}.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_brickClear,.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_defaultClear,.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_roundClear{box-shadow:var(--control-border-width) 0 var(--color-control-bg-border-focus)}.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_clearBrick,.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_clearDefault,.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_clearRound{box-shadow:calc(var(--control-border-width)-1) 0 var(--color-control-bg-border-focus)}.TextField-InputContainer_view_default.TextField-InputContainer_disabled{--clear-button-color:var(--color-control-typo-disable);background:var(--color-control-bg-disable);border-color:var(--color-control-bg-border-disable)}.TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Input{color:var(--color-control-typo-disable);pointer-events:all}.TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Input::-moz-placeholder{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Input::placeholder{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Side_type_string,.TextField-InputContainer_view_default.TextField-InputContainer_disabled.TextField-InputContainer .TextField-Icon,.TextField-InputContainer_view_default.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Icon,.TextField-InputContainer_view_default.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Side_type_string{color:var(--color-control-typo-disable)}.TextField-InputContainer_form_defaultClear{border-right-width:0}.TextField-InputContainer_form_defaultBrick,.TextField-InputContainer_form_defaultClear{border-radius:var(--control-radius) 0 0 var(--control-radius)}.TextField-InputContainer_form_round{border-radius:calc(var(--input-height)/2);padding-left:calc(var(--input-space)1.6);padding-right:calc(var(--input-space)1.6)}.TextField-InputContainer_form_roundBrick{border-radius:calc(var(--input-height)/2) 0 0 calc(var(--input-height)/2);padding-left:calc(var(--input-space)1.6)}.TextField-InputContainer_form_roundClear{border-radius:calc(var(--input-height)/2) 0 0 calc(var(--input-height)/2);border-right-width:0;padding-left:calc(var(--input-space)1.6)}.TextField-InputContainer_form_brick{border-radius:0}.TextField-InputContainer_form_brickDefault{border-radius:0 var(--control-radius) var(--control-radius) 0}.TextField-InputContainer_form_brickRound{border-radius:0 calc(var(--input-height)/2) calc(var(--input-height)/2) 0;padding-right:calc(var(--input-space)1.6)}.TextField-InputContainer_form_brickClear{border-radius:0;border-right-width:0}.TextField-InputContainer_form_clearDefault{border-left-width:0;border-radius:0 var(--control-radius) var(--control-radius) 0}.TextField-InputContainer_form_clearBrick{border-left-width:0;border-radius:0}.TextField-InputContainer_form_clearRound{border-left-width:0;border-radius:0 calc(var(--input-height)/2) calc(var(--input-height)/2) 0;padding-right:calc(var(--input-space)1.6)}.TextField-InputContainer_form_clearClear{border-width:0;border-bottom-width:var(--control-border-width);border-radius:0;border-top-width:var(--control-border-width)}.TextField-InputContainer_withValue .TextField-Side.TextField-Side_type_string{color:var(--color-control-typo-default)}.TextField-InputContainer_withValue .TextField-Icon{color:var(--color-typo-secondary)}.TextField-InputContainer_type_number{padding-right:0}.TextField-InputContainer_type_textarea .TextField-Input{display:block;line-height:var(--line-height-text-m);min-width:0;padding-bottom:calc((var(--input-height) - (var(--control-border-width)2) - var(--line-height-text-m))/2);padding-top:calc((var(--input-height) - (var(--control-border-width)2) - var(--line-height-text-m))/2);resize:none}.TextField-Counter{display:inline-flex;flex-direction:column;height:calc(var(--input-height) - var(--control-border-width)2);margin-right:var(--counter-offset);width:var(--space-xl)}.TextField-CounterButton{align-items:center;background-color:var(--counter-button-background);border:none;color:var(--counter-button-icon-color);cursor:pointer;display:inline-flex;flex:1;flex-direction:column;justify-content:center;margin:0;overflow-y:hidden;padding:0;transition:background-color .15s;width:var(--space-xl)}.TextField-ClearButton,.TextField-EyeButton{background-color:transparent;border:none;cursor:pointer;display:flex;flex-direction:column;height:calc(var(--input-height) - var(--control-border-width)2);justify-content:center;margin:0;margin-left:var(--input-space);padding:0}.TextField-ClearButton{color:var(--clear-button-color)}.TextField-ClearButton:hover{--clear-button-color:var(--color-control-typo-clear-hover)}.TextField-EyeButton{color:var(--color-control-typo-placeholder)}.TextField-EyeButton:hover{color:var(--color-control-typo-clear-hover)}.TextField-ClearButtonIcon{position:relative;top:1px}.TextField-Input{background:transparent;border:none;color:currentColor;flex:1;font-family:var(--font-primary);font-size:var(--input-font-size);height:calc(var(--input-height) - var(--control-border-width)2);min-width:80px;outline:none;padding:0;width:100%}.TextField-Input::-webkit-inner-spin-button,.TextField-Input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.TextField-Input[type=password]::-ms-reveal{display:none}.TextField-Input[type=number]{-moz-appearance:textfield}.TextField-Input:focus{outline:none}.TextField-Input:-webkit-autofill,.TextField-Input:-webkit-autofill:focus,.TextField-Input:-webkit-autofill:hover{border:none;-webkit-box-shadow:inset 0 0 0 1000px transparent;-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s}.TextField-Side{align-items:center;display:flex;height:calc(var(--input-height) - var(--control-border-width)2);overflow:hidden}.TextField-Side_position_left{margin-right:var(--input-space)}.TextField-Side_position_right{margin-left:var(--input-space)}.TextField-Side_type_string{font-size:var(--input-font-size);white-space:nowrap}.TextField-Icon{color:var(--color-control-typo-placeholder)}

package/__internal__/src/components/TextField/TextField.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["className","type","value","onChange","id","name","rows","cols","minRows","maxRows","inputRef","maxLength","disabled","size","view","form","state","status","width","onBlur","onFocus","autoFocus","placeholder","leftSide","rightSide","autoComplete","withClearButton","incrementButtons","max","min","readOnly","required","step","tabIndex","ariaLabel","label","inputContainerRef","labelPosition","caption","iconSize","focused","onClick","onKeyDown","onKeyDownCapture","onKeyPress","onKeyPressCapture","onKeyUp","onKeyUpCapture"];import"./TextField.css";import{IconClose}from"@consta/icons/IconClose";import{IconEye}from"@consta/icons/IconEye";import{IconEyeClose}from"@consta/icons/IconEyeClose";import{IconSelect}from"@consta/icons/IconSelect";import{IconSelectOpen}from"@consta/icons/IconSelectOpen";import React,{forwardRef,useCallback,useEffect}from"react";import TextAreaAutoSize from"react-textarea-autosize";import{useFlag}from"../../hooks/useFlag/useFlag";import{useForkRef}from"../../hooks/useForkRef/useForkRef";import{useMutableRef}from"../../hooks/useMutableRef/useMutableRef";import{useSortSteps}from"../../hooks/useSortSteps/useSortSteps";import{cn}from"../../utils/bem";import{getByMap}from"../../utils/getByMap";import{isString}from"../../utils/type-guards";import{usePropsHandler}from"../EventInterceptor/usePropsHandler";import{FieldCaption}from"../FieldCaption/FieldCaption";import{FieldLabel}from"../FieldLabel/FieldLabel";import{getIncrementFlag,getTypeForRender,getValueByStep,sizeMap}from"./helpers";import{textFieldPropFormDefault,textFieldPropSizeDefault,textFieldPropViewDefault,textFieldPropWidthDefault}from"./types";export var COMPONENT_NAME="TextField";export var cnTextField=cn("TextField");export var TextFieldRender=function(a,b){var c=React.useRef(null),d=React.useRef(null),e=usePropsHandler(COMPONENT_NAME,a,c),f=e.className,g=e.type,h=void 0===g?"text":g,i=e.value,j=e.onChange,k=e.id,l=e.name,m=e.rows,n=e.cols,o=e.minRows,p=e.maxRows,q=e.inputRef,r=e.maxLength,s=e.disabled,t=e.size,u=void 0===t?textFieldPropSizeDefault:t,v=e.view,w=void 0===v?textFieldPropViewDefault:v,x=e.form,y=void 0===x?textFieldPropFormDefault:x,z=e.state,A=e.status,B=e.width,C=void 0===B?textFieldPropWidthDefault:B,D=e.onBlur,E=e.onFocus,F=e.autoFocus,G=void 0!==F&&F,H=e.placeholder,I=e.leftSide,J=e.rightSide,K=e.autoComplete,L=e.withClearButton,M=e.incrementButtons,N=e.max,O=e.min,P=e.readOnly,Q=e.required,R=e.step,S=void 0===R?1:R,T=e.tabIndex,U=e.ariaLabel,V=e.label,W=e.inputContainerRef,X=e.labelPosition,Y=void 0===X?"top":X,Z=e.caption,$=e.iconSize,_=e.focused,aa=e.onClick,ba=e.onKeyDown,ca=e.onKeyDownCapture,da=e.onKeyPress,ea=e.onKeyPressCapture,fa=e.onKeyUp,ga=e.onKeyUpCapture,ha=_objectWithoutProperties(e,_excluded),ia=useFlag(G),ja=_slicedToArray(ia,2),ka=ja[0],la=ja[1],ma=useFlag(!1),na=_slicedToArray(ma,2),oa=na[0],pa=na[1],qa=useMutableRef(i),ra=useMutableRef(aa),sa=useMutableRef(j),ta=useCallback(function(a){var b;a.stopPropagation(),pa.toggle(),null===(b=d.current)||void 0===b?void 0:b.focus()},[]),ua=I,va=J,wa=isString(I),xa=isString(J),ya=getByMap(sizeMap,u,$),za=useSortSteps({step:S,min:+O,max:+N}),Aa=useCallback(function(a){var b;s||(null===(b=sa.current)||void 0===b?void 0:b.call(sa,{e:a,id:k,name:l,value:a.target.value||null}))},[k,l,s]),Ba=function(a){la.on(),null===E||void 0===E?void 0:E(a)},Ca={className:cnTextField("Input"),value:i||"",onChange:Aa,maxLength:r,disabled:s,onBlur:function handleBlur(a){la.off(),null===D||void 0===D?void 0:D(a)},onFocus:Ba,autoFocus:G,placeholder:H,autoComplete:K,readOnly:P,tabIndex:T,name:l,onKeyDownCapture:ca,onKeyPress:da,onKeyPressCapture:ea,onKeyUp:fa,onKeyUpCapture:ga,id:k?k.toString():"","aria-label":U},Da=oa?IconEyeClose:IconEye,Ea={rows:m,cols:n,minRows:o||m,maxRows:p||m,ref:useForkRef([d,q])},Fa={type:getTypeForRender(h,oa),max:N,min:O,step:Array.isArray(za)?0:za,onKeyDown:function onKeyDown(a){var b=getIncrementFlag(a);null===ba||void 0===ba?void 0:ba(a),"number"!==h||"boolean"!=typeof b||s||(a.preventDefault(),null===j||void 0===j?void 0:j({e:a,value:getValueByStep(za,i,b,O,N)}))},ref:useForkRef([d,q])},Ga=useCallback(function(a){var b;null===(b=sa.current)||void 0===b?void 0:b.call(sa,{e:a,value:null})},[]),Ha=function(a){var b=!(1<arguments.length&&void 0!==arguments[1])||arguments[1];null===j||void 0===j?void 0:j({e:a,value:getValueByStep(za,i,b,O,N)})},Ia={onClick:useCallback(function(a){var b,c;null===(b=d.current)||void 0===b?void 0:b.focus(),null===(c=ra.current)||void 0===c?void 0:c.call(ra,a)},[])};return useEffect(function(){if("password"===h&&d.current){var a;d.current.selectionStart=(null===(a=qa.current)||void 0===a?void 0:a.length)||0}},[oa]),React.createElement("div",Object.assign({className:cnTextField({labelPosition:Y,size:u,view:w,width:C},[f]),ref:useForkRef([b,c])},Ia,ha),V&&React.createElement(FieldLabel,{required:Q,className:cnTextField("Label",{labelPosition:Y}),size:u},V),React.createElement("div",{className:cnTextField("Body")},React.createElement("div",{ref:W,className:cnTextField("InputContainer",{view:w,form:y,status:A||z,disabled:s,type:h,focus:ka||_,withValue:!!i})},ua&&React.createElement("div",{className:cnTextField("Side",{position:"left",type:wa?"string":"icon"}),title:"string"==typeof I?I:void 0},wa?I:React.createElement(ua,{className:cnTextField("Icon"),size:ya})),"textarea"===h?React.createElement(TextAreaAutoSize,Object.assign({},Ca,Ea)):React.createElement("input",Object.assign({},Ca,Fa)),"number"===h&&(void 0===M||M)&&React.createElement("div",{className:cnTextField("Counter")},React.createElement("button",{onFocus:Ba,onClick:function(a){return Ha(a,!0)},type:"button",className:cnTextField("CounterButton")},React.createElement(IconSelectOpen,{size:"xs"})),React.createElement("button",{onFocus:Ba,onClick:function(a){return Ha(a,!1)},type:"button",className:cnTextField("CounterButton")},React.createElement(IconSelect,{size:"xs"}))),i&&L&&"number"!==h&&React.createElement("button",{type:"button",disabled:s,onClick:Ga,className:cnTextField("ClearButton")},React.createElement(IconClose,{size:"xs",className:cnTextField("ClearButtonIcon")})),"password"===h&&i&&React.createElement("button",{className:cnTextField("ClearButton"),type:"button",onClick:ta},React.createElement(Da,{className:cnTextField("Icon"),size:ya})),va&&"number"!==h&&"password"!==h&&React.createElement("div",{className:cnTextField("Side",{position:"right",type:xa?"string":"icon"}),title:"string"==typeof J?J:void 0},xa?J:React.createElement(va,{className:cnTextField("Icon"),size:ya}))),Z&&React.createElement(FieldCaption,{className:cnTextField("Caption"),status:A||z},Z)))};export var TextField=forwardRef(TextFieldRender);export*from"./types";
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["className","type","value","onChange","id","name","rows","cols","minRows","maxRows","inputRef","maxLength","disabled","size","view","form","state","status","width","onBlur","onFocus","autoFocus","placeholder","leftSide","rightSide","autoComplete","withClearButton","incrementButtons","max","min","readOnly","required","step","tabIndex","ariaLabel","label","labelIcon","inputContainerRef","labelPosition","caption","iconSize","focused","onClick","onKeyDown","onKeyDownCapture","onKeyPress","onKeyPressCapture","onKeyUp","onKeyUpCapture"];import"./TextField.css";import{IconClose}from"@consta/icons/IconClose";import{IconEye}from"@consta/icons/IconEye";import{IconEyeClose}from"@consta/icons/IconEyeClose";import{IconSelect}from"@consta/icons/IconSelect";import{IconSelectOpen}from"@consta/icons/IconSelectOpen";import React,{forwardRef,useCallback,useEffect}from"react";import TextAreaAutoSize from"react-textarea-autosize";import{useFlag}from"../../hooks/useFlag/useFlag";import{useForkRef}from"../../hooks/useForkRef/useForkRef";import{useMutableRef}from"../../hooks/useMutableRef/useMutableRef";import{useSortSteps}from"../../hooks/useSortSteps/useSortSteps";import{cn}from"../../utils/bem";import{getByMap}from"../../utils/getByMap";import{isString}from"../../utils/type-guards";import{usePropsHandler}from"../EventInterceptor/usePropsHandler";import{FieldCaption}from"../FieldCaption/FieldCaption";import{FieldLabel}from"../FieldLabel/FieldLabel";import{getIncrementFlag,getTypeForRender,getValueByStep,sizeMap}from"./helpers";import{textFieldPropFormDefault,textFieldPropSizeDefault,textFieldPropViewDefault,textFieldPropWidthDefault}from"./types";export var COMPONENT_NAME="TextField";export var cnTextField=cn("TextField");export var TextFieldRender=function(a,b){var c=React.useRef(null),d=React.useRef(null),e=usePropsHandler(COMPONENT_NAME,a,c),f=e.className,g=e.type,h=void 0===g?"text":g,i=e.value,j=e.onChange,k=e.id,l=e.name,m=e.rows,n=e.cols,o=e.minRows,p=e.maxRows,q=e.inputRef,r=e.maxLength,s=e.disabled,t=e.size,u=void 0===t?textFieldPropSizeDefault:t,v=e.view,w=void 0===v?textFieldPropViewDefault:v,x=e.form,y=void 0===x?textFieldPropFormDefault:x,z=e.state,A=e.status,B=e.width,C=void 0===B?textFieldPropWidthDefault:B,D=e.onBlur,E=e.onFocus,F=e.autoFocus,G=void 0!==F&&F,H=e.placeholder,I=e.leftSide,J=e.rightSide,K=e.autoComplete,L=e.withClearButton,M=e.incrementButtons,N=e.max,O=e.min,P=e.readOnly,Q=e.required,R=e.step,S=void 0===R?1:R,T=e.tabIndex,U=e.ariaLabel,V=e.label,W=e.labelIcon,X=e.inputContainerRef,Y=e.labelPosition,Z=void 0===Y?"top":Y,$=e.caption,_=e.iconSize,aa=e.focused,ba=e.onClick,ca=e.onKeyDown,da=e.onKeyDownCapture,ea=e.onKeyPress,fa=e.onKeyPressCapture,ga=e.onKeyUp,ha=e.onKeyUpCapture,ia=_objectWithoutProperties(e,_excluded),ja=useFlag(G),ka=_slicedToArray(ja,2),la=ka[0],ma=ka[1],na=useFlag(!1),oa=_slicedToArray(na,2),pa=oa[0],qa=oa[1],ra=useMutableRef(i),sa=useMutableRef(ba),ta=useMutableRef(j),ua=useCallback(function(a){var b;a.stopPropagation(),qa.toggle(),null===(b=d.current)||void 0===b?void 0:b.focus()},[]),va=I,wa=J,xa=isString(I),ya=isString(J),za=getByMap(sizeMap,u,_),Aa=useSortSteps({step:S,min:+O,max:+N}),Ba=useCallback(function(a){var b;s||(null===(b=ta.current)||void 0===b?void 0:b.call(ta,{e:a,id:k,name:l,value:a.target.value||null}))},[k,l,s]),Ca=function(a){ma.on(),null===E||void 0===E?void 0:E(a)},Da={className:cnTextField("Input"),value:i||"",onChange:Ba,maxLength:r,disabled:s,onBlur:function handleBlur(a){ma.off(),null===D||void 0===D?void 0:D(a)},onFocus:Ca,autoFocus:G,placeholder:H,autoComplete:K,readOnly:P,tabIndex:T,name:l,onKeyDownCapture:da,onKeyPress:ea,onKeyPressCapture:fa,onKeyUp:ga,onKeyUpCapture:ha,id:k?k.toString():"","aria-label":U},Ea=pa?IconEyeClose:IconEye,Fa={rows:m,cols:n,minRows:o||m,maxRows:p||m,ref:useForkRef([d,q])},Ga={type:getTypeForRender(h,pa),max:N,min:O,step:Array.isArray(Aa)?0:Aa,onKeyDown:function onKeyDown(a){var b=getIncrementFlag(a);null===ca||void 0===ca?void 0:ca(a),"number"!==h||"boolean"!=typeof b||s||(a.preventDefault(),null===j||void 0===j?void 0:j({e:a,value:getValueByStep(Aa,i,b,O,N)}))},ref:useForkRef([d,q])},Ha=useCallback(function(a){var b;null===(b=ta.current)||void 0===b?void 0:b.call(ta,{e:a,value:null})},[]),Ia=function(a){var b=!(1<arguments.length&&void 0!==arguments[1])||arguments[1];null===j||void 0===j?void 0:j({e:a,value:getValueByStep(Aa,i,b,O,N)})},Ja={onClick:useCallback(function(a){var b,c;null===(b=d.current)||void 0===b?void 0:b.focus(),null===(c=sa.current)||void 0===c?void 0:c.call(sa,a)},[])};return useEffect(function(){if("password"===h&&d.current){var a;d.current.selectionStart=(null===(a=ra.current)||void 0===a?void 0:a.length)||0}},[pa]),React.createElement("div",Object.assign({className:cnTextField({labelPosition:Z,size:u,view:w,width:C},[f]),ref:useForkRef([b,c])},Ja,ia),V&&React.createElement(FieldLabel,{icon:W,required:Q,className:cnTextField("Label",{labelPosition:Z}),size:u},V),React.createElement("div",{className:cnTextField("Body")},React.createElement("div",{ref:X,className:cnTextField("InputContainer",{view:w,form:y,status:A||z,disabled:s,type:h,focus:la||aa,withValue:!!i})},va&&React.createElement("div",{className:cnTextField("Side",{position:"left",type:xa?"string":"icon"}),title:"string"==typeof I?I:void 0},xa?I:React.createElement(va,{className:cnTextField("Icon"),size:za})),"textarea"===h?React.createElement(TextAreaAutoSize,Object.assign({},Da,Fa)):React.createElement("input",Object.assign({},Da,Ga)),"number"===h&&(void 0===M||M)&&React.createElement("div",{className:cnTextField("Counter")},React.createElement("button",{onFocus:Ca,onClick:function(a){return Ia(a,!0)},type:"button",className:cnTextField("CounterButton")},React.createElement(IconSelectOpen,{size:"xs"})),React.createElement("button",{onFocus:Ca,onClick:function(a){return Ia(a,!1)},type:"button",className:cnTextField("CounterButton")},React.createElement(IconSelect,{size:"xs"}))),i&&L&&"number"!==h&&React.createElement("button",{type:"button",disabled:s,onClick:Ha,className:cnTextField("ClearButton")},React.createElement(IconClose,{size:"xs",className:cnTextField("ClearButtonIcon")})),"password"===h&&i&&React.createElement("button",{className:cnTextField("ClearButton"),type:"button",onClick:ua},React.createElement(Ea,{className:cnTextField("Icon"),size:za})),wa&&"number"!==h&&"password"!==h&&React.createElement("div",{className:cnTextField("Side",{position:"right",type:ya?"string":"icon"}),title:"string"==typeof J?J:void 0},ya?J:React.createElement(wa,{className:cnTextField("Icon"),size:za}))),$&&React.createElement(FieldCaption,{className:cnTextField("Caption"),status:A||z},$)))};export var TextField=forwardRef(TextFieldRender);export*from"./types";
 //# sourceMappingURL=TextField.js.map