@dynamic-framework/ui-react 1.34.0 → 1.35.0

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

@@ -1,9 +1,10 @@
 .d-input-pin {
   --#{$prefix}input-pin-form-gap: var(--#{$prefix}ref-spacer-1);
-
-  --#{$prefix}input-pin-form-control-size: 4rem;
   --#{$prefix}input-pin-form-control-focus-border-color: #{$input-focus-border-color};
   --#{$prefix}input-pin-form-control-focus-box-shadow: #{$input-focus-box-shadow};
+  --#{$prefix}input-pin-form-control-min-width: 2rem;
+  --#{$prefix}input-pin-form-control-max-width: 4rem;
+
 
   display: flex;
   flex-direction: column;
@@ -17,14 +18,16 @@
   }
 
   .form-control {
-    width: var(--#{$prefix}input-pin-form-control-size);
-    height: var(--#{$prefix}input-pin-form-control-size);
+    min-width: var(--#{$prefix}input-pin-form-control-min-width);
+    max-width: var(--#{$prefix}input-pin-form-control-max-width);
+    aspect-ratio: 1;
     text-align: center;
     box-shadow: none;
 
     &:has(~ .input-group-text) {
-      padding: var(--#{$prefix}ref-spacer-3) var(--#{$prefix}ref-spacer-4);
+      padding: var(--#{$prefix}ref-spacer-3) var(--#{$prefix}ref-spacer-3);
     }
+
   }
 
   .form-control::-webkit-inner-spin-button,

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

@@ -85,8 +85,8 @@
 
   .d-quick-action-button-text {
     display: flex;
-    flex-direction: column;
     flex-grow: 1;
+    flex-direction: column;
   }
 
   .d-quick-action-button-action-link,

package/src/style/components/_d-quick-action-check.scss

@@ -46,8 +46,8 @@
 
   .d-quick-action-check-detail {
     display: flex;
-    flex-direction: column;
     flex-grow: 1;
+    flex-direction: column;
   }
 
   .d-quick-action-check-line1 {

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

@@ -13,12 +13,17 @@
   --#{$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-multi-value-padding-x: var(--#{$prefix}select-gap);
-  --#{$prefix}select-multi-value-padding-y: 0;
+  --#{$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}gray-100);
+  --#{$prefix}select-multi-value-background: var(--#{$prefix}secondary-100);
   --#{$prefix}select-multi-value-border-radius: #{$spacer-1};
   --#{$prefix}select-multi-value-label-color: var(--#{$prefix}secondary);
+  --#{$prefix}select-multi-value-remove-color: var(--#{$prefix}secondary);
+  --#{$prefix}select-multi-value-remove-hover-color: var(--#{$prefix}white);
+  --#{$prefix}select-multi-value-remove-hover-background: var(--#{$prefix}primary);
+  --#{$prefix}select-indicator-separator-width: 1px;
+  --#{$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);
@@ -159,16 +164,27 @@
 
   // 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 {
+    padding: var(--#{$prefix}select-multi-value-padding);
     color: var(--#{$prefix}select-multi-value-label-color);
   }
 
+  .d-select__multi-value__remove {
+    color: var(--#{$prefix}select-multi-value-remove-color);
+
+    &:hover {
+      color: var(--#{$prefix}select-multi-value-remove-hover-color);
+      background-color: var(--#{$prefix}select-multi-value-remove-hover-background);
+      border-top-right-radius: inherit;
+      border-bottom-right-radius: inherit;
+    }
+  }
+
   .d-select__control--has-icon,
   .d-select__option--has-icon {
     display: flex;
@@ -188,12 +204,25 @@
     justify-content: center;
     width: var(--#{$prefix}select-indicator-width);
     height: var(--#{$prefix}select-indicator-height);
+
+    .d-icon {
+      --bs-icon-component-size: var(--#{$prefix}select-indicator-width);
+    }
   }
 
-  .d-select__indicator-separator {
-    width: var(--#{$prefix}select-gap);
+  .d-select__indicators {
+    .d-select__indicator-separator {
+      width: var(--#{$prefix}select-indicator-separator-width);
+      margin: var(--#{$prefix}select-indicator-separator-margin);
+      background-color: var(--#{$prefix}select-indicator-separator-color);
+
+      &:not(:first-child) {
+        --#{$prefix}select-indicator-separator-color: var(--#{$prefix}gray-100);
+      }
+    }
   }
 
+
   &.disabled .d-select__control {
     background: var(--#{$prefix}input-disabled-bg);
   }

package/src/style/components/_d-stepper-desktop.scss

@@ -134,8 +134,8 @@
 
       .d-step-text-container {
         display: flex;
-        flex-direction: column;
         flex-grow: 1;
+        flex-direction: column;
         align-items: flex-start;
         min-height: var(--#{$prefix}step-label-height);
         padding: var(--#{$prefix}step-vertical-label-padding);

package/src/style/helpers/_text-truncate.scss

@@ -1,8 +1,8 @@
 [class*="text-truncate-"] {
   display: -webkit-box;
-  -webkit-line-clamp: var(--#{$prefix}text-truncate);
-  -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
+  -webkit-line-clamp: var(--#{$prefix}text-truncate);
+  -webkit-box-orient: vertical;
   white-space: normal;
 }

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

@@ -1,24 +0,0 @@
-import type { ComponentProps } from 'react';
-import DButton from '../DButton';
-import type { BaseProps, ButtonVariant, ComponentSize, FamilyIconProps } from '../interface';
-type Props = BaseProps & FamilyIconProps & {
-    locale?: Locale;
-    date: Date;
-    decreaseMonth: () => void;
-    increaseMonth: () => void;
-    changeMonth: (monthNumber: number) => void;
-    changeYear: (yearNumber: number) => void;
-    prevMonthButtonDisabled: boolean;
-    nextMonthButtonDisabled: boolean;
-    iconPrevMonth: string;
-    iconNextMonth: string;
-    prevMonthAriaLabel?: string;
-    nextMonthAriaLabel?: string;
-    iconSize: ComponentSize;
-    buttonVariant: ButtonVariant;
-    buttonTheme: string;
-    minYearSelect: number;
-    maxYearSelect: number;
-} & Omit<ComponentProps<typeof DButton>, 'iconStart' | 'onClick' | 'disabled'>;
-export default function DDatePickerHeader({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, iconPrevMonth, iconNextMonth, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, prevMonthAriaLabel, nextMonthAriaLabel, iconSize, buttonVariant, buttonTheme, locale, style, className, minYearSelect, maxYearSelect, }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

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

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

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

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

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

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