@snack-uikit/fields 0.55.2 → 0.55.3-preview-490457e4.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 (5) hide show
  1. package/README.md +2 -2
  2. package/dist/cjs/components/FieldSelect/styles.module.css +6 -6
  3. package/dist/esm/components/FieldSelect/styles.module.css +6 -6
  4. package/package.json +2 -2
  5. package/src/components/FieldSelect/styles.module.scss +1 -1
package/README.md CHANGED
@@ -732,8 +732,8 @@ FieldStepper в основном предназначен для работы с
732
732
  | selectedOptionFormatter | `SelectedOptionFormatter` | - | |
733
733
  | scrollToSelectedItem | `boolean` | - | Флаг, отвещающий за прокручивание до выбранного элемента |
734
734
  | virtualized | `boolean` | - | Включить виртуализацию на компоненты списка. Рекомендуется если у вас от 1к элементов списка |
735
- | scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
736
- | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
735
+ | scrollRef | `Ref<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
736
+ | scrollContainerRef | `Ref<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
737
737
  | untouchableScrollbars | `boolean` | - | Отключает возможность взаимодействовать со скролбарами мышью. |
738
738
  | onScroll | `(event?: Event) => void` | - | Колбек на скролл прокручиваемого списка |
739
739
  | dataFiltered | `boolean` | - | |
package/dist/cjs/components/FieldSelect/styles.module.css CHANGED
@@ -78,8 +78,8 @@
78
78
  color:var(--sys-neutral-text-light, #8b8e9b);
79
79
  }
80
80
  .container[data-size=s][data-variant=single-line-container] .displayValue{
81
- width:calc(100% - (var(--space-fields-single-line-container-s-right, 7px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)));
82
- margin-right:calc(var(--space-fields-single-line-container-s-right, 7px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2));
81
+ width:calc(100% - (var(--space-fields-single-line-container-s-right, 7px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(--space-fields-postfix-gap, 4px) + var(--size-icon-container-xs, 16px) * 2)));
82
+ margin-right:calc(var(--space-fields-single-line-container-s-right, 7px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(--space-fields-postfix-gap, 4px) + var(--size-icon-container-xs, 16px) * 2));
83
83
  padding-left:var(--space-fields-single-line-container-s-left, 7px);
84
84
  border-radius:var(--radius-fields-s, 4px);
85
85
  }
@@ -97,8 +97,8 @@
97
97
  color:var(--sys-neutral-text-light, #8b8e9b);
98
98
  }
99
99
  .container[data-size=m][data-variant=single-line-container] .displayValue{
100
- width:calc(100% - (var(--space-fields-single-line-container-m-right, 9px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)));
101
- margin-right:calc(var(--space-fields-single-line-container-m-right, 9px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2));
100
+ width:calc(100% - (var(--space-fields-single-line-container-m-right, 9px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(--space-fields-postfix-gap, 4px) + var(--size-icon-container-s, 24px) * 2)));
101
+ margin-right:calc(var(--space-fields-single-line-container-m-right, 9px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(--space-fields-postfix-gap, 4px) + var(--size-icon-container-s, 24px) * 2));
102
102
  padding-left:var(--space-fields-single-line-container-m-left, 9px);
103
103
  border-radius:var(--radius-fields-m, 4px);
104
104
  }
@@ -116,8 +116,8 @@
116
116
  color:var(--sys-neutral-text-light, #8b8e9b);
117
117
  }
118
118
  .container[data-size=l][data-variant=single-line-container] .displayValue{
119
- width:calc(100% - (var(--space-fields-single-line-container-l-right, 11px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)));
120
- margin-right:calc(var(--space-fields-single-line-container-l-right, 11px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2));
119
+ width:calc(100% - (var(--space-fields-single-line-container-l-right, 11px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(--space-fields-postfix-gap, 4px) + var(--size-icon-container-s, 24px) * 2)));
120
+ margin-right:calc(var(--space-fields-single-line-container-l-right, 11px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(--space-fields-postfix-gap, 4px) + var(--size-icon-container-s, 24px) * 2));
121
121
  padding-left:var(--space-fields-single-line-container-l-left, 11px);
122
122
  border-radius:var(--radius-fields-l, 4px);
123
123
  }
