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

package/_internal/Checkbox2.js

@@ -1,68 +1,244 @@
-import { ComponentProps, MutableRefObject, ChangeEvent } from 'react';
-import { C as CheckboxGroupState } from './types8.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 { mdiCheckboxMarked, mdiMinusBox, mdiCheckboxBlankOutline } from '@redsift/icons';
+import { C as CheckboxGroupContext } from './context3.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 CheckboxProps 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 checkbox status is indeterminate or not. */
-    isIndeterminate?: 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?: CheckboxGroupState): void;
-    /** Theme. */
-    theme?: Theme;
-    /**
-     * Value to pass to the input element.
-     * Required within a group.
-     */
-    value?: HTMLInputElement['value'];
-}
-type StyledCheckboxProps = Omit<CheckboxProps, 'color' | 'isColored' | 'isDisabled' | 'isInvalid' | 'isSelected' | 'isRequired'> & {
-    $isColored: CheckboxProps['isColored'];
-    $isDisabled: CheckboxProps['isDisabled'];
-    $isInvalid: CheckboxProps['isInvalid'];
-    $isFocusVisible: boolean;
-    $isRequired: CheckboxProps['isRequired'];
-    $isSelected: CheckboxProps['isSelected'];
-    $theme: CheckboxProps['theme'];
-};
+const StyledCheckbox = styled.label`
+  height: fit-content;
+  position: relative;
+  width: fit-content;
+  ${baseStyling}
+
+  align-items: flex-start;
+  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-checkbox-text-disabled);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-invalid);
+          ` : css`
+            color: var(--redsift-color-${$theme}-components-checkbox-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;
+    padding-top: 2px;
+
+    [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-checkbox-fill-disabled);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-${$theme}-components-checkbox-fill-invalid);
+          ` : css`
+            color: ${$isColored ? `var(--redsift-color-${$theme}-components-checkbox-fill-default)` : `var(--redsift-color-${$theme}-components-checkbox-fill-uncolored)`};
+          `}
+
+      ${$isFocusVisible && !$isDisabled ? css`
+            background-color: ${$isColored ? `var(--redsift-color-${$theme}-components-checkbox-fill-default-hover)` : `var(--redsift-color-${$theme}-components-checkbox-fill-uncolored-hover)`};
+          ` : ''}
+    `;
+}}
+  }
+
+  &: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-checkbox-fill-invalid-hover);
+                  ` : css`
+                    background-color: ${$isColored ? `var(--redsift-color-${$theme}-components-checkbox-fill-default-hover)` : `var(--redsift-color-${$theme}-components-checkbox-fill-uncolored-hover)`};
+                  `}
+              border-radius: 4px;
+            }
+          ` : '';
+}}
+  }
+`;
+
+const _excluded = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isDisabled", "isIndeterminate", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "theme", "value"];
+const COMPONENT_NAME = 'Checkbox';
+const CLASSNAME = 'redsift-checkbox';
 
 /**
  * The Checkbox component.
  * Works both inside a CheckboxGroup or as standalone.
  * Can be used as controlled or uncontrolled.
  */
