@pega/cosmos-react-core 7.0.0-build.1.0 → 7.0.0-build.10.0

package/lib/components/Phone/PhoneInput.js

@@ -12,7 +12,7 @@ import { StyledSelect } from '../Select/Select';
 import Flex from '../Flex';
 import { withTestIds } from '../../utils';
 import callingCodes from './callingCodes';
-import { convertToCallbackParameter, formatPhoneNumber, getPhoneNumberParts } from './utils';
+import { convertToCallbackParameter, formatPhone, formatPhoneNumber, getPhoneNumberParts } from './utils';
 import { getPhoneInputTestIds } from './Phone.test-ids';
 const StyledPhoneInput = styled.div(() => {
     return css `
@@ -55,11 +55,16 @@ const PhoneInput = forwardRef(function PhoneInput(props, ref) {
     const containerRef = useRef(null);
     useFocusWithin([containerRef], onFocusChange);
     const formatter = useCallback(number => {
+        if (value && readOnly && showCountryCode) {
+            const temp = formatPhone(value, { nationalFormat: !readOnly });
+            if (temp)
+                return temp;
+        }
         return formatPhoneNumber(number.replace(/\D+/g, ''), countryCode);
-    }, [countryCode]);
+    }, [readOnly, countryCode, showCountryCode]);
     const formatted = useInputFormatter(inputRef, subscriberNumber, formatter);
     const codesOptions = (_jsx(_Fragment, { children: callingCodesList.map(code => (_jsx(Option, { value: code, children: code }, code))) }));
-    const Comp = (_jsxs(StyledPhoneInput, { "data-testid": testIds.root, as: StyledFormControl, forwardedAs: Flex, container: { alignItems: 'center', wrap: 'nowrap' }, ref: containerRef, status: status, readOnly: readOnly, disabled: disabled, children: [showCountryCode && (_jsx(Select, { "data-testid": testIds.countryCode, value: countryCode, "aria-label": t('select_country_code'), onChange: onSelectChange, required: required, status: status, readOnly: readOnly, disabled: disabled, autoComplete: 'tel-country-code', hasSuggestion: status === 'pending' && !!onResolveSuggestion, children: codesOptions })), _jsx(Input, { "data-testid": testIds.control, ...restProps, inputMode: 'tel', ref: inputRef, value: formatted, "aria-label": t('enter_a_number'), onChange: onInputChange, required: required, status: status, readOnly: readOnly, disabled: disabled, autoComplete: 'tel-national', hasSuggestion: status === 'pending' && !!onResolveSuggestion })] }));
+    const Comp = (_jsxs(StyledPhoneInput, { "data-testid": testIds.root, as: StyledFormControl, forwardedAs: Flex, container: { alignItems: 'center', wrap: 'nowrap' }, ref: containerRef, status: status, readOnly: readOnly, disabled: disabled, children: [showCountryCode && !readOnly && (_jsx(Select, { "data-testid": testIds.countryCode, value: countryCode, "aria-label": t('select_country_code'), onChange: onSelectChange, required: required, status: status, readOnly: readOnly, disabled: disabled, autoComplete: 'tel-country-code', hasSuggestion: status === 'pending' && !!onResolveSuggestion, children: codesOptions })), _jsx(Input, { "data-testid": testIds.control, ...restProps, inputMode: 'tel', ref: inputRef, value: formatted, "aria-label": t('enter_a_number'), onChange: onInputChange, required: required, status: status, readOnly: readOnly, disabled: disabled, autoComplete: 'tel-national', hasSuggestion: status === 'pending' && !!onResolveSuggestion })] }));
     return label ? (_jsx(FormField, { testId: testIds, as: 'fieldset', labelAs: 'legend', additionalInfo: additionalInfo, label: label, labelHidden: labelHidden, id: id, info: info, status: status, required: required, disabled: disabled, onResolveSuggestion: onResolveSuggestion, children: Comp })) : (Comp);
 });
 export default withTestIds(PhoneInput, getPhoneInputTestIds);

package/lib/components/Phone/PhoneInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneInput.js","sourceRoot":"","sources":["../../../src/components/Phone/PhoneInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useRef } from 'react';\nimport type { ChangeEvent, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  useConsolidatedRef,\n  useFocusWithin,\n  useI18n,\n  useInputFormatter,\n  useTestIds\n} from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport type {\n  BaseProps,\n  ForwardProps,\n  NoChildrenProp,\n  PropsWithDefaults,\n  TestIdProp\n} from '../../types';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport StyledInput from '../Input/Input.styles';\nimport Select, { Option } from '../Select';\nimport Input from '../Input';\nimport { StyledSelect } from '../Select/Select';\nimport Flex from '../Flex';\nimport { withTestIds } from '../../utils';\n\nimport callingCodes from './callingCodes';\nimport { convertToCallbackParameter, formatPhoneNumber, getPhoneNumberParts } from './utils';\nimport { getPhoneInputTestIds } from './Phone.test-ids';\n\nexport interface PhoneInputProps extends FormControlProps, BaseProps, NoChildrenProp, TestIdProp {\n  /**\n   * Display select with countries calling codes\n   * @default false\n   */\n  showCountryCode?: boolean;\n  /** Changes lists of countries calling codes */\n  callingCodesList?: string[];\n  /** Callback fired on input value change */\n  onChange?: (value: string) => void;\n  /** Callback fired when the component loses focus */\n  onBlur?: (value: string) => void;\n  /** CCallback fired when the component gets focus */\n  onFocus?: (value: string) => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLInputElement>;\n}\n\ntype PhoneInputPropsWithDefaults = PropsWithDefaults<PhoneInputProps>;\n\nconst StyledPhoneInput = styled.div<PhoneInputPropsWithDefaults>(() => {\n  return css`\n    border: 0;\n    > ${StyledSelect} {\n      max-width: max-content;\n      border-inline-end: none;\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n    }\n\n    > ${StyledSelect} + ${StyledInput} {\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n    }\n  `;\n});\n\nStyledPhoneInput.defaultProps = defaultThemeProp;\n\nconst PhoneInput: FunctionComponent<PhoneInputProps & ForwardProps> = forwardRef(\n  function PhoneInput(props: PropsWithoutRef<PhoneInputProps>, ref: PhoneInputProps['ref']) {\n    const {\n      testId,\n      value,\n      id,\n      label,\n      labelHidden,\n      info,\n      status,\n      required,\n      readOnly,\n      disabled,\n      showCountryCode = false,\n      callingCodesList = callingCodes,\n      onChange,\n      onBlur,\n      onFocus,\n      onResolveSuggestion,\n      additionalInfo,\n      ...restProps\n    } = props;\n\n    const testIds = useTestIds(testId, getPhoneInputTestIds);\n\n    const t = useI18n();\n\n    const [countryCode = callingCodesList[0], subscriberNumber = ''] = value\n      ? getPhoneNumberParts(value, callingCodesList)\n      : [];\n\n    const onFocusChange = (focused: boolean) => {\n      const callbackParam = convertToCallbackParameter(countryCode, subscriberNumber);\n      if (focused) onFocus?.(callbackParam);\n      else onBlur?.(callbackParam);\n    };\n\n    const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n      onChange?.(convertToCallbackParameter(countryCode, e.target.value));\n    };\n\n    const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {\n      onChange?.(convertToCallbackParameter(e.target.value, subscriberNumber));\n    };\n\n    const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n    const containerRef = useRef<HTMLElement>(null);\n    useFocusWithin([containerRef], onFocusChange);\n\n    const formatter = useCallback(\n      number => {\n        return formatPhoneNumber(number.replace(/\\D+/g, ''), countryCode);\n      },\n      [countryCode]\n    );\n\n    const formatted = useInputFormatter(inputRef, subscriberNumber, formatter);\n\n    const codesOptions = (\n      <>\n        {callingCodesList.map(code => (\n          <Option key={code} value={code}>\n            {code}\n          </Option>\n        ))}\n      </>\n    );\n\n    const Comp = (\n      <StyledPhoneInput\n        data-testid={testIds.root}\n        as={StyledFormControl}\n        forwardedAs={Flex as any}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        ref={containerRef}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n      >\n        {showCountryCode && (\n          <Select\n            data-testid={testIds.countryCode}\n            value={countryCode}\n            aria-label={t('select_country_code')}\n            onChange={onSelectChange}\n            required={required}\n            status={status}\n            readOnly={readOnly}\n            disabled={disabled}\n            autoComplete='tel-country-code'\n            hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n          >\n            {codesOptions}\n          </Select>\n        )}\n        <Input\n          data-testid={testIds.control}\n          {...restProps}\n          inputMode='tel'\n          ref={inputRef}\n          value={formatted}\n          aria-label={t('enter_a_number')}\n          onChange={onInputChange}\n          required={required}\n          status={status}\n          readOnly={readOnly}\n          disabled={disabled}\n          autoComplete='tel-national'\n          hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n        />\n      </StyledPhoneInput>\n    );\n\n    return label ? (\n      <FormField\n        testId={testIds}\n        as='fieldset'\n        labelAs='legend'\n        additionalInfo={additionalInfo}\n        label={label}\n        labelHidden={labelHidden}\n        id={id}\n        info={info}\n        status={status}\n        required={required}\n        disabled={disabled}\n        onResolveSuggestion={onResolveSuggestion}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default withTestIds(PhoneInput, getPhoneInputTestIds);\n"]}
+{"version":3,"file":"PhoneInput.js","sourceRoot":"","sources":["../../../src/components/Phone/PhoneInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useRef } from 'react';\nimport type { ChangeEvent, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  useConsolidatedRef,\n  useFocusWithin,\n  useI18n,\n  useInputFormatter,\n  useTestIds\n} from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport type {\n  BaseProps,\n  ForwardProps,\n  NoChildrenProp,\n  PropsWithDefaults,\n  TestIdProp\n} from '../../types';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport StyledInput from '../Input/Input.styles';\nimport Select, { Option } from '../Select';\nimport Input from '../Input';\nimport { StyledSelect } from '../Select/Select';\nimport Flex from '../Flex';\nimport { withTestIds } from '../../utils';\n\nimport callingCodes from './callingCodes';\nimport {\n  convertToCallbackParameter,\n  formatPhone,\n  formatPhoneNumber,\n  getPhoneNumberParts\n} from './utils';\nimport { getPhoneInputTestIds } from './Phone.test-ids';\n\nexport interface PhoneInputProps extends FormControlProps, BaseProps, NoChildrenProp, TestIdProp {\n  /**\n   * Display select with countries calling codes\n   * @default false\n   */\n  showCountryCode?: boolean;\n  /** Changes lists of countries calling codes */\n  callingCodesList?: string[];\n  /** Callback fired on input value change */\n  onChange?: (value: string) => void;\n  /** Callback fired when the component loses focus */\n  onBlur?: (value: string) => void;\n  /** CCallback fired when the component gets focus */\n  onFocus?: (value: string) => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLInputElement>;\n}\n\ntype PhoneInputPropsWithDefaults = PropsWithDefaults<PhoneInputProps>;\n\nconst StyledPhoneInput = styled.div<PhoneInputPropsWithDefaults>(() => {\n  return css`\n    border: 0;\n    > ${StyledSelect} {\n      max-width: max-content;\n      border-inline-end: none;\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n    }\n\n    > ${StyledSelect} + ${StyledInput} {\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n    }\n  `;\n});\n\nStyledPhoneInput.defaultProps = defaultThemeProp;\n\nconst PhoneInput: FunctionComponent<PhoneInputProps & ForwardProps> = forwardRef(\n  function PhoneInput(props: PropsWithoutRef<PhoneInputProps>, ref: PhoneInputProps['ref']) {\n    const {\n      testId,\n      value,\n      id,\n      label,\n      labelHidden,\n      info,\n      status,\n      required,\n      readOnly,\n      disabled,\n      showCountryCode = false,\n      callingCodesList = callingCodes,\n      onChange,\n      onBlur,\n      onFocus,\n      onResolveSuggestion,\n      additionalInfo,\n      ...restProps\n    } = props;\n\n    const testIds = useTestIds(testId, getPhoneInputTestIds);\n\n    const t = useI18n();\n\n    const [countryCode = callingCodesList[0], subscriberNumber = ''] = value\n      ? getPhoneNumberParts(value, callingCodesList)\n      : [];\n\n    const onFocusChange = (focused: boolean) => {\n      const callbackParam = convertToCallbackParameter(countryCode, subscriberNumber);\n      if (focused) onFocus?.(callbackParam);\n      else onBlur?.(callbackParam);\n    };\n\n    const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n      onChange?.(convertToCallbackParameter(countryCode, e.target.value));\n    };\n\n    const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {\n      onChange?.(convertToCallbackParameter(e.target.value, subscriberNumber));\n    };\n\n    const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n    const containerRef = useRef<HTMLElement>(null);\n    useFocusWithin([containerRef], onFocusChange);\n\n    const formatter = useCallback(\n      number => {\n        if (value && readOnly && showCountryCode) {\n          const temp = formatPhone(value, { nationalFormat: !readOnly });\n          if (temp) return temp;\n        }\n        return formatPhoneNumber(number.replace(/\\D+/g, ''), countryCode);\n      },\n      [readOnly, countryCode, showCountryCode]\n    );\n\n    const formatted = useInputFormatter(inputRef, subscriberNumber, formatter);\n\n    const codesOptions = (\n      <>\n        {callingCodesList.map(code => (\n          <Option key={code} value={code}>\n            {code}\n          </Option>\n        ))}\n      </>\n    );\n\n    const Comp = (\n      <StyledPhoneInput\n        data-testid={testIds.root}\n        as={StyledFormControl}\n        forwardedAs={Flex as any}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        ref={containerRef}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n      >\n        {showCountryCode && !readOnly && (\n          <Select\n            data-testid={testIds.countryCode}\n            value={countryCode}\n            aria-label={t('select_country_code')}\n            onChange={onSelectChange}\n            required={required}\n            status={status}\n            readOnly={readOnly}\n            disabled={disabled}\n            autoComplete='tel-country-code'\n            hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n          >\n            {codesOptions}\n          </Select>\n        )}\n        <Input\n          data-testid={testIds.control}\n          {...restProps}\n          inputMode='tel'\n          ref={inputRef}\n          value={formatted}\n          aria-label={t('enter_a_number')}\n          onChange={onInputChange}\n          required={required}\n          status={status}\n          readOnly={readOnly}\n          disabled={disabled}\n          autoComplete='tel-national'\n          hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n        />\n      </StyledPhoneInput>\n    );\n\n    return label ? (\n      <FormField\n        testId={testIds}\n        as='fieldset'\n        labelAs='legend'\n        additionalInfo={additionalInfo}\n        label={label}\n        labelHidden={labelHidden}\n        id={id}\n        info={info}\n        status={status}\n        required={required}\n        disabled={disabled}\n        onResolveSuggestion={onResolveSuggestion}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default withTestIds(PhoneInput, getPhoneInputTestIds);\n"]}

package/lib/components/Progress/Progress.styles.js

@@ -1,6 +1,6 @@
-import { rgba, readableColor } from 'polished';
+import { rgba } from 'polished';
 import styled, { css } from 'styled-components';
-import { calculateFontSize } from '../../styles';
+import { calculateFontSize, readableColor } from '../../styles';
 import { defaultThemeProp } from '../../theme';
 import { tryCatch } from '../../utils';
 import Backdrop from '../Backdrop';

package/lib/components/Progress/Progress.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.styles.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { rgba, readableColor } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { calculateFontSize } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport Backdrop from '../Backdrop';\nimport Flex from '../Flex';\n\nimport type { ProgressProps } from './Progress.types';\n\nexport const StyledProgressBackdrop = styled(Backdrop)``;\n\nconst StyledProgressVisual = styled.div(({ theme }) => {\n  return css`\n    &:focus-visible {\n      box-shadow: ${theme.components.button['focus-shadow']};\n      outline: none;\n      border-radius: calc(9999 * ${theme.base['border-radius']});\n    }\n  `;\n});\n\nStyledProgressVisual.defaultProps = defaultThemeProp;\n\nexport const StyledProgressRing = styled(StyledProgressVisual)<\n  Pick<ProgressProps, 'placement'> & { determinate: boolean }\n>(({ theme, placement, determinate }) => {\n  const size = placement === 'inline' ? '1em' : '2rem';\n\n  return css`\n    position: relative;\n\n    svg {\n      display: block;\n      width: ${size};\n      height: ${size};\n\n      circle {\n        fill: transparent;\n        stroke: ${theme.base.colors.gray['extra-light']};\n        stroke-width: 2;\n        r: 45%;\n        cx: 50%;\n        cy: 50%;\n        transform: rotate(-90deg);\n        transform-origin: 50% 50%;\n\n        &:nth-child(2) {\n          stroke: ${theme.components.progress['progress-color']};\n          transition: stroke-dashoffset calc(0.5 * ${theme.base.animation.speed})\n            ${theme.base.animation.timing.ease};\n\n          ${!determinate &&\n          css`\n            @keyframes LoadingRing {\n              0% {\n                transform: rotate(0deg);\n              }\n\n              100% {\n                transform: rotate(360deg);\n              }\n            }\n            animation: LoadingRing calc(4 * ${theme.base.animation.speed}) linear infinite;\n          `}\n        }\n      }\n    }\n\n    ${placement === 'inline' &&\n    css`\n      display: inline-flex;\n      vertical-align: top;\n    `}\n  `;\n});\n\nStyledProgressRing.defaultProps = defaultThemeProp;\n\nexport const StyledProgressBar = styled(StyledProgressVisual)<\n  ProgressProps & { determinate: boolean }\n>(({ theme, placement, determinate }) => {\n  return css`\n    background-color: ${theme.base.colors.gray['extra-light']};\n    border-radius: ${theme.base['border-radius']};\n    ${placement === 'local'\n      ? css`\n          width: calc(100% - 4 * ${theme.base.spacing});\n        `\n      : css`\n          width: 100%;\n        `}\n    height: 0.375rem;\n    min-width: 2rem;\n    max-width: min(calc(100vw - 4 * ${theme.base.spacing}), ${theme.base['content-width'].lg});\n    overflow: hidden;\n\n    ::before {\n      content: '';\n      display: block;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      border-radius: ${theme.base['border-radius']};\n      background-color: ${theme.components.progress['progress-color']};\n      ${determinate &&\n      css`\n        transform: translateX(var(--progress, 0));\n        transform-origin: 0 50%;\n        transition: transform calc(0.5 * ${theme.base.animation.speed})\n          ${theme.base.animation.timing.ease};\n      `}\n\n      ${!determinate &&\n      css`\n        @keyframes LoadingBar {\n          0% {\n            transform: translateX(-100%);\n          }\n\n          100% {\n            transform: translateX(200%);\n          }\n        }\n        animation: LoadingBar calc(8 * ${theme.base.animation.speed}) linear infinite;\n        width: 50%;\n      `}\n    }\n\n    ${placement === 'inline' &&\n    css`\n      width: 3rem;\n      display: inline-block;\n      position: relative;\n    `}\n  `;\n});\n\nStyledProgressBar.defaultProps = defaultThemeProp;\n\nexport const StyledProgressEllipsis = styled(StyledProgressVisual)<\n  Pick<ProgressProps, 'placement'>\n>(({ theme, placement }) => {\n  return css`\n    line-height: 1;\n    display: ${placement === 'inline' ? 'inline-flex' : 'block'};\n\n    @keyframes LoadingEllipsis {\n      0% {\n        transform: scale(0);\n        opacity: 0;\n      }\n\n      50% {\n        transform: scale(1);\n        opacity: 1;\n      }\n\n      100% {\n        transform: scale(0);\n        opacity: 0;\n      }\n    }\n\n    > span {\n      display: flex;\n      justify-content: center;\n      mix-blend-mode: multiply;\n\n      ${placement === 'inline' &&\n      css`\n        display: inline-flex;\n      `}\n    }\n\n    > span span {\n      margin: 0 0.3125rem;\n      background: ${theme.components.progress['progress-color']};\n      border-radius: 50%;\n      animation: LoadingEllipsis calc(4 * ${theme.base.animation.speed}) infinite;\n\n      ${placement === 'global' &&\n      css`\n        width: 1.25rem;\n        height: 1.25rem;\n      `}\n\n      ${(placement === 'local' || placement === 'block') &&\n      css`\n        width: 0.625rem;\n        height: 0.625rem;\n      `}\n\n      ${placement === 'inline' &&\n      css`\n        width: 0.1875rem;\n        height: 0.1875rem;\n        margin: 0 0.1875rem;\n        animation-duration: calc(4 * ${theme.base.animation.speed});\n      `}\n\n      &:nth-child(2) {\n        animation-delay: 0.1667s;\n      }\n\n      &:nth-child(3) {\n        animation-delay: ${0.1667 * 2}s;\n      }\n    }\n  `;\n});\n\nStyledProgressEllipsis.defaultProps = defaultThemeProp;\n\nexport const StyledMessage = styled.span(({ theme }) => {\n  const color = tryCatch(() => {\n    return rgba(\n      readableColor(theme.base.palette['primary-background']),\n      theme.base.transparency['transparent-3']\n    );\n  });\n\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    font-size: ${fontSize[theme.components.label['font-size'] as FontSize]};\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n    color: ${color};\n  `;\n});\n\nStyledMessage.defaultProps = defaultThemeProp;\n\nexport const StyledProgress = styled(Flex)<Pick<ProgressProps, 'placement'>>(\n  ({ theme, placement }) => {\n    return css`\n      ${placement !== 'inline' &&\n      css`\n        width: 100%;\n      `}\n\n      ${placement === 'block' &&\n      css`\n        margin-block: calc(2 * ${theme.base.spacing});\n      `}\n    `;\n  }\n);\n\nStyledProgress.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Progress.styles.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { rgba } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { calculateFontSize, readableColor } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport Backdrop from '../Backdrop';\nimport Flex from '../Flex';\n\nimport type { ProgressProps } from './Progress.types';\n\nexport const StyledProgressBackdrop = styled(Backdrop)``;\n\nconst StyledProgressVisual = styled.div(({ theme }) => {\n  return css`\n    &:focus-visible {\n      box-shadow: ${theme.components.button['focus-shadow']};\n      outline: none;\n      border-radius: calc(9999 * ${theme.base['border-radius']});\n    }\n  `;\n});\n\nStyledProgressVisual.defaultProps = defaultThemeProp;\n\nexport const StyledProgressRing = styled(StyledProgressVisual)<\n  Pick<ProgressProps, 'placement'> & { determinate: boolean }\n>(({ theme, placement, determinate }) => {\n  const size = placement === 'inline' ? '1em' : '2rem';\n\n  return css`\n    position: relative;\n\n    svg {\n      display: block;\n      width: ${size};\n      height: ${size};\n\n      circle {\n        fill: transparent;\n        stroke: ${theme.base.colors.gray['extra-light']};\n        stroke-width: 2;\n        r: 45%;\n        cx: 50%;\n        cy: 50%;\n        transform: rotate(-90deg);\n        transform-origin: 50% 50%;\n\n        &:nth-child(2) {\n          stroke: ${theme.components.progress['progress-color']};\n          transition: stroke-dashoffset calc(0.5 * ${theme.base.animation.speed})\n            ${theme.base.animation.timing.ease};\n\n          ${!determinate &&\n          css`\n            @keyframes LoadingRing {\n              0% {\n                transform: rotate(0deg);\n              }\n\n              100% {\n                transform: rotate(360deg);\n              }\n            }\n            animation: LoadingRing calc(4 * ${theme.base.animation.speed}) linear infinite;\n          `}\n        }\n      }\n    }\n\n    ${placement === 'inline' &&\n    css`\n      display: inline-flex;\n      vertical-align: top;\n    `}\n  `;\n});\n\nStyledProgressRing.defaultProps = defaultThemeProp;\n\nexport const StyledProgressBar = styled(StyledProgressVisual)<\n  ProgressProps & { determinate: boolean }\n>(({ theme, placement, determinate }) => {\n  return css`\n    background-color: ${theme.base.colors.gray['extra-light']};\n    border-radius: ${theme.base['border-radius']};\n    ${placement === 'local'\n      ? css`\n          width: calc(100% - 4 * ${theme.base.spacing});\n        `\n      : css`\n          width: 100%;\n        `}\n    height: 0.375rem;\n    min-width: 2rem;\n    max-width: min(calc(100vw - 4 * ${theme.base.spacing}), ${theme.base['content-width'].lg});\n    overflow: hidden;\n\n    ::before {\n      content: '';\n      display: block;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      border-radius: ${theme.base['border-radius']};\n      background-color: ${theme.components.progress['progress-color']};\n      ${determinate &&\n      css`\n        transform: translateX(var(--progress, 0));\n        transform-origin: 0 50%;\n        transition: transform calc(0.5 * ${theme.base.animation.speed})\n          ${theme.base.animation.timing.ease};\n      `}\n\n      ${!determinate &&\n      css`\n        @keyframes LoadingBar {\n          0% {\n            transform: translateX(-100%);\n          }\n\n          100% {\n            transform: translateX(200%);\n          }\n        }\n        animation: LoadingBar calc(8 * ${theme.base.animation.speed}) linear infinite;\n        width: 50%;\n      `}\n    }\n\n    ${placement === 'inline' &&\n    css`\n      width: 3rem;\n      display: inline-block;\n      position: relative;\n    `}\n  `;\n});\n\nStyledProgressBar.defaultProps = defaultThemeProp;\n\nexport const StyledProgressEllipsis = styled(StyledProgressVisual)<\n  Pick<ProgressProps, 'placement'>\n>(({ theme, placement }) => {\n  return css`\n    line-height: 1;\n    display: ${placement === 'inline' ? 'inline-flex' : 'block'};\n\n    @keyframes LoadingEllipsis {\n      0% {\n        transform: scale(0);\n        opacity: 0;\n      }\n\n      50% {\n        transform: scale(1);\n        opacity: 1;\n      }\n\n      100% {\n        transform: scale(0);\n        opacity: 0;\n      }\n    }\n\n    > span {\n      display: flex;\n      justify-content: center;\n      mix-blend-mode: multiply;\n\n      ${placement === 'inline' &&\n      css`\n        display: inline-flex;\n      `}\n    }\n\n    > span span {\n      margin: 0 0.3125rem;\n      background: ${theme.components.progress['progress-color']};\n      border-radius: 50%;\n      animation: LoadingEllipsis calc(4 * ${theme.base.animation.speed}) infinite;\n\n      ${placement === 'global' &&\n      css`\n        width: 1.25rem;\n        height: 1.25rem;\n      `}\n\n      ${(placement === 'local' || placement === 'block') &&\n      css`\n        width: 0.625rem;\n        height: 0.625rem;\n      `}\n\n      ${placement === 'inline' &&\n      css`\n        width: 0.1875rem;\n        height: 0.1875rem;\n        margin: 0 0.1875rem;\n        animation-duration: calc(4 * ${theme.base.animation.speed});\n      `}\n\n      &:nth-child(2) {\n        animation-delay: 0.1667s;\n      }\n\n      &:nth-child(3) {\n        animation-delay: ${0.1667 * 2}s;\n      }\n    }\n  `;\n});\n\nStyledProgressEllipsis.defaultProps = defaultThemeProp;\n\nexport const StyledMessage = styled.span(({ theme }) => {\n  const color = tryCatch(() => {\n    return rgba(\n      readableColor(theme.base.palette['primary-background']),\n      theme.base.transparency['transparent-3']\n    );\n  });\n\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    font-size: ${fontSize[theme.components.label['font-size'] as FontSize]};\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n    color: ${color};\n  `;\n});\n\nStyledMessage.defaultProps = defaultThemeProp;\n\nexport const StyledProgress = styled(Flex)<Pick<ProgressProps, 'placement'>>(\n  ({ theme, placement }) => {\n    return css`\n      ${placement !== 'inline' &&\n      css`\n        width: 100%;\n      `}\n\n      ${placement === 'block' &&\n      css`\n        margin-block: calc(2 * ${theme.base.spacing});\n      `}\n    `;\n  }\n);\n\nStyledProgress.defaultProps = defaultThemeProp;\n"]}

package/lib/components/RadioCheck/RadioCheck.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect } from 'react';
 import styled, { css } from 'styled-components';
-import { readableColor, hideVisually, mix } from 'polished';
+import { hideVisually, mix } from 'polished';
 import FormField, { StyledFormFieldInfo } from '../FormField';
 import { StyledFormControl } from '../FormControl';
 import { defaultThemeProp } from '../../theme';
 import { tryCatch } from '../../utils';
 import { useConsolidatedRef, useDirection, useI18n, useUID } from '../../hooks';
 import { StyledLabel } from '../Label';
-import { calculateFontSize } from '../../styles';
+import { calculateFontSize, readableColor } from '../../styles';
 import VisuallyHiddenText from '../VisuallyHiddenText';
 export const StyledPseudoRadioCheck = styled.div(props => {
     const { theme: { base: { spacing, palette: { 'primary-background': primaryBackground } }, components: { 'form-field': formField, 'radio-check': { size, 'touch-size': touchSize, 'background-color': backgroundColor, 'border-color': borderColor, 'border-width': borderWidth } } }, status } = props;

package/lib/components/RadioCheck/RadioCheck.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioCheck.js","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect } from 'react';\nimport type {\n  FC,\n  Ref,\n  MouseEvent,\n  KeyboardEvent,\n  PropsWithoutRef,\n  MouseEventHandler,\n  KeyboardEventHandler\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor, hideVisually, mix } from 'polished';\n\nimport FormField, { StyledFormFieldInfo } from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { useConsolidatedRef, useDirection, useI18n, useUID } from '../../hooks';\nimport { StyledLabel } from '../Label';\nimport { calculateFontSize } from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nexport interface RadioCheckProps extends BaseProps, NoChildrenProp {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Sets the type of input. */\n  type: 'radio' | 'checkbox';\n  /** Sets checked prop via onChange when using as controlled component. */\n  checked?: boolean;\n  /** Initialize checked prop when using as uncontrolled component. */\n  defaultChecked?: boolean;\n  /**\n   * Sets control to an an indeterminate state.\n   * @default false\n   */\n  indeterminate?: boolean;\n  /**\n   * Controls the styling of the RadioCheck.\n   * @default 'simple'\n   */\n  variant?: 'simple' | 'card';\n  /** Callback function for onClick events. */\n  onClick?: MouseEventHandler<HTMLInputElement>;\n  /** Callback function for onKeyDown events. */\n  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n  /** info like error, success, warning messages */\n  info?: FormControlProps['info'];\n  /** Ref forwarded to the underlying input. */\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport const StyledPseudoRadioCheck = styled.div<Pick<RadioCheckProps, 'readOnly' | 'status'>>(\n  props => {\n    const {\n      theme: {\n        base: {\n          spacing,\n          palette: { 'primary-background': primaryBackground }\n        },\n        components: {\n          'form-field': formField,\n          'radio-check': {\n            size,\n            'touch-size': touchSize,\n            'background-color': backgroundColor,\n            'border-color': borderColor,\n            'border-width': borderWidth\n          }\n        }\n      },\n      status\n    } = props;\n\n    const useBorderColor = status === 'error' ? formField.error['status-color'] : borderColor;\n    const useBackgroundColor =\n      status && formField[status]\n        ? tryCatch(() => mix(0.8, primaryBackground, formField[status]['status-color']))\n        : backgroundColor;\n\n    return css`\n      display: flex;\n      flex-shrink: 0;\n      position: relative;\n      width: ${size};\n      height: ${size};\n      margin-inline-end: ${spacing};\n      border: ${borderWidth} solid ${useBorderColor};\n      background-color: ${useBackgroundColor};\n\n      @media (pointer: coarse) {\n        width: ${touchSize};\n        height: ${touchSize};\n      }\n\n      &::after {\n        content: '';\n        display: none;\n      }\n    `;\n  }\n);\n\nStyledPseudoRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckInput = styled.input(props => {\n  const {\n    disabled,\n    theme: {\n      base: { 'border-radius': baseBorderRadius },\n      components: {\n        'form-control': {\n          ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor },\n          ':read-only': { 'background-color': readOnlyBackgroundColor }\n        },\n        'radio-check': {\n          size,\n          ':checked': {\n            'background-color': checkedBackgroundColor,\n            'border-color': checkedBorderColor\n          }\n        },\n        checkbox: { 'border-radius': checkRadius },\n        'radio-button': { 'border-radius': radioRadius }\n      }\n    }\n  } = props;\n\n  const backgroundColor = props.readOnly ? readOnlyBackgroundColor : checkedBackgroundColor;\n  const foreground = tryCatch(() => readableColor(backgroundColor));\n\n  const prcSelector = `+ ${StyledLabel} ${StyledPseudoRadioCheck}`;\n  const { ltr } = useDirection();\n\n  return css`\n    ${hideVisually}\n    margin: 0;\n\n    /* Sets rect size for JAWS focus outline */\n    width: ${size};\n    height: ${size};\n\n    ${!disabled &&\n    css`\n      &:focus ${prcSelector} {\n        box-shadow: ${shadow};\n        border-color: ${focusBorderColor};\n      }\n    `}\n\n    &:checked\n      ${prcSelector},\n      &:checked:disabled\n      ${prcSelector},\n      &[type='checkbox']:indeterminate\n      ${prcSelector},\n      &[type='checkbox']:indeterminate:disabled\n      ${prcSelector} {\n      border-color: ${props.readOnly ? 'inherit' : checkedBorderColor};\n      background-color: ${backgroundColor};\n\n      &::after {\n        display: block;\n      }\n    }\n\n    &[type='radio'] ${prcSelector}, &[type='radio'] ${prcSelector}::after {\n      border-radius: ${radioRadius};\n    }\n\n    &[type='radio'] ${prcSelector}::after {\n      margin: auto;\n      width: 100%;\n      height: 100%;\n      background-color: ${foreground};\n      transform: scale(0.4);\n    }\n\n    &[type='checkbox'] ${prcSelector} {\n      border-radius: min(calc(${baseBorderRadius} * ${checkRadius}), 0.25rem);\n    }\n\n    &[type='checkbox']:not(:indeterminate) ${prcSelector} {\n      &::after {\n        width: 40%;\n        height: 75%;\n        ${ltr\n          ? css`\n              transform: rotate(45deg) translate(50%, -30%);\n            `\n          : css`\n              transform: rotate(45deg) translate(-50%, 30%);\n            `}\n        border-right: 0.15em solid ${foreground};\n        border-bottom: 0.15em solid ${foreground};\n      }\n    }\n\n    &[type='checkbox']:indeterminate ${prcSelector} {\n      display: flex;\n      &::after {\n        width: 90%;\n        height: 0.15em;\n        margin: auto;\n        background-color: ${foreground};\n      }\n    }\n  `;\n});\n\nStyledRadioCheckInput.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheck = styled.div<Pick<RadioCheckProps, 'disabled' | 'readOnly'>>(\n  props => {\n    const {\n      disabled,\n      readOnly,\n      theme: {\n        base,\n        components: {\n          'radio-check': {\n            label: { color: labelColor, 'font-weight': labelFontWeight }\n          },\n          'form-control': {\n            ':hover': { 'border-color': hoverBorderColor }\n          }\n        }\n      }\n    } = props;\n\n    const fontSize = calculateFontSize(base['font-size'], base['font-scale']);\n\n    return css`\n      > ${StyledLabel} {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        font-weight: ${labelFontWeight};\n        word-break: break-word;\n        font-size: ${fontSize.s};\n        color: ${labelColor};\n        margin: 0;\n        min-height: ${base['hit-area']['mouse-min']};\n\n        @media (pointer: coarse) {\n          min-height: ${base['hit-area']['finger-min']};\n        }\n      }\n\n      > ${StyledFormFieldInfo} {\n        margin: 0;\n        padding-inline-start: calc(${base.spacing} / 4);\n      }\n\n      ${!(disabled || readOnly) &&\n      css`\n        &:not(:focus-within) > ${StyledLabel}:hover ${StyledPseudoRadioCheck} {\n          border-color: ${hoverBorderColor};\n        }\n      `}\n    `;\n  }\n);\n\nStyledRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckCard = styled.label<\n  Pick<RadioCheckProps, 'disabled' | 'readOnly' | 'status'>\n>(\n  ({\n    disabled,\n    readOnly,\n    status,\n    theme: {\n      base: { palette, shadow, spacing },\n      components: {\n        card,\n        'form-field': formField,\n        'radio-check': { label },\n        'form-control': {\n          ':hover': { 'border-color': hoverBorderColor }\n        }\n      }\n    }\n  }) => {\n    const useBorderColor =\n      status === 'error' ? formField.error['status-color'] : palette['border-line'];\n\n    return css`\n      min-width: min-content;\n      cursor: pointer;\n      background-color: ${card.background};\n      border-radius: ${card['border-radius']};\n      border: 0.0625rem solid ${useBorderColor};\n      padding: ${spacing};\n\n      ${disabled &&\n      css`\n        cursor: not-allowed;\n      `}\n\n      ${!(disabled || readOnly) &&\n      css`\n        :hover:not(:focus-within) {\n          border-color: ${hoverBorderColor};\n          ${StyledLabel} ${StyledPseudoRadioCheck} {\n            border-color: ${hoverBorderColor};\n          }\n        }\n\n        :focus-within {\n          box-shadow: ${shadow.focus};\n          border-color: transparent;\n        }\n      `}\n\n    > ${StyledLabel} {\n        display: flex;\n        align-items: center;\n        color: ${label.color};\n        font-weight: ${label['font-weight']};\n        margin: 0;\n      }\n\n      > ${StyledFormFieldInfo} {\n        margin: 0;\n        padding-inline-start: calc(${spacing} / 4);\n      }\n    `;\n  }\n);\n\nStyledRadioCheckCard.defaultProps = defaultThemeProp;\n\nconst RadioCheck: FC<RadioCheckProps & ForwardProps> = forwardRef(function RadioCheck(\n  props: PropsWithoutRef<RadioCheckProps>,\n  ref: RadioCheckProps['ref']\n) {\n  const uid = useUID();\n  const t = useI18n();\n\n  const {\n    type,\n    id = uid,\n    label,\n    required = false,\n    disabled = false,\n    indeterminate = false,\n    readOnly = false,\n    variant = 'simple',\n    onClick,\n    onKeyDown,\n    status,\n    info,\n    additionalInfo,\n    ...restProps\n  } = props;\n\n  const isRadio = type === 'radio';\n  const card = variant === 'card';\n  const newRef = useConsolidatedRef(ref);\n\n  useEffect(() => {\n    if (!isRadio && newRef.current) {\n      newRef.current.indeterminate = !!indeterminate;\n    }\n  }, [newRef, indeterminate, isRadio]);\n\n  return (\n    <FormField\n      as={card ? StyledRadioCheckCard : StyledRadioCheck}\n      label={\n        <>\n          <StyledPseudoRadioCheck\n            status={status}\n            isRadio={isRadio}\n            as={StyledFormControl}\n            required={required}\n            disabled={disabled}\n            readOnly={readOnly}\n            onMouseDown={(e: MouseEvent<HTMLInputElement>) => {\n              e.preventDefault();\n            }}\n          />\n          <>\n            {label}\n            {readOnly && <VisuallyHiddenText>{` ${t('read_only')}`}</VisuallyHiddenText>}\n          </>\n        </>\n      }\n      labelAs={card ? 'div' : undefined}\n      id={id}\n      required={required}\n      disabled={disabled}\n      readOnly={readOnly}\n      status={status}\n      info={info}\n      isRadioCheck\n      inline\n      labelAfter\n      additionalInfo={additionalInfo}\n    >\n      <StyledRadioCheckInput\n        {...restProps}\n        id={id}\n        type={type}\n        required={required}\n        disabled={disabled}\n        readOnly={readOnly}\n        onClick={(e: MouseEvent<HTMLInputElement>) => {\n          if (readOnly) e.preventDefault();\n\n          onClick?.(e);\n        }}\n        onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n          if (type === 'checkbox' && readOnly && e.key === ' ') {\n            e.preventDefault();\n          }\n          if (type === 'radio' && readOnly && e.key.includes('Arrow')) {\n            e.preventDefault();\n          }\n\n          onKeyDown?.(e);\n        }}\n        ref={newRef}\n      />\n    </FormField>\n  );\n});\n\nexport default RadioCheck;\n"]}
+{"version":3,"file":"RadioCheck.js","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect } from 'react';\nimport type {\n  FC,\n  Ref,\n  MouseEvent,\n  KeyboardEvent,\n  PropsWithoutRef,\n  MouseEventHandler,\n  KeyboardEventHandler\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually, mix } from 'polished';\n\nimport FormField, { StyledFormFieldInfo } from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { useConsolidatedRef, useDirection, useI18n, useUID } from '../../hooks';\nimport { StyledLabel } from '../Label';\nimport { calculateFontSize, readableColor } from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nexport interface RadioCheckProps extends BaseProps, NoChildrenProp {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Sets the type of input. */\n  type: 'radio' | 'checkbox';\n  /** Sets checked prop via onChange when using as controlled component. */\n  checked?: boolean;\n  /** Initialize checked prop when using as uncontrolled component. */\n  defaultChecked?: boolean;\n  /**\n   * Sets control to an an indeterminate state.\n   * @default false\n   */\n  indeterminate?: boolean;\n  /**\n   * Controls the styling of the RadioCheck.\n   * @default 'simple'\n   */\n  variant?: 'simple' | 'card';\n  /** Callback function for onClick events. */\n  onClick?: MouseEventHandler<HTMLInputElement>;\n  /** Callback function for onKeyDown events. */\n  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n  /** info like error, success, warning messages */\n  info?: FormControlProps['info'];\n  /** Ref forwarded to the underlying input. */\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport const StyledPseudoRadioCheck = styled.div<Pick<RadioCheckProps, 'readOnly' | 'status'>>(\n  props => {\n    const {\n      theme: {\n        base: {\n          spacing,\n          palette: { 'primary-background': primaryBackground }\n        },\n        components: {\n          'form-field': formField,\n          'radio-check': {\n            size,\n            'touch-size': touchSize,\n            'background-color': backgroundColor,\n            'border-color': borderColor,\n            'border-width': borderWidth\n          }\n        }\n      },\n      status\n    } = props;\n\n    const useBorderColor = status === 'error' ? formField.error['status-color'] : borderColor;\n    const useBackgroundColor =\n      status && formField[status]\n        ? tryCatch(() => mix(0.8, primaryBackground, formField[status]['status-color']))\n        : backgroundColor;\n\n    return css`\n      display: flex;\n      flex-shrink: 0;\n      position: relative;\n      width: ${size};\n      height: ${size};\n      margin-inline-end: ${spacing};\n      border: ${borderWidth} solid ${useBorderColor};\n      background-color: ${useBackgroundColor};\n\n      @media (pointer: coarse) {\n        width: ${touchSize};\n        height: ${touchSize};\n      }\n\n      &::after {\n        content: '';\n        display: none;\n      }\n    `;\n  }\n);\n\nStyledPseudoRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckInput = styled.input(props => {\n  const {\n    disabled,\n    theme: {\n      base: { 'border-radius': baseBorderRadius },\n      components: {\n        'form-control': {\n          ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor },\n          ':read-only': { 'background-color': readOnlyBackgroundColor }\n        },\n        'radio-check': {\n          size,\n          ':checked': {\n            'background-color': checkedBackgroundColor,\n            'border-color': checkedBorderColor\n          }\n        },\n        checkbox: { 'border-radius': checkRadius },\n        'radio-button': { 'border-radius': radioRadius }\n      }\n    }\n  } = props;\n\n  const backgroundColor = props.readOnly ? readOnlyBackgroundColor : checkedBackgroundColor;\n  const foreground = tryCatch(() => readableColor(backgroundColor));\n\n  const prcSelector = `+ ${StyledLabel} ${StyledPseudoRadioCheck}`;\n  const { ltr } = useDirection();\n\n  return css`\n    ${hideVisually}\n    margin: 0;\n\n    /* Sets rect size for JAWS focus outline */\n    width: ${size};\n    height: ${size};\n\n    ${!disabled &&\n    css`\n      &:focus ${prcSelector} {\n        box-shadow: ${shadow};\n        border-color: ${focusBorderColor};\n      }\n    `}\n\n    &:checked\n      ${prcSelector},\n      &:checked:disabled\n      ${prcSelector},\n      &[type='checkbox']:indeterminate\n      ${prcSelector},\n      &[type='checkbox']:indeterminate:disabled\n      ${prcSelector} {\n      border-color: ${props.readOnly ? 'inherit' : checkedBorderColor};\n      background-color: ${backgroundColor};\n\n      &::after {\n        display: block;\n      }\n    }\n\n    &[type='radio'] ${prcSelector}, &[type='radio'] ${prcSelector}::after {\n      border-radius: ${radioRadius};\n    }\n\n    &[type='radio'] ${prcSelector}::after {\n      margin: auto;\n      width: 100%;\n      height: 100%;\n      background-color: ${foreground};\n      transform: scale(0.4);\n    }\n\n    &[type='checkbox'] ${prcSelector} {\n      border-radius: min(calc(${baseBorderRadius} * ${checkRadius}), 0.25rem);\n    }\n\n    &[type='checkbox']:not(:indeterminate) ${prcSelector} {\n      &::after {\n        width: 40%;\n        height: 75%;\n        ${ltr\n          ? css`\n              transform: rotate(45deg) translate(50%, -30%);\n            `\n          : css`\n              transform: rotate(45deg) translate(-50%, 30%);\n            `}\n        border-right: 0.15em solid ${foreground};\n        border-bottom: 0.15em solid ${foreground};\n      }\n    }\n\n    &[type='checkbox']:indeterminate ${prcSelector} {\n      display: flex;\n      &::after {\n        width: 90%;\n        height: 0.15em;\n        margin: auto;\n        background-color: ${foreground};\n      }\n    }\n  `;\n});\n\nStyledRadioCheckInput.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheck = styled.div<Pick<RadioCheckProps, 'disabled' | 'readOnly'>>(\n  props => {\n    const {\n      disabled,\n      readOnly,\n      theme: {\n        base,\n        components: {\n          'radio-check': {\n            label: { color: labelColor, 'font-weight': labelFontWeight }\n          },\n          'form-control': {\n            ':hover': { 'border-color': hoverBorderColor }\n          }\n        }\n      }\n    } = props;\n\n    const fontSize = calculateFontSize(base['font-size'], base['font-scale']);\n\n    return css`\n      > ${StyledLabel} {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        font-weight: ${labelFontWeight};\n        word-break: break-word;\n        font-size: ${fontSize.s};\n        color: ${labelColor};\n        margin: 0;\n        min-height: ${base['hit-area']['mouse-min']};\n\n        @media (pointer: coarse) {\n          min-height: ${base['hit-area']['finger-min']};\n        }\n      }\n\n      > ${StyledFormFieldInfo} {\n        margin: 0;\n        padding-inline-start: calc(${base.spacing} / 4);\n      }\n\n      ${!(disabled || readOnly) &&\n      css`\n        &:not(:focus-within) > ${StyledLabel}:hover ${StyledPseudoRadioCheck} {\n          border-color: ${hoverBorderColor};\n        }\n      `}\n    `;\n  }\n);\n\nStyledRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckCard = styled.label<\n  Pick<RadioCheckProps, 'disabled' | 'readOnly' | 'status'>\n>(\n  ({\n    disabled,\n    readOnly,\n    status,\n    theme: {\n      base: { palette, shadow, spacing },\n      components: {\n        card,\n        'form-field': formField,\n        'radio-check': { label },\n        'form-control': {\n          ':hover': { 'border-color': hoverBorderColor }\n        }\n      }\n    }\n  }) => {\n    const useBorderColor =\n      status === 'error' ? formField.error['status-color'] : palette['border-line'];\n\n    return css`\n      min-width: min-content;\n      cursor: pointer;\n      background-color: ${card.background};\n      border-radius: ${card['border-radius']};\n      border: 0.0625rem solid ${useBorderColor};\n      padding: ${spacing};\n\n      ${disabled &&\n      css`\n        cursor: not-allowed;\n      `}\n\n      ${!(disabled || readOnly) &&\n      css`\n        :hover:not(:focus-within) {\n          border-color: ${hoverBorderColor};\n          ${StyledLabel} ${StyledPseudoRadioCheck} {\n            border-color: ${hoverBorderColor};\n          }\n        }\n\n        :focus-within {\n          box-shadow: ${shadow.focus};\n          border-color: transparent;\n        }\n      `}\n\n    > ${StyledLabel} {\n        display: flex;\n        align-items: center;\n        color: ${label.color};\n        font-weight: ${label['font-weight']};\n        margin: 0;\n      }\n\n      > ${StyledFormFieldInfo} {\n        margin: 0;\n        padding-inline-start: calc(${spacing} / 4);\n      }\n    `;\n  }\n);\n\nStyledRadioCheckCard.defaultProps = defaultThemeProp;\n\nconst RadioCheck: FC<RadioCheckProps & ForwardProps> = forwardRef(function RadioCheck(\n  props: PropsWithoutRef<RadioCheckProps>,\n  ref: RadioCheckProps['ref']\n) {\n  const uid = useUID();\n  const t = useI18n();\n\n  const {\n    type,\n    id = uid,\n    label,\n    required = false,\n    disabled = false,\n    indeterminate = false,\n    readOnly = false,\n    variant = 'simple',\n    onClick,\n    onKeyDown,\n    status,\n    info,\n    additionalInfo,\n    ...restProps\n  } = props;\n\n  const isRadio = type === 'radio';\n  const card = variant === 'card';\n  const newRef = useConsolidatedRef(ref);\n\n  useEffect(() => {\n    if (!isRadio && newRef.current) {\n      newRef.current.indeterminate = !!indeterminate;\n    }\n  }, [newRef, indeterminate, isRadio]);\n\n  return (\n    <FormField\n      as={card ? StyledRadioCheckCard : StyledRadioCheck}\n      label={\n        <>\n          <StyledPseudoRadioCheck\n            status={status}\n            isRadio={isRadio}\n            as={StyledFormControl}\n            required={required}\n            disabled={disabled}\n            readOnly={readOnly}\n            onMouseDown={(e: MouseEvent<HTMLInputElement>) => {\n              e.preventDefault();\n            }}\n          />\n          <>\n            {label}\n            {readOnly && <VisuallyHiddenText>{` ${t('read_only')}`}</VisuallyHiddenText>}\n          </>\n        </>\n      }\n      labelAs={card ? 'div' : undefined}\n      id={id}\n      required={required}\n      disabled={disabled}\n      readOnly={readOnly}\n      status={status}\n      info={info}\n      isRadioCheck\n      inline\n      labelAfter\n      additionalInfo={additionalInfo}\n    >\n      <StyledRadioCheckInput\n        {...restProps}\n        id={id}\n        type={type}\n        required={required}\n        disabled={disabled}\n        readOnly={readOnly}\n        onClick={(e: MouseEvent<HTMLInputElement>) => {\n          if (readOnly) e.preventDefault();\n\n          onClick?.(e);\n        }}\n        onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n          if (type === 'checkbox' && readOnly && e.key === ' ') {\n            e.preventDefault();\n          }\n          if (type === 'radio' && readOnly && e.key.includes('Arrow')) {\n            e.preventDefault();\n          }\n\n          onKeyDown?.(e);\n        }}\n        ref={newRef}\n      />\n    </FormField>\n  );\n});\n\nexport default RadioCheck;\n"]}

package/lib/components/Switch/Switch.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { hideVisually, readableColor } from 'polished';
+import { hideVisually } from 'polished';
 import { defaultThemeProp } from '../../theme';
 import { useDirection, useUID } from '../../hooks';
 import Flex from '../Flex';
-import { getHoverColors } from '../../styles';
+import { getHoverColors, readableColor } from '../../styles';
 import Icon, { StyledIcon, registerIcon } from '../Icon';
 import * as checkIcon from '../Icon/icons/check.icon';
 import { tryCatch } from '../../utils';

package/lib/components/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { ChangeEvent, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually, readableColor } from 'polished';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport type { FormControlProps } from '../FormControl';\nimport { useDirection, useUID } from '../../hooks';\nimport Flex from '../Flex';\nimport { getHoverColors } from '../../styles';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport { tryCatch } from '../../utils';\n\nregisterIcon(checkIcon);\n\nexport interface SwitchProps extends BaseProps, NoChildrenProp {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /**\n   * Disables the control.\n   * @default false\n   */\n  disabled?: FormControlProps['disabled'];\n  /**\n   * Sets checked prop via onChange.\n   * @default false\n   */\n  on?: boolean;\n  /** Callback that is triggered when the Switch is toggled. */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Ref for the input element. */\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport const SwitchLabel = styled.label(\n  ({\n    theme: {\n      base,\n      components: {\n        switch: { width, height, 'touch-width': touchWidth, 'touch-height': touchHeight, off }\n      }\n    }\n  }) => {\n    return css`\n      position: relative;\n      cursor: pointer;\n      padding-inline-end: calc(${width} + 0.5rem);\n      height: ${height};\n      width: 100%;\n\n      @media (pointer: coarse) {\n        padding-inline-end: calc(${touchWidth} + 0.5rem);\n        height: ${touchHeight};\n      }\n\n      /** Checkmark */\n      & > ${StyledIcon} {\n        position: absolute;\n        inset-inline-end: calc(0.5 * ${width} + 0.25rem);\n        height: calc(0.5 * ${height});\n        width: calc(0.5 * ${height});\n\n        @media (pointer: coarse) {\n          inset-inline-end: calc(0.5 * ${touchWidth} + 0.25rem);\n          height: calc(0.5 * ${touchHeight});\n          width: calc(0.5 * ${touchHeight});\n        }\n      }\n\n      /** Track */\n      &::before {\n        position: absolute;\n        content: '';\n        inset-inline-end: 0;\n        width: ${width};\n        height: ${height};\n        background-color: ${off.color};\n        transition: background-color calc(0.5 * ${base.animation.speed})\n          ${base.animation.timing.ease};\n        border-radius: calc(9999 * ${base['border-radius']});\n\n        @media (pointer: coarse) {\n          width: ${touchWidth};\n          height: ${touchHeight};\n        }\n      }\n\n      /** Switch */\n      &::after {\n        position: absolute;\n        content: '';\n        inset-inline-end: calc(${width} - ${height} + 0.0625rem);\n        height: calc(${height} - 0.125rem);\n        width: calc(${height} - 0.125rem);\n        background-color: ${base.palette['primary-background']};\n        transition: transform calc(0.5 * ${base.animation.speed}) ${base.animation.timing.ease};\n        border-radius: calc(9999 * ${base['border-radius']});\n\n        @media (pointer: coarse) {\n          inset-inline-end: calc(${touchWidth} - ${touchHeight} + 0.0625rem);\n          height: calc(${touchHeight} - 0.125rem);\n          width: calc(${touchHeight} - 0.125rem);\n        }\n      }\n    `;\n  }\n);\n\nSwitchLabel.defaultProps = defaultThemeProp;\n\nexport const SwitchInput = styled.input(\n  ({\n    theme: {\n      base,\n      components: {\n        'form-control': {\n          ':focus': { 'box-shadow': shadow }\n        },\n        switch: { height, width, 'touch-height': touchHeight, 'touch-width': touchWidth, on, off }\n      }\n    }\n  }) => {\n    const { ltr } = useDirection();\n\n    const checkmarkColor = tryCatch(() => readableColor(on.color));\n\n    const onHoverColors = getHoverColors(on.color);\n    const offHoverColors = getHoverColors(off.color);\n\n    return css`\n      ${hideVisually}\n\n      & + ${SwitchLabel} {\n        min-height: ${base['hit-area']['mouse-min']};\n        @media (pointer: coarse) {\n          min-height: ${base['hit-area']['finger-min']};\n        }\n      }\n\n      & + ${SwitchLabel} > ${StyledIcon} {\n        color: ${checkmarkColor};\n      }\n\n      &:checked + ${SwitchLabel}::before {\n        background-color: ${on.color};\n      }\n\n      &:checked + ${SwitchLabel}::after {\n        transform: translateX(calc((${width} - ${height}) * ${ltr ? '1' : '-1'}));\n\n        @media (pointer: coarse) {\n          transform: translateX(calc((${touchWidth} - ${touchHeight}) * ${ltr ? '1' : '-1'}));\n        }\n      }\n\n      &:hover + ${SwitchLabel} > ${StyledIcon} {\n        color: ${onHoverColors.foreground};\n      }\n\n      &:hover:checked + ${SwitchLabel}::before {\n        background-color: ${onHoverColors.background};\n      }\n\n      &:hover + ${SwitchLabel}::before {\n        background-color: ${offHoverColors.background};\n      }\n\n      &:focus + ${SwitchLabel}::before {\n        box-shadow: ${shadow};\n      }\n\n      &:disabled + ${SwitchLabel} {\n        opacity: ${base['disabled-opacity']};\n      }\n    `;\n  }\n);\n\nSwitchInput.defaultProps = defaultThemeProp;\n\nexport const StyledSwitch = styled.div``;\n\nconst Switch: FunctionComponent<SwitchProps & ForwardProps> = forwardRef(function Switch(\n  props: PropsWithoutRef<SwitchProps>,\n  ref: SwitchProps['ref']\n) {\n  const uid = useUID();\n  const { id = uid, label, disabled = false, on = false, onChange, ...restProps } = props;\n\n  return (\n    <StyledSwitch>\n      <SwitchInput\n        {...restProps}\n        id={id}\n        type='checkbox'\n        role='switch'\n        checked={on}\n        aria-checked={on}\n        disabled={disabled}\n        onChange={onChange}\n        ref={ref}\n      />\n      <Flex container={{ alignItems: 'center' }} as={SwitchLabel} htmlFor={id}>\n        {label}\n        {on && <Icon name='check' />}\n      </Flex>\n    </StyledSwitch>\n  );\n});\n\nexport default Switch;\n"]}
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { ChangeEvent, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport type { FormControlProps } from '../FormControl';\nimport { useDirection, useUID } from '../../hooks';\nimport Flex from '../Flex';\nimport { getHoverColors, readableColor } from '../../styles';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport { tryCatch } from '../../utils';\n\nregisterIcon(checkIcon);\n\nexport interface SwitchProps extends BaseProps, NoChildrenProp {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /**\n   * Disables the control.\n   * @default false\n   */\n  disabled?: FormControlProps['disabled'];\n  /**\n   * Sets checked prop via onChange.\n   * @default false\n   */\n  on?: boolean;\n  /** Callback that is triggered when the Switch is toggled. */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Ref for the input element. */\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport const SwitchLabel = styled.label(\n  ({\n    theme: {\n      base,\n      components: {\n        switch: { width, height, 'touch-width': touchWidth, 'touch-height': touchHeight, off }\n      }\n    }\n  }) => {\n    return css`\n      position: relative;\n      cursor: pointer;\n      padding-inline-end: calc(${width} + 0.5rem);\n      height: ${height};\n      width: 100%;\n\n      @media (pointer: coarse) {\n        padding-inline-end: calc(${touchWidth} + 0.5rem);\n        height: ${touchHeight};\n      }\n\n      /** Checkmark */\n      & > ${StyledIcon} {\n        position: absolute;\n        inset-inline-end: calc(0.5 * ${width} + 0.25rem);\n        height: calc(0.5 * ${height});\n        width: calc(0.5 * ${height});\n\n        @media (pointer: coarse) {\n          inset-inline-end: calc(0.5 * ${touchWidth} + 0.25rem);\n          height: calc(0.5 * ${touchHeight});\n          width: calc(0.5 * ${touchHeight});\n        }\n      }\n\n      /** Track */\n      &::before {\n        position: absolute;\n        content: '';\n        inset-inline-end: 0;\n        width: ${width};\n        height: ${height};\n        background-color: ${off.color};\n        transition: background-color calc(0.5 * ${base.animation.speed})\n          ${base.animation.timing.ease};\n        border-radius: calc(9999 * ${base['border-radius']});\n\n        @media (pointer: coarse) {\n          width: ${touchWidth};\n          height: ${touchHeight};\n        }\n      }\n\n      /** Switch */\n      &::after {\n        position: absolute;\n        content: '';\n        inset-inline-end: calc(${width} - ${height} + 0.0625rem);\n        height: calc(${height} - 0.125rem);\n        width: calc(${height} - 0.125rem);\n        background-color: ${base.palette['primary-background']};\n        transition: transform calc(0.5 * ${base.animation.speed}) ${base.animation.timing.ease};\n        border-radius: calc(9999 * ${base['border-radius']});\n\n        @media (pointer: coarse) {\n          inset-inline-end: calc(${touchWidth} - ${touchHeight} + 0.0625rem);\n          height: calc(${touchHeight} - 0.125rem);\n          width: calc(${touchHeight} - 0.125rem);\n        }\n      }\n    `;\n  }\n);\n\nSwitchLabel.defaultProps = defaultThemeProp;\n\nexport const SwitchInput = styled.input(\n  ({\n    theme: {\n      base,\n      components: {\n        'form-control': {\n          ':focus': { 'box-shadow': shadow }\n        },\n        switch: { height, width, 'touch-height': touchHeight, 'touch-width': touchWidth, on, off }\n      }\n    }\n  }) => {\n    const { ltr } = useDirection();\n\n    const checkmarkColor = tryCatch(() => readableColor(on.color));\n\n    const onHoverColors = getHoverColors(on.color);\n    const offHoverColors = getHoverColors(off.color);\n\n    return css`\n      ${hideVisually}\n\n      & + ${SwitchLabel} {\n        min-height: ${base['hit-area']['mouse-min']};\n        @media (pointer: coarse) {\n          min-height: ${base['hit-area']['finger-min']};\n        }\n      }\n\n      & + ${SwitchLabel} > ${StyledIcon} {\n        color: ${checkmarkColor};\n      }\n\n      &:checked + ${SwitchLabel}::before {\n        background-color: ${on.color};\n      }\n\n      &:checked + ${SwitchLabel}::after {\n        transform: translateX(calc((${width} - ${height}) * ${ltr ? '1' : '-1'}));\n\n        @media (pointer: coarse) {\n          transform: translateX(calc((${touchWidth} - ${touchHeight}) * ${ltr ? '1' : '-1'}));\n        }\n      }\n\n      &:hover + ${SwitchLabel} > ${StyledIcon} {\n        color: ${onHoverColors.foreground};\n      }\n\n      &:hover:checked + ${SwitchLabel}::before {\n        background-color: ${onHoverColors.background};\n      }\n\n      &:hover + ${SwitchLabel}::before {\n        background-color: ${offHoverColors.background};\n      }\n\n      &:focus + ${SwitchLabel}::before {\n        box-shadow: ${shadow};\n      }\n\n      &:disabled + ${SwitchLabel} {\n        opacity: ${base['disabled-opacity']};\n      }\n    `;\n  }\n);\n\nSwitchInput.defaultProps = defaultThemeProp;\n\nexport const StyledSwitch = styled.div``;\n\nconst Switch: FunctionComponent<SwitchProps & ForwardProps> = forwardRef(function Switch(\n  props: PropsWithoutRef<SwitchProps>,\n  ref: SwitchProps['ref']\n) {\n  const uid = useUID();\n  const { id = uid, label, disabled = false, on = false, onChange, ...restProps } = props;\n\n  return (\n    <StyledSwitch>\n      <SwitchInput\n        {...restProps}\n        id={id}\n        type='checkbox'\n        role='switch'\n        checked={on}\n        aria-checked={on}\n        disabled={disabled}\n        onChange={onChange}\n        ref={ref}\n      />\n      <Flex container={{ alignItems: 'center' }} as={SwitchLabel} htmlFor={id}>\n        {label}\n        {on && <Icon name='check' />}\n      </Flex>\n    </StyledSwitch>\n  );\n});\n\nexport default Switch;\n"]}

package/lib/hooks/useActiveDescendant.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useActiveDescendant.d.ts","sourceRoot":"","sources":["../../src/hooks/useActiveDescendant.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAM5C,MAAM,WAAW,yBAAyB;IACxC,4DAA4D;IAC5D,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,wCAAwC;IACxC,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,6EAA6E;IAC7E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;OAEG;IACH,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACvC,qDAAqD;IACrD,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC;;OAEG;IACH,aAAa,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACnC,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,mBAAmB,EAAE,WAAW,KAAK,IAAI,CAAC;IACrD;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wDAAwD;IACxD,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC;;OAEG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAED,KAAK,iBAAiB,GAAG,WAAW,GAAG,SAAS,CAAC;AACjD,KAAK,WAAW,GAAG,WAAW,EAAE,GAAG,IAAI,CAAC;AAUxC,QAAA,MAAM,mBAAmB,0OAgBpB,yBAAyB;sBAGV,iBAAiB;iBACtB,WAAW;CAsUzB,CAAC;AAEF,eAAO,MAAM,iBAAiB;aASnB,OAAO;iBACH,WAAW;8BACE,iBAAiB;sBACzB,iBAAiB;mBACpB,yBAAyB,CAAC,eAAe,CAAC;2BAClC,WAAW,GAAG,IAAI,GAAG,SAAS,KAAK,IAAI;;UAmC/D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"useActiveDescendant.d.ts","sourceRoot":"","sources":["../../src/hooks/useActiveDescendant.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAM5C,MAAM,WAAW,yBAAyB;IACxC,4DAA4D;IAC5D,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,wCAAwC;IACxC,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,6EAA6E;IAC7E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;OAEG;IACH,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACvC,qDAAqD;IACrD,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC;;OAEG;IACH,aAAa,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACnC,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,mBAAmB,EAAE,WAAW,KAAK,IAAI,CAAC;IACrD;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wDAAwD;IACxD,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC;;OAEG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAED,KAAK,iBAAiB,GAAG,WAAW,GAAG,SAAS,CAAC;AACjD,KAAK,WAAW,GAAG,WAAW,EAAE,GAAG,IAAI,CAAC;AAUxC,QAAA,MAAM,mBAAmB,0OAgBpB,yBAAyB;sBAGV,iBAAiB;iBACtB,WAAW;CAoUzB,CAAC;AAEF,eAAO,MAAM,iBAAiB;aASnB,OAAO;iBACH,WAAW;8BACE,iBAAiB;sBACzB,iBAAiB;mBACpB,yBAAyB,CAAC,eAAe,CAAC;2BAClC,WAAW,GAAG,IAAI,GAAG,SAAS,KAAK,IAAI;;UAmC/D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/hooks/useActiveDescendant.js

@@ -1,5 +1,5 @@
 import { useEffect, useState, useCallback, useRef } from 'react';
-import { createUID, getActiveElement } from '../utils';
+import { createUID, focusableSelector, getActiveElement } from '../utils';
 import useDirection from './useDirection';
 const interactiveNodeNames = ['button', 'a', 'input', 'li', 'legend'];
 const useActiveDescendant = ({ focusEl, scope, scopeSelector, selector, orientation = 'vertical', focusDescendantEl, clearFocusDescendant, focusReturnEl, clearFocusReturn, currentDescendantId, onClick, preventInitialScroll, pauseDescendantEvaluation = false, clearPreventScroll }, dependencyArray = []) => {
@@ -55,7 +55,7 @@ const useActiveDescendant = ({ focusEl, scope, scopeSelector, selector, orientat
                 clearThenSetDescendants(setVal);
             }
             else {
-                const setVal = hasScope.querySelectorAll('a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])');
+                const setVal = hasScope.querySelectorAll(focusableSelector);
                 clearThenSetDescendants(setVal);
             }
         }

package/lib/hooks/useActiveDescendant.js.map

@@ -1 +1 @@
-{"version":3,"file":"useActiveDescendant.js","sourceRoot":"","sources":["../../src/hooks/useActiveDescendant.ts"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState, useCallback, useRef } from 'react';\nimport type { DependencyList } from 'react';\n\nimport { createUID, getActiveElement } from '../utils';\n\nimport useDirection from './useDirection';\n\nexport interface UseActiveDescendantConfig {\n  /** DOM element which controls and has active descendants */\n  focusEl: HTMLElement | null;\n  /** Root scope for descendant options */\n  scope: HTMLElement | null;\n  /** Custom selector for specific descendant scope in root descendant scope */\n  scopeSelector?: string;\n  /** Custom selector for descendant options */\n  selector?: string;\n  /** Orientation of descendant navigation\n   * @default 'vertical'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /** One-time override for the focused descendant, triggers re-evaluation.\n   * Include `clearFocusDescendantEl` for cleanup.\n   */\n  focusDescendantEl?: HTMLElement | null;\n  /** Callback to clear focusDescendantEl after use. */\n  clearFocusDescendant?: () => void;\n  /** One-time override for focused element on NEXT re-evaluation of active descendants.\n   * Include `clearFocusReturn` for cleanup.\n   */\n  focusReturnEl?: HTMLElement | null;\n  /** Callback to clear focusReturnEl after use. */\n  clearFocusReturn?: () => void;\n  /**\n   * Descendant ID used for continuous override of current active descendant,\n   * used for external focus control / keyDown bindings (see RTE).\n   * NOTE: setting currentDescendantId once effectively disables the keybindings of this hook.\n   * If you only need to set the current element once, use focusReturnEl & clearFocusReturn.\n   * @deprecated\n   */\n  currentDescendantId?: string;\n  /** Explicit onClick handler called on keydown 'enter' event */\n  onClick?: (currentDescendantEl: HTMLElement) => void;\n  /** Prevent scrolling to the active descendant on the initial render.\n   * Include `clearPreventScroll` to scroll on subsequent interactions if applicable.\n   */\n  preventInitialScroll?: boolean;\n  /** Callback to clear preventInitialScroll after use. */\n  clearPreventScroll?: () => void;\n  /** Boolean to prevent descendant evaluation.\n   * @default false\n   */\n  pauseDescendantEvaluation?: boolean;\n}\n\ntype CurrentDescendant = HTMLElement | undefined;\ntype Descendants = HTMLElement[] | null;\ntype InteractiveElementTypes =\n  | HTMLButtonElement\n  | HTMLAnchorElement\n  | HTMLInputElement\n  | HTMLLIElement\n  | HTMLLegendElement;\n\nconst interactiveNodeNames = ['button', 'a', 'input', 'li', 'legend'];\n\nconst useActiveDescendant = (\n  {\n    focusEl,\n    scope,\n    scopeSelector,\n    selector,\n    orientation = 'vertical',\n    focusDescendantEl,\n    clearFocusDescendant,\n    focusReturnEl,\n    clearFocusReturn,\n    currentDescendantId,\n    onClick,\n    preventInitialScroll,\n    pauseDescendantEvaluation = false,\n    clearPreventScroll\n  }: UseActiveDescendantConfig,\n  dependencyArray: DependencyList = []\n): {\n  activeDescendant: CurrentDescendant;\n  descendants: Descendants;\n} => {\n  const [resetId, setResetId] = useState(0);\n  const previousActiveId = useRef('');\n  const paused = useRef(pauseDescendantEvaluation);\n  const [focusDescendantElIndex, setFocusDescendantElIndex] = useState<number | null>(null);\n  const [currentIndex, setCurrentIndex] = useState<number | null>(null);\n  const [descendants, setDescendants] = useState<Descendants>();\n  const { rtl } = useDirection();\n\n  const clearDescendants = useCallback(() => {\n    descendants?.forEach(node => {\n      node.setAttribute('data-current', 'false');\n    });\n  }, [descendants]);\n\n  const clearThenSetDescendants = useCallback(\n    (setVal: NodeListOf<Element> | null) => {\n      clearDescendants();\n      setDescendants(\n        setVal\n          ? Array.from(setVal).filter((item): item is HTMLElement => item instanceof HTMLElement)\n          : null\n      );\n    },\n    [descendants]\n  );\n\n  const setIdsAndOwns = useCallback(\n    ({ clear }: { clear: boolean } = { clear: false }) => {\n      const ownedIds: string[] = [];\n\n      if (descendants && descendants.length) {\n        descendants.forEach(node => {\n          node.id = node.id || createUID();\n          ownedIds.push(node.id);\n        });\n      }\n\n      if (clear) {\n        const currentOwnedIds = focusEl?.getAttribute('aria-owns')?.split(' ');\n        const clearedIds = currentOwnedIds?.filter(id => !ownedIds.includes(id));\n        focusEl?.setAttribute('aria-owns', clearedIds?.join(' ') || '');\n      } else {\n        focusEl?.setAttribute('aria-owns', ownedIds.join(' '));\n      }\n    },\n    [focusEl, descendants]\n  );\n\n  const updateDescendants = useCallback(() => {\n    if (pauseDescendantEvaluation) return;\n\n    let hasScope = scope;\n\n    if (hasScope && hasScope instanceof HTMLElement) {\n      if (scopeSelector) {\n        hasScope = hasScope.querySelector(scopeSelector);\n      }\n\n      if (!hasScope) {\n        clearThenSetDescendants(null);\n        return;\n      }\n\n      if (selector) {\n        const setVal = hasScope.querySelectorAll(selector);\n        clearThenSetDescendants(setVal);\n      } else {\n        const setVal = hasScope.querySelectorAll(\n          'a, button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"])'\n        );\n        clearThenSetDescendants(setVal);\n      }\n    } else {\n      clearThenSetDescendants(null);\n    }\n\n    if (currentIndex === null) {\n      setCurrentIndex(0);\n    }\n  }, [scope, scopeSelector, selector, pauseDescendantEvaluation, currentIndex]);\n\n  // Update paused ref\n  useEffect(() => {\n    paused.current = pauseDescendantEvaluation;\n  }, [pauseDescendantEvaluation]);\n\n  // Toggle active scope data attr.\n  useEffect(() => {\n    if (!scope || !focusEl) return;\n\n    scope.setAttribute('data-active-scope', getActiveElement() === focusEl ? 'true' : 'false');\n\n    const onFocus = () => {\n      scope.setAttribute('data-active-scope', 'true');\n    };\n    const onBlur = () => {\n      scope.setAttribute('data-active-scope', 'false');\n    };\n\n    focusEl.addEventListener('focus', onFocus);\n    focusEl.addEventListener('blur', onBlur);\n\n    return () => {\n      focusEl.removeEventListener('focus', onFocus);\n      focusEl.removeEventListener('blur', onBlur);\n    };\n  }, [scope, focusEl]);\n\n  // Update descendants when un-paused\n  useEffect(() => {\n    if (!pauseDescendantEvaluation) {\n      updateDescendants();\n    }\n  }, [pauseDescendantEvaluation]);\n\n  // Update descendants & reset current index when dependencies change\n  useEffect(() => {\n    /**\n     * 0 second timeout added because descendantScope needs to be\n     * up to date before running query after dependencyArray change\n     */\n    const timeoutId = setTimeout(() => {\n      updateDescendants();\n      if (!paused.current) {\n        setCurrentIndex(0);\n      }\n    }, 0);\n\n    return () => clearTimeout(timeoutId);\n  }, [...dependencyArray]);\n\n  // Set IDs and aria-owns\n  useEffect(() => {\n    if (!pauseDescendantEvaluation) {\n      setIdsAndOwns();\n      setResetId(Math.random());\n    } else {\n      clearDescendants();\n      setIdsAndOwns({ clear: true });\n    }\n  }, [pauseDescendantEvaluation, focusEl, descendants]);\n\n  // Bind focus el keyDown\n  useEffect(() => {\n    const nextIndex = () => {\n      // Focus next or first\n      clearFocusReturn?.();\n      clearPreventScroll?.();\n      if (currentIndex !== null && currentIndex + 1 < descendants!.length) {\n        setCurrentIndex(currentIndex + 1);\n      } else {\n        setCurrentIndex(0);\n      }\n    };\n    const prevIndex = () => {\n      // Focus previous or last\n      clearFocusReturn?.();\n      clearPreventScroll?.();\n      if (currentIndex !== null && currentIndex - 1 > -1) {\n        setCurrentIndex(currentIndex - 1);\n      } else {\n        setCurrentIndex(descendants!.length - 1);\n      }\n    };\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (descendants?.length) {\n        if (['ArrowDown', 'ArrowUp'].includes(e.key) && orientation === 'vertical') {\n          e.preventDefault();\n        }\n\n        if (['ArrowLeft', 'ArrowRight'].includes(e.key) && orientation === 'horizontal') {\n          e.preventDefault();\n        }\n\n        // 0 second timeout to execute after explicitly defined onKeyDown event handlers.\n        setTimeout(() => {\n          switch (e.key) {\n            case 'ArrowDown':\n              if (orientation === 'vertical') {\n                nextIndex();\n              }\n              break;\n            case 'ArrowUp':\n              if (orientation === 'vertical') {\n                prevIndex();\n              }\n              break;\n            case 'ArrowRight':\n              if (orientation === 'horizontal') {\n                if (rtl) {\n                  prevIndex();\n                } else {\n                  nextIndex();\n                }\n              }\n              break;\n            case 'ArrowLeft':\n              if (orientation === 'horizontal') {\n                if (rtl) {\n                  nextIndex();\n                } else {\n                  prevIndex();\n                }\n              }\n              break;\n            case 'Enter':\n              // Click focused item\n              if (currentIndex !== null) {\n                if (onClick) {\n                  onClick(descendants[currentIndex]);\n                  break;\n                }\n\n                const nodeName = descendants[currentIndex].nodeName.toLowerCase();\n                if (interactiveNodeNames.includes(nodeName)) {\n                  descendants[currentIndex].click();\n                } else {\n                  descendants[currentIndex]\n                    .querySelector<InteractiveElementTypes>(`${interactiveNodeNames.join(',')}`)\n                    ?.click();\n                }\n              }\n              break;\n            default:\n              break;\n          }\n        }, 0);\n      }\n    };\n\n    // Do not rebind once / if `currentDescendantId` (deprecated) control is defined\n    if (!pauseDescendantEvaluation && focusEl && descendants?.length && !currentDescendantId) {\n      focusEl.addEventListener('keydown', onKeyDown);\n    }\n\n    return () => {\n      focusEl?.removeEventListener('keydown', onKeyDown);\n    };\n  }, [focusEl, currentIndex, descendants, pauseDescendantEvaluation]);\n\n  // Handle independent control update (deprecated)\n  useEffect(() => {\n    if (!pauseDescendantEvaluation && descendants && currentDescendantId) {\n      descendants.forEach((node, index) => {\n        if (node.id === currentDescendantId) {\n          setCurrentIndex(index);\n        }\n      });\n    }\n  }, [currentDescendantId, descendants, pauseDescendantEvaluation]);\n\n  // Set and scroll to current descendant\n  useEffect(() => {\n    if (paused.current) {\n      return;\n    }\n    const nextIndex = focusDescendantElIndex || currentIndex;\n    const focusReturnId = focusReturnEl?.id;\n    let focusReturnIndex;\n    const focusDescendantElId = focusDescendantEl?.id;\n    let focusDescendantIndex;\n    let foundFocusDescendantEl = false;\n\n    if (descendants && descendants.length) {\n      // clear previous & catch focusReturn / focusDescendantEl index\n      descendants.forEach((node, index) => {\n        if (focusDescendantElIndex === null && node.id === focusDescendantElId) {\n          focusDescendantIndex = index;\n          foundFocusDescendantEl = true;\n          setFocusDescendantElIndex(index);\n        }\n        if (node.id === focusReturnId) {\n          focusReturnIndex = index;\n        }\n        node.setAttribute('data-current', 'false');\n      });\n\n      // early return for focusReturn / focusDescendantEl\n      if (focusReturnIndex && focusReturnIndex !== currentIndex) {\n        setCurrentIndex(focusReturnIndex);\n        clearFocusReturn?.();\n        return;\n      }\n      if (foundFocusDescendantEl && focusDescendantIndex !== undefined) {\n        // hard reset to continue focusDescendantEl process even if it is the active descendant\n        setResetId(Math.random());\n        setCurrentIndex(focusDescendantIndex);\n        return;\n      }\n\n      // set new\n      if (nextIndex !== null && descendants[nextIndex]) {\n        const itemEl = descendants[nextIndex!];\n        itemEl.setAttribute('data-current', 'true');\n        focusEl?.setAttribute('aria-activedescendant', itemEl.id);\n\n        // scroll to element\n        if (itemEl.id !== previousActiveId.current && !preventInitialScroll) {\n          const scrollTo: (this: Element, arg: boolean) => void =\n            Element.prototype.scrollIntoViewIfNeeded ?? Element.prototype.scrollIntoView;\n\n          scrollTo?.call(itemEl, false);\n        }\n\n        // focusDescendantEl cleanup\n        if (focusDescendantElIndex !== null) {\n          setFocusDescendantElIndex(null);\n          clearFocusDescendant?.();\n        }\n\n        previousActiveId.current = itemEl.id;\n      }\n    }\n\n    return () => {\n      focusEl?.removeAttribute('aria-activedescendant');\n    };\n  }, [descendants, currentIndex, focusDescendantEl, focusEl, resetId]);\n\n  return {\n    activeDescendant: currentIndex !== null && descendants ? descendants[currentIndex] : undefined,\n    descendants: descendants || null\n  };\n};\n\nexport const useLazyDescendant = ({\n  loading,\n  descendants,\n  previousActiveDescendant,\n  activeDescendant,\n  focusReturnEl,\n  setFocusReturnEl,\n  scrollEl\n}: {\n  loading: boolean;\n  descendants: Descendants;\n  previousActiveDescendant: CurrentDescendant;\n  activeDescendant: CurrentDescendant;\n  focusReturnEl: UseActiveDescendantConfig['focusReturnEl'];\n  setFocusReturnEl: (el: HTMLElement | null | undefined) => void;\n  scrollEl?: HTMLElement | null;\n}) => {\n  // Bump scroll & set return element when descendant focused in loading state.\n  useEffect(() => {\n    if (loading && descendants && descendants.length && activeDescendant) {\n      const descendantList = [...descendants];\n      const lastItem = descendantList.pop();\n      const lastId = lastItem?.id || undefined;\n      let timeoutId: ReturnType<typeof setTimeout>;\n\n      if (lastId === activeDescendant.id) {\n        if (scrollEl) {\n          scrollEl.scrollTop = scrollEl.scrollHeight - scrollEl.offsetHeight;\n        }\n\n        if (focusReturnEl?.id !== activeDescendant.id) {\n          // Set focus return to AD on 'nextTick', to avoid reset of AD on update\n          timeoutId = setTimeout(() => {\n            setFocusReturnEl(lastItem);\n          }, 0);\n        }\n      }\n      // If not last item\n      else if (focusReturnEl?.id !== activeDescendant.id) {\n        // Set focus return to AD on 'nextTick' to avoid reset of AD on update\n        // Do not D.R.Y to avoid conflicting calls with immediately prior elements.\n        timeoutId = setTimeout(() => {\n          setFocusReturnEl(activeDescendant);\n        }, 0);\n      }\n\n      return () => clearTimeout(timeoutId);\n    }\n  }, [loading, descendants, previousActiveDescendant, activeDescendant, scrollEl, focusReturnEl]);\n};\n\nexport default useActiveDescendant;\n"]}
+{"version":3,"file":"useActiveDescendant.js","sourceRoot":"","sources":["../../src/hooks/useActiveDescendant.ts"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState, useCallback, useRef } from 'react';\nimport type { DependencyList } from 'react';\n\nimport { createUID, focusableSelector, getActiveElement } from '../utils';\n\nimport useDirection from './useDirection';\n\nexport interface UseActiveDescendantConfig {\n  /** DOM element which controls and has active descendants */\n  focusEl: HTMLElement | null;\n  /** Root scope for descendant options */\n  scope: HTMLElement | null;\n  /** Custom selector for specific descendant scope in root descendant scope */\n  scopeSelector?: string;\n  /** Custom selector for descendant options */\n  selector?: string;\n  /** Orientation of descendant navigation\n   * @default 'vertical'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /** One-time override for the focused descendant, triggers re-evaluation.\n   * Include `clearFocusDescendantEl` for cleanup.\n   */\n  focusDescendantEl?: HTMLElement | null;\n  /** Callback to clear focusDescendantEl after use. */\n  clearFocusDescendant?: () => void;\n  /** One-time override for focused element on NEXT re-evaluation of active descendants.\n   * Include `clearFocusReturn` for cleanup.\n   */\n  focusReturnEl?: HTMLElement | null;\n  /** Callback to clear focusReturnEl after use. */\n  clearFocusReturn?: () => void;\n  /**\n   * Descendant ID used for continuous override of current active descendant,\n   * used for external focus control / keyDown bindings (see RTE).\n   * NOTE: setting currentDescendantId once effectively disables the keybindings of this hook.\n   * If you only need to set the current element once, use focusReturnEl & clearFocusReturn.\n   * @deprecated\n   */\n  currentDescendantId?: string;\n  /** Explicit onClick handler called on keydown 'enter' event */\n  onClick?: (currentDescendantEl: HTMLElement) => void;\n  /** Prevent scrolling to the active descendant on the initial render.\n   * Include `clearPreventScroll` to scroll on subsequent interactions if applicable.\n   */\n  preventInitialScroll?: boolean;\n  /** Callback to clear preventInitialScroll after use. */\n  clearPreventScroll?: () => void;\n  /** Boolean to prevent descendant evaluation.\n   * @default false\n   */\n  pauseDescendantEvaluation?: boolean;\n}\n\ntype CurrentDescendant = HTMLElement | undefined;\ntype Descendants = HTMLElement[] | null;\ntype InteractiveElementTypes =\n  | HTMLButtonElement\n  | HTMLAnchorElement\n  | HTMLInputElement\n  | HTMLLIElement\n  | HTMLLegendElement;\n\nconst interactiveNodeNames = ['button', 'a', 'input', 'li', 'legend'];\n\nconst useActiveDescendant = (\n  {\n    focusEl,\n    scope,\n    scopeSelector,\n    selector,\n    orientation = 'vertical',\n    focusDescendantEl,\n    clearFocusDescendant,\n    focusReturnEl,\n    clearFocusReturn,\n    currentDescendantId,\n    onClick,\n    preventInitialScroll,\n    pauseDescendantEvaluation = false,\n    clearPreventScroll\n  }: UseActiveDescendantConfig,\n  dependencyArray: DependencyList = []\n): {\n  activeDescendant: CurrentDescendant;\n  descendants: Descendants;\n} => {\n  const [resetId, setResetId] = useState(0);\n  const previousActiveId = useRef('');\n  const paused = useRef(pauseDescendantEvaluation);\n  const [focusDescendantElIndex, setFocusDescendantElIndex] = useState<number | null>(null);\n  const [currentIndex, setCurrentIndex] = useState<number | null>(null);\n  const [descendants, setDescendants] = useState<Descendants>();\n  const { rtl } = useDirection();\n\n  const clearDescendants = useCallback(() => {\n    descendants?.forEach(node => {\n      node.setAttribute('data-current', 'false');\n    });\n  }, [descendants]);\n\n  const clearThenSetDescendants = useCallback(\n    (setVal: NodeListOf<Element> | null) => {\n      clearDescendants();\n      setDescendants(\n        setVal\n          ? Array.from(setVal).filter((item): item is HTMLElement => item instanceof HTMLElement)\n          : null\n      );\n    },\n    [descendants]\n  );\n\n  const setIdsAndOwns = useCallback(\n    ({ clear }: { clear: boolean } = { clear: false }) => {\n      const ownedIds: string[] = [];\n\n      if (descendants && descendants.length) {\n        descendants.forEach(node => {\n          node.id = node.id || createUID();\n          ownedIds.push(node.id);\n        });\n      }\n\n      if (clear) {\n        const currentOwnedIds = focusEl?.getAttribute('aria-owns')?.split(' ');\n        const clearedIds = currentOwnedIds?.filter(id => !ownedIds.includes(id));\n        focusEl?.setAttribute('aria-owns', clearedIds?.join(' ') || '');\n      } else {\n        focusEl?.setAttribute('aria-owns', ownedIds.join(' '));\n      }\n    },\n    [focusEl, descendants]\n  );\n\n  const updateDescendants = useCallback(() => {\n    if (pauseDescendantEvaluation) return;\n\n    let hasScope = scope;\n\n    if (hasScope && hasScope instanceof HTMLElement) {\n      if (scopeSelector) {\n        hasScope = hasScope.querySelector(scopeSelector);\n      }\n\n      if (!hasScope) {\n        clearThenSetDescendants(null);\n        return;\n      }\n\n      if (selector) {\n        const setVal = hasScope.querySelectorAll(selector);\n        clearThenSetDescendants(setVal);\n      } else {\n        const setVal = hasScope.querySelectorAll(focusableSelector);\n        clearThenSetDescendants(setVal);\n      }\n    } else {\n      clearThenSetDescendants(null);\n    }\n\n    if (currentIndex === null) {\n      setCurrentIndex(0);\n    }\n  }, [scope, scopeSelector, selector, pauseDescendantEvaluation, currentIndex]);\n\n  // Update paused ref\n  useEffect(() => {\n    paused.current = pauseDescendantEvaluation;\n  }, [pauseDescendantEvaluation]);\n\n  // Toggle active scope data attr.\n  useEffect(() => {\n    if (!scope || !focusEl) return;\n\n    scope.setAttribute('data-active-scope', getActiveElement() === focusEl ? 'true' : 'false');\n\n    const onFocus = () => {\n      scope.setAttribute('data-active-scope', 'true');\n    };\n    const onBlur = () => {\n      scope.setAttribute('data-active-scope', 'false');\n    };\n\n    focusEl.addEventListener('focus', onFocus);\n    focusEl.addEventListener('blur', onBlur);\n\n    return () => {\n      focusEl.removeEventListener('focus', onFocus);\n      focusEl.removeEventListener('blur', onBlur);\n    };\n  }, [scope, focusEl]);\n\n  // Update descendants when un-paused\n  useEffect(() => {\n    if (!pauseDescendantEvaluation) {\n      updateDescendants();\n    }\n  }, [pauseDescendantEvaluation]);\n\n  // Update descendants & reset current index when dependencies change\n  useEffect(() => {\n    /**\n     * 0 second timeout added because descendantScope needs to be\n     * up to date before running query after dependencyArray change\n     */\n    const timeoutId = setTimeout(() => {\n      updateDescendants();\n      if (!paused.current) {\n        setCurrentIndex(0);\n      }\n    }, 0);\n\n    return () => clearTimeout(timeoutId);\n  }, [...dependencyArray]);\n\n  // Set IDs and aria-owns\n  useEffect(() => {\n    if (!pauseDescendantEvaluation) {\n      setIdsAndOwns();\n      setResetId(Math.random());\n    } else {\n      clearDescendants();\n      setIdsAndOwns({ clear: true });\n    }\n  }, [pauseDescendantEvaluation, focusEl, descendants]);\n\n  // Bind focus el keyDown\n  useEffect(() => {\n    const nextIndex = () => {\n      // Focus next or first\n      clearFocusReturn?.();\n      clearPreventScroll?.();\n      if (currentIndex !== null && currentIndex + 1 < descendants!.length) {\n        setCurrentIndex(currentIndex + 1);\n      } else {\n        setCurrentIndex(0);\n      }\n    };\n    const prevIndex = () => {\n      // Focus previous or last\n      clearFocusReturn?.();\n      clearPreventScroll?.();\n      if (currentIndex !== null && currentIndex - 1 > -1) {\n        setCurrentIndex(currentIndex - 1);\n      } else {\n        setCurrentIndex(descendants!.length - 1);\n      }\n    };\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (descendants?.length) {\n        if (['ArrowDown', 'ArrowUp'].includes(e.key) && orientation === 'vertical') {\n          e.preventDefault();\n        }\n\n        if (['ArrowLeft', 'ArrowRight'].includes(e.key) && orientation === 'horizontal') {\n          e.preventDefault();\n        }\n\n        // 0 second timeout to execute after explicitly defined onKeyDown event handlers.\n        setTimeout(() => {\n          switch (e.key) {\n            case 'ArrowDown':\n              if (orientation === 'vertical') {\n                nextIndex();\n              }\n              break;\n            case 'ArrowUp':\n              if (orientation === 'vertical') {\n                prevIndex();\n              }\n              break;\n            case 'ArrowRight':\n              if (orientation === 'horizontal') {\n                if (rtl) {\n                  prevIndex();\n                } else {\n                  nextIndex();\n                }\n              }\n              break;\n            case 'ArrowLeft':\n              if (orientation === 'horizontal') {\n                if (rtl) {\n                  nextIndex();\n                } else {\n                  prevIndex();\n                }\n              }\n              break;\n            case 'Enter':\n              // Click focused item\n              if (currentIndex !== null) {\n                if (onClick) {\n                  onClick(descendants[currentIndex]);\n                  break;\n                }\n\n                const nodeName = descendants[currentIndex].nodeName.toLowerCase();\n                if (interactiveNodeNames.includes(nodeName)) {\n                  descendants[currentIndex].click();\n                } else {\n                  descendants[currentIndex]\n                    .querySelector<InteractiveElementTypes>(`${interactiveNodeNames.join(',')}`)\n                    ?.click();\n                }\n              }\n              break;\n            default:\n              break;\n          }\n        }, 0);\n      }\n    };\n\n    // Do not rebind once / if `currentDescendantId` (deprecated) control is defined\n    if (!pauseDescendantEvaluation && focusEl && descendants?.length && !currentDescendantId) {\n      focusEl.addEventListener('keydown', onKeyDown);\n    }\n\n    return () => {\n      focusEl?.removeEventListener('keydown', onKeyDown);\n    };\n  }, [focusEl, currentIndex, descendants, pauseDescendantEvaluation]);\n\n  // Handle independent control update (deprecated)\n  useEffect(() => {\n    if (!pauseDescendantEvaluation && descendants && currentDescendantId) {\n      descendants.forEach((node, index) => {\n        if (node.id === currentDescendantId) {\n          setCurrentIndex(index);\n        }\n      });\n    }\n  }, [currentDescendantId, descendants, pauseDescendantEvaluation]);\n\n  // Set and scroll to current descendant\n  useEffect(() => {\n    if (paused.current) {\n      return;\n    }\n    const nextIndex = focusDescendantElIndex || currentIndex;\n    const focusReturnId = focusReturnEl?.id;\n    let focusReturnIndex;\n    const focusDescendantElId = focusDescendantEl?.id;\n    let focusDescendantIndex;\n    let foundFocusDescendantEl = false;\n\n    if (descendants && descendants.length) {\n      // clear previous & catch focusReturn / focusDescendantEl index\n      descendants.forEach((node, index) => {\n        if (focusDescendantElIndex === null && node.id === focusDescendantElId) {\n          focusDescendantIndex = index;\n          foundFocusDescendantEl = true;\n          setFocusDescendantElIndex(index);\n        }\n        if (node.id === focusReturnId) {\n          focusReturnIndex = index;\n        }\n        node.setAttribute('data-current', 'false');\n      });\n\n      // early return for focusReturn / focusDescendantEl\n      if (focusReturnIndex && focusReturnIndex !== currentIndex) {\n        setCurrentIndex(focusReturnIndex);\n        clearFocusReturn?.();\n        return;\n      }\n      if (foundFocusDescendantEl && focusDescendantIndex !== undefined) {\n        // hard reset to continue focusDescendantEl process even if it is the active descendant\n        setResetId(Math.random());\n        setCurrentIndex(focusDescendantIndex);\n        return;\n      }\n\n      // set new\n      if (nextIndex !== null && descendants[nextIndex]) {\n        const itemEl = descendants[nextIndex!];\n        itemEl.setAttribute('data-current', 'true');\n        focusEl?.setAttribute('aria-activedescendant', itemEl.id);\n\n        // scroll to element\n        if (itemEl.id !== previousActiveId.current && !preventInitialScroll) {\n          const scrollTo: (this: Element, arg: boolean) => void =\n            Element.prototype.scrollIntoViewIfNeeded ?? Element.prototype.scrollIntoView;\n\n          scrollTo?.call(itemEl, false);\n        }\n\n        // focusDescendantEl cleanup\n        if (focusDescendantElIndex !== null) {\n          setFocusDescendantElIndex(null);\n          clearFocusDescendant?.();\n        }\n\n        previousActiveId.current = itemEl.id;\n      }\n    }\n\n    return () => {\n      focusEl?.removeAttribute('aria-activedescendant');\n    };\n  }, [descendants, currentIndex, focusDescendantEl, focusEl, resetId]);\n\n  return {\n    activeDescendant: currentIndex !== null && descendants ? descendants[currentIndex] : undefined,\n    descendants: descendants || null\n  };\n};\n\nexport const useLazyDescendant = ({\n  loading,\n  descendants,\n  previousActiveDescendant,\n  activeDescendant,\n  focusReturnEl,\n  setFocusReturnEl,\n  scrollEl\n}: {\n  loading: boolean;\n  descendants: Descendants;\n  previousActiveDescendant: CurrentDescendant;\n  activeDescendant: CurrentDescendant;\n  focusReturnEl: UseActiveDescendantConfig['focusReturnEl'];\n  setFocusReturnEl: (el: HTMLElement | null | undefined) => void;\n  scrollEl?: HTMLElement | null;\n}) => {\n  // Bump scroll & set return element when descendant focused in loading state.\n  useEffect(() => {\n    if (loading && descendants && descendants.length && activeDescendant) {\n      const descendantList = [...descendants];\n      const lastItem = descendantList.pop();\n      const lastId = lastItem?.id || undefined;\n      let timeoutId: ReturnType<typeof setTimeout>;\n\n      if (lastId === activeDescendant.id) {\n        if (scrollEl) {\n          scrollEl.scrollTop = scrollEl.scrollHeight - scrollEl.offsetHeight;\n        }\n\n        if (focusReturnEl?.id !== activeDescendant.id) {\n          // Set focus return to AD on 'nextTick', to avoid reset of AD on update\n          timeoutId = setTimeout(() => {\n            setFocusReturnEl(lastItem);\n          }, 0);\n        }\n      }\n      // If not last item\n      else if (focusReturnEl?.id !== activeDescendant.id) {\n        // Set focus return to AD on 'nextTick' to avoid reset of AD on update\n        // Do not D.R.Y to avoid conflicting calls with immediately prior elements.\n        timeoutId = setTimeout(() => {\n          setFocusReturnEl(activeDescendant);\n        }, 0);\n      }\n\n      return () => clearTimeout(timeoutId);\n    }\n  }, [loading, descendants, previousActiveDescendant, activeDescendant, scrollEl, focusReturnEl]);\n};\n\nexport default useActiveDescendant;\n"]}

package/lib/hooks/useArrows.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useArrows.d.ts","sourceRoot":"","sources":["../../src/hooks/useArrows.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAWvD;;;GAGG;AACH,QAAA,MAAM,SAAS,QACR,UAAU,WAAW,CAAC;;;;;;;yCAuI5B,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"useArrows.d.ts","sourceRoot":"","sources":["../../src/hooks/useArrows.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAWvD;;;GAGG;AACH,QAAA,MAAM,SAAS,QACR,UAAU,WAAW,CAAC;;;;;;;yCAgI5B,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/hooks/useArrows.js

@@ -112,18 +112,10 @@ dependencies = []) => {
         const el = ref.current;
         if (!el)
             return;
-        if (updateTabIndex) {
-            if (initialFocusElement) {
-                // If there is an element defined that should receive default focus, no timeout is necessary
+        if (updateTabIndex)
+            setTimeout(() => {
                 setTabIndexes(el);
-            }
-            else {
-                // 0 second timeout added because DOM needs to be up to date after list is updated before running query
-                setTimeout(() => {
-                    setTabIndexes(el);
-                }, 0);
-            }
-        }
+            }, 0);
         el.addEventListener('keydown', listener);
         return () => {
             el.removeEventListener('keydown', listener);

package/lib/hooks/useArrows.js.map

@@ -1 +1 @@
-{"version":3,"file":"useArrows.js","sourceRoot":"","sources":["../../src/hooks/useArrows.ts"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useCallback } from 'react';\nimport type { RefObject, DependencyList } from 'react';\n\nimport { documentIsAvailable } from '../utils';\n\nconst focusable = `\n  a[href],\n  button:enabled,\n  input[type='checkbox']:enabled,\n  input[type='radio']:enabled\n`;\n\n/**\n * @example useArrows(ref, { cycle, selector });\n * @param ref - A reference to the element that will be navigated through. [React RefObject](https://reactjs.org/docs/refs-and-the-dom.html)\n */\nconst useArrows = (\n  ref: RefObject<HTMLElement>,\n  {\n    /** If true, the down or up arrow key will navigate to the first or last element if the element currently focused is the last or first index of the selected elements. */\n    cycle = true,\n    /** A query selector that will determine which elements to cycle through with the arrow keys. The selector will be used in conjunction with [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll#selectors). */\n    selector = focusable,\n    /** Which keys are used to navigate through the list */\n    dir = 'up-down',\n    allowTabFocus = true,\n    updateTabIndex = true,\n    /** When focus enters the ref, which element should receive focus first if available */\n    initialFocusElement\n  }: {\n    cycle?: boolean;\n    selector?: string;\n    dir?: 'up-down' | 'left-right';\n    allowTabFocus?: boolean;\n    updateTabIndex?: boolean;\n    initialFocusElement?: Element | null;\n  } = {},\n  /** Pass this prop in the internal dependencies when list is dynamic */\n  dependencies: DependencyList = []\n) => {\n  const [NextKey, PrevKey] =\n    dir === 'up-down' ? ['ArrowDown', 'ArrowUp'] : ['ArrowRight', 'ArrowLeft'];\n\n  const setTabIndexes = useCallback(\n    (el: HTMLElement) => {\n      // don't set tabindex -1 for first element, or the initialFocusElement, or an element with a checked input inside of it to be able to focus it\n      const focusableElements = Array.from(el.querySelectorAll(selector));\n\n      if (focusableElements.length > 0) {\n        let focusIndex = focusableElements.findIndex(focusEl => focusEl === initialFocusElement);\n        if (focusIndex === -1) focusIndex = 0;\n\n        if (allowTabFocus) (focusableElements[focusIndex] as HTMLElement).tabIndex = 0;\n        focusableElements.splice(focusIndex, 1);\n        focusableElements.forEach(item => {\n          if (item instanceof HTMLElement) {\n            const checked = (item as HTMLInputElement).checked;\n            if (!checked) item.tabIndex = -1;\n          }\n        });\n      }\n    },\n    [selector, initialFocusElement, ...dependencies]\n  );\n\n  const listener = useCallback(\n    (e: KeyboardEvent) => {\n      const el = ref.current;\n      if (!el) return;\n      if (['Home', 'End', NextKey, PrevKey].includes(e.key)) e.preventDefault();\n\n      if (!documentIsAvailable) return;\n\n      const items = Array.from(el.querySelectorAll(selector)).filter(\n        (item): item is HTMLElement => item instanceof HTMLElement\n      );\n\n      if (!items.length) return;\n\n      const rootNode = el.getRootNode();\n\n      if (!(rootNode instanceof Document) && !(rootNode instanceof ShadowRoot)) return;\n\n      const focusIdx = items.indexOf(rootNode.activeElement as HTMLElement);\n      const lastIdx = items.length - 1;\n      let newFocusIdx;\n\n      if (e.key === 'Home' || (e.key === NextKey && focusIdx === -1)) {\n        const focusableElements = Array.from(el.querySelectorAll(selector));\n        const focusIndex = focusableElements.findIndex(focusEl => focusEl === initialFocusElement);\n        newFocusIdx = focusIndex === -1 ? 0 : focusIndex;\n      } else if (e.key === 'End' || (e.key === PrevKey && focusIdx === -1)) {\n        newFocusIdx = lastIdx;\n      } else if (e.key === 'Enter') {\n        if (updateTabIndex) {\n          setTabIndexes(el);\n        }\n        return;\n      } else if (e.key === NextKey) {\n        if (focusIdx === lastIdx) {\n          if (!cycle) return;\n          newFocusIdx = 0;\n        } else {\n          newFocusIdx = focusIdx + 1;\n        }\n      } else if (e.key === PrevKey) {\n        if (focusIdx === 0) {\n          if (!cycle) return;\n          newFocusIdx = lastIdx;\n        } else {\n          newFocusIdx = focusIdx - 1;\n        }\n      } else if (e.key === 'Tab' && initialFocusElement) {\n        // We need to reset the tabIndex for the initial focused element when leaving the group. 0 second timeout necessary to avoid focusing this element instad of leaving the group.\n        setTimeout(() => {\n          (initialFocusElement as HTMLElement).tabIndex = 0;\n        }, 0);\n        return;\n      } else {\n        return;\n      }\n\n      // If there is an initial focused element other than the default, the tabIndex must be set to -1 the moment arrow keys are used to prevent that element from being tabbable while within the group focus.\n      if ((e.key === PrevKey || e.key === NextKey) && initialFocusElement) {\n        (initialFocusElement as HTMLElement).tabIndex = -1;\n      }\n\n      items[newFocusIdx].focus();\n    },\n    [ref.current, cycle, selector, initialFocusElement, ...dependencies]\n  );\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    if (updateTabIndex) {\n      if (initialFocusElement) {\n        // If there is an element defined that should receive default focus, no timeout is necessary\n        setTabIndexes(el);\n      } else {\n        // 0 second timeout added because DOM needs to be up to date after list is updated before running query\n        setTimeout(() => {\n          setTabIndexes(el);\n        }, 0);\n      }\n    }\n    el.addEventListener('keydown', listener);\n\n    return () => {\n      el.removeEventListener('keydown', listener);\n    };\n  }, [ref.current, selector, listener, initialFocusElement, ...dependencies]);\n};\n\nexport default useArrows;\n"]}
+{"version":3,"file":"useArrows.js","sourceRoot":"","sources":["../../src/hooks/useArrows.ts"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useCallback } from 'react';\nimport type { RefObject, DependencyList } from 'react';\n\nimport { documentIsAvailable } from '../utils';\n\nconst focusable = `\n  a[href],\n  button:enabled,\n  input[type='checkbox']:enabled,\n  input[type='radio']:enabled\n`;\n\n/**\n * @example useArrows(ref, { cycle, selector });\n * @param ref - A reference to the element that will be navigated through. [React RefObject](https://reactjs.org/docs/refs-and-the-dom.html)\n */\nconst useArrows = (\n  ref: RefObject<HTMLElement>,\n  {\n    /** If true, the down or up arrow key will navigate to the first or last element if the element currently focused is the last or first index of the selected elements. */\n    cycle = true,\n    /** A query selector that will determine which elements to cycle through with the arrow keys. The selector will be used in conjunction with [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll#selectors). */\n    selector = focusable,\n    /** Which keys are used to navigate through the list */\n    dir = 'up-down',\n    allowTabFocus = true,\n    updateTabIndex = true,\n    /** When focus enters the ref, which element should receive focus first if available */\n    initialFocusElement\n  }: {\n    cycle?: boolean;\n    selector?: string;\n    dir?: 'up-down' | 'left-right';\n    allowTabFocus?: boolean;\n    updateTabIndex?: boolean;\n    initialFocusElement?: Element | null;\n  } = {},\n  /** Pass this prop in the internal dependencies when list is dynamic */\n  dependencies: DependencyList = []\n) => {\n  const [NextKey, PrevKey] =\n    dir === 'up-down' ? ['ArrowDown', 'ArrowUp'] : ['ArrowRight', 'ArrowLeft'];\n\n  const setTabIndexes = useCallback(\n    (el: HTMLElement) => {\n      // don't set tabindex -1 for first element, or the initialFocusElement, or an element with a checked input inside of it to be able to focus it\n      const focusableElements = Array.from(el.querySelectorAll(selector));\n\n      if (focusableElements.length > 0) {\n        let focusIndex = focusableElements.findIndex(focusEl => focusEl === initialFocusElement);\n        if (focusIndex === -1) focusIndex = 0;\n\n        if (allowTabFocus) (focusableElements[focusIndex] as HTMLElement).tabIndex = 0;\n        focusableElements.splice(focusIndex, 1);\n        focusableElements.forEach(item => {\n          if (item instanceof HTMLElement) {\n            const checked = (item as HTMLInputElement).checked;\n            if (!checked) item.tabIndex = -1;\n          }\n        });\n      }\n    },\n    [selector, initialFocusElement, ...dependencies]\n  );\n\n  const listener = useCallback(\n    (e: KeyboardEvent) => {\n      const el = ref.current;\n      if (!el) return;\n      if (['Home', 'End', NextKey, PrevKey].includes(e.key)) e.preventDefault();\n\n      if (!documentIsAvailable) return;\n\n      const items = Array.from(el.querySelectorAll(selector)).filter(\n        (item): item is HTMLElement => item instanceof HTMLElement\n      );\n\n      if (!items.length) return;\n\n      const rootNode = el.getRootNode();\n\n      if (!(rootNode instanceof Document) && !(rootNode instanceof ShadowRoot)) return;\n\n      const focusIdx = items.indexOf(rootNode.activeElement as HTMLElement);\n      const lastIdx = items.length - 1;\n      let newFocusIdx;\n\n      if (e.key === 'Home' || (e.key === NextKey && focusIdx === -1)) {\n        const focusableElements = Array.from(el.querySelectorAll(selector));\n        const focusIndex = focusableElements.findIndex(focusEl => focusEl === initialFocusElement);\n        newFocusIdx = focusIndex === -1 ? 0 : focusIndex;\n      } else if (e.key === 'End' || (e.key === PrevKey && focusIdx === -1)) {\n        newFocusIdx = lastIdx;\n      } else if (e.key === 'Enter') {\n        if (updateTabIndex) {\n          setTabIndexes(el);\n        }\n        return;\n      } else if (e.key === NextKey) {\n        if (focusIdx === lastIdx) {\n          if (!cycle) return;\n          newFocusIdx = 0;\n        } else {\n          newFocusIdx = focusIdx + 1;\n        }\n      } else if (e.key === PrevKey) {\n        if (focusIdx === 0) {\n          if (!cycle) return;\n          newFocusIdx = lastIdx;\n        } else {\n          newFocusIdx = focusIdx - 1;\n        }\n      } else if (e.key === 'Tab' && initialFocusElement) {\n        // We need to reset the tabIndex for the initial focused element when leaving the group. 0 second timeout necessary to avoid focusing this element instad of leaving the group.\n        setTimeout(() => {\n          (initialFocusElement as HTMLElement).tabIndex = 0;\n        }, 0);\n        return;\n      } else {\n        return;\n      }\n\n      // If there is an initial focused element other than the default, the tabIndex must be set to -1 the moment arrow keys are used to prevent that element from being tabbable while within the group focus.\n      if ((e.key === PrevKey || e.key === NextKey) && initialFocusElement) {\n        (initialFocusElement as HTMLElement).tabIndex = -1;\n      }\n\n      items[newFocusIdx].focus();\n    },\n    [ref.current, cycle, selector, initialFocusElement, ...dependencies]\n  );\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    if (updateTabIndex)\n      setTimeout(() => {\n        setTabIndexes(el);\n      }, 0);\n    el.addEventListener('keydown', listener);\n\n    return () => {\n      el.removeEventListener('keydown', listener);\n    };\n  }, [ref.current, selector, listener, initialFocusElement, ...dependencies]);\n};\n\nexport default useArrows;\n"]}