@soul-refiner/design-system 0.2.98 → 0.2.100

package/dist/components/actions/dropdown/dropdown.d.ts

@@ -19,9 +19,10 @@ export interface DropdownProps extends NativeProps, React.PropsWithChildren {
     additionalOptions?: Omit<DropdownOptionProps, 'selected' | 'onClick'>[];
     additionalOnChange?: (value: string) => void;
     defaultAdditionalValue?: string;
+    useFullWidth?: boolean;
 }
 declare const Dropdown: {
-    ({ checkbox, children, closeOnChange, closeOnBlur, defaultValue, disabled, hasArrow, maintainState, multiple, offset, onChange, open: openDirection, options, sx, trigger, containerSx, additionalOptions, additionalOnChange, defaultAdditionalValue, ...rest }: DropdownProps): React.JSX.Element;
+    ({ checkbox, children, closeOnChange, closeOnBlur, defaultValue, disabled, hasArrow, maintainState, multiple, offset, onChange, open: openDirection, options, sx, trigger, containerSx, additionalOptions, additionalOnChange, defaultAdditionalValue, useFullWidth, ...rest }: DropdownProps): React.JSX.Element;
     Option: {
         ({ checkbox, disabled, icon, label, onClick, selected, sublabel, sx, value, color, }: DropdownOptionProps): React.JSX.Element;
         displayName: string;

package/dist/components/actions/dropdown/dropdown.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Box, Checkbox, P } from '../../';
-const Dropdown = ({ checkbox, children, closeOnChange = true, closeOnBlur = true, defaultValue = '', disabled = false, hasArrow, maintainState = true, multiple, offset = [0, 16], onChange, open: openDirection = 'right', options, sx, trigger, containerSx, additionalOptions, additionalOnChange, defaultAdditionalValue, ...rest }) => {
+const Dropdown = ({ checkbox, children, closeOnChange = true, closeOnBlur = true, defaultValue = '', disabled = false, hasArrow, maintainState = true, multiple, offset = [0, 16], onChange, open: openDirection = 'right', options, sx, trigger, containerSx, additionalOptions, additionalOnChange, defaultAdditionalValue, useFullWidth = false, ...rest }) => {
     const id = React.useId();
     const wrapperRef = React.useRef(null);
     const optionsRef = React.useRef(null);
@@ -104,7 +104,7 @@ const Dropdown = ({ checkbox, children, closeOnChange = true, closeOnBlur = true
                 trigger.type?.name !== 'Button')
             ? { onClick: handleOpen }
             : { isDropdownOpen: open, onClick: handleOpen }),
-        open && (React.createElement(Container, { "$hasArrow": hasArrow, "$offset": offset, "$openDirection": openDirection, ref: optionsRef, "$sx": containerSx },
+        open && (React.createElement(Container, { "$hasArrow": hasArrow, "$offset": offset, "$openDirection": openDirection, ref: optionsRef, "$sx": containerSx, "$useFullWidth": useFullWidth },
             React.createElement("div", { style: { display: 'flex' } },
                 React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } }, dropdownOptions),
                 !!additionalOptions?.length && (React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } }, additionalOptions.map((additionalOption) => (React.createElement(Option, { key: additionalOption.value, onClick: handleAdditionalChange, selected: additionalSelected === additionalOption.value, label: additionalOption.label, value: additionalOption.value }))))))))));
@@ -119,7 +119,7 @@ const Container = styled.div `
   z-index: 1;
   background-color: var(--color-white);
   position: absolute;
-  width: max-content;
+  ${({ $useFullWidth }) => $useFullWidth ? 'width: 100%;' : 'width: max-content;'}
   z-index: 100;
   outline: none;
   cursor: pointer;

package/dist/components/input/text_input/text_input.d.ts

@@ -18,6 +18,7 @@ export type Props = {
     sx?: string;
     value: string | string[];
     isNumber?: boolean;
+    placeIconAtTheEnd?: boolean;
 };
 interface DisabledProps extends Props {
     disabled?: true;
@@ -35,5 +36,5 @@ interface WarningProps extends Props {
     warning?: true;
 }
 export type TextInputProps = DisabledProps | SuccessfulProps | WarningProps;
-export declare const TextInput: ({ bg, disabled, helperText, icon, label, maxCharacters, multiple, name, onChange, onMultipleChange, placeholder, size, successful, sx, value, warning, isNumber, }: TextInputProps) => React.JSX.Element;
+export declare const TextInput: ({ bg, disabled, helperText, icon, label, maxCharacters, multiple, name, onChange, onMultipleChange, placeholder, size, successful, sx, value, warning, isNumber, placeIconAtTheEnd, }: TextInputProps) => React.JSX.Element;
 export {};

package/dist/components/input/text_input/text_input.js

@@ -3,7 +3,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { Chip } from '../../feedback/chip/chip';
 import { CheckmarkCircle, AlertCircle } from '../../../icons';
-export const TextInput = ({ bg = 'var(--color-blue-10)', disabled, helperText, icon, label, maxCharacters, multiple, name, onChange, onMultipleChange, placeholder, size = 'large', successful, sx, value, warning, isNumber, }) => {
+export const TextInput = ({ bg = 'var(--color-blue-10)', disabled, helperText, icon, label, maxCharacters, multiple, name, onChange, onMultipleChange, placeholder, size = 'large', successful, sx, value, warning, isNumber, placeIconAtTheEnd = false, }) => {
     const id = React.useId();
     const isMultiple = multiple;
     const [multipleValueToAdd, setMultipleValueToAdd] = React.useState('');
@@ -45,7 +45,7 @@ export const TextInput = ({ bg = 'var(--color-blue-10)', disabled, helperText, i
     return (React.createElement(Label, { "$disabled": disabled, "$size": size, "$sx": sx },
         label,
         React.createElement(InputWrapper, { "$bg": bg, "$size": size, "$successful": successful, "$warning": warning },
-            icon,
+            !placeIconAtTheEnd && icon,
             isMultiple && (React.createElement(MultipleInputWrapper, { onSubmit: handleMultipleAdd },
                 value.filter(Boolean).map((item, index) => (React.createElement(Chip, { key: id + item + index, color: "blue", size: "small", onDismiss: () => handleMultipleItemRemoval(item) }, item))),
                 React.createElement(Input, { onChange: handleMultipleValueToAdd, onKeyDown: handleMultipleValueDelete, value: multipleValueToAdd, "$size": size }))),
@@ -54,10 +54,11 @@ export const TextInput = ({ bg = 'var(--color-blue-10)', disabled, helperText, i
                     : maxCharacters
                         ? value.slice(0, maxCharacters - 1)
                         : value, "$size": size, type: isNumber ? 'number' : 'text' })),
-            maxCharacters && !isNumber && (React.createElement(MaxCharactersText, { "$size": size },
+            maxCharacters && !isNumber && !placeIconAtTheEnd && (React.createElement(MaxCharactersText, { "$size": size },
                 value.length,
                 " / ",
                 maxCharacters)),
+            placeIconAtTheEnd && icon,
             successful && React.createElement(CheckmarkCircle, { color: "green-3" }),
             warning && React.createElement(AlertCircle, { color: "red-4" })),
         helperText && React.createElement(HelperText, { "$size": size }, helperText)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.98",
+  "version": "0.2.100",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {