softable-pixels-web 1.1.22 → 1.1.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{BasePopover-PZwz1wdH.js → BasePopover-2xiaqZ18.js} +3 -3
- package/dist/{BasePopover-PZwz1wdH.js.map → BasePopover-2xiaqZ18.js.map} +1 -1
- package/dist/{Button-Cbt1knrt.js → Button-O1qTryxl.js} +3 -3
- package/dist/{Button-Cbt1knrt.js.map → Button-O1qTryxl.js.map} +1 -1
- package/dist/{CheckItem-CJqWCE1W.js → CheckItem-De_SUcso.js} +4 -4
- package/dist/{CheckItem-CJqWCE1W.js.map → CheckItem-De_SUcso.js.map} +1 -1
- package/dist/{Checkbox-j9ZnSxT7.js → Checkbox-CIuviq1A.js} +4 -4
- package/dist/{Checkbox-j9ZnSxT7.js.map → Checkbox-CIuviq1A.js.map} +1 -1
- package/dist/Chip-DsY37srY.js +71 -0
- package/dist/Chip-DsY37srY.js.map +1 -0
- package/dist/ChipList-CqSzk5g9.js +113 -0
- package/dist/ChipList-CqSzk5g9.js.map +1 -0
- package/dist/{ContextMenu-ByeABVhU.js → ContextMenu-WC9Anmmu.js} +19 -11
- package/dist/ContextMenu-WC9Anmmu.js.map +1 -0
- package/dist/ErrorMessage-CXCrWEmT.js +49 -0
- package/dist/ErrorMessage-CXCrWEmT.js.map +1 -0
- package/dist/{Icon-KzwFJI_k.js → Icon-gUBGQxTT.js} +2 -2
- package/dist/{Icon-KzwFJI_k.js.map → Icon-gUBGQxTT.js.map} +1 -1
- package/dist/{IconButton-B_yAoSQR.js → IconButton-B4fwoP1l.js} +2 -2
- package/dist/{IconButton-B_yAoSQR.js.map → IconButton-B4fwoP1l.js.map} +1 -1
- package/dist/{InfoSummary-Cf2ein9V.js → InfoSummary-ascvleeB.js} +3 -3
- package/dist/{InfoSummary-Cf2ein9V.js.map → InfoSummary-ascvleeB.js.map} +1 -1
- package/dist/{Input-7z9sFjK3.js → Input-DCWrv5D5.js} +6 -17
- package/dist/Input-DCWrv5D5.js.map +1 -0
- package/dist/{MaskModule-DBNrJACG.js → MaskModule-vY-mW0qU.js} +1 -1
- package/dist/{MaskModule-DBNrJACG.js.map → MaskModule-vY-mW0qU.js.map} +1 -1
- package/dist/{Popover-DpD3G9_i.js → Popover-DFBRJr1m.js} +12 -6
- package/dist/Popover-DFBRJr1m.js.map +1 -0
- package/dist/{Select-BIj1BrzP.js → Select-FQSkNBPP.js} +6 -17
- package/dist/{Select-BIj1BrzP.js.map → Select-FQSkNBPP.js.map} +1 -1
- package/dist/{Switch-DJNZbvzy.js → Switch-DDuUYo3m.js} +2 -2
- package/dist/{Switch-DJNZbvzy.js.map → Switch-DDuUYo3m.js.map} +1 -1
- package/dist/{TabSwitch-DlXdgLPc.js → TabSwitch-BLHRKyvG.js} +3 -3
- package/dist/{TabSwitch-DlXdgLPc.js.map → TabSwitch-BLHRKyvG.js.map} +1 -1
- package/dist/{TextArea-DHUTFFOU.js → TextArea-Bxmzvxva.js} +6 -17
- package/dist/TextArea-Bxmzvxva.js.map +1 -0
- package/dist/{ThemeContext-DhXvmWKO.js → ThemeContext-DenX6j5W.js} +1 -1
- package/dist/{ThemeContext-DhXvmWKO.js.map → ThemeContext-DenX6j5W.js.map} +1 -1
- package/dist/{Typography-BkFV7BhK.js → Typography-nqFP5MkW.js} +2 -2
- package/dist/{Typography-BkFV7BhK.js.map → Typography-nqFP5MkW.js.map} +1 -1
- package/dist/base-popover.d.ts +3 -3
- package/dist/base-popover.js +5 -5
- package/dist/button.d.ts +2 -2
- package/dist/button.js +3 -3
- package/dist/check-item.d.ts +1 -1
- package/dist/check-item.js +4 -4
- package/dist/checkbox.d.ts +2 -2
- package/dist/checkbox.js +4 -4
- package/dist/chip-list.d.ts +2 -0
- package/dist/chip-list.js +7 -0
- package/dist/chip.d.ts +8 -0
- package/dist/chip.js +5 -0
- package/dist/context-menu.d.ts +1 -1
- package/dist/context-menu.js +8 -8
- package/dist/icon-button.d.ts +1 -1
- package/dist/icon-button.js +2 -2
- package/dist/{index-BjwQCXWj.d.ts → index-6m6Fg-qd.d.ts} +1 -1
- package/dist/{index-B_PqEEta.d.ts → index-7BdW8AIv.d.ts} +3 -2
- package/dist/{index-CEk3W9fj.d.ts → index-BAX61Ma3.d.ts} +1 -1
- package/dist/{index-BeZYjWoj.d.ts → index-BDE35oLr.d.ts} +1 -1
- package/dist/{index-Cl2z9ftU.d.ts → index-BUx7qGRJ.d.ts} +2 -10
- package/dist/{index-BhxcqGNw.d.ts → index-BimyGo_D.d.ts} +2 -2
- package/dist/{index-CK68mp8m.d.ts → index-BpaG3kK1.d.ts} +2 -2
- package/dist/{index-DX2iqN-v.d.ts → index-CZZPzAHE.d.ts} +2 -2
- package/dist/{index-VwpQusI_.d.ts → index-Cc4A-sGZ.d.ts} +5 -13
- package/dist/{index-BNPyjNve.d.ts → index-DaiZNOFe.d.ts} +1 -1
- package/dist/{index-Dp4TTO2D.d.ts → index-DzpZursa.d.ts} +4 -12
- package/dist/{index-DVE8mV5m.d.ts → index-F_qxigTi.d.ts} +5 -5
- package/dist/{index-Chi8TU12.d.ts → index-HRno-aue.d.ts} +1 -1
- package/dist/index-cjiRvXzl.d.ts +27 -0
- package/dist/{index-BY84CAyh.d.ts → index-zzy7gR26.d.ts} +2 -2
- package/dist/index.d.ts +19 -16
- package/dist/index.js +24 -22
- package/dist/info-summary.js +3 -3
- package/dist/input.d.ts +1 -1
- package/dist/input.js +6 -6
- package/dist/mask-modules.d.ts +1 -1
- package/dist/mask-modules.js +1 -1
- package/dist/popover.d.ts +3 -3
- package/dist/popover.js +5 -5
- package/dist/select.d.ts +2 -2
- package/dist/select.js +9 -9
- package/dist/{styleProps-CWZn-ouw.d.ts → styleProps-XIo7Z2e1.d.ts} +1 -1
- package/dist/switch.d.ts +1 -1
- package/dist/switch.js +2 -2
- package/dist/tab-switch.d.ts +1 -1
- package/dist/tab-switch.js +3 -3
- package/dist/text-area.d.ts +1 -1
- package/dist/text-area.js +5 -5
- package/dist/theme-context.d.ts +1 -1
- package/dist/theme-context.js +1 -1
- package/dist/{types-Dm-fEm6s.d.ts → types-BD5gMrsh.d.ts} +9 -6
- package/dist/types-C5BOgrpY.d.ts +19 -0
- package/dist/{types-BIJRqScJ.d.ts → types-DnV82Kzx.d.ts} +1 -1
- package/dist/{types-BM6zJmu5.d.ts → types-pbsJG9um.d.ts} +3 -3
- package/dist/typography.d.ts +1 -1
- package/dist/typography.js +2 -2
- package/dist/use-dismiss.d.ts +2 -0
- package/dist/use-dismiss.js +1 -1
- package/dist/use-floating.d.ts +1 -1
- package/dist/use-floating.js +1 -1
- package/dist/useDismiss-1hdSJRjS.js +42 -0
- package/dist/useDismiss-1hdSJRjS.js.map +1 -0
- package/dist/{useFloating-DRwB71jG.js → useFloating-CPegpcJ0.js} +1 -2
- package/dist/{useFloating-DRwB71jG.js.map → useFloating-CPegpcJ0.js.map} +1 -1
- package/dist/{useThemedStyles-BUR6rDGs.d.ts → useThemedStyles-Bc7Fn_iZ.d.ts} +1 -1
- package/dist/{useThemedStyles-CrarDyWc.js → useThemedStyles-wIbjybs1.js} +1 -1
- package/dist/{useThemedStyles-CrarDyWc.js.map → useThemedStyles-wIbjybs1.js.map} +1 -1
- package/package.json +9 -1
- package/dist/ContextMenu-ByeABVhU.js.map +0 -1
- package/dist/Input-7z9sFjK3.js.map +0 -1
- package/dist/Label-BHq2knad.js +0 -25
- package/dist/Label-BHq2knad.js.map +0 -1
- package/dist/Popover-DpD3G9_i.js.map +0 -1
- package/dist/TextArea-DHUTFFOU.js.map +0 -1
- package/dist/useDismiss-CgVHqmqk.js +0 -46
- package/dist/useDismiss-CgVHqmqk.js.map +0 -1
- /package/dist/{chunk-SwsWFa5-.js → chunk-D2fR7Rao.js} +0 -0
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Popover-DpD3G9_i.js","names":["node: HTMLElement | null","Popover: React.FC<PopoverProps>"],"sources":["../src/components/commons/toolkit/Popover/hooks/usePortalContainer/index.ts","../src/components/commons/toolkit/Popover/utils/focusNextFrom.ts","../src/components/commons/toolkit/Popover/utils/portal.ts","../src/components/commons/toolkit/Popover/hooks/usePopoverA11yFocus/index.ts","../src/components/commons/toolkit/Popover/hooks/usePopoverFloatingOptions/index.ts","../src/components/commons/toolkit/Popover/styles.ts","../src/components/commons/toolkit/Popover/index.tsx"],"sourcesContent":["// External Libraries\nimport { useEffect, useMemo, useRef, useState } from 'react'\n\nexport function usePortalContainer(portalId?: string) {\n const portalRef = useRef<HTMLElement | null>(null)\n const [portalEl, setPortalEl] = useState<HTMLElement | null>(null)\n\n useEffect(() => {\n if (typeof document === 'undefined') return\n\n if (!portalId) {\n setPortalEl(null)\n return\n }\n\n const found = document.getElementById(portalId) as HTMLElement | null\n setPortalEl(found)\n if (found) return\n\n const obs = new MutationObserver(() => {\n const el = document.getElementById(portalId) as HTMLElement | null\n if (el) {\n setPortalEl(el)\n obs.disconnect()\n }\n })\n\n obs.observe(document.documentElement, { childList: true, subtree: true })\n return () => obs.disconnect()\n }, [portalId])\n\n useEffect(() => {\n portalRef.current = portalEl\n }, [portalEl])\n\n const portalContainer = useMemo(() => {\n if (typeof document === 'undefined') return null\n return portalEl ?? document.body\n }, [portalEl])\n\n return { portalRef, portalEl, portalContainer }\n}\n","const SELECTOR = [\n 'a[href]',\n 'button:not([disabled])',\n 'input:not([disabled]):not([type=\"hidden\"])',\n 'select:not([disabled])',\n 'textarea:not([disabled])',\n '[tabindex]:not([tabindex=\"-1\"])',\n '[contenteditable=\"true\"]'\n].join(',')\n\nfunction isVisible(el: HTMLElement) {\n const style = window.getComputedStyle(el)\n if (style.display === 'none' || style.visibility === 'hidden') return false\n const r = el.getBoundingClientRect()\n return r.width > 0 && r.height > 0\n}\n\nexport function focusNextFrom(from: HTMLElement, root: ParentNode = document) {\n const list = Array.from(root.querySelectorAll<HTMLElement>(SELECTOR)).filter(\n isVisible\n )\n\n const i = list.indexOf(from)\n const next = i >= 0 ? list[i + 1] : list[0]\n next?.focus?.()\n return next ?? null\n}\n","export function resolvePortalContainer(portalId?: string): HTMLElement | null {\n if (typeof document === 'undefined') return null\n if (!portalId) return document.body\n return document.getElementById(portalId) ?? document.body\n}\n\nexport function createsFixedContainingBlock(el: HTMLElement): boolean {\n let node: HTMLElement | null = el\n while (node) {\n const s = getComputedStyle(node)\n if (\n s.transform !== 'none' ||\n s.translate !== 'none' ||\n s.perspective !== 'none' ||\n s.filter !== 'none' ||\n s.backdropFilter !== 'none' ||\n s.contain.includes('paint')\n ) {\n return true\n }\n node = node.parentElement\n }\n return false\n}\n","// External Libraries\nimport { useEffect, useRef } from 'react'\n\n// Utils\nimport { focusNextFrom } from '../../utils'\n\n// Types\nimport type { CloseReason } from '../../types'\n\ntype Params = {\n open: boolean\n restoreFocusOnClose: boolean\n triggerRef: React.RefObject<HTMLElement | null>\n lastCloseReasonRef: React.MutableRefObject<CloseReason>\n setOpen: (v: boolean) => void\n}\n\nexport function usePopoverA11yFocus({\n open,\n restoreFocusOnClose,\n triggerRef,\n lastCloseReasonRef,\n setOpen\n}: Params) {\n const tabFocusFromRef = useRef<HTMLElement | null>(null)\n\n useEffect(() => {\n if (!open) return\n if (typeof document === 'undefined') return\n\n const onKeyDownCapture = (e: KeyboardEvent) => {\n if (e.key !== 'Tab') return\n lastCloseReasonRef.current = 'tab'\n tabFocusFromRef.current = triggerRef.current\n setOpen(false)\n }\n\n document.addEventListener('keydown', onKeyDownCapture, true)\n return () => document.removeEventListener('keydown', onKeyDownCapture, true)\n }, [open, setOpen, triggerRef, lastCloseReasonRef])\n\n useEffect(() => {\n if (open) return\n if (!restoreFocusOnClose) return\n\n const reason = lastCloseReasonRef.current\n\n if (reason === 'tab') {\n const from = tabFocusFromRef.current\n tabFocusFromRef.current = null\n lastCloseReasonRef.current = 'programmatic'\n\n if (from) {\n requestAnimationFrame(() => {\n focusNextFrom(from, document)\n })\n }\n return\n }\n\n requestAnimationFrame(() => triggerRef.current?.focus?.())\n lastCloseReasonRef.current = 'programmatic'\n }, [open, restoreFocusOnClose, triggerRef, lastCloseReasonRef])\n}\n","// External Libraries\nimport { useMemo } from 'react'\nimport type { RefObject } from 'react'\n\n// Hooks\nimport type { FloatingOptions } from '@hooks/useFloating/types'\n\n// Utils\nimport { createsFixedContainingBlock } from '../../utils'\n\ntype Params = {\n portalId?: string\n portalContainer: HTMLElement | null\n portalRef: RefObject<HTMLElement | null>\n floatingOptions?: FloatingOptions\n absoluteReference?: FloatingOptions['absoluteReference']\n}\n\nexport function usePopoverFloatingOptions({\n portalId,\n portalContainer,\n portalRef,\n floatingOptions,\n absoluteReference\n}: Params) {\n return useMemo(() => {\n const base = {\n offsetY: 6,\n keepInViewport: true,\n placement: 'bottom-start',\n portalRef\n } as const\n\n const userStrategy = floatingOptions?.strategy ?? 'fixed'\n\n const shouldFixFixedInPortal =\n !!portalId &&\n portalContainer &&\n userStrategy === 'fixed' &&\n portalContainer !== document.body &&\n createsFixedContainingBlock(portalContainer)\n\n if (shouldFixFixedInPortal) {\n return {\n ...base,\n ...floatingOptions,\n strategy: 'absolute',\n absoluteReference: 'offsetParent'\n } as any\n }\n\n return {\n ...base,\n ...floatingOptions,\n absoluteReference\n } as any\n }, [portalId, portalContainer, portalRef, floatingOptions, absoluteReference])\n}\n","// Types\nimport type { PopoverProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createPopoverStyles({ hideShadow = false }: PopoverProps) {\n return styled({\n popoverNode: {\n position: 'fixed',\n left: 0,\n top: 0,\n\n zIndex: 10,\n\n padding: '0.25rem',\n\n backgroundColor: 'var(--px-bg)',\n boxShadow: hideShadow ? 'none' : 'var(--px-ring-1)',\n\n borderRadius: 'var(--px-radius-xl)'\n },\n\n trigger: {\n width: 'fit-content',\n height: 'fit-content'\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\nimport { createPortal } from 'react-dom'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\n// Hooks\nimport { useDismiss } from '@hooks/useDismiss'\nimport { useFloating } from '@hooks/useFloating'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\nimport { usePortalContainer } from './hooks/usePortalContainer'\nimport { usePopoverA11yFocus } from './hooks/usePopoverA11yFocus'\nimport { usePopoverFloatingOptions } from './hooks/usePopoverFloatingOptions'\n\n// Types\nimport type { CloseReason, PopoverProps } from './types'\n\n// Styles\nimport { createPopoverStyles } from './styles'\n\nexport const Popover: React.FC<PopoverProps> = props => {\n const {\n portalId,\n anchorRef,\n floatingOptions,\n absoluteReference,\n closeOnEscape = true,\n open: controlledOpen,\n closeOnOutsideClick = true,\n restoreFocusOnClose = true,\n trigger,\n content,\n onOpenChange,\n onMouseEnter,\n onMouseLeave\n } = props\n\n const triggerRef = useRef<HTMLElement | null>(null)\n const popoverRef = useRef<HTMLDivElement | null>(null)\n const resolvedAnchorRef = (anchorRef ?? triggerRef) as any\n\n const lastCloseReasonRef = useRef<CloseReason>('programmatic')\n\n const [uncontrolledOpen, setUncontrolledOpen] = useState(false)\n const [widthTrigger, setWidthTrigger] = useState(0)\n const open = controlledOpen ?? uncontrolledOpen\n\n const { portalRef, portalContainer } = usePortalContainer(portalId)\n\n const { styles } = useThemedStyles(props, createPopoverStyles, {\n applyCommonProps: true,\n override: props.styles,\n commonSlot: 'popoverNode',\n pick: p => [p.open, p.content, p.trigger]\n })\n\n const setOpen = useCallback(\n (v: boolean) => {\n onOpenChange?.(v)\n if (controlledOpen === undefined) setUncontrolledOpen(v)\n },\n [controlledOpen, onOpenChange]\n )\n\n const effectiveFloating = usePopoverFloatingOptions({\n portalId,\n portalContainer: portalContainer as any,\n portalRef,\n floatingOptions,\n absoluteReference\n })\n\n const { floatingRef, update } = useFloating(\n resolvedAnchorRef,\n effectiveFloating\n )\n\n usePopoverA11yFocus({\n open,\n restoreFocusOnClose,\n triggerRef,\n lastCloseReasonRef,\n setOpen\n })\n\n useDismiss({\n open,\n closeOnEscape,\n closeOnOutsideClick,\n refs: [triggerRef, popoverRef],\n onClose: () => {\n lastCloseReasonRef.current = 'outside'\n setOpen(false)\n }\n })\n\n useEffect(() => {\n if (!open) return\n setWidthTrigger(triggerRef.current?.offsetWidth ?? 0)\n requestAnimationFrame(update)\n }, [open, update])\n\n const triggerNode =\n trigger?.({\n ariaExpanded: open,\n ref: triggerRef as any,\n onClick: () => setOpen(!open)\n }) ?? null\n\n const popoverNode = open ? (\n <div\n ref={el => {\n popoverRef.current = el\n floatingRef(el as any)\n }}\n role=\"dialog\"\n style={styles.popoverNode}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onKeyDown={e => {\n if (e.key === 'Escape') {\n e.preventDefault()\n lastCloseReasonRef.current = 'escape'\n setOpen(false)\n }\n }}\n >\n {content({ close: () => setOpen(false), widthTrigger })}\n </div>\n ) : null\n\n return (\n <>\n {triggerNode}\n {typeof document !== 'undefined'\n ? createPortal(popoverNode, portalContainer ?? document.body)\n : null}\n </>\n )\n}\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea-DHUTFFOU.js","names":[],"sources":["../src/components/commons/inputs/TextArea/styles.ts","../src/components/commons/inputs/TextArea/index.tsx"],"sourcesContent":["// Types\nimport { styled } from '@hooks/useThemedStyles/types'\nimport type { TextAreaProps } from './types'\n\nexport function createTextAreaStyles(props: TextAreaProps) {\n const { height = '8rem', readOnly, startIcon } = props\n\n return styled({\n container: {\n width: '100%',\n\n display: 'flex',\n flexDirection: 'column',\n\n rowGap: '0.375rem'\n },\n iconContainer: {\n position: 'absolute',\n left: '0.75rem',\n top: '1.375rem',\n transform: 'translateY(-50%)'\n },\n textArea: {\n height,\n width: '100%',\n paddingBlock: '0.75rem',\n paddingInline: '0.875rem',\n borderWidth: 1,\n borderRadius: '0.5rem',\n resize: 'none',\n\n fontWeight: '400',\n fontSize: '1rem',\n color: 'var(--px-text-primary)',\n\n borderColor: props.errorMessage\n ? 'var(--px-color-error)'\n : 'var(--px-border-primary)',\n outlineOffset: '-1px',\n\n cursor: readOnly ? 'default' : undefined,\n paddingLeft: startIcon ? '2.5rem' : undefined,\n\n __rules: {\n '&::placeholder': {\n fontWeight: 400,\n color: 'var(--px-text-secondary)'\n },\n '&:focus-within': {\n outlineOffset: '-1px',\n outline: `2px solid var(${props.errorMessage ? '--px-color-error' : '--px-color-primary'})`\n }\n }\n },\n error: {\n display: 'block',\n fontWeight: 400,\n lineHeight: '1rem',\n fontSize: '0.75rem',\n fontFamily: 'inherit',\n color: 'var(--px-text-error)'\n }\n })\n}\n","// External Libraries\nimport { useId } from 'react'\n\n// Types\nimport type { TextAreaProps } from './types'\n\n// Components\nimport { Label } from '@components/commons/toolkit/Label'\nimport { Icon } from '@components/commons/toolkit/Icon'\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createTextAreaStyles } from './styles'\n\nexport const TextArea = (props: TextAreaProps) => {\n const {\n value,\n disabled,\n readOnly,\n maxLength,\n hideMaxLength,\n textMaxLength,\n placeholder,\n errorMessage,\n\n label,\n required,\n requiredColor,\n labelConfig,\n\n startIcon,\n iconColor\n } = props\n\n // Hooks\n const inputId = useId()\n\n const { styles, classes } = useThemedStyles(props, createTextAreaStyles, {\n pick: p => [\n p.height,\n p.readOnly,\n p.startIcon,\n p.placeholderColor,\n p.focusedRingColor\n ],\n override: props.styles,\n applyCommonProps: true\n })\n\n // Functions\n function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {\n if (disabled || readOnly) return\n props.onChange?.(e.target.value)\n }\n\n function renderLabel() {\n if (!label) return null\n\n return (\n <div>\n <Label\n label={label}\n htmlFor={inputId}\n required={required}\n requiredColor={requiredColor}\n {...labelConfig}\n />\n </div>\n )\n }\n\n return (\n <div style={styles.container}>\n {renderLabel()}\n\n <div style={{ position: 'relative' }}>\n {startIcon && (\n <div style={styles.iconContainer}>\n <Icon\n name={startIcon}\n color={iconColor ? iconColor : 'var(--px-text-primary)'}\n />\n </div>\n )}\n\n <textarea\n value={value}\n disabled={disabled}\n readOnly={readOnly}\n maxLength={maxLength}\n placeholder={placeholder}\n style={styles.textArea}\n className={classes.textArea}\n onChange={handleChange}\n />\n </div>\n\n {maxLength && !hideMaxLength ? (\n <Typography variant=\"b2\" styles={{ text: { marginLeft: 'auto' } }}>\n {value?.length}/{maxLength} {textMaxLength}\n </Typography>\n ) : null}\n\n {errorMessage ? <span style={styles.error}>{errorMessage}</span> : null}\n </div>\n )\n}\n"],"mappings":";;;;;;;;AAIA,SAAgB,qBAAqB,OAAsB;CACzD,MAAM,EAAE,SAAS,QAAQ,UAAU,cAAc;AAEjD,QAAO,OAAO;EACZ,WAAW;GACT,OAAO;GAEP,SAAS;GACT,eAAe;GAEf,QAAQ;GACT;EACD,eAAe;GACb,UAAU;GACV,MAAM;GACN,KAAK;GACL,WAAW;GACZ;EACD,UAAU;GACR;GACA,OAAO;GACP,cAAc;GACd,eAAe;GACf,aAAa;GACb,cAAc;GACd,QAAQ;GAER,YAAY;GACZ,UAAU;GACV,OAAO;GAEP,aAAa,MAAM,eACf,0BACA;GACJ,eAAe;GAEf,QAAQ,WAAW,YAAY;GAC/B,aAAa,YAAY,WAAW;GAEpC,SAAS;IACP,kBAAkB;KAChB,YAAY;KACZ,OAAO;KACR;IACD,kBAAkB;KAChB,eAAe;KACf,SAAS,iBAAiB,MAAM,eAAe,qBAAqB,qBAAqB;KAC1F;IACF;GACF;EACD,OAAO;GACL,SAAS;GACT,YAAY;GACZ,YAAY;GACZ,UAAU;GACV,YAAY;GACZ,OAAO;GACR;EACF,CAAC;;;;;AC7CJ,MAAa,YAAY,UAAyB;CAChD,MAAM,EACJ,OACA,UACA,UACA,WACA,eACA,eACA,aACA,cAEA,OACA,UACA,eACA,aAEA,WACA,cACE;CAGJ,MAAM,UAAU,OAAO;CAEvB,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,sBAAsB;EACvE,OAAM,MAAK;GACT,EAAE;GACF,EAAE;GACF,EAAE;GACF,EAAE;GACF,EAAE;GACH;EACD,UAAU,MAAM;EAChB,kBAAkB;EACnB,CAAC;CAGF,SAAS,aAAa,GAA2C;AAC/D,MAAI,YAAY,SAAU;AAC1B,QAAM,WAAW,EAAE,OAAO,MAAM;;CAGlC,SAAS,cAAc;AACrB,MAAI,CAAC,MAAO,QAAO;AAEnB,SACE,oBAAC,mBACC,oBAAC;GACQ;GACP,SAAS;GACC;GACK;GACf,GAAI;IACJ,GACE;;AAIV,QACE,qBAAC;EAAI,OAAO,OAAO;;GAChB,aAAa;GAEd,qBAAC;IAAI,OAAO,EAAE,UAAU,YAAY;eACjC,aACC,oBAAC;KAAI,OAAO,OAAO;eACjB,oBAAC;MACC,MAAM;MACN,OAAO,YAAY,YAAY;OAC/B;MACE,EAGR,oBAAC;KACQ;KACG;KACA;KACC;KACE;KACb,OAAO,OAAO;KACd,WAAW,QAAQ;KACnB,UAAU;MACV;KACE;GAEL,aAAa,CAAC,gBACb,qBAAC;IAAW,SAAQ;IAAK,QAAQ,EAAE,MAAM,EAAE,YAAY,QAAQ,EAAE;;KAC9D,OAAO;KAAO;KAAE;KAAU;KAAE;;KAClB,GACX;GAEH,eAAe,oBAAC;IAAK,OAAO,OAAO;cAAQ;KAAoB,GAAG;;GAC/D"}
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { useEffect } from "react";
|
|
2
|
-
|
|
3
|
-
//#region src/hooks/useDismiss/index.ts
|
|
4
|
-
function getEls(refs) {
|
|
5
|
-
return refs.map((r) => r.current).filter((x) => !!x);
|
|
6
|
-
}
|
|
7
|
-
function isInside(e, els) {
|
|
8
|
-
const anyE = e;
|
|
9
|
-
const path = typeof anyE.composedPath === "function" ? anyE.composedPath() : void 0;
|
|
10
|
-
if (path && path.length) return els.some((el) => path.includes(el));
|
|
11
|
-
const t = e.target;
|
|
12
|
-
if (!t) return false;
|
|
13
|
-
return els.some((el) => el.contains(t));
|
|
14
|
-
}
|
|
15
|
-
function useDismiss({ open, refs, closeOnEscape = true, closeOnOutsideClick = true, onClose }) {
|
|
16
|
-
useEffect(() => {
|
|
17
|
-
if (!open) return;
|
|
18
|
-
const onPointerDownCapture = (e) => {
|
|
19
|
-
if (!closeOnOutsideClick) return;
|
|
20
|
-
const els = getEls(refs);
|
|
21
|
-
if (!els.length) return;
|
|
22
|
-
if (isInside(e, els)) return;
|
|
23
|
-
onClose();
|
|
24
|
-
};
|
|
25
|
-
const onKeyDownCapture = (e) => {
|
|
26
|
-
if (!closeOnEscape) return;
|
|
27
|
-
if (e.key === "Escape") onClose();
|
|
28
|
-
};
|
|
29
|
-
document.addEventListener("pointerdown", onPointerDownCapture, true);
|
|
30
|
-
document.addEventListener("keydown", onKeyDownCapture, true);
|
|
31
|
-
return () => {
|
|
32
|
-
document.removeEventListener("pointerdown", onPointerDownCapture, true);
|
|
33
|
-
document.removeEventListener("keydown", onKeyDownCapture, true);
|
|
34
|
-
};
|
|
35
|
-
}, [
|
|
36
|
-
open,
|
|
37
|
-
onClose,
|
|
38
|
-
refs,
|
|
39
|
-
closeOnOutsideClick,
|
|
40
|
-
closeOnEscape
|
|
41
|
-
]);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
//#endregion
|
|
45
|
-
export { useDismiss as t };
|
|
46
|
-
//# sourceMappingURL=useDismiss-CgVHqmqk.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useDismiss-CgVHqmqk.js","names":["path: EventTarget[] | undefined"],"sources":["../src/hooks/useDismiss/index.ts"],"sourcesContent":["import { type RefObject, useEffect } from 'react'\n\ntype UseDismissParams = {\n open: boolean\n closeOnEscape?: boolean\n closeOnOutsideClick?: boolean\n refs: Array<RefObject<HTMLElement | null>>\n onClose: () => void\n}\n\nfunction getEls(refs: Array<RefObject<HTMLElement | null>>) {\n return refs.map(r => r.current).filter((x): x is HTMLElement => !!x)\n}\n\nfunction isInside(e: Event, els: HTMLElement[]) {\n const anyE = e as any\n const path: EventTarget[] | undefined =\n typeof anyE.composedPath === 'function' ? anyE.composedPath() : undefined\n\n if (path && path.length) return els.some(el => path.includes(el))\n\n const t = e.target as Node | null\n if (!t) return false\n return els.some(el => el.contains(t))\n}\n\nexport function useDismiss({\n open,\n refs,\n closeOnEscape = true,\n closeOnOutsideClick = true,\n onClose\n}: UseDismissParams) {\n useEffect(() => {\n if (!open) return\n\n const onPointerDownCapture = (e: PointerEvent) => {\n if (!closeOnOutsideClick) return\n const els = getEls(refs)\n if (!els.length) return\n if (isInside(e, els)) return\n onClose()\n }\n\n const onKeyDownCapture = (e: KeyboardEvent) => {\n if (!closeOnEscape) return\n if (e.key === 'Escape') onClose()\n }\n\n document.addEventListener('pointerdown', onPointerDownCapture, true)\n document.addEventListener('keydown', onKeyDownCapture, true)\n\n return () => {\n document.removeEventListener('pointerdown', onPointerDownCapture, true)\n document.removeEventListener('keydown', onKeyDownCapture, true)\n }\n }, [open, onClose, refs, closeOnOutsideClick, closeOnEscape])\n}\n"],"mappings":";;;AAUA,SAAS,OAAO,MAA4C;AAC1D,QAAO,KAAK,KAAI,MAAK,EAAE,QAAQ,CAAC,QAAQ,MAAwB,CAAC,CAAC,EAAE;;AAGtE,SAAS,SAAS,GAAU,KAAoB;CAC9C,MAAM,OAAO;CACb,MAAMA,OACJ,OAAO,KAAK,iBAAiB,aAAa,KAAK,cAAc,GAAG;AAElE,KAAI,QAAQ,KAAK,OAAQ,QAAO,IAAI,MAAK,OAAM,KAAK,SAAS,GAAG,CAAC;CAEjE,MAAM,IAAI,EAAE;AACZ,KAAI,CAAC,EAAG,QAAO;AACf,QAAO,IAAI,MAAK,OAAM,GAAG,SAAS,EAAE,CAAC;;AAGvC,SAAgB,WAAW,EACzB,MACA,MACA,gBAAgB,MAChB,sBAAsB,MACtB,WACmB;AACnB,iBAAgB;AACd,MAAI,CAAC,KAAM;EAEX,MAAM,wBAAwB,MAAoB;AAChD,OAAI,CAAC,oBAAqB;GAC1B,MAAM,MAAM,OAAO,KAAK;AACxB,OAAI,CAAC,IAAI,OAAQ;AACjB,OAAI,SAAS,GAAG,IAAI,CAAE;AACtB,YAAS;;EAGX,MAAM,oBAAoB,MAAqB;AAC7C,OAAI,CAAC,cAAe;AACpB,OAAI,EAAE,QAAQ,SAAU,UAAS;;AAGnC,WAAS,iBAAiB,eAAe,sBAAsB,KAAK;AACpE,WAAS,iBAAiB,WAAW,kBAAkB,KAAK;AAE5D,eAAa;AACX,YAAS,oBAAoB,eAAe,sBAAsB,KAAK;AACvE,YAAS,oBAAoB,WAAW,kBAAkB,KAAK;;IAEhE;EAAC;EAAM;EAAS;EAAM;EAAqB;EAAc,CAAC"}
|
|
File without changes
|