-declare const Checkbox: Comp<CheckboxProps, HTMLLabelElement>;
+const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
+  var _isDisabled, _isReadOnly, _ref;
+  const groupState = useContext(CheckboxGroupContext);
+  let {
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
+      autoFocus,
+      children,
+      className,
+      defaultSelected,
+      inputProps,
+      inputRef,
+      isColored = true,
+      isDisabled,
+      isIndeterminate,
+      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 : groupState === null || groupState === void 0 ? void 0 : groupState.value.includes(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.includes(value));
+    }
+  }, [groupState === null || groupState === void 0 ? void 0 : groupState.value]);
+  warnIfNoAccessibleLabelFound(props, [children], 'Checkbox');
+  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.');
+    }
+    if (defaultSelected != null) {
+      console.warn('defaultSelected 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.');
+    }
+    if (props.value == null) {
+      console.warn('A <Checkbox> element within a <CheckboxGroup> requires a `value` property unless the <Checkbox> is controlled.');
+    }
+  }
+  const handleChange = useCallback(event => {
+    if (isDisabled || isReadOnly) {
+      return;
+    }
+    if (groupState) {
+      if (!groupState.value.includes(value)) {
+        groupState.addValue(value);
+      } else {
+        groupState.removeValue(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(StyledCheckbox, _extends({}, forwardedProps, {
+    $isColored: isColored,
+    $isDisabled: isDisabled,
+    $isFocusVisible: isFocusVisible,
+    $isInvalid: isInvalid || isRequired && !(isSelected || isControlled && propsIsSelected),
+    $isRequired: isRequired,
+    $isSelected: isSelected || isControlled && propsIsSelected,
+    $theme: theme,
+    className: classNames(Checkbox.className, className),
+    ref: ref
+  }), isSelected || isControlled && propsIsSelected ? /*#__PURE__*/React__default.createElement(Icon, {
+    icon: mdiCheckboxMarked
+  }) : isIndeterminate ? /*#__PURE__*/React__default.createElement(Icon, {
+    icon: mdiMinusBox
+  }) : /*#__PURE__*/React__default.createElement(Icon, {
+    icon: mdiCheckboxBlankOutline
+  }), children ? /*#__PURE__*/React__default.createElement("span", {
+    className: "label"
+  }, children) : null, /*#__PURE__*/React__default.createElement("input", _extends({}, inputProps, focusProps, {
+    "aria-checked": isSelected || isControlled && propsIsSelected ? 'true' : isIndeterminate ? 'mixed' : '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: "checkbox",
+    value: value
+  })));
+});
+Checkbox.className = CLASSNAME;
+Checkbox.displayName = COMPONENT_NAME;
 
-export { CheckboxProps as C, StyledCheckboxProps as S, Checkbox as a };
+export { Checkbox as C };
+//# sourceMappingURL=Checkbox2.js.map

package/_internal/CheckboxGroup.d.ts

@@ -0,0 +1,10 @@
+import { b as CheckboxGroupProps } from './types.d8.ts';
+import { C as Comp } from './helpers.js';
+
+/**
+ * The CheckboxGroup component.
+ * Can be used as controlled or uncontrolled.
+ */
+declare const CheckboxGroup: Comp<CheckboxGroupProps, HTMLDivElement>;
+
+export { CheckboxGroup as C };

package/_internal/CheckboxGroup.js

@@ -1,10 +1,188 @@
-import { b as CheckboxGroupProps } from './types8.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 { C as CheckboxGroupContext } from './context3.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 CheckboxGroupOrientation = {
+  vertical: 'vertical',
+  horizontal: 'horizontal'
+};
+
+/**
+ * Component props.
+ */
+
+/**
+ * Component style.
+ */
+const StyledCheckboxGroup = styled.div`
+  ${baseStyling}
+
+  display: flex;
+  flex-direction: column;
+
+  ${_ref => {
+  let {
+    $orientation
+  } = _ref;
+  return $orientation === CheckboxGroupOrientation.vertical ? `
+    div.redsift-checkbox-group-boxes {
+      display: flex;
+      flex-direction: column;
+    }
+  ` : `
+    div.redsift-checkbox-group-boxes {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+  `;
+}}
+
+  span.redsift-checkbox-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-checkbox-text-disabled);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-invalid);
+          ` : css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-default);
+          `;
+}}
+  }
+
+  span.redsift-checkbox-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-checkbox-text-disabled);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-invalid);
+          ` : css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-default);
+          `;
+}}
+  }
+`;
+
+const _excluded = ["children", "className", "color", "defaultValues", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "theme", "value"];
+const COMPONENT_NAME = 'CheckboxGroup';
+const CLASSNAME = 'redsift-checkbox-group';
 
 /**
  * The CheckboxGroup component.
  * Can be used as controlled or uncontrolled.
  */
-declare const CheckboxGroup: Comp<CheckboxGroupProps, HTMLDivElement>;
+const CheckboxGroup = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      color = ColorPalette.primary,
+      defaultValues,
+      description,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      label,
+      onChange,
+      orientation = CheckboxGroupOrientation.vertical,
+      theme: propsTheme,
+      value
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const [selectedValues, setValue] = useState(value || defaultValues || []);
+  useEffect(() => {
+    if (value) {
+      state.setValue(value);
+    }
+  }, [value]);
+  const state = {
+    value: selectedValues,
+    isDisabled: isDisabled || false,
+    isReadOnly: isReadOnly || false,
+    setValue(values) {
+      if (isReadOnly || isDisabled) {
+        return;
+      }
+      setValue(values);
+    },
+    addValue(value) {
+      if (!selectedValues.includes(value)) {
+        setValue(selectedValues.concat(value));
+        if (onChange) {
+          onChange(selectedValues.concat(value));
+        }
+      }
+    },
+    removeValue(value) {
+      if (selectedValues.includes(value)) {
+        setValue(selectedValues.filter(existingValue => existingValue !== value));
+        if (onChange) {
+          onChange(selectedValues.filter(existingValue => existingValue !== value));
+        }
+      }
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledCheckboxGroup, _extends({
+    color: color
+  }, forwardedProps, {
+    $isDisabled: isDisabled,
+    $isInvalid: isInvalid || isRequired && selectedValues.length === 0,
+    $isReadOnly: isReadOnly,
+    $orientation: orientation,
+    $theme: theme,
+    "aria-disabled": isDisabled,
+    className: classNames(CheckboxGroup.className, className),
+    ref: ref,
+    role: "group"
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: `${CheckboxGroup.className}-label`
+  }, label, isRequired ? ' *' : null), /*#__PURE__*/React__default.createElement("div", {
+    className: `${CheckboxGroup.className}-boxes`
+  }, /*#__PURE__*/React__default.createElement(CheckboxGroupContext.Provider, {
+    value: state
+  }, children)), /*#__PURE__*/React__default.createElement("span", {
+    className: `${CheckboxGroup.className}-description`
+  }, description)));
+});
+CheckboxGroup.className = CLASSNAME;
+CheckboxGroup.displayName = COMPONENT_NAME;
 
