@salutejs/plasma-new-hope 0.194.0-canary.1560.11837986621.0 → 0.194.0-canary.1562.11851866538.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Combobox/ComboboxNew/Combobox.js +0 -1
- package/cjs/components/Combobox/ComboboxNew/Combobox.js.map +1 -1
- package/cjs/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.js +1 -2
- package/cjs/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.js.map +1 -1
- package/cjs/components/Combobox/ComboboxOld/Combobox.css +5 -4
- package/cjs/components/Combobox/ComboboxOld/ui/ComboboxDivider/ComboboxDivider.css +5 -4
- package/cjs/components/Combobox/ComboboxOld/ui/ComboboxFooter/ComboboxFooter.css +5 -4
- package/cjs/components/Combobox/ComboboxOld/ui/ComboboxGroup/ComboboxGroup.css +5 -4
- package/cjs/components/Combobox/ComboboxOld/ui/ComboboxHeader/ComboboxHeader.css +5 -4
- package/cjs/components/Dropdown/Dropdown.css +5 -4
- package/cjs/components/Dropdown/Dropdown.js +4 -2
- package/cjs/components/Dropdown/Dropdown.js.map +1 -1
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.css +5 -4
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js +3 -2
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js.map +1 -1
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +7 -1
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js.map +1 -1
- package/cjs/components/Dropdown/ui/DropdownItem/{DropdownItem.styles_1b439rx.css → DropdownItem.styles_14yih1y.css} +1 -0
- package/cjs/components/Select/Select.js +0 -1
- package/cjs/components/Select/Select.js.map +1 -1
- package/cjs/components/Select/ui/Inner/ui/Item/Item.js +1 -2
- package/cjs/components/Select/ui/Inner/ui/Item/Item.js.map +1 -1
- package/cjs/components/Switch/Switch.css +2 -2
- package/cjs/components/Switch/Switch.tokens.js +1 -7
- package/cjs/components/Switch/Switch.tokens.js.map +1 -1
- package/cjs/components/Switch/_toggleSize/base.js +1 -1
- package/cjs/components/Switch/_toggleSize/base.js.map +1 -1
- package/cjs/components/Switch/_toggleSize/base_6i0904.css +1 -0
- package/cjs/components/Switch/_view/base.js +1 -1
- package/cjs/components/Switch/_view/base.js.map +1 -1
- package/cjs/components/Switch/_view/base_yxkf3s.css +1 -0
- package/cjs/index.css +7 -6
- package/emotion/cjs/components/Combobox/ComboboxNew/Combobox.js +0 -1
- package/emotion/cjs/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.js +1 -2
- package/emotion/cjs/components/Dropdown/Dropdown.js +4 -2
- package/emotion/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js +3 -2
- package/emotion/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +15 -11
- package/emotion/cjs/components/Select/Select.js +0 -1
- package/emotion/cjs/components/Select/ui/Inner/ui/Item/Item.js +1 -2
- package/emotion/cjs/components/Switch/Switch.tokens.js +1 -7
- package/emotion/cjs/components/Switch/_toggleSize/base.js +1 -1
- package/emotion/cjs/components/Switch/_view/base.js +1 -1
- package/emotion/cjs/examples/plasma_b2c/components/Switch/Switch.config.js +8 -8
- package/emotion/cjs/examples/plasma_b2c/components/Switch/Switch.js +2 -5
- package/emotion/cjs/examples/plasma_b2c/components/Switch/Switch.stories.tsx +1 -33
- package/emotion/cjs/examples/plasma_web/components/Switch/Switch.config.js +8 -8
- package/emotion/cjs/examples/plasma_web/components/Switch/Switch.js +2 -5
- package/emotion/cjs/examples/plasma_web/components/Switch/Switch.stories.tsx +1 -33
- package/emotion/es/components/Combobox/ComboboxNew/Combobox.js +0 -1
- package/emotion/es/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.js +1 -2
- package/emotion/es/components/Dropdown/Dropdown.js +4 -2
- package/emotion/es/components/Dropdown/ui/DropdownItem/DropdownItem.js +4 -3
- package/emotion/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +15 -11
- package/emotion/es/components/Select/Select.js +0 -1
- package/emotion/es/components/Select/ui/Inner/ui/Item/Item.js +1 -2
- package/emotion/es/components/Switch/Switch.tokens.js +1 -7
- package/emotion/es/components/Switch/_toggleSize/base.js +1 -1
- package/emotion/es/components/Switch/_view/base.js +1 -1
- package/emotion/es/examples/plasma_b2c/components/Switch/Switch.config.js +8 -8
- package/emotion/es/examples/plasma_b2c/components/Switch/Switch.js +1 -4
- package/emotion/es/examples/plasma_b2c/components/Switch/Switch.stories.tsx +1 -33
- package/emotion/es/examples/plasma_web/components/Switch/Switch.config.js +8 -8
- package/emotion/es/examples/plasma_web/components/Switch/Switch.js +1 -4
- package/emotion/es/examples/plasma_web/components/Switch/Switch.stories.tsx +1 -33
- package/es/components/Combobox/ComboboxNew/Combobox.js +0 -1
- package/es/components/Combobox/ComboboxNew/Combobox.js.map +1 -1
- package/es/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.js +1 -2
- package/es/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.js.map +1 -1
- package/es/components/Combobox/ComboboxOld/Combobox.css +5 -4
- package/es/components/Combobox/ComboboxOld/ui/ComboboxDivider/ComboboxDivider.css +5 -4
- package/es/components/Combobox/ComboboxOld/ui/ComboboxFooter/ComboboxFooter.css +5 -4
- package/es/components/Combobox/ComboboxOld/ui/ComboboxGroup/ComboboxGroup.css +5 -4
- package/es/components/Combobox/ComboboxOld/ui/ComboboxHeader/ComboboxHeader.css +5 -4
- package/es/components/Dropdown/Dropdown.css +5 -4
- package/es/components/Dropdown/Dropdown.js +4 -2
- package/es/components/Dropdown/Dropdown.js.map +1 -1
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.css +5 -4
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.js +4 -3
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.js.map +1 -1
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +7 -2
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js.map +1 -1
- package/es/components/Dropdown/ui/DropdownItem/{DropdownItem.styles_1b439rx.css → DropdownItem.styles_14yih1y.css} +1 -0
- package/es/components/Select/Select.js +0 -1
- package/es/components/Select/Select.js.map +1 -1
- package/es/components/Select/ui/Inner/ui/Item/Item.js +1 -2
- package/es/components/Select/ui/Inner/ui/Item/Item.js.map +1 -1
- package/es/components/Switch/Switch.css +2 -2
- package/es/components/Switch/Switch.tokens.js +1 -7
- package/es/components/Switch/Switch.tokens.js.map +1 -1
- package/es/components/Switch/_toggleSize/base.js +1 -1
- package/es/components/Switch/_toggleSize/base.js.map +1 -1
- package/es/components/Switch/_toggleSize/base_6i0904.css +1 -0
- package/es/components/Switch/_view/base.js +1 -1
- package/es/components/Switch/_view/base.js.map +1 -1
- package/es/components/Switch/_view/base_yxkf3s.css +1 -0
- package/es/index.css +7 -6
- package/package.json +3 -2
- package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.js +0 -1
- package/styled-components/cjs/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.js +1 -2
- package/styled-components/cjs/components/Dropdown/Dropdown.js +4 -2
- package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js +3 -2
- package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +5 -2
- package/styled-components/cjs/components/Select/Select.js +0 -1
- package/styled-components/cjs/components/Select/ui/Inner/ui/Item/Item.js +1 -2
- package/styled-components/cjs/components/Switch/Switch.tokens.js +1 -7
- package/styled-components/cjs/components/Switch/_toggleSize/base.js +1 -1
- package/styled-components/cjs/components/Switch/_view/base.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.config.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.js +2 -5
- package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.stories.tsx +1 -33
- package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.config.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.js +2 -5
- package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.stories.tsx +1 -33
- package/styled-components/es/components/Combobox/ComboboxNew/Combobox.js +0 -1
- package/styled-components/es/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.js +1 -2
- package/styled-components/es/components/Dropdown/Dropdown.js +4 -2
- package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.js +4 -3
- package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +5 -2
- package/styled-components/es/components/Select/Select.js +0 -1
- package/styled-components/es/components/Select/ui/Inner/ui/Item/Item.js +1 -2
- package/styled-components/es/components/Switch/Switch.tokens.js +1 -7
- package/styled-components/es/components/Switch/_toggleSize/base.js +1 -1
- package/styled-components/es/components/Switch/_view/base.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Switch/Switch.config.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Switch/Switch.js +1 -4
- package/styled-components/es/examples/plasma_b2c/components/Switch/Switch.stories.tsx +1 -33
- package/styled-components/es/examples/plasma_web/components/Switch/Switch.config.js +1 -1
- package/styled-components/es/examples/plasma_web/components/Switch/Switch.js +1 -4
- package/styled-components/es/examples/plasma_web/components/Switch/Switch.stories.tsx +1 -33
- package/types/components/Combobox/ComboboxNew/Combobox.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts +1 -2
- package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.d.ts.map +1 -1
- package/types/components/Dropdown/Dropdown.d.ts +50 -2
- package/types/components/Dropdown/Dropdown.d.ts.map +1 -1
- package/types/components/Dropdown/Dropdown.types.d.ts +11 -6
- package/types/components/Dropdown/Dropdown.types.d.ts.map +1 -1
- package/types/components/Dropdown/index.d.ts +1 -0
- package/types/components/Dropdown/index.d.ts.map +1 -1
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.d.ts.map +1 -1
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.styles.d.ts +1 -0
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.styles.d.ts.map +1 -1
- package/types/components/Select/Select.d.ts.map +1 -1
- package/types/components/Select/Select.types.d.ts +1 -2
- package/types/components/Select/Select.types.d.ts.map +1 -1
- package/types/components/Select/ui/Inner/ui/Item/Item.d.ts.map +1 -1
- package/types/components/Switch/Switch.tokens.d.ts +1 -7
- package/types/components/Switch/Switch.tokens.d.ts.map +1 -1
- package/types/components/Switch/_toggleSize/base.d.ts.map +1 -1
- package/types/components/Switch/_view/base.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Dropdown/Dropdown.d.ts +25 -1
- package/types/examples/plasma_b2c/components/Dropdown/Dropdown.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Switch/Switch.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Switch/Switch.d.ts +0 -20
- package/types/examples/plasma_b2c/components/Switch/Switch.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Dropdown/Dropdown.d.ts +25 -1
- package/types/examples/plasma_web/components/Dropdown/Dropdown.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Switch/Switch.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Switch/Switch.d.ts +0 -20
- package/types/examples/plasma_web/components/Switch/Switch.d.ts.map +1 -1
- package/cjs/components/Switch/_toggleSize/base_38anc0.css +0 -1
- package/cjs/components/Switch/_view/base_15atbyp.css +0 -1
- package/emotion/cjs/examples/plasma_b2c/components/Switch/Switch.outline.config.js +0 -37
- package/emotion/cjs/examples/plasma_web/components/Switch/Switch.outline.config.js +0 -37
- package/emotion/es/examples/plasma_b2c/components/Switch/Switch.outline.config.js +0 -31
- package/emotion/es/examples/plasma_web/components/Switch/Switch.outline.config.js +0 -31
- package/es/components/Switch/_toggleSize/base_38anc0.css +0 -1
- package/es/components/Switch/_view/base_15atbyp.css +0 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.outline.config.js +0 -37
- package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.outline.config.js +0 -37
- package/styled-components/es/examples/plasma_b2c/components/Switch/Switch.outline.config.js +0 -31
- package/styled-components/es/examples/plasma_web/components/Switch/Switch.outline.config.js +0 -31
- package/types/examples/plasma_b2c/components/Switch/Switch.outline.config.d.ts +0 -30
- package/types/examples/plasma_b2c/components/Switch/Switch.outline.config.d.ts.map +0 -1
- package/types/examples/plasma_web/components/Switch/Switch.outline.config.d.ts +0 -30
- package/types/examples/plasma_web/components/Switch/Switch.outline.config.d.ts.map +0 -1
package/es/index.css
CHANGED
@@ -215,9 +215,9 @@
|
|
215
215
|
|
216
216
|
.base_1tcl212_bm1v11h__e2c572a3 .base_1tcl212_s10fscgc__e2c572a3{font-family:var(--plasma-switch-font-family);font-style:var(--plasma-switch-font-style);font-weight:var(--plasma-switch-font-weight);-webkit-letter-spacing:var(--plasma-switch-letter-spacing);-moz-letter-spacing:var(--plasma-switch-letter-spacing);-ms-letter-spacing:var(--plasma-switch-letter-spacing);letter-spacing:var(--plasma-switch-letter-spacing);line-height:var(--plasma-switch-line-height);font-size:var(--plasma-switch-font-size);}.base_1tcl212_bm1v11h__e2c572a3 .base_1tcl212_sdjnckq__e2c572a3{font-family:var(--plasma-switch-description-font-family);font-style:var(--plasma-switch-description-font-style);font-weight:var(--plasma-switch-description-font-weight);-webkit-letter-spacing:var(--plasma-switch-description-letter-spacing);-moz-letter-spacing:var(--plasma-switch-description-letter-spacing);-ms-letter-spacing:var(--plasma-switch-description-letter-spacing);letter-spacing:var(--plasma-switch-description-letter-spacing);line-height:var(--plasma-switch-description-line-height);font-size:var(--plasma-switch-description-font-size);}.base_1tcl212_bm1v11h__e2c572a3 .base_1tcl212_s1ilr5eq__e2c572a3{margin:var(--plasma_private-switch__label-offset,0);}
|
217
217
|
|
218
|
-
.
|
218
|
+
.base_6i0904_b1wld3h3__fa866566 .base_6i0904_s2cs3kf__fa866566{-webkit-flex:0 0 var(--plasma-switch__track-width);-ms-flex:0 0 var(--plasma-switch__track-width);flex:0 0 var(--plasma-switch__track-width);width:var(--plasma-switch__track-width);height:var(--plasma-switch__track-height);border-radius:var(--plasma-switch__track-border-radius);}.base_6i0904_b1wld3h3__fa866566 .base_6i0904_s2cs3kf__fa866566::after{width:var(--plasma-switch__thumb-size);height:var(--plasma-switch__thumb-size);border-radius:var(--plasma-switch__thumb-border-radius);margin:auto var(--plasma-switch__thumb-offset);}.base_6i0904_b1wld3h3__fa866566:active:not([disabled]) .base_6i0904_s2cs3kf__fa866566::after{width:calc(var(--plasma-switch__thumb-size) * var(--plasma-switch__thumb-scale,1));}
|
219
219
|
|
220
|
-
.
|
220
|
+
.base_yxkf3s_b1g0jmh3__d59e59a0 .base_yxkf3s_s2cs3kf__d59e59a0{background-color:var(--plasma-switch__track_checked_false-bg-color);}.base_yxkf3s_b1g0jmh3__d59e59a0 .base_yxkf3s_ssthlx1__d59e59a0:not([disabled]) ~ .base_yxkf3s_s2cs3kf__d59e59a0:hover{background-color:var(--plasma-switch__track_checked_false_hovered_true-bg-color,var(--plasma-switch__track_checked_false-bg-color));}.base_yxkf3s_b1g0jmh3__d59e59a0 .base_yxkf3s_ssthlx1__d59e59a0:checked ~ .base_yxkf3s_s2cs3kf__d59e59a0{background-color:var(--plasma-switch__track_checked_true-bg-color);}.base_yxkf3s_b1g0jmh3__d59e59a0 .base_yxkf3s_ssthlx1__d59e59a0:checked:not([disabled]) ~ .base_yxkf3s_s2cs3kf__d59e59a0:hover{background-color:var(--plasma-switch__track_checked_true_hovered_true-bg-color,var(--plasma-switch__track_checked_true-bg-color));}.base_yxkf3s_b1g0jmh3__d59e59a0 .base_yxkf3s_s2cs3kf__d59e59a0::after{background-color:var(--plasma-switch__thumb-bg-color);box-shadow:var(--plasma-switch__thumb-box-shadow);}.base_yxkf3s_b1g0jmh3__d59e59a0 .base_yxkf3s_ssthlx1__d59e59a0:checked ~ .base_yxkf3s_s2cs3kf__d59e59a0::after{box-shadow:var(--plasma-switch__thumb-box-shadow_checked_true,var(--plasma-switch__thumb-box-shadow));}.base_yxkf3s_b1g0jmh3__d59e59a0 .base_yxkf3s_s1ilr5eq__d59e59a0{color:var(--plasma-switch__label-color);}.base_yxkf3s_b1g0jmh3__d59e59a0 .base_yxkf3s_sdjnckq__d59e59a0{color:var(--plasma-switch__description-color);}
|
221
221
|
|
222
222
|
.base_sz3n0x_bvwxj2r__a36bed54 .base_sz3n0x_s2cs3kf__a36bed54::before{content:'';position:absolute;inset:-0.125rem;display:block;box-sizing:content-box;border-radius:calc(0.125rem + var(--plasma-switch__track-border-radius));border:0.125rem solid transparent;pointer-events:none;-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;}.base_sz3n0x_bvwxj2r__a36bed54 .base_sz3n0x_ssthlx1__a36bed54.base_sz3n0x_focusVisible__a36bed54 ~ .base_sz3n0x_s2cs3kf__a36bed54::before{box-shadow:0 0 0 0.125rem var(--plasma-switch__track-focus-color);}
|
223
223
|
|
@@ -392,11 +392,12 @@
|
|
392
392
|
|
393
393
|
.DropdownHeader_styles_196gwgm_s133b1g2__3510806e{background:var(--plasma-dropdown-header-background);font-family:var(--plasma-dropdown-header-font-family);font-size:var(--plasma-dropdown-header-font-size);font-style:var(--plasma-dropdown-header-font-style);font-weight:var(--plasma-dropdown-header-letter-spacing);-webkit-letter-spacing:var(--plasma-dropdown-header-line-height);-moz-letter-spacing:var(--plasma-dropdown-header-line-height);-ms-letter-spacing:var(--plasma-dropdown-header-line-height);letter-spacing:var(--plasma-dropdown-header-line-height);line-height:var(--plasma-dropdown-header-font-weight);width:var(--plasma-dropdown-header-width);height:var(--plasma-dropdown-header-height);padding:var(--plasma-dropdown-header-padding-top) var(--plasma-dropdown-header-padding-right) var(--plasma-dropdown-header-padding-bottom) var(--plasma-dropdown-header-padding-left);margin:var(--plasma-dropdown-header-margin-top) var(--plasma-dropdown-header-margin-right) var(--plasma-dropdown-header-margin-bottom) var(--plasma-dropdown-header-margin-left);}
|
394
394
|
|
395
|
-
.
|
395
|
+
.DropdownItem_styles_14yih1y_c1gkzlls__bf539568{--plasma-cell-title-color:var(--text-primary);--plasma-cell-background-color:var(--plasma-colors-transparent);--plasma-cell-padding:var(--plasma-dropdown-cell-padding);--plasma-cell-padding-left-content:var(--plasma-dropdown-cell-padding-left-content);--plasma-cell-padding-content:var(--plasma-dropdown-cell-padding-content);--plasma-cell-padding-right-content:var(--plasma-dropdown-cell-padding-right-content);--plasma-cell-textbox-gap:var(--plasma-dropdown-cell-textbox-gap);--plasma-cell-gap:var(--plasma-dropdown-cell-gap);--plasma-cell-title-font-family:var(--plasma-dropdown-cell-title-font-family);--plasma-cell-title-font-size:var(--plasma-dropdown-cell-title-font-size);--plasma-cell-title-font-style:var(--plasma-dropdown-cell-title-font-style);--plasma-cell-title-font-weight:var(--plasma-dropdown-cell-title-font-weight);--plasma-cell-title-letter-spacing:var(--plasma-dropdown-cell-title-letter-spacing);--plasma-cell-title-line-height:var(--plasma-dropdown-cell-title-line-height);width:100%;}
|
396
396
|
|
397
|
-
.
|
398
|
-
.
|
399
|
-
.
|
397
|
+
.DropdownItem_styles_14yih1y_d1m97l2m__bf539568{line-height:0;color:var(--text-secondary);}
|
398
|
+
.DropdownItem_styles_14yih1y_doib72h__bf539568{height:1px;margin-top:var(--doib72h-0);margin-right:var(--plasma-dropdown-divider-margin-right);margin-bottom:var(--doib72h-1);margin-left:var(--plasma-dropdown-divider-margin-left);background:var(--plasma-dropdown-divider-color);}
|
399
|
+
.DropdownItem_styles_14yih1y_w6l2f0g__bf539568{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:var(--plasma-dropdown-item-height);margin:0;box-sizing:content-box;padding:var(--w6l2f0g-0);font-family:var(--plasma-dropdown-item-font-family);font-size:var(--plasma-dropdown-item-font-size);font-style:var(--plasma-dropdown-item-font-style);font-weight:var(--plasma-dropdown-item-letter-spacing);-webkit-letter-spacing:var(--plasma-dropdown-item-line-height);-moz-letter-spacing:var(--plasma-dropdown-item-line-height);-ms-letter-spacing:var(--plasma-dropdown-item-line-height);letter-spacing:var(--plasma-dropdown-item-line-height);line-height:var(--plasma-dropdown-item-font-weight);background-color:var(--plasma-colors-transparent);border-radius:var(--plasma-dropdown-border-radius);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-right:0.125rem solid transparent;border-left:0.125rem solid transparent;background-clip:padding-box;position:relative;}.DropdownItem_styles_14yih1y_w6l2f0g__bf539568:hover:not(.DropdownItem_styles_14yih1y_dropdownItemIsDisabled__bf539568){cursor:pointer;background-color:var(--plasma-dropdown-item-background-hover);}.DropdownItem_styles_14yih1y_w6l2f0g__bf539568.DropdownItem_styles_14yih1y_dropdownItemIsActive__bf539568{background-color:var(--plasma-dropdown-item-background-hover);}.DropdownItem_styles_14yih1y_w6l2f0g__bf539568.DropdownItem_styles_14yih1y_dropdownItemIsDisabled__bf539568{opacity:0.4;cursor:not-allowed;}.DropdownItem_styles_14yih1y_w6l2f0g__bf539568:focus{outline:none;}.DropdownItem_styles_14yih1y_w6l2f0g__bf539568::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;display:block;box-sizing:content-box;border:0.0625rem solid transparent;border-radius:var(--plasma-dropdown-item-border-radius);-webkit-transition:none;transition:none;pointer-events:none;}.DropdownItem_styles_14yih1y_w6l2f0g__bf539568.DropdownItem_styles_14yih1y_dropdownItemIsFocused__bf539568:before{outline:none;box-shadow:0 0 0 0.0625rem var(--surface-accent);}
|
400
|
+
.DropdownItem_styles_14yih1y_r1jav4ek__bf539568{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-flex:1;-ms-flex:1;flex:1;}
|
400
401
|
|
401
402
|
.DropdownItem_styles_1lyg81y_s1iqs5in__b17ea060{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;min-width:var(--plasma-dropdown-item-content-left-width);color:var(--plasma-dropdown-item-content-left-color);}
|
402
403
|
.DropdownItem_styles_1lyg81y_sfg3dyd__b17ea060{margin-left:auto;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;min-width:var(--plasma-dropdown-item-content-right-width);color:var(--plasma-dropdown-item-content-right-color);}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@salutejs/plasma-new-hope",
|
3
|
-
"version": "0.194.0-canary.
|
3
|
+
"version": "0.194.0-canary.1562.11851866538.0",
|
4
4
|
"description": "Salute Design System blueprint",
|
5
5
|
"main": "cjs/index.js",
|
6
6
|
"module": "es/index.js",
|
@@ -98,6 +98,7 @@
|
|
98
98
|
"babel-loader": "8.2.2",
|
99
99
|
"babel-plugin-annotate-pure-calls": "0.4.0",
|
100
100
|
"babel-plugin-styled-components": "1.13.2",
|
101
|
+
"csstype": "3.1.3",
|
101
102
|
"default-browser-id": "2.0.0",
|
102
103
|
"react": "18.2.0",
|
103
104
|
"react-dom": "18.2.0",
|
@@ -128,5 +129,5 @@
|
|
128
129
|
"sideEffects": [
|
129
130
|
"*.css"
|
130
131
|
],
|
131
|
-
"gitHead": "
|
132
|
+
"gitHead": "31a26f7b2e4fdc07bee9b216f1d201b67be3a85b"
|
132
133
|
}
|
@@ -357,7 +357,6 @@ var comboboxRoot = exports.comboboxRoot = function comboboxRoot(Root) {
|
|
357
357
|
handleItemClick: handleItemClick,
|
358
358
|
variant: variant,
|
359
359
|
renderItem: renderItem,
|
360
|
-
valueToItemMap: valueToItemMap,
|
361
360
|
treeId: treeId
|
362
361
|
}
|
363
362
|
}, /*#__PURE__*/_react["default"].createElement(_FloatingPopover.FloatingPopover, {
|
@@ -40,7 +40,6 @@ var Item = exports.Item = function Item(_ref) {
|
|
40
40
|
handleItemClick = _useContext.handleItemClick,
|
41
41
|
variant = _useContext.variant,
|
42
42
|
renderItem = _useContext.renderItem,
|
43
|
-
valueToItemMap = _useContext.valueToItemMap,
|
44
43
|
treeId = _useContext.treeId;
|
45
44
|
var disabledClassName = disabled ? _Combobox.classes.dropdownItemIsDisabled : undefined;
|
46
45
|
var focusedClass = currentLevel === focusedPath.length - 1 && index === (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[currentLevel]) ? _Combobox.classes.dropdownItemIsFocused : undefined;
|
@@ -94,7 +93,7 @@ var Item = exports.Item = function Item(_ref) {
|
|
94
93
|
}))), !multiple && checked.get(item.value) === 'done' && /*#__PURE__*/_react["default"].createElement(_Icon.IconDone, {
|
95
94
|
size: (0, _utils.sizeToIconSize)(size, variant),
|
96
95
|
color: "inherit"
|
97
|
-
})), renderItem ? /*#__PURE__*/_react["default"].createElement(_Item.StyledText, null, renderItem(
|
96
|
+
})), renderItem ? /*#__PURE__*/_react["default"].createElement(_Item.StyledText, null, renderItem(item)) : /*#__PURE__*/_react["default"].createElement(_Item.StyledWrapper, null, /*#__PURE__*/_react["default"].createElement(_Item.StyledCell, {
|
98
97
|
view: "default",
|
99
98
|
size: "l",
|
100
99
|
contentLeft: contentLeft,
|
@@ -20,7 +20,7 @@ var _Dropdown2 = /*#__PURE__*/require("./Dropdown.tokens");
|
|
20
20
|
var _useKeyboardNavigation = /*#__PURE__*/require("./hooks/useKeyboardNavigation");
|
21
21
|
var _useHashMaps3 = /*#__PURE__*/require("./hooks/useHashMaps");
|
22
22
|
var _FloatingPopover = /*#__PURE__*/require("./FloatingPopover");
|
23
|
-
var _excluded = ["items", "children", "placement", "offset", "closeOnOverlayClick", "onToggle", "size", "view", "itemRole", "className", "listWidth", "listHeight", "listOverflow", "closeOnSelect", "onHover", "onItemSelect", "onItemClick", "trigger", "variant", "hasArrow", "alwaysOpened", "portal"];
|
23
|
+
var _excluded = ["items", "children", "placement", "offset", "closeOnOverlayClick", "onToggle", "size", "view", "itemRole", "className", "listWidth", "listHeight", "listOverflow", "closeOnSelect", "onHover", "onItemSelect", "onItemClick", "trigger", "variant", "hasArrow", "alwaysOpened", "portal", "renderItem"];
|
24
24
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
25
25
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
26
26
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
@@ -69,6 +69,7 @@ var dropdownRoot = exports.dropdownRoot = function dropdownRoot(Root) {
|
|
69
69
|
_ref$alwaysOpened = _ref.alwaysOpened,
|
70
70
|
alwaysOpened = _ref$alwaysOpened === void 0 ? false : _ref$alwaysOpened,
|
71
71
|
portal = _ref.portal,
|
72
|
+
renderItem = _ref.renderItem,
|
72
73
|
rest = _objectWithoutProperties(_ref, _excluded);
|
73
74
|
var _useReducer = (0, _react.useReducer)(_pathReducer.pathReducer, []),
|
74
75
|
_useReducer2 = _slicedToArray(_useReducer, 2),
|
@@ -144,7 +145,8 @@ var dropdownRoot = exports.dropdownRoot = function dropdownRoot(Root) {
|
|
144
145
|
onItemClick: onItemClick,
|
145
146
|
onItemSelect: onItemSelect,
|
146
147
|
hasArrow: hasArrow,
|
147
|
-
treeId: treeId
|
148
|
+
treeId: treeId,
|
149
|
+
renderItem: renderItem
|
148
150
|
}
|
149
151
|
}, /*#__PURE__*/_react["default"].createElement(_FloatingPopover.FloatingPopover, {
|
150
152
|
ref: floatingPopoverRef,
|
@@ -43,7 +43,8 @@ var DropdownItem = exports.DropdownItem = function DropdownItem(_ref) {
|
|
43
43
|
onItemSelect = _useContext.onItemSelect,
|
44
44
|
onItemClick = _useContext.onItemClick,
|
45
45
|
hasArrow = _useContext.hasArrow,
|
46
|
-
treeId = _useContext.treeId
|
46
|
+
treeId = _useContext.treeId,
|
47
|
+
renderItem = _useContext.renderItem;
|
47
48
|
var hasDescendants = Boolean(item.items);
|
48
49
|
var disclosureIconSize = size === 'xs' ? 'xs' : 's';
|
49
50
|
var isDisabledClassName = disabled || isDisabled ? _Dropdown.classes.dropdownItemIsDisabled : undefined;
|
@@ -94,7 +95,7 @@ var DropdownItem = exports.DropdownItem = function DropdownItem(_ref) {
|
|
94
95
|
"aria-expanded": ariaExpanded,
|
95
96
|
"aria-level": ariaLevel,
|
96
97
|
"aria-label": ariaLabel
|
97
|
-
}, /*#__PURE__*/_react["default"].createElement(_DropdownItem.CellWrapper, null, /*#__PURE__*/_react["default"].createElement(_DropdownItem.StyledCell, {
|
98
|
+
}, renderItem ? /*#__PURE__*/_react["default"].createElement(_DropdownItem.RenderItemWrapper, null, renderItem(item)) : /*#__PURE__*/_react["default"].createElement(_DropdownItem.CellWrapper, null, /*#__PURE__*/_react["default"].createElement(_DropdownItem.StyledCell, {
|
98
99
|
contentLeft: contentLeft,
|
99
100
|
contentRight: contentRight,
|
100
101
|
alignContentLeft: "center",
|
@@ -3,7 +3,7 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.Wrapper = exports.StyledCell = exports.Divider = exports.DisclosureIconWrapper = exports.CellWrapper = void 0;
|
6
|
+
exports.Wrapper = exports.StyledCell = exports.RenderItemWrapper = exports.Divider = exports.DisclosureIconWrapper = exports.CellWrapper = void 0;
|
7
7
|
var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
|
8
8
|
var _Dropdown = /*#__PURE__*/require("../../Dropdown.tokens");
|
9
9
|
var _mixins = /*#__PURE__*/require("../../../../mixins");
|
@@ -42,4 +42,7 @@ var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].li.wit
|
|
42
42
|
outlineRadius: /*#__PURE__*/"var(".concat(_Dropdown.tokens.itemBorderRadius, ")"),
|
43
43
|
hasTransition: false,
|
44
44
|
customFocusRules: /*#__PURE__*/"\n &.".concat(_Dropdown.classes.dropdownItemIsFocused, ":before {\n outline: none;\n box-shadow: 0 0 0 0.0625rem var(").concat(_Dropdown.constants.focusColor, ");\n }\n ")
|
45
|
-
}));
|
45
|
+
}));
|
46
|
+
var RenderItemWrapper = exports.RenderItemWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
47
|
+
componentId: "plasma-new-hope__sc-hs0ek1-5"
|
48
|
+
})(["", ";flex:1;"], /*#__PURE__*/(0, _mixins.applyEllipsis)());
|
@@ -281,7 +281,6 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
|
|
281
281
|
handleItemClick: handleItemClick,
|
282
282
|
variant: variant,
|
283
283
|
renderItem: renderItem,
|
284
|
-
valueToItemMap: valueToItemMap,
|
285
284
|
treeId: treeId
|
286
285
|
}
|
287
286
|
}, /*#__PURE__*/_react["default"].createElement(_FloatingPopover.FloatingPopover, {
|
@@ -41,7 +41,6 @@ var Item = exports.Item = function Item(_ref) {
|
|
41
41
|
handleItemClick = _useContext.handleItemClick,
|
42
42
|
variant = _useContext.variant,
|
43
43
|
renderItem = _useContext.renderItem,
|
44
|
-
valueToItemMap = _useContext.valueToItemMap,
|
45
44
|
treeId = _useContext.treeId;
|
46
45
|
var itemDisabled = Boolean(disabled || isDisabled);
|
47
46
|
var disabledClassName = itemDisabled ? _Select.classes.dropdownItemIsDisabled : undefined;
|
@@ -96,7 +95,7 @@ var Item = exports.Item = function Item(_ref) {
|
|
96
95
|
}))), !multiselect && checked.get(item.value) === 'done' && /*#__PURE__*/_react["default"].createElement(_Icon.IconDone, {
|
97
96
|
size: (0, _utils.sizeToIconSize)(size, variant),
|
98
97
|
color: "inherit"
|
99
|
-
})), renderItem ? /*#__PURE__*/_react["default"].createElement(_Item.StyledText, null, renderItem(
|
98
|
+
})), renderItem ? /*#__PURE__*/_react["default"].createElement(_Item.StyledText, null, renderItem(item)) : /*#__PURE__*/_react["default"].createElement(_Item.StyledWrapper, null, /*#__PURE__*/_react["default"].createElement(_Item.StyledCell, {
|
100
99
|
contentLeft: contentLeft,
|
101
100
|
contentRight: contentRight
|
102
101
|
// TODO: #1548
|
@@ -29,11 +29,6 @@ var tokens = exports.tokens = {
|
|
29
29
|
verticalGap: '--plasma-switch-vertical-gap',
|
30
30
|
trackWidth: '--plasma-switch__track-width',
|
31
31
|
trackHeight: '--plasma-switch__track-height',
|
32
|
-
trackBorderWidth: '--plasma-switch__track-border',
|
33
|
-
trackBorderColorOn: '--plasma-switch__track-checked_true-border-color',
|
34
|
-
trackBorderColorOnHover: '--plasma-switch__track-checked_true_hovered_true-border-color',
|
35
|
-
trackBorderColorOff: '--plasma-switch__track-checked_false-border-color',
|
36
|
-
trackBorderColorOffHover: '--plasma-switch__track-checked_false_hovered_true-border-color',
|
37
32
|
trackBorderRadius: '--plasma-switch__track-border-radius',
|
38
33
|
// NOTE: could be intersection with checked
|
39
34
|
trackBackgroundColorOn: '--plasma-switch__track_checked_true-bg-color',
|
@@ -45,8 +40,7 @@ var tokens = exports.tokens = {
|
|
45
40
|
thumbOffset: '--plasma-switch__thumb-offset',
|
46
41
|
thumbBorderRadius: '--plasma-switch__thumb-border-radius',
|
47
42
|
thumbPressScale: '--plasma-switch__thumb-scale',
|
48
|
-
|
49
|
-
thumbBackgroundColorOff: '--plasma-switch__thumb-checked_false-bg-color',
|
43
|
+
thumbBackgroundColor: '--plasma-switch__thumb-bg-color',
|
50
44
|
thumbBoxShadow: '--plasma-switch__thumb-box-shadow',
|
51
45
|
thumbBoxShadowOn: '--plasma-switch__thumb-box-shadow_checked_true',
|
52
46
|
labelOffsetPrivate: '--plasma_private-switch__label-offset'
|
@@ -7,4 +7,4 @@ exports.base = void 0;
|
|
7
7
|
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
8
|
var _Switch = /*#__PURE__*/require("../Switch.tokens");
|
9
9
|
var _Switch2 = /*#__PURE__*/require("../Switch.styles");
|
10
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{
|
10
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{flex:0 0 var(", ");width:var(", ");height:var(", ");border-radius:var(", ");&::after{width:var(", ");height:var(", ");border-radius:var(", ");margin:auto var(", ");}}:active:not([disabled]) ", "::after{width:calc(var(", ") * var(", ",1));}"], _Switch2.StyledTrigger, _Switch.tokens.trackWidth, _Switch.tokens.trackWidth, _Switch.tokens.trackHeight, _Switch.tokens.trackBorderRadius, _Switch.tokens.thumbSize, _Switch.tokens.thumbSize, _Switch.tokens.thumbBorderRadius, _Switch.tokens.thumbOffset, _Switch2.StyledTrigger, _Switch.tokens.thumbSize, _Switch.tokens.thumbPressScale);
|
@@ -7,4 +7,4 @@ exports.base = void 0;
|
|
7
7
|
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
8
|
var _Switch = /*#__PURE__*/require("../Switch.tokens");
|
9
9
|
var _Switch2 = /*#__PURE__*/require("../Switch.styles");
|
10
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{background-color:var(", ");
|
10
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{background-color:var(", ");}", ":not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", ":checked ~ ", "{background-color:var(", ");}", ":checked:not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", "::after{background-color:var(", ");box-shadow:var(", ");}", ":checked ~ ", "::after{box-shadow:var(", ",var(", "));}", "{color:var(", ");}", "{color:var(", ");}"], _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOff, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOffHover, _Switch.tokens.trackBackgroundColorOff, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOn, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOnHover, _Switch.tokens.trackBackgroundColorOn, _Switch2.StyledTrigger, _Switch.tokens.thumbBackgroundColor, _Switch.tokens.thumbBoxShadow, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.thumbBoxShadowOn, _Switch.tokens.thumbBoxShadow, _Switch2.StyledLabel, _Switch.tokens.labelColor, _Switch2.StyledDescription, _Switch.tokens.descriptionColor);
|
@@ -25,7 +25,7 @@ var config = exports.config = {
|
|
25
25
|
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":1rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale)
|
26
26
|
},
|
27
27
|
view: {
|
28
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":
|
28
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.labelColor, _Switch.switchTokens.descriptionColor, _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOnHover, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.trackBackgroundColorOffHover, _Switch.switchTokens.thumbBackgroundColor, _Switch.switchTokens.thumbBoxShadow)
|
29
29
|
},
|
30
30
|
disabled: {
|
31
31
|
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Switch.switchTokens.disabledOpacity)
|
@@ -3,12 +3,9 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.
|
6
|
+
exports.Switch = void 0;
|
7
7
|
var _Switch = /*#__PURE__*/require("../../../../components/Switch");
|
8
8
|
var _engines = /*#__PURE__*/require("../../../../engines");
|
9
9
|
var _Switch2 = /*#__PURE__*/require("./Switch.config");
|
10
|
-
var _SwitchOutline = /*#__PURE__*/require("./Switch.outline.config");
|
11
10
|
var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Switch.switchConfig, _Switch2.config);
|
12
|
-
var Switch = exports.Switch = /*#__PURE__*/(0, _engines.component)(mergedConfig);
|
13
|
-
var mergedOutlineConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Switch.switchConfig, _SwitchOutline.config);
|
14
|
-
var SwitchOutline = exports.SwitchOutline = /*#__PURE__*/(0, _engines.component)(mergedOutlineConfig);
|
11
|
+
var Switch = exports.Switch = /*#__PURE__*/(0, _engines.component)(mergedConfig);
|
@@ -9,7 +9,7 @@ import { mergeConfig } from '../../../../engines';
|
|
9
9
|
import { WithTheme, argTypesFromConfig } from '../../../_helpers';
|
10
10
|
|
11
11
|
import { config } from './Switch.config';
|
12
|
-
import { Switch
|
12
|
+
import { Switch } from './Switch';
|
13
13
|
|
14
14
|
type SwitchProps = ComponentProps<typeof Switch>;
|
15
15
|
|
@@ -72,35 +72,3 @@ export const Default: StoryObj<SwitchProps> = {
|
|
72
72
|
},
|
73
73
|
render: (args) => <StoryDefault {...args} />,
|
74
74
|
};
|
75
|
-
|
76
|
-
const StoryOutline = (args: SwitchProps) => {
|
77
|
-
const value = 'yes';
|
78
|
-
const name = 'agree';
|
79
|
-
const [checked, setChecked] = useState(true);
|
80
|
-
|
81
|
-
return (
|
82
|
-
<StyledWrapper>
|
83
|
-
<SwitchOutline
|
84
|
-
value={value}
|
85
|
-
name={name}
|
86
|
-
checked={checked}
|
87
|
-
onChange={(event) => {
|
88
|
-
setChecked(event.target.checked);
|
89
|
-
onChange(event);
|
90
|
-
}}
|
91
|
-
onFocus={onFocus}
|
92
|
-
onBlur={onBlur}
|
93
|
-
{...args}
|
94
|
-
/>
|
95
|
-
</StyledWrapper>
|
96
|
-
);
|
97
|
-
};
|
98
|
-
|
99
|
-
export const Outline: StoryObj<SwitchProps> = {
|
100
|
-
args: {
|
101
|
-
size: 'm',
|
102
|
-
toggleSize: 'l',
|
103
|
-
disabled: false,
|
104
|
-
},
|
105
|
-
render: (args) => <StoryOutline {...args} />,
|
106
|
-
};
|
@@ -25,7 +25,7 @@ var config = exports.config = {
|
|
25
25
|
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":1rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale)
|
26
26
|
},
|
27
27
|
view: {
|
28
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":
|
28
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.labelColor, _Switch.switchTokens.descriptionColor, _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOnHover, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.trackBackgroundColorOffHover, _Switch.switchTokens.thumbBackgroundColor, _Switch.switchTokens.thumbBoxShadow)
|
29
29
|
},
|
30
30
|
disabled: {
|
31
31
|
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Switch.switchTokens.disabledOpacity)
|
@@ -3,12 +3,9 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.
|
6
|
+
exports.Switch = void 0;
|
7
7
|
var _Switch = /*#__PURE__*/require("../../../../components/Switch");
|
8
8
|
var _engines = /*#__PURE__*/require("../../../../engines");
|
9
9
|
var _Switch2 = /*#__PURE__*/require("./Switch.config");
|
10
|
-
var _SwitchOutline = /*#__PURE__*/require("./Switch.outline.config");
|
11
10
|
var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Switch.switchConfig, _Switch2.config);
|
12
|
-
var Switch = exports.Switch = /*#__PURE__*/(0, _engines.component)(mergedConfig);
|
13
|
-
var mergedOutlineConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Switch.switchConfig, _SwitchOutline.config);
|
14
|
-
var SwitchOutline = exports.SwitchOutline = /*#__PURE__*/(0, _engines.component)(mergedOutlineConfig);
|
11
|
+
var Switch = exports.Switch = /*#__PURE__*/(0, _engines.component)(mergedConfig);
|
@@ -9,7 +9,7 @@ import { mergeConfig } from '../../../../engines';
|
|
9
9
|
import { WithTheme, argTypesFromConfig } from '../../../_helpers';
|
10
10
|
|
11
11
|
import { config } from './Switch.config';
|
12
|
-
import { Switch
|
12
|
+
import { Switch } from './Switch';
|
13
13
|
|
14
14
|
type SwitchProps = ComponentProps<typeof Switch>;
|
15
15
|
|
@@ -72,35 +72,3 @@ export const Default: StoryObj<SwitchProps> = {
|
|
72
72
|
},
|
73
73
|
render: (args) => <StoryDefault {...args} />,
|
74
74
|
};
|
75
|
-
|
76
|
-
const StoryOutline = (args: SwitchProps) => {
|
77
|
-
const value = 'yes';
|
78
|
-
const name = 'agree';
|
79
|
-
const [checked, setChecked] = useState(true);
|
80
|
-
|
81
|
-
return (
|
82
|
-
<StyledWrapper>
|
83
|
-
<SwitchOutline
|
84
|
-
value={value}
|
85
|
-
name={name}
|
86
|
-
checked={checked}
|
87
|
-
onChange={(event) => {
|
88
|
-
setChecked(event.target.checked);
|
89
|
-
onChange(event);
|
90
|
-
}}
|
91
|
-
onFocus={onFocus}
|
92
|
-
onBlur={onBlur}
|
93
|
-
{...args}
|
94
|
-
/>
|
95
|
-
</StyledWrapper>
|
96
|
-
);
|
97
|
-
};
|
98
|
-
|
99
|
-
export const Outline: StoryObj<SwitchProps> = {
|
100
|
-
args: {
|
101
|
-
size: 'm',
|
102
|
-
toggleSize: 'l',
|
103
|
-
disabled: false,
|
104
|
-
},
|
105
|
-
render: (args) => <StoryOutline {...args} />,
|
106
|
-
};
|
@@ -348,7 +348,6 @@ export var comboboxRoot = function comboboxRoot(Root) {
|
|
348
348
|
handleItemClick: handleItemClick,
|
349
349
|
variant: variant,
|
350
350
|
renderItem: renderItem,
|
351
|
-
valueToItemMap: valueToItemMap,
|
352
351
|
treeId: treeId
|
353
352
|
}
|
354
353
|
}, /*#__PURE__*/React.createElement(FloatingPopover, {
|
@@ -31,7 +31,6 @@ export var Item = function Item(_ref) {
|
|
31
31
|
handleItemClick = _useContext.handleItemClick,
|
32
32
|
variant = _useContext.variant,
|
33
33
|
renderItem = _useContext.renderItem,
|
34
|
-
valueToItemMap = _useContext.valueToItemMap,
|
35
34
|
treeId = _useContext.treeId;
|
36
35
|
var disabledClassName = disabled ? classes.dropdownItemIsDisabled : undefined;
|
37
36
|
var focusedClass = currentLevel === focusedPath.length - 1 && index === (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[currentLevel]) ? classes.dropdownItemIsFocused : undefined;
|
@@ -85,7 +84,7 @@ export var Item = function Item(_ref) {
|
|
85
84
|
}))), !multiple && checked.get(item.value) === 'done' && /*#__PURE__*/React.createElement(IconDone, {
|
86
85
|
size: sizeToIconSize(size, variant),
|
87
86
|
color: "inherit"
|
88
|
-
})), renderItem ? /*#__PURE__*/React.createElement(StyledText, null, renderItem(
|
87
|
+
})), renderItem ? /*#__PURE__*/React.createElement(StyledText, null, renderItem(item)) : /*#__PURE__*/React.createElement(StyledWrapper, null, /*#__PURE__*/React.createElement(StyledCell, {
|
89
88
|
view: "default",
|
90
89
|
size: "l",
|
91
90
|
contentLeft: contentLeft,
|
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["items", "children", "placement", "offset", "closeOnOverlayClick", "onToggle", "size", "view", "itemRole", "className", "listWidth", "listHeight", "listOverflow", "closeOnSelect", "onHover", "onItemSelect", "onItemClick", "trigger", "variant", "hasArrow", "alwaysOpened", "portal"];
|
1
|
+
var _excluded = ["items", "children", "placement", "offset", "closeOnOverlayClick", "onToggle", "size", "view", "itemRole", "className", "listWidth", "listHeight", "listOverflow", "closeOnSelect", "onHover", "onItemSelect", "onItemClick", "trigger", "variant", "hasArrow", "alwaysOpened", "portal", "renderItem"];
|
2
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
3
3
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
4
4
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
@@ -60,6 +60,7 @@ export var dropdownRoot = function dropdownRoot(Root) {
|
|
60
60
|
_ref$alwaysOpened = _ref.alwaysOpened,
|
61
61
|
alwaysOpened = _ref$alwaysOpened === void 0 ? false : _ref$alwaysOpened,
|
62
62
|
portal = _ref.portal,
|
63
|
+
renderItem = _ref.renderItem,
|
63
64
|
rest = _objectWithoutProperties(_ref, _excluded);
|
64
65
|
var _useReducer = useReducer(pathReducer, []),
|
65
66
|
_useReducer2 = _slicedToArray(_useReducer, 2),
|
@@ -135,7 +136,8 @@ export var dropdownRoot = function dropdownRoot(Root) {
|
|
135
136
|
onItemClick: onItemClick,
|
136
137
|
onItemSelect: onItemSelect,
|
137
138
|
hasArrow: hasArrow,
|
138
|
-
treeId: treeId
|
139
|
+
treeId: treeId,
|
140
|
+
renderItem: renderItem
|
139
141
|
}
|
140
142
|
}, /*#__PURE__*/React.createElement(FloatingPopover, {
|
141
143
|
ref: floatingPopoverRef,
|
@@ -4,7 +4,7 @@ import { cx } from '../../../../utils';
|
|
4
4
|
import { IconDisclosureRight } from '../../../_Icon';
|
5
5
|
import { Context } from '../../Dropdown';
|
6
6
|
import { getItemId } from '../../utils';
|
7
|
-
import { Wrapper, DisclosureIconWrapper, Divider, CellWrapper, StyledCell } from './DropdownItem.styles';
|
7
|
+
import { Wrapper, DisclosureIconWrapper, Divider, CellWrapper, StyledCell, RenderItemWrapper } from './DropdownItem.styles';
|
8
8
|
export var DropdownItem = function DropdownItem(_ref) {
|
9
9
|
var item = _ref.item,
|
10
10
|
path = _ref.path,
|
@@ -34,7 +34,8 @@ export var DropdownItem = function DropdownItem(_ref) {
|
|
34
34
|
onItemSelect = _useContext.onItemSelect,
|
35
35
|
onItemClick = _useContext.onItemClick,
|
36
36
|
hasArrow = _useContext.hasArrow,
|
37
|
-
treeId = _useContext.treeId
|
37
|
+
treeId = _useContext.treeId,
|
38
|
+
renderItem = _useContext.renderItem;
|
38
39
|
var hasDescendants = Boolean(item.items);
|
39
40
|
var disclosureIconSize = size === 'xs' ? 'xs' : 's';
|
40
41
|
var isDisabledClassName = disabled || isDisabled ? classes.dropdownItemIsDisabled : undefined;
|
@@ -85,7 +86,7 @@ export var DropdownItem = function DropdownItem(_ref) {
|
|
85
86
|
"aria-expanded": ariaExpanded,
|
86
87
|
"aria-level": ariaLevel,
|
87
88
|
"aria-label": ariaLabel
|
88
|
-
}, /*#__PURE__*/React.createElement(CellWrapper, null, /*#__PURE__*/React.createElement(StyledCell, {
|
89
|
+
}, renderItem ? /*#__PURE__*/React.createElement(RenderItemWrapper, null, renderItem(item)) : /*#__PURE__*/React.createElement(CellWrapper, null, /*#__PURE__*/React.createElement(StyledCell, {
|
89
90
|
contentLeft: contentLeft,
|
90
91
|
contentRight: contentRight,
|
91
92
|
alignContentLeft: "center",
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import styled from 'styled-components';
|
2
2
|
import { classes, tokens, constants } from '../../Dropdown.tokens';
|
3
|
-
import { addFocus } from '../../../../mixins';
|
3
|
+
import { addFocus, applyEllipsis } from '../../../../mixins';
|
4
4
|
import { cellConfig, cellTokens } from '../../../Cell';
|
5
5
|
import { component, mergeConfig } from '../../../../engines';
|
6
6
|
var mergedCellConfig = /*#__PURE__*/mergeConfig(cellConfig);
|
@@ -35,4 +35,7 @@ export var Wrapper = /*#__PURE__*/styled.li.withConfig({
|
|
35
35
|
outlineRadius: /*#__PURE__*/"var(".concat(tokens.itemBorderRadius, ")"),
|
36
36
|
hasTransition: false,
|
37
37
|
customFocusRules: /*#__PURE__*/"\n &.".concat(classes.dropdownItemIsFocused, ":before {\n outline: none;\n box-shadow: 0 0 0 0.0625rem var(").concat(constants.focusColor, ");\n }\n ")
|
38
|
-
}));
|
38
|
+
}));
|
39
|
+
export var RenderItemWrapper = /*#__PURE__*/styled.div.withConfig({
|
40
|
+
componentId: "plasma-new-hope__sc-hs0ek1-5"
|
41
|
+
})(["", ";flex:1;"], /*#__PURE__*/applyEllipsis());
|
@@ -272,7 +272,6 @@ export var selectRoot = function selectRoot(Root) {
|
|
272
272
|
handleItemClick: handleItemClick,
|
273
273
|
variant: variant,
|
274
274
|
renderItem: renderItem,
|
275
|
-
valueToItemMap: valueToItemMap,
|
276
275
|
treeId: treeId
|
277
276
|
}
|
278
277
|
}, /*#__PURE__*/React.createElement(FloatingPopover, {
|
@@ -32,7 +32,6 @@ export var Item = function Item(_ref) {
|
|
32
32
|
handleItemClick = _useContext.handleItemClick,
|
33
33
|
variant = _useContext.variant,
|
34
34
|
renderItem = _useContext.renderItem,
|
35
|
-
valueToItemMap = _useContext.valueToItemMap,
|
36
35
|
treeId = _useContext.treeId;
|
37
36
|
var itemDisabled = Boolean(disabled || isDisabled);
|
38
37
|
var disabledClassName = itemDisabled ? classes.dropdownItemIsDisabled : undefined;
|
@@ -87,7 +86,7 @@ export var Item = function Item(_ref) {
|
|
87
86
|
}))), !multiselect && checked.get(item.value) === 'done' && /*#__PURE__*/React.createElement(IconDone, {
|
88
87
|
size: sizeToIconSize(size, variant),
|
89
88
|
color: "inherit"
|
90
|
-
})), renderItem ? /*#__PURE__*/React.createElement(StyledText, null, renderItem(
|
89
|
+
})), renderItem ? /*#__PURE__*/React.createElement(StyledText, null, renderItem(item)) : /*#__PURE__*/React.createElement(StyledWrapper, null, /*#__PURE__*/React.createElement(StyledCell, {
|
91
90
|
contentLeft: contentLeft,
|
92
91
|
contentRight: contentRight
|
93
92
|
// TODO: #1548
|
@@ -23,11 +23,6 @@ export var tokens = {
|
|
23
23
|
verticalGap: '--plasma-switch-vertical-gap',
|
24
24
|
trackWidth: '--plasma-switch__track-width',
|
25
25
|
trackHeight: '--plasma-switch__track-height',
|
26
|
-
trackBorderWidth: '--plasma-switch__track-border',
|
27
|
-
trackBorderColorOn: '--plasma-switch__track-checked_true-border-color',
|
28
|
-
trackBorderColorOnHover: '--plasma-switch__track-checked_true_hovered_true-border-color',
|
29
|
-
trackBorderColorOff: '--plasma-switch__track-checked_false-border-color',
|
30
|
-
trackBorderColorOffHover: '--plasma-switch__track-checked_false_hovered_true-border-color',
|
31
26
|
trackBorderRadius: '--plasma-switch__track-border-radius',
|
32
27
|
// NOTE: could be intersection with checked
|
33
28
|
trackBackgroundColorOn: '--plasma-switch__track_checked_true-bg-color',
|
@@ -39,8 +34,7 @@ export var tokens = {
|
|
39
34
|
thumbOffset: '--plasma-switch__thumb-offset',
|
40
35
|
thumbBorderRadius: '--plasma-switch__thumb-border-radius',
|
41
36
|
thumbPressScale: '--plasma-switch__thumb-scale',
|
42
|
-
|
43
|
-
thumbBackgroundColorOff: '--plasma-switch__thumb-checked_false-bg-color',
|
37
|
+
thumbBackgroundColor: '--plasma-switch__thumb-bg-color',
|
44
38
|
thumbBoxShadow: '--plasma-switch__thumb-box-shadow',
|
45
39
|
thumbBoxShadowOn: '--plasma-switch__thumb-box-shadow_checked_true',
|
46
40
|
labelOffsetPrivate: '--plasma_private-switch__label-offset'
|
@@ -1,4 +1,4 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
2
|
import { tokens } from '../Switch.tokens';
|
3
3
|
import { StyledTrigger } from '../Switch.styles';
|
4
|
-
export var base = /*#__PURE__*/css(["", "{
|
4
|
+
export var base = /*#__PURE__*/css(["", "{flex:0 0 var(", ");width:var(", ");height:var(", ");border-radius:var(", ");&::after{width:var(", ");height:var(", ");border-radius:var(", ");margin:auto var(", ");}}:active:not([disabled]) ", "::after{width:calc(var(", ") * var(", ",1));}"], StyledTrigger, tokens.trackWidth, tokens.trackWidth, tokens.trackHeight, tokens.trackBorderRadius, tokens.thumbSize, tokens.thumbSize, tokens.thumbBorderRadius, tokens.thumbOffset, StyledTrigger, tokens.thumbSize, tokens.thumbPressScale);
|
@@ -1,4 +1,4 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
2
|
import { tokens } from '../Switch.tokens';
|
3
3
|
import { StyledTrigger, StyledInput, StyledLabel, StyledDescription } from '../Switch.styles';
|
4
|
-
export var base = /*#__PURE__*/css(["", "{background-color:var(", ");
|
4
|
+
export var base = /*#__PURE__*/css(["", "{background-color:var(", ");}", ":not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", ":checked ~ ", "{background-color:var(", ");}", ":checked:not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", "::after{background-color:var(", ");box-shadow:var(", ");}", ":checked ~ ", "::after{box-shadow:var(", ",var(", "));}", "{color:var(", ");}", "{color:var(", ");}"], StyledTrigger, tokens.trackBackgroundColorOff, StyledInput, StyledTrigger, tokens.trackBackgroundColorOffHover, tokens.trackBackgroundColorOff, StyledInput, StyledTrigger, tokens.trackBackgroundColorOn, StyledInput, StyledTrigger, tokens.trackBackgroundColorOnHover, tokens.trackBackgroundColorOn, StyledTrigger, tokens.thumbBackgroundColor, tokens.thumbBoxShadow, StyledInput, StyledTrigger, tokens.thumbBoxShadowOn, tokens.thumbBoxShadow, StyledLabel, tokens.labelColor, StyledDescription, tokens.descriptionColor);
|
@@ -19,7 +19,7 @@ export var config = {
|
|
19
19
|
s: /*#__PURE__*/css(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":1rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], switchTokens.trackWidth, switchTokens.trackHeight, switchTokens.trackBorderRadius, switchTokens.trackHeight, switchTokens.thumbSize, switchTokens.thumbBorderRadius, switchTokens.thumbSize, switchTokens.thumbOffset, switchTokens.thumbPressScale)
|
20
20
|
},
|
21
21
|
view: {
|
22
|
-
"default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":
|
22
|
+
"default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], switchTokens.labelColor, switchTokens.descriptionColor, switchTokens.trackBackgroundColorOn, switchTokens.trackBackgroundColorOnHover, switchTokens.trackBackgroundColorOff, switchTokens.trackBackgroundColorOffHover, switchTokens.thumbBackgroundColor, switchTokens.thumbBoxShadow)
|
23
23
|
},
|
24
24
|
disabled: {
|
25
25
|
"true": /*#__PURE__*/css(["", ":0.4;"], switchTokens.disabledOpacity)
|
@@ -1,8 +1,5 @@
|
|
1
1
|
import { switchConfig } from '../../../../components/Switch';
|
2
2
|
import { component, mergeConfig } from '../../../../engines';
|
3
3
|
import { config } from './Switch.config';
|
4
|
-
import { config as outlineConfig } from './Switch.outline.config';
|
5
4
|
var mergedConfig = /*#__PURE__*/mergeConfig(switchConfig, config);
|
6
|
-
export var Switch = /*#__PURE__*/component(mergedConfig);
|
7
|
-
var mergedOutlineConfig = /*#__PURE__*/mergeConfig(switchConfig, outlineConfig);
|
8
|
-
export var SwitchOutline = /*#__PURE__*/component(mergedOutlineConfig);
|
5
|
+
export var Switch = /*#__PURE__*/component(mergedConfig);
|