@umodeapporg/ui 0.31.0 → 0.31.1
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BulkActionBar.js","sources":["../../../src/components/UI/BulkActionBar.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport OutlinedChip from '@/components/UI/Chips/OutlinedChip';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport HorizontalScrollArea from '@/components/UI/HorizontalScrollArea';\nimport { MaterialSymbol, SymbolCodepoints } from '@/components/UI/MaterialSymbol';\n\nexport type TBulkActionTone = 'primary' | 'neutral' | 'danger';\n\nexport interface IBulkAction {\n key: string;\n label: string;\n icon: SymbolCodepoints;\n onClick: () => void;\n tone?: TBulkActionTone;\n disabled?: boolean;\n /** Explica o bloqueio quando a ação está desabilitada. */\n tooltip?: string;\n}\n\nexport interface IBulkActionBarSelectAll {\n allSelected: boolean;\n tooltip: string;\n onToggle: () => void;\n disabled?: boolean;\n}\n\ninterface IBulkActionBarProps {\n count: number;\n countLabel: string;\n /** Texto exibido quando nada está selecionado (a barra continua visível guiando o usuário). */\n hintLabel?: string;\n selectAll?: IBulkActionBarSelectAll;\n actions: Array<IBulkAction>;\n closeTooltip: string;\n onClose: () => void;\n className?: string;\n}\n\nconst TONE_CLASSES: Record<TBulkActionTone, { enabled: string; disabled: string }> = {\n primary: {\n enabled: 'bg-brand text-brand-fg hover:bg-brand-hover',\n disabled: 'cursor-not-allowed bg-muted-hover text-foreground-faint',\n },\n neutral: {\n enabled: 'border border-border text-foreground-muted hover:bg-muted-hover',\n disabled: 'cursor-not-allowed border border-border text-foreground-faint',\n },\n danger: {\n enabled: 'border border-danger-border text-danger-emphasis hover:bg-danger-soft',\n disabled: 'cursor-not-allowed border border-border text-foreground-faint',\n },\n};\n\n/**\n * Barra de ações em lote compartilhada (seleção do canvas do criAI, seleção do mapa de produtos).\n * As ações são declarativas para que cada superfície acrescente as suas sem forkar o visual.\n */\nconst BulkActionBar: React.FC<IBulkActionBarProps> = ({\n count,\n countLabel,\n hintLabel,\n selectAll,\n actions,\n closeTooltip,\n onClose,\n className,\n}) => {\n const renderAction = (action: IBulkAction) => {\n const tone = TONE_CLASSES[action.tone ?? 'primary'];\n\n const button = (\n <ControlledButton\n defaultHtmlButton\n disabled={action.disabled}\n onClick={action.onClick}\n className={classNames(\n 'flex h-9 shrink-0 items-center gap-x-1.5 rounded-lg px-3 text-sm font-medium transition-colors',\n action.disabled ? tone.disabled : tone.enabled,\n )}\n >\n <MaterialSymbol icon={action.icon} size={17} />\n {action.label}\n </ControlledButton>\n );\n\n if (action.disabled && action.tooltip) {\n return (\n <ControlledTooltip key={action.key} content={action.tooltip} className=\"w-52 text-center\">\n <span className=\"inline-flex\">{button}</span>\n </ControlledTooltip>\n );\n }\n\n return (\n <span key={action.key} className=\"inline-flex\">\n {button}\n </span>\n );\n };\n\n return (\n // The bar is capped to the viewport, so on a narrow screen its actions used to\n // be clipped past the cap with no way to reach them. It now scrolls inside that\n // cap: every action stays reachable and the bar keeps its single-line shape.\n <HorizontalScrollArea\n containerClassName={classNames(\n 'pointer-events-auto max-w-[calc(100vw-2rem)] rounded-xl border border-border bg-surface shadow-lg',\n className,\n )}\n className=\"py-1.5 pl-2 pr-1.5\"\n >\n <div className=\"flex w-max items-center gap-2 whitespace-nowrap\">\n {selectAll && (\n <ControlledTooltip content={selectAll.tooltip}>\n <span className=\"inline-flex\">\n <ControlledButton\n aria-label={selectAll.tooltip}\n defaultHtmlButton\n disabled={selectAll.disabled}\n onClick={selectAll.onToggle}\n className=\"flex size-9 shrink-0 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:bg-muted-hover disabled:hover:bg-transparent\"\n >\n <span\n className={classNames(\n 'flex size-5 items-center justify-center rounded-md border-2 transition-colors',\n selectAll.allSelected\n ? 'border-brand bg-brand text-brand-fg'\n : 'border-border-emphasis bg-surface text-transparent',\n selectAll.disabled && 'border-border',\n )}\n >\n <MaterialSymbol icon=\"check\" size={14} />\n </span>\n </ControlledButton>\n </span>\n </ControlledTooltip>\n )}\n\n <span className=\"flex min-w-0 items-center gap-2 pr-1 text-sm text-foreground-muted\">\n {count > 0 ? (\n <>\n <OutlinedChip\n count={count}\n tone=\"purple\"\n variant=\"soft\"\n size=\"sm\"\n className=\"
|
|
1
|
+
{"version":3,"file":"BulkActionBar.js","sources":["../../../src/components/UI/BulkActionBar.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport OutlinedChip from '@/components/UI/Chips/OutlinedChip';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport HorizontalScrollArea from '@/components/UI/HorizontalScrollArea';\nimport { MaterialSymbol, SymbolCodepoints } from '@/components/UI/MaterialSymbol';\n\nexport type TBulkActionTone = 'primary' | 'neutral' | 'danger';\n\nexport interface IBulkAction {\n key: string;\n label: string;\n icon: SymbolCodepoints;\n onClick: () => void;\n tone?: TBulkActionTone;\n disabled?: boolean;\n /** Explica o bloqueio quando a ação está desabilitada. */\n tooltip?: string;\n}\n\nexport interface IBulkActionBarSelectAll {\n allSelected: boolean;\n tooltip: string;\n onToggle: () => void;\n disabled?: boolean;\n}\n\ninterface IBulkActionBarProps {\n count: number;\n countLabel: string;\n /** Texto exibido quando nada está selecionado (a barra continua visível guiando o usuário). */\n hintLabel?: string;\n selectAll?: IBulkActionBarSelectAll;\n actions: Array<IBulkAction>;\n closeTooltip: string;\n onClose: () => void;\n className?: string;\n}\n\nconst TONE_CLASSES: Record<TBulkActionTone, { enabled: string; disabled: string }> = {\n primary: {\n enabled: 'bg-brand text-brand-fg hover:bg-brand-hover',\n disabled: 'cursor-not-allowed bg-muted-hover text-foreground-faint',\n },\n neutral: {\n enabled: 'border border-border text-foreground-muted hover:bg-muted-hover',\n disabled: 'cursor-not-allowed border border-border text-foreground-faint',\n },\n danger: {\n enabled: 'border border-danger-border text-danger-emphasis hover:bg-danger-soft',\n disabled: 'cursor-not-allowed border border-border text-foreground-faint',\n },\n};\n\n/**\n * Barra de ações em lote compartilhada (seleção do canvas do criAI, seleção do mapa de produtos).\n * As ações são declarativas para que cada superfície acrescente as suas sem forkar o visual.\n */\nconst BulkActionBar: React.FC<IBulkActionBarProps> = ({\n count,\n countLabel,\n hintLabel,\n selectAll,\n actions,\n closeTooltip,\n onClose,\n className,\n}) => {\n const renderAction = (action: IBulkAction) => {\n const tone = TONE_CLASSES[action.tone ?? 'primary'];\n\n const button = (\n <ControlledButton\n defaultHtmlButton\n disabled={action.disabled}\n onClick={action.onClick}\n className={classNames(\n 'flex h-9 shrink-0 items-center gap-x-1.5 rounded-lg px-3 text-sm font-medium transition-colors',\n action.disabled ? tone.disabled : tone.enabled,\n )}\n >\n <MaterialSymbol icon={action.icon} size={17} />\n {action.label}\n </ControlledButton>\n );\n\n if (action.disabled && action.tooltip) {\n return (\n <ControlledTooltip key={action.key} content={action.tooltip} className=\"w-52 text-center\">\n <span className=\"inline-flex\">{button}</span>\n </ControlledTooltip>\n );\n }\n\n return (\n <span key={action.key} className=\"inline-flex\">\n {button}\n </span>\n );\n };\n\n return (\n // The bar is capped to the viewport, so on a narrow screen its actions used to\n // be clipped past the cap with no way to reach them. It now scrolls inside that\n // cap: every action stays reachable and the bar keeps its single-line shape.\n <HorizontalScrollArea\n containerClassName={classNames(\n 'pointer-events-auto max-w-[calc(100vw-2rem)] rounded-xl border border-border bg-surface shadow-lg',\n className,\n )}\n className=\"py-1.5 pl-2 pr-1.5\"\n >\n <div className=\"flex w-max items-center gap-2 whitespace-nowrap\">\n {selectAll && (\n <ControlledTooltip content={selectAll.tooltip}>\n <span className=\"inline-flex\">\n <ControlledButton\n aria-label={selectAll.tooltip}\n defaultHtmlButton\n disabled={selectAll.disabled}\n onClick={selectAll.onToggle}\n className=\"flex size-9 shrink-0 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:bg-muted-hover disabled:hover:bg-transparent\"\n >\n <span\n className={classNames(\n 'flex size-5 items-center justify-center rounded-md border-2 transition-colors',\n selectAll.allSelected\n ? 'border-brand bg-brand text-brand-fg'\n : 'border-border-emphasis bg-surface text-transparent',\n selectAll.disabled && 'border-border',\n )}\n >\n <MaterialSymbol icon=\"check\" size={14} />\n </span>\n </ControlledButton>\n </span>\n </ControlledTooltip>\n )}\n\n <span className=\"flex min-w-0 items-center gap-2 pr-1 text-sm text-foreground-muted\">\n {count > 0 ? (\n <>\n <OutlinedChip\n count={count}\n tone=\"purple\"\n variant=\"soft\"\n size=\"sm\"\n className=\"h-6 min-w-6 shrink-0 bg-brand-soft px-1\"\n labelClassName=\"font-bold text-brand-emphasis\"\n />\n <span className=\"truncate\">{countLabel}</span>\n </>\n ) : (\n <span className=\"flex min-w-0 items-center gap-1.5 text-foreground-subtle\">\n <MaterialSymbol icon=\"touch_app\" size={16} className=\"shrink-0\" />\n <span className=\"truncate\">{hintLabel ?? countLabel}</span>\n </span>\n )}\n </span>\n\n <div className=\"h-5 w-px shrink-0 bg-muted-active\" />\n\n {actions.map(renderAction)}\n\n <div className=\"h-5 w-px shrink-0 bg-muted-active\" />\n\n <ControlledTooltip content={closeTooltip}>\n <span className=\"inline-flex\">\n <ControlledButton\n aria-label={closeTooltip}\n defaultHtmlButton\n onClick={onClose}\n className=\"flex size-9 items-center justify-center rounded-lg text-foreground-subtle transition-colors hover:bg-muted-hover\"\n >\n <MaterialSymbol icon=\"close\" size={18} />\n </ControlledButton>\n </span>\n </ControlledTooltip>\n </div>\n </HorizontalScrollArea>\n );\n};\n\nexport default BulkActionBar;\n"],"names":[],"mappings":"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"}
|