softable-pixels-web 1.2.41 → 1.2.43
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/{Checkbox-DWlmddP3.js → Checkbox-CfJ2UfuX.js} +3 -2
- package/dist/{Checkbox-DWlmddP3.js.map → Checkbox-CfJ2UfuX.js.map} +1 -1
- package/dist/{ContextMenu-CG3Anq1A.js → ContextMenu-BZOU8h-T.js} +2 -2
- package/dist/{ContextMenu-CG3Anq1A.js.map → ContextMenu-BZOU8h-T.js.map} +1 -1
- package/dist/{DatePicker-DIgVnLWM.js → DatePicker-D-kMJREv.js} +2 -2
- package/dist/{DatePicker-DIgVnLWM.js.map → DatePicker-D-kMJREv.js.map} +1 -1
- package/dist/{Input-ChS1OoFI.js → Input-DrSNwdgM.js} +2 -2
- package/dist/{Input-ChS1OoFI.js.map → Input-DrSNwdgM.js.map} +1 -1
- package/dist/{MaskModule-DZko7F_e.js → MaskModule-CnJJhVLo.js} +31 -2
- package/dist/MaskModule-CnJJhVLo.js.map +1 -0
- package/dist/{Select-C8JCFwDy.js → Select-_4TaTR06.js} +2 -2
- package/dist/{Select-C8JCFwDy.js.map → Select-_4TaTR06.js.map} +1 -1
- package/dist/{Switch-BQhkSPJw.js → Switch-DJ-BdA2_.js} +6 -2
- package/dist/Switch-DJ-BdA2_.js.map +1 -0
- package/dist/checkbox.d.ts +2 -2
- package/dist/checkbox.js +1 -1
- package/dist/context-menu.js +2 -2
- package/dist/date-picker.js +2 -2
- package/dist/{index-CSRzYxDc.d.ts → index-BJOSIhuY.d.ts} +2 -1
- package/dist/{index-qPJuO65u.d.ts → index-C_D1hQoG.d.ts} +2 -2
- package/dist/{index-DjfLWx6f.d.ts → index-ClPI-7bA.d.ts} +5 -2
- package/dist/{index-DlP2AWaD.d.ts → index-Jsq11LTb.d.ts} +3 -2
- package/dist/index.d.ts +6 -6
- package/dist/index.js +9 -9
- package/dist/input.d.ts +1 -1
- package/dist/input.js +2 -2
- package/dist/mask-modules.d.ts +1 -1
- package/dist/mask-modules.js +1 -1
- package/dist/select.js +3 -3
- package/dist/switch.d.ts +2 -2
- package/dist/switch.js +2 -2
- package/package.json +1 -1
- package/dist/MaskModule-DZko7F_e.js.map +0 -1
- package/dist/Switch-BQhkSPJw.js.map +0 -1
|
@@ -129,7 +129,7 @@ function getContrastingTextColor(backgroundColor) {
|
|
|
129
129
|
//#endregion
|
|
130
130
|
//#region src/components/commons/toolkit/Checkbox/index.tsx
|
|
131
131
|
const Checkbox$1 = (props) => {
|
|
132
|
-
const { icon, label, color, labelVariant, labelLineThrough = false, checked = false, disabled = false, onChange } = props;
|
|
132
|
+
const { icon, label, color, required, labelVariant, labelLineThrough = false, checked = false, disabled = false, onChange } = props;
|
|
133
133
|
const iconColor = color ? getContrastingTextColor(color) : void 0;
|
|
134
134
|
const { id } = useCheckbox();
|
|
135
135
|
const { styles, classes } = useThemedStyles(props, createCheckBoxStyles);
|
|
@@ -141,6 +141,7 @@ const Checkbox$1 = (props) => {
|
|
|
141
141
|
id,
|
|
142
142
|
tabIndex: 0,
|
|
143
143
|
checked,
|
|
144
|
+
required,
|
|
144
145
|
disabled,
|
|
145
146
|
onCheckedChange: (checked$1) => onChange(checked$1 === true),
|
|
146
147
|
children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
|
|
@@ -163,4 +164,4 @@ const Checkbox$1 = (props) => {
|
|
|
163
164
|
|
|
164
165
|
//#endregion
|
|
165
166
|
export { Checkbox$1 as t };
|
|
166
|
-
//# sourceMappingURL=Checkbox-
|
|
167
|
+
//# sourceMappingURL=Checkbox-CfJ2UfuX.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox-
|
|
1
|
+
{"version":3,"file":"Checkbox-CfJ2UfuX.js","names":["Label: React.FC<LabelProps>","LabelRadix","CHECKBOX_STYLES: Record<string, StyleMap>","Checkbox: React.FC<CheckboxProps>","CheckboxRadix","checked","Label"],"sources":["../src/components/commons/toolkit/Checkbox/components/Label/styles.ts","../src/components/commons/toolkit/Checkbox/components/Label/index.tsx","../src/components/commons/toolkit/Checkbox/hooks/useCheckbox.ts","../src/components/commons/toolkit/Checkbox/styles.ts","../src/utils/functions/getContrastingTextColor.ts","../src/components/commons/toolkit/Checkbox/index.tsx"],"sourcesContent":["// Types\nimport type { LabelProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createLabelStyles(props: LabelProps): StyleMap {\n const { disabled } = props\n\n return styled({\n container: {\n userSelect: 'none',\n opacity: disabled ? 0.6 : 1,\n cursor: disabled ? 'not-allowed' : 'pointer',\n\n transition: 'all 200ms',\n\n __rules: {\n ':hover': { color: 'var(--px-color-secondary)' }\n }\n }\n })\n}\n","// External libraries\nimport { Label as LabelRadix } from 'radix-ui'\n\n// Components\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { LabelProps } from './types'\n\n// Styles\nimport { createLabelStyles } from './styles'\n\nexport const Label: React.FC<LabelProps> = props => {\n const { idFor, label, labelVariant, labelLineThrough = false } = props\n\n // Hooks\n const { styles } = useThemedStyles(props, createLabelStyles, {\n pick: p => [p.disabled, p.label],\n applyCommonProps: true\n })\n\n return (\n <LabelRadix.Root htmlFor={idFor} style={styles.container}>\n <Typography\n variant={labelVariant ?? 'b1'}\n fontWeight=\"regular\"\n labelLineThrough={labelLineThrough}\n >\n {label}\n </Typography>\n </LabelRadix.Root>\n )\n}\n","// External libraries\nimport { useId } from 'react'\n\nexport function useCheckbox() {\n return {\n id: useId()\n }\n}\n","// Types\nimport type { CheckboxProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport const CHECKBOX_STYLES: Record<string, StyleMap> = {\n size: {\n sm: { width: '1rem', height: '1rem' },\n md: { width: '1.25rem', height: '1.25rem' },\n lg: { width: '1.5rem', height: '1.5rem' }\n },\n radius: {\n none: { borderRadius: 0 },\n sm: { borderRadius: '0.25rem' },\n md: { borderRadius: '0.375rem' },\n lg: { borderRadius: '0.5rem' },\n full: { borderRadius: '100%' }\n }\n}\n\nexport function createCheckBoxStyles(props: CheckboxProps) {\n const {\n color,\n checked,\n size = 'md',\n radius = 'md',\n disabled = false,\n labelPlacement = 'right'\n } = props\n\n const focusIndicatorOffsetColor = '#fff'\n\n return styled({\n container: {\n display: 'flex',\n columnGap: '0.5rem',\n alignItems: 'center',\n '--px-ring-color': color ?? undefined,\n flexDirection: labelPlacement === 'right' ? 'row' : 'row-reverse'\n },\n\n root: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n\n backgroundColor: checked ? color : 'white',\n borderWidth: '1px',\n borderStyle: 'solid',\n borderColor: checked ? color : 'var(--px-border-primary, #e5e7eb)',\n\n transition: 'color 200ms',\n opacity: disabled ? 0.5 : 1,\n cursor: disabled ? 'not-allowed' : 'pointer',\n\n ...(CHECKBOX_STYLES.size[size] as any),\n ...(CHECKBOX_STYLES.radius[radius] as any),\n\n __rules: {\n '&:hover': { borderColor: 'var(--px-border-secondary, #e5e7eb)' },\n '&:focus-visible': {\n outline: 'none',\n boxShadow: `0 0 0 2px ${focusIndicatorOffsetColor}, 0 0 0 4px var(--px-ring-color, #2b2b2bff)`\n }\n }\n },\n\n indicator: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: 'var(--px-text-primary, #4b5563)'\n }\n })\n}\n","/**\n * Returns the contrasting text color for a given background color.\n * @param backgroundColor hexadecimal color (i.e.: \"#ffffff\", \"#000\", \"#ffcc00\")\n */\nexport function getContrastingTextColor(\n backgroundColor: string\n): 'black' | 'white' {\n let hex = backgroundColor.replace('#', '')\n\n if (hex.length === 3) {\n hex = hex\n .split('')\n .map(c => c + c)\n .join('')\n }\n\n if (hex.length === 8) {\n hex = hex.substring(0, 6)\n }\n\n if (hex.length !== 6) return 'black'\n\n const r = parseInt(hex.substring(0, 2), 16)\n const g = parseInt(hex.substring(2, 4), 16)\n const b = parseInt(hex.substring(4, 6), 16)\n\n const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255\n\n return luminance > 0.6 ? 'black' : 'white'\n}\n","// External Libraries\nimport type React from 'react'\nimport { Checkbox as CheckboxRadix } from 'radix-ui'\n\n// Components\nimport { Icon } from '../Icon'\nimport { Label } from './components/Label'\n\n// Hooks\nimport { useCheckbox } from './hooks/useCheckbox'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { CheckboxProps } from './types'\n\n// Styles\nimport { createCheckBoxStyles } from './styles'\nimport { getContrastingTextColor } from '@utils/functions'\n\nexport type { CheckboxProps }\n\nexport const Checkbox: React.FC<CheckboxProps> = props => {\n const {\n icon,\n label,\n color,\n required,\n labelVariant,\n labelLineThrough = false,\n checked = false,\n disabled = false,\n onChange\n } = props\n\n const iconColor = color ? getContrastingTextColor(color) : undefined\n\n // Hooks\n const { id } = useCheckbox()\n\n const { styles, classes } = useThemedStyles(props, createCheckBoxStyles)\n\n return (\n <div style={styles.container}>\n <CheckboxRadix.Root\n style={styles.root}\n className={classes.root}\n id={id}\n tabIndex={0}\n checked={checked}\n required={required}\n disabled={disabled}\n onCheckedChange={checked => onChange(checked === true)}\n >\n <CheckboxRadix.Indicator style={styles.indicator}>\n {icon ?? <Icon name=\"general-check\" size=\"sm\" color={iconColor} />}\n </CheckboxRadix.Indicator>\n </CheckboxRadix.Root>\n\n {label ? (\n <Label\n idFor={id}\n labelLineThrough={labelLineThrough}\n label={label}\n disabled={disabled}\n labelVariant={labelVariant}\n />\n ) : null}\n </div>\n )\n}\n"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { n as styled, t as useThemedStyles } from "./useThemedStyles-Dco_54KA.js";
|
|
2
2
|
import { t as Typography } from "./Typography-CcQTHV-F.js";
|
|
3
|
-
import { t as Switch } from "./Switch-
|
|
3
|
+
import { t as Switch } from "./Switch-DJ-BdA2_.js";
|
|
4
4
|
import { t as BasePopover } from "./BasePopover-CY-9StFD.js";
|
|
5
5
|
import { useEffect, useMemo, useRef, useState } from "react";
|
|
6
6
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -325,4 +325,4 @@ const ContextMenu = (props) => {
|
|
|
325
325
|
|
|
326
326
|
//#endregion
|
|
327
327
|
export { types_exports as n, ContextMenu as t };
|
|
328
|
-
//# sourceMappingURL=ContextMenu-
|
|
328
|
+
//# sourceMappingURL=ContextMenu-BZOU8h-T.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenu-CG3Anq1A.js","names":["floatingOptions: FloatingOptions","DividerRow: React.FC"],"sources":["../src/components/commons/toolkit/ContextMenu/components/Menu/components/ItemRow/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/components/ItemRow/index.tsx","../src/components/commons/toolkit/ContextMenu/components/Menu/components/CustomRow/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/components/CustomRow/index.tsx","../src/components/commons/toolkit/ContextMenu/components/Menu/components/DividerRow/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/components/DividerRow/index.tsx","../src/components/commons/toolkit/ContextMenu/components/Menu/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/index.tsx","../src/components/commons/toolkit/ContextMenu/utils/normalizeMenuOptions.ts","../src/components/commons/toolkit/ContextMenu/types.ts","../src/components/commons/toolkit/ContextMenu/styles.ts","../src/components/commons/toolkit/ContextMenu/index.tsx"],"sourcesContent":["// Types\nimport type { ItemRowProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createItemRowStyles<T>({ item, active }: ItemRowProps<T>) {\n return styled({\n button: {\n width: '100%',\n textAlign: 'left',\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n\n gap: '0.5rem',\n borderRadius: '0.5rem',\n paddingInline: '0.5rem',\n paddingBlock: '0.25rem',\n\n userSelect: 'none',\n cursor: item.disabled ? 'not-allowed' : 'pointer',\n\n backgroundColor:\n item.disabled || active\n ? 'var(--px-background-card-hover)'\n : 'transparent',\n\n __rules: {\n '&:hover': {\n transition: 'all 200ms',\n backgroundColor: 'var(--px-background-card-hover) !important'\n }\n }\n },\n containerIcon: {\n width: '1rem',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center'\n }\n })\n}\n","// External Libraries\nimport { type MouseEvent, useEffect, useRef, useState } from 'react'\n\n// Components\nimport { Menu } from '../..'\nimport { Switch } from '@components/commons/toolkit/Switch'\nimport { Typography } from '@components/commons/toolkit/Typography'\nimport { BasePopover } from '@components/commons/structure/BasePopover'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ItemRowProps } from './types'\nimport type { FloatingOptions } from '@hooks/useFloating/types'\n\n// Styles\nimport { createItemRowStyles } from './styles'\n\nexport const ItemRow = <T extends string>(props: ItemRowProps<T>) => {\n const { item, depth, width, onHover, onSelect } = props\n const isGroup = item.type === 'group'\n\n const [subOpen, setSubOpen] = useState(false)\n const closeTimer = useRef<number | null>(null)\n const anchorRef = useRef<HTMLButtonElement | null>(null)\n const floatingOptions: FloatingOptions = {\n offsetX: 10,\n offsetY: -4,\n strategy: 'fixed',\n keepInViewport: true,\n placement: 'right-start'\n }\n\n // Hooks\n const { styles, classes } = useThemedStyles(props, createItemRowStyles, {\n applyCommonProps: true,\n override: props.styles,\n pick: p => [p.active]\n })\n\n // Functions\n function handleMouseEnter() {\n onHover(item.id, isGroup)\n\n if (!isGroup) return\n clearTimer()\n setSubOpen(true)\n }\n\n function handleMouseLeave() {\n if (!isGroup) return\n scheduleClose()\n }\n\n function handleClick(e?: MouseEvent<HTMLButtonElement>) {\n e?.stopPropagation()\n e?.preventDefault()\n if (isGroup) return\n onSelect(item)\n }\n\n function clearTimer() {\n if (closeTimer.current) window.clearTimeout(closeTimer.current)\n closeTimer.current = null\n }\n\n function scheduleClose() {\n clearTimer()\n closeTimer.current = window.setTimeout(() => setSubOpen(false), 150)\n }\n\n function renderMenuType() {\n if (item.type === 'switch') {\n return (\n <Switch\n fitContent\n checked={item.checked}\n onChange={() => handleClick()}\n />\n )\n } else {\n return (\n <>\n {item.shortcut ? <span>{item.shortcut}</span> : null}\n\n {isGroup ? <span>›</span> : null}\n </>\n )\n }\n }\n\n // UseEffects\n // biome-ignore lint/correctness/useExhaustiveDependencies: <Not needed>\n useEffect(() => {\n return () => clearTimer()\n }, [])\n\n return (\n <>\n <button\n ref={anchorRef}\n type=\"button\"\n role=\"menuitem\"\n style={styles.button}\n className={classes.button}\n disabled={!!item.disabled}\n aria-disabled={item.disabled || undefined}\n onClick={handleClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n {item.icon ? (\n <span style={styles.containerIcon}>{item.icon ?? null}</span>\n ) : null}\n\n <Typography variant=\"b2\">{item.label}</Typography>\n\n {renderMenuType()}\n </button>\n\n {isGroup ? (\n <BasePopover\n // biome-ignore lint/suspicious/noExplicitAny: <Not needed>\n anchorRef={anchorRef as any}\n open={subOpen}\n closeOnEscape={false}\n closeOnOutsideClick={false}\n floatingOptions={floatingOptions}\n dismissScope={props.dismissScope}\n onMouseEnter={() => {\n clearTimer()\n setSubOpen(true)\n }}\n onMouseLeave={() => {\n scheduleClose()\n }}\n onOpenChange={setSubOpen}\n >\n <Menu\n width={width}\n depth={depth + 1}\n activeId={undefined}\n items={item.children}\n onHover={onHover}\n onSelect={onSelect}\n />\n </BasePopover>\n ) : null}\n </>\n )\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createCustomRowStyles() {\n return styled({\n container: {\n padding: '0.25rem'\n }\n })\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { CustomRowProps } from './types'\n\n// Styles\nimport { createCustomRowStyles } from './styles'\n\nexport const CustomRow = <T extends string>(props: CustomRowProps<T>) => {\n const { item, close } = props\n\n // Hooks\n const { styles } = useThemedStyles(props, createCustomRowStyles)\n\n return <div style={styles.container}>{item.render({ close })}</div>\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createDividerRowStyles() {\n return styled({\n container: {\n border: 0,\n display: 'flex',\n marginBlock: '0.1rem',\n borderTop: '1px solid var(--px-border-primary)'\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createDividerRowStyles } from './styles'\n\nexport const DividerRow: React.FC = props => {\n // Hooks\n const { styles } = useThemedStyles(props, createDividerRowStyles)\n\n return <hr style={styles.container} />\n}\n","// Types\nimport type { MenuProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createMenuStyles<T>({ width }: MenuProps<T>) {\n return styled({\n container: {\n width,\n flexShrink: 0\n }\n })\n}\n","// Components\nimport { ItemRow } from './components/ItemRow'\nimport { CustomRow } from './components/CustomRow'\nimport { DividerRow } from './components/DividerRow'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { MenuProps } from './types'\n\n// Styles\nimport { createMenuStyles } from './styles'\n\nexport const Menu = <T extends string>(props: MenuProps<T>) => {\n const { items, depth, activeId, width = 240, onHover, onSelect } = props\n\n const { styles } = useThemedStyles(props, createMenuStyles, {\n applyCommonProps: true,\n override: props.styles,\n pick: p => [p.items, p.width, p.activeId, p.onSelect, p.onHover]\n })\n\n // Functions\n function renderItems() {\n return items.map(item => {\n if (item.type === 'divider') return <DividerRow key={item.id} />\n if (item.type === 'custom')\n return <CustomRow key={item.id} item={item} close={close} />\n\n return (\n <ItemRow\n key={item.id}\n item={item}\n depth={depth}\n width={width}\n active={activeId === item.id}\n dismissScope={props.dismissScope}\n onHover={onHover}\n onSelect={onSelect}\n />\n )\n })\n }\n\n return (\n <div style={styles.container} role={depth === 0 ? 'menu' : undefined}>\n {renderItems()}\n </div>\n )\n}\n","// Types\nimport type { MenuOption, MenuOptionInput } from '../types'\n\nexport function normalizeMenuOptions<T>(\n options: MenuOptionInput<T>[]\n): MenuOption<T>[] {\n return options.map(opt => {\n if ('children' in opt) {\n return {\n id: opt.id,\n label: opt.label,\n icon: opt.icon,\n shortcut: opt.shortcut,\n disabled: opt.disabled,\n className: opt.className,\n type: 'group' as const,\n children: normalizeMenuOptions(opt.children)\n }\n }\n return opt as MenuOption<T>\n })\n}\n","// External Libraries\nimport type { ReactNode } from 'react'\n\n// Hooks\nimport type { Placement } from '@hooks/useFloating/types'\n\n// Styles\nimport type { createContextMenuStyles } from './styles'\n\n// Types\nimport type { TypeStyles } from '@hooks/useThemedStyles/types'\n\ninterface BaseOption<T> {\n id: T\n icon?: ReactNode\n label?: ReactNode\n disabled?: boolean\n className?: string\n shortcut?: ReactNode\n closeOnSelect?: boolean\n}\n\nexport type MenuActionOption<T> = BaseOption<T> & {\n type: 'action'\n closeOnSelect?: boolean\n}\n\nexport type MenuSwitchOption<T> = BaseOption<T> & {\n type: 'switch'\n checked: boolean\n closeOnSelect?: boolean\n onCheckedChange: (next: boolean) => void\n}\n\nexport interface MenuDividerOption<T> {\n id: T\n type: 'divider'\n}\n\nexport interface MenuCustomOption<T> extends BaseOption<T> {\n type: 'custom'\n render: (ctx: { close: () => void }) => ReactNode\n}\n\nexport interface MenuGroupInput<T> extends BaseOption<T> {\n type?: 'group'\n children: MenuOptionInput<T>[]\n}\n\nexport type MenuOptionInput<T> =\n | MenuGroupInput<T>\n | MenuActionOption<T>\n | MenuSwitchOption<T>\n | MenuCustomOption<T>\n | MenuDividerOption<T>\n\nexport interface MenuGroup<T> extends BaseOption<T> {\n type: 'group'\n children: MenuOption<T>[]\n}\n\nexport type MenuOption<T> =\n | MenuGroup<T>\n | MenuActionOption<T>\n | MenuSwitchOption<T>\n | MenuCustomOption<T>\n | MenuDividerOption<T>\n\nexport interface ContextMenuProps<T> {\n trigger: ReactNode\n options: MenuOptionInput<T>[]\n\n offsetX?: number\n offsetY?: number\n columnWidth?: number\n placement?: Placement\n\n onSelect: (actionId: T) => void\n\n styles?: TypeStyles<typeof createContextMenuStyles>\n}\n","// Types\nimport type { ContextMenuProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createContextMenuStyles<T>(_props: ContextMenuProps<T>) {\n return styled({\n trigger: {\n width: 'fit-content',\n height: 'fit-content',\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n cursor: 'pointer'\n }\n })\n}\n","// External Libraries\nimport { useMemo, useRef, useState } from 'react'\n\n// Components\nimport { Menu } from './components/Menu'\nimport { BasePopover } from '@components/commons/structure/BasePopover'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { normalizeMenuOptions } from './utils'\n\n// Types\nimport type { ContextMenuProps, MenuOption } from './types'\nimport type { PopoverTriggerRenderProps } from '../Popover/types'\n\nexport * as ContextMenuTypes from './types'\n\n// Styles\nimport { createContextMenuStyles } from './styles'\n\nexport const ContextMenu = <T extends string>(props: ContextMenuProps<T>) => {\n const {\n trigger,\n options,\n offsetX = 0,\n offsetY = 8,\n columnWidth = 240,\n placement = 'bottom-start',\n onSelect\n } = props\n\n // Refs\n const scopeRef = useRef<string>(makeScopeId())\n\n // States\n const [open, setOpen] = useState(false)\n\n const items = useMemo(() => normalizeMenuOptions(options), [options])\n const floatingOptions = useMemo(\n () => ({\n offsetX,\n offsetY,\n placement\n }),\n [offsetX, offsetY, placement]\n )\n\n // Hooks\n const { styles } = useThemedStyles(props, createContextMenuStyles, {\n applyCommonProps: true,\n override: props.styles,\n pick: p => [p.options, p.columnWidth, p.placement]\n })\n\n // Functions\n function makeScopeId() {\n if (typeof crypto !== 'undefined' && crypto.randomUUID)\n return crypto.randomUUID()\n return `scope_${Math.random().toString(16).slice(2)}`\n }\n\n function handleSelect(item: MenuOption<T>, close: () => void) {\n if (item.type === 'action') {\n onSelect(item.id)\n if (item.closeOnSelect ?? true) close()\n }\n\n if (item.type === 'switch') {\n item.onCheckedChange(!item.checked)\n if (item.closeOnSelect ?? false) close()\n }\n }\n\n function renderTrigger({\n ref,\n ariaExpanded,\n onClick\n }: PopoverTriggerRenderProps) {\n return (\n // biome-ignore lint/a11y/noStaticElementInteractions: <Not needed>\n // biome-ignore lint/a11y/useKeyWithClickEvents: <Not needed>\n <span\n ref={ref as any}\n style={styles.trigger}\n aria-expanded={ariaExpanded}\n onClick={onClick}\n >\n {trigger}\n </span>\n )\n }\n\n return (\n <BasePopover\n open={open}\n minWidth=\"fit-content\"\n floatingOptions={floatingOptions}\n dismissScope={scopeRef.current}\n trigger={renderTrigger}\n onOpenChange={setOpen}\n >\n <Menu\n depth={0}\n items={items}\n onHover={() => {}}\n width={columnWidth}\n dismissScope={scopeRef.current}\n onSelect={item =>\n handleSelect(item as MenuOption<T>, () => setOpen(false))\n }\n />\n </BasePopover>\n )\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ContextMenu-BZOU8h-T.js","names":["floatingOptions: FloatingOptions","DividerRow: React.FC"],"sources":["../src/components/commons/toolkit/ContextMenu/components/Menu/components/ItemRow/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/components/ItemRow/index.tsx","../src/components/commons/toolkit/ContextMenu/components/Menu/components/CustomRow/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/components/CustomRow/index.tsx","../src/components/commons/toolkit/ContextMenu/components/Menu/components/DividerRow/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/components/DividerRow/index.tsx","../src/components/commons/toolkit/ContextMenu/components/Menu/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/index.tsx","../src/components/commons/toolkit/ContextMenu/utils/normalizeMenuOptions.ts","../src/components/commons/toolkit/ContextMenu/types.ts","../src/components/commons/toolkit/ContextMenu/styles.ts","../src/components/commons/toolkit/ContextMenu/index.tsx"],"sourcesContent":["// Types\nimport type { ItemRowProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createItemRowStyles<T>({ item, active }: ItemRowProps<T>) {\n return styled({\n button: {\n width: '100%',\n textAlign: 'left',\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n\n gap: '0.5rem',\n borderRadius: '0.5rem',\n paddingInline: '0.5rem',\n paddingBlock: '0.25rem',\n\n userSelect: 'none',\n cursor: item.disabled ? 'not-allowed' : 'pointer',\n\n backgroundColor:\n item.disabled || active\n ? 'var(--px-background-card-hover)'\n : 'transparent',\n\n __rules: {\n '&:hover': {\n transition: 'all 200ms',\n backgroundColor: 'var(--px-background-card-hover) !important'\n }\n }\n },\n containerIcon: {\n width: '1rem',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center'\n }\n })\n}\n","// External Libraries\nimport { type MouseEvent, useEffect, useRef, useState } from 'react'\n\n// Components\nimport { Menu } from '../..'\nimport { Switch } from '@components/commons/toolkit/Switch'\nimport { Typography } from '@components/commons/toolkit/Typography'\nimport { BasePopover } from '@components/commons/structure/BasePopover'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ItemRowProps } from './types'\nimport type { FloatingOptions } from '@hooks/useFloating/types'\n\n// Styles\nimport { createItemRowStyles } from './styles'\n\nexport const ItemRow = <T extends string>(props: ItemRowProps<T>) => {\n const { item, depth, width, onHover, onSelect } = props\n const isGroup = item.type === 'group'\n\n const [subOpen, setSubOpen] = useState(false)\n const closeTimer = useRef<number | null>(null)\n const anchorRef = useRef<HTMLButtonElement | null>(null)\n const floatingOptions: FloatingOptions = {\n offsetX: 10,\n offsetY: -4,\n strategy: 'fixed',\n keepInViewport: true,\n placement: 'right-start'\n }\n\n // Hooks\n const { styles, classes } = useThemedStyles(props, createItemRowStyles, {\n applyCommonProps: true,\n override: props.styles,\n pick: p => [p.active]\n })\n\n // Functions\n function handleMouseEnter() {\n onHover(item.id, isGroup)\n\n if (!isGroup) return\n clearTimer()\n setSubOpen(true)\n }\n\n function handleMouseLeave() {\n if (!isGroup) return\n scheduleClose()\n }\n\n function handleClick(e?: MouseEvent<HTMLButtonElement>) {\n e?.stopPropagation()\n e?.preventDefault()\n if (isGroup) return\n onSelect(item)\n }\n\n function clearTimer() {\n if (closeTimer.current) window.clearTimeout(closeTimer.current)\n closeTimer.current = null\n }\n\n function scheduleClose() {\n clearTimer()\n closeTimer.current = window.setTimeout(() => setSubOpen(false), 150)\n }\n\n function renderMenuType() {\n if (item.type === 'switch') {\n return (\n <Switch\n fitContent\n checked={item.checked}\n onChange={() => handleClick()}\n />\n )\n } else {\n return (\n <>\n {item.shortcut ? <span>{item.shortcut}</span> : null}\n\n {isGroup ? <span>›</span> : null}\n </>\n )\n }\n }\n\n // UseEffects\n // biome-ignore lint/correctness/useExhaustiveDependencies: <Not needed>\n useEffect(() => {\n return () => clearTimer()\n }, [])\n\n return (\n <>\n <button\n ref={anchorRef}\n type=\"button\"\n role=\"menuitem\"\n style={styles.button}\n className={classes.button}\n disabled={!!item.disabled}\n aria-disabled={item.disabled || undefined}\n onClick={handleClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n {item.icon ? (\n <span style={styles.containerIcon}>{item.icon ?? null}</span>\n ) : null}\n\n <Typography variant=\"b2\">{item.label}</Typography>\n\n {renderMenuType()}\n </button>\n\n {isGroup ? (\n <BasePopover\n // biome-ignore lint/suspicious/noExplicitAny: <Not needed>\n anchorRef={anchorRef as any}\n open={subOpen}\n closeOnEscape={false}\n closeOnOutsideClick={false}\n floatingOptions={floatingOptions}\n dismissScope={props.dismissScope}\n onMouseEnter={() => {\n clearTimer()\n setSubOpen(true)\n }}\n onMouseLeave={() => {\n scheduleClose()\n }}\n onOpenChange={setSubOpen}\n >\n <Menu\n width={width}\n depth={depth + 1}\n activeId={undefined}\n items={item.children}\n onHover={onHover}\n onSelect={onSelect}\n />\n </BasePopover>\n ) : null}\n </>\n )\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createCustomRowStyles() {\n return styled({\n container: {\n padding: '0.25rem'\n }\n })\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { CustomRowProps } from './types'\n\n// Styles\nimport { createCustomRowStyles } from './styles'\n\nexport const CustomRow = <T extends string>(props: CustomRowProps<T>) => {\n const { item, close } = props\n\n // Hooks\n const { styles } = useThemedStyles(props, createCustomRowStyles)\n\n return <div style={styles.container}>{item.render({ close })}</div>\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createDividerRowStyles() {\n return styled({\n container: {\n border: 0,\n display: 'flex',\n marginBlock: '0.1rem',\n borderTop: '1px solid var(--px-border-primary)'\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createDividerRowStyles } from './styles'\n\nexport const DividerRow: React.FC = props => {\n // Hooks\n const { styles } = useThemedStyles(props, createDividerRowStyles)\n\n return <hr style={styles.container} />\n}\n","// Types\nimport type { MenuProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createMenuStyles<T>({ width }: MenuProps<T>) {\n return styled({\n container: {\n width,\n flexShrink: 0\n }\n })\n}\n","// Components\nimport { ItemRow } from './components/ItemRow'\nimport { CustomRow } from './components/CustomRow'\nimport { DividerRow } from './components/DividerRow'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { MenuProps } from './types'\n\n// Styles\nimport { createMenuStyles } from './styles'\n\nexport const Menu = <T extends string>(props: MenuProps<T>) => {\n const { items, depth, activeId, width = 240, onHover, onSelect } = props\n\n const { styles } = useThemedStyles(props, createMenuStyles, {\n applyCommonProps: true,\n override: props.styles,\n pick: p => [p.items, p.width, p.activeId, p.onSelect, p.onHover]\n })\n\n // Functions\n function renderItems() {\n return items.map(item => {\n if (item.type === 'divider') return <DividerRow key={item.id} />\n if (item.type === 'custom')\n return <CustomRow key={item.id} item={item} close={close} />\n\n return (\n <ItemRow\n key={item.id}\n item={item}\n depth={depth}\n width={width}\n active={activeId === item.id}\n dismissScope={props.dismissScope}\n onHover={onHover}\n onSelect={onSelect}\n />\n )\n })\n }\n\n return (\n <div style={styles.container} role={depth === 0 ? 'menu' : undefined}>\n {renderItems()}\n </div>\n )\n}\n","// Types\nimport type { MenuOption, MenuOptionInput } from '../types'\n\nexport function normalizeMenuOptions<T>(\n options: MenuOptionInput<T>[]\n): MenuOption<T>[] {\n return options.map(opt => {\n if ('children' in opt) {\n return {\n id: opt.id,\n label: opt.label,\n icon: opt.icon,\n shortcut: opt.shortcut,\n disabled: opt.disabled,\n className: opt.className,\n type: 'group' as const,\n children: normalizeMenuOptions(opt.children)\n }\n }\n return opt as MenuOption<T>\n })\n}\n","// External Libraries\nimport type { ReactNode } from 'react'\n\n// Hooks\nimport type { Placement } from '@hooks/useFloating/types'\n\n// Styles\nimport type { createContextMenuStyles } from './styles'\n\n// Types\nimport type { TypeStyles } from '@hooks/useThemedStyles/types'\n\ninterface BaseOption<T> {\n id: T\n icon?: ReactNode\n label?: ReactNode\n disabled?: boolean\n className?: string\n shortcut?: ReactNode\n closeOnSelect?: boolean\n}\n\nexport type MenuActionOption<T> = BaseOption<T> & {\n type: 'action'\n closeOnSelect?: boolean\n}\n\nexport type MenuSwitchOption<T> = BaseOption<T> & {\n type: 'switch'\n checked: boolean\n closeOnSelect?: boolean\n onCheckedChange: (next: boolean) => void\n}\n\nexport interface MenuDividerOption<T> {\n id: T\n type: 'divider'\n}\n\nexport interface MenuCustomOption<T> extends BaseOption<T> {\n type: 'custom'\n render: (ctx: { close: () => void }) => ReactNode\n}\n\nexport interface MenuGroupInput<T> extends BaseOption<T> {\n type?: 'group'\n children: MenuOptionInput<T>[]\n}\n\nexport type MenuOptionInput<T> =\n | MenuGroupInput<T>\n | MenuActionOption<T>\n | MenuSwitchOption<T>\n | MenuCustomOption<T>\n | MenuDividerOption<T>\n\nexport interface MenuGroup<T> extends BaseOption<T> {\n type: 'group'\n children: MenuOption<T>[]\n}\n\nexport type MenuOption<T> =\n | MenuGroup<T>\n | MenuActionOption<T>\n | MenuSwitchOption<T>\n | MenuCustomOption<T>\n | MenuDividerOption<T>\n\nexport interface ContextMenuProps<T> {\n trigger: ReactNode\n options: MenuOptionInput<T>[]\n\n offsetX?: number\n offsetY?: number\n columnWidth?: number\n placement?: Placement\n\n onSelect: (actionId: T) => void\n\n styles?: TypeStyles<typeof createContextMenuStyles>\n}\n","// Types\nimport type { ContextMenuProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createContextMenuStyles<T>(_props: ContextMenuProps<T>) {\n return styled({\n trigger: {\n width: 'fit-content',\n height: 'fit-content',\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n cursor: 'pointer'\n }\n })\n}\n","// External Libraries\nimport { useMemo, useRef, useState } from 'react'\n\n// Components\nimport { Menu } from './components/Menu'\nimport { BasePopover } from '@components/commons/structure/BasePopover'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { normalizeMenuOptions } from './utils'\n\n// Types\nimport type { ContextMenuProps, MenuOption } from './types'\nimport type { PopoverTriggerRenderProps } from '../Popover/types'\n\nexport * as ContextMenuTypes from './types'\n\n// Styles\nimport { createContextMenuStyles } from './styles'\n\nexport const ContextMenu = <T extends string>(props: ContextMenuProps<T>) => {\n const {\n trigger,\n options,\n offsetX = 0,\n offsetY = 8,\n columnWidth = 240,\n placement = 'bottom-start',\n onSelect\n } = props\n\n // Refs\n const scopeRef = useRef<string>(makeScopeId())\n\n // States\n const [open, setOpen] = useState(false)\n\n const items = useMemo(() => normalizeMenuOptions(options), [options])\n const floatingOptions = useMemo(\n () => ({\n offsetX,\n offsetY,\n placement\n }),\n [offsetX, offsetY, placement]\n )\n\n // Hooks\n const { styles } = useThemedStyles(props, createContextMenuStyles, {\n applyCommonProps: true,\n override: props.styles,\n pick: p => [p.options, p.columnWidth, p.placement]\n })\n\n // Functions\n function makeScopeId() {\n if (typeof crypto !== 'undefined' && crypto.randomUUID)\n return crypto.randomUUID()\n return `scope_${Math.random().toString(16).slice(2)}`\n }\n\n function handleSelect(item: MenuOption<T>, close: () => void) {\n if (item.type === 'action') {\n onSelect(item.id)\n if (item.closeOnSelect ?? true) close()\n }\n\n if (item.type === 'switch') {\n item.onCheckedChange(!item.checked)\n if (item.closeOnSelect ?? false) close()\n }\n }\n\n function renderTrigger({\n ref,\n ariaExpanded,\n onClick\n }: PopoverTriggerRenderProps) {\n return (\n // biome-ignore lint/a11y/noStaticElementInteractions: <Not needed>\n // biome-ignore lint/a11y/useKeyWithClickEvents: <Not needed>\n <span\n ref={ref as any}\n style={styles.trigger}\n aria-expanded={ariaExpanded}\n onClick={onClick}\n >\n {trigger}\n </span>\n )\n }\n\n return (\n <BasePopover\n open={open}\n minWidth=\"fit-content\"\n floatingOptions={floatingOptions}\n dismissScope={scopeRef.current}\n trigger={renderTrigger}\n onOpenChange={setOpen}\n >\n <Menu\n depth={0}\n items={items}\n onHover={() => {}}\n width={columnWidth}\n dismissScope={scopeRef.current}\n onSelect={item =>\n handleSelect(item as MenuOption<T>, () => setOpen(false))\n }\n />\n </BasePopover>\n )\n}\n"],"mappings":"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"}
|
|
@@ -5,7 +5,7 @@ import { t as BasePopover } from "./BasePopover-CY-9StFD.js";
|
|
|
5
5
|
import { t as Label } from "./Label-CBUa-x13.js";
|
|
6
6
|
import { t as ErrorMessage } from "./ErrorMessage-6pG4hFId.js";
|
|
7
7
|
import { t as Button } from "./Button-CWZvWbMh.js";
|
|
8
|
-
import { a as DateMask, c as MaskModule, n as DateValidator, o as Locale, s as MaskType, t as TimeValidator } from "./MaskModule-
|
|
8
|
+
import { a as DateMask, c as MaskModule, n as DateValidator, o as Locale, s as MaskType, t as TimeValidator } from "./MaskModule-CnJJhVLo.js";
|
|
9
9
|
import { forwardRef, useEffect, useId, useMemo, useState } from "react";
|
|
10
10
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
11
11
|
import { motion } from "framer-motion";
|
|
@@ -1246,4 +1246,4 @@ const DatePicker = ({ placementContainer = "bottom-start", ...props }) => {
|
|
|
1246
1246
|
|
|
1247
1247
|
//#endregion
|
|
1248
1248
|
export { types_exports as n, DatePicker as t };
|
|
1249
|
-
//# sourceMappingURL=DatePicker-
|
|
1249
|
+
//# sourceMappingURL=DatePicker-D-kMJREv.js.map
|