-export { CheckboxGroup as C };
+export { CheckboxGroupOrientation as C, CheckboxGroup as a };
+//# sourceMappingURL=CheckboxGroup.js.map

package/_internal/ConditionalWrapper.d.ts

@@ -0,0 +1,14 @@
+import React$1 from 'react';
+
+interface ConditionalWrapperProps<T = {}> {
+    /** Children to render with or without the wrapper. */
+    children: React.ReactElement<T> | null;
+    /** Condition to define whether or not the children should be wrapped. */
+    condition: boolean;
+    /** Wrapper to conditionaly put around the children. */
+    wrapper: (children: React.ReactElement<T> | null) => React.ReactElement<T> | null;
+}
+
+declare const ConditionalWrapper: React$1.FC<ConditionalWrapperProps>;
+
+export { ConditionalWrapperProps as C, ConditionalWrapper as a };

package/_internal/ConditionalWrapper.js

@@ -1,14 +1,13 @@
-import React$1 from 'react';
+import React__default from 'react';
 
-interface ConditionalWrapperProps<T = {}> {
-    /** Children to render with or without the wrapper. */
-    children: React.ReactElement<T> | null;
-    /** Condition to define whether or not the children should be wrapped. */
-    condition: boolean;
-    /** Wrapper to conditionaly put around the children. */
-    wrapper: (children: React.ReactElement<T> | null) => React.ReactElement<T> | null;
-}
+const ConditionalWrapper = _ref => {
+  let {
+    children,
+    condition,
+    wrapper
+  } = _ref;
+  return condition ? wrapper(children) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
+};
 
-declare const ConditionalWrapper: React$1.FC<ConditionalWrapperProps>;
-
-export { ConditionalWrapperProps as C, ConditionalWrapper as a };
+export { ConditionalWrapper as C };
+//# sourceMappingURL=ConditionalWrapper.js.map

package/_internal/DetailedCard.d.ts

@@ -0,0 +1,52 @@
+import { D as DetailedCardSectionItemProps } from './types.d12.ts';
+import { D as DetailedCardCollapsibleSectionItemsProps } from './types.d9.ts';
+import { D as DetailedCardHeaderProps } from './types.d10.ts';
+import { D as DetailedCardSectionProps } from './types.d11.ts';
+import { ComponentProps } from 'react';
+import { S as ShieldVariant } from './types.d22.ts';
+import { b as IconProps } from './types.d17.ts';
+import { h as StylingProps } from './styles.d2.ts';
+import { N as NotificationsColorPalette, T as Theme } from './colors.js';
+import { C as Comp } from './helpers.js';
+
+/**
+ * Component props.
+ */
+interface DetailedCardProps extends ComponentProps<'div'>, StylingProps {
+    /** Whether the component is collapsed or not. Used for controlled version. */
+    areAllCollapsed?: boolean;
+    /** Banner variant. */
+    bannerVariant?: 'standard' | 'condensed';
+    /** Banner color. */
+    color?: NotificationsColorPalette;
+    /** Default collapse status. Used for uncontrolled version. */
+    defaultAllCollapsed?: boolean;
+    /**
+     * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />
+     * Can also be a ReactElement.
+     */
+    icon?: IconProps['icon'];
+    /** Whether the card has buttons to collapse and expand all section items. */
+    isCollapsible?: boolean;
+    /** Whether the card is loading or not. */
+    isLoading?: boolean;
+    /** Shield to display in place of the banner icon. */
+    shield?: ShieldVariant;
+    /** Theme. */
+    theme?: Theme;
+    /** Method to handle component change. */
+    onCollapseAll?(areAllCollapsed: boolean): void;
+}
+type StyledDetailedCardProps = Omit<DetailedCardProps, 'color'> & {
+    $color: DetailedCardProps['color'];
+    $theme: DetailedCardProps['theme'];
+};
+
+declare const DetailedCard: Comp<DetailedCardProps, HTMLDivElement> & {
+    Header: Comp<DetailedCardHeaderProps, HTMLDivElement>;
+    Section: Comp<DetailedCardSectionProps, HTMLDivElement>;
+    CollapsibleSectionItems: Comp<DetailedCardCollapsibleSectionItemsProps, HTMLDivElement>;
+    SectionItem: Comp<DetailedCardSectionItemProps, HTMLDivElement>;
+};
+
+export { DetailedCardProps as D, StyledDetailedCardProps as S, DetailedCard as a };