@dynamic-framework/ui-react 1.32.2 → 1.33.0

package/dist/types/components/DInputCheck/DInputCheck.d.ts

@@ -10,9 +10,10 @@ type Props = ComponentPropsWithoutRef<'input'> & BaseProps & {
     disabled?: boolean;
     invalid?: boolean;
     valid?: boolean;
+    hint?: string;
     indeterminate?: boolean;
     value?: string;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 };
-export default function DInputCheck({ id: idProp, type, name, label, ariaLabel, checked, disabled, invalid, valid, indeterminate, value, onChange, className, style, dataAttributes, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DInputCheck({ id: idProp, type, name, label, ariaLabel, checked, disabled, invalid, valid, indeterminate, value, hint, onChange, className, style, dataAttributes, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/DSelect/DSelect.d.ts

@@ -9,6 +9,7 @@ import DSelectLoadingIndicator from './components/DSelectLoadingIndicator';
 import DSelectOptionEmoji from './components/DSelectOptionEmoji';
 import DSelectSingleValueEmoji from './components/DSelectSingleValueEmoji';
 import DSelectSingleValueEmojiText from './components/DSelectSingleValueEmojiText';
+import DSelectPlaceholder from './components/DSelectPlaceholder';
 import type { BaseProps, EndIconProps, FamilyIconProps, LabelIconProps, StartIconProps } from '../interface';
 type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = BaseProps & FamilyIconProps & LabelIconProps & StartIconProps & EndIconProps & Omit<SelectProps<Option, IsMulti, Group>, 'isDisabled' | 'isClearable' | 'isLoading' | 'isRtl' | 'isSearchable' | 'isMulti'> & {
     label?: string;
@@ -25,7 +26,7 @@ type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = B
     searchable?: SelectProps<Option, IsMulti, Group>['isSearchable'];
     multi?: SelectProps<Option, IsMulti, Group>['isMulti'];
 };
-declare function DSelect<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, className, style, label, labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, hint, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, invalid, valid, menuWithMaxContent, disabled, clearable, loading, rtl, searchable, multi, components, defaultValue, onIconStartClick, onIconEndClick, dataAttributes, ...props }: Props<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;
+declare function DSelect<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id: idProp, className, style, label, labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, hint, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, invalid, valid, menuWithMaxContent, disabled, clearable, loading, rtl, searchable, multi, components, defaultValue, placeholder, onIconStartClick, onIconEndClick, dataAttributes, ...props }: Props<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof DSelect & {
     OptionCheck: typeof DSelectOptionCheck;
     OptionIcon: typeof DSelectOptionIcon;
@@ -37,5 +38,6 @@ declare const _default: typeof DSelect & {
     OptionEmoji: typeof DSelectOptionEmoji;
     SingleValueEmoji: typeof DSelectSingleValueEmoji;
     SingleValueEmojiText: typeof DSelectSingleValueEmojiText;
+    Placeholder: typeof DSelectPlaceholder;
 };
 export default _default;

package/dist/types/components/DSelect/components/DSelectPlaceholder.d.ts

@@ -0,0 +1,2 @@
+import type { GroupBase, PlaceholderProps } from 'react-select';
+export default function DSelectPlaceholder<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ selectProps, innerProps: innerPropsProp, children, ...props }: PlaceholderProps<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/index.d.ts

@@ -42,8 +42,8 @@ export { default as DStepper } from './DStepper';
 export { default as DStepperDesktop } from './DStepperDesktop';
 export { default as DStepperMobile } from './DStepperMobile';
 export { default as DTooltip } from './DTooltip';
-export { default as DTabs, useTabContext } from './DTabs';
-export type { DTabOption, DTabContent } from './DTabs';
+export { default as DTabs, useTabContext, DTabContent, } from './DTabs';
+export type { DTabOption } from './DTabs';
 export { default as DToast } from './DToast';
 export { default as DToastContainer, useDToast, } from './DToastContainer';
 export { default as DTableHead } from './DTableHead';

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "1.32.2",
+  "version": "1.33.0",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
   "repository": {
@@ -43,11 +43,11 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:storybook": "test-storybook",
-    "build": "pnpm clean && pnpm build:react && pnpm build:scss && pnpm cp",
+    "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",
     "build:react:watch": "tsc -p ./tsconfig.build.json && rollup -c rollup.config.mjs",
     "build:scss": "node scripts/build-scss.js",
-    "cp": "pnpm cp:bootstrap && pnpm cp:popper && pnpm cp:bootstrap-icons",
+    "cp": "npm run cp:bootstrap && npm run cp:popper && npm run cp:bootstrap-icons",
     "cp:bootstrap": "scripts/cp-boostrap.sh",
     "cp:bootstrap-icons": "scripts/cp-boostrap-icons.sh",
     "cp:popper": "scripts/cp-popper.sh",
@@ -55,17 +55,22 @@
     "compile": "tsc -p . && rollup -c rollup.config.mjs",
     "storybook": "storybook dev -p 6006",
     "build:storybook": "storybook build --docs -o docs",
-    "eslint": "pnpm eslint:src && pnpm eslint:stories && pnpm eslint:test",
+    "eslint": "npm run eslint:src && npm run eslint:stories && npm run eslint:test",
     "eslint:src": "eslint src/**/*{.ts,.tsx} --ignore-pattern '**/*.spec.tsx'",
     "eslint:stories": "eslint stories/**/*.stories.tsx",
     "eslint:test": "eslint src/**/*.spec.tsx",
     "stylelint": "stylelint \"**/*.{css,scss}\" --rd",
-    "postversion": "pnpm build:scss",
-    "publish:cdn": "pnpm publish:cdn-version && pnpm publish:cdn-latest",
+    "postversion": "npm run build:scss",
+    "publish:cdn": "npm run publish:cdn-version && npm run publish:cdn-latest",
     "publish:cdn-version": "node scripts/publish-cdn.js",
     "publish:cdn-latest": "aws s3 sync ./dist/ s3://dynamicframework-cdn/assets/latest/ui-react --delete --acl public-read",
     "publish:cdn-rc": "aws s3 sync ./dist/ s3://dynamicframework-cdn/assets/rc/ui-react --delete --acl public-read",
-    "lint-staged": "lint-staged"
+    "lint-staged": "lint-staged",
+    "prepare": "husky install",
+    "commitlint": "commitlint --edit"
+  },
+  "engines": {
+    "node": ">=20.13.1"
   },
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
@@ -76,94 +81,97 @@
     "jest/"
   ],
   "dependencies": {
-    "@floating-ui/react": "^0.26.1",
-    "@react-input/mask": "^1.0.20",
-    "@splidejs/react-splide": "^0.7.12",
-    "@splidejs/splide": "^4.1.4",
-    "@types/react-datepicker": "^4.19.1",
-    "bootstrap": "^5.3.3",
-    "classnames": "^2.3.2",
-    "currency.js": "^2.0.4",
-    "date-fns": "^2.30.0",
-    "i18next": "^23.6.0",
-    "react-content-loader": "^6.2.1",
-    "react-datepicker": "^4.21.0",
-    "react-dropzone": "^14.2.3",
-    "react-responsive-pagination": "^2.4.1",
-    "react-select": "^5.8.0"
+    "@floating-ui/react": "~0.26.1",
+    "@react-input/mask": "~1.0.20",
+    "@splidejs/react-splide": "~0.7.12",
+    "@splidejs/splide": "~4.1.4",
+    "@types/react-datepicker": "~4.19.1",
+    "bootstrap": "~5.3.3",
+    "classnames": "~2.3.2",
+    "currency.js": "~2.0.4",
+    "date-fns": "~2.30.0",
+    "i18next": "~23.6.0",
+    "react-content-loader": "~6.2.1",
+    "react-datepicker": "~4.21.0",
+    "react-dropzone": "~14.2.3",
+    "react-responsive-pagination": "^2.9.0",
+    "react-select": "^5.8.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.2",
-    "@babel/preset-env": "^7.23.2",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.23.2",
-    "@mdx-js/react": "^2.3.0",
-    "@popperjs/core": "^2.11.8",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@storybook/addon-a11y": "^8.2.9",
-    "@storybook/addon-actions": "^8.2.9",
-    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/addon-interactions": "^8.2.9",
-    "@storybook/addon-links": "^8.2.9",
-    "@storybook/addon-viewport": "^8.2.9",
-    "@storybook/blocks": "^8.2.9",
-    "@storybook/react": "^8.2.9",
-    "@storybook/react-vite": "^8.2.9",
-    "@storybook/test": "^8.2.9",
-    "@storybook/theming": "^8.2.9",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.5.12",
-    "@types/node": "^18.15.3",
-    "@types/react": "^18.2.31",
-    "@types/react-datepicker": "^4.19.1",
-    "@types/react-dom": "^18.2.14",
-    "@typescript-eslint/eslint-plugin": "^6.9.0",
-    "@typescript-eslint/parser": "^6.9.0",
-    "autoprefixer": "^10.4.16",
-    "axe-playwright": "^1.2.3",
-    "babel-loader": "^9.1.3",
-    "bootstrap-icons": "^1.11.3",
-    "eslint": "^8.52.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-typescript": "^17.1.0",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "glob": "^10.3.10",
-    "jest": "^29.7.0",
-    "jest-axe": "^8.0.0",
-    "jest-cli": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "lint-staged": "^15.0.2",
-    "postcss-cli": "^10.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-hot-toast": "^2.4.1",
-    "react-i18next": "^13.3.1",
-    "recharts": "^2.12.7",
-    "rimraf": "^5.0.5",
-    "rollup": "^4.1.4",
-    "sass": "^1.69.4",
-    "storybook": "^8.2.9",
-    "stylelint": "^15.11.0",
-    "stylelint-config-twbs-bootstrap": "^11.0.1",
-    "ts-jest": "^29.2.3",
-    "tslib": "^2.6.2",
-    "typescript": "^5.2.2"
+    "@babel/core": "~7.23.2",
+    "@babel/preset-env": "~7.23.2",
+    "@babel/preset-react": "~7.22.15",
+    "@babel/preset-typescript": "~7.23.2",
+    "@commitlint/cli": "~19.3.0",
+    "@commitlint/config-conventional": "~19.2.2",
+    "@mdx-js/react": "~2.3.0",
+    "@popperjs/core": "~2.11.8",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@storybook/addon-a11y": "~8.2.9",
+    "@storybook/addon-actions": "~8.2.9",
+    "@storybook/addon-essentials": "~8.2.9",
+    "@storybook/addon-interactions": "~8.2.9",
+    "@storybook/addon-links": "~8.2.9",
+    "@storybook/addon-viewport": "~8.2.9",
+    "@storybook/blocks": "~8.2.9",
+    "@storybook/react": "~8.2.9",
+    "@storybook/react-vite": "~8.2.9",
+    "@storybook/test": "~8.2.9",
+    "@storybook/theming": "~8.2.9",
+    "@testing-library/jest-dom": "~6.1.4",
+    "@testing-library/react": "~14.0.0",
+    "@types/jest": "~29.5.12",
+    "@types/node": "~18.15.3",
+    "@types/react": "~18.2.31",
+    "@types/react-datepicker": "~4.19.1",
+    "@types/react-dom": "~18.2.14",
+    "@typescript-eslint/eslint-plugin": "~6.9.0",
+    "@typescript-eslint/parser": "~6.9.0",
+    "autoprefixer": "~10.4.16",
+    "axe-playwright": "~1.2.3",
+    "babel-loader": "~9.1.3",
+    "bootstrap-icons": "~1.11.3",
+    "conventional-changelog-conventionalcommits": "~6.1.0",
+    "eslint": "~8.52.0",
+    "eslint-config-airbnb": "~19.0.4",
+    "eslint-config-airbnb-typescript": "~17.1.0",
+    "eslint-plugin-import": "~2.29.0",
+    "eslint-plugin-jsx-a11y": "~6.7.1",
+    "eslint-plugin-react": "~7.33.2",
+    "eslint-plugin-react-hooks": "~4.6.0",
+    "glob": "~10.3.10",
+    "husky": "~8.0.3",
+    "jest": "~29.7.0",
+    "jest-axe": "~8.0.0",
+    "jest-cli": "~29.7.0",
+    "jest-environment-jsdom": "~29.7.0",
+    "lint-staged": "^15.2.10",
+    "postcss-cli": "~10.1.0",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "react-hot-toast": "~2.4.1",
+    "react-i18next": "~13.3.1",
+    "recharts": "~2.12.7",
+    "rimraf": "~5.0.5",
+    "rollup": "^4.27.4",
+    "sass": "~1.69.4",
+    "storybook": "~8.2.9",
+    "stylelint": "~15.11.0",
+    "stylelint-config-twbs-bootstrap": "~11.0.1",
+    "ts-jest": "~29.2.3",
+    "tslib": "~2.6.2",
+    "typescript": "~5.2.2"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-hot-toast": "^2.4.1",
-    "react-i18next": "^13.3.1",
-    "recharts": "^2.12.7"
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "react-hot-toast": "~2.4.1",
+    "react-i18next": "~13.3.1",
+    "recharts": "~2.12.7"
   },
   "peerDependenciesMeta": {
     "recharts": {
       "optional": true
     }
-  },
-  "gitHead": "9744c7852de4244bec758d81a3b92b568305df8e"
+  }
 }

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

