@wireapp/react-ui-kit 9.23.8 → 9.24.0

package/lib/Form/Switch.d.ts

@@ -12,5 +12,5 @@ export interface SwitchProps<T = HTMLInputElement> extends InputProps<T> {
     showLoading?: boolean;
     dataUieName?: string;
 }
-export declare const Switch: ({ id, checked, onToggle, showLoading, disabled, loadingColor, activatedColor, deactivatedColor, name, dataUieName, }: SwitchProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Switch: import("react").ForwardRefExoticComponent<Omit<SwitchProps<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=Switch.d.ts.map

package/lib/Form/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Form/Switch.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,UAAU,EAAC,MAAM,SAAS,CAAC;AAKnC,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,gBAAgB,CAAE,SAAQ,UAAU,CAAC,CAAC,CAAC;IACtE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,MAAM,yHAWhB,WAAW,qDAgGb,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Form/Switch.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,UAAU,EAAC,MAAM,SAAS,CAAC;AAMnC,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,gBAAgB,CAAE,SAAQ,UAAU,CAAC,CAAC,CAAC;IACtE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,MAAM,yIAmDlB,CAAC"}

package/lib/Form/Switch.js

@@ -21,66 +21,18 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
  *
  */
 const react_1 = require("react");
+const Switch_styles_1 = require("./Switch.styles");
 const Identity_1 = require("../Identity");
 const Misc_1 = require("../Misc");
-const Switch = ({ id = Math.random().toString(), checked, onToggle = () => { }, showLoading, disabled, loadingColor = Identity_1.COLOR.BLUE, activatedColor = Identity_1.COLOR.BLUE, deactivatedColor = '#d2d2d2', name, dataUieName, }) => ((0, jsx_runtime_1.jsx)("div", { css: {
-        display: 'inline-block',
-        position: 'relative',
-        textAlign: 'left',
-        userSelect: 'none',
-        verticalAlign: 'middle',
-        width: '42px',
-    }, children: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, checked: checked, disabled: disabled, name: name, onChange: event => onToggle(event.target.checked), type: "checkbox", css: { display: 'none' }, "data-uie-name": dataUieName }), (0, jsx_runtime_1.jsxs)("label", { htmlFor: id, css: {
-                    borderRadius: '20px',
-                    cursor: disabled || showLoading ? '' : 'pointer',
-                    display: 'block',
-                    margin: 0,
-                    overflow: 'hidden',
-                }, children: [(0, jsx_runtime_1.jsx)("span", { css: {
-                            ['&:after']: {
-                                content: '" "',
-                                paddingRight: '10px',
-                                textAlign: 'right',
-                            },
-                            ['&:before']: {
-                                content: '" "',
-                                paddingLeft: '10px',
-                            },
-                            ['&:before, &:after']: {
-                                backgroundColor: disabled || showLoading
-                                    ? Identity_1.COLOR.tint(checked ? activatedColor : deactivatedColor, 0.4)
-                                    : checked
-                                        ? activatedColor
-                                        : deactivatedColor,
-                                boxSizing: 'border-box',
-                                display: 'block',
-                                float: 'left',
-                                height: '25px',
-                                lineHeight: '1.5625rem',
-                                padding: 0,
-                                width: '50%',
-                            },
-                            display: 'block',
-                            marginLeft: checked ? 0 : '-100%',
-                            transition: 'margin 0.1s ease-in 0s',
-                            width: '200%',
-                        } }), showLoading ? ((0, jsx_runtime_1.jsx)(Misc_1.Loading, { size: 21, color: loadingColor, style: {
-                            display: 'block',
-                            margin: '2px',
-                            position: 'absolute',
-                        } })) : ((0, jsx_runtime_1.jsx)("span", { css: {
-                            background: Identity_1.COLOR.WHITE,
-                            borderRadius: '100%',
-                            bottom: 0,
-                            boxShadow: '0px 0px 2px -1px gray',
-                            display: 'block',
-                            height: '23px',
-                            margin: '1px',
-                            opacity: disabled ? 0.7 : undefined,
-                            position: 'absolute',
-                            right: checked ? '0px' : '17px',
-                            top: 0,
-                            transition: 'all 0.15s ease-in 0s',
-                            width: '23px',
-                        } }))] })] }) }));
-exports.Switch = Switch;
+exports.Switch = (0, react_1.forwardRef)(({ id = Math.random().toString(), checked, onToggle = () => { }, showLoading, disabled, loadingColor = Identity_1.COLOR.BLUE, activatedColor = Identity_1.COLOR.BLUE, deactivatedColor = '#d2d2d2', name, dataUieName, }, ref) => ((0, jsx_runtime_1.jsxs)("div", { css: Switch_styles_1.wrapperStyles, children: [(0, jsx_runtime_1.jsx)("input", { ref: ref, id: id, checked: checked, disabled: disabled, name: name, onChange: event => onToggle(event.target.checked), onKeyDown: event => {
+                if (event.key == 'Enter') {
+                    onToggle(!event.target.checked);
+                }
+            }, type: "checkbox", css: Switch_styles_1.inputStyles, "data-uie-name": dataUieName }), (0, jsx_runtime_1.jsxs)("label", { htmlFor: id, css: (0, Switch_styles_1.labelStyles)(disabled, showLoading), children: [(0, jsx_runtime_1.jsx)("span", { css: (0, Switch_styles_1.switchStyles)({
+                        disabled,
+                        showLoading,
+                        checked,
+                        activatedColor,
+                        deactivatedColor,
+                    }) }), showLoading ? ((0, jsx_runtime_1.jsx)(Misc_1.Loading, { size: 21, color: loadingColor, css: Switch_styles_1.loadingStyles })) : ((0, jsx_runtime_1.jsx)("span", { css: (0, Switch_styles_1.switchDotStyles)(disabled, checked) }))] })] })));
+exports.Switch.displayName = 'Switch';

