@coorpacademy/components 11.40.26 → 11.41.0

package/es/organism/assignment-audience/index.d.ts

@@ -0,0 +1,92 @@
+/// <reference types="react" />
+import { AssignmentAudienceProps } from './types';
+declare const AssignmentAudience: {
+    ({ title, subtitle, disabledExplanation, everyone, populations, upload, individuals, total }: AssignmentAudienceProps): JSX.Element;
+    propTypes: {
+        title: import("prop-types").Validator<string>;
+        subtitle: import("prop-types").Requireable<string>;
+        disabledExplanation: import("prop-types").Requireable<string>;
+        everyone: import("prop-types").Validator<NonNullable<import("prop-types").InferProps<{
+            title: import("prop-types").Requireable<string>;
+            label: import("prop-types").Validator<string>;
+            value: import("prop-types").Validator<boolean>;
+            onChange: import("prop-types").Validator<(...args: any[]) => any>;
+        }>>>;
+        populations: import("prop-types").Validator<NonNullable<import("prop-types").InferProps<{
+            title: import("prop-types").Requireable<string>;
+            subtitle: import("prop-types").Requireable<string>;
+            label: import("prop-types").Requireable<string>;
+            options: import("prop-types").Validator<(import("prop-types").InferProps<{
+                name: import("prop-types").Validator<string>;
+                value: import("prop-types").Validator<string>;
+                selected: import("prop-types").Validator<boolean>;
+                count: import("prop-types").Requireable<NonNullable<string | number | null | undefined>>;
+            }> | null | undefined)[]>;
+            removeLabel: import("prop-types").Requireable<string>;
+            onChange: import("prop-types").Validator<(...args: any[]) => any>;
+        }>>>;
+        upload: import("prop-types").Validator<NonNullable<import("prop-types").InferProps<{
+            title: import("prop-types").Requireable<string>;
+            subtitle: import("prop-types").Requireable<string>;
+            templateLink: import("prop-types").Requireable<import("prop-types").InferProps<{
+                label: import("prop-types").Requireable<string>;
+                href: import("prop-types").Requireable<string>;
+            }>>;
+            templatePreview: import("prop-types").Requireable<import("prop-types").InferProps<{
+                header: import("prop-types").Validator<string>;
+                rows: import("prop-types").Requireable<(string | null | undefined)[]>;
+            }>>;
+            dropzone: import("prop-types").Requireable<import("prop-types").InferProps<{
+                description: import("prop-types").Requireable<string>;
+                browse: import("prop-types").Requireable<string>;
+                dropLabel: import("prop-types").Requireable<string>;
+                loadingLabel: import("prop-types").Requireable<string>;
+            }>>;
+            status: import("prop-types").Validator<string>;
+            error: import("prop-types").Requireable<string>;
+            onUpload: import("prop-types").Validator<(...args: any[]) => any>;
+            file: import("prop-types").Requireable<import("prop-types").InferProps<{
+                name: import("prop-types").Requireable<string>;
+                detail: import("prop-types").Requireable<string>;
+            }>>;
+            summary: import("prop-types").Requireable<import("prop-types").InferProps<{
+                valid: import("prop-types").Requireable<string>;
+                unknown: import("prop-types").Requireable<string>;
+                ambiguous: import("prop-types").Requireable<string>;
+                inactive: import("prop-types").Requireable<string>;
+            }>>;
+            keptLabel: import("prop-types").Requireable<string>;
+            report: import("prop-types").Requireable<import("prop-types").InferProps<{
+                label: import("prop-types").Validator<string>;
+                onDownload: import("prop-types").Validator<(...args: any[]) => any>;
+            }>>;
+            removeLabel: import("prop-types").Requireable<string>;
+            onRemove: import("prop-types").Requireable<(...args: any[]) => any>;
+        }>>>;
+        individuals: import("prop-types").Validator<NonNullable<import("prop-types").InferProps<{
+            title: import("prop-types").Requireable<string>;
+            placeholder: import("prop-types").Requireable<string>;
+            value: import("prop-types").Requireable<string>;
+            suggestions: import("prop-types").Requireable<(import("prop-types").InferProps<{
+                id: import("prop-types").Validator<string>;
+                label: import("prop-types").Validator<string>;
+                login: import("prop-types").Validator<string>;
+            }> | null | undefined)[]>;
+            selected: import("prop-types").Requireable<(import("prop-types").InferProps<{
+                id: import("prop-types").Validator<string>;
+                label: import("prop-types").Validator<string>;
+                login: import("prop-types").Validator<string>;
+            }> | null | undefined)[]>;
+            removeLabel: import("prop-types").Requireable<string>;
+            onSearch: import("prop-types").Validator<(...args: any[]) => any>;
+            onAdd: import("prop-types").Validator<(...args: any[]) => any>;
+            onRemove: import("prop-types").Validator<(...args: any[]) => any>;
+        }>>>;
+        total: import("prop-types").Validator<NonNullable<import("prop-types").InferProps<{
+            label: import("prop-types").Validator<string>;
+            detail: import("prop-types").Requireable<string>;
+        }>>>;
+    };
+};
+export default AssignmentAudience;
+//# sourceMappingURL=index.d.ts.map

