@yamada-ui/react/dist/cjs/components/data-list/data-list.cjs.map

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

{"version":3,"file":"data-list.cjs","names":["createSlotComponent","dataListStyle","col","pickChildren","getValidChildren","styled","customTerms","customDescriptions","omitChildren"],"sources":["../../../../src/components/data-list/data-list.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { DataListStyle } from \"./data-list.style\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport {\n  getValidChildren,\n  isArray,\n  isEmpty,\n  omitChildren,\n  pickChildren,\n} from \"../../utils\"\nimport { dataListStyle } from \"./data-list.style\"\n\nexport interface DataListItem extends DataListItemProps {}\n\nexport interface DataListRootProps\n  extends HTMLStyledProps<\"dl\">,\n    ThemeProps<DataListStyle> {\n  /**\n   * If provided, generate elements based on items.\n   */\n  items?: DataListItem[]\n  /**\n   * The props for the data list description component.\n   */\n  descriptionProps?: DataListDescriptionProps\n  /**\n   * The props for the data list term component.\n   */\n  termProps?: DataListTermProps\n}\n\ninterface ComponentContext\n  extends Pick<DataListRootProps, \"descriptionProps\" | \"termProps\"> {}\n\nconst {\n  ComponentContext,\n  PropsContext: DataListPropsContext,\n  useComponentContext,\n  usePropsContext: useDataListPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<DataListRootProps, DataListStyle, ComponentContext>(\n  \"data-list\",\n  dataListStyle,\n)\n\nexport { DataListPropsContext, useDataListPropsContext }\n\n/**\n * `DataList` is used to display a list of data items.\n *\n * @see https://yamada-ui.com/docs/components/data-list\n */\nexport const DataListRoot = withProvider<\"dl\", DataListRootProps>(\n  ({ style, children, items = [], descriptionProps, termProps, ...rest }) => {\n    const col = useMemo(() => {\n      let col = 0\n\n      if (children) {\n        const validChildren = getValidChildren(children)\n        const dataListItems = pickChildren(validChildren, DataListItem)\n\n        dataListItems.forEach(({ props }) => {\n          const validChildren = getValidChildren(props.children)\n          const pickedChildren = pickChildren(\n            validChildren,\n            DataListTerm,\n            DataListDescription,\n          )\n\n          col = Math.max(col, pickedChildren.length)\n        })\n      } else {\n        items.forEach(({ description, term }) => {\n          const termCount = !term ? 0 : isArray(term) ? term.length : 1\n          const descriptionCount = !description\n            ? 0\n            : isArray(description)\n              ? description.length\n              : 1\n\n          col = Math.max(col, termCount + descriptionCount)\n        })\n      }\n\n      return col\n    }, [children, items])\n    const computedChildren = useMemo(\n      () =>\n        items.map((props, index) => <DataListItem key={index} {...props} />),\n      [items],\n    )\n    const context = useMemo(\n      () => ({\n        descriptionProps,\n        termProps,\n      }),\n      [descriptionProps, termProps],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        <styled.dl style={{ \"--col\": col, ...style }} {...rest}>\n          {children ?? computedChildren}\n        </styled.dl>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface DataListItemProps extends HTMLStyledProps {\n  /**\n   * The data list description to use.\n   */\n  description?: ReactNode | ReactNode[]\n  /**\n   * The data list term to use.\n   */\n  term?: ReactNode | ReactNode[]\n  /**\n   * The props for the data list description component.\n   */\n  descriptionProps?: DataListDescriptionProps\n  /**\n   * The props for the data list term component.\n   */\n  termProps?: DataListTermProps\n}\n\nexport const DataListItem = withContext<\"div\", DataListItemProps>(\n  ({\n    children,\n    description,\n    term,\n    descriptionProps: customDescriptionProps,\n    termProps: customTermProps,\n    ...rest\n  }) => {\n    const { descriptionProps, termProps } = useComponentContext()\n\n    const [omittedChildren, customTerms, customDescriptions] = useMemo(() => {\n      const validChildren = getValidChildren(children)\n\n      if (isEmpty(validChildren)) return [children]\n\n      const customTerms = pickChildren(validChildren, DataListTerm)\n      const customDescriptions = pickChildren(\n        validChildren,\n        DataListDescription,\n      )\n      const omittedChildren = omitChildren(\n        validChildren,\n        DataListTerm,\n        DataListDescription,\n      )\n\n      return [omittedChildren, customTerms, customDescriptions] as const\n    }, [children])\n\n    return (\n      <styled.div {...rest}>\n        {!isEmpty(customTerms) ? (\n          customTerms\n        ) : isArray(term) ? (\n          term.map((item, index) => (\n            <DataListTerm key={index} {...termProps} {...customTermProps}>\n              {item}\n            </DataListTerm>\n          ))\n        ) : (\n          <DataListTerm {...termProps} {...customTermProps}>\n            {term}\n          </DataListTerm>\n        )}\n\n        {!isEmpty(customDescriptions) ? (\n          customDescriptions\n        ) : isArray(description) ? (\n          description.map((item, index) => (\n            <DataListDescription\n              key={index}\n              {...descriptionProps}\n              {...customDescriptionProps}\n            >\n              {item}\n            </DataListDescription>\n          ))\n        ) : (\n          <DataListDescription\n            {...descriptionProps}\n            {...customDescriptionProps}\n          >\n            {description}\n          </DataListDescription>\n        )}\n\n        {omittedChildren}\n      </styled.div>\n    )\n  },\n  \"item\",\n)()\n\nexport interface DataListTermProps extends HTMLStyledProps<\"dt\"> {}\n\nexport const DataListTerm = withContext<\"dt\", DataListTermProps>(\"dt\", \"term\")()\n\nexport interface DataListDescriptionProps extends HTMLStyledProps<\"dd\"> {}\n\nexport const DataListDescription = withContext<\"dd\", DataListDescriptionProps>(\n  \"dd\",\n  \"description\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;AAsCA,MAAM,EACJ,kBACA,cAAc,sBACd,qBACA,iBAAiB,yBACjB,aACA,iBACEA,6CACF,aACAC,sCACD;;;;;;AASD,MAAa,eAAe,cACzB,EAAE,OAAO,UAAU,QAAQ,EAAE,EAAE,kBAAkB,UAAW,GAAG,WAAW;CACzE,MAAM,+BAAoB;EACxB,IAAIC,QAAM;AAEV,MAAI,SAIF,CAFsBC,8BADAC,kCAAiB,SAAS,EACE,aAAa,CAEjD,SAAS,EAAE,YAAY;GAEnC,MAAM,iBAAiBD,8BADDC,kCAAiB,MAAM,SAAS,EAGpD,cACA,oBACD;AAED,WAAM,KAAK,IAAIF,OAAK,eAAe,OAAO;IAC1C;MAEF,OAAM,SAAS,EAAE,aAAa,WAAW;GACvC,MAAM,YAAY,CAAC,OAAO,mDAAY,KAAK,GAAG,KAAK,SAAS;GAC5D,MAAM,mBAAmB,CAAC,cACtB,mDACQ,YAAY,GAClB,YAAY,SACZ;AAEN,WAAM,KAAK,IAAIA,OAAK,YAAY,iBAAiB;IACjD;AAGJ,SAAOA;IACN,CAAC,UAAU,MAAM,CAAC;CACrB,MAAM,4CAEF,MAAM,KAAK,OAAO,UAAU,2CAAC,gBAAyB,GAAI,SAAX,MAAoB,CAAC,EACtE,CAAC,MAAM,CACR;AASD,QACE,2CAAC;EAAiB,iCARX;GACL;GACA;GACD,GACD,CAAC,kBAAkB,UAAU,CAC9B;YAIG,2CAACG,uBAAO;GAAG,OAAO;IAAE,SAAS;IAAK,GAAG;IAAO;GAAE,GAAI;aAC/C,YAAY;IACH;GACK;GAGvB,OACD,EAAE;AAqBH,MAAa,eAAe,aACzB,EACC,UACA,aACA,MACA,kBAAkB,wBAClB,WAAW,gBACX,GAAG,WACC;CACJ,MAAM,EAAE,kBAAkB,cAAc,qBAAqB;CAE7D,MAAM,CAAC,iBAAiB,aAAa,+CAAoC;EACvE,MAAM,gBAAgBD,kCAAiB,SAAS;AAEhD,qDAAY,cAAc,CAAE,QAAO,CAAC,SAAS;EAE7C,MAAME,gBAAcH,8BAAa,eAAe,aAAa;EAC7D,MAAMI,uBAAqBJ,8BACzB,eACA,oBACD;AAOD,SAAO;GANiBK,8BACtB,eACA,cACA,oBACD;GAEwBF;GAAaC;GAAmB;IACxD,CAAC,SAAS,CAAC;AAEd,QACE,4CAACF,uBAAO;EAAI,GAAI;;GACb,gDAAS,YAAY,GACpB,6DACU,KAAK,GACf,KAAK,KAAK,MAAM,UACd,2CAAC;IAAyB,GAAI;IAAW,GAAI;cAC1C;MADgB,MAEJ,CACf,GAEF,2CAAC;IAAa,GAAI;IAAW,GAAI;cAC9B;KACY;GAGhB,gDAAS,mBAAmB,GAC3B,oEACU,YAAY,GACtB,YAAY,KAAK,MAAM,UACrB,2CAAC;IAEC,GAAI;IACJ,GAAI;cAEH;MAJI,MAKe,CACtB,GAEF,2CAAC;IACC,GAAI;IACJ,GAAI;cAEH;KACmB;GAGvB;;GACU;GAGjB,OACD,EAAE;AAIH,MAAa,eAAe,YAAqC,MAAM,OAAO,EAAE;AAIhF,MAAa,sBAAsB,YACjC,MACA,cACD,EAAE"}