@redsift/design-system 9.0.0-alpha.13 → 9.0.0-alpha.14

package/index.d.ts

@@ -2153,7 +2153,7 @@ interface ItemProps extends Omit<ComponentProps<'div'>, 'onClick'>, ContainerPro
     /** Method to handle component change. */
     onClick?: (isSelected: boolean, value?: string, event?: MouseEvent<HTMLDivElement>, state?: ListboxContextProps) => void | ComponentProps<'div'>['onClick'];
     /** Value. */
-    value?: string;
+    value: string;
 }
 type StyledItemProps = Omit<ItemProps, 'color' | 'onClick' | 'value'> & {
     $isActive: ItemProps['isActive'];

package/index.js

@@ -3754,7 +3754,7 @@ SideNavigationMenuBar.displayName = COMPONENT_NAME$A;
 
 const _excluded$z = ["title", "href", "ref"],
   _excluded2$1 = ["title", "children", "ref"],
-  _excluded3$1 = ["title", "href", "ref"];
+  _excluded3 = ["title", "href", "ref"];
 const isMenu = item => {
   return item.children !== undefined;
 };
@@ -3799,7 +3799,7 @@ const useSideNavigationMenuBar = _ref => {
             href,
             ref
           } = child,
-          rest = _objectWithoutProperties(child, _excluded3$1);
+          rest = _objectWithoutProperties(child, _excluded3);
         return /*#__PURE__*/React__default.createElement(SideNavigationMenuItem, _extends$1({
           key: title,
           href: href,
@@ -4570,10 +4570,10 @@ const StyledCardBody = styled.div`
   ${baseContainer}
 
   color: var(--redsift-color-neutral-darkgrey);
-  font-family: var(--redsift-typography-body2-font-family);
-  font-size: var(--redsift-typography-body2-font-size);
-  font-weight: var(--redsift-typography-body2-font-weight);
-  line-height: var(--redsift-typography-body2-line-height);
+  font-family: var(--redsift-typography-body-font-family);
+  font-size: var(--redsift-typography-body-font-size);
+  font-weight: var(--redsift-typography-body-font-weight);
+  line-height: var(--redsift-typography-body-line-height);
   padding: 16px 0px;
 `;
 
@@ -10696,6 +10696,7 @@ function useListboxItem(props) {
 function useMenuItem(props) {
   const {
     domElementRef,
+    value,
     id,
     isDisabled,
     onClick
@@ -10708,7 +10709,8 @@ function useMenuItem(props) {
   } = useFocusOnListItem({
     domElementRef,
     isDisabled: isDisabled,
-    id
+    id,
+    value
   });
   const handleKeyDown = useCallback(event => {
     const code = event.code;
@@ -10737,8 +10739,7 @@ function useMenuItem(props) {
 }
 
 const _excluded$b = ["children", "className", "defaultSelected", "id", "isActive", "isDisabled", "isHovered", "isSelected", "value"],
-  _excluded2 = ["children", "className", "id", "isActive", "isDisabled", "isHovered", "onClick"],
-  _excluded3 = ["value"];
+  _excluded2 = ["children", "className", "id", "isActive", "isDisabled", "isHovered", "onClick", "value"];
 const COMPONENT_NAME$9 = 'Item';
 const CLASSNAME$9 = 'redsift-item';
 const DEFAULT_PROPS$9 = {};
@@ -10793,13 +10794,15 @@ const RenderedMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       children,
       className,
-      id,
+      id: propsId,
       isActive,
       isDisabled: propsIsDisabled,
       isHovered,
-      onClick
+      onClick,
+      value
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded2);
+  const id = propsId !== null && propsId !== void 0 ? propsId : value;
   const _ref = useRef();
   const divRef = ref !== null && ref !== void 0 ? ref : _ref;
   const {
@@ -10810,6 +10813,7 @@ const RenderedMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
     handleClick
   } = useMenuItem({
     domElementRef: divRef,
+    value,
     id,
     isDisabled: propsIsDisabled,
     onClick: onClick
@@ -10828,7 +10832,7 @@ const RenderedMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
     ref: divRef,
     onKeyDown: handleKeyDown,
     tabIndex: tabIndex
-  }), children);
+  }), children !== null && children !== void 0 ? children : value);
 });
 
 /**
@@ -10836,14 +10840,12 @@ const RenderedMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
  */
 const Item = /*#__PURE__*/forwardRef((props, ref) => {
   const {
-      value
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded3);
+    value
+  } = props;
   const focusContext = useContext(FocusWithinGroupContext);
   const isListbox = focusContext.state.listRole === 'listbox';
   if (!focusContext.state.filter) {
-    return isListbox ? /*#__PURE__*/React__default.createElement(RenderedListboxItem, _extends$1({}, forwardedProps, {
-      value: value,
+    return isListbox ? /*#__PURE__*/React__default.createElement(RenderedListboxItem, _extends$1({}, props, {
       ref: ref
     })) : /*#__PURE__*/React__default.createElement(RenderedMenuItem, _extends$1({}, props, {
       ref: ref
@@ -10855,22 +10857,19 @@ const Item = /*#__PURE__*/forwardRef((props, ref) => {
     caseSensitive
   } = focusContext.state.filter;
   if (!filterValue) {
-    return isListbox ? /*#__PURE__*/React__default.createElement(RenderedListboxItem, _extends$1({}, forwardedProps, {
-      value: value,
+    return isListbox ? /*#__PURE__*/React__default.createElement(RenderedListboxItem, _extends$1({}, props, {
       ref: ref
     })) : /*#__PURE__*/React__default.createElement(RenderedMenuItem, _extends$1({}, props, {
       ref: ref
     }));
   } else if (caseSensitive && (type === 'startsWith' && value.startsWith(filterValue) || type === 'contains' && value.includes(filterValue) || type === 'endsWith' && value.endsWith(filterValue))) {
-    return isListbox ? /*#__PURE__*/React__default.createElement(RenderedListboxItem, _extends$1({}, forwardedProps, {
-      value: value,
+    return isListbox ? /*#__PURE__*/React__default.createElement(RenderedListboxItem, _extends$1({}, props, {
       ref: ref
     })) : /*#__PURE__*/React__default.createElement(RenderedMenuItem, _extends$1({}, props, {
       ref: ref
     }));
   } else if (!caseSensitive && (type === 'startsWith' && value.toLowerCase().startsWith(filterValue.toLowerCase()) || type === 'contains' && value.toLowerCase().includes(filterValue.toLowerCase()) || type === 'endsWith' && value.toLowerCase().endsWith(filterValue.toLowerCase()))) {
-    return isListbox ? /*#__PURE__*/React__default.createElement(RenderedListboxItem, _extends$1({}, forwardedProps, {
-      value: value,
+    return isListbox ? /*#__PURE__*/React__default.createElement(RenderedListboxItem, _extends$1({}, props, {
       ref: ref
     })) : /*#__PURE__*/React__default.createElement(RenderedMenuItem, _extends$1({}, props, {
       ref: ref
@@ -12290,11 +12289,8 @@ const StyledTextField = styled.div`
             max-width: calc(100% - 24px);
             transform: translate(${$variant === TextFieldVariant.underline ? '0px' : '14px'}, 16px) scale(1);
           ` : css`
-            font-family: var(--redsift-typography-body2-font-family);
-            font-size: var(--redsift-typography-body2-font-size);
-            font-weight: var(--redsift-typography-body2-font-weight);
             max-width: calc(133% - 32px);
-            transform: translate(${$variant === TextFieldVariant.underline ? '0px' : '14px'}, -1px) scale(0.75);
+            transform: translate(${$variant === TextFieldVariant.underline ? '0px' : '14px'}, 1px) scale(0.733);
           `}
 
       ${$isDisabled ? css`
@@ -12353,7 +12349,7 @@ const StyledTextField = styled.div`
     .redsift-text-field-input-wrapper__fieldset {
       border-style: solid;
       bottom: 0;
-      left: 0;
+      left: 1px;
       margin: 0;
       min-width: 0%;
       overflow: hidden;
@@ -12385,7 +12381,7 @@ const StyledTextField = styled.div`
     .redsift-text-field-input-wrapper-fieldset__legend {
       display: block;
       float: unset;
-      font-size: 0.7em;
+      font-size: 11px;
       height: 11px;
       overflow: hidden;
       padding: 0;
@@ -12488,10 +12484,8 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
   } = useFocusWithin({
     onFocusWithinChange: isFocusWithin => setFocusWithin(isFocusWithin)
   });
-  const [value, setValue] = useState(propsValue !== null && propsValue !== void 0 ? propsValue : defaultValue);
-  useEffect(() => {
-    setValue(propsValue !== null && propsValue !== void 0 ? propsValue : defaultValue);
-  }, [propsValue, defaultValue]);
+  const [value, setValue] = useState(defaultValue);
+  const isControlled = propsValue !== null && propsValue !== undefined;
   warnIfNoAccessibleLabelFound(props, [label]);
   const handleChange = useCallback(event => {
     if (isDisabled || isReadOnly) {
@@ -12519,12 +12513,12 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     setValue('');
   }, [onChange]);
   return /*#__PURE__*/React__default.createElement(StyledTextField, _extends$1({}, focusWithinProps, forwardedProps, {
-    $hasContent: isFocusWithin || Boolean(value) || Boolean(placeholder),
+    $hasContent: isFocusWithin || Boolean(isControlled ? propsValue : value) || Boolean(placeholder),
     $hasLeftIcon: Boolean(leftIcon),
     $isColored: isColored,
     $isDisabled: isDisabled,
     $isFocusVisible: isFocusVisible,
-    $isInvalid: isInvalid || isRequired && !value,
+    $isInvalid: isInvalid || isRequired && !(isControlled ? propsValue : value),
     $isRequired: isRequired,
     $isFocused: isFocused,
     $variant: variant,
@@ -12547,7 +12541,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
       onFocusProps === null || onFocusProps === void 0 ? void 0 : onFocusProps(event);
     },
     "aria-disabled": isDisabled,
-    "aria-invalid": isInvalid || isRequired && !value,
+    "aria-invalid": isInvalid || isRequired && !(isControlled ? propsValue : value),
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
     "aria-readonly": isReadOnly,
@@ -12560,7 +12554,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     placeholder: placeholder,
     ref: inputRef,
     type: type,
-    value: value
+    value: isControlled ? propsValue : value
   })), hasClearButton || internal || after ? /*#__PURE__*/React__default.createElement(Flexbox, {
     className: `${TextField.className}-input-wrapper__toolbar`,
     gap: "8px"
@@ -12571,11 +12565,11 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
   }, hasClearButton !== true && hasClearButton, {
     onClick: handleClear,
     className: "right clear"
-  })) : null, typeof internal === 'function' ? internal(value, isDisabled, isInvalid || isRequired && !value, isRequired) : internal, (hasClearButton || internal) && after ? /*#__PURE__*/React__default.createElement("span", {
+  })) : null, typeof internal === 'function' ? internal(isControlled ? propsValue : value, isDisabled, isInvalid || isRequired && !(isControlled ? propsValue : value), isRequired) : internal, (hasClearButton || internal) && after ? /*#__PURE__*/React__default.createElement("span", {
     style: {
       borderLeft: '1px solid var(--redsift-color-neutral-midgrey)'
     }
-  }) : null, typeof after === 'function' ? after(value, isDisabled, isInvalid || isRequired && !value, isRequired) : after) : null, /*#__PURE__*/React__default.createElement("fieldset", {
+  }) : null, typeof after === 'function' ? after(isControlled ? propsValue : value, isDisabled, isInvalid || isRequired && !(isControlled ? propsValue : value), isRequired) : after) : null, /*#__PURE__*/React__default.createElement("fieldset", {
     "aria-hidden": "true",
     className: `${TextField.className}-input-wrapper__fieldset`
   }, /*#__PURE__*/React__default.createElement("legend", {