@alfalab/core-components-select 19.1.7 → 19.1.8-alfasans

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-select",
-    "version": "19.1.7",
+    "version": "19.1.8-alfasans",
     "description": "Select component",
     "keywords": [],
     "license": "MIT",
@@ -13,18 +13,18 @@
         "build": "rollup -c ../../tools/rollup/rollup.config.mjs --silent"
     },
     "dependencies": {
-        "@alfalab/core-components-base-modal": "^7.1.5",
-        "@alfalab/core-components-bottom-sheet": "^8.1.7",
-        "@alfalab/core-components-button": "^13.1.3",
-        "@alfalab/core-components-checkbox": "^6.2.1",
-        "@alfalab/core-components-form-control": "^14.0.6",
-        "@alfalab/core-components-input": "^17.1.6",
-        "@alfalab/core-components-modal": "^11.0.10",
-        "@alfalab/core-components-mq": "^6.0.4",
-        "@alfalab/core-components-popover": "^8.0.4",
-        "@alfalab/core-components-scrollbar": "^5.0.2",
-        "@alfalab/core-components-shared": "^2.2.0",
-        "@alfalab/core-components-skeleton": "^7.0.3",
+        "@alfalab/core-components-base-modal": "7.1.5-alfasans",
+        "@alfalab/core-components-bottom-sheet": "8.1.8-alfasans",
+        "@alfalab/core-components-button": "13.1.3-alfasans",
+        "@alfalab/core-components-checkbox": "6.2.1-alfasans",
+        "@alfalab/core-components-form-control": "14.0.6-alfasans",
+        "@alfalab/core-components-input": "17.1.6-alfasans",
+        "@alfalab/core-components-modal": "11.0.11-alfasans",
+        "@alfalab/core-components-mq": "6.0.4-alfasans",
+        "@alfalab/core-components-popover": "8.0.4-alfasans",
+        "@alfalab/core-components-scrollbar": "5.0.3-alfasans",
+        "@alfalab/core-components-shared": "2.2.0-alfasans",
+        "@alfalab/core-components-skeleton": "7.0.3-alfasans",
         "@alfalab/hooks": "^1.13.1",
         "@alfalab/icons-glyph": "^2.260.0",
         "@juggle/resize-observer": "^3.3.1",
@@ -45,6 +45,6 @@
         "access": "public",
         "directory": "dist"
     },
-    "themesVersion": "15.1.0",
-    "varsVersion": "11.0.2"
+    "themesVersion": "15.1.0-alfasans",
+    "varsVersion": "11.1.0-alfasans"
 }

package/presets/useSelectWithApply/options-list-with-apply/footer/index.css

@@ -12,14 +12,14 @@
 :root {
     --select-option-list-footer-button-gap: var(--gap-8);
 }
