fannypack-v5/es/Switch/SwitchGroup.js

An accessible, composable, and friendly React UI Kit

import { createElement as createElement$1 } from 'react';
import '../Provider/ThemeContext.js';
import 'classnames';
import 'emotion';
import '@emotion/core';
import 'emotion-theming';
import '@emotion/styled';
import '../utils/useTheme.js';
import { d as _objectWithoutPropertiesLoose, _ as _objectSpread2, c as _extends } from '../chunk-0c448560.js';
import 'lodash/kebabCase';
import 'tinycolor2';
import '../utils/isFunction.js';
import '../utils/get.js';
import '../utils/theme.js';
import '../utils/omit.js';
import '../utils/pick.js';
import '../utils/cssProps.js';
import '../utils/useLocalStorage.js';
import '../Provider/ColorModeContext.js';
import '../utils/useColorMode.js';
import '../utils/useStyle.js';
import '../utils/omitBy.js';
import '../utils/useDefaultProps.js';
import '../utils/useDebounce.js';
import 'lodash/uniq';
import { useClassName } from '../utils/useClassName.js';
import '../utils/useBreakpoint.js';
import '../utils/uniqueId.js';
import '../utils/times.js';
import '../utils/parseIcons.js';
import '../utils/colors.js';
import '../utils/palette.js';
import '../utils/mergeRefs.js';
import 'deepmerge';
import 'lodash/set';
import '../utils/applyTheme.js';
import '../utils/bindFns.js';
import { createComponent } from '../utils/createComponent.js';
import { createElement } from '../utils/createElement.js';
import { createHook } from '../utils/createHook.js';
import '../utils/forwardRefWithUse.js';
import '../utils/fieldAdaptors.js';
import '@emotion/is-prop-valid';
import '../utils/htmlProps.js';
import '../utils/OutsideClickHandler.js';
import '../utils/getHiddenInputStyles.js';
import '../theme/palette.js';
import { Box } from 'reakit';
import '../Button/styles-7847dc2c.js';
import 'conditional-wrap';
import '../Box/styles-579aeb3a.js';
import { Box as Box$1 } from '../Box/Box.js';
import '../Flex/styles-53e15538.js';
import '../Flex/Flex.js';
import '../Icon/styles-ca55138b.js';
import '../Icon/Icon.js';
import '../Text/styles-00cf45ec.js';
import '../Text/Text.js';
import '../Spinner/styles-d3bec5e2.js';
import '../Spinner/Spinner.js';
import '../Button/Button.js';
import 'reakit/VisuallyHidden';
import '../Button/ButtonClose.js';
import '../Button/index.js';
import '../Set/styles-00491b06.js';
import { Set } from '../Set/Set.js';
import '../FieldWrapper/styles-406ca84b.js';
import '../Card/styles-95a1c511.js';
import '../Card/Card.js';
import '../Card/index.js';
import '../Disclosure/styles-05d33dce.js';
import '../Disclosure/DisclosureState.js';
import '../Disclosure/Disclosure.js';
import '../Disclosure/DisclosureContent.js';
import '../Disclosure/index.js';
import '../Label/styles-d69a783d.js';
import '../Label/Label.js';
import { FieldWrapper } from '../FieldWrapper/FieldWrapper.js';
import { c as SwitchGroup$1, e as SwitchGroupField$1 } from './styles-56f84734.js';
import { Switch } from './Switch.js';