@@ -46,7 +46,7 @@ $input-plaintext-color: var(--#{$prefix}body-color) !default;
 // scss-docs-start form-check-variables
 $form-check-input-width: 1em !default;
 $form-check-min-height: $form-check-input-width !default;
-$form-check-padding-start: $form-check-input-width - .5em !default;
+$form-check-padding-start: $form-check-input-width !default;
 $form-check-input-focus-box-shadow: var(--#{$prefix}form-check-input-focus-box-shadow) !default;
 $form-check-input-focus-border: var(--#{$prefix}form-check-input-focus-border-color) !default;
 $form-check-input-checked-bg-image: url("data:image/svg+xml, <svg viewBox='-4 -6 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M14.294 0.594229C14.3863 0.498719 14.4966 0.422536 14.6186 0.370127C14.7406 0.317718 14.8719 0.290132 15.0046 0.288978C15.1374 0.287824 15.2691 0.313126 15.392 0.363407C15.5149 0.413688 15.6265 0.487941 15.7204 0.581833C15.8143 0.675726 15.8886 0.787378 15.9389 0.910275C15.9891 1.03317 16.0144 1.16485 16.0133 1.29763C16.0121 1.43041 15.9846 1.56163 15.9321 1.68363C15.8797 1.80564 15.8036 1.91598 15.708 2.00823L6.70804 11.0082C6.52051 11.1957 6.26621 11.301 6.00104 11.301C5.73588 11.301 5.48157 11.1957 5.29404 11.0082L0.293041 6.00723C0.110883 5.81863 0.0100885 5.56602 0.0123669 5.30383C0.0146453 5.04163 0.119815 4.79082 0.305223 4.60541C0.490631 4.42 0.741443 4.31483 1.00364 4.31255C1.26584 4.31028 1.51844 4.41107 1.70704 4.59323L6.00104 8.88723L14.294 0.594229V0.594229Z' fill='#{$white}'/></svg>") !default;

package/src/style/base/_form-check.scss

@@ -6,3 +6,21 @@
   --#{$prefix}form-check-input-focus-border-color: #{$component-focus-border-color};
   --#{$prefix}form-check-input-focus-box-shadow: #{$input-btn-focus-box-shadow};
 }
+
+.form-check {
+  .form-text {
+    --#{$prefix}form-text-padding: 0 var(--#{$prefix}ref-spacer-2);
+
+    display: flex;
+  }
+
+  @each $state, $data in $form-validation-states {
+    $border-color: map-get($data, "border-color");
+
+    &:has(.form-check-input.is-#{$state}) {
+      .form-text {
+        color: $border-color;
+      }
+    }
+  }
+}

package/src/style/base/_nav.scss

@@ -44,11 +44,13 @@
       border-right: 1px solid var(--#{$prefix}nav-tabs-border-color);
       border-bottom-color: transparent;
     }
-    .nav-link.active{
+
+    .nav-link.active {
       background-color: var(--#{$prefix}nav-link-hover-bg);
       border-right: 1px solid currentcolor;
     }
   }
+
   .nav-link {
     padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
     border-bottom: 1px solid var(--#{$prefix}gray-300);

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

@@ -2,6 +2,11 @@
 
 // stylelint-disable selector-class-pattern
 
+.react-datepicker-wrapper {
+  width: 100%;
+  margin-inline: auto;
+}
+
 .react-datepicker {
   --#{$prefix}datepicker-font-family: var(--#{$prefix}font-sans-serif);
   --#{$prefix}datepicker-border: 0px;

package/src/style/root/_root.scss

@@ -210,7 +210,7 @@
   --#{$prefix}label-padding-y: var(--#{$prefix}ref-spacer-0);
   --#{$prefix}label-padding-x: var(--#{$prefix}ref-spacer-0);
   --#{$prefix}label-margin-bottom: var(--#{$prefix}ref-spacer-1);
-  --#{$prefix}label-font-size: var(--#{$prefix}fs-small);
+  --#{$prefix}label-font-size: var(--#{$prefix}body-font-size);
   --#{$prefix}label-font-weight: var(--#{$prefix}fw-normal);
   --#{$prefix}label-color: var(--#{$prefix}gray-700);