@redsift/design-system 11.6.0-muiv5-alpha.5 → 11.6.0-muiv5-alpha.7

package/_internal/Radio2.js

@@ -1,66 +1,237 @@
-import { ComponentProps, MutableRefObject, ChangeEvent } from 'react';
-import { R as RadioGroupState } from './types21.js';
-import { h as StylingProps } from './styles2.js';
-import { T as Theme } from './colors.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useContext, useState, useEffect, useCallback } from 'react';
+import classNames from 'classnames';
+import { mdiRadioboxMarked, mdiRadioboxBlank } from '@redsift/icons';
+import { R as RadioGroupContext } from './context4.js';
+import { w as warnIfNoAccessibleLabelFound } from './warnIfNoAccessibleLabelFound.js';
+import styled, { css } from 'styled-components';
+import { i as baseStyling } from './styles4.js';
+import { u as useFocusRing } from './useFocusRing.js';
+import { u as useTheme } from './useTheme.js';
+import { a as Icon } from './Icon2.js';
 
 /**
- * Component props.
+ * Component style.
  */
-interface RadioProps extends Omit<ComponentProps<'label'>, 'onChange'>, StylingProps {
-    /** Whether the component can be autofocused. */
-    autoFocus?: boolean;
-    /**
-     * Default select status.
-     * Used for uncontrolled version.
-     */
-    defaultSelected?: boolean;
-    /** Custom props to pass to the input element. */
-    inputProps?: ComponentProps<'input'>;
-    /** Custom ref object to pass to the input element. */
-    inputRef?: MutableRefObject<HTMLInputElement>;
-    /** Whether the component should use the product colors or shades of grey. */
-    isColored?: boolean;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
-    /** Whether the component is invalid or not. */
-    isInvalid?: boolean;
-    /** Whether the component is read only or not. */
-    isReadOnly?: boolean;
-    /** Whether the component is required or not. */
-    isRequired?: boolean;
-    /**
-     * Whether the component is selected or not.
-     * Used for controlled version.
-     */
-    isSelected?: boolean;
-    /** Name to pass to the input element. */
-    name?: HTMLInputElement['name'];
-    /** Method to handle component change. */
-    onChange?(isChecked: boolean, value?: string, name?: string, event?: ChangeEvent<HTMLInputElement>, state?: RadioGroupState): void;
-    /** Theme. */
-    theme?: Theme;
-    /**
-     * Value to pass to the input element.
-     * Required within a group.
-     */
-    value?: HTMLInputElement['value'];
-}
-type StyledRadioProps = Omit<RadioProps, 'color' | 'isColored' | 'isDisabled' | 'isInvalid' | 'isSelected' | 'isRequired' | 'size'> & {
-    $isColored: RadioProps['isColored'];
-    $isDisabled: RadioProps['isDisabled'];
-    $isInvalid: RadioProps['isInvalid'];
-    $isFocusVisible: boolean;
-    $isRequired: RadioProps['isRequired'];
-    $isSelected: RadioProps['isSelected'];
-    $theme: RadioProps['theme'];
-};
+const StyledRadio = styled.label`
+  height: fit-content;
+  position: relative;
+  width: fit-content;
+  ${baseStyling}
+
+  align-items: center;
+  background: none;
+  border: none;
+  display: inline-flex;
+
+  input {
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    overflow: visible;
+    padding: 0;
+    position: absolute;
+    width: 100%;
+  }
+
+  span.label {
+    ${_ref => {
+  let {
+    $isDisabled,
+    $isInvalid,
+    $theme
+  } = _ref;
+  return $isDisabled ? css`
+            color: var(--redsift-color-${$theme}-components-radio-text-disabled);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-${$theme}-components-radio-text-invalid);
+          ` : css`
+            color: var(--redsift-color-${$theme}-components-radio-text-default);
+          `;
+}}
+
+    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-left: 4px;
+    padding-right: 16px;
+
+    [dir='rtl'] & {
+      padding-left: 16px;
+      padding-right: 4px;
+    }
+  }
+
+  .redsift-icon {
+    box-sizing: content-box;
+    padding: 2px;
+    width: 24px;
+
+    ${_ref2 => {
+  let {
+    $isColored,
+    $isDisabled,
+    $isInvalid,
+    $isFocusVisible,
+    $theme
+  } = _ref2;
+  return css`
+      ${$isDisabled ? css`
+            color: var(--redsift-color-${$theme}-components-radio-fill-disabled);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-${$theme}-components-radio-fill-invalid);
+          ` : css`
+            color: ${$isColored ? `var(--redsift-color-${$theme}-components-radio-fill-default)` : `var(--redsift-color-${$theme}-components-radio-fill-uncolored)`};
+          `}
+
+      ${$isFocusVisible && !$isDisabled ? css`
+            background-color: ${$isColored ? `var(--redsift-color-${$theme}-components-radio-fill-default-hover)` : `var(--redsift-color-${$theme}-components-radio-fill-uncolored-hover)`};
+            border-radius: 16px;
+          ` : ''}
+    `;
+}}
+  }
+
+  &:hover,
+  &:focus-visible {
+    outline: none;
+
+    ${_ref3 => {
+  let {
+    $isColored,
+    $isDisabled,
+    $isInvalid,
+    $theme
+  } = _ref3;
+  return !$isDisabled ? css`
+            .redsift-icon {
+              ${$isInvalid ? css`
+                    background-color: var(--redsift-color-${$theme}-components-radio-fill-invalid-hover);
+                  ` : css`
+                    background-color: ${$isColored ? `var(--redsift-color-${$theme}-components-radio-fill-default-hover)` : `var(--redsift-color-${$theme}-components-radio-fill-uncolored-hover)`};
+                  `}
+              border-radius: 16px;
+            }
+          ` : '';
+}}
+  }
+`;
+
+const _excluded = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "theme", "value"];
+const COMPONENT_NAME = 'Radio';
+const CLASSNAME = 'redsift-radio';
 
 /**
  * The Radio component.
  * Works both inside a RadioGroup or as standalone.
  * Can be used as controlled or uncontrolled.
  */
