@unoff/ui 1.21.0 → 1.21.1

package/dist/components/inputs/simple-slider/SimpleSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleSlider.js","sources":["../../../../src/components/inputs/simple-slider/SimpleSlider.tsx"],"sourcesContent":["import React from 'react'\nimport IconChip from '@components/tags/icon-chip/IconChip'\nimport Chip from '@components/tags/chip/Chip'\nimport Knob from '@components/actions/knob/Knob'\nimport { doMap } from '@a_ng_d/figmug-utils'\nimport './simple-slider.scss'\n\nexport interface SimpleSliderProps {\n  /**\n   * Unique identifier for the slider\n   */\n  id: string\n  /**\n   * Label text for the slider\n   */\n  label: string\n  /**\n   * Current value\n   */\n  value: number\n  /**\n   * Minimum allowed value\n   */\n  min: number\n  /**\n   * Maximum allowed value\n   */\n  max: number\n  /**\n   * Step increment\n   * @default 1\n   */\n  step?: number\n  /**\n   * Colors for gradient display\n   */\n  colors: {\n    /** Start color */\n    min: string\n    /** End color */\n    max: string\n  }\n  /**\n   * Warning tooltip configuration\n   */\n  warning?: {\n    /** Warning message */\n    label: string | React.ReactNode\n    /** Warning position */\n    pin?: 'TOP' | 'BOTTOM'\n    /** Warning display type */\n    type?: 'MULTI_LINE' | 'SINGLE_LINE'\n  }\n  /**\n   * Feature identifier for tracking\n   */\n  feature: string\n  /**\n   * Whether the slider is blocked\n   * @default false\n   */\n  isBlocked?: boolean\n  /**\n   * Whether the slider is disabled\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * Whether to show a \"New\" badge\n   * @default false\n   */\n  isNew?: boolean\n  /**\n   * Change handler\n   */\n  onChange: (feature: string, state: string, value: number) => void\n  /**\n   * Handler called when unblock is clicked\n   */\n  onUnblock?: React.MouseEventHandler & React.KeyboardEventHandler\n}\n\nexport interface SimpleSliderStates {\n  isTooltipDisplay: boolean\n}\n\nexport default class SimpleSlider extends React.Component<\n  SimpleSliderProps,\n  SimpleSliderStates\n> {\n  private value: number\n\n  static defaultProps: Partial<SimpleSliderProps> = {\n    isBlocked: false,\n    isDisabled: false,\n    isNew: false,\n    step: 1,\n  }\n\n  constructor(props: SimpleSliderProps) {\n    super(props)\n    this.state = {\n      isTooltipDisplay: false,\n    }\n    this.value = props.value\n  }\n\n  componentDidUpdate = (previousProps: Readonly<SimpleSliderProps>) => {\n    const { value } = this.props\n\n    if (previousProps.value !== value) this.value = value\n  }\n\n  // Handlers\n  validHandler = (\n    e:\n      | React.FocusEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n  ) => {\n    const { min, max, feature, onChange, step = 1 } = this.props\n    const target = e.target as HTMLInputElement\n    if (target.value !== '') {\n      const parsedValue = parseFloat(target.value)\n      if (parsedValue < min) onChange(feature, 'TYPED', min)\n      else if (parsedValue > max) onChange(feature, 'TYPED', max)\n      else {\n        const roundedValue = this.roundToStep(parsedValue, step)\n        onChange(feature, 'TYPED', roundedValue)\n      }\n    }\n  }\n\n  // Direct Actions\n  onGrab = (e: React.MouseEvent<HTMLElement>) => {\n    const stop = e.currentTarget as HTMLElement,\n      range = stop.parentElement as HTMLElement,\n      shift =\n        e.clientX -\n        stop.getBoundingClientRect().left -\n        stop.getBoundingClientRect().width / 2,\n      rangeWidth = range.offsetWidth as number,\n      slider = range.parentElement as HTMLElement\n\n    stop.style.zIndex = '2'\n\n    document.onmousemove = (e) =>\n      this.onSlide(e, slider, stop, shift, rangeWidth)\n\n    document.onmouseup = () => this.onRelease(stop)\n  }\n\n  roundToStep = (value: number, step: number): number => {\n    return Math.round(value / step) * step\n  }\n\n  onSlide = (\n    e: MouseEvent,\n    slider: HTMLElement,\n    stop: HTMLElement,\n    shift: number,\n    rangeWidth: number\n  ) => {\n    const { min, max, feature, onChange, step = 0.1 } = this.props\n    const sliderPadding: number = parseFloat(\n      window.getComputedStyle(slider, null).getPropertyValue('padding-left')\n    )\n    let offset = e.clientX - slider.offsetLeft - sliderPadding - shift\n\n    const limitMin = 0\n    const limitMax = rangeWidth\n\n    if (offset <= limitMin) offset = limitMin\n    else if (offset >= limitMax) offset = limitMax\n\n    stop.style.left = doMap(offset, 0, rangeWidth, 0, 100).toFixed(1) + '%'\n\n    const rawValue = doMap(offset, 0, rangeWidth, min, max)\n\n    this.value = this.roundToStep(rawValue, step)\n\n    if (this.value < min) this.value = min\n    if (this.value > max) this.value = max\n\n    this.setState({\n      isTooltipDisplay: true,\n    })\n\n    onChange(feature, 'UPDATING', this.value)\n    document.body.style.cursor = 'ew-resize'\n  }\n\n  onRelease = (stop: HTMLElement) => {\n    const { feature, onChange } = this.props\n\n    document.onmousemove = null\n    document.onmouseup = null\n    stop.onmouseup = null\n    stop.style.zIndex = '1'\n\n    this.setState({\n      isTooltipDisplay: false,\n    })\n\n    onChange(feature, 'RELEASED', this.value)\n    document.body.style.cursor = ''\n  }\n\n  // Templates\n  Status = () => {\n    const { warning, isBlocked, isNew, onUnblock } = this.props\n\n    if (warning || isBlocked || isNew)\n      return (\n        <div className=\"simple-slider__status\">\n          {warning !== undefined && (\n            <IconChip\n              iconType=\"PICTO\"\n              iconName=\"warning\"\n              text={warning.label}\n              pin={warning.pin}\n              type={warning.type}\n            />\n          )}\n          {(isBlocked || isNew) && (\n            <Chip\n              isSolo\n              action={isBlocked ? onUnblock : undefined}\n            >\n              {isNew ? 'New' : 'Pro'}\n            </Chip>\n          )}\n        </div>\n      )\n  }\n\n  // Render\n  render() {\n    const {\n      id,\n      label,\n      value,\n      min,\n      max,\n      colors,\n      feature,\n      isBlocked,\n      isDisabled,\n      onChange,\n    } = this.props\n    const { isTooltipDisplay } = this.state\n\n    return (\n      <div\n        className=\"simple-slider\"\n        role=\"group\"\n        aria-label={label}\n      >\n        <div\n          className=\"simple-slider__range\"\n          role=\"presentation\"\n          style={{\n            background: `linear-gradient(90deg, ${colors.min}, ${colors.max})`,\n          }}\n        >\n          <Knob\n            id={id}\n            shortId={label}\n            value={value}\n            offset={doMap(value, min, max, 0, 100)}\n            min={min.toString()}\n            max={max.toString()}\n            canBeTyped={true}\n            isDisplayed={isTooltipDisplay}\n            isBlocked={isBlocked}\n            isDisabled={isDisabled}\n            onShiftRight={(e) => {\n              const { step = 1 } = this.props\n              if (e.shiftKey) {\n                const newValue = this.roundToStep(value + 10, step)\n                onChange(feature, 'SHIFTED', newValue > max ? max : newValue)\n              } else {\n                const newValue = this.roundToStep(value + step, step)\n                onChange(feature, 'SHIFTED', newValue > max ? max : newValue)\n              }\n            }}\n            onShiftLeft={(e) => {\n              const { step = 1 } = this.props\n              if (e.shiftKey) {\n                const newValue = this.roundToStep(value - 10, step)\n                onChange(feature, 'SHIFTED', newValue < min ? min : newValue)\n              } else {\n                const newValue = this.roundToStep(value - step, step)\n                onChange(feature, 'SHIFTED', newValue < min ? min : newValue)\n              }\n            }}\n            onMouseDown={(e: React.MouseEvent<HTMLElement>) => {\n              this.onGrab(e)\n              ;(e.target as HTMLElement).focus()\n            }}\n            onValidStopValue={(_stopId, e) => this.validHandler(e)}\n          />\n        </div>\n        {this.Status()}\n      </div>\n    )\n  }\n}\n"],"names":["SimpleSlider","React","props","previousProps","value","e","min","max","feature","onChange","step","target","parsedValue","roundedValue","stop","range","shift","rangeWidth","slider","sliderPadding","offset","limitMin","limitMax","doMap","rawValue","warning","isBlocked","isNew","onUnblock","jsxs","jsx","IconChip","Chip","id","label","colors","isDisabled","isTooltipDisplay","Knob","newValue","_stopId"],"mappings":"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"}
+{"version":3,"file":"SimpleSlider.js","sources":["../../../../src/components/inputs/simple-slider/SimpleSlider.tsx"],"sourcesContent":["import React from 'react'\nimport { doMap } from '@unoff/utils'\nimport IconChip from '@components/tags/icon-chip/IconChip'\nimport Chip from '@components/tags/chip/Chip'\nimport Knob from '@components/actions/knob/Knob'\nimport './simple-slider.scss'\n\nexport interface SimpleSliderProps {\n  /**\n   * Unique identifier for the slider\n   */\n  id: string\n  /**\n   * Label text for the slider\n   */\n  label: string\n  /**\n   * Current value\n   */\n  value: number\n  /**\n   * Minimum allowed value\n   */\n  min: number\n  /**\n   * Maximum allowed value\n   */\n  max: number\n  /**\n   * Step increment\n   * @default 1\n   */\n  step?: number\n  /**\n   * Colors for gradient display\n   */\n  colors: {\n    /** Start color */\n    min: string\n    /** End color */\n    max: string\n  }\n  /**\n   * Warning tooltip configuration\n   */\n  warning?: {\n    /** Warning message */\n    label: string | React.ReactNode\n    /** Warning position */\n    pin?: 'TOP' | 'BOTTOM'\n    /** Warning display type */\n    type?: 'MULTI_LINE' | 'SINGLE_LINE'\n  }\n  /**\n   * Feature identifier for tracking\n   */\n  feature: string\n  /**\n   * Whether the slider is blocked\n   * @default false\n   */\n  isBlocked?: boolean\n  /**\n   * Whether the slider is disabled\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * Whether to show a \"New\" badge\n   * @default false\n   */\n  isNew?: boolean\n  /**\n   * Change handler\n   */\n  onChange: (feature: string, state: string, value: number) => void\n  /**\n   * Handler called when unblock is clicked\n   */\n  onUnblock?: React.MouseEventHandler & React.KeyboardEventHandler\n}\n\nexport interface SimpleSliderStates {\n  isTooltipDisplay: boolean\n}\n\nexport default class SimpleSlider extends React.Component<\n  SimpleSliderProps,\n  SimpleSliderStates\n> {\n  private value: number\n\n  static defaultProps: Partial<SimpleSliderProps> = {\n    isBlocked: false,\n    isDisabled: false,\n    isNew: false,\n    step: 1,\n  }\n\n  constructor(props: SimpleSliderProps) {\n    super(props)\n    this.state = {\n      isTooltipDisplay: false,\n    }\n    this.value = props.value\n  }\n\n  componentDidUpdate = (previousProps: Readonly<SimpleSliderProps>) => {\n    const { value } = this.props\n\n    if (previousProps.value !== value) this.value = value\n  }\n\n  // Handlers\n  validHandler = (\n    e:\n      | React.FocusEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n  ) => {\n    const { min, max, feature, onChange, step = 1 } = this.props\n    const target = e.target as HTMLInputElement\n    if (target.value !== '') {\n      const parsedValue = parseFloat(target.value)\n      if (parsedValue < min) onChange(feature, 'TYPED', min)\n      else if (parsedValue > max) onChange(feature, 'TYPED', max)\n      else {\n        const roundedValue = this.roundToStep(parsedValue, step)\n        onChange(feature, 'TYPED', roundedValue)\n      }\n    }\n  }\n\n  // Direct Actions\n  onGrab = (e: React.MouseEvent<HTMLElement>) => {\n    const stop = e.currentTarget as HTMLElement,\n      range = stop.parentElement as HTMLElement,\n      shift =\n        e.clientX -\n        stop.getBoundingClientRect().left -\n        stop.getBoundingClientRect().width / 2,\n      rangeRect = range.getBoundingClientRect(),\n      rangeWidth = rangeRect.width as number,\n      slider = range.parentElement as HTMLElement\n\n    stop.style.zIndex = '2'\n\n    document.onmousemove = (e) =>\n      this.onSlide(e, slider, stop, shift, rangeWidth, rangeRect)\n\n    document.onmouseup = () => this.onRelease(stop)\n  }\n\n  roundToStep = (value: number, step: number): number => {\n    return Math.round(value / step) * step\n  }\n\n  onSlide = (\n    e: MouseEvent,\n    _: HTMLElement,\n    stop: HTMLElement,\n    shift: number,\n    rangeWidth: number,\n    rangeRect: DOMRect\n  ) => {\n    const { min, max, feature, onChange, step = 1 } = this.props\n    let offset = e.clientX - rangeRect.left - shift\n\n    const limitMin = 0\n    const limitMax = rangeWidth\n\n    if (offset <= limitMin) offset = limitMin\n    else if (offset >= limitMax) offset = limitMax\n\n    const rawValue = doMap(offset, 0, rangeWidth, min, max)\n\n    if (step >= 1) {\n      const newValue = this.roundToStep(rawValue, step)\n      const clampedValue = Math.max(min, Math.min(max, newValue))\n\n      if (this.value !== clampedValue) {\n        this.value = clampedValue\n\n        const snappedPosition = doMap(this.value, min, max, 0, 100)\n        stop.style.left = snappedPosition.toFixed(1) + '%'\n\n        this.setState({\n          isTooltipDisplay: true,\n        })\n\n        onChange(feature, 'UPDATING', this.value)\n      }\n    } else {\n      this.value = rawValue\n\n      if (this.value < min) this.value = min\n      if (this.value > max) this.value = max\n\n      stop.style.left = doMap(offset, 0, rangeWidth, 0, 100).toFixed(1) + '%'\n\n      this.setState({\n        isTooltipDisplay: true,\n      })\n\n      onChange(feature, 'UPDATING', this.value)\n    }\n\n    document.body.style.cursor = 'ew-resize'\n  }\n\n  onRelease = (stop: HTMLElement) => {\n    const { feature, onChange, step = 1 } = this.props\n\n    document.onmousemove = null\n    document.onmouseup = null\n    stop.onmouseup = null\n    stop.style.zIndex = '1'\n\n    this.value = this.roundToStep(this.value, step)\n\n    this.setState({\n      isTooltipDisplay: false,\n    })\n\n    onChange(feature, 'RELEASED', this.value)\n    document.body.style.cursor = ''\n  }\n\n  // Templates\n  Status = () => {\n    const { warning, isBlocked, isNew, onUnblock } = this.props\n\n    if (warning || isBlocked || isNew)\n      return (\n        <div className=\"simple-slider__status\">\n          {warning !== undefined && (\n            <IconChip\n              iconType=\"PICTO\"\n              iconName=\"warning\"\n              text={warning.label}\n              pin={warning.pin}\n              type={warning.type}\n            />\n          )}\n          {(isBlocked || isNew) && (\n            <Chip\n              isSolo\n              action={isBlocked ? onUnblock : undefined}\n            >\n              {isNew ? 'New' : 'Pro'}\n            </Chip>\n          )}\n        </div>\n      )\n  }\n\n  // Render\n  render() {\n    const {\n      id,\n      label,\n      value,\n      min,\n      max,\n      colors,\n      feature,\n      isBlocked,\n      isDisabled,\n      onChange,\n    } = this.props\n    const { isTooltipDisplay } = this.state\n\n    return (\n      <div\n        className=\"simple-slider\"\n        role=\"group\"\n        aria-label={label}\n      >\n        <div\n          className=\"simple-slider__range\"\n          role=\"presentation\"\n          style={{\n            background: `linear-gradient(90deg, ${colors.min}, ${colors.max})`,\n          }}\n        >\n          <Knob\n            id={id}\n            shortId={label}\n            value={value}\n            offset={doMap(value, min, max, 0, 100)}\n            min={min.toString()}\n            max={max.toString()}\n            canBeTyped={true}\n            isDisplayed={isTooltipDisplay}\n            isBlocked={isBlocked}\n            isDisabled={isDisabled}\n            onShiftRight={(e) => {\n              const { step = 1 } = this.props\n              if (e.shiftKey) {\n                const newValue = this.roundToStep(value + step * 10, step)\n                onChange(feature, 'SHIFTED', newValue > max ? max : newValue)\n              } else {\n                const newValue = this.roundToStep(value + step, step)\n                onChange(feature, 'SHIFTED', newValue > max ? max : newValue)\n              }\n            }}\n            onShiftLeft={(e) => {\n              const { step = 1 } = this.props\n              if (e.shiftKey) {\n                const newValue = this.roundToStep(value - step * 10, step)\n                onChange(feature, 'SHIFTED', newValue < min ? min : newValue)\n              } else {\n                const newValue = this.roundToStep(value - step, step)\n                onChange(feature, 'SHIFTED', newValue < min ? min : newValue)\n              }\n            }}\n            onMouseDown={(e: React.MouseEvent<HTMLElement>) => {\n              this.onGrab(e)\n              ;(e.target as HTMLElement).focus()\n            }}\n            onValidStopValue={(_stopId, e) => this.validHandler(e)}\n          />\n        </div>\n        {this.Status()}\n      </div>\n    )\n  }\n}\n"],"names":["SimpleSlider","React","props","previousProps","value","e","min","max","feature","onChange","step","target","parsedValue","roundedValue","stop","range","shift","rangeRect","rangeWidth","slider","_","offset","limitMin","limitMax","rawValue","doMap","newValue","clampedValue","snappedPosition","warning","isBlocked","isNew","onUnblock","jsxs","jsx","IconChip","Chip","id","label","colors","isDisabled","isTooltipDisplay","Knob","_stopId"],"mappings":"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"}

package/dist/components/lists/actions-item/ActionsItem.js

@@ -1,11 +1,11 @@
 import '../../../assets/ActionsItem.css';
 import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import u from "react";
+import { t as n } from "../../../do-classnames-DSDFCvzy.js";
 import a from "../../../styles/texts/texts.module.js";
 import y from "../../tags/chip/Chip.js";
 import N from "../../assets/thumbnail/Thumbnail.js";
 import _ from "../../assets/avatar/Avatar.js";
-import { t as n } from "../../../do-classnames-DSDFCvzy.js";
 class C extends u.Component {
   static defaultProps = {
     isInteractive: !1

package/dist/components/lists/actions-item/ActionsItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionsItem.js","sources":["../../../../src/components/lists/actions-item/ActionsItem.tsx"],"sourcesContent":["import React from 'react'\nimport texts from '@styles/texts/texts.module.scss'\nimport Chip from '@components/tags/chip/Chip'\nimport Thumbnail from '@components/assets/thumbnail/Thumbnail'\nimport Avatar from '@components/assets/avatar/Avatar'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\nimport './actions-item.scss'\n\nexport interface ActionsItemProps {\n  /**\n   * Unique identifier for the item\n   */\n  id: string\n  /**\n   * Image source URL\n   */\n  src?: string\n  /**\n   * Name/title of the item\n   */\n  name: string\n  /**\n   * Status indicator configuration\n   */\n  indicator?: {\n    /** Label text */\n    label: string\n    /** Status state */\n    status: 'ACTIVE' | 'INACTIVE'\n  }\n  /**\n   * Description text\n   */\n  description: string\n  /**\n   * Additional description text\n   */\n  subdescription: string\n  /**\n   * Additional content slot\n   */\n  complementSlot?: React.ReactNode\n  /**\n   * User information to display\n   */\n  user?: {\n    /** User avatar URL */\n    avatar?: string\n    /** User name */\n    name: string\n  }\n  /**\n   * Action buttons slot\n   */\n  actionsSlot?: React.ReactNode\n  /**\n   * Whether the item is clickable\n   * @default false\n   */\n  isInteractive?: boolean\n  /**\n   * Click handler\n   */\n  action?: React.MouseEventHandler<HTMLLIElement> &\n    React.KeyboardEventHandler<HTMLLIElement>\n}\n\nexport default class ActionsItem extends React.Component<ActionsItemProps> {\n  static defaultProps: Partial<ActionsItemProps> = {\n    isInteractive: false,\n  }\n\n  render() {\n    const {\n      id,\n      src,\n      name,\n      indicator,\n      description,\n      subdescription,\n      complementSlot,\n      user,\n      actionsSlot,\n      isInteractive,\n      action,\n    } = this.props\n    return (\n      <li\n        className={doClassnames([\n          'actions-item',\n          isInteractive && 'actions-item--interactive',\n        ])}\n        data-id={id}\n        aria-label={name}\n        tabIndex={isInteractive ? 0 : -1}\n        onMouseDown={isInteractive ? action : undefined}\n        onKeyDown={(e) => {\n          if ((e.key === ' ' || e.key === 'Enter') && isInteractive) action?.(e)\n          if (e.key === 'Escape' && isInteractive)\n            (e.target as HTMLElement).blur()\n        }}\n      >\n        {src !== undefined && (\n          <div\n            className=\"actions-item__asset\"\n            role=\"presentation\"\n          >\n            <Thumbnail src={src} />\n          </div>\n        )}\n        <div\n          className=\"actions-item__content\"\n          role=\"group\"\n        >\n          <div>\n            <div\n              className={doClassnames([texts.type, texts['type--large']])}\n              role=\"heading\"\n              aria-level={2}\n            >\n              {name}\n              {indicator !== undefined && (\n                <Chip state={indicator.status}>{indicator.label}</Chip>\n              )}\n            </div>\n            <div className={texts.type}>{description}</div>\n            <div\n              className={doClassnames([texts.type, texts['type--secondary']])}\n              style={{\n                marginTop: '2px',\n              }}\n            >\n              {subdescription}\n            </div>\n          </div>\n          {complementSlot !== undefined && (\n            <div\n              className=\"actions-item__complement\"\n              role=\"complementary\"\n            >\n              {complementSlot}\n            </div>\n          )}\n          {user !== undefined && (\n            <Avatar\n              avatar={user.avatar}\n              fullName={user.name}\n            />\n          )}\n        </div>\n        {actionsSlot !== undefined && (\n          <div\n            className=\"actions-item__actions\"\n            role=\"group\"\n          >\n            {actionsSlot}\n          </div>\n        )}\n      </li>\n    )\n  }\n}\n"],"names":["ActionsItem","React","id","src","name","indicator","description","subdescription","complementSlot","user","actionsSlot","isInteractive","action","jsxs","doClassnames","e","jsx","Thumbnail","texts","Chip","Avatar"],"mappings":";;;;;;;AAmEA,MAAqBA,UAAoBC,EAAM,UAA4B;AAAA,EACzE,OAAO,eAA0C;AAAA,IAC/C,eAAe;AAAA,EAAA;AAAA,EAGjB,SAAS;AACP,UAAM;AAAA,MACJ,IAAAC;AAAA,MACA,KAAAC;AAAA,MACA,MAAAC;AAAA,MACA,WAAAC;AAAA,MACA,aAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,MAAAC;AAAA,MACA,aAAAC;AAAA,MACA,eAAAC;AAAA,MACA,QAAAC;AAAA,IAAA,IACE,KAAK;AACT,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAa;AAAA,UACtB;AAAA,UACAH,KAAiB;AAAA,QAAA,CAClB;AAAA,QACD,WAAST;AAAA,QACT,cAAYE;AAAA,QACZ,UAAUO,IAAgB,IAAI;AAAA,QAC9B,aAAaA,IAAgBC,IAAS;AAAA,QACtC,WAAW,CAACG,MAAM;AAChB,WAAKA,EAAE,QAAQ,OAAOA,EAAE,QAAQ,YAAYJ,SAAwBI,CAAC,GACjEA,EAAE,QAAQ,YAAYJ,KACvBI,EAAE,OAAuB,KAAA;AAAA,QAC9B;AAAA,QAEC,UAAA;AAAA,UAAAZ,MAAQ,UACP,gBAAAa;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cAEL,UAAA,gBAAAA,EAACC,KAAU,KAAAd,EAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAGzB,gBAAAU;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cAEL,UAAA;AAAA,gBAAA,gBAAAA,EAAC,OAAA,EACC,UAAA;AAAA,kBAAA,gBAAAA;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAWC,EAAa,CAACI,EAAM,MAAMA,EAAM,aAAa,CAAC,CAAC;AAAA,sBAC1D,MAAK;AAAA,sBACL,cAAY;AAAA,sBAEX,UAAA;AAAA,wBAAAd;AAAA,wBACAC,MAAc,UACb,gBAAAW,EAACG,GAAA,EAAK,OAAOd,EAAU,QAAS,YAAU,MAAA,CAAM;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAGpD,gBAAAW,EAAC,OAAA,EAAI,WAAWE,EAAM,MAAO,UAAAZ,GAAY;AAAA,kBACzC,gBAAAU;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAWF,EAAa,CAACI,EAAM,MAAMA,EAAM,iBAAiB,CAAC,CAAC;AAAA,sBAC9D,OAAO;AAAA,wBACL,WAAW;AAAA,sBAAA;AAAA,sBAGZ,UAAAX;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACH,GACF;AAAA,gBACCC,MAAmB,UAClB,gBAAAQ;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,MAAK;AAAA,oBAEJ,UAAAR;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGJC,MAAS,UACR,gBAAAO;AAAA,kBAACI;AAAA,kBAAA;AAAA,oBACC,QAAQX,EAAK;AAAA,oBACb,UAAUA,EAAK;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACjB;AAAA,YAAA;AAAA,UAAA;AAAA,UAGHC,MAAgB,UACf,gBAAAM;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cAEJ,UAAAN;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;"}
+{"version":3,"file":"ActionsItem.js","sources":["../../../../src/components/lists/actions-item/ActionsItem.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames } from '@unoff/utils'\nimport texts from '@styles/texts/texts.module.scss'\nimport Chip from '@components/tags/chip/Chip'\nimport Thumbnail from '@components/assets/thumbnail/Thumbnail'\nimport Avatar from '@components/assets/avatar/Avatar'\nimport './actions-item.scss'\n\nexport interface ActionsItemProps {\n  /**\n   * Unique identifier for the item\n   */\n  id: string\n  /**\n   * Image source URL\n   */\n  src?: string\n  /**\n   * Name/title of the item\n   */\n  name: string\n  /**\n   * Status indicator configuration\n   */\n  indicator?: {\n    /** Label text */\n    label: string\n    /** Status state */\n    status: 'ACTIVE' | 'INACTIVE'\n  }\n  /**\n   * Description text\n   */\n  description: string\n  /**\n   * Additional description text\n   */\n  subdescription: string\n  /**\n   * Additional content slot\n   */\n  complementSlot?: React.ReactNode\n  /**\n   * User information to display\n   */\n  user?: {\n    /** User avatar URL */\n    avatar?: string\n    /** User name */\n    name: string\n  }\n  /**\n   * Action buttons slot\n   */\n  actionsSlot?: React.ReactNode\n  /**\n   * Whether the item is clickable\n   * @default false\n   */\n  isInteractive?: boolean\n  /**\n   * Click handler\n   */\n  action?: React.MouseEventHandler<HTMLLIElement> &\n    React.KeyboardEventHandler<HTMLLIElement>\n}\n\nexport default class ActionsItem extends React.Component<ActionsItemProps> {\n  static defaultProps: Partial<ActionsItemProps> = {\n    isInteractive: false,\n  }\n\n  render() {\n    const {\n      id,\n      src,\n      name,\n      indicator,\n      description,\n      subdescription,\n      complementSlot,\n      user,\n      actionsSlot,\n      isInteractive,\n      action,\n    } = this.props\n    return (\n      <li\n        className={doClassnames([\n          'actions-item',\n          isInteractive && 'actions-item--interactive',\n        ])}\n        data-id={id}\n        aria-label={name}\n        tabIndex={isInteractive ? 0 : -1}\n        onMouseDown={isInteractive ? action : undefined}\n        onKeyDown={(e) => {\n          if ((e.key === ' ' || e.key === 'Enter') && isInteractive) action?.(e)\n          if (e.key === 'Escape' && isInteractive)\n            (e.target as HTMLElement).blur()\n        }}\n      >\n        {src !== undefined && (\n          <div\n            className=\"actions-item__asset\"\n            role=\"presentation\"\n          >\n            <Thumbnail src={src} />\n          </div>\n        )}\n        <div\n          className=\"actions-item__content\"\n          role=\"group\"\n        >\n          <div>\n            <div\n              className={doClassnames([texts.type, texts['type--large']])}\n              role=\"heading\"\n              aria-level={2}\n            >\n              {name}\n              {indicator !== undefined && (\n                <Chip state={indicator.status}>{indicator.label}</Chip>\n              )}\n            </div>\n            <div className={texts.type}>{description}</div>\n            <div\n              className={doClassnames([texts.type, texts['type--secondary']])}\n              style={{\n                marginTop: '2px',\n              }}\n            >\n              {subdescription}\n            </div>\n          </div>\n          {complementSlot !== undefined && (\n            <div\n              className=\"actions-item__complement\"\n              role=\"complementary\"\n            >\n              {complementSlot}\n            </div>\n          )}\n          {user !== undefined && (\n            <Avatar\n              avatar={user.avatar}\n              fullName={user.name}\n            />\n          )}\n        </div>\n        {actionsSlot !== undefined && (\n          <div\n            className=\"actions-item__actions\"\n            role=\"group\"\n          >\n            {actionsSlot}\n          </div>\n        )}\n      </li>\n    )\n  }\n}\n"],"names":["ActionsItem","React","id","src","name","indicator","description","subdescription","complementSlot","user","actionsSlot","isInteractive","action","jsxs","doClassnames","e","jsx","Thumbnail","texts","Chip","Avatar"],"mappings":";;;;;;;AAmEA,MAAqBA,UAAoBC,EAAM,UAA4B;AAAA,EACzE,OAAO,eAA0C;AAAA,IAC/C,eAAe;AAAA,EAAA;AAAA,EAGjB,SAAS;AACP,UAAM;AAAA,MACJ,IAAAC;AAAA,MACA,KAAAC;AAAA,MACA,MAAAC;AAAA,MACA,WAAAC;AAAA,MACA,aAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,MAAAC;AAAA,MACA,aAAAC;AAAA,MACA,eAAAC;AAAA,MACA,QAAAC;AAAA,IAAA,IACE,KAAK;AACT,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAa;AAAA,UACtB;AAAA,UACAH,KAAiB;AAAA,QAAA,CAClB;AAAA,QACD,WAAST;AAAA,QACT,cAAYE;AAAA,QACZ,UAAUO,IAAgB,IAAI;AAAA,QAC9B,aAAaA,IAAgBC,IAAS;AAAA,QACtC,WAAW,CAACG,MAAM;AAChB,WAAKA,EAAE,QAAQ,OAAOA,EAAE,QAAQ,YAAYJ,SAAwBI,CAAC,GACjEA,EAAE,QAAQ,YAAYJ,KACvBI,EAAE,OAAuB,KAAA;AAAA,QAC9B;AAAA,QAEC,UAAA;AAAA,UAAAZ,MAAQ,UACP,gBAAAa;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cAEL,UAAA,gBAAAA,EAACC,KAAU,KAAAd,EAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAGzB,gBAAAU;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cAEL,UAAA;AAAA,gBAAA,gBAAAA,EAAC,OAAA,EACC,UAAA;AAAA,kBAAA,gBAAAA;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAWC,EAAa,CAACI,EAAM,MAAMA,EAAM,aAAa,CAAC,CAAC;AAAA,sBAC1D,MAAK;AAAA,sBACL,cAAY;AAAA,sBAEX,UAAA;AAAA,wBAAAd;AAAA,wBACAC,MAAc,UACb,gBAAAW,EAACG,GAAA,EAAK,OAAOd,EAAU,QAAS,YAAU,MAAA,CAAM;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAGpD,gBAAAW,EAAC,OAAA,EAAI,WAAWE,EAAM,MAAO,UAAAZ,GAAY;AAAA,kBACzC,gBAAAU;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAWF,EAAa,CAACI,EAAM,MAAMA,EAAM,iBAAiB,CAAC,CAAC;AAAA,sBAC9D,OAAO;AAAA,wBACL,WAAW;AAAA,sBAAA;AAAA,sBAGZ,UAAAX;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACH,GACF;AAAA,gBACCC,MAAmB,UAClB,gBAAAQ;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,MAAK;AAAA,oBAEJ,UAAAR;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGJC,MAAS,UACR,gBAAAO;AAAA,kBAACI;AAAA,kBAAA;AAAA,oBACC,QAAQX,EAAK;AAAA,oBACb,UAAUA,EAAK;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACjB;AAAA,YAAA;AAAA,UAAA;AAAA,UAGHC,MAAgB,UACf,gBAAAM;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cAEJ,UAAAN;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;"}

package/dist/components/lists/actions-list/ActionsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionsList.d.ts","sourceRoot":"","sources":["../../../../src/components/lists/actions-list/ActionsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAKhD,OAAO,qBAAqB,CAAA;AAE5B,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,cAAc,CAAC,CAAA;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE;QACR,wBAAwB;QACxB,KAAK,EAAE,MAAM,CAAA;QACb,mBAAmB;QACnB,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;QAC9B,uBAAuB;QACvB,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;KACvB,CAAA;IACD;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAC3C;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;CAC/C;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,MAAM,CAAA;IACnB,gBAAgB,EAAE,MAAM,CAAA;IACxB,gBAAgB,EAAE,MAAM,CAAA;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAS,CACtD,gBAAgB,EAChB,iBAAiB,CAClB;IACC,OAAO,CAAC,cAAc,CAAe;IACrC,OAAO,CAAC,mBAAmB,CAAiC;IAE5D,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAI7C;gBAEW,KAAK,EAAE,gBAAgB;IAcnC,kBAAkB,CAChB,SAAS,EAAE,QAAQ,CAAC,gBAAgB,CAAC,EACrC,SAAS,EAAE,QAAQ,CAAC,iBAAiB,CAAC;IA8BxC,kBAAkB,aAYjB;IAED,qBAAqB,aAYpB;IAED,QAAQ,MAAO,aAAa,CAAC,gBAAgB,CAAC,UAU7C;IAED,cAAc,cAAe,IAAI,GAAG,MAAM,UAiBzC;IAED,aAAa,aAKZ;IAGD,OAAO,YAAa,MAAM,cAAc,CAAC,GAAG,SAAS,6CAgDpD;IAED,SAAS,WAAY,cAAc,SAAS,MAAM,6CAmBjD;IAED,aAAa,UAAW,MAAM,6CAS7B;IAED,UAAU,WAAY,cAAc,SAAS,MAAM,6CA6DlD;IAED,SAAS,WAAY,cAAc,SAAS,MAAM,6CAqDjD;IAED,aAAa,WAAY,cAAc,SAAS,MAAM,6CA8DrD;IAED,MAAM;CA8FP"}
+{"version":3,"file":"ActionsList.d.ts","sourceRoot":"","sources":["../../../../src/components/lists/actions-list/ActionsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAIhD,OAAO,qBAAqB,CAAA;AAE5B,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,cAAc,CAAC,CAAA;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE;QACR,wBAAwB;QACxB,KAAK,EAAE,MAAM,CAAA;QACb,mBAAmB;QACnB,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;QAC9B,uBAAuB;QACvB,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;KACvB,CAAA;IACD;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAC3C;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;CAC/C;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,MAAM,CAAA;IACnB,gBAAgB,EAAE,MAAM,CAAA;IACxB,gBAAgB,EAAE,MAAM,CAAA;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAS,CACtD,gBAAgB,EAChB,iBAAiB,CAClB;IACC,OAAO,CAAC,cAAc,CAAe;IACrC,OAAO,CAAC,mBAAmB,CAAiC;IAE5D,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAI7C;gBAEW,KAAK,EAAE,gBAAgB;IAcnC,kBAAkB,CAChB,SAAS,EAAE,QAAQ,CAAC,gBAAgB,CAAC,EACrC,SAAS,EAAE,QAAQ,CAAC,iBAAiB,CAAC;IA8BxC,kBAAkB,aAYjB;IAED,qBAAqB,aAYpB;IAED,QAAQ,MAAO,aAAa,CAAC,gBAAgB,CAAC,UAU7C;IAED,cAAc,cAAe,IAAI,GAAG,MAAM,UAiBzC;IAED,aAAa,aAKZ;IAGD,OAAO,YAAa,MAAM,cAAc,CAAC,GAAG,SAAS,6CAgDpD;IAED,SAAS,WAAY,cAAc,SAAS,MAAM,6CAmBjD;IAED,aAAa,UAAW,MAAM,6CAS7B;IAED,UAAU,WAAY,cAAc,SAAS,MAAM,6CA6DlD;IAED,SAAS,WAAY,cAAc,SAAS,MAAM,6CAqDjD;IAED,aAAa,WAAY,cAAc,SAAS,MAAM,6CA8DrD;IAED,MAAM;CA8FP"}

package/dist/components/lists/actions-list/ActionsList.js

@@ -1,10 +1,10 @@
 import '../../../assets/ActionsList.css';
 import { jsx as n, jsxs as p } from "react/jsx-runtime";
 import b from "react";
+import { t as u } from "../../../do-classnames-DSDFCvzy.js";
 import _ from "../../../styles/texts/texts.module.js";
 import k from "../../tags/chip/Chip.js";
 import { Icon as v } from "../../assets/icon/Icon.js";
-import { t as u } from "../../../do-classnames-DSDFCvzy.js";
 class I extends b.Component {
   scrollInterval;
   subMenuContainerRef;

package/dist/components/lists/actions-list/ActionsList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionsList.js","sources":["../../../../src/components/lists/actions-list/ActionsList.tsx"],"sourcesContent":["import React from 'react'\nimport { DropdownOption } from '@tps/list.types'\nimport texts from '@styles/texts/texts.module.scss'\nimport Chip from '@components/tags/chip/Chip'\nimport Icon from '@components/assets/icon/Icon.tsx'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\nimport './actions-list.scss'\n\nexport interface ActionsListProps {\n  /**\n   * List of options to display\n   */\n  options: Array<DropdownOption>\n  /**\n   * ID of the currently selected option\n   */\n  selected?: string\n  /**\n   * Direction for submenu expansion\n   * @default 'RIGHT'\n   */\n  direction?: 'LEFT' | 'RIGHT'\n  /**\n   * Whether the list should be scrollable\n   * @default false\n   */\n  shouldScroll?: boolean\n  /**\n   * ID of the container element\n   */\n  containerId?: string\n  /**\n   * Preview tooltip configuration\n   */\n  preview?: {\n    /** Preview image URL */\n    image: string\n    /** Preview text */\n    text: string | React.ReactNode\n    /** Preview position */\n    pin?: 'TOP' | 'BOTTOM'\n  }\n  /**\n   * Callback when the list is cancelled\n   * @default () => null\n   */\n  onCancellation?: () => void\n  /**\n   * Ref to the menu element\n   */\n  menuRef?: React.RefObject<HTMLUListElement>\n  /**\n   * Ref to the submenu element\n   */\n  subMenuRef?: React.RefObject<HTMLUListElement>\n}\n\nexport interface ActionsListStates {\n  openedGroup: string\n  listScrollOffset: number\n  listScrollAmount: number\n  listClientHeight?: number\n  shift: number\n  isVisible: boolean\n}\n\nexport default class ActionsList extends React.Component<\n  ActionsListProps,\n  ActionsListStates\n> {\n  private scrollInterval: number | null\n  private subMenuContainerRef: React.RefObject<HTMLDivElement>\n\n  static defaultProps: Partial<ActionsListProps> = {\n    direction: 'RIGHT',\n    shouldScroll: false,\n    onCancellation: () => null,\n  }\n\n  constructor(props: ActionsListProps) {\n    super(props)\n    this.state = {\n      openedGroup: 'EMPTY',\n      listScrollOffset: 0,\n      listScrollAmount: 1,\n      listClientHeight: 1,\n      shift: 0,\n      isVisible: true,\n    }\n    this.scrollInterval = null\n    this.subMenuContainerRef = React.createRef<HTMLDivElement>()\n  }\n\n  componentDidUpdate(\n    prevProps: Readonly<ActionsListProps>,\n    prevState: Readonly<ActionsListStates>\n  ) {\n    const { shouldScroll } = this.props\n    const { openedGroup } = this.state\n    const list = document.getElementsByClassName(\n      'select-menu__menu'\n    )[0] as HTMLElement\n\n    if (prevProps.shouldScroll !== shouldScroll)\n      this.setState({\n        listScrollOffset: list.scrollTop,\n        listScrollAmount: list.scrollHeight - list.clientHeight,\n        listClientHeight: list.clientHeight,\n      })\n\n    if (prevState.openedGroup !== openedGroup) {\n      const subMenuElement = this.subMenuContainerRef.current\n      if (subMenuElement) {\n        const rect = subMenuElement.getBoundingClientRect()\n        if (rect.x < 0) this.setState({ shift: -rect.x + 8 })\n        if (rect.x + rect.width > window.innerWidth)\n          this.setState({\n            shift: window.innerWidth - rect.x - rect.width - 8,\n          })\n        this.setState({ isVisible: true })\n      }\n    }\n  }\n\n  // Direct Actions\n  focusFirstMenuItem = () => {\n    const { menuRef } = this.props\n\n    setTimeout(() => {\n      const menuElement = menuRef?.current\n      if (menuElement) {\n        const firstItem = menuElement.querySelector(\n          'li[tabindex=\"0\"]:not([data-is-blocked=\"true\"])'\n        ) as HTMLElement\n        if (firstItem) firstItem.focus()\n      }\n    }, 0)\n  }\n\n  focusFirstSubMenuItem = () => {\n    const { subMenuRef } = this.props\n\n    setTimeout(() => {\n      const subMenuElement = subMenuRef?.current\n      if (subMenuElement) {\n        const firstItem = subMenuElement.querySelector(\n          'li[tabindex=\"0\"]:not([data-is-blocked=\"true\"])'\n        ) as HTMLElement\n        if (firstItem) firstItem.focus()\n      }\n    }, 0)\n  }\n\n  onScroll = (e: React.UIEvent<HTMLUListElement>) => {\n    const target = e.target as HTMLElement\n    this.setState({\n      listScrollOffset: target.scrollTop,\n      listScrollAmount: target.scrollHeight - target.clientHeight,\n    })\n\n    if (target.scrollTop === 0) this.stopScrolling()\n    if (target.scrollTop === target.scrollHeight - target.clientHeight)\n      this.stopScrolling()\n  }\n\n  startScrolling = (direction: 'UP' | 'DOWN') => {\n    const list = document.getElementsByClassName('select-menu__menu')[0]\n\n    const scroll = () => {\n      if (list) {\n        if (direction === 'UP' && list.scrollTop > 0) list.scrollTop -= 4\n        else if (\n          direction === 'DOWN' &&\n          list.scrollTop < list.scrollHeight - list.clientHeight\n        )\n          list.scrollTop += 4\n\n        this.scrollInterval = requestAnimationFrame(scroll)\n      }\n    }\n\n    this.scrollInterval = requestAnimationFrame(scroll)\n  }\n\n  stopScrolling = () => {\n    if (this.scrollInterval) {\n      cancelAnimationFrame(this.scrollInterval)\n      this.scrollInterval = null\n    }\n  }\n\n  // Template\n  SubMenu = (options: Array<DropdownOption> | undefined) => {\n    const { subMenuRef } = this.props\n    const { shift, isVisible } = this.state\n\n    return (\n      <div\n        className=\"select-menu__submenu\"\n        role=\"menu\"\n        style={{\n          visibility: isVisible ? 'visible' : 'hidden',\n        }}\n        aria-hidden={!isVisible}\n        ref={this.subMenuContainerRef}\n      >\n        <ul\n          className=\"select-menu__menu select-menu__menu--active\"\n          ref={subMenuRef}\n          role=\"menu\"\n          style={{\n            transform: `translateX(${shift}px)`,\n          }}\n        >\n          {options?.map((option, index) => {\n            const isActive =\n                option.isActive !== undefined ? option.isActive : true,\n              isBlocked =\n                option.isBlocked !== undefined ? option.isBlocked : false,\n              isNew = option.isNew !== undefined ? option.isNew : false,\n              children = option.children !== undefined ? option.children : []\n\n            const activeChildren = children.filter(\n              (child) => child.isActive !== false\n            )\n\n            if (isActive && activeChildren.length > 0)\n              return this.MenuGroup(\n                { ...option, isActive, isBlocked, isNew, children },\n                index\n              )\n            else if (isActive && activeChildren.length === 0)\n              return this.MenuSubOption(\n                { ...option, isActive, isBlocked, isNew, children },\n                index\n              )\n          })}\n        </ul>\n      </div>\n    )\n  }\n\n  MenuTitle = (option: DropdownOption, index: number) => {\n    return (\n      <li\n        key={`menu-option-${index}`}\n        data-role={'TITLE'}\n        className={doClassnames([\n          'select-menu__item',\n          'select-menu__item--disabled',\n        ])}\n        aria-disabled=\"true\"\n      >\n        <span\n          className={doClassnames([texts.type, 'select-menu__item__label'])}\n          aria-hidden=\"true\"\n        >\n          {option.label}\n        </span>\n      </li>\n    )\n  }\n\n  MenuSeparator = (index: number) => {\n    return (\n      <li\n        key={`menu-separator-${index}`}\n        data-role={'SEPARATOR'}\n      >\n        <hr />\n      </li>\n    )\n  }\n\n  MenuOption = (option: DropdownOption, index: number) => {\n    const { selected, preview, onCancellation } = this.props\n\n    return (\n      <li\n        key={`menu-option-${index}`}\n        className={doClassnames([\n          'select-menu__item',\n          selected?.split(', ').filter((value) => value === option.value)\n            .length === 1 && 'select-menu__item--selected',\n          option.isBlocked && 'select-menu__item--blocked',\n        ])}\n        data-value={option.value}\n        data-is-blocked={option.isBlocked}\n        data-feature={option.feature}\n        data-role={'OPTION'}\n        tabIndex={option.isBlocked ? -1 : 0}\n        aria-current={\n          selected?.split(', ').filter((value) => value === option.value)\n            .length === 1\n            ? 'true'\n            : undefined\n        }\n        aria-disabled={option.isBlocked}\n        onKeyDown={(e) => {\n          e.stopPropagation()\n          if ((e.key === ' ' || e.key === 'Enter') && !option.isBlocked) {\n            option.action && option.action(e)\n            onCancellation?.()\n          }\n          if (e.key === 'Escape') onCancellation?.()\n\n          return null\n        }}\n        onMouseDown={(e) => {\n          !option.isBlocked ? option.action?.(e) : undefined\n          onCancellation?.()\n        }}\n        onFocus={() => null}\n        onBlur={() => null}\n      >\n        {selected?.split(', ').filter((value) => value === option.value)\n          .length === 1 && (\n          <span className=\"select-menu__item__tick\">\n            <Icon\n              type=\"PICTO\"\n              iconName=\"check\"\n            />\n          </span>\n        )}\n\n        <span\n          className={doClassnames([texts.type, 'select-menu__item__label'])}\n        >\n          {option.label}\n        </span>\n        {(option.isBlocked || option.isNew) && (\n          <Chip preview={preview}>{option.isNew ? 'New' : 'Pro'}</Chip>\n        )}\n      </li>\n    )\n  }\n\n  MenuGroup = (option: DropdownOption, index: number) => {\n    const { preview, onCancellation } = this.props\n    const { openedGroup } = this.state\n\n    return (\n      <li\n        key={`menu-group-${index}`}\n        className={doClassnames([\n          'select-menu__item',\n          option.isBlocked && ' select-menu__item--blocked',\n        ])}\n        style={{\n          zIndex: openedGroup === option.value ? 2 : 'auto',\n        }}\n        data-is-blocked={option.isBlocked}\n        data-role={'GROUP'}\n        tabIndex={option.isBlocked ? -1 : 0}\n        aria-disabled={option.isBlocked}\n        aria-haspopup=\"true\"\n        onKeyDown={(e) => {\n          e.stopPropagation()\n          if ((e.key === ' ' || e.key === 'Enter') && !option.isBlocked)\n            return this.setState({ openedGroup: option.value ?? 'EMPTY' }, () =>\n              this.focusFirstSubMenuItem()\n            )\n          if (e.key === 'Escape') onCancellation?.()\n\n          return null\n        }}\n        onMouseEnter={() =>\n          this.setState({ openedGroup: option.value ?? 'EMPTY' })\n        }\n        onMouseLeave={() => this.setState({ openedGroup: 'EMPTY' })}\n        onFocus={() => null}\n        onBlur={() => null}\n      >\n        <span\n          className={doClassnames([texts.type, 'select-menu__item__label'])}\n        >\n          {option.label}\n        </span>\n        {(option.isBlocked || option.isNew) && (\n          <Chip preview={preview}>{option.isNew ? 'New' : 'Pro'}</Chip>\n        )}\n        <span className=\"select-menu__item__caret\">\n          <Icon\n            type=\"PICTO\"\n            iconName=\"caret-right\"\n          />\n        </span>\n        {openedGroup === option.value && this.SubMenu(option.children)}\n      </li>\n    )\n  }\n\n  MenuSubOption = (option: DropdownOption, index: number) => {\n    const { selected, preview, onCancellation } = this.props\n\n    return (\n      <li\n        key={`menu-suboption-${index}`}\n        className={doClassnames([\n          'select-menu__item',\n          selected?.split(', ').filter((value) => value === option.value)\n            .length === 1 && 'select-menu__item--selected',\n          option.isBlocked && 'select-menu__item--blocked',\n        ])}\n        data-value={option.value}\n        data-is-blocked={option.isBlocked}\n        data-feature={option.feature}\n        data-role={'OPTION'}\n        tabIndex={option.isBlocked ? -1 : 0}\n        aria-current={\n          selected?.split(', ').filter((value) => value === option.value)\n            .length === 1\n            ? 'true'\n            : undefined\n        }\n        aria-disabled={option.isBlocked}\n        onKeyDown={(e) => {\n          e.stopPropagation()\n          if ((e.key === ' ' || e.key === 'Enter') && !option.isBlocked) {\n            option.action && option.action(e)\n            onCancellation?.()\n          }\n          if (e.key === 'Escape')\n            this.setState({ openedGroup: 'EMPTY' }, () =>\n              this.focusFirstMenuItem()\n            )\n\n          return null\n        }}\n        onMouseDown={!option.isBlocked ? option.action : undefined}\n      >\n        {selected?.split(', ').filter((value) => value === option.value)\n          .length === 1 && (\n          <span className=\"select-menu__item__tick\">\n            <Icon\n              type=\"PICTO\"\n              iconName=\"check\"\n            />\n          </span>\n        )}\n        <span\n          className={doClassnames([\n            texts['type--small'],\n            texts.type,\n            'select-menu__item__label',\n          ])}\n        >\n          {option.label}\n        </span>\n        {(option.isBlocked || option.isNew) && (\n          <Chip preview={preview}>{option.isNew ? 'New' : 'Pro'}</Chip>\n        )}\n      </li>\n    )\n  }\n\n  render() {\n    const { options, direction, shouldScroll, menuRef } = this.props\n    const { listScrollOffset, listScrollAmount } = this.state\n\n    return (\n      <div\n        className=\"select-menu\"\n        style={{\n          height: shouldScroll ? '100%' : 'auto',\n        }}\n      >\n        {shouldScroll && listScrollOffset !== 0 && listScrollAmount !== 0 && (\n          <div\n            className=\"select-menu__spot select-menu__spot--top\"\n            onMouseEnter={() => this.startScrolling('UP')}\n            onMouseLeave={this.stopScrolling}\n          >\n            <Icon\n              type=\"PICTO\"\n              iconName=\"chevron-up\"\n            />\n          </div>\n        )}\n        <ul\n          className={doClassnames([\n            'select-menu__menu',\n            'select-menu__menu--active',\n            direction === 'RIGHT'\n              ? 'select-menu__menu--right'\n              : 'select-menu__menu--left',\n            shouldScroll && 'select-menu__menu--scrolling',\n          ])}\n          onScroll={this.onScroll}\n          ref={menuRef}\n        >\n          {options?.map((option, index) => {\n            const isActive =\n                option.isActive !== undefined ? option.isActive : true,\n              isBlocked =\n                option.isBlocked !== undefined ? option.isBlocked : false,\n              isNew = option.isNew !== undefined ? option.isNew : false,\n              children = option.children !== undefined ? option.children : []\n\n            if (isActive && option.type === 'SEPARATOR')\n              return this.MenuSeparator(index)\n            if (isActive && option.type === 'TITLE')\n              return this.MenuTitle(option, index)\n            if (isActive && option.type === 'OPTION')\n              return this.MenuOption(\n                { ...option, isActive, isBlocked, isNew, children },\n                index\n              )\n            if (isActive && option.type === 'GROUP' && children) {\n              const activeChildren = children.filter(\n                (child) => child.isActive !== false\n              )\n\n              if (activeChildren.length > 1)\n                return this.MenuGroup(\n                  { ...option, isActive, isBlocked, isNew, children },\n                  index\n                )\n              else if (activeChildren.length === 1)\n                return this.MenuOption(\n                  {\n                    ...activeChildren[0],\n                    isActive: activeChildren[0].isActive,\n                    isBlocked: activeChildren[0].isBlocked,\n                    isNew: activeChildren[0].isNew,\n                  },\n                  index\n                )\n              else return null\n            }\n            return null\n          })}\n        </ul>\n        {shouldScroll &&\n          listScrollAmount !== listScrollOffset &&\n          listScrollAmount !== 0 && (\n            <div\n              className=\"select-menu__spot select-menu__spot--bottom\"\n              onMouseEnter={() => this.startScrolling('DOWN')}\n              onMouseLeave={this.stopScrolling}\n            >\n              <Icon\n                type=\"PICTO\"\n                iconName=\"chevron-down\"\n              />\n            </div>\n          )}\n      </div>\n    )\n  }\n}\n"],"names":["ActionsList","React","props","prevProps","prevState","shouldScroll","openedGroup","list","subMenuElement","rect","menuRef","menuElement","firstItem","subMenuRef","target","direction","scroll","options","shift","isVisible","jsx","option","index","isActive","isBlocked","isNew","children","activeChildren","child","doClassnames","texts","selected","preview","onCancellation","jsxs","value","e","Icon","Chip","listScrollOffset","listScrollAmount"],"mappings":";;;;;;AAkEA,MAAqBA,UAAoBC,EAAM,UAG7C;AAAA,EACQ;AAAA,EACA;AAAA,EAER,OAAO,eAA0C;AAAA,IAC/C,WAAW;AAAA,IACX,cAAc;AAAA,IACd,gBAAgB,MAAM;AAAA,EAAA;AAAA,EAGxB,YAAYC,GAAyB;AACnC,UAAMA,CAAK,GACX,KAAK,QAAQ;AAAA,MACX,aAAa;AAAA,MACb,kBAAkB;AAAA,MAClB,kBAAkB;AAAA,MAClB,kBAAkB;AAAA,MAClB,OAAO;AAAA,MACP,WAAW;AAAA,IAAA,GAEb,KAAK,iBAAiB,MACtB,KAAK,sBAAsBD,EAAM,UAAA;AAAA,EACnC;AAAA,EAEA,mBACEE,GACAC,GACA;AACA,UAAM,EAAE,cAAAC,MAAiB,KAAK,OACxB,EAAE,aAAAC,MAAgB,KAAK,OACvBC,IAAO,SAAS;AAAA,MACpB;AAAA,IAAA,EACA,CAAC;AASH,QAPIJ,EAAU,iBAAiBE,KAC7B,KAAK,SAAS;AAAA,MACZ,kBAAkBE,EAAK;AAAA,MACvB,kBAAkBA,EAAK,eAAeA,EAAK;AAAA,MAC3C,kBAAkBA,EAAK;AAAA,IAAA,CACxB,GAECH,EAAU,gBAAgBE,GAAa;AACzC,YAAME,IAAiB,KAAK,oBAAoB;AAChD,UAAIA,GAAgB;AAClB,cAAMC,IAAOD,EAAe,sBAAA;AAC5B,QAAIC,EAAK,IAAI,KAAG,KAAK,SAAS,EAAE,OAAO,CAACA,EAAK,IAAI,EAAA,CAAG,GAChDA,EAAK,IAAIA,EAAK,QAAQ,OAAO,cAC/B,KAAK,SAAS;AAAA,UACZ,OAAO,OAAO,aAAaA,EAAK,IAAIA,EAAK,QAAQ;AAAA,QAAA,CAClD,GACH,KAAK,SAAS,EAAE,WAAW,GAAA,CAAM;AAAA,MACnC;AAAA,IACF;AAAA,EACF;AAAA;AAAA,EAGA,qBAAqB,MAAM;AACzB,UAAM,EAAE,SAAAC,MAAY,KAAK;AAEzB,eAAW,MAAM;AACf,YAAMC,IAAcD,GAAS;AAC7B,UAAIC,GAAa;AACf,cAAMC,IAAYD,EAAY;AAAA,UAC5B;AAAA,QAAA;AAEF,QAAIC,OAAqB,MAAA;AAAA,MAC3B;AAAA,IACF,GAAG,CAAC;AAAA,EACN;AAAA,EAEA,wBAAwB,MAAM;AAC5B,UAAM,EAAE,YAAAC,MAAe,KAAK;AAE5B,eAAW,MAAM;AACf,YAAML,IAAiBK,GAAY;AACnC,UAAIL,GAAgB;AAClB,cAAMI,IAAYJ,EAAe;AAAA,UAC/B;AAAA,QAAA;AAEF,QAAII,OAAqB,MAAA;AAAA,MAC3B;AAAA,IACF,GAAG,CAAC;AAAA,EACN;AAAA,EAEA,WAAW,CAAC,MAAuC;AACjD,UAAME,IAAS,EAAE;AACjB,SAAK,SAAS;AAAA,MACZ,kBAAkBA,EAAO;AAAA,MACzB,kBAAkBA,EAAO,eAAeA,EAAO;AAAA,IAAA,CAChD,GAEGA,EAAO,cAAc,KAAG,KAAK,cAAA,GAC7BA,EAAO,cAAcA,EAAO,eAAeA,EAAO,gBACpD,KAAK,cAAA;AAAA,EACT;AAAA,EAEA,iBAAiB,CAACC,MAA6B;AAC7C,UAAMR,IAAO,SAAS,uBAAuB,mBAAmB,EAAE,CAAC,GAE7DS,IAAS,MAAM;AACnB,MAAIT,MACEQ,MAAc,QAAQR,EAAK,YAAY,MAAQ,aAAa,IAE9DQ,MAAc,UACdR,EAAK,YAAYA,EAAK,eAAeA,EAAK,iBAE1CA,EAAK,aAAa,IAEpB,KAAK,iBAAiB,sBAAsBS,CAAM;AAAA,IAEtD;AAEA,SAAK,iBAAiB,sBAAsBA,CAAM;AAAA,EACpD;AAAA,EAEA,gBAAgB,MAAM;AACpB,IAAI,KAAK,mBACP,qBAAqB,KAAK,cAAc,GACxC,KAAK,iBAAiB;AAAA,EAE1B;AAAA;AAAA,EAGA,UAAU,CAACC,MAA+C;AACxD,UAAM,EAAE,YAAAJ,MAAe,KAAK,OACtB,EAAE,OAAAK,GAAO,WAAAC,EAAA,IAAc,KAAK;AAElC,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QACL,OAAO;AAAA,UACL,YAAYD,IAAY,YAAY;AAAA,QAAA;AAAA,QAEtC,eAAa,CAACA;AAAA,QACd,KAAK,KAAK;AAAA,QAEV,UAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,KAAKP;AAAA,YACL,MAAK;AAAA,YACL,OAAO;AAAA,cACL,WAAW,cAAcK,CAAK;AAAA,YAAA;AAAA,YAG/B,UAAAD,GAAS,IAAI,CAACI,GAAQC,MAAU;AAC/B,oBAAMC,IACFF,EAAO,aAAa,SAAYA,EAAO,WAAW,IACpDG,IACEH,EAAO,cAAc,SAAYA,EAAO,YAAY,IACtDI,IAAQJ,EAAO,UAAU,SAAYA,EAAO,QAAQ,IACpDK,IAAWL,EAAO,aAAa,SAAYA,EAAO,WAAW,CAAA,GAEzDM,IAAiBD,EAAS;AAAA,gBAC9B,CAACE,MAAUA,EAAM,aAAa;AAAA,cAAA;AAGhC,kBAAIL,KAAYI,EAAe,SAAS;AACtC,uBAAO,KAAK;AAAA,kBACV,EAAE,GAAGN,GAAQ,UAAAE,GAAU,WAAAC,GAAW,OAAAC,GAAO,UAAAC,EAAA;AAAA,kBACzCJ;AAAA,gBAAA;AACF,kBACOC,KAAYI,EAAe,WAAW;AAC7C,uBAAO,KAAK;AAAA,kBACV,EAAE,GAAGN,GAAQ,UAAAE,GAAU,WAAAC,GAAW,OAAAC,GAAO,UAAAC,EAAA;AAAA,kBACzCJ;AAAA,gBAAA;AAAA,YAEN,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AAAA,EAEA,YAAY,CAACD,GAAwBC,MAEjC,gBAAAF;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,aAAW;AAAA,MACX,WAAWS,EAAa;AAAA,QACtB;AAAA,QACA;AAAA,MAAA,CACD;AAAA,MACD,iBAAc;AAAA,MAEd,UAAA,gBAAAT;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWS,EAAa,CAACC,EAAM,MAAM,0BAA0B,CAAC;AAAA,UAChE,eAAY;AAAA,UAEX,UAAAT,EAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IACV;AAAA,IAbK,eAAeC,CAAK;AAAA,EAAA;AAAA,EAkB/B,gBAAgB,CAACA,MAEb,gBAAAF;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,aAAW;AAAA,MAEX,4BAAC,MAAA,CAAA,CAAG;AAAA,IAAA;AAAA,IAHC,kBAAkBE,CAAK;AAAA,EAAA;AAAA,EAQlC,aAAa,CAACD,GAAwBC,MAAkB;AACtD,UAAM,EAAE,UAAAS,GAAU,SAAAC,GAAS,gBAAAC,EAAA,IAAmB,KAAK;AAEnD,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAWL,EAAa;AAAA,UACtB;AAAA,UACAE,GAAU,MAAM,IAAI,EAAE,OAAO,CAACI,MAAUA,MAAUd,EAAO,KAAK,EAC3D,WAAW,KAAK;AAAA,UACnBA,EAAO,aAAa;AAAA,QAAA,CACrB;AAAA,QACD,cAAYA,EAAO;AAAA,QACnB,mBAAiBA,EAAO;AAAA,QACxB,gBAAcA,EAAO;AAAA,QACrB,aAAW;AAAA,QACX,UAAUA,EAAO,YAAY,KAAK;AAAA,QAClC,gBACEU,GAAU,MAAM,IAAI,EAAE,OAAO,CAACI,MAAUA,MAAUd,EAAO,KAAK,EAC3D,WAAW,IACV,SACA;AAAA,QAEN,iBAAeA,EAAO;AAAA,QACtB,WAAW,CAACe,OACVA,EAAE,gBAAA,IACGA,EAAE,QAAQ,OAAOA,EAAE,QAAQ,YAAY,CAACf,EAAO,cAClDA,EAAO,UAAUA,EAAO,OAAOe,CAAC,GAChCH,IAAA,IAEEG,EAAE,QAAQ,YAAUH,IAAA,GAEjB;AAAA,QAET,aAAa,CAACG,MAAM;AAClB,UAACf,EAAO,aAAYA,EAAO,SAASe,CAAC,GACrCH,IAAA;AAAA,QACF;AAAA,QACA,SAAS,MAAM;AAAA,QACf,QAAQ,MAAM;AAAA,QAEb,UAAA;AAAA,UAAAF,GAAU,MAAM,IAAI,EAAE,OAAO,CAACI,MAAUA,MAAUd,EAAO,KAAK,EAC5D,WAAW,KACZ,gBAAAD,EAAC,QAAA,EAAK,WAAU,2BACd,UAAA,gBAAAA;AAAA,YAACiB;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,UAAS;AAAA,YAAA;AAAA,UAAA,GAEb;AAAA,UAGF,gBAAAjB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWS,EAAa,CAACC,EAAM,MAAM,0BAA0B,CAAC;AAAA,cAE/D,UAAAT,EAAO;AAAA,YAAA;AAAA,UAAA;AAAA,WAERA,EAAO,aAAaA,EAAO,UAC3B,gBAAAD,EAACkB,KAAK,SAAAN,GAAmB,UAAAX,EAAO,QAAQ,QAAQ,MAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MApDnD,eAAeC,CAAK;AAAA,IAAA;AAAA,EAwD/B;AAAA,EAEA,YAAY,CAACD,GAAwBC,MAAkB;AACrD,UAAM,EAAE,SAAAU,GAAS,gBAAAC,EAAA,IAAmB,KAAK,OACnC,EAAE,aAAA3B,MAAgB,KAAK;AAE7B,WACE,gBAAA4B;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAWL,EAAa;AAAA,UACtB;AAAA,UACAR,EAAO,aAAa;AAAA,QAAA,CACrB;AAAA,QACD,OAAO;AAAA,UACL,QAAQf,MAAgBe,EAAO,QAAQ,IAAI;AAAA,QAAA;AAAA,QAE7C,mBAAiBA,EAAO;AAAA,QACxB,aAAW;AAAA,QACX,UAAUA,EAAO,YAAY,KAAK;AAAA,QAClC,iBAAeA,EAAO;AAAA,QACtB,iBAAc;AAAA,QACd,WAAW,CAACe,OACVA,EAAE,gBAAA,IACGA,EAAE,QAAQ,OAAOA,EAAE,QAAQ,YAAY,CAACf,EAAO,YAC3C,KAAK;AAAA,UAAS,EAAE,aAAaA,EAAO,SAAS,QAAA;AAAA,UAAW,MAC7D,KAAK,sBAAA;AAAA,QAAsB,KAE3Be,EAAE,QAAQ,YAAUH,IAAA,GAEjB;AAAA,QAET,cAAc,MACZ,KAAK,SAAS,EAAE,aAAaZ,EAAO,SAAS,SAAS;AAAA,QAExD,cAAc,MAAM,KAAK,SAAS,EAAE,aAAa,SAAS;AAAA,QAC1D,SAAS,MAAM;AAAA,QACf,QAAQ,MAAM;AAAA,QAEd,UAAA;AAAA,UAAA,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWS,EAAa,CAACC,EAAM,MAAM,0BAA0B,CAAC;AAAA,cAE/D,UAAAT,EAAO;AAAA,YAAA;AAAA,UAAA;AAAA,WAERA,EAAO,aAAaA,EAAO,UAC3B,gBAAAD,EAACkB,KAAK,SAAAN,GAAmB,UAAAX,EAAO,QAAQ,QAAQ,MAAA,CAAM;AAAA,UAExD,gBAAAD,EAAC,QAAA,EAAK,WAAU,4BACd,UAAA,gBAAAA;AAAA,YAACiB;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,UAAS;AAAA,YAAA;AAAA,UAAA,GAEb;AAAA,UACC/B,MAAgBe,EAAO,SAAS,KAAK,QAAQA,EAAO,QAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,MA5CxD,cAAcC,CAAK;AAAA,IAAA;AAAA,EA+C9B;AAAA,EAEA,gBAAgB,CAACD,GAAwBC,MAAkB;AACzD,UAAM,EAAE,UAAAS,GAAU,SAAAC,GAAS,gBAAAC,EAAA,IAAmB,KAAK;AAEnD,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAWL,EAAa;AAAA,UACtB;AAAA,UACAE,GAAU,MAAM,IAAI,EAAE,OAAO,CAACI,MAAUA,MAAUd,EAAO,KAAK,EAC3D,WAAW,KAAK;AAAA,UACnBA,EAAO,aAAa;AAAA,QAAA,CACrB;AAAA,QACD,cAAYA,EAAO;AAAA,QACnB,mBAAiBA,EAAO;AAAA,QACxB,gBAAcA,EAAO;AAAA,QACrB,aAAW;AAAA,QACX,UAAUA,EAAO,YAAY,KAAK;AAAA,QAClC,gBACEU,GAAU,MAAM,IAAI,EAAE,OAAO,CAACI,MAAUA,MAAUd,EAAO,KAAK,EAC3D,WAAW,IACV,SACA;AAAA,QAEN,iBAAeA,EAAO;AAAA,QACtB,WAAW,CAACe,OACVA,EAAE,gBAAA,IACGA,EAAE,QAAQ,OAAOA,EAAE,QAAQ,YAAY,CAACf,EAAO,cAClDA,EAAO,UAAUA,EAAO,OAAOe,CAAC,GAChCH,IAAA,IAEEG,EAAE,QAAQ,YACZ,KAAK;AAAA,UAAS,EAAE,aAAa,QAAA;AAAA,UAAW,MACtC,KAAK,mBAAA;AAAA,QAAmB,GAGrB;AAAA,QAET,aAAcf,EAAO,YAA4B,SAAhBA,EAAO;AAAA,QAEvC,UAAA;AAAA,UAAAU,GAAU,MAAM,IAAI,EAAE,OAAO,CAACI,MAAUA,MAAUd,EAAO,KAAK,EAC5D,WAAW,KACZ,gBAAAD,EAAC,QAAA,EAAK,WAAU,2BACd,UAAA,gBAAAA;AAAA,YAACiB;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,UAAS;AAAA,YAAA;AAAA,UAAA,GAEb;AAAA,UAEF,gBAAAjB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWS,EAAa;AAAA,gBACtBC,EAAM,aAAa;AAAA,gBACnBA,EAAM;AAAA,gBACN;AAAA,cAAA,CACD;AAAA,cAEA,UAAAT,EAAO;AAAA,YAAA;AAAA,UAAA;AAAA,WAERA,EAAO,aAAaA,EAAO,UAC3B,gBAAAD,EAACkB,KAAK,SAAAN,GAAmB,UAAAX,EAAO,QAAQ,QAAQ,MAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MArDnD,kBAAkBC,CAAK;AAAA,IAAA;AAAA,EAyDlC;AAAA,EAEA,SAAS;AACP,UAAM,EAAE,SAAAL,GAAS,WAAAF,GAAW,cAAAV,GAAc,SAAAK,EAAA,IAAY,KAAK,OACrD,EAAE,kBAAA6B,GAAkB,kBAAAC,EAAA,IAAqB,KAAK;AAEpD,WACE,gBAAAN;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,QAAQ7B,IAAe,SAAS;AAAA,QAAA;AAAA,QAGjC,UAAA;AAAA,UAAAA,KAAgBkC,MAAqB,KAAKC,MAAqB,KAC9D,gBAAApB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,cAAc,MAAM,KAAK,eAAe,IAAI;AAAA,cAC5C,cAAc,KAAK;AAAA,cAEnB,UAAA,gBAAAA;AAAA,gBAACiB;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,UAAS;AAAA,gBAAA;AAAA,cAAA;AAAA,YACX;AAAA,UAAA;AAAA,UAGJ,gBAAAjB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWS,EAAa;AAAA,gBACtB;AAAA,gBACA;AAAA,gBACAd,MAAc,UACV,6BACA;AAAA,gBACJV,KAAgB;AAAA,cAAA,CACjB;AAAA,cACD,UAAU,KAAK;AAAA,cACf,KAAKK;AAAA,cAEJ,UAAAO,GAAS,IAAI,CAACI,GAAQC,MAAU;AAC/B,sBAAMC,IACFF,EAAO,aAAa,SAAYA,EAAO,WAAW,IACpDG,IACEH,EAAO,cAAc,SAAYA,EAAO,YAAY,IACtDI,IAAQJ,EAAO,UAAU,SAAYA,EAAO,QAAQ,IACpDK,IAAWL,EAAO,aAAa,SAAYA,EAAO,WAAW,CAAA;AAE/D,oBAAIE,KAAYF,EAAO,SAAS;AAC9B,yBAAO,KAAK,cAAcC,CAAK;AACjC,oBAAIC,KAAYF,EAAO,SAAS;AAC9B,yBAAO,KAAK,UAAUA,GAAQC,CAAK;AACrC,oBAAIC,KAAYF,EAAO,SAAS;AAC9B,yBAAO,KAAK;AAAA,oBACV,EAAE,GAAGA,GAAQ,UAAAE,GAAU,WAAAC,GAAW,OAAAC,GAAO,UAAAC,EAAA;AAAA,oBACzCJ;AAAA,kBAAA;AAEJ,oBAAIC,KAAYF,EAAO,SAAS,WAAWK,GAAU;AACnD,wBAAMC,IAAiBD,EAAS;AAAA,oBAC9B,CAACE,MAAUA,EAAM,aAAa;AAAA,kBAAA;AAGhC,yBAAID,EAAe,SAAS,IACnB,KAAK;AAAA,oBACV,EAAE,GAAGN,GAAQ,UAAAE,GAAU,WAAAC,GAAW,OAAAC,GAAO,UAAAC,EAAA;AAAA,oBACzCJ;AAAA,kBAAA,IAEKK,EAAe,WAAW,IAC1B,KAAK;AAAA,oBACV;AAAA,sBACE,GAAGA,EAAe,CAAC;AAAA,sBACnB,UAAUA,EAAe,CAAC,EAAE;AAAA,sBAC5B,WAAWA,EAAe,CAAC,EAAE;AAAA,sBAC7B,OAAOA,EAAe,CAAC,EAAE;AAAA,oBAAA;AAAA,oBAE3BL;AAAA,kBAAA,IAEQ;AAAA,gBACd;AACA,uBAAO;AAAA,cACT,CAAC;AAAA,YAAA;AAAA,UAAA;AAAA,UAEFjB,KACCmC,MAAqBD,KACrBC,MAAqB,KACnB,gBAAApB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,cAAc,MAAM,KAAK,eAAe,MAAM;AAAA,cAC9C,cAAc,KAAK;AAAA,cAEnB,UAAA,gBAAAA;AAAA,gBAACiB;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,UAAS;AAAA,gBAAA;AAAA,cAAA;AAAA,YACX;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAIV;AACF;"}
+{"version":3,"file":"ActionsList.js","sources":["../../../../src/components/lists/actions-list/ActionsList.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames } from '@unoff/utils'\nimport { DropdownOption } from '@tps/list.types'\nimport texts from '@styles/texts/texts.module.scss'\nimport Chip from '@components/tags/chip/Chip'\nimport Icon from '@components/assets/icon/Icon.tsx'\nimport './actions-list.scss'\n\nexport interface ActionsListProps {\n  /**\n   * List of options to display\n   */\n  options: Array<DropdownOption>\n  /**\n   * ID of the currently selected option\n   */\n  selected?: string\n  /**\n   * Direction for submenu expansion\n   * @default 'RIGHT'\n   */\n  direction?: 'LEFT' | 'RIGHT'\n  /**\n   * Whether the list should be scrollable\n   * @default false\n   */\n  shouldScroll?: boolean\n  /**\n   * ID of the container element\n   */\n  containerId?: string\n  /**\n   * Preview tooltip configuration\n   */\n  preview?: {\n    /** Preview image URL */\n    image: string\n    /** Preview text */\n    text: string | React.ReactNode\n    /** Preview position */\n    pin?: 'TOP' | 'BOTTOM'\n  }\n  /**\n   * Callback when the list is cancelled\n   * @default () => null\n   */\n  onCancellation?: () => void\n  /**\n   * Ref to the menu element\n   */\n  menuRef?: React.RefObject<HTMLUListElement>\n  /**\n   * Ref to the submenu element\n   */\n  subMenuRef?: React.RefObject<HTMLUListElement>\n}\n\nexport interface ActionsListStates {\n  openedGroup: string\n  listScrollOffset: number\n  listScrollAmount: number\n  listClientHeight?: number\n  shift: number\n  isVisible: boolean\n}\n\nexport default class ActionsList extends React.Component<\n  ActionsListProps,\n  ActionsListStates\n> {\n  private scrollInterval: number | null\n  private subMenuContainerRef: React.RefObject<HTMLDivElement>\n\n  static defaultProps: Partial<ActionsListProps> = {\n    direction: 'RIGHT',\n    shouldScroll: false,\n    onCancellation: () => null,\n  }\n\n  constructor(props: ActionsListProps) {\n    super(props)\n    this.state = {\n      openedGroup: 'EMPTY',\n      listScrollOffset: 0,\n      listScrollAmount: 1,\n      listClientHeight: 1,\n      shift: 0,\n      isVisible: true,\n    }\n    this.scrollInterval = null\n    this.subMenuContainerRef = React.createRef<HTMLDivElement>()\n  }\n\n  componentDidUpdate(\n    prevProps: Readonly<ActionsListProps>,\n    prevState: Readonly<ActionsListStates>\n  ) {\n    const { shouldScroll } = this.props\n    const { openedGroup } = this.state\n    const list = document.getElementsByClassName(\n      'select-menu__menu'\n    )[0] as HTMLElement\n\n    if (prevProps.shouldScroll !== shouldScroll)\n      this.setState({\n        listScrollOffset: list.scrollTop,\n        listScrollAmount: list.scrollHeight - list.clientHeight,\n        listClientHeight: list.clientHeight,\n      })\n\n    if (prevState.openedGroup !== openedGroup) {\n      const subMenuElement = this.subMenuContainerRef.current\n      if (subMenuElement) {\n        const rect = subMenuElement.getBoundingClientRect()\n        if (rect.x < 0) this.setState({ shift: -rect.x + 8 })\n        if (rect.x + rect.width > window.innerWidth)\n          this.setState({\n            shift: window.innerWidth - rect.x - rect.width - 8,\n          })\n        this.setState({ isVisible: true })\n      }\n    }\n  }\n\n  // Direct Actions\n  focusFirstMenuItem = () => {\n    const { menuRef } = this.props\n\n    setTimeout(() => {\n      const menuElement = menuRef?.current\n      if (menuElement) {\n        const firstItem = menuElement.querySelector(\n          'li[tabindex=\"0\"]:not([data-is-blocked=\"true\"])'\n        ) as HTMLElement\n        if (firstItem) firstItem.focus()\n      }\n    }, 0)\n  }\n\n  focusFirstSubMenuItem = () => {\n    const { subMenuRef } = this.props\n\n    setTimeout(() => {\n      const subMenuElement = subMenuRef?.current\n      if (subMenuElement) {\n        const firstItem = subMenuElement.querySelector(\n          'li[tabindex=\"0\"]:not([data-is-blocked=\"true\"])'\n        ) as HTMLElement\n        if (firstItem) firstItem.focus()\n      }\n    }, 0)\n  }\n\n  onScroll = (e: React.UIEvent<HTMLUListElement>) => {\n    const target = e.target as HTMLElement\n    this.setState({\n      listScrollOffset: target.scrollTop,\n      listScrollAmount: target.scrollHeight - target.clientHeight,\n    })\n\n    if (target.scrollTop === 0) this.stopScrolling()\n    if (target.scrollTop === target.scrollHeight - target.clientHeight)\n      this.stopScrolling()\n  }\n\n  startScrolling = (direction: 'UP' | 'DOWN') => {\n    const list = document.getElementsByClassName('select-menu__menu')[0]\n\n    const scroll = () => {\n      if (list) {\n        if (direction === 'UP' && list.scrollTop > 0) list.scrollTop -= 4\n        else if (\n          direction === 'DOWN' &&\n          list.scrollTop < list.scrollHeight - list.clientHeight\n        )\n          list.scrollTop += 4\n\n        this.scrollInterval = requestAnimationFrame(scroll)\n      }\n    }\n\n    this.scrollInterval = requestAnimationFrame(scroll)\n  }\n\n  stopScrolling = () => {\n    if (this.scrollInterval) {\n      cancelAnimationFrame(this.scrollInterval)\n      this.scrollInterval = null\n    }\n  }\n\n  // Template\n  SubMenu = (options: Array<DropdownOption> | undefined) => {\n    const { subMenuRef } = this.props\n    const { shift, isVisible } = this.state\n\n    return (\n      <div\n        className=\"select-menu__submenu\"\n        role=\"menu\"\n        style={{\n          visibility: isVisible ? 'visible' : 'hidden',\n        }}\n        aria-hidden={!isVisible}\n        ref={this.subMenuContainerRef}\n      >\n        <ul\n          className=\"select-menu__menu select-menu__menu--active\"\n          ref={subMenuRef}\n          role=\"menu\"\n          style={{\n            transform: `translateX(${shift}px)`,\n          }}\n        >\n          {options?.map((option, index) => {\n            const isActive =\n                option.isActive !== undefined ? option.isActive : true,\n              isBlocked =\n                option.isBlocked !== undefined ? option.isBlocked : false,\n              isNew = option.isNew !== undefined ? option.isNew : false,\n              children = option.children !== undefined ? option.children : []\n\n            const activeChildren = children.filter(\n              (child) => child.isActive !== false\n            )\n\n            if (isActive && activeChildren.length > 0)\n              return this.MenuGroup(\n                { ...option, isActive, isBlocked, isNew, children },\n                index\n              )\n            else if (isActive && activeChildren.length === 0)\n              return this.MenuSubOption(\n                { ...option, isActive, isBlocked, isNew, children },\n                index\n              )\n          })}\n        </ul>\n      </div>\n    )\n  }\n\n  MenuTitle = (option: DropdownOption, index: number) => {\n    return (\n      <li\n        key={`menu-option-${index}`}\n        data-role={'TITLE'}\n        className={doClassnames([\n          'select-menu__item',\n          'select-menu__item--disabled',\n        ])}\n        aria-disabled=\"true\"\n      >\n        <span\n          className={doClassnames([texts.type, 'select-menu__item__label'])}\n          aria-hidden=\"true\"\n        >\n          {option.label}\n        </span>\n      </li>\n    )\n  }\n\n  MenuSeparator = (index: number) => {\n    return (\n      <li\n        key={`menu-separator-${index}`}\n        data-role={'SEPARATOR'}\n      >\n        <hr />\n      </li>\n    )\n  }\n\n  MenuOption = (option: DropdownOption, index: number) => {\n    const { selected, preview, onCancellation } = this.props\n\n    return (\n      <li\n        key={`menu-option-${index}`}\n        className={doClassnames([\n          'select-menu__item',\n          selected?.split(', ').filter((value) => value === option.value)\n            .length === 1 && 'select-menu__item--selected',\n          option.isBlocked && 'select-menu__item--blocked',\n        ])}\n        data-value={option.value}\n        data-is-blocked={option.isBlocked}\n        data-feature={option.feature}\n        data-role={'OPTION'}\n        tabIndex={option.isBlocked ? -1 : 0}\n        aria-current={\n          selected?.split(', ').filter((value) => value === option.value)\n            .length === 1\n            ? 'true'\n            : undefined\n        }\n        aria-disabled={option.isBlocked}\n        onKeyDown={(e) => {\n          e.stopPropagation()\n          if ((e.key === ' ' || e.key === 'Enter') && !option.isBlocked) {\n            option.action && option.action(e)\n            onCancellation?.()\n          }\n          if (e.key === 'Escape') onCancellation?.()\n\n          return null\n        }}\n        onMouseDown={(e) => {\n          !option.isBlocked ? option.action?.(e) : undefined\n          onCancellation?.()\n        }}\n        onFocus={() => null}\n        onBlur={() => null}\n      >\n        {selected?.split(', ').filter((value) => value === option.value)\n          .length === 1 && (\n          <span className=\"select-menu__item__tick\">\n            <Icon\n              type=\"PICTO\"\n              iconName=\"check\"\n            />\n          </span>\n        )}\n\n        <span\n          className={doClassnames([texts.type, 'select-menu__item__label'])}\n        >\n          {option.label}\n        </span>\n        {(option.isBlocked || option.isNew) && (\n          <Chip preview={preview}>{option.isNew ? 'New' : 'Pro'}</Chip>\n        )}\n      </li>\n    )\n  }\n\n  MenuGroup = (option: DropdownOption, index: number) => {\n    const { preview, onCancellation } = this.props\n    const { openedGroup } = this.state\n\n    return (\n      <li\n        key={`menu-group-${index}`}\n        className={doClassnames([\n          'select-menu__item',\n          option.isBlocked && ' select-menu__item--blocked',\n        ])}\n        style={{\n          zIndex: openedGroup === option.value ? 2 : 'auto',\n        }}\n        data-is-blocked={option.isBlocked}\n        data-role={'GROUP'}\n        tabIndex={option.isBlocked ? -1 : 0}\n        aria-disabled={option.isBlocked}\n        aria-haspopup=\"true\"\n        onKeyDown={(e) => {\n          e.stopPropagation()\n          if ((e.key === ' ' || e.key === 'Enter') && !option.isBlocked)\n            return this.setState({ openedGroup: option.value ?? 'EMPTY' }, () =>\n              this.focusFirstSubMenuItem()\n            )\n          if (e.key === 'Escape') onCancellation?.()\n\n          return null\n        }}\n        onMouseEnter={() =>\n          this.setState({ openedGroup: option.value ?? 'EMPTY' })\n        }\n        onMouseLeave={() => this.setState({ openedGroup: 'EMPTY' })}\n        onFocus={() => null}\n        onBlur={() => null}\n      >\n        <span\n          className={doClassnames([texts.type, 'select-menu__item__label'])}\n        >\n          {option.label}\n        </span>\n        {(option.isBlocked || option.isNew) && (\n          <Chip preview={preview}>{option.isNew ? 'New' : 'Pro'}</Chip>\n        )}\n        <span className=\"select-menu__item__caret\">\n          <Icon\n            type=\"PICTO\"\n            iconName=\"caret-right\"\n          />\n        </span>\n        {openedGroup === option.value && this.SubMenu(option.children)}\n      </li>\n    )\n  }\n\n  MenuSubOption = (option: DropdownOption, index: number) => {\n    const { selected, preview, onCancellation } = this.props\n\n    return (\n      <li\n        key={`menu-suboption-${index}`}\n        className={doClassnames([\n          'select-menu__item',\n          selected?.split(', ').filter((value) => value === option.value)\n            .length === 1 && 'select-menu__item--selected',\n          option.isBlocked && 'select-menu__item--blocked',\n        ])}\n        data-value={option.value}\n        data-is-blocked={option.isBlocked}\n        data-feature={option.feature}\n        data-role={'OPTION'}\n        tabIndex={option.isBlocked ? -1 : 0}\n        aria-current={\n          selected?.split(', ').filter((value) => value === option.value)\n            .length === 1\n            ? 'true'\n            : undefined\n        }\n        aria-disabled={option.isBlocked}\n        onKeyDown={(e) => {\n          e.stopPropagation()\n          if ((e.key === ' ' || e.key === 'Enter') && !option.isBlocked) {\n            option.action && option.action(e)\n            onCancellation?.()\n          }\n          if (e.key === 'Escape')\n            this.setState({ openedGroup: 'EMPTY' }, () =>\n              this.focusFirstMenuItem()\n            )\n\n          return null\n        }}\n        onMouseDown={!option.isBlocked ? option.action : undefined}\n      >\n        {selected?.split(', ').filter((value) => value === option.value)\n          .length === 1 && (\n          <span className=\"select-menu__item__tick\">\n            <Icon\n              type=\"PICTO\"\n              iconName=\"check\"\n            />\n          </span>\n        )}\n        <span\n          className={doClassnames([\n            texts['type--small'],\n            texts.type,\n            'select-menu__item__label',\n          ])}\n        >\n          {option.label}\n        </span>\n        {(option.isBlocked || option.isNew) && (\n          <Chip preview={preview}>{option.isNew ? 'New' : 'Pro'}</Chip>\n        )}\n      </li>\n    )\n  }\n\n  render() {\n    const { options, direction, shouldScroll, menuRef } = this.props\n    const { listScrollOffset, listScrollAmount } = this.state\n\n    return (\n      <div\n        className=\"select-menu\"\n        style={{\n          height: shouldScroll ? '100%' : 'auto',\n        }}\n      >\n        {shouldScroll && listScrollOffset !== 0 && listScrollAmount !== 0 && (\n          <div\n            className=\"select-menu__spot select-menu__spot--top\"\n            onMouseEnter={() => this.startScrolling('UP')}\n            onMouseLeave={this.stopScrolling}\n          >\n            <Icon\n              type=\"PICTO\"\n              iconName=\"chevron-up\"\n            />\n          </div>\n        )}\n        <ul\n          className={doClassnames([\n            'select-menu__menu',\n            'select-menu__menu--active',\n            direction === 'RIGHT'\n              ? 'select-menu__menu--right'\n              : 'select-menu__menu--left',\n            shouldScroll && 'select-menu__menu--scrolling',\n          ])}\n          onScroll={this.onScroll}\n          ref={menuRef}\n        >\n          {options?.map((option, index) => {\n            const isActive =\n                option.isActive !== undefined ? option.isActive : true,\n              isBlocked =\n                option.isBlocked !== undefined ? option.isBlocked : false,\n              isNew = option.isNew !== undefined ? option.isNew : false,\n              children = option.children !== undefined ? option.children : []\n\n            if (isActive && option.type === 'SEPARATOR')\n              return this.MenuSeparator(index)\n            if (isActive && option.type === 'TITLE')\n              return this.MenuTitle(option, index)\n            if (isActive && option.type === 'OPTION')\n              return this.MenuOption(\n                { ...option, isActive, isBlocked, isNew, children },\n                index\n              )\n            if (isActive && option.type === 'GROUP' && children) {\n              const activeChildren = children.filter(\n                (child) => child.isActive !== false\n              )\n\n              if (activeChildren.length > 1)\n                return this.MenuGroup(\n                  { ...option, isActive, isBlocked, isNew, children },\n                  index\n                )\n              else if (activeChildren.length === 1)\n                return this.MenuOption(\n                  {\n                    ...activeChildren[0],\n                    isActive: activeChildren[0].isActive,\n                    isBlocked: activeChildren[0].isBlocked,\n                    isNew: activeChildren[0].isNew,\n                  },\n                  index\n                )\n              else return null\n            }\n            return null\n          })}\n        </ul>\n        {shouldScroll &&\n          listScrollAmount !== listScrollOffset &&\n          listScrollAmount !== 0 && (\n            <div\n              className=\"select-menu__spot select-menu__spot--bottom\"\n              onMouseEnter={() => this.startScrolling('DOWN')}\n              onMouseLeave={this.stopScrolling}\n            >\n              <Icon\n                type=\"PICTO\"\n                iconName=\"chevron-down\"\n              />\n            </div>\n          )}\n      </div>\n    )\n  }\n}\n"],"names":["ActionsList","React","props","prevProps","prevState","shouldScroll","openedGroup","list","subMenuElement","rect","menuRef","menuElement","firstItem","subMenuRef","target","direction","scroll","options","shift","isVisible","jsx","option","index","isActive","isBlocked","isNew","children","activeChildren","child","doClassnames","texts","selected","preview","onCancellation","jsxs","value","e","Icon","Chip","listScrollOffset","listScrollAmount"],"mappings":";;;;;;AAkEA,MAAqBA,UAAoBC,EAAM,UAG7C;AAAA,EACQ;AAAA,EACA;AAAA,EAER,OAAO,eAA0C;AAAA,IAC/C,WAAW;AAAA,IACX,cAAc;AAAA,IACd,gBAAgB,MAAM;AAAA,EAAA;AAAA,EAGxB,YAAYC,GAAyB;AACnC,UAAMA,CAAK,GACX,KAAK,QAAQ;AAAA,MACX,aAAa;AAAA,MACb,kBAAkB;AAAA,MAClB,kBAAkB;AAAA,MAClB,kBAAkB;AAAA,MAClB,OAAO;AAAA,MACP,WAAW;AAAA,IAAA,GAEb,KAAK,iBAAiB,MACtB,KAAK,sBAAsBD,EAAM,UAAA;AAAA,EACnC;AAAA,EAEA,mBACEE,GACAC,GACA;AACA,UAAM,EAAE,cAAAC,MAAiB,KAAK,OACxB,EAAE,aAAAC,MAAgB,KAAK,OACvBC,IAAO,SAAS;AAAA,MACpB;AAAA,IAAA,EACA,CAAC;AASH,QAPIJ,EAAU,iBAAiBE,KAC7B,KAAK,SAAS;AAAA,MACZ,kBAAkBE,EAAK;AAAA,MACvB,kBAAkBA,EAAK,eAAeA,EAAK;AAAA,MAC3C,kBAAkBA,EAAK;AAAA,IAAA,CACxB,GAECH,EAAU,gBAAgBE,GAAa;AACzC,YAAME,IAAiB,KAAK,oBAAoB;AAChD,UAAIA,GAAgB;AAClB,cAAMC,IAAOD,EAAe,sBAAA;AAC5B,QAAIC,EAAK,IAAI,KAAG,KAAK,SAAS,EAAE,OAAO,CAACA,EAAK,IAAI,EAAA,CAAG,GAChDA,EAAK,IAAIA,EAAK,QAAQ,OAAO,cAC/B,KAAK,SAAS;AAAA,UACZ,OAAO,OAAO,aAAaA,EAAK,IAAIA,EAAK,QAAQ;AAAA,QAAA,CAClD,GACH,KAAK,SAAS,EAAE,WAAW,GAAA,CAAM;AAAA,MACnC;AAAA,IACF;AAAA,EACF;AAAA;AAAA,EAGA,qBAAqB,MAAM;AACzB,UAAM,EAAE,SAAAC,MAAY,KAAK;AAEzB,eAAW,MAAM;AACf,YAAMC,IAAcD,GAAS;AAC7B,UAAIC,GAAa;AACf,cAAMC,IAAYD,EAAY;AAAA,UAC5B;AAAA,QAAA;AAEF,QAAIC,OAAqB,MAAA;AAAA,MAC3B;AAAA,IACF,GAAG,CAAC;AAAA,EACN;AAAA,EAEA,wBAAwB,MAAM;AAC5B,UAAM,EAAE,YAAAC,MAAe,KAAK;AAE5B,eAAW,MAAM;AACf,YAAML,IAAiBK,GAAY;AACnC,UAAIL,GAAgB;AAClB,cAAMI,IAAYJ,EAAe;AAAA,UAC/B;AAAA,QAAA;AAEF,QAAII,OAAqB,MAAA;AAAA,MAC3B;AAAA,IACF,GAAG,CAAC;AAAA,EACN;AAAA,EAEA,WAAW,CAAC,MAAuC;AACjD,UAAME,IAAS,EAAE;AACjB,SAAK,SAAS;AAAA,MACZ,kBAAkBA,EAAO;AAAA,MACzB,kBAAkBA,EAAO,eAAeA,EAAO;AAAA,IAAA,CAChD,GAEGA,EAAO,cAAc,KAAG,KAAK,cAAA,GAC7BA,EAAO,cAAcA,EAAO,eAAeA,EAAO,gBACpD,KAAK,cAAA;AAAA,EACT;AAAA,EAEA,iBAAiB,CAACC,MAA6B;AAC7C,UAAMR,IAAO,SAAS,uBAAuB,mBAAmB,EAAE,CAAC,GAE7DS,IAAS,MAAM;AACnB,MAAIT,MACEQ,MAAc,QAAQR,EAAK,YAAY,MAAQ,aAAa,IAE9DQ,MAAc,UACdR,EAAK,YAAYA,EAAK,eAAeA,EAAK,iBAE1CA,EAAK,aAAa,IAEpB,KAAK,iBAAiB,sBAAsBS,CAAM;AAAA,IAEtD;AAEA,SAAK,iBAAiB,sBAAsBA,CAAM;AAAA,EACpD;AAAA,EAEA,gBAAgB,MAAM;AACpB,IAAI,KAAK,mBACP,qBAAqB,KAAK,cAAc,GACxC,KAAK,iBAAiB;AAAA,EAE1B;AAAA;AAAA,EAGA,UAAU,CAACC,MAA+C;AACxD,UAAM,EAAE,YAAAJ,MAAe,KAAK,OACtB,EAAE,OAAAK,GAAO,WAAAC,EAAA,IAAc,KAAK;AAElC,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QACL,OAAO;AAAA,UACL,YAAYD,IAAY,YAAY;AAAA,QAAA;AAAA,QAEtC,eAAa,CAACA;AAAA,QACd,KAAK,KAAK;AAAA,QAEV,UAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,KAAKP;AAAA,YACL,MAAK;AAAA,YACL,OAAO;AAAA,cACL,WAAW,cAAcK,CAAK;AAAA,YAAA;AAAA,YAG/B,UAAAD,GAAS,IAAI,CAACI,GAAQC,MAAU;AAC/B,oBAAMC,IACFF,EAAO,aAAa,SAAYA,EAAO,WAAW,IACpDG,IACEH,EAAO,cAAc,SAAYA,EAAO,YAAY,IACtDI,IAAQJ,EAAO,UAAU,SAAYA,EAAO,QAAQ,IACpDK,IAAWL,EAAO,aAAa,SAAYA,EAAO,WAAW,CAAA,GAEzDM,IAAiBD,EAAS;AAAA,gBAC9B,CAACE,MAAUA,EAAM,aAAa;AAAA,cAAA;AAGhC,kBAAIL,KAAYI,EAAe,SAAS;AACtC,uBAAO,KAAK;AAAA,kBACV,EAAE,GAAGN,GAAQ,UAAAE,GAAU,WAAAC,GAAW,OAAAC,GAAO,UAAAC,EAAA;AAAA,kBACzCJ;AAAA,gBAAA;AACF,kBACOC,KAAYI,EAAe,WAAW;AAC7C,uBAAO,KAAK;AAAA,kBACV,EAAE,GAAGN,GAAQ,UAAAE,GAAU,WAAAC,GAAW,OAAAC,GAAO,UAAAC,EAAA;AAAA,kBACzCJ;AAAA,gBAAA;AAAA,YAEN,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AAAA,EAEA,YAAY,CAACD,GAAwBC,MAEjC,gBAAAF;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,aAAW;AAAA,MACX,WAAWS,EAAa;AAAA,QACtB;AAAA,QACA;AAAA,MAAA,CACD;AAAA,MACD,iBAAc;AAAA,MAEd,UAAA,gBAAAT;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWS,EAAa,CAACC,EAAM,MAAM,0BAA0B,CAAC;AAAA,UAChE,eAAY;AAAA,UAEX,UAAAT,EAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IACV;AAAA,IAbK,eAAeC,CAAK;AAAA,EAAA;AAAA,EAkB/B,gBAAgB,CAACA,MAEb,gBAAAF;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,aAAW;AAAA,MAEX,4BAAC,MAAA,CAAA,CAAG;AAAA,IAAA;AAAA,IAHC,kBAAkBE,CAAK;AAAA,EAAA;AAAA,EAQlC,aAAa,CAACD,GAAwBC,MAAkB;AACtD,UAAM,EAAE,UAAAS,GAAU,SAAAC,GAAS,gBAAAC,EAAA,IAAmB,KAAK;AAEnD,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAWL,EAAa;AAAA,UACtB;AAAA,UACAE,GAAU,MAAM,IAAI,EAAE,OAAO,CAACI,MAAUA,MAAUd,EAAO,KAAK,EAC3D,WAAW,KAAK;AAAA,UACnBA,EAAO,aAAa;AAAA,QAAA,CACrB;AAAA,QACD,cAAYA,EAAO;AAAA,QACnB,mBAAiBA,EAAO;AAAA,QACxB,gBAAcA,EAAO;AAAA,QACrB,aAAW;AAAA,QACX,UAAUA,EAAO,YAAY,KAAK;AAAA,QAClC,gBACEU,GAAU,MAAM,IAAI,EAAE,OAAO,CAACI,MAAUA,MAAUd,EAAO,KAAK,EAC3D,WAAW,IACV,SACA;AAAA,QAEN,iBAAeA,EAAO;AAAA,QACtB,WAAW,CAACe,OACVA,EAAE,gBAAA,IACGA,EAAE,QAAQ,OAAOA,EAAE,QAAQ,YAAY,CAACf,EAAO,cAClDA,EAAO,UAAUA,EAAO,OAAOe,CAAC,GAChCH,IAAA,IAEEG,EAAE,QAAQ,YAAUH,IAAA,GAEjB;AAAA,QAET,aAAa,CAACG,MAAM;AAClB,UAACf,EAAO,aAAYA,EAAO,SAASe,CAAC,GACrCH,IAAA;AAAA,QACF;AAAA,QACA,SAAS,MAAM;AAAA,QACf,QAAQ,MAAM;AAAA,QAEb,UAAA;AAAA,UAAAF,GAAU,MAAM,IAAI,EAAE,OAAO,CAACI,MAAUA,MAAUd,EAAO,KAAK,EAC5D,WAAW,KACZ,gBAAAD,EAAC,QAAA,EAAK,WAAU,2BACd,UAAA,gBAAAA;AAAA,YAACiB;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,UAAS;AAAA,YAAA;AAAA,UAAA,GAEb;AAAA,UAGF,gBAAAjB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWS,EAAa,CAACC,EAAM,MAAM,0BAA0B,CAAC;AAAA,cAE/D,UAAAT,EAAO;AAAA,YAAA;AAAA,UAAA;AAAA,WAERA,EAAO,aAAaA,EAAO,UAC3B,gBAAAD,EAACkB,KAAK,SAAAN,GAAmB,UAAAX,EAAO,QAAQ,QAAQ,MAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MApDnD,eAAeC,CAAK;AAAA,IAAA;AAAA,EAwD/B;AAAA,EAEA,YAAY,CAACD,GAAwBC,MAAkB;AACrD,UAAM,EAAE,SAAAU,GAAS,gBAAAC,EAAA,IAAmB,KAAK,OACnC,EAAE,aAAA3B,MAAgB,KAAK;AAE7B,WACE,gBAAA4B;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAWL,EAAa;AAAA,UACtB;AAAA,UACAR,EAAO,aAAa;AAAA,QAAA,CACrB;AAAA,QACD,OAAO;AAAA,UACL,QAAQf,MAAgBe,EAAO,QAAQ,IAAI;AAAA,QAAA;AAAA,QAE7C,mBAAiBA,EAAO;AAAA,QACxB,aAAW;AAAA,QACX,UAAUA,EAAO,YAAY,KAAK;AAAA,QAClC,iBAAeA,EAAO;AAAA,QACtB,iBAAc;AAAA,QACd,WAAW,CAACe,OACVA,EAAE,gBAAA,IACGA,EAAE,QAAQ,OAAOA,EAAE,QAAQ,YAAY,CAACf,EAAO,YAC3C,KAAK;AAAA,UAAS,EAAE,aAAaA,EAAO,SAAS,QAAA;AAAA,UAAW,MAC7D,KAAK,sBAAA;AAAA,QAAsB,KAE3Be,EAAE,QAAQ,YAAUH,IAAA,GAEjB;AAAA,QAET,cAAc,MACZ,KAAK,SAAS,EAAE,aAAaZ,EAAO,SAAS,SAAS;AAAA,QAExD,cAAc,MAAM,KAAK,SAAS,EAAE,aAAa,SAAS;AAAA,QAC1D,SAAS,MAAM;AAAA,QACf,QAAQ,MAAM;AAAA,QAEd,UAAA;AAAA,UAAA,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWS,EAAa,CAACC,EAAM,MAAM,0BAA0B,CAAC;AAAA,cAE/D,UAAAT,EAAO;AAAA,YAAA;AAAA,UAAA;AAAA,WAERA,EAAO,aAAaA,EAAO,UAC3B,gBAAAD,EAACkB,KAAK,SAAAN,GAAmB,UAAAX,EAAO,QAAQ,QAAQ,MAAA,CAAM;AAAA,UAExD,gBAAAD,EAAC,QAAA,EAAK,WAAU,4BACd,UAAA,gBAAAA;AAAA,YAACiB;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,UAAS;AAAA,YAAA;AAAA,UAAA,GAEb;AAAA,UACC/B,MAAgBe,EAAO,SAAS,KAAK,QAAQA,EAAO,QAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,MA5CxD,cAAcC,CAAK;AAAA,IAAA;AAAA,EA+C9B;AAAA,EAEA,gBAAgB,CAACD,GAAwBC,MAAkB;AACzD,UAAM,EAAE,UAAAS,GAAU,SAAAC,GAAS,gBAAAC,EAAA,IAAmB,KAAK;AAEnD,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAWL,EAAa;AAAA,UACtB;AAAA,UACAE,GAAU,MAAM,IAAI,EAAE,OAAO,CAACI,MAAUA,MAAUd,EAAO,KAAK,EAC3D,WAAW,KAAK;AAAA,UACnBA,EAAO,aAAa;AAAA,QAAA,CACrB;AAAA,QACD,cAAYA,EAAO;AAAA,QACnB,mBAAiBA,EAAO;AAAA,QACxB,gBAAcA,EAAO;AAAA,QACrB,aAAW;AAAA,QACX,UAAUA,EAAO,YAAY,KAAK;AAAA,QAClC,gBACEU,GAAU,MAAM,IAAI,EAAE,OAAO,CAACI,MAAUA,MAAUd,EAAO,KAAK,EAC3D,WAAW,IACV,SACA;AAAA,QAEN,iBAAeA,EAAO;AAAA,QACtB,WAAW,CAACe,OACVA,EAAE,gBAAA,IACGA,EAAE,QAAQ,OAAOA,EAAE,QAAQ,YAAY,CAACf,EAAO,cAClDA,EAAO,UAAUA,EAAO,OAAOe,CAAC,GAChCH,IAAA,IAEEG,EAAE,QAAQ,YACZ,KAAK;AAAA,UAAS,EAAE,aAAa,QAAA;AAAA,UAAW,MACtC,KAAK,mBAAA;AAAA,QAAmB,GAGrB;AAAA,QAET,aAAcf,EAAO,YAA4B,SAAhBA,EAAO;AAAA,QAEvC,UAAA;AAAA,UAAAU,GAAU,MAAM,IAAI,EAAE,OAAO,CAACI,MAAUA,MAAUd,EAAO,KAAK,EAC5D,WAAW,KACZ,gBAAAD,EAAC,QAAA,EAAK,WAAU,2BACd,UAAA,gBAAAA;AAAA,YAACiB;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,UAAS;AAAA,YAAA;AAAA,UAAA,GAEb;AAAA,UAEF,gBAAAjB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWS,EAAa;AAAA,gBACtBC,EAAM,aAAa;AAAA,gBACnBA,EAAM;AAAA,gBACN;AAAA,cAAA,CACD;AAAA,cAEA,UAAAT,EAAO;AAAA,YAAA;AAAA,UAAA;AAAA,WAERA,EAAO,aAAaA,EAAO,UAC3B,gBAAAD,EAACkB,KAAK,SAAAN,GAAmB,UAAAX,EAAO,QAAQ,QAAQ,MAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MArDnD,kBAAkBC,CAAK;AAAA,IAAA;AAAA,EAyDlC;AAAA,EAEA,SAAS;AACP,UAAM,EAAE,SAAAL,GAAS,WAAAF,GAAW,cAAAV,GAAc,SAAAK,EAAA,IAAY,KAAK,OACrD,EAAE,kBAAA6B,GAAkB,kBAAAC,EAAA,IAAqB,KAAK;AAEpD,WACE,gBAAAN;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,QAAQ7B,IAAe,SAAS;AAAA,QAAA;AAAA,QAGjC,UAAA;AAAA,UAAAA,KAAgBkC,MAAqB,KAAKC,MAAqB,KAC9D,gBAAApB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,cAAc,MAAM,KAAK,eAAe,IAAI;AAAA,cAC5C,cAAc,KAAK;AAAA,cAEnB,UAAA,gBAAAA;AAAA,gBAACiB;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,UAAS;AAAA,gBAAA;AAAA,cAAA;AAAA,YACX;AAAA,UAAA;AAAA,UAGJ,gBAAAjB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWS,EAAa;AAAA,gBACtB;AAAA,gBACA;AAAA,gBACAd,MAAc,UACV,6BACA;AAAA,gBACJV,KAAgB;AAAA,cAAA,CACjB;AAAA,cACD,UAAU,KAAK;AAAA,cACf,KAAKK;AAAA,cAEJ,UAAAO,GAAS,IAAI,CAACI,GAAQC,MAAU;AAC/B,sBAAMC,IACFF,EAAO,aAAa,SAAYA,EAAO,WAAW,IACpDG,IACEH,EAAO,cAAc,SAAYA,EAAO,YAAY,IACtDI,IAAQJ,EAAO,UAAU,SAAYA,EAAO,QAAQ,IACpDK,IAAWL,EAAO,aAAa,SAAYA,EAAO,WAAW,CAAA;AAE/D,oBAAIE,KAAYF,EAAO,SAAS;AAC9B,yBAAO,KAAK,cAAcC,CAAK;AACjC,oBAAIC,KAAYF,EAAO,SAAS;AAC9B,yBAAO,KAAK,UAAUA,GAAQC,CAAK;AACrC,oBAAIC,KAAYF,EAAO,SAAS;AAC9B,yBAAO,KAAK;AAAA,oBACV,EAAE,GAAGA,GAAQ,UAAAE,GAAU,WAAAC,GAAW,OAAAC,GAAO,UAAAC,EAAA;AAAA,oBACzCJ;AAAA,kBAAA;AAEJ,oBAAIC,KAAYF,EAAO,SAAS,WAAWK,GAAU;AACnD,wBAAMC,IAAiBD,EAAS;AAAA,oBAC9B,CAACE,MAAUA,EAAM,aAAa;AAAA,kBAAA;AAGhC,yBAAID,EAAe,SAAS,IACnB,KAAK;AAAA,oBACV,EAAE,GAAGN,GAAQ,UAAAE,GAAU,WAAAC,GAAW,OAAAC,GAAO,UAAAC,EAAA;AAAA,oBACzCJ;AAAA,kBAAA,IAEKK,EAAe,WAAW,IAC1B,KAAK;AAAA,oBACV;AAAA,sBACE,GAAGA,EAAe,CAAC;AAAA,sBACnB,UAAUA,EAAe,CAAC,EAAE;AAAA,sBAC5B,WAAWA,EAAe,CAAC,EAAE;AAAA,sBAC7B,OAAOA,EAAe,CAAC,EAAE;AAAA,oBAAA;AAAA,oBAE3BL;AAAA,kBAAA,IAEQ;AAAA,gBACd;AACA,uBAAO;AAAA,cACT,CAAC;AAAA,YAAA;AAAA,UAAA;AAAA,UAEFjB,KACCmC,MAAqBD,KACrBC,MAAqB,KACnB,gBAAApB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,cAAc,MAAM,KAAK,eAAe,MAAM;AAAA,cAC9C,cAAc,KAAK;AAAA,cAEnB,UAAA,gBAAAA;AAAA,gBAACiB;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,UAAS;AAAA,gBAAA;AAAA,cAAA;AAAA,YACX;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAIV;AACF;"}

package/dist/components/lists/color-item/ColorItem.js

@@ -1,10 +1,10 @@
 import '../../../assets/ColorItem.css';
 import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import { useState as p } from "react";
+import { t as m } from "../../../do-classnames-DSDFCvzy.js";
 import o from "../../../styles/texts/texts.module.js";
 import f from "../../tags/color-chip/ColorChip.js";
 import u from "../../actions/button/Button.js";
-import { t as m } from "../../../do-classnames-DSDFCvzy.js";
 const N = (a) => {
   const { name: l, hex: t, id: n, canBeRemoved: r = !1, onRemoveColor: c } = a, [d, i] = p(!1);
   return /* @__PURE__ */ s(

package/dist/components/lists/color-item/ColorItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorItem.js","sources":["../../../../src/components/lists/color-item/ColorItem.tsx"],"sourcesContent":["import { useState } from 'react'\nimport texts from '@styles/texts/texts.module.scss'\nimport ColorChip from '@components/tags/color-chip/ColorChip'\nimport Button from '@components/actions/button/Button'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\nimport './color-item.scss'\n\nexport type ColorItemProps = {\n  /**\n   * Unique identifier for the color item\n   */\n  id?: string\n  /**\n   * Name of the color\n   */\n  name: string\n  /**\n   * Hex color value\n   */\n  hex: string\n  /**\n   * Whether the item can be removed\n   * @default false\n   */\n  canBeRemoved?: boolean\n  /**\n   * Remove button handler\n   */\n  onRemoveColor?: React.ReactEventHandler\n}\n\nconst ColorItem = (props: ColorItemProps) => {\n  const { name, hex, id, canBeRemoved = false, onRemoveColor } = props\n  const [isRemovePermitted, setIsRemovePermitted] = useState(false)\n\n  return (\n    <li\n      className=\"color-item\"\n      data-id={id}\n      onMouseEnter={() => {\n        if (canBeRemoved) setIsRemovePermitted(true)\n      }}\n      onMouseLeave={() => {\n        if (canBeRemoved) setIsRemovePermitted(false)\n      }}\n    >\n      <div\n        className=\"color-item__left\"\n        role=\"group\"\n      >\n        <div\n          className=\"color-item__info\"\n          role=\"presentation\"\n        >\n          <ColorChip\n            color={hex}\n            isRounded\n          />\n          <div className={doClassnames([texts.type, texts['type--truncated']])}>\n            {name}\n          </div>\n          <div className={doClassnames([texts.type, texts['type--secondary']])}>\n            {hex.toUpperCase()}\n          </div>\n        </div>\n      </div>\n      {isRemovePermitted && (\n        <div\n          className=\"color-item__right\"\n          role=\"group\"\n        >\n          <Button\n            type=\"icon\"\n            icon=\"minus\"\n            feature=\"REMOVE_COLOR\"\n            action={onRemoveColor}\n          />\n        </div>\n      )}\n    </li>\n  )\n}\n\nexport default ColorItem\n"],"names":["ColorItem","props","name","hex","id","canBeRemoved","onRemoveColor","isRemovePermitted","setIsRemovePermitted","useState","jsxs","jsx","ColorChip","doClassnames","texts","Button"],"mappings":";;;;;;AA+BA,MAAMA,IAAY,CAACC,MAA0B;AAC3C,QAAM,EAAE,MAAAC,GAAM,KAAAC,GAAK,IAAAC,GAAI,cAAAC,IAAe,IAAO,eAAAC,MAAkBL,GACzD,CAACM,GAAmBC,CAAoB,IAAIC,EAAS,EAAK;AAEhE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,WAASN;AAAA,MACT,cAAc,MAAM;AAClB,QAAIC,OAAmC,EAAI;AAAA,MAC7C;AAAA,MACA,cAAc,MAAM;AAClB,QAAIA,OAAmC,EAAK;AAAA,MAC9C;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAM;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YAEL,UAAA,gBAAAD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,MAAK;AAAA,gBAEL,UAAA;AAAA,kBAAA,gBAAAC;AAAA,oBAACC;AAAA,oBAAA;AAAA,sBACC,OAAOT;AAAA,sBACP,WAAS;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAEX,gBAAAQ,EAAC,OAAA,EAAI,WAAWE,EAAa,CAACC,EAAM,MAAMA,EAAM,iBAAiB,CAAC,CAAC,GAChE,UAAAZ,EAAA,CACH;AAAA,kBACA,gBAAAS,EAAC,OAAA,EAAI,WAAWE,EAAa,CAACC,EAAM,MAAMA,EAAM,iBAAiB,CAAC,CAAC,GAChE,UAAAX,EAAI,cAAY,CACnB;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAEDI,KACC,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YAEL,UAAA,gBAAAA;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,MAAK;AAAA,gBACL,SAAQ;AAAA,gBACR,QAAQT;AAAA,cAAA;AAAA,YAAA;AAAA,UACV;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"ColorItem.js","sources":["../../../../src/components/lists/color-item/ColorItem.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { doClassnames } from '@unoff/utils'\nimport texts from '@styles/texts/texts.module.scss'\nimport ColorChip from '@components/tags/color-chip/ColorChip'\nimport Button from '@components/actions/button/Button'\nimport './color-item.scss'\n\nexport type ColorItemProps = {\n  /**\n   * Unique identifier for the color item\n   */\n  id?: string\n  /**\n   * Name of the color\n   */\n  name: string\n  /**\n   * Hex color value\n   */\n  hex: string\n  /**\n   * Whether the item can be removed\n   * @default false\n   */\n  canBeRemoved?: boolean\n  /**\n   * Remove button handler\n   */\n  onRemoveColor?: React.ReactEventHandler\n}\n\nconst ColorItem = (props: ColorItemProps) => {\n  const { name, hex, id, canBeRemoved = false, onRemoveColor } = props\n  const [isRemovePermitted, setIsRemovePermitted] = useState(false)\n\n  return (\n    <li\n      className=\"color-item\"\n      data-id={id}\n      onMouseEnter={() => {\n        if (canBeRemoved) setIsRemovePermitted(true)\n      }}\n      onMouseLeave={() => {\n        if (canBeRemoved) setIsRemovePermitted(false)\n      }}\n    >\n      <div\n        className=\"color-item__left\"\n        role=\"group\"\n      >\n        <div\n          className=\"color-item__info\"\n          role=\"presentation\"\n        >\n          <ColorChip\n            color={hex}\n            isRounded\n          />\n          <div className={doClassnames([texts.type, texts['type--truncated']])}>\n            {name}\n          </div>\n          <div className={doClassnames([texts.type, texts['type--secondary']])}>\n            {hex.toUpperCase()}\n          </div>\n        </div>\n      </div>\n      {isRemovePermitted && (\n        <div\n          className=\"color-item__right\"\n          role=\"group\"\n        >\n          <Button\n            type=\"icon\"\n            icon=\"minus\"\n            feature=\"REMOVE_COLOR\"\n            action={onRemoveColor}\n          />\n        </div>\n      )}\n    </li>\n  )\n}\n\nexport default ColorItem\n"],"names":["ColorItem","props","name","hex","id","canBeRemoved","onRemoveColor","isRemovePermitted","setIsRemovePermitted","useState","jsxs","jsx","ColorChip","doClassnames","texts","Button"],"mappings":";;;;;;AA+BA,MAAMA,IAAY,CAACC,MAA0B;AAC3C,QAAM,EAAE,MAAAC,GAAM,KAAAC,GAAK,IAAAC,GAAI,cAAAC,IAAe,IAAO,eAAAC,MAAkBL,GACzD,CAACM,GAAmBC,CAAoB,IAAIC,EAAS,EAAK;AAEhE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,WAASN;AAAA,MACT,cAAc,MAAM;AAClB,QAAIC,OAAmC,EAAI;AAAA,MAC7C;AAAA,MACA,cAAc,MAAM;AAClB,QAAIA,OAAmC,EAAK;AAAA,MAC9C;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAM;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YAEL,UAAA,gBAAAD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,MAAK;AAAA,gBAEL,UAAA;AAAA,kBAAA,gBAAAC;AAAA,oBAACC;AAAA,oBAAA;AAAA,sBACC,OAAOT;AAAA,sBACP,WAAS;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAEX,gBAAAQ,EAAC,OAAA,EAAI,WAAWE,EAAa,CAACC,EAAM,MAAMA,EAAM,iBAAiB,CAAC,CAAC,GAChE,UAAAZ,EAAA,CACH;AAAA,kBACA,gBAAAS,EAAC,OAAA,EAAI,WAAWE,EAAa,CAACC,EAAM,MAAMA,EAAM,iBAAiB,CAAC,CAAC,GAChE,UAAAX,EAAI,cAAY,CACnB;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAEDI,KACC,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YAEL,UAAA,gBAAAA;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,MAAK;AAAA,gBACL,SAAQ;AAAA,gBACR,QAAQT;AAAA,cAAA;AAAA,YAAA;AAAA,UACV;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/lists/draggable-item/DraggableItem.js

@@ -1,10 +1,10 @@
 import '../../../assets/DraggableItem.css';
 import { jsxs as p, jsx as g } from "react/jsx-runtime";
 import m from "react";
-import S from "../../slots/draggable-window/DraggableWindow.js";
+import { r as S } from "../../../do-map-2nhWP1KI.js";
+import { t as y } from "../../../do-classnames-DSDFCvzy.js";
+import B from "../../slots/draggable-window/DraggableWindow.js";
 import h from "../../actions/button/Button.js";
-import { r as y } from "../../../do-map-2nhWP1KI.js";
-import { t as B } from "../../../do-classnames-DSDFCvzy.js";
 class A extends m.Component {
   moreButtonRef;
   static defaultProps = {
@@ -32,7 +32,7 @@ class A extends m.Component {
   onDragOver = (e) => {
     const { onDragChange: t } = this.props;
     e.preventDefault();
-    const o = e.currentTarget, c = o.getBoundingClientRect(), a = o.clientHeight, l = e.clientY - c.top, i = y(l, 0, a, 0, a);
+    const o = e.currentTarget, c = o.getBoundingClientRect(), a = o.clientHeight, l = e.clientY - c.top, i = S(l, 0, a, 0, a);
     i >= -1 && i <= a / 2 ? t(
       o.dataset.id,
       !0,
@@ -74,7 +74,7 @@ class A extends m.Component {
       {
         "data-id": e,
         "data-position": t,
-        className: B([
+        className: y([
           "draggable-item",
           f && "draggable-item--dragged",
           v && "draggable-item--above",
@@ -155,7 +155,7 @@ class A extends m.Component {
             }
           ),
           r && a !== void 0 && /* @__PURE__ */ g(
-            S,
+            B,
             {
               title: a.title !== void 0 ? a.title : u,
               onClose: () => this.setState({

package/dist/components/lists/draggable-item/DraggableItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableItem.js","sources":["../../../../src/components/lists/draggable-item/DraggableItem.tsx"],"sourcesContent":["import React from 'react'\nimport DraggableWindow from '@components/slots/draggable-window/DraggableWindow'\nimport Button from '@components/actions/button/Button'\nimport { doClassnames, doMap } from '@a_ng_d/figmug-utils'\nimport './draggable-item.scss'\n\nexport interface DraggableItemProps {\n  /**\n   * Unique identifier for the item\n   */\n  id: string\n  /**\n   * Index position in the list\n   */\n  index: number\n  /**\n   * Whether the item can be removed\n   * @default true\n   */\n  canBeRemoved?: boolean\n  /**\n   * Primary content slot\n   */\n  primarySlot: React.ReactNode\n  /**\n   * Secondary content configuration\n   */\n  secondarySlot?: {\n    /** Title for the secondary content */\n    title: string\n    /** Content node */\n    node: React.ReactNode\n  }\n  /**\n   * Action buttons slot\n   */\n  actionsSlot?: React.ReactNode\n  /**\n   * Whether the item is selected\n   * @default false\n   */\n  selected?: boolean\n  /**\n   * Title for the options panel\n   */\n  optionsTitle?: string\n  /**\n   * Helper texts for buttons\n   */\n  helpers?: {\n    /** Helper for remove button */\n    remove?: string\n    /** Helper for more options button */\n    more?: string\n  }\n  /**\n   * Whether to show drop guide above\n   * @default false\n   */\n  guideAbove?: boolean\n  /**\n   * Whether to show drop guide below\n   * @default false\n   */\n  guideBelow?: boolean\n  /**\n   * Whether the item is blocked\n   * @default false\n   */\n  isBlocked?: boolean\n  /**\n   * Selection change handler\n   */\n  onChangeSelection: React.MouseEventHandler<HTMLLIElement>\n  /**\n   * Cancel selection handler\n   */\n  onCancelSelection: React.MouseEventHandler<Element> &\n    React.FocusEventHandler<HTMLInputElement>\n  /**\n   * Refold options handler\n   */\n  onRefoldOptions?: () => void\n  /**\n   * Drag state change handler\n   */\n  onDragChange: (\n    id: string | undefined,\n    hasGuideAbove: boolean,\n    hasGuideBelow: boolean,\n    position: number\n  ) => void\n  /**\n   * Drop outside handler\n   */\n  onDropOutside: (e: React.DragEvent<HTMLLIElement>) => void\n  /**\n   * Order change handler\n   */\n  onChangeOrder: (e: React.DragEvent<HTMLLIElement>) => void\n  /**\n   * Remove item handler\n   */\n  onRemove: React.MouseEventHandler<Element> &\n    React.KeyboardEventHandler<Element>\n}\n\nexport interface DraggableItemStates {\n  isDragged: boolean\n  hasMoreOptions: boolean\n}\n\nexport default class DraggableItem extends React.Component<\n  DraggableItemProps,\n  DraggableItemStates\n> {\n  private moreButtonRef: React.RefObject<Button>\n\n  static defaultProps: Partial<DraggableItemProps> = {\n    canBeRemoved: true,\n    selected: false,\n    guideAbove: false,\n    guideBelow: false,\n    isBlocked: false,\n  }\n\n  constructor(props: DraggableItemProps) {\n    super(props)\n    this.state = {\n      isDragged: false,\n      hasMoreOptions: false,\n    }\n    this.moreButtonRef = React.createRef()\n  }\n\n  // Direct Actions\n  onDragStart = (e: React.DragEvent<HTMLLIElement>) => {\n    const clone = e.currentTarget.cloneNode(true)\n\n    this.setState({ isDragged: true })\n    ;(clone as HTMLElement).style.opacity = '0'\n    ;(clone as HTMLElement).style.position = 'absolute'\n    ;(clone as HTMLElement).id = 'ghost'\n    ;(clone as HTMLElement).style.pointerEvents = 'none'\n    document.body.appendChild(clone)\n    if (e.dataTransfer) {\n      e.dataTransfer.setDragImage(clone as Element, 0, 0)\n      e.dataTransfer.effectAllowed = 'move'\n    }\n  }\n\n  onDragEnd = (e: React.DragEvent<HTMLLIElement>) => {\n    const { onDropOutside, onDragChange } = this.props\n\n    this.setState({ isDragged: false })\n    onDragChange('', false, false, 0)\n    onDropOutside(e)\n    document.querySelector('#ghost')?.remove()\n  }\n\n  onDragOver = (e: React.DragEvent<HTMLLIElement>) => {\n    const { onDragChange } = this.props\n\n    e.preventDefault()\n    const target = e.currentTarget\n    const rect = target.getBoundingClientRect()\n    const height: number = target.clientHeight\n    const y: number = e.clientY - rect.top\n    const refY: number = doMap(y, 0, height, 0, height)\n\n    if (refY >= -1 && refY <= height / 2)\n      onDragChange(\n        target.dataset.id,\n        true,\n        false,\n        parseFloat(target.dataset.position ?? '0')\n      )\n    else if (refY > height / 2 && refY <= height)\n      onDragChange(\n        target.dataset.id,\n        false,\n        true,\n        parseFloat(target.dataset.position ?? '0')\n      )\n  }\n\n  onDrop = (e: React.DragEvent<HTMLLIElement>) => {\n    const { onChangeOrder } = this.props\n\n    e.preventDefault()\n    onChangeOrder(e)\n  }\n\n  // Render\n  render() {\n    const {\n      id,\n      index,\n      canBeRemoved,\n      primarySlot,\n      secondarySlot,\n      actionsSlot,\n      selected,\n      optionsTitle,\n      helpers,\n      guideAbove,\n      guideBelow,\n      isBlocked,\n      onRemove,\n      onChangeSelection,\n      onCancelSelection,\n      onRefoldOptions,\n    } = this.props\n\n    const { isDragged, hasMoreOptions } = this.state\n\n    return (\n      <li\n        data-id={id}\n        data-position={index}\n        className={doClassnames([\n          'draggable-item',\n          isDragged && 'draggable-item--dragged',\n          guideAbove && 'draggable-item--above',\n          guideBelow && 'draggable-item--below',\n        ])}\n        draggable={!hasMoreOptions && !isBlocked ? selected : false}\n        aria-grabbed={isDragged}\n        aria-current={selected ? 'true' : undefined}\n        onMouseDown={(e) => {\n          if (!hasMoreOptions && !isBlocked) onChangeSelection(e)\n        }}\n        onDragStart={(e) => {\n          if (!hasMoreOptions && !isBlocked) this.onDragStart(e)\n        }}\n        onDragEnd={(e) => {\n          if (!hasMoreOptions && !isBlocked) this.onDragEnd(e)\n        }}\n        onDragOver={(e) => {\n          if (!hasMoreOptions && !isBlocked) this.onDragOver(e)\n        }}\n        onDrop={(e) => {\n          if (!hasMoreOptions && !isBlocked) this.onDrop(e)\n        }}\n      >\n        <div\n          className=\"draggable-item__primary\"\n          role=\"group\"\n        >\n          <div\n            className=\"draggable-item__left\"\n            role=\"presentation\"\n          >\n            {primarySlot}\n          </div>\n          <div\n            className=\"draggable-item__right\"\n            role=\"group\"\n          >\n            {secondarySlot !== undefined && (\n              <Button\n                ref={this.moreButtonRef}\n                type=\"icon\"\n                icon=\"ellipses\"\n                state={hasMoreOptions ? 'selected' : undefined}\n                helper={\n                  helpers?.more !== undefined\n                    ? {\n                        label: helpers.more,\n                      }\n                    : undefined\n                }\n                action={() => {\n                  onCancelSelection\n                  onRefoldOptions\n                  this.setState({ hasMoreOptions: !hasMoreOptions })\n                }}\n              />\n            )}\n            {actionsSlot !== undefined && actionsSlot}\n            <Button\n              type=\"icon\"\n              icon=\"minus\"\n              helper={\n                helpers?.remove !== undefined\n                  ? {\n                      label: helpers.remove,\n                    }\n                  : undefined\n              }\n              feature=\"REMOVE_ITEM\"\n              isDisabled={!canBeRemoved}\n              action={canBeRemoved ? onRemove : () => null}\n            />\n          </div>\n        </div>\n        {hasMoreOptions && secondarySlot !== undefined && (\n          <DraggableWindow\n            title={\n              secondarySlot.title !== undefined\n                ? secondarySlot.title\n                : optionsTitle\n            }\n            onClose={() =>\n              this.setState({\n                hasMoreOptions: false,\n              })\n            }\n            triggerRef={this.moreButtonRef}\n          >\n            {secondarySlot.node}\n          </DraggableWindow>\n        )}\n      </li>\n    )\n  }\n}\n"],"names":["DraggableItem","React","props","clone","onDropOutside","onDragChange","target","rect","height","y","refY","doMap","onChangeOrder","id","index","canBeRemoved","primarySlot","secondarySlot","actionsSlot","selected","optionsTitle","helpers","guideAbove","guideBelow","isBlocked","onRemove","onChangeSelection","onCancelSelection","onRefoldOptions","isDragged","hasMoreOptions","jsxs","doClassnames","e","jsx","Button","DraggableWindow"],"mappings":"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"}
+{"version":3,"file":"DraggableItem.js","sources":["../../../../src/components/lists/draggable-item/DraggableItem.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames, doMap } from '@unoff/utils'\nimport DraggableWindow from '@components/slots/draggable-window/DraggableWindow'\nimport Button from '@components/actions/button/Button'\nimport './draggable-item.scss'\n\nexport interface DraggableItemProps {\n  /**\n   * Unique identifier for the item\n   */\n  id: string\n  /**\n   * Index position in the list\n   */\n  index: number\n  /**\n   * Whether the item can be removed\n   * @default true\n   */\n  canBeRemoved?: boolean\n  /**\n   * Primary content slot\n   */\n  primarySlot: React.ReactNode\n  /**\n   * Secondary content configuration\n   */\n  secondarySlot?: {\n    /** Title for the secondary content */\n    title: string\n    /** Content node */\n    node: React.ReactNode\n  }\n  /**\n   * Action buttons slot\n   */\n  actionsSlot?: React.ReactNode\n  /**\n   * Whether the item is selected\n   * @default false\n   */\n  selected?: boolean\n  /**\n   * Title for the options panel\n   */\n  optionsTitle?: string\n  /**\n   * Helper texts for buttons\n   */\n  helpers?: {\n    /** Helper for remove button */\n    remove?: string\n    /** Helper for more options button */\n    more?: string\n  }\n  /**\n   * Whether to show drop guide above\n   * @default false\n   */\n  guideAbove?: boolean\n  /**\n   * Whether to show drop guide below\n   * @default false\n   */\n  guideBelow?: boolean\n  /**\n   * Whether the item is blocked\n   * @default false\n   */\n  isBlocked?: boolean\n  /**\n   * Selection change handler\n   */\n  onChangeSelection: React.MouseEventHandler<HTMLLIElement>\n  /**\n   * Cancel selection handler\n   */\n  onCancelSelection: React.MouseEventHandler<Element> &\n    React.FocusEventHandler<HTMLInputElement>\n  /**\n   * Refold options handler\n   */\n  onRefoldOptions?: () => void\n  /**\n   * Drag state change handler\n   */\n  onDragChange: (\n    id: string | undefined,\n    hasGuideAbove: boolean,\n    hasGuideBelow: boolean,\n    position: number\n  ) => void\n  /**\n   * Drop outside handler\n   */\n  onDropOutside: (e: React.DragEvent<HTMLLIElement>) => void\n  /**\n   * Order change handler\n   */\n  onChangeOrder: (e: React.DragEvent<HTMLLIElement>) => void\n  /**\n   * Remove item handler\n   */\n  onRemove: React.MouseEventHandler<Element> &\n    React.KeyboardEventHandler<Element>\n}\n\nexport interface DraggableItemStates {\n  isDragged: boolean\n  hasMoreOptions: boolean\n}\n\nexport default class DraggableItem extends React.Component<\n  DraggableItemProps,\n  DraggableItemStates\n> {\n  private moreButtonRef: React.RefObject<Button>\n\n  static defaultProps: Partial<DraggableItemProps> = {\n    canBeRemoved: true,\n    selected: false,\n    guideAbove: false,\n    guideBelow: false,\n    isBlocked: false,\n  }\n\n  constructor(props: DraggableItemProps) {\n    super(props)\n    this.state = {\n      isDragged: false,\n      hasMoreOptions: false,\n    }\n    this.moreButtonRef = React.createRef()\n  }\n\n  // Direct Actions\n  onDragStart = (e: React.DragEvent<HTMLLIElement>) => {\n    const clone = e.currentTarget.cloneNode(true)\n\n    this.setState({ isDragged: true })\n    ;(clone as HTMLElement).style.opacity = '0'\n    ;(clone as HTMLElement).style.position = 'absolute'\n    ;(clone as HTMLElement).id = 'ghost'\n    ;(clone as HTMLElement).style.pointerEvents = 'none'\n    document.body.appendChild(clone)\n    if (e.dataTransfer) {\n      e.dataTransfer.setDragImage(clone as Element, 0, 0)\n      e.dataTransfer.effectAllowed = 'move'\n    }\n  }\n\n  onDragEnd = (e: React.DragEvent<HTMLLIElement>) => {\n    const { onDropOutside, onDragChange } = this.props\n\n    this.setState({ isDragged: false })\n    onDragChange('', false, false, 0)\n    onDropOutside(e)\n    document.querySelector('#ghost')?.remove()\n  }\n\n  onDragOver = (e: React.DragEvent<HTMLLIElement>) => {\n    const { onDragChange } = this.props\n\n    e.preventDefault()\n    const target = e.currentTarget\n    const rect = target.getBoundingClientRect()\n    const height: number = target.clientHeight\n    const y: number = e.clientY - rect.top\n    const refY: number = doMap(y, 0, height, 0, height)\n\n    if (refY >= -1 && refY <= height / 2)\n      onDragChange(\n        target.dataset.id,\n        true,\n        false,\n        parseFloat(target.dataset.position ?? '0')\n      )\n    else if (refY > height / 2 && refY <= height)\n      onDragChange(\n        target.dataset.id,\n        false,\n        true,\n        parseFloat(target.dataset.position ?? '0')\n      )\n  }\n\n  onDrop = (e: React.DragEvent<HTMLLIElement>) => {\n    const { onChangeOrder } = this.props\n\n    e.preventDefault()\n    onChangeOrder(e)\n  }\n\n  // Render\n  render() {\n    const {\n      id,\n      index,\n      canBeRemoved,\n      primarySlot,\n      secondarySlot,\n      actionsSlot,\n      selected,\n      optionsTitle,\n      helpers,\n      guideAbove,\n      guideBelow,\n      isBlocked,\n      onRemove,\n      onChangeSelection,\n      onCancelSelection,\n      onRefoldOptions,\n    } = this.props\n\n    const { isDragged, hasMoreOptions } = this.state\n\n    return (\n      <li\n        data-id={id}\n        data-position={index}\n        className={doClassnames([\n          'draggable-item',\n          isDragged && 'draggable-item--dragged',\n          guideAbove && 'draggable-item--above',\n          guideBelow && 'draggable-item--below',\n        ])}\n        draggable={!hasMoreOptions && !isBlocked ? selected : false}\n        aria-grabbed={isDragged}\n        aria-current={selected ? 'true' : undefined}\n        onMouseDown={(e) => {\n          if (!hasMoreOptions && !isBlocked) onChangeSelection(e)\n        }}\n        onDragStart={(e) => {\n          if (!hasMoreOptions && !isBlocked) this.onDragStart(e)\n        }}\n        onDragEnd={(e) => {\n          if (!hasMoreOptions && !isBlocked) this.onDragEnd(e)\n        }}\n        onDragOver={(e) => {\n          if (!hasMoreOptions && !isBlocked) this.onDragOver(e)\n        }}\n        onDrop={(e) => {\n          if (!hasMoreOptions && !isBlocked) this.onDrop(e)\n        }}\n      >\n        <div\n          className=\"draggable-item__primary\"\n          role=\"group\"\n        >\n          <div\n            className=\"draggable-item__left\"\n            role=\"presentation\"\n          >\n            {primarySlot}\n          </div>\n          <div\n            className=\"draggable-item__right\"\n            role=\"group\"\n          >\n            {secondarySlot !== undefined && (\n              <Button\n                ref={this.moreButtonRef}\n                type=\"icon\"\n                icon=\"ellipses\"\n                state={hasMoreOptions ? 'selected' : undefined}\n                helper={\n                  helpers?.more !== undefined\n                    ? {\n                        label: helpers.more,\n                      }\n                    : undefined\n                }\n                action={() => {\n                  onCancelSelection\n                  onRefoldOptions\n                  this.setState({ hasMoreOptions: !hasMoreOptions })\n                }}\n              />\n            )}\n            {actionsSlot !== undefined && actionsSlot}\n            <Button\n              type=\"icon\"\n              icon=\"minus\"\n              helper={\n                helpers?.remove !== undefined\n                  ? {\n                      label: helpers.remove,\n                    }\n                  : undefined\n              }\n              feature=\"REMOVE_ITEM\"\n              isDisabled={!canBeRemoved}\n              action={canBeRemoved ? onRemove : () => null}\n            />\n          </div>\n        </div>\n        {hasMoreOptions && secondarySlot !== undefined && (\n          <DraggableWindow\n            title={\n              secondarySlot.title !== undefined\n                ? secondarySlot.title\n                : optionsTitle\n            }\n            onClose={() =>\n              this.setState({\n                hasMoreOptions: false,\n              })\n            }\n            triggerRef={this.moreButtonRef}\n          >\n            {secondarySlot.node}\n          </DraggableWindow>\n        )}\n      </li>\n    )\n  }\n}\n"],"names":["DraggableItem","React","props","clone","onDropOutside","onDragChange","target","rect","height","y","refY","doMap","onChangeOrder","id","index","canBeRemoved","primarySlot","secondarySlot","actionsSlot","selected","optionsTitle","helpers","guideAbove","guideBelow","isBlocked","onRemove","onChangeSelection","onCancelSelection","onRefoldOptions","isDragged","hasMoreOptions","jsxs","doClassnames","e","jsx","Button","DraggableWindow"],"mappings":"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"}

package/dist/components/lists/keyboard-shortcut-item/KeyboardShortcutItem.js

@@ -1,7 +1,7 @@
 import '../../../assets/KeyboardShortcutItem.css';
 import { jsxs as o, jsx as e, Fragment as l } from "react/jsx-runtime";
-import r from "../../../styles/texts/texts.module.js";
 import { t as i } from "../../../do-classnames-DSDFCvzy.js";
+import r from "../../../styles/texts/texts.module.js";
 const y = (n) => {
   const { label: c, shortcuts: t = [], separator: m = "" } = n;
   return /* @__PURE__ */ o("li", { className: "keyboard-shortcut-item", children: [

package/dist/components/lists/keyboard-shortcut-item/KeyboardShortcutItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyboardShortcutItem.js","sources":["../../../../src/components/lists/keyboard-shortcut-item/KeyboardShortcutItem.tsx"],"sourcesContent":["import texts from '@styles/texts/texts.module.scss'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\nimport './keyboard-shortcut-item.scss'\n\nexport type KeyboardShortcutItemProps = {\n  /**\n   * Label describing the action\n   */\n  label: string\n  /**\n   * Array of keyboard shortcut combinations\n   */\n  shortcuts: Array<Array<string>>\n  /**\n   * Separator between multiple shortcuts\n   * @default ''\n   */\n  separator?: string\n}\n\nconst KeyboardShortcutItem = (props: KeyboardShortcutItemProps) => {\n  const { label, shortcuts = [], separator = '' } = props\n\n  return (\n    <li className=\"keyboard-shortcut-item\">\n      <div\n        className=\"keyboard-shortcut-item__label\"\n        role=\"presentation\"\n      >\n        <span\n          className={texts.type}\n          role=\"presentation\"\n        >\n          {label}\n        </span>\n      </div>\n      <div\n        className=\"keyboard-shortcut-item__keys\"\n        role=\"group\"\n      >\n        <>\n          {shortcuts[0].map((shortcut, index) => (\n            <span\n              className={doClassnames([\n                'keyboard-shortcut-item__key',\n                texts.type,\n              ])}\n              key={index}\n              role=\"presentation\"\n            >\n              {shortcut}\n            </span>\n          ))}\n          {shortcuts[1] !== undefined && (\n            <>\n              <span\n                className={doClassnames([\n                  'keyboard-shortcut-item__separator',\n                  texts.type,\n                ])}\n                role=\"presentation\"\n                aria-hidden=\"true\"\n              >\n                {separator}\n              </span>\n              {shortcuts[1].map((shortcut, index) => (\n                <span\n                  className={doClassnames([\n                    'keyboard-shortcut-item__key',\n                    texts.type,\n                  ])}\n                  key={index}\n                  role=\"presentation\"\n                >\n                  {shortcut}\n                </span>\n              ))}\n            </>\n          )}\n        </>\n      </div>\n    </li>\n  )\n}\n\nexport default KeyboardShortcutItem\n"],"names":["KeyboardShortcutItem","props","label","shortcuts","separator","jsxs","jsx","texts","Fragment","shortcut","index","doClassnames"],"mappings":";;;AAoBA,MAAMA,IAAuB,CAACC,MAAqC;AACjE,QAAM,EAAE,OAAAC,GAAO,WAAAC,IAAY,CAAA,GAAI,WAAAC,IAAY,OAAOH;AAElD,SACE,gBAAAI,EAAC,MAAA,EAAG,WAAU,0BACZ,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QAEL,UAAA,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAM;AAAA,YACjB,MAAK;AAAA,YAEJ,UAAAL;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,IAEF,gBAAAI;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QAEL,UAAA,gBAAAD,EAAAG,GAAA,EACG,UAAA;AAAA,UAAAL,EAAU,CAAC,EAAE,IAAI,CAACM,GAAUC,MAC3B,gBAAAJ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWK,EAAa;AAAA,gBACtB;AAAA,gBACAJ,EAAM;AAAA,cAAA,CACP;AAAA,cAED,MAAK;AAAA,cAEJ,UAAAE;AAAA,YAAA;AAAA,YAHIC;AAAA,UAAA,CAKR;AAAA,UACAP,EAAU,CAAC,MAAM,UAChB,gBAAAE,EAAAG,GAAA,EACE,UAAA;AAAA,YAAA,gBAAAF;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWK,EAAa;AAAA,kBACtB;AAAA,kBACAJ,EAAM;AAAA,gBAAA,CACP;AAAA,gBACD,MAAK;AAAA,gBACL,eAAY;AAAA,gBAEX,UAAAH;AAAA,cAAA;AAAA,YAAA;AAAA,YAEFD,EAAU,CAAC,EAAE,IAAI,CAACM,GAAUC,MAC3B,gBAAAJ;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWK,EAAa;AAAA,kBACtB;AAAA,kBACAJ,EAAM;AAAA,gBAAA,CACP;AAAA,gBAED,MAAK;AAAA,gBAEJ,UAAAE;AAAA,cAAA;AAAA,cAHIC;AAAA,YAAA,CAKR;AAAA,UAAA,EAAA,CACH;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
+{"version":3,"file":"KeyboardShortcutItem.js","sources":["../../../../src/components/lists/keyboard-shortcut-item/KeyboardShortcutItem.tsx"],"sourcesContent":["import { doClassnames } from '@unoff/utils'\nimport texts from '@styles/texts/texts.module.scss'\nimport './keyboard-shortcut-item.scss'\n\nexport type KeyboardShortcutItemProps = {\n  /**\n   * Label describing the action\n   */\n  label: string\n  /**\n   * Array of keyboard shortcut combinations\n   */\n  shortcuts: Array<Array<string>>\n  /**\n   * Separator between multiple shortcuts\n   * @default ''\n   */\n  separator?: string\n}\n\nconst KeyboardShortcutItem = (props: KeyboardShortcutItemProps) => {\n  const { label, shortcuts = [], separator = '' } = props\n\n  return (\n    <li className=\"keyboard-shortcut-item\">\n      <div\n        className=\"keyboard-shortcut-item__label\"\n        role=\"presentation\"\n      >\n        <span\n          className={texts.type}\n          role=\"presentation\"\n        >\n          {label}\n        </span>\n      </div>\n      <div\n        className=\"keyboard-shortcut-item__keys\"\n        role=\"group\"\n      >\n        <>\n          {shortcuts[0].map((shortcut, index) => (\n            <span\n              className={doClassnames([\n                'keyboard-shortcut-item__key',\n                texts.type,\n              ])}\n              key={index}\n              role=\"presentation\"\n            >\n              {shortcut}\n            </span>\n          ))}\n          {shortcuts[1] !== undefined && (\n            <>\n              <span\n                className={doClassnames([\n                  'keyboard-shortcut-item__separator',\n                  texts.type,\n                ])}\n                role=\"presentation\"\n                aria-hidden=\"true\"\n              >\n                {separator}\n              </span>\n              {shortcuts[1].map((shortcut, index) => (\n                <span\n                  className={doClassnames([\n                    'keyboard-shortcut-item__key',\n                    texts.type,\n                  ])}\n                  key={index}\n                  role=\"presentation\"\n                >\n                  {shortcut}\n                </span>\n              ))}\n            </>\n          )}\n        </>\n      </div>\n    </li>\n  )\n}\n\nexport default KeyboardShortcutItem\n"],"names":["KeyboardShortcutItem","props","label","shortcuts","separator","jsxs","jsx","texts","Fragment","shortcut","index","doClassnames"],"mappings":";;;AAoBA,MAAMA,IAAuB,CAACC,MAAqC;AACjE,QAAM,EAAE,OAAAC,GAAO,WAAAC,IAAY,CAAA,GAAI,WAAAC,IAAY,OAAOH;AAElD,SACE,gBAAAI,EAAC,MAAA,EAAG,WAAU,0BACZ,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QAEL,UAAA,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAM;AAAA,YACjB,MAAK;AAAA,YAEJ,UAAAL;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,IAEF,gBAAAI;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QAEL,UAAA,gBAAAD,EAAAG,GAAA,EACG,UAAA;AAAA,UAAAL,EAAU,CAAC,EAAE,IAAI,CAACM,GAAUC,MAC3B,gBAAAJ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWK,EAAa;AAAA,gBACtB;AAAA,gBACAJ,EAAM;AAAA,cAAA,CACP;AAAA,cAED,MAAK;AAAA,cAEJ,UAAAE;AAAA,YAAA;AAAA,YAHIC;AAAA,UAAA,CAKR;AAAA,UACAP,EAAU,CAAC,MAAM,UAChB,gBAAAE,EAAAG,GAAA,EACE,UAAA;AAAA,YAAA,gBAAAF;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWK,EAAa;AAAA,kBACtB;AAAA,kBACAJ,EAAM;AAAA,gBAAA,CACP;AAAA,gBACD,MAAK;AAAA,gBACL,eAAY;AAAA,gBAEX,UAAAH;AAAA,cAAA;AAAA,YAAA;AAAA,YAEFD,EAAU,CAAC,EAAE,IAAI,CAACM,GAAUC,MAC3B,gBAAAJ;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWK,EAAa;AAAA,kBACtB;AAAA,kBACAJ,EAAM;AAAA,gBAAA,CACP;AAAA,gBAED,MAAK;AAAA,gBAEJ,UAAAE;AAAA,cAAA;AAAA,cAHIC;AAAA,YAAA,CAKR;AAAA,UAAA,EAAA,CACH;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/dist/components/lists/sortable-list/SortableList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableList.js","sources":["../../../../src/components/lists/sortable-list/SortableList.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\nimport DraggableItem from '../draggable-item/DraggableItem'\nimport './sortable-list.scss'\n\ninterface SelectedColor {\n  id: string | undefined\n  position: number\n}\n\ninterface DefaultData {\n  id: string\n}\n\ninterface HoveredColor extends SelectedColor {\n  hasGuideAbove: boolean\n  hasGuideBelow: boolean\n}\n\nexport interface SortableListProps<T = DefaultData> {\n  /**\n   * Array of data items\n   */\n  data: Array<T>\n  /**\n   * Array of primary content nodes\n   */\n  primarySlot: Array<React.ReactNode>\n  /**\n   * Array of secondary content configurations\n   */\n  secondarySlot?: Array<{\n    /** Title for the secondary content */\n    title: string\n    /** Content node */\n    node: React.ReactNode\n  }>\n  /**\n   * Array of action button nodes\n   */\n  actionsSlot?: Array<React.ReactNode>\n  /**\n   * Content to display when list is empty\n   */\n  emptySlot?: React.ReactNode\n  /**\n   * Helper texts for buttons\n   */\n  helpers?: {\n    /** Helper for remove button */\n    remove?: string\n    /** Helper for more options button */\n    more?: string\n  }\n  /**\n   * Whether the list is scrollable\n   * @default false\n   */\n  isScrollable?: boolean\n  /**\n   * Whether to show a top border on scroll\n   * @default false\n   */\n  isTopBorderEnabled?: boolean\n  /**\n   * Whether the list can be empty\n   * @default true\n   */\n  canBeEmpty?: boolean\n  /**\n   * Whether the list is blocked\n   * @default false\n   */\n  isBlocked?: boolean\n  /**\n   * Change handler when list is reordered\n   */\n  onChangeSortableList: (data: Array<T>) => void\n  /**\n   * Remove item handler\n   */\n  onRemoveItem: React.MouseEventHandler<Element> &\n    React.KeyboardEventHandler<Element>\n  /**\n   * Refold options handler\n   */\n  onRefoldOptions: () => void\n}\n\nexport interface SortableListStates {\n  selectedElement: SelectedColor\n  hoveredElement: HoveredColor\n  hasTopBorder: boolean\n}\n\nexport default class SortableList<\n  T extends DefaultData,\n> extends React.Component<SortableListProps<T>, SortableListStates> {\n  private listRef: React.RefObject<HTMLUListElement>\n\n  static defaultProps: Partial<SortableListProps> = {\n    isScrollable: false,\n    isTopBorderEnabled: false,\n    canBeEmpty: true,\n    isBlocked: false,\n  }\n\n  constructor(props: SortableListProps<T>) {\n    super(props)\n    this.state = {\n      selectedElement: {\n        id: undefined,\n        position: 0,\n      },\n      hoveredElement: {\n        id: undefined,\n        hasGuideAbove: false,\n        hasGuideBelow: false,\n        position: 0,\n      },\n      hasTopBorder: false,\n    }\n    this.listRef = React.createRef()\n    this.handleClickOutside = this.handleClickOutside.bind(this)\n  }\n\n  // Lifecycle\n  componentDidMount = () =>\n    document.addEventListener('mousedown', this.handleClickOutside)\n\n  componentWillUnmount = () =>\n    document.removeEventListener('mousedown', this.handleClickOutside)\n\n  handleClickOutside = (e: Event) => {\n    if (this.listRef.current !== null)\n      if (\n        !this.listRef.current.contains(e.target as HTMLElement) ||\n        e.target === this.listRef.current\n      )\n        this.setState({\n          selectedElement: {\n            id: undefined,\n            position: 0,\n          },\n        })\n  }\n\n  // Handlers\n  orderHandler = () => {\n    const { onChangeSortableList, data } = this.props\n    const { selectedElement, hoveredElement } = this.state\n\n    const source: SelectedColor = selectedElement,\n      target: HoveredColor = hoveredElement,\n      duplicatedData = data.map((el) => el)\n\n    let position: number\n    const sourceIndex = duplicatedData.findIndex(\n      (item) => item.id === source.id\n    )\n\n    const [removedElement] = duplicatedData.splice(sourceIndex, 1)\n\n    if (target.hasGuideAbove && target.position > source.position)\n      position = target.position - 1\n    else if (target.hasGuideBelow && target.position > source.position)\n      position = target.position\n    else if (target.hasGuideAbove && target.position < source.position)\n      position = target.position\n    else if (target.hasGuideBelow && target.position < source.position)\n      position = target.position + 1\n    else position = target.position\n\n    duplicatedData.splice(position, 0, removedElement)\n\n    onChangeSortableList(duplicatedData)\n  }\n\n  selectionHandler: React.MouseEventHandler<HTMLLIElement> &\n    React.MouseEventHandler<Element> &\n    React.FocusEventHandler<HTMLInputElement> = (e) => {\n    const item = e.currentTarget as HTMLElement\n    const target = e.target as HTMLElement\n\n    if (\n      target.tagName === 'INPUT' ||\n      target.tagName === 'BUTTON' ||\n      target.tagName === 'TEXTAREA'\n    )\n      return this.setState({\n        selectedElement: {\n          id: undefined,\n          position: 0,\n        },\n      })\n\n    return this.setState({\n      selectedElement: {\n        id: item.dataset.id,\n        position: parseFloat(item.dataset.position ?? '0'),\n      },\n    })\n  }\n\n  dragHandler = (\n    id: string | undefined,\n    hasGuideAbove: boolean,\n    hasGuideBelow: boolean,\n    position: number\n  ) => {\n    this.setState({\n      hoveredElement: {\n        id: id,\n        hasGuideAbove: hasGuideAbove,\n        hasGuideBelow: hasGuideBelow,\n        position: position,\n      },\n    })\n  }\n\n  dropOutsideHandler = (e: React.DragEvent<HTMLLIElement>) => {\n    const target = e.target,\n      parent: ParentNode =\n        (target as HTMLElement).parentNode ?? (target as HTMLElement),\n      scrollY: number = (parent.parentNode?.parentNode as HTMLElement)\n        .scrollTop,\n      parentRefTop: number = (parent as HTMLElement).offsetTop,\n      parentRefBottom: number =\n        parentRefTop + (parent as HTMLElement).clientHeight\n\n    if (e.pageY + scrollY < parentRefTop) this.orderHandler()\n    else if (e.pageY + scrollY > parentRefBottom) this.orderHandler()\n  }\n\n  removeHandler = (\n    e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>\n  ) => {\n    const { onChangeSortableList, data } = this.props\n    const duplicatedData = data.map((el) => el)\n    let id: string | null\n    const element: HTMLElement | null = (\n      e.currentTarget as HTMLElement\n    ).closest('.draggable-item')\n\n    element !== null ? (id = element.getAttribute('data-id')) : (id = null)\n\n    onChangeSortableList(duplicatedData.filter((item) => item.id !== id))\n  }\n\n  // Direct Actions\n  onScroll = (e: React.UIEvent<HTMLUListElement>) => {\n    const { isTopBorderEnabled } = this.props\n\n    e.preventDefault()\n    if (e.currentTarget.scrollTop > 0 && isTopBorderEnabled)\n      this.setState({ hasTopBorder: true })\n    else this.setState({ hasTopBorder: false })\n  }\n\n  // Render\n  render() {\n    const {\n      data,\n      canBeEmpty,\n      isBlocked,\n      primarySlot,\n      secondarySlot,\n      actionsSlot,\n      emptySlot,\n      helpers,\n      isScrollable,\n      onRemoveItem,\n      onRefoldOptions,\n    } = this.props\n    const { selectedElement, hoveredElement, hasTopBorder } = this.state\n\n    if (data.length === 0 && canBeEmpty)\n      return <div className=\"sortable-list\">{emptySlot}</div>\n    return (\n      <ul\n        className={doClassnames([\n          'sortable-list',\n          isScrollable && 'sortable-list--scrollable',\n          hasTopBorder && 'sortable-list--top-border',\n        ])}\n        onScroll={this.onScroll}\n        ref={this.listRef}\n      >\n        {data.map((item, index) => (\n          <DraggableItem\n            key={item.id}\n            id={item.id}\n            index={index}\n            canBeRemoved={\n              (data.length > 1 && !isBlocked) || (canBeEmpty && !isBlocked)\n            }\n            primarySlot={primarySlot[index]}\n            secondarySlot={secondarySlot ? secondarySlot[index] : undefined}\n            actionsSlot={actionsSlot ? actionsSlot[index] : undefined}\n            selected={selectedElement.id === item.id}\n            helpers={{\n              remove: helpers?.remove,\n              more: helpers?.more,\n            }}\n            guideAbove={\n              hoveredElement.id === item.id\n                ? hoveredElement.hasGuideAbove\n                : false\n            }\n            guideBelow={\n              hoveredElement.id === item.id\n                ? hoveredElement.hasGuideBelow\n                : false\n            }\n            isBlocked={isBlocked}\n            onCancelSelection={this.selectionHandler}\n            onRefoldOptions={onRefoldOptions}\n            onChangeOrder={this.orderHandler}\n            onRemove={onRemoveItem}\n            onChangeSelection={this.selectionHandler}\n            onDragChange={this.dragHandler}\n            onDropOutside={this.orderHandler}\n            aria-selected={selectedElement.id === item.id}\n          />\n        ))}\n      </ul>\n    )\n  }\n}\n"],"names":["SortableList","React","props","onChangeSortableList","data","selectedElement","hoveredElement","source","target","duplicatedData","el","position","sourceIndex","item","removedElement","id","hasGuideAbove","hasGuideBelow","parent","scrollY","parentRefTop","parentRefBottom","element","isTopBorderEnabled","canBeEmpty","isBlocked","primarySlot","secondarySlot","actionsSlot","emptySlot","helpers","isScrollable","onRemoveItem","onRefoldOptions","hasTopBorder","jsx","doClassnames","index","DraggableItem"],"mappings":"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"}
+{"version":3,"file":"SortableList.js","sources":["../../../../src/components/lists/sortable-list/SortableList.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames } from '@unoff/utils'\nimport DraggableItem from '../draggable-item/DraggableItem'\nimport './sortable-list.scss'\n\ninterface SelectedColor {\n  id: string | undefined\n  position: number\n}\n\ninterface DefaultData {\n  id: string\n}\n\ninterface HoveredColor extends SelectedColor {\n  hasGuideAbove: boolean\n  hasGuideBelow: boolean\n}\n\nexport interface SortableListProps<T = DefaultData> {\n  /**\n   * Array of data items\n   */\n  data: Array<T>\n  /**\n   * Array of primary content nodes\n   */\n  primarySlot: Array<React.ReactNode>\n  /**\n   * Array of secondary content configurations\n   */\n  secondarySlot?: Array<{\n    /** Title for the secondary content */\n    title: string\n    /** Content node */\n    node: React.ReactNode\n  }>\n  /**\n   * Array of action button nodes\n   */\n  actionsSlot?: Array<React.ReactNode>\n  /**\n   * Content to display when list is empty\n   */\n  emptySlot?: React.ReactNode\n  /**\n   * Helper texts for buttons\n   */\n  helpers?: {\n    /** Helper for remove button */\n    remove?: string\n    /** Helper for more options button */\n    more?: string\n  }\n  /**\n   * Whether the list is scrollable\n   * @default false\n   */\n  isScrollable?: boolean\n  /**\n   * Whether to show a top border on scroll\n   * @default false\n   */\n  isTopBorderEnabled?: boolean\n  /**\n   * Whether the list can be empty\n   * @default true\n   */\n  canBeEmpty?: boolean\n  /**\n   * Whether the list is blocked\n   * @default false\n   */\n  isBlocked?: boolean\n  /**\n   * Change handler when list is reordered\n   */\n  onChangeSortableList: (data: Array<T>) => void\n  /**\n   * Remove item handler\n   */\n  onRemoveItem: React.MouseEventHandler<Element> &\n    React.KeyboardEventHandler<Element>\n  /**\n   * Refold options handler\n   */\n  onRefoldOptions: () => void\n}\n\nexport interface SortableListStates {\n  selectedElement: SelectedColor\n  hoveredElement: HoveredColor\n  hasTopBorder: boolean\n}\n\nexport default class SortableList<\n  T extends DefaultData,\n> extends React.Component<SortableListProps<T>, SortableListStates> {\n  private listRef: React.RefObject<HTMLUListElement>\n\n  static defaultProps: Partial<SortableListProps> = {\n    isScrollable: false,\n    isTopBorderEnabled: false,\n    canBeEmpty: true,\n    isBlocked: false,\n  }\n\n  constructor(props: SortableListProps<T>) {\n    super(props)\n    this.state = {\n      selectedElement: {\n        id: undefined,\n        position: 0,\n      },\n      hoveredElement: {\n        id: undefined,\n        hasGuideAbove: false,\n        hasGuideBelow: false,\n        position: 0,\n      },\n      hasTopBorder: false,\n    }\n    this.listRef = React.createRef()\n    this.handleClickOutside = this.handleClickOutside.bind(this)\n  }\n\n  // Lifecycle\n  componentDidMount = () =>\n    document.addEventListener('mousedown', this.handleClickOutside)\n\n  componentWillUnmount = () =>\n    document.removeEventListener('mousedown', this.handleClickOutside)\n\n  handleClickOutside = (e: Event) => {\n    if (this.listRef.current !== null)\n      if (\n        !this.listRef.current.contains(e.target as HTMLElement) ||\n        e.target === this.listRef.current\n      )\n        this.setState({\n          selectedElement: {\n            id: undefined,\n            position: 0,\n          },\n        })\n  }\n\n  // Handlers\n  orderHandler = () => {\n    const { onChangeSortableList, data } = this.props\n    const { selectedElement, hoveredElement } = this.state\n\n    const source: SelectedColor = selectedElement,\n      target: HoveredColor = hoveredElement,\n      duplicatedData = data.map((el) => el)\n\n    let position: number\n    const sourceIndex = duplicatedData.findIndex(\n      (item) => item.id === source.id\n    )\n\n    const [removedElement] = duplicatedData.splice(sourceIndex, 1)\n\n    if (target.hasGuideAbove && target.position > source.position)\n      position = target.position - 1\n    else if (target.hasGuideBelow && target.position > source.position)\n      position = target.position\n    else if (target.hasGuideAbove && target.position < source.position)\n      position = target.position\n    else if (target.hasGuideBelow && target.position < source.position)\n      position = target.position + 1\n    else position = target.position\n\n    duplicatedData.splice(position, 0, removedElement)\n\n    onChangeSortableList(duplicatedData)\n  }\n\n  selectionHandler: React.MouseEventHandler<HTMLLIElement> &\n    React.MouseEventHandler<Element> &\n    React.FocusEventHandler<HTMLInputElement> = (e) => {\n    const item = e.currentTarget as HTMLElement\n    const target = e.target as HTMLElement\n\n    if (\n      target.tagName === 'INPUT' ||\n      target.tagName === 'BUTTON' ||\n      target.tagName === 'TEXTAREA'\n    )\n      return this.setState({\n        selectedElement: {\n          id: undefined,\n          position: 0,\n        },\n      })\n\n    return this.setState({\n      selectedElement: {\n        id: item.dataset.id,\n        position: parseFloat(item.dataset.position ?? '0'),\n      },\n    })\n  }\n\n  dragHandler = (\n    id: string | undefined,\n    hasGuideAbove: boolean,\n    hasGuideBelow: boolean,\n    position: number\n  ) => {\n    this.setState({\n      hoveredElement: {\n        id: id,\n        hasGuideAbove: hasGuideAbove,\n        hasGuideBelow: hasGuideBelow,\n        position: position,\n      },\n    })\n  }\n\n  dropOutsideHandler = (e: React.DragEvent<HTMLLIElement>) => {\n    const target = e.target,\n      parent: ParentNode =\n        (target as HTMLElement).parentNode ?? (target as HTMLElement),\n      scrollY: number = (parent.parentNode?.parentNode as HTMLElement)\n        .scrollTop,\n      parentRefTop: number = (parent as HTMLElement).offsetTop,\n      parentRefBottom: number =\n        parentRefTop + (parent as HTMLElement).clientHeight\n\n    if (e.pageY + scrollY < parentRefTop) this.orderHandler()\n    else if (e.pageY + scrollY > parentRefBottom) this.orderHandler()\n  }\n\n  removeHandler = (\n    e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>\n  ) => {\n    const { onChangeSortableList, data } = this.props\n    const duplicatedData = data.map((el) => el)\n    let id: string | null\n    const element: HTMLElement | null = (\n      e.currentTarget as HTMLElement\n    ).closest('.draggable-item')\n\n    element !== null ? (id = element.getAttribute('data-id')) : (id = null)\n\n    onChangeSortableList(duplicatedData.filter((item) => item.id !== id))\n  }\n\n  // Direct Actions\n  onScroll = (e: React.UIEvent<HTMLUListElement>) => {\n    const { isTopBorderEnabled } = this.props\n\n    e.preventDefault()\n    if (e.currentTarget.scrollTop > 0 && isTopBorderEnabled)\n      this.setState({ hasTopBorder: true })\n    else this.setState({ hasTopBorder: false })\n  }\n\n  // Render\n  render() {\n    const {\n      data,\n      canBeEmpty,\n      isBlocked,\n      primarySlot,\n      secondarySlot,\n      actionsSlot,\n      emptySlot,\n      helpers,\n      isScrollable,\n      onRemoveItem,\n      onRefoldOptions,\n    } = this.props\n    const { selectedElement, hoveredElement, hasTopBorder } = this.state\n\n    if (data.length === 0 && canBeEmpty)\n      return <div className=\"sortable-list\">{emptySlot}</div>\n    return (\n      <ul\n        className={doClassnames([\n          'sortable-list',\n          isScrollable && 'sortable-list--scrollable',\n          hasTopBorder && 'sortable-list--top-border',\n        ])}\n        onScroll={this.onScroll}\n        ref={this.listRef}\n      >\n        {data.map((item, index) => (\n          <DraggableItem\n            key={item.id}\n            id={item.id}\n            index={index}\n            canBeRemoved={\n              (data.length > 1 && !isBlocked) || (canBeEmpty && !isBlocked)\n            }\n            primarySlot={primarySlot[index]}\n            secondarySlot={secondarySlot ? secondarySlot[index] : undefined}\n            actionsSlot={actionsSlot ? actionsSlot[index] : undefined}\n            selected={selectedElement.id === item.id}\n            helpers={{\n              remove: helpers?.remove,\n              more: helpers?.more,\n            }}\n            guideAbove={\n              hoveredElement.id === item.id\n                ? hoveredElement.hasGuideAbove\n                : false\n            }\n            guideBelow={\n              hoveredElement.id === item.id\n                ? hoveredElement.hasGuideBelow\n                : false\n            }\n            isBlocked={isBlocked}\n            onCancelSelection={this.selectionHandler}\n            onRefoldOptions={onRefoldOptions}\n            onChangeOrder={this.orderHandler}\n            onRemove={onRemoveItem}\n            onChangeSelection={this.selectionHandler}\n            onDragChange={this.dragHandler}\n            onDropOutside={this.orderHandler}\n            aria-selected={selectedElement.id === item.id}\n          />\n        ))}\n      </ul>\n    )\n  }\n}\n"],"names":["SortableList","React","props","onChangeSortableList","data","selectedElement","hoveredElement","source","target","duplicatedData","el","position","sourceIndex","item","removedElement","id","hasGuideAbove","hasGuideBelow","parent","scrollY","parentRefTop","parentRefBottom","element","isTopBorderEnabled","canBeEmpty","isBlocked","primarySlot","secondarySlot","actionsSlot","emptySlot","helpers","isScrollable","onRemoveItem","onRefoldOptions","hasTopBorder","jsx","doClassnames","index","DraggableItem"],"mappings":"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"}

package/dist/components/lists/tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/lists/tabs/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAO1C,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC;QACV,gBAAgB;QAChB,KAAK,EAAE,MAAM,CAAA;QACb,oBAAoB;QACpB,EAAE,EAAE,MAAM,CAAA;QACV,oBAAoB;QACpB,IAAI,CAAC,EAAE;YACL,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAA;YACxB,IAAI,EAAE,QAAQ,CAAA;SACf,CAAA;QACD,mCAAmC;QACnC,SAAS,EAAE,OAAO,CAAA;QAClB,oCAAoC;QACpC,KAAK,CAAC,EAAE,OAAO,CAAA;KAChB,CAAC,CAAA;IACF;;OAEG;IACH,MAAM,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACrC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;OAEG;IACH,MAAM,EAAE,KAAK,CAAC,iBAAiB,GAAG,KAAK,CAAC,oBAAoB,CAAA;CAC7D;AAED,QAAA,MAAM,IAAI,UAAW,SAAS,mDA2K7B,CAAA;AAED,eAAe,IAAI,CAAA"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/lists/tabs/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAA;AAGpB,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAM1C,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC;QACV,gBAAgB;QAChB,KAAK,EAAE,MAAM,CAAA;QACb,oBAAoB;QACpB,EAAE,EAAE,MAAM,CAAA;QACV,oBAAoB;QACpB,IAAI,CAAC,EAAE;YACL,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAA;YACxB,IAAI,EAAE,QAAQ,CAAA;SACf,CAAA;QACD,mCAAmC;QACnC,SAAS,EAAE,OAAO,CAAA;QAClB,oCAAoC;QACpC,KAAK,CAAC,EAAE,OAAO,CAAA;KAChB,CAAC,CAAA;IACF;;OAEG;IACH,MAAM,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACrC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;OAEG;IACH,MAAM,EAAE,KAAK,CAAC,iBAAiB,GAAG,KAAK,CAAC,oBAAoB,CAAA;CAC7D;AAED,QAAA,MAAM,IAAI,UAAW,SAAS,mDA2K7B,CAAA;AAED,eAAe,IAAI,CAAA"}

package/dist/components/lists/tabs/Tabs.figma.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { i } from "../../../index_react-CmuCVQet.js";
+import { i } from "../../../index_react-BkjUklDQ.js";
 import e from "./Tabs.js";
 i.figma.connect(
   e,

package/dist/components/lists/tabs/Tabs.js

@@ -1,11 +1,11 @@
 import '../../../assets/Tabs.css';
 import { jsx as n, jsxs as l } from "react/jsx-runtime";
 import { useState as I, useRef as L, useEffect as C } from "react";
+import { t as a } from "../../../do-classnames-DSDFCvzy.js";
 import c from "../../../styles/texts/texts.module.js";
 import f from "../../tags/chip/Chip.js";
 import { Icon as T } from "../../assets/icon/Icon.js";
 import O from "../../actions/menu/Menu.js";
-import { t as a } from "../../../do-classnames-DSDFCvzy.js";
 const D = (h) => {
   const {
     tabs: r,