@redsift/design-system 9.1.0 → 9.2.0

package/index.d.ts

@@ -9,7 +9,7 @@ type Comp<P, T = HTMLElement> = {
         ref?: Ref<T>;
     }): ReactElement | null;
     /** React component type. */
-    readonly $$typeof: symbol;
+    readonly $$typeof?: symbol;
     /** Component default props. */
     defaultProps?: Partial<P>;
     /** Component name. */
@@ -1516,7 +1516,6 @@ interface CheckboxProps extends Omit<ComponentProps<'label'>, 'onChange'>, Styli
     /**
      * Default select status.
      * Used for uncontrolled version.
-     * Shouldn't be used inside a group unless isControlled is force to true.
      */
     defaultSelected?: boolean;
     /** Custom props to pass to the input element. */
@@ -1525,8 +1524,6 @@ interface CheckboxProps extends Omit<ComponentProps<'label'>, 'onChange'>, Styli
     inputRef?: MutableRefObject<HTMLInputElement>;
     /** Whether the component should use the product colors or shades of grey. */
     isColored?: boolean;
-    /** Indicates that the component is forced to be controlled. */
-    isControlled?: boolean;
     /** Whether the component is disabled or not. */
     isDisabled?: boolean;
     /** Whether the checkbox status is indeterminate or not. */
@@ -1540,7 +1537,6 @@ interface CheckboxProps extends Omit<ComponentProps<'label'>, 'onChange'>, Styli
     /**
      * Whether the component is selected or not.
      * Used for controlled version.
-     * Shouldn't be used inside a group unless isControlled is force to true.
      */
     isSelected?: boolean;
     /** Name to pass to the input element. */

package/index.js

@@ -1328,17 +1328,19 @@ const StyledButton = styled.button`
   return $fullWidth ? `
         width: 100%;
         flex-grow: 1;
-
-        .redsift-icon.left {
-          margin-right: unset;
-        }
-
-        .redsift-icon.right {
-          margin-left: unset;
-        }
       ` : '';
 }}
 
+  .redsift-icon.left {
+    margin-right: unset;
+    align-items: center;
+  }
+
+  .redsift-icon.right {
+    margin-left: unset;
+    align-items: center;
+  }
+
   ${focusRing}
 `;
 