-declare const Radio: Comp<RadioProps, HTMLLabelElement>;
+const Radio = /*#__PURE__*/forwardRef((props, ref) => {
+  var _isDisabled, _isReadOnly, _ref;
+  const groupState = useContext(RadioGroupContext);
+  let {
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
+      autoFocus,
+      children,
+      className,
+      defaultSelected,
+      inputProps,
+      inputRef,
+      isColored = true,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      isSelected: propsIsSelected,
+      name,
+      onChange,
+      theme: propsTheme,
+      value
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const {
+    isFocusVisible,
+    focusProps
+  } = useFocusRing({
+    autoFocus
+  });
+  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(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(Boolean(propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected));
+  }, [propsIsSelected, defaultSelected]);
+  useEffect(() => {
+    if (groupState) {
+      setSelected(groupState.value === value);
+    }
+  }, [groupState === null || groupState === void 0 ? void 0 : groupState.value]);
+  warnIfNoAccessibleLabelFound(props, [children], 'Radio');
+  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.');
+    }
+    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.');
+    }
+    if (props.value == null) {
+      console.warn('A <Radio> element within a <RadioGroup> requires a `value` property unless the <Radio> is controlled.');
+    }
+  }
+  const handleChange = useCallback(event => {
+    if (isDisabled || isReadOnly) {
+      return;
+    }
+    if (groupState) {
+      groupState.setValue(value);
+    }
+    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);
+    }
+  }, [onChange, groupState, isSelected, propsIsSelected]);
+  return /*#__PURE__*/React__default.createElement(StyledRadio, _extends({}, forwardedProps, {
+    $isColored: isColored,
+    $isDisabled: isDisabled,
+    $isFocusVisible: isFocusVisible,
+    $isInvalid: isInvalid || isRequired && !(isSelected || isControlled && propsIsSelected),
+    $isRequired: isRequired,
+    $isSelected: isSelected || isControlled && propsIsSelected,
+    $theme: theme,
+    className: classNames(Radio.className, className),
+    ref: ref
+  }), 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({}, inputProps, focusProps, {
+    "aria-checked": isSelected || isControlled && propsIsSelected ? 'true' : 'false',
+    "aria-disabled": isDisabled,
+    "aria-invalid": isInvalid || isRequired && !(isSelected || isControlled && propsIsSelected),
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-readonly": isReadOnly,
+    "aria-required": isRequired,
+    autoFocus: autoFocus,
+    checked: isSelected || isControlled && propsIsSelected ? true : false,
+    disabled: isDisabled,
+    name: name,
+    onChange: handleChange,
+    ref: inputRef,
+    type: "radio",
+    value: value
+  })));
+});
+Radio.className = CLASSNAME;
+Radio.displayName = COMPONENT_NAME;
 
-export { RadioProps as R, StyledRadioProps as S, Radio as a };
+export { Radio as R };
+//# sourceMappingURL=Radio2.js.map

package/_internal/RadioGroup.js

