@foxford/ui 2.54.0-beta-1aa2896-20241202 → 2.55.0-beta-8e3c324-20241210

package/components/FormInputLabel/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","sources":["../../../../src/components/FormInputLabel/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledFormInputLabelProps, FormInputLabelPalette, StyledInputContainerProps } from './types'\n\nconst shouldForwardFormInputLabelProp = createShouldForwardProp(\n  (propKey) =>\n    !['primary', 'secondary', 'error', 'success', 'disabled', 'onColored', 'inline', 'zIndex', 'overflow'].includes(\n      propKey\n    )\n)\n\nconst labelTransitionMS = 125\n\nconst template = (palette: FormInputLabelPalette) => `\n  color: ${palette.color};\n  background-color: ${palette.backgroundColor};\n  border-color: ${palette.borderColor};\n  &:hover {\n    background-color: ${palette.backgroundColorHover};\n  }\n  &:focus-within {\n    background-color: ${palette.backgroundColor};\n  }\n  & [data-input-control]::after {\n    color: ${palette.backgroundColor}; \n  }\n`\n\nconst COLOR_SCHEMA = {\n  contrast: {\n    disabled: css<StyledFormInputLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-disabled'],\n          backgroundColor: props.theme.colors['bg-disabled-large'],\n          borderColor: props.theme.colors.transparent,\n          backgroundColorHover: props.theme.colors['bg-disabled-large'],\n          ...props.palette,\n        })}\n    `,\n    error: css<StyledFormInputLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-secondary'],\n          backgroundColor: props.theme.colors['alert-bg-error-200'],\n          borderColor: props.theme.colors['alert-bg-error-500'],\n          backgroundColorHover: props.theme.colors['alert-bg-error-200'],\n          ...props.palette,\n        })}\n    `,\n    success: css<StyledFormInputLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-secondary'],\n          backgroundColor: props.theme.colors['alert-bg-success-200'],\n          borderColor: props.theme.colors['alert-bg-success-500'],\n          backgroundColorHover: props.theme.colors['alert-bg-success-200'],\n          ...props.palette,\n        })}\n    `,\n    default: css<StyledFormInputLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-secondary'],\n          backgroundColor: props.theme.colors['bg-onmain-primary'],\n          borderColor: props.theme.colors['border-onmain-default-large'],\n          backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor,\n          ...props.palette,\n        })}\n    `,\n  },\n  secondary: {\n    disabled: css<StyledFormInputLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-disabled'],\n          backgroundColor: props.theme.colors['bg-disabled-large'],\n          borderColor: props.theme.colors.transparent,\n          backgroundColorHover: props.theme.colors['bg-disabled-large'],\n          ...props.palette,\n        })}\n    `,\n    error: css<StyledFormInputLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-secondary'],\n          backgroundColor: props.theme.colors['alert-bg-error-100'],\n          borderColor: props.theme.colors['alert-bg-error-500'],\n          backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n          ...props.palette,\n        })}\n    `,\n    success: css<StyledFormInputLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-secondary'],\n          backgroundColor: props.theme.colors['alert-bg-success-100'],\n          borderColor: props.theme.colors['alert-bg-success-500'],\n          backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n          ...props.palette,\n        })}\n    `,\n    default: css<StyledFormInputLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-secondary'],\n          backgroundColor: props.theme.colors['bg-onmain-secondary'],\n          borderColor: props.theme.colors['border-onmain-default-large'],\n          backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-secondary']).darken(4).toString() as CSSColor,\n          ...props.palette,\n        })}\n    `,\n  },\n  primary: {\n    disabled: css<StyledFormInputLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-disabled'],\n          backgroundColor: props.theme.colors['bg-disabled-large'],\n          borderColor: props.theme.colors.transparent,\n          backgroundColorHover: props.theme.colors['bg-disabled-large'],\n          ...props.palette,\n        })}\n    `,\n    error: css<StyledFormInputLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-secondary'],\n          backgroundColor: props.theme.colors['alert-bg-error-100'],\n          borderColor: props.theme.colors['alert-bg-error-500'],\n          backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n          ...props.palette,\n        })}\n    `,\n    success: css<StyledFormInputLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-secondary'],\n          backgroundColor: props.theme.colors['alert-bg-success-100'],\n          borderColor: props.theme.colors['alert-bg-success-500'],\n          backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n          ...props.palette,\n        })}\n    `,\n    default: css<StyledFormInputLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-secondary'],\n          backgroundColor: props.theme.colors['bg-onmain-primary'],\n          borderColor: props.theme.colors['border-onmain-default-large'],\n          backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor,\n          ...props.palette,\n        })}\n    `,\n  },\n}\n\nexport const Dropdown = styled.div`\n  box-sizing: border-box;\n  position: absolute;\n  top: 100%;\n  margin-top: 8px;\n`\n\nexport const Root = styled.div.withConfig<StyledFormInputLabelProps>({\n  shouldForwardProp: shouldForwardFormInputLabelProp,\n})`\n  ${(props) => {\n    const borderWidth = '1px'\n\n    return `\n      box-sizing: border-box;\n      position: relative;\n      isolation: isolate;\n      display: ${props.inline ? 'inline-flex' : 'flex'};\n      cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n      align-items: center;\n      min-width: min-content;\n      border: ${borderWidth} solid transparent;\n      z-index: ${props.zIndex ?? 'auto'};\n      overflow: ${props.overflow ?? 'visible'};\n      transition-property: background-color;\n      transition-duration: 150ms;\n      transition-timing-function: ease-in;\n\n      & > ${Dropdown} {\n        right: -${borderWidth};\n        left: -${borderWidth};\n      }\n\n      &:focus-within {\n        box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n        outline: 2px solid transparent;\n        outline-offset: 2px;\n      }\n\n      &:hover [data-input-control]::after,\n      &:focus-within [data-input-control]::after {\n        opacity: 0;\n      }\n    `\n  }}\n  ${(props) => {\n    let schema = COLOR_SCHEMA.primary\n\n    if (props.secondary) schema = COLOR_SCHEMA.secondary\n    if (props.contrast || props.onColored) schema = COLOR_SCHEMA.contrast\n\n    if (props.disabled) return schema.disabled\n    if (props.error) return schema.error\n    if (props.success) return schema.success\n\n    return schema.default\n  }}\n\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const Label = styled.span`\n  box-sizing: border-box;\n  position: absolute;\n  left: 0;\n  top: 0;\n  transform: translateY(0.7em);\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  line-height: 1;\n  text-overflow: ellipsis;\n  pointer-events: none;\n  transition-property: transform, width;\n  transition-duration: ${labelTransitionMS}ms, 0ms;\n  transition-delay: 0ms, 0ms;\n  transition-timing-function: cubic-bezier(0, 0, 0.48, 1);\n`\n\nexport const InputContainer = styled.div.withConfig<StyledInputContainerProps>({\n  shouldForwardProp: (propKey) => !['position', 'labelPosition', 'labelActive'].includes(propKey),\n})`\n  ${(props) => `\n    box-sizing: border-box;\n    position: relative;\n    display: flex;\n    flex-grow: 1;\n    align-self: ${props.position};\n    cursor: inherit;\n    min-height: 2.4em;\n  `}\n\n  ${(props) =>\n    props.labelPosition === 'dynamic' &&\n    `\n      padding-top: 0.7em;\n\n      & input, & textarea {\n        opacity: ${props.labelActive ? 1 : 0};\n      }\n\n       ${\n         props.labelActive &&\n         `& > ${Label} {\n              transition-delay: 0ms, ${labelTransitionMS}ms;\n              transform: scale(0.7) translateX(-21.4%) translateY(0px);\n              width: 130%;\n            }`\n       }\n    `}\n\n  ${(props) =>\n    props.labelPosition === 'top' &&\n    `\n      padding-top: 0.7em;\n\n      & > ${Label} {\n        transition-delay: 0ms, ${labelTransitionMS}ms;\n        transform: scale(0.7) translateX(-21.4%) translateY(0px);\n        width: 130%;\n      }\n    `}\n\n  ${(props) =>\n    props.labelPosition === 'center' &&\n    `\n      & input, & textarea {\n        opacity: ${props.labelActive ? 1 : 0};\n      }\n\n      & > ${Label} {\n        opacity: ${props.labelActive ? 0 : 1};\n        z-index: ${props.labelActive ? -1 : 'auto'};\n      }\n    `}\n`\n"],"names":["shouldForwardFormInputLabelProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","borderColor","backgroundColorHover","COLOR_SCHEMA","contrast","disabled","css","props","theme","colors","transparent","error","success","default","tinycolor","darken","toString","secondary","primary","Dropdown","styled","div","withConfig","displayName","componentId","Root","shouldForwardProp","borderWidth","inline","zIndex","overflow","white","schema","onColored","responsiveSize","responsiveMargin","Label","span","InputContainer","position","labelPosition","labelActive"],"mappings":"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"}
+{"version":3,"file":"style.mjs","sources":["../../../../src/components/FormInputLabel/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledFormInputLabelProps, FormInputLabelPalette, StyledInputContainerProps } from './types'\n\nconst shouldForwardFormInputLabelProp = createShouldForwardProp(\n  (propKey) =>\n    ![\n      'primary',\n      'secondary',\n      'error',\n      'success',\n      'focus',\n      'disabled',\n      'onColored',\n      'inline',\n      'zIndex',\n      'overflow',\n    ].includes(propKey)\n)\n\nconst labelTransitionMS = 125\n\nconst template = (palette: FormInputLabelPalette) => `\n  color: ${palette.color};\n  background-color: ${palette.backgroundColor};\n  border-color: ${palette.borderColor};\n  &:hover {\n    background-color: ${palette.backgroundColorHover};\n  }\n  &:focus-within {\n    background-color: ${palette.backgroundColor};\n  }\n  & [data-input-control]::after {\n    color: ${palette.backgroundColor}; \n  }\n`\n\nconst COLOR_SCHEMA = {\n  contrast: {\n    disabled: css<StyledFormInputLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-disabled'],\n          backgroundColor: props.theme.colors['bg-disabled-large'],\n          borderColor: props.theme.colors.transparent,\n          backgroundColorHover: props.theme.colors['bg-disabled-large'],\n          ...props.palette,\n        })}\n    `,\n    error: css<StyledFormInputLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-secondary'],\n          backgroundColor: props.theme.colors['alert-bg-error-200'],\n          borderColor: props.theme.colors['alert-bg-error-500'],\n          backgroundColorHover: props.theme.colors['alert-bg-error-200'],\n          ...props.palette,\n        })}\n    `,\n    success: css<StyledFormInputLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-secondary'],\n          backgroundColor: props.theme.colors['alert-bg-success-200'],\n          borderColor: props.theme.colors['alert-bg-success-500'],\n          backgroundColorHover: props.theme.colors['alert-bg-success-200'],\n          ...props.palette,\n        })}\n    `,\n    default: css<StyledFormInputLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-secondary'],\n          backgroundColor: props.theme.colors['bg-onmain-primary'],\n          borderColor: props.theme.colors['border-onmain-default-large'],\n          backgroundColorHover: props.focus\n            ? props.theme.colors['bg-onmain-primary']\n            : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor),\n          ...props.palette,\n        })}\n    `,\n  },\n  secondary: {\n    disabled: css<StyledFormInputLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-disabled'],\n          backgroundColor: props.theme.colors['bg-disabled-large'],\n          borderColor: props.theme.colors.transparent,\n          backgroundColorHover: props.theme.colors['bg-disabled-large'],\n          ...props.palette,\n        })}\n    `,\n    error: css<StyledFormInputLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-secondary'],\n          backgroundColor: props.theme.colors['alert-bg-error-100'],\n          borderColor: props.theme.colors['alert-bg-error-500'],\n          backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n          ...props.palette,\n        })}\n    `,\n    success: css<StyledFormInputLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-secondary'],\n          backgroundColor: props.theme.colors['alert-bg-success-100'],\n          borderColor: props.theme.colors['alert-bg-success-500'],\n          backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n          ...props.palette,\n        })}\n    `,\n    default: css<StyledFormInputLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-secondary'],\n          backgroundColor: props.theme.colors['bg-onmain-secondary'],\n          borderColor: props.theme.colors['border-onmain-default-large'],\n          backgroundColorHover: props.focus\n            ? props.theme.colors['bg-onmain-secondary']\n            : (tinycolor(props.theme.colors['bg-onmain-secondary']).darken(4).toString() as CSSColor),\n          ...props.palette,\n        })}\n    `,\n  },\n  primary: {\n    disabled: css<StyledFormInputLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-disabled'],\n          backgroundColor: props.theme.colors['bg-disabled-large'],\n          borderColor: props.theme.colors.transparent,\n          backgroundColorHover: props.theme.colors['bg-disabled-large'],\n          ...props.palette,\n        })}\n    `,\n    error: css<StyledFormInputLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-secondary'],\n          backgroundColor: props.theme.colors['alert-bg-error-100'],\n          borderColor: props.theme.colors['alert-bg-error-500'],\n          backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n          ...props.palette,\n        })}\n    `,\n    success: css<StyledFormInputLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-secondary'],\n          backgroundColor: props.theme.colors['alert-bg-success-100'],\n          borderColor: props.theme.colors['alert-bg-success-500'],\n          backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n          ...props.palette,\n        })}\n    `,\n    default: css<StyledFormInputLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-secondary'],\n          backgroundColor: props.theme.colors['bg-onmain-primary'],\n          borderColor: props.theme.colors['border-onmain-default-large'],\n          backgroundColorHover: props.focus\n            ? props.theme.colors['bg-onmain-primary']\n            : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor),\n          ...props.palette,\n        })}\n    `,\n  },\n}\n\nexport const Dropdown = styled.div`\n  box-sizing: border-box;\n  position: absolute;\n  top: 100%;\n  margin-top: 8px;\n`\n\nexport const Root = styled.div.withConfig<StyledFormInputLabelProps>({\n  shouldForwardProp: shouldForwardFormInputLabelProp,\n})`\n  ${(props) => {\n    const borderWidth = '1px'\n\n    return `\n      box-sizing: border-box;\n      position: relative;\n      isolation: isolate;\n      display: ${props.inline ? 'inline-flex' : 'flex'};\n      cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n      align-items: center;\n      min-width: min-content;\n      border: ${borderWidth} solid transparent;\n      z-index: ${props.zIndex ?? 'auto'};\n      overflow: ${props.overflow ?? 'visible'};\n      transition-property: background-color;\n      transition-duration: 150ms;\n      transition-timing-function: ease-in;\n\n      & > ${Dropdown} {\n        right: -${borderWidth};\n        left: -${borderWidth};\n      }\n\n      &:hover [data-input-control]::after {\n        opacity: 0;\n      }\n    `\n  }}\n\n  ${(props) =>\n    props.focus\n      ? `\n        box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n        outline: 2px solid transparent;\n        outline-offset: 2px;\n        & [data-input-control]::after {\n          opacity: 0;\n        }\n      `\n      : `\n        &:focus-within {\n          box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n          outline: 2px solid transparent;\n          outline-offset: 2px;\n        }\n        &:focus-within [data-input-control]::after {\n          opacity: 0;\n        }\n      `}\n\n  ${(props) => {\n    let schema = COLOR_SCHEMA.primary\n\n    if (props.secondary) schema = COLOR_SCHEMA.secondary\n    if (props.contrast || props.onColored) schema = COLOR_SCHEMA.contrast\n\n    if (props.disabled) return schema.disabled\n    if (props.error) return schema.error\n    if (props.success) return schema.success\n\n    return schema.default\n  }}\n\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const Label = styled.span`\n  box-sizing: border-box;\n  position: absolute;\n  left: 0;\n  top: 0;\n  transform: translateY(0.7em);\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  line-height: 1;\n  text-overflow: ellipsis;\n  pointer-events: none;\n  transition-property: transform, width;\n  transition-duration: ${labelTransitionMS}ms, 0ms;\n  transition-delay: 0ms, 0ms;\n  transition-timing-function: cubic-bezier(0, 0, 0.48, 1);\n`\n\nexport const InputContainer = styled.div.withConfig<StyledInputContainerProps>({\n  shouldForwardProp: (propKey) => !['position', 'labelPosition', 'labelActive'].includes(propKey),\n})`\n  ${(props) => `\n    box-sizing: border-box;\n    position: relative;\n    display: flex;\n    flex-grow: 1;\n    align-self: ${props.position};\n    cursor: inherit;\n    min-height: 2.4em;\n  `}\n\n  ${(props) =>\n    props.labelPosition === 'dynamic' &&\n    `\n      padding-top: 0.7em;\n\n      & input, & textarea {\n        opacity: ${props.labelActive ? 1 : 0};\n      }\n\n       ${\n         props.labelActive &&\n         `& > ${Label} {\n              transition-delay: 0ms, ${labelTransitionMS}ms;\n              transform: scale(0.7) translateX(-21.4%) translateY(0px);\n              width: 130%;\n            }`\n       }\n    `}\n\n  ${(props) =>\n    props.labelPosition === 'top' &&\n    `\n      padding-top: 0.7em;\n\n      & > ${Label} {\n        transition-delay: 0ms, ${labelTransitionMS}ms;\n        transform: scale(0.7) translateX(-21.4%) translateY(0px);\n        width: 130%;\n      }\n    `}\n\n  ${(props) =>\n    props.labelPosition === 'center' &&\n    `\n      & input, & textarea {\n        opacity: ${props.labelActive ? 1 : 0};\n      }\n\n      & > ${Label} {\n        opacity: ${props.labelActive ? 0 : 1};\n        z-index: ${props.labelActive ? -1 : 'auto'};\n      }\n    `}\n`\n"],"names":["shouldForwardFormInputLabelProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","borderColor","backgroundColorHover","COLOR_SCHEMA","contrast","disabled","css","props","theme","colors","transparent","error","success","default","focus","tinycolor","darken","toString","secondary","primary","Dropdown","styled","div","withConfig","displayName","componentId","Root","shouldForwardProp","borderWidth","inline","zIndex","overflow","white","schema","onColored","responsiveSize","responsiveMargin","Label","span","InputContainer","position","labelPosition","labelActive"],"mappings":"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"}