@@ -4429,10 +4431,6 @@ const StyledCardHeader = styled.div`
     gap: 8px;
     padding: 10px 0px;
     margin: 0px;
-
-    .redsift-icon {
-      color: var(--redsift-color-neutral-black);
-    }
   }
 
   .redsift-card-header__subheader {
@@ -5130,7 +5128,7 @@ const StyledCheckbox = styled.label`
   }
 `;
 
-const _excluded$l = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isControlled", "isDisabled", "isIndeterminate", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "value"];
+const _excluded$l = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isDisabled", "isIndeterminate", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "value"];
 const COMPONENT_NAME$m = 'Checkbox';
 const CLASSNAME$m = 'redsift-checkbox';
 const DEFAULT_PROPS$m = {
@@ -5155,7 +5153,6 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
       inputProps,
       inputRef,
       isColored,
-      isControlled,
       isDisabled,
       isIndeterminate,
       isInvalid,
@@ -5175,9 +5172,10 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
   });
   isDisabled = (_isDisabled = isDisabled) !== null && _isDisabled !== void 0 ? _isDisabled : groupState === null || groupState === void 0 ? void 0 : groupState.isDisabled;
   isReadOnly = (_isReadOnly = isReadOnly) !== null && _isReadOnly !== void 0 ? _isReadOnly : groupState === null || groupState === void 0 ? void 0 : groupState.isReadOnly;
-  const [isSelected, setSelected] = useState((_ref = propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected) !== null && _ref !== void 0 ? _ref : groupState === null || groupState === void 0 ? void 0 : groupState.value.includes(value));
+  const [isSelected, setSelected] = useState(Boolean((_ref = propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected) !== null && _ref !== void 0 ? _ref : groupState === null || groupState === void 0 ? void 0 : groupState.value.includes(value)));
+  const isControlled = propsIsSelected !== null && propsIsSelected !== undefined;
   useEffect(() => {
-    setSelected(propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected);
+    setSelected(Boolean(propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected));
   }, [propsIsSelected, defaultSelected]);
   useEffect(() => {
     if (groupState) {
@@ -5185,7 +5183,7 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
     }
   }, [groupState === null || groupState === void 0 ? void 0 : groupState.value]);
   warnIfNoAccessibleLabelFound(props, [children]);
-  if (groupState && !isControlled) {
+  if (groupState) {
     if (propsIsSelected != null) {
       console.warn('isSelected is unsupported on individual <Checkbox> elements within a <CheckboxGroup> unless the <Checkbox> is controlled. Please apply this prop to the group instead or pass isControlled to the component.');
     }
@@ -5207,18 +5205,20 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
         groupState.removeValue(value);
       }
     }
-    if (onChange) {
-      onChange(!isSelected, value, name, event, groupState);
+    if (isControlled) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(!propsIsSelected, value, name, event, groupState);
+    } else {
+      setSelected(!isSelected);
+      onChange === null || onChange === void 0 ? void 0 : onChange(!isSelected, value, name, event, groupState);
     }
-    setSelected(event.target.checked);
-  }, [onChange, groupState]);
+  }, [onChange, groupState, isSelected, propsIsSelected]);
   return /*#__PURE__*/React__default.createElement(StyledCheckbox, _extends$1({}, forwardedProps, {
     $isColored: isColored,
     $isDisabled: isDisabled,
     $isFocusVisible: isFocusVisible,
-    $isInvalid: isInvalid || isRequired && !isSelected,
+    $isInvalid: isInvalid || isRequired && !(isSelected || isControlled && propsIsSelected),
     $isRequired: isRequired,
-    $isSelected: isSelected,
+    $isSelected: isSelected || isControlled && propsIsSelected,
     className: classNames(Checkbox.className, className),
     ref: ref
   }), isSelected || isControlled && propsIsSelected ? /*#__PURE__*/React__default.createElement(Icon, {
@@ -5232,13 +5232,13 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
   }, children) : null, /*#__PURE__*/React__default.createElement("input", _extends$1({}, inputProps, focusProps, {
     "aria-checked": isSelected || isControlled && propsIsSelected ? 'true' : isIndeterminate ? 'mixed' : 'false',
     "aria-disabled": isDisabled,
-    "aria-invalid": isInvalid || isRequired && !isSelected,
+    "aria-invalid": isInvalid || isRequired && !(isSelected || isControlled && propsIsSelected),
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
     "aria-readonly": isReadOnly,
     "aria-required": isRequired,
     autoFocus: autoFocus,
-    checked: isSelected ? true : false,
+    checked: isSelected || isControlled && propsIsSelected ? true : false,
     disabled: isDisabled,
     name: name,
     onChange: handleChange,
@@ -11925,9 +11925,10 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
   });
   isDisabled = (_isDisabled = isDisabled) !== null && _isDisabled !== void 0 ? _isDisabled : groupState === null || groupState === void 0 ? void 0 : groupState.isDisabled;
   isReadOnly = (_isReadOnly = isReadOnly) !== null && _isReadOnly !== void 0 ? _isReadOnly : groupState === null || groupState === void 0 ? void 0 : groupState.isReadOnly;
-  const [isSelected, setSelected] = useState((_ref = propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected) !== null && _ref !== void 0 ? _ref : Boolean((groupState === null || groupState === void 0 ? void 0 : groupState.value) && groupState.value === value));
+  const [isSelected, setSelected] = useState(Boolean((_ref = propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected) !== null && _ref !== void 0 ? _ref : Boolean((groupState === null || groupState === void 0 ? void 0 : groupState.value) && groupState.value === value)));
+  const isControlled = propsIsSelected !== null && propsIsSelected !== undefined;
   useEffect(() => {
-    setSelected(propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected);
+    setSelected(Boolean(propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected));
   }, [propsIsSelected, defaultSelected]);
   useEffect(() => {
     if (groupState) {
@@ -11937,10 +11938,10 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
   warnIfNoAccessibleLabelFound(props, [children]);
   if (groupState) {
     if (propsIsSelected != null) {
-      console.warn('isSelected is unsupported on individual <Radio> elements within a <RadioGroup> unless the <Radio> is controlled. Please apply this prop to the group instead or pass isControlled to the component.');
+      console.warn('isSelected is unsupported on individual <Radio> elements within a <RadioGroup> unless the <Radio> is controlled. Please apply this prop to the group instead.');
     }
     if (defaultSelected != null) {
-      console.warn('defaultSelected is unsupported on individual <Radio> elements within a <RadioGroup> unless the <Radio> is controlled. Please apply this prop to the group instead or pass isControlled to the component.');
+      console.warn('defaultSelected is unsupported on individual <Radio> elements within a <RadioGroup> unless the <Radio> is controlled. Please apply this prop to the group instead.');
     }
     if (props.value == null) {
       console.warn('A <Radio> element within a <RadioGroup> requires a `value` property unless the <Radio> is controlled.');
@@ -11953,36 +11954,38 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
     if (groupState) {
       groupState.setValue(value);
     }
-    if (onChange) {
-      onChange(!isSelected, value, name, event, groupState);
+    if (isControlled) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(!propsIsSelected, value, name, event, groupState);
+    } else {
+      setSelected(!isSelected);
+      onChange === null || onChange === void 0 ? void 0 : onChange(!isSelected, value, name, event, groupState);
     }
-    setSelected(event.target.checked);
-  }, [onChange, groupState]);
+  }, [onChange, groupState, isSelected, propsIsSelected]);
   return /*#__PURE__*/React__default.createElement(StyledRadio, _extends$1({}, forwardedProps, {
     $isColored: isColored,
     $isDisabled: isDisabled,
     $isFocusVisible: isFocusVisible,
-    $isInvalid: isInvalid || isRequired && !isSelected,
+    $isInvalid: isInvalid || isRequired && !(isSelected || isControlled && propsIsSelected),
     $isRequired: isRequired,
-    $isSelected: isSelected,
+    $isSelected: isSelected || isControlled && propsIsSelected,
     className: classNames(Radio.className, className),
     ref: ref
-  }), isSelected ? /*#__PURE__*/React__default.createElement(Icon, {
+  }), isSelected || isControlled && propsIsSelected ? /*#__PURE__*/React__default.createElement(Icon, {
     icon: mdiRadioboxMarked
   }) : /*#__PURE__*/React__default.createElement(Icon, {
     icon: mdiRadioboxBlank
   }), children ? /*#__PURE__*/React__default.createElement("span", {
     className: "label"
   }, children) : null, /*#__PURE__*/React__default.createElement("input", _extends$1({}, inputProps, focusProps, {
-    "aria-checked": isSelected ? 'true' : 'false',
+    "aria-checked": isSelected || isControlled && propsIsSelected ? 'true' : 'false',
     "aria-disabled": isDisabled,
-    "aria-invalid": isInvalid || isRequired && !isSelected,
+    "aria-invalid": isInvalid || isRequired && !(isSelected || isControlled && propsIsSelected),
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
     "aria-readonly": isReadOnly,
     "aria-required": isRequired,
     autoFocus: autoFocus,
-    checked: isSelected ? true : false,
+    checked: isSelected || isControlled && propsIsSelected ? true : false,
     disabled: isDisabled,
     name: name,
     onChange: handleChange,
@@ -12209,9 +12212,10 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
   });
   isDisabled = (_isDisabled = isDisabled) !== null && _isDisabled !== void 0 ? _isDisabled : groupState === null || groupState === void 0 ? void 0 : groupState.isDisabled;
   isReadOnly = (_isReadOnly = isReadOnly) !== null && _isReadOnly !== void 0 ? _isReadOnly : groupState === null || groupState === void 0 ? void 0 : groupState.isReadOnly;
-  const [isSelected, setSelected] = useState((_ref = propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected) !== null && _ref !== void 0 ? _ref : groupState === null || groupState === void 0 ? void 0 : groupState.value.includes(value));
+  const [isSelected, setSelected] = useState(Boolean((_ref = propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected) !== null && _ref !== void 0 ? _ref : groupState === null || groupState === void 0 ? void 0 : groupState.value.includes(value)));
+  const isControlled = propsIsSelected !== null && propsIsSelected !== undefined;
   useEffect(() => {
-    setSelected(propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected);
+    setSelected(Boolean(propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected));
   }, [propsIsSelected, defaultSelected]);
   useEffect(() => {
     if (groupState) {
@@ -12221,10 +12225,10 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
   warnIfNoAccessibleLabelFound(props, [children]);
   if (groupState) {
     if (propsIsSelected != null) {
-      console.warn('isSelected is unsupported on individual <Switch> elements within a <SwitchGroup> unless the <Switch> is controlled. Please apply this prop to the group instead or pass isControlled to the component.');
+      console.warn('isSelected is unsupported on individual <Switch> elements within a <SwitchGroup> unless the <Switch> is controlled. Please apply this prop to the group instead.');
     }
     if (defaultSelected != null) {
-      console.warn('defaultSelected is unsupported on individual <Switch> elements within a <SwitchGroup> unless the <Switch> is controlled. Please apply this prop to the group instead or pass isControlled to the component.');
+      console.warn('defaultSelected is unsupported on individual <Switch> elements within a <SwitchGroup> unless the <Switch> is controlled. Please apply this prop to the group instead.');
     }
     if (props.value == null) {
       console.warn('A <Switch> element within a <SwitchGroup> requires a `value` property unless the <Switch> is controlled.');
@@ -12241,18 +12245,20 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
         groupState.removeValue(value);
       }
     }
-    if (onChange) {
-      onChange(!isSelected, value, name, event, groupState);
+    if (isControlled) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(!propsIsSelected, value, name, event, groupState);
+    } else {
+      setSelected(!isSelected);
+      onChange === null || onChange === void 0 ? void 0 : onChange(!isSelected, value, name, event, groupState);
     }
-    setSelected(event.target.checked);
-  }, [onChange, groupState]);
+  }, [onChange, groupState, isSelected, propsIsSelected]);
   return /*#__PURE__*/React__default.createElement(StyledSwitch, _extends$1({}, forwardedProps, {
     $isColored: isColored,
     $isDisabled: isDisabled,
     $isFocusVisible: isFocusVisible,
-    $isInvalid: isInvalid || isRequired && !isSelected,
+    $isInvalid: isInvalid || isRequired && !(isSelected || isControlled && propsIsSelected),
     $isRequired: isRequired,
-    $isSelected: isSelected,
+    $isSelected: isSelected || isControlled && propsIsSelected,
     className: classNames(Switch.className, className),
     ref: ref
   }), /*#__PURE__*/React__default.createElement("div", {
@@ -12268,15 +12274,15 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
   }))), children ? /*#__PURE__*/React__default.createElement("span", {
     className: "label"
   }, children) : null, /*#__PURE__*/React__default.createElement("input", _extends$1({}, inputProps, focusProps, {
-    "aria-checked": isSelected ? 'true' : 'false',
+    "aria-checked": isSelected || isControlled && propsIsSelected ? 'true' : 'false',
     "aria-disabled": isDisabled,
-    "aria-invalid": isInvalid || isRequired && !isSelected,
+    "aria-invalid": isInvalid || isRequired && !(isSelected || isControlled && propsIsSelected),
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
     "aria-readonly": isReadOnly,
     "aria-required": isRequired,
     autoFocus: autoFocus,
-    checked: isSelected ? true : false,
+    checked: isSelected || isControlled && propsIsSelected ? true : false,
     disabled: isDisabled,
     name: name,
     onChange: handleChange,
@@ -12553,6 +12559,7 @@ const StyledTextField = styled.div`
       box-sizing: border-box;
       cursor: text;
       display: inline-flex;
+      height: 42px;
       position: relative;
     }