@dynamic-framework/ui-react 1.36.0 → 1.36.2

package/jest/setup.js

@@ -1,5 +1,7 @@
 jest.mock('react-content-loader', () => jest.fn());
 
+jest.mock('react-responsive-pagination', () => jest.fn());
+
 jest.mock('@react-input/mask', () => ({
   InputMask: jest.fn(),
 }));

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "1.36.0",
+  "version": "1.36.2",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
   "repository": {
@@ -42,6 +42,7 @@
   "scripts": {
     "test": "jest",
     "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
     "test:storybook": "test-storybook",
     "build": "npm run clean && npm run build:react && npm run build:scss && npm run cp",
     "build:react": "tsc -p ./tsconfig.build.json && rollup -c rollup.config.mjs",
@@ -122,6 +123,7 @@
     "@storybook/theming": "~8.2.9",
     "@testing-library/jest-dom": "~6.1.4",
     "@testing-library/react": "~14.0.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/google-libphonenumber": "^7.4.30",
     "@types/jest": "~29.5.12",
     "@types/node": "~18.15.3",
@@ -133,7 +135,7 @@
     "axe-playwright": "~1.2.3",
     "babel-jest": "^29.7.0",
     "babel-loader": "~9.1.3",
-    "bootstrap-icons": "~1.11.3",
+    "bootstrap-icons": "~1.13.1",
     "conventional-changelog-conventionalcommits": "~6.1.0",
     "eslint": "~8.52.0",
     "eslint-config-airbnb": "~19.0.4",

package/src/style/abstracts/variables/_forms.scss

@@ -80,14 +80,14 @@ $input-group-addon-border-color: transparent !default;
 
 // custom
 $input-group-sm-icon-size: $spacer-4 !default;
-$input-group-lg-icon-size: $spacer-7 !default;
+$input-group-lg-icon-size: $spacer-6 !default;
 $form-text-padding-y: 0 !default;
 $form-text-padding-x: 0 !default;
 // end custom
 
 // scss-docs-start form-select-variables
 $form-select-disabled-color: $input-disabled-color !default;
-$form-select-bg-size: 16px !default; // In pixels because image dimensions
+$form-select-bg-size: 20px !default; // In pixels because image dimensions
 $form-select-bg-opacity: 0 !default;
 $form-select-indicator-color: var(--#{$prefix}gray-500) !default;
 $form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$gray-500}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='m2 5 6 6 6-6'/></svg>") !default;

package/src/style/abstracts/variables/_z-index.scss

@@ -9,3 +9,27 @@ $zindex-offcanvas: 1055 !default;
 $zindex-modal-backdrop: 1050 !default;
 $zindex-modal: 1055 !default;
 // scss-docs-end zindex-stack
+
+$zindex-levels: (
+  n1: -1,
+  0: 0,
+  1: 1,
+  2: 2,
+  3: 3,
+  4: 4,
+  5: 5,
+  6: 6,
+  7: 7,
+  8: 8,
+  9: 9,
+  10: 10,
+  20: 20,
+  30: 30,
+  40: 40,
+  50: 50,
+  60: 60,
+  70: 70,
+  80: 80,
+  90: 90,
+  100: 100
+) !default;

package/src/style/components/_d-icon.scss

@@ -1,7 +1,7 @@
 .d-icon {
   --#{$prefix}icon-color: var(--#{$prefix}icon-component-color, inherit);
   --#{$prefix}icon-bg-color: var(--#{$prefix}icon-component-bg-color, inherit);
-  --#{$prefix}icon-size: var(--#{$prefix}icon-component-size, var(--#{$prefix}ref-spacer-6));
+  --#{$prefix}icon-size: var(--#{$prefix}icon-component-size, var(--#{$prefix}ref-spacer-5));
   --#{$prefix}icon-padding: var(--#{$prefix}icon-component-padding, 0);
   --#{$prefix}icon-loading-duration: var(--#{$prefix}icon-component-loading-duration, 1.8);
 

package/src/style/components/_d-select.scss

@@ -13,7 +13,7 @@
   --#{$prefix}select-option-is-checkbox-font-size: var(--#{$prefix}body-font-size);
   --#{$prefix}select-option-is-checkbox-font-weight: var(--#{$prefix}fw-normal);
   --#{$prefix}select-option-is-checkbox-color: var(--#{$prefix}gray-900);
-  --#{$prefix}select-option-has-icon-icon-size: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}select-option-has-icon-icon-size: var(--#{$prefix}ref-spacer-5);
   --#{$prefix}select-multi-value-padding: 0 var(--#{$prefix}ref-spacer-1) 0 var(--#{$prefix}select-gap);
   --#{$prefix}select-multi-value-margin-right: var(--#{$prefix}select-gap);
   --#{$prefix}select-multi-value-background: var(--#{$prefix}secondary-100);
@@ -26,8 +26,8 @@
   --#{$prefix}select-indicator-separator-margin: var(--#{$prefix}ref-spacer-0) var(--#{$prefix}ref-spacer-1);
   --#{$prefix}select-indicator-separator-color: var(--#{$prefix}transparent);
 
-  --#{$prefix}select-indicator-width: var(--#{$prefix}ref-spacer-4);
-  --#{$prefix}select-indicator-height: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}select-indicator-width: var(--#{$prefix}ref-spacer-5);
+  --#{$prefix}select-indicator-height: var(--#{$prefix}ref-spacer-5);
 
   // focus
   &:focus-within {