@zohodesk/components 1.4.0 → 1.4.2

package/README.md

@@ -2,6 +2,15 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
+# 1.4.2
+
+- **Switch(v1)** -  ?. operator removed
+
+
+# 1.4.1
+
+- **Switch(v1)** - labelPlacement top | bottom alignment and hover style issue fixed.
+
 # 1.4.0
 
 - **Switch(v1)** - Existing v1 Switch moved to depreacated folder and all New component Switch created with required accessibility and customization.

package/es/v1/Switch/Switch.js

@@ -8,7 +8,7 @@ import { mergeStyle } from '@zohodesk/utils'; // hooks
 
 import useSwitch from "./useSwitch"; // constants
 
-import { LABEL_PLACEMENT, OFF_LABEL_RADIUS, THUMB_RADIUS } from "./contants"; // components
+import { ALIGN_ITEMS, ITEMS_DIRECTION, OFF_LABEL_RADIUS, THUMB_RADIUS } from "./contants"; // components
 
 import Flex from '@zohodesk/layout/es/Flex/Flex';
 import Label from "../../Label/Label"; // css
@@ -78,8 +78,8 @@ const Switch = props => {
   });
   return /*#__PURE__*/React.createElement(Flex, { ...customProps_container,
     $ui_displayMode: "inline",
-    $ui_direction: LABEL_PLACEMENT[labelPlacement],
-    $ui_alignItems: "center",
+    $ui_direction: ITEMS_DIRECTION[labelPlacement],
+    $ui_alignItems: ALIGN_ITEMS[labelPlacement],
     $tagAttributes_container: { ...tagAttributes_container,
       'data-selector-id': customId
     },
@@ -93,7 +93,9 @@ const Switch = props => {
     size: labelSize,
     htmlFor: id,
     customClass: labelClass,
-    a11y: a11yAttributes_label
+    a11y: a11yAttributes_label,
+    clipped: true,
+    title: label
   }), /*#__PURE__*/React.createElement(Flex, {
     $flag_shrink: false,
     $ui_className: trackWrapperClass

package/es/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap

@@ -13,7 +13,6 @@ exports[`Switch rendering the Switch with Checked 1`] = `
       data-test-id="flex"
     >
       <input
-        aria-disabled="false"
         checked=""
         class="track"
         id="switch"
@@ -105,7 +104,6 @@ exports[`Switch rendering the defult props 1`] = `
       data-test-id="flex"
     >
       <input
-        aria-disabled="false"
         class="track"
         role="switch"
         type="checkbox"

package/es/v1/Switch/contants/index.js

@@ -10,9 +10,15 @@ export const THUMB_RADIUS = {
   large: '44.45%',
   xlarge: '45.45%'
 };
-export const LABEL_PLACEMENT = {
+export const ITEMS_DIRECTION = {
   start: 'row',
   end: 'rowReverse',
   top: 'column',
   bottom: 'columnReverse'
+};
+export const ALIGN_ITEMS = {
+  start: 'center',
+  end: 'center',
+  top: 'start',
+  bottom: 'start'
 };

package/es/v1/Switch/css/Switch_v1.module.css

@@ -50,13 +50,13 @@
 .disabled, .readonly {
     --local-switch-cursor: not-allowed;
 }
-.checked.enabled:hover {
+.checked.enabled > .trackWrapper:hover {
     --local-switch-track-background-color: var(--zdt_v1_switch_track_on_hover_bg);
 }
-.unChecked.enabled:hover {
+.unChecked.enabled > .trackWrapper:hover {
     --local-switch-track-background-color: var(--zdt_v1_switch_track_off_hover_bg);
 }
-.enabled:hover {
+.enabled > .trackWrapper:hover {
     --local-switch-offLabel-stroke: var(--zdt_v1_switch_offLabel_hover);
 }
 .trackWrapper {
@@ -96,6 +96,7 @@
     right: var(--zd_size1) ;
 }
 .label {
+    max-width: 100% ;
     cursor: var(--local-switch-cursor);
 }
 .onLabel {

package/es/v1/Switch/props/defaultProps.js

@@ -1,8 +1,5 @@
 export default {
   size: 'medium',
-  isDefaultChecked: false,
-  isDisabled: false,
-  isReadOnly: false,
   hasStateIndication: true,
   labelPlacement: 'start',
   labelSize: 'medium',

package/es/v1/Switch/useSwitch.js

@@ -19,7 +19,7 @@ const useSwitch = props => {
       setInternalChecked(!isChecked);
     }
 
-    onChange?.({
+    onChange && onChange({
       isChecked: !isChecked
     }, e);
   };

package/lib/v1/Switch/Switch.js

@@ -99,8 +99,8 @@ var Switch = function Switch(props) {
 
   return /*#__PURE__*/_react["default"].createElement(_Flex["default"], _extends({}, customProps_container, {
     $ui_displayMode: "inline",
-    $ui_direction: _contants.LABEL_PLACEMENT[labelPlacement],
-    $ui_alignItems: "center",
+    $ui_direction: _contants.ITEMS_DIRECTION[labelPlacement],
+    $ui_alignItems: _contants.ALIGN_ITEMS[labelPlacement],
     $tagAttributes_container: _objectSpread(_objectSpread({}, tagAttributes_container), {}, {
       'data-selector-id': customId
     }),
@@ -114,7 +114,9 @@ var Switch = function Switch(props) {
     size: labelSize,
     htmlFor: id,
     customClass: labelClass,
-    a11y: a11yAttributes_label
+    a11y: a11yAttributes_label,
+    clipped: true,
+    title: label
   })), /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
     $flag_shrink: false,
     $ui_className: trackWrapperClass

package/lib/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap

@@ -13,7 +13,6 @@ exports[`Switch rendering the Switch with Checked 1`] = `
       data-test-id="flex"
     >
       <input
-        aria-disabled="false"
         checked=""
         class="track"
         id="switch"
@@ -105,7 +104,6 @@ exports[`Switch rendering the defult props 1`] = `
       data-test-id="flex"
     >
       <input
-        aria-disabled="false"
         class="track"
         role="switch"
         type="checkbox"

package/lib/v1/Switch/contants/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.THUMB_RADIUS = exports.OFF_LABEL_RADIUS = exports.LABEL_PLACEMENT = void 0;
+exports.THUMB_RADIUS = exports.OFF_LABEL_RADIUS = exports.ITEMS_DIRECTION = exports.ALIGN_ITEMS = void 0;
 var OFF_LABEL_RADIUS = {
   small: '35.7%',
   medium: '37.5%',
@@ -18,10 +18,17 @@ var THUMB_RADIUS = {
   xlarge: '45.45%'
 };
 exports.THUMB_RADIUS = THUMB_RADIUS;
-var LABEL_PLACEMENT = {
+var ITEMS_DIRECTION = {
   start: 'row',
   end: 'rowReverse',
   top: 'column',
   bottom: 'columnReverse'
 };
-exports.LABEL_PLACEMENT = LABEL_PLACEMENT;
+exports.ITEMS_DIRECTION = ITEMS_DIRECTION;
+var ALIGN_ITEMS = {
+  start: 'center',
+  end: 'center',
+  top: 'start',
+  bottom: 'start'
+};
+exports.ALIGN_ITEMS = ALIGN_ITEMS;

package/lib/v1/Switch/css/Switch_v1.module.css

@@ -50,13 +50,13 @@
 .disabled, .readonly {
     --local-switch-cursor: not-allowed;
 }
-.checked.enabled:hover {
+.checked.enabled > .trackWrapper:hover {
     --local-switch-track-background-color: var(--zdt_v1_switch_track_on_hover_bg);
 }
-.unChecked.enabled:hover {
+.unChecked.enabled > .trackWrapper:hover {
     --local-switch-track-background-color: var(--zdt_v1_switch_track_off_hover_bg);
 }
-.enabled:hover {
+.enabled > .trackWrapper:hover {
     --local-switch-offLabel-stroke: var(--zdt_v1_switch_offLabel_hover);
 }
 .trackWrapper {
@@ -96,6 +96,7 @@
     right: var(--zd_size1) ;
 }
 .label {
+    max-width: 100% ;
     cursor: var(--local-switch-cursor);
 }
 .onLabel {

package/lib/v1/Switch/props/defaultProps.js

@@ -6,9 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _default = {
   size: 'medium',
-  isDefaultChecked: false,
-  isDisabled: false,
-  isReadOnly: false,
   hasStateIndication: true,
   labelPlacement: 'start',
   labelSize: 'medium',

package/lib/v1/Switch/useSwitch.js

@@ -41,7 +41,7 @@ var useSwitch = function useSwitch(props) {
       setInternalChecked(!isChecked);
     }
 
-    onChange === null || onChange === void 0 ? void 0 : onChange({
+    onChange && onChange({
       isChecked: !isChecked
     }, e);
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -42,7 +42,7 @@
     "postpublish": "node postPublish.js",
     "report": "react-cli publish:report",
     "test": "react-cli test",
-    "test-clean": "react-cli clean ./coverage && react-cli clean ./unittest",
+    "test-clean": "react-cli clean ./coverage && react-cli clean ./unittest react-cli clean ./es && react-cli clean ./lib &&  react-cli clean ./package-lock.json &&  react-cli clean ./result.json ",
     "snap-update": "npm run test-clean && npm run test -- -u",
     "sstest": "npm run init && react-cli sstest",
     "build:external": "npm run clean &&  npm run init  && npm run docsjs:build && npm run build:externalDocCopy && react-cli build:component:umd && npm run externalDocHTMLChange",
@@ -72,7 +72,7 @@
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/dotkit": "1.0.2",
     "@zohodesk/hooks": "2.0.5",
-    "@zohodesk/icons": "1.0.78",
+    "@zohodesk/icons": "1.0.79",
     "@zohodesk/layout": "3.1.0",
     "@zohodesk/svg": "1.1.22",
     "@zohodesk/utils": "1.3.14",
@@ -88,7 +88,7 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.0.78",
+    "@zohodesk/icons": "1.0.79",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/svg": "1.1.22",
     "@zohodesk/virtualizer": "1.0.3",