@zohodesk/components 1.0.0-temp-252.4 → 1.0.0-temp-256.1

package/lib/v1/shared/SuccessTick/__tests__/__snapshots__/SuccessTick.spec.js.snap

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`SuccessTick renders default snapshot 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="tick "
+    class="tick"
     role="img"
     viewBox="0 0 24 24"
   >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-252.4",
+  "version": "1.0.0-temp-256.1",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -17,33 +17,32 @@
     "LIBRARY"
   ],
   "scripts": {
-    "_lint": "react-cli lint",
-    "lintAll": "react-cli lint ./src",
     "lintAllFix": "npm run lintAll --eslint:fix=true",
     "lint": "npx eslint ./src",
-    "clean": "react-cli clean build unittest coverage es lib assets && mkdir assets",
+    "clean": "cdt clean build unittest test-slices coverage es lib assets && mkdir assets",
     "dubCheck": "npx z-node-plugins dub:check node_modules/@zohodesk/icons/es node_modules/@zohodesk/variables/es ../dot/src ../internal/desk-components/src",
     "init": "npm run clean && cd ../assets && npm run componentsassets && cd ../components",
     "common_package_build": "cd ../common && npm run build && cd ../components",
-    "build:lib": "cbt build:lib src,assets lib,assets",
-    "build:es": "cbt build:es src,assets es,assets",
+    "build:lib": "cbt build:lib src lib",
+    "build:es": "cbt build:es src es",
     "build:es:watch": "cbt build:es src es",
     "build": "npm run theme:validate && npm run build:lib && npm run build:es && npm run cssVariableConvert ",
     "build:local": "npm run build",
     "build:watch": "npm run build:es:watch --module:mode=dev -- -w",
-    "coverage": "react-cli coverage",
     "prepare": "npm run init &&  npm run css:build ",
-    "prepublishOnly": "node ../prePublish.js && npm run css:review && npm run review:props ",
+    "prepublishOnly": "node ../prePublish.js && npm run download_only && npm run css:review && npm run review:props ",
     "postpublish": "node ../postPublish.js",
-    "report": "react-cli publish:report",
-    "test": "react-cli test",
+    "test": "ZDTestingFramework unit-test",
+    "test:changed": "ZDTestingFramework unit-test --onlyChanged",
+    "snap-update": "npm run test-clean && ZDTestingFramework unit-test -u",
+    "unit:report": "ZDTestingFramework ut-report",
+    "coverage": "ZDTestingFramework unit-test --coverage",
     "customTest": "node ./__testUtils__/runTest.js",
-    "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",
+    "test-clean": "cdt clean ./coverage ./test-slices ./unittest ./es ./lib ./package-lock.json ./result.json ",
     "sstest": "npm run init && react-cli sstest",
     "build:external": "npm run clean &&  npm run init  && npm run docsjs:build && npm run build:externalDocCopy  && npm run externalDocHTMLChange",
     "download": "npm run download_only && cd ../ && npm run download",
-    "download_only": "react-cli clean ./node_modules ./package-lock.json && npm install  --legacy-peer-deps",
+    "download_only": "cdt clean ./node_modules ./package-lock.json && npm install  --legacy-peer-deps",
     "expublish": "node ../publish.js -- exp",
     "css:lineheight:validate": "npx z-node-plugins lineheight:errorcheck ./src/",
     "variable:addignore": "npx css-variable-migrator addignore ./src",
@@ -73,27 +72,31 @@
     "@testing-library/react": "^11.2.5",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.0.10",
-    "@dot-system/css-audit-tool": "1.0.0",
-    "@zohodesk-private/color-variable-preprocessor": "1.3.1",
+    "@dot-system/css-audit-tool": "1.0.1",
+    "@zohodesk-private/color-variable-preprocessor": "1.3.3",
     "@zohodesk-private/css-variable-migrator": "1.0.11",
-    "@zohodesk-private/node-plugins": "1.1.14",
+    "@zohodesk-private/node-plugins": "1.1.15",
     "@zohodesk-private/react-prop-validator": "1.2.3",
     "@zohodesk/a11y": "2.3.9",
     "@zohodesk/docstool": "1.0.0-alpha-2",
-    "@zohodesk/dotkit": "1.0.9",
+    "@zohodesk/dotkit": "1.0.10",
     "@zohodesk/hooks": "2.0.8",
-    "@zohodesk/icons": "1.3.3",
-    "@zohodesk/layout": "3.1.0",
-    "@zohodesk/svg": "1.3.5",
+    "@zohodesk/icons": "1.3.11",
+    "@zohodesk/layout": "3.2.1",
+    "@zohodesk/svg": "1.3.10",
     "@zohodesk/utils": "1.3.16",
-    "@zohodesk/variables": "1.3.1",
+    "@zohodesk/variables": "1.3.2",
     "@zohodesk/virtualizer": "1.0.13",
     "react-sortable-hoc": "^0.8.3",
     "velocity-react": "1.4.3",
     "@zohodesk/react-cli": "1.1.27",
     "@zohodesk/client_build_tool": "0.0.23",
     "color": "4.2.3",
-    "@dot-system/css-utility": "0.1.1"
+    "@zohodesk/jsx_attribute_wrapper": "1.0.0",
+    "@dot-system/css-utility": "0.1.2",
+    "@zohodesk-private/client_deployment_tool": "0.0.7",
+    "@babel/preset-react": "7.29.7",
+    "@zohodesk/testinglibrary": "4.1.10"
   },
   "dependencies": {
     "hoist-non-react-statics": "3.0.1",
@@ -102,18 +105,18 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.3.3",
-    "@zohodesk/variables": "1.3.1",
-    "@zohodesk/svg": "1.3.5",
+    "@zohodesk/icons": "1.3.11",
+    "@zohodesk/variables": "1.3.2",
+    "@zohodesk/svg": "1.3.10",
     "@zohodesk/virtualizer": "1.0.13",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.8",
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/a11y": "2.3.9",
-    "@zohodesk/layout": "3.1.0",
-    "@zohodesk/dotkit": "1.0.9",
+    "@zohodesk/layout": "3.2.1",
+    "@zohodesk/dotkit": "1.0.10",
     "color": "4.2.3",
-    "@dot-system/css-utility": "0.1.1"
+    "@dot-system/css-utility": "0.1.2"
   }
 }

package/ut.config.js

@@ -0,0 +1,106 @@
+const path = require('path');
+
+// Notes for future maintainers:
+// - @zohodesk/unit-testing-framework runs `JSON.stringify(config)` before
+//   handing this to Jest, so every value here must be JSON-serializable
+//   (no functions, no live RegExp objects — patterns are strings).
+// - The framework REPLACES its default config with this file when present
+//   (despite the "Merging..." log line in config-loader.js), so this file
+//   must be self-contained.
+
+// `@zohodesk/unit-testing-framework/package.json` isn't in its exports map,
+// so resolve via the main entry (points to build/index.js) and step up.
+const FRAMEWORK_BUILD = path.dirname(
+  require.resolve('@zohodesk/unit-testing-framework')
+);
+
+// Pin Jest 30's jsdom env — bare "jsdom" can resolve to Jest 26/27 copies
+// pulled in by react-cli / react-scripts, which crash under Jest 30.
+const JEST_JSDOM_ENV = require.resolve('jest-environment-jsdom', {
+  paths: [require.resolve('@zohodesk/unit-testing-framework')]
+});
+
+module.exports = {
+  rootDir: __dirname,
+  roots: ['<rootDir>/src'],
+
+  testEnvironment: JEST_JSDOM_ENV,
+
+  testMatch: [
+    '<rootDir>/src/**/__tests__/**/*.(spec|test).[jt]s?(x)',
+    '<rootDir>/src/**/?(*.)+(spec|test).[jt]s?(x)'
+  ],
+
+  testPathIgnorePatterns: [
+    '/node_modules/',
+    '/build/',
+    '/lib/',
+    '/es/',
+    '/dist/',
+    '/coverage/',
+    '/unittest/'
+  ],
+
+  moduleFileExtensions: ['js', 'jsx', 'mjs', 'cjs', 'json', 'ts', 'tsx', 'node'],
+
+  transform: {
+    // Absolute paths — the framework JSON.stringifies this config before Jest
+    // resolves transforms, so bare package names can point at a missing nested
+    // copy under unit-testing-framework/node_modules.
+    '^.+\\.[jt]sx?$': [
+      require.resolve('babel-jest'),
+      {
+        presets: [
+          [require.resolve('@babel/preset-env'), { targets: { node: 'current' } }],
+          [require.resolve('@babel/preset-react'), { runtime: 'classic' }]
+        ]
+      }
+    ],
+    '^.+\\.(svg|png|jpg|jpeg|gif|webp|woff2?|ttf|eot|otf|mp4|webm)$':
+      '<rootDir>/__testUtils__/fileTransform.js',
+    // Enumerable class-name map (not identity-obj-proxy) — mergeStyle spreads
+    // the style object, which yields {} for a non-enumerable Proxy.
+    '^.+\\.(css|less|scss|sass)$':
+      '<rootDir>/__testUtils__/cssModulesTransform.js'
+  },
+
+  // @zohodesk/* and @dot-system/* ship untranspiled ESM in some places, so
+  // let babel-jest transform them.
+  transformIgnorePatterns: [
+    '/node_modules/(?!(@zohodesk|@zohodesk-private|@dot-system)/)'
+  ],
+
+  moduleNameMapper: {
+    // Prefer the ES build for @zohodesk libraries (mirrors react-cli's libAlias).
+    '^@zohodesk/(components|dot|icons|svg|variables|virtualizer|hooks|utils|a11y|layout|dotkit)/lib(.*)$':
+      '@zohodesk/$1/es$2'
+  },
+
+  // Injects `jest` on globalThis so tests that don't `import { jest }` from
+  // '@jest/globals' still work under the framework's runner. before run
+  setupFiles: [
+    path.join(FRAMEWORK_BUILD, 'src', 'environment', 'globals-inject.js')
+  ],
+
+  // Existing test bootstrap: @testing-library/react configure, ResizeObserver
+  // mock, requestAnimationFrame shim, className `cn` wrapper on React.createElement.
+  setupFilesAfterEnv: [
+    '<rootDir>/__testUtils__/globals.js',
+    '@testing-library/jest-dom'
+  ],
+
+  clearMocks: true,
+  passWithNoTests: true,
+  testTimeout: 20000,
+
+  // Coverage tuning (used only when `--coverage` is passed).
+  collectCoverageFrom: [
+    'src/**/*.{js,jsx,ts,tsx}',
+    '!src/**/__tests__/**',
+    '!src/**/*.spec.{js,jsx,ts,tsx}',
+    '!src/**/*.test.{js,jsx,ts,tsx}',
+    '!src/**/index.js'
+  ],
+  coverageDirectory: 'coverage',
+  coverageReporters: ['json', 'json-summary', 'text', 'html']
+};

package/es/Layout/Layout.module.css

@@ -1,336 +0,0 @@
-.flex {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.inflex {
-  display: inline-flex;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-}
-
-.cover {
-  width: 100% ;
-  height: 100% ;
-}
-
-/* .flex {
-  -webkit-box-flex: 0;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-} */
-
-.wrap {
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-.wrapReverse {
-  -ms-flex-wrap: wrap-reverse;
-  flex-wrap: wrap-reverse;
-}
-
-.coldir {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.rowdir {
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.rowReverse {
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: reverse;
-  -webkit-flex-direction: row-reverse;
-  -ms-flex-direction: row-reverse;
-  flex-direction: row-reverse;
-}
-
-.colReverse {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: reverse;
-  -webkit-flex-direction: column-reverse;
-  -ms-flex-direction: column-reverse;
-  flex-direction: column-reverse;
-}
-
-.grow {
-  -webkit-box-flex: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  min-height: 0 ;
-  min-width: 0 ;
-}
-
-.shrinkOff {
-  flex-shrink: 0;
-  -moz-flex-shrink: 0;
-  -webkit-flex-shrink: 0;
-  -ms-flex-shrink: 0;
-}
-
-.shrinkOn {
-  flex-shrink: 1;
-  -moz-flex-shrink: 1;
-  -webkit-flex-shrink: 1;
-  -ms-flex-shrink: 1;
-  min-width: 0 ;
-}
-
-.basis {
-  flex-basis: 0% ;
-  -webkit-flex-basis: 0%;
-  -moz-flex-basis: 0%;
-  -ms-flex-basis: 0%;
-}
-
-.basisAuto {
-  flex-basis: auto ;
-  -webkit-flex-basis: auto;
-  -moz-flex-basis: auto;
-  -ms-flex-basis: auto;
-}
-
-.scrolly {
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.scrollx {
-  overflow-x: auto;
-  overflow-y: hidden;
-}
-
-.scrollnone {
-  overflow: hidden;
-}
-
-.scrollboth {
-  overflow: auto;
-}
-
-.preventScrollBubbleX {
-  overscroll-behavior-x: contain;
-}
-
-.preventScrollBubbleY {
-  overscroll-behavior-y: contain;
-}
-
-.preventScrollBubbleBoth {
-  overscroll-behavior: contain;
-}
-
-/*Column Specification*/
-
-.col-1 {
-  -ms-flex-preferred-size: 8.33333333%;
-  flex-basis: 8.33333333%;
-  max-width: 8.33333333%;
-}
-
-.col-2 {
-  -ms-flex-preferred-size: 16.66666667%;
-  flex-basis: 16.66666667%;
-  max-width: 16.66666667%;
-}
-
-.col-3 {
-  -ms-flex-preferred-size: 25%;
-  flex-basis: 25% ;
-  max-width: 25% ;
-}
-
-.col-4 {
-  -ms-flex-preferred-size: 33.33333333%;
-  flex-basis: 33.33333333%;
-  max-width: 33.33333333%;
-}
-
-.col-5 {
-  -ms-flex-preferred-size: 41.66666667%;
-  flex-basis: 41.66666667%;
-  max-width: 41.66666667%;
-}
-
-.col-6 {
-  -ms-flex-preferred-size: 50%;
-  flex-basis: 50% ;
-  max-width: 50% ;
-}
-
-.col-7 {
-  -ms-flex-preferred-size: 58.33333333%;
-  flex-basis: 58.33333333%;
-  max-width: 58.33333333%;
-}
-
-.col-8 {
-  -ms-flex-preferred-size: 66.66666667%;
-  flex-basis: 66.66666667%;
-  max-width: 66.66666667%;
-}
-
-.col-9 {
-  -ms-flex-preferred-size: 75%;
-  flex-basis: 75% ;
-  max-width: 75% ;
-}
-
-.col-10 {
-  -ms-flex-preferred-size: 83.33333333%;
-  flex-basis: 83.33333333%;
-  max-width: 83.33333333%;
-}
-
-.col-11 {
-  -ms-flex-preferred-size: 91.66666667%;
-  flex-basis: 91.66666667%;
-  max-width: 91.66666667%;
-}
-
-.col-12 {
-  -ms-flex-preferred-size: 100%;
-  flex-basis: 100% ;
-  max-width: 100% ;
-}
-
-.hCenter {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.vCenter {
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.both {
-  composes: vCenter;
-  composes: hCenter;
-}
-
-.top {
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: flex-start;
-}
-
-.bottom {
-  -webkit-box-align: end;
-  -ms-flex-align: end;
-  align-items: flex-end;
-}
-
-.left {
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
-.right {
-  -webkit-box-pack: end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.around {
-  -ms-flex-pack: distribute;
-  justify-content: space-around;
-}
-
-.between {
-  -webkit-box-pack: justify;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-}
-
-.baseline {
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-}
-
-.alignStart {
-  align-content: flex-start;
-}
-
-.alignEnd {
-  align-content: flex-end;
-}
-
-.alignCenter {
-  align-content: center;
-}
-
-.alignAround {
-  align-content: space-around;
-}
-
-.alignBetween {
-  align-content: space-between;
-}
-
-.first {
-  -ms-flex-order: -1;
-  order: -1;
-}
-
-.last {
-  -ms-flex-order: 1;
-  order: 1;
-}
-
-.selfStart {
-  align-self: flex-start;
-}
-
-.selfEnd {
-  align-self: flex-end;
-}
-
-.selfCenter {
-  align-self: center;
-}
-
-/*Hidden Responsive*/
-@media only screen and (max-width: 30em) {
-  .hidden-screen-xs {
-    display: none;
-  }
-}
-
-@media only screen and (min-width: 30.063em) and (max-width: 48em) {
-  .hidden-screen-sm {
-    display: none;
-  }
-}
-
-@media only screen and (min-width: 48.063em) and (max-width: 61.25em) {
-  .hidden-screen-md {
-    display: none;
-  }
-}
-
-@media only screen and (min-width: 61.313em) and (max-width: 75em) {
-  .hidden-screen-lg {
-    display: none;
-  }
-}
-
-@media only screen and (min-width: 75.063em) {
-  .hidden-screen-xl {
-    display: none;
-  }
-}

package/es/Layout/__tests__/Box.spec.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import Box from "../Box";
-describe('Box', () => {
-  test('rendering the defult props', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", null, "Test")));
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/es/Layout/__tests__/Container.spec.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import Container from "../Container";
-describe('Container', () => {
-  test('rendering the defult props', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement("div", null, "Test")));
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/es/Layout/__tests__/__snapshots__/Box.spec.js.snap

@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Box rendering the defult props 1`] = `
-<DocumentFragment>
-  <div
-    class="shrinkOff"
-    data-id="boxComponent"
-    data-selector-id="box"
-    data-test-id="boxComponent"
-  >
-    <div>
-      Test
-    </div>
-  </div>
-</DocumentFragment>
-`;

