no-frills-ui 0.0.14-alpha.4 → 0.0.14-alpha.5

package/lib-esm/components/DragAndDrop/DragItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragItem.js","sourceRoot":"","sources":["../../../src/components/DragAndDrop/DragItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGH,UAAU,EACV,QAAQ,EACR,SAAS,GAEZ,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAiBnD,wDAAwD;AACxD,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAKrB;cACY,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;;mBAEhD,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;;UAE3D,CAAC,KAAK,EAAE,EAAE,CACR,KAAK,CAAC,WAAW,KAAK,WAAW,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;IAC1D,CAAC,CAAC,SAAS,CAAC,OAAO;IACnB,CAAC,CAAC,aAAa;;UAErB,CAAC,KAAK,EAAE,EAAE,CACR,KAAK,CAAC,WAAW,KAAK,WAAW,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;IAC1D,CAAC,CAAC,SAAS,CAAC,OAAO;IACnB,CAAC,CAAC,aAAa;;UAErB,CAAC,KAAK,EAAE,EAAE,CACR,KAAK,CAAC,WAAW,KAAK,WAAW,CAAC,UAAU,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;IAC5D,CAAC,CAAC,SAAS,CAAC,OAAO;IACnB,CAAC,CAAC,aAAa;;UAErB,CAAC,KAAK,EAAE,EAAE,CACR,KAAK,CAAC,WAAW,KAAK,WAAW,CAAC,UAAU,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;IAC5D,CAAC,CAAC,SAAS,CAAC,OAAO;IACnB,CAAC,CAAC,aAAa;eAChB,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;;;;+CAIL,SAAS,CAAC,aAAa;;;;;;;;+CAQvB,SAAS,CAAC,aAAa;;CAErE,CAAC;AAEF,qDAAqD;AACrD,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA;;;;6BAIE,SAAS,CAAC,QAAQ;CAC9C,CAAC;AAEF,iCAAiC;AACjC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE3B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAuC;IACpE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,eAAe,EAAE,GACxF,KAAK,CAAC;IACV,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACxC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC,CAAC;IAC1E,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAExC;;;OAGG;IACH,MAAM,OAAO,GAAG,CAAC,QAAgB,EAAE,EAAE;QACjC,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACpB,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QAChC,CAAC;IACL,CAAC,CAAC;IAEF;;;OAGG;IACH,MAAM,gBAAgB,GAAqC,GAAG,EAAE;QAC5D,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC7B,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF;;;OAGG;IACH,MAAM,eAAe,GAAqC,CAAC,CAAC,EAAE,EAAE;QAC5D,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,SAAS,CAAC,OAAO,CAAC,UAAU,GAAG,KAAK,CAAC,CAAC;IAC1C,CAAC,CAAC;IAEF;;OAEG;IACH,MAAM,eAAe,GAAqC,GAAG,EAAE;QAC3D,SAAS,CAAC,CAAC,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF;;;OAGG;IACH,MAAM,WAAW,GAAqC,CAAC,CAAC,EAAE,EAAE;QACxD,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,SAAS,CAAC,CAAC,CAAC,CAAC;QACb,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpB,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,CAAC;IAEF;;;OAGG;IACH,MAAM,iBAAiB,GAAsC,GAAG,EAAE;QAC9D,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;YAC1B,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC7B,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YAC5B,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YAC3B,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;YACxC,OAAO,CAAC,EAAE,CAAC,CAAC;QAChB,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,aAAa,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF;;;;OAIG;IACH,MAAM,gBAAgB,GAAsC,CAAC,CAAC,EAAE,EAAE;;QAC9D,MAAM,KAAK,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAC3B,IAAI,CAAC,KAAK;YAAE,OAAO;QAEnB,IAAI,OAAO,CAAC,UAAU,EAAE,CAAC;YACrB,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,wCAAwC;YACxC,MAAM,EAAE,GAAG,QAAQ,CAAC,gBAAgB,CAChC,KAAK,CAAC,OAAO,EACb,KAAK,CAAC,OAAO,CACM,CAAC;YACxB,MAAM,QAAQ,GAAG,MAAA,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,OAAO,CAAC,mBAAmB,CAAC,0CAAE,YAAY,CAAC,iBAAiB,CAAC,CAAC;YACnF,MAAM,SAAS,GAAG,QAAQ,IAAI,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;YAEnE,yDAAyD;YACzD,IAAI,SAAS,KAAK,IAAI,EAAE,CAAC;gBACrB,OAAO,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;YACnC,CAAC;QACL,CAAC;aAAM,IAAI,UAAU,EAAE,CAAC;YACpB,YAAY,CAAC,UAAU,CAAC,CAAC;YACzB,aAAa,CAAC,IAAI,CAAC,CAAC;QACxB,CAAC;IACL,CAAC,CAAC;IAEF;;;OAGG;IACH,MAAM,eAAe,GAAsC,GAAG,EAAE;QAC5D,IAAI,UAAU,EAAE,CAAC;YACb,YAAY,CAAC,UAAU,CAAC,CAAC;YACzB,aAAa,CAAC,IAAI,CAAC,CAAC;QACxB,CAAC;QAED,IAAI,OAAO,CAAC,UAAU,EAAE,CAAC;YACrB,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YACvB,OAAO,CAAC,EAAE,CAAC,CAAC;YACZ,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC7B,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC;QAC1C,CAAC;IACL,CAAC,CAAC;IAEF;;;OAGG;IACH,MAAM,aAAa,GAAG,CAAC,CAAsB,EAAE,EAAE;QAC7C,MAAM,UAAU,GAAG,WAAW,KAAK,WAAW,CAAC,QAAQ,CAAC;QACxD,MAAM,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC;QACpD,MAAM,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC;QAEzD,MAAM,SAAS,GAAG,OAAO,CAAC,UAAU,IAAI,OAAO,CAAC,UAAU,KAAK,KAAK,CAAC;QAErE,qBAAqB;QACrB,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,UAAU,EAAE,CAAC;YACxC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,SAAS,EAAE,CAAC;gBACZ,2BAA2B;gBAC3B,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACpB,eAAe,CACX,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAAC,2BAA2B,EAAE;oBACvE,QAAQ,EAAE,KAAK,GAAG,CAAC;iBACtB,CAAC,CACL,CAAC;YACN,CAAC;iBAAM,CAAC;gBACJ,YAAY;gBACZ,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;gBACzB,eAAe,CACX,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAAC,2BAA2B,EAAE;oBACvE,QAAQ,EAAE,KAAK,GAAG,CAAC;iBACtB,CAAC,CACL,CAAC;YACN,CAAC;QACL,CAAC;QACD,gBAAgB;aACX,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,SAAS,EAAE,CAAC;YACtC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACpB,eAAe,CACX,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAAC,2BAA2B,EAAE;gBACvE,QAAQ,EAAE,KAAK,GAAG,CAAC;aACtB,CAAC,CACL,CAAC;QACN,CAAC;QACD,mBAAmB;aACd,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,SAAS,EAAE,CAAC;YACvC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,OAAO,CAAC,MAAM,EAAE,CAAC;YACjB,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC;QAChE,CAAC;QACD,mCAAmC;aAC9B,IAAI,SAAS,EAAE,CAAC;YACjB,IAAI,CAAC,CAAC,GAAG,KAAK,MAAM,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;gBAChC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,6DAA6D;gBAC7D,MAAM,QAAQ,GAAG,KAAK,GAAG,CAAC,CAAC;gBAC3B,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;gBAC7C,OAAO,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;gBAChC,eAAe,CACX,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAAC,yBAAyB,EAAE;oBACrE,QAAQ,EAAE,QAAQ,GAAG,CAAC;iBACzB,CAAC,CACL,CAAC;YACN,CAAC;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,GAAG,UAAU,GAAG,CAAC,EAAE,CAAC;gBACtD,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,6DAA6D;gBAC7D,MAAM,QAAQ,GAAG,KAAK,GAAG,CAAC,CAAC;gBAC3B,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;gBAC7C,OAAO,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;gBAChC,eAAe,CACX,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAAC,yBAAyB,EAAE;oBACrE,QAAQ,EAAE,QAAQ,GAAG,CAAC;iBACzB,CAAC,CACL,CAAC;YACN,CAAC;QACL,CAAC;IACL,CAAC,CAAC;IAEF,qCAAqC;IACrC,SAAS,CAAC,GAAG,EAAE;QACX,OAAO,GAAG,EAAE;YACR,IAAI,UAAU;gBAAE,YAAY,CAAC,UAAU,CAAC,CAAC;YACzC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC;QAC1C,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,oDAAoD;IACpD,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,OAAO,CAAC,UAAU,IAAI,QAAQ,KAAK,KAAK,EAAE,CAAC;YAC3C,SAAS,CAAC,OAAO,CAAC,UAAU,GAAG,KAAK,CAAC,CAAC;QAC1C,CAAC;aAAM,CAAC;YACJ,SAAS,CAAC,CAAC,CAAC,CAAC;QACjB,CAAC;IACL,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,UAAU,EAAE,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC;IAE9D,OAAO,CACH,MAAC,IAAI,IACD,SAAS,EAAE,CAAC,aAAa,EACzB,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,OAAO,CAAC,UAAU,IAAI,OAAO,CAAC,UAAU,KAAK,KAAK,EAC5D,WAAW,EAAE,WAAW,qBACP,KAAK,EACtB,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,UAAU,gBACH,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAqB,EAAE;YAC7E,QAAQ,EAAE,KAAK,GAAG,CAAC;SACtB,CAAC,kBACY,OAAO,CAAC,UAAU,IAAI,OAAO,CAAC,UAAU,KAAK,KAAK,EAChE,SAAS,EAAE,aAAa,EACxB,WAAW,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,EAC1D,UAAU,EAAE,eAAe,EAC3B,WAAW,EAAE,eAAe,EAC5B,MAAM,EAAE,WAAW,EACnB,YAAY,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,EAC5D,WAAW,EAAE,gBAAgB,EAC7B,UAAU,EAAE,eAAe,EAC3B,aAAa,EAAE,eAAe,aAE7B,aAAa,IAAI,CACd,KAAC,QAAQ,IACL,SAAS,QACT,IAAI,EAAC,QAAQ,gBACD,OAAO,CAAC,IAAI,CAAC,mBAAmB,EAC5C,WAAW,EAAE,gBAAgB,EAC7B,YAAY,EAAE,iBAAiB,EAC/B,SAAS,EAAE,aAAa,EACxB,QAAQ,EAAE,CAAC,CAAC,YAEZ,KAAC,aAAa,KAAG,GACV,CACd,EACD,KAAC,SAAS,cAAE,QAAQ,GAAa,IAC9B,CACV,CAAC;AACN,CAAC","sourcesContent":["import {\n    DragEventHandler,\n    PropsWithChildren,\n    useContext,\n    useState,\n    useEffect,\n    TouchEventHandler,\n} from 'react';\nimport styled from '@emotion/styled';\nimport { DragIndicator } from '../../icons';\nimport constants from '../../shared/constants';\nimport { ORIENTATION, DragContext } from './types';\n\ninterface DragItemProps {\n    /** Position index of the draggable item */\n    index: number;\n    /** Orientation of the drag operation (VERTICAL or HORIZONTAL) */\n    orientation: ORIENTATION;\n    /** Whether to show a drag handle indicator instead of making the entire item draggable */\n    showIndicator: boolean;\n    /** The index of the item currently being dragged over */\n    dragOver: number;\n    /** Total number of items in the list */\n    totalItems: number;\n    /** Callback to set announcement for screen readers */\n    setAnnouncement: (message: string) => void;\n}\n\n/** Styled component for the draggable item container */\nconst Item = styled.div<{\n    active: number;\n    orientation: ORIENTATION;\n    showIndicator: boolean;\n    dragging: boolean;\n}>`\n    cursor: ${(props) => (props.showIndicator ? 'default' : 'move')};\n    display: flex;\n    user-select: ${(props) => (props.showIndicator ? 'auto' : 'none')};\n    border-top: 2px dashed\n        ${(props) =>\n            props.orientation === ORIENTATION.VERTICAL && props.active > 0\n                ? constants.PRIMARY\n                : 'transparent'};\n    border-bottom: 2px dashed\n        ${(props) =>\n            props.orientation === ORIENTATION.VERTICAL && props.active < 0\n                ? constants.PRIMARY\n                : 'transparent'};\n    border-left: 2px dashed\n        ${(props) =>\n            props.orientation === ORIENTATION.HORIZONTAL && props.active > 0\n                ? constants.PRIMARY\n                : 'transparent'};\n    border-right: 2px dashed\n        ${(props) =>\n            props.orientation === ORIENTATION.HORIZONTAL && props.active < 0\n                ? constants.PRIMARY\n                : 'transparent'};\n    opacity: ${(props) => (props.dragging ? 0.5 : 1)};\n    border-radius: 10px;\n\n    &:focus {\n        box-shadow: 0 0 0 4px var(--primary, ${constants.PRIMARY_LIGHT});\n    }\n\n    &:focus:not(:focus-visible) {\n        box-shadow: none;\n    }\n\n    &:focus-visible {\n        box-shadow: 0 0 0 4px var(--primary, ${constants.PRIMARY_LIGHT});\n    }\n`;\n\n/** Styled component for the drag handle indicator */\nconst DragKnob = styled.div`\n    padding-top: 8px;\n    cursor: move;\n    touch-action: none;\n    color: var(--disabled, ${constants.DISABLED});\n`;\n\n/** Container for the children */\nconst Container = styled.div`\n    flex: 1;\n`;\n\n/**\n * A draggable item component that supports both mouse and touch interactions for drag-and-drop functionality.\n *\n * @component\n * @example\n * ```tsx\n * <DragItem\n *   index={0}\n *   orientation={ORIENTATION.VERTICAL}\n *   showIndicator={true}\n *   dragOver={-1}\n * >\n *   <div>Draggable content</div>\n * </DragItem>\n * ```\n *\n * @param props - The component props\n * @param props.index - The position index of this item in the draggable list\n * @param props.orientation - The orientation of the drag operation (VERTICAL or HORIZONTAL)\n * @param props.showIndicator - Whether to show a drag handle indicator instead of making the entire item draggable\n * @param props.dragOver - The index of the item currently being dragged over\n * @param props.children - The content to be rendered inside the draggable item\n *\n * @remarks\n * - Uses the DragContext to manage drag state across items\n * - Provides visual feedback with borders during drag operations\n * - Supports haptic feedback (vibration) on touch devices\n * - For touch devices, requires a 200ms hold before drag starts\n * - When showIndicator is true, only the drag handle can initiate drag operations\n *\n * @returns A draggable item with optional drag indicator and visual feedback\n */\nexport default function DragItem(props: PropsWithChildren<DragItemProps>) {\n    const { index, orientation, children, showIndicator, dragOver, totalItems, setAnnouncement } =\n        props;\n    const [active, setActive] = useState(0);\n    const [touchTimer, setTouchTimer] = useState<NodeJS.Timeout | null>(null);\n    const context = useContext(DragContext);\n\n    /**\n     * Vibrate the device for haptic feedback\n     * @param duration Duration of the vibration in milliseconds\n     */\n    const vibrate = (duration: number) => {\n        if (navigator.vibrate) {\n            navigator.vibrate(duration);\n        }\n    };\n\n    /**\n     * Drag start event handler\n     * @param e Event\n     */\n    const dragStartHandler: DragEventHandler<HTMLDivElement> = () => {\n        context.setStartIndex(index);\n        context.setIsDragging(true);\n    };\n\n    /**\n     * Drag over event handler\n     * @param e Event\n     */\n    const dragOverHandler: DragEventHandler<HTMLDivElement> = (e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        setActive(context.startIndex - index);\n    };\n\n    /**\n     * Drag leave event handler\n     */\n    const dragExitHandler: DragEventHandler<HTMLDivElement> = () => {\n        setActive(0);\n    };\n\n    /**\n     * Drop event handler\n     * @param e Event\n     */\n    const dropHandler: DragEventHandler<HTMLDivElement> = (e) => {\n        e.preventDefault();\n        setActive(0);\n        context.drop(index);\n        context.setIsDragging(false);\n    };\n\n    /**\n     * Touch start event handler\n     * @param e Event\n     */\n    const touchStartHandler: TouchEventHandler<HTMLDivElement> = () => {\n        const timer = setTimeout(() => {\n            context.setStartIndex(index);\n            context.setIsDragging(true);\n            context.setDragOver(index);\n            document.body.style.overflow = 'hidden';\n            vibrate(50);\n        }, 200);\n\n        setTouchTimer(timer);\n    };\n\n    /**\n     * Touch move event handler\n     * @param e Event\n     * @returns void\n     */\n    const touchMoveHandler: TouchEventHandler<HTMLDivElement> = (e) => {\n        const touch = e.touches[0];\n        if (!touch) return;\n\n        if (context.isDragging) {\n            e.preventDefault();\n\n            // get the element under the touch point\n            const el = document.elementFromPoint(\n                touch.clientX,\n                touch.clientY,\n            ) as HTMLElement | null;\n            const overAttr = el?.closest('[data-drag-index]')?.getAttribute('data-drag-index');\n            const overIndex = overAttr != null ? parseInt(overAttr, 10) : null;\n\n            // if we know which index we're over, update visual state\n            if (overIndex !== null) {\n                context.setDragOver(overIndex);\n            }\n        } else if (touchTimer) {\n            clearTimeout(touchTimer);\n            setTouchTimer(null);\n        }\n    };\n\n    /**\n     * Touch end event handler\n     * @param e Event\n     */\n    const touchEndHandler: TouchEventHandler<HTMLDivElement> = () => {\n        if (touchTimer) {\n            clearTimeout(touchTimer);\n            setTouchTimer(null);\n        }\n\n        if (context.isDragging) {\n            context.drop(dragOver);\n            vibrate(50);\n            context.setIsDragging(false);\n            document.body.style.overflow = 'auto';\n        }\n    };\n\n    /**\n     * Keyboard navigation handler for reordering items\n     * @param e Keyboard event\n     */\n    const handleKeyDown = (e: React.KeyboardEvent) => {\n        const isVertical = orientation === ORIENTATION.VERTICAL;\n        const moveUp = isVertical ? 'ArrowUp' : 'ArrowLeft';\n        const moveDown = isVertical ? 'ArrowDown' : 'ArrowRight';\n\n        const isGrabbed = context.isDragging && context.startIndex === index;\n\n        // Space to grab/drop\n        if (e.key === ' ' || e.key === 'Spacebar') {\n            e.preventDefault();\n            if (isGrabbed) {\n                // Drop at current position\n                context.drop(index);\n                setAnnouncement(\n                    context.i18n.replacePlaceholders(context.i18n.droppedAnnouncementTemplate, {\n                        position: index + 1,\n                    }),\n                );\n            } else {\n                // Grab item\n                context.startGrab(index);\n                setAnnouncement(\n                    context.i18n.replacePlaceholders(context.i18n.grabbedAnnouncementTemplate, {\n                        position: index + 1,\n                    }),\n                );\n            }\n        }\n        // Enter to drop\n        else if (e.key === 'Enter' && isGrabbed) {\n            e.preventDefault();\n            context.drop(index);\n            setAnnouncement(\n                context.i18n.replacePlaceholders(context.i18n.droppedAnnouncementTemplate, {\n                    position: index + 1,\n                }),\n            );\n        }\n        // Escape to cancel\n        else if (e.key === 'Escape' && isGrabbed) {\n            e.preventDefault();\n            context.cancel();\n            setAnnouncement(context.i18n.cancelledAnnouncementTemplate);\n        }\n        // Arrow keys to move while grabbed\n        else if (isGrabbed) {\n            if (e.key === moveUp && index > 0) {\n                e.preventDefault();\n                // Move without dropping - just reorder and update startIndex\n                const newIndex = index - 1;\n                context.onDrop(context.startIndex, newIndex);\n                context.setStartIndex(newIndex);\n                setAnnouncement(\n                    context.i18n.replacePlaceholders(context.i18n.movedAnnouncementTemplate, {\n                        position: newIndex + 1,\n                    }),\n                );\n            } else if (e.key === moveDown && index < totalItems - 1) {\n                e.preventDefault();\n                // Move without dropping - just reorder and update startIndex\n                const newIndex = index + 1;\n                context.onDrop(context.startIndex, newIndex);\n                context.setStartIndex(newIndex);\n                setAnnouncement(\n                    context.i18n.replacePlaceholders(context.i18n.movedAnnouncementTemplate, {\n                        position: newIndex + 1,\n                    }),\n                );\n            }\n        }\n    };\n\n    /** Cleanup touch timer on unmount */\n    useEffect(() => {\n        return () => {\n            if (touchTimer) clearTimeout(touchTimer);\n            document.body.style.overflow = 'auto';\n        };\n    }, [touchTimer]);\n\n    /** Update active state based on dragOver changes */\n    useEffect(() => {\n        if (context.isDragging && dragOver === index) {\n            setActive(context.startIndex - index);\n        } else {\n            setActive(0);\n        }\n    }, [dragOver, context.startIndex, index, context.isDragging]);\n\n    return (\n        <Item\n            draggable={!showIndicator}\n            showIndicator={showIndicator}\n            active={active}\n            dragging={context.isDragging && context.startIndex === index}\n            orientation={orientation}\n            data-drag-index={index}\n            tabIndex={0}\n            role=\"listitem\"\n            aria-label={context.i18n.replacePlaceholders(context.i18n.itemAriaLabelTemplate, {\n                position: index + 1,\n            })}\n            aria-grabbed={context.isDragging && context.startIndex === index}\n            onKeyDown={handleKeyDown}\n            onDragStart={!showIndicator ? dragStartHandler : undefined}\n            onDragOver={dragOverHandler}\n            onDragLeave={dragExitHandler}\n            onDrop={dropHandler}\n            onTouchStart={!showIndicator ? touchStartHandler : undefined}\n            onTouchMove={touchMoveHandler}\n            onTouchEnd={touchEndHandler}\n            onTouchCancel={touchEndHandler}\n        >\n            {showIndicator && (\n                <DragKnob\n                    draggable\n                    role=\"button\"\n                    aria-label={context.i18n.dragHandleAriaLabel}\n                    onDragStart={dragStartHandler}\n                    onTouchStart={touchStartHandler}\n                    onKeyDown={handleKeyDown}\n                    tabIndex={-1}\n                >\n                    <DragIndicator />\n                </DragKnob>\n            )}\n            <Container>{children}</Container>\n        </Item>\n    );\n}\n"]}
+{"version":3,"file":"DragItem.js","sourceRoot":"","sources":["../../../src/components/DragAndDrop/DragItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    DragEventHandler,\n    PropsWithChildren,\n    useContext,\n    useState,\n    useEffect,\n    TouchEventHandler,\n} from 'react';\nimport styled from '@emotion/styled';\nimport { DragIndicator } from '../../icons';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport { ORIENTATION, DragContext } from './types';\n\ninterface DragItemProps {\n    /** Position index of the draggable item */\n    index: number;\n    /** Orientation of the drag operation (VERTICAL or HORIZONTAL) */\n    orientation: ORIENTATION;\n    /** Whether to show a drag handle indicator instead of making the entire item draggable */\n    showIndicator: boolean;\n    /** The index of the item currently being dragged over */\n    dragOver: number;\n    /** Total number of items in the list */\n    totalItems: number;\n    /** Callback to set announcement for screen readers */\n    setAnnouncement: (message: string) => void;\n}\n\n/** Styled component for the draggable item container */\nconst Item = styled.div<{\n    active: number;\n    orientation: ORIENTATION;\n    showIndicator: boolean;\n    dragging: boolean;\n}>`\n    cursor: ${(props) => (props.showIndicator ? 'default' : 'move')};\n    display: flex;\n    user-select: ${(props) => (props.showIndicator ? 'auto' : 'none')};\n    border-top: 2px dashed\n        ${(props) =>\n            props.orientation === ORIENTATION.VERTICAL && props.active > 0\n                ? getThemeValue(THEME_NAME.PRIMARY)\n                : 'transparent'};\n    border-bottom: 2px dashed\n        ${(props) =>\n            props.orientation === ORIENTATION.VERTICAL && props.active < 0\n                ? getThemeValue(THEME_NAME.PRIMARY)\n                : 'transparent'};\n    border-left: 2px dashed\n        ${(props) =>\n            props.orientation === ORIENTATION.HORIZONTAL && props.active > 0\n                ? getThemeValue(THEME_NAME.PRIMARY)\n                : 'transparent'};\n    border-right: 2px dashed\n        ${(props) =>\n            props.orientation === ORIENTATION.HORIZONTAL && props.active < 0\n                ? getThemeValue(THEME_NAME.PRIMARY)\n                : 'transparent'};\n    opacity: ${(props) => (props.dragging ? 0.5 : 1)};\n    border-radius: 10px;\n\n    &:focus {\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    &:focus:not(:focus-visible) {\n        box-shadow: none;\n    }\n\n    &:focus-visible {\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n`;\n\n/** Styled component for the drag handle indicator */\nconst DragKnob = styled.div`\n    padding-top: 8px;\n    cursor: move;\n    touch-action: none;\n    color: ${getThemeValue(THEME_NAME.DISABLED)};\n`;\n\n/** Container for the children */\nconst Container = styled.div`\n    flex: 1;\n`;\n\n/**\n * A draggable item component that supports both mouse and touch interactions for drag-and-drop functionality.\n *\n * @component\n * @example\n * ```tsx\n * <DragItem\n *   index={0}\n *   orientation={ORIENTATION.VERTICAL}\n *   showIndicator={true}\n *   dragOver={-1}\n * >\n *   <div>Draggable content</div>\n * </DragItem>\n * ```\n *\n * @param props - The component props\n * @param props.index - The position index of this item in the draggable list\n * @param props.orientation - The orientation of the drag operation (VERTICAL or HORIZONTAL)\n * @param props.showIndicator - Whether to show a drag handle indicator instead of making the entire item draggable\n * @param props.dragOver - The index of the item currently being dragged over\n * @param props.children - The content to be rendered inside the draggable item\n *\n * @remarks\n * - Uses the DragContext to manage drag state across items\n * - Provides visual feedback with borders during drag operations\n * - Supports haptic feedback (vibration) on touch devices\n * - For touch devices, requires a 200ms hold before drag starts\n * - When showIndicator is true, only the drag handle can initiate drag operations\n *\n * @returns A draggable item with optional drag indicator and visual feedback\n */\nexport default function DragItem(props: PropsWithChildren<DragItemProps>) {\n    const { index, orientation, children, showIndicator, dragOver, totalItems, setAnnouncement } =\n        props;\n    const [active, setActive] = useState(0);\n    const [touchTimer, setTouchTimer] = useState<NodeJS.Timeout | null>(null);\n    const context = useContext(DragContext);\n\n    /**\n     * Vibrate the device for haptic feedback\n     * @param duration Duration of the vibration in milliseconds\n     */\n    const vibrate = (duration: number) => {\n        if (navigator.vibrate) {\n            navigator.vibrate(duration);\n        }\n    };\n\n    /**\n     * Drag start event handler\n     * @param e Event\n     */\n    const dragStartHandler: DragEventHandler<HTMLDivElement> = () => {\n        context.setStartIndex(index);\n        context.setIsDragging(true);\n    };\n\n    /**\n     * Drag over event handler\n     * @param e Event\n     */\n    const dragOverHandler: DragEventHandler<HTMLDivElement> = (e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        setActive(context.startIndex - index);\n    };\n\n    /**\n     * Drag leave event handler\n     */\n    const dragExitHandler: DragEventHandler<HTMLDivElement> = () => {\n        setActive(0);\n    };\n\n    /**\n     * Drop event handler\n     * @param e Event\n     */\n    const dropHandler: DragEventHandler<HTMLDivElement> = (e) => {\n        e.preventDefault();\n        setActive(0);\n        context.drop(index);\n        context.setIsDragging(false);\n    };\n\n    /**\n     * Touch start event handler\n     * @param e Event\n     */\n    const touchStartHandler: TouchEventHandler<HTMLDivElement> = () => {\n        const timer = setTimeout(() => {\n            context.setStartIndex(index);\n            context.setIsDragging(true);\n            context.setDragOver(index);\n            document.body.style.overflow = 'hidden';\n            vibrate(50);\n        }, 200);\n\n        setTouchTimer(timer);\n    };\n\n    /**\n     * Touch move event handler\n     * @param e Event\n     * @returns void\n     */\n    const touchMoveHandler: TouchEventHandler<HTMLDivElement> = (e) => {\n        const touch = e.touches[0];\n        if (!touch) return;\n\n        if (context.isDragging) {\n            e.preventDefault();\n\n            // get the element under the touch point\n            const el = document.elementFromPoint(\n                touch.clientX,\n                touch.clientY,\n            ) as HTMLElement | null;\n            const overAttr = el?.closest('[data-drag-index]')?.getAttribute('data-drag-index');\n            const overIndex = overAttr != null ? parseInt(overAttr, 10) : null;\n\n            // if we know which index we're over, update visual state\n            if (overIndex !== null) {\n                context.setDragOver(overIndex);\n            }\n        } else if (touchTimer) {\n            clearTimeout(touchTimer);\n            setTouchTimer(null);\n        }\n    };\n\n    /**\n     * Touch end event handler\n     * @param e Event\n     */\n    const touchEndHandler: TouchEventHandler<HTMLDivElement> = () => {\n        if (touchTimer) {\n            clearTimeout(touchTimer);\n            setTouchTimer(null);\n        }\n\n        if (context.isDragging) {\n            context.drop(dragOver);\n            vibrate(50);\n            context.setIsDragging(false);\n            document.body.style.overflow = 'auto';\n        }\n    };\n\n    /**\n     * Keyboard navigation handler for reordering items\n     * @param e Keyboard event\n     */\n    const handleKeyDown = (e: React.KeyboardEvent) => {\n        const isVertical = orientation === ORIENTATION.VERTICAL;\n        const moveUp = isVertical ? 'ArrowUp' : 'ArrowLeft';\n        const moveDown = isVertical ? 'ArrowDown' : 'ArrowRight';\n\n        const isGrabbed = context.isDragging && context.startIndex === index;\n\n        // Space to grab/drop\n        if (e.key === ' ' || e.key === 'Spacebar') {\n            e.preventDefault();\n            if (isGrabbed) {\n                // Drop at current position\n                context.drop(index);\n                setAnnouncement(\n                    context.i18n.replacePlaceholders(context.i18n.droppedAnnouncementTemplate, {\n                        position: index + 1,\n                    }),\n                );\n            } else {\n                // Grab item\n                context.startGrab(index);\n                setAnnouncement(\n                    context.i18n.replacePlaceholders(context.i18n.grabbedAnnouncementTemplate, {\n                        position: index + 1,\n                    }),\n                );\n            }\n        }\n        // Enter to drop\n        else if (e.key === 'Enter' && isGrabbed) {\n            e.preventDefault();\n            context.drop(index);\n            setAnnouncement(\n                context.i18n.replacePlaceholders(context.i18n.droppedAnnouncementTemplate, {\n                    position: index + 1,\n                }),\n            );\n        }\n        // Escape to cancel\n        else if (e.key === 'Escape' && isGrabbed) {\n            e.preventDefault();\n            context.cancel();\n            setAnnouncement(context.i18n.cancelledAnnouncementTemplate);\n        }\n        // Arrow keys to move while grabbed\n        else if (isGrabbed) {\n            if (e.key === moveUp && index > 0) {\n                e.preventDefault();\n                // Move without dropping - just reorder and update startIndex\n                const newIndex = index - 1;\n                context.onDrop(context.startIndex, newIndex);\n                context.setStartIndex(newIndex);\n                setAnnouncement(\n                    context.i18n.replacePlaceholders(context.i18n.movedAnnouncementTemplate, {\n                        position: newIndex + 1,\n                    }),\n                );\n            } else if (e.key === moveDown && index < totalItems - 1) {\n                e.preventDefault();\n                // Move without dropping - just reorder and update startIndex\n                const newIndex = index + 1;\n                context.onDrop(context.startIndex, newIndex);\n                context.setStartIndex(newIndex);\n                setAnnouncement(\n                    context.i18n.replacePlaceholders(context.i18n.movedAnnouncementTemplate, {\n                        position: newIndex + 1,\n                    }),\n                );\n            }\n        }\n    };\n\n    /** Cleanup touch timer on unmount */\n    useEffect(() => {\n        return () => {\n            if (touchTimer) clearTimeout(touchTimer);\n            document.body.style.overflow = 'auto';\n        };\n    }, [touchTimer]);\n\n    /** Update active state based on dragOver changes */\n    useEffect(() => {\n        if (context.isDragging && dragOver === index) {\n            setActive(context.startIndex - index);\n        } else {\n            setActive(0);\n        }\n    }, [dragOver, context.startIndex, index, context.isDragging]);\n\n    return (\n        <Item\n            draggable={!showIndicator}\n            showIndicator={showIndicator}\n            active={active}\n            dragging={context.isDragging && context.startIndex === index}\n            orientation={orientation}\n            data-drag-index={index}\n            tabIndex={0}\n            role=\"listitem\"\n            aria-label={context.i18n.replacePlaceholders(context.i18n.itemAriaLabelTemplate, {\n                position: index + 1,\n            })}\n            aria-grabbed={context.isDragging && context.startIndex === index}\n            onKeyDown={handleKeyDown}\n            onDragStart={!showIndicator ? dragStartHandler : undefined}\n            onDragOver={dragOverHandler}\n            onDragLeave={dragExitHandler}\n            onDrop={dropHandler}\n            onTouchStart={!showIndicator ? touchStartHandler : undefined}\n            onTouchMove={touchMoveHandler}\n            onTouchEnd={touchEndHandler}\n            onTouchCancel={touchEndHandler}\n        >\n            {showIndicator && (\n                <DragKnob\n                    draggable\n                    role=\"button\"\n                    aria-label={context.i18n.dragHandleAriaLabel}\n                    onDragStart={dragStartHandler}\n                    onTouchStart={touchStartHandler}\n                    onKeyDown={handleKeyDown}\n                    tabIndex={-1}\n                >\n                    <DragIndicator />\n                </DragKnob>\n            )}\n            <Container>{children}</Container>\n        </Item>\n    );\n}\n"]}

package/lib-esm/components/Drawer/Drawer.d.ts

@@ -6,10 +6,38 @@ export declare enum DRAWER_POSITION {
     RIGHT = "RIGHT",
     BOTTOM = "BOTTOM"
 }
-type DrawerProps = PropTypes.InferProps<typeof Drawer.propTypes>;
+declare const drawerPropTypes: {
+    /** Opens the drawer */
+    open: PropTypes.Validator<boolean>;
+    /** position of the drawer */
+    position: PropTypes.Requireable<DRAWER_POSITION>;
+    /** size of the drawer */
+    size: PropTypes.Requireable<string>;
+    /** Shows an overlay behind the drawer. */
+    overlay: PropTypes.Requireable<boolean>;
+    /** Closes the drawer on esc */
+    closeOnEsc: PropTypes.Requireable<boolean>;
+    /** Closes the drawer on overlay click */
+    closeOnOverlayClick: PropTypes.Requireable<boolean>;
+    /** Call back function called when the drawer closes. */
+    onClose: PropTypes.Requireable<(...args: any[]) => any>;
+};
+type DrawerProps = PropTypes.InferProps<typeof drawerPropTypes>;
 interface DrawerState {
     open: boolean;
 }
+/**
+ * Drawer component
+ *
+ * A panel that slides in from the edge of the screen.
+ * It sits on top of the application content and is often used for navigation or details.
+ *
+ * Accessibility:
+ * - Implements ARIA `role="dialog"` and `aria-modal="true"`.
+ * - Traps focus effectively within the drawer while open.
+ * - Restores focus to the triggering element upon closure.
+ * - Supports closing via ESC key and overlay click.
+ */
 export default class Drawer extends React.Component<React.PropsWithChildren<DrawerProps>, DrawerState> {
     state: {
         open: boolean;
@@ -36,13 +64,60 @@ export default class Drawer extends React.Component<React.PropsWithChildren<Draw
         closeOnEsc: boolean;
         closeOnOverlayClick: boolean;
     };
+    /**
+     * Syncs state with props.
+     */
     static getDerivedStateFromProps(props: DrawerProps): {
         open: boolean;
     };
     private layer;
     private closeCallback;
+    /**
+     * Internal close handler.
+     * Restores focus and calls the external onClose callback.
+     */
     private onClose;
+    private lastFocusedElement;
+    private drawerRef;
+    /**
+     * Retrieves all focusable elements within the drawer.
+     */
+    private getFocusableElements;
+    /**
+     * Handles keydown events to implement the focus trap.
+     * Traps Tab and Shift+Tab within the drawer.
+     */
+    private handleKeyDown;
+    /**
+     * Lifecycle method to save the currently focused element when the drawer mounts while open.
+     */
+    componentDidMount(): void;
+    /**
+     * Lifecycle method to restore focus when the drawer unmounts.
+     */
+    componentWillUnmount(): void;
+    /**
+     * Restores focus to the element that was focused before the drawer opened.
+     */
+    private restoreFocus;
+    /**
+     * Callback ref to capture the Drawer DOM element.
+     * Triggers initial focus setting when the element mounts.
+     */
+    private setDrawerRef;
+    /**
+     * Sets initial focus within the drawer.
+     * Tries to focus the header first, then the first interactive element, or falls back to the container.
+     */
+    private setInitialFocus;
+    /**
+     * Lifecycle method to handle Drawer updates.
+     * Manages opening/closing logic via LayerManager and focus preservation.
+     */
     getSnapshotBeforeUpdate(prevProps: DrawerProps): void;
+    /**
+     * Renders the Drawer component via the LayerManager portal.
+     */
     render(): import("@emotion/react/jsx-runtime").JSX.Element;
 }
 //# sourceMappingURL=Drawer.d.ts.map

package/lib-esm/components/Drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAKnC,OAAO,EACH,MAAM,IAAI,YAAY,EACtB,IAAI,IAAI,UAAU,EAClB,MAAM,IAAI,YAAY,GACzB,MAAM,qBAAqB,CAAC;AAE7B,oBAAY,eAAe;IACvB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;CACpB;AAsCD,KAAK,WAAW,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,MAAM,CAAC,SAAS,CAAC,CAAC;AACjE,UAAU,WAAW;IACjB,IAAI,EAAE,OAAO,CAAC;CACjB;AAQD,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,KAAK,CAAC,SAAS,CAC/C,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EACpC,WAAW,CACd;IACG,KAAK;;MAEH;IAEF,MAAM,CAAC,SAAS;QACZ,uBAAuB;;QAEvB,6BAA6B;;QAM7B,yBAAyB;;QAEzB,0CAA0C;;QAE1C,+BAA+B;;QAE/B,yCAAyC;;QAEzC,wDAAwD;;MAE1D;IAEF,MAAM,CAAC,YAAY;;;;;MAKjB;IAEF,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,WAAW;;;IASlD,OAAO,CAAC,KAAK,CAA8C;IAE3D,OAAO,CAAC,aAAa,CAA2B;IAEhD,OAAO,CAAC,OAAO,CAOb;IAEF,uBAAuB,CAAC,SAAS,EAAE,WAAW;IAwC9C,MAAM;CAQT"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAKnC,OAAO,EACH,MAAM,IAAI,YAAY,EACtB,IAAI,IAAI,UAAU,EAClB,MAAM,IAAI,YAAY,GACzB,MAAM,qBAAqB,CAAC;AAE7B,oBAAY,eAAe;IACvB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;CACpB;AAsCD,QAAA,MAAM,eAAe;IACjB,uBAAuB;;IAEvB,6BAA6B;;IAM7B,yBAAyB;;IAEzB,0CAA0C;;IAE1C,+BAA+B;;IAE/B,yCAAyC;;IAEzC,wDAAwD;;CAE3D,CAAC;AAEF,KAAK,WAAW,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAEhE,UAAU,WAAW;IACjB,IAAI,EAAE,OAAO,CAAC;CACjB;AAQD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,KAAK,CAAC,SAAS,CAC/C,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EACpC,WAAW,CACd;IACG,KAAK;;MAEH;IAEF,MAAM,CAAC,SAAS;QApDhB,uBAAuB;;QAEvB,6BAA6B;;QAM7B,yBAAyB;;QAEzB,0CAA0C;;QAE1C,+BAA+B;;QAE/B,yCAAyC;;QAEzC,wDAAwD;;MAoCrB;IAEnC,MAAM,CAAC,YAAY;;;;;MAKjB;IAEF;;OAEG;IACH,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,WAAW;;;IASlD,OAAO,CAAC,KAAK,CAA8C;IAE3D,OAAO,CAAC,aAAa,CAA2B;IAEhD;;;OAGG;IACH,OAAO,CAAC,OAAO,CAQb;IAEF,OAAO,CAAC,kBAAkB,CAA4B;IACtD,OAAO,CAAC,SAAS,CAAqC;IAEtD;;OAEG;IACH,OAAO,CAAC,oBAAoB,CAO1B;IAEF;;;OAGG;IACH,OAAO,CAAC,aAAa,CAoBnB;IAEF;;OAEG;IACH,iBAAiB;IAMjB;;OAEG;IACH,oBAAoB;IAMpB;;OAEG;IACH,OAAO,CAAC,YAAY,CAWlB;IAEF;;;OAGG;IACH,OAAO,CAAC,YAAY,CAQlB;IAEF;;;OAGG;IACH,OAAO,CAAC,eAAe,CAoBrB;IAEF;;;OAGG;IACH,uBAAuB,CAAC,SAAS,EAAE,WAAW;IAiD9C;;OAEG;IACH,MAAM;CAQT"}

package/lib-esm/components/Drawer/Drawer.js

@@ -13,7 +13,7 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
+import { getThemeValue, THEME_NAME } from '../../shared/constants';
 import LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';
 export { Header as DrawerHeader, Body as DrawerBody, Footer as DrawerFooter, } from '../../shared/styles';
 export var DRAWER_POSITION;
@@ -46,9 +46,9 @@ const positionStyle = (size) => ({
 const DrawerDiv = styled.div `
     display: flex;
     flex-direction: column;
-    background-color: #fff;
+    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};
     transition: transform 0.3s ease;
-    box-shadow: var(--modal-shadow, ${constants.MODAL_SHADOW});
+    box-shadow: ${getThemeValue(THEME_NAME.MODAL_SHADOW)};
     ${(props) => positionStyle(props.size)[props.position].before}
 
     .nf-layer-enter & {
@@ -56,19 +56,56 @@ const DrawerDiv = styled.div `
         ${(props) => positionStyle(props.size)[props.position].after}
     }
 `;
+const drawerPropTypes = {
+    /** Opens the drawer */
+    open: PropTypes.bool.isRequired,
+    /** position of the drawer */
+    position: PropTypes.oneOf([
+        DRAWER_POSITION.LEFT,
+        DRAWER_POSITION.RIGHT,
+        DRAWER_POSITION.BOTTOM,
+    ]),
+    /** size of the drawer */
+    size: PropTypes.string,
+    /** Shows an overlay behind the drawer. */
+    overlay: PropTypes.bool,
+    /** Closes the drawer on esc */
+    closeOnEsc: PropTypes.bool,
+    /** Closes the drawer on overlay click */
+    closeOnOverlayClick: PropTypes.bool,
+    /** Call back function called when the drawer closes. */
+    onClose: PropTypes.func,
+};
 const positionMap = {
     [DRAWER_POSITION.LEFT]: LAYER_POSITION.TOP_LEFT,
     [DRAWER_POSITION.RIGHT]: LAYER_POSITION.TOP_RIGHT,
     [DRAWER_POSITION.BOTTOM]: LAYER_POSITION.BOTTOM_LEFT,
 };
+/**
+ * Drawer component
+ *
+ * A panel that slides in from the edge of the screen.
+ * It sits on top of the application content and is often used for navigation or details.
+ *
+ * Accessibility:
+ * - Implements ARIA `role="dialog"` and `aria-modal="true"`.
+ * - Traps focus effectively within the drawer while open.
+ * - Restores focus to the triggering element upon closure.
+ * - Supports closing via ESC key and overlay click.
+ */
 class Drawer extends React.Component {
     constructor() {
         super(...arguments);
         this.state = {
             open: false,
         };
+        /**
+         * Internal close handler.
+         * Restores focus and calls the external onClose callback.
+         */
         this.onClose = () => {
             var _a, _b;
+            this.restoreFocus();
             this.setState({
                 open: false,
             });
@@ -76,7 +113,97 @@ class Drawer extends React.Component {
             this.closeCallback = null;
             this.layer = null;
         };
+        this.lastFocusedElement = null;
+        this.drawerRef = React.createRef();
+        /**
+         * Retrieves all focusable elements within the drawer.
+         */
+        this.getFocusableElements = () => {
+            if (!this.drawerRef.current)
+                return [];
+            return Array.from(this.drawerRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'));
+        };
+        /**
+         * Handles keydown events to implement the focus trap.
+         * Traps Tab and Shift+Tab within the drawer.
+         */
+        this.handleKeyDown = (e) => {
+            if (e.key === 'Tab') {
+                const focusableElements = this.getFocusableElements();
+                if (focusableElements.length === 0)
+                    return;
+                const firstElement = focusableElements[0];
+                const lastElement = focusableElements[focusableElements.length - 1];
+                if (e.shiftKey) {
+                    if (document.activeElement === firstElement) {
+                        lastElement.focus();
+                        e.preventDefault();
+                    }
+                }
+                else {
+                    if (document.activeElement === lastElement) {
+                        firstElement.focus();
+                        e.preventDefault();
+                    }
+                }
+            }
+        };
+        /**
+         * Restores focus to the element that was focused before the drawer opened.
+         */
+        this.restoreFocus = () => {
+            if (this.lastFocusedElement) {
+                // Check if the element is still in the document
+                const elementToBeFocused = this.lastFocusedElement;
+                this.lastFocusedElement = null;
+                setTimeout(() => {
+                    if (document.body.contains(elementToBeFocused)) {
+                        elementToBeFocused.focus();
+                    }
+                }, 100);
+            }
+        };
+        /**
+         * Callback ref to capture the Drawer DOM element.
+         * Triggers initial focus setting when the element mounts.
+         */
+        this.setDrawerRef = (node) => {
+            // Update ref
+            this.drawerRef.current = node;
+            if (node) {
+                // Set initial focus when the node is mounted
+                this.setInitialFocus(node);
+            }
+        };
+        /**
+         * Sets initial focus within the drawer.
+         * Tries to focus the header first, then the first interactive element, or falls back to the container.
+         */
+        this.setInitialFocus = (root) => {
+            // Try to find the header (assumed to be the first child)
+            const firstChild = root.firstElementChild;
+            if (firstChild) {
+                // Ensure it's focusable
+                if (firstChild.getAttribute('tabindex') === null) {
+                    firstChild.setAttribute('tabindex', '-1');
+                }
+                firstChild.focus();
+                return;
+            }
+            // Fallback to focusable elements
+            const focusableElements = this.getFocusableElements();
+            if (focusableElements.length > 0) {
+                focusableElements[0].focus();
+            }
+            else {
+                // Fallback to container
+                root.focus();
+            }
+        };
     }
+    /**
+     * Syncs state with props.
+     */
     static getDerivedStateFromProps(props) {
         if (props.open) {
             return {
@@ -85,13 +212,36 @@ class Drawer extends React.Component {
         }
         return null;
     }
+    /**
+     * Lifecycle method to save the currently focused element when the drawer mounts while open.
+     */
+    componentDidMount() {
+        if (this.props.open) {
+            this.lastFocusedElement = document.activeElement;
+        }
+    }
+    /**
+     * Lifecycle method to restore focus when the drawer unmounts.
+     */
+    componentWillUnmount() {
+        if (this.props.open) {
+            this.restoreFocus();
+        }
+    }
+    /**
+     * Lifecycle method to handle Drawer updates.
+     * Manages opening/closing logic via LayerManager and focus preservation.
+     */
     getSnapshotBeforeUpdate(prevProps) {
         var _a;
         const _b = this.props, { open, closeOnEsc, closeOnOverlayClick, overlay, position, children, size } = _b, rest = __rest(_b, ["open", "closeOnEsc", "closeOnOverlayClick", "overlay", "position", "children", "size"]);
         if (prevProps.open && !open) {
             (_a = this.closeCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.restoreFocus();
         }
         if (!prevProps.open && open) {
+            // Save current focus
+            this.lastFocusedElement = document.activeElement;
             this.layer = LayerManager.renderLayer({
                 overlay,
                 exitDelay: 300,
@@ -99,12 +249,15 @@ class Drawer extends React.Component {
                 closeCallback: this.onClose,
                 closeOnEsc,
                 closeOnOverlayClick,
-                component: (_jsx(DrawerDiv, Object.assign({}, rest, { position: position, size: size, onClick: (e) => e.stopPropagation(), children: children }))),
+                component: (_jsx(DrawerDiv, Object.assign({}, rest, { ref: this.setDrawerRef, role: "dialog", "aria-modal": "true", tabIndex: -1, onKeyDown: this.handleKeyDown, position: position, size: size, onClick: (e) => e.stopPropagation(), children: children }))),
             });
             this.closeCallback = this.layer[1];
             this.forceUpdate();
         }
     }
+    /**
+     * Renders the Drawer component via the LayerManager portal.
+     */
     render() {
         if (this.state.open && this.layer) {
             const [Component] = this.layer;
@@ -113,26 +266,7 @@ class Drawer extends React.Component {
         return null;
     }
 }
-Drawer.propTypes = {
-    /** Opens the drawer */
-    open: PropTypes.bool.isRequired,
-    /** position of the drawer */
-    position: PropTypes.oneOf([
-        DRAWER_POSITION.LEFT,
-        DRAWER_POSITION.RIGHT,
-        DRAWER_POSITION.BOTTOM,
-    ]),
-    /** size of the drawer */
-    size: PropTypes.string,
-    /** Shows an overlay behind the drawer. */
-    overlay: PropTypes.bool,
-    /** Closes the drawer on esc */
-    closeOnEsc: PropTypes.bool,
-    /** Closes the drawer on overlay click */
-    closeOnOverlayClick: PropTypes.bool,
-    /** Call back function called when the drawer closes. */
-    onClose: PropTypes.func,
-};
+Drawer.propTypes = drawerPropTypes;
 Drawer.defaultProps = {
     overlay: true,
     position: DRAWER_POSITION.LEFT,

package/lib-esm/components/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport constants from '../../shared/constants';\nimport LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';\n\nexport {\n    Header as DrawerHeader,\n    Body as DrawerBody,\n    Footer as DrawerFooter,\n} from '../../shared/styles';\n\nexport enum DRAWER_POSITION {\n    LEFT = 'LEFT',\n    RIGHT = 'RIGHT',\n    BOTTOM = 'BOTTOM',\n}\n\nconst positionStyle = (size: string) => ({\n    [DRAWER_POSITION.LEFT]: {\n        before: `height: 100vh; min-width: ${size || '300px'}; transform: translateX(-100%);`,\n        after: 'transform: translateX(0%);',\n    },\n    [DRAWER_POSITION.RIGHT]: {\n        before: `height: 100vh; min-width: ${size || '300px'}; transform: translateX(100%);`,\n        after: 'transform: translateX(0%);',\n    },\n    [DRAWER_POSITION.BOTTOM]: {\n        before: `\n            position: absolute;\n            bottom: 0;\n            width: 100%;\n            height: ${size || '90vh'};\n            transform: translateY(100%);\n            border-radius: 15px 15px 0 0; \n        `,\n        after: 'transform: translateX(0%);',\n    },\n});\n\nconst DrawerDiv = styled.div<{ position: DRAWER_POSITION; size: string }>`\n    display: flex;\n    flex-direction: column;\n    background-color: #fff;\n    transition: transform 0.3s ease;\n    box-shadow: var(--modal-shadow, ${constants.MODAL_SHADOW});\n    ${(props) => positionStyle(props.size)[props.position].before}\n\n    .nf-layer-enter & {\n        transform: translateX(0%);\n        ${(props) => positionStyle(props.size)[props.position].after}\n    }\n`;\n\ntype DrawerProps = PropTypes.InferProps<typeof Drawer.propTypes>;\ninterface DrawerState {\n    open: boolean;\n}\n\nconst positionMap = {\n    [DRAWER_POSITION.LEFT]: LAYER_POSITION.TOP_LEFT,\n    [DRAWER_POSITION.RIGHT]: LAYER_POSITION.TOP_RIGHT,\n    [DRAWER_POSITION.BOTTOM]: LAYER_POSITION.BOTTOM_LEFT,\n};\n\nexport default class Drawer extends React.Component<\n    React.PropsWithChildren<DrawerProps>,\n    DrawerState\n> {\n    state = {\n        open: false,\n    };\n\n    static propTypes = {\n        /** Opens the drawer */\n        open: PropTypes.bool.isRequired,\n        /** position of the drawer */\n        position: PropTypes.oneOf([\n            DRAWER_POSITION.LEFT,\n            DRAWER_POSITION.RIGHT,\n            DRAWER_POSITION.BOTTOM,\n        ]),\n        /** size of the drawer */\n        size: PropTypes.string,\n        /** Shows an overlay behind the drawer. */\n        overlay: PropTypes.bool,\n        /** Closes the drawer on esc */\n        closeOnEsc: PropTypes.bool,\n        /** Closes the drawer on overlay click */\n        closeOnOverlayClick: PropTypes.bool,\n        /** Call back function called when the drawer closes. */\n        onClose: PropTypes.func,\n    };\n\n    static defaultProps = {\n        overlay: true,\n        position: DRAWER_POSITION.LEFT,\n        closeOnEsc: true,\n        closeOnOverlayClick: true,\n    };\n\n    static getDerivedStateFromProps(props: DrawerProps) {\n        if (props.open) {\n            return {\n                open: true,\n            };\n        }\n        return null;\n    }\n\n    private layer: ReturnType<typeof LayerManager.renderLayer>;\n\n    private closeCallback: (resp?: unknown) => void;\n\n    private onClose = () => {\n        this.setState({\n            open: false,\n        });\n        this.props.onClose?.();\n        this.closeCallback = null;\n        this.layer = null;\n    };\n\n    getSnapshotBeforeUpdate(prevProps: DrawerProps) {\n        const {\n            open,\n            closeOnEsc,\n            closeOnOverlayClick,\n            overlay,\n            position,\n            children,\n            size,\n            ...rest\n        } = this.props;\n\n        if (prevProps.open && !open) {\n            this.closeCallback?.();\n        }\n\n        if (!prevProps.open && open) {\n            this.layer = LayerManager.renderLayer({\n                overlay,\n                exitDelay: 300,\n                position: positionMap[position],\n                closeCallback: this.onClose,\n                closeOnEsc,\n                closeOnOverlayClick,\n                component: (\n                    <DrawerDiv\n                        {...rest}\n                        position={position}\n                        size={size}\n                        onClick={(e) => e.stopPropagation()}\n                    >\n                        {children}\n                    </DrawerDiv>\n                ),\n            });\n            this.closeCallback = this.layer[1];\n            this.forceUpdate();\n        }\n    }\n\n    render() {\n        if (this.state.open && this.layer) {\n            const [Component] = this.layer;\n            return <Component />;\n        }\n\n        return null;\n    }\n}\n"]}
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,YAAY,EAAE,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAEzE,OAAO,EACH,MAAM,IAAI,YAAY,EACtB,IAAI,IAAI,UAAU,EAClB,MAAM,IAAI,YAAY,GACzB,MAAM,qBAAqB,CAAC;AAE7B,MAAM,CAAN,IAAY,eAIX;AAJD,WAAY,eAAe;IACvB,gCAAa,CAAA;IACb,kCAAe,CAAA;IACf,oCAAiB,CAAA;AACrB,CAAC,EAJW,eAAe,KAAf,eAAe,QAI1B;AAED,MAAM,aAAa,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,CAAC;IACrC,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE;QACpB,MAAM,EAAE,6BAA6B,IAAI,IAAI,OAAO,iCAAiC;QACrF,KAAK,EAAE,4BAA4B;KACtC;IACD,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE;QACrB,MAAM,EAAE,6BAA6B,IAAI,IAAI,OAAO,gCAAgC;QACpF,KAAK,EAAE,4BAA4B;KACtC;IACD,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE;QACtB,MAAM,EAAE;;;;sBAIM,IAAI,IAAI,MAAM;;;SAG3B;QACD,KAAK,EAAE,4BAA4B;KACtC;CACJ,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAA6C;;;wBAGjD,aAAa,CAAC,UAAU,CAAC,UAAU,CAAC;;kBAE1C,aAAa,CAAC,UAAU,CAAC,YAAY,CAAC;MAClD,CAAC,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,MAAM;;;;UAIvD,CAAC,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,KAAK;;CAEnE,CAAC;AAEF,MAAM,eAAe,GAAG;IACpB,uBAAuB;IACvB,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;IAC/B,6BAA6B;IAC7B,QAAQ,EAAE,SAAS,CAAC,KAAK,CAAC;QACtB,eAAe,CAAC,IAAI;QACpB,eAAe,CAAC,KAAK;QACrB,eAAe,CAAC,MAAM;KACzB,CAAC;IACF,yBAAyB;IACzB,IAAI,EAAE,SAAS,CAAC,MAAM;IACtB,0CAA0C;IAC1C,OAAO,EAAE,SAAS,CAAC,IAAI;IACvB,+BAA+B;IAC/B,UAAU,EAAE,SAAS,CAAC,IAAI;IAC1B,yCAAyC;IACzC,mBAAmB,EAAE,SAAS,CAAC,IAAI;IACnC,wDAAwD;IACxD,OAAO,EAAE,SAAS,CAAC,IAAI;CAC1B,CAAC;AAQF,MAAM,WAAW,GAAG;IAChB,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,cAAc,CAAC,QAAQ;IAC/C,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC,SAAS;IACjD,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,cAAc,CAAC,WAAW;CACvD,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,MAAqB,MAAO,SAAQ,KAAK,CAAC,SAGzC;IAHD;;QAII,UAAK,GAAG;YACJ,IAAI,EAAE,KAAK;SACd,CAAC;QA2BF;;;WAGG;QACK,YAAO,GAAG,GAAG,EAAE;;YACnB,IAAI,CAAC,YAAY,EAAE,CAAC;YACpB,IAAI,CAAC,QAAQ,CAAC;gBACV,IAAI,EAAE,KAAK;aACd,CAAC,CAAC;YACH,MAAA,MAAA,IAAI,CAAC,KAAK,EAAC,OAAO,kDAAI,CAAC;YACvB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAC1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QACtB,CAAC,CAAC;QAEM,uBAAkB,GAAuB,IAAI,CAAC;QAC9C,cAAS,GAAG,KAAK,CAAC,SAAS,EAAkB,CAAC;QAEtD;;WAEG;QACK,yBAAoB,GAAG,GAAkB,EAAE;YAC/C,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO;gBAAE,OAAO,EAAE,CAAC;YACvC,OAAO,KAAK,CAAC,IAAI,CACb,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,gBAAgB,CACnC,0EAA0E,CAC7E,CACa,CAAC;QACvB,CAAC,CAAC;QAEF;;;WAGG;QACK,kBAAa,GAAG,CAAC,CAAsB,EAAE,EAAE;YAC/C,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;gBAClB,MAAM,iBAAiB,GAAG,IAAI,CAAC,oBAAoB,EAAE,CAAC;gBACtD,IAAI,iBAAiB,CAAC,MAAM,KAAK,CAAC;oBAAE,OAAO;gBAE3C,MAAM,YAAY,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC;gBAC1C,MAAM,WAAW,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;gBAEpE,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;oBACb,IAAI,QAAQ,CAAC,aAAa,KAAK,YAAY,EAAE,CAAC;wBAC1C,WAAW,CAAC,KAAK,EAAE,CAAC;wBACpB,CAAC,CAAC,cAAc,EAAE,CAAC;oBACvB,CAAC;gBACL,CAAC;qBAAM,CAAC;oBACJ,IAAI,QAAQ,CAAC,aAAa,KAAK,WAAW,EAAE,CAAC;wBACzC,YAAY,CAAC,KAAK,EAAE,CAAC;wBACrB,CAAC,CAAC,cAAc,EAAE,CAAC;oBACvB,CAAC;gBACL,CAAC;YACL,CAAC;QACL,CAAC,CAAC;QAoBF;;WAEG;QACK,iBAAY,GAAG,GAAG,EAAE;YACxB,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBAC1B,gDAAgD;gBAChD,MAAM,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAC;gBACnD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;gBAC/B,UAAU,CAAC,GAAG,EAAE;oBACZ,IAAI,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC;wBAC7C,kBAAkB,CAAC,KAAK,EAAE,CAAC;oBAC/B,CAAC;gBACL,CAAC,EAAE,GAAG,CAAC,CAAC;YACZ,CAAC;QACL,CAAC,CAAC;QAEF;;;WAGG;QACK,iBAAY,GAAG,CAAC,IAA2B,EAAE,EAAE;YACnD,aAAa;YACZ,IAAI,CAAC,SAA2D,CAAC,OAAO,GAAG,IAAI,CAAC;YAEjF,IAAI,IAAI,EAAE,CAAC;gBACP,6CAA6C;gBAC7C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;YAC/B,CAAC;QACL,CAAC,CAAC;QAEF;;;WAGG;QACK,oBAAe,GAAG,CAAC,IAAiB,EAAE,EAAE;YAC5C,yDAAyD;YACzD,MAAM,UAAU,GAAG,IAAI,CAAC,iBAAgC,CAAC;YACzD,IAAI,UAAU,EAAE,CAAC;gBACb,wBAAwB;gBACxB,IAAI,UAAU,CAAC,YAAY,CAAC,UAAU,CAAC,KAAK,IAAI,EAAE,CAAC;oBAC/C,UAAU,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;gBAC9C,CAAC;gBACD,UAAU,CAAC,KAAK,EAAE,CAAC;gBACnB,OAAO;YACX,CAAC;YAED,iCAAiC;YACjC,MAAM,iBAAiB,GAAG,IAAI,CAAC,oBAAoB,EAAE,CAAC;YACtD,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC/B,iBAAiB,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;YACjC,CAAC;iBAAM,CAAC;gBACJ,wBAAwB;gBACxB,IAAI,CAAC,KAAK,EAAE,CAAC;YACjB,CAAC;QACL,CAAC,CAAC;IAkEN,CAAC;IAjNG;;OAEG;IACH,MAAM,CAAC,wBAAwB,CAAC,KAAkB;QAC9C,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;YACb,OAAO;gBACH,IAAI,EAAE,IAAI;aACb,CAAC;QACN,CAAC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;IA6DD;;OAEG;IACH,iBAAiB;QACb,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;YAClB,IAAI,CAAC,kBAAkB,GAAG,QAAQ,CAAC,aAA4B,CAAC;QACpE,CAAC;IACL,CAAC;IAED;;OAEG;IACH,oBAAoB;QAChB,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;YAClB,IAAI,CAAC,YAAY,EAAE,CAAC;QACxB,CAAC;IACL,CAAC;IA0DD;;;OAGG;IACH,uBAAuB,CAAC,SAAsB;;QAC1C,MAAM,KASF,IAAI,CAAC,KAAK,EATR,EACF,IAAI,EACJ,UAAU,EACV,mBAAmB,EACnB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,IAAI,OAEM,EADP,IAAI,cARL,wFASL,CAAa,CAAC;QAEf,IAAI,SAAS,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YAC1B,MAAA,IAAI,CAAC,aAAa,oDAAI,CAAC;YACvB,IAAI,CAAC,YAAY,EAAE,CAAC;QACxB,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,IAAI,IAAI,IAAI,EAAE,CAAC;YAC1B,qBAAqB;YACrB,IAAI,CAAC,kBAAkB,GAAG,QAAQ,CAAC,aAA4B,CAAC;YAEhE,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,WAAW,CAAC;gBAClC,OAAO;gBACP,SAAS,EAAE,GAAG;gBACd,QAAQ,EAAE,WAAW,CAAC,QAAQ,CAAC;gBAC/B,aAAa,EAAE,IAAI,CAAC,OAAO;gBAC3B,UAAU;gBACV,mBAAmB;gBACnB,SAAS,EAAE,CACP,KAAC,SAAS,oBACF,IAAI,IACR,GAAG,EAAE,IAAI,CAAC,YAAY,EACtB,IAAI,EAAC,QAAQ,gBACF,MAAM,EACjB,QAAQ,EAAE,CAAC,CAAC,EACZ,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,YAElC,QAAQ,IACD,CACf;aACJ,CAAC,CAAC;YACH,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACnC,IAAI,CAAC,WAAW,EAAE,CAAC;QACvB,CAAC;IACL,CAAC;IAED;;OAEG;IACH,MAAM;QACF,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YAChC,MAAM,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;YAC/B,OAAO,KAAC,SAAS,KAAG,CAAC;QACzB,CAAC;QAED,OAAO,IAAI,CAAC;IAChB,CAAC;;AAzNM,gBAAS,GAAG,eAAe,AAAlB,CAAmB;AAE5B,mBAAY,GAAG;IAClB,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,eAAe,CAAC,IAAI;IAC9B,UAAU,EAAE,IAAI;IAChB,mBAAmB,EAAE,IAAI;CAC5B,AALkB,CAKjB;eAfe,MAAM","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';\n\nexport {\n    Header as DrawerHeader,\n    Body as DrawerBody,\n    Footer as DrawerFooter,\n} from '../../shared/styles';\n\nexport enum DRAWER_POSITION {\n    LEFT = 'LEFT',\n    RIGHT = 'RIGHT',\n    BOTTOM = 'BOTTOM',\n}\n\nconst positionStyle = (size: string) => ({\n    [DRAWER_POSITION.LEFT]: {\n        before: `height: 100vh; min-width: ${size || '300px'}; transform: translateX(-100%);`,\n        after: 'transform: translateX(0%);',\n    },\n    [DRAWER_POSITION.RIGHT]: {\n        before: `height: 100vh; min-width: ${size || '300px'}; transform: translateX(100%);`,\n        after: 'transform: translateX(0%);',\n    },\n    [DRAWER_POSITION.BOTTOM]: {\n        before: `\n            position: absolute;\n            bottom: 0;\n            width: 100%;\n            height: ${size || '90vh'};\n            transform: translateY(100%);\n            border-radius: 15px 15px 0 0; \n        `,\n        after: 'transform: translateX(0%);',\n    },\n});\n\nconst DrawerDiv = styled.div<{ position: DRAWER_POSITION; size: string }>`\n    display: flex;\n    flex-direction: column;\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    transition: transform 0.3s ease;\n    box-shadow: ${getThemeValue(THEME_NAME.MODAL_SHADOW)};\n    ${(props) => positionStyle(props.size)[props.position].before}\n\n    .nf-layer-enter & {\n        transform: translateX(0%);\n        ${(props) => positionStyle(props.size)[props.position].after}\n    }\n`;\n\nconst drawerPropTypes = {\n    /** Opens the drawer */\n    open: PropTypes.bool.isRequired,\n    /** position of the drawer */\n    position: PropTypes.oneOf([\n        DRAWER_POSITION.LEFT,\n        DRAWER_POSITION.RIGHT,\n        DRAWER_POSITION.BOTTOM,\n    ]),\n    /** size of the drawer */\n    size: PropTypes.string,\n    /** Shows an overlay behind the drawer. */\n    overlay: PropTypes.bool,\n    /** Closes the drawer on esc */\n    closeOnEsc: PropTypes.bool,\n    /** Closes the drawer on overlay click */\n    closeOnOverlayClick: PropTypes.bool,\n    /** Call back function called when the drawer closes. */\n    onClose: PropTypes.func,\n};\n\ntype DrawerProps = PropTypes.InferProps<typeof drawerPropTypes>;\n\ninterface DrawerState {\n    open: boolean;\n}\n\nconst positionMap = {\n    [DRAWER_POSITION.LEFT]: LAYER_POSITION.TOP_LEFT,\n    [DRAWER_POSITION.RIGHT]: LAYER_POSITION.TOP_RIGHT,\n    [DRAWER_POSITION.BOTTOM]: LAYER_POSITION.BOTTOM_LEFT,\n};\n\n/**\n * Drawer component\n *\n * A panel that slides in from the edge of the screen.\n * It sits on top of the application content and is often used for navigation or details.\n *\n * Accessibility:\n * - Implements ARIA `role=\"dialog\"` and `aria-modal=\"true\"`.\n * - Traps focus effectively within the drawer while open.\n * - Restores focus to the triggering element upon closure.\n * - Supports closing via ESC key and overlay click.\n */\nexport default class Drawer extends React.Component<\n    React.PropsWithChildren<DrawerProps>,\n    DrawerState\n> {\n    state = {\n        open: false,\n    };\n\n    static propTypes = drawerPropTypes;\n\n    static defaultProps = {\n        overlay: true,\n        position: DRAWER_POSITION.LEFT,\n        closeOnEsc: true,\n        closeOnOverlayClick: true,\n    };\n\n    /**\n     * Syncs state with props.\n     */\n    static getDerivedStateFromProps(props: DrawerProps) {\n        if (props.open) {\n            return {\n                open: true,\n            };\n        }\n        return null;\n    }\n\n    private layer: ReturnType<typeof LayerManager.renderLayer>;\n\n    private closeCallback: (resp?: unknown) => void;\n\n    /**\n     * Internal close handler.\n     * Restores focus and calls the external onClose callback.\n     */\n    private onClose = () => {\n        this.restoreFocus();\n        this.setState({\n            open: false,\n        });\n        this.props.onClose?.();\n        this.closeCallback = null;\n        this.layer = null;\n    };\n\n    private lastFocusedElement: HTMLElement | null = null;\n    private drawerRef = React.createRef<HTMLDivElement>();\n\n    /**\n     * Retrieves all focusable elements within the drawer.\n     */\n    private getFocusableElements = (): HTMLElement[] => {\n        if (!this.drawerRef.current) return [];\n        return Array.from(\n            this.drawerRef.current.querySelectorAll(\n                'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n            ),\n        ) as HTMLElement[];\n    };\n\n    /**\n     * Handles keydown events to implement the focus trap.\n     * Traps Tab and Shift+Tab within the drawer.\n     */\n    private handleKeyDown = (e: React.KeyboardEvent) => {\n        if (e.key === 'Tab') {\n            const focusableElements = this.getFocusableElements();\n            if (focusableElements.length === 0) return;\n\n            const firstElement = focusableElements[0];\n            const lastElement = focusableElements[focusableElements.length - 1];\n\n            if (e.shiftKey) {\n                if (document.activeElement === firstElement) {\n                    lastElement.focus();\n                    e.preventDefault();\n                }\n            } else {\n                if (document.activeElement === lastElement) {\n                    firstElement.focus();\n                    e.preventDefault();\n                }\n            }\n        }\n    };\n\n    /**\n     * Lifecycle method to save the currently focused element when the drawer mounts while open.\n     */\n    componentDidMount() {\n        if (this.props.open) {\n            this.lastFocusedElement = document.activeElement as HTMLElement;\n        }\n    }\n\n    /**\n     * Lifecycle method to restore focus when the drawer unmounts.\n     */\n    componentWillUnmount() {\n        if (this.props.open) {\n            this.restoreFocus();\n        }\n    }\n\n    /**\n     * Restores focus to the element that was focused before the drawer opened.\n     */\n    private restoreFocus = () => {\n        if (this.lastFocusedElement) {\n            // Check if the element is still in the document\n            const elementToBeFocused = this.lastFocusedElement;\n            this.lastFocusedElement = null;\n            setTimeout(() => {\n                if (document.body.contains(elementToBeFocused)) {\n                    elementToBeFocused.focus();\n                }\n            }, 100);\n        }\n    };\n\n    /**\n     * Callback ref to capture the Drawer DOM element.\n     * Triggers initial focus setting when the element mounts.\n     */\n    private setDrawerRef = (node: HTMLDivElement | null) => {\n        // Update ref\n        (this.drawerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n\n        if (node) {\n            // Set initial focus when the node is mounted\n            this.setInitialFocus(node);\n        }\n    };\n\n    /**\n     * Sets initial focus within the drawer.\n     * Tries to focus the header first, then the first interactive element, or falls back to the container.\n     */\n    private setInitialFocus = (root: HTMLElement) => {\n        // Try to find the header (assumed to be the first child)\n        const firstChild = root.firstElementChild as HTMLElement;\n        if (firstChild) {\n            // Ensure it's focusable\n            if (firstChild.getAttribute('tabindex') === null) {\n                firstChild.setAttribute('tabindex', '-1');\n            }\n            firstChild.focus();\n            return;\n        }\n\n        // Fallback to focusable elements\n        const focusableElements = this.getFocusableElements();\n        if (focusableElements.length > 0) {\n            focusableElements[0].focus();\n        } else {\n            // Fallback to container\n            root.focus();\n        }\n    };\n\n    /**\n     * Lifecycle method to handle Drawer updates.\n     * Manages opening/closing logic via LayerManager and focus preservation.\n     */\n    getSnapshotBeforeUpdate(prevProps: DrawerProps) {\n        const {\n            open,\n            closeOnEsc,\n            closeOnOverlayClick,\n            overlay,\n            position,\n            children,\n            size,\n            ...rest\n        } = this.props;\n\n        if (prevProps.open && !open) {\n            this.closeCallback?.();\n            this.restoreFocus();\n        }\n\n        if (!prevProps.open && open) {\n            // Save current focus\n            this.lastFocusedElement = document.activeElement as HTMLElement;\n\n            this.layer = LayerManager.renderLayer({\n                overlay,\n                exitDelay: 300,\n                position: positionMap[position],\n                closeCallback: this.onClose,\n                closeOnEsc,\n                closeOnOverlayClick,\n                component: (\n                    <DrawerDiv\n                        {...rest}\n                        ref={this.setDrawerRef}\n                        role=\"dialog\"\n                        aria-modal=\"true\"\n                        tabIndex={-1}\n                        onKeyDown={this.handleKeyDown}\n                        position={position}\n                        size={size}\n                        onClick={(e) => e.stopPropagation()}\n                    >\n                        {children}\n                    </DrawerDiv>\n                ),\n            });\n            this.closeCallback = this.layer[1];\n            this.forceUpdate();\n        }\n    }\n\n    /**\n     * Renders the Drawer component via the LayerManager portal.\n     */\n    render() {\n        if (this.state.open && this.layer) {\n            const [Component] = this.layer;\n            return <Component />;\n        }\n\n        return null;\n    }\n}\n"]}

package/lib-esm/components/Groups/Group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../src/components/Groups/Group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AA4FnC,iBAAwB,KAAK,CACzB,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,UAAU,CAAC,OAAO,KAAK,CAAC,SAAS,CAAC,CAAC,oDAQ/E;kBATuB,KAAK;;QAYzB,kCAAkC;;;;eAZd,KAAK"}
+{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../src/components/Groups/Group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAC;AACrC,OAAO,SAAS,MAAM,YAAY,CAAC;AA4FnC,iBAAwB,KAAK,CACzB,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,UAAU,CAAC,OAAO,KAAK,CAAC,SAAS,CAAC,CAAC,oDAY/E;kBAbuB,KAAK;;QAgBzB,kCAAkC;;;;eAhBd,KAAK"}

package/lib-esm/components/Groups/Group.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useId } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
+import { getThemeValue, THEME_NAME } from '../../shared/constants';
 const Container = styled.div `
     display: inline-flex;
-    border: 1px solid var(--border-color, ${constants.BORDER_COLOR});
+    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};
     border-radius: 3px;
     margin: 5px;
 
@@ -14,7 +15,7 @@ const Container = styled.div `
         margin: 0;
         border: none;
         border-radius: 0;
-        border-left: 1px solid var(--border-color, ${constants.BORDER_COLOR});
+        border-left: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};
         box-shadow: none;
         height: 32px;
     }
