@ynput/ayon-frontend-shared 0.3.21 → 0.3.23

package/dist/shared/src/components/EnumEditor/EnumEditorItem.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("../../../../_virtual/jsx-runtime.cjs.js"),i=require("react"),E=require("lodash"),l=require("./EnumEditor.styled.cjs.js"),o=require("clsx"),A=({item:c,onChange:r,onRemove:f,onDuplicate:N,showRemoveButton:m=!0,showDuplicateButton:R=!0,autoFocus:n=!1,isExpanded:x=!0,className:h,pt:s,...k})=>{const{label:w,value:y,icon:a,color:u,isNewAttribute:d}=c,p=i.useRef(null),j=i.useRef(null),b=i.useRef(null),v=i.useRef(null);return i.useEffect(()=>{(n||c.isNewAttribute)&&p.current?.select()},[n,c.isNewAttribute]),i.useEffect(()=>{x&&!n&&!c.isNewAttribute&&setTimeout(()=>p.current?.focus(),250)},[x,n,c.isNewAttribute]),e.jsxRuntimeExports.jsxs(l.EnumItemBody,{...s?.wrapper,...k,className:o(h,s?.wrapper?.className,{expanded:x,collapsed:!x}),children:[e.jsxRuntimeExports.jsxs(l.Row,{...s?.label?.wrapper,children:[e.jsxRuntimeExports.jsx(l.Label,{...s?.label?.label,children:"Label"}),e.jsxRuntimeExports.jsx(l.InputText,{ref:p,value:w,autoFocus:n||d,...s?.label?.input,className:o(s?.label?.input?.className),onChange:t=>{if(!d)return r&&r(["label"],[t.target.value]);j.current&&(j.current.value=E.kebabCase(t.target.value)),r&&r(["label","value"],[t.target.value,E.kebabCase(t.target.value)])},placeholder:"Enter label"})]},"label"),e.jsxRuntimeExports.jsxs(l.Row,{...s?.value?.wrapper,children:[e.jsxRuntimeExports.jsx(l.Label,{...s?.value?.label,children:"Value"}),e.jsxRuntimeExports.jsx(l.InputText,{ref:j,value:j.current?.value||y,...s?.value?.input,className:o(s?.value?.input?.className),onChange:t=>r&&r(["value"],[t.target.value]),placeholder:"Enter value"})]},"value"),e.jsxRuntimeExports.jsxs(l.Row,{...s?.icon?.wrapper,children:[e.jsxRuntimeExports.jsx(l.Label,{...s?.icon?.label,children:"Icon"}),e.jsxRuntimeExports.jsxs(l.PlaceholderWrapper,{style:{position:"relative"},children:[e.jsxRuntimeExports.jsx(l.Placeholder,{style:{display:a?"none":"flex"},onClick:()=>{v.current?.open()},children:"Pick an icon..."}),e.jsxRuntimeExports.jsx(l.IconSelect,{ref:v,value:[a||"question_mark"],widthExpand:!0,...s?.icon?.input,className:o(s?.icon?.input?.className),style:{position:a?"relative":"absolute",visibility:a?"visible":"hidden",...s?.icon?.input?.style},onChange:t=>r&&r(["icon"],[t[0]])}),a&&e.jsxRuntimeExports.jsx(l.Button,{icon:"close",variant:"text",onClick:()=>{r&&r(["icon"],[void 0])}})]})]},"icon"),e.jsxRuntimeExports.jsxs(l.Row,{...s?.color?.wrapper,children:[e.jsxRuntimeExports.jsx(l.Label,{...s?.color?.label,children:"Color"}),e.jsxRuntimeExports.jsxs(l.PlaceholderWrapper,{style:{position:"relative"},children:[e.jsxRuntimeExports.jsxs(l.ColorPicker,{className:u?"active":"",style:{backgroundColor:u||void 0},onClick:()=>b.current?.click(),children:[u?"":"Pick a color...",e.jsxRuntimeExports.jsx("input",{type:"color",ref:b,value:u||"#000000",...s?.color?.input,className:o(s?.color?.input?.className),onChange:t=>r&&r(["color"],[t?.target.value.toString()])})]}),u&&e.jsxRuntimeExports.jsx(l.Button,{icon:"close",variant:"text",onClick:()=>{r&&r(["color"],[void 0])}})]})]},"color"),(m||R)&&e.jsxRuntimeExports.jsxs(l.Row,{...s?.footer,className:o("footer",s?.footer?.className),children:[m&&e.jsxRuntimeExports.jsx(l.ActionWrapper,{children:e.jsxRuntimeExports.jsx(l.Button,{icon:"close",variant:"text",onClick:f,children:"Remove"})}),R&&e.jsxRuntimeExports.jsx(l.ActionWrapper,{children:e.jsxRuntimeExports.jsx(l.Button,{icon:"content_copy",variant:"text",onClick:N,children:"Duplicate"})})]})]})};module.exports=A;
+"use strict";const l=require("../../../../_virtual/jsx-runtime.cjs.js"),i=require("react"),R=require("lodash"),r=require("./EnumEditor.styled.cjs.js"),c=require("clsx"),P=({item:u,onChange:a,onCommit:t,onRemove:N,onDuplicate:w,showRemoveButton:d=!0,showDuplicateButton:E=!0,autoFocus:o=!1,isExpanded:p=!0,className:y,pt:s,...h})=>{const{label:g,value:m,icon:n,color:x,isNewAttribute:j}=u,v=i.useRef(null),b=i.useRef(null),f=i.useRef(null),k=i.useRef(null);return i.useEffect(()=>{(o||u.isNewAttribute)&&v.current?.select()},[o,u.isNewAttribute]),i.useEffect(()=>{p&&!o&&!u.isNewAttribute&&setTimeout(()=>v.current?.focus(),250)},[p,o,u.isNewAttribute]),l.jsxRuntimeExports.jsxs(r.EnumItemBody,{...s?.wrapper,...h,className:c(y,s?.wrapper?.className,{expanded:p,collapsed:!p}),children:[l.jsxRuntimeExports.jsxs(r.Row,{...s?.label?.wrapper,children:[l.jsxRuntimeExports.jsx(r.Label,{...s?.label?.label,children:"Label"}),l.jsxRuntimeExports.jsx(r.InputText,{ref:v,value:g,autoFocus:o||j,...s?.label?.input,className:c(s?.label?.input?.className),onChange:e=>{if(!j)return a&&a(["label"],[e.target.value]);b.current&&(b.current.value=R.kebabCase(e.target.value)),a&&a(["label","value"],[e.target.value,R.kebabCase(e.target.value)])},onBlur:e=>{j?t&&t(["label","value"],[e.target.value,R.kebabCase(e.target.value)]):t&&t(["label"],[e.target.value])},onKeyDown:e=>{e.key==="Enter"&&(e.stopPropagation(),j?t&&t(["label","value"],[e.target.value,R.kebabCase(e.target.value)]):t&&t(["label"],[e.target.value]))},placeholder:"Enter label"})]},"label"),l.jsxRuntimeExports.jsxs(r.Row,{...s?.value?.wrapper,children:[l.jsxRuntimeExports.jsx(r.Label,{...s?.value?.label,children:"Value"}),l.jsxRuntimeExports.jsx(r.InputText,{ref:b,value:b.current?.value||m,...s?.value?.input,className:c(s?.value?.input?.className),onChange:e=>a&&a(["value"],[e.target.value]),onBlur:e=>t&&t(["value"],[e.target.value]),onKeyDown:e=>{e.key==="Enter"&&(e.stopPropagation(),t&&t(["value"],[e.target.value]))},placeholder:"Enter value"})]},"value"),l.jsxRuntimeExports.jsxs(r.Row,{...s?.icon?.wrapper,children:[l.jsxRuntimeExports.jsx(r.Label,{...s?.icon?.label,children:"Icon"}),l.jsxRuntimeExports.jsxs(r.PlaceholderWrapper,{style:{position:"relative"},children:[l.jsxRuntimeExports.jsx(r.Placeholder,{style:{display:n?"none":"flex"},onClick:()=>{k.current?.open()},children:"Pick an icon..."}),l.jsxRuntimeExports.jsx(r.IconSelect,{ref:k,value:[n||"question_mark"],widthExpand:!0,...s?.icon?.input,className:c(s?.icon?.input?.className),style:{position:n?"relative":"absolute",visibility:n?"visible":"hidden",...s?.icon?.input?.style},onChange:e=>{a&&a(["icon"],[e[0]]),t&&t(["icon"],[e[0]])}}),n&&l.jsxRuntimeExports.jsx(r.Button,{icon:"close",variant:"text",onClick:()=>{a&&a(["icon"],[void 0])}})]})]},"icon"),l.jsxRuntimeExports.jsxs(r.Row,{...s?.color?.wrapper,children:[l.jsxRuntimeExports.jsx(r.Label,{...s?.color?.label,children:"Color"}),l.jsxRuntimeExports.jsxs(r.PlaceholderWrapper,{style:{position:"relative"},children:[l.jsxRuntimeExports.jsxs(r.ColorPicker,{className:x?"active":"",style:{backgroundColor:x||void 0},onClick:()=>f.current?.click(),children:[x?"":"Pick a color...",l.jsxRuntimeExports.jsx("input",{type:"color",ref:f,value:x||"#000000",...s?.color?.input,className:c(s?.color?.input?.className),onChange:e=>{a&&a(["color"],[e?.target.value.toString()]),t&&t(["color"],[e?.target.value.toString()])}})]}),x&&l.jsxRuntimeExports.jsx(r.Button,{icon:"close",variant:"text",onClick:()=>{a&&a(["color"],[void 0])}})]})]},"color"),(d||E)&&l.jsxRuntimeExports.jsxs(r.Row,{...s?.footer,className:c("footer",s?.footer?.className),children:[d&&l.jsxRuntimeExports.jsx(r.ActionWrapper,{children:l.jsxRuntimeExports.jsx(r.Button,{icon:"close",variant:"text",onClick:N,children:"Remove"})}),E&&l.jsxRuntimeExports.jsx(r.ActionWrapper,{children:l.jsxRuntimeExports.jsx(r.Button,{icon:"content_copy",variant:"text",onClick:w,children:"Duplicate"})})]})]})};module.exports=P;
 //# sourceMappingURL=EnumEditorItem.cjs.js.map

package/dist/shared/src/components/EnumEditor/EnumEditorItem.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnumEditorItem.cjs.js","sources":["../../../../../src/components/EnumEditor/EnumEditorItem.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { kebabCase } from 'lodash'\n\nimport { DropdownRef, Icon } from '@ynput/ayon-react-components'\n\nimport * as Styled from './EnumEditor.styled'\nimport { AttributeData } from './EnumEditor'\nimport clsx from 'clsx'\n\ntype DivPt = Partial<React.HTMLAttributes<HTMLDivElement>>\n\ntype TextInputPt = Partial<React.ComponentProps<typeof Styled.InputText>>\ntype IconInputPt = Partial<React.ComponentProps<typeof Styled.IconSelect>>\ntype ColorInputPt = Partial<React.InputHTMLAttributes<HTMLInputElement>>\n\nexport interface EnumEditorFieldPt<TInput> {\n  wrapper?: DivPt\n  label?: DivPt\n  input?: Partial<TInput>\n}\n\nexport interface EnumEditorItemPt {\n  wrapper?: DivPt\n  label?: EnumEditorFieldPt<TextInputPt>\n  value?: EnumEditorFieldPt<TextInputPt>\n  icon?: EnumEditorFieldPt<IconInputPt>\n  color?: EnumEditorFieldPt<ColorInputPt>\n  footer?: DivPt\n}\n\nexport interface EnumEditorItemProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  item: AttributeData\n  onChange?: (attr: (keyof AttributeData)[], value: (boolean | string | undefined)[]) => void\n  onRemove?: () => void\n  onDuplicate?: () => void\n  showRemoveButton?: boolean\n  showDuplicateButton?: boolean\n  autoFocus?: boolean\n  isExpanded?: boolean\n  pt?: EnumEditorItemPt\n}\n\nconst EnumEditorItem = ({\n  item,\n  onChange,\n  onRemove,\n  onDuplicate,\n  showRemoveButton = true,\n  showDuplicateButton = true,\n  autoFocus = false,\n  isExpanded = true,\n  className,\n  pt,\n  ...props\n}: EnumEditorItemProps) => {\n  const { label, value, icon, color, isNewAttribute } = item\n  const labelRef = useRef<HTMLInputElement>(null)\n  const valueRef = useRef<HTMLInputElement>(null)\n  const colorPickerRef = useRef<HTMLInputElement>(null)\n  const iconSelectRef = useRef<DropdownRef>(null)\n\n  useEffect(() => {\n    if (autoFocus || item.isNewAttribute) {\n      labelRef.current?.select()\n    }\n  }, [autoFocus, item.isNewAttribute])\n\n  // Handle focus when item becomes expanded\n  useEffect(() => {\n    if (isExpanded && !autoFocus && !item.isNewAttribute) {\n      // Avoids jittery expand animation\n      setTimeout(() => labelRef.current?.focus(), 250)\n    }\n  }, [isExpanded, autoFocus, item.isNewAttribute])\n\n  return (\n    <Styled.EnumItemBody\n      {...pt?.wrapper}\n      {...props}\n      className={clsx(className, pt?.wrapper?.className, {\n        expanded: isExpanded,\n        collapsed: !isExpanded,\n      })}\n    >\n      <Styled.Row key=\"label\" {...pt?.label?.wrapper}>\n        <Styled.Label {...pt?.label?.label}>Label</Styled.Label>\n        <Styled.InputText\n          ref={labelRef}\n          value={label}\n          autoFocus={autoFocus || isNewAttribute}\n          {...pt?.label?.input}\n          className={clsx(pt?.label?.input?.className)}\n          onChange={(event) => {\n            if (!isNewAttribute) {\n              return onChange && onChange(['label'], [event.target.value])\n            }\n            if (valueRef.current) {\n              valueRef.current.value = kebabCase(event.target.value)\n            }\n            onChange &&\n              onChange(['label', 'value'], [event.target.value, kebabCase(event.target.value)])\n          }}\n          placeholder=\"Enter label\"\n        />\n      </Styled.Row>\n\n      <Styled.Row key=\"value\" {...pt?.value?.wrapper}>\n        <Styled.Label {...pt?.value?.label}>Value</Styled.Label>\n        <Styled.InputText\n          ref={valueRef}\n          value={valueRef.current?.value || value}\n          {...pt?.value?.input}\n          className={clsx(pt?.value?.input?.className)}\n          onChange={(event) => onChange && onChange(['value'], [event.target.value])}\n          placeholder=\"Enter value\"\n        />\n      </Styled.Row>\n\n      <Styled.Row key=\"icon\" {...pt?.icon?.wrapper}>\n        <Styled.Label {...pt?.icon?.label}>Icon</Styled.Label>\n\n        <Styled.PlaceholderWrapper style={{ position: 'relative' }}>\n          <Styled.Placeholder\n            style={{ display: icon ? 'none' : 'flex' }}\n            onClick={() => {\n              iconSelectRef.current?.open()\n            }}\n          >\n            Pick an icon...\n          </Styled.Placeholder>\n\n          <Styled.IconSelect\n            ref={iconSelectRef}\n            value={[icon || 'question_mark']}\n            widthExpand\n            {...pt?.icon?.input}\n            className={clsx(pt?.icon?.input?.className)}\n            style={{\n              position: icon ? 'relative' : 'absolute',\n              visibility: icon ? 'visible' : 'hidden',\n              ...pt?.icon?.input?.style,\n            }}\n            onChange={(value) => {\n              return onChange && onChange(['icon'], [value[0]])\n            }}\n          />\n          {icon && (\n            <Styled.Button\n              icon=\"close\"\n              variant=\"text\"\n              onClick={() => {\n                onChange && onChange(['icon'], [undefined])\n              }}\n            />\n          )}\n        </Styled.PlaceholderWrapper>\n      </Styled.Row>\n\n      <Styled.Row key=\"color\" {...pt?.color?.wrapper}>\n        <Styled.Label {...pt?.color?.label}>Color</Styled.Label>\n\n        <Styled.PlaceholderWrapper style={{ position: 'relative' }}>\n          <Styled.ColorPicker\n            className={color ? 'active' : ''}\n            style={{ backgroundColor: color || undefined }}\n            onClick={() => colorPickerRef.current?.click()}\n          >\n            {!color ? 'Pick a color...' : ''}\n            <input\n              type=\"color\"\n              ref={colorPickerRef}\n              value={color || '#000000'}\n              {...pt?.color?.input}\n              className={clsx(pt?.color?.input?.className)}\n              onChange={(event) =>\n                onChange && onChange(['color'], [event?.target.value.toString()])\n              }\n            />\n          </Styled.ColorPicker>\n          {color && (\n            <Styled.Button\n              icon=\"close\"\n              variant=\"text\"\n              onClick={() => {\n                onChange && onChange(['color'], [undefined])\n              }}\n            />\n          )}\n        </Styled.PlaceholderWrapper>\n      </Styled.Row>\n\n      {(showRemoveButton || showDuplicateButton) && (\n        <Styled.Row {...pt?.footer} className={clsx('footer', pt?.footer?.className)}>\n          {showRemoveButton && (\n            <Styled.ActionWrapper>\n              <Styled.Button icon=\"close\" variant=\"text\" onClick={onRemove}>\n                Remove\n              </Styled.Button>\n            </Styled.ActionWrapper>\n          )}\n          {showDuplicateButton && (\n            <Styled.ActionWrapper>\n              <Styled.Button icon=\"content_copy\" variant=\"text\" onClick={onDuplicate}>\n                Duplicate\n              </Styled.Button>\n            </Styled.ActionWrapper>\n          )}\n        </Styled.Row>\n      )}\n    </Styled.EnumItemBody>\n  )\n}\n\nexport default EnumEditorItem\n"],"names":["EnumEditorItem","item","onChange","onRemove","onDuplicate","showRemoveButton","showDuplicateButton","autoFocus","isExpanded","className","pt","props","label","value","icon","color","isNewAttribute","labelRef","useRef","valueRef","colorPickerRef","iconSelectRef","useEffect","jsxs","Styled.EnumItemBody","clsx","Styled.Row","jsx","Styled.Label","Styled.InputText","event","kebabCase","Styled.PlaceholderWrapper","Styled.Placeholder","Styled.IconSelect","Styled.Button","Styled.ColorPicker","Styled.ActionWrapper"],"mappings":"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"}
+{"version":3,"file":"EnumEditorItem.cjs.js","sources":["../../../../../src/components/EnumEditor/EnumEditorItem.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { kebabCase } from 'lodash'\n\nimport { DropdownRef, Icon } from '@ynput/ayon-react-components'\n\nimport * as Styled from './EnumEditor.styled'\nimport { AttributeData } from './EnumEditor'\nimport clsx from 'clsx'\n\ntype DivPt = Partial<React.HTMLAttributes<HTMLDivElement>>\n\ntype TextInputPt = Partial<React.ComponentProps<typeof Styled.InputText>>\ntype IconInputPt = Partial<React.ComponentProps<typeof Styled.IconSelect>>\ntype ColorInputPt = Partial<React.InputHTMLAttributes<HTMLInputElement>>\n\nexport interface EnumEditorFieldPt<TInput> {\n  wrapper?: DivPt\n  label?: DivPt\n  input?: Partial<TInput>\n}\n\nexport interface EnumEditorItemPt {\n  wrapper?: DivPt\n  label?: EnumEditorFieldPt<TextInputPt>\n  value?: EnumEditorFieldPt<TextInputPt>\n  icon?: EnumEditorFieldPt<IconInputPt>\n  color?: EnumEditorFieldPt<ColorInputPt>\n  footer?: DivPt\n}\n\nexport interface EnumEditorItemProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  item: AttributeData\n  onChange?: (attr: (keyof AttributeData)[], value: (boolean | string | undefined)[]) => void\n  onCommit?: (attr: (keyof AttributeData)[], value: (boolean | string | undefined)[]) => void\n  onRemove?: () => void\n  onDuplicate?: () => void\n  showRemoveButton?: boolean\n  showDuplicateButton?: boolean\n  autoFocus?: boolean\n  isExpanded?: boolean\n  pt?: EnumEditorItemPt\n}\n\nconst EnumEditorItem = ({\n  item,\n  onChange,\n  onCommit,\n  onRemove,\n  onDuplicate,\n  showRemoveButton = true,\n  showDuplicateButton = true,\n  autoFocus = false,\n  isExpanded = true,\n  className,\n  pt,\n  ...props\n}: EnumEditorItemProps) => {\n  const { label, value, icon, color, isNewAttribute } = item\n  const labelRef = useRef<HTMLInputElement>(null)\n  const valueRef = useRef<HTMLInputElement>(null)\n  const colorPickerRef = useRef<HTMLInputElement>(null)\n  const iconSelectRef = useRef<DropdownRef>(null)\n\n  useEffect(() => {\n    if (autoFocus || item.isNewAttribute) {\n      labelRef.current?.select()\n    }\n  }, [autoFocus, item.isNewAttribute])\n\n  // Handle focus when item becomes expanded\n  useEffect(() => {\n    if (isExpanded && !autoFocus && !item.isNewAttribute) {\n      // Avoids jittery expand animation\n      setTimeout(() => labelRef.current?.focus(), 250)\n    }\n  }, [isExpanded, autoFocus, item.isNewAttribute])\n\n  return (\n    <Styled.EnumItemBody\n      {...pt?.wrapper}\n      {...props}\n      className={clsx(className, pt?.wrapper?.className, {\n        expanded: isExpanded,\n        collapsed: !isExpanded,\n      })}\n    >\n      <Styled.Row key=\"label\" {...pt?.label?.wrapper}>\n        <Styled.Label {...pt?.label?.label}>Label</Styled.Label>\n        <Styled.InputText\n          ref={labelRef}\n          value={label}\n          autoFocus={autoFocus || isNewAttribute}\n          {...pt?.label?.input}\n          className={clsx(pt?.label?.input?.className)}\n          onChange={(event) => {\n            if (!isNewAttribute) {\n              return onChange && onChange(['label'], [event.target.value])\n            }\n            if (valueRef.current) {\n              valueRef.current.value = kebabCase(event.target.value)\n            }\n            onChange &&\n              onChange(['label', 'value'], [event.target.value, kebabCase(event.target.value)])\n          }}\n          onBlur={(event) => {\n            if (!isNewAttribute) {\n              onCommit && onCommit(['label'], [event.target.value])\n            } else {\n              onCommit &&\n                onCommit(['label', 'value'], [event.target.value, kebabCase(event.target.value)])\n            }\n          }}\n          onKeyDown={(event) => {\n            if (event.key === 'Enter') {\n              event.stopPropagation()\n              if (!isNewAttribute) {\n                onCommit && onCommit(['label'], [(event.target as HTMLInputElement).value])\n              } else {\n                onCommit &&\n                  onCommit(\n                    ['label', 'value'],\n                    [\n                      (event.target as HTMLInputElement).value,\n                      kebabCase((event.target as HTMLInputElement).value),\n                    ],\n                  )\n              }\n            }\n          }}\n          placeholder=\"Enter label\"\n        />\n      </Styled.Row>\n\n      <Styled.Row key=\"value\" {...pt?.value?.wrapper}>\n        <Styled.Label {...pt?.value?.label}>Value</Styled.Label>\n        <Styled.InputText\n          ref={valueRef}\n          value={valueRef.current?.value || value}\n          {...pt?.value?.input}\n          className={clsx(pt?.value?.input?.className)}\n          onChange={(event) => onChange && onChange(['value'], [event.target.value])}\n          onBlur={(event) => onCommit && onCommit(['value'], [event.target.value])}\n          onKeyDown={(event) => {\n            if (event.key === 'Enter') {\n              event.stopPropagation()\n              onCommit && onCommit(['value'], [(event.target as HTMLInputElement).value])\n            }\n          }}\n          placeholder=\"Enter value\"\n        />\n      </Styled.Row>\n\n      <Styled.Row key=\"icon\" {...pt?.icon?.wrapper}>\n        <Styled.Label {...pt?.icon?.label}>Icon</Styled.Label>\n\n        <Styled.PlaceholderWrapper style={{ position: 'relative' }}>\n          <Styled.Placeholder\n            style={{ display: icon ? 'none' : 'flex' }}\n            onClick={() => {\n              iconSelectRef.current?.open()\n            }}\n          >\n            Pick an icon...\n          </Styled.Placeholder>\n\n          <Styled.IconSelect\n            ref={iconSelectRef}\n            value={[icon || 'question_mark']}\n            widthExpand\n            {...pt?.icon?.input}\n            className={clsx(pt?.icon?.input?.className)}\n            style={{\n              position: icon ? 'relative' : 'absolute',\n              visibility: icon ? 'visible' : 'hidden',\n              ...pt?.icon?.input?.style,\n            }}\n            onChange={(value) => {\n              onChange && onChange(['icon'], [value[0]])\n              onCommit && onCommit(['icon'], [value[0]])\n            }}\n          />\n          {icon && (\n            <Styled.Button\n              icon=\"close\"\n              variant=\"text\"\n              onClick={() => {\n                onChange && onChange(['icon'], [undefined])\n              }}\n            />\n          )}\n        </Styled.PlaceholderWrapper>\n      </Styled.Row>\n\n      <Styled.Row key=\"color\" {...pt?.color?.wrapper}>\n        <Styled.Label {...pt?.color?.label}>Color</Styled.Label>\n\n        <Styled.PlaceholderWrapper style={{ position: 'relative' }}>\n          <Styled.ColorPicker\n            className={color ? 'active' : ''}\n            style={{ backgroundColor: color || undefined }}\n            onClick={() => colorPickerRef.current?.click()}\n          >\n            {!color ? 'Pick a color...' : ''}\n            <input\n              type=\"color\"\n              ref={colorPickerRef}\n              value={color || '#000000'}\n              {...pt?.color?.input}\n              className={clsx(pt?.color?.input?.className)}\n              onChange={(event) => {\n                onChange && onChange(['color'], [event?.target.value.toString()])\n                onCommit && onCommit(['color'], [event?.target.value.toString()])\n              }}\n            />\n          </Styled.ColorPicker>\n          {color && (\n            <Styled.Button\n              icon=\"close\"\n              variant=\"text\"\n              onClick={() => {\n                onChange && onChange(['color'], [undefined])\n              }}\n            />\n          )}\n        </Styled.PlaceholderWrapper>\n      </Styled.Row>\n\n      {(showRemoveButton || showDuplicateButton) && (\n        <Styled.Row {...pt?.footer} className={clsx('footer', pt?.footer?.className)}>\n          {showRemoveButton && (\n            <Styled.ActionWrapper>\n              <Styled.Button icon=\"close\" variant=\"text\" onClick={onRemove}>\n                Remove\n              </Styled.Button>\n            </Styled.ActionWrapper>\n          )}\n          {showDuplicateButton && (\n            <Styled.ActionWrapper>\n              <Styled.Button icon=\"content_copy\" variant=\"text\" onClick={onDuplicate}>\n                Duplicate\n              </Styled.Button>\n            </Styled.ActionWrapper>\n          )}\n        </Styled.Row>\n      )}\n    </Styled.EnumItemBody>\n  )\n}\n\nexport default EnumEditorItem\n"],"names":["EnumEditorItem","item","onChange","onCommit","onRemove","onDuplicate","showRemoveButton","showDuplicateButton","autoFocus","isExpanded","className","pt","props","label","value","icon","color","isNewAttribute","labelRef","useRef","valueRef","colorPickerRef","iconSelectRef","useEffect","jsxs","Styled.EnumItemBody","clsx","Styled.Row","jsx","Styled.Label","Styled.InputText","event","kebabCase","Styled.PlaceholderWrapper","Styled.Placeholder","Styled.IconSelect","Styled.Button","Styled.ColorPicker","Styled.ActionWrapper"],"mappings":"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"}

package/dist/shared/src/components/EnumEditor/EnumEditorItem.es.js

@@ -1,156 +1,177 @@
-import { j as e } from "../../../../_virtual/jsx-runtime.es.js";
-import { useRef as v, useEffect as h } from "react";
-import { kebabCase as w } from "lodash";
-import { EnumItemBody as W, Row as n, Label as d, InputText as y, PlaceholderWrapper as R, Placeholder as _, IconSelect as q, Button as b, ColorPicker as C, ActionWrapper as A } from "./EnumEditor.styled.es.js";
-import i from "clsx";
-const H = ({
-  item: a,
-  onChange: r,
-  onRemove: P,
-  onDuplicate: E,
-  showRemoveButton: j = !0,
-  showDuplicateButton: m = !0,
-  autoFocus: s = !1,
-  isExpanded: u = !0,
-  className: I,
-  pt: l,
-  ...S
+import { j as l } from "../../../../_virtual/jsx-runtime.es.js";
+import { useRef as d, useEffect as g } from "react";
+import { kebabCase as f } from "lodash";
+import { EnumItemBody as L, Row as n, Label as p, InputText as P, PlaceholderWrapper as E, Placeholder as T, IconSelect as W, Button as j, ColorPicker as _, ActionWrapper as R } from "./EnumEditor.styled.es.js";
+import s from "clsx";
+const J = ({
+  item: i,
+  onChange: c,
+  onCommit: a,
+  onRemove: A,
+  onDuplicate: I,
+  showRemoveButton: k = !0,
+  showDuplicateButton: y = !0,
+  autoFocus: t = !1,
+  isExpanded: v = !0,
+  className: S,
+  pt: r,
+  ...B
 }) => {
-  const { label: L, value: T, icon: o, color: t, isNewAttribute: p } = a, f = v(null), x = v(null), N = v(null), k = v(null);
-  return h(() => {
-    (s || a.isNewAttribute) && f.current?.select();
-  }, [s, a.isNewAttribute]), h(() => {
-    u && !s && !a.isNewAttribute && setTimeout(() => f.current?.focus(), 250);
-  }, [u, s, a.isNewAttribute]), /* @__PURE__ */ e.jsxs(
-    W,
+  const { label: D, value: K, icon: o, color: u, isNewAttribute: x } = i, N = d(null), b = d(null), h = d(null), w = d(null);
+  return g(() => {
+    (t || i.isNewAttribute) && N.current?.select();
+  }, [t, i.isNewAttribute]), g(() => {
+    v && !t && !i.isNewAttribute && setTimeout(() => N.current?.focus(), 250);
+  }, [v, t, i.isNewAttribute]), /* @__PURE__ */ l.jsxs(
+    L,
     {
-      ...l?.wrapper,
-      ...S,
-      className: i(I, l?.wrapper?.className, {
-        expanded: u,
-        collapsed: !u
+      ...r?.wrapper,
+      ...B,
+      className: s(S, r?.wrapper?.className, {
+        expanded: v,
+        collapsed: !v
       }),
       children: [
-        /* @__PURE__ */ e.jsxs(n, { ...l?.label?.wrapper, children: [
-          /* @__PURE__ */ e.jsx(d, { ...l?.label?.label, children: "Label" }),
-          /* @__PURE__ */ e.jsx(
-            y,
+        /* @__PURE__ */ l.jsxs(n, { ...r?.label?.wrapper, children: [
+          /* @__PURE__ */ l.jsx(p, { ...r?.label?.label, children: "Label" }),
+          /* @__PURE__ */ l.jsx(
+            P,
             {
-              ref: f,
-              value: L,
-              autoFocus: s || p,
-              ...l?.label?.input,
-              className: i(l?.label?.input?.className),
-              onChange: (c) => {
-                if (!p)
-                  return r && r(["label"], [c.target.value]);
-                x.current && (x.current.value = w(c.target.value)), r && r(["label", "value"], [c.target.value, w(c.target.value)]);
+              ref: N,
+              value: D,
+              autoFocus: t || x,
+              ...r?.label?.input,
+              className: s(r?.label?.input?.className),
+              onChange: (e) => {
+                if (!x)
+                  return c && c(["label"], [e.target.value]);
+                b.current && (b.current.value = f(e.target.value)), c && c(["label", "value"], [e.target.value, f(e.target.value)]);
+              },
+              onBlur: (e) => {
+                x ? a && a(["label", "value"], [e.target.value, f(e.target.value)]) : a && a(["label"], [e.target.value]);
+              },
+              onKeyDown: (e) => {
+                e.key === "Enter" && (e.stopPropagation(), x ? a && a(
+                  ["label", "value"],
+                  [
+                    e.target.value,
+                    f(e.target.value)
+                  ]
+                ) : a && a(["label"], [e.target.value]));
               },
               placeholder: "Enter label"
             }
           )
         ] }, "label"),
-        /* @__PURE__ */ e.jsxs(n, { ...l?.value?.wrapper, children: [
-          /* @__PURE__ */ e.jsx(d, { ...l?.value?.label, children: "Value" }),
-          /* @__PURE__ */ e.jsx(
-            y,
+        /* @__PURE__ */ l.jsxs(n, { ...r?.value?.wrapper, children: [
+          /* @__PURE__ */ l.jsx(p, { ...r?.value?.label, children: "Value" }),
+          /* @__PURE__ */ l.jsx(
+            P,
             {
-              ref: x,
-              value: x.current?.value || T,
-              ...l?.value?.input,
-              className: i(l?.value?.input?.className),
-              onChange: (c) => r && r(["value"], [c.target.value]),
+              ref: b,
+              value: b.current?.value || K,
+              ...r?.value?.input,
+              className: s(r?.value?.input?.className),
+              onChange: (e) => c && c(["value"], [e.target.value]),
+              onBlur: (e) => a && a(["value"], [e.target.value]),
+              onKeyDown: (e) => {
+                e.key === "Enter" && (e.stopPropagation(), a && a(["value"], [e.target.value]));
+              },
               placeholder: "Enter value"
             }
           )
         ] }, "value"),
-        /* @__PURE__ */ e.jsxs(n, { ...l?.icon?.wrapper, children: [
-          /* @__PURE__ */ e.jsx(d, { ...l?.icon?.label, children: "Icon" }),
-          /* @__PURE__ */ e.jsxs(R, { style: { position: "relative" }, children: [
-            /* @__PURE__ */ e.jsx(
-              _,
+        /* @__PURE__ */ l.jsxs(n, { ...r?.icon?.wrapper, children: [
+          /* @__PURE__ */ l.jsx(p, { ...r?.icon?.label, children: "Icon" }),
+          /* @__PURE__ */ l.jsxs(E, { style: { position: "relative" }, children: [
+            /* @__PURE__ */ l.jsx(
+              T,
               {
                 style: { display: o ? "none" : "flex" },
                 onClick: () => {
-                  k.current?.open();
+                  w.current?.open();
                 },
                 children: "Pick an icon..."
               }
             ),
-            /* @__PURE__ */ e.jsx(
-              q,
+            /* @__PURE__ */ l.jsx(
+              W,
               {
-                ref: k,
+                ref: w,
                 value: [o || "question_mark"],
                 widthExpand: !0,
-                ...l?.icon?.input,
-                className: i(l?.icon?.input?.className),
+                ...r?.icon?.input,
+                className: s(r?.icon?.input?.className),
                 style: {
                   position: o ? "relative" : "absolute",
                   visibility: o ? "visible" : "hidden",
-                  ...l?.icon?.input?.style
+                  ...r?.icon?.input?.style
                 },
-                onChange: (c) => r && r(["icon"], [c[0]])
+                onChange: (e) => {
+                  c && c(["icon"], [e[0]]), a && a(["icon"], [e[0]]);
+                }
               }
             ),
-            o && /* @__PURE__ */ e.jsx(
-              b,
+            o && /* @__PURE__ */ l.jsx(
+              j,
               {
                 icon: "close",
                 variant: "text",
                 onClick: () => {
-                  r && r(["icon"], [void 0]);
+                  c && c(["icon"], [void 0]);
                 }
               }
             )
           ] })
         ] }, "icon"),
-        /* @__PURE__ */ e.jsxs(n, { ...l?.color?.wrapper, children: [
-          /* @__PURE__ */ e.jsx(d, { ...l?.color?.label, children: "Color" }),
-          /* @__PURE__ */ e.jsxs(R, { style: { position: "relative" }, children: [
-            /* @__PURE__ */ e.jsxs(
-              C,
+        /* @__PURE__ */ l.jsxs(n, { ...r?.color?.wrapper, children: [
+          /* @__PURE__ */ l.jsx(p, { ...r?.color?.label, children: "Color" }),
+          /* @__PURE__ */ l.jsxs(E, { style: { position: "relative" }, children: [
+            /* @__PURE__ */ l.jsxs(
+              _,
               {
-                className: t ? "active" : "",
-                style: { backgroundColor: t || void 0 },
-                onClick: () => N.current?.click(),
+                className: u ? "active" : "",
+                style: { backgroundColor: u || void 0 },
+                onClick: () => h.current?.click(),
                 children: [
-                  t ? "" : "Pick a color...",
-                  /* @__PURE__ */ e.jsx(
+                  u ? "" : "Pick a color...",
+                  /* @__PURE__ */ l.jsx(
                     "input",
                     {
                       type: "color",
-                      ref: N,
-                      value: t || "#000000",
-                      ...l?.color?.input,
-                      className: i(l?.color?.input?.className),
-                      onChange: (c) => r && r(["color"], [c?.target.value.toString()])
+                      ref: h,
+                      value: u || "#000000",
+                      ...r?.color?.input,
+                      className: s(r?.color?.input?.className),
+                      onChange: (e) => {
+                        c && c(["color"], [e?.target.value.toString()]), a && a(["color"], [e?.target.value.toString()]);
+                      }
                     }
                   )
                 ]
               }
             ),
-            t && /* @__PURE__ */ e.jsx(
-              b,
+            u && /* @__PURE__ */ l.jsx(
+              j,
               {
                 icon: "close",
                 variant: "text",
                 onClick: () => {
-                  r && r(["color"], [void 0]);
+                  c && c(["color"], [void 0]);
                 }
               }
             )
           ] })
         ] }, "color"),
-        (j || m) && /* @__PURE__ */ e.jsxs(n, { ...l?.footer, className: i("footer", l?.footer?.className), children: [
-          j && /* @__PURE__ */ e.jsx(A, { children: /* @__PURE__ */ e.jsx(b, { icon: "close", variant: "text", onClick: P, children: "Remove" }) }),
-          m && /* @__PURE__ */ e.jsx(A, { children: /* @__PURE__ */ e.jsx(b, { icon: "content_copy", variant: "text", onClick: E, children: "Duplicate" }) })
+        (k || y) && /* @__PURE__ */ l.jsxs(n, { ...r?.footer, className: s("footer", r?.footer?.className), children: [
+          k && /* @__PURE__ */ l.jsx(R, { children: /* @__PURE__ */ l.jsx(j, { icon: "close", variant: "text", onClick: A, children: "Remove" }) }),
+          y && /* @__PURE__ */ l.jsx(R, { children: /* @__PURE__ */ l.jsx(j, { icon: "content_copy", variant: "text", onClick: I, children: "Duplicate" }) })
         ] })
       ]
     }
   );
 };
 export {
-  H as default
+  J as default
 };
 //# sourceMappingURL=EnumEditorItem.es.js.map

package/dist/shared/src/components/EnumEditor/EnumEditorItem.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnumEditorItem.es.js","sources":["../../../../../src/components/EnumEditor/EnumEditorItem.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { kebabCase } from 'lodash'\n\nimport { DropdownRef, Icon } from '@ynput/ayon-react-components'\n\nimport * as Styled from './EnumEditor.styled'\nimport { AttributeData } from './EnumEditor'\nimport clsx from 'clsx'\n\ntype DivPt = Partial<React.HTMLAttributes<HTMLDivElement>>\n\ntype TextInputPt = Partial<React.ComponentProps<typeof Styled.InputText>>\ntype IconInputPt = Partial<React.ComponentProps<typeof Styled.IconSelect>>\ntype ColorInputPt = Partial<React.InputHTMLAttributes<HTMLInputElement>>\n\nexport interface EnumEditorFieldPt<TInput> {\n  wrapper?: DivPt\n  label?: DivPt\n  input?: Partial<TInput>\n}\n\nexport interface EnumEditorItemPt {\n  wrapper?: DivPt\n  label?: EnumEditorFieldPt<TextInputPt>\n  value?: EnumEditorFieldPt<TextInputPt>\n  icon?: EnumEditorFieldPt<IconInputPt>\n  color?: EnumEditorFieldPt<ColorInputPt>\n  footer?: DivPt\n}\n\nexport interface EnumEditorItemProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  item: AttributeData\n  onChange?: (attr: (keyof AttributeData)[], value: (boolean | string | undefined)[]) => void\n  onRemove?: () => void\n  onDuplicate?: () => void\n  showRemoveButton?: boolean\n  showDuplicateButton?: boolean\n  autoFocus?: boolean\n  isExpanded?: boolean\n  pt?: EnumEditorItemPt\n}\n\nconst EnumEditorItem = ({\n  item,\n  onChange,\n  onRemove,\n  onDuplicate,\n  showRemoveButton = true,\n  showDuplicateButton = true,\n  autoFocus = false,\n  isExpanded = true,\n  className,\n  pt,\n  ...props\n}: EnumEditorItemProps) => {\n  const { label, value, icon, color, isNewAttribute } = item\n  const labelRef = useRef<HTMLInputElement>(null)\n  const valueRef = useRef<HTMLInputElement>(null)\n  const colorPickerRef = useRef<HTMLInputElement>(null)\n  const iconSelectRef = useRef<DropdownRef>(null)\n\n  useEffect(() => {\n    if (autoFocus || item.isNewAttribute) {\n      labelRef.current?.select()\n    }\n  }, [autoFocus, item.isNewAttribute])\n\n  // Handle focus when item becomes expanded\n  useEffect(() => {\n    if (isExpanded && !autoFocus && !item.isNewAttribute) {\n      // Avoids jittery expand animation\n      setTimeout(() => labelRef.current?.focus(), 250)\n    }\n  }, [isExpanded, autoFocus, item.isNewAttribute])\n\n  return (\n    <Styled.EnumItemBody\n      {...pt?.wrapper}\n      {...props}\n      className={clsx(className, pt?.wrapper?.className, {\n        expanded: isExpanded,\n        collapsed: !isExpanded,\n      })}\n    >\n      <Styled.Row key=\"label\" {...pt?.label?.wrapper}>\n        <Styled.Label {...pt?.label?.label}>Label</Styled.Label>\n        <Styled.InputText\n          ref={labelRef}\n          value={label}\n          autoFocus={autoFocus || isNewAttribute}\n          {...pt?.label?.input}\n          className={clsx(pt?.label?.input?.className)}\n          onChange={(event) => {\n            if (!isNewAttribute) {\n              return onChange && onChange(['label'], [event.target.value])\n            }\n            if (valueRef.current) {\n              valueRef.current.value = kebabCase(event.target.value)\n            }\n            onChange &&\n              onChange(['label', 'value'], [event.target.value, kebabCase(event.target.value)])\n          }}\n          placeholder=\"Enter label\"\n        />\n      </Styled.Row>\n\n      <Styled.Row key=\"value\" {...pt?.value?.wrapper}>\n        <Styled.Label {...pt?.value?.label}>Value</Styled.Label>\n        <Styled.InputText\n          ref={valueRef}\n          value={valueRef.current?.value || value}\n          {...pt?.value?.input}\n          className={clsx(pt?.value?.input?.className)}\n          onChange={(event) => onChange && onChange(['value'], [event.target.value])}\n          placeholder=\"Enter value\"\n        />\n      </Styled.Row>\n\n      <Styled.Row key=\"icon\" {...pt?.icon?.wrapper}>\n        <Styled.Label {...pt?.icon?.label}>Icon</Styled.Label>\n\n        <Styled.PlaceholderWrapper style={{ position: 'relative' }}>\n          <Styled.Placeholder\n            style={{ display: icon ? 'none' : 'flex' }}\n            onClick={() => {\n              iconSelectRef.current?.open()\n            }}\n          >\n            Pick an icon...\n          </Styled.Placeholder>\n\n          <Styled.IconSelect\n            ref={iconSelectRef}\n            value={[icon || 'question_mark']}\n            widthExpand\n            {...pt?.icon?.input}\n            className={clsx(pt?.icon?.input?.className)}\n            style={{\n              position: icon ? 'relative' : 'absolute',\n              visibility: icon ? 'visible' : 'hidden',\n              ...pt?.icon?.input?.style,\n            }}\n            onChange={(value) => {\n              return onChange && onChange(['icon'], [value[0]])\n            }}\n          />\n          {icon && (\n            <Styled.Button\n              icon=\"close\"\n              variant=\"text\"\n              onClick={() => {\n                onChange && onChange(['icon'], [undefined])\n              }}\n            />\n          )}\n        </Styled.PlaceholderWrapper>\n      </Styled.Row>\n\n      <Styled.Row key=\"color\" {...pt?.color?.wrapper}>\n        <Styled.Label {...pt?.color?.label}>Color</Styled.Label>\n\n        <Styled.PlaceholderWrapper style={{ position: 'relative' }}>\n          <Styled.ColorPicker\n            className={color ? 'active' : ''}\n            style={{ backgroundColor: color || undefined }}\n            onClick={() => colorPickerRef.current?.click()}\n          >\n            {!color ? 'Pick a color...' : ''}\n            <input\n              type=\"color\"\n              ref={colorPickerRef}\n              value={color || '#000000'}\n              {...pt?.color?.input}\n              className={clsx(pt?.color?.input?.className)}\n              onChange={(event) =>\n                onChange && onChange(['color'], [event?.target.value.toString()])\n              }\n            />\n          </Styled.ColorPicker>\n          {color && (\n            <Styled.Button\n              icon=\"close\"\n              variant=\"text\"\n              onClick={() => {\n                onChange && onChange(['color'], [undefined])\n              }}\n            />\n          )}\n        </Styled.PlaceholderWrapper>\n      </Styled.Row>\n\n      {(showRemoveButton || showDuplicateButton) && (\n        <Styled.Row {...pt?.footer} className={clsx('footer', pt?.footer?.className)}>\n          {showRemoveButton && (\n            <Styled.ActionWrapper>\n              <Styled.Button icon=\"close\" variant=\"text\" onClick={onRemove}>\n                Remove\n              </Styled.Button>\n            </Styled.ActionWrapper>\n          )}\n          {showDuplicateButton && (\n            <Styled.ActionWrapper>\n              <Styled.Button icon=\"content_copy\" variant=\"text\" onClick={onDuplicate}>\n                Duplicate\n              </Styled.Button>\n            </Styled.ActionWrapper>\n          )}\n        </Styled.Row>\n      )}\n    </Styled.EnumItemBody>\n  )\n}\n\nexport default EnumEditorItem\n"],"names":["EnumEditorItem","item","onChange","onRemove","onDuplicate","showRemoveButton","showDuplicateButton","autoFocus","isExpanded","className","pt","props","label","value","icon","color","isNewAttribute","labelRef","useRef","valueRef","colorPickerRef","iconSelectRef","useEffect","jsxs","Styled.EnumItemBody","clsx","Styled.Row","jsx","Styled.Label","Styled.InputText","event","kebabCase","Styled.PlaceholderWrapper","Styled.Placeholder","Styled.IconSelect","Styled.Button","Styled.ColorPicker","Styled.ActionWrapper"],"mappings":"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"}
+{"version":3,"file":"EnumEditorItem.es.js","sources":["../../../../../src/components/EnumEditor/EnumEditorItem.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { kebabCase } from 'lodash'\n\nimport { DropdownRef, Icon } from '@ynput/ayon-react-components'\n\nimport * as Styled from './EnumEditor.styled'\nimport { AttributeData } from './EnumEditor'\nimport clsx from 'clsx'\n\ntype DivPt = Partial<React.HTMLAttributes<HTMLDivElement>>\n\ntype TextInputPt = Partial<React.ComponentProps<typeof Styled.InputText>>\ntype IconInputPt = Partial<React.ComponentProps<typeof Styled.IconSelect>>\ntype ColorInputPt = Partial<React.InputHTMLAttributes<HTMLInputElement>>\n\nexport interface EnumEditorFieldPt<TInput> {\n  wrapper?: DivPt\n  label?: DivPt\n  input?: Partial<TInput>\n}\n\nexport interface EnumEditorItemPt {\n  wrapper?: DivPt\n  label?: EnumEditorFieldPt<TextInputPt>\n  value?: EnumEditorFieldPt<TextInputPt>\n  icon?: EnumEditorFieldPt<IconInputPt>\n  color?: EnumEditorFieldPt<ColorInputPt>\n  footer?: DivPt\n}\n\nexport interface EnumEditorItemProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  item: AttributeData\n  onChange?: (attr: (keyof AttributeData)[], value: (boolean | string | undefined)[]) => void\n  onCommit?: (attr: (keyof AttributeData)[], value: (boolean | string | undefined)[]) => void\n  onRemove?: () => void\n  onDuplicate?: () => void\n  showRemoveButton?: boolean\n  showDuplicateButton?: boolean\n  autoFocus?: boolean\n  isExpanded?: boolean\n  pt?: EnumEditorItemPt\n}\n\nconst EnumEditorItem = ({\n  item,\n  onChange,\n  onCommit,\n  onRemove,\n  onDuplicate,\n  showRemoveButton = true,\n  showDuplicateButton = true,\n  autoFocus = false,\n  isExpanded = true,\n  className,\n  pt,\n  ...props\n}: EnumEditorItemProps) => {\n  const { label, value, icon, color, isNewAttribute } = item\n  const labelRef = useRef<HTMLInputElement>(null)\n  const valueRef = useRef<HTMLInputElement>(null)\n  const colorPickerRef = useRef<HTMLInputElement>(null)\n  const iconSelectRef = useRef<DropdownRef>(null)\n\n  useEffect(() => {\n    if (autoFocus || item.isNewAttribute) {\n      labelRef.current?.select()\n    }\n  }, [autoFocus, item.isNewAttribute])\n\n  // Handle focus when item becomes expanded\n  useEffect(() => {\n    if (isExpanded && !autoFocus && !item.isNewAttribute) {\n      // Avoids jittery expand animation\n      setTimeout(() => labelRef.current?.focus(), 250)\n    }\n  }, [isExpanded, autoFocus, item.isNewAttribute])\n\n  return (\n    <Styled.EnumItemBody\n      {...pt?.wrapper}\n      {...props}\n      className={clsx(className, pt?.wrapper?.className, {\n        expanded: isExpanded,\n        collapsed: !isExpanded,\n      })}\n    >\n      <Styled.Row key=\"label\" {...pt?.label?.wrapper}>\n        <Styled.Label {...pt?.label?.label}>Label</Styled.Label>\n        <Styled.InputText\n          ref={labelRef}\n          value={label}\n          autoFocus={autoFocus || isNewAttribute}\n          {...pt?.label?.input}\n          className={clsx(pt?.label?.input?.className)}\n          onChange={(event) => {\n            if (!isNewAttribute) {\n              return onChange && onChange(['label'], [event.target.value])\n            }\n            if (valueRef.current) {\n              valueRef.current.value = kebabCase(event.target.value)\n            }\n            onChange &&\n              onChange(['label', 'value'], [event.target.value, kebabCase(event.target.value)])\n          }}\n          onBlur={(event) => {\n            if (!isNewAttribute) {\n              onCommit && onCommit(['label'], [event.target.value])\n            } else {\n              onCommit &&\n                onCommit(['label', 'value'], [event.target.value, kebabCase(event.target.value)])\n            }\n          }}\n          onKeyDown={(event) => {\n            if (event.key === 'Enter') {\n              event.stopPropagation()\n              if (!isNewAttribute) {\n                onCommit && onCommit(['label'], [(event.target as HTMLInputElement).value])\n              } else {\n                onCommit &&\n                  onCommit(\n                    ['label', 'value'],\n                    [\n                      (event.target as HTMLInputElement).value,\n                      kebabCase((event.target as HTMLInputElement).value),\n                    ],\n                  )\n              }\n            }\n          }}\n          placeholder=\"Enter label\"\n        />\n      </Styled.Row>\n\n      <Styled.Row key=\"value\" {...pt?.value?.wrapper}>\n        <Styled.Label {...pt?.value?.label}>Value</Styled.Label>\n        <Styled.InputText\n          ref={valueRef}\n          value={valueRef.current?.value || value}\n          {...pt?.value?.input}\n          className={clsx(pt?.value?.input?.className)}\n          onChange={(event) => onChange && onChange(['value'], [event.target.value])}\n          onBlur={(event) => onCommit && onCommit(['value'], [event.target.value])}\n          onKeyDown={(event) => {\n            if (event.key === 'Enter') {\n              event.stopPropagation()\n              onCommit && onCommit(['value'], [(event.target as HTMLInputElement).value])\n            }\n          }}\n          placeholder=\"Enter value\"\n        />\n      </Styled.Row>\n\n      <Styled.Row key=\"icon\" {...pt?.icon?.wrapper}>\n        <Styled.Label {...pt?.icon?.label}>Icon</Styled.Label>\n\n        <Styled.PlaceholderWrapper style={{ position: 'relative' }}>\n          <Styled.Placeholder\n            style={{ display: icon ? 'none' : 'flex' }}\n            onClick={() => {\n              iconSelectRef.current?.open()\n            }}\n          >\n            Pick an icon...\n          </Styled.Placeholder>\n\n          <Styled.IconSelect\n            ref={iconSelectRef}\n            value={[icon || 'question_mark']}\n            widthExpand\n            {...pt?.icon?.input}\n            className={clsx(pt?.icon?.input?.className)}\n            style={{\n              position: icon ? 'relative' : 'absolute',\n              visibility: icon ? 'visible' : 'hidden',\n              ...pt?.icon?.input?.style,\n            }}\n            onChange={(value) => {\n              onChange && onChange(['icon'], [value[0]])\n              onCommit && onCommit(['icon'], [value[0]])\n            }}\n          />\n          {icon && (\n            <Styled.Button\n              icon=\"close\"\n              variant=\"text\"\n              onClick={() => {\n                onChange && onChange(['icon'], [undefined])\n              }}\n            />\n          )}\n        </Styled.PlaceholderWrapper>\n      </Styled.Row>\n\n      <Styled.Row key=\"color\" {...pt?.color?.wrapper}>\n        <Styled.Label {...pt?.color?.label}>Color</Styled.Label>\n\n        <Styled.PlaceholderWrapper style={{ position: 'relative' }}>\n          <Styled.ColorPicker\n            className={color ? 'active' : ''}\n            style={{ backgroundColor: color || undefined }}\n            onClick={() => colorPickerRef.current?.click()}\n          >\n            {!color ? 'Pick a color...' : ''}\n            <input\n              type=\"color\"\n              ref={colorPickerRef}\n              value={color || '#000000'}\n              {...pt?.color?.input}\n              className={clsx(pt?.color?.input?.className)}\n              onChange={(event) => {\n                onChange && onChange(['color'], [event?.target.value.toString()])\n                onCommit && onCommit(['color'], [event?.target.value.toString()])\n              }}\n            />\n          </Styled.ColorPicker>\n          {color && (\n            <Styled.Button\n              icon=\"close\"\n              variant=\"text\"\n              onClick={() => {\n                onChange && onChange(['color'], [undefined])\n              }}\n            />\n          )}\n        </Styled.PlaceholderWrapper>\n      </Styled.Row>\n\n      {(showRemoveButton || showDuplicateButton) && (\n        <Styled.Row {...pt?.footer} className={clsx('footer', pt?.footer?.className)}>\n          {showRemoveButton && (\n            <Styled.ActionWrapper>\n              <Styled.Button icon=\"close\" variant=\"text\" onClick={onRemove}>\n                Remove\n              </Styled.Button>\n            </Styled.ActionWrapper>\n          )}\n          {showDuplicateButton && (\n            <Styled.ActionWrapper>\n              <Styled.Button icon=\"content_copy\" variant=\"text\" onClick={onDuplicate}>\n                Duplicate\n              </Styled.Button>\n            </Styled.ActionWrapper>\n          )}\n        </Styled.Row>\n      )}\n    </Styled.EnumItemBody>\n  )\n}\n\nexport default EnumEditorItem\n"],"names":["EnumEditorItem","item","onChange","onCommit","onRemove","onDuplicate","showRemoveButton","showDuplicateButton","autoFocus","isExpanded","className","pt","props","label","value","icon","color","isNewAttribute","labelRef","useRef","valueRef","colorPickerRef","iconSelectRef","useEffect","jsxs","Styled.EnumItemBody","clsx","Styled.Row","jsx","Styled.Label","Styled.InputText","event","kebabCase","Styled.PlaceholderWrapper","Styled.Placeholder","Styled.IconSelect","Styled.Button","Styled.ColorPicker","Styled.ActionWrapper"],"mappings":"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"}

package/dist/shared/src/components/EnumEditor/hooks/useDraggable.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const r=require("lodash"),h=require("react"),v=({creator:m,initialData:l,onChange:f,normalizer:o,mergeIncomingData:I})=>{const[s,a]=h.useState(l),d=e=>{a(e);const c=o(s),t=o(e);r.isEqual(c,t)||f(t)};return h.useEffect(()=>{a(e=>{const c=o(e),t=o(l);return r.isEqual(c,t)?e:I?I(e,l):l})},[l,I,o]),{items:s,handleAddItem:e=>{d([...s,{...m(),...e,id:r.uniqueId()}])},handleRemoveItem:e=>()=>{d([...s.slice(0,e),...s.slice(e+1)])},handleChangeItem:e=>(c,t)=>{let u={...s[e]};c.map((n,i)=>u[n]=t[i]),d([...s.slice(0,e),u,...s.slice(e+1)])},handleDuplicateItem:(e,c)=>{d([...s.slice(0,e+1),{...s[e],id:r.uniqueId(),...c},...s.slice(e+1)])},handleDraggableEnd:e=>{if(!e.over)return;const c=s.find(i=>i.id==e.active.id),t=s.indexOf(c),u=s.find(i=>i.id==e.over.id),n=s.indexOf(u);t<n?d([...s.slice(0,t),...s.slice(t+1,n+1),c,...s.slice(n+1)]):d([...s.slice(0,n),c,...s.slice(n,t),...s.slice(t+1)])}}};module.exports=v;
+"use strict";const m=require("lodash"),r=require("react"),q=({creator:f,initialData:u,onChange:p,onCommit:a,normalizer:o,mergeIncomingData:I})=>{const[t,h]=r.useState(u),i=e=>{h(e);const c=o(t),s=o(e);m.isEqual(c,s)||p(s)};return r.useEffect(()=>{h(e=>{const c=o(e),s=o(u);return m.isEqual(c,s)?e:I?I(e,u):u})},[u,I,o]),{items:t,handleAddItem:e=>{i([...t,{...f(),...e,id:m.uniqueId()}])},handleRemoveItem:e=>()=>{i([...t.slice(0,e),...t.slice(e+1)])},handleChangeItem:e=>(c,s)=>{let d={...t[e]};c.map((n,l)=>d[n]=s[l]),i([...t.slice(0,e),d,...t.slice(e+1)])},handleCommitItem:e=>(c,s)=>{if(!a)return;let d={...t[e]};c.map((l,v)=>d[l]=s[v]);const n=[...t.slice(0,e),d,...t.slice(e+1)];a(o(n))},handleDuplicateItem:(e,c)=>{i([...t.slice(0,e+1),{...t[e],id:m.uniqueId(),...c},...t.slice(e+1)])},handleDraggableEnd:e=>{if(!e.over)return;const c=t.find(l=>l.id==e.active.id),s=t.indexOf(c),d=t.find(l=>l.id==e.over.id),n=t.indexOf(d);s<n?i([...t.slice(0,s),...t.slice(s+1,n+1),c,...t.slice(n+1)]):i([...t.slice(0,n),c,...t.slice(n,s),...t.slice(s+1)])}}};module.exports=q;
 //# sourceMappingURL=useDraggable.cjs.js.map

package/dist/shared/src/components/EnumEditor/hooks/useDraggable.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDraggable.cjs.js","sources":["../../../../../../src/components/EnumEditor/hooks/useDraggable.ts"],"sourcesContent":["import { DragEndEvent } from '@dnd-kit/core'\nimport { isEqual } from 'lodash'\nimport { uniqueId } from 'lodash'\nimport { useEffect, useState } from 'react'\n\nconst useDraggable = <T extends { id: string }, U>({\n  creator,\n  initialData,\n  onChange,\n  normalizer,\n  mergeIncomingData,\n}: {\n  creator: () => T\n  initialData: T[]\n  onChange: (data: U[]) => void\n  normalizer: (data: T[]) => U[]\n  mergeIncomingData?: (currentData: T[], incomingData: T[]) => T[]\n}) => {\n  const [items, setItems] = useState<T[]>(initialData)\n\n  const updateAndSync = (data: T[]) => {\n    setItems(data)\n\n    const currentNormalized = normalizer(items)\n    const nextNormalized = normalizer(data)\n\n    if (!isEqual(currentNormalized, nextNormalized)) {\n      onChange(nextNormalized)\n    }\n  }\n\n  useEffect(() => {\n    setItems((currentItems) => {\n      const currentNormalized = normalizer(currentItems)\n      const incomingNormalized = normalizer(initialData)\n\n      if (isEqual(currentNormalized, incomingNormalized)) {\n        return currentItems\n      }\n\n      return mergeIncomingData ? mergeIncomingData(currentItems, initialData) : initialData\n    })\n  }, [initialData, mergeIncomingData, normalizer])\n\n  const handleAddItem = (overrides: Partial<T>) => {\n    updateAndSync([...items, { ...creator(), ...overrides, id: uniqueId() }])\n  }\n\n  const handleRemoveItem = (idx: number) => () => {\n    updateAndSync([...items.slice(0, idx), ...items.slice(idx + 1)])\n  }\n\n  const handleChangeItem =\n    (idx: number) => (attrs: (keyof T)[], values: (boolean | string | undefined)[]) => {\n      let updatedItem: T = { ...items[idx] }\n      //@ts-ignore\n      attrs.map((attr, index) => (updatedItem[attr] = values[index]))\n      updateAndSync([...items.slice(0, idx), updatedItem, ...items.slice(idx + 1)])\n    }\n\n  const handleDuplicateItem = (idx: number, overrides: Partial<T>) => {\n    updateAndSync([\n      ...items.slice(0, idx + 1),\n      { ...items[idx], id: uniqueId(), ...overrides },\n      ...items.slice(idx + 1),\n    ])\n  }\n\n  const handleDraggableEnd = (event: DragEndEvent) => {\n    if (!event.over) {\n      return\n    }\n\n    const activeItem = items.find((filterItem) => filterItem.id == event.active.id)\n    const activeItemIndex = items.indexOf(activeItem!)\n    const overItem = items.find((item) => item.id == event.over!.id)\n    const overItemIndex = items.indexOf(overItem!)\n\n    if (activeItemIndex < overItemIndex) {\n      updateAndSync([\n        ...items.slice(0, activeItemIndex),\n        ...items.slice(activeItemIndex + 1, overItemIndex + 1),\n        activeItem!,\n        ...items.slice(overItemIndex + 1),\n      ])\n    } else {\n      updateAndSync([\n        ...items.slice(0, overItemIndex),\n        activeItem!,\n        ...items.slice(overItemIndex, activeItemIndex),\n        ...items.slice(activeItemIndex + 1),\n      ])\n    }\n  }\n\n  return {\n    items,\n    handleAddItem,\n    handleRemoveItem,\n    handleChangeItem,\n    handleDuplicateItem,\n    handleDraggableEnd,\n  }\n}\n\nexport default useDraggable\n"],"names":["useDraggable","creator","initialData","onChange","normalizer","mergeIncomingData","items","setItems","useState","updateAndSync","data","currentNormalized","nextNormalized","isEqual","useEffect","currentItems","incomingNormalized","overrides","uniqueId","idx","attrs","values","updatedItem","attr","index","event","activeItem","filterItem","activeItemIndex","overItem","item","overItemIndex"],"mappings":"0DAKMA,EAAe,CAA8B,CACjD,QAAAC,EACA,YAAAC,EACA,SAAAC,EACA,WAAAC,EACA,kBAAAC,CACF,IAMM,CACJ,KAAM,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAAcN,CAAW,EAE7CO,EAAiBC,GAAc,CACnCH,EAASG,CAAI,EAEb,MAAMC,EAAoBP,EAAWE,CAAK,EACpCM,EAAiBR,EAAWM,CAAI,EAEjCG,EAAAA,QAAQF,EAAmBC,CAAc,GAC5CT,EAASS,CAAc,CAE3B,EAEAE,OAAAA,EAAAA,UAAU,IAAM,CACdP,EAAUQ,GAAiB,CACzB,MAAMJ,EAAoBP,EAAWW,CAAY,EAC3CC,EAAqBZ,EAAWF,CAAW,EAEjD,OAAIW,EAAAA,QAAQF,EAAmBK,CAAkB,EACxCD,EAGFV,EAAoBA,EAAkBU,EAAcb,CAAW,EAAIA,CAC5E,CAAC,CACH,EAAG,CAACA,EAAaG,EAAmBD,CAAU,CAAC,EAqDxC,CACL,MAAAE,EACA,cArDqBW,GAA0B,CAC/CR,EAAc,CAAC,GAAGH,EAAO,CAAE,GAAGL,EAAA,EAAW,GAAGgB,EAAW,GAAIC,WAAA,CAAS,CAAG,CAAC,CAC1E,EAoDE,iBAlDwBC,GAAgB,IAAM,CAC9CV,EAAc,CAAC,GAAGH,EAAM,MAAM,EAAGa,CAAG,EAAG,GAAGb,EAAM,MAAMa,EAAM,CAAC,CAAC,CAAC,CACjE,EAiDE,iBA9CCA,GAAgB,CAACC,EAAoBC,IAA6C,CACjF,IAAIC,EAAiB,CAAE,GAAGhB,EAAMa,CAAG,CAAA,EAEnCC,EAAM,IAAI,CAACG,EAAMC,IAAWF,EAAYC,CAAI,EAAIF,EAAOG,CAAK,CAAE,EAC9Df,EAAc,CAAC,GAAGH,EAAM,MAAM,EAAGa,CAAG,EAAGG,EAAa,GAAGhB,EAAM,MAAMa,EAAM,CAAC,CAAC,CAAC,CAC9E,EA0CA,oBAxC0B,CAACA,EAAaF,IAA0B,CAClER,EAAc,CACZ,GAAGH,EAAM,MAAM,EAAGa,EAAM,CAAC,EACzB,CAAE,GAAGb,EAAMa,CAAG,EAAG,GAAID,EAAAA,SAAA,EAAY,GAAGD,CAAA,EACpC,GAAGX,EAAM,MAAMa,EAAM,CAAC,CAAA,CACvB,CACH,EAmCE,mBAjC0BM,GAAwB,CAClD,GAAI,CAACA,EAAM,KACT,OAGF,MAAMC,EAAapB,EAAM,KAAMqB,GAAeA,EAAW,IAAMF,EAAM,OAAO,EAAE,EACxEG,EAAkBtB,EAAM,QAAQoB,CAAW,EAC3CG,EAAWvB,EAAM,KAAMwB,GAASA,EAAK,IAAML,EAAM,KAAM,EAAE,EACzDM,EAAgBzB,EAAM,QAAQuB,CAAS,EAEzCD,EAAkBG,EACpBtB,EAAc,CACZ,GAAGH,EAAM,MAAM,EAAGsB,CAAe,EACjC,GAAGtB,EAAM,MAAMsB,EAAkB,EAAGG,EAAgB,CAAC,EACrDL,EACA,GAAGpB,EAAM,MAAMyB,EAAgB,CAAC,CAAA,CACjC,EAEDtB,EAAc,CACZ,GAAGH,EAAM,MAAM,EAAGyB,CAAa,EAC/BL,EACA,GAAGpB,EAAM,MAAMyB,EAAeH,CAAe,EAC7C,GAAGtB,EAAM,MAAMsB,EAAkB,CAAC,CAAA,CACnC,CAEL,CAQE,CAEJ"}
+{"version":3,"file":"useDraggable.cjs.js","sources":["../../../../../../src/components/EnumEditor/hooks/useDraggable.ts"],"sourcesContent":["import { DragEndEvent } from '@dnd-kit/core'\nimport { isEqual } from 'lodash'\nimport { uniqueId } from 'lodash'\nimport { useEffect, useState } from 'react'\n\nconst useDraggable = <T extends { id: string }, U>({\n  creator,\n  initialData,\n  onChange,\n  onCommit,\n  normalizer,\n  mergeIncomingData,\n}: {\n  creator: () => T\n  initialData: T[]\n  onChange: (data: U[]) => void\n  onCommit?: (data: U[]) => void\n  normalizer: (data: T[]) => U[]\n  mergeIncomingData?: (currentData: T[], incomingData: T[]) => T[]\n}) => {\n  const [items, setItems] = useState<T[]>(initialData)\n\n  const updateAndSync = (data: T[]) => {\n    setItems(data)\n\n    const currentNormalized = normalizer(items)\n    const nextNormalized = normalizer(data)\n\n    if (!isEqual(currentNormalized, nextNormalized)) {\n      onChange(nextNormalized)\n    }\n  }\n\n  useEffect(() => {\n    setItems((currentItems) => {\n      const currentNormalized = normalizer(currentItems)\n      const incomingNormalized = normalizer(initialData)\n\n      if (isEqual(currentNormalized, incomingNormalized)) {\n        return currentItems\n      }\n\n      return mergeIncomingData ? mergeIncomingData(currentItems, initialData) : initialData\n    })\n  }, [initialData, mergeIncomingData, normalizer])\n\n  const handleAddItem = (overrides: Partial<T>) => {\n    updateAndSync([...items, { ...creator(), ...overrides, id: uniqueId() }])\n  }\n\n  const handleRemoveItem = (idx: number) => () => {\n    updateAndSync([...items.slice(0, idx), ...items.slice(idx + 1)])\n  }\n\n  const handleChangeItem =\n    (idx: number) => (attrs: (keyof T)[], values: (boolean | string | undefined)[]) => {\n      let updatedItem: T = { ...items[idx] }\n      //@ts-ignore\n      attrs.map((attr, index) => (updatedItem[attr] = values[index]))\n      updateAndSync([...items.slice(0, idx), updatedItem, ...items.slice(idx + 1)])\n    }\n\n  const handleCommitItem =\n    (idx: number) => (attrs: (keyof T)[], values: (boolean | string | undefined)[]) => {\n      if (!onCommit) return\n      let updatedItem: T = { ...items[idx] }\n      //@ts-ignore\n      attrs.map((attr, index) => (updatedItem[attr] = values[index]))\n      const nextItems = [...items.slice(0, idx), updatedItem, ...items.slice(idx + 1)]\n      onCommit(normalizer(nextItems))\n    }\n\n  const handleDuplicateItem = (idx: number, overrides: Partial<T>) => {\n    updateAndSync([\n      ...items.slice(0, idx + 1),\n      { ...items[idx], id: uniqueId(), ...overrides },\n      ...items.slice(idx + 1),\n    ])\n  }\n\n  const handleDraggableEnd = (event: DragEndEvent) => {\n    if (!event.over) {\n      return\n    }\n\n    const activeItem = items.find((filterItem) => filterItem.id == event.active.id)\n    const activeItemIndex = items.indexOf(activeItem!)\n    const overItem = items.find((item) => item.id == event.over!.id)\n    const overItemIndex = items.indexOf(overItem!)\n\n    if (activeItemIndex < overItemIndex) {\n      updateAndSync([\n        ...items.slice(0, activeItemIndex),\n        ...items.slice(activeItemIndex + 1, overItemIndex + 1),\n        activeItem!,\n        ...items.slice(overItemIndex + 1),\n      ])\n    } else {\n      updateAndSync([\n        ...items.slice(0, overItemIndex),\n        activeItem!,\n        ...items.slice(overItemIndex, activeItemIndex),\n        ...items.slice(activeItemIndex + 1),\n      ])\n    }\n  }\n\n  return {\n    items,\n    handleAddItem,\n    handleRemoveItem,\n    handleChangeItem,\n    handleCommitItem,\n    handleDuplicateItem,\n    handleDraggableEnd,\n  }\n}\n\nexport default useDraggable\n"],"names":["useDraggable","creator","initialData","onChange","onCommit","normalizer","mergeIncomingData","items","setItems","useState","updateAndSync","data","currentNormalized","nextNormalized","isEqual","useEffect","currentItems","incomingNormalized","overrides","uniqueId","idx","attrs","values","updatedItem","attr","index","nextItems","event","activeItem","filterItem","activeItemIndex","overItem","item","overItemIndex"],"mappings":"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"}

package/dist/shared/src/components/EnumEditor/hooks/useDraggable.es.js

@@ -1,60 +1,68 @@
-import { isEqual as f, uniqueId as I } from "lodash";
-import { useState as p, useEffect as v } from "react";
-const O = ({
-  creator: a,
-  initialData: l,
-  onChange: h,
+import { isEqual as f, uniqueId as h } from "lodash";
+import { useState as g, useEffect as E } from "react";
+const y = ({
+  creator: r,
+  initialData: i,
+  onChange: p,
+  onCommit: I,
   normalizer: o,
   mergeIncomingData: u
 }) => {
-  const [t, r] = p(l), n = (e) => {
-    r(e);
+  const [t, a] = g(i), m = (e) => {
+    a(e);
     const c = o(t), s = o(e);
-    f(c, s) || h(s);
+    f(c, s) || p(s);
   };
-  return v(() => {
-    r((e) => {
-      const c = o(e), s = o(l);
-      return f(c, s) ? e : u ? u(e, l) : l;
+  return E(() => {
+    a((e) => {
+      const c = o(e), s = o(i);
+      return f(c, s) ? e : u ? u(e, i) : i;
     });
-  }, [l, u, o]), {
+  }, [i, u, o]), {
     items: t,
     handleAddItem: (e) => {
-      n([...t, { ...a(), ...e, id: I() }]);
+      m([...t, { ...r(), ...e, id: h() }]);
     },
     handleRemoveItem: (e) => () => {
-      n([...t.slice(0, e), ...t.slice(e + 1)]);
+      m([...t.slice(0, e), ...t.slice(e + 1)]);
     },
     handleChangeItem: (e) => (c, s) => {
-      let m = { ...t[e] };
-      c.map((d, i) => m[d] = s[i]), n([...t.slice(0, e), m, ...t.slice(e + 1)]);
+      let d = { ...t[e] };
+      c.map((n, l) => d[n] = s[l]), m([...t.slice(0, e), d, ...t.slice(e + 1)]);
+    },
+    handleCommitItem: (e) => (c, s) => {
+      if (!I) return;
+      let d = { ...t[e] };
+      c.map((l, v) => d[l] = s[v]);
+      const n = [...t.slice(0, e), d, ...t.slice(e + 1)];
+      I(o(n));
     },
     handleDuplicateItem: (e, c) => {
-      n([
+      m([
         ...t.slice(0, e + 1),
-        { ...t[e], id: I(), ...c },
+        { ...t[e], id: h(), ...c },
         ...t.slice(e + 1)
       ]);
     },
     handleDraggableEnd: (e) => {
       if (!e.over)
         return;
-      const c = t.find((i) => i.id == e.active.id), s = t.indexOf(c), m = t.find((i) => i.id == e.over.id), d = t.indexOf(m);
-      s < d ? n([
+      const c = t.find((l) => l.id == e.active.id), s = t.indexOf(c), d = t.find((l) => l.id == e.over.id), n = t.indexOf(d);
+      s < n ? m([
         ...t.slice(0, s),
-        ...t.slice(s + 1, d + 1),
+        ...t.slice(s + 1, n + 1),
         c,
-        ...t.slice(d + 1)
-      ]) : n([
-        ...t.slice(0, d),
+        ...t.slice(n + 1)
+      ]) : m([
+        ...t.slice(0, n),
         c,
-        ...t.slice(d, s),
+        ...t.slice(n, s),
         ...t.slice(s + 1)
       ]);
     }
   };
 };
 export {
-  O as default
+  y as default
 };
 //# sourceMappingURL=useDraggable.es.js.map