package/es/Layout/__tests__/__snapshots__/Container.spec.js.snap

@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Container rendering the defult props 1`] = `
-<DocumentFragment>
-  <div
-    class="flex cover coldir"
-    data-id="containerComponent"
-    data-selector-id="container"
-    data-test-id="containerComponent"
-  >
-    <div>
-      Test
-    </div>
-  </div>
-</DocumentFragment>
-`;

package/es/Layout/utils.js

@@ -1,30 +0,0 @@
-import PropTypes from 'prop-types';
-export const ColumnSizeType = PropTypes.oneOfType([PropTypes.number, PropTypes.bool]);
-export const ViewportSizeType = PropTypes.oneOf(['xs', 'sm', 'md', 'lg']);
-export function getClass(styles, className) {
-  return styles && styles[className] ? styles[className] : className;
-}
-export function createProps(propTypes, props, classNames) {
-  const newProps = {};
-  Object.keys(props).filter(key => key === 'children' || !propTypes[key]).forEach(key => newProps[key] = props[key]);
-  const className = classNames.filter(cn => cn).join(' ').trim();
-  return Object.assign({}, newProps, {
-    className
-  });
-}
-export function isInteger(value) {
-  return typeof value === 'number' && isFinite(value) && Math.floor(value) === value;
-}
-export function setProps(childProps, props) {
-  let values = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  Object.keys(values).forEach(value => {
-    if (props[value]) {
-      if (value === 'dataId') {
-        childProps['data-test-id'] = props[value];
-      }
-
-      childProps[values[value]] = props[value];
-    }
-  });
-  return childProps;
-}