@dynamic-framework/ui-react 1.32.3 → 1.34.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/DQuickActionButton/DQuickActionButton.d.ts

@@ -2,11 +2,8 @@ import type { BaseProps } from '../interface';
 type Props = BaseProps & {
     line1: string;
     line2: string;
-    actionLinkText?: string;
-    actionLinkTheme?: string;
     actionIcon?: string;
-    secondaryActionIcon?: string;
-    secondaryActionAriaLabel?: string;
+    actionIconTheme?: string;
     actionIconFamilyClass?: string;
     actionIconFamilyPrefix?: string;
     representativeImage?: string;
@@ -15,11 +12,9 @@ type Props = BaseProps & {
     representativeIconHasCircle?: boolean;
     representativeIconFamilyClass?: string;
     representativeIconFamilyPrefix?: string;
+    href?: string;
+    hrefTarget?: string;
     onClick?: () => void;
-    onClickSecondary?: () => void;
 };
-/**
- * @deprecated
- */
-export default function DQuickActionButton({ line1, line2, className, actionLinkText, actionLinkTheme, actionIcon, secondaryActionIcon, secondaryActionAriaLabel, actionIconFamilyClass, actionIconFamilyPrefix, representativeImage, representativeIcon, representativeIconTheme, representativeIconHasCircle, representativeIconFamilyClass, representativeIconFamilyPrefix, onClick, onClickSecondary, style, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DQuickActionButton({ line1, line2, className, actionIcon, actionIconFamilyClass, actionIconFamilyPrefix, actionIconTheme, representativeImage, representativeIcon, representativeIconTheme, representativeIconHasCircle, representativeIconFamilyClass, representativeIconFamilyPrefix, onClick, href, hrefTarget, style, dataAttributes, }: 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/contexts/DContext.d.ts

@@ -33,11 +33,20 @@ type IconMapProps = {
         increase: string;
     };
 };
+export type BreakpointProps = {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+};
 type Props<T extends Record<string, unknown>> = {
     language: string;
     currency: CurrencyProps;
     icon: IconProps;
     iconMap: IconMapProps;
+    breakpoints: BreakpointProps;
 } & PortalContextProps<T>;
 type Context<T extends Record<string, unknown>> = Props<T> & {
     setContext: (value: Partial<Props<T>>) => void;

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

@@ -6,3 +6,5 @@ export { default as useStackState } from './useStackState';
 export { default as useDisableBodyScrollEffect } from './useDisableBodyScrollEffect';
 export { default as usePortal } from './usePortal';
 export { default as useItemSelection } from './useItemSelection';
+export { default as useMediaQuery } from './useMediaQuery';
+export { useMediaBreakpointUpXs, useMediaBreakpointUpSm, useMediaBreakpointUpMd, useMediaBreakpointUpLg, useMediaBreakpointUpXl, useMediaBreakpointUpXxl, } from './useMediaBreakpointUp';

package/dist/types/hooks/useMediaBreakpointUp.d.ts

@@ -0,0 +1,6 @@
+export declare function useMediaBreakpointUpXs(useListener?: boolean): boolean;
+export declare function useMediaBreakpointUpSm(useListener?: boolean): boolean;
+export declare function useMediaBreakpointUpMd(useListener?: boolean): boolean;
+export declare function useMediaBreakpointUpLg(useListener?: boolean): boolean;
+export declare function useMediaBreakpointUpXl(useListener?: boolean): boolean;
+export declare function useMediaBreakpointUpXxl(useListener?: boolean): boolean;

package/dist/types/hooks/useMediaQuery.d.ts

@@ -0,0 +1 @@
+export default function useMediaQuery(mediaQuery: string, useListener?: boolean): boolean;

package/dist/types/utils/getCssVariable.d.ts

@@ -0,0 +1 @@
+export default function getCssVariable(variable: string): string;

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

@@ -2,3 +2,5 @@ export { default as formatCurrency } from './formatCurrency';
 export { default as configureI18n } from './configureI18n';
 export { default as getQueryString } from './getQueryString';
 export { default as changeQueryString } from './changeQueryString';
+export { default as getCssVariable } from './getCssVariable';
+export * from './mediaQuery';

package/dist/types/utils/mediaQuery.d.ts

@@ -0,0 +1,2 @@
+export declare function subscribeToMediaQuery(query: string, callback: () => void): () => void;
+export declare function checkMediaQuery(query: string): boolean;

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "1.32.3",
+  "version": "1.34.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": "6e5aeff615f821945f2b52eb1b58180cd9e0622d"
+  }
 }

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/components/_d-quick-action-button.scss

@@ -53,13 +53,15 @@
   border-radius: var(--#{$prefix}quick-action-button-border-radius);
   box-shadow: var(--#{$prefix}quick-action-button-box-shadow);
 
-  &:hover {
+  &.d-quick-action-button-feedback:hover {
+    text-decoration: none;
     background: var(--#{$prefix}quick-action-button-hover-bg);
     border-color: var(--#{$prefix}quick-action-button-hover-border-color);
     box-shadow: var(--#{$prefix}quick-action-button-hover-box-shadow);
   }
 
-  &:active {
+  &.d-quick-action-button-feedback:active {
+    text-decoration: none;
     background: var(--#{$prefix}quick-action-button-active-bg);
     border-color: var(--#{$prefix}quick-action-button-active-border-color);
     box-shadow: var(--#{$prefix}quick-action-button-active-box-shadow);