-.select__footer_1sfv8 {
+.select__footer_1btsd {
     background-color: var(--color-light-base-bg-primary);
     padding: var(--gap-12);
     outline: none;
 }
-.select__footer_1sfv8.select__size-72_1sfv8 {
+.select__footer_1btsd.select__size-72_1btsd {
         padding: var(--gap-12) var(--gap-16);
     }
-.select__footer_1sfv8 > .select__button_1sfv8 + .select__button_1sfv8 {
+.select__footer_1btsd > .select__button_1btsd + .select__button_1btsd {
         margin-left: var(--select-option-list-footer-button-gap);
     }

package/presets/useSelectWithApply/options-list-with-apply/footer/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"footer":"select__footer_1sfv8","size-72":"select__size-72_1sfv8","button":"select__button_1sfv8"};
+var styles = {"footer":"select__footer_1btsd","size-72":"select__size-72_1btsd","button":"select__button_1btsd"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/presets/useSelectWithApply/options-list-with-apply/header/index.css

@@ -6,16 +6,16 @@
     --gap-12: var(--gap-s);
     --gap-16: var(--gap-m);
 }
-.select__desktop_xi3y4 {
+.select__desktop_11llj {
     padding: var(--gap-12);
 }
-.select__desktop_xi3y4.select__size-72_xi3y4 {
+.select__desktop_11llj.select__size-72_11llj {
         padding-left: var(--gap-16);
     }
-.select__mobile_xi3y4 {
+.select__mobile_11llj {
     padding: var(--gap-12) var(--gap-12) var(--gap-12) var(--gap-8);
 }
-.select__positionAfter_xi3y4 {
+.select__positionAfter_11llj {
     margin-left: 0;
     margin-left: initial;
 }

package/presets/useSelectWithApply/options-list-with-apply/header/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"desktop":"select__desktop_xi3y4","size-72":"select__size-72_xi3y4","mobile":"select__mobile_xi3y4","positionAfter":"select__positionAfter_xi3y4"};
+var styles = {"desktop":"select__desktop_11llj","size-72":"select__size-72_11llj","mobile":"select__mobile_11llj","positionAfter":"select__positionAfter_11llj"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/presets/useSelectWithLoading/index.css

@@ -1,4 +1,4 @@
-.select__skeleton_sbv5r {
+.select__skeleton_1igtv {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);

package/presets/useSelectWithLoading/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"skeleton":"select__skeleton_sbv5r"};
+var styles = {"skeleton":"select__skeleton_1igtv"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/src/components/base-checkmark/Component.tsx

@@ -15,37 +15,21 @@ export const BaseCheckmark: FC<CheckmarkProps> = ({
     multiple,
     align = 'center',
     position = 'before',
-    content,
-}) => {
-    const renderCheckmarkIcon = () => (
-        <CheckmarkMIcon
-            className={cn(styles.singleIcon, styles[position], {
-                [styles.selected]: selected,
-            })}
-        />
-    );
-
-    return multiple ? (
+}) =>
+    multiple ? (
         <Checkbox
-            block={true}
             checked={selected}
             disabled={disabled}
-            contentClassName={cn({ [styles.positionAfter]: position === 'after' })}
-            className={cn(styles.checkmark, styles[align], className, {
+            className={cn(styles.checkmark, styles[position], styles[align], className, {
                 [styles.selected]: selected,
             })}
             size={24}
-            position={position}
-            label={content}
             hiddenInput={true}
         />
     ) : (
-        <div className={cn(styles.container, styles[align], className)}>
-            {position === 'before' && renderCheckmarkIcon()}
-
-            <div className={styles.content}>{content}</div>
-
-            {position === 'after' && renderCheckmarkIcon()}
-        </div>
+        <CheckmarkMIcon
+            className={cn(styles.singleIcon, styles[position], styles[align], className, {
+                [styles.selected]: selected,
+            })}
+        />
     );
-};

package/src/components/base-checkmark/index.module.css

@@ -5,31 +5,20 @@
     flex-shrink: 0;
     box-sizing: border-box;
 
-    &.start {
-        align-self: start;
+    &.before {
+        margin-right: var(--gap-12);
     }
 
-    &.center {
-        align-self: center;
+    &.after {
+        margin-left: var(--gap-12);
     }
-}
-
-.positionAfter {
-    margin-left: unset;
-}
-
-.container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
 
     &.start {
-        align-items: flex-start;
+        align-self: start;
     }
 
     &.center {
-        align-items: center;
+        align-self: center;
     }
 }
 
@@ -49,7 +38,3 @@
         opacity: 1;
     }
 }
-
-.content {
-    flex: 1;
-}

package/src/components/base-option/Component.tsx

@@ -27,6 +27,17 @@ export const BaseOption: FC<OptionProps> = ({
     const isTextContent = !isValidElement(content);
     const showCheckmark = Checkmark && showCheckMark;
 
+    const renderCheckmark = (position: 'before' | 'after') =>
+        showCheckmark && (
+            <Checkmark
+                disabled={disabled}
+                selected={selected}
+                multiple={multiple}
+                align={align}
+                position={position}
+            />
+        );
+
     return (
         <div
             {...innerProps}
@@ -44,18 +55,11 @@ export const BaseOption: FC<OptionProps> = ({
             data-test-id={dataTestId}
             aria-label={option?.value?.name}
         >
-            {showCheckmark ? (
-                <Checkmark
-                    disabled={disabled}
-                    selected={selected}
-                    multiple={multiple}
-                    align={align}
-                    position={checkmarkPosition}
-                    content={content}
-                />
-            ) : (
-                <div className={cn(styles.content)}>{content}</div>
-            )}
+            {checkmarkPosition === 'before' && renderCheckmark('before')}
+
+            <div className={cn(styles.content)}>{content}</div>
+
+            {checkmarkPosition === 'after' && renderCheckmark('after')}
         </div>
     );
 };