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

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.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