package/dist/esm/components/FieldSelect/styles.module.css CHANGED
@@ -78,8 +78,8 @@
78
78
  color:var(--sys-neutral-text-light, #8b8e9b);
79
79
  }
80
80
  .container[data-size=s][data-variant=single-line-container] .displayValue{
81
- width:calc(100% - (var(--space-fields-single-line-container-s-right, 7px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)));
82
- margin-right:calc(var(--space-fields-single-line-container-s-right, 7px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2));
81
+ width:calc(100% - (var(--space-fields-single-line-container-s-right, 7px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(--space-fields-postfix-gap, 4px) + var(--size-icon-container-xs, 16px) * 2)));
82
+ margin-right:calc(var(--space-fields-single-line-container-s-right, 7px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(--space-fields-postfix-gap, 4px) + var(--size-icon-container-xs, 16px) * 2));
83
83
  padding-left:var(--space-fields-single-line-container-s-left, 7px);
84
84
  border-radius:var(--radius-fields-s, 4px);
85
85
  }
@@ -97,8 +97,8 @@
97
97
  color:var(--sys-neutral-text-light, #8b8e9b);
98
98
  }
99
99
  .container[data-size=m][data-variant=single-line-container] .displayValue{
100
- width:calc(100% - (var(--space-fields-single-line-container-m-right, 9px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)));
101
- margin-right:calc(var(--space-fields-single-line-container-m-right, 9px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2));
100
+ width:calc(100% - (var(--space-fields-single-line-container-m-right, 9px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(--space-fields-postfix-gap, 4px) + var(--size-icon-container-s, 24px) * 2)));
101
+ margin-right:calc(var(--space-fields-single-line-container-m-right, 9px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(--space-fields-postfix-gap, 4px) + var(--size-icon-container-s, 24px) * 2));
102
102
  padding-left:var(--space-fields-single-line-container-m-left, 9px);
103
103
  border-radius:var(--radius-fields-m, 4px);
104
104
  }
@@ -116,8 +116,8 @@
116
116
  color:var(--sys-neutral-text-light, #8b8e9b);
117
117
  }
118
118
  .container[data-size=l][data-variant=single-line-container] .displayValue{
119
- width:calc(100% - (var(--space-fields-single-line-container-l-right, 11px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)));
120
- margin-right:calc(var(--space-fields-single-line-container-l-right, 11px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2));
119
+ width:calc(100% - (var(--space-fields-single-line-container-l-right, 11px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(--space-fields-postfix-gap, 4px) + var(--size-icon-container-s, 24px) * 2)));
120
+ margin-right:calc(var(--space-fields-single-line-container-l-right, 11px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(--space-fields-postfix-gap, 4px) + var(--size-icon-container-s, 24px) * 2));
121
121
  padding-left:var(--space-fields-single-line-container-l-left, 11px);
122
122
  border-radius:var(--radius-fields-l, 4px);
123
123
  }
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Fields",
7
- "version": "0.55.2",
7
+ "version": "0.55.3-preview-490457e4.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -66,5 +66,5 @@
66
66
  "peerDependencies": {
67
67
  "@snack-uikit/locale": "*"
68
68
  },
69
- "gitHead": "a9f6571146845d828e00206abdedb160980cff97"
69
+ "gitHead": "49c03b263265a9c659cfd499987728c033fbacd0"
70
70
  }
package/src/components/FieldSelect/styles.module.scss CHANGED
@@ -73,7 +73,7 @@ $base-min-width: 4px;
73
73
  &[data-variant='#{$containerVariant}'] {
74
74
  .displayValue {
75
75
  $button-width: styles-tokens-element.simple-var($icons-sizes, $size);
76
- $postfix-width: calc(var(#{styles-tokens-element.$space-fields-postfix-gap}) + $button-width * 2);
76
+ $postfix-width: calc(styles-tokens-element.$space-fields-postfix-gap + $button-width * 2);
77
77
  $margin-right: calc(
78
78
  #{styles-tokens-element.simple-var(styles-tokens-fields.$fields, $containerVariant, $size, 'padding-right')} + #{styles-tokens-element.simple-var(styles-tokens-fields.$fields, $containerVariant, $size, 'gap')} + #{$postfix-width}
79
79
  );