@dynamic-framework/ui-react 1.14.1 → 1.15.0

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "1.14.1",
+  "version": "1.15.0",
   "description": "React Dynamic Framework",
   "license": "MIT",
   "repository": {
@@ -51,7 +51,7 @@
     "clean": "rimraf dist-transpiled && rimraf dist",
     "compile": "tsc -p . && rollup -c rollup.config.mjs",
     "storybook": "storybook dev -p 6006",
-    "build:storybook": "storybook build -o docs",
+    "build:storybook": "storybook build --docs -o docs",
     "eslint": "pnpm eslint:src && pnpm eslint:stories && pnpm eslint:test",
     "eslint:src": "eslint src/**/*{.ts,.tsx} --ignore-pattern '**/*.spec.tsx'",
     "eslint:stories": "eslint stories/**/*.stories.tsx",
@@ -71,6 +71,7 @@
     "@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.2",
     "classnames": "^2.3.2",
     "currency.js": "^2.0.4",
@@ -80,6 +81,7 @@
     "react-datepicker": "^4.21.0",
     "react-dropzone": "^14.2.3",
     "react-responsive-pagination": "^2.2.3",
+    "react-select": "^5.8.0",
     "react-toastify": "^9.1.3"
   },
   "devDependencies": {
@@ -145,5 +147,5 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^13.3.1"
   },
-  "gitHead": "23988e33fc79ed7d7d74095a9c3114ef529cb458"
+  "gitHead": "a37c9aa8e3eac83d13f9c2b8837334aa35ad0128"
 }

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

@@ -19,7 +19,7 @@ $btn-padding-y-lg: .875rem !default;
 $btn-padding-x-lg: $spacer-4 !default;
 $btn-font-size-lg: $h6-font-size !default;
 
-$btn-border-width: 2px !default;
+$btn-border-width: 1px !default;
 
 $btn-font-weight: $font-weight-normal !default;
 $btn-box-shadow: none !default;

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

