@rescui/switcher 0.8.0 → 0.9.0

package/lib/index.css

@@ -1,16 +1,20 @@
-._themeLight_hikbk6_6{
+._themeLight_mp550j_6{
   --rs-theme-dark:0;
 }
-._themeDark_hikbk6_9{
+._themeDark_mp550j_9{
   --rs-theme-dark:1;
 }
-._sizeXS_hikbk6_13{
+._sizeXS_mp550j_13{
   --_rs-switcher-border-radius:4px;
   --_rs-switcher-compact-border-radius:var(--_rs-switcher-border-radius);
   --_rs-switcher-option-padding:2px 12px;
   --_rs-switcher-compact-option-padding:2px 8px;
+  --_rs-switcher-icon-size:16px;
+  --_rs-switcher-icon-offset:4px;
+  --_rs-switcher-compact-icon-offset:var(--_rs-switcher-icon-offset);
+  --_rs-switcher-icon-margin-vertical:2px;
 }
-._sizeXS_hikbk6_13 [data-rs-internal='switcher__option']{
+._sizeXS_mp550j_13 [data-rs-internal='switcher__option']{
     --_rs-typography-letter-spacing:0.0045em;
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
@@ -44,13 +48,17 @@
     --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
-._sizeS_hikbk6_16{
+._sizeS_mp550j_16{
   --_rs-switcher-border-radius:16px;
   --_rs-switcher-compact-border-radius:4px;
   --_rs-switcher-option-padding:6px 16px;
   --_rs-switcher-compact-option-padding:6px 8px;
+  --_rs-switcher-icon-size:20px;
+  --_rs-switcher-icon-offset:8px;
+  --_rs-switcher-compact-icon-offset:4px;
+  --_rs-switcher-icon-margin-vertical:0px;
 }
-._sizeS_hikbk6_16 [data-rs-internal='switcher__option']{
+._sizeS_mp550j_16 [data-rs-internal='switcher__option']{
     --_rs-typography-letter-spacing:0.0045em;
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
@@ -84,13 +92,17 @@
     --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
-._sizeM_hikbk6_19{
+._sizeM_mp550j_19{
   --_rs-switcher-border-radius:20px;
   --_rs-switcher-compact-border-radius:8px;
   --_rs-switcher-option-padding:8px 24px;
   --_rs-switcher-compact-option-padding:8px 12px;
+  --_rs-switcher-icon-size:24px;
+  --_rs-switcher-icon-offset:12px;
+  --_rs-switcher-compact-icon-offset:8px;
+  --_rs-switcher-icon-margin-vertical:0px;
 }
-._sizeM_hikbk6_19 [data-rs-internal='switcher__option']{
+._sizeM_mp550j_19 [data-rs-internal='switcher__option']{
     --_rs-typography-letter-spacing:0.0015em;
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
@@ -125,17 +137,21 @@
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
 @media screen and (max-width: 640px){
-._sizeM_hikbk6_19 [data-rs-internal='switcher__option']{
+._sizeM_mp550j_19 [data-rs-internal='switcher__option']{
     --_rs-typography-list-li-margin-top-from-text:12px;
   }
   }
-._sizeL_hikbk6_22{
+._sizeL_mp550j_22{
   --_rs-switcher-border-radius:26px;
   --_rs-switcher-compact-border-radius:12px;
   --_rs-switcher-option-padding:12px 32px;
   --_rs-switcher-compact-option-padding:12px 16px;
+  --_rs-switcher-icon-size:28px;
+  --_rs-switcher-icon-offset:16px;
+  --_rs-switcher-compact-icon-offset:12px;
+  --_rs-switcher-icon-margin-vertical:0px;
 }
-._sizeL_hikbk6_22 [data-rs-internal='switcher__option']{
+._sizeL_mp550j_22 [data-rs-internal='switcher__option']{
     --_rs-typography-letter-spacing:normal;
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
@@ -170,26 +186,27 @@
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
 @media screen and (max-width: 640px){
-._sizeL_hikbk6_22 [data-rs-internal='switcher__option']{
+._sizeL_mp550j_22 [data-rs-internal='switcher__option']{
     --_rs-typography-list-li-margin-top-from-text:16px;
   }
   }
-._modeClassic_hikbk6_26{
+._modeClassic_mp550j_26{
   --_rs-switcher-option-hover-background:var(--_rs-color-primary-t-fog);
   --_rs-switcher-mark-border-color:var(--_rs-color-primary);
 }
-._modeRock_hikbk6_29{
+._modeRock_mp550j_29{
   --_rs-switcher-option-hover-background:rgba(
     calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
     0.1
   );
   --_rs-switcher-mark-border-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
 }
-._compact_hikbk6_33{
+._compact_mp550j_33{
   --_rs-switcher-border-radius-from-compact:var(--_rs-switcher-compact-border-radius);
   --_rs-switcher-option-padding-from-compact:var(--_rs-switcher-compact-option-padding);
+  --_rs-switcher-icon-offset-from-compact:var(--_rs-switcher-compact-icon-offset);
 }
-._switcher_hikbk6_37{
+._switcher_mp550j_37{
   --_rs-theme-dark:var(
     --_rs-internal-force-theme-dark-consult-rescui-before-using,
     var(--rs-theme-dark, 0)
@@ -199,7 +216,7 @@
   --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
 }
 @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._switcher_hikbk6_37{
+._switcher_mp550j_37{
       --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
       --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
       --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -208,7 +225,7 @@
 }
   }
 @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._switcher_hikbk6_37{
+._switcher_mp550j_37{
     --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
     --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
     --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -216,7 +233,7 @@
     --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
 }
   }
-._switcher_hikbk6_37 {
+._switcher_mp550j_37 {
 
   position:relative;
 
@@ -245,7 +262,13 @@
       calc(0.4 + var(--_rs-theme-dark-coefficient)*0.1)
     ) 0 0 0 1px;
 }
-._option_hikbk6_61{
+._alignIconLeft_mp550j_61{
+  --_rs-switcher-option-flex-direction:row;
+}
+._alignIconRight_mp550j_64{
+  --_rs-switcher-option-flex-direction:row-reverse;
+}
+._option_mp550j_68{
   letter-spacing:var(
     --rs-text-base-letter-spacing,
     var(--_rs-typography-letter-spacing)
@@ -259,11 +282,11 @@
   -webkit-font-feature-settings:'kern', 'liga', 'calt';
   font-feature-settings:'kern', 'liga', 'calt';
 }
-._option_hikbk6_61 > p:not(:nth-child(1)),
-  ._option_hikbk6_61 > pre:not(:nth-child(1)){
+._option_mp550j_68 > p:not(:nth-child(1)),
+  ._option_mp550j_68 > pre:not(:nth-child(1)){
     padding-top:var(--_rs-typography-auto-offset-or-initial);
   }
-._option_hikbk6_61 {
+._option_mp550j_68 {
   --_rs-typography-hardness-color:var(
   --rs-color-hard,
   rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227))
@@ -272,10 +295,28 @@
   position:relative;
   z-index:1;
 
-  display:inline-block;
+  display:-webkit-inline-box;
+
+  display:-ms-inline-flexbox;
+
+  display:inline-flex;
   -webkit-box-flex:1;
       -ms-flex:1 1 auto;
           flex:1 1 auto;
+  -webkit-box-orient:vertical;
+  -webkit-box-direction:normal;
+      -ms-flex-direction:var(--_rs-switcher-option-flex-direction);
+          flex-direction:var(--_rs-switcher-option-flex-direction);
+  -webkit-box-pack:center;
+      -ms-flex-pack:center;
+          justify-content:center;
+  -webkit-box-align:start;
+      -ms-flex-align:start;
+          align-items:flex-start;
+  gap:var(
+    --_rs-switcher-icon-offset-from-compact,
+    var(--_rs-switcher-icon-offset)
+  );
 
   -webkit-box-sizing:border-box;
 
@@ -301,26 +342,26 @@
      -moz-appearance:none;
           appearance:none;
 }
-._disabled_hikbk6_91 ._option_hikbk6_61{
+._disabled_mp550j_105 ._option_mp550j_68{
     cursor:not-allowed;
     pointer-events:none;
   }
-._option_hikbk6_61:focus[data-focus-method='key']{
+._option_mp550j_68:focus[data-focus-method='key']{
     -webkit-box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
             box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
   }
-._option_hikbk6_61:hover{
+._option_mp550j_68:hover{
     background:var(--_rs-switcher-option-hover-background);
   }
-._option_hikbk6_61._selected_hikbk6_104:active{
+._option_mp550j_68._selected_mp550j_118:active{
       background:transparent;
     }
-._option_hikbk6_61._selected_hikbk6_104:hover,
-    ._option_hikbk6_61._selected_hikbk6_104:active{
+._option_mp550j_68._selected_mp550j_118:hover,
+    ._option_mp550j_68._selected_mp550j_118:active{
       cursor:default;
     }
-._disabled_hikbk6_91 ._option_hikbk6_61,
-  ._disabled_hikbk6_91 ._option_hikbk6_61._selected_hikbk6_104{
+._disabled_mp550j_105 ._option_mp550j_68,
+  ._disabled_mp550j_105 ._option_mp550j_68._selected_mp550j_118{
     cursor:default;
 
     color:rgba(
@@ -329,7 +370,20 @@
     );
     background:transparent;
   }
-._mark_hikbk6_126{
+._option_mp550j_68 ._icon_mp550j_139{
+    -webkit-box-flex:0;
+        -ms-flex:0 0 auto;
+            flex:0 0 auto;
+
+    width:auto;
+    height:var(--_rs-switcher-icon-size);
+
+    fill:currentColor;
+
+    margin-top:var(--_rs-switcher-icon-margin-vertical);
+    margin-bottom:var(--_rs-switcher-icon-margin-vertical);
+  }
+._mark_mp550j_152{
   position:absolute;
   top:0;
   bottom:0;
@@ -351,7 +405,7 @@
 
   transition:all 0.2s;
 }
-._disabled_hikbk6_91 ._mark_hikbk6_126{
+._disabled_mp550j_105 ._mark_mp550j_152{
     border:solid 2px rgba(
         calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
         calc(0.4 - var(--_rs-theme-dark-coefficient)*0.2)

package/lib/index.p.module.css.js

@@ -1,17 +1,20 @@
 var styles = {
-  "themeLight": "_themeLight_hikbk6_6",
-  "themeDark": "_themeDark_hikbk6_9",
-  "sizeXS": "_sizeXS_hikbk6_13",
-  "sizeS": "_sizeS_hikbk6_16",
-  "sizeM": "_sizeM_hikbk6_19",
-  "sizeL": "_sizeL_hikbk6_22",
-  "modeClassic": "_modeClassic_hikbk6_26",
-  "modeRock": "_modeRock_hikbk6_29",
-  "compact": "_compact_hikbk6_33",
-  "switcher": "_switcher_hikbk6_37",
-  "option": "_option_hikbk6_61",
-  "disabled": "_disabled_hikbk6_91",
-  "selected": "_selected_hikbk6_104",
-  "mark": "_mark_hikbk6_126"
+  "themeLight": "_themeLight_mp550j_6",
+  "themeDark": "_themeDark_mp550j_9",
+  "sizeXS": "_sizeXS_mp550j_13",
+  "sizeS": "_sizeS_mp550j_16",
+  "sizeM": "_sizeM_mp550j_19",
+  "sizeL": "_sizeL_mp550j_22",
+  "modeClassic": "_modeClassic_mp550j_26",
+  "modeRock": "_modeRock_mp550j_29",
+  "compact": "_compact_mp550j_33",
+  "switcher": "_switcher_mp550j_37",
+  "alignIconLeft": "_alignIconLeft_mp550j_61",
+  "alignIconRight": "_alignIconRight_mp550j_64",
+  "option": "_option_mp550j_68",
+  "disabled": "_disabled_mp550j_105",
+  "selected": "_selected_mp550j_118",
+  "icon": "_icon_mp550j_139",
+  "mark": "_mark_mp550j_152"
 };
 export { styles as default };

package/lib/public-api.p.css

@@ -4,6 +4,10 @@
     --_rs-switcher-compact-border-radius:var(--_rs-switcher-border-radius);
     --_rs-switcher-option-padding:2px 12px;
     --_rs-switcher-compact-option-padding:2px 8px;
+    --_rs-switcher-icon-size:16px;
+    --_rs-switcher-icon-offset:4px;
+    --_rs-switcher-compact-icon-offset:var(--_rs-switcher-icon-offset);
+    --_rs-switcher-icon-margin-vertical:2px;
   }
     &:not(html) [data-rs-internal='switcher__option']{
     --_rs-typography-letter-spacing:0.0045em;
@@ -46,6 +50,10 @@
     --_rs-switcher-compact-border-radius:4px;
     --_rs-switcher-option-padding:6px 16px;
     --_rs-switcher-compact-option-padding:6px 8px;
+    --_rs-switcher-icon-size:20px;
+    --_rs-switcher-icon-offset:8px;
+    --_rs-switcher-compact-icon-offset:4px;
+    --_rs-switcher-icon-margin-vertical:0px;
   }
     &:not(html) [data-rs-internal='switcher__option']{
     --_rs-typography-letter-spacing:0.0045em;
@@ -88,6 +96,10 @@
     --_rs-switcher-compact-border-radius:8px;
     --_rs-switcher-option-padding:8px 24px;
     --_rs-switcher-compact-option-padding:8px 12px;
+    --_rs-switcher-icon-size:24px;
+    --_rs-switcher-icon-offset:12px;
+    --_rs-switcher-compact-icon-offset:8px;
+    --_rs-switcher-icon-margin-vertical:0px;
   }
     &:not(html) [data-rs-internal='switcher__option']{
     --_rs-typography-letter-spacing:0.0015em;
@@ -135,6 +147,10 @@
     --_rs-switcher-compact-border-radius:12px;
     --_rs-switcher-option-padding:12px 32px;
     --_rs-switcher-compact-option-padding:12px 16px;
+    --_rs-switcher-icon-size:28px;
+    --_rs-switcher-icon-offset:16px;
+    --_rs-switcher-compact-icon-offset:12px;
+    --_rs-switcher-icon-margin-vertical:0px;
   }
     &:not(html) [data-rs-internal='switcher__option']{
     --_rs-typography-letter-spacing:normal;
@@ -191,3 +207,9 @@
     --_rs-switcher-mark-border-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
   }
 }
+@define-mixin rs-switcher-icon-position-left{
+  --_rs-switcher-option-flex-direction:row;
+}
+@define-mixin rs-switcher-icon-position-right{
+  --_rs-switcher-option-flex-direction:row-reverse;
+}

package/lib/public-api.pcss

@@ -4,6 +4,10 @@
     --_rs-switcher-compact-border-radius:var(--_rs-switcher-border-radius);
     --_rs-switcher-option-padding:2px 12px;
     --_rs-switcher-compact-option-padding:2px 8px;
+    --_rs-switcher-icon-size:16px;
+    --_rs-switcher-icon-offset:4px;
+    --_rs-switcher-compact-icon-offset:var(--_rs-switcher-icon-offset);
+    --_rs-switcher-icon-margin-vertical:2px;
   }
     &:not(html) [data-rs-internal='switcher__option']{
     --_rs-typography-letter-spacing:0.0045em;
@@ -46,6 +50,10 @@
     --_rs-switcher-compact-border-radius:4px;
     --_rs-switcher-option-padding:6px 16px;
     --_rs-switcher-compact-option-padding:6px 8px;
+    --_rs-switcher-icon-size:20px;
+    --_rs-switcher-icon-offset:8px;
+    --_rs-switcher-compact-icon-offset:4px;
+    --_rs-switcher-icon-margin-vertical:0px;
   }
     &:not(html) [data-rs-internal='switcher__option']{
     --_rs-typography-letter-spacing:0.0045em;
@@ -88,6 +96,10 @@
     --_rs-switcher-compact-border-radius:8px;
     --_rs-switcher-option-padding:8px 24px;
     --_rs-switcher-compact-option-padding:8px 12px;
+    --_rs-switcher-icon-size:24px;
+    --_rs-switcher-icon-offset:12px;
+    --_rs-switcher-compact-icon-offset:8px;
+    --_rs-switcher-icon-margin-vertical:0px;
   }
     &:not(html) [data-rs-internal='switcher__option']{
     --_rs-typography-letter-spacing:0.0015em;
@@ -135,6 +147,10 @@
     --_rs-switcher-compact-border-radius:12px;
     --_rs-switcher-option-padding:12px 32px;
     --_rs-switcher-compact-option-padding:12px 16px;
+    --_rs-switcher-icon-size:28px;
+    --_rs-switcher-icon-offset:16px;
+    --_rs-switcher-compact-icon-offset:12px;
+    --_rs-switcher-icon-margin-vertical:0px;
   }
     &:not(html) [data-rs-internal='switcher__option']{
     --_rs-typography-letter-spacing:normal;
@@ -191,3 +207,9 @@
     --_rs-switcher-mark-border-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
   }
 }
+@define-mixin rs-switcher-icon-position-left{
+  --_rs-switcher-option-flex-direction:row;
+}
+@define-mixin rs-switcher-icon-position-right{
+  --_rs-switcher-option-flex-direction:row-reverse;
+}

package/lib/switcher.d.ts

@@ -1,11 +1,15 @@
 import React from 'react';
-export interface SwitcherOption<OptionsValueType> {
-    label: React.ReactNode;
-    value: OptionsValueType;
-}
+export declare type SwitcherOptionIconPosition = 'left' | 'right';
 export declare type SwitcherSize = 'l' | 'm' | 's' | 'xs';
 export declare type SwitcherTheme = 'light' | 'dark';
 export declare type SwitcherMode = 'rock' | 'classic';
+export declare type SwitcherOption<OptionsValueType> = {
+    label?: React.ReactNode;
+    value: OptionsValueType;
+    /** Additional icon */
+    icon?: React.ReactNode;
+};
+export declare type SwitcherOptionForDocs = SwitcherOption<any>;
 export interface SwitcherProps<ValueType, OptionsValueType extends ValueType> {
     /** Current selected value */
     value: ValueType;
@@ -22,8 +26,10 @@ export interface SwitcherProps<ValueType, OptionsValueType extends ValueType> {
     compact?: boolean;
     /** Identifier for e2e tests */
     'data-e2e'?: string;
+    /** **Works only if the `icon` on options is present.** Additional icon position. */
+    iconPosition?: SwitcherOptionIconPosition;
 }
-export declare function Switcher<ValueType, OptionsValueType extends ValueType = ValueType>({ className, theme: themeFromProps, size, disabled, compact, ['data-e2e']: e2eId, options, value: switcherValue, mode, onChange }: SwitcherProps<ValueType, OptionsValueType>): JSX.Element;
+export declare function Switcher<ValueType, OptionsValueType extends ValueType = ValueType>({ className, theme: themeFromProps, size, disabled, compact, ['data-e2e']: e2eId, options, value: switcherValue, mode, iconPosition, onChange }: SwitcherProps<ValueType, OptionsValueType>): JSX.Element;
 export declare namespace Switcher {
     var propTypes: {};
 }

package/lib/switcher.js

@@ -1,9 +1,7 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import "core-js/modules/es.object.to-string.js";
-import React, { useRef, useMemo, useCallback, useState, useEffect } from 'react';
+import React, { cloneElement, useRef, useCallback, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
@@ -24,28 +22,27 @@ var modeToClass = {
   rock: styles.modeRock
 };
 
-var hashOptions = function hashOptions(options) {
-  return options.reduce(function (hash, option) {
-    var _context, _context2;
-
-    return _concatInstanceProperty(_context = _concatInstanceProperty(_context2 = "".concat(hash)).call(_context2, String(option.value), ":")).call(_context, String(option.label));
-  }, '');
-};
-
 var findIndexByValue = function findIndexByValue(options, value) {
   var index = _findIndexInstanceProperty(options).call(options, function (option) {
     return option.value === value;
   });
 
   return index === -1 ? 0 : index;
+}; // check for ignored jsx values and empty string, more info https://reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored
+
+
+var isNodeEmpty = function isNodeEmpty(node) {
+  return node === null || typeof node === 'undefined' || node === false || node === true || node === '';
 };
 
 var optionRenderer = function optionRenderer(_ref, ref) {
   var label = _ref.label,
       value = _ref.value,
+      icon = _ref.icon,
       disabled = _ref.disabled,
       onClick = _ref.onClick,
       selected = _ref.selected;
+  var isWithoutText = isNodeEmpty(label);
   return /*#__PURE__*/React.createElement("button", {
     key: String(value),
     ref: ref,
@@ -54,7 +51,9 @@ var optionRenderer = function optionRenderer(_ref, ref) {
     "data-rs-internal": 'switcher__option',
     disabled: disabled,
     className: cn(styles.option, selected && styles.selected)
-  }, label);
+  }, /*#__PURE__*/React.isValidElement(icon) && /*#__PURE__*/cloneElement(icon, {
+    className: cn(icon.props.className, styles.icon)
+  }), !isWithoutText && /*#__PURE__*/React.createElement("span", null, label));
 };
 
 var Option = /*#__PURE__*/React.forwardRef(optionRenderer);
@@ -72,15 +71,12 @@ function Switcher(_ref2) {
       switcherValue = _ref2.value,
       _ref2$mode = _ref2.mode,
       mode = _ref2$mode === void 0 ? 'classic' : _ref2$mode,
+      _ref2$iconPosition = _ref2.iconPosition,
+      iconPosition = _ref2$iconPosition === void 0 ? 'left' : _ref2$iconPosition,
       onChange = _ref2.onChange;
   var refsArray = useRef([]);
   var containerRef = useRef(null);
   var theme = useThemeWithUndefined(themeFromProps);
-  var optionsHash = hashOptions(options); // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  var memoizedOptions = useMemo(function () {
-    return options;
-  }, [optionsHash]);
   var handleOptionRef = useCallback(function (index) {
     return function (ref) {
       if (!ref) {
@@ -92,7 +88,7 @@ function Switcher(_ref2) {
       }
     };
   }, []);
-  var activeIndex = findIndexByValue(memoizedOptions, switcherValue);
+  var activeIndex = findIndexByValue(options, switcherValue);
 
   var _useState = useState({
     offset: 0,
@@ -124,18 +120,20 @@ function Switcher(_ref2) {
   }, [activeIndex]);
   useResizeObserver(containerRef, onResize);
   return /*#__PURE__*/React.createElement("span", {
-    className: cn(className, styles.switcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled, compact && styles.compact),
+    className: cn(className, styles.switcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled, compact && styles.compact, iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft),
     "data-e2e": e2eId,
     ref: containerRef,
     "data-rs-internal": 'switcher',
     "data-test": "switcher".concat(disabled ? '-disabled' : '')
-  }, _mapInstanceProperty(memoizedOptions).call(memoizedOptions, function (_ref3, index) {
+  }, _mapInstanceProperty(options).call(options, function (_ref3, index) {
     var value = _ref3.value,
-        label = _ref3.label;
+        label = _ref3.label,
+        icon = _ref3.icon;
     return /*#__PURE__*/React.createElement(Option, {
       key: String(value),
       value: value,
       label: label,
+      icon: icon,
       disabled: disabled,
       onClick: function onClick() {
         return onChange(value);
@@ -153,8 +151,9 @@ function Switcher(_ref2) {
 }
 
 var optionPropType = PropTypes.shape({
-  label: PropTypes.node.isRequired,
-  value: PropTypes.any.isRequired
+  label: PropTypes.node,
+  value: PropTypes.any.isRequired,
+  icon: PropTypes.node
 });
 Switcher.propTypes = {
   options: PropTypes.arrayOf(optionPropType).isRequired,
@@ -164,6 +163,7 @@ Switcher.propTypes = {
   size: PropTypes.oneOf(['l', 'm', 's', 'xs']),
   theme: PropTypes.oneOf(['light', 'dark']),
   disabled: PropTypes.bool,
+  iconPosition: PropTypes.oneOf(['left', 'right']),
   'data-e2e': PropTypes.string
 };
 export { Switcher, Switcher as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/switcher",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -34,5 +34,5 @@
     "build": "rescui-scripts build && yarn run build-pcss-api",
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
-  "gitHead": "73268bf009792a4c5565b66806ed063c0c503ba2"
+  "gitHead": "9fa2934442b7e2feac97b039aef0c02fde6f4d5e"
 }