package/es/organism/assignment-audience/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/assignment-audience/index.tsx"],"names":[],"mappings":";AASA,OAAoC,EAClC,uBAAuB,EAGxB,MAAM,SAAS,CAAC;AAwDjB,QAAA,MAAM,kBAAkB;kGASrB,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqMzB,CAAC;AAIF,eAAe,kBAAkB,CAAC"}

package/es/organism/assignment-audience/index.js

@@ -0,0 +1,236 @@
+import React, { useCallback, useMemo } from 'react';
+import uniqueId from 'lodash/fp/uniqueId';
+import InputSwitch from '../../atom/input-switch';
+import SelectMultiple from '../../molecule/select-multiple';
+import InputFileDraggable from '../../atom/input-file-draggable';
+import Autocomplete from '../../atom/autocomplete';
+import Title from '../../atom/title';
+import Chip from '../../atom/chip';
+import UploadResult from './upload-result';
+import AssignmentAudiencePropTypes from './types';
+import style from './style.css';
+
+// ButtonLink is full width by default: in the Title row it would squeeze the title column.
+const FIT_CONTENT = {
+  width: 'fit-content'
+};
+
+// csv, xls and xlsx, as the types FilesPropType knows
+const ACCEPTED_FILES = ['text/csv', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'].join(',');
+const Block = ({
+  name,
+  title,
+  subtitle,
+  button,
+  children
+}) => /*#__PURE__*/React.createElement("section", {
+  "data-name": name,
+  className: style.block
+}, title ? /*#__PURE__*/React.createElement("div", {
+  className: style.blockHead
+}, /*#__PURE__*/React.createElement(Title, {
+  type: "form-group",
+  titleSize: "medium",
+  title: title,
+  subtitle: subtitle,
+  button: button,
+  headingLevel: 3
+})) : null, children);
+
+// A sample of the file to upload: its one column, a header and two example logins.
+const TemplatePreview = ({
+  header,
+  rows = []
+}) => /*#__PURE__*/React.createElement("div", {
+  className: style.templatePreview,
+  "data-name": "upload-template-preview"
+}, /*#__PURE__*/React.createElement("div", {
+  className: style.templateHeader
+}, header), /*#__PURE__*/React.createElement("ul", {
+  className: style.templateRows
+}, rows.map(row => /*#__PURE__*/React.createElement("li", {
+  key: row
+}, row))));
+
+// A removable chip says what a click does, e.g. « Remove Camille Durand »; no label, its text.
+const chipLabel = (removeLabel, name) => removeLabel ? `${removeLabel} ${name}` : undefined;
+const AssignmentAudience = ({
+  title,
+  subtitle,
+  disabledExplanation,
+  everyone,
+  populations,
+  upload,
+  individuals,
+  total
+}) => {
+  const disabled = everyone.value;
+  const loading = upload.status === 'loading';
+  const {
+    onChange: onEveryoneChange
+  } = everyone;
+  const {
+    options: populationOptions,
+    onChange: onPopulationsChange
+  } = populations;
+  const {
+    onUpload,
+    onRemove: onRemoveFile
+  } = upload;
+  const {
+    value = '',
+    suggestions = [],
+    selected = [],
+    onSearch,
+    onAdd,
+    onRemove
+  } = individuals;
+  const explanationId = useMemo(() => uniqueId('assignment-audience-explanation-'), []);
+  const handlePopulations = useCallback(choices => onPopulationsChange(populationOptions.filter(option => choices.some(choice => choice.value === option.value)).map(option => ({
+    ...option,
+    selected: true
+  }))), [populationOptions, onPopulationsChange]);
+  const selectedPopulations = useMemo(() => populationOptions.filter(option => option.selected), [populationOptions]);
+  const handleRemovePopulation = useCallback(populationValue => () => onPopulationsChange(selectedPopulations.filter(option => option.value !== populationValue)), [selectedPopulations, onPopulationsChange]);
+
+  // The native input receives both a browse and a drop, and fires change for each.
+  const handleFileChange = useCallback(event => {
+    const file = event.target.files && event.target.files[0];
+    if (disabled || loading || !file) return;
+    onUpload(file);
+  }, [disabled, loading, onUpload]);
+
+  // The loader's cross cancels the check: the file is dropped, as with Remove.
+  const handleCancelCheck = useCallback(() => {
+    if (onRemoveFile) onRemoveFile();
+  }, [onRemoveFile]);
+  const availableSuggestions = useMemo(() => suggestions.filter(suggestion => !selected.some(learner => learner.id === suggestion.id)), [suggestions, selected]);
+  const handleSearch = useCallback(event => onSearch(event.target.value), [onSearch]);
+  const handleAdd = useCallback(({
+    suggestion
+  }) => {
+    const learner = availableSuggestions.find(item => item.id === suggestion.value);
+    if (learner) onAdd(learner);
+  }, [availableSuggestions, onAdd]);
+  const handleRemove = useCallback(id => () => onRemove(id), [onRemove]);
+  return /*#__PURE__*/React.createElement("section", {
+    className: style.container,
+    "data-name": "assignment-audience",
+    "aria-label": title
+  }, /*#__PURE__*/React.createElement(Title, {
+    type: "form-group",
+    titleSize: "xl-strong",
+    title: title,
+    subtitle: subtitle,
+    headingLevel: 2
+  }), /*#__PURE__*/React.createElement(Block, {
+    name: "everyone",
+    title: everyone.title
+  }, /*#__PURE__*/React.createElement(InputSwitch, {
+    title: everyone.label,
+    value: everyone.value,
+    onChange: onEveryoneChange,
+    theme: "coorpmanager",
+    "data-name": "assignment-everyone",
+    "aria-label": everyone.label
+  }), disabled ? /*#__PURE__*/React.createElement("p", {
+    id: explanationId,
+    className: style.explanation
+  }, disabledExplanation) : null), /*#__PURE__*/React.createElement("fieldset", {
+    disabled: disabled,
+    "aria-describedby": disabled && disabledExplanation ? explanationId : undefined,
+    className: style.sources,
+    "data-name": "audience-sources"
+  }, /*#__PURE__*/React.createElement(Block, {
+    name: "populations",
+    title: populations.title,
+    subtitle: populations.subtitle
+  }, /*#__PURE__*/React.createElement(SelectMultiple, {
+    title: populations.label,
+    options: populations.options,
+    multiple: true,
+    theme: "coorpmanager",
+    disabled: disabled,
+    onChange: handlePopulations
+  }), selectedPopulations.length > 0 ? /*#__PURE__*/React.createElement("div", {
+    className: style.chips,
+    "data-name": "population-chips"
+  }, selectedPopulations.map(option => /*#__PURE__*/React.createElement(Chip, {
+    key: option.value,
+    text: option.name,
+    subText: option.count === undefined ? undefined : `${option.count}`,
+    selected: true,
+    customIcon: disabled ? 'none' : 'times',
+    ariaLabel: disabled ? undefined : chipLabel(populations.removeLabel, option.name),
+    onClick: disabled ? undefined : handleRemovePopulation(option.value)
+  }))) : null), /*#__PURE__*/React.createElement(Block, {
+    name: "upload",
+    title: upload.title,
+    subtitle: upload.subtitle,
+    button: upload.templateLink ? {
+      type: 'text',
+      label: upload.templateLink.label,
+      link: disabled ? undefined : {
+        href: upload.templateLink.href,
+        download: true
+      },
+      disabled,
+      'data-name': 'upload-template-link',
+      customStyle: FIT_CONTENT
+    } : undefined
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.upload
+  }, upload.templatePreview ? /*#__PURE__*/React.createElement(TemplatePreview, upload.templatePreview) : null, /*#__PURE__*/React.createElement("div", {
+    className: upload.status === 'done' ? style.uploadMain : style.dropzone,
+    "aria-busy": loading,
+    "aria-live": "polite",
+    "data-name": "upload-dropzone"
+  }, upload.status === 'done' ? /*#__PURE__*/React.createElement(UploadResult, upload) : /*#__PURE__*/React.createElement(InputFileDraggable, {
+    name: "assignment-audience-file",
+    filesTypes: ACCEPTED_FILES,
+    description: upload.dropzone?.description,
+    uploadLabel: upload.dropzone?.browse,
+    errorButtonLabel: upload.dropzone?.browse,
+    dragAndDropLabel: upload.dropzone?.dropLabel,
+    loadingLabel: upload.dropzone?.loadingLabel,
+    loading: loading,
+    disabled: disabled,
+    error: upload.status === 'error' ? upload.error : '',
+    onChange: handleFileChange,
+    onReset: handleCancelCheck
+  })))), /*#__PURE__*/React.createElement(Block, {
+    name: "individuals",
+    title: individuals.title
+  }, /*#__PURE__*/React.createElement(Autocomplete, {
+    title: individuals.placeholder,
+    theme: "coorpmanager",
+    value: value,
+    suggestions: availableSuggestions.map(learner => ({
+      name: `${learner.label} · ${learner.login}`,
+      value: learner.id
+    })),
+    onInput: handleSearch,
+    onSuggestionSelected: handleAdd
+  }), selected.length > 0 ? /*#__PURE__*/React.createElement("div", {
+    className: style.chips
+  }, selected.map(learner => /*#__PURE__*/React.createElement(Chip, {
+    key: learner.id,
+    text: learner.label,
+    subText: learner.login,
+    selected: true,
+    customIcon: disabled ? 'none' : 'times',
+    ariaLabel: disabled ? undefined : chipLabel(individuals.removeLabel, learner.label),
+    onClick: disabled ? undefined : handleRemove(learner.id)
+  }))) : null)), /*#__PURE__*/React.createElement("div", {
+    className: style.total,
+    "data-name": "estimated-audience",
+    "aria-live": "polite"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.totalLabel
+  }, total.label), total.detail ? /*#__PURE__*/React.createElement("span", {
+    className: style.muted
+  }, total.detail) : null));
+};
+AssignmentAudience.propTypes = process.env.NODE_ENV !== "production" ? AssignmentAudiencePropTypes : {};
+export default AssignmentAudience;
+//# sourceMappingURL=index.js.map