@@ -40,10 +40,10 @@ $input-font-size-lg: $input-font-size !default;
 $input-bg: var(--#{$prefix}white) !default;
 $input-disabled-color: var(--#{$prefix}gray) !default;
 $input-disabled-bg: var(--#{$prefix}gray-100) !default;
-$input-disabled-border-color: var(--#{$prefix}gray-200) !default;
+$input-disabled-border-color: var(--#{$prefix}gray-300) !default;
 
 $input-color: var(--#{$prefix}gray) !default;
-$input-border-color: var(--#{$prefix}gray-200) !default;      // unused
+$input-border-color: var(--#{$prefix}gray-300) !default;      // unused
 $input-border-width: $input-btn-border-width !default;          // unused
 $input-box-shadow: $box-shadow-inset !default;                  // unused
 

package/src/style/components/_+import.scss

@@ -56,6 +56,7 @@
 @import "d-paginator";
 @import "d-card-account";
 @import "d-tooltip";
+@import "d-select";
 
 // TODO: review.
 @import "d-permission-group";

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

@@ -2,7 +2,7 @@
   --#{$prefix}badge-bg: #{$badge-bg};
   --#{$prefix}badge-dot-height: #{$badge-dot-height};
 
-  display: block;
+  display: inline-block;
   background-color: var(--#{$prefix}badge-bg);
 
   @each $theme, $value in $theme-colors {

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

@@ -26,7 +26,7 @@
   --#{$prefix}btn-sm-font-size: #{$btn-font-size-sm};
   --#{$prefix}btn-sm-border-radius: var(--#{$prefix}btn-component-sm-border-radius, #{$btn-border-radius-sm});
 
-  display: flex;
+  display: inline-flex;
   flex-direction: row;
   gap: var(--#{$prefix}btn-gap, $spacer-2);
   align-items: center;
@@ -57,6 +57,7 @@
   &:hover,
   &.hover {
     color: var(--#{$prefix}btn-hover-color);
+    text-decoration: none;
     background-color: var(--#{$prefix}btn-hover-bg);
     border-color: var(--#{$prefix}btn-hover-border-color);
   }
@@ -155,6 +156,10 @@
   }
 
   .btn-link-#{$color} {
+    span {
+      text-decoration: underline;
+    }
+
     @include df-button-link-variant($color);
   }
 }

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

@@ -5,15 +5,13 @@
   --#{$prefix}icon-padding: var(--#{$prefix}icon-component-padding, 0);
   --#{$prefix}icon-loading-duration: var(--#{$prefix}icon-component-loading-duration, 1.8);
 
-  // we need to use important in this case to avoid to use the display of the family class
-  display: inline-flex !important; // stylelint-disable-line declaration-no-important
+  display: inline-flex !important; /* stylelint-disable-line declaration-no-important */
   align-items: center;
   justify-content: center;
   width: var(--#{$prefix}icon-size);
   height: var(--#{$prefix}icon-size);
   padding: var(--#{$prefix}icon-padding);
-  // we need to use important in this case to avoid to use the font-size of the family class
-  font-size: var(--#{$prefix}icon-size) !important; // stylelint-disable-line declaration-no-important
+  font-size: var(--#{$prefix}icon-size) !important; /* stylelint-disable-line declaration-no-important */
   color: var(--#{$prefix}icon-color);
   background-color: var(--#{$prefix}icon-bg-color);
   border-radius: var(--#{$prefix}icon-padding);

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

@@ -7,8 +7,6 @@
   --#{$prefix}input-label-padding-x: #{$form-label-padding-x};
   --#{$prefix}input-label-padding-y: #{$form-label-padding-y};
   --#{$prefix}input-label-gap: #{$form-label-gap};
-  // label if input has value
-  --#{$prefix}input-label-has-value-color: #{$form-label-has-value-color};
 
   // input group
   --#{$prefix}input-group-border-color: #{$input-group-border-color};
@@ -31,7 +29,7 @@
   // input disabled
   --#{$prefix}input-group-disabled-border-color: #{$input-disabled-border-color};
   --#{$prefix}input-group-disabled-bg: #{$input-disabled-bg};
-  --#{$prefix}input-group-disabled-color: #{$input-group-disabled-color};
+  --#{$prefix}input-group-disabled-color: #{$input-disabled-color};
 
   display: flex;
   flex-direction: column;
@@ -74,7 +72,7 @@
   }
 
   // not empty
-  .input-group:not(:focus-within):not(.has-validation):has(.form-control:not(:placeholder-shown, :disabled)) {
+  .input-group:not(:focus-within):not(.has-validation):has(.form-control:not(:placeholder-shown)) {
     border-color: var(--#{$prefix}input-group-hover-border-color);
   }
 
@@ -95,9 +93,7 @@
       }
 
       .d-input-validation-icon {
-        .d-icon {
-          --#{$prefix}icon-color: #{$tooltip-bg-color};
-        }
+        --#{$prefix}icon-color: #{$tooltip-bg-color};
       }
     }
   }
@@ -144,10 +140,6 @@
   .input-group-text {
     border: 0;
     outline: 0;
-
-    &:disabled {
-      color: var(--#{$prefix}input-group-disabled-color);
-    }
   }
 
   // input disabled
@@ -157,11 +149,9 @@
 
 
   &:has(.form-control:disabled) {
-    border-color: var(--#{$prefix}input-group-disabled-color);
 
     // input addons disabled
     .input-group-text {
-      color: var(--#{$prefix}input-group-disabled-color);
       background: var(--#{$prefix}input-group-disabled-bg);
     }
 

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

@@ -0,0 +1,252 @@
+// stylelint-disable selector-class-pattern
+
+.d-select {
+  --#{$prefix}input-gap: #{$spacer-2};
+
+  // label
+  --#{$prefix}input-label-color: #{$form-label-color};
+  --#{$prefix}input-label-font-weight: #{$form-label-font-weight};
+  --#{$prefix}input-label-font-size: #{$form-label-font-size};
+  --#{$prefix}input-label-padding-x: #{$form-label-padding-x};
+  --#{$prefix}input-label-padding-y: #{$form-label-padding-y};
+  --#{$prefix}input-label-gap: #{$form-label-gap};
+
+  // input group
+  --#{$prefix}input-group-border-color: #{$input-group-border-color};
+  --#{$prefix}input-group-border-width: #{$input-group-border-width};
+  --#{$prefix}input-group-border-radius: #{$input-group-border-radius};
+  // input group hover
+  --#{$prefix}input-group-hover-border-color: #{$input-group-hover-border-color};
+  // input group focus
+  --#{$prefix}input-group-focus-border-color: #{$input-group-focus-border-color};
+  --#{$prefix}input-group-focus-box-shadow: #{$input-group-focus-box-shadow};
+
+  // input
+  --#{$prefix}input-padding-y: #{$input-padding-y};
+  --#{$prefix}input-padding-x: #{$input-padding-x};
+  --#{$prefix}input-font-family: #{$input-font-family};
+  --#{$prefix}input-font-size: #{$input-font-size};
+  --#{$prefix}input-font-weight: #{$input-font-weight};
+  --#{$prefix}input-line-height: #{$input-line-height};
+  --#{$prefix}input-color: #{$input-color};
+  --#{$prefix}input-bg: #{$input-bg};
+  --#{$prefix}input-focus-color: #{$input-focus-color};
+  --#{$prefix}input-focus-bg: #{$input-focus-bg};
+  --#{$prefix}input-placeholder-color: #{$input-placeholder-color};
+
+  // hint
+  --#{$prefix}input-form-text-padding: #{$form-control-padding-y} #{$form-control-padding-x};
+  --#{$prefix}input-form-text-gap: #{$form-control-gap};
+  --#{$prefix}input-form-text-color: #{$form-control-color};
+
+  // input disabled
+  --#{$prefix}input-group-disabled-border-color: #{$input-disabled-border-color};
+  --#{$prefix}input-group-disabled-bg: #{$input-disabled-bg};
+  --#{$prefix}input-group-disabled-color: #{$input-disabled-color};
+
+  // select
+  --#{$prefix}select-menu-shadow: #{$box-shadow-sm};
+
+  --#{$prefix}select-option-focus-bg: var(--#{$prefix}gray-100);
+
+  --#{$prefix}select-option-selected-color: var(--#{$prefix}secondary);
+  --#{$prefix}select-option-selected-bg: var(--#{$prefix}gray-100);
+
+  --#{$prefix}select-option-is-checkbox-font-size: var(--#{$prefix}body-font-size);
+  --#{$prefix}select-option-is-checkbox-font-weight: var(--#{$prefix}ref-fw-normal);
+  --#{$prefix}select-option-is-checkbox-color: var(--#{$prefix}gray-900);
+
+  --#{$prefix}select-option-has-icon-icon-size: #{$spacer-3};
+
+  --#{$prefix}select-multi-value-padding-x: var(--#{$prefix}input-gap);
+  --#{$prefix}select-multi-value-padding-y: 0;
+  --#{$prefix}select-multi-value-margin-right: var(--#{$prefix}input-gap);
+  --#{$prefix}select-multi-value-background: var(--#{$prefix}gray-100);
+  --#{$prefix}select-multi-value-border-radius: #{$spacer-1};
+  --#{$prefix}select-multi-value-label-color: var(--#{$prefix}secondary);
+
+  --#{$prefix}select-indicator-width: #{$spacer-4};
+  --#{$prefix}select-indicator-height: #{$spacer-4};
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--#{$prefix}input-gap);
+  align-items: flex-start;
+
+  // focus
+  &:focus-within {
+    .input-group {
+      border-color: var(--#{$prefix}input-group-focus-border-color);
+      box-shadow: var(--#{$prefix}input-group-focus-box-shadow);
+    }
+  }
+
+  .d-select-control {
+    display: flex;
+    flex-direction: column;
+    gap: var(--#{$prefix}input-gap);
+    width: 100%;
+  }
+
+  label {
+    display: inline-flex;
+    flex-direction: row;
+    gap: var(--#{$prefix}input-label-gap);
+    align-items: center;
+
+    .d-select-icon {
+      .d-icon {
+        --#{$prefix}icon-color: var(--#{$prefix}focus-ring-color);
+      }
+    }
+  }
+
+  // input with elements
+  .input-group {
+    border: var(--#{$prefix}input-group-border-width) solid var(--#{$prefix}input-group-border-color);
+    border-radius: var(--#{$prefix}input-group-border-radius);
+  }
+
+  // not empty
+  .input-group:not(.disabled):not(:focus-within):not(.has-validation):has(.d-select__value-container--has-value) {
+    border-color: var(--#{$prefix}input-group-hover-border-color);
+  }
+
+  // input hint
+  .input-group ~ .form-text {
+    display: inline-flex;
+    flex-direction: row;
+    gap: var(--#{$prefix}input-form-text-gap);
+    align-items: center;
+    padding: var(--#{$prefix}input-form-text-padding);
+    color: var(--#{$prefix}input-form-text-color);
+  }
+
+  // select control
+  .d-select-component {
+    border-radius: var(--#{$prefix}input-group-border-radius);
+  }
+
+  .d-select__control {
+    width: 100%;
+    padding: var(--#{$prefix}input-padding-y) var(--#{$prefix}input-padding-x);
+    font-family: var(--#{$prefix}input-font-family);
+    @include rfs($input-font-size, --#{$prefix}input-font-size);
+    font-weight: var(--#{$prefix}input-font-weight);
+    line-height: var(--#{$prefix}input-line-height);
+    color: var(--#{$prefix}input-color);
+    appearance: none; // Fix appearance for date inputs in Safari
+    background-color: var(--#{$prefix}input-bg);
+    background-clip: padding-box;
+    // border: $input-border-width solid $input-border-color;
+
+    @include border-radius($input-border-radius, 0);
+
+    @include transition($input-transition);
+
+    // Customize the `:focus` state to imitate native WebKit styles.
+    &:focus {
+      color: var(--#{$prefix}input-focus-color);
+      background-color: var(--#{$prefix}input-focus-bg);
+      outline: 0;
+    }
+  }
+
+  .d-select__placeholder {
+    color: var(--#{$prefix}input-placeholder-color);
+    // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
+    opacity: 1;
+  }
+
+  // select menu
+  .d-select__menu-list {
+    top: calc(var(--#{$prefix}input-group-border-width) * 2);
+    background: var(--#{$prefix}input-bg);
+    border-radius: var(--#{$prefix}input-group-border-radius);
+    box-shadow: var(--#{$prefix}select-menu-shadow);
+  }
+
+  .d-select__control--menu-is-open .d-select__dropdown-indicator {
+    transform: rotateX(180deg);
+  }
+
+  // select option
+  .d-select__option {
+    display: block;
+    padding: var(--#{$prefix}input-padding-y) var(--#{$prefix}input-padding-x);
+  }
+
+  .d-select__option--is-focused {
+    background: var(--#{$prefix}select-option-focus-bg);
+  }
+
+  .d-select__option--is-selected {
+    color: var(--#{$prefix}select-option-selected-color);
+    background: var(--#{$prefix}select-option-selected-bg);
+  }
+
+  // select option with checkbox
+  .d-select__option--is-checkbox {
+    padding: 0;
+
+    > label {
+      width: 100%;
+      padding: var(--#{$prefix}input-padding-x);
+    }
+
+    .form-check-input {
+      margin-right: var(--#{$prefix}input-padding-x);
+    }
+  }
+
+  .d-select__option--is-checkbox label {
+    font-size: var(--#{$prefix}select-option-is-checkbox-font-size);
+    font-weight: var(--#{$prefix}select-option-is-checkbox-font-weight);
+    color: var(--#{$prefix}select-option-is-checkbox-color);
+  }
+
+  // select multi control
+  .d-select__multi-value {
+    padding: var(--#{$prefix}select-multi-value-padding-y) var(--#{$prefix}select-multi-value-padding-x);
+    margin-right: var(--#{$prefix}select-multi-value-margin-right);
+    background: var(--#{$prefix}select-multi-value-background);
+    border-radius: var(--#{$prefix}select-multi-value-border-radius);
+  }
+
+  .d-select__multi-value__label {
+    color: var(--#{$prefix}select-multi-value-label-color);
+  }
+
+  .d-select__control--has-icon,
+  .d-select__option--has-icon {
+    display: flex;
+    flex-direction: row;
+    gap: var(--#{$prefix}input-padding-x);
+    align-items: center;
+    white-space: nowrap;
+
+    .d-icon {
+      --bs-icon-size: var(--#{$prefix}select-option-has-icon-icon-size);
+    }
+  }
+
+  .d-select__indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--#{$prefix}select-indicator-width);
+    height: var(--#{$prefix}select-indicator-height);
+  }
+
+  .d-select__indicator-separator {
+    width: var(--#{$prefix}input-gap);
+  }
+
+  &.disabled .d-select__control {
+    background: var(--#{$prefix}input-group-disabled-bg);
+  }
+
+  &.disabled .input-group {
+    border-color: var(--#{$prefix}input-group-disabled-border-color);
+  }
+}

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

@@ -4,7 +4,6 @@
   --#{$prefix}tabs-nav-padding-y: #{$nav-nav-padding-y};
   --#{$prefix}tabs-link-border-height: #{$nav-link-border-height};
   --#{$prefix}tabs-link-line-height: #{$nav-link-line-height};
-  --#{$prefix}tabs-link-hover-color: #{$nav-link-hover-color};
   --#{$prefix}tabs-link-border-border-radius: #{$nav-link-border-border-radius};
   --#{$prefix}tabs-link-border-active-color: #{$nav-link-border-active-color};
   --#{$prefix}tabs-link-border-active-font-weight: #{$nav-link-border-active-font-weight};
@@ -22,10 +21,6 @@
     position: relative;
     line-height: var(--#{$prefix}tabs-link-line-height);
 
-    &:hover {
-      color: var(--#{$prefix}tabs-link-hover-color);
-    }
-
     &.active {
       font-weight: var(--#{$prefix}tabs-link-border-active-font-weight);
       color: var(--#{$prefix}tabs-link-border-active-color);

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

@@ -1,13 +0,0 @@
-import type { BaseProps } from '../interface';
-type Props = BaseProps & {
-    icon: string;
-    theme: string;
-    name: string;
-    number: string;
-    balance: string;
-    balanceText: string;
-    onClick: () => void;
-    actionText: string;
-};
-export default function DCardAccount({ className, style, icon, theme, name, number, balance, balanceText, onClick, actionText, }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,2 +0,0 @@
-import DCardAccount from './DCardAccount';
-export default DCardAccount;

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

@@ -1,22 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import type { BaseProps, FamilyIconProps } from '../interface';
-type Props = BaseProps & FamilyIconProps & PropsWithChildren<{
-    /**
-     * Icon name
-     */
-    icon: string;
-    /**
-     * Icon theme
-     */
-    iconTheme?: string;
-    /**
-     * Icon size
-     */
-    iconSize?: string;
-    /**
-     * Title
-     */
-    title: string;
-}>;
-export default function DCollapseIconText({ children, icon, iconSize, iconTheme, title, iconFamilyClass, iconFamilyPrefix, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,2 +0,0 @@
-import DCollapseIconText from './DCollapseIconText';
-export default DCollapseIconText;