package/lib/Form/Switch.styles.d.ts

@@ -0,0 +1,16 @@
+import { CSSObject } from '@emotion/react';
+export declare const wrapperStyles: CSSObject;
+export declare const inputStyles: CSSObject;
+export declare const labelStyles: (disabled: boolean, showLoading: boolean) => CSSObject;
+type SwitchStylesProps = {
+    disabled: boolean;
+    showLoading: boolean;
+    checked: boolean;
+    activatedColor: string;
+    deactivatedColor: string;
+};
+export declare const switchStyles: ({ disabled, showLoading, checked, activatedColor, deactivatedColor, }: SwitchStylesProps) => CSSObject;
+export declare const loadingStyles: CSSObject;
+export declare const switchDotStyles: (disabled: boolean, checked: boolean) => CSSObject;
+export {};
+//# sourceMappingURL=Switch.styles.d.ts.map

package/lib/Form/Switch.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.styles.d.ts","sourceRoot":"","sources":["../../src/Form/Switch.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,eAAO,MAAM,aAAa,EAAE,SAO3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,SAOzB,CAAC;AAEF,eAAO,MAAM,WAAW,aAAc,OAAO,eAAe,OAAO,KAAG,SAMpE,CAAC;AAEH,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,YAAY,0EAMtB,iBAAiB,KAAG,SA6BrB,CAAC;AAEH,eAAO,MAAM,aAAa,EAAE,SAI3B,CAAC;AAEF,eAAO,MAAM,eAAe,aAAc,OAAO,WAAW,OAAO,KAAG,SAcpE,CAAC"}

package/lib/Form/Switch.styles.js

@@ -0,0 +1,97 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2022 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.switchDotStyles = exports.loadingStyles = exports.switchStyles = exports.labelStyles = exports.inputStyles = exports.wrapperStyles = void 0;
+const Identity_1 = require("../Identity");
+exports.wrapperStyles = {
+    display: 'grid',
+    position: 'relative',
+    textAlign: 'left',
+    userSelect: 'none',
+    verticalAlign: 'middle',
+    width: '42px',
+};
+exports.inputStyles = {
+    height: '0',
+    width: '0',
+    opacity: '0',
+    '&:focus + label': {
+        outline: `1px solid ${Identity_1.COLOR_V2.BLUE_LIGHT_700}`,
+    },
+};
+const labelStyles = (disabled, showLoading) => ({
+    borderRadius: '20px',
+    cursor: disabled || showLoading ? '' : 'pointer',
+    display: 'block',
+    margin: 0,
+    overflow: 'hidden',
+});
+exports.labelStyles = labelStyles;
+const switchStyles = ({ disabled, showLoading, checked, activatedColor, deactivatedColor, }) => ({
+    '&:after': {
+        content: '" "',
+        paddingRight: '10px',
+        textAlign: 'right',
+    },
+    '&:before': {
+        content: '" "',
+        paddingLeft: '10px',
+    },
+    '&:before, &:after': {
+        backgroundColor: disabled || showLoading
+            ? Identity_1.COLOR.tint(checked ? activatedColor : deactivatedColor, 0.4)
+            : checked
+                ? activatedColor
+                : deactivatedColor,
+        boxSizing: 'border-box',
+        display: 'block',
+        float: 'left',
+        height: '25px',
+        lineHeight: '1.5625rem',
+        padding: 0,
+        width: '50%',
+    },
+    display: 'block',
+    marginLeft: checked ? 0 : '-100%',
+    transition: 'margin 0.1s ease-in 0s',
+    width: '200%',
+});
+exports.switchStyles = switchStyles;
+exports.loadingStyles = {
+    display: 'block',
+    margin: '2px',
+    position: 'absolute',
+};
+const switchDotStyles = (disabled, checked) => ({
+    background: Identity_1.COLOR.WHITE,
+    borderRadius: '100%',
+    bottom: 0,
+    boxShadow: '0px 0px 2px -1px gray',
+    display: 'block',
+    height: '23px',
+    margin: '1px',
+    opacity: disabled ? 0.7 : undefined,
+    position: 'absolute',
+    right: checked ? '0px' : '17px',
+    top: 0,
+    transition: 'all 0.15s ease-in 0s',
+    width: '23px',
+});
+exports.switchDotStyles = switchDotStyles;

package/package.json

@@ -16,8 +16,8 @@
   },
   "devDependencies": {
     "@babel/cli": "7.25.7",
-    "@babel/core": "7.25.7",
-    "@babel/preset-env": "7.25.7",
+    "@babel/core": "7.25.8",
+    "@babel/preset-env": "7.25.8",
     "@babel/preset-react": "7.25.7",
     "@babel/preset-typescript": "7.25.7",
     "@emotion/babel-preset-css-prop": "^11.10.0",
@@ -69,6 +69,6 @@
     "test:watch": "jest --watch",
     "test:update": "jest --updateSnapshot"
   },
-  "version": "9.23.8",
-  "gitHead": "bf2116ef1d5172f2f452a0db7ebf9868db0179d5"
+  "version": "9.24.0",
+  "gitHead": "a2d0cafbe2a9adcc34ae62e2f94e27ccf0709cfa"
 }