package/es/organism/assignment-audience/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useCallback","useMemo","uniqueId","InputSwitch","SelectMultiple","InputFileDraggable","Autocomplete","Title","Chip","UploadResult","AssignmentAudiencePropTypes","style","FIT_CONTENT","width","ACCEPTED_FILES","join","Block","name","title","subtitle","button","children","createElement","className","block","blockHead","type","titleSize","headingLevel","TemplatePreview","header","rows","templatePreview","templateHeader","templateRows","map","row","key","chipLabel","removeLabel","undefined","AssignmentAudience","disabledExplanation","everyone","populations","upload","individuals","total","disabled","value","loading","status","onChange","onEveryoneChange","options","populationOptions","onPopulationsChange","onUpload","onRemove","onRemoveFile","suggestions","selected","onSearch","onAdd","explanationId","handlePopulations","choices","filter","option","some","choice","selectedPopulations","handleRemovePopulation","populationValue","handleFileChange","event","file","target","files","handleCancelCheck","availableSuggestions","suggestion","learner","id","handleSearch","handleAdd","find","item","handleRemove","container","label","theme","explanation","sources","multiple","length","chips","text","subText","count","customIcon","ariaLabel","onClick","templateLink","link","href","download","customStyle","uploadMain","dropzone","filesTypes","description","uploadLabel","browse","errorButtonLabel","dragAndDropLabel","dropLabel","loadingLabel","error","onReset","placeholder","login","onInput","onSuggestionSelected","totalLabel","detail","muted","propTypes","process","env","NODE_ENV"],"sources":["../../../src/organism/assignment-audience/index.tsx"],"sourcesContent":["import React, {useCallback, useMemo} from 'react';\nimport uniqueId from 'lodash/fp/uniqueId';\nimport InputSwitch from '../../atom/input-switch';\nimport SelectMultiple from '../../molecule/select-multiple';\nimport InputFileDraggable from '../../atom/input-file-draggable';\nimport Autocomplete from '../../atom/autocomplete';\nimport Title from '../../atom/title';\nimport Chip from '../../atom/chip';\nimport UploadResult from './upload-result';\nimport AssignmentAudiencePropTypes, {\n  AssignmentAudienceProps,\n  Learner,\n  PopulationOption\n} from './types';\nimport style from './style.css';\n\n// ButtonLink is full width by default: in the Title row it would squeeze the title column.\nconst FIT_CONTENT = {width: 'fit-content'};\n\n// csv, xls and xlsx, as the types FilesPropType knows\nconst ACCEPTED_FILES = [\n  'text/csv',\n  'application/vnd.ms-excel',\n  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'\n].join(',');\n\ntype BlockProps = {\n  name: string;\n  title?: string;\n  subtitle?: string;\n  // The Title's right-hand ButtonLink\n  button?: Record<string, unknown>;\n  children?: React.ReactNode;\n};\n\nconst Block = ({name, title, subtitle, button, children}: BlockProps) => (\n  <section data-name={name} className={style.block}>\n    {title ? (\n      <div className={style.blockHead}>\n        <Title\n          type=\"form-group\"\n          titleSize=\"medium\"\n          title={title}\n          subtitle={subtitle}\n          button={button}\n          headingLevel={3}\n        />\n      </div>\n    ) : null}\n    {children}\n  </section>\n);\n\n// A sample of the file to upload: its one column, a header and two example logins.\nconst TemplatePreview = ({header, rows = []}: {header: string; rows?: string[]}) => (\n  <div className={style.templatePreview} data-name=\"upload-template-preview\">\n    <div className={style.templateHeader}>{header}</div>\n    <ul className={style.templateRows}>\n      {rows.map(row => (\n        <li key={row}>{row}</li>\n      ))}\n    </ul>\n  </div>\n);\n\n// A removable chip says what a click does, e.g. « Remove Camille Durand »; no label, its text.\nconst chipLabel = (removeLabel: string | undefined, name: string) =>\n  removeLabel ? `${removeLabel} ${name}` : undefined;\n\nconst AssignmentAudience = ({\n  title,\n  subtitle,\n  disabledExplanation,\n  everyone,\n  populations,\n  upload,\n  individuals,\n  total\n}: AssignmentAudienceProps) => {\n  const disabled = everyone.value;\n  const loading = upload.status === 'loading';\n  const {onChange: onEveryoneChange} = everyone;\n  const {options: populationOptions, onChange: onPopulationsChange} = populations;\n  const {onUpload, onRemove: onRemoveFile} = upload;\n  const {value = '', suggestions = [], selected = [], onSearch, onAdd, onRemove} = individuals;\n  const explanationId = useMemo(() => uniqueId('assignment-audience-explanation-'), []);\n  const handlePopulations = useCallback(\n    (choices: PopulationOption[]) =>\n      onPopulationsChange(\n        populationOptions\n          .filter(option => choices.some(choice => choice.value === option.value))\n          .map(option => ({...option, selected: true}))\n      ),\n    [populationOptions, onPopulationsChange]\n  );\n  const selectedPopulations = useMemo(\n    () => populationOptions.filter(option => option.selected),\n    [populationOptions]\n  );\n  const handleRemovePopulation = useCallback(\n    (populationValue: string) => () =>\n      onPopulationsChange(selectedPopulations.filter(option => option.value !== populationValue)),\n    [selectedPopulations, onPopulationsChange]\n  );\n\n  // The native input receives both a browse and a drop, and fires change for each.\n  const handleFileChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const file = event.target.files && event.target.files[0];\n      if (disabled || loading || !file) return;\n      onUpload(file);\n    },\n    [disabled, loading, onUpload]\n  );\n\n  // The loader's cross cancels the check: the file is dropped, as with Remove.\n  const handleCancelCheck = useCallback(() => {\n    if (onRemoveFile) onRemoveFile();\n  }, [onRemoveFile]);\n\n  const availableSuggestions = useMemo(\n    () => suggestions.filter(suggestion => !selected.some(learner => learner.id === suggestion.id)),\n    [suggestions, selected]\n  );\n  const handleSearch = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => onSearch(event.target.value),\n    [onSearch]\n  );\n  const handleAdd = useCallback(\n    ({suggestion}: {suggestion: {value: string}}) => {\n      const learner = availableSuggestions.find(item => item.id === suggestion.value);\n      if (learner) onAdd(learner);\n    },\n    [availableSuggestions, onAdd]\n  );\n  const handleRemove = useCallback((id: string) => () => onRemove(id), [onRemove]);\n\n  return (\n    <section className={style.container} data-name=\"assignment-audience\" aria-label={title}>\n      <Title\n        type=\"form-group\"\n        titleSize=\"xl-strong\"\n        title={title}\n        subtitle={subtitle}\n        headingLevel={2}\n      />\n      <Block name=\"everyone\" title={everyone.title}>\n        <InputSwitch\n          title={everyone.label}\n          value={everyone.value}\n          onChange={onEveryoneChange}\n          theme=\"coorpmanager\"\n          data-name=\"assignment-everyone\"\n          aria-label={everyone.label}\n        />\n        {disabled ? (\n          <p id={explanationId} className={style.explanation}>\n            {disabledExplanation}\n          </p>\n        ) : null}\n      </Block>\n      <fieldset\n        disabled={disabled}\n        aria-describedby={disabled && disabledExplanation ? explanationId : undefined}\n        className={style.sources}\n        data-name=\"audience-sources\"\n      >\n        <Block name=\"populations\" title={populations.title} subtitle={populations.subtitle}>\n          <SelectMultiple\n            title={populations.label}\n            options={populations.options}\n            multiple\n            theme=\"coorpmanager\"\n            disabled={disabled}\n            onChange={handlePopulations}\n          />\n          {selectedPopulations.length > 0 ? (\n            <div className={style.chips} data-name=\"population-chips\">\n              {selectedPopulations.map(option => (\n                <Chip\n                  key={option.value}\n                  text={option.name}\n                  subText={option.count === undefined ? undefined : `${option.count}`}\n                  selected\n                  customIcon={disabled ? 'none' : 'times'}\n                  ariaLabel={disabled ? undefined : chipLabel(populations.removeLabel, option.name)}\n                  onClick={disabled ? undefined : handleRemovePopulation(option.value)}\n                />\n              ))}\n            </div>\n          ) : null}\n        </Block>\n        <Block\n          name=\"upload\"\n          title={upload.title}\n          subtitle={upload.subtitle}\n          button={\n            upload.templateLink\n              ? {\n                  type: 'text',\n                  label: upload.templateLink.label,\n                  link: disabled ? undefined : {href: upload.templateLink.href, download: true},\n                  disabled,\n                  'data-name': 'upload-template-link',\n                  customStyle: FIT_CONTENT\n                }\n              : undefined\n          }\n        >\n          <div className={style.upload}>\n            {upload.templatePreview ? <TemplatePreview {...upload.templatePreview} /> : null}\n            <div\n              className={upload.status === 'done' ? style.uploadMain : style.dropzone}\n              aria-busy={loading}\n              aria-live=\"polite\"\n              data-name=\"upload-dropzone\"\n            >\n              {upload.status === 'done' ? (\n                <UploadResult {...upload} />\n              ) : (\n                <InputFileDraggable\n                  name=\"assignment-audience-file\"\n                  filesTypes={ACCEPTED_FILES}\n                  description={upload.dropzone?.description}\n                  uploadLabel={upload.dropzone?.browse}\n                  errorButtonLabel={upload.dropzone?.browse}\n                  dragAndDropLabel={upload.dropzone?.dropLabel}\n                  loadingLabel={upload.dropzone?.loadingLabel}\n                  loading={loading}\n                  disabled={disabled}\n                  error={upload.status === 'error' ? upload.error : ''}\n                  onChange={handleFileChange}\n                  onReset={handleCancelCheck}\n                />\n              )}\n            </div>\n          </div>\n        </Block>\n        <Block name=\"individuals\" title={individuals.title}>\n          <Autocomplete\n            title={individuals.placeholder}\n            theme=\"coorpmanager\"\n            value={value}\n            suggestions={availableSuggestions.map(learner => ({\n              name: `${learner.label} · ${learner.login}`,\n              value: learner.id\n            }))}\n            onInput={handleSearch}\n            onSuggestionSelected={handleAdd}\n          />\n          {selected.length > 0 ? (\n            <div className={style.chips}>\n              {selected.map((learner: Learner) => (\n                <Chip\n                  key={learner.id}\n                  text={learner.label}\n                  subText={learner.login}\n                  selected\n                  customIcon={disabled ? 'none' : 'times'}\n                  ariaLabel={\n                    disabled ? undefined : chipLabel(individuals.removeLabel, learner.label)\n                  }\n                  onClick={disabled ? undefined : handleRemove(learner.id)}\n                />\n              ))}\n            </div>\n          ) : null}\n        </Block>\n      </fieldset>\n      <div className={style.total} data-name=\"estimated-audience\" aria-live=\"polite\">\n        <span className={style.totalLabel}>{total.label}</span>\n        {total.detail ? <span className={style.muted}>{total.detail}</span> : null}\n      </div>\n    </section>\n  );\n};\n\nAssignmentAudience.propTypes = AssignmentAudiencePropTypes;\n\nexport default AssignmentAudience;\n"],"mappings":"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","ignoreList":[]}