@@ -1,10 +1,176 @@
-import { b as RadioGroupProps } from './types21.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { R as RadioGroupContext } from './context4.js';
+import styled, { css } from 'styled-components';
+import { i as baseStyling } from './styles4.js';
+import { C as ColorPalette } from './colors.js';
+import { u as useTheme, a as ThemeProvider } from './useTheme.js';
+
+/**
+ * Context props.
+ */
+
+/**
+ * Component orientation.
+ */
+const RadioGroupOrientation = {
+  horizontal: 'horizontal',
+  vertical: 'vertical'
+};
+
+/**
+ * Component props.
+ */
+
+/**
+ * Component style.
+ */
+const StyledRadioGroup = styled.div`
+  ${baseStyling}
+
+  display: flex;
+  flex-direction: column;
+
+  ${_ref => {
+  let {
+    $orientation
+  } = _ref;
+  return $orientation === RadioGroupOrientation.vertical ? `
+    div.redsift-radio-group-boxes {
+      display: flex;
+      flex-direction: column;
+    }
+  ` : `
+    div.redsift-radio-group-boxes {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+  `;
+}}
+
+  span.redsift-radio-group-label {
+    font-family: var(--redsift-typography-body-font-family);
+    font-weight: var(--redsift-typography-body-font-weight);
+    font-size: var(--redsift-typography-body-font-size);
+    line-height: var(--redsift-typography-body-line-height);
+
+    ${_ref2 => {
+  let {
+    $isDisabled,
+    $isInvalid,
+    $theme
+  } = _ref2;
+  return $isDisabled ? css`
+            color: var(--redsift-color-${$theme}-components-radio-text-disabled);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-${$theme}-components-radio-text-invalid);
+          ` : css`
+            color: var(--redsift-color-${$theme}-components-radio-text-default);
+          `;
+}}
+  }
+
+  span.redsift-radio-group-description {
+    font-family: var(--redsift-typography-helper-font-family);
+    font-weight: var(--redsift-typography-helper-font-weight);
+    font-size: var(--redsift-typography-helper-font-size);
+    line-height: var(--redsift-typography-helper-line-height);
+
+    ${_ref3 => {
+  let {
+    $isDisabled,
+    $isInvalid,
+    $theme
+  } = _ref3;
+  return $isDisabled ? css`
+            color: var(--redsift-color-${$theme}-components-radio-text-disabled);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-${$theme}-components-radio-text-invalid);
+          ` : css`
+            color: var(--redsift-color-${$theme}-components-radio-text-default);
+          `;
+}}
+  }
+`;
+
+const _excluded = ["children", "className", "color", "defaultValue", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "theme", "value"];
+const COMPONENT_NAME = 'RadioGroup';
+const CLASSNAME = 'redsift-radio-group';
 
 /**
  * The RadioGroup component.
  * Can be used as controlled or uncontrolled.
  */
-declare const RadioGroup: Comp<RadioGroupProps, HTMLDivElement>;
+const RadioGroup = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      color = ColorPalette.primary,
+      defaultValue,
+      description,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      label,
+      onChange,
+      orientation = RadioGroupOrientation.vertical,
+      theme: propsTheme,
+      value
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const [selectedValue, setValue] = useState(value || defaultValue || '');
+  useEffect(() => {
+    if (value) {
+      state.setValue(value);
+    }
+  }, [value]);
+  const state = {
+    value: selectedValue,
+    isDisabled: isDisabled || false,
+    isReadOnly: isReadOnly || false,
+    setValue(value) {
+      if (isReadOnly || isDisabled) {
+        return;
+      }
+      const previousValue = selectedValue;
+      setValue(value);
+      if (value !== previousValue && onChange) {
+        onChange(value);
+      }
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledRadioGroup, _extends({
+    color: color
+  }, forwardedProps, {
+    $isDisabled: isDisabled,
+    $isInvalid: isInvalid || isRequired && selectedValue.length === 0,
+    $isReadOnly: isReadOnly,
+    $orientation: orientation,
+    $theme: theme,
+    "aria-disabled": isDisabled,
+    className: classNames(RadioGroup.className, className),
+    ref: ref,
+    role: "radiogroup"
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: `${RadioGroup.className}-label`
+  }, label, isRequired ? ' *' : null), /*#__PURE__*/React__default.createElement("div", {
+    className: `${RadioGroup.className}-boxes`
+  }, /*#__PURE__*/React__default.createElement(RadioGroupContext.Provider, {
+    value: state
+  }, children)), /*#__PURE__*/React__default.createElement("span", {
+    className: `${RadioGroup.className}-description`
+  }, description)));
+});
+RadioGroup.className = CLASSNAME;
+RadioGroup.displayName = COMPONENT_NAME;
 
-export { RadioGroup as R };
+export { RadioGroupOrientation as R, RadioGroup as a };
+//# sourceMappingURL=RadioGroup.js.map