var useProps = createHook(function (props, _ref) {
  var themeKey = _ref.themeKey,
      themeKeyOverride = _ref.themeKeyOverride;

  var initialDefaultValue = props.defaultValue,
      disabled = props.disabled,
      orientation = props.orientation,
      onChange = props.onChange,
      options = props.options,
      overrides = props.overrides,
      name = props.name,
      spacing = props.spacing,
      state = props.state,
      initialValue = props.value,
      restProps = _objectWithoutPropertiesLoose(props, ["defaultValue", "disabled", "orientation", "onChange", "options", "overrides", "name", "spacing", "state", "value"]);

  var boxProps = Box$1.useProps(restProps);
  var className = useClassName({
    style: SwitchGroup$1,
    styleProps: props,
    themeKey: themeKey,
    themeKeyOverride: themeKeyOverride,
    prevClassName: boxProps.className
  });
  var defaultValue = initialDefaultValue;

  if (typeof initialDefaultValue === 'string') {
    defaultValue = [initialDefaultValue];
  }

  var value = initialValue;

  if (typeof initialValue === 'string') {
    value = [initialValue];
  }

  return _objectSpread2(_objectSpread2({
    role: 'group'
  }, boxProps), {}, {
    className: className,
    children: /*#__PURE__*/createElement$1(Set, {
      orientation: orientation,
      spacing: spacing
    }, options.map(function (option, i) {
      return /*#__PURE__*/createElement$1(Switch, _extends({
        key: i
      }, option, {
        // @ts-ignore
        checked: value ? value.includes(option.value) : undefined // @ts-ignore
        ,
        defaultChecked: defaultValue ? defaultValue.includes(option.value) : undefined,
        name: name,
        onChange: onChange,
        overrides: overrides,
        state: state || option.state,
        disabled: disabled || option.disabled
      }));
    }))
  });
}, {
  defaultProps: {
    orientation: 'vertical',
    spacing: 'minor-2'
  },
  themeKey: 'SwitchGroup'
});
var SwitchGroup = createComponent(function (props) {
  var textProps = useProps(props);
  return createElement({
    children: props.children,
    component: Box,
    use: props.use,
    htmlProps: textProps
  });
}, {
  attach: {
    useProps: useProps,
    displayName: 'SwitchGroup'
  },
  themeKey: 'SwitchGroup'
}); ////////////////////////////////////////////////////////////////

var useSwitchGroupFieldProps = createHook(function (props, _ref2) {
  var themeKey = _ref2.themeKey,
      themeKeyOverride = _ref2.themeKeyOverride;

  var defaultChecked = props.defaultChecked,
      description = props.description,
      disabled = props.disabled,
      hint = props.hint,
      orientation = props.orientation,
      isOptional = props.isOptional,
      isRequired = props.isRequired,
      label = props.label,
      name = props.name,
      options = props.options,
      onChange = props.onChange,
      overrides = props.overrides,
      switchGroupProps = props.switchGroupProps,
      state = props.state,
      tooltip = props.tooltip,
      tooltipTriggerComponent = props.tooltipTriggerComponent,
      value = props.value,
      validationText = props.validationText,
      restProps = _objectWithoutPropertiesLoose(props, ["defaultChecked", "description", "disabled", "hint", "orientation", "isOptional", "isRequired", "label", "name", "options", "onChange", "overrides", "switchGroupProps", "state", "tooltip", "tooltipTriggerComponent", "value", "validationText"]);

  var boxProps = Box$1.useProps(restProps);
  var className = useClassName({
    style: SwitchGroupField$1,
    styleProps: props,
    themeKey: themeKey,
    themeKeyOverride: themeKeyOverride,
    prevClassName: boxProps.className
  });
  return _objectSpread2(_objectSpread2({}, boxProps), {}, {
    className: className,
    children: /*#__PURE__*/createElement$1(FieldWrapper, {
      description: description,
      hint: hint,
      isOptional: isOptional,
      isRequired: isRequired,
      label: label,
      labelType: "legend",
      overrides: overrides,
      state: state,
      tooltip: tooltip,
      tooltipTriggerComponent: tooltipTriggerComponent,
      validationText: validationText
    }, function (_ref3) {
      var elementProps = _ref3.elementProps;
      return /*#__PURE__*/createElement$1(SwitchGroup, _extends({
        defaultChecked: defaultChecked,
        disabled: disabled,
        orientation: orientation,
        name: name,
        options: options,
        onChange: onChange,
        overrides: overrides,
        state: state,
        value: value
      }, elementProps, switchGroupProps));
    })
  });
}, {
  themeKey: 'SwitchGroupField'
});
var SwitchGroupField = createComponent(function (props) {
  var switchGroupFieldProps = useSwitchGroupFieldProps(props);
  return createElement({
    children: props.children,
    component: Box,
    use: props.use,
    htmlProps: switchGroupFieldProps
  });
}, {
  attach: {
    useProps: useProps,
    displayName: 'SwitchGroupField'
  },
  defaultProps: {
    use: 'fieldset'
  },
  themeKey: 'SwitchGroupField'
});

export { SwitchGroup, SwitchGroupField };