package/es/organism/assignment-audience/style.css

@@ -0,0 +1,115 @@
+@value colors: "../../variables/colors.css";
+@value cm_grey_75, cm_grey_100, cm_grey_200, cm_grey_500, cm_grey_700 from colors;
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  min-width: 0;
+  width: 100%;
+  font-family: Gilroy;
+  color: cm_grey_700;
+}
+
+.muted {
+  margin: 4px 0 0;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: cm_grey_500;
+}
+
+.block {
+  min-width: 0;
+}
+
+.blockHead {
+  margin-bottom: 12px;
+}
+
+.explanation {
+  margin: 12px 0 0;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.sources {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.sources:disabled {
+  opacity: 0.5;
+}
+
+/* The template preview column, then the uploader or the uploaded file */
+.upload {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+}
+
+.uploadMain {
+  flex: 1;
+  min-width: 0;
+}
+
+/* The Coorpmanager uploader fills its parent's height */
+.dropzone {
+  composes: uploadMain;
+  height: 220px;
+}
+
+.templatePreview {
+  flex: 0 0 150px;
+  border: 1px solid cm_grey_200;
+  border-radius: 8px;
+  overflow: hidden;
+  font-family: Menlo, Consolas, monospace;
+  font-size: 12px;
+}
+
+.templateHeader,
+.templateRows li {
+  padding: 6px 10px;
+}
+
+.templateHeader {
+  background-color: cm_grey_75;
+  font-weight: 700;
+}
+
+.templateRows {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.templateRows li {
+  border-top: 1px solid cm_grey_100;
+}
+
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.total {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding-top: 16px;
+  border-top: 1px solid cm_grey_100;
+}
+
+.totalLabel {
+  font-size: 16px;
+  font-weight: 700;
+}