package/components/MenuList/MenuList.js

@@ -1,2 +1,2 @@
-'use strict';var React=require('react');var dom=require('../../shared/utils/dom.js');var constants=require('../../shared/constants.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');const HOT_KEYS=[...constants.keyboardKeys.ArrowUp.key,...constants.keyboardKeys.ArrowDown.key];exports.MenuList=React.forwardRef(((e,r)=>{const{role:s="list",gap:t=4,size:i,sizeXXS:n,sizeXS:o,sizeS:a,sizeM:c,sizeL:l,sizeXL:d,sizeUnits:p,sizes:u,...y}=e;const z={size:i,sizeXXS:n,sizeXS:o,sizeS:a,sizeM:c,sizeL:l,sizeXL:d,sizeUnits:p,sizes:u};const h=React.isValidElement(y.children)&&y.children.type===React.Fragment&&typeof y.children.props=='object'&&y.children.props!==null?y.children.props.children:y.children;return require$$0.jsx(style.Root,{...y,role:s,gap:t,onKeyDown:e=>{if(y.onKeyDown&&y.onKeyDown(e),HOT_KEYS.includes(e.key)){e.preventDefault();const r=[...e.currentTarget.children];let s=r.findIndex((r=>r.contains(e.target)));for(;s>=0&&s<r.length;){s=constants.keyboardKeys.ArrowUp.validate(e.key)?--s:++s;const t=r[s];if(t instanceof HTMLElement&&dom.focusFirstFocusable(t))break}}},ref:r,children:React.Children.map(h,((e,r)=>React.isValidElement(e)?require$$0.jsx("li",{children:React.cloneElement(e,{...z,...typeof e.props=='object'&&e.props!==null?e.props:{}})},r):e===null||e===void 0||typeof e=='boolean'?e:require$$0.jsx("li",{children:e},r)))})}));
+'use strict';var React=require('react');var dom=require('../../shared/utils/dom.js');var constants=require('../../shared/constants.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');const HOT_KEYS=[...constants.keyboardKeys.ArrowUp.key,...constants.keyboardKeys.ArrowDown.key];exports.MenuList=React.forwardRef(((e,s)=>{const{role:r="list",gap:t=4,size:i,sizeXXS:n,sizeXS:o,sizeS:l,sizeM:a,sizeL:c,sizeXL:d,sizeUnits:p,sizes:u,...y}=e;const z={size:i,sizeXXS:n,sizeXS:o,sizeS:l,sizeM:a,sizeL:c,sizeXL:d,sizeUnits:p,sizes:u};const h=React.isValidElement(y.children)&&y.children.type===React.Fragment&&typeof y.children.props=='object'&&y.children.props!==null?y.children.props.children:y.children;return require$$0.jsx(style.Root,{...y,role:r,gap:t,onKeyDown:e=>{if(y.onKeyDown&&y.onKeyDown(e),HOT_KEYS.includes(e.key)){e.preventDefault();const s=[...e.currentTarget.children];let r=s.findIndex((s=>s.contains(e.target)));do{r=constants.keyboardKeys.ArrowUp.validate(e.key)?--r:++r,r<0?r=s.length-1:r>s.length-1&&(r=0)}while(!(s[r]instanceof HTMLElement&&dom.focusFirstFocusable(s[r])))}},ref:s,children:React.Children.map(h,((e,s)=>React.isValidElement(e)?require$$0.jsx("li",{children:React.cloneElement(e,{...z,...typeof e.props=='object'&&e.props!==null?e.props:{}})},s):e===null||e===void 0||typeof e=='boolean'?e:require$$0.jsx("li",{children:e},s)))})}));
 //# sourceMappingURL=MenuList.js.map

package/components/MenuList/MenuList.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuList.js","sources":["../../../../src/components/MenuList/MenuList.tsx"],"sourcesContent":["import { forwardRef, Children, isValidElement, cloneElement, Fragment } from 'react'\nimport { focusFirstFocusable } from 'shared/utils/dom'\nimport { keyboardKeys } from 'shared/constants'\nimport type { MenuListProps } from './types'\nimport * as Styled from './style'\n\nconst HOT_KEYS: string[] = [...keyboardKeys.ArrowUp.key, ...keyboardKeys.ArrowDown.key]\n\n/**\n *\n * Component accepts all \\<ul\\> attributes.\n *\n * Responsive \"size\" props are forwarded to children elements.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [MenuListProps](https://github.com/foxford/ui/blob/master/src/components/MenuList/types.ts)\n */\nconst MenuList: React.ForwardRefExoticComponent<MenuListProps> = forwardRef<HTMLUListElement, MenuListProps>(\n  (props, ref) => {\n    const {\n      role = 'list',\n      gap = 4,\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      sizeUnits,\n      sizes,\n      ...restProps\n    } = props\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      sizeUnits,\n      sizes,\n    }\n\n    const children =\n      isValidElement(restProps.children) &&\n      restProps.children.type === Fragment &&\n      typeof restProps.children.props === 'object' &&\n      restProps.children.props !== null\n        ? restProps.children.props.children\n        : restProps.children\n\n    return (\n      <Styled.Root\n        {...restProps}\n        role={role}\n        gap={gap}\n        onKeyDown={(evt) => {\n          if (restProps.onKeyDown) restProps.onKeyDown(evt)\n\n          if (HOT_KEYS.includes(evt.key)) {\n            evt.preventDefault()\n\n            const listItems = [...evt.currentTarget.children]\n            let idx = listItems.findIndex((item) => item.contains(evt.target as Node))\n\n            while (idx >= 0 && idx < listItems.length) {\n              idx = keyboardKeys.ArrowUp.validate(evt.key) ? --idx : ++idx\n\n              const nextItem = listItems[idx]\n\n              if (nextItem instanceof HTMLElement && focusFirstFocusable(nextItem)) {\n                break\n              }\n            }\n          }\n        }}\n        ref={ref}\n      >\n        {Children.map(children, (child, idx) => {\n          if (isValidElement(child)) {\n            const childProps = typeof child.props === 'object' && child.props !== null ? child.props : {}\n\n            return <li key={idx}>{cloneElement(child, { ...sizeProps, ...childProps })}</li>\n          }\n\n          return child === null || child === undefined || typeof child === 'boolean' ? (\n            child\n          ) : (\n            <li key={idx}>{child}</li>\n          )\n        })}\n      </Styled.Root>\n    )\n  }\n)\n\nexport { MenuList }\n"],"names":["HOT_KEYS","keyboardKeys","ArrowUp","key","ArrowDown","forwardRef","props","ref","role","gap","size","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","restProps","sizeProps","children","isValidElement","type","Fragment","_jsx","Styled","onKeyDown","evt","includes","preventDefault","listItems","currentTarget","idx","findIndex","item","contains","target","length","validate","nextItem","HTMLElement","focusFirstFocusable","Children","map","child","cloneElement","undefined","jsx"],"mappings":"oNAMA,MAAMA,SAAqB,IAAIC,UAAAA,aAAaC,QAAQC,OAAQF,UAAYA,aAACG,UAAUD,sBAYlBE,MAAUA,YACzE,CAACC,EAAOC,KACN,MAAMC,KACJA,EAAO,OAAMC,IACbA,EAAM,EAACC,KACPA,EAAIC,QACJA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,UACNA,EAASC,MACTA,KACGC,GACDb,EAEJ,MAAMc,EAAY,CAChBV,OACAC,UACAC,SACAC,QACAC,QACAC,QACAC,SACAC,YACAC,SAGF,MAAMG,EACJC,MAAAA,eAAeH,EAAUE,WACzBF,EAAUE,SAASE,OAASC,uBACrBL,EAAUE,SAASf,OAAU,UACpCa,EAAUE,SAASf,QAAU,KACzBa,EAAUE,SAASf,MAAMe,SACzBF,EAAUE,SAEhB,OACEI,WAAAA,IAACC,MAAAA,KAAW,IACNP,EACJX,KAAMA,EACNC,IAAKA,EACLkB,UAAYC,IAGV,GAFIT,EAAUQ,WAAWR,EAAUQ,UAAUC,GAEzC5B,SAAS6B,SAASD,EAAIzB,KAAM,CAC9ByB,EAAIE,iBAEJ,MAAMC,EAAY,IAAIH,EAAII,cAAcX,UACxC,IAAIY,EAAMF,EAAUG,WAAWC,GAASA,EAAKC,SAASR,EAAIS,UAE1D,KAAOJ,GAAO,GAAKA,EAAMF,EAAUO,QAAQ,CACzCL,EAAMhC,UAAAA,aAAaC,QAAQqC,SAASX,EAAIzB,OAAS8B,IAAQA,EAEzD,MAAMO,EAAWT,EAAUE,GAE3B,GAAIO,aAAoBC,aAAeC,IAAmBA,oBAACF,GACzD,KAEJ,CACF,GAEFjC,IAAKA,EAAIc,SAERsB,MAAQA,SAACC,IAAIvB,GAAU,CAACwB,EAAOZ,IAC1BX,MAAAA,eAAeuB,GAGVpB,WAAAA,IAAA,KAAA,CAAAJ,SAAeyB,MAAYA,aAACD,EAAO,IAAKzB,YAFrByB,EAAMvC,OAAU,UAAYuC,EAAMvC,QAAU,KAAOuC,EAAMvC,MAAQ,CAAA,KAE3E2B,GAGXY,IAAU,MAAQA,SAAUE,UAAoBF,GAAU,UAC/DA,EAEApB,WAAAuB,IAAA,KAAA,CAAA3B,SAAewB,GAANZ,MAGD"}
+{"version":3,"file":"MenuList.js","sources":["../../../../src/components/MenuList/MenuList.tsx"],"sourcesContent":["import { forwardRef, Children, isValidElement, cloneElement, Fragment } from 'react'\nimport { focusFirstFocusable } from 'shared/utils/dom'\nimport { keyboardKeys } from 'shared/constants'\nimport type { MenuListProps } from './types'\nimport * as Styled from './style'\n\nconst HOT_KEYS: string[] = [...keyboardKeys.ArrowUp.key, ...keyboardKeys.ArrowDown.key]\n\n/**\n *\n * Component accepts all \\<ul\\> attributes.\n *\n * Responsive \"size\" props are forwarded to children elements.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [MenuListProps](https://github.com/foxford/ui/blob/master/src/components/MenuList/types.ts)\n */\nconst MenuList: React.ForwardRefExoticComponent<MenuListProps> = forwardRef<HTMLUListElement, MenuListProps>(\n  (props, ref) => {\n    const {\n      role = 'list',\n      gap = 4,\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      sizeUnits,\n      sizes,\n      ...restProps\n    } = props\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      sizeUnits,\n      sizes,\n    }\n\n    const children =\n      isValidElement(restProps.children) &&\n      restProps.children.type === Fragment &&\n      typeof restProps.children.props === 'object' &&\n      restProps.children.props !== null\n        ? restProps.children.props.children\n        : restProps.children\n\n    return (\n      <Styled.Root\n        {...restProps}\n        role={role}\n        gap={gap}\n        onKeyDown={(evt) => {\n          if (restProps.onKeyDown) restProps.onKeyDown(evt)\n\n          if (HOT_KEYS.includes(evt.key)) {\n            evt.preventDefault()\n\n            const listItems = [...evt.currentTarget.children]\n            let idx = listItems.findIndex((item) => item.contains(evt.target as Node))\n\n            do {\n              idx = keyboardKeys.ArrowUp.validate(evt.key) ? --idx : ++idx\n\n              if (idx < 0) {\n                idx = listItems.length - 1\n              } else if (idx > listItems.length - 1) {\n                idx = 0\n              }\n            } while (!(listItems[idx] instanceof HTMLElement && focusFirstFocusable(listItems[idx] as HTMLElement)))\n          }\n        }}\n        ref={ref}\n      >\n        {Children.map(children, (child, idx) => {\n          if (isValidElement(child)) {\n            const childProps = typeof child.props === 'object' && child.props !== null ? child.props : {}\n\n            return <li key={idx}>{cloneElement(child, { ...sizeProps, ...childProps })}</li>\n          }\n\n          return child === null || child === undefined || typeof child === 'boolean' ? (\n            child\n          ) : (\n            <li key={idx}>{child}</li>\n          )\n        })}\n      </Styled.Root>\n    )\n  }\n)\n\nexport { MenuList }\n"],"names":["HOT_KEYS","keyboardKeys","ArrowUp","key","ArrowDown","forwardRef","props","ref","role","gap","size","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","restProps","sizeProps","children","isValidElement","type","Fragment","_jsx","Styled","onKeyDown","evt","includes","preventDefault","listItems","currentTarget","idx","findIndex","item","contains","target","validate","length","HTMLElement","focusFirstFocusable","Children","map","child","cloneElement","undefined","jsx"],"mappings":"oNAMA,MAAMA,SAAqB,IAAIC,UAAAA,aAAaC,QAAQC,OAAQF,UAAYA,aAACG,UAAUD,sBAYlBE,MAAUA,YACzE,CAACC,EAAOC,KACN,MAAMC,KACJA,EAAO,OAAMC,IACbA,EAAM,EAACC,KACPA,EAAIC,QACJA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,UACNA,EAASC,MACTA,KACGC,GACDb,EAEJ,MAAMc,EAAY,CAChBV,OACAC,UACAC,SACAC,QACAC,QACAC,QACAC,SACAC,YACAC,SAGF,MAAMG,EACJC,MAAAA,eAAeH,EAAUE,WACzBF,EAAUE,SAASE,OAASC,uBACrBL,EAAUE,SAASf,OAAU,UACpCa,EAAUE,SAASf,QAAU,KACzBa,EAAUE,SAASf,MAAMe,SACzBF,EAAUE,SAEhB,OACEI,WAAAA,IAACC,MAAAA,KAAW,IACNP,EACJX,KAAMA,EACNC,IAAKA,EACLkB,UAAYC,IAGV,GAFIT,EAAUQ,WAAWR,EAAUQ,UAAUC,GAEzC5B,SAAS6B,SAASD,EAAIzB,KAAM,CAC9ByB,EAAIE,iBAEJ,MAAMC,EAAY,IAAIH,EAAII,cAAcX,UACxC,IAAIY,EAAMF,EAAUG,WAAWC,GAASA,EAAKC,SAASR,EAAIS,UAE1D,GACEJ,EAAMhC,UAAAA,aAAaC,QAAQoC,SAASV,EAAIzB,OAAS8B,IAAQA,EAErDA,EAAM,EACRA,EAAMF,EAAUQ,OAAS,EAChBN,EAAMF,EAAUQ,OAAS,IAClCN,EAAM,WAECF,EAAUE,aAAgBO,aAAeC,IAAAA,oBAAoBV,EAAUE,KACpF,GAEF1B,IAAKA,EAAIc,SAERqB,MAAQA,SAACC,IAAItB,GAAU,CAACuB,EAAOX,IAC1BX,MAAAA,eAAesB,GAGVnB,WAAAA,IAAA,KAAA,CAAAJ,SAAewB,MAAYA,aAACD,EAAO,IAAKxB,YAFrBwB,EAAMtC,OAAU,UAAYsC,EAAMtC,QAAU,KAAOsC,EAAMtC,MAAQ,CAAA,KAE3E2B,GAGXW,IAAU,MAAQA,SAAUE,UAAoBF,GAAU,UAC/DA,EAEAnB,WAAAsB,IAAA,KAAA,CAAA1B,SAAeuB,GAANX,MAGD"}

package/components/MenuList/MenuList.mjs

@@ -1,2 +1,2 @@
-import{forwardRef,isValidElement,Fragment,Children,cloneElement}from'react';import{focusFirstFocusable}from'../../shared/utils/dom.mjs';import{keyboardKeys}from'../../shared/constants.mjs';import{Root}from'./style.mjs';import{jsx}from'react/jsx-runtime';const HOT_KEYS=[...keyboardKeys.ArrowUp.key,...keyboardKeys.ArrowDown.key];const MenuList=forwardRef(((e,s)=>{const{role:o="list",gap:r=4,size:i,sizeXXS:n,sizeXS:t,sizeS:l,sizeM:c,sizeL:a,sizeXL:d,sizeUnits:p,sizes:m,...f}=e;const y={size:i,sizeXXS:n,sizeXS:t,sizeS:l,sizeM:c,sizeL:a,sizeXL:d,sizeUnits:p,sizes:m};const z=isValidElement(f.children)&&f.children.type===Fragment&&typeof f.children.props=='object'&&f.children.props!==null?f.children.props.children:f.children;return jsx(Root,{...f,role:o,gap:r,onKeyDown:e=>{if(f.onKeyDown&&f.onKeyDown(e),HOT_KEYS.includes(e.key)){e.preventDefault();const s=[...e.currentTarget.children];let o=s.findIndex((s=>s.contains(e.target)));for(;o>=0&&o<s.length;){o=keyboardKeys.ArrowUp.validate(e.key)?--o:++o;const r=s[o];if(r instanceof HTMLElement&&focusFirstFocusable(r))break}}},ref:s,children:Children.map(z,((e,s)=>isValidElement(e)?jsx("li",{children:cloneElement(e,{...y,...typeof e.props=='object'&&e.props!==null?e.props:{}})},s):e===null||e===void 0||typeof e=='boolean'?e:jsx("li",{children:e},s)))})}));export{MenuList};
+import{forwardRef,isValidElement,Fragment,Children,cloneElement}from'react';import{focusFirstFocusable}from'../../shared/utils/dom.mjs';import{keyboardKeys}from'../../shared/constants.mjs';import{Root}from'./style.mjs';import{jsx}from'react/jsx-runtime';const HOT_KEYS=[...keyboardKeys.ArrowUp.key,...keyboardKeys.ArrowDown.key];const MenuList=forwardRef(((e,s)=>{const{role:o="list",gap:r=4,size:i,sizeXXS:n,sizeXS:t,sizeS:l,sizeM:c,sizeL:d,sizeXL:a,sizeUnits:p,sizes:m,...y}=e;const f={size:i,sizeXXS:n,sizeXS:t,sizeS:l,sizeM:c,sizeL:d,sizeXL:a,sizeUnits:p,sizes:m};const h=isValidElement(y.children)&&y.children.type===Fragment&&typeof y.children.props=='object'&&y.children.props!==null?y.children.props.children:y.children;return jsx(Root,{...y,role:o,gap:r,onKeyDown:e=>{if(y.onKeyDown&&y.onKeyDown(e),HOT_KEYS.includes(e.key)){e.preventDefault();const s=[...e.currentTarget.children];let o=s.findIndex((s=>s.contains(e.target)));do{o=keyboardKeys.ArrowUp.validate(e.key)?--o:++o,o<0?o=s.length-1:o>s.length-1&&(o=0)}while(!(s[o]instanceof HTMLElement&&focusFirstFocusable(s[o])))}},ref:s,children:Children.map(h,((e,s)=>isValidElement(e)?jsx("li",{children:cloneElement(e,{...f,...typeof e.props=='object'&&e.props!==null?e.props:{}})},s):e===null||e===void 0||typeof e=='boolean'?e:jsx("li",{children:e},s)))})}));export{MenuList};
 //# sourceMappingURL=MenuList.mjs.map

package/components/MenuList/MenuList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MenuList.mjs","sources":["../../../../src/components/MenuList/MenuList.tsx"],"sourcesContent":["import { forwardRef, Children, isValidElement, cloneElement, Fragment } from 'react'\nimport { focusFirstFocusable } from 'shared/utils/dom'\nimport { keyboardKeys } from 'shared/constants'\nimport type { MenuListProps } from './types'\nimport * as Styled from './style'\n\nconst HOT_KEYS: string[] = [...keyboardKeys.ArrowUp.key, ...keyboardKeys.ArrowDown.key]\n\n/**\n *\n * Component accepts all \\<ul\\> attributes.\n *\n * Responsive \"size\" props are forwarded to children elements.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [MenuListProps](https://github.com/foxford/ui/blob/master/src/components/MenuList/types.ts)\n */\nconst MenuList: React.ForwardRefExoticComponent<MenuListProps> = forwardRef<HTMLUListElement, MenuListProps>(\n  (props, ref) => {\n    const {\n      role = 'list',\n      gap = 4,\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      sizeUnits,\n      sizes,\n      ...restProps\n    } = props\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      sizeUnits,\n      sizes,\n    }\n\n    const children =\n      isValidElement(restProps.children) &&\n      restProps.children.type === Fragment &&\n      typeof restProps.children.props === 'object' &&\n      restProps.children.props !== null\n        ? restProps.children.props.children\n        : restProps.children\n\n    return (\n      <Styled.Root\n        {...restProps}\n        role={role}\n        gap={gap}\n        onKeyDown={(evt) => {\n          if (restProps.onKeyDown) restProps.onKeyDown(evt)\n\n          if (HOT_KEYS.includes(evt.key)) {\n            evt.preventDefault()\n\n            const listItems = [...evt.currentTarget.children]\n            let idx = listItems.findIndex((item) => item.contains(evt.target as Node))\n\n            while (idx >= 0 && idx < listItems.length) {\n              idx = keyboardKeys.ArrowUp.validate(evt.key) ? --idx : ++idx\n\n              const nextItem = listItems[idx]\n\n              if (nextItem instanceof HTMLElement && focusFirstFocusable(nextItem)) {\n                break\n              }\n            }\n          }\n        }}\n        ref={ref}\n      >\n        {Children.map(children, (child, idx) => {\n          if (isValidElement(child)) {\n            const childProps = typeof child.props === 'object' && child.props !== null ? child.props : {}\n\n            return <li key={idx}>{cloneElement(child, { ...sizeProps, ...childProps })}</li>\n          }\n\n          return child === null || child === undefined || typeof child === 'boolean' ? (\n            child\n          ) : (\n            <li key={idx}>{child}</li>\n          )\n        })}\n      </Styled.Root>\n    )\n  }\n)\n\nexport { MenuList }\n"],"names":["HOT_KEYS","keyboardKeys","ArrowUp","key","ArrowDown","MenuList","forwardRef","props","ref","role","gap","size","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","restProps","sizeProps","children","isValidElement","type","Fragment","_jsx","Styled","onKeyDown","evt","includes","preventDefault","listItems","currentTarget","idx","findIndex","item","contains","target","length","validate","nextItem","HTMLElement","focusFirstFocusable","Children","map","child","cloneElement","undefined"],"mappings":"8PAMA,MAAMA,SAAqB,IAAIC,aAAaC,QAAQC,OAAQF,aAAaG,UAAUD,KAY7EE,MAAAA,SAA2DC,YAC/D,CAACC,EAAOC,KACN,MAAMC,KACJA,EAAO,OAAMC,IACbA,EAAM,EAACC,KACPA,EAAIC,QACJA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,UACNA,EAASC,MACTA,KACGC,GACDb,EAEJ,MAAMc,EAAY,CAChBV,OACAC,UACAC,SACAC,QACAC,QACAC,QACAC,SACAC,YACAC,SAGF,MAAMG,EACJC,eAAeH,EAAUE,WACzBF,EAAUE,SAASE,OAASC,iBACrBL,EAAUE,SAASf,OAAU,UACpCa,EAAUE,SAASf,QAAU,KACzBa,EAAUE,SAASf,MAAMe,SACzBF,EAAUE,SAEhB,OACEI,IAACC,KAAW,IACNP,EACJX,KAAMA,EACNC,IAAKA,EACLkB,UAAYC,IAGV,GAFIT,EAAUQ,WAAWR,EAAUQ,UAAUC,GAEzC7B,SAAS8B,SAASD,EAAI1B,KAAM,CAC9B0B,EAAIE,iBAEJ,MAAMC,EAAY,IAAIH,EAAII,cAAcX,UACxC,IAAIY,EAAMF,EAAUG,WAAWC,GAASA,EAAKC,SAASR,EAAIS,UAE1D,KAAOJ,GAAO,GAAKA,EAAMF,EAAUO,QAAQ,CACzCL,EAAMjC,aAAaC,QAAQsC,SAASX,EAAI1B,OAAS+B,IAAQA,EAEzD,MAAMO,EAAWT,EAAUE,GAE3B,GAAIO,aAAoBC,aAAeC,oBAAoBF,GACzD,KAEJ,CACF,GAEFjC,IAAKA,EAAIc,SAERsB,SAASC,IAAIvB,GAAU,CAACwB,EAAOZ,IAC1BX,eAAeuB,GAGVpB,IAAA,KAAA,CAAAJ,SAAeyB,aAAaD,EAAO,IAAKzB,YAFrByB,EAAMvC,OAAU,UAAYuC,EAAMvC,QAAU,KAAOuC,EAAMvC,MAAQ,CAAA,KAE3E2B,GAGXY,IAAU,MAAQA,SAAUE,UAAoBF,GAAU,UAC/DA,EAEApB,IAAA,KAAA,CAAAJ,SAAewB,GAANZ,MAGD"}
+{"version":3,"file":"MenuList.mjs","sources":["../../../../src/components/MenuList/MenuList.tsx"],"sourcesContent":["import { forwardRef, Children, isValidElement, cloneElement, Fragment } from 'react'\nimport { focusFirstFocusable } from 'shared/utils/dom'\nimport { keyboardKeys } from 'shared/constants'\nimport type { MenuListProps } from './types'\nimport * as Styled from './style'\n\nconst HOT_KEYS: string[] = [...keyboardKeys.ArrowUp.key, ...keyboardKeys.ArrowDown.key]\n\n/**\n *\n * Component accepts all \\<ul\\> attributes.\n *\n * Responsive \"size\" props are forwarded to children elements.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [MenuListProps](https://github.com/foxford/ui/blob/master/src/components/MenuList/types.ts)\n */\nconst MenuList: React.ForwardRefExoticComponent<MenuListProps> = forwardRef<HTMLUListElement, MenuListProps>(\n  (props, ref) => {\n    const {\n      role = 'list',\n      gap = 4,\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      sizeUnits,\n      sizes,\n      ...restProps\n    } = props\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      sizeUnits,\n      sizes,\n    }\n\n    const children =\n      isValidElement(restProps.children) &&\n      restProps.children.type === Fragment &&\n      typeof restProps.children.props === 'object' &&\n      restProps.children.props !== null\n        ? restProps.children.props.children\n        : restProps.children\n\n    return (\n      <Styled.Root\n        {...restProps}\n        role={role}\n        gap={gap}\n        onKeyDown={(evt) => {\n          if (restProps.onKeyDown) restProps.onKeyDown(evt)\n\n          if (HOT_KEYS.includes(evt.key)) {\n            evt.preventDefault()\n\n            const listItems = [...evt.currentTarget.children]\n            let idx = listItems.findIndex((item) => item.contains(evt.target as Node))\n\n            do {\n              idx = keyboardKeys.ArrowUp.validate(evt.key) ? --idx : ++idx\n\n              if (idx < 0) {\n                idx = listItems.length - 1\n              } else if (idx > listItems.length - 1) {\n                idx = 0\n              }\n            } while (!(listItems[idx] instanceof HTMLElement && focusFirstFocusable(listItems[idx] as HTMLElement)))\n          }\n        }}\n        ref={ref}\n      >\n        {Children.map(children, (child, idx) => {\n          if (isValidElement(child)) {\n            const childProps = typeof child.props === 'object' && child.props !== null ? child.props : {}\n\n            return <li key={idx}>{cloneElement(child, { ...sizeProps, ...childProps })}</li>\n          }\n\n          return child === null || child === undefined || typeof child === 'boolean' ? (\n            child\n          ) : (\n            <li key={idx}>{child}</li>\n          )\n        })}\n      </Styled.Root>\n    )\n  }\n)\n\nexport { MenuList }\n"],"names":["HOT_KEYS","keyboardKeys","ArrowUp","key","ArrowDown","MenuList","forwardRef","props","ref","role","gap","size","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","restProps","sizeProps","children","isValidElement","type","Fragment","_jsx","Styled","onKeyDown","evt","includes","preventDefault","listItems","currentTarget","idx","findIndex","item","contains","target","validate","length","HTMLElement","focusFirstFocusable","Children","map","child","cloneElement","undefined"],"mappings":"8PAMA,MAAMA,SAAqB,IAAIC,aAAaC,QAAQC,OAAQF,aAAaG,UAAUD,KAY7EE,MAAAA,SAA2DC,YAC/D,CAACC,EAAOC,KACN,MAAMC,KACJA,EAAO,OAAMC,IACbA,EAAM,EAACC,KACPA,EAAIC,QACJA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,UACNA,EAASC,MACTA,KACGC,GACDb,EAEJ,MAAMc,EAAY,CAChBV,OACAC,UACAC,SACAC,QACAC,QACAC,QACAC,SACAC,YACAC,SAGF,MAAMG,EACJC,eAAeH,EAAUE,WACzBF,EAAUE,SAASE,OAASC,iBACrBL,EAAUE,SAASf,OAAU,UACpCa,EAAUE,SAASf,QAAU,KACzBa,EAAUE,SAASf,MAAMe,SACzBF,EAAUE,SAEhB,OACEI,IAACC,KAAW,IACNP,EACJX,KAAMA,EACNC,IAAKA,EACLkB,UAAYC,IAGV,GAFIT,EAAUQ,WAAWR,EAAUQ,UAAUC,GAEzC7B,SAAS8B,SAASD,EAAI1B,KAAM,CAC9B0B,EAAIE,iBAEJ,MAAMC,EAAY,IAAIH,EAAII,cAAcX,UACxC,IAAIY,EAAMF,EAAUG,WAAWC,GAASA,EAAKC,SAASR,EAAIS,UAE1D,GACEJ,EAAMjC,aAAaC,QAAQqC,SAASV,EAAI1B,OAAS+B,IAAQA,EAErDA,EAAM,EACRA,EAAMF,EAAUQ,OAAS,EAChBN,EAAMF,EAAUQ,OAAS,IAClCN,EAAM,WAECF,EAAUE,aAAgBO,aAAeC,oBAAoBV,EAAUE,KACpF,GAEF1B,IAAKA,EAAIc,SAERqB,SAASC,IAAItB,GAAU,CAACuB,EAAOX,IAC1BX,eAAesB,GAGVnB,IAAA,KAAA,CAAAJ,SAAewB,aAAaD,EAAO,IAAKxB,YAFrBwB,EAAMtC,OAAU,UAAYsC,EAAMtC,QAAU,KAAOsC,EAAMtC,MAAQ,CAAA,KAE3E2B,GAGXW,IAAU,MAAQA,SAAUE,UAAoBF,GAAU,UAC/DA,EAEAnB,IAAA,KAAA,CAAAJ,SAAeuB,GAANX,MAGD"}

package/dts/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import * as react from 'react';
-import { CSSProperties, Component, SVGAttributes, FunctionComponent, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, RefObject, PureComponent } from 'react';
+import { CSSProperties, Component, SVGAttributes, FunctionComponent, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, RefObject, PureComponent, Dispatch, SetStateAction } from 'react';
 import * as styled_components from 'styled-components';
 import { CSSObject, DefaultTheme, FlattenSimpleInterpolation, ThemeProps, Interpolation, SimpleInterpolation, css, StyledProps } from 'styled-components';
 import { Props, PopperInstance, PlacementOptions, Styles } from 'react-floater/lib/types';
@@ -8424,8 +8424,23 @@ declare type DropdownOption = {
     /** Ассоциативные теги (учитывается при текстовом поиске) */
     [FuseSearchKeys.tags]?: string[];
 };
-interface DropdownMenuProps extends MenuComponentProps {
+declare type DropdownMenuNoOptionsProps = {
+    loading?: boolean;
+    loadingMessage?: JSX.Element | string;
+    loadingIcon?: JSX.Element | IconName;
+    loadingIconProps?: IconProps;
+    emptyMessage?: JSX.Element | string;
+    emptyIcon?: JSX.Element | IconName;
+    emptyIconProps?: IconProps;
+};
+interface DropdownMenuProps extends MenuComponentProps, DropdownMenuNoOptionsProps {
     expanseDirectionLeft?: boolean;
+    empty?: boolean;
+    open?: boolean;
+    renderInPortal?: boolean;
+    popperReferenceId?: string;
+    setRef: Dispatch<SetStateAction<Nullable<HTMLElement>>>;
+    zIndex?: number;
 }
 interface DropdownProps extends ResponsiveSizeProps<DropdownSize>, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'div'>, 'children'> {
     /**
@@ -8436,6 +8451,10 @@ interface DropdownProps extends ResponsiveSizeProps<DropdownSize>, ResponsiveMar
      * Закрывать выпадающее меню при скролле
      * @default false */
     closeMenuOnScroll?: boolean;
+    /**
+     * Элемент, при скролле которого будет закрыто выпадающее меню, если `closeMenuOnScroll=true`
+     * @default "document" */
+    scrollMonitorTarget?: RefObject<HTMLElement> | HTMLElement | string | null;
     /**
      * Адаптировать цветовую схему для контрастного фона
      * @default false */
@@ -8457,6 +8476,10 @@ interface DropdownProps extends ResponsiveSizeProps<DropdownSize>, ResponsiveMar
      * Интерактивность отключена
      * @default false */
     disabled?: boolean;
+    /**
+     * Отображать контрол для сброса выбранной опции, если включен мод одиночного выбора
+     * @default false */
+    clearable?: boolean;
     /**
      * Иконка для отображения с левого края
      * @default undefined */
@@ -8502,9 +8525,9 @@ interface DropdownProps extends ResponsiveSizeProps<DropdownSize>, ResponsiveMar
      * @default undefined */
     maxLength?: number;
     /**
-     * Пропсы выпадающего меню для конфигурации размеров
+     * Пропсы конфигурации для выпадающего меню
      * @default {} */
-    menuProps?: Pick<DropdownMenuProps, 'size' | 'sizeXL' | 'sizeL' | 'sizeM' | 'sizeS' | 'sizeXS' | 'sizeXXS' | 'sizes' | 'expanseDirectionLeft'>;
+    menuProps?: Pick<DropdownMenuProps, 'size' | 'sizeXL' | 'sizeL' | 'sizeM' | 'sizeS' | 'sizeXS' | 'sizeXXS' | 'sizes' | 'expanseDirectionLeft' | 'renderInPortal' | 'zIndex'>;
     /**
      * Включить мод множественного выбора
      * @default false */

package/external/.pnpm/@foxford_icon-pack@0.10.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@foxford/icon-pack/icons/LoaderFill/index.mjs

@@ -1,2 +1,2 @@
-import{__exports as LoaderFill$1}from'../../../../../../../../_virtual/index6.mjs';import require$$0 from'react/jsx-runtime';Object.defineProperty(LoaderFill$1,"__esModule",{value:!0});var LoaderFill_2=LoaderFill$1.LoaderFill=void 0;const jsx_runtime_1=require$$0;function LoaderFill(l){const{color:e,size:a,...r}=l;return(0,jsx_runtime_1.jsx)("svg",{xmlns:'http://www.w3.org/2000/svg',width:a,height:a,viewBox:'0 0 24 24',fill:e,...r,children:(0,jsx_runtime_1.jsx)("path",{fillRule:'evenodd',d:'M12 1.5A1.5 1.5 0 0 1 13.5 3v3a1.5 1.5 0 0 1-3 0V3A1.5 1.5 0 0 1 12 1.5Zm7.426 3.074a1.5 1.5 0 0 1 0 2.121l-2.121 2.122a1.5 1.5 0 1 1-2.121-2.122l2.12-2.12a1.5 1.5 0 0 1 2.122 0Zm-14.85.002a1.5 1.5 0 0 1 2.121 0L8.82 6.7A1.5 1.5 0 0 1 6.7 8.82L4.575 6.697a1.5 1.5 0 0 1 0-2.12ZM1.5 12A1.5 1.5 0 0 1 3 10.5h3a1.5 1.5 0 0 1 0 3H3A1.5 1.5 0 0 1 1.5 12Zm15 0a1.5 1.5 0 0 1 1.5-1.5h3a1.5 1.5 0 0 1 0 3h-3a1.5 1.5 0 0 1-1.5-1.5Zm-7.682 3.181a1.5 1.5 0 0 1 0 2.122l-2.123 2.123a1.5 1.5 0 1 1-2.12-2.121l2.122-2.123a1.5 1.5 0 0 1 2.121 0Zm6.364 0a1.5 1.5 0 0 1 2.12 0l2.122 2.122a1.5 1.5 0 1 1-2.121 2.12l-2.122-2.12a1.5 1.5 0 0 1 0-2.122ZM12 16.5a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-3 0v-3a1.5 1.5 0 0 1 1.5-1.5Z',clipRule:'evenodd'})})}LoaderFill_2=LoaderFill$1.LoaderFill=LoaderFill,LoaderFill$1.default=LoaderFill;export{LoaderFill_2 as LoaderFill};
+import{__exports as LoaderFill$1}from'../../../../../../../../_virtual/index5.mjs';import require$$0 from'react/jsx-runtime';Object.defineProperty(LoaderFill$1,"__esModule",{value:!0});var LoaderFill_2=LoaderFill$1.LoaderFill=void 0;const jsx_runtime_1=require$$0;function LoaderFill(l){const{color:e,size:a,...r}=l;return(0,jsx_runtime_1.jsx)("svg",{xmlns:'http://www.w3.org/2000/svg',width:a,height:a,viewBox:'0 0 24 24',fill:e,...r,children:(0,jsx_runtime_1.jsx)("path",{fillRule:'evenodd',d:'M12 1.5A1.5 1.5 0 0 1 13.5 3v3a1.5 1.5 0 0 1-3 0V3A1.5 1.5 0 0 1 12 1.5Zm7.426 3.074a1.5 1.5 0 0 1 0 2.121l-2.121 2.122a1.5 1.5 0 1 1-2.121-2.122l2.12-2.12a1.5 1.5 0 0 1 2.122 0Zm-14.85.002a1.5 1.5 0 0 1 2.121 0L8.82 6.7A1.5 1.5 0 0 1 6.7 8.82L4.575 6.697a1.5 1.5 0 0 1 0-2.12ZM1.5 12A1.5 1.5 0 0 1 3 10.5h3a1.5 1.5 0 0 1 0 3H3A1.5 1.5 0 0 1 1.5 12Zm15 0a1.5 1.5 0 0 1 1.5-1.5h3a1.5 1.5 0 0 1 0 3h-3a1.5 1.5 0 0 1-1.5-1.5Zm-7.682 3.181a1.5 1.5 0 0 1 0 2.122l-2.123 2.123a1.5 1.5 0 1 1-2.12-2.121l2.122-2.123a1.5 1.5 0 0 1 2.121 0Zm6.364 0a1.5 1.5 0 0 1 2.12 0l2.122 2.122a1.5 1.5 0 1 1-2.121 2.12l-2.122-2.12a1.5 1.5 0 0 1 0-2.122ZM12 16.5a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-3 0v-3a1.5 1.5 0 0 1 1.5-1.5Z',clipRule:'evenodd'})})}LoaderFill_2=LoaderFill$1.LoaderFill=LoaderFill,LoaderFill$1.default=LoaderFill;export{LoaderFill_2 as LoaderFill};
 //# sourceMappingURL=index.mjs.map

package/external/.pnpm/@foxford_icon-pack@0.10.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@foxford/icon-pack/icons/NotifFill/index.mjs

@@ -1,2 +1,2 @@
-import{__exports as NotifFill$1}from'../../../../../../../../_virtual/index5.mjs';import require$$0 from'react/jsx-runtime';Object.defineProperty(NotifFill$1,"__esModule",{value:!0});var NotifFill_2=NotifFill$1.NotifFill=void 0;const jsx_runtime_1=require$$0;function NotifFill(i){const{color:l,size:t,...o}=i;return(0,jsx_runtime_1.jsx)("svg",{xmlns:'http://www.w3.org/2000/svg',width:t,height:t,viewBox:'0 0 24 24',fill:l,...o,children:(0,jsx_runtime_1.jsx)("path",{fillRule:'evenodd',d:'M13 3a1 1 0 1 0-2 0v1.071c-1.299.186-2.52.732-3.483 1.587C6.307 6.735 5.6 8.221 5.6 9.8c0 1.812-.408 3.124-.905 4.058l-.01.017a73.322 73.322 0 0 0-.83 1.586c-.094.19-.176.364-.235.513-.03.073-.061.161-.085.254a1.225 1.225 0 0 0-.035.465c.014.108.046.347.19.586.144.24.34.38.429.444.157.111.313.16.39.18.093.025.182.04.256.05.147.019.32.029.498.035C5.62 18 6.12 18 6.747 18h10.505c.629 0 1.127 0 1.484-.012a5.37 5.37 0 0 0 .499-.035c.074-.01.163-.025.255-.05.077-.02.234-.069.39-.18.09-.064.286-.204.43-.444.144-.24.175-.478.19-.586a1.223 1.223 0 0 0-.035-.465 2.176 2.176 0 0 0-.085-.254 7.149 7.149 0 0 0-.235-.513 73.24 73.24 0 0 0-.831-1.586l-.01-.017c-.496-.934-.904-2.246-.904-4.058 0-1.579-.707-3.065-1.917-4.142-.963-.855-2.185-1.401-3.483-1.587V3Zm-2.985 16.25a1 1 0 1 0-1.323 1.5 4.991 4.991 0 0 0 3.312 1.252c1.269 0 2.43-.474 3.312-1.252a1 1 0 1 0-1.324-1.5 2.992 2.992 0 0 1-1.988.752 2.992 2.992 0 0 1-1.989-.752Z',clipRule:'evenodd'})})}NotifFill_2=NotifFill$1.NotifFill=NotifFill,NotifFill$1.default=NotifFill;export{NotifFill_2 as NotifFill};
+import{__exports as NotifFill$1}from'../../../../../../../../_virtual/index6.mjs';import require$$0 from'react/jsx-runtime';Object.defineProperty(NotifFill$1,"__esModule",{value:!0});var NotifFill_2=NotifFill$1.NotifFill=void 0;const jsx_runtime_1=require$$0;function NotifFill(i){const{color:l,size:t,...o}=i;return(0,jsx_runtime_1.jsx)("svg",{xmlns:'http://www.w3.org/2000/svg',width:t,height:t,viewBox:'0 0 24 24',fill:l,...o,children:(0,jsx_runtime_1.jsx)("path",{fillRule:'evenodd',d:'M13 3a1 1 0 1 0-2 0v1.071c-1.299.186-2.52.732-3.483 1.587C6.307 6.735 5.6 8.221 5.6 9.8c0 1.812-.408 3.124-.905 4.058l-.01.017a73.322 73.322 0 0 0-.83 1.586c-.094.19-.176.364-.235.513-.03.073-.061.161-.085.254a1.225 1.225 0 0 0-.035.465c.014.108.046.347.19.586.144.24.34.38.429.444.157.111.313.16.39.18.093.025.182.04.256.05.147.019.32.029.498.035C5.62 18 6.12 18 6.747 18h10.505c.629 0 1.127 0 1.484-.012a5.37 5.37 0 0 0 .499-.035c.074-.01.163-.025.255-.05.077-.02.234-.069.39-.18.09-.064.286-.204.43-.444.144-.24.175-.478.19-.586a1.223 1.223 0 0 0-.035-.465 2.176 2.176 0 0 0-.085-.254 7.149 7.149 0 0 0-.235-.513 73.24 73.24 0 0 0-.831-1.586l-.01-.017c-.496-.934-.904-2.246-.904-4.058 0-1.579-.707-3.065-1.917-4.142-.963-.855-2.185-1.401-3.483-1.587V3Zm-2.985 16.25a1 1 0 1 0-1.323 1.5 4.991 4.991 0 0 0 3.312 1.252c1.269 0 2.43-.474 3.312-1.252a1 1 0 1 0-1.324-1.5 2.992 2.992 0 0 1-1.988.752 2.992 2.992 0 0 1-1.989-.752Z',clipRule:'evenodd'})})}NotifFill_2=NotifFill$1.NotifFill=NotifFill,NotifFill$1.default=NotifFill;export{NotifFill_2 as NotifFill};
 //# sourceMappingURL=index.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foxford/ui",
-  "version": "2.54.0-beta-1aa2896-20241202",
+  "version": "2.55.0-beta-8e3c324-20241210",
   "description": "UI components library",
   "bugs": {
     "url": "https://github.com/foxford/ui/issues"

package/shared/constants.js

@@ -1,2 +1,2 @@
-'use strict';const keyboardKeys={ArrowDown:{key:['ArrowDown','Down'],validate(e){return this.key.includes(e)}},ArrowLeft:{key:['ArrowLeft','Left'],validate(e){return this.key.includes(e)}},ArrowRight:{key:['ArrowRight','Right'],validate(e){return this.key.includes(e)}},ArrowUp:{key:['ArrowUp','Up'],validate(e){return this.key.includes(e)}},Enter:{key:'Enter',validate(e){return this.key===e}},Esc:{key:['Escape','Esc'],validate(e){return this.key.includes(e)}},Space:{key:[' ','Spacebar'],validate(e){return this.key.includes(e)}}};exports.BREAKPOINTS={xl:1440,l:1280,m:1024,s:768,xs:374,xxs:320},exports.keyboardKeys=keyboardKeys;
+'use strict';const keyboardKeys={ArrowDown:{key:['ArrowDown','Down'],validate(e){return this.key.includes(e)}},ArrowLeft:{key:['ArrowLeft','Left'],validate(e){return this.key.includes(e)}},ArrowRight:{key:['ArrowRight','Right'],validate(e){return this.key.includes(e)}},ArrowUp:{key:['ArrowUp','Up'],validate(e){return this.key.includes(e)}},Enter:{key:'Enter',validate(e){return this.key===e}},Esc:{key:['Escape','Esc'],validate(e){return this.key.includes(e)}},Space:{key:[' ','Spacebar'],validate(e){return this.key.includes(e)}},Tab:{key:'Tab',validate(e){return this.key===e}},Backspace:{key:'Backspace',validate(e){return this.key===e}}};exports.BREAKPOINTS={xl:1440,l:1280,m:1024,s:768,xs:374,xxs:320},exports.keyboardKeys=keyboardKeys;
 //# sourceMappingURL=constants.js.map

package/shared/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../src/shared/constants.ts"],"sourcesContent":["import type { Breakpoint } from 'shared/types'\n\nexport const BREAKPOINTS: Readonly<Record<Lowercase<Breakpoint>, number>> = {\n  xl: 1440,\n  l: 1280,\n  m: 1024,\n  s: 768,\n  xs: 374,\n  xxs: 320,\n}\n\nexport const keyboardKeys = {\n  ArrowDown: {\n    key: ['ArrowDown', 'Down'],\n    validate(key: string) {\n      return this.key.includes(key)\n    },\n  },\n  ArrowLeft: {\n    key: ['ArrowLeft', 'Left'],\n    validate(key: string) {\n      return this.key.includes(key)\n    },\n  },\n  ArrowRight: {\n    key: ['ArrowRight', 'Right'],\n    validate(key: string) {\n      return this.key.includes(key)\n    },\n  },\n  ArrowUp: {\n    key: ['ArrowUp', 'Up'],\n    validate(key: string) {\n      return this.key.includes(key)\n    },\n  },\n  Enter: {\n    key: 'Enter',\n    validate(key: string) {\n      return this.key === key\n    },\n  },\n  Esc: {\n    key: ['Escape', 'Esc'],\n    validate(key: string) {\n      return this.key.includes(key)\n    },\n  },\n  Space: {\n    key: [' ', 'Spacebar'],\n    validate(key: string) {\n      return this.key.includes(key)\n    },\n  },\n}\n"],"names":["keyboardKeys","ArrowDown","key","validate","this","includes","ArrowLeft","ArrowRight","ArrowUp","Enter","Esc","Space","xl","l","m","s","xs","xxs"],"mappings":"aAWO,MAAMA,aAAe,CAC1BC,UAAW,CACTC,IAAK,CAAC,YAAa,QACnBC,QAAAA,CAASD,GACP,OAAOE,KAAKF,IAAIG,SAASH,EAC3B,GAEFI,UAAW,CACTJ,IAAK,CAAC,YAAa,QACnBC,QAAAA,CAASD,GACP,OAAOE,KAAKF,IAAIG,SAASH,EAC3B,GAEFK,WAAY,CACVL,IAAK,CAAC,aAAc,SACpBC,QAAAA,CAASD,GACP,OAAOE,KAAKF,IAAIG,SAASH,EAC3B,GAEFM,QAAS,CACPN,IAAK,CAAC,UAAW,MACjBC,QAAAA,CAASD,GACP,OAAOE,KAAKF,IAAIG,SAASH,EAC3B,GAEFO,MAAO,CACLP,IAAK,QACLC,QAAAA,CAASD,GACP,OAAOE,KAAKF,MAAQA,CACtB,GAEFQ,IAAK,CACHR,IAAK,CAAC,SAAU,OAChBC,QAAAA,CAASD,GACP,OAAOE,KAAKF,IAAIG,SAASH,EAC3B,GAEFS,MAAO,CACLT,IAAK,CAAC,IAAK,YACXC,QAAAA,CAASD,GACP,OAAOE,KAAKF,IAAIG,SAASH,EAC3B,wBAlDwE,CAC1EU,GAAI,KACJC,EAAG,KACHC,EAAG,KACHC,EAAG,IACHC,GAAI,IACJC,IAAK"}
+{"version":3,"file":"constants.js","sources":["../../../src/shared/constants.ts"],"sourcesContent":["import type { Breakpoint } from 'shared/types'\n\nexport const BREAKPOINTS: Readonly<Record<Lowercase<Breakpoint>, number>> = {\n  xl: 1440,\n  l: 1280,\n  m: 1024,\n  s: 768,\n  xs: 374,\n  xxs: 320,\n}\n\nexport const keyboardKeys = {\n  ArrowDown: {\n    key: ['ArrowDown', 'Down'],\n    validate(key: string) {\n      return this.key.includes(key)\n    },\n  },\n  ArrowLeft: {\n    key: ['ArrowLeft', 'Left'],\n    validate(key: string) {\n      return this.key.includes(key)\n    },\n  },\n  ArrowRight: {\n    key: ['ArrowRight', 'Right'],\n    validate(key: string) {\n      return this.key.includes(key)\n    },\n  },\n  ArrowUp: {\n    key: ['ArrowUp', 'Up'],\n    validate(key: string) {\n      return this.key.includes(key)\n    },\n  },\n  Enter: {\n    key: 'Enter',\n    validate(key: string) {\n      return this.key === key\n    },\n  },\n  Esc: {\n    key: ['Escape', 'Esc'],\n    validate(key: string) {\n      return this.key.includes(key)\n    },\n  },\n  Space: {\n    key: [' ', 'Spacebar'],\n    validate(key: string) {\n      return this.key.includes(key)\n    },\n  },\n  Tab: {\n    key: 'Tab',\n    validate(key: string) {\n      return this.key === key\n    },\n  },\n  Backspace: {\n    key: 'Backspace',\n    validate(key: string) {\n      return this.key === key\n    },\n  },\n}\n"],"names":["keyboardKeys","ArrowDown","key","validate","this","includes","ArrowLeft","ArrowRight","ArrowUp","Enter","Esc","Space","Tab","Backspace","xl","l","m","s","xs","xxs"],"mappings":"aAWO,MAAMA,aAAe,CAC1BC,UAAW,CACTC,IAAK,CAAC,YAAa,QACnBC,QAAAA,CAASD,GACP,OAAOE,KAAKF,IAAIG,SAASH,EAC3B,GAEFI,UAAW,CACTJ,IAAK,CAAC,YAAa,QACnBC,QAAAA,CAASD,GACP,OAAOE,KAAKF,IAAIG,SAASH,EAC3B,GAEFK,WAAY,CACVL,IAAK,CAAC,aAAc,SACpBC,QAAAA,CAASD,GACP,OAAOE,KAAKF,IAAIG,SAASH,EAC3B,GAEFM,QAAS,CACPN,IAAK,CAAC,UAAW,MACjBC,QAAAA,CAASD,GACP,OAAOE,KAAKF,IAAIG,SAASH,EAC3B,GAEFO,MAAO,CACLP,IAAK,QACLC,QAAAA,CAASD,GACP,OAAOE,KAAKF,MAAQA,CACtB,GAEFQ,IAAK,CACHR,IAAK,CAAC,SAAU,OAChBC,QAAAA,CAASD,GACP,OAAOE,KAAKF,IAAIG,SAASH,EAC3B,GAEFS,MAAO,CACLT,IAAK,CAAC,IAAK,YACXC,QAAAA,CAASD,GACP,OAAOE,KAAKF,IAAIG,SAASH,EAC3B,GAEFU,IAAK,CACHV,IAAK,MACLC,QAAAA,CAASD,GACP,OAAOE,KAAKF,MAAQA,CACtB,GAEFW,UAAW,CACTX,IAAK,YACLC,QAAAA,CAASD,GACP,OAAOE,KAAKF,MAAQA,CACtB,wBA9DwE,CAC1EY,GAAI,KACJC,EAAG,KACHC,EAAG,KACHC,EAAG,IACHC,GAAI,IACJC,IAAK"}

package/shared/constants.mjs

@@ -1,2 +1,2 @@
-const BREAKPOINTS={xl:1440,l:1280,m:1024,s:768,xs:374,xxs:320};const keyboardKeys={ArrowDown:{key:['ArrowDown','Down'],validate(e){return this.key.includes(e)}},ArrowLeft:{key:['ArrowLeft','Left'],validate(e){return this.key.includes(e)}},ArrowRight:{key:['ArrowRight','Right'],validate(e){return this.key.includes(e)}},ArrowUp:{key:['ArrowUp','Up'],validate(e){return this.key.includes(e)}},Enter:{key:'Enter',validate(e){return this.key===e}},Esc:{key:['Escape','Esc'],validate(e){return this.key.includes(e)}},Space:{key:[' ','Spacebar'],validate(e){return this.key.includes(e)}}};export{BREAKPOINTS,keyboardKeys};
+const BREAKPOINTS={xl:1440,l:1280,m:1024,s:768,xs:374,xxs:320};const keyboardKeys={ArrowDown:{key:['ArrowDown','Down'],validate(e){return this.key.includes(e)}},ArrowLeft:{key:['ArrowLeft','Left'],validate(e){return this.key.includes(e)}},ArrowRight:{key:['ArrowRight','Right'],validate(e){return this.key.includes(e)}},ArrowUp:{key:['ArrowUp','Up'],validate(e){return this.key.includes(e)}},Enter:{key:'Enter',validate(e){return this.key===e}},Esc:{key:['Escape','Esc'],validate(e){return this.key.includes(e)}},Space:{key:[' ','Spacebar'],validate(e){return this.key.includes(e)}},Tab:{key:'Tab',validate(e){return this.key===e}},Backspace:{key:'Backspace',validate(e){return this.key===e}}};export{BREAKPOINTS,keyboardKeys};
 //# sourceMappingURL=constants.mjs.map

package/shared/constants.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"constants.mjs","sources":["../../../src/shared/constants.ts"],"sourcesContent":["import type { Breakpoint } from 'shared/types'\n\nexport const BREAKPOINTS: Readonly<Record<Lowercase<Breakpoint>, number>> = {\n  xl: 1440,\n  l: 1280,\n  m: 1024,\n  s: 768,\n  xs: 374,\n  xxs: 320,\n}\n\nexport const keyboardKeys = {\n  ArrowDown: {\n    key: ['ArrowDown', 'Down'],\n    validate(key: string) {\n      return this.key.includes(key)\n    },\n  },\n  ArrowLeft: {\n    key: ['ArrowLeft', 'Left'],\n    validate(key: string) {\n      return this.key.includes(key)\n    },\n  },\n  ArrowRight: {\n    key: ['ArrowRight', 'Right'],\n    validate(key: string) {\n      return this.key.includes(key)\n    },\n  },\n  ArrowUp: {\n    key: ['ArrowUp', 'Up'],\n    validate(key: string) {\n      return this.key.includes(key)\n    },\n  },\n  Enter: {\n    key: 'Enter',\n    validate(key: string) {\n      return this.key === key\n    },\n  },\n  Esc: {\n    key: ['Escape', 'Esc'],\n    validate(key: string) {\n      return this.key.includes(key)\n    },\n  },\n  Space: {\n    key: [' ', 'Spacebar'],\n    validate(key: string) {\n      return this.key.includes(key)\n    },\n  },\n}\n"],"names":["BREAKPOINTS","xl","l","m","s","xs","xxs","keyboardKeys","ArrowDown","key","validate","this","includes","ArrowLeft","ArrowRight","ArrowUp","Enter","Esc","Space"],"mappings":"AAEO,MAAMA,YAA+D,CAC1EC,GAAI,KACJC,EAAG,KACHC,EAAG,KACHC,EAAG,IACHC,GAAI,IACJC,IAAK,KAGA,MAAMC,aAAe,CAC1BC,UAAW,CACTC,IAAK,CAAC,YAAa,QACnBC,QAAAA,CAASD,GACP,OAAOE,KAAKF,IAAIG,SAASH,EAC3B,GAEFI,UAAW,CACTJ,IAAK,CAAC,YAAa,QACnBC,QAAAA,CAASD,GACP,OAAOE,KAAKF,IAAIG,SAASH,EAC3B,GAEFK,WAAY,CACVL,IAAK,CAAC,aAAc,SACpBC,QAAAA,CAASD,GACP,OAAOE,KAAKF,IAAIG,SAASH,EAC3B,GAEFM,QAAS,CACPN,IAAK,CAAC,UAAW,MACjBC,QAAAA,CAASD,GACP,OAAOE,KAAKF,IAAIG,SAASH,EAC3B,GAEFO,MAAO,CACLP,IAAK,QACLC,QAAAA,CAASD,GACP,OAAOE,KAAKF,MAAQA,CACtB,GAEFQ,IAAK,CACHR,IAAK,CAAC,SAAU,OAChBC,QAAAA,CAASD,GACP,OAAOE,KAAKF,IAAIG,SAASH,EAC3B,GAEFS,MAAO,CACLT,IAAK,CAAC,IAAK,YACXC,QAAAA,CAASD,GACP,OAAOE,KAAKF,IAAIG,SAASH,EAC3B"}
+{"version":3,"file":"constants.mjs","sources":["../../../src/shared/constants.ts"],"sourcesContent":["import type { Breakpoint } from 'shared/types'\n\nexport const BREAKPOINTS: Readonly<Record<Lowercase<Breakpoint>, number>> = {\n  xl: 1440,\n  l: 1280,\n  m: 1024,\n  s: 768,\n  xs: 374,\n  xxs: 320,\n}\n\nexport const keyboardKeys = {\n  ArrowDown: {\n    key: ['ArrowDown', 'Down'],\n    validate(key: string) {\n      return this.key.includes(key)\n    },\n  },\n  ArrowLeft: {\n    key: ['ArrowLeft', 'Left'],\n    validate(key: string) {\n      return this.key.includes(key)\n    },\n  },\n  ArrowRight: {\n    key: ['ArrowRight', 'Right'],\n    validate(key: string) {\n      return this.key.includes(key)\n    },\n  },\n  ArrowUp: {\n    key: ['ArrowUp', 'Up'],\n    validate(key: string) {\n      return this.key.includes(key)\n    },\n  },\n  Enter: {\n    key: 'Enter',\n    validate(key: string) {\n      return this.key === key\n    },\n  },\n  Esc: {\n    key: ['Escape', 'Esc'],\n    validate(key: string) {\n      return this.key.includes(key)\n    },\n  },\n  Space: {\n    key: [' ', 'Spacebar'],\n    validate(key: string) {\n      return this.key.includes(key)\n    },\n  },\n  Tab: {\n    key: 'Tab',\n    validate(key: string) {\n      return this.key === key\n    },\n  },\n  Backspace: {\n    key: 'Backspace',\n    validate(key: string) {\n      return this.key === key\n    },\n  },\n}\n"],"names":["BREAKPOINTS","xl","l","m","s","xs","xxs","keyboardKeys","ArrowDown","key","validate","this","includes","ArrowLeft","ArrowRight","ArrowUp","Enter","Esc","Space","Tab","Backspace"],"mappings":"AAEO,MAAMA,YAA+D,CAC1EC,GAAI,KACJC,EAAG,KACHC,EAAG,KACHC,EAAG,IACHC,GAAI,IACJC,IAAK,KAGA,MAAMC,aAAe,CAC1BC,UAAW,CACTC,IAAK,CAAC,YAAa,QACnBC,QAAAA,CAASD,GACP,OAAOE,KAAKF,IAAIG,SAASH,EAC3B,GAEFI,UAAW,CACTJ,IAAK,CAAC,YAAa,QACnBC,QAAAA,CAASD,GACP,OAAOE,KAAKF,IAAIG,SAASH,EAC3B,GAEFK,WAAY,CACVL,IAAK,CAAC,aAAc,SACpBC,QAAAA,CAASD,GACP,OAAOE,KAAKF,IAAIG,SAASH,EAC3B,GAEFM,QAAS,CACPN,IAAK,CAAC,UAAW,MACjBC,QAAAA,CAASD,GACP,OAAOE,KAAKF,IAAIG,SAASH,EAC3B,GAEFO,MAAO,CACLP,IAAK,QACLC,QAAAA,CAASD,GACP,OAAOE,KAAKF,MAAQA,CACtB,GAEFQ,IAAK,CACHR,IAAK,CAAC,SAAU,OAChBC,QAAAA,CAASD,GACP,OAAOE,KAAKF,IAAIG,SAASH,EAC3B,GAEFS,MAAO,CACLT,IAAK,CAAC,IAAK,YACXC,QAAAA,CAASD,GACP,OAAOE,KAAKF,IAAIG,SAASH,EAC3B,GAEFU,IAAK,CACHV,IAAK,MACLC,QAAAA,CAASD,GACP,OAAOE,KAAKF,MAAQA,CACtB,GAEFW,UAAW,CACTX,IAAK,YACLC,QAAAA,CAASD,GACP,OAAOE,KAAKF,MAAQA,CACtB"}

package/shared/utils/dom.js

@@ -1,2 +1,2 @@
-'use strict';const SELECTORS_FOCUSABLE='a[href]:not([tabindex^="-"]), button:not(:disabled, [tabindex^="-"]), input:not(:disabled, [type="hidden"], [tabindex^="-"]), select:not(:disabled, [tabindex^="-"]), textarea:not(:disabled, [tabindex^="-"]), area[href]:not([tabindex^="-"]), iframe:not([tabindex^="-"]), object:not([tabindex^="-"]), summary:not([tabindex^="-"]), [tabindex]:not([tabindex^="-"]), [contenteditable]:not([contenteditable="false"], [tabindex^="-"])';exports.concatClassNames=(...t)=>t.reduce(((t,e)=>(e&&(t=t?t+' '+e:e),t)),''),exports.focusFirstFocusable=(t,e)=>{if(t.matches(SELECTORS_FOCUSABLE)&&typeof t.focus=='function')return t.focus(e),!0;const n=t.querySelector(SELECTORS_FOCUSABLE);return n instanceof HTMLElement&&typeof n.focus=='function'&&(n.focus(e),!0)};
+'use strict';const SELECTORS_FOCUSABLE='a[href]:not([tabindex^="-"]), button:not(:disabled, [tabindex^="-"]), input:not(:disabled, [type="hidden"], [tabindex^="-"]), select:not(:disabled, [tabindex^="-"]), textarea:not(:disabled, [tabindex^="-"]), area[href]:not([tabindex^="-"]), iframe:not([tabindex^="-"]), object:not([tabindex^="-"]), summary:not([tabindex^="-"]), [tabindex]:not([tabindex^="-"]), [contenteditable]:not([contenteditable="false"], [tabindex^="-"])';exports.concatClassNames=(...t)=>t.reduce(((t,e)=>(e&&(t=t?t+' '+e:e),t)),''),exports.focusFirstFocusable=(t,e)=>{if(t.matches(SELECTORS_FOCUSABLE)&&typeof t.focus=='function')return t.focus(e),!0;const n=t.querySelector(SELECTORS_FOCUSABLE);return n instanceof HTMLElement&&typeof n.focus=='function'&&(n.focus(e),!0)},exports.focusLastFocusable=(t,e)=>{const n=t.querySelectorAll(SELECTORS_FOCUSABLE);const o=n[n.length-1];return o instanceof HTMLElement&&typeof o.focus=='function'&&(o.focus(e),!0)};
 //# sourceMappingURL=dom.js.map

package/shared/utils/dom.js.map

@@ -1 +1 @@
-{"version":3,"file":"dom.js","sources":["../../../../src/shared/utils/dom.ts"],"sourcesContent":["import type { Nullable } from 'shared/types'\n\nconst SELECTORS_FOCUSABLE =\n  'a[href]:not([tabindex^=\"-\"]), button:not(:disabled, [tabindex^=\"-\"]), input:not(:disabled, [type=\"hidden\"], [tabindex^=\"-\"]), select:not(:disabled, [tabindex^=\"-\"]), textarea:not(:disabled, [tabindex^=\"-\"]), area[href]:not([tabindex^=\"-\"]), iframe:not([tabindex^=\"-\"]), object:not([tabindex^=\"-\"]), summary:not([tabindex^=\"-\"]), [tabindex]:not([tabindex^=\"-\"]), [contenteditable]:not([contenteditable=\"false\"], [tabindex^=\"-\"])'\n\nexport const focusFirstFocusable = (\n  element: HTMLElement,\n  options?: {\n    preventScroll?: boolean\n  }\n): boolean => {\n  if (element.matches(SELECTORS_FOCUSABLE) && typeof element.focus === 'function') {\n    element.focus(options)\n\n    return true\n  }\n\n  const descendent = element.querySelector(SELECTORS_FOCUSABLE)\n\n  if (descendent instanceof HTMLElement && typeof descendent.focus === 'function') {\n    descendent.focus(options)\n\n    return true\n  }\n\n  return false\n}\n\nexport const concatClassNames = (...classNames: Nullable<string>[]): string =>\n  classNames.reduce<string>((acc, className) => {\n    if (className) {\n      acc = acc ? acc + ' ' + className : className\n    }\n\n    return acc\n  }, '')\n"],"names":["SELECTORS_FOCUSABLE","concatClassNames","classNames","reduce","acc","className","focusFirstFocusable","element","options","matches","focus","descendent","querySelector","HTMLElement"],"mappings":"aAEA,MAAMA,oBACJ,ucAyB8BC,IAAIC,IAClCA,EAAWC,QAAe,CAACC,EAAKC,KAC1BA,IACFD,EAAMA,EAAMA,EAAM,IAAMC,EAAYA,GAG/BD,IACN,gCA9B8BE,CACjCC,EACAC,KAIA,GAAID,EAAQE,QAAQT,6BAA+BO,EAAQG,OAAU,WAGnE,OAFAH,EAAQG,MAAMF,IAEP,EAGT,MAAMG,EAAaJ,EAAQK,cAAcZ,qBAEzC,OAAIW,aAAsBE,oBAAsBF,EAAWD,OAAU,aACnEC,EAAWD,MAAMF,IAEV,EAGG"}
+{"version":3,"file":"dom.js","sources":["../../../../src/shared/utils/dom.ts"],"sourcesContent":["import type { Nullable } from 'shared/types'\n\nconst SELECTORS_FOCUSABLE =\n  'a[href]:not([tabindex^=\"-\"]), button:not(:disabled, [tabindex^=\"-\"]), input:not(:disabled, [type=\"hidden\"], [tabindex^=\"-\"]), select:not(:disabled, [tabindex^=\"-\"]), textarea:not(:disabled, [tabindex^=\"-\"]), area[href]:not([tabindex^=\"-\"]), iframe:not([tabindex^=\"-\"]), object:not([tabindex^=\"-\"]), summary:not([tabindex^=\"-\"]), [tabindex]:not([tabindex^=\"-\"]), [contenteditable]:not([contenteditable=\"false\"], [tabindex^=\"-\"])'\n\nexport const focusFirstFocusable = (\n  element: HTMLElement,\n  options?: {\n    preventScroll?: boolean\n  }\n): boolean => {\n  if (element.matches(SELECTORS_FOCUSABLE) && typeof element.focus === 'function') {\n    element.focus(options)\n\n    return true\n  }\n\n  const descendent = element.querySelector(SELECTORS_FOCUSABLE)\n\n  if (descendent instanceof HTMLElement && typeof descendent.focus === 'function') {\n    descendent.focus(options)\n\n    return true\n  }\n\n  return false\n}\n\nexport const focusLastFocusable = (\n  element: HTMLElement,\n  options?: {\n    preventScroll?: boolean\n  }\n): boolean => {\n  const descendants = element.querySelectorAll(SELECTORS_FOCUSABLE)\n  const lastDescendant = descendants[descendants.length - 1]\n\n  if (lastDescendant instanceof HTMLElement && typeof lastDescendant.focus === 'function') {\n    lastDescendant.focus(options)\n\n    return true\n  }\n\n  return false\n}\n\nexport const concatClassNames = (...classNames: Nullable<string>[]): string =>\n  classNames.reduce<string>((acc, className) => {\n    if (className) {\n      acc = acc ? acc + ' ' + className : className\n    }\n\n    return acc\n  }, '')\n"],"names":["SELECTORS_FOCUSABLE","concatClassNames","classNames","reduce","acc","className","focusFirstFocusable","element","options","matches","focus","descendent","querySelector","HTMLElement","focusLastFocusable","descendants","querySelectorAll","lastDescendant","length"],"mappings":"aAEA,MAAMA,oBACJ,ucA2C8BC,IAAIC,IAClCA,EAAWC,QAAe,CAACC,EAAKC,KAC1BA,IACFD,EAAMA,EAAMA,EAAM,IAAMC,EAAYA,GAG/BD,IACN,gCAhD8BE,CACjCC,EACAC,KAIA,GAAID,EAAQE,QAAQT,6BAA+BO,EAAQG,OAAU,WAGnE,OAFAH,EAAQG,MAAMF,IAEP,EAGT,MAAMG,EAAaJ,EAAQK,cAAcZ,qBAEzC,OAAIW,aAAsBE,oBAAsBF,EAAWD,OAAU,aACnEC,EAAWD,MAAMF,IAEV,EAGG,6BAGoBM,CAChCP,EACAC,KAIA,MAAMO,EAAcR,EAAQS,iBAAiBhB,qBAC7C,MAAMiB,EAAiBF,EAAYA,EAAYG,OAAS,GAExD,OAAID,aAA0BJ,oBAAsBI,EAAeP,OAAU,aAC3EO,EAAeP,MAAMF,IAEd,EAGG"}

package/shared/utils/dom.mjs

@@ -1,2 +1,2 @@
-const SELECTORS_FOCUSABLE='a[href]:not([tabindex^="-"]), button:not(:disabled, [tabindex^="-"]), input:not(:disabled, [type="hidden"], [tabindex^="-"]), select:not(:disabled, [tabindex^="-"]), textarea:not(:disabled, [tabindex^="-"]), area[href]:not([tabindex^="-"]), iframe:not([tabindex^="-"]), object:not([tabindex^="-"]), summary:not([tabindex^="-"]), [tabindex]:not([tabindex^="-"]), [contenteditable]:not([contenteditable="false"], [tabindex^="-"])';const focusFirstFocusable=(t,e)=>{if(t.matches(SELECTORS_FOCUSABLE)&&typeof t.focus=='function')return t.focus(e),!0;const n=t.querySelector(SELECTORS_FOCUSABLE);return n instanceof HTMLElement&&typeof n.focus=='function'&&(n.focus(e),!0)};const concatClassNames=(...t)=>t.reduce(((t,e)=>(e&&(t=t?t+' '+e:e),t)),'');export{concatClassNames,focusFirstFocusable};
+const SELECTORS_FOCUSABLE='a[href]:not([tabindex^="-"]), button:not(:disabled, [tabindex^="-"]), input:not(:disabled, [type="hidden"], [tabindex^="-"]), select:not(:disabled, [tabindex^="-"]), textarea:not(:disabled, [tabindex^="-"]), area[href]:not([tabindex^="-"]), iframe:not([tabindex^="-"]), object:not([tabindex^="-"]), summary:not([tabindex^="-"]), [tabindex]:not([tabindex^="-"]), [contenteditable]:not([contenteditable="false"], [tabindex^="-"])';const focusFirstFocusable=(t,e)=>{if(t.matches(SELECTORS_FOCUSABLE)&&typeof t.focus=='function')return t.focus(e),!0;const n=t.querySelector(SELECTORS_FOCUSABLE);return n instanceof HTMLElement&&typeof n.focus=='function'&&(n.focus(e),!0)};const focusLastFocusable=(t,e)=>{const n=t.querySelectorAll(SELECTORS_FOCUSABLE);const o=n[n.length-1];return o instanceof HTMLElement&&typeof o.focus=='function'&&(o.focus(e),!0)};const concatClassNames=(...t)=>t.reduce(((t,e)=>(e&&(t=t?t+' '+e:e),t)),'');export{concatClassNames,focusFirstFocusable,focusLastFocusable};
 //# sourceMappingURL=dom.mjs.map

package/shared/utils/dom.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dom.mjs","sources":["../../../../src/shared/utils/dom.ts"],"sourcesContent":["import type { Nullable } from 'shared/types'\n\nconst SELECTORS_FOCUSABLE =\n  'a[href]:not([tabindex^=\"-\"]), button:not(:disabled, [tabindex^=\"-\"]), input:not(:disabled, [type=\"hidden\"], [tabindex^=\"-\"]), select:not(:disabled, [tabindex^=\"-\"]), textarea:not(:disabled, [tabindex^=\"-\"]), area[href]:not([tabindex^=\"-\"]), iframe:not([tabindex^=\"-\"]), object:not([tabindex^=\"-\"]), summary:not([tabindex^=\"-\"]), [tabindex]:not([tabindex^=\"-\"]), [contenteditable]:not([contenteditable=\"false\"], [tabindex^=\"-\"])'\n\nexport const focusFirstFocusable = (\n  element: HTMLElement,\n  options?: {\n    preventScroll?: boolean\n  }\n): boolean => {\n  if (element.matches(SELECTORS_FOCUSABLE) && typeof element.focus === 'function') {\n    element.focus(options)\n\n    return true\n  }\n\n  const descendent = element.querySelector(SELECTORS_FOCUSABLE)\n\n  if (descendent instanceof HTMLElement && typeof descendent.focus === 'function') {\n    descendent.focus(options)\n\n    return true\n  }\n\n  return false\n}\n\nexport const concatClassNames = (...classNames: Nullable<string>[]): string =>\n  classNames.reduce<string>((acc, className) => {\n    if (className) {\n      acc = acc ? acc + ' ' + className : className\n    }\n\n    return acc\n  }, '')\n"],"names":["SELECTORS_FOCUSABLE","focusFirstFocusable","element","options","matches","focus","descendent","querySelector","HTMLElement","concatClassNames","classNames","reduce","acc","className"],"mappings":"AAEA,MAAMA,oBACJ,obAEWC,oBAAsBA,CACjCC,EACAC,KAIA,GAAID,EAAQE,QAAQJ,6BAA+BE,EAAQG,OAAU,WAGnE,OAFAH,EAAQG,MAAMF,IAEP,EAGT,MAAMG,EAAaJ,EAAQK,cAAcP,qBAEzC,OAAIM,aAAsBE,oBAAsBF,EAAWD,OAAU,aACnEC,EAAWD,MAAMF,IAEV,EAGG,EAGDM,MAAAA,iBAAmBA,IAAIC,IAClCA,EAAWC,QAAe,CAACC,EAAKC,KAC1BA,IACFD,EAAMA,EAAMA,EAAM,IAAMC,EAAYA,GAG/BD,IACN"}
+{"version":3,"file":"dom.mjs","sources":["../../../../src/shared/utils/dom.ts"],"sourcesContent":["import type { Nullable } from 'shared/types'\n\nconst SELECTORS_FOCUSABLE =\n  'a[href]:not([tabindex^=\"-\"]), button:not(:disabled, [tabindex^=\"-\"]), input:not(:disabled, [type=\"hidden\"], [tabindex^=\"-\"]), select:not(:disabled, [tabindex^=\"-\"]), textarea:not(:disabled, [tabindex^=\"-\"]), area[href]:not([tabindex^=\"-\"]), iframe:not([tabindex^=\"-\"]), object:not([tabindex^=\"-\"]), summary:not([tabindex^=\"-\"]), [tabindex]:not([tabindex^=\"-\"]), [contenteditable]:not([contenteditable=\"false\"], [tabindex^=\"-\"])'\n\nexport const focusFirstFocusable = (\n  element: HTMLElement,\n  options?: {\n    preventScroll?: boolean\n  }\n): boolean => {\n  if (element.matches(SELECTORS_FOCUSABLE) && typeof element.focus === 'function') {\n    element.focus(options)\n\n    return true\n  }\n\n  const descendent = element.querySelector(SELECTORS_FOCUSABLE)\n\n  if (descendent instanceof HTMLElement && typeof descendent.focus === 'function') {\n    descendent.focus(options)\n\n    return true\n  }\n\n  return false\n}\n\nexport const focusLastFocusable = (\n  element: HTMLElement,\n  options?: {\n    preventScroll?: boolean\n  }\n): boolean => {\n  const descendants = element.querySelectorAll(SELECTORS_FOCUSABLE)\n  const lastDescendant = descendants[descendants.length - 1]\n\n  if (lastDescendant instanceof HTMLElement && typeof lastDescendant.focus === 'function') {\n    lastDescendant.focus(options)\n\n    return true\n  }\n\n  return false\n}\n\nexport const concatClassNames = (...classNames: Nullable<string>[]): string =>\n  classNames.reduce<string>((acc, className) => {\n    if (className) {\n      acc = acc ? acc + ' ' + className : className\n    }\n\n    return acc\n  }, '')\n"],"names":["SELECTORS_FOCUSABLE","focusFirstFocusable","element","options","matches","focus","descendent","querySelector","HTMLElement","focusLastFocusable","descendants","querySelectorAll","lastDescendant","length","concatClassNames","classNames","reduce","acc","className"],"mappings":"AAEA,MAAMA,oBACJ,obAEWC,oBAAsBA,CACjCC,EACAC,KAIA,GAAID,EAAQE,QAAQJ,6BAA+BE,EAAQG,OAAU,WAGnE,OAFAH,EAAQG,MAAMF,IAEP,EAGT,MAAMG,EAAaJ,EAAQK,cAAcP,qBAEzC,OAAIM,aAAsBE,oBAAsBF,EAAWD,OAAU,aACnEC,EAAWD,MAAMF,IAEV,EAGG,QAGDM,mBAAqBA,CAChCP,EACAC,KAIA,MAAMO,EAAcR,EAAQS,iBAAiBX,qBAC7C,MAAMY,EAAiBF,EAAYA,EAAYG,OAAS,GAExD,OAAID,aAA0BJ,oBAAsBI,EAAeP,OAAU,aAC3EO,EAAeP,MAAMF,IAEd,EAGG,EAGDW,MAAAA,iBAAmBA,IAAIC,IAClCA,EAAWC,QAAe,CAACC,EAAKC,KAC1BA,IACFD,EAAMA,EAAMA,EAAM,IAAMC,EAAYA,GAG/BD,IACN"}