@@ -69,26 +70,27 @@ const Container = styled.div `
 
     &:focus-within,
     &:hover {
-        box-shadow: var(--hover-shadow, ${constants.HOVER_SHADOW});
+        box-shadow: ${getThemeValue(THEME_NAME.HOVER_SHADOW)};
     }
 
     ${(props) => props.errorText
     ? `
-        border-color: var(--error, ${constants.ERROR});
+        border-color: ${getThemeValue(THEME_NAME.ERROR)};
 
         & > button, & > label {
-            border-color: var(--error, ${constants.ERROR});
+            border-color: ${getThemeValue(THEME_NAME.ERROR)};
         }
     `
     : ''}
 `;
 const ErrorContainer = styled.div `
-    color: var(--error, ${constants.ERROR});
+    color: ${getThemeValue(THEME_NAME.ERROR)};
     margin-left: 8px;
     font-size: 12px;
 `;
 export default function Group(props) {
-    return (_jsxs(_Fragment, { children: [_jsx(Container, Object.assign({}, props, { children: props.children })), props.errorText && _jsx(ErrorContainer, { children: props.errorText })] }));
+    const errorId = useId();
+    return (_jsxs(_Fragment, { children: [_jsx(Container, Object.assign({}, props, { "aria-describedby": props.errorText ? errorId : undefined, children: props.children })), props.errorText && _jsx(ErrorContainer, { id: errorId, children: props.errorText })] }));
 }
 Group.propTypes = {
     /** Error Message for the group */

package/lib-esm/components/Groups/Group.js.map

@@ -1 +1 @@
-{"version":3,"file":"Group.js","sourceRoot":"","sources":["../../../src/components/Groups/Group.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAA8C;;4CAE9B,SAAS,CAAC,YAAY;;;;;;;;;;qDAUb,SAAS,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0CAuDjC,SAAS,CAAC,YAAY;;;MAG1D,CAAC,KAAK,EAAE,EAAE,CACR,KAAK,CAAC,SAAS;IACX,CAAC,CAAC;qCACuB,SAAS,CAAC,KAAK;;;yCAGX,SAAS,CAAC,KAAK;;KAEnD;IACO,CAAC,CAAC,EAAE;CACf,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;0BACP,SAAS,CAAC,KAAK;;;CAGxC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,KAAK,CACzB,KAA4E;IAE5E,OAAO,CACH,8BACI,KAAC,SAAS,oBAAK,KAAK,cAAG,KAAK,CAAC,QAAQ,IAAa,EACjD,KAAK,CAAC,SAAS,IAAI,KAAC,cAAc,cAAE,KAAK,CAAC,SAAS,GAAkB,IACvE,CACN,CAAC;AACN,CAAC;AAED,KAAK,CAAC,SAAS,GAAG;IACd,kCAAkC;IAClC,SAAS,EAAE,SAAS,CAAC,MAAM;CAC9B,CAAC","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport constants from '../../shared/constants';\n\nconst Container = styled.div<PropTypes.InferProps<typeof Group.propTypes>>`\n    display: inline-flex;\n    border: 1px solid var(--border-color, ${constants.BORDER_COLOR});\n    border-radius: 3px;\n    margin: 5px;\n\n    /* overrides */\n    & button,\n    & label {\n        margin: 0;\n        border: none;\n        border-radius: 0;\n        border-left: 1px solid var(--border-color, ${constants.BORDER_COLOR});\n        box-shadow: none;\n        height: 32px;\n    }\n\n    & > div button {\n        border-left: none;\n    }\n\n    & input,\n    & select {\n        border: none;\n        height: 32px;\n    }\n\n    & input,\n    & select {\n        border-radius: 0;\n    }\n\n    & input:active,\n    & select:active {\n        box-shadow: none;\n    }\n\n    & > div > span {\n        top: 8px;\n    }\n\n    /* Handling for first and last child */\n    & > *:first-child,\n    & > label:first-child input,\n    & > label:first-child select,\n    & > *:first-child label,\n    & > *:first-child input {\n        border-left: none;\n        border-radius: 2px 0 0 2px;\n    }\n\n    & > *:last-child,\n    & > label:last-child input,\n    & > label:last-child select,\n    & > *:last-child label,\n    & > *:last-child input {\n        border-radius: 0 2px 2px 0;\n    }\n\n    /* focus */\n    & *:focus,\n    & *:focus + span {\n        z-index: 1;\n    }\n\n    &:focus-within,\n    &:hover {\n        box-shadow: var(--hover-shadow, ${constants.HOVER_SHADOW});\n    }\n\n    ${(props) =>\n        props.errorText\n            ? `\n        border-color: var(--error, ${constants.ERROR});\n\n        & > button, & > label {\n            border-color: var(--error, ${constants.ERROR});\n        }\n    `\n            : ''}\n`;\n\nconst ErrorContainer = styled.div`\n    color: var(--error, ${constants.ERROR});\n    margin-left: 8px;\n    font-size: 12px;\n`;\n\nexport default function Group(\n    props: React.PropsWithChildren<PropTypes.InferProps<typeof Group.propTypes>>,\n) {\n    return (\n        <>\n            <Container {...props}>{props.children}</Container>\n            {props.errorText && <ErrorContainer>{props.errorText}</ErrorContainer>}\n        </>\n    );\n}\n\nGroup.propTypes = {\n    /** Error Message for the group */\n    errorText: PropTypes.string,\n};\n"]}
+{"version":3,"file":"Group.js","sourceRoot":"","sources":["../../../src/components/Groups/Group.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEnE,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAA8C;;wBAElD,aAAa,CAAC,UAAU,CAAC,YAAY,CAAC;;;;;;;;;;iCAU7B,aAAa,CAAC,UAAU,CAAC,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAuDjD,aAAa,CAAC,UAAU,CAAC,YAAY,CAAC;;;MAGtD,CAAC,KAAK,EAAE,EAAE,CACR,KAAK,CAAC,SAAS;IACX,CAAC,CAAC;wBACU,aAAa,CAAC,UAAU,CAAC,KAAK,CAAC;;;4BAG3B,aAAa,CAAC,UAAU,CAAC,KAAK,CAAC;;KAEtD;IACO,CAAC,CAAC,EAAE;CACf,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;aACpB,aAAa,CAAC,UAAU,CAAC,KAAK,CAAC;;;CAG3C,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,KAAK,CACzB,KAA4E;IAE5E,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IAExB,OAAO,CACH,8BACI,KAAC,SAAS,oBAAK,KAAK,wBAAoB,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,YACxE,KAAK,CAAC,QAAQ,IACP,EACX,KAAK,CAAC,SAAS,IAAI,KAAC,cAAc,IAAC,EAAE,EAAE,OAAO,YAAG,KAAK,CAAC,SAAS,GAAkB,IACpF,CACN,CAAC;AACN,CAAC;AAED,KAAK,CAAC,SAAS,GAAG;IACd,kCAAkC;IAClC,SAAS,EAAE,SAAS,CAAC,MAAM;CAC9B,CAAC","sourcesContent":["import React, { useId } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst Container = styled.div<PropTypes.InferProps<typeof Group.propTypes>>`\n    display: inline-flex;\n    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n    border-radius: 3px;\n    margin: 5px;\n\n    /* overrides */\n    & button,\n    & label {\n        margin: 0;\n        border: none;\n        border-radius: 0;\n        border-left: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n        box-shadow: none;\n        height: 32px;\n    }\n\n    & > div button {\n        border-left: none;\n    }\n\n    & input,\n    & select {\n        border: none;\n        height: 32px;\n    }\n\n    & input,\n    & select {\n        border-radius: 0;\n    }\n\n    & input:active,\n    & select:active {\n        box-shadow: none;\n    }\n\n    & > div > span {\n        top: 8px;\n    }\n\n    /* Handling for first and last child */\n    & > *:first-child,\n    & > label:first-child input,\n    & > label:first-child select,\n    & > *:first-child label,\n    & > *:first-child input {\n        border-left: none;\n        border-radius: 2px 0 0 2px;\n    }\n\n    & > *:last-child,\n    & > label:last-child input,\n    & > label:last-child select,\n    & > *:last-child label,\n    & > *:last-child input {\n        border-radius: 0 2px 2px 0;\n    }\n\n    /* focus */\n    & *:focus,\n    & *:focus + span {\n        z-index: 1;\n    }\n\n    &:focus-within,\n    &:hover {\n        box-shadow: ${getThemeValue(THEME_NAME.HOVER_SHADOW)};\n    }\n\n    ${(props) =>\n        props.errorText\n            ? `\n        border-color: ${getThemeValue(THEME_NAME.ERROR)};\n\n        & > button, & > label {\n            border-color: ${getThemeValue(THEME_NAME.ERROR)};\n        }\n    `\n            : ''}\n`;\n\nconst ErrorContainer = styled.div`\n    color: ${getThemeValue(THEME_NAME.ERROR)};\n    margin-left: 8px;\n    font-size: 12px;\n`;\n\nexport default function Group(\n    props: React.PropsWithChildren<PropTypes.InferProps<typeof Group.propTypes>>,\n) {\n    const errorId = useId();\n\n    return (\n        <>\n            <Container {...props} aria-describedby={props.errorText ? errorId : undefined}>\n                {props.children}\n            </Container>\n            {props.errorText && <ErrorContainer id={errorId}>{props.errorText}</ErrorContainer>}\n        </>\n    );\n}\n\nGroup.propTypes = {\n    /** Error Message for the group */\n    errorText: PropTypes.string,\n};\n"]}

package/lib-esm/components/Groups/GroupLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GroupLabel.d.ts","sourceRoot":"","sources":["../../../src/components/Groups/GroupLabel.tsx"],"names":[],"mappings":";;SAmB6K,MAAO,WAAW;;AAhB/L,wBAeE"}
+{"version":3,"file":"GroupLabel.d.ts","sourceRoot":"","sources":["../../../src/components/Groups/GroupLabel.tsx"],"names":[],"mappings":";;SAmByH,MAAO,WAAW;;AAhB3I,wBAeE"}

package/lib-esm/components/Groups/GroupLabel.js

@@ -1,13 +1,13 @@
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
+import { getThemeValue, THEME_NAME } from '../../shared/constants';
 export default styled.label `
     height: 32px;
-    background-color: ${constants.DISABLED_BACKGROUND};
+    background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};
     padding: 0 4px;
     line-height: 32px;
     min-width: 24px;
     text-align: center;
-    color: ${constants.BORDER_COLOR};
+    color: ${getThemeValue(THEME_NAME.BORDER_COLOR)};
 
     & > svg {
         height: 24px;

package/lib-esm/components/Groups/GroupLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupLabel.js","sourceRoot":"","sources":["../../../src/components/Groups/GroupLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,eAAe,MAAM,CAAC,KAAK,CAAA;;wBAEH,SAAS,CAAC,mBAAmB;;;;;aAKxC,SAAS,CAAC,YAAY;;;;;;;;CAQlC,CAAC","sourcesContent":["import styled from '@emotion/styled';\nimport constants from '../../shared/constants';\n\nexport default styled.label`\n    height: 32px;\n    background-color: ${constants.DISABLED_BACKGROUND};\n    padding: 0 4px;\n    line-height: 32px;\n    min-width: 24px;\n    text-align: center;\n    color: ${constants.BORDER_COLOR};\n\n    & > svg {\n        height: 24px;\n        width: 24px;\n        vertical-align: middle;\n        fill: currentColor;\n    }\n`;\n"]}
+{"version":3,"file":"GroupLabel.js","sourceRoot":"","sources":["../../../src/components/Groups/GroupLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEnE,eAAe,MAAM,CAAC,KAAK,CAAA;;wBAEH,aAAa,CAAC,UAAU,CAAC,mBAAmB,CAAC;;;;;aAKxD,aAAa,CAAC,UAAU,CAAC,YAAY,CAAC;;;;;;;;CAQlD,CAAC","sourcesContent":["import styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nexport default styled.label`\n    height: 32px;\n    background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n    padding: 0 4px;\n    line-height: 32px;\n    min-width: 24px;\n    text-align: center;\n    color: ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n\n    & > svg {\n        height: 24px;\n        width: 24px;\n        vertical-align: middle;\n        fill: currentColor;\